Replaces currency-input.js with NumericInput

.eslintrc

@@ -142,6 +142,7 @@
     "operator-linebreak": [1, "after", { "overrides": { "?": "ignore", ":": "ignore" } }],
     "padded-blocks": "off",
     "quotes": [2, "single", {"avoidEscape": true, "allowTemplateLiterals": true}],
+    "react/no-deprecated": 0,
     "semi": [2, "never"],
     "semi-spacing": [2, { "before": false, "after": true }],
     "space-before-blocks": [1, "always"],

package-lock.json

@@ -1934,6 +1934,12 @@
       "resolved": "https://registry.npmjs.org/aproba/-/aproba-1.2.0.tgz",
       "integrity": "sha512-Y9J6ZjXtoYh8RnXVCMOU/ttDmk1aBjunq9vO0ta5x85WDQiQfUF9sIPBITdbiiIVcBo03Hi3jMxigBtsddlXRw=="
     },
+    "arch": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/arch/-/arch-2.1.0.tgz",
+      "integrity": "sha1-NhOqRhSQZLPB8GB5Gb8dR4boKIk=",
+      "dev": true
+    },
     "archy": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/archy/-/archy-1.0.0.tgz",
@@ -3793,6 +3799,12 @@
       "integrity": "sha1-R2iMuZu2gE8OBtPnY7HDLlfY5rY=",
       "dev": true
     },
+    "base64url": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/base64url/-/base64url-2.0.0.tgz",
+      "integrity": "sha1-6sFuA+oUOO/5Qj1puqNiYu0fcLs=",
+      "dev": true
+    },
     "bcrypt-pbkdf": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/bcrypt-pbkdf/-/bcrypt-pbkdf-1.0.1.tgz",
@@ -5141,6 +5153,33 @@
       "resolved": "https://registry.npmjs.org/cli-width/-/cli-width-2.2.0.tgz",
       "integrity": "sha1-/xnt6Kml5XkyQUewwR8PvLq+1jk="
     },
+    "clipboardy": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/clipboardy/-/clipboardy-1.2.3.tgz",
+      "integrity": "sha512-2WNImOvCRe6r63Gk9pShfkwXsVtKCroMAevIbiae021mS850UkWPbevxsBz3tnvjZIEGvlwaqCPsw+4ulzNgJA==",
+      "dev": true,
+      "requires": {
+        "arch": "2.1.0",
+        "execa": "0.8.0"
+      },
+      "dependencies": {
+        "execa": {
+          "version": "0.8.0",
+          "resolved": "https://registry.npmjs.org/execa/-/execa-0.8.0.tgz",
+          "integrity": "sha1-2NdrvBtVIX7RkP1t1J08d07PyNo=",
+          "dev": true,
+          "requires": {
+            "cross-spawn": "5.1.0",
+            "get-stream": "3.0.0",
+            "is-stream": "1.1.0",
+            "npm-run-path": "2.0.2",
+            "p-finally": "1.0.0",
+            "signal-exit": "3.0.2",
+            "strip-eof": "1.0.0"
+          }
+        }
+      }
+    },
     "cliui": {
       "version": "3.2.0",
       "resolved": "https://registry.npmjs.org/cliui/-/cliui-3.2.0.tgz",
@@ -9483,6 +9522,16 @@
       "integrity": "sha512-ZH7loueKBoDb7yG9esn1U+fgq7BzlzW6NRi5/rMdxIZ05dj7GFD/Xc5rq2CDt5Yq86CyfSYVyx4242QQNZbx1g==",
       "dev": true
     },
+    "fill-keys": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/fill-keys/-/fill-keys-1.0.2.tgz",
+      "integrity": "sha1-mo+jb06K1jTjv2tPPIiCVRRS6yA=",
+      "dev": true,
+      "requires": {
+        "is-object": "1.0.1",
+        "merge-descriptors": "1.0.1"
+      }
+    },
     "fill-range": {
       "version": "2.2.3",
       "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-2.2.3.tgz",
@@ -11347,6 +11396,62 @@
         }
       }
     },
