diff --git a/ui/app/components/pending-tx.js b/ui/app/components/pending-tx.js index 96f968929..9eefe1b22 100644 --- a/ui/app/components/pending-tx.js +++ b/ui/app/components/pending-tx.js @@ -2,6 +2,8 @@ const Component = require('react').Component const h = require('react-hyperscript') const inherits = require('util').inherits const PendingTxDetails = require('./pending-tx-details') +const BN = require('ethereumjs-util').BN +const ethUtil = require('ethereumjs-util') module.exports = PendingTx @@ -11,8 +13,12 @@ function PendingTx () { } PendingTx.prototype.render = function () { - var state = this.props - var txData = state.txData + var props = this.props + var state = this.state || {} + var txData = props.txData + var txParams = txData.txParams + var gasValue = state.gas || txParams.gas + var decimalGas = decimalize(gasValue) return ( @@ -21,7 +27,7 @@ PendingTx.prototype.render = function () { }, [ // tx info - h(PendingTxDetails, state), + h(PendingTxDetails, props), h('style', ` .conf-buttons button { @@ -39,7 +45,7 @@ PendingTx.prototype.render = function () { }, 'Transaction Error. Exception thrown in contract code.') : null, - state.insufficientBalance ? + props.insufficientBalance ? h('span.error', { style: { marginLeft: 50, @@ -57,21 +63,39 @@ PendingTx.prototype.render = function () { }, }, [ - state.insufficientBalance ? + props.insufficientBalance ? h('button.btn-green', { - onClick: state.buyEth, + onClick: props.buyEth, }, 'Buy Ether') : null, h('button.confirm', { - disabled: state.insufficientBalance, - onClick: state.sendTransaction, + disabled: props.insufficientBalance, + onClick: props.sendTransaction, }, 'Accept'), h('button.cancel.btn-red', { - onClick: state.cancelTransaction, + onClick: props.cancelTransaction, }, 'Reject'), ]), + h('input', { + value: decimalGas, + onChange: (event) => { + const hexString = hexify(event.target.value) + this.setState({ gas: hexString }) + } + }), ]) ) } + +function decimalize (input) { + const strippedInput = ethUtil.stripHexPrefix(input) + const inputBN = new BN(strippedInput, 'hex') + return inputBN.toString(10) +} + +function hexify (decimalString) { + const hexBN = new BN(decimalString, 10) + return '0x' + hexBN.toString('hex') +} diff --git a/ui/app/conf-tx.js b/ui/app/conf-tx.js index a27219576..eed1f59ad 100644 --- a/ui/app/conf-tx.js +++ b/ui/app/conf-tx.js @@ -35,15 +35,16 @@ function ConfirmTxScreen () { } ConfirmTxScreen.prototype.render = function () { - var state = this.props + var props = this.props + var state = this.state || {} - var network = state.network - var provider = state.provider - var unapprovedTxs = state.unapprovedTxs - var unapprovedMsgs = state.unapprovedMsgs + var network = props.network + var provider = props.provider + var unapprovedTxs = props.unapprovedTxs + var unapprovedMsgs = props.unapprovedMsgs var unconfTxList = txHelper(unapprovedTxs, unapprovedMsgs, network) - var index = state.index !== undefined && unconfTxList[index] ? state.index : 0 + var index = props.index !== undefined && unconfTxList[index] ? props.index : 0 var txData = unconfTxList[index] || {} var txParams = txData.params || {} var isNotification = isPopupOrNotification() === 'notification' @@ -73,20 +74,20 @@ ConfirmTxScreen.prototype.render = function () { }, [ h('i.fa.fa-arrow-left.fa-lg.cursor-pointer', { style: { - display: state.index === 0 ? 'none' : 'inline-block', + display: props.index === 0 ? 'none' : 'inline-block', }, - onClick: () => state.dispatch(actions.previousTx()), + onClick: () => props.dispatch(actions.previousTx()), }), - ` ${state.index + 1} of ${unconfTxList.length} `, + ` ${props.index + 1} of ${unconfTxList.length} `, h('i.fa.fa-arrow-right.fa-lg.cursor-pointer', { style: { - display: state.index + 1 === unconfTxList.length ? 'none' : 'inline-block', + display: props.index + 1 === unconfTxList.length ? 'none' : 'inline-block', }, - onClick: () => state.dispatch(actions.nextTx()), + onClick: () => props.dispatch(actions.nextTx()), }), ]), - warningIfExists(state.warning), + warningIfExists(props.warning), h(ReactCSSTransitionGroup, { className: 'css-transition-group', @@ -99,12 +100,12 @@ ConfirmTxScreen.prototype.render = function () { // Properties txData: txData, key: txData.id, - selectedAddress: state.selectedAddress, - accounts: state.accounts, - identities: state.identities, + selectedAddress: props.selectedAddress, + accounts: props.accounts, + identities: props.identities, insufficientBalance: this.checkBalanceAgainstTx(txData), // Actions - buyEth: this.buyEth.bind(this, txParams.from || state.selectedAddress), + buyEth: this.buyEth.bind(this, txParams.from || props.selectedAddress), sendTransaction: this.sendTransaction.bind(this, txData), cancelTransaction: this.cancelTransaction.bind(this, txData), signMessage: this.signMessage.bind(this, txData), @@ -128,11 +129,12 @@ function currentTxView (opts) { return h(PendingMsg, opts) } } + ConfirmTxScreen.prototype.checkBalanceAgainstTx = function (txData) { if (!txData.txParams) return false - var state = this.props - var address = txData.txParams.from || state.selectedAddress - var account = state.accounts[address] + var props = this.props + var address = txData.txParams.from || props.selectedAddress + var account = props.accounts[address] var balance = account ? account.balance : '0x0' var maxCost = new BN(txData.maxCost, 16)