Checking for sufficient balance in confirm ether screen; includes error messages for user.

1 files changed, 58 insertions, 4 deletions

diff --git a/ui/app/components/pending-tx/confirm-send-ether.js b/ui/app/components/pending-tx/confirm-send-ether.js
index d1ce25cbf..14077b5e8 100644
--- a/ui/app/components/pending-tx/confirm-send-ether.js
+++ b/ui/app/components/pending-tx/confirm-send-ether.js
@@ -7,11 +7,16 @@ const clone = require('clone')
 const ethUtil = require('ethereumjs-util')
 const BN = ethUtil.BN
 const hexToBn = require('../../../../app/scripts/lib/hex-to-bn')
+const classnames = require('classnames')
 const {
   conversionUtil,
   addCurrencies,
   multiplyCurrencies,
 } = require('../../conversion-util')
+const {
+  getGasTotal,
+  isBalanceSufficient,
+}  = require('../send/send-utils')
 const GasFeeDisplay = require('../send/gas-fee-display-v2')
 const t = require('../../../i18n')
 const SenderToRecipient = require('../sender-to-recipient')
@@ -30,12 +35,14 @@ function mapStateToProps (state) {
   } = state.metamask
   const accounts = state.metamask.accounts
   const selectedAddress = state.metamask.selectedAddress || Object.keys(accounts)[0]
+  const { balance } = accounts[selectedAddress]
   return {
     conversionRate,
     identities,
     selectedAddress,
     currentCurrency,
     send,
+    balance,
   }
 }
 
@@ -86,6 +93,7 @@ function mapDispatchToProps (dispatch) {
       }))
       dispatch(actions.showModal({ name: 'CUSTOMIZE_GAS' }))
     },
+    updateSendErrors: error => dispatch(actions.updateSendErrors(error)),
   }
 }
 
@@ -218,7 +226,12 @@ ConfirmSendEther.prototype.render = function () {
     conversionRate,
     currentCurrency: convertedCurrency,
     showCustomizeGasModal,
-    send: { gasTotal, gasLimit: sendGasLimit, gasPrice: sendGasPrice },
+    send: {
+      gasTotal,
+      gasLimit: sendGasLimit,
+      gasPrice: sendGasPrice,
+      errors,
+    },
   } = this.props
   const txMeta = this.gatherTxMeta()
   const txParams = txMeta.txParams || {}
@@ -326,7 +339,12 @@ ConfirmSendEther.prototype.render = function () {
           ]),
 
           h('section.flex-row.flex-center.confirm-screen-row.confirm-screen-total-box ', [
-            h('div.confirm-screen-section-column', [
+            h('div', {
+              className: classnames({
+                'confirm-screen-section-column--with-error': errors['insufficientFunds'],
+                'confirm-screen-section-column': !errors['insufficientFunds'],
+              })
+            }, [
               h('span.confirm-screen-label', [ t('total') + ' ' ]),
               h('div.confirm-screen-total-box__subtitle', [ t('amountPlusGas') ]),
             ]),
@@ -335,6 +353,8 @@ ConfirmSendEther.prototype.render = function () {
               h('div.confirm-screen-row-info', `${totalInFIAT} ${currentCurrency.toUpperCase()}`),
               h('div.confirm-screen-row-detail', `${totalInETH} ETH`),
             ]),
+
+            this.renderErrorMessage('insufficientFunds'),
           ]),
         ]),
 
@@ -439,16 +459,28 @@ ConfirmSendEther.prototype.render = function () {
   )
 }
 
+ConfirmSendEther.prototype.renderErrorMessage = function (message) {
+  const { send: { errors } } = this.props
+
+  return errors[message]
+    ? h('div.confirm-screen-error', [ errors[message] ])
+    : null
+}
+
 ConfirmSendEther.prototype.onSubmit = function (event) {
   event.preventDefault()
+  const { updateSendErrors } = this.props
   const txMeta = this.gatherTxMeta()
   const valid = this.checkValidity()
+  const balanceIsSufficient = this.isBalanceSufficient(txMeta)
   this.setState({ valid, submitting: true })
 
-  if (valid && this.verifyGasParams()) {
+  if (valid && this.verifyGasParams() && balanceIsSufficient) {
     this.props.sendTransaction(txMeta, event)
+  } else if (!balanceIsSufficient) {
+    updateSendErrors({ insufficientFunds: t('insufficientFunds') })
   } else {
-    this.props.dispatch(actions.displayWarning(t('invalidGasParams')))
+    updateSendErrors({ invalidGasParams: t('invalidGasParams') })
     this.setState({ submitting: false })
   }
 }
@@ -460,6 +492,28 @@ ConfirmSendEther.prototype.cancel = function (event, txMeta) {
   cancelTransaction(txMeta)
 }
 
+ConfirmSendEther.prototype.isBalanceSufficient = function (txMeta) {
+  const {
+    balance,
+    conversionRate,
+  } = this.props
+  const {
+    txParams: {
+      gas,
+      gasPrice,
+      value: amount,
+    },
+  } = txMeta
+  const gasTotal = getGasTotal(gas, gasPrice)
+
+  return isBalanceSufficient({
+    amount,
+    gasTotal,
+    balance,
+    conversionRate,
+  })
+}
+
 ConfirmSendEther.prototype.checkValidity = function () {
   const form = this.getFormEl()
   const valid = form.checkValidity()