Drop the buy button in the confTx view if account does not have enough eth

7 files changed, 71 insertions, 13 deletions

diff --git a/ui/app/account-detail.js b/ui/app/account-detail.js
index 41d1ff2da..01c7e8781 100644
--- a/ui/app/account-detail.js
+++ b/ui/app/account-detail.js
@@ -279,10 +279,11 @@ AccountDetailScreen.prototype.requestAccountExport = function () {
 
 AccountDetailScreen.prototype.buyButtonDeligator = function () {
   var props = this.props
+  var selected = props.address || Object.keys(props.accounts)[0]
 
   if (this.props.accountDetail.subview === 'buyForm') {
     props.dispatch(actions.backToAccountDetail(props.address))
   } else {
-    props.dispatch(actions.buyEthView())
+    props.dispatch(actions.buyEthView(selected))
   }
 }
diff --git a/ui/app/actions.js b/ui/app/actions.js
index 289366db0..0cce9065e 100644
--- a/ui/app/actions.js
+++ b/ui/app/actions.js
@@ -479,9 +479,10 @@ function showAccountsPage () {
   }
 }
 
-function showConfTxPage () {
+function showConfTxPage (transForward = true) {
   return {
     type: actions.SHOW_CONF_TX_PAGE,
+    transForward: transForward,
   }
 }
 
diff --git a/ui/app/components/buy-button-subview.js b/ui/app/components/buy-button-subview.js
index c3e9e5d7b..7daf41206 100644
--- a/ui/app/components/buy-button-subview.js
+++ b/ui/app/components/buy-button-subview.js
@@ -16,6 +16,7 @@ function mapStateToProps (state) {
     buyView: state.appState.buyView,
     network: state.metamask.network,
     provider: state.metamask.provider,
+    context: state.appState.currentView.context,
   }
 }
 
