Clean up some of the code

ui/app/components/pending-tx.js

@@ -3,9 +3,6 @@ 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
 
 inherits(PendingTx, Component)
@@ -16,20 +13,6 @@ function PendingTx () {
 PendingTx.prototype.render = 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)
-  var insufficientBalance = maxCost.gt(balanceBn)
 
   return (
 
@@ -47,7 +30,7 @@ PendingTx.prototype.render = function () {
         }
       `),
 
-      insufficientBalance ?
+      state.insufficientBalance ?
         h('span.error', {
           style: {
             marginLeft: 50,
@@ -65,14 +48,14 @@ PendingTx.prototype.render = function () {
         },
       }, [
 
-        insufficientBalance ?
+        state.insufficientBalance ?
           h('button.btn-green', {
-            onClick: state.sendTransaction,
+            onClick: state.buyEth,
           }, 'Buy Ether')
         : null,
 
         h('button.confirm', {
-          disabled: insufficientBalance,
+          disabled: state.insufficientBalance,
           onClick: state.sendTransaction,
         }, 'Accept'),
 

ui/app/conf-tx.js

@@ -41,6 +41,7 @@ ConfirmTxScreen.prototype.render = function () {
   var unconfTxList = txHelper(unconfTxs, unconfMsgs, network)
   var index = state.index !== undefined ? state.index : 0
   var txData = unconfTxList[index] || unconfTxList[0] || {}
+  var txParams = txData.txParams || {}
   var isNotification = isPopupOrNotification() === 'notification'
 
   return (
@@ -92,7 +93,9 @@ ConfirmTxScreen.prototype.render = function () {
           selectedAddress: state.selectedAddress,
           accounts: state.accounts,
           identities: state.identities,
+          insufficientBalance: this.checkBalnceAgainstTx(txData),
           // Actions
+          buyEth: this.buyEth.bind(this, txParams.from || state.selectedAddress),
           sendTransaction: this.sendTransaction.bind(this, txData),
           cancelTransaction: this.cancelTransaction.bind(this, txData),
           signMessage: this.signMessage.bind(this, txData),
@@ -113,8 +116,7 @@ function currentTxView (opts) {
     return h(PendingMsg, opts)
   }
 }
-
-ConfirmTxScreen.prototype.sendTransaction = function (txData, event) {
+ConfirmTxScreen.prototype.checkBalnceAgainstTx = function (txData) {
   var state = this.props
 
   var txParams = txData.txParams || {}
@@ -129,12 +131,17 @@ ConfirmTxScreen.prototype.sendTransaction = function (txData, event) {
   var maxCost = txValue.add(txFee)
 
   var balanceBn = new BN(ethUtil.stripHexPrefix(balance), 16)
+  return maxCost.gt(balanceBn)
+}
+
+ConfirmTxScreen.prototype.buyEth = function (address, event) {
   event.stopPropagation()
-  if (maxCost.gt(balanceBn)) {
-    this.props.dispatch(actions.buyEthView(address))
-  } else {
-    this.props.dispatch(actions.sendTx(txData))
-  }
+  this.props.dispatch(actions.buyEthView(address))
+}
+
+ConfirmTxScreen.prototype.sendTransaction = function (txData, event) {
+  event.stopPropagation()
+  this.props.dispatch(actions.sendTx(txData))
 }
 
 ConfirmTxScreen.prototype.cancelTransaction = function (txData, event) {