1 files changed, 85 insertions, 13 deletions
diff --git a/ui/app/components/pending-tx/confirm-send-ether.js b/ui/app/components/pending-tx/confirm-send-ether.js
index 255f0e8a2..2474516d4 100644
--- a/ui/app/components/pending-tx/confirm-send-ether.js
+++ b/ui/app/components/pending-tx/confirm-send-ether.js
@@ -1,5 +1,6 @@
 const Component = require('react').Component
-const connect = require('../../metamask-connect')
+const PropTypes = require('prop-types')
+const connect = require('react-redux').connect
 const h = require('react-hyperscript')
 const inherits = require('util').inherits
 const actions = require('../../actions')
@@ -7,19 +8,29 @@ 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 SenderToRecipient = require('../sender-to-recipient')
 const NetworkDisplay = require('../network-display')
 
 const { MIN_GAS_PRICE_HEX } = require('../send/send-constants')
 
+ConfirmSendEther.contextTypes = {
+  t: PropTypes.func,
+}
+
 module.exports = connect(mapStateToProps, mapDispatchToProps)(ConfirmSendEther)
 
+
 function mapStateToProps (state) {
   const {
     conversionRate,
@@ -29,12 +40,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,
   }
 }
 
@@ -85,6 +98,7 @@ function mapDispatchToProps (dispatch) {
       }))
       dispatch(actions.showModal({ name: 'CUSTOMIZE_GAS' }))
     },
+    updateSendErrors: error => dispatch(actions.updateSendErrors(error)),
   }
 }
 
@@ -95,6 +109,18 @@ function ConfirmSendEther () {
   this.onSubmit = this.onSubmit.bind(this)
 }
 
+ConfirmSendEther.prototype.componentWillMount = function () {
+  const { updateSendErrors } = this.props
+  const txMeta = this.gatherTxMeta()
+  const balanceIsSufficient = this.isBalanceSufficient(txMeta)
+
+  updateSendErrors({
+    insufficientFunds: balanceIsSufficient
+      ? false
+      : this.context.t('insufficientFunds'),
+  })
+}
+
 ConfirmSendEther.prototype.getAmount = function () {
   const { conversionRate, currentCurrency } = this.props
   const txMeta = this.gatherTxMeta()
@@ -196,7 +222,7 @@ ConfirmSendEther.prototype.getData = function () {
     },
     to: {
       address: txParams.to,
-      name: identities[txParams.to] ? identities[txParams.to].name : this.props.t('newRecipient'),
+      name: identities[txParams.to] ? identities[txParams.to].name : this.context.t('newRecipient'),
     },
     memo: txParams.memo || '',
     gasFeeInFIAT,
@@ -217,7 +243,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 || {}
@@ -297,7 +328,7 @@ ConfirmSendEther.prototype.render = function () {
 
         h('div.confirm-screen-rows', [
           h('section.flex-row.flex-center.confirm-screen-row', [
-            h('span.confirm-screen-label.confirm-screen-section-column', [ this.props.t('from') ]),
+            h('span.confirm-screen-label.confirm-screen-section-column', [ this.context.t('from') ]),
             h('div.confirm-screen-section-column', [
               h('div.confirm-screen-row-info', fromName),
               h('div.confirm-screen-row-detail', `...${fromAddress.slice(fromAddress.length - 4)}`),
@@ -305,7 +336,7 @@ ConfirmSendEther.prototype.render = function () {
           ]),
 
           h('section.flex-row.flex-center.confirm-screen-row', [
-            h('span.confirm-screen-label.confirm-screen-section-column', [ this.props.t('to') ]),
+            h('span.confirm-screen-label.confirm-screen-section-column', [ this.context.t('to') ]),
             h('div.confirm-screen-section-column', [
               h('div.confirm-screen-row-info', toName),
               h('div.confirm-screen-row-detail', `...${toAddress.slice(toAddress.length - 4)}`),
@@ -313,7 +344,7 @@ ConfirmSendEther.prototype.render = function () {
           ]),
 
           h('section.flex-row.flex-center.confirm-screen-row', [
-            h('span.confirm-screen-label.confirm-screen-section-column', [ this.props.t('gasFee') ]),
+            h('span.confirm-screen-label.confirm-screen-section-column', [ this.context.t('gasFee') ]),
             h('div.confirm-screen-section-column', [
               h(GasFeeDisplay, {
                 gasTotal: gasTotal || gasFeeInHex,
@@ -325,15 +356,22 @@ ConfirmSendEther.prototype.render = function () {
           ]),
 
           h('section.flex-row.flex-center.confirm-screen-row.confirm-screen-total-box ', [
-            h('div.confirm-screen-section-column', [
-              h('span.confirm-screen-label', [ this.props.t('total') + ' ' ]),
-              h('div.confirm-screen-total-box__subtitle', [ this.props.t('amountPlusGas') ]),
+            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') ]),
             ]),
 
             h('div.confirm-screen-section-column', [
               h('div.confirm-screen-row-info', `${totalInFIAT} ${currentCurrency.toUpperCase()}`),
               h('div.confirm-screen-row-detail', `${totalInETH} ETH`),
             ]),
+
+            this.renderErrorMessage('insufficientFunds'),
           ]),
         ]),
 
@@ -428,26 +466,38 @@ ConfirmSendEther.prototype.render = function () {
               clearSend()
               this.cancel(event, txMeta)
             },
-          }, this.props.t('cancel')),
+          }, this.context.t('cancel')),
 
           // Accept Button
-          h('button.btn-confirm.page-container__footer-button.allcaps', [this.props.t('confirm')]),
+          h('button.btn-confirm.page-container__footer-button.allcaps', [this.context.t('confirm')]),
         ]),
       ]),
     ])
   )
 }
 
+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: this.context.t('insufficientFunds') })
   } else {
-    this.props.dispatch(actions.displayWarning(this.props.t('invalidGasParams')))
+    updateSendErrors({ invalidGasParams: this.context.t('invalidGasParams') })
     this.setState({ submitting: false })
   }
 }
@@ -459,6 +509,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()