From 1485ec7392a03a9b3a63262e0ecf0d90f0713251 Mon Sep 17 00:00:00 2001
From: Dan <danjm.com@gmail.com>
Date: Tue, 29 Aug 2017 11:25:11 -0230
Subject: Move currency toggle to its own component.

---
 ui/app/components/send/currency-toggle.js |  26 ++++++++
 ui/app/components/send/gas-tooltip.js     | 102 ++++++++++++++++++++++++++++++
 2 files changed, 128 insertions(+)
 create mode 100644 ui/app/components/send/currency-toggle.js
 create mode 100644 ui/app/components/send/gas-tooltip.js

(limited to 'ui/app/components/send')

diff --git a/ui/app/components/send/currency-toggle.js b/ui/app/components/send/currency-toggle.js
new file mode 100644
index 000000000..37c026542
--- /dev/null
+++ b/ui/app/components/send/currency-toggle.js
@@ -0,0 +1,26 @@
+const Component = require('react').Component
+const h = require('react-hyperscript')
+const inherits = require('util').inherits
+module.exports = CurrencyToggle
+
+inherits(CurrencyToggle, Component)
+function CurrencyToggle () {
+  Component.call(this)
+}
+
+CurrencyToggle.prototype.render = function () {
+  const { onClick, currentCurrency } = this.props
+
+  return h('span', {}, [
+    h('span', {
+      className: currentCurrency === 'ETH' ? 'selected-currency' : 'unselected-currency',
+      onClick: () => onClick('ETH') 
+    }, ['ETH']),
+    '<>',
+    h('span', {
+      className: currentCurrency === 'USD' ? 'selected-currency' : 'unselected-currency',
+      onClick: () => onClick('USD'), 
+    }, ['USD']),
+  ]) //holding on icon from design
+}
+
diff --git a/ui/app/components/send/gas-tooltip.js b/ui/app/components/send/gas-tooltip.js
new file mode 100644
index 000000000..472a8e287
--- /dev/null
+++ b/ui/app/components/send/gas-tooltip.js
@@ -0,0 +1,102 @@
+const Component = require('react').Component
+const h = require('react-hyperscript')
+const inherits = require('util').inherits
+const InputNumber = require('../input-number.js')
+const findDOMNode = require('react-dom').findDOMNode
+
+module.exports = GasTooltip
+
+inherits(GasTooltip, Component)
+function GasTooltip () {
+  Component.call(this)
+  this.state = {
+    gasLimit: 0,
+    gasPrice: 0,
+  }
+
+  this.updateGasPrice = this.updateGasPrice.bind(this);
+  this.updateGasLimit = this.updateGasLimit.bind(this);
+  this.onClose = this.onClose.bind(this);
+}
+
+GasTooltip.prototype.componentWillMount = function () {
+  const { gasPrice = 0, gasLimit = 0} = this.props
+  
+  this.setState({
+    gasPrice: parseInt(gasPrice, 16) / 1000000000,
+    gasLimit: parseInt(gasLimit, 16),
+  })
+}
+
+GasTooltip.prototype.updateGasPrice = function (newPrice) {
+  const { onFeeChange } = this.props
+  const { gasLimit } = this.state
+
+  this.setState({ gasPrice: newPrice })
+  onFeeChange({
+    gasLimit: gasLimit.toString(16),
+    gasPrice: (newPrice * 1000000000).toString(16)
+  })
+}
+
+GasTooltip.prototype.updateGasLimit = function (newLimit) {
+  const { onFeeChange } = this.props
+  const { gasPrice } = this.state
+
+  this.setState({ gasLimit: newLimit })
+  onFeeChange({
+    gasLimit: newLimit.toString(16),
+    gasPrice: (gasPrice * 1000000000).toString(16)
+  })
+}
+
+GasTooltip.prototype.onClose = function (e) {
+  e.stopPropagation();
+  this.props.onClose();
+}
+
+GasTooltip.prototype.render = function () {
+  const { position, title, children, className } = this.props
+  const { gasPrice, gasLimit } = this.state
+
+  return h('div.gas-tooltip', {}, [
+    h('div.gas-tooltip-close-area', {
+      onClick: this.onClose
+    }),
+    h('div.customize-gas-tooltip-container', {}, [
+      h('div.customize-gas-tooltip', {}, [
+        h('div.gas-tooltip-header.gas-tooltip-label', {}, ['Customize Gas']),
+        h('div.gas-tooltip-input-label', {}, [
+          h('span.gas-tooltip-label', {}, ['Gas Price']),
+          h('i.fa.fa-info-circle')
+        ]),
+        h(InputNumber, {
+          unitLabel: 'GWEI',
+          step: 1,
+          min: 0,
+          placeholder: '0',
+          initValue: gasPrice,
+          onChange: (newPrice) => this.updateGasPrice(newPrice), 
+        }),
+        h('div.gas-tooltip-input-label', {
+          style: {
+            'marginTop': '81px',
+          },
+        }, [
+          h('span.gas-tooltip-label', {}, ['Gas Limit']),
+          h('i.fa.fa-info-circle')
+        ]),
+        h(InputNumber, {
+          unitLabel: 'UNITS',
+          step: 1,
+          min: 0,
+          placeholder: '0',
+          initValue: gasLimit,
+          onChange: (newLimit) => this.updateGasLimit(newLimit),  
+        }),
+      ]),
+      h('div.gas-tooltip-arrow', {}),
+    ])
+  ])
+}
+
-- 
cgit 


From 5a7e4c4e76fd92b9f797fd2088b00ce6dc4fd47a Mon Sep 17 00:00:00 2001
From: Dan <danjm.com@gmail.com>
Date: Tue, 29 Aug 2017 11:39:07 -0230
Subject: Move gas fee to a separate component.

---
 ui/app/components/send/gas-fee-display.js | 53 +++++++++++++++++++++++++++++++
 1 file changed, 53 insertions(+)
 create mode 100644 ui/app/components/send/gas-fee-display.js

(limited to 'ui/app/components/send')

diff --git a/ui/app/components/send/gas-fee-display.js b/ui/app/components/send/gas-fee-display.js
new file mode 100644
index 000000000..3add95394
--- /dev/null
+++ b/ui/app/components/send/gas-fee-display.js
@@ -0,0 +1,53 @@
+const Component = require('react').Component
+const h = require('react-hyperscript')
+const inherits = require('util').inherits
+const EthBalance = require('../eth-balance')
+const FiatValue = require('../fiat-value')
+const { getTxFeeBn } = require('../../util')
+
+module.exports = GasFeeDisplay
+
+inherits(GasFeeDisplay, Component)
+function GasFeeDisplay () {
+  Component.call(this)
+}
+
+GasFeeDisplay.prototype.render = function () {
+  const {
+    currentCurrency,
+    conversionRate,
+    gas,
+    gasPrice,
+    blockGasLimit,
+  } = this.props
+
+  const renderableCurrencies = {
+    USD: h(FiatValue, {
+      value: getTxFeeBn(gas, gasPrice, blockGasLimit),
+      conversionRate,
+      currentCurrency,
+      style: {
+        color: '#5d5d5d',
+        fontSize: '16px',
+        fontFamily: 'DIN OT',
+        lineHeight: '22.4px'
+      }
+    }),
+    ETH: h(EthBalance, {
+      value: getTxFeeBn(gas, gasPrice, blockGasLimit),
+      currentCurrency,
+      conversionRate,
+      showFiat: false,
+      hideTooltip: true,
+      styleOveride: {
+        color: '#5d5d5d',
+        fontSize: '16px',
+        fontFamily: 'DIN OT',
+        lineHeight: '22.4px'
+      }
+    }),
+  }
+
+  return renderableCurrencies[currentCurrency];
+}
+
-- 
cgit 


From 3ea841e27621a8e9972677e46dbd8e3f0c002632 Mon Sep 17 00:00:00 2001
From: Dan <danjm.com@gmail.com>
Date: Wed, 30 Aug 2017 16:07:46 -0230
Subject: Refactor gas-fee-display to include usd and eth fee displays as
 separate components.

---
 ui/app/components/send/eth-fee-display.js | 37 ++++++++++++++++++++++
 ui/app/components/send/gas-fee-display.js | 51 +++++++++++++------------------
 ui/app/components/send/usd-fee-display.js | 35 +++++++++++++++++++++
 3 files changed, 93 insertions(+), 30 deletions(-)
 create mode 100644 ui/app/components/send/eth-fee-display.js
 create mode 100644 ui/app/components/send/usd-fee-display.js

(limited to 'ui/app/components/send')

diff --git a/ui/app/components/send/eth-fee-display.js b/ui/app/components/send/eth-fee-display.js
new file mode 100644
index 000000000..3dcb711ce
--- /dev/null
+++ b/ui/app/components/send/eth-fee-display.js
@@ -0,0 +1,37 @@
+const Component = require('react').Component
+const h = require('react-hyperscript')
+const inherits = require('util').inherits
+const EthBalance = require('../eth-balance')
+const { getTxFeeBn } = require('../../util')
+
+module.exports = EthFeeDisplay
+
+inherits(EthFeeDisplay, Component)
+function EthFeeDisplay () {
+  Component.call(this)
+}
+
+EthFeeDisplay.prototype.render = function () {
+  const {
+    currentCurrency,
+    conversionRate,
+    gas,
+    gasPrice,
+    blockGasLimit,
+  } = this.props
+
+  return h(EthBalance, {
+    value: getTxFeeBn(gas, gasPrice, blockGasLimit),
+    currentCurrency,
+    conversionRate,
+    showFiat: false,
+    hideTooltip: true,
+    styleOveride: {
+      color: '#5d5d5d',
+      fontSize: '16px',
+      fontFamily: 'DIN OT',
+      lineHeight: '22.4px'
+    }
+  })
+}
+
diff --git a/ui/app/components/send/gas-fee-display.js b/ui/app/components/send/gas-fee-display.js
index 3add95394..5336be8a3 100644
--- a/ui/app/components/send/gas-fee-display.js
+++ b/ui/app/components/send/gas-fee-display.js
@@ -1,9 +1,8 @@
 const Component = require('react').Component
 const h = require('react-hyperscript')
 const inherits = require('util').inherits
-const EthBalance = require('../eth-balance')
-const FiatValue = require('../fiat-value')
-const { getTxFeeBn } = require('../../util')
+const USDFeeDisplay = require('./usd-fee-display')
+const EthFeeDisplay = require('./eth-fee-display')
 
 module.exports = GasFeeDisplay
 
@@ -21,33 +20,25 @@ GasFeeDisplay.prototype.render = function () {
     blockGasLimit,
   } = this.props
 
-  const renderableCurrencies = {
-    USD: h(FiatValue, {
-      value: getTxFeeBn(gas, gasPrice, blockGasLimit),
-      conversionRate,
-      currentCurrency,
-      style: {
-        color: '#5d5d5d',
-        fontSize: '16px',
-        fontFamily: 'DIN OT',
-        lineHeight: '22.4px'
-      }
-    }),
-    ETH: h(EthBalance, {
-      value: getTxFeeBn(gas, gasPrice, blockGasLimit),
-      currentCurrency,
-      conversionRate,
-      showFiat: false,
-      hideTooltip: true,
-      styleOveride: {
-        color: '#5d5d5d',
-        fontSize: '16px',
-        fontFamily: 'DIN OT',
-        lineHeight: '22.4px'
-      }
-    }),
+  switch (currentCurrency) {
+    case 'USD':
+      return h(USDFeeDisplay, {
+        currentCurrency,
+        conversionRate,
+        gas,
+        gasPrice,
+        blockGasLimit,
+      })
+    case 'ETH':
+      return h(EthFeeDisplay, {
+        currentCurrency,
+        conversionRate,
+        gas,
+        gasPrice,
+        blockGasLimit,
+      })
+    default:
+      return h('noscript');
   }
-
-  return renderableCurrencies[currentCurrency];
 }
 
diff --git a/ui/app/components/send/usd-fee-display.js b/ui/app/components/send/usd-fee-display.js
new file mode 100644
index 000000000..012bda550
--- /dev/null
+++ b/ui/app/components/send/usd-fee-display.js
@@ -0,0 +1,35 @@
+const Component = require('react').Component
+const h = require('react-hyperscript')
+const inherits = require('util').inherits
+const FiatValue = require('../fiat-value')
+const { getTxFeeBn } = require('../../util')
+
+module.exports = USDFeeDisplay
+
+inherits(USDFeeDisplay, Component)
+function USDFeeDisplay () {
+  Component.call(this)
+}
+
+USDFeeDisplay.prototype.render = function () {
+  const {
+    currentCurrency,
+    conversionRate,
+    gas,
+    gasPrice,
+    blockGasLimit,
+  } = this.props
+
+  return h(FiatValue, {
+    value: getTxFeeBn(gas, gasPrice, blockGasLimit),
+    conversionRate,
+    currentCurrency,
+    style: {
+      color: '#5d5d5d',
+      fontSize: '16px',
+      fontFamily: 'DIN OT',
+      lineHeight: '22.4px'
+    }
+  })
+}
+
-- 
cgit 


From e7b3ef0708290a81dad5c469adaa6fab3f1c45b5 Mon Sep 17 00:00:00 2001
From: Dan <danjm.com@gmail.com>
Date: Tue, 29 Aug 2017 12:20:48 -0230
Subject: Lint fixes

---
 ui/app/components/send/currency-toggle.js |  6 +++---
 ui/app/components/send/gas-tooltip.js     | 30 ++++++++++++++----------------
 2 files changed, 17 insertions(+), 19 deletions(-)

(limited to 'ui/app/components/send')

diff --git a/ui/app/components/send/currency-toggle.js b/ui/app/components/send/currency-toggle.js
index 37c026542..d3c2222a4 100644
--- a/ui/app/components/send/currency-toggle.js
+++ b/ui/app/components/send/currency-toggle.js
@@ -14,13 +14,13 @@ CurrencyToggle.prototype.render = function () {
   return h('span', {}, [
     h('span', {
       className: currentCurrency === 'ETH' ? 'selected-currency' : 'unselected-currency',
-      onClick: () => onClick('ETH') 
+      onClick: () => onClick('ETH'),
     }, ['ETH']),
     '<>',
     h('span', {
       className: currentCurrency === 'USD' ? 'selected-currency' : 'unselected-currency',
-      onClick: () => onClick('USD'), 
+      onClick: () => onClick('USD'),
     }, ['USD']),
-  ]) //holding on icon from design
+  ]) // holding on icon from design
 }
 
diff --git a/ui/app/components/send/gas-tooltip.js b/ui/app/components/send/gas-tooltip.js
index 472a8e287..bef419e48 100644
--- a/ui/app/components/send/gas-tooltip.js
+++ b/ui/app/components/send/gas-tooltip.js
@@ -2,7 +2,6 @@ const Component = require('react').Component
 const h = require('react-hyperscript')
 const inherits = require('util').inherits
 const InputNumber = require('../input-number.js')
-const findDOMNode = require('react-dom').findDOMNode
 
 module.exports = GasTooltip
 
@@ -14,14 +13,14 @@ function GasTooltip () {
     gasPrice: 0,
   }
 
-  this.updateGasPrice = this.updateGasPrice.bind(this);
-  this.updateGasLimit = this.updateGasLimit.bind(this);
-  this.onClose = this.onClose.bind(this);
+  this.updateGasPrice = this.updateGasPrice.bind(this)
+  this.updateGasLimit = this.updateGasLimit.bind(this)
+  this.onClose = this.onClose.bind(this)
 }
 
 GasTooltip.prototype.componentWillMount = function () {
   const { gasPrice = 0, gasLimit = 0} = this.props
-  
+
   this.setState({
     gasPrice: parseInt(gasPrice, 16) / 1000000000,
     gasLimit: parseInt(gasLimit, 16),
@@ -35,7 +34,7 @@ GasTooltip.prototype.updateGasPrice = function (newPrice) {
   this.setState({ gasPrice: newPrice })
   onFeeChange({
     gasLimit: gasLimit.toString(16),
-    gasPrice: (newPrice * 1000000000).toString(16)
+    gasPrice: (newPrice * 1000000000).toString(16),
   })
 }
 
@@ -46,29 +45,28 @@ GasTooltip.prototype.updateGasLimit = function (newLimit) {
   this.setState({ gasLimit: newLimit })
   onFeeChange({
     gasLimit: newLimit.toString(16),
-    gasPrice: (gasPrice * 1000000000).toString(16)
+    gasPrice: (gasPrice * 1000000000).toString(16),
   })
 }
 
 GasTooltip.prototype.onClose = function (e) {
-  e.stopPropagation();
-  this.props.onClose();
+  e.stopPropagation()
+  this.props.onClose()
 }
 
 GasTooltip.prototype.render = function () {
-  const { position, title, children, className } = this.props
   const { gasPrice, gasLimit } = this.state
 
   return h('div.gas-tooltip', {}, [
     h('div.gas-tooltip-close-area', {
-      onClick: this.onClose
+      onClick: this.onClose,
     }),
     h('div.customize-gas-tooltip-container', {}, [
       h('div.customize-gas-tooltip', {}, [
         h('div.gas-tooltip-header.gas-tooltip-label', {}, ['Customize Gas']),
         h('div.gas-tooltip-input-label', {}, [
           h('span.gas-tooltip-label', {}, ['Gas Price']),
-          h('i.fa.fa-info-circle')
+          h('i.fa.fa-info-circle'),
         ]),
         h(InputNumber, {
           unitLabel: 'GWEI',
@@ -76,7 +74,7 @@ GasTooltip.prototype.render = function () {
           min: 0,
           placeholder: '0',
           initValue: gasPrice,
-          onChange: (newPrice) => this.updateGasPrice(newPrice), 
+          onChange: (newPrice) => this.updateGasPrice(newPrice),
         }),
         h('div.gas-tooltip-input-label', {
           style: {
@@ -84,7 +82,7 @@ GasTooltip.prototype.render = function () {
           },
         }, [
           h('span.gas-tooltip-label', {}, ['Gas Limit']),
-          h('i.fa.fa-info-circle')
+          h('i.fa.fa-info-circle'),
         ]),
         h(InputNumber, {
           unitLabel: 'UNITS',
@@ -92,11 +90,11 @@ GasTooltip.prototype.render = function () {
           min: 0,
           placeholder: '0',
           initValue: gasLimit,
-          onChange: (newLimit) => this.updateGasLimit(newLimit),  
+          onChange: (newLimit) => this.updateGasLimit(newLimit),
         }),
       ]),
       h('div.gas-tooltip-arrow', {}),
-    ])
+    ]),
   ])
 }
 
-- 
cgit 


From 062e67bff83fd79647231be6e2448d35b5f312f9 Mon Sep 17 00:00:00 2001
From: Chi Kei Chan <chikeichan@gmail.com>
Date: Mon, 11 Sep 2017 22:14:09 -0700
Subject: Add buttons; handle back; add yarn.lock

---
 ui/app/components/send/currency-toggle.js | 19 ++++++++++++++-----
 1 file changed, 14 insertions(+), 5 deletions(-)

(limited to 'ui/app/components/send')

diff --git a/ui/app/components/send/currency-toggle.js b/ui/app/components/send/currency-toggle.js
index d3c2222a4..adaade301 100644
--- a/ui/app/components/send/currency-toggle.js
+++ b/ui/app/components/send/currency-toggle.js
@@ -1,6 +1,8 @@
 const Component = require('react').Component
 const h = require('react-hyperscript')
 const inherits = require('util').inherits
+const classnames = require('classnames')
+
 module.exports = CurrencyToggle
 
 inherits(CurrencyToggle, Component)
@@ -8,18 +10,25 @@ function CurrencyToggle () {
   Component.call(this)
 }
 
+const defaultCurrencies = [ 'ETH', 'USD' ]
+
 CurrencyToggle.prototype.render = function () {
   const { onClick, currentCurrency } = this.props
+  const [currencyA, currencyB] = this.props.currencies || defaultCurrencies
 
-  return h('span', {}, [
+  return h('span.currency-toggle', {}, [
     h('span', {
-      className: currentCurrency === 'ETH' ? 'selected-currency' : 'unselected-currency',
-      onClick: () => onClick('ETH'),
+      className: classnames('currency-toggle__item', {
+        'currency-toggle__item--selected': currencyA === currentCurrency,
+      }),
+      onClick: () => onClick(currencyA),
     }, ['ETH']),
     '<>',
     h('span', {
-      className: currentCurrency === 'USD' ? 'selected-currency' : 'unselected-currency',
-      onClick: () => onClick('USD'),
+      className: classnames('currency-toggle__item', {
+        'currency-toggle__item--selected': currencyB === currentCurrency,
+      }),
+      onClick: () => onClick(currencyB),
     }, ['USD']),
   ]) // holding on icon from design
 }
-- 
cgit 


From 836bf2e1a38bb6917f1b7fe9db0604c8143c7adf Mon Sep 17 00:00:00 2001
From: Chi Kei Chan <chikeichan@gmail.com>
Date: Mon, 11 Sep 2017 23:18:54 -0700
Subject: Add frontend validation to send-token

---
 ui/app/components/send/currency-toggle.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

(limited to 'ui/app/components/send')

diff --git a/ui/app/components/send/currency-toggle.js b/ui/app/components/send/currency-toggle.js
index adaade301..2b59ace4a 100644
--- a/ui/app/components/send/currency-toggle.js
+++ b/ui/app/components/send/currency-toggle.js
@@ -22,14 +22,14 @@ CurrencyToggle.prototype.render = function () {
         'currency-toggle__item--selected': currencyA === currentCurrency,
       }),
       onClick: () => onClick(currencyA),
-    }, ['ETH']),
+    }, [ currencyA ]),
     '<>',
     h('span', {
       className: classnames('currency-toggle__item', {
         'currency-toggle__item--selected': currencyB === currentCurrency,
       }),
       onClick: () => onClick(currencyB),
-    }, ['USD']),
+    }, [ currencyB ]),
   ]) // holding on icon from design
 }
 
