Merge pull request #4386 from MetaMask/i4077-replace-currency-input-with-numeric-input

Replace currency-input.js with NumericInput

2 files changed, 21 insertions, 23 deletions

diff --git a/ui/app/components/send_/send-content/send-amount-row/send-amount-row.component.js b/ui/app/components/send_/send-content/send-amount-row/send-amount-row.component.js
index b094d0cd5..8aefeed4a 100644
--- a/ui/app/components/send_/send-content/send-amount-row/send-amount-row.component.js
+++ b/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}
diff --git a/ui/app/components/send_/send-content/send-amount-row/tests/send-amount-row-component.test.js b/ui/app/components/send_/send-content/send-amount-row/tests/send-amount-row-component.test.js
index 31d2e2515..2205579ca 100644
--- a/ui/app/components/send_/send-content/send-amount-row/tests/send-amount-row-component.test.js
+++ b/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)
-      handleChange('mockNewAmount')
-      assert.equal(SendAmountRow.prototype.handleAmountChange.callCount, 1)
+      assert.equal(SendAmountRow.prototype.updateAmount.callCount, 0)
+      onBlur('mockNewAmount')
+      assert.equal(SendAmountRow.prototype.updateAmount.callCount, 1)
+      assert.deepEqual(
+        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.handleAmountChange.getCall(0).args,
+        SendAmountRow.prototype.validateAmount.getCall(0).args,
         ['mockNewAmount']
       )
     })