+    "gh-pages": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/gh-pages/-/gh-pages-1.1.0.tgz",
+      "integrity": "sha512-ZpDkeOVmIrN5mz+sBWDz5zmTqcbNJzI/updCwEv/7rrSdpTNlj1B5GhBqG7f4Q8p5sJOdnBV0SIqxJrxtZQ9FA==",
+      "dev": true,
+      "requires": {
+        "async": "2.6.0",
+        "base64url": "2.0.0",
+        "commander": "2.11.0",
+        "fs-extra": "4.0.3",
+        "globby": "6.1.0",
+        "graceful-fs": "4.1.11",
+        "rimraf": "2.6.2"
+      },
+      "dependencies": {
+        "fs-extra": {
+          "version": "4.0.3",
+          "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-4.0.3.tgz",
+          "integrity": "sha512-q6rbdDd1o2mAnQreO7YADIxf/Whx4AHBiRf6d+/cVT8h44ss+lHgxf1FemcqDnQt9X3ct4McHr+JMGlYSsK7Cg==",
+          "dev": true,
+          "requires": {
+            "graceful-fs": "4.1.11",
+            "jsonfile": "4.0.0",
+            "universalify": "0.1.1"
+          }
+        },
+        "globby": {
+          "version": "6.1.0",
+          "resolved": "https://registry.npmjs.org/globby/-/globby-6.1.0.tgz",
+          "integrity": "sha1-9abXDoOV4hyFj7BInWTfAkJNUGw=",
+          "dev": true,
+          "requires": {
+            "array-union": "1.0.2",
+            "glob": "7.1.2",
+            "object-assign": "4.1.1",
+            "pify": "2.3.0",
+            "pinkie-promise": "2.0.1"
+          }
+        },
+        "jsonfile": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-4.0.0.tgz",
+          "integrity": "sha1-h3Gq4HmbZAdrdmQPygWPnBDjPss=",
+          "dev": true,
+          "requires": {
+            "graceful-fs": "4.1.11"
+          }
+        },
+        "pify": {
+          "version": "2.3.0",
+          "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
+          "integrity": "sha1-7RQaasBDqEnqWISY59yosVMw6Qw=",
+          "dev": true
+        }
+      }
+    },
     "gifencoder": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/gifencoder/-/gifencoder-1.1.0.tgz",
@@ -18541,6 +18646,12 @@
         }
       }
     },
+    "module-not-found-error": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/module-not-found-error/-/module-not-found-error-1.0.1.tgz",
+      "integrity": "sha1-z4tP9PKWQGdNbN0CsOO8UjwrvcA=",
+      "dev": true
+    },
     "moment": {
       "version": "2.22.1",
       "resolved": "https://registry.npmjs.org/moment/-/moment-2.22.1.tgz",
@@ -24330,6 +24441,28 @@
       "integrity": "sha1-M8UDmPcOp+uW0h97gXYwpVeRx+4=",
       "dev": true
     },
+    "proxyquire": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/proxyquire/-/proxyquire-2.0.1.tgz",
+      "integrity": "sha512-fQr3VQrbdzHrdaDn3XuisVoJlJNDJizHAvUXw9IuXRR8BpV2x0N7LsCxrpJkeKfPbNjiNU/V5vc008cI0TmzzQ==",
+      "dev": true,
+      "requires": {
+        "fill-keys": "1.0.2",
+        "module-not-found-error": "1.0.1",
+        "resolve": "1.5.0"
+      },
+      "dependencies": {
+        "resolve": {
+          "version": "1.5.0",
+          "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.5.0.tgz",
+          "integrity": "sha512-hgoSGrc3pjzAPHNBg+KnFcK2HwlHTs/YrAGUr6qgTVUZmXv1UEXXl0bZNBKMA9fud6lRYFdPGz0xXxycPzmmiw==",
+          "dev": true,
+          "requires": {
+            "path-parse": "1.0.5"
+          }
+        }
+      }
+    },
     "prr": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/prr/-/prr-1.0.1.tgz",
@@ -25095,6 +25228,11 @@
         }
       }
     },
+    "react-numeric-input": {
+      "version": "2.2.3",
+      "resolved": "https://registry.npmjs.org/react-numeric-input/-/react-numeric-input-2.2.3.tgz",
+      "integrity": "sha1-S/WRjD6v7YUagN8euZLZQQArtVI="
+    },
     "react-onclickoutside": {
       "version": "6.7.1",
       "resolved": "https://registry.npmjs.org/react-onclickoutside/-/react-onclickoutside-6.7.1.tgz",
@@ -30195,6 +30333,12 @@
         "unist-util-is": "2.1.1"
       }
     },
