[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, 43 insertions, 18 deletions

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}`),
 
   ])