@@ -38,7 +39,7 @@ BuyButtonSubview.prototype.render = function () {
         },
       }, [
         h('i.fa.fa-arrow-left.fa-lg.cursor-pointer.color-orange', {
-          onClick: () => props.dispatch(actions.backToAccountDetail(props.selectedAccount)),
+          onClick: this.backButtonContext.bind(this),
           style: {
             position: 'absolute',
             left: '10px',
@@ -121,3 +122,11 @@ BuyButtonSubview.prototype.formVersionSubview = function () {
 BuyButtonSubview.prototype.navigateTo = function (url) {
   extension.tabs.create({ url })
 }
+
+BuyButtonSubview.prototype.backButtonContext = function () {
+  if (this.props.context === 'confTx') {
+    this.props.dispatch(actions.showConfTxPage(false))
+  } else {
+    this.props.dispatch(actions.goHome())
+  }
+}
diff --git a/ui/app/components/pending-tx-details.js b/ui/app/components/pending-tx-details.js
index 148b5c6df..d8e8524bf 100644
--- a/ui/app/components/pending-tx-details.js
+++ b/ui/app/components/pending-tx-details.js
@@ -4,12 +4,12 @@ const inherits = require('util').inherits
 
 const MiniAccountPanel = require('./mini-account-panel')
 const EthBalance = require('./eth-balance')
-const addressSummary = require('../util').addressSummary
+const util = require('../util')
+const addressSummary = util.addressSummary
 const nameForAddress = require('../../lib/contract-namer')
 const ethUtil = require('ethereumjs-util')
 const BN = ethUtil.BN
 
-
 module.exports = PendingTxDetails
 
 inherits(PendingTxDetails, Component)
diff --git a/ui/app/components/pending-tx.js b/ui/app/components/pending-tx.js
index 1feedbbbc..61e40af0e 100644
--- a/ui/app/components/pending-tx.js
+++ b/ui/app/components/pending-tx.js
@@ -3,6 +3,8 @@ const h = require('react-hyperscript')
 const inherits = require('util').inherits
 const PendingTxDetails = require('./pending-tx-details')
 
+const ethUtil = require('ethereumjs-util')
+const BN = ethUtil.BN
 
 module.exports = PendingTx
 
@@ -14,7 +16,6 @@ function PendingTx () {
 PendingTx.prototype.render = function () {
   var state = this.props
   var txData = state.txData
-
   return (
 
     h('div', {
@@ -39,10 +40,8 @@ PendingTx.prototype.render = function () {
           margin: '14px 25px',
         },
       }, [
-        h('button.confirm', {
-          onClick: state.sendTransaction,
-          style: { background: 'rgb(251,117,1)' },
-        }, 'Accept'),
+
+        this.buttonDeligator(),
 
         h('button.cancel', {
           onClick: state.cancelTransaction,
@@ -53,3 +52,31 @@ PendingTx.prototype.render = function () {
   )
 }
 
+PendingTx.prototype.buttonDeligator = function () {
+  var state = this.props
+  var txData = state.txData
+  var txParams = txData.txParams || {}
+  var address = txParams.from || state.selectedAddress
+
+  var account = state.accounts[address]
+  var balance = account ? account.balance : '0x0'
+
+  var gasCost = new BN(ethUtil.stripHexPrefix(txParams.gas || txData.estimatedGas), 16)
+  var gasPrice = new BN(ethUtil.stripHexPrefix(txParams.gasPrice || '0x4a817c800'), 16)
+  var txFee = gasCost.mul(gasPrice)
+  var txValue = new BN(ethUtil.stripHexPrefix(txParams.value || '0x0'), 16)
+  var maxCost = txValue.add(txFee)
+
+  var balanceBn = new BN(ethUtil.stripHexPrefix(balance), 16)
+  if (maxCost.gt(balanceBn)) {
+    return h('button.confirm', {
+      onClick: state.sendTransaction,
+      style: { background: 'rgb(251,117,1)' },
+    }, 'Buy')
+  } else {
+    return h('button.confirm', {
+      onClick: state.sendTransaction,
+      style: { background: 'rgb(251,117,1)' },
+    }, 'Accept')
+  }
+}
diff --git a/ui/app/conf-tx.js b/ui/app/conf-tx.js
index 99b4bc9f1..0c3e32cea 100644
--- a/ui/app/conf-tx.js
+++ b/ui/app/conf-tx.js
@@ -6,6 +6,8 @@ const connect = require('react-redux').connect
 const actions = require('./actions')
 const txHelper = require('../lib/tx-helper')
 const isPopupOrNotification = require('../../app/scripts/lib/is-popup-or-notification')
+const ethUtil = require('ethereumjs-util')
+const BN = ethUtil.BN
 
 const PendingTx = require('./components/pending-tx')
 const PendingMsg = require('./components/pending-msg')
@@ -113,8 +115,26 @@ function currentTxView (opts) {
 }
 
 ConfirmTxScreen.prototype.sendTransaction = function (txData, event) {
+  var state = this.props
+
+  var txParams = txData.txParams || {}
+  var address = txParams.from || state.selectedAddress
+  var account = state.accounts[address]
+  var balance = account ? account.balance : '0x0'
+
+  var gasCost = new BN(ethUtil.stripHexPrefix(txParams.gas || txData.estimatedGas), 16)
+  var gasPrice = new BN(ethUtil.stripHexPrefix(txParams.gasPrice || '0x4a817c800'), 16)
+  var txFee = gasCost.mul(gasPrice)
+  var txValue = new BN(ethUtil.stripHexPrefix(txParams.value || '0x0'), 16)
+  var maxCost = txValue.add(txFee)
+
+  var balanceBn = new BN(ethUtil.stripHexPrefix(balance), 16)
   event.stopPropagation()
-  this.props.dispatch(actions.sendTx(txData))
+  if (maxCost.gt(balanceBn)) {
+    this.props.dispatch(actions.buyEthView(address))
+  } else {
+    this.props.dispatch(actions.sendTx(txData))
+  }
 }
 
 ConfirmTxScreen.prototype.cancelTransaction = function (txData, event) {
diff --git a/ui/app/reducers/app.js b/ui/app/reducers/app.js
index 8eb6ec4d4..c2ac099a6 100644
--- a/ui/app/reducers/app.js
+++ b/ui/app/reducers/app.js
@@ -240,7 +240,7 @@ function reduceApp (state, action) {
           name: 'confTx',
           context: 0,
         },
-        transForward: true,
+        transForward: action.transForward,
         warning: null,
       })
 
@@ -408,7 +408,7 @@ function reduceApp (state, action) {
         transForward: true,
         currentView: {
           name: 'buyEth',
-          context: appState.currentView.context,
+          context: appState.currentView.name,
         },
         buyView: {
           subview: 'buyForm',