[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.

1 files changed, 146 insertions, 57 deletions

diff --git a/ui/app/send-v2.js b/ui/app/send-v2.js
index 47f8b18bd..af7586859 100644
--- a/ui/app/send-v2.js
+++ b/ui/app/send-v2.js
@@ -2,61 +2,135 @@ const { inherits } = require('util')
 const PersistentForm = require('../lib/persistent-form')
 const h = require('react-hyperscript')
 const connect = require('react-redux').connect
+
+const Identicon = require('./components/identicon')
 const FromDropdown = require('./components/send/from-dropdown')
 const ToAutoComplete = require('./components/send/to-autocomplete')
 const CurrencyDisplay = require('./components/send/currency-display')
+const MemoTextArea = require('./components/send/memo-textarea')
+const GasFeeDisplay = require('./components/send/gas-fee-display-v2')
 
-module.exports = connect(mapStateToProps)(SendTransactionScreen)
-
-function mapStateToProps (state) {
-  const mockAccounts = Array.from(new Array(5))
-    .map((v, i) => ({
-      identity: {
-        name: `Test Account Name ${i}`,
-        address: `0x02f567704cc6569127e18e3d00d2c85bcbfa6f0${i}`,
-      },
-      balancesToRender: {
-        primary: `100${i}.000001 ETH`,
-        secondary: `$30${i},000.00 USD`,
-      }
-    }))
-  const conversionRate = 301.0005
-
-  return {
-    accounts: mockAccounts,
-    conversionRate
-  }
-}
+const { showModal } = require('./actions')
+
+module.exports = SendTransactionScreen
 
 inherits(SendTransactionScreen, PersistentForm)
 function SendTransactionScreen () {
   PersistentForm.call(this)
 
   this.state = {
-    newTx: {
-      from: '',
-      to: '',
-      gasPrice: null,
-      gas: '0.001',
-      amount: '10', 
-      txData: null,
-      memo: '',
-    },
+    from: '',
+    to: '',
+    gasPrice: null,
+    gasLimit: null,
+    amount: '0x0', 
+    txData: null,
+    memo: '',
     dropdownOpen: false,
   }
 }
 
+SendTransactionScreen.prototype.componentWillMount = function () {
+  const {
+    updateTokenExchangeRate,
+    selectedToken = {},
+    getGasPrice,
+    estimateGas,
+    selectedAddress,
+    data,
+  } = this.props
+  const { symbol } = selectedToken || {}
+
+  const estimateGasParams = {
+    from: selectedAddress,
+    gas: '746a528800',
+  }
+
+  if (symbol) {
+    updateTokenExchangeRate(symbol)
+    Object.assign(estimateGasParams, { value: '0x0' })
+  }
+
+  if (data) {
+    Object.assign(estimateGasParams, { data })
+  }
+
+  Promise.all([
+    getGasPrice(),
+    estimateGas({
+      from: selectedAddress,
+      gas: '746a528800',
+    }),
+  ])
+  .then(([blockGasPrice, estimatedGas]) => {
+    this.setState({
+      gasPrice: blockGasPrice,
+      gasLimit: estimatedGas,
+    })
+  })
+}
+
+SendTransactionScreen.prototype.renderHeaderIcon = function () {
+  const { selectedToken } = this.props
+
+  return h('div.send-v2__send-header-icon-container', [
+    selectedToken
+      ? h(Identicon, {
+        diameter: 40,
+        address: selectedToken.address,
+      })
+      : h('img.send-v2__send-header-icon', { src: '../images/eth_logo.svg' })
+  ])
+}
+
+SendTransactionScreen.prototype.renderTitle = function () {
+  const { selectedToken } = this.props
+
+  return h('div.send-v2__title', [selectedToken ? 'Send Tokens' : 'Send Funds'])
+}
+
+SendTransactionScreen.prototype.renderCopy = function () {
+  const { selectedToken } = this.props
+
+  const tokenText = selectedToken ? 'tokens' : 'ETH'
+
+  return h('div', [
+
+    h('div.send-v2__copy', `Only send ${tokenText} to an Ethereum address.`),
+
+    h('div.send-v2__copy', 'Sending to a different crytpocurrency that is not Ethereum may result in permanent loss.'),
+
+  ])
+}
+
 SendTransactionScreen.prototype.render = function () {
-  const { accounts, conversionRate } = this.props
-  const { dropdownOpen, newTx } = this.state
-  const { to, amount, gas } = newTx
+  const {
+    accounts,
+    conversionRate,
+    tokenToUSDRate,
+    selectedToken,
+    showCustomizeGasModal,
+    selectedAccount,
+    primaryCurrency = 'ETH',
+  } = this.props
+
+  const {
+    dropdownOpen,
+    to,
+    amount,
+    gasLimit,
+    gasPrice,
+    memo,
+  } = this.state
+
+  const amountConversionRate = selectedToken ? tokenToUSDRate : conversionRate
 
   return (
 
     h('div.send-v2__container', [
       h('div.send-v2__header', {}, [
 
-        h('img.send-v2__send-eth-icon', { src: '../images/eth_logo.svg' }),
+        this.renderHeaderIcon(),
 
         h('div.send-v2__arrow-background', [
           h('i.fa.fa-lg.fa-arrow-circle-right.send-v2__send-arrow-icon'),
@@ -66,11 +140,9 @@ SendTransactionScreen.prototype.render = function () {
 
       ]),
 
-      h('div.send-v2__title', 'Send Funds'),
-
-      h('div.send-v2__copy', 'Only send ETH to an Ethereum address.'),
+      this.renderTitle(),
 
-      h('div.send-v2__copy', 'Sending to a different crytpocurrency that is not Ethereum may result in permanent loss.'),
+      this.renderCopy(),
 
       h('div.send-v2__form', {}, [
 
@@ -81,10 +153,11 @@ SendTransactionScreen.prototype.render = function () {
           h(FromDropdown, {
             dropdownOpen,
             accounts,
-            selectedAccount: accounts[0],
+            selectedAccount,
             setFromField: () => console.log('Set From Field'),
             openDropdown: () => this.setState({ dropdownOpen: true }),
             closeDropdown: () => this.setState({ dropdownOpen: false }),
+            conversionRate,
           }),
 
         ]),
@@ -95,13 +168,11 @@ SendTransactionScreen.prototype.render = function () {
 
           h(ToAutoComplete, {
             to,
-            identities: accounts.map(({ identity }) => identity),
+            accounts,
             onChange: (event) => {
               this.setState({
-                newTx: {
-                  ...this.state.newTx,
-                  to: event.target.value,
-                },
+                ...this.state,
+                to: event.target.value,
               })
             },
           }),
@@ -113,17 +184,15 @@ SendTransactionScreen.prototype.render = function () {
           h('div.send-v2__form-label', 'Amount:'),
 
           h(CurrencyDisplay, {
-            primaryCurrency: 'ETH',
+            primaryCurrency,
             convertedCurrency: 'USD',
             value: amount,
-            conversionRate,
+            conversionRate: amountConversionRate,
             convertedPrefix: '$',
             handleChange: (value) => {
               this.setState({
-                newTx: {
-                  ...this.state.newTx,
-                  amount: value,
-                },
+                ...this.state,
+                amount: value,
               })
             }
           }),          
@@ -134,14 +203,34 @@ SendTransactionScreen.prototype.render = function () {
 
           h('div.send-v2__form-label', 'Gas fee:'),
 
-          h(CurrencyDisplay, {
-            primaryCurrency: 'ETH',
-            convertedCurrency: 'USD',
-            value: gas,
+          h(GasFeeDisplay, {
+            gasLimit,
+            gasPrice,
             conversionRate,
-            convertedPrefix: '$',
-            readOnly: true,
-          }),          
+            onClick: showCustomizeGasModal,
+          }),
+
+          h('div.send-v2__sliders-icon-container', {
+            onClick: showCustomizeGasModal,
+          }, [
+            h('i.fa.fa-sliders.send-v2__sliders-icon'),
+          ])          
+
+        ]),
+
+        h('div.send-v2__form-row', [
+
+          h('div.send-v2__form-label', 'Transaction Memo:'),
+
+          h(MemoTextArea, {
+            memo,
+            onChange: (event) => {
+              this.setState({
+                ...this.state,
+                memo: event.target.value,
+              })
+            },
+          }),
 
         ]),