1 files changed, 63 insertions, 6 deletions

diff --git a/ui/app/components/pending-tx/confirm-send-token.js b/ui/app/components/pending-tx/confirm-send-token.js
index 7fe260a61..dd9fdc23f 100644
--- a/ui/app/components/pending-tx/confirm-send-token.js
+++ b/ui/app/components/pending-tx/confirm-send-token.js
@@ -18,8 +18,13 @@ const {
   addCurrencies,
 } = require('../../conversion-util')
 const {
+  getGasTotal,
+  isBalanceSufficient,
+} = require('../send/send-utils')
+const {
   calcTokenAmount,
 } = require('../../token-util')
+const classnames = require('classnames')
 
 const { MIN_GAS_PRICE_HEX } = require('../send/send-constants')
 
@@ -46,9 +51,10 @@ function mapStateToProps (state, ownProps) {
     identities,
     currentCurrency,
   } = state.metamask
+  const accounts = state.metamask.accounts
   const selectedAddress = getSelectedAddress(state)
   const tokenExchangeRate = getTokenExchangeRate(state, symbol)
-
+  const { balance } = accounts[selectedAddress]
   return {
     conversionRate,
     identities,
@@ -58,6 +64,7 @@ function mapStateToProps (state, ownProps) {
     currentCurrency: currentCurrency.toUpperCase(),
     send: state.metamask.send,
     tokenContract: getSelectedTokenContract(state),
+    balance,
   }
 }
 
@@ -129,6 +136,7 @@ function mapDispatchToProps (dispatch, ownProps) {
       }))
       dispatch(actions.showModal({ name: 'CUSTOMIZE_GAS' }))
     },
+    updateSendErrors: error => dispatch(actions.updateSendErrors(error)),
   }
 }
 
@@ -140,12 +148,20 @@ function ConfirmSendToken () {
 }
 
 ConfirmSendToken.prototype.componentWillMount = function () {
-  const { tokenContract, selectedAddress } = this.props
+  const { tokenContract, selectedAddress, updateSendErrors} = this.props
+  const txMeta = this.gatherTxMeta()
+  const balanceIsSufficient = this.isBalanceSufficient(txMeta)
   tokenContract && tokenContract
     .balanceOf(selectedAddress)
     .then(usersToken => {
     })
   this.props.updateTokenExchangeRate()
+
+  updateSendErrors({
+    insufficientFunds: balanceIsSufficient
+      ? false
+      : this.context.t('insufficientFunds'),
+  })
 }
 
 ConfirmSendToken.prototype.getAmount = function () {
@@ -306,7 +322,7 @@ ConfirmSendToken.prototype.renderGasFee = function () {
 }
 
 ConfirmSendToken.prototype.renderTotalPlusGas = function () {
-  const { token: { symbol }, currentCurrency } = this.props
+  const { token: { symbol }, currentCurrency, send: { errors } } = this.props
   const { fiat: fiatAmount, token: tokenAmount } = this.getAmount()
   const { fiat: fiatGas, token: tokenGas } = this.getGasFee()
 
@@ -326,7 +342,12 @@ ConfirmSendToken.prototype.renderTotalPlusGas = 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', [ this.context.t('total') + ' ' ]),
           h('div.confirm-screen-total-box__subtitle', [ this.context.t('amountPlusGas') ]),
         ]),
@@ -335,10 +356,20 @@ ConfirmSendToken.prototype.renderTotalPlusGas = function () {
           h('div.confirm-screen-row-info', `${tokenAmount} ${symbol}`),
           h('div.confirm-screen-row-detail', `+ ${fiatGas} ${currentCurrency} ${this.context.t('gas')}`),
         ]),
+
+        this.renderErrorMessage('insufficientFunds'),
       ])
     )
 }
 
+ConfirmSendToken.prototype.renderErrorMessage = function (message) {
+  const { send: { errors } } = this.props
+
+  return errors[message]
+    ? h('div.confirm-screen-error', [ errors[message] ])
+    : null
+}
+
 ConfirmSendToken.prototype.render = function () {
   const { editTransaction } = this.props
   const txMeta = this.gatherTxMeta()
@@ -455,18 +486,44 @@ ConfirmSendToken.prototype.render = function () {
 
 ConfirmSendToken.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: this.context.t('insufficientFunds') })
   } else {
-    this.props.dispatch(actions.displayWarning(this.context.t('invalidGasParams')))
+    updateSendErrors({ invalidGasParams: this.context.t('invalidGasParams') })
     this.setState({ submitting: false })
   }
 }
 
+ConfirmSendToken.prototype.isBalanceSufficient = function (txMeta) {
+  const {
+    balance,
+    conversionRate,
+  } = this.props
+  const {
+    txParams: {
+      gas,
+      gasPrice,
+    },
+  } = txMeta
+  const gasTotal = getGasTotal(gas, gasPrice)
+
+  return isBalanceSufficient({
+    amount: '0',
+    gasTotal,
+    balance,
+    conversionRate,
+  })
+}
+
+
 ConfirmSendToken.prototype.cancel = function (event, txMeta) {
   event.preventDefault()
   const { cancelTransaction } = this.props