Handle and set gas estimation when max mode is clicked (#8176)

* Handle and set gas estimation when max mode is clicked
Add componentDidMount to SendAmountRow to check for maxMode boolean to update amount and gas.

ui/app/components/app/gas-customization/gas-modal-page-container/gas-modal-page-container.container.js

@@ -107,9 +107,11 @@ const mapStateToProps = (state, ownProps) => {
   const isMainnet = getIsMainnet(state)
   const showFiat = Boolean(isMainnet || showFiatInTestnets)
 
-  const newTotalEth = maxModeOn ? addHexWEIsToRenderableEth(balance, '0x0') : addHexWEIsToRenderableEth(value, customGasTotal)
+  const isTokenSelected = Boolean(getSelectedToken(state))
 
-  const sendAmount = maxModeOn ? subtractHexWEIsFromRenderableEth(balance, customGasTotal) : addHexWEIsToRenderableEth(value, '0x0')
+  const newTotalEth = maxModeOn && !isTokenSelected ? addHexWEIsToRenderableEth(balance, '0x0') : addHexWEIsToRenderableEth(value, customGasTotal)
+
+  const sendAmount = maxModeOn && !isTokenSelected ? subtractHexWEIsFromRenderableEth(balance, customGasTotal) : addHexWEIsToRenderableEth(value, '0x0')
 
   const insufficientBalance = maxModeOn ? false : !isBalanceSufficient({
     amount: value,

ui/app/pages/send/send-content/send-amount-row/send-amount-row.component.js

@@ -26,12 +26,26 @@ export default class SendAmountRow extends Component {
     updateSendAmount: PropTypes.func,
     updateSendAmountError: PropTypes.func,
     updateGas: PropTypes.func,
+    maxModeOn: PropTypes.bool,
   }
 
   static contextTypes = {
     t: PropTypes.func,
   }
 
+  componentDidUpdate (prevProps) {
+    const { maxModeOn: prevMaxModeOn, gasTotal: prevGasTotal } = prevProps
+    const { maxModeOn, amount, gasTotal, selectedToken } = this.props
+
+    if (maxModeOn && selectedToken && !prevMaxModeOn) {
+      this.updateGas(amount)
+    }
+
+    if (prevGasTotal !== gasTotal) {
+      this.validateAmount(amount)
+    }
+  }
+
   updateGas = debounce(this.updateGas.bind(this), 500)
 
   validateAmount (amount) {
@@ -86,17 +100,19 @@ export default class SendAmountRow extends Component {
     }
   }
 
+  handleChange = (newAmount) => {
+    this.validateAmount(newAmount)
+    this.updateGas(newAmount)
+    this.updateAmount(newAmount)
+  }
+
   renderInput () {
     const { amount, inError, selectedToken } = this.props
     const Component = selectedToken ? UserPreferencedTokenInput : UserPreferencedCurrencyInput
 
     return (
       <Component
-        onChange={(newAmount) => {
+        onChange={this.handleChange}
-          this.validateAmount(newAmount)
-          this.updateGas(newAmount)
-          this.updateAmount(newAmount)
-        }}
         error={inError}
         value={amount}
       />

ui/app/pages/send/send-content/send-amount-row/send-amount-row.container.js

@@ -8,6 +8,7 @@ import {
   getSendAmount,
   getSendFromBalance,
   getTokenBalance,
+  getSendMaxModeState,
 } from '../../send.selectors'
 import {
   sendAmountIsInError,
@@ -35,6 +36,7 @@ function mapStateToProps (state) {
     primaryCurrency: getPrimaryCurrency(state),
     selectedToken: getSelectedToken(state),
     tokenBalance: getTokenBalance(state),
+    maxModeOn: getSendMaxModeState(state),
   }
 }