Fix gas estimate for tokens (MetaMask#7753)

* Make gas estimate update on debounced token amount change, not just on blur after change * Updated tests * Ensure `updateGas` is bound early Co-authored-by: Mark Stacey <[email protected]>
Conflux-Chain · Jan 15, 2020 · bda1f82 · bda1f82
1 parent 4ed8984
commit bda1f82
Show file tree

Hide file tree

Showing 8 changed files with 34 additions and 35 deletions.
diff --git a/test/e2e/metamask-ui.spec.js b/test/e2e/metamask-ui.spec.js
@@ -1546,6 +1546,7 @@ describe('MetaMask', function () {
         driver,
         By.xpath(`//button[contains(text(), 'Next')]`)
       )
+      await driver.wait(until.elementIsEnabled(nextScreen))
       await nextScreen.click()
       await delay(regularDelayMs)
     })

diff --git a/ui/app/components/ui/token-input/token-input.component.js b/ui/app/components/ui/token-input/token-input.component.js
@@ -86,7 +86,7 @@ export default class TokenInput extends PureComponent {
   }
 
   handleBlur = () => {
-    this.props.onBlur(this.state.hexValue)
+    this.props.onBlur && this.props.onBlur(this.state.hexValue)
   }
 
   renderConversionComponent () {

diff --git a/ui/app/pages/send/send-content/send-amount-row/send-amount-row.component.js b/ui/app/pages/send/send-content/send-amount-row/send-amount-row.component.js
@@ -1,5 +1,6 @@
 import React, { Component } from 'react'
 import PropTypes from 'prop-types'
+import debounce from 'lodash.debounce'
 import SendRowWrapper from '../send-row-wrapper'
 import AmountMaxButton from './amount-max-button'
 import UserPreferencedCurrencyInput from '../../../../components/app/user-preferenced-currency-input'
@@ -30,6 +31,8 @@ export default class SendAmountRow extends Component {
     t: PropTypes.func,
   }
 
+  updateGas = debounce(this.updateGas.bind(this), 500)
+
   validateAmount (amount) {
     const {
       amountConversionRate,
@@ -90,8 +93,8 @@ export default class SendAmountRow extends Component {
 
     return (
       <Component
-        onChange={newAmount => this.validateAmount(newAmount)}
-        onBlur={newAmount => {
+        onChange={newAmount => {
+          this.validateAmount(newAmount)
           this.updateGas(newAmount)
           this.updateAmount(newAmount)
         }}

diff --git a/ui/app/pages/send/send-content/send-amount-row/tests/send-amount-row-component.test.js b/ui/app/pages/send/send-content/send-amount-row/tests/send-amount-row-component.test.js
@@ -8,6 +8,8 @@ import SendRowWrapper from '../../send-row-wrapper/send-row-wrapper.component'
 import AmountMaxButton from '../amount-max-button/amount-max-button.container'
 import UserPreferencedTokenInput from '../../../../../components/app/user-preferenced-token-input'
 
+import timeout from '../../../../../../lib/test-timeout'
+
 const propsMethodSpies = {
   setMaxModeTo: sinon.spy(),
   updateSendAmount: sinon.spy(),
@@ -154,26 +156,25 @@ describe('SendAmountRow Component', function () {
       )
     })
 
-    it('should render the UserPreferencedTokenInput with the correct props', () => {
-      const { onBlur, onChange, error, value } = wrapper
+    it('should render the UserPreferencedTokenInput with the correct props', async () => {
+      const { onChange, error, value } = wrapper
         .find(SendRowWrapper)
         .childAt(1)
         .props()
       assert.equal(error, false)
       assert.equal(value, 'mockAmount')
       assert.equal(SendAmountRow.prototype.updateGas.callCount, 0)
       assert.equal(SendAmountRow.prototype.updateAmount.callCount, 0)
-      onBlur('mockNewAmount')
-      assert.equal(SendAmountRow.prototype.updateGas.callCount, 1)
+      assert.equal(SendAmountRow.prototype.validateAmount.callCount, 0)
+      onChange('mockNewAmount')
+      await timeout(501)
       assert.deepEqual(SendAmountRow.prototype.updateGas.getCall(0).args, [
         '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.validateAmount.getCall(0).args, [
         'mockNewAmount',

diff --git a/ui/app/pages/send/send-footer/send-footer.component.js b/ui/app/pages/send/send-footer/send-footer.component.js
@@ -28,6 +28,7 @@ export default class SendFooter extends Component {
     update: PropTypes.func,
     sendErrors: PropTypes.object,
     gasEstimateType: PropTypes.string,
+    gasIsLoading: PropTypes.bool,
   }
 
   static contextTypes = {
@@ -109,6 +110,7 @@ export default class SendFooter extends Component {
       gasTotal,
       to,
       gasLimit,
+      gasIsLoading,
     } = this.props
     const missingTokenBalance = selectedToken && !tokenBalance
     const gasLimitTooLow = gasLimit < 5208 // 5208 is hex value of 21000, minimum gas limit
@@ -117,7 +119,8 @@ export default class SendFooter extends Component {
       !gasTotal ||
       missingTokenBalance ||
       !(data || to) ||
-      gasLimitTooLow
+      gasLimitTooLow ||
+      gasIsLoading
     return shouldBeDisabled
   }
 

diff --git a/ui/app/pages/send/send-footer/send-footer.container.js b/ui/app/pages/send/send-footer/send-footer.container.js
@@ -23,6 +23,7 @@ import {
   getUnapprovedTxs,
   getSendErrors,
 } from '../send.selectors'
+import { getGasIsLoading } from '../../../selectors/selectors'
 import { isSendFormInError } from './send-footer.selectors'
 import {
   addressIsNew,
@@ -61,6 +62,7 @@ function mapStateToProps (state) {
     unapprovedTxs: getUnapprovedTxs(state),
     sendErrors: getSendErrors(state),
     gasEstimateType,
+    gasIsLoading: getGasIsLoading(state),
   }
 }
 

diff --git a/ui/app/pages/send/send-footer/tests/send-footer-component.test.js b/ui/app/pages/send/send-footer/tests/send-footer-component.test.js
@@ -86,29 +86,42 @@ describe('SendFooter Component', function () {
       'should return true if inError is truthy': {
         inError: true,
         expectedResult: true,
+        gasIsLoading: false,
       },
       'should return true if gasTotal is falsy': {
         inError: false,
         gasTotal: false,
         expectedResult: true,
+        gasIsLoading: false,
       },
       'should return true if to is truthy': {
         to: '0xsomevalidAddress',
         inError: false,
         gasTotal: false,
         expectedResult: true,
+        gasIsLoading: false,
       },
       'should return true if selectedToken is truthy and tokenBalance is falsy': {
         selectedToken: true,
         tokenBalance: null,
         expectedResult: true,
+        gasIsLoading: false,
+      },
+      'should return true if gasIsLoading is truthy but all other params are falsy': {
+        inError: false,
+        gasTotal: null,
+        selectedToken: null,
+        tokenBalance: 0,
+        expectedResult: true,
+        gasIsLoading: true,
       },
       'should return false if inError is false and all other params are truthy': {
         inError: false,
         gasTotal: '0x123',
         selectedToken: true,
         tokenBalance: 123,
         expectedResult: false,
+        gasIsLoading: false,
       },
     }
     Object.entries(config).map(([description, obj]) => {

diff --git a/ui/app/pages/send/send-footer/tests/send-footer-container.test.js b/ui/app/pages/send/send-footer/tests/send-footer-container.test.js
@@ -2,7 +2,6 @@ import assert from 'assert'
 import proxyquire from 'proxyquire'
 import sinon from 'sinon'
 
-let mapStateToProps
 let mapDispatchToProps
 
 const actionSpies = {
@@ -22,8 +21,7 @@ const utilsStubs = {
 
 proxyquire('../send-footer.container.js', {
   'react-redux': {
-    connect: (ms, md) => {
-      mapStateToProps = ms
+    connect: (_, md) => {
       mapDispatchToProps = md
       return () => ({})
     },
@@ -56,28 +54,6 @@ proxyquire('../send-footer.container.js', {
 })
 
 describe('send-footer container', () => {
-  describe('mapStateToProps()', () => {
-    it('should map the correct properties to props', () => {
-      assert.deepEqual(mapStateToProps('mockState'), {
-        amount: 'mockAmount:mockState',
-        data: 'mockHexData:mockState',
-        selectedToken: 'mockSelectedToken:mockState',
-        editingTransactionId: 'mockEditingTransactionId:mockState',
-        from: 'mockFromObject:mockState',
-        gasLimit: 'mockGasLimit:mockState',
-        gasPrice: 'mockGasPrice:mockState',
-        gasTotal: 'mockGasTotal:mockState',
-        inError: 'mockInError:mockState',
-        to: 'mockTo:mockState',
-        toAccounts: 'mockToAccounts:mockState',
-        tokenBalance: 'mockTokenBalance:mockState',
-        unapprovedTxs: 'mockUnapprovedTxs:mockState',
-        sendErrors: 'mockSendErrors:mockState',
-        gasEstimateType: 'mockGasEstimateType:mockState',
-      })
-    })
-  })
-
   describe('mapDispatchToProps()', () => {
     let dispatchSpy
     let mapDispatchToPropsObject