From ef0b535d94d97827b4bfc471e4d950d90d637fa3 Mon Sep 17 00:00:00 2001 From: Frankie Date: Thu, 15 Sep 2016 10:24:05 -0700 Subject: [PATCH] Drop the buy button in the confTx view if account does not have enough eth --- ui/app/account-detail.js | 3 +- ui/app/actions.js | 3 +- ui/app/components/buy-button-subview.js | 11 +++++++- ui/app/components/pending-tx-details.js | 4 +-- ui/app/components/pending-tx.js | 37 +++++++++++++++++++++---- ui/app/conf-tx.js | 22 ++++++++++++++- ui/app/reducers/app.js | 4 +-- 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',