+    "universalify": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/universalify/-/universalify-0.1.1.tgz",
+      "integrity": "sha1-+nG63UQ3r0wUiEHjs7Fl+enlkLc=",
+      "dev": true
+    },
     "unorm": {
       "version": "1.4.1",
       "resolved": "https://registry.npmjs.org/unorm/-/unorm-1.4.1.tgz",

package.json

@@ -163,6 +163,7 @@
     "react-dom": "^15.6.2",
     "react-hyperscript": "^3.0.0",
     "react-markdown": "^3.0.0",
+    "react-numeric-input": "^2.2.3",
     "react-redux": "^5.0.5",
     "react-router-dom": "^4.2.2",
     "react-select": "^1.0.0",

ui/app/components/send/currency-display.js

@@ -1,10 +1,10 @@
 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')
+const NumericInput = require('react-numeric-input')
 
 module.exports = CurrencyDisplay
 
@@ -21,21 +21,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 () {
+CurrencyDisplay.prototype.getValueToRender = function ({ selectedToken, conversionRate, value }) {
-  const { selectedToken, conversionRate, value } = this.props
+  if (value === '0x0') return ''
-
   const { decimals, symbol } = selectedToken || {}
   const multiplier = Math.pow(10, Number(decimals || 0))
 
@@ -76,6 +91,19 @@ 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 dynamicBuffer = readOnly ? 0 : 1
+  const decimalPointDeficit = !readOnly && valueString.match(/\./) ? -0.5 : 0
+  return (valueLength + dynamicBuffer + decimalPointDeficit) + 'ch'
+}
+
 CurrencyDisplay.prototype.render = function () {
   const {
     className = 'currency-display',
@@ -85,10 +113,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', {
@@ -103,21 +131,20 @@ CurrencyDisplay.prototype.render = function () {
 
       h('div.currency-display__input-wrapper', [
 
-        h(readOnly ? 'input' : CurrencyInput, {
+        h(NumericInput, {
           className: primaryBalanceClassName,
           value: `${valueToRender}`,
-          placeholder: '0',
+          placeholder: `0 ${primaryCurrency}`,
           readOnly,
           ...(!readOnly ? {
-            onInputChange: newValue => {
+            onChange: e => this.handleChange(e),
-              handleChange(this.getAmount(newValue))
+            onBlur: () => onBlur(this.getAmount(valueToRender)),
-            },
-            inputRef: input => { this.currencyInput = input },
           } : {}),
+          style: false,
+          format: num => `${num} ${primaryCurrency}`,
+          parse: stringWithCurrency => stringWithCurrency && stringWithCurrency.match(/^([.\d]+)/)[1],
         }),
 
-        h('span.currency-display__currency-symbol', primaryCurrency),
-
       ]),
 
     ]),

ui/app/components/send_/send-content/send-amount-row/send-amount-row.component.js

@@ -49,11 +49,10 @@ export default class SendAmountRow extends Component {
     })
   }
 
-  handleAmountChange (amount) {
+  updateAmount (amount) {
     const { updateSendAmount, setMaxModeTo } = this.props
 
     setMaxModeTo(false)
-    this.validateAmount(amount)
     updateSendAmount(amount)
   }
 
@@ -78,7 +77,8 @@ export default class SendAmountRow extends Component {
         <CurrencyDisplay
           conversionRate={amountConversionRate}
           convertedCurrency={convertedCurrency}
-          handleChange={newAmount => this.handleAmountChange(newAmount)}
+          onBlur={newAmount => this.updateAmount(newAmount)}
+          onChange={newAmount => this.validateAmount(newAmount)}
           inError={inError}
           primaryCurrency={primaryCurrency || 'ETH'}
           selectedToken={selectedToken}

ui/app/components/send_/send-content/send-amount-row/tests/send-amount-row-component.test.js

@@ -14,7 +14,7 @@ const propsMethodSpies = {
   updateSendAmountError: sinon.spy(),
 }
 
-sinon.spy(SendAmountRow.prototype, 'handleAmountChange')
+sinon.spy(SendAmountRow.prototype, 'updateAmount')
 sinon.spy(SendAmountRow.prototype, 'validateAmount')
 
 describe('SendAmountRow Component', function () {
@@ -45,7 +45,7 @@ describe('SendAmountRow Component', function () {
     propsMethodSpies.updateSendAmount.resetHistory()
     propsMethodSpies.updateSendAmountError.resetHistory()
     SendAmountRow.prototype.validateAmount.resetHistory()
-    SendAmountRow.prototype.handleAmountChange.resetHistory()
+    SendAmountRow.prototype.updateAmount.resetHistory()
   })
 
   describe('validateAmount', () => {
@@ -71,11 +71,11 @@ describe('SendAmountRow Component', function () {
 
   })
 
-  describe('handleAmountChange', () => {
+  describe('updateAmount', () => {
 
     it('should call setMaxModeTo', () => {
       assert.equal(propsMethodSpies.setMaxModeTo.callCount, 0)
-      instance.handleAmountChange('someAmount')
+      instance.updateAmount('someAmount')
       assert.equal(propsMethodSpies.setMaxModeTo.callCount, 1)
       assert.deepEqual(
         propsMethodSpies.setMaxModeTo.getCall(0).args,
@@ -83,19 +83,9 @@ describe('SendAmountRow Component', function () {
       )
     })
 
-    it('should call this.validateAmount', () => {
-      assert.equal(SendAmountRow.prototype.validateAmount.callCount, 0)
-      instance.handleAmountChange('someAmount')
-      assert.equal(SendAmountRow.prototype.validateAmount.callCount, 1)
-      assert.deepEqual(
-        propsMethodSpies.updateSendAmount.getCall(0).args,
-        ['someAmount']
-      )
-    })
-
     it('should call updateSendAmount', () => {
       assert.equal(propsMethodSpies.updateSendAmount.callCount, 0)
-      instance.handleAmountChange('someAmount')
+      instance.updateAmount('someAmount')
       assert.equal(propsMethodSpies.updateSendAmount.callCount, 1)
       assert.deepEqual(
         propsMethodSpies.updateSendAmount.getCall(0).args,
@@ -136,7 +126,8 @@ describe('SendAmountRow Component', function () {
       const {
         conversionRate,
         convertedCurrency,
-        handleChange,
+        onBlur,
+        onChange,
         inError,
         primaryCurrency,
         selectedToken,
@@ -148,11 +139,18 @@ describe('SendAmountRow Component', function () {
       assert.equal(primaryCurrency, 'mockPrimaryCurrency')
       assert.deepEqual(selectedToken, { address: 'mockTokenAddress' })
       assert.equal(value, 'mockAmount')
-      assert.equal(SendAmountRow.prototype.handleAmountChange.callCount, 0)
+      assert.equal(SendAmountRow.prototype.updateAmount.callCount, 0)
-      handleChange('mockNewAmount')
+      onBlur('mockNewAmount')
-      assert.equal(SendAmountRow.prototype.handleAmountChange.callCount, 1)
+      assert.equal(SendAmountRow.prototype.updateAmount.callCount, 1)
       assert.deepEqual(
-        SendAmountRow.prototype.handleAmountChange.getCall(0).args,
+        SendAmountRow.prototype.updateAmount.getCall(0).args,
+        ['mockNewAmount']
+      )
+      assert.equal(SendAmountRow.prototype.validateAmount.callCount, 0)
+      onChange('mockNewAmount')
+      assert.equal(SendAmountRow.prototype.validateAmount.callCount, 1)
+      assert.deepEqual(
+        SendAmountRow.prototype.validateAmount.getCall(0).args,
         ['mockNewAmount']
       )
     })

ui/app/css/itcss/components/currency-display.scss

@@ -47,10 +47,32 @@
   &__input-wrapper {
     position: relative;
     display: flex;
+
+    input[type="number"]::-webkit-inner-spin-button {
+      -webkit-appearance: none;
+      display: none;
+    }
+
+    input[type="number"]:hover::-webkit-inner-spin-button {
+      -webkit-appearance: none;
+      display: none;
+    }
   }
 
   &__currency-symbol {
     margin-top: 1px;
     color: $scorpion;
   }
+
+  .react-numeric-input {
+    input[type="number"]::-webkit-inner-spin-button {
+      -webkit-appearance: none;
+      display: none;
+    }
+
+    input[type="number"]:hover::-webkit-inner-spin-button {
+      -webkit-appearance: none;
+      display: none;
+    }
+  }
 }