Improve customize gas modal error handling

1 files changed, 121 insertions, 23 deletions

diff --git a/ui/app/components/customize-gas-modal/index.js b/ui/app/components/customize-gas-modal/index.js
index 744891c47..710ee24c0 100644
--- a/ui/app/components/customize-gas-modal/index.js
+++ b/ui/app/components/customize-gas-modal/index.js
@@ -6,23 +6,46 @@ const actions = require('../../actions')
 const GasModalCard = require('./gas-modal-card')
 
 const {
-  MIN_GAS_PRICE,
-  MIN_GAS_LIMIT,
+  MIN_GAS_PRICE_DEC,
+  MIN_GAS_LIMIT_DEC,
+  MIN_GAS_PRICE_GWEI,
 } = require('../send/send-constants')
 
-const { conversionUtil, multiplyCurrencies } = require('../../conversion-util')
+const {
+  isBalanceSufficient,
+} = require('../send/send-utils')
+
+const {
+  conversionUtil,
+  multiplyCurrencies,
+  conversionGreaterThan,
+} = require('../../conversion-util')
 
 const {
   getGasPrice,
   getGasLimit,
   conversionRateSelector,
+  getSendAmount,
+  getSelectedToken,
+  getSendFrom,
+  getCurrentAccountWithSendEtherInfo,
+  getSelectedTokenToFiatRate,
 } = require('../../selectors')
 
 function mapStateToProps (state) {
+  const selectedToken = getSelectedToken(state)
+  const currentAccount = getSendFrom(state) || getCurrentAccountWithSendEtherInfo(state)
+  const conversionRate = conversionRateSelector(state)
+
   return {
     gasPrice: getGasPrice(state),
     gasLimit: getGasLimit(state),
-    conversionRate: conversionRateSelector(state),
+    conversionRate,
+    amount: getSendAmount(state),
+    balance: currentAccount.balance,
+    primaryCurrency: selectedToken && selectedToken.symbol,
+    selectedToken,
+    amountConversionRate: selectedToken ? getSelectedTokenToFiatRate(state) : conversionRate,
   }
 }
 
@@ -39,15 +62,26 @@ inherits(CustomizeGasModal, Component)
 function CustomizeGasModal (props) {
   Component.call(this)
 
+  const gasPrice = props.gasPrice || MIN_GAS_PRICE_DEC
+  const gasLimit = props.gasLimit || MIN_GAS_LIMIT_DEC
+
+  const gasTotal = multiplyCurrencies(gasLimit, gasPrice, {
+    toNumericBase: 'hex',
+    multiplicandBase: 16,
+    multiplierBase: 16,
+  })
+
   this.state = {
-    gasPrice: props.gasPrice || MIN_GAS_PRICE,
-    gasLimit: props.gasLimit || MIN_GAS_LIMIT,
+    gasPrice,
+    gasLimit,
+    gasTotal,
+    error: null,
   }
 }
 
 module.exports = connect(mapStateToProps, mapDispatchToProps)(CustomizeGasModal)
 
