Merge pull request #673 from MetaMask/i#519buyButtonTxConf

Drop the buy button in if tx is more then account balance 

3 files changed, 30 insertions, 8 deletions

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..4c27a8092 100644
--- a/ui/app/components/pending-tx.js
+++ b/ui/app/components/pending-tx.js
@@ -3,7 +3,6 @@ const h = require('react-hyperscript')
 const inherits = require('util').inherits
 const PendingTxDetails = require('./pending-tx-details')
 
-
 module.exports = PendingTx
 
 inherits(PendingTx, Component)
@@ -31,6 +30,15 @@ PendingTx.prototype.render = function () {
         }
       `),
 
+      state.insufficientBalance ?
+        h('span.error', {
+          style: {
+            marginLeft: 50,
+            fontSize: '0.9em',
+          },
+        }, 'Insufficient balance for transaction')
+      : null,
+
       // send + cancel
       h('.flex-row.flex-space-around.conf-buttons', {
         style: {
@@ -39,17 +47,22 @@ PendingTx.prototype.render = function () {
           margin: '14px 25px',
         },
       }, [
+
+        state.insufficientBalance ?
+          h('button.btn-green', {
+            onClick: state.buyEth,
+          }, 'Buy Ether')
+        : null,
+
         h('button.confirm', {
+          disabled: state.insufficientBalance,
           onClick: state.sendTransaction,
-          style: { background: 'rgb(251,117,1)' },
         }, 'Accept'),
 
-        h('button.cancel', {
+        h('button.cancel.btn-red', {
           onClick: state.cancelTransaction,
-          style: { background: 'rgb(254,35,17)' },
         }, 'Reject'),
       ]),
     ])
   )
 }
-