Readjust gas fees when switching networks on the send screen

ui/app/components/send/send-v2-container.js

@@ -51,6 +51,7 @@ function mapStateToProps (state) {
     amountConversionRate: selectedToken ? tokenToFiatRate : conversionRate,
     tokenContract: getSelectedTokenContract(state),
     unapprovedTxs: state.metamask.unapprovedTxs,
+    network: state.metamask.network,
   }
 }
 

ui/app/send-v2.js

@@ -85,6 +85,20 @@ SendTransactionScreen.prototype.componentWillMount = function () {
   const {
     updateTokenExchangeRate,
     selectedToken = {},
+  } = this.props
+
+  const { symbol } = selectedToken || {}
+
+  if (symbol) {
+    updateTokenExchangeRate(symbol)
+  }
+
+  this.updateGas()
+}
+
+SendTransactionScreen.prototype.updateGas = function () {
+  const {
+    selectedToken = {},
     getGasPrice,
     estimateGas,
     selectedAddress,
@@ -96,17 +110,16 @@ SendTransactionScreen.prototype.componentWillMount = function () {
     gasPrice,
     gasLimit,
   } = this.props
+
   const { symbol } = selectedToken || {}
 
-  if (symbol) {
+  const tokenBalancePromise = tokenContract
-    updateTokenExchangeRate(symbol)
+    ? tokenContract.balanceOf(from.address)
-  }
+    : Promise.resolve()
 
+  if (!editingTransactionId) {
     const estimateGasParams = getParamsForGasEstimate(selectedAddress, symbol, data)
 
-  const tokenBalancePromise = tokenContract && tokenContract.balanceOf(from.address)
-  let newGasTotal
-  if (!editingTransactionId) {
     Promise
       .all([
         getGasPrice(),
@@ -114,25 +127,24 @@ SendTransactionScreen.prototype.componentWillMount = function () {
         tokenBalancePromise,
       ])
       .then(([gasPrice, gas, usersToken]) => {
-
+        const newGasTotal = this.getGasTotal(gas, gasPrice)
-        const newGasTotal = multiplyCurrencies(gas, gasPrice, {
-          toNumericBase: 'hex',
-          multiplicandBase: 16,
-          multiplierBase: 16,
-        })
         updateGasTotal(newGasTotal)
         this.updateSendTokenBalance(usersToken)
       })
   } else {
-    newGasTotal = multiplyCurrencies(gasLimit, gasPrice, {
+    const newGasTotal = this.getGasTotal(gasLimit, gasPrice)
+    updateGasTotal(newGasTotal)
+    tokenBalancePromise
+      .then(usersToken => this.updateSendTokenBalance(usersToken))
+  }
+}
+
+SendTransactionScreen.prototype.getGasTotal = function (gasLimit, gasPrice) {
+  return multiplyCurrencies(gasLimit, gasPrice, {
     toNumericBase: 'hex',
     multiplicandBase: 16,
     multiplierBase: 16,
   })
-    updateGasTotal(newGasTotal)
-    tokenBalancePromise && tokenBalancePromise.then(
-      usersToken => this.updateSendTokenBalance(usersToken))
-  }
 }
 
 SendTransactionScreen.prototype.componentDidUpdate = function (prevProps) {
@@ -142,11 +154,14 @@ SendTransactionScreen.prototype.componentDidUpdate = function (prevProps) {
     tokenBalance,
     amount,
     selectedToken,
+    network,
   } = this.props
+
   const {
     from: { balance: prevBalance },
     gasTotal: prevGasTotal,
     tokenBalance: prevTokenBalance,
+    network: prevNetwork,
   } = prevProps
 
   const notFirstRender = [prevBalance, prevGasTotal].every(n => n !== null)
@@ -156,9 +171,15 @@ SendTransactionScreen.prototype.componentDidUpdate = function (prevProps) {
   const tokenBalanceHasChanged = selectedToken && tokenBalance !== prevTokenBalance
   const amountValidationChange = balanceHasChanged || gasTotalHasChange || tokenBalanceHasChanged
 
-  if (notFirstRender && amountValidationChange) {
+  if (notFirstRender) {
+    if (amountValidationChange) {
       this.validateAmount(amount)
     }
+
+    if (network !== prevNetwork && network !== 'loading') {
+      this.updateGas()
+    }
+  }
 }
 
 SendTransactionScreen.prototype.renderHeaderIcon = function () {