-CustomizeGasModal.prototype.save = function (gasPrice, gasLimit) {
+CustomizeGasModal.prototype.save = function (gasPrice, gasLimit, gasTotal) {
   const {
     updateGasPrice,
     updateGasLimit,
@@ -55,41 +89,101 @@ CustomizeGasModal.prototype.save = function (gasPrice, gasLimit) {
     updateGasTotal
   } = this.props
 
-  const newGasTotal = multiplyCurrencies(gasLimit, gasPrice, {
-    toNumericBase: 'hex',
-    multiplicandBase: 16,
-    multiplierBase: 16,
-  })
-
   updateGasPrice(gasPrice)
   updateGasLimit(gasLimit)
-  updateGasTotal(newGasTotal)
+  updateGasTotal(gasTotal)
   hideModal()
 }
 
+CustomizeGasModal.prototype.validate = function ({ gasTotal, gasLimit }) {
+  const {
+    amount,
+    balance,
+    primaryCurrency,
+    selectedToken,
+    amountConversionRate,
+    conversionRate,
+  } = this.props
+
+  let error = null
+
+  const balanceIsSufficient = isBalanceSufficient({
+    amount,
+    gasTotal,
+    balance,
+    primaryCurrency,
+    selectedToken,
+    amountConversionRate,
+    conversionRate,
+  })
+
+  if (!balanceIsSufficient) {
+    error = 'Insufficient balance for current gas total' 
+  }
+  
+  const gasLimitTooLow = gasLimit && conversionGreaterThan(
+    {
+      value: MIN_GAS_LIMIT_DEC,
+      fromNumericBase: 'dec',
+      conversionRate,
+    },
+    {
+      value: gasLimit,
+      fromNumericBase: 'hex',
+    },
+  )
+
+  if (gasLimitTooLow) {
+    error = 'Gas limit must be at least 21000' 
+  }
+
+  this.setState({ error })
+  return error
+}
+
 CustomizeGasModal.prototype.convertAndSetGasLimit = function (newGasLimit) {
-  const convertedGasLimit = conversionUtil(newGasLimit, {
+  const { gasPrice } = this.state
+
+  const gasLimit = conversionUtil(newGasLimit, {
     fromNumericBase: 'dec',
     toNumericBase: 'hex',
   })
 
-  this.setState({ gasLimit: convertedGasLimit })
+  const gasTotal = multiplyCurrencies(gasLimit, gasPrice, {
+    toNumericBase: 'hex',
+    multiplicandBase: 16,
+    multiplierBase: 16,
+  })
+
+  this.validate({ gasTotal, gasLimit })
+
+  this.setState({ gasTotal, gasLimit })
 }
 
 CustomizeGasModal.prototype.convertAndSetGasPrice = function (newGasPrice) {
-  const convertedGasPrice = conversionUtil(newGasPrice, {
+  const { gasLimit } = this.state
+
+  const gasPrice = conversionUtil(newGasPrice, {
     fromNumericBase: 'dec',
     toNumericBase: 'hex',
     fromDenomination: 'GWEI',
     toDenomination: 'WEI',
   })
 
-  this.setState({ gasPrice: convertedGasPrice })
+  const gasTotal = multiplyCurrencies(gasLimit, gasPrice, {
+    toNumericBase: 'hex',
+    multiplicandBase: 16,
+    multiplierBase: 16,
+  })
+
+  this.validate({ gasTotal })
+
+  this.setState({ gasTotal, gasPrice })
 }
 
 CustomizeGasModal.prototype.render = function () {
   const { hideModal, conversionRate } = this.props
-  const { gasPrice, gasLimit } = this.state
+  const { gasPrice, gasLimit, gasTotal, error } = this.state
 
   const convertedGasPrice = conversionUtil(gasPrice, {
     fromNumericBase: 'hex',
@@ -120,7 +214,7 @@ CustomizeGasModal.prototype.render = function () {
         
         h(GasModalCard, {
           value: convertedGasPrice,
-          min: MIN_GAS_PRICE,
+          min: MIN_GAS_PRICE_GWEI,
           // max: 1000,
           step: 1,
           onChange: value => this.convertAndSetGasPrice(value),
@@ -130,7 +224,7 @@ CustomizeGasModal.prototype.render = function () {
 
         h(GasModalCard, {
           value: convertedGasLimit,
-          min: MIN_GAS_LIMIT,
+          min: 1,
           // max: 100000,
           step: 1,
           onChange: value => this.convertAndSetGasLimit(value),
@@ -141,6 +235,10 @@ CustomizeGasModal.prototype.render = function () {
       ]),
 
       h('div.send-v2__customize-gas__footer', {}, [
+
+        error && h('div.send-v2__customize-gas__error-message', [
+          error,
+        ]),
         
         h('div.send-v2__customize-gas__revert', {
           onClick: () => console.log('Revert'),
@@ -151,8 +249,8 @@ CustomizeGasModal.prototype.render = function () {
             onClick: this.props.hideModal,
           }, ['CANCEL']),
 
-          h('div.send-v2__customize-gas__save', {
-            onClick: () => this.save(gasPrice, gasLimit),
+          h(`div.send-v2__customize-gas__save${error ? '__error' : ''}`, {
+            onClick: () => !error && this.save(gasPrice, gasLimit, gasTotal),
           }, ['SAVE']),
         ])