diff options
Diffstat (limited to 'ui')
| -rw-r--r-- | ui/app/components/hex-as-decimal-input.js | 49 | ||||
| -rw-r--r-- | ui/app/components/pending-tx.js | 40 | ||||
| -rw-r--r-- | ui/app/conf-tx.js | 39 |
3 files changed, 100 insertions, 28 deletions
diff --git a/ui/app/components/hex-as-decimal-input.js b/ui/app/components/hex-as-decimal-input.js new file mode 100644 index 000000000..4d3105b8d --- /dev/null +++ b/ui/app/components/hex-as-decimal-input.js @@ -0,0 +1,49 @@ +const Component = require('react').Component +const h = require('react-hyperscript') +const inherits = require('util').inherits +const ethUtil = require('ethereumjs-util') +const BN = ethUtil.BN + +module.exports = HexAsDecimalInput + +inherits(HexAsDecimalInput, Component) +function HexAsDecimalInput () { + Component.call(this) +} + +/* Hex as Decimal Input + * + * A component for allowing easy, decimal editing + * of a passed in hex string value. + * + * On change, calls back its `onChange` function parameter + * and passes it an updated hex string. + */ + +HexAsDecimalInput.prototype.render = function () { + const props = this.props + const { value, onChange } = props + const decimalValue = decimalize(value) + + return ( + h('input', { + value: decimalValue, + onChange: (event) => { + const hexString = hexify(event.target.value) + onChange(hexString) + }, + }) + ) +} + +function hexify (decimalString) { + const hexBN = new BN(decimalString, 10) + return '0x' + hexBN.toString('hex') +} + +function decimalize (input) { + const strippedInput = ethUtil.stripHexPrefix(input) + const inputBN = new BN(strippedInput, 'hex') + return inputBN.toString(10) +} + diff --git a/ui/app/components/pending-tx.js b/ui/app/components/pending-tx.js index 96f968929..761c75be3 100644 --- a/ui/app/components/pending-tx.js +++ b/ui/app/components/pending-tx.js @@ -2,6 +2,7 @@ const Component = require('react').Component const h = require('react-hyperscript') const inherits = require('util').inherits const PendingTxDetails = require('./pending-tx-details') +const HexInput = require('./hex-as-decimal-input') module.exports = PendingTx @@ -11,8 +12,13 @@ function PendingTx () { } PendingTx.prototype.render = function () { - var state = this.props - var txData = state.txData + const props = this.props + const state = this.state || {} + const txData = props.txData + const txParams = txData.txParams + + const gas = state.gas || txParams.gas + const gasPrice = state.gasPrice || txParams.gasPrice 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,37 @@ 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(HexInput, { + value: gas, + onChange: (newHex) => { + this.setState({ gas: newHex }) + }, + }), + + h(HexInput, { + value: gasPrice, + onChange: (newHex) => { + this.setState({ gasPrice: newHex }) + }, + }), + ]) ) } + diff --git a/ui/app/conf-tx.js b/ui/app/conf-tx.js index 646dbb602..0bf308990 100644 --- a/ui/app/conf-tx.js +++ b/ui/app/conf-tx.js @@ -35,15 +35,15 @@ function ConfirmTxScreen () { } ConfirmTxScreen.prototype.render = function () { - var state = this.props + var props = this.props - 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' @@ -75,20 +75,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', @@ -101,12 +101,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), @@ -133,11 +133,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) |