-- 
cgit 


From 8f31b05ac5b7d8383c720b8b0c9f7f3cecc937f5 Mon Sep 17 00:00:00 2001
From: Chi Kei Chan <chikeichan@gmail.com>
Date: Wed, 13 Sep 2017 01:25:39 -0700
Subject: Add token exchange rates

---
 ui/app/components/send/currency-toggle.js | 15 ++++++++++++---
 ui/app/components/send/gas-fee-display.js | 20 +++++++++++++++++++-
 2 files changed, 31 insertions(+), 4 deletions(-)

(limited to 'ui/app/components/send')

diff --git a/ui/app/components/send/currency-toggle.js b/ui/app/components/send/currency-toggle.js
index 2b59ace4a..d777f0aea 100644
--- a/ui/app/components/send/currency-toggle.js
+++ b/ui/app/components/send/currency-toggle.js
@@ -12,11 +12,11 @@ function CurrencyToggle () {
 
 const defaultCurrencies = [ 'ETH', 'USD' ]
 
-CurrencyToggle.prototype.render = function () {
+CurrencyToggle.prototype.renderToggles = function () {
   const { onClick, currentCurrency } = this.props
   const [currencyA, currencyB] = this.props.currencies || defaultCurrencies
 
-  return h('span.currency-toggle', {}, [
+  return [
     h('span', {
       className: classnames('currency-toggle__item', {
         'currency-toggle__item--selected': currencyA === currentCurrency,
@@ -30,6 +30,15 @@ CurrencyToggle.prototype.render = function () {
       }),
       onClick: () => onClick(currencyB),
     }, [ currencyB ]),
-  ]) // holding on icon from design
+  ]
+}
+
+CurrencyToggle.prototype.render = function () {
+  const currencies = this.props.currencies || defaultCurrencies
+
+  return h('span.currency-toggle', currencies.length
+    ? this.renderToggles()
+    : []
+  )
 }
 
diff --git a/ui/app/components/send/gas-fee-display.js b/ui/app/components/send/gas-fee-display.js
index 5336be8a3..979062882 100644
--- a/ui/app/components/send/gas-fee-display.js
+++ b/ui/app/components/send/gas-fee-display.js
@@ -3,6 +3,7 @@ const h = require('react-hyperscript')
 const inherits = require('util').inherits
 const USDFeeDisplay = require('./usd-fee-display')
 const EthFeeDisplay = require('./eth-fee-display')
+const { getTxFeeBn, formatBalance, shortenBalance } = require('../../util')
 
 module.exports = GasFeeDisplay
 
@@ -11,6 +12,20 @@ function GasFeeDisplay () {
   Component.call(this)
 }
 
+GasFeeDisplay.prototype.getTokenValue = function () {
+  const {
+    tokenExchangeRate,
+    gas,
+    gasPrice,
+    blockGasLimit,
+  } = this.props
+
+  const value = formatBalance(getTxFeeBn(gas, gasPrice, blockGasLimit), 6, true)
+  const [ethNumber] = value.split(' ')
+
+  return shortenBalance(Number(ethNumber) / tokenExchangeRate, 6)
+}
+
 GasFeeDisplay.prototype.render = function () {
   const {
     currentCurrency,
@@ -38,7 +53,10 @@ GasFeeDisplay.prototype.render = function () {
         blockGasLimit,
       })
     default:
-      return h('noscript');
+      return h('div.token-gas', [
+        h('div.token-gas__amount', this.getTokenValue()),
+        h('div.token-gas__symbol', currentCurrency),
+      ])
   }
 }
 
-- 
cgit 


From ca46bd200b24456d692cf1ede47506be5fdcc76d Mon Sep 17 00:00:00 2001
From: Dan <danjm.com@gmail.com>
Date: Wed, 13 Sep 2017 15:27:15 -0230
Subject: Stop setting 'currentCurrency' and use local state for active
 currency in send.js

---
 ui/app/components/send/currency-toggle.js |  6 +++---
 ui/app/components/send/eth-fee-display.js |  4 ++--
 ui/app/components/send/gas-fee-display.js | 10 +++++-----
 ui/app/components/send/usd-fee-display.js |  4 ++--
 4 files changed, 12 insertions(+), 12 deletions(-)

(limited to 'ui/app/components/send')

diff --git a/ui/app/components/send/currency-toggle.js b/ui/app/components/send/currency-toggle.js
index d777f0aea..7aaccd490 100644
--- a/ui/app/components/send/currency-toggle.js
+++ b/ui/app/components/send/currency-toggle.js
@@ -13,20 +13,20 @@ function CurrencyToggle () {
 const defaultCurrencies = [ 'ETH', 'USD' ]
 
 CurrencyToggle.prototype.renderToggles = function () {
-  const { onClick, currentCurrency } = this.props
+  const { onClick, activeCurrency } = this.props
   const [currencyA, currencyB] = this.props.currencies || defaultCurrencies
 
   return [
     h('span', {
       className: classnames('currency-toggle__item', {
-        'currency-toggle__item--selected': currencyA === currentCurrency,
+        'currency-toggle__item--selected': currencyA === activeCurrency,
       }),
       onClick: () => onClick(currencyA),
     }, [ currencyA ]),
     '<>',
     h('span', {
       className: classnames('currency-toggle__item', {
-        'currency-toggle__item--selected': currencyB === currentCurrency,
+        'currency-toggle__item--selected': currencyB === activeCurrency,
       }),
       onClick: () => onClick(currencyB),
     }, [ currencyB ]),
diff --git a/ui/app/components/send/eth-fee-display.js b/ui/app/components/send/eth-fee-display.js
index 3dcb711ce..8b4cec16c 100644
--- a/ui/app/components/send/eth-fee-display.js
+++ b/ui/app/components/send/eth-fee-display.js
@@ -13,7 +13,7 @@ function EthFeeDisplay () {
 
 EthFeeDisplay.prototype.render = function () {
   const {
-    currentCurrency,
+    activeCurrency,
     conversionRate,
     gas,
     gasPrice,
@@ -22,7 +22,7 @@ EthFeeDisplay.prototype.render = function () {
 
   return h(EthBalance, {
     value: getTxFeeBn(gas, gasPrice, blockGasLimit),
-    currentCurrency,
+    currentCurrency: activeCurrency,
     conversionRate,
     showFiat: false,
     hideTooltip: true,
diff --git a/ui/app/components/send/gas-fee-display.js b/ui/app/components/send/gas-fee-display.js
index 979062882..a9a3f3f49 100644
--- a/ui/app/components/send/gas-fee-display.js
+++ b/ui/app/components/send/gas-fee-display.js
@@ -28,17 +28,17 @@ GasFeeDisplay.prototype.getTokenValue = function () {
 
 GasFeeDisplay.prototype.render = function () {
   const {
-    currentCurrency,
+    activeCurrency,
     conversionRate,
     gas,
     gasPrice,
     blockGasLimit,
   } = this.props
 
-  switch (currentCurrency) {
+  switch (activeCurrency) {
     case 'USD':
       return h(USDFeeDisplay, {
-        currentCurrency,
+        activeCurrency,
         conversionRate,
         gas,
         gasPrice,
@@ -46,7 +46,7 @@ GasFeeDisplay.prototype.render = function () {
       })
     case 'ETH':
       return h(EthFeeDisplay, {
-        currentCurrency,
+        activeCurrency,
         conversionRate,
         gas,
         gasPrice,
@@ -55,7 +55,7 @@ GasFeeDisplay.prototype.render = function () {
     default:
       return h('div.token-gas', [
         h('div.token-gas__amount', this.getTokenValue()),
-        h('div.token-gas__symbol', currentCurrency),
+        h('div.token-gas__symbol', activeCurrency),
       ])
   }
 }
diff --git a/ui/app/components/send/usd-fee-display.js b/ui/app/components/send/usd-fee-display.js
index 012bda550..6ee38f1b5 100644
--- a/ui/app/components/send/usd-fee-display.js
+++ b/ui/app/components/send/usd-fee-display.js
@@ -13,7 +13,7 @@ function USDFeeDisplay () {
 
 USDFeeDisplay.prototype.render = function () {
   const {
-    currentCurrency,
+    activeCurrency,
     conversionRate,
     gas,
     gasPrice,
@@ -23,7 +23,7 @@ USDFeeDisplay.prototype.render = function () {
   return h(FiatValue, {
     value: getTxFeeBn(gas, gasPrice, blockGasLimit),
     conversionRate,
-    currentCurrency,
+    currentCurrency: activeCurrency,
     style: {
       color: '#5d5d5d',
       fontSize: '16px',
-- 
cgit 


From 80463072b5c0c9e826582e066fbc962b667ee355 Mon Sep 17 00:00:00 2001
From: Dan <danjm.com@gmail.com>
Date: Fri, 6 Oct 2017 02:04:00 -0230
Subject: UI for readonly from component. From dropdown opening and closing.
 Mockdata.

---
 ui/app/components/send/from-dropdown.js | 94 +++++++++++++++++++++++++++++++++
 1 file changed, 94 insertions(+)
 create mode 100644 ui/app/components/send/from-dropdown.js

(limited to 'ui/app/components/send')

diff --git a/ui/app/components/send/from-dropdown.js b/ui/app/components/send/from-dropdown.js
new file mode 100644
index 000000000..c438cefd5
--- /dev/null
+++ b/ui/app/components/send/from-dropdown.js
@@ -0,0 +1,94 @@
+const Component = require('react').Component
+const h = require('react-hyperscript')
+const inherits = require('util').inherits
+const Identicon = require('../identicon')
+
+module.exports = FromDropdown
+
+inherits(FromDropdown, Component)
+function FromDropdown () {
+  Component.call(this)
+}
+
+FromDropdown.prototype.renderSingleIdentity = function (
+  account, 
+  handleClick, 
+  inList = false, 
+  selectedIdentity = {}
+) {
+  const { identity, balancesToRender } = account
+  const { name, address } = identity
+  const { primary, secondary } = balancesToRender
+
+  const iconType = inList ? 'check' : 'caret-down'
+  const showIcon = !inList || address === selectedIdentity.address
+
+  return h('div.send-v2__from-dropdown__account', {
+    onClick: () => handleClick(identity),
+  }, [
+
+    h('div.send-v2__from-dropdown__top-row', {}, [
+
+      h(
+        Identicon,
+        {
+          address,
+          diameter: 18,
+          className: 'send-v2__from-dropdown__identicon',
+        },
+      ),  
+
+      h('div.send-v2__from-dropdown__account-name', {}, name),
+
+      showIcon && h(`i.fa.fa-${iconType}.fa-lg.send-v2__from-dropdown__${iconType}`),
+
+    ]),
+
+    h('div.send-v2__from-dropdown__account-primary-balance', {}, primary),
+
+    h('div.send-v2__from-dropdown__account-secondary-balance', {}, secondary),
+
+  ])
+}
+
+FromDropdown.prototype.renderDropdown = function (identities, selectedIdentity, closeDropdown) {
+  return h('div', {}, [
+
+    h('div.send-v2__from-dropdown__close-area', {
+      onClick: closeDropdown,
+    }),
+
+    h('div.send-v2__from-dropdown__list', {}, [
+
+      ...identities.map(identity => this.renderSingleIdentity(
+        identity,
+        () => console.log('Select identity'),
+        true,
+        selectedIdentity
+      ))
+
+    ]),
+
+  ])
+}
+
+FromDropdown.prototype.render = function () {
+  const {
+    identities,
+    selectedIdentity,
+    setFromField,
+    openDropdown,
+    closeDropdown,
+    dropdownOpen,
+  } = this.props
+
+  return h('div.send-v2__from-dropdown', {}, [
+
+    this.renderSingleIdentity(selectedIdentity, openDropdown),
+
+    dropdownOpen && this.renderDropdown(identities, selectedIdentity.identity, closeDropdown),
+
+  ])
+    
+}
+
-- 
cgit 


From 71d6463984f040b2aa495a13429f6ea3505defaf Mon Sep 17 00:00:00 2001
From: Dan <danjm.com@gmail.com>
Date: Mon, 9 Oct 2017 20:47:52 -0230
Subject: Refactor 'rendersingleidentity' to a stand alone account-list-item
 component.

---
 ui/app/components/send/account-list-item.js | 51 +++++++++++++++++++++
 ui/app/components/send/from-dropdown.js     | 69 +++++++++--------------------
 2 files changed, 71 insertions(+), 49 deletions(-)
 create mode 100644 ui/app/components/send/account-list-item.js

(limited to 'ui/app/components/send')

diff --git a/ui/app/components/send/account-list-item.js b/ui/app/components/send/account-list-item.js
new file mode 100644
index 000000000..b11527d95
--- /dev/null
+++ b/ui/app/components/send/account-list-item.js
@@ -0,0 +1,51 @@
+const Component = require('react').Component
+const h = require('react-hyperscript')
+const inherits = require('util').inherits
+const connect = require('react-redux').connect
+const Identicon = require('../identicon')
+
+inherits(AccountListItem, Component)
+function AccountListItem () {
+  Component.call(this)
+}
+
+module.exports = AccountListItem
+
+AccountListItem.prototype.render = function () {
+  const {
+    account, 
+    handleClick, 
+    icon = null,
+  } = this.props
+
+  const { identity, balancesToRender } = account
+  const { name, address } = identity
+  const { primary, secondary } = balancesToRender
+
+  return h('div.account-list-item', {
+    onClick: () => handleClick(identity),
+  }, [
+
+    h('div.account-list-item__top-row', {}, [
+
+      h(
+        Identicon,
+        {
+          address,
+          diameter: 18,
+          className: 'account-list-item__identicon',
+        },
+      ),  
+
+      h('div.account-list-item__account-name', {}, name),
+
+      icon && h('div.account-list-item__icon', [icon]),
+
+    ]),
+
+    h('div.account-list-item__account-primary-balance', {}, primary),
+
+    h('div.account-list-item__account-secondary-balance', {}, secondary),
+
+  ])
+}
\ No newline at end of file
diff --git a/ui/app/components/send/from-dropdown.js b/ui/app/components/send/from-dropdown.js
index c438cefd5..fb0a00cc2 100644
--- a/ui/app/components/send/from-dropdown.js
+++ b/ui/app/components/send/from-dropdown.js
@@ -2,6 +2,7 @@ const Component = require('react').Component
 const h = require('react-hyperscript')
 const inherits = require('util').inherits
 const Identicon = require('../identicon')
+const AccountListItem = require('./account-list-item')
 
 module.exports = FromDropdown
 
@@ -10,48 +11,15 @@ function FromDropdown () {
   Component.call(this)
 }
 
-FromDropdown.prototype.renderSingleIdentity = function (
-  account, 
-  handleClick, 
-  inList = false, 
-  selectedIdentity = {}
-) {
-  const { identity, balancesToRender } = account
-  const { name, address } = identity
-  const { primary, secondary } = balancesToRender
+FromDropdown.prototype.getListItemIcon = function (currentAccount, selectedAccount) {
+  const listItemIcon = h(`i.fa.fa-check.fa-lg`, { style: { color: '#02c9b1' } })
 
-  const iconType = inList ? 'check' : 'caret-down'
-  const showIcon = !inList || address === selectedIdentity.address
-
-  return h('div.send-v2__from-dropdown__account', {
-    onClick: () => handleClick(identity),
-  }, [
-
-    h('div.send-v2__from-dropdown__top-row', {}, [
-
-      h(
-        Identicon,
-        {
-          address,
-          diameter: 18,
-          className: 'send-v2__from-dropdown__identicon',
-        },
-      ),  
-
-      h('div.send-v2__from-dropdown__account-name', {}, name),
-
-      showIcon && h(`i.fa.fa-${iconType}.fa-lg.send-v2__from-dropdown__${iconType}`),
-
-    ]),
-
-    h('div.send-v2__from-dropdown__account-primary-balance', {}, primary),
-
-    h('div.send-v2__from-dropdown__account-secondary-balance', {}, secondary),
-
-  ])
+  return currentAccount.identity.address === selectedAccount.identity.address
+    ? listItemIcon
+    : null
 }
 
-FromDropdown.prototype.renderDropdown = function (identities, selectedIdentity, closeDropdown) {
+FromDropdown.prototype.renderDropdown = function (accounts, selectedAccount, closeDropdown) {
   return h('div', {}, [
 
     h('div.send-v2__from-dropdown__close-area', {
@@ -60,12 +28,11 @@ FromDropdown.prototype.renderDropdown = function (identities, selectedIdentity,
 
     h('div.send-v2__from-dropdown__list', {}, [
 
-      ...identities.map(identity => this.renderSingleIdentity(
-        identity,
-        () => console.log('Select identity'),
-        true,
-        selectedIdentity
-      ))
+      ...accounts.map(account => h(AccountListItem, {
+        account, 
+        handleClick: () => console.log('Select identity'), 
+        icon: this.getListItemIcon(account, selectedAccount),
+      }))
 
     ]),
 
@@ -74,8 +41,8 @@ FromDropdown.prototype.renderDropdown = function (identities, selectedIdentity,
 
 FromDropdown.prototype.render = function () {
   const {
-    identities,
-    selectedIdentity,
+    accounts,
+    selectedAccount,
     setFromField,
     openDropdown,
     closeDropdown,
@@ -84,9 +51,13 @@ FromDropdown.prototype.render = function () {
 
   return h('div.send-v2__from-dropdown', {}, [
 
-    this.renderSingleIdentity(selectedIdentity, openDropdown),
+    h(AccountListItem, {
+      account: selectedAccount,
+      handleClick: openDropdown,
+      icon: h(`i.fa.fa-caret-down.fa-lg`, { style: { color: '#dedede' } })
+    }),
 
-    dropdownOpen && this.renderDropdown(identities, selectedIdentity.identity, closeDropdown),
+    dropdownOpen && this.renderDropdown(accounts, selectedAccount, closeDropdown),
 
   ])
     
-- 
cgit 


From fbab0f3a1f1bf78fdaf6b5639fb6a23d996f3645 Mon Sep 17 00:00:00 2001
From: Dan <danjm.com@gmail.com>
Date: Fri, 6 Oct 2017 08:00:45 -0230
Subject: Send v2 to autocomplete.

---
 ui/app/components/send/to-autocomplete.js | 55 +++++++++++++++++++++++++++++++
 1 file changed, 55 insertions(+)
 create mode 100644 ui/app/components/send/to-autocomplete.js

(limited to 'ui/app/components/send')

diff --git a/ui/app/components/send/to-autocomplete.js b/ui/app/components/send/to-autocomplete.js
new file mode 100644
index 000000000..3808bf496
--- /dev/null
+++ b/ui/app/components/send/to-autocomplete.js
@@ -0,0 +1,55 @@
+const Component = require('react').Component
+const h = require('react-hyperscript')
+const inherits = require('util').inherits
+const Identicon = require('../identicon')
+
+module.exports = ToAutoComplete
+
+inherits(ToAutoComplete, Component)
+function ToAutoComplete () {
+  Component.call(this)
+}
+
+ToAutoComplete.prototype.render = function () {
+  const { to, identities, onChange } = this.props
+
+  return h('div.send-v2__to-autocomplete', [
+
+    h('input.send-v2__to-autocomplete__input', {
+      name: 'address',
+      list: 'addresses',
+      placeholder: 'Recipient Address',
+      value: to,
+      onChange,
+      // onBlur: () => {
+      //   this.setErrorsFor('to')
+      // },
+      onFocus: event => {
+        // this.clearErrorsFor('to')
+        to && event.target.select()
+      },
+    }),
+
+    h('datalist#addresses', [
+      // Corresponds to the addresses owned.
+      ...Object.entries(identities).map(([key, { address, name }]) => {
+        return h('option', {
+          value: address,
+          label: name,
+          key: address,
+        })
+      }),
+      // Corresponds to previously sent-to addresses.
+      // ...addressBook.map(({ address, name }) => {
+      //   return h('option', {
+      //     value: address,
+      //     label: name,
+      //     key: address,
+      //   })
+      // }),
+    ]),
+
+  ])
+    
+}
+
-- 
cgit 


From ea7926c211965e2e529e5795a4e1655e97e32144 Mon Sep 17 00:00:00 2001
From: Dan <danjm.com@gmail.com>
Date: Mon, 9 Oct 2017 13:55:23 -0230
Subject: Adds amount and gas field to sendV2.

---
 ui/app/components/send/currency-display.js | 85 ++++++++++++++++++++++++++++++
 1 file changed, 85 insertions(+)
 create mode 100644 ui/app/components/send/currency-display.js

(limited to 'ui/app/components/send')

diff --git a/ui/app/components/send/currency-display.js b/ui/app/components/send/currency-display.js
new file mode 100644
index 000000000..e0147012f
--- /dev/null
+++ b/ui/app/components/send/currency-display.js
@@ -0,0 +1,85 @@
+const Component = require('react').Component
+const h = require('react-hyperscript')
+const inherits = require('util').inherits
+const Identicon = require('../identicon')
+const AutosizeInput = require('react-input-autosize').default
+const { conversionUtil } = require('../../conversion-util')
+
+module.exports = CurrencyDisplay
+
+inherits(CurrencyDisplay, Component)
+function CurrencyDisplay () {
+  Component.call(this)
+
+  this.state = {
+    minWidth: null,
+  }
+}
+
+function isValidNumber (text) {
+  const re = /^([1-9]\d*|0)(\.|\.\d*)?$/
+  return re.test(text)
+}
+
+CurrencyDisplay.prototype.componentDidMount = function () {
+  this.setState({ minWidth: this.refs.currencyDisplayInput.sizer.scrollWidth + 10 })
+}
+
+CurrencyDisplay.prototype.render = function () {
+  const {
+    className,
+    primaryCurrency,
+    convertedCurrency,
+    value = '',
+    placeholder = '0',
+    conversionRate,
+    convertedPrefix = '',
+    readOnly = false,
+    handleChange,
+    inputFontSize,
+  } = this.props
+  const { minWidth } = this.state
+
+  const convertedValue = conversionUtil(value, {
+    fromNumericBase: 'dec',
+    fromCurrency: primaryCurrency,
+    toCurrency: convertedCurrency,
+    conversionRate,
+  })
+
+  return h('div.currency-display', {
+    className,
+  }, [
+
+    h('div.currency-display__primary-row', [
+
+      h(AutosizeInput, {
+        ref: 'currencyDisplayInput',
+        className: 'currency-display__input-wrapper',
+        inputClassName: 'currency-display__input',
+        value,
+        placeholder,
+        readOnly,
+        minWidth,
+        onChange: (event) => {
+          const newValue = event.target.value
+          if (newValue && !isValidNumber(newValue)) {
+            event.preventDefault()
+          }
+          else {
+            handleChange(newValue)
+          }
+        },
+        style: { fontSize: inputFontSize },
+      }),
+
+      h('span.currency-display__primary-currency', {}, primaryCurrency),
+
+    ]),
+
+    h('div.currency-display__converted-value', {}, `${convertedPrefix}${convertedValue} ${convertedCurrency}`),
+
+  ])
+    
+}
+
-- 
cgit 


From 2898914a544c4f934cdbe592b7b44df4d08127c8 Mon Sep 17 00:00:00 2001
From: Dan <danjm.com@gmail.com>
Date: Tue, 10 Oct 2017 22:15:31 -0230
Subject: Send v2 amount unit moves correctly.

---
 ui/app/components/send/currency-display.js | 20 +++++++++++++++++++-
 1 file changed, 19 insertions(+), 1 deletion(-)

(limited to 'ui/app/components/send')

diff --git a/ui/app/components/send/currency-display.js b/ui/app/components/send/currency-display.js
index e0147012f..2ffddb178 100644
--- a/ui/app/components/send/currency-display.js
+++ b/ui/app/components/send/currency-display.js
@@ -13,6 +13,7 @@ function CurrencyDisplay () {
 
   this.state = {
     minWidth: null,
+    currentScrollWidth: null,
   }
 }
 
@@ -22,7 +23,24 @@ function isValidNumber (text) {
 }
 
 CurrencyDisplay.prototype.componentDidMount = function () {
-  this.setState({ minWidth: this.refs.currencyDisplayInput.sizer.scrollWidth + 10 })
+  this.setState({
+    minWidth: this.refs.currencyDisplayInput.sizer.clientWidth + 10,
+    currentclientWidth: this.refs.currencyDisplayInput.sizer.clientWidth,
+  })
+}
+
+CurrencyDisplay.prototype.componentWillUpdate = function ({ value: nextValue }) {
+  const { value: currentValue } = this.props
+  const { currentclientWidth } = this.state
+  const newclientWidth = this.refs.currencyDisplayInput.sizer.clientWidth
+
+  if (currentclientWidth !== newclientWidth) {
+    const clientWidthChange = newclientWidth - currentclientWidth
+    this.setState({
+      minWidth: this.state.minWidth + clientWidthChange,
+      currentclientWidth: newclientWidth,
+    })
+  }
 }
 
 CurrencyDisplay.prototype.render = function () {
-- 
cgit 


From 7ec77e0b4580c52bbf1723ed52d647c9d7516bd5 Mon Sep 17 00:00:00 2001
From: Dan <danjm.com@gmail.com>
Date: Wed, 11 Oct 2017 10:48:27 -0230
Subject: Refactor amount input: dynamic input width with vanilla js.

---
 ui/app/components/send/currency-display.js | 73 +++++++++++++-----------------
 1 file changed, 32 insertions(+), 41 deletions(-)

(limited to 'ui/app/components/send')

diff --git a/ui/app/components/send/currency-display.js b/ui/app/components/send/currency-display.js
index 2ffddb178..332d722ec 100644
--- a/ui/app/components/send/currency-display.js
+++ b/ui/app/components/send/currency-display.js
@@ -2,7 +2,6 @@ const Component = require('react').Component
 const h = require('react-hyperscript')
 const inherits = require('util').inherits
 const Identicon = require('../identicon')
-const AutosizeInput = require('react-input-autosize').default
 const { conversionUtil } = require('../../conversion-util')
 
 module.exports = CurrencyDisplay
@@ -17,29 +16,16 @@ function CurrencyDisplay () {
   }
 }
 
-function isValidNumber (text) {
+function isValidInput (text) {
   const re = /^([1-9]\d*|0)(\.|\.\d*)?$/
   return re.test(text)
 }
 
-CurrencyDisplay.prototype.componentDidMount = function () {
-  this.setState({
-    minWidth: this.refs.currencyDisplayInput.sizer.clientWidth + 10,
-    currentclientWidth: this.refs.currencyDisplayInput.sizer.clientWidth,
-  })
-}
+function resetCaretIfPastEnd (value, event) {
+  const caretPosition = event.target.selectionStart
 
-CurrencyDisplay.prototype.componentWillUpdate = function ({ value: nextValue }) {
-  const { value: currentValue } = this.props
-  const { currentclientWidth } = this.state
-  const newclientWidth = this.refs.currencyDisplayInput.sizer.clientWidth
-
-  if (currentclientWidth !== newclientWidth) {
-    const clientWidthChange = newclientWidth - currentclientWidth
-    this.setState({
-      minWidth: this.state.minWidth + clientWidthChange,
-      currentclientWidth: newclientWidth,
-    })
+  if (caretPosition > value.length) {
+    event.target.setSelectionRange(value.length, value.length)
   }
 }
 
@@ -54,7 +40,6 @@ CurrencyDisplay.prototype.render = function () {
     convertedPrefix = '',
     readOnly = false,
     handleChange,
-    inputFontSize,
   } = this.props
   const { minWidth } = this.state
 
@@ -71,27 +56,33 @@ CurrencyDisplay.prototype.render = function () {
 
     h('div.currency-display__primary-row', [
 
-      h(AutosizeInput, {
-        ref: 'currencyDisplayInput',
-        className: 'currency-display__input-wrapper',
-        inputClassName: 'currency-display__input',
-        value,
-        placeholder,
-        readOnly,
-        minWidth,
-        onChange: (event) => {
-          const newValue = event.target.value
-          if (newValue && !isValidNumber(newValue)) {
-            event.preventDefault()
-          }
-          else {
-            handleChange(newValue)
-          }
-        },
-        style: { fontSize: inputFontSize },
-      }),
-
-      h('span.currency-display__primary-currency', {}, primaryCurrency),
+      h('div.currency-display__input-wrapper', [
+
+        h('input.currency-display__input', {
+          value: `${value} ${primaryCurrency}`,
+          placeholder: `${0} ${primaryCurrency}`,
+          readOnly,
+          onChange: (event) => {
+            let newValue = event.target.value.split(' ')[0]
+
+            if (newValue === '') {
+              handleChange('0')
+            }
+            else if (newValue.match(/^0[1-9]$/)) {
+              handleChange(newValue.match(/[1-9]/)[0])
+            }
+            else if (newValue && !isValidInput(newValue)) {
+              event.preventDefault()
+            }
+            else {
+              handleChange(newValue)
+            }
+          },
+          onKeyUp: event => resetCaretIfPastEnd(value, event),
+          onClick: event => resetCaretIfPastEnd(value, event),
+        }),
+
+      ]),
 
     ]),
 
-- 
cgit 


From 803eaaf968161f16aaf72d59b979dfbb7fb9b352 Mon Sep 17 00:00:00 2001
From: Dan J Miller <danjm.com@gmail.com>
Date: Fri, 13 Oct 2017 16:19:22 -0400
Subject: [NewUI] SendV2-#8: Send container handles tokens; gas info dynamic
 from state (#2364)

* Adds memo field to send-v2.

* Vertical align transaction with flexbox.

* Customize Gas UI

* Remove internal state from InputNumber and fix use in gastooltip.

* Move customize-gas-modal to its own folder and minor cleanup

* Create send container, get account info from state, and make currency display more reusable

* Adjusts send-v2 and container for send-token. Dynamically getting suggested gas prices.
---
 ui/app/components/send/account-list-item.js  | 33 +++++++++++----
 ui/app/components/send/currency-display.js   | 61 +++++++++++++++++++--------
 ui/app/components/send/from-dropdown.js      |  2 +-
 ui/app/components/send/gas-fee-display-v2.js | 47 +++++++++++++++++++++
 ui/app/components/send/gas-tooltip.js        |  4 +-
 ui/app/components/send/memo-textarea.js      | 33 +++++++++++++++
 ui/app/components/send/send-v2-container.js  | 62 ++++++++++++++++++++++++++++
 ui/app/components/send/to-autocomplete.js    |  4 +-
 8 files changed, 214 insertions(+), 32 deletions(-)
 create mode 100644 ui/app/components/send/gas-fee-display-v2.js
 create mode 100644 ui/app/components/send/memo-textarea.js
 create mode 100644 ui/app/components/send/send-v2-container.js

(limited to 'ui/app/components/send')

diff --git a/ui/app/components/send/account-list-item.js b/ui/app/components/send/account-list-item.js
index b11527d95..64acde767 100644
--- a/ui/app/components/send/account-list-item.js
+++ b/ui/app/components/send/account-list-item.js
@@ -3,27 +3,34 @@ const h = require('react-hyperscript')
 const inherits = require('util').inherits
 const connect = require('react-redux').connect
 const Identicon = require('../identicon')
+const CurrencyDisplay = require('./currency-display')
+const { conversionRateSelector } = require('../../selectors')
 
 inherits(AccountListItem, Component)
 function AccountListItem () {
   Component.call(this)
 }
 
-module.exports = AccountListItem
+function mapStateToProps(state) {
+  return {
+    conversionRate: conversionRateSelector(state)
+  }
+}
+
+module.exports = connect(mapStateToProps)(AccountListItem)
 
 AccountListItem.prototype.render = function () {
   const {
     account, 
     handleClick, 
     icon = null,
+    conversionRate,
   } = this.props
 
-  const { identity, balancesToRender } = account
-  const { name, address } = identity
-  const { primary, secondary } = balancesToRender
+  const { name, address, balance } = account
 
   return h('div.account-list-item', {
-    onClick: () => handleClick(identity),
+    onClick: () => handleClick({ name, address, balance }),
   }, [
 
     h('div.account-list-item__top-row', {}, [
@@ -35,7 +42,7 @@ AccountListItem.prototype.render = function () {
           diameter: 18,
           className: 'account-list-item__identicon',
         },
-      ),  
+      ),
 
       h('div.account-list-item__account-name', {}, name),
 
@@ -43,9 +50,17 @@ AccountListItem.prototype.render = function () {
 
     ]),
 
-    h('div.account-list-item__account-primary-balance', {}, primary),
-
-    h('div.account-list-item__account-secondary-balance', {}, secondary),
+    h(CurrencyDisplay, {
+      primaryCurrency: 'ETH',
+      convertedCurrency: 'USD',
+      value: balance,
+      conversionRate,
+      convertedPrefix: '$',
+      readOnly: true,
+      className: 'account-list-item__account-balances',
+      primaryBalanceClassName: 'account-list-item__account-primary-balance',
+      convertedBalanceClassName: 'account-list-item__account-secondary-balance',
+    }, name),
 
   ])
 }
\ No newline at end of file
diff --git a/ui/app/components/send/currency-display.js b/ui/app/components/send/currency-display.js
index 332d722ec..ed9847fdb 100644
--- a/ui/app/components/send/currency-display.js
+++ b/ui/app/components/send/currency-display.js
@@ -11,8 +11,7 @@ function CurrencyDisplay () {
   Component.call(this)
 
   this.state = {
-    minWidth: null,
-    currentScrollWidth: null,
+    value: null,
   }
 }
 
@@ -29,28 +28,50 @@ function resetCaretIfPastEnd (value, event) {
   }
 }
 
+CurrencyDisplay.prototype.handleChangeInHexWei = function (value) {
+  const { handleChange } = this.props
+
+  const valueInHexWei = conversionUtil(value, {
+    fromNumericBase: 'dec',
+    toNumericBase: 'hex',
+    toDenomination: 'WEI',
+  })
+
+  handleChange(valueInHexWei)
+}
+
 CurrencyDisplay.prototype.render = function () {
   const {
-    className,
+    className = 'currency-display',
+    primaryBalanceClassName = 'currency-display__input',
+    convertedBalanceClassName = 'currency-display__converted-value',
+    conversionRate,
     primaryCurrency,
     convertedCurrency,
-    value = '',
-    placeholder = '0',
-    conversionRate,
     convertedPrefix = '',
+    placeholder = '0',
     readOnly = false,
-    handleChange,
+    value: initValue,
   } = this.props
-  const { minWidth } = this.state
+  const { value } = this.state
+
+  const initValueToRender = conversionUtil(initValue, {
+    fromNumericBase: 'hex',
+    toNumericBase: 'dec',
+    fromDenomination: 'WEI',
+    numberOfDecimals: 6,
+    conversionRate,
+  })
 
-  const convertedValue = conversionUtil(value, {
+  const convertedValue = conversionUtil(value || initValueToRender, {
     fromNumericBase: 'dec',
     fromCurrency: primaryCurrency,
     toCurrency: convertedCurrency,
+    numberOfDecimals: 2,
     conversionRate,
   })
 
-  return h('div.currency-display', {
+  return h('div', {
     className,
   }, [
 
@@ -58,35 +79,39 @@ CurrencyDisplay.prototype.render = function () {
 
       h('div.currency-display__input-wrapper', [
 
-        h('input.currency-display__input', {
-          value: `${value} ${primaryCurrency}`,
+        h('input', {
+          className: primaryBalanceClassName,
+          value: `${value || initValueToRender} ${primaryCurrency}`,
           placeholder: `${0} ${primaryCurrency}`,
           readOnly,
           onChange: (event) => {
             let newValue = event.target.value.split(' ')[0]
 
             if (newValue === '') {
-              handleChange('0')
+              this.setState({ value: '0' })
             }
             else if (newValue.match(/^0[1-9]$/)) {
-              handleChange(newValue.match(/[1-9]/)[0])
+              this.setState({ value: newValue.match(/[1-9]/)[0] })
             }
             else if (newValue && !isValidInput(newValue)) {
               event.preventDefault()
             }
             else {
-              handleChange(newValue)
+              this.setState({ value: newValue })
             }
           },
-          onKeyUp: event => resetCaretIfPastEnd(value, event),
-          onClick: event => resetCaretIfPastEnd(value, event),
+          onBlur: event => this.handleChangeInHexWei(event.target.value.split(' ')[0]),
+          onKeyUp: event => resetCaretIfPastEnd(value || initValueToRender, event),
+          onClick: event => resetCaretIfPastEnd(value || initValueToRender, event),
         }),
 
       ]),
 
     ]),
 
-    h('div.currency-display__converted-value', {}, `${convertedPrefix}${convertedValue} ${convertedCurrency}`),
+    h('div', {
+      className: convertedBalanceClassName,
+    }, `${convertedPrefix}${convertedValue} ${convertedCurrency}`),
 
   ])
     
diff --git a/ui/app/components/send/from-dropdown.js b/ui/app/components/send/from-dropdown.js
index fb0a00cc2..e8e1d43f0 100644
--- a/ui/app/components/send/from-dropdown.js
+++ b/ui/app/components/send/from-dropdown.js
@@ -14,7 +14,7 @@ function FromDropdown () {
 FromDropdown.prototype.getListItemIcon = function (currentAccount, selectedAccount) {
   const listItemIcon = h(`i.fa.fa-check.fa-lg`, { style: { color: '#02c9b1' } })
 
-  return currentAccount.identity.address === selectedAccount.identity.address
+  return currentAccount.address === selectedAccount.address
     ? listItemIcon
     : null
 }
diff --git a/ui/app/components/send/gas-fee-display-v2.js b/ui/app/components/send/gas-fee-display-v2.js
new file mode 100644
index 000000000..226ae93f8
--- /dev/null
+++ b/ui/app/components/send/gas-fee-display-v2.js
@@ -0,0 +1,47 @@
+const Component = require('react').Component
+const h = require('react-hyperscript')
+const inherits = require('util').inherits
+const CurrencyDisplay = require('./currency-display');
+
+const { multiplyCurrencies } = require('../../conversion-util')
+
+module.exports = GasFeeDisplay
+
+inherits(GasFeeDisplay, Component)
+function GasFeeDisplay () {
+  Component.call(this)
+}
+
+GasFeeDisplay.prototype.render = function () {
+  const {
+    conversionRate,
+    gasLimit,
+    gasPrice,
+    onClick,
+  } = this.props
+
+  const readyToRender = Boolean(gasLimit && gasPrice)
+
+  return h('div', [
+
+    readyToRender
+      ? h(CurrencyDisplay, {
+        primaryCurrency: 'ETH',
+        convertedCurrency: 'USD',
+        value: multiplyCurrencies(gasLimit, gasPrice, { toNumericBase: 'hex' }),
+        conversionRate,
+        convertedPrefix: '$',
+        readOnly: true,
+      })
+      : h('div.currency-display', 'Loading...')
+    ,
+
+    h('div.send-v2__sliders-icon-container', {
+      onClick,
+    }, [
+      h('i.fa.fa-sliders.send-v2__sliders-icon'),
+    ])
+
+  ])
+}
+
diff --git a/ui/app/components/send/gas-tooltip.js b/ui/app/components/send/gas-tooltip.js
index bef419e48..46aff3499 100644
--- a/ui/app/components/send/gas-tooltip.js
+++ b/ui/app/components/send/gas-tooltip.js
@@ -73,7 +73,7 @@ GasTooltip.prototype.render = function () {
           step: 1,
           min: 0,
           placeholder: '0',
-          initValue: gasPrice,
+          value: gasPrice,
           onChange: (newPrice) => this.updateGasPrice(newPrice),
         }),
         h('div.gas-tooltip-input-label', {
@@ -89,7 +89,7 @@ GasTooltip.prototype.render = function () {
           step: 1,
           min: 0,
           placeholder: '0',
-          initValue: gasLimit,
+          value: gasLimit,
           onChange: (newLimit) => this.updateGasLimit(newLimit),
         }),
       ]),
diff --git a/ui/app/components/send/memo-textarea.js b/ui/app/components/send/memo-textarea.js
new file mode 100644
index 000000000..4005b9493
--- /dev/null
+++ b/ui/app/components/send/memo-textarea.js
@@ -0,0 +1,33 @@
+const Component = require('react').Component
+const h = require('react-hyperscript')
+const inherits = require('util').inherits
+const Identicon = require('../identicon')
+
+module.exports = MemoTextArea
+
+inherits(MemoTextArea, Component)
+function MemoTextArea () {
+  Component.call(this)
+}
+
+MemoTextArea.prototype.render = function () {
+  const { memo, identities, onChange } = this.props
+
+  return h('div.send-v2__memo-text-area', [
+
+    h('textarea.send-v2__memo-text-area__input', {
+      placeholder: 'Optional',
+      value: memo,
+      onChange,
+      // onBlur: () => {
+      //   this.setErrorsFor('memo')
+      // },
+      onFocus: event => {
+        // this.clearErrorsFor('memo')
+      },
+    }),
+
+  ])
+    
+}
+
diff --git a/ui/app/components/send/send-v2-container.js b/ui/app/components/send/send-v2-container.js
new file mode 100644
index 000000000..0c8dd5335
--- /dev/null
+++ b/ui/app/components/send/send-v2-container.js
@@ -0,0 +1,62 @@
+const connect = require('react-redux').connect
+const actions = require('../../actions')
+const abi = require('ethereumjs-abi')
+const SendEther = require('../../send-v2')
+
+const { multiplyCurrencies } = require('../../conversion-util')
+
+const {
+  accountsWithSendEtherInfoSelector,
+  getCurrentAccountWithSendEtherInfo,
+  conversionRateSelector,
+  getSelectedToken,
+  getSelectedTokenExchangeRate,
+  getSelectedAddress,
+} = require('../../selectors')
+
+module.exports = connect(mapStateToProps, mapDispatchToProps)(SendEther)
+
+function mapStateToProps (state) {
+  const selectedAddress = getSelectedAddress(state);
+  const selectedToken = getSelectedToken(state);
+  const tokenExchangeRates = state.metamask.tokenExchangeRates
+  const selectedTokenExchangeRate = getSelectedTokenExchangeRate(state)
+  const conversionRate = conversionRateSelector(state)
+
+  let data;
+  let primaryCurrency;
+  let tokenToUSDRate;
+  if (selectedToken) {
+    data = Array.prototype.map.call(
+      abi.rawEncode(['address', 'uint256'], [selectedAddress, '0x0']),
+      x => ('00' + x.toString(16)).slice(-2)
+    ).join('')
+
+    primaryCurrency = selectedToken.symbol
+
+    tokenToUSDRate = multiplyCurrencies(
+      conversionRate,
+      selectedTokenExchangeRate,
+      { toNumericBase: 'dec' }
+    )
+  }
+
+  return {
+    selectedAccount: getCurrentAccountWithSendEtherInfo(state),
+    accounts: accountsWithSendEtherInfoSelector(state),
+    conversionRate,
+    selectedToken,
+    primaryCurrency,
+    data,
+    tokenToUSDRate,
+  }
+}
+
+function mapDispatchToProps (dispatch) {
+  return {
+    showCustomizeGasModal: () => dispatch(actions.showModal({ name: 'CUSTOMIZE_GAS' })),
+    estimateGas: params => dispatch(actions.estimateGas(params)),
+    getGasPrice: () => dispatch(actions.getGasPrice()),
+    updateTokenExchangeRate: token => dispatch(actions.updateTokenExchangeRate(token)),
+  }
+}
diff --git a/ui/app/components/send/to-autocomplete.js b/ui/app/components/send/to-autocomplete.js
index 3808bf496..1bf1e1907 100644
--- a/ui/app/components/send/to-autocomplete.js
+++ b/ui/app/components/send/to-autocomplete.js
@@ -11,7 +11,7 @@ function ToAutoComplete () {
 }
 
 ToAutoComplete.prototype.render = function () {
-  const { to, identities, onChange } = this.props
+  const { to, accounts, onChange } = this.props
 
   return h('div.send-v2__to-autocomplete', [
 
@@ -32,7 +32,7 @@ ToAutoComplete.prototype.render = function () {
 
     h('datalist#addresses', [
       // Corresponds to the addresses owned.
-      ...Object.entries(identities).map(([key, { address, name }]) => {
+      ...Object.entries(accounts).map(([key, { address, name }]) => {
         return h('option', {
           value: address,
           label: name,
-- 
cgit 


From a9244f5e426d6572ef135e07ab75a49c00e84942 Mon Sep 17 00:00:00 2001
From: Dan <danjm.com@gmail.com>
Date: Thu, 12 Oct 2017 14:12:14 -0230
Subject: Customize Gas connected to state

---
 ui/app/components/send/gas-fee-display-v2.js | 6 +++++-
 ui/app/components/send/send-v2-container.js  | 4 ++++
 2 files changed, 9 insertions(+), 1 deletion(-)

(limited to 'ui/app/components/send')

diff --git a/ui/app/components/send/gas-fee-display-v2.js b/ui/app/components/send/gas-fee-display-v2.js
index 226ae93f8..961d55610 100644
--- a/ui/app/components/send/gas-fee-display-v2.js
+++ b/ui/app/components/send/gas-fee-display-v2.js
@@ -28,7 +28,11 @@ GasFeeDisplay.prototype.render = function () {
       ? h(CurrencyDisplay, {
         primaryCurrency: 'ETH',
         convertedCurrency: 'USD',
-        value: multiplyCurrencies(gasLimit, gasPrice, { toNumericBase: 'hex' }),
+        value: multiplyCurrencies(gasLimit, gasPrice, {
+          toNumericBase: 'hex',
+          multiplicandBase: 16,
+          multiplierBase: 16,
+        }),
         conversionRate,
         convertedPrefix: '$',
         readOnly: true,
diff --git a/ui/app/components/send/send-v2-container.js b/ui/app/components/send/send-v2-container.js
index 0c8dd5335..c3af1c972 100644
--- a/ui/app/components/send/send-v2-container.js
+++ b/ui/app/components/send/send-v2-container.js
@@ -12,6 +12,8 @@ const {
   getSelectedToken,
   getSelectedTokenExchangeRate,
   getSelectedAddress,
+  getGasPrice,
+  getGasLimit,
 } = require('../../selectors')
 
 module.exports = connect(mapStateToProps, mapDispatchToProps)(SendEther)
@@ -49,6 +51,8 @@ function mapStateToProps (state) {
     primaryCurrency,
     data,
     tokenToUSDRate,
+    gasPrice: getGasPrice(state),
+    gasLimit: getGasLimit(state),
   }
 }
 
-- 
cgit 


From ac43872c1a1468057974648c8ae90bf1edd708d7 Mon Sep 17 00:00:00 2001
From: Dan <danjm.com@gmail.com>
Date: Thu, 12 Oct 2017 14:59:03 -0230
Subject: Enable send-v2 functionality.

---
 ui/app/components/send/currency-display.js  |  6 +++---
 ui/app/components/send/from-dropdown.js     | 17 +++++++++++++----
 ui/app/components/send/send-v2-container.js |  5 +++++
 3 files changed, 21 insertions(+), 7 deletions(-)

(limited to 'ui/app/components/send')

diff --git a/ui/app/components/send/currency-display.js b/ui/app/components/send/currency-display.js
index ed9847fdb..d56c119f1 100644
--- a/ui/app/components/send/currency-display.js
+++ b/ui/app/components/send/currency-display.js
@@ -100,9 +100,9 @@ CurrencyDisplay.prototype.render = function () {
               this.setState({ value: newValue })
             }
           },
-          onBlur: event => this.handleChangeInHexWei(event.target.value.split(' ')[0]),
-          onKeyUp: event => resetCaretIfPastEnd(value || initValueToRender, event),
-          onClick: event => resetCaretIfPastEnd(value || initValueToRender, event),
+          onBlur: event => !readOnly && this.handleChangeInHexWei(event.target.value.split(' ')[0]),
+          onKeyUp: event => !readOnly && resetCaretIfPastEnd(value || initValueToRender, event),
+          onClick: event => !readOnly && resetCaretIfPastEnd(value || initValueToRender, event),
         }),
 
       ]),
diff --git a/ui/app/components/send/from-dropdown.js b/ui/app/components/send/from-dropdown.js
index e8e1d43f0..fd6fb7e64 100644
--- a/ui/app/components/send/from-dropdown.js
+++ b/ui/app/components/send/from-dropdown.js
@@ -19,7 +19,14 @@ FromDropdown.prototype.getListItemIcon = function (currentAccount, selectedAccou
     : null
 }
 
-FromDropdown.prototype.renderDropdown = function (accounts, selectedAccount, closeDropdown) {
+FromDropdown.prototype.renderDropdown = function () {
+  const {
+    accounts,
+    selectedAccount,
+    closeDropdown,
+    onSelect,
+  } = this.props
+
   return h('div', {}, [
 
     h('div.send-v2__from-dropdown__close-area', {
@@ -30,7 +37,10 @@ FromDropdown.prototype.renderDropdown = function (accounts, selectedAccount, clo
 
       ...accounts.map(account => h(AccountListItem, {
         account, 
-        handleClick: () => console.log('Select identity'), 
+        handleClick: () => {
+          onSelect(account.address)
+          closeDropdown()
+        }, 
         icon: this.getListItemIcon(account, selectedAccount),
       }))
 
@@ -43,7 +53,6 @@ FromDropdown.prototype.render = function () {
   const {
     accounts,
     selectedAccount,
-    setFromField,
     openDropdown,
     closeDropdown,
     dropdownOpen,
@@ -57,7 +66,7 @@ FromDropdown.prototype.render = function () {
       icon: h(`i.fa.fa-caret-down.fa-lg`, { style: { color: '#dedede' } })
     }),
 
-    dropdownOpen && this.renderDropdown(accounts, selectedAccount, closeDropdown),
+    dropdownOpen && this.renderDropdown(),
 
   ])
     
diff --git a/ui/app/components/send/send-v2-container.js b/ui/app/components/send/send-v2-container.js
index c3af1c972..5935a8fee 100644
--- a/ui/app/components/send/send-v2-container.js
+++ b/ui/app/components/send/send-v2-container.js
@@ -62,5 +62,10 @@ function mapDispatchToProps (dispatch) {
     estimateGas: params => dispatch(actions.estimateGas(params)),
     getGasPrice: () => dispatch(actions.getGasPrice()),
     updateTokenExchangeRate: token => dispatch(actions.updateTokenExchangeRate(token)),
+    signTokenTx: (tokenAddress, toAddress, amount, txData) => (
+      dispatch(actions.signTokenTx(tokenAddress, toAddress, amount, txData))
+    ),
+    signTx: txParams => dispatch(actions.signTx(txParams)),
+    setSelectedAddress: address => dispatch(actions.setSelectedAddress(address))
   }
 }
-- 
cgit 


From 4f9ac1c4fe67ec4c196ce1891ecc1743552d45ce Mon Sep 17 00:00:00 2001
From: Dan <danjm.com@gmail.com>
Date: Tue, 17 Oct 2017 13:16:36 -0230
Subject: Get from and update addressBook in send-v2

---
 ui/app/components/send/send-v2-container.js | 12 ++++++++----
 1 file changed, 8 insertions(+), 4 deletions(-)

(limited to 'ui/app/components/send')

diff --git a/ui/app/components/send/send-v2-container.js b/ui/app/components/send/send-v2-container.js
index 5935a8fee..8ac5cc961 100644
--- a/ui/app/components/send/send-v2-container.js
+++ b/ui/app/components/send/send-v2-container.js
@@ -14,13 +14,15 @@ const {
   getSelectedAddress,
   getGasPrice,
   getGasLimit,
+  getAddressBook,
 } = require('../../selectors')
 
 module.exports = connect(mapStateToProps, mapDispatchToProps)(SendEther)
 
 function mapStateToProps (state) {
-  const selectedAddress = getSelectedAddress(state);
-  const selectedToken = getSelectedToken(state);
+  const fromAccounts = accountsWithSendEtherInfoSelector(state)
+  const selectedAddress = getSelectedAddress(state)
+  const selectedToken = getSelectedToken(state)
   const tokenExchangeRates = state.metamask.tokenExchangeRates
   const selectedTokenExchangeRate = getSelectedTokenExchangeRate(state)
   const conversionRate = conversionRateSelector(state)
@@ -45,7 +47,8 @@ function mapStateToProps (state) {
 
   return {
     selectedAccount: getCurrentAccountWithSendEtherInfo(state),
-    accounts: accountsWithSendEtherInfoSelector(state),
+    fromAccounts,
+    toAccounts: [...fromAccounts, ...getAddressBook(state)],
     conversionRate,
     selectedToken,
     primaryCurrency,
@@ -66,6 +69,7 @@ function mapDispatchToProps (dispatch) {
       dispatch(actions.signTokenTx(tokenAddress, toAddress, amount, txData))
     ),
     signTx: txParams => dispatch(actions.signTx(txParams)),
-    setSelectedAddress: address => dispatch(actions.setSelectedAddress(address))
+    setSelectedAddress: address => dispatch(actions.setSelectedAddress(address)),
+    addToAddressBook: address => dispatch(actions.addToAddressBook(address)),
   }
 }
-- 
cgit 


From f81226fbe9f98d5a6c408e289fa0ea61a467e7dc Mon Sep 17 00:00:00 2001
From: Dan <danjm.com@gmail.com>
Date: Tue, 17 Oct 2017 14:52:23 -0230
Subject: Move all of send state to metamask state.

---
 ui/app/components/send/from-dropdown.js      |  2 +-
 ui/app/components/send/gas-fee-display-v2.js | 17 ++++-------------
 ui/app/components/send/send-v2-container.js  | 13 +++++++++----
 3 files changed, 14 insertions(+), 18 deletions(-)

(limited to 'ui/app/components/send')

diff --git a/ui/app/components/send/from-dropdown.js b/ui/app/components/send/from-dropdown.js
index fd6fb7e64..6f2b9da68 100644
--- a/ui/app/components/send/from-dropdown.js
+++ b/ui/app/components/send/from-dropdown.js
@@ -38,7 +38,7 @@ FromDropdown.prototype.renderDropdown = function () {
       ...accounts.map(account => h(AccountListItem, {
         account, 
         handleClick: () => {
-          onSelect(account.address)
+          onSelect(account)
           closeDropdown()
         }, 
         icon: this.getListItemIcon(account, selectedAccount),
diff --git a/ui/app/components/send/gas-fee-display-v2.js b/ui/app/components/send/gas-fee-display-v2.js
index 961d55610..7c3913c7f 100644
--- a/ui/app/components/send/gas-fee-display-v2.js
+++ b/ui/app/components/send/gas-fee-display-v2.js
@@ -1,9 +1,7 @@
 const Component = require('react').Component
 const h = require('react-hyperscript')
 const inherits = require('util').inherits
-const CurrencyDisplay = require('./currency-display');
-
-const { multiplyCurrencies } = require('../../conversion-util')
+const CurrencyDisplay = require('./currency-display')
 
 module.exports = GasFeeDisplay
 
@@ -15,24 +13,17 @@ function GasFeeDisplay () {
 GasFeeDisplay.prototype.render = function () {
   const {
     conversionRate,
-    gasLimit,
-    gasPrice,
+    gasTotal,
     onClick,
   } = this.props
 
-  const readyToRender = Boolean(gasLimit && gasPrice)
-
   return h('div', [
 
-    readyToRender
+    gasTotal
       ? h(CurrencyDisplay, {
         primaryCurrency: 'ETH',
         convertedCurrency: 'USD',
-        value: multiplyCurrencies(gasLimit, gasPrice, {
-          toNumericBase: 'hex',
-          multiplicandBase: 16,
-          multiplierBase: 16,
-        }),
+        value: gasTotal,
         conversionRate,
         convertedPrefix: '$',
         readOnly: true,
diff --git a/ui/app/components/send/send-v2-container.js b/ui/app/components/send/send-v2-container.js
index 8ac5cc961..dcf764048 100644
--- a/ui/app/components/send/send-v2-container.js
+++ b/ui/app/components/send/send-v2-container.js
@@ -15,6 +15,7 @@ const {
   getGasPrice,
   getGasLimit,
   getAddressBook,
+  getSendFrom,
 } = require('../../selectors')
 
 module.exports = connect(mapStateToProps, mapDispatchToProps)(SendEther)
@@ -46,16 +47,15 @@ function mapStateToProps (state) {
   }
 
   return {
-    selectedAccount: getCurrentAccountWithSendEtherInfo(state),
+    ...state.metamask.send,
+    from: getSendFrom(state) || getCurrentAccountWithSendEtherInfo(state),
     fromAccounts,
     toAccounts: [...fromAccounts, ...getAddressBook(state)],
     conversionRate,
     selectedToken,
     primaryCurrency,
     data,
-    tokenToUSDRate,
-    gasPrice: getGasPrice(state),
-    gasLimit: getGasLimit(state),
+    amountConversionRate: selectedToken ? tokenToUSDRate : conversionRate,
   }
 }
 
@@ -71,5 +71,10 @@ function mapDispatchToProps (dispatch) {
     signTx: txParams => dispatch(actions.signTx(txParams)),
     setSelectedAddress: address => dispatch(actions.setSelectedAddress(address)),
     addToAddressBook: address => dispatch(actions.addToAddressBook(address)),
+    updateGasTotal: newTotal => dispatch(actions.updateGasTotal(newTotal)),
+    updateSendFrom: newFrom => dispatch(actions.updateSendFrom(newFrom)),
+    updateSendTo: newTo => dispatch(actions.updateSendTo(newTo)),
+    updateSendAmount: newAmount => dispatch(actions.updateSendAmount(newAmount)),
+    updateSendMemo: newMemo => dispatch(actions.updateSendMemo(newMemo)),
   }
 }
-- 
cgit 


From 60eda592b5979ac1fdbfb6d5b3418a4924abc14d Mon Sep 17 00:00:00 2001
From: Dan <danjm.com@gmail.com>
Date: Tue, 17 Oct 2017 17:43:20 -0230
Subject: Handling to and amount errors.

---
 ui/app/components/send/currency-display.js  | 23 +++++++++++++++--------
 ui/app/components/send/send-v2-container.js |  1 +
 ui/app/components/send/to-autocomplete.js   | 10 +++++-----
 3 files changed, 21 insertions(+), 13 deletions(-)

(limited to 'ui/app/components/send')

diff --git a/ui/app/components/send/currency-display.js b/ui/app/components/send/currency-display.js
index d56c119f1..f7fbb2379 100644
--- a/ui/app/components/send/currency-display.js
+++ b/ui/app/components/send/currency-display.js
@@ -28,16 +28,12 @@ function resetCaretIfPastEnd (value, event) {
   }
 }
 
-CurrencyDisplay.prototype.handleChangeInHexWei = function (value) {
-  const { handleChange } = this.props
-
-  const valueInHexWei = conversionUtil(value, {
+function toHexWei (value) {
+  return conversionUtil(value, {
     fromNumericBase: 'dec',
     toNumericBase: 'hex',
     toDenomination: 'WEI',
   })
-
-  handleChange(valueInHexWei)
 }
 
 CurrencyDisplay.prototype.render = function () {
@@ -51,7 +47,10 @@ CurrencyDisplay.prototype.render = function () {
     convertedPrefix = '',
     placeholder = '0',
     readOnly = false,
+    inError = false,
     value: initValue,
+    handleChange,
+    validate,
   } = this.props
   const { value } = this.state
 
@@ -73,6 +72,9 @@ CurrencyDisplay.prototype.render = function () {
 
   return h('div', {
     className,
+    style: {
+      borderColor: inError ? 'red' : null,
+    },
   }, [
 
     h('div.currency-display__primary-row', [
@@ -100,8 +102,13 @@ CurrencyDisplay.prototype.render = function () {
               this.setState({ value: newValue })
             }
           },
-          onBlur: event => !readOnly && this.handleChangeInHexWei(event.target.value.split(' ')[0]),
-          onKeyUp: event => !readOnly && resetCaretIfPastEnd(value || initValueToRender, event),
+          onBlur: event => !readOnly && handleChange(toHexWei(event.target.value.split(' ')[0])),
+          onKeyUp: event => {
+            if (!readOnly) {
+              validate(toHexWei(value || initValueToRender))
+              resetCaretIfPastEnd(value || initValueToRender, event)
+            }
+          },
           onClick: event => !readOnly && resetCaretIfPastEnd(value || initValueToRender, event),
         }),
 
diff --git a/ui/app/components/send/send-v2-container.js b/ui/app/components/send/send-v2-container.js
index dcf764048..f20d80073 100644
--- a/ui/app/components/send/send-v2-container.js
+++ b/ui/app/components/send/send-v2-container.js
@@ -76,5 +76,6 @@ function mapDispatchToProps (dispatch) {
     updateSendTo: newTo => dispatch(actions.updateSendTo(newTo)),
     updateSendAmount: newAmount => dispatch(actions.updateSendAmount(newAmount)),
     updateSendMemo: newMemo => dispatch(actions.updateSendMemo(newMemo)),
+    updateSendErrors: newError => dispatch(actions.updateSendErrors(newError)),
   }
 }
diff --git a/ui/app/components/send/to-autocomplete.js b/ui/app/components/send/to-autocomplete.js
index 1bf1e1907..686a7a23e 100644
--- a/ui/app/components/send/to-autocomplete.js
+++ b/ui/app/components/send/to-autocomplete.js
@@ -11,7 +11,7 @@ function ToAutoComplete () {
 }
 
 ToAutoComplete.prototype.render = function () {
-  const { to, accounts, onChange } = this.props
+  const { to, accounts, onChange, inError } = this.props
 
   return h('div.send-v2__to-autocomplete', [
 
@@ -19,15 +19,15 @@ ToAutoComplete.prototype.render = function () {
       name: 'address',
       list: 'addresses',
       placeholder: 'Recipient Address',
+      className: inError ? `send-v2__error-border` : '', 
       value: to,
       onChange,
-      // onBlur: () => {
-      //   this.setErrorsFor('to')
-      // },
       onFocus: event => {
-        // this.clearErrorsFor('to')
         to && event.target.select()
       },
+      style: {
+        borderColor: inError ? 'red' : null,
+      }
     }),
 
     h('datalist#addresses', [
-- 
cgit 


From de1da7d1b215ade650fc644adf63384a401dc240 Mon Sep 17 00:00:00 2001
From: Dan <danjm.com@gmail.com>
Date: Wed, 18 Oct 2017 23:58:01 -0230
Subject: Fix cancel button on send screen.

---
 ui/app/components/send/send-v2-container.js | 1 +
 1 file changed, 1 insertion(+)

(limited to 'ui/app/components/send')

diff --git a/ui/app/components/send/send-v2-container.js b/ui/app/components/send/send-v2-container.js
index f20d80073..ebe2b878b 100644
--- a/ui/app/components/send/send-v2-container.js
+++ b/ui/app/components/send/send-v2-container.js
@@ -77,5 +77,6 @@ function mapDispatchToProps (dispatch) {
     updateSendAmount: newAmount => dispatch(actions.updateSendAmount(newAmount)),
     updateSendMemo: newMemo => dispatch(actions.updateSendMemo(newMemo)),
     updateSendErrors: newError => dispatch(actions.updateSendErrors(newError)),
+    goHome: () => dispatch(actions.goHome()),
   }
 }
-- 
cgit 


From f01d119cc1a6237b88e543be821d91778bcbb128 Mon Sep 17 00:00:00 2001
From: Dan <danjm.com@gmail.com>
Date: Thu, 19 Oct 2017 15:23:56 -0230
Subject: Fixes mobile styling.

---
 ui/app/components/send/gas-fee-display-v2.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'ui/app/components/send')

diff --git a/ui/app/components/send/gas-fee-display-v2.js b/ui/app/components/send/gas-fee-display-v2.js
index 7c3913c7f..3b39312ec 100644
--- a/ui/app/components/send/gas-fee-display-v2.js
+++ b/ui/app/components/send/gas-fee-display-v2.js
@@ -17,7 +17,7 @@ GasFeeDisplay.prototype.render = function () {
     onClick,
   } = this.props
 
-  return h('div', [
+  return h('div.send-v2__gas-fee-display', [
 
     gasTotal
       ? h(CurrencyDisplay, {
-- 
cgit 


From 59015cccef72210f828b344aaedde9b8dd31be3b Mon Sep 17 00:00:00 2001
From: Dan <danjm.com@gmail.com>
Date: Wed, 18 Oct 2017 16:53:35 -0230
Subject: Min and default gas price, limit, total; comments out code for gas
 slider.

---
 ui/app/components/send/send-constants.js | 23 +++++++++++++++++++++++
 1 file changed, 23 insertions(+)
 create mode 100644 ui/app/components/send/send-constants.js

(limited to 'ui/app/components/send')

diff --git a/ui/app/components/send/send-constants.js b/ui/app/components/send/send-constants.js
new file mode 100644
index 000000000..a819a8c28
--- /dev/null
+++ b/ui/app/components/send/send-constants.js
@@ -0,0 +1,23 @@
+const Identicon = require('../identicon')
+const { multiplyCurrencies } = require('../../conversion-util')
+
+const MIN_GAS_PRICE_GWEI = '1'
+const GWEI_FACTOR = '1e9'
+const MIN_GAS_PRICE = multiplyCurrencies(GWEI_FACTOR, MIN_GAS_PRICE_GWEI, {
+	multiplicandBase: 16,
+	multiplierBase: 16,
+})
+const MIN_GAS_LIMIT = (21000).toString(16)
+const MIN_GAS_TOTAL = multiplyCurrencies(MIN_GAS_LIMIT, MIN_GAS_PRICE, {
+  toNumericBase: 'hex',
+  multiplicandBase: 16,
+  multiplierBase: 16,
+})
+
+module.exports = {
+  MIN_GAS_PRICE_GWEI,
+  GWEI_FACTOR,
+  MIN_GAS_PRICE,
+  MIN_GAS_LIMIT,
+  MIN_GAS_TOTAL,
+}
-- 
cgit 


From 332c7441b656ec82ebfba863e3feb4dbf365d67b Mon Sep 17 00:00:00 2001
From: Dan <danjm.com@gmail.com>
Date: Wed, 18 Oct 2017 23:39:26 -0230
Subject: Get currency from state in account details, send and confirm screens.

---
 ui/app/components/send/account-list-item.js  | 9 +++++----
 ui/app/components/send/currency-display.js   | 2 +-
 ui/app/components/send/gas-fee-display-v2.js | 4 +++-
 ui/app/components/send/send-v2-container.js  | 8 +++++---
 4 files changed, 14 insertions(+), 9 deletions(-)

(limited to 'ui/app/components/send')

diff --git a/ui/app/components/send/account-list-item.js b/ui/app/components/send/account-list-item.js
index 64acde767..0938f4cad 100644
--- a/ui/app/components/send/account-list-item.js
+++ b/ui/app/components/send/account-list-item.js
@@ -4,7 +4,7 @@ const inherits = require('util').inherits
 const connect = require('react-redux').connect
 const Identicon = require('../identicon')
 const CurrencyDisplay = require('./currency-display')
-const { conversionRateSelector } = require('../../selectors')
+const { conversionRateSelector, getCurrentCurrency } = require('../../selectors')
 
 inherits(AccountListItem, Component)
 function AccountListItem () {
@@ -13,7 +13,8 @@ function AccountListItem () {
 
 function mapStateToProps(state) {
   return {
-    conversionRate: conversionRateSelector(state)
+    conversionRate: conversionRateSelector(state),
+    currentCurrency: getCurrentCurrency(state),
   }
 }
 
@@ -25,6 +26,7 @@ AccountListItem.prototype.render = function () {
     handleClick, 
     icon = null,
     conversionRate,
+    currentCurrency,
   } = this.props
 
   const { name, address, balance } = account
@@ -52,10 +54,9 @@ AccountListItem.prototype.render = function () {
 
     h(CurrencyDisplay, {
       primaryCurrency: 'ETH',
-      convertedCurrency: 'USD',
+      convertedCurrency: currentCurrency,
       value: balance,
       conversionRate,
-      convertedPrefix: '$',
       readOnly: true,
       className: 'account-list-item__account-balances',
       primaryBalanceClassName: 'account-list-item__account-primary-balance',
diff --git a/ui/app/components/send/currency-display.js b/ui/app/components/send/currency-display.js
index f7fbb2379..2c9a2d33b 100644
--- a/ui/app/components/send/currency-display.js
+++ b/ui/app/components/send/currency-display.js
@@ -118,7 +118,7 @@ CurrencyDisplay.prototype.render = function () {
 
     h('div', {
       className: convertedBalanceClassName,
-    }, `${convertedPrefix}${convertedValue} ${convertedCurrency}`),
+    }, `${convertedValue} ${convertedCurrency.toUpperCase()}`),
 
   ])
     
diff --git a/ui/app/components/send/gas-fee-display-v2.js b/ui/app/components/send/gas-fee-display-v2.js
index 3b39312ec..0e23b63ac 100644
--- a/ui/app/components/send/gas-fee-display-v2.js
+++ b/ui/app/components/send/gas-fee-display-v2.js
@@ -15,6 +15,8 @@ GasFeeDisplay.prototype.render = function () {
     conversionRate,
     gasTotal,
     onClick,
+    primaryCurrency = 'ETH',
+    convertedCurrency,
   } = this.props
 
   return h('div.send-v2__gas-fee-display', [
@@ -22,7 +24,7 @@ GasFeeDisplay.prototype.render = function () {
     gasTotal
       ? h(CurrencyDisplay, {
         primaryCurrency: 'ETH',
-        convertedCurrency: 'USD',
+        convertedCurrency,
         value: gasTotal,
         conversionRate,
         convertedPrefix: '$',
diff --git a/ui/app/components/send/send-v2-container.js b/ui/app/components/send/send-v2-container.js
index ebe2b878b..c14865e9f 100644
--- a/ui/app/components/send/send-v2-container.js
+++ b/ui/app/components/send/send-v2-container.js
@@ -16,6 +16,7 @@ const {
   getGasLimit,
   getAddressBook,
   getSendFrom,
+  getCurrentCurrency,
 } = require('../../selectors')
 
 module.exports = connect(mapStateToProps, mapDispatchToProps)(SendEther)
@@ -30,7 +31,7 @@ function mapStateToProps (state) {
 
   let data;
   let primaryCurrency;
-  let tokenToUSDRate;
+  let tokenToFiatRate;
   if (selectedToken) {
     data = Array.prototype.map.call(
       abi.rawEncode(['address', 'uint256'], [selectedAddress, '0x0']),
@@ -39,7 +40,7 @@ function mapStateToProps (state) {
 
     primaryCurrency = selectedToken.symbol
 
-    tokenToUSDRate = multiplyCurrencies(
+    tokenToFiatRate = multiplyCurrencies(
       conversionRate,
       selectedTokenExchangeRate,
       { toNumericBase: 'dec' }
@@ -54,8 +55,9 @@ function mapStateToProps (state) {
     conversionRate,
     selectedToken,
     primaryCurrency,
+    convertedCurrency: getCurrentCurrency(state),
     data,
-    amountConversionRate: selectedToken ? tokenToUSDRate : conversionRate,
+    amountConversionRate: selectedToken ? tokenToFiatRate : conversionRate,
   }
 }
 
-- 
cgit 


From 0458643f104d7b328e24c4403e4e3d91b4d5de92 Mon Sep 17 00:00:00 2001
From: Chi Kei Chan <chikeichan@gmail.com>
Date: Thu, 19 Oct 2017 14:08:52 -0700
Subject: various styling fix on mobile

---
 ui/app/components/send/account-list-item.js | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

(limited to 'ui/app/components/send')

diff --git a/ui/app/components/send/account-list-item.js b/ui/app/components/send/account-list-item.js
index 0938f4cad..ba7eec940 100644
--- a/ui/app/components/send/account-list-item.js
+++ b/ui/app/components/send/account-list-item.js
@@ -11,7 +11,7 @@ function AccountListItem () {
   Component.call(this)
 }
 
-function mapStateToProps(state) {
+function mapStateToProps (state) {
   return {
     conversionRate: conversionRateSelector(state),
     currentCurrency: getCurrentCurrency(state),
@@ -22,14 +22,14 @@ module.exports = connect(mapStateToProps)(AccountListItem)
 
 AccountListItem.prototype.render = function () {
   const {
-    account, 
-    handleClick, 
+    account,
+    handleClick,
     icon = null,
     conversionRate,
     currentCurrency,
   } = this.props
 
-  const { name, address, balance } = account
+  const { name, address, balance } = account || {}
 
   return h('div.account-list-item', {
     onClick: () => handleClick({ name, address, balance }),
-- 
cgit 


From 8f3b762461ada222f82089e686a61183dd167428 Mon Sep 17 00:00:00 2001
From: Chi Kei Chan <chikeichan@gmail.com>
Date: Fri, 20 Oct 2017 18:26:18 -0700
Subject: Fix Conversions bugs; Fiat value bugs

---
 ui/app/components/send/currency-display.js | 12 +++++++++++-
 1 file changed, 11 insertions(+), 1 deletion(-)

(limited to 'ui/app/components/send')

diff --git a/ui/app/components/send/currency-display.js b/ui/app/components/send/currency-display.js
index 2c9a2d33b..7180b94d3 100644
--- a/ui/app/components/send/currency-display.js
+++ b/ui/app/components/send/currency-display.js
@@ -36,6 +36,16 @@ function toHexWei (value) {
   })
 }
 
+CurrencyDisplay.prototype.getAmount = function (value) {
+  const { selectedToken } = this.props
+  const { decimals } = selectedToken || {}
+  const multiplier = Math.pow(10, Number(decimals || 0))
+  const sendAmount = '0x' + Number(value * multiplier).toString(16)
+  return selectedToken
+    ? sendAmount
+    : toHexWei(value)
+}
+
 CurrencyDisplay.prototype.render = function () {
   const {
     className = 'currency-display',
@@ -102,7 +112,7 @@ CurrencyDisplay.prototype.render = function () {
               this.setState({ value: newValue })
             }
           },
-          onBlur: event => !readOnly && handleChange(toHexWei(event.target.value.split(' ')[0])),
+          onBlur: event => !readOnly && handleChange(this.getAmount(event.target.value.split(' ')[0])),
           onKeyUp: event => {
             if (!readOnly) {
               validate(toHexWei(value || initValueToRender))
-- 
cgit 


From b3dad510b7119c6bd89afb0059d95a6684402538 Mon Sep 17 00:00:00 2001
From: Dan <danjm.com@gmail.com>
Date: Fri, 20 Oct 2017 23:27:59 -0230
Subject: Improve precision in send and confirm.

---
 ui/app/components/send/currency-display.js | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

(limited to 'ui/app/components/send')

diff --git a/ui/app/components/send/currency-display.js b/ui/app/components/send/currency-display.js
index 7180b94d3..799e9b56d 100644
--- a/ui/app/components/send/currency-display.js
+++ b/ui/app/components/send/currency-display.js
@@ -2,7 +2,7 @@ const Component = require('react').Component
 const h = require('react-hyperscript')
 const inherits = require('util').inherits
 const Identicon = require('../identicon')
-const { conversionUtil } = require('../../conversion-util')
+const { conversionUtil, multiplyCurrencies } = require('../../conversion-util')
 
 module.exports = CurrencyDisplay
 
@@ -40,7 +40,9 @@ CurrencyDisplay.prototype.getAmount = function (value) {
   const { selectedToken } = this.props
   const { decimals } = selectedToken || {}
   const multiplier = Math.pow(10, Number(decimals || 0))
-  const sendAmount = '0x' + Number(value * multiplier).toString(16)
+
+  const sendAmount = multiplyCurrencies(value, multiplier, {toNumericBase: 'hex'})
+
   return selectedToken
     ? sendAmount
     : toHexWei(value)
-- 
cgit 


From b96ba5522993915cf809ba2f438c2c5a9c776e1f Mon Sep 17 00:00:00 2001
From: Dan <danjm.com@gmail.com>
Date: Fri, 20 Oct 2017 23:35:22 -0230
Subject: Clear send state on cancelling and signing.

---
 ui/app/components/send/send-v2-container.js | 1 +
 1 file changed, 1 insertion(+)

(limited to 'ui/app/components/send')

diff --git a/ui/app/components/send/send-v2-container.js b/ui/app/components/send/send-v2-container.js
index c14865e9f..80b52a3ab 100644
--- a/ui/app/components/send/send-v2-container.js
+++ b/ui/app/components/send/send-v2-container.js
@@ -80,5 +80,6 @@ function mapDispatchToProps (dispatch) {
     updateSendMemo: newMemo => dispatch(actions.updateSendMemo(newMemo)),
     updateSendErrors: newError => dispatch(actions.updateSendErrors(newError)),
     goHome: () => dispatch(actions.goHome()),
+    clearSend: () => dispatch(actions.clearSend())
   }
 }
-- 
cgit 


From 09d659614ed8a3d7627002eb77f0953b7f495f7e Mon Sep 17 00:00:00 2001
From: Dan <danjm.com@gmail.com>
Date: Mon, 23 Oct 2017 09:35:53 -0230
Subject: Cleaner implementation of currency-display input.

---
 ui/app/components/send/currency-display.js | 36 ++++++++++++------------------
 1 file changed, 14 insertions(+), 22 deletions(-)

(limited to 'ui/app/components/send')

diff --git a/ui/app/components/send/currency-display.js b/ui/app/components/send/currency-display.js
index 799e9b56d..5dba6a8dd 100644
--- a/ui/app/components/send/currency-display.js
+++ b/ui/app/components/send/currency-display.js
@@ -20,14 +20,6 @@ function isValidInput (text) {
   return re.test(text)
 }
 
-function resetCaretIfPastEnd (value, event) {
-  const caretPosition = event.target.selectionStart
-
-  if (caretPosition > value.length) {
-    event.target.setSelectionRange(value.length, value.length)
-  }
-}
-
 function toHexWei (value) {
   return conversionUtil(value, {
     fromNumericBase: 'dec',
@@ -82,6 +74,8 @@ CurrencyDisplay.prototype.render = function () {
     conversionRate,
   })
 
+  const inputSizeMultiplier = readOnly ? 1 : 1.2;
+
   return h('div', {
     className,
     style: {
@@ -95,35 +89,33 @@ CurrencyDisplay.prototype.render = function () {
 
         h('input', {
           className: primaryBalanceClassName,
-          value: `${value || initValueToRender} ${primaryCurrency}`,
-          placeholder: `${0} ${primaryCurrency}`,
+          value: `${value || initValueToRender}`,
+          placeholder: '0',
+          size: (value || initValueToRender).length * inputSizeMultiplier,
           readOnly,
           onChange: (event) => {
-            let newValue = event.target.value.split(' ')[0]
+            let newValue = event.target.value
 
             if (newValue === '') {
-              this.setState({ value: '0' })
+              newValue = '0'
             }
             else if (newValue.match(/^0[1-9]$/)) {
-              this.setState({ value: newValue.match(/[1-9]/)[0] })
+              newValue = newValue.match(/[1-9]/)[0]
             }
-            else if (newValue && !isValidInput(newValue)) {
+
+            if (newValue && !isValidInput(newValue)) {
               event.preventDefault()
             }
             else {
+              validate(this.getAmount(newValue))
               this.setState({ value: newValue })
             }
           },
-          onBlur: event => !readOnly && handleChange(this.getAmount(event.target.value.split(' ')[0])),
-          onKeyUp: event => {
-            if (!readOnly) {
-              validate(toHexWei(value || initValueToRender))
-              resetCaretIfPastEnd(value || initValueToRender, event)
-            }
-          },
-          onClick: event => !readOnly && resetCaretIfPastEnd(value || initValueToRender, event),
+          onBlur: event => !readOnly && handleChange(this.getAmount(event.target.value)),
         }),
 
+        h('span.currency-display__currency-symbol', primaryCurrency),
+
       ]),
 
     ]),
-- 
cgit 


From e737a9565a6b78639b74511d026339c1b54bca1a Mon Sep 17 00:00:00 2001
From: Dan <danjm.com@gmail.com>
Date: Sun, 22 Oct 2017 17:44:03 -0230
Subject: Improve customize gas modal error handling

---
 ui/app/components/send/send-constants.js    | 20 ++++++++++-----
 ui/app/components/send/send-utils.js        | 39 +++++++++++++++++++++++++++++
 ui/app/components/send/send-v2-container.js |  8 ++----
 3 files changed, 55 insertions(+), 12 deletions(-)
 create mode 100644 ui/app/components/send/send-utils.js

(limited to 'ui/app/components/send')

diff --git a/ui/app/components/send/send-constants.js b/ui/app/components/send/send-constants.js
index a819a8c28..8b56607cc 100644
--- a/ui/app/components/send/send-constants.js
+++ b/ui/app/components/send/send-constants.js
@@ -3,12 +3,19 @@ const { multiplyCurrencies } = require('../../conversion-util')
 
 const MIN_GAS_PRICE_GWEI = '1'
 const GWEI_FACTOR = '1e9'
-const MIN_GAS_PRICE = multiplyCurrencies(GWEI_FACTOR, MIN_GAS_PRICE_GWEI, {
+const MIN_GAS_PRICE_HEX = multiplyCurrencies(GWEI_FACTOR, MIN_GAS_PRICE_GWEI, {
 	multiplicandBase: 16,
 	multiplierBase: 16,
+  toNumericBase: 'hex',
+})
+const MIN_GAS_PRICE_DEC = multiplyCurrencies(GWEI_FACTOR, MIN_GAS_PRICE_GWEI, {
+  multiplicandBase: 16,
+  multiplierBase: 16,
+  toNumericBase: 'dec',
 })
-const MIN_GAS_LIMIT = (21000).toString(16)
-const MIN_GAS_TOTAL = multiplyCurrencies(MIN_GAS_LIMIT, MIN_GAS_PRICE, {
+const MIN_GAS_LIMIT_HEX = (21000).toString(16)
+const MIN_GAS_LIMIT_DEC = 21000
+const MIN_GAS_TOTAL = multiplyCurrencies(MIN_GAS_LIMIT_HEX, MIN_GAS_PRICE_HEX, {
   toNumericBase: 'hex',
   multiplicandBase: 16,
   multiplierBase: 16,
@@ -16,8 +23,9 @@ const MIN_GAS_TOTAL = multiplyCurrencies(MIN_GAS_LIMIT, MIN_GAS_PRICE, {
 
 module.exports = {
   MIN_GAS_PRICE_GWEI,
-  GWEI_FACTOR,
-  MIN_GAS_PRICE,
-  MIN_GAS_LIMIT,
+  MIN_GAS_PRICE_HEX,
+  MIN_GAS_PRICE_DEC,
+  MIN_GAS_LIMIT_HEX,
+  MIN_GAS_LIMIT_DEC,
   MIN_GAS_TOTAL,
 }
diff --git a/ui/app/components/send/send-utils.js b/ui/app/components/send/send-utils.js
new file mode 100644
index 000000000..bf096d610
--- /dev/null
+++ b/ui/app/components/send/send-utils.js
@@ -0,0 +1,39 @@
+const { addCurrencies, conversionGreaterThan } = require('../../conversion-util')
+
+function isBalanceSufficient({
+  amount,
+  gasTotal,
+  balance,
+  primaryCurrency,
+  selectedToken,
+  amountConversionRate,
+  conversionRate,
+}) {
+  const totalAmount = addCurrencies(amount, gasTotal, {
+    aBase: 16,
+    bBase: 16,
+    toNumericBase: 'hex',
+  })
+
+  const balanceIsSufficient = conversionGreaterThan(
+    {
+      value: balance,
+      fromNumericBase: 'hex',
+      fromCurrency: primaryCurrency,
+      conversionRate,
+    },
+    {
+      value: totalAmount,
+      fromNumericBase: 'hex',
+      conversionRate: amountConversionRate,
+      fromCurrency: selectedToken || primaryCurrency,
+      conversionRate: amountConversionRate,
+    },
+  )
+
+  return balanceIsSufficient
+}
+
+module.exports = {
+  isBalanceSufficient,
+}
\ No newline at end of file
diff --git a/ui/app/components/send/send-v2-container.js b/ui/app/components/send/send-v2-container.js
index 80b52a3ab..fb2634de2 100644
--- a/ui/app/components/send/send-v2-container.js
+++ b/ui/app/components/send/send-v2-container.js
@@ -17,6 +17,7 @@ const {
   getAddressBook,
   getSendFrom,
   getCurrentCurrency,
+  getSelectedTokenToFiatRate,
 } = require('../../selectors')
 
 module.exports = connect(mapStateToProps, mapDispatchToProps)(SendEther)
@@ -26,7 +27,6 @@ function mapStateToProps (state) {
   const selectedAddress = getSelectedAddress(state)
   const selectedToken = getSelectedToken(state)
   const tokenExchangeRates = state.metamask.tokenExchangeRates
-  const selectedTokenExchangeRate = getSelectedTokenExchangeRate(state)
   const conversionRate = conversionRateSelector(state)
 
   let data;
@@ -40,11 +40,7 @@ function mapStateToProps (state) {
 
     primaryCurrency = selectedToken.symbol
 
-    tokenToFiatRate = multiplyCurrencies(
-      conversionRate,
-      selectedTokenExchangeRate,
-      { toNumericBase: 'dec' }
-    )
+    tokenToFiatRate = getSelectedTokenToFiatRate(state)
   }
 
   return {
-- 
cgit 


From 07c4c92db64ffaaefbb9eb661d24bbb4c8c5ddb6 Mon Sep 17 00:00:00 2001
From: Dan <danjm.com@gmail.com>
Date: Mon, 23 Oct 2017 13:54:47 -0230
Subject: Style dropdown of to-autocomplete.

---
 ui/app/components/send/account-list-item.js |   8 +-
 ui/app/components/send/to-autocomplete.js   | 126 ++++++++++++++++++++++------
 2 files changed, 105 insertions(+), 29 deletions(-)

(limited to 'ui/app/components/send')

diff --git a/ui/app/components/send/account-list-item.js b/ui/app/components/send/account-list-item.js
index ba7eec940..cc514cbd4 100644
--- a/ui/app/components/send/account-list-item.js
+++ b/ui/app/components/send/account-list-item.js
@@ -27,6 +27,8 @@ AccountListItem.prototype.render = function () {
     icon = null,
     conversionRate,
     currentCurrency,
+    displayBalance = true,
+    displayAddress = false,
   } = this.props
 
   const { name, address, balance } = account || {}
@@ -46,13 +48,15 @@ AccountListItem.prototype.render = function () {
         },
       ),
 
-      h('div.account-list-item__account-name', {}, name),
+      h('div.account-list-item__account-name', {}, name || address),
 
       icon && h('div.account-list-item__icon', [icon]),
 
     ]),
 
-    h(CurrencyDisplay, {
+    displayAddress && name && h('div.account-list-item__account-address', address),
+
+    displayBalance && h(CurrencyDisplay, {
       primaryCurrency: 'ETH',
       convertedCurrency: currentCurrency,
       value: balance,
diff --git a/ui/app/components/send/to-autocomplete.js b/ui/app/components/send/to-autocomplete.js
index 686a7a23e..081b85ab7 100644
--- a/ui/app/components/send/to-autocomplete.js
+++ b/ui/app/components/send/to-autocomplete.js
@@ -2,54 +2,126 @@ const Component = require('react').Component
 const h = require('react-hyperscript')
 const inherits = require('util').inherits
 const Identicon = require('../identicon')
+const AccountListItem = require('./account-list-item')
 
 module.exports = ToAutoComplete
 
 inherits(ToAutoComplete, Component)
 function ToAutoComplete () {
   Component.call(this)
+
+  this.state = { accountsToRender: [] }
+}
+
+ToAutoComplete.prototype.getListItemIcon = function (listItemAddress, toAddress) {
+  const listItemIcon = h(`i.fa.fa-check.fa-lg`, { style: { color: '#02c9b1' } })
+
+  return toAddress && listItemAddress === toAddress
+    ? listItemIcon
+    : null
+}
+
+ToAutoComplete.prototype.renderDropdown = function () {
+  const {
+    accounts,
+    closeDropdown,
+    onChange,
+    to,
+  } = this.props
+  const { accountsToRender } = this.state
+
+  return accountsToRender.length && h('div', {}, [
+
+    h('div.send-v2__from-dropdown__close-area', {
+      onClick: closeDropdown,
+    }),
+
+    h('div.send-v2__from-dropdown__list', {}, [
+
+      ...accountsToRender.map(account => h(AccountListItem, {
+        account, 
+        handleClick: () => {
+          onChange(account.address)
+          closeDropdown()
+        }, 
+        icon: this.getListItemIcon(account.address, to),
+        displayBalance: false,
+        displayAddress: true,
+      }))
+
+    ]),
+
+  ])
+}
+
+ToAutoComplete.prototype.handleInputEvent = function (event = {}, cb) {
+  const {
+    to,
+    accounts,
+    closeDropdown,
+    openDropdown,
+  } = this.props
+
+  const matchingAccounts = accounts.filter(({ address }) => address.match(to))
+
+  if (!to) {
+    this.setState({ accountsToRender: accounts })
+    openDropdown()
+  }
+  else if (matchingAccounts.length === 1 && matchingAccounts[0].address === to) {
+    this.setState({ accountsToRender: [] })
+    event.target && event.target.select()
+    closeDropdown()
+  }
+  else if (matchingAccounts.length) {
+    this.setState({ accountsToRender: matchingAccounts })
+    openDropdown()
+  }
+  else {
+    this.setState({ accountsToRender: [] })
+    event.target && event.target.select()
+    closeDropdown()
+  }
+  cb && cb(event.target.value)
+}
+
+ToAutoComplete.prototype.componentDidUpdate = function (nextProps, nextState) {
+  if (this.props.to !== nextProps.to) {
+    this.handleInputEvent()
+  }
 }
 
 ToAutoComplete.prototype.render = function () {
-  const { to, accounts, onChange, inError } = this.props
+  const {
+    to,
+    accounts,
+    openDropdown,
+    closeDropdown,
+    dropdownOpen,
+    onChange,
+    inError,
+  } = this.props
 
-  return h('div.send-v2__to-autocomplete', [
+  return h('div.to-autocomplete', {}, [
 
     h('input.send-v2__to-autocomplete__input', {
-      name: 'address',
-      list: 'addresses',
       placeholder: 'Recipient Address',
       className: inError ? `send-v2__error-border` : '', 
       value: to,
-      onChange,
-      onFocus: event => {
-        to && event.target.select()
-      },
+      onChange: event => onChange(event.target.value),
+      onFocus: event => this.handleInputEvent(event),
       style: {
         borderColor: inError ? 'red' : null,
       }
     }),
 
-    h('datalist#addresses', [
-      // Corresponds to the addresses owned.
-      ...Object.entries(accounts).map(([key, { address, name }]) => {
-        return h('option', {
-          value: address,
-          label: name,
-          key: address,
-        })
-      }),
-      // Corresponds to previously sent-to addresses.
-      // ...addressBook.map(({ address, name }) => {
-      //   return h('option', {
-      //     value: address,
-      //     label: name,
-      //     key: address,
-      //   })
-      // }),
-    ]),
+    !to && h(`i.fa.fa-caret-down.fa-lg.send-v2__to-autocomplete__down-caret`, {
+      style: { color: '#dedede' },
+      onClick: () => this.handleInputEvent(),
+    }),
+
+    dropdownOpen && this.renderDropdown(),
 
   ])
-    
 }
 
-- 
cgit 


From ef2b0d848582788c6cf69a11e17a12358bb2aa7b Mon Sep 17 00:00:00 2001
From: Dan <danjm.com@gmail.com>
Date: Tue, 24 Oct 2017 12:56:42 -0230
Subject: Simply logic for rendering matching accounts in to-autocomplete
 dropdown.

---
 ui/app/components/send/to-autocomplete.js | 16 ++++------------
 1 file changed, 4 insertions(+), 12 deletions(-)

(limited to 'ui/app/components/send')

diff --git a/ui/app/components/send/to-autocomplete.js b/ui/app/components/send/to-autocomplete.js
index 081b85ab7..ab490155b 100644
--- a/ui/app/components/send/to-autocomplete.js
+++ b/ui/app/components/send/to-autocomplete.js
@@ -62,26 +62,18 @@ ToAutoComplete.prototype.handleInputEvent = function (event = {}, cb) {
     openDropdown,
   } = this.props
 
-  const matchingAccounts = accounts.filter(({ address }) => address.match(to))
+  const matchingAccounts = accounts.filter(({ address }) => address.match(to || ''))
+  const matches = matchingAccounts.length
 
-  if (!to) {
-    this.setState({ accountsToRender: accounts })
-    openDropdown()
-  }
-  else if (matchingAccounts.length === 1 && matchingAccounts[0].address === to) {
+  if (!matches || matchingAccounts[0].address === to) {
     this.setState({ accountsToRender: [] })
     event.target && event.target.select()
     closeDropdown()
   }
-  else if (matchingAccounts.length) {
+  else {
     this.setState({ accountsToRender: matchingAccounts })
     openDropdown()
   }
-  else {
-    this.setState({ accountsToRender: [] })
-    event.target && event.target.select()
-    closeDropdown()
-  }
   cb && cb(event.target.value)
 }
 
-- 
cgit 


From 220da24f9ab4a57a10bc1fc3e249c511a98ecb46 Mon Sep 17 00:00:00 2001
From: Dan <danjm.com@gmail.com>
Date: Thu, 26 Oct 2017 13:36:34 -0230
Subject: Change min gas price to 0.1 GWEI

---
 ui/app/components/send/send-constants.js | 25 ++++++++++++-------------
 1 file changed, 12 insertions(+), 13 deletions(-)

(limited to 'ui/app/components/send')

diff --git a/ui/app/components/send/send-constants.js b/ui/app/components/send/send-constants.js
index 8b56607cc..471e01e2a 100644
--- a/ui/app/components/send/send-constants.js
+++ b/ui/app/components/send/send-constants.js
@@ -1,20 +1,19 @@
+const ethUtil = require('ethereumjs-util')
 const Identicon = require('../identicon')
-const { multiplyCurrencies } = require('../../conversion-util')
+const { conversionUtil, multiplyCurrencies } = require('../../conversion-util')
 
-const MIN_GAS_PRICE_GWEI = '1'
-const GWEI_FACTOR = '1e9'
-const MIN_GAS_PRICE_HEX = multiplyCurrencies(GWEI_FACTOR, MIN_GAS_PRICE_GWEI, {
-	multiplicandBase: 16,
-	multiplierBase: 16,
-  toNumericBase: 'hex',
-})
-const MIN_GAS_PRICE_DEC = multiplyCurrencies(GWEI_FACTOR, MIN_GAS_PRICE_GWEI, {
-  multiplicandBase: 16,
-  multiplierBase: 16,
-  toNumericBase: 'dec',
-})
+const MIN_GAS_PRICE_HEX = (100000000).toString(16)
+const MIN_GAS_PRICE_DEC = '100000000'
 const MIN_GAS_LIMIT_HEX = (21000).toString(16)
 const MIN_GAS_LIMIT_DEC = 21000
+
+const MIN_GAS_PRICE_GWEI = ethUtil.addHexPrefix(conversionUtil(MIN_GAS_PRICE_HEX, {
+  fromDenomination: 'WEI',
+  toDenomination: 'GWEI',
+  fromNumericBase: 'hex',
+  toNumericBase: 'hex',
+}))
+
 const MIN_GAS_TOTAL = multiplyCurrencies(MIN_GAS_LIMIT_HEX, MIN_GAS_PRICE_HEX, {
   toNumericBase: 'hex',
   multiplicandBase: 16,
-- 
cgit 


From 5a94775b3fa22517a71232ebe229ee83e9debcf1 Mon Sep 17 00:00:00 2001
From: Dan <danjm.com@gmail.com>
Date: Thu, 2 Nov 2017 00:00:33 -0230
Subject: Lint fixes for NewUI-flat.

---
 ui/app/components/send/currency-display.js   |  3 --
 ui/app/components/send/from-dropdown.js      |  3 --
 ui/app/components/send/gas-fee-display-v2.js |  2 +-
 ui/app/components/send/memo-textarea.js      | 50 ++++++++++++++--------------
 ui/app/components/send/send-constants.js     |  1 -
 ui/app/components/send/send-utils.js         |  1 -
 ui/app/components/send/send-v2-container.js  |  6 ----
 ui/app/components/send/to-autocomplete.js    |  5 ---
 8 files changed, 26 insertions(+), 45 deletions(-)

(limited to 'ui/app/components/send')

diff --git a/ui/app/components/send/currency-display.js b/ui/app/components/send/currency-display.js
index 5dba6a8dd..34939c767 100644
--- a/ui/app/components/send/currency-display.js
+++ b/ui/app/components/send/currency-display.js
@@ -1,7 +1,6 @@
 const Component = require('react').Component
 const h = require('react-hyperscript')
 const inherits = require('util').inherits
-const Identicon = require('../identicon')
 const { conversionUtil, multiplyCurrencies } = require('../../conversion-util')
 
 module.exports = CurrencyDisplay
@@ -48,8 +47,6 @@ CurrencyDisplay.prototype.render = function () {
     conversionRate,
     primaryCurrency,
     convertedCurrency,
-    convertedPrefix = '',
-    placeholder = '0',
     readOnly = false,
     inError = false,
     value: initValue,
diff --git a/ui/app/components/send/from-dropdown.js b/ui/app/components/send/from-dropdown.js
index 6f2b9da68..b404dde14 100644
--- a/ui/app/components/send/from-dropdown.js
+++ b/ui/app/components/send/from-dropdown.js
@@ -1,7 +1,6 @@
 const Component = require('react').Component
 const h = require('react-hyperscript')
 const inherits = require('util').inherits
-const Identicon = require('../identicon')
 const AccountListItem = require('./account-list-item')
 
 module.exports = FromDropdown
@@ -51,10 +50,8 @@ FromDropdown.prototype.renderDropdown = function () {
 
 FromDropdown.prototype.render = function () {
   const {
-    accounts,
     selectedAccount,
     openDropdown,
-    closeDropdown,
     dropdownOpen,
   } = this.props
 
diff --git a/ui/app/components/send/gas-fee-display-v2.js b/ui/app/components/send/gas-fee-display-v2.js
index 0e23b63ac..0b4377d29 100644
--- a/ui/app/components/send/gas-fee-display-v2.js
+++ b/ui/app/components/send/gas-fee-display-v2.js
@@ -23,7 +23,7 @@ GasFeeDisplay.prototype.render = function () {
 
     gasTotal
       ? h(CurrencyDisplay, {
-        primaryCurrency: 'ETH',
+        primaryCurrency,
         convertedCurrency,
         value: gasTotal,
         conversionRate,
diff --git a/ui/app/components/send/memo-textarea.js b/ui/app/components/send/memo-textarea.js
index 4005b9493..f5fe5e790 100644
--- a/ui/app/components/send/memo-textarea.js
+++ b/ui/app/components/send/memo-textarea.js
@@ -1,33 +1,33 @@
-const Component = require('react').Component
-const h = require('react-hyperscript')
-const inherits = require('util').inherits
-const Identicon = require('../identicon')
+// const Component = require('react').Component
+// const h = require('react-hyperscript')
+// const inherits = require('util').inherits
+// const Identicon = require('../identicon')
 
-module.exports = MemoTextArea
+// module.exports = MemoTextArea
 
-inherits(MemoTextArea, Component)
-function MemoTextArea () {
-  Component.call(this)
-}
+// inherits(MemoTextArea, Component)
+// function MemoTextArea () {
+//   Component.call(this)
+// }
 
-MemoTextArea.prototype.render = function () {
-  const { memo, identities, onChange } = this.props
+// MemoTextArea.prototype.render = function () {
+//   const { memo, identities, onChange } = this.props
 
-  return h('div.send-v2__memo-text-area', [
+//   return h('div.send-v2__memo-text-area', [
 
-    h('textarea.send-v2__memo-text-area__input', {
-      placeholder: 'Optional',
-      value: memo,
-      onChange,
-      // onBlur: () => {
-      //   this.setErrorsFor('memo')
-      // },
-      onFocus: event => {
-        // this.clearErrorsFor('memo')
-      },
-    }),
+//     h('textarea.send-v2__memo-text-area__input', {
+//       placeholder: 'Optional',
+//       value: memo,
+//       onChange,
+//       // onBlur: () => {
+//       //   this.setErrorsFor('memo')
+//       // },
+//       onFocus: event => {
+//         // this.clearErrorsFor('memo')
+//       },
+//     }),
 
-  ])
+//   ])
     
-}
+// }
 
diff --git a/ui/app/components/send/send-constants.js b/ui/app/components/send/send-constants.js
index 471e01e2a..0a4f85bc9 100644
--- a/ui/app/components/send/send-constants.js
+++ b/ui/app/components/send/send-constants.js
@@ -1,5 +1,4 @@
 const ethUtil = require('ethereumjs-util')
-const Identicon = require('../identicon')
 const { conversionUtil, multiplyCurrencies } = require('../../conversion-util')
 
 const MIN_GAS_PRICE_HEX = (100000000).toString(16)
diff --git a/ui/app/components/send/send-utils.js b/ui/app/components/send/send-utils.js
index bf096d610..2def62842 100644
--- a/ui/app/components/send/send-utils.js
+++ b/ui/app/components/send/send-utils.js
@@ -27,7 +27,6 @@ function isBalanceSufficient({
       fromNumericBase: 'hex',
       conversionRate: amountConversionRate,
       fromCurrency: selectedToken || primaryCurrency,
-      conversionRate: amountConversionRate,
     },
   )
 
diff --git a/ui/app/components/send/send-v2-container.js b/ui/app/components/send/send-v2-container.js
index fb2634de2..efdf69795 100644
--- a/ui/app/components/send/send-v2-container.js
+++ b/ui/app/components/send/send-v2-container.js
@@ -3,17 +3,12 @@ const actions = require('../../actions')
 const abi = require('ethereumjs-abi')
 const SendEther = require('../../send-v2')
 
-const { multiplyCurrencies } = require('../../conversion-util')
-
 const {
   accountsWithSendEtherInfoSelector,
   getCurrentAccountWithSendEtherInfo,
   conversionRateSelector,
   getSelectedToken,
-  getSelectedTokenExchangeRate,
   getSelectedAddress,
-  getGasPrice,
-  getGasLimit,
   getAddressBook,
   getSendFrom,
   getCurrentCurrency,
@@ -26,7 +21,6 @@ function mapStateToProps (state) {
   const fromAccounts = accountsWithSendEtherInfoSelector(state)
   const selectedAddress = getSelectedAddress(state)
   const selectedToken = getSelectedToken(state)
-  const tokenExchangeRates = state.metamask.tokenExchangeRates
   const conversionRate = conversionRateSelector(state)
 
   let data;
diff --git a/ui/app/components/send/to-autocomplete.js b/ui/app/components/send/to-autocomplete.js
index ab490155b..ebc63a7c5 100644
--- a/ui/app/components/send/to-autocomplete.js
+++ b/ui/app/components/send/to-autocomplete.js
@@ -1,7 +1,6 @@
 const Component = require('react').Component
 const h = require('react-hyperscript')
 const inherits = require('util').inherits
-const Identicon = require('../identicon')
 const AccountListItem = require('./account-list-item')
 
 module.exports = ToAutoComplete
@@ -23,7 +22,6 @@ ToAutoComplete.prototype.getListItemIcon = function (listItemAddress, toAddress)
 
 ToAutoComplete.prototype.renderDropdown = function () {
   const {
-    accounts,
     closeDropdown,
     onChange,
     to,
@@ -86,9 +84,6 @@ ToAutoComplete.prototype.componentDidUpdate = function (nextProps, nextState) {
 ToAutoComplete.prototype.render = function () {
   const {
     to,
-    accounts,
-    openDropdown,
-    closeDropdown,
     dropdownOpen,
     onChange,
     inError,
-- 
cgit 


From 56e9f98bd05de8ae26f653d15eec4304f0c72155 Mon Sep 17 00:00:00 2001
From: Dan <danjm.com@gmail.com>
Date: Thu, 2 Nov 2017 09:45:59 -0230
Subject: More lint fixes

---
 ui/app/components/send/account-list-item.js  |  2 +-
 ui/app/components/send/currency-display.js   | 10 ++++------
 ui/app/components/send/eth-fee-display.js    |  4 ++--
 ui/app/components/send/from-dropdown.js      | 10 +++++-----
 ui/app/components/send/gas-fee-display-v2.js |  5 ++---
 ui/app/components/send/memo-textarea.js      |  2 +-
 ui/app/components/send/send-utils.js         |  4 ++--
 ui/app/components/send/send-v2-container.js  |  8 ++++----
 ui/app/components/send/to-autocomplete.js    | 13 ++++++-------
 ui/app/components/send/usd-fee-display.js    |  4 ++--
 10 files changed, 29 insertions(+), 33 deletions(-)

(limited to 'ui/app/components/send')

diff --git a/ui/app/components/send/account-list-item.js b/ui/app/components/send/account-list-item.js
index cc514cbd4..2378a4671 100644
--- a/ui/app/components/send/account-list-item.js
+++ b/ui/app/components/send/account-list-item.js
@@ -68,4 +68,4 @@ AccountListItem.prototype.render = function () {
     }, name),
 
   ])
-}
\ No newline at end of file
+}
diff --git a/ui/app/components/send/currency-display.js b/ui/app/components/send/currency-display.js
index 34939c767..45986e371 100644
--- a/ui/app/components/send/currency-display.js
+++ b/ui/app/components/send/currency-display.js
@@ -71,7 +71,7 @@ CurrencyDisplay.prototype.render = function () {
     conversionRate,
   })
 
-  const inputSizeMultiplier = readOnly ? 1 : 1.2;
+  const inputSizeMultiplier = readOnly ? 1 : 1.2
 
   return h('div', {
     className,
@@ -95,15 +95,13 @@ CurrencyDisplay.prototype.render = function () {
 
             if (newValue === '') {
               newValue = '0'
-            }
-            else if (newValue.match(/^0[1-9]$/)) {
+            } else if (newValue.match(/^0[1-9]$/)) {
               newValue = newValue.match(/[1-9]/)[0]
             }
 
             if (newValue && !isValidInput(newValue)) {
               event.preventDefault()
-            }
-            else {
+            } else {
               validate(this.getAmount(newValue))
               this.setState({ value: newValue })
             }
@@ -122,6 +120,6 @@ CurrencyDisplay.prototype.render = function () {
     }, `${convertedValue} ${convertedCurrency.toUpperCase()}`),
 
   ])
-    
+
 }
 
diff --git a/ui/app/components/send/eth-fee-display.js b/ui/app/components/send/eth-fee-display.js
index 8b4cec16c..9eda5ec62 100644
--- a/ui/app/components/send/eth-fee-display.js
+++ b/ui/app/components/send/eth-fee-display.js
@@ -30,8 +30,8 @@ EthFeeDisplay.prototype.render = function () {
       color: '#5d5d5d',
       fontSize: '16px',
       fontFamily: 'DIN OT',
-      lineHeight: '22.4px'
-    }
+      lineHeight: '22.4px',
+    },
   })
 }
 
diff --git a/ui/app/components/send/from-dropdown.js b/ui/app/components/send/from-dropdown.js
index b404dde14..bcae5ede8 100644
--- a/ui/app/components/send/from-dropdown.js
+++ b/ui/app/components/send/from-dropdown.js
@@ -35,13 +35,13 @@ FromDropdown.prototype.renderDropdown = function () {
     h('div.send-v2__from-dropdown__list', {}, [
 
       ...accounts.map(account => h(AccountListItem, {
-        account, 
+        account,
         handleClick: () => {
           onSelect(account)
           closeDropdown()
-        }, 
+        },
         icon: this.getListItemIcon(account, selectedAccount),
-      }))
+      })),
 
     ]),
 
@@ -60,12 +60,12 @@ FromDropdown.prototype.render = function () {
     h(AccountListItem, {
       account: selectedAccount,
       handleClick: openDropdown,
-      icon: h(`i.fa.fa-caret-down.fa-lg`, { style: { color: '#dedede' } })
+      icon: h(`i.fa.fa-caret-down.fa-lg`, { style: { color: '#dedede' } }),
     }),
 
     dropdownOpen && this.renderDropdown(),
 
   ])
-    
+
 }
 
diff --git a/ui/app/components/send/gas-fee-display-v2.js b/ui/app/components/send/gas-fee-display-v2.js
index 0b4377d29..806c33f0a 100644
--- a/ui/app/components/send/gas-fee-display-v2.js
+++ b/ui/app/components/send/gas-fee-display-v2.js
@@ -30,14 +30,13 @@ GasFeeDisplay.prototype.render = function () {
         convertedPrefix: '$',
         readOnly: true,
       })
-      : h('div.currency-display', 'Loading...')
-    ,
+      : h('div.currency-display', 'Loading...'),
 
     h('div.send-v2__sliders-icon-container', {
       onClick,
     }, [
       h('i.fa.fa-sliders.send-v2__sliders-icon'),
-    ])
+    ]),
 
   ])
 }
diff --git a/ui/app/components/send/memo-textarea.js b/ui/app/components/send/memo-textarea.js
index f5fe5e790..f4bb24bf8 100644
--- a/ui/app/components/send/memo-textarea.js
+++ b/ui/app/components/send/memo-textarea.js
@@ -28,6 +28,6 @@
 //     }),
 
 //   ])
-    
+
 // }
 
diff --git a/ui/app/components/send/send-utils.js b/ui/app/components/send/send-utils.js
index 2def62842..6ec04a223 100644
--- a/ui/app/components/send/send-utils.js
+++ b/ui/app/components/send/send-utils.js
@@ -1,6 +1,6 @@
 const { addCurrencies, conversionGreaterThan } = require('../../conversion-util')
 
-function isBalanceSufficient({
+function isBalanceSufficient ({
   amount,
   gasTotal,
   balance,
@@ -35,4 +35,4 @@ function isBalanceSufficient({
 
 module.exports = {
   isBalanceSufficient,
-}
\ No newline at end of file
+}
diff --git a/ui/app/components/send/send-v2-container.js b/ui/app/components/send/send-v2-container.js
index efdf69795..5a6e83ae6 100644
--- a/ui/app/components/send/send-v2-container.js
+++ b/ui/app/components/send/send-v2-container.js
@@ -23,9 +23,9 @@ function mapStateToProps (state) {
   const selectedToken = getSelectedToken(state)
   const conversionRate = conversionRateSelector(state)
 
-  let data;
-  let primaryCurrency;
-  let tokenToFiatRate;
+  let data
+  let primaryCurrency
+  let tokenToFiatRate
   if (selectedToken) {
     data = Array.prototype.map.call(
       abi.rawEncode(['address', 'uint256'], [selectedAddress, '0x0']),
@@ -70,6 +70,6 @@ function mapDispatchToProps (dispatch) {
     updateSendMemo: newMemo => dispatch(actions.updateSendMemo(newMemo)),
     updateSendErrors: newError => dispatch(actions.updateSendErrors(newError)),
     goHome: () => dispatch(actions.goHome()),
-    clearSend: () => dispatch(actions.clearSend())
+    clearSend: () => dispatch(actions.clearSend()),
   }
 }
diff --git a/ui/app/components/send/to-autocomplete.js b/ui/app/components/send/to-autocomplete.js
index ebc63a7c5..df43fcc4a 100644
--- a/ui/app/components/send/to-autocomplete.js
+++ b/ui/app/components/send/to-autocomplete.js
@@ -37,15 +37,15 @@ ToAutoComplete.prototype.renderDropdown = function () {
     h('div.send-v2__from-dropdown__list', {}, [
 
       ...accountsToRender.map(account => h(AccountListItem, {
-        account, 
+        account,
         handleClick: () => {
           onChange(account.address)
           closeDropdown()
-        }, 
+        },
         icon: this.getListItemIcon(account.address, to),
         displayBalance: false,
         displayAddress: true,
-      }))
+      })),
 
     ]),
 
@@ -67,8 +67,7 @@ ToAutoComplete.prototype.handleInputEvent = function (event = {}, cb) {
     this.setState({ accountsToRender: [] })
     event.target && event.target.select()
     closeDropdown()
-  }
-  else {
+  } else {
     this.setState({ accountsToRender: matchingAccounts })
     openDropdown()
   }
@@ -93,13 +92,13 @@ ToAutoComplete.prototype.render = function () {
 
     h('input.send-v2__to-autocomplete__input', {
       placeholder: 'Recipient Address',
-      className: inError ? `send-v2__error-border` : '', 
+      className: inError ? `send-v2__error-border` : '',
       value: to,
       onChange: event => onChange(event.target.value),
       onFocus: event => this.handleInputEvent(event),
       style: {
         borderColor: inError ? 'red' : null,
-      }
+      },
     }),
 
     !to && h(`i.fa.fa-caret-down.fa-lg.send-v2__to-autocomplete__down-caret`, {
diff --git a/ui/app/components/send/usd-fee-display.js b/ui/app/components/send/usd-fee-display.js
index 6ee38f1b5..4cf31a493 100644
--- a/ui/app/components/send/usd-fee-display.js
+++ b/ui/app/components/send/usd-fee-display.js
@@ -28,8 +28,8 @@ USDFeeDisplay.prototype.render = function () {
       color: '#5d5d5d',
       fontSize: '16px',
       fontFamily: 'DIN OT',
-      lineHeight: '22.4px'
-    }
+      lineHeight: '22.4px',
+    },
   })
 }
 
-- 
cgit 


From dc0b3255cf908320b5b46f02765ea03b5b4db6b7 Mon Sep 17 00:00:00 2001
From: Dan <danjm.com@gmail.com>
Date: Mon, 30 Oct 2017 20:09:27 -0230
Subject: Fixes width of from and to dropdowns in extension and on mobile
 views.

---
 ui/app/components/send/to-autocomplete.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'ui/app/components/send')

diff --git a/ui/app/components/send/to-autocomplete.js b/ui/app/components/send/to-autocomplete.js
index ab490155b..fdb093baa 100644
--- a/ui/app/components/send/to-autocomplete.js
+++ b/ui/app/components/send/to-autocomplete.js
@@ -94,7 +94,7 @@ ToAutoComplete.prototype.render = function () {
     inError,
   } = this.props
 
-  return h('div.to-autocomplete', {}, [
+  return h('div.send-v2__to-autocomplete', {}, [
 
     h('input.send-v2__to-autocomplete__input', {
       placeholder: 'Recipient Address',
-- 
cgit 


From 67bdfe87e31e695f8c4beab1659a3a4b764ccf24 Mon Sep 17 00:00:00 2001
From: Dan <danjm.com@gmail.com>
Date: Mon, 30 Oct 2017 15:18:50 -0230
Subject: Token balance in send state; validating sufficient tokens, validation
 updates on 'from' switching.

---
 ui/app/components/send/send-utils.js        | 43 +++++++++++++++++++++++++----
 ui/app/components/send/send-v2-container.js |  3 ++
 2 files changed, 40 insertions(+), 6 deletions(-)

(limited to 'ui/app/components/send')

diff --git a/ui/app/components/send/send-utils.js b/ui/app/components/send/send-utils.js
index 6ec04a223..4eb010173 100644
--- a/ui/app/components/send/send-utils.js
+++ b/ui/app/components/send/send-utils.js
@@ -1,11 +1,18 @@
-const { addCurrencies, conversionGreaterThan } = require('../../conversion-util')
+const {
+  addCurrencies,
+  conversionGreaterThan,
+  conversionUtil,
+  conversionGTE,
+} = require('../../conversion-util')
+const {
+  calcTokenAmount,
+} = require('../../token-util')
 
-function isBalanceSufficient ({
-  amount,
-  gasTotal,
+function isBalanceSufficient({
+  amount = '0x0',
+  gasTotal = '0x0',
   balance,
   primaryCurrency,
-  selectedToken,
   amountConversionRate,
   conversionRate,
 }) {
@@ -26,13 +33,37 @@ function isBalanceSufficient ({
       value: totalAmount,
       fromNumericBase: 'hex',
       conversionRate: amountConversionRate,
-      fromCurrency: selectedToken || primaryCurrency,
+      fromCurrency: primaryCurrency,
     },
   )
 
   return balanceIsSufficient
 }
 
+function isTokenBalanceSufficient({
+  amount = '0x0',
+  tokenBalance,
+  decimals,
+}) {
+  const amountInDec = conversionUtil(amount, {
+    fromNumericBase: 'hex',
+  })
+
+  const tokenBalanceIsSufficient = conversionGTE(
+    {
+      value: tokenBalance,
+      fromNumericBase: 'dec',
+    },
+    {
+      value: calcTokenAmount(amountInDec, decimals),
+      fromNumericBase: 'dec',
+    },
+  )
+
+  return tokenBalanceIsSufficient
+}
+
 module.exports = {
   isBalanceSufficient,
+  isTokenBalanceSufficient,
 }
diff --git a/ui/app/components/send/send-v2-container.js b/ui/app/components/send/send-v2-container.js
index 5a6e83ae6..ee18d0b4b 100644
--- a/ui/app/components/send/send-v2-container.js
+++ b/ui/app/components/send/send-v2-container.js
@@ -13,6 +13,7 @@ const {
   getSendFrom,
   getCurrentCurrency,
   getSelectedTokenToFiatRate,
+  getSelectedTokenContract,
 } = require('../../selectors')
 
 module.exports = connect(mapStateToProps, mapDispatchToProps)(SendEther)
@@ -48,6 +49,7 @@ function mapStateToProps (state) {
     convertedCurrency: getCurrentCurrency(state),
     data,
     amountConversionRate: selectedToken ? tokenToFiatRate : conversionRate,
+    tokenContract: getSelectedTokenContract(state),
   }
 }
 
@@ -64,6 +66,7 @@ function mapDispatchToProps (dispatch) {
     setSelectedAddress: address => dispatch(actions.setSelectedAddress(address)),
     addToAddressBook: address => dispatch(actions.addToAddressBook(address)),
     updateGasTotal: newTotal => dispatch(actions.updateGasTotal(newTotal)),
+    updateSendTokenBalance: tokenBalance => dispatch(actions.updateSendTokenBalance(tokenBalance)),
     updateSendFrom: newFrom => dispatch(actions.updateSendFrom(newFrom)),
     updateSendTo: newTo => dispatch(actions.updateSendTo(newTo)),
     updateSendAmount: newAmount => dispatch(actions.updateSendAmount(newAmount)),
-- 
cgit 


From 319779ab081f70343b5ef77531450878292a90d6 Mon Sep 17 00:00:00 2001
From: Dan <danjm.com@gmail.com>
Date: Thu, 26 Oct 2017 14:13:12 -0230
Subject: Adds max amount feature for send-ether

---
 ui/app/components/send/send-utils.js        | 2 +-
 ui/app/components/send/send-v2-container.js | 2 ++
 2 files changed, 3 insertions(+), 1 deletion(-)

(limited to 'ui/app/components/send')

diff --git a/ui/app/components/send/send-utils.js b/ui/app/components/send/send-utils.js
index 4eb010173..0260c38a6 100644
--- a/ui/app/components/send/send-utils.js
+++ b/ui/app/components/send/send-utils.js
@@ -22,7 +22,7 @@ function isBalanceSufficient({
     toNumericBase: 'hex',
   })
 
-  const balanceIsSufficient = conversionGreaterThan(
+  const balanceIsSufficient = conversionGTE(
     {
       value: balance,
       fromNumericBase: 'hex',
diff --git a/ui/app/components/send/send-v2-container.js b/ui/app/components/send/send-v2-container.js
index ee18d0b4b..51d5c4f89 100644
--- a/ui/app/components/send/send-v2-container.js
+++ b/ui/app/components/send/send-v2-container.js
@@ -66,6 +66,8 @@ function mapDispatchToProps (dispatch) {
     setSelectedAddress: address => dispatch(actions.setSelectedAddress(address)),
     addToAddressBook: address => dispatch(actions.addToAddressBook(address)),
     updateGasTotal: newTotal => dispatch(actions.updateGasTotal(newTotal)),
+    updateGasPrice: newGasPrice => dispatch(actions.updateGasPrice(newGasPrice)),
+    updateGasLimit: newGasLimit => dispatch(actions.updateGasLimit(newGasLimit)),
     updateSendTokenBalance: tokenBalance => dispatch(actions.updateSendTokenBalance(tokenBalance)),
     updateSendFrom: newFrom => dispatch(actions.updateSendFrom(newFrom)),
     updateSendTo: newTo => dispatch(actions.updateSendTo(newTo)),
-- 
cgit 


From 716bbf67d7180ffe0f59d07484d30231ed5f5e49 Mon Sep 17 00:00:00 2001
From: Dan <danjm.com@gmail.com>
Date: Mon, 30 Oct 2017 19:16:56 -0230
Subject: Set gas price allows for WEI precision.

---
 ui/app/components/send/send-constants.js | 1 +
 1 file changed, 1 insertion(+)

(limited to 'ui/app/components/send')

diff --git a/ui/app/components/send/send-constants.js b/ui/app/components/send/send-constants.js
index 0a4f85bc9..a961ffcd8 100644
--- a/ui/app/components/send/send-constants.js
+++ b/ui/app/components/send/send-constants.js
@@ -11,6 +11,7 @@ const MIN_GAS_PRICE_GWEI = ethUtil.addHexPrefix(conversionUtil(MIN_GAS_PRICE_HEX
   toDenomination: 'GWEI',
   fromNumericBase: 'hex',
   toNumericBase: 'hex',
+  numberOfDecimals: 1,
 }))
 
 const MIN_GAS_TOTAL = multiplyCurrencies(MIN_GAS_LIMIT_HEX, MIN_GAS_PRICE_HEX, {
-- 
cgit 


From 8c6e1232e417f5a2974b5aa1cc479dac4925df63 Mon Sep 17 00:00:00 2001
From: Dan <danjm.com@gmail.com>
Date: Mon, 6 Nov 2017 16:14:46 -0330
Subject: Lint fixes.

---
 ui/app/components/send/send-utils.js | 1 -
 1 file changed, 1 deletion(-)

(limited to 'ui/app/components/send')

diff --git a/ui/app/components/send/send-utils.js b/ui/app/components/send/send-utils.js
index 0260c38a6..bd1197950 100644
--- a/ui/app/components/send/send-utils.js
+++ b/ui/app/components/send/send-utils.js
@@ -1,6 +1,5 @@
 const {
   addCurrencies,
-  conversionGreaterThan,
   conversionUtil,
   conversionGTE,
 } = require('../../conversion-util')
-- 
cgit 


From c57d504794b6020d42dcdabe08a13ed412450fc1 Mon Sep 17 00:00:00 2001
From: Dan <danjm.com@gmail.com>
Date: Tue, 7 Nov 2017 20:06:26 -0330
Subject: Add currency-input component to correct send amount behaviour and
 move currency display value state to parent component.

---
 ui/app/components/send/currency-display.js | 36 +++++++-----------------------
 1 file changed, 8 insertions(+), 28 deletions(-)

(limited to 'ui/app/components/send')

diff --git a/ui/app/components/send/currency-display.js b/ui/app/components/send/currency-display.js
index 45986e371..8b72b3e6d 100644
--- a/ui/app/components/send/currency-display.js
+++ b/ui/app/components/send/currency-display.js
@@ -1,6 +1,7 @@
 const Component = require('react').Component
 const h = require('react-hyperscript')
 const inherits = require('util').inherits
+const CurrencyInput = require('../currency-input')
 const { conversionUtil, multiplyCurrencies } = require('../../conversion-util')
 
 module.exports = CurrencyDisplay
@@ -8,10 +9,6 @@ module.exports = CurrencyDisplay
 inherits(CurrencyDisplay, Component)
 function CurrencyDisplay () {
   Component.call(this)
-
-  this.state = {
-    value: null,
-  }
 }
 
 function isValidInput (text) {
@@ -49,13 +46,11 @@ CurrencyDisplay.prototype.render = function () {
     convertedCurrency,
     readOnly = false,
     inError = false,
-    value: initValue,
+    value,
     handleChange,
-    validate,
   } = this.props
-  const { value } = this.state
 
-  const initValueToRender = conversionUtil(initValue, {
+  const valueToRender = conversionUtil(value, {
     fromNumericBase: 'hex',
     toNumericBase: 'dec',
     fromDenomination: 'WEI',
@@ -63,7 +58,7 @@ CurrencyDisplay.prototype.render = function () {
     conversionRate,
   })
 
-  const convertedValue = conversionUtil(value || initValueToRender, {
+  const convertedValue = conversionUtil(valueToRender, {
     fromNumericBase: 'dec',
     fromCurrency: primaryCurrency,
     toCurrency: convertedCurrency,
@@ -84,29 +79,14 @@ CurrencyDisplay.prototype.render = function () {
 
       h('div.currency-display__input-wrapper', [
 
-        h('input', {
+        h(CurrencyInput, {
           className: primaryBalanceClassName,
-          value: `${value || initValueToRender}`,
+          value: `${valueToRender}`,
           placeholder: '0',
-          size: (value || initValueToRender).length * inputSizeMultiplier,
           readOnly,
-          onChange: (event) => {
-            let newValue = event.target.value
-
-            if (newValue === '') {
-              newValue = '0'
-            } else if (newValue.match(/^0[1-9]$/)) {
-              newValue = newValue.match(/[1-9]/)[0]
-            }
-
-            if (newValue && !isValidInput(newValue)) {
-              event.preventDefault()
-            } else {
-              validate(this.getAmount(newValue))
-              this.setState({ value: newValue })
-            }
+          onInputChange: newValue => {
+            handleChange(this.getAmount(newValue))
           },
-          onBlur: event => !readOnly && handleChange(this.getAmount(event.target.value)),
         }),
 
         h('span.currency-display__currency-symbol', primaryCurrency),
-- 
cgit 


From c156c85eaa064b971ce0202df0bb1681eb0e22dd Mon Sep 17 00:00:00 2001
From: Dan <danjm.com@gmail.com>
Date: Tue, 7 Nov 2017 21:47:14 -0330
Subject: Fix amount max for sending token.

---
 ui/app/components/send/currency-display.js | 30 +++++++++++++++++++++++-------
 1 file changed, 23 insertions(+), 7 deletions(-)

(limited to 'ui/app/components/send')

diff --git a/ui/app/components/send/currency-display.js b/ui/app/components/send/currency-display.js
index 8b72b3e6d..49df5b0b7 100644
--- a/ui/app/components/send/currency-display.js
+++ b/ui/app/components/send/currency-display.js
@@ -36,6 +36,28 @@ CurrencyDisplay.prototype.getAmount = function (value) {
     : toHexWei(value)
 }
 
+CurrencyDisplay.prototype.getValueToRender = function () {
+  const { selectedToken, conversionRate, value } = this.props
+
+  const { decimals, symbol } = selectedToken || {}
+  const multiplier = Math.pow(10, Number(decimals || 0))
+
+  return selectedToken
+    ? conversionUtil(value, {
+      fromNumericBase: 'hex',
+      toCurrency: symbol,
+      conversionRate: multiplier,
+      invertConversionRate: true,
+    })
+    : conversionUtil(value, {
+      fromNumericBase: 'hex',
+      toNumericBase: 'dec',
+      fromDenomination: 'WEI',
+      numberOfDecimals: 6,
+      conversionRate,
+    })
+}
+
 CurrencyDisplay.prototype.render = function () {
   const {
     className = 'currency-display',
@@ -50,13 +72,7 @@ CurrencyDisplay.prototype.render = function () {
     handleChange,
   } = this.props
 
-  const valueToRender = conversionUtil(value, {
-    fromNumericBase: 'hex',
-    toNumericBase: 'dec',
-    fromDenomination: 'WEI',
-    numberOfDecimals: 6,
-    conversionRate,
-  })
+  const valueToRender = this.getValueToRender()
 
   const convertedValue = conversionUtil(valueToRender, {
     fromNumericBase: 'dec',
-- 
cgit 


From d1977225a48f381f3a6bda4a54ce9e0e0914357e Mon Sep 17 00:00:00 2001
From: Dan <danjm.com@gmail.com>
Date: Tue, 7 Nov 2017 21:49:14 -0330
Subject: Calculate max amount for send ether based on minimum gas total.

---
 ui/app/components/send/currency-display.js | 8 --------
 1 file changed, 8 deletions(-)

(limited to 'ui/app/components/send')

diff --git a/ui/app/components/send/currency-display.js b/ui/app/components/send/currency-display.js
index 49df5b0b7..870fbb42a 100644
--- a/ui/app/components/send/currency-display.js
+++ b/ui/app/components/send/currency-display.js
@@ -11,11 +11,6 @@ function CurrencyDisplay () {
   Component.call(this)
 }
 
-function isValidInput (text) {
-  const re = /^([1-9]\d*|0)(\.|\.\d*)?$/
-  return re.test(text)
-}
-
 function toHexWei (value) {
   return conversionUtil(value, {
     fromNumericBase: 'dec',
@@ -68,7 +63,6 @@ CurrencyDisplay.prototype.render = function () {
     convertedCurrency,
     readOnly = false,
     inError = false,
-    value,
     handleChange,
   } = this.props
 
@@ -82,8 +76,6 @@ CurrencyDisplay.prototype.render = function () {
     conversionRate,
   })
 
-  const inputSizeMultiplier = readOnly ? 1 : 1.2
-
   return h('div', {
     className,
     style: {
-- 
cgit 


From 5120cfdff3047e4bf88cec544895cc713d063cdd Mon Sep 17 00:00:00 2001
From: Thomas Huang <thomas.b.huang@gmail.com>
Date: Thu, 9 Nov 2017 14:23:10 -0800
Subject: Linting

---
 ui/app/components/send/send-utils.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

(limited to 'ui/app/components/send')

diff --git a/ui/app/components/send/send-utils.js b/ui/app/components/send/send-utils.js
index bd1197950..d8211930d 100644
--- a/ui/app/components/send/send-utils.js
+++ b/ui/app/components/send/send-utils.js
@@ -7,7 +7,7 @@ const {
   calcTokenAmount,
 } = require('../../token-util')
 
-function isBalanceSufficient({
+function isBalanceSufficient ({
   amount = '0x0',
   gasTotal = '0x0',
   balance,
@@ -39,7 +39,7 @@ function isBalanceSufficient({
   return balanceIsSufficient
 }
 
-function isTokenBalanceSufficient({
+function isTokenBalanceSufficient ({
   amount = '0x0',
   tokenBalance,
   decimals,
-- 
cgit 


From 5a0126f17b3513fa7fa1513f2c52abff19535ac0 Mon Sep 17 00:00:00 2001
From: Dan <danjm.com@gmail.com>
Date: Fri, 10 Nov 2017 07:07:53 -0330
Subject: Rounding of vals < 0.01 in currency display consistent with master.

---
 ui/app/components/send/currency-display.js | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

(limited to 'ui/app/components/send')

diff --git a/ui/app/components/send/currency-display.js b/ui/app/components/send/currency-display.js
index 870fbb42a..5057c413c 100644
--- a/ui/app/components/send/currency-display.js
+++ b/ui/app/components/send/currency-display.js
@@ -68,13 +68,14 @@ CurrencyDisplay.prototype.render = function () {
 
   const valueToRender = this.getValueToRender()
 
-  const convertedValue = conversionUtil(valueToRender, {
+  let convertedValue = conversionUtil(valueToRender, {
     fromNumericBase: 'dec',
     fromCurrency: primaryCurrency,
     toCurrency: convertedCurrency,
     numberOfDecimals: 2,
     conversionRate,
   })
+  convertedValue = Number(convertedValue).toFixed(2)
 
   return h('div', {
     className,
-- 
cgit 


From a33ced39946c1448b56aef22ab3573b00d1faeca Mon Sep 17 00:00:00 2001
From: Dan <danjm.com@gmail.com>
Date: Fri, 10 Nov 2017 15:17:02 -0330
Subject: Focus amount input when click anywhere in amount field container

---
 ui/app/components/send/currency-display.js | 2 ++
 1 file changed, 2 insertions(+)

(limited to 'ui/app/components/send')

diff --git a/ui/app/components/send/currency-display.js b/ui/app/components/send/currency-display.js
index 5057c413c..5bf8d6aa0 100644
--- a/ui/app/components/send/currency-display.js
+++ b/ui/app/components/send/currency-display.js
@@ -82,6 +82,7 @@ CurrencyDisplay.prototype.render = function () {
     style: {
       borderColor: inError ? 'red' : null,
     },
+    onClick: () => this.currencyInput.focus(),
   }, [
 
     h('div.currency-display__primary-row', [
@@ -96,6 +97,7 @@ CurrencyDisplay.prototype.render = function () {
           onInputChange: newValue => {
             handleChange(this.getAmount(newValue))
           },
+          inputRef: input => { this.currencyInput = input; },
         }),
 
         h('span.currency-display__currency-symbol', primaryCurrency),
-- 
cgit 


From 08d9ecc0454c729356f3f7a6d91156ee96c66959 Mon Sep 17 00:00:00 2001
From: Dan <danjm.com@gmail.com>
Date: Fri, 10 Nov 2017 16:15:43 -0330
Subject: Cursor pointer and hover background on from and to dropdown items.

---
 ui/app/components/send/account-list-item.js | 2 ++
 ui/app/components/send/from-dropdown.js     | 1 +
 ui/app/components/send/to-autocomplete.js   | 1 +
 3 files changed, 4 insertions(+)

(limited to 'ui/app/components/send')

diff --git a/ui/app/components/send/account-list-item.js b/ui/app/components/send/account-list-item.js
index 2378a4671..1ad3f69c1 100644
--- a/ui/app/components/send/account-list-item.js
+++ b/ui/app/components/send/account-list-item.js
@@ -22,6 +22,7 @@ module.exports = connect(mapStateToProps)(AccountListItem)
 
 AccountListItem.prototype.render = function () {
   const {
+    className,
     account,
     handleClick,
     icon = null,
@@ -34,6 +35,7 @@ AccountListItem.prototype.render = function () {
   const { name, address, balance } = account || {}
 
   return h('div.account-list-item', {
+    className,
     onClick: () => handleClick({ name, address, balance }),
   }, [
 
diff --git a/ui/app/components/send/from-dropdown.js b/ui/app/components/send/from-dropdown.js
index bcae5ede8..0686fbe73 100644
--- a/ui/app/components/send/from-dropdown.js
+++ b/ui/app/components/send/from-dropdown.js
@@ -35,6 +35,7 @@ FromDropdown.prototype.renderDropdown = function () {
     h('div.send-v2__from-dropdown__list', {}, [
 
       ...accounts.map(account => h(AccountListItem, {
+        className: 'account-list-item__dropdown',
         account,
         handleClick: () => {
           onSelect(account)
diff --git a/ui/app/components/send/to-autocomplete.js b/ui/app/components/send/to-autocomplete.js
index fef8d5ccb..e0cdd0a58 100644
--- a/ui/app/components/send/to-autocomplete.js
+++ b/ui/app/components/send/to-autocomplete.js
@@ -38,6 +38,7 @@ ToAutoComplete.prototype.renderDropdown = function () {
 
       ...accountsToRender.map(account => h(AccountListItem, {
         account,
+        className: 'account-list-item__dropdown',
         handleClick: () => {
           onChange(account.address)
           closeDropdown()
-- 
cgit 


From 34ca7290c593d6fb27faa98a660c8c0bca7e1457 Mon Sep 17 00:00:00 2001
From: Dan <danjm.com@gmail.com>
Date: Wed, 8 Nov 2017 13:14:48 -0330
Subject: Allow editing of send ether.

---
 ui/app/components/send/send-v2-container.js | 2 ++
 1 file changed, 2 insertions(+)

(limited to 'ui/app/components/send')

diff --git a/ui/app/components/send/send-v2-container.js b/ui/app/components/send/send-v2-container.js
index 51d5c4f89..4451a6113 100644
--- a/ui/app/components/send/send-v2-container.js
+++ b/ui/app/components/send/send-v2-container.js
@@ -63,6 +63,7 @@ function mapDispatchToProps (dispatch) {
       dispatch(actions.signTokenTx(tokenAddress, toAddress, amount, txData))
     ),
     signTx: txParams => dispatch(actions.signTx(txParams)),
+    updateAndApproveTx: txParams => dispatch(actions.updateAndApproveTx(txParams)),
     setSelectedAddress: address => dispatch(actions.setSelectedAddress(address)),
     addToAddressBook: address => dispatch(actions.addToAddressBook(address)),
     updateGasTotal: newTotal => dispatch(actions.updateGasTotal(newTotal)),
@@ -76,5 +77,6 @@ function mapDispatchToProps (dispatch) {
     updateSendErrors: newError => dispatch(actions.updateSendErrors(newError)),
     goHome: () => dispatch(actions.goHome()),
     clearSend: () => dispatch(actions.clearSend()),
+    backToConfirmScreen: editingTransactionId => dispatch(actions.showConfTxPage({ id: editingTransactionId })),
   }
 }
-- 
cgit 


From 9e3f921ba928a948c04b4156daa0a3f752ee2dde Mon Sep 17 00:00:00 2001
From: Dan <danjm.com@gmail.com>
Date: Fri, 10 Nov 2017 00:19:16 -0330
Subject: Create single action for updating all of send in redux state.

---
 ui/app/components/send/currency-display.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'ui/app/components/send')

diff --git a/ui/app/components/send/currency-display.js b/ui/app/components/send/currency-display.js
index 5bf8d6aa0..819fee0a0 100644
--- a/ui/app/components/send/currency-display.js
+++ b/ui/app/components/send/currency-display.js
@@ -97,7 +97,7 @@ CurrencyDisplay.prototype.render = function () {
           onInputChange: newValue => {
             handleChange(this.getAmount(newValue))
           },
-          inputRef: input => { this.currencyInput = input; },
+          inputRef: input => { this.currencyInput = input },
         }),
 
         h('span.currency-display__currency-symbol', primaryCurrency),
-- 
cgit 


From c6713e93adcaeeba1ec559d44135bb62c76d2538 Mon Sep 17 00:00:00 2001
From: Dan Finlay <dan@danfinlay.com>
Date: Fri, 17 Nov 2017 13:23:25 -0800
Subject: Fix bug where gas param was not a string

Prevented sending transactions.

Fixes #2598
---
 ui/app/components/send/send-constants.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

(limited to 'ui/app/components/send')

diff --git a/ui/app/components/send/send-constants.js b/ui/app/components/send/send-constants.js
index a961ffcd8..9c240972f 100644
--- a/ui/app/components/send/send-constants.js
+++ b/ui/app/components/send/send-constants.js
@@ -3,8 +3,8 @@ const { conversionUtil, multiplyCurrencies } = require('../../conversion-util')
 
 const MIN_GAS_PRICE_HEX = (100000000).toString(16)
 const MIN_GAS_PRICE_DEC = '100000000'
-const MIN_GAS_LIMIT_HEX = (21000).toString(16)
-const MIN_GAS_LIMIT_DEC = 21000
+const MIN_GAS_LIMIT_DEC = '21000'
+const MIN_GAS_LIMIT_HEX = (parseInt(MIN_GAS_LIMIT_DEC)).toString(16)
 
 const MIN_GAS_PRICE_GWEI = ethUtil.addHexPrefix(conversionUtil(MIN_GAS_PRICE_HEX, {
   fromDenomination: 'WEI',
-- 
cgit 


From 2e9137dddd4abd07cc45caa670f09bdc9559bbbb Mon Sep 17 00:00:00 2001
From: Dan <danjm.com@gmail.com>
Date: Thu, 16 Nov 2017 14:44:25 -0330
Subject: Update max amount behaviour to meet new specs.

---
 ui/app/components/send/send-v2-container.js | 1 +
 1 file changed, 1 insertion(+)

(limited to 'ui/app/components/send')

diff --git a/ui/app/components/send/send-v2-container.js b/ui/app/components/send/send-v2-container.js
index 4451a6113..655de8897 100644
--- a/ui/app/components/send/send-v2-container.js
+++ b/ui/app/components/send/send-v2-container.js
@@ -78,5 +78,6 @@ function mapDispatchToProps (dispatch) {
     goHome: () => dispatch(actions.goHome()),
     clearSend: () => dispatch(actions.clearSend()),
     backToConfirmScreen: editingTransactionId => dispatch(actions.showConfTxPage({ id: editingTransactionId })),
+    setMaxModeTo: bool => dispatch(actions.setMaxModeTo(bool)),
   }
 }
-- 
cgit 


From bf4043c59bb67ea93599207d91cb7a4f4426e75f Mon Sep 17 00:00:00 2001
From: Dan <danjm.com@gmail.com>
Date: Wed, 20 Dec 2017 13:47:16 -0330
Subject: Adds updateTransaction to background and used it to update after
 editing in send-v2.

---
 ui/app/components/send/send-v2-container.js | 2 ++
 1 file changed, 2 insertions(+)

(limited to 'ui/app/components/send')

diff --git a/ui/app/components/send/send-v2-container.js b/ui/app/components/send/send-v2-container.js
index 655de8897..ff7714e82 100644
--- a/ui/app/components/send/send-v2-container.js
+++ b/ui/app/components/send/send-v2-container.js
@@ -50,6 +50,7 @@ function mapStateToProps (state) {
     data,
     amountConversionRate: selectedToken ? tokenToFiatRate : conversionRate,
     tokenContract: getSelectedTokenContract(state),
+    unapprovedTxs: state.metamask.unapprovedTxs,
   }
 }
 
@@ -64,6 +65,7 @@ function mapDispatchToProps (dispatch) {
     ),
     signTx: txParams => dispatch(actions.signTx(txParams)),
     updateAndApproveTx: txParams => dispatch(actions.updateAndApproveTx(txParams)),
+    updateTx: txData => dispatch(actions.updateTransaction(txData)),
     setSelectedAddress: address => dispatch(actions.setSelectedAddress(address)),
     addToAddressBook: address => dispatch(actions.addToAddressBook(address)),
     updateGasTotal: newTotal => dispatch(actions.updateGasTotal(newTotal)),
-- 
cgit 


From 5fe3c5aae6756f225edd0f8646ac0a23c264a81c Mon Sep 17 00:00:00 2001
From: Dan <danjm.com@gmail.com>
Date: Wed, 20 Dec 2017 15:05:41 -0330
Subject: Lint fixes.

---
 ui/app/components/send/send-v2-container.js | 1 -
 1 file changed, 1 deletion(-)

(limited to 'ui/app/components/send')

diff --git a/ui/app/components/send/send-v2-container.js b/ui/app/components/send/send-v2-container.js
index ff7714e82..2d2ed4546 100644
--- a/ui/app/components/send/send-v2-container.js
+++ b/ui/app/components/send/send-v2-container.js
@@ -79,7 +79,6 @@ function mapDispatchToProps (dispatch) {
     updateSendErrors: newError => dispatch(actions.updateSendErrors(newError)),
     goHome: () => dispatch(actions.goHome()),
     clearSend: () => dispatch(actions.clearSend()),
-    backToConfirmScreen: editingTransactionId => dispatch(actions.showConfTxPage({ id: editingTransactionId })),
     setMaxModeTo: bool => dispatch(actions.setMaxModeTo(bool)),
   }
 }
-- 
cgit 


From 9ced63584bc93cf6ac82786dec0984b5022346ae Mon Sep 17 00:00:00 2001
From: Dan <danjm.com@gmail.com>
Date: Wed, 20 Dec 2017 19:06:58 -0330
Subject: Add constanst for token transfer function signature.

---
 ui/app/components/send/send-constants.js | 3 +++
 1 file changed, 3 insertions(+)

(limited to 'ui/app/components/send')

diff --git a/ui/app/components/send/send-constants.js b/ui/app/components/send/send-constants.js
index 9c240972f..b3ee0899a 100644
--- a/ui/app/components/send/send-constants.js
+++ b/ui/app/components/send/send-constants.js
@@ -20,6 +20,8 @@ const MIN_GAS_TOTAL = multiplyCurrencies(MIN_GAS_LIMIT_HEX, MIN_GAS_PRICE_HEX, {
   multiplierBase: 16,
 })
 
+const TOKEN_TRANSFER_FUNCTION_SIGNATURE = '0xa9059cbb'
+
 module.exports = {
   MIN_GAS_PRICE_GWEI,
   MIN_GAS_PRICE_HEX,
@@ -27,4 +29,5 @@ module.exports = {
   MIN_GAS_LIMIT_HEX,
   MIN_GAS_LIMIT_DEC,
   MIN_GAS_TOTAL,
+  TOKEN_TRANSFER_FUNCTION_SIGNATURE,
 }
-- 
cgit 


From ccb80594be3000488b7c73f9fd5e56168e0d5042 Mon Sep 17 00:00:00 2001
From: Alexander Tseung <alextsg@gmail.com>
Date: Tue, 16 Jan 2018 16:08:42 -0800
Subject: Readjust gas fees when switching networks on the send screen

---
 ui/app/components/send/send-v2-container.js | 1 +
 1 file changed, 1 insertion(+)

(limited to 'ui/app/components/send')

diff --git a/ui/app/components/send/send-v2-container.js b/ui/app/components/send/send-v2-container.js
index 2d2ed4546..1106902b7 100644
--- a/ui/app/components/send/send-v2-container.js
+++ b/ui/app/components/send/send-v2-container.js
@@ -51,6 +51,7 @@ function mapStateToProps (state) {
     amountConversionRate: selectedToken ? tokenToFiatRate : conversionRate,
     tokenContract: getSelectedTokenContract(state),
     unapprovedTxs: state.metamask.unapprovedTxs,
+    network: state.metamask.network,
   }
 }
 
-- 
cgit 


From 4fae461a672b89a16c496d09321f11f86b873e32 Mon Sep 17 00:00:00 2001
From: Dan J Miller <danjm.com@gmail.com>
Date: Thu, 18 Jan 2018 01:17:01 -0330
Subject: [NewUI] Send screen gas loading fixes (#3027)

* Allow entering amount, but disable validation of amount, opening of gas customizer or clicking of next, when gas loading in send.

* Fix variable name.
---
 ui/app/components/send/gas-fee-display-v2.js | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

(limited to 'ui/app/components/send')

diff --git a/ui/app/components/send/gas-fee-display-v2.js b/ui/app/components/send/gas-fee-display-v2.js
index 806c33f0a..0c4c3f7a9 100644
--- a/ui/app/components/send/gas-fee-display-v2.js
+++ b/ui/app/components/send/gas-fee-display-v2.js
@@ -32,8 +32,9 @@ GasFeeDisplay.prototype.render = function () {
       })
       : h('div.currency-display', 'Loading...'),
 
-    h('div.send-v2__sliders-icon-container', {
+    h('button.send-v2__sliders-icon-container', {
       onClick,
+      disabled: !gasTotal,
     }, [
       h('i.fa.fa-sliders.send-v2__sliders-icon'),
     ]),
-- 
cgit