1 files changed, 32 insertions, 41 deletions

diff --git a/ui/app/components/send/currency-display.js b/ui/app/components/send/currency-display.js
index 45986e371..819fee0a0 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,15 +9,6 @@ module.exports = CurrencyDisplay
 inherits(CurrencyDisplay, Component)
 function CurrencyDisplay () {
   Component.call(this)
-
-  this.state = {
-    value: null,
-  }
-}
-
-function isValidInput (text) {
-  const re = /^([1-9]\d*|0)(\.|\.\d*)?$/
-  return re.test(text)
 }
 
 function toHexWei (value) {
@@ -39,6 +31,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',
@@ -49,64 +63,41 @@ CurrencyDisplay.prototype.render = function () {
     convertedCurrency,
     readOnly = false,
     inError = false,
-    value: initValue,
     handleChange,
-    validate,
   } = this.props
-  const { value } = this.state
 
-  const initValueToRender = conversionUtil(initValue, {
-    fromNumericBase: 'hex',
-    toNumericBase: 'dec',
-    fromDenomination: 'WEI',
-    numberOfDecimals: 6,
-    conversionRate,
-  })
+  const valueToRender = this.getValueToRender()
 
-  const convertedValue = conversionUtil(value || initValueToRender, {
+  let convertedValue = conversionUtil(valueToRender, {
     fromNumericBase: 'dec',
     fromCurrency: primaryCurrency,
     toCurrency: convertedCurrency,
     numberOfDecimals: 2,
     conversionRate,
   })
-
-  const inputSizeMultiplier = readOnly ? 1 : 1.2
+  convertedValue = Number(convertedValue).toFixed(2)
 
   return h('div', {
     className,
     style: {
       borderColor: inError ? 'red' : null,
     },
+    onClick: () => this.currencyInput.focus(),
   }, [
 
     h('div.currency-display__primary-row', [
 
       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)),
+          inputRef: input => { this.currencyInput = input },
         }),
 
         h('span.currency-display__currency-symbol', primaryCurrency),