Fix rounding issue when sending max tokens (#5695)

* Fix rounding issue when sending max tokens

* Ensure amount row shows exact amount of max tokens on send screen (#2)

* Fix tests

* Change stored redux value from BigNumber to hex string. Fix TokenInput default value

12 files changed, 40 insertions, 34 deletions

diff --git a/ui/app/components/send/send-content/send-amount-row/amount-max-button/amount-max-button.component.js b/ui/app/components/send/send-content/send-amount-row/amount-max-button/amount-max-button.component.js
index ceb620941..80518977e 100644
--- a/ui/app/components/send/send-content/send-amount-row/amount-max-button/amount-max-button.component.js
+++ b/ui/app/components/send/send-content/send-amount-row/amount-max-button/amount-max-button.component.js
@@ -11,11 +11,11 @@ export default class AmountMaxButton extends Component {
     setAmountToMax: PropTypes.func,
     setMaxModeTo: PropTypes.func,
     tokenBalance: PropTypes.string,
-  };
+  }
 
   static contextTypes = {
     t: PropTypes.func,
-  };
+  }
 
   setMaxAmount () {
     const {
diff --git a/ui/app/components/send/send-content/send-amount-row/amount-max-button/amount-max-button.utils.js b/ui/app/components/send/send-content/send-amount-row/amount-max-button/amount-max-button.utils.js
index b490a7fd7..27181d2f5 100644
--- a/ui/app/components/send/send-content/send-amount-row/amount-max-button/amount-max-button.utils.js
+++ b/ui/app/components/send/send-content/send-amount-row/amount-max-button/amount-max-button.utils.js
@@ -5,16 +5,23 @@ const {
 const ethUtil = require('ethereumjs-util')
 
 function calcMaxAmount ({ balance, gasTotal, selectedToken, tokenBalance }) {
-    const { decimals } = selectedToken || {}
-    const multiplier = Math.pow(10, Number(decimals || 0))
+  const { decimals } = selectedToken || {}
+  const multiplier = Math.pow(10, Number(decimals || 0))
 
-    return selectedToken
-      ? multiplyCurrencies(tokenBalance, multiplier, {toNumericBase: 'hex'})
-      : subtractCurrencies(
-        ethUtil.addHexPrefix(balance),
-        ethUtil.addHexPrefix(gasTotal),
-        { toNumericBase: 'hex' }
-      )
+  return selectedToken
+    ? multiplyCurrencies(
+      tokenBalance,
+      multiplier,
+      {
+        toNumericBase: 'hex',
+        multiplicandBase: 16,
+      }
+    )
+    : subtractCurrencies(
+      ethUtil.addHexPrefix(balance),
+      ethUtil.addHexPrefix(gasTotal),
+      { toNumericBase: 'hex' }
+    )
 }
 
 module.exports = {
diff --git a/ui/app/components/send/send-content/send-amount-row/amount-max-button/tests/amount-max-button-utils.test.js b/ui/app/components/send/send-content/send-amount-row/amount-max-button/tests/amount-max-button-utils.test.js
index 816df6a12..1ee858f67 100644
--- a/ui/app/components/send/send-content/send-amount-row/amount-max-button/tests/amount-max-button-utils.test.js
+++ b/ui/app/components/send/send-content/send-amount-row/amount-max-button/tests/amount-max-button-utils.test.js
@@ -19,7 +19,7 @@ describe('amount-max-button utils', () => {
         selectedToken: {
           decimals: 10,
         },
-        tokenBalance: 100,
+        tokenBalance: '64',
       }), 'e8d4a51000')
     })
   })
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 0268376bf..4df1e0ffa 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
@@ -26,11 +26,11 @@ export default class SendAmountRow extends Component {
     updateSendAmount: PropTypes.func,
     updateSendAmountError: PropTypes.func,
     updateGas: PropTypes.func,
-  };
+  }
 
   static contextTypes = {
     t: PropTypes.func,
-  };
+  }
 
   validateAmount (amount) {
     const {
@@ -58,7 +58,6 @@ export default class SendAmountRow extends Component {
 
     if (selectedToken) {
       updateGasFeeError({
-        amount,
         amountConversionRate,
         balance,
         conversionRate,
diff --git a/ui/app/components/send/send-content/send-amount-row/send-amount-row.container.js b/ui/app/components/send/send-content/send-amount-row/send-amount-row.container.js
index 3504d1b73..2b6fe0f6c 100644
--- a/ui/app/components/send/send-content/send-amount-row/send-amount-row.container.js
+++ b/ui/app/components/send/send-content/send-amount-row/send-amount-row.container.js
@@ -45,10 +45,10 @@ function mapDispatchToProps (dispatch) {
     setMaxModeTo: bool => dispatch(setMaxModeTo(bool)),
     updateSendAmount: newAmount => dispatch(updateSendAmount(newAmount)),
     updateGasFeeError: (amountDataObject) => {
-        dispatch(updateSendErrors(getGasFeeErrorObject(amountDataObject)))
+      dispatch(updateSendErrors(getGasFeeErrorObject(amountDataObject)))
     },
     updateSendAmountError: (amountDataObject) => {
-        dispatch(updateSendErrors(getAmountErrorObject(amountDataObject)))
+      dispatch(updateSendErrors(getAmountErrorObject(amountDataObject)))
     },
   }
 }
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 56e80cb83..14a71129f 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
@@ -82,7 +82,6 @@ describe('SendAmountRow Component', function () {
       assert.deepEqual(
         propsMethodSpies.updateGasFeeError.getCall(0).args,
         [{
-          amount: 'someAmount',
           amountConversionRate: 'mockAmountConversionRate',
           balance: 'mockBalance',
           conversionRate: 7,
diff --git a/ui/app/components/send/send-content/send-from-row/from-dropdown/from-dropdown.component.js b/ui/app/components/send/send-content/send-from-row/from-dropdown/from-dropdown.component.js
index 4f43a9d61..d512f7d0b 100644
--- a/ui/app/components/send/send-content/send-from-row/from-dropdown/from-dropdown.component.js
+++ b/ui/app/components/send/send-content/send-from-row/from-dropdown/from-dropdown.component.js
@@ -12,11 +12,11 @@ export default class FromDropdown extends Component {
     onSelect: PropTypes.func,
     openDropdown: PropTypes.func,
     selectedAccount: PropTypes.object,
-  };
+  }
 
   static contextTypes = {
     t: PropTypes.func,
-  };
+  }
 
   render () {
     const {
diff --git a/ui/app/components/send/send-content/send-from-row/send-from-row.component.js b/ui/app/components/send/send-content/send-from-row/send-from-row.component.js
index 3e0e0de22..b6de9d222 100644
--- a/ui/app/components/send/send-content/send-from-row/send-from-row.component.js
+++ b/ui/app/components/send/send-content/send-from-row/send-from-row.component.js
@@ -15,11 +15,11 @@ export default class SendFromRow extends Component {
     tokenContract: PropTypes.object,
     updateSendFrom: PropTypes.func,
     setSendTokenBalance: PropTypes.func,
-  };
+  }
 
   static contextTypes = {
     t: PropTypes.func,
-  };
+  }
 
   async handleFromChange (newFrom) {
     const {
@@ -32,6 +32,7 @@ export default class SendFromRow extends Component {
       const usersToken = await tokenContract.balanceOf(newFrom.address)
       setSendTokenBalance(usersToken)
     }
+
     updateSendFrom(newFrom)
   }
 
diff --git a/ui/app/components/send/send-content/send-from-row/send-from-row.container.js b/ui/app/components/send/send-content/send-from-row/send-from-row.container.js
index 33cb63b43..7008bbea4 100644
--- a/ui/app/components/send/send-content/send-from-row/send-from-row.container.js
+++ b/ui/app/components/send/send-content/send-from-row/send-from-row.container.js
@@ -10,8 +10,8 @@ import {
 } from './send-from-row.selectors.js'
 import { calcTokenBalance } from '../../send.utils.js'
 import {
-    updateSendFrom,
-    setSendTokenBalance,
+  updateSendFrom,
+  setSendTokenBalance,
 } from '../../../../actions'
 import {
     closeFromDropdown,
@@ -37,10 +37,10 @@ function mapDispatchToProps (dispatch) {
     openFromDropdown: () => dispatch(openFromDropdown()),
     updateSendFrom: newFrom => dispatch(updateSendFrom(newFrom)),
     setSendTokenBalance: (usersToken, selectedToken) => {
-        if (!usersToken) return
+      if (!usersToken) return
 
-        const tokenBalance = calcTokenBalance({ usersToken, selectedToken })
-        dispatch(setSendTokenBalance(tokenBalance))
+      const tokenBalance = calcTokenBalance({ usersToken, selectedToken })
+      dispatch(setSendTokenBalance(tokenBalance))
     },
   }
 }
diff --git a/ui/app/components/send/send-content/send-gas-row/send-gas-row.component.js b/ui/app/components/send/send-content/send-gas-row/send-gas-row.component.js
index 91b58cfd0..6ad4499ff 100644
--- a/ui/app/components/send/send-content/send-gas-row/send-gas-row.component.js
+++ b/ui/app/components/send/send-content/send-gas-row/send-gas-row.component.js
@@ -12,11 +12,11 @@ export default class SendGasRow extends Component {
     gasLoadingError: PropTypes.bool,
     gasTotal: PropTypes.string,
     showCustomizeGasModal: PropTypes.func,
-  };
+  }
 
   static contextTypes = {
     t: PropTypes.func,
-  };
+  }
 
   render () {
     const {
diff --git a/ui/app/components/send/send-content/send-gas-row/send-gas-row.container.js b/ui/app/components/send/send-content/send-gas-row/send-gas-row.container.js
index 8f8e3e4dd..e44fe4ef1 100644
--- a/ui/app/components/send/send-content/send-gas-row/send-gas-row.container.js
+++ b/ui/app/components/send/send-content/send-gas-row/send-gas-row.container.js
@@ -1,8 +1,8 @@
 import { connect } from 'react-redux'
 import {
-    getConversionRate,
-    getCurrentCurrency,
-    getGasTotal,
+  getConversionRate,
+  getCurrentCurrency,
+  getGasTotal,
 } from '../../send.selectors.js'
 import { getGasLoadingError, gasFeeIsInError } from './send-gas-row.selectors.js'
 import { showModal } from '../../../../actions'
diff --git a/ui/app/components/send/send-content/send-to-row/send-to-row.component.js b/ui/app/components/send/send-content/send-to-row/send-to-row.component.js
index 17c75c817..ce5325314 100644
--- a/ui/app/components/send/send-content/send-to-row/send-to-row.component.js
+++ b/ui/app/components/send/send-content/send-to-row/send-to-row.component.js
@@ -19,11 +19,11 @@ export default class SendToRow extends Component {
     updateSendTo: PropTypes.func,
     updateSendToError: PropTypes.func,
     scanQrCode: PropTypes.func,
-  };
+  }
 
   static contextTypes = {
     t: PropTypes.func,
-  };
+  }
 
   handleToChange (to, nickname = '', toError) {
     const { hasHexData, updateSendTo, updateSendToError, updateGas } = this.props