1 files changed, 45 insertions, 13 deletions

diff --git a/ui/app/components/send/currency-display.js b/ui/app/components/send/currency-display.js
index 90fb2b66c..360dd15d4 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 CurrencyInput = require('../currency-input')
 const { conversionUtil, multiplyCurrencies } = require('../../conversion-util')
 const currencyFormatter = require('currency-formatter')
 const currencies = require('currency-formatter/currencies')
@@ -21,21 +20,36 @@ function toHexWei (value) {
   })
 }
 
+CurrencyDisplay.prototype.componentWillMount = function () {
+  this.setState({
+    valueToRender: this.getValueToRender(this.props),
+  })
+}
+
+CurrencyDisplay.prototype.componentWillReceiveProps = function (nextProps) {
+  const currentValueToRender = this.getValueToRender(this.props)
+  const newValueToRender = this.getValueToRender(nextProps)
+  if (currentValueToRender !== newValueToRender) {
+    this.setState({
+      valueToRender: newValueToRender,
+    })
+  }
+}
+
 CurrencyDisplay.prototype.getAmount = function (value) {
   const { selectedToken } = this.props
   const { decimals } = selectedToken || {}
   const multiplier = Math.pow(10, Number(decimals || 0))
 
-  const sendAmount = multiplyCurrencies(value, multiplier, {toNumericBase: 'hex'})
+  const sendAmount = multiplyCurrencies(value || '0', multiplier, {toNumericBase: 'hex'})
 
   return selectedToken
     ? sendAmount
     : toHexWei(value)
 }
 
-CurrencyDisplay.prototype.getValueToRender = function () {
-  const { selectedToken, conversionRate, value } = this.props
-
+CurrencyDisplay.prototype.getValueToRender = function ({ selectedToken, conversionRate, value }) {
+  if (value === '0x0') return '0'
   const { decimals, symbol } = selectedToken || {}
   const multiplier = Math.pow(10, Number(decimals || 0))
 
@@ -76,6 +90,18 @@ CurrencyDisplay.prototype.getConvertedValueToRender = function (nonFormattedValu
     : convertedValue
 }
 
+CurrencyDisplay.prototype.handleChange = function (newVal) {
+  this.setState({ valueToRender: newVal })
+  this.props.onChange(this.getAmount(newVal))
+}
+
+CurrencyDisplay.prototype.getInputWidth = function (valueToRender, readOnly) {
+  const valueString = String(valueToRender)
+  const valueLength = valueString.length || 1
+  const decimalPointDeficit = valueString.match(/\./) ? -0.5 : 0
+  return (valueLength + decimalPointDeficit + 0.75) + 'ch'
+}
+
 CurrencyDisplay.prototype.render = function () {
   const {
     className = 'currency-display',
@@ -85,10 +111,10 @@ CurrencyDisplay.prototype.render = function () {
     convertedCurrency,
     readOnly = false,
     inError = false,
-    handleChange,
+    onBlur,
   } = this.props
+  const { valueToRender } = this.state
 
-  const valueToRender = this.getValueToRender()
   const convertedValueToRender = this.getConvertedValueToRender(valueToRender)
 
   return h('div', {
@@ -96,24 +122,30 @@ CurrencyDisplay.prototype.render = function () {
     style: {
       borderColor: inError ? 'red' : null,
     },
-    onClick: () => this.currencyInput && this.currencyInput.focus(),
+    onClick: () => {
+      this.currencyInput && this.currencyInput.focus()
+    },
   }, [
 
     h('div.currency-display__primary-row', [
 
       h('div.currency-display__input-wrapper', [
 
-        h(readOnly ? 'input' : CurrencyInput, {
+        h('input', {
           className: primaryBalanceClassName,
           value: `${valueToRender}`,
           placeholder: '0',
+          type: 'number',
           readOnly,
           ...(!readOnly ? {
-            onInputChange: newValue => {
-              handleChange(this.getAmount(newValue))
-            },
-            inputRef: input => { this.currencyInput = input },
+            onChange: e => this.handleChange(e.target.value),
+            onBlur: () => onBlur(this.getAmount(valueToRender)),
           } : {}),
+          ref: input => { this.currencyInput = input },
+          style: {
+            width: this.getInputWidth(valueToRender, readOnly),
+          },
+          min: 0,
         }),
 
         h('span.currency-display__currency-symbol', primaryCurrency),