From 9f1f0bff1ea3267702a2ab75af293e6265e255e4 Mon Sep 17 00:00:00 2001 From: Dan Finlay Date: Wed, 22 Mar 2017 10:35:02 -0700 Subject: [PATCH 01/17] Some progress --- ui/app/components/hex-as-decimal-input.js | 5 +++-- ui/app/components/pending-tx-details.js | 18 +++++++++++++----- 2 files changed, 16 insertions(+), 7 deletions(-) diff --git a/ui/app/components/hex-as-decimal-input.js b/ui/app/components/hex-as-decimal-input.js index c89ed0416..b2f1917f2 100644 --- a/ui/app/components/hex-as-decimal-input.js +++ b/ui/app/components/hex-as-decimal-input.js @@ -23,7 +23,7 @@ function HexAsDecimalInput () { HexAsDecimalInput.prototype.render = function () { const props = this.props - const { value, onChange } = props + const { value, onChange, min } = props const toEth = props.toEth const suffix = props.suffix const decimalValue = decimalize(value, toEth) @@ -38,8 +38,9 @@ HexAsDecimalInput.prototype.render = function () { textRendering: 'geometricPrecision', }, }, [ - h('input.ether-balance.ether-balance-amount', { + h('input.hex-input', { type: 'number', + min, style: extend({ display: 'block', textAlign: 'right', diff --git a/ui/app/components/pending-tx-details.js b/ui/app/components/pending-tx-details.js index e92ce575f..822e5d84b 100644 --- a/ui/app/components/pending-tx-details.js +++ b/ui/app/components/pending-tx-details.js @@ -12,6 +12,10 @@ const addressSummary = util.addressSummary const nameForAddress = require('../../lib/contract-namer') const HexInput = require('./hex-as-decimal-input') +const DEFAULT_GAS_PRICE = '0x4a817c800' +const DEFAULT_GAS_PRICE_BN = new BN(DEFAULT_GAS_PRICE.substr(2), 16) +const FOUR_BN = new BN('4', 10) + module.exports = PendingTxDetails inherits(PendingTxDetails, Component) @@ -78,7 +82,6 @@ PTXP.render = function () { labelColor: '#F7861C', }), ]), - ]), forwardCarrat(), @@ -122,6 +125,7 @@ PTXP.render = function () { }, [ h(HexInput, { value: gas, + min: 21000, // The hard lower limit for gas. suffix: 'UNITS', style: { position: 'relative', @@ -143,6 +147,7 @@ PTXP.render = function () { h(HexInput, { value: gasPrice, suffix: 'WEI', + min: DEFAULT_GAS_PRICE_BN.div(FOUR_BN).toString(10), style: { position: 'relative', top: '5px', @@ -176,7 +181,8 @@ PTXP.render = function () { }, }, [ h(EthBalance, { - value: maxCost.toString(16), + value: '0x' + txFee.add(new BN(txParams.value, 16)).toString(16), + maxCost.toString(16), inline: true, labelColor: 'black', fontSize: '16px', @@ -267,7 +273,7 @@ PTXP.calculateGas = function () { var txParams = txMeta.txParams var gasCost = new BN(ethUtil.stripHexPrefix(txParams.gas || txMeta.estimatedGas), 16) - var gasPrice = new BN(ethUtil.stripHexPrefix(txParams.gasPrice || '0x4a817c800'), 16) + var gasPrice = new BN(ethUtil.stripHexPrefix(txParams.gasPrice || DEFAULT_GAS_PRICE), 16) var txFee = gasCost.mul(gasPrice) var txValue = new BN(ethUtil.stripHexPrefix(txParams.value || '0x0'), 16) var maxCost = txValue.add(txFee) @@ -280,10 +286,12 @@ PTXP.calculateGas = function () { txMeta.maxCost = maxCostHex txMeta.txParams.gasPrice = gasPriceHex - this.setState({ + const newState = { txFee: '0x' + txFee.toString('hex'), maxCost: '0x' + maxCost.toString('hex'), - }) + } + log.info(`tx form updating local state with ${JSON.stringify(newState)}`) + this.setState(newState) if (this.props.onTxChange) { this.props.onTxChange(txMeta) From 77907038ffe0edbe5e3472f98fd10d73b76464b8 Mon Sep 17 00:00:00 2001 From: Dan Finlay Date: Wed, 22 Mar 2017 15:14:33 -0700 Subject: [PATCH 02/17] Got basic validations working --- ui/app/components/hex-as-decimal-input.js | 114 ++++++++++++++----- ui/app/components/pending-tx-details.js | 26 +++-- ui/app/components/pending-tx.js | 133 +++++++++++++--------- ui/app/conf-tx.js | 22 ++-- ui/app/css/index.css | 12 +- 5 files changed, 199 insertions(+), 108 deletions(-) diff --git a/ui/app/components/hex-as-decimal-input.js b/ui/app/components/hex-as-decimal-input.js index b2f1917f2..bbd86b254 100644 --- a/ui/app/components/hex-as-decimal-input.js +++ b/ui/app/components/hex-as-decimal-input.js @@ -9,6 +9,7 @@ module.exports = HexAsDecimalInput inherits(HexAsDecimalInput, Component) function HexAsDecimalInput () { + this.state = { invalid: null } Component.call(this) } @@ -23,50 +24,101 @@ function HexAsDecimalInput () { HexAsDecimalInput.prototype.render = function () { const props = this.props - const { value, onChange, min } = props + const state = this.state + + const { value, onChange, min, max } = props + const toEth = props.toEth const suffix = props.suffix const decimalValue = decimalize(value, toEth) const style = props.style return ( - h('.flex-row', { - style: { - alignItems: 'flex-end', - lineHeight: '13px', - fontFamily: 'Montserrat Light', - textRendering: 'geometricPrecision', - }, - }, [ - h('input.hex-input', { - type: 'number', - min, - style: extend({ - display: 'block', - textAlign: 'right', - backgroundColor: 'transparent', - border: '1px solid #bdbdbd', - - }, style), - value: decimalValue, - onChange: (event) => { - const hexString = (event.target.value === '') ? '' : hexify(event.target.value) - onChange(hexString) + h('.flex-column', [ + h('.flex-row', { + style: { + alignItems: 'flex-end', + lineHeight: '13px', + fontFamily: 'Montserrat Light', + textRendering: 'geometricPrecision', }, - }), - h('div', { + }, [ + h('input.hex-input', { + type: 'number', + required: true, + min: min, + max: max, + style: extend({ + display: 'block', + textAlign: 'right', + backgroundColor: 'transparent', + border: '1px solid #bdbdbd', + + }, style), + value: parseInt(decimalValue), + onChange: (event) => { + const target = event.target + const valid = target.checkValidity() + if (valid) { + this.setState({ invalid: null }) + } + const hexString = (event.target.value === '') ? '' : hexify(event.target.value) + onChange(hexString) + }, + onInvalid: (event) => { + const msg = this.constructWarning() + if (msg === state.invalid) { + return + } + this.setState({ invalid: msg }) + event.preventDefault() + }, + }), + h('div', { + style: { + color: ' #AEAEAE', + fontSize: '12px', + marginLeft: '5px', + marginRight: '6px', + width: '20px', + }, + }, suffix), + ]), + + state.invalid ? h('span.error', { style: { - color: ' #AEAEAE', - fontSize: '12px', - marginLeft: '5px', - marginRight: '6px', - width: '20px', + position: 'absolute', + right: '0px', + textAlign: 'right', + transform: 'translateY(26px)', + padding: '3px', + background: 'rgba(255,255,255,0.85)', + zIndex: '1', + textTransform: 'capitalize', + border: '2px solid #E20202', }, - }, suffix), + }, state.invalid) : null, ]) ) } +HexAsDecimalInput.prototype.constructWarning = function () { + const { name, min, max } = this.props + let message = name ? name + ' ' : '' + + if (min && max) { + message += `must be greater than or equal to ${min} and less than or equal to ${max}.` + } else if (min) { + message += `must be greater than or equal to ${min}.` + } else if (max) { + message += `must be less than or equal to ${max}.` + } else { + message += 'Invalid input.' + } + + return message +} + function hexify (decimalString) { const hexBN = new BN(decimalString, 10) return '0x' + hexBN.toString('hex') diff --git a/ui/app/components/pending-tx-details.js b/ui/app/components/pending-tx-details.js index 822e5d84b..375a50f22 100644 --- a/ui/app/components/pending-tx-details.js +++ b/ui/app/components/pending-tx-details.js @@ -12,15 +12,17 @@ const addressSummary = util.addressSummary const nameForAddress = require('../../lib/contract-namer') const HexInput = require('./hex-as-decimal-input') -const DEFAULT_GAS_PRICE = '0x4a817c800' -const DEFAULT_GAS_PRICE_BN = new BN(DEFAULT_GAS_PRICE.substr(2), 16) -const FOUR_BN = new BN('4', 10) +const DEFAULT_GAS_PRICE_BN = new BN(20000000000, '10') +const DEFAULT_GAS_PRICE = DEFAULT_GAS_PRICE_BN.toString(16) + +const MIN_GAS_PRICE_BN = new BN(20000000) module.exports = PendingTxDetails inherits(PendingTxDetails, Component) function PendingTxDetails () { Component.call(this) + this.state = { valid: true } } const PTXP = PendingTxDetails.prototype @@ -40,6 +42,7 @@ PTXP.render = function () { const gasPrice = (state.gasPrice === undefined) ? txData.gasPrice : state.gasPrice var txFee = state.txFee || txData.txFee || '' + var txFeeBn = new BN(txFee, 16) var maxCost = state.maxCost || txData.maxCost || '' var dataLength = txParams.data ? (txParams.data.length - 2) / 2 : 0 var imageify = props.imageifyIdenticons === undefined ? true : props.imageifyIdenticons @@ -124,6 +127,7 @@ PTXP.render = function () { h('.cell.value', { }, [ h(HexInput, { + name: 'Gas Limit', value: gas, min: 21000, // The hard lower limit for gas. suffix: 'UNITS', @@ -145,9 +149,10 @@ PTXP.render = function () { h('.cell.value', { }, [ h(HexInput, { + name: 'Gas Price', value: gasPrice, suffix: 'WEI', - min: DEFAULT_GAS_PRICE_BN.div(FOUR_BN).toString(10), + min: MIN_GAS_PRICE_BN.toString(10), style: { position: 'relative', top: '5px', @@ -163,7 +168,7 @@ PTXP.render = function () { // Max Transaction Fee (calculated) h('.cell.row', [ h('.cell.label', 'Max Transaction Fee'), - h(EthBalance, { value: txFee.toString(16) }), + h(EthBalance, { value: txFeeBn.toString(16) }), ]), h('.cell.row', { @@ -181,8 +186,7 @@ PTXP.render = function () { }, }, [ h(EthBalance, { - value: '0x' + txFee.add(new BN(txParams.value, 16)).toString(16), - maxCost.toString(16), + value: maxCost.toString(16), inline: true, labelColor: 'black', fontSize: '16px', @@ -267,6 +271,10 @@ PTXP.componentDidUpdate = function (prevProps, previousState) { } } +PTXP.isValid = function () { + return this.state.valid +} + PTXP.calculateGas = function () { const txMeta = this.gatherParams() log.debug(`pending-tx-details calculating gas for ${JSON.stringify(txMeta)}`) @@ -274,6 +282,10 @@ PTXP.calculateGas = function () { var txParams = txMeta.txParams var gasCost = new BN(ethUtil.stripHexPrefix(txParams.gas || txMeta.estimatedGas), 16) var gasPrice = new BN(ethUtil.stripHexPrefix(txParams.gasPrice || DEFAULT_GAS_PRICE), 16) + + const valid = !gasPrice.lt(MIN_GAS_PRICE_BN) + this.props.validChanged(valid) + var txFee = gasCost.mul(gasPrice) var txValue = new BN(ethUtil.stripHexPrefix(txParams.value || '0x0'), 16) var maxCost = txValue.add(txFee) diff --git a/ui/app/components/pending-tx.js b/ui/app/components/pending-tx.js index 2ab6f25a9..f6fb6f85e 100644 --- a/ui/app/components/pending-tx.js +++ b/ui/app/components/pending-tx.js @@ -17,11 +17,15 @@ function mapStateToProps (state) { inherits(PendingTx, Component) function PendingTx () { Component.call(this) + this.state = { valid: true } } PendingTx.prototype.render = function () { const props = this.props - const newProps = extend(props, {ref: 'details'}) + const newProps = extend(props, { + ref: 'details', + validChanged: this.validChanged.bind(this), + }) const txData = props.txData return ( @@ -30,70 +34,87 @@ PendingTx.prototype.render = function () { key: txData.id, }, [ - // tx info - h(PendingTxDetails, newProps), - - h('style', ` - .conf-buttons button { - margin-left: 10px; - text-transform: uppercase; - } - `), - - txData.simulationFails ? - h('.error', { - style: { - marginLeft: 50, - fontSize: '0.9em', - }, - }, 'Transaction Error. Exception thrown in contract code.') - : null, - - props.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: { - display: 'flex', - justifyContent: 'flex-end', - margin: '14px 25px', + h('form#pending-tx-form', { + onSubmit: (event) => { + event.preventDefault() + const form = document.querySelector('form#pending-tx-form') + const valid = form.checkValidity() + this.setState({ valid }) + + if (valid && this.refs.details.verifyGasParams()) { + props.sendTransaction(txData, event) + } else { + this.props.dispatch(actions.displayWarning('Invalid Gas Parameters')) + } }, }, [ + // tx info + h(PendingTxDetails, newProps), + + h('style', ` + .conf-buttons button { + margin-left: 10px; + text-transform: uppercase; + } + `), + + txData.simulationFails ? + h('.error', { + style: { + marginLeft: 50, + fontSize: '0.9em', + }, + }, 'Transaction Error. Exception thrown in contract code.') + : null, + props.insufficientBalance ? - h('button', { - onClick: props.buyEth, - }, 'Buy Ether') + h('span.error', { + style: { + marginLeft: 50, + fontSize: '0.9em', + }, + }, 'Insufficient balance for transaction') : null, - h('button', { - onClick: () => { - this.refs.details.resetGasFields() - }, - }, 'Reset'), - - h('button.confirm.btn-green', { - disabled: props.insufficientBalance, - onClick: (txData, event) => { - if (this.refs.details.verifyGasParams()) { - props.sendTransaction(txData, event) - } else { - this.props.dispatch(actions.displayWarning('Invalid Gas Parameters')) - } + // send + cancel + h('.flex-row.flex-space-around.conf-buttons', { + style: { + display: 'flex', + justifyContent: 'flex-end', + margin: '14px 25px', }, - }, 'Accept'), + }, [ + - h('button.cancel.btn-red', { - onClick: props.cancelTransaction, - }, 'Reject'), + props.insufficientBalance ? + h('button', { + onClick: props.buyEth, + }, 'Buy Ether') + : null, + + h('button', { + onClick: () => { + this.refs.details.resetGasFields() + }, + }, 'Reset'), + + h('input.confirm.btn-green', { + type: 'submit', + value: 'ACCEPT', + style: { marginLeft: '10px' }, + disabled: props.insufficientBalance || !this.state.valid, + }), + + h('button.cancel.btn-red', { + onClick: props.cancelTransaction, + }, 'Reject'), + ]), ]), ]) ) } + +PendingTx.prototype.validChanged = function (newValid) { + this.setState({ valid: newValid }) +} diff --git a/ui/app/conf-tx.js b/ui/app/conf-tx.js index 07985094c..ce7422f9c 100644 --- a/ui/app/conf-tx.js +++ b/ui/app/conf-tx.js @@ -158,7 +158,7 @@ ConfirmTxScreen.prototype.checkBalanceAgainstTx = function (txData) { } ConfirmTxScreen.prototype.buyEth = function (address, event) { - event.stopPropagation() + this.stopPropagation(event) this.props.dispatch(actions.buyEthView(address)) } @@ -172,14 +172,14 @@ ConfirmTxScreen.prototype.onTxChange = function (txData) { // Must default to any local state txData, // to allow manual override of gas calculations. ConfirmTxScreen.prototype.sendTransaction = function (txData, event) { - event.stopPropagation() + this.stopPropagation(event) const state = this.state || {} const txMeta = state.txData this.props.dispatch(actions.updateAndApproveTx(txMeta || txData)) } ConfirmTxScreen.prototype.cancelTransaction = function (txData, event) { - event.stopPropagation() + this.stopPropagation(event) this.props.dispatch(actions.cancelTx(txData)) } @@ -187,32 +187,38 @@ ConfirmTxScreen.prototype.signMessage = function (msgData, event) { log.info('conf-tx.js: signing message') var params = msgData.msgParams params.metamaskId = msgData.id - event.stopPropagation() + this.stopPropagation(event) this.props.dispatch(actions.signMsg(params)) } +ConfirmTxScreen.prototype.stopPropagation = function (event) { + if (event.stopPropagation) { + event.stopPropagation() + } +} + ConfirmTxScreen.prototype.signPersonalMessage = function (msgData, event) { log.info('conf-tx.js: signing personal message') var params = msgData.msgParams params.metamaskId = msgData.id - event.stopPropagation() + this.stopPropagation(event) this.props.dispatch(actions.signPersonalMsg(params)) } ConfirmTxScreen.prototype.cancelMessage = function (msgData, event) { log.info('canceling message') - event.stopPropagation() + this.stopPropagation(event) this.props.dispatch(actions.cancelMsg(msgData)) } ConfirmTxScreen.prototype.cancelPersonalMessage = function (msgData, event) { log.info('canceling personal message') - event.stopPropagation() + this.stopPropagation(event) this.props.dispatch(actions.cancelPersonalMsg(msgData)) } ConfirmTxScreen.prototype.goHome = function (event) { - event.stopPropagation() + this.stopPropagation(event) this.props.dispatch(actions.goHome()) } diff --git a/ui/app/css/index.css b/ui/app/css/index.css index 8c6ff29d3..7771ddd99 100644 --- a/ui/app/css/index.css +++ b/ui/app/css/index.css @@ -32,7 +32,7 @@ input:focus, textarea:focus { height: 500px; } -button { +button, input[type="submit"] { font-family: 'Montserrat Bold'; outline: none; cursor: pointer; @@ -46,17 +46,17 @@ button { box-shadow: 0px 3px 6px rgba(247, 134, 28, 0.36); } -button.btn-green { +.btn-green, input[type="submit"].btn-green { background: rgba(106, 195, 96, 1); box-shadow: 0px 3px 6px rgba(106, 195, 96, 0.36); } -button.btn-red { +.btn-red { background: rgba(254, 35, 17, 1); box-shadow: 0px 3px 6px rgba(254, 35, 17, 0.36); } -button[disabled] { +button[disabled], input[type="submit"][disabled] { cursor: not-allowed; background: rgba(197, 197, 197, 1); box-shadow: 0px 3px 6px rgba(197, 197, 197, 0.36); @@ -66,10 +66,10 @@ button.spaced { margin: 2px; } -button:not([disabled]):hover { +button:not([disabled]):hover, input[type="submit"]:not([disabled]):hover { transform: scale(1.1); } -button:not([disabled]):active { +button:not([disabled]):active, input[type="submit"]:not([disabled]):active { transform: scale(0.95); } From de0d9af066d57f98580d53359a53271bf8760515 Mon Sep 17 00:00:00 2001 From: Dan Finlay Date: Wed, 22 Mar 2017 15:30:49 -0700 Subject: [PATCH 03/17] Bump changelog --- CHANGELOG.md | 3 +++ 1 file changed, 3 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 6621d89f4..8ddfb85ce 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -8,6 +8,9 @@ - Can now change network to custom RPC URL from lock screen. - Removed support for old, lightwallet based vault. Users who have not opened app in over a month will need to recover with their seed phrase. This will allow Firefox support sooner. - Polish the private key UI. +- Enforce minimum values for gas price and gas limit. +- Fix bug where total gas was sometimes not live-updated. +- Fix bug where editing gas value could have some abrupt behaviors (#1233) ## 3.4.0 2017-3-8 From e7a3330b980b150d4b7eae9c628e4ad2b0a1af34 Mon Sep 17 00:00:00 2001 From: Dan Finlay Date: Thu, 23 Mar 2017 13:44:09 -0700 Subject: [PATCH 04/17] Combine pending-tx-details component into pending-tx-details These were only separated originally so we could make the notification-based TX approval work, which provided its own buttons. This two templates are logically highly coupled, and keeping them working while separate has been difficult at times, and has even required resorting to dubious practices, like using React's `refs` pattern. This combines them into one fairly large component, but I think it's ok, we can still break this up into components, just not the separation that it had previously. --- ui/app/components/pending-tx-details.js | 364 ------------------------ ui/app/components/pending-tx.js | 352 ++++++++++++++++++++++- 2 files changed, 346 insertions(+), 370 deletions(-) delete mode 100644 ui/app/components/pending-tx-details.js diff --git a/ui/app/components/pending-tx-details.js b/ui/app/components/pending-tx-details.js deleted file mode 100644 index 375a50f22..000000000 --- a/ui/app/components/pending-tx-details.js +++ /dev/null @@ -1,364 +0,0 @@ -const Component = require('react').Component -const h = require('react-hyperscript') -const inherits = require('util').inherits -const extend = require('xtend') -const ethUtil = require('ethereumjs-util') -const BN = ethUtil.BN - -const MiniAccountPanel = require('./mini-account-panel') -const EthBalance = require('./eth-balance') -const util = require('../util') -const addressSummary = util.addressSummary -const nameForAddress = require('../../lib/contract-namer') -const HexInput = require('./hex-as-decimal-input') - -const DEFAULT_GAS_PRICE_BN = new BN(20000000000, '10') -const DEFAULT_GAS_PRICE = DEFAULT_GAS_PRICE_BN.toString(16) - -const MIN_GAS_PRICE_BN = new BN(20000000) - -module.exports = PendingTxDetails - -inherits(PendingTxDetails, Component) -function PendingTxDetails () { - Component.call(this) - this.state = { valid: true } -} - -const PTXP = PendingTxDetails.prototype - -PTXP.render = function () { - var props = this.props - var state = this.state || {} - var txData = state.txMeta || props.txData - - var txParams = txData.txParams || {} - var address = txParams.from || props.selectedAddress - var identity = props.identities[address] || { address: address } - var account = props.accounts[address] - var balance = account ? account.balance : '0x0' - - const gas = (state.gas === undefined) ? txParams.gas : state.gas - const gasPrice = (state.gasPrice === undefined) ? txData.gasPrice : state.gasPrice - - var txFee = state.txFee || txData.txFee || '' - var txFeeBn = new BN(txFee, 16) - var maxCost = state.maxCost || txData.maxCost || '' - var dataLength = txParams.data ? (txParams.data.length - 2) / 2 : 0 - var imageify = props.imageifyIdenticons === undefined ? true : props.imageifyIdenticons - - log.debug(`rendering gas: ${gas}, gasPrice: ${gasPrice}, txFee: ${txFee}, maxCost: ${maxCost}`) - - return ( - h('div', [ - - h('.flex-row.flex-center', { - style: { - maxWidth: '100%', - }, - }, [ - - h(MiniAccountPanel, { - imageSeed: address, - imageifyIdenticons: imageify, - picOrder: 'right', - }, [ - h('span.font-small', { - style: { - fontFamily: 'Montserrat Bold, Montserrat, sans-serif', - }, - }, identity.name), - h('span.font-small', { - style: { - fontFamily: 'Montserrat Light, Montserrat, sans-serif', - }, - }, addressSummary(address, 6, 4, false)), - - h('span.font-small', { - style: { - fontFamily: 'Montserrat Light, Montserrat, sans-serif', - }, - }, [ - h(EthBalance, { - value: balance, - inline: true, - labelColor: '#F7861C', - }), - ]), - ]), - - forwardCarrat(), - - this.miniAccountPanelForRecipient(), - ]), - - h('style', ` - .table-box { - margin: 7px 0px 0px 0px; - width: 100%; - } - .table-box .row { - margin: 0px; - background: rgb(236,236,236); - display: flex; - justify-content: space-between; - font-family: Montserrat Light, sans-serif; - font-size: 13px; - padding: 5px 25px; - } - .table-box .row .value { - font-family: Montserrat Regular; - } - `), - - h('.table-box', [ - - // Ether Value - // Currently not customizable, but easily modified - // in the way that gas and gasLimit currently are. - h('.row', [ - h('.cell.label', 'Amount'), - h(EthBalance, { value: txParams.value }), - ]), - - // Gas Limit (customizable) - h('.cell.row', [ - h('.cell.label', 'Gas Limit'), - h('.cell.value', { - }, [ - h(HexInput, { - name: 'Gas Limit', - value: gas, - min: 21000, // The hard lower limit for gas. - suffix: 'UNITS', - style: { - position: 'relative', - top: '5px', - }, - onChange: (newHex) => { - log.info(`Gas limit changed to ${newHex}`) - this.setState({ gas: newHex }) - }, - }), - ]), - ]), - - // Gas Price (customizable) - h('.cell.row', [ - h('.cell.label', 'Gas Price'), - h('.cell.value', { - }, [ - h(HexInput, { - name: 'Gas Price', - value: gasPrice, - suffix: 'WEI', - min: MIN_GAS_PRICE_BN.toString(10), - style: { - position: 'relative', - top: '5px', - }, - onChange: (newHex) => { - log.info(`Gas price changed to: ${newHex}`) - this.setState({ gasPrice: newHex }) - }, - }), - ]), - ]), - - // Max Transaction Fee (calculated) - h('.cell.row', [ - h('.cell.label', 'Max Transaction Fee'), - h(EthBalance, { value: txFeeBn.toString(16) }), - ]), - - h('.cell.row', { - style: { - fontFamily: 'Montserrat Regular', - background: 'white', - padding: '10px 25px', - }, - }, [ - h('.cell.label', 'Max Total'), - h('.cell.value', { - style: { - display: 'flex', - alignItems: 'center', - }, - }, [ - h(EthBalance, { - value: maxCost.toString(16), - inline: true, - labelColor: 'black', - fontSize: '16px', - }), - ]), - ]), - - // Data size row: - h('.cell.row', { - style: { - background: '#f7f7f7', - paddingBottom: '0px', - }, - }, [ - h('.cell.label'), - h('.cell.value', { - style: { - fontFamily: 'Montserrat Light', - fontSize: '11px', - }, - }, `Data included: ${dataLength} bytes`), - ]), - ]), // End of Table - - ]) - ) -} - -PTXP.miniAccountPanelForRecipient = function () { - var props = this.props - var txData = props.txData - var txParams = txData.txParams || {} - var isContractDeploy = !('to' in txParams) - var imageify = props.imageifyIdenticons === undefined ? true : props.imageifyIdenticons - - // If it's not a contract deploy, send to the account - if (!isContractDeploy) { - return h(MiniAccountPanel, { - imageSeed: txParams.to, - imageifyIdenticons: imageify, - picOrder: 'left', - }, [ - h('span.font-small', { - style: { - fontFamily: 'Montserrat Bold, Montserrat, sans-serif', - }, - }, nameForAddress(txParams.to, props.identities)), - h('span.font-small', { - style: { - fontFamily: 'Montserrat Light, Montserrat, sans-serif', - }, - }, addressSummary(txParams.to, 6, 4, false)), - ]) - } else { - return h(MiniAccountPanel, { - imageifyIdenticons: imageify, - picOrder: 'left', - }, [ - - h('span.font-small', { - style: { - fontFamily: 'Montserrat Bold, Montserrat, sans-serif', - }, - }, 'New Contract'), - - ]) - } -} - -PTXP.componentDidUpdate = function (prevProps, previousState) { - log.debug(`pending-tx-details componentDidUpdate`) - const state = this.state || {} - const prevState = previousState || {} - const { gas, gasPrice } = state - - // Only if gas or gasPrice changed: - if (!prevState || - (gas !== prevState.gas || - gasPrice !== prevState.gasPrice)) { - log.debug(`recalculating gas since prev state change: ${JSON.stringify({ prevState, state })}`) - this.calculateGas() - } -} - -PTXP.isValid = function () { - return this.state.valid -} - -PTXP.calculateGas = function () { - const txMeta = this.gatherParams() - log.debug(`pending-tx-details calculating gas for ${JSON.stringify(txMeta)}`) - - var txParams = txMeta.txParams - var gasCost = new BN(ethUtil.stripHexPrefix(txParams.gas || txMeta.estimatedGas), 16) - var gasPrice = new BN(ethUtil.stripHexPrefix(txParams.gasPrice || DEFAULT_GAS_PRICE), 16) - - const valid = !gasPrice.lt(MIN_GAS_PRICE_BN) - this.props.validChanged(valid) - - var txFee = gasCost.mul(gasPrice) - var txValue = new BN(ethUtil.stripHexPrefix(txParams.value || '0x0'), 16) - var maxCost = txValue.add(txFee) - - const txFeeHex = '0x' + txFee.toString('hex') - const maxCostHex = '0x' + maxCost.toString('hex') - const gasPriceHex = '0x' + gasPrice.toString('hex') - - txMeta.txFee = txFeeHex - txMeta.maxCost = maxCostHex - txMeta.txParams.gasPrice = gasPriceHex - - const newState = { - txFee: '0x' + txFee.toString('hex'), - maxCost: '0x' + maxCost.toString('hex'), - } - log.info(`tx form updating local state with ${JSON.stringify(newState)}`) - this.setState(newState) - - if (this.props.onTxChange) { - this.props.onTxChange(txMeta) - } -} - -PTXP.resetGasFields = function () { - log.debug(`pending-tx-details#resetGasFields`) - const txData = this.props.txData - this.setState({ - gas: txData.txParams.gas, - gasPrice: txData.gasPrice, - }) -} - -// After a customizable state value has been updated, -PTXP.gatherParams = function () { - log.debug(`pending-tx-details#gatherParams`) - const props = this.props - const state = this.state || {} - const txData = state.txData || props.txData - const txParams = txData.txParams - const gas = state.gas || txParams.gas - const gasPrice = state.gasPrice || txParams.gasPrice - const resultTx = extend(txParams, { - gas, - gasPrice, - }) - const resultTxMeta = extend(txData, { - txParams: resultTx, - }) - log.debug(`UI has computed tx params ${JSON.stringify(resultTx)}`) - return resultTxMeta -} - -PTXP.verifyGasParams = function () { - // We call this in case the gas has not been modified at all - if (!this.state) { return true } - return this._notZeroOrEmptyString(this.state.gas) && this._notZeroOrEmptyString(this.state.gasPrice) -} - -PTXP._notZeroOrEmptyString = function (obj) { - return obj !== '' && obj !== '0x0' -} - -function forwardCarrat () { - return ( - - h('img', { - src: 'images/forward-carrat.svg', - style: { - padding: '5px 6px 0px 10px', - height: '37px', - }, - }) - - ) -} diff --git a/ui/app/components/pending-tx.js b/ui/app/components/pending-tx.js index f6fb6f85e..f550c1d35 100644 --- a/ui/app/components/pending-tx.js +++ b/ui/app/components/pending-tx.js @@ -2,10 +2,25 @@ const Component = require('react').Component const connect = require('react-redux').connect const h = require('react-hyperscript') const inherits = require('util').inherits -const PendingTxDetails = require('./pending-tx-details') const extend = require('xtend') const actions = require('../actions') +const ethUtil = require('ethereumjs-util') +const BN = ethUtil.BN + +const MiniAccountPanel = require('./mini-account-panel') +const EthBalance = require('./eth-balance') +const util = require('../util') +const addressSummary = util.addressSummary +const nameForAddress = require('../../lib/contract-namer') +const HexInput = require('./hex-as-decimal-input') + +const DEFAULT_GAS_PRICE_BN = new BN(20000000000, '10') +const DEFAULT_GAS_PRICE = DEFAULT_GAS_PRICE_BN.toString(16) + +const MIN_GAS_PRICE_BN = new BN(20000000) + + module.exports = connect(mapStateToProps)(PendingTx) function mapStateToProps (state) { @@ -22,12 +37,28 @@ function PendingTx () { PendingTx.prototype.render = function () { const props = this.props - const newProps = extend(props, { - ref: 'details', - validChanged: this.validChanged.bind(this), - }) const txData = props.txData + const state = this.state + + const txParams = txData.txParams || {} + const address = txParams.from || props.selectedAddress + const identity = props.identities[address] || { address: address } + const account = props.accounts[address] + const balance = account ? account.balance : '0x0' + + const gas = (state.gas === undefined) ? txParams.gas : state.gas + const gasPrice = (state.gasPrice === undefined) ? txData.gasPrice : state.gasPrice + + const txFee = state.txFee || txData.txFee || '' + const txFeeBn = new BN(txFee, 16) + const maxCost = state.maxCost || txData.maxCost || '' + const dataLength = txParams.data ? (txParams.data.length - 2) / 2 : 0 + const imageify = props.imageifyIdenticons === undefined ? true : props.imageifyIdenticons + + console.log('miniaccountpanelforrecipient?') + console.dir(this.miniAccountPanelForRecipient) + return ( h('div', { @@ -50,7 +81,168 @@ PendingTx.prototype.render = function () { }, [ // tx info - h(PendingTxDetails, newProps), + h('div', [ + + h('.flex-row.flex-center', { + style: { + maxWidth: '100%', + }, + }, [ + + h(MiniAccountPanel, { + imageSeed: address, + imageifyIdenticons: imageify, + picOrder: 'right', + }, [ + h('span.font-small', { + style: { + fontFamily: 'Montserrat Bold, Montserrat, sans-serif', + }, + }, identity.name), + h('span.font-small', { + style: { + fontFamily: 'Montserrat Light, Montserrat, sans-serif', + }, + }, addressSummary(address, 6, 4, false)), + + h('span.font-small', { + style: { + fontFamily: 'Montserrat Light, Montserrat, sans-serif', + }, + }, [ + h(EthBalance, { + value: balance, + inline: true, + labelColor: '#F7861C', + }), + ]), + ]), + + forwardCarrat(), + + this.miniAccountPanelForRecipient(), + ]), + + h('style', ` + .table-box { + margin: 7px 0px 0px 0px; + width: 100%; + } + .table-box .row { + margin: 0px; + background: rgb(236,236,236); + display: flex; + justify-content: space-between; + font-family: Montserrat Light, sans-serif; + font-size: 13px; + padding: 5px 25px; + } + .table-box .row .value { + font-family: Montserrat Regular; + } + `), + + h('.table-box', [ + + // Ether Value + // Currently not customizable, but easily modified + // in the way that gas and gasLimit currently are. + h('.row', [ + h('.cell.label', 'Amount'), + h(EthBalance, { value: txParams.value }), + ]), + + // Gas Limit (customizable) + h('.cell.row', [ + h('.cell.label', 'Gas Limit'), + h('.cell.value', { + }, [ + h(HexInput, { + name: 'Gas Limit', + value: gas, + min: 21000, // The hard lower limit for gas. + suffix: 'UNITS', + style: { + position: 'relative', + top: '5px', + }, + onChange: (newHex) => { + log.info(`Gas limit changed to ${newHex}`) + this.setState({ gas: newHex }) + }, + }), + ]), + ]), + + // Gas Price (customizable) + h('.cell.row', [ + h('.cell.label', 'Gas Price'), + h('.cell.value', { + }, [ + h(HexInput, { + name: 'Gas Price', + value: gasPrice, + suffix: 'WEI', + min: MIN_GAS_PRICE_BN.toString(10), + style: { + position: 'relative', + top: '5px', + }, + onChange: (newHex) => { + log.info(`Gas price changed to: ${newHex}`) + this.setState({ gasPrice: newHex }) + }, + }), + ]), + ]), + + // Max Transaction Fee (calculated) + h('.cell.row', [ + h('.cell.label', 'Max Transaction Fee'), + h(EthBalance, { value: txFeeBn.toString(16) }), + ]), + + h('.cell.row', { + style: { + fontFamily: 'Montserrat Regular', + background: 'white', + padding: '10px 25px', + }, + }, [ + h('.cell.label', 'Max Total'), + h('.cell.value', { + style: { + display: 'flex', + alignItems: 'center', + }, + }, [ + h(EthBalance, { + value: maxCost.toString(16), + inline: true, + labelColor: 'black', + fontSize: '16px', + }), + ]), + ]), + + // Data size row: + h('.cell.row', { + style: { + background: '#f7f7f7', + paddingBottom: '0px', + }, + }, [ + h('.cell.label'), + h('.cell.value', { + style: { + fontFamily: 'Montserrat Light', + fontSize: '11px', + }, + }, `Data included: ${dataLength} bytes`), + ]), + ]), // End of Table + + ]), h('style', ` .conf-buttons button { @@ -118,3 +310,151 @@ PendingTx.prototype.render = function () { PendingTx.prototype.validChanged = function (newValid) { this.setState({ valid: newValid }) } + +PendingTx.prototype.miniAccountPanelForRecipient = function () { + const props = this.props + const txData = props.txData + const txParams = txData.txParams || {} + const isContractDeploy = !('to' in txParams) + const imageify = props.imageifyIdenticons === undefined ? true : props.imageifyIdenticons + + // If it's not a contract deploy, send to the account + if (!isContractDeploy) { + return h(MiniAccountPanel, { + imageSeed: txParams.to, + imageifyIdenticons: imageify, + picOrder: 'left', + }, [ + h('span.font-small', { + style: { + fontFamily: 'Montserrat Bold, Montserrat, sans-serif', + }, + }, nameForAddress(txParams.to, props.identities)), + h('span.font-small', { + style: { + fontFamily: 'Montserrat Light, Montserrat, sans-serif', + }, + }, addressSummary(txParams.to, 6, 4, false)), + ]) + } else { + return h(MiniAccountPanel, { + imageifyIdenticons: imageify, + picOrder: 'left', + }, [ + + h('span.font-small', { + style: { + fontFamily: 'Montserrat Bold, Montserrat, sans-serif', + }, + }, 'New Contract'), + + ]) + } +} + +PendingTx.prototype.componentDidUpdate = function (prevProps, previousState) { + log.debug(`pending-tx-details componentDidUpdate`) + const state = this.state || {} + const prevState = previousState || {} + const { gas, gasPrice } = state + + // Only if gas or gasPrice changed: + if (!prevState || + (gas !== prevState.gas || + gasPrice !== prevState.gasPrice)) { + log.debug(`recalculating gas since prev state change: ${JSON.stringify({ prevState, state })}`) + this.calculateGas() + } +} + +PendingTx.prototype.isValid = function () { + return this.state.valid +} + +PendingTx.prototype.calculateGas = function () { + const txMeta = this.gatherParams() + log.debug(`pending-tx-details calculating gas for ${JSON.stringify(txMeta)}`) + + const txParams = txMeta.txParams + const gasCost = new BN(ethUtil.stripHexPrefix(txParams.gas || txMeta.estimatedGas), 16) + const gasPrice = new BN(ethUtil.stripHexPrefix(txParams.gasPrice || DEFAULT_GAS_PRICE), 16) + + const valid = !gasPrice.lt(MIN_GAS_PRICE_BN) + this.validChanged(valid) + + const txFee = gasCost.mul(gasPrice) + const txValue = new BN(ethUtil.stripHexPrefix(txParams.value || '0x0'), 16) + const maxCost = txValue.add(txFee) + + const txFeeHex = '0x' + txFee.toString('hex') + const maxCostHex = '0x' + maxCost.toString('hex') + const gasPriceHex = '0x' + gasPrice.toString('hex') + + txMeta.txFee = txFeeHex + txMeta.maxCost = maxCostHex + txMeta.txParams.gasPrice = gasPriceHex + + const newState = { + txFee: '0x' + txFee.toString('hex'), + maxCost: '0x' + maxCost.toString('hex'), + } + log.info(`tx form updating local state with ${JSON.stringify(newState)}`) + this.setState(newState) + + if (this.props.onTxChange) { + this.props.onTxChange(txMeta) + } +} + +PendingTx.prototype.resetGasFields = function () { + log.debug(`pending-tx-details#resetGasFields`) + const txData = this.props.txData + this.setState({ + gas: txData.txParams.gas, + gasPrice: txData.gasPrice, + }) +} + +// After a customizable state value has been updated, +PendingTx.prototype.gatherParams = function () { + log.debug(`pending-tx-details#gatherParams`) + const props = this.props + const state = this.state || {} + const txData = state.txData || props.txData + const txParams = txData.txParams + const gas = state.gas || txParams.gas + const gasPrice = state.gasPrice || txParams.gasPrice + const resultTx = extend(txParams, { + gas, + gasPrice, + }) + const resultTxMeta = extend(txData, { + txParams: resultTx, + }) + log.debug(`UI has computed tx params ${JSON.stringify(resultTx)}`) + return resultTxMeta +} + +PendingTx.prototype.verifyGasParams = function () { + // We call this in case the gas has not been modified at all + if (!this.state) { return true } + return this._notZeroOrEmptyString(this.state.gas) && this._notZeroOrEmptyString(this.state.gasPrice) +} + +PendingTx.prototype._notZeroOrEmptyString = function (obj) { + return obj !== '' && obj !== '0x0' +} + +function forwardCarrat () { + return ( + + h('img', { + src: 'images/forward-carrat.svg', + style: { + padding: '5px 6px 0px 10px', + height: '37px', + }, + }) + + ) +} From 55e8a717e6a1187381c10d7ad2f9da57888e4fd8 Mon Sep 17 00:00:00 2001 From: Dan Finlay Date: Thu, 23 Mar 2017 14:55:59 -0700 Subject: [PATCH 05/17] Fix some broken refs --- ui/app/components/pending-tx.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/ui/app/components/pending-tx.js b/ui/app/components/pending-tx.js index f550c1d35..75004b208 100644 --- a/ui/app/components/pending-tx.js +++ b/ui/app/components/pending-tx.js @@ -72,7 +72,7 @@ PendingTx.prototype.render = function () { const valid = form.checkValidity() this.setState({ valid }) - if (valid && this.refs.details.verifyGasParams()) { + if (valid && this.verifyGasParams()) { props.sendTransaction(txData, event) } else { this.props.dispatch(actions.displayWarning('Invalid Gas Parameters')) @@ -287,7 +287,7 @@ PendingTx.prototype.render = function () { h('button', { onClick: () => { - this.refs.details.resetGasFields() + this.resetGasFields() }, }, 'Reset'), From bda821f14478b67b5fee6e862fc2a5458594e672 Mon Sep 17 00:00:00 2001 From: Dan Finlay Date: Thu, 23 Mar 2017 14:57:35 -0700 Subject: [PATCH 06/17] Override browser default validation message --- ui/app/components/hex-as-decimal-input.js | 1 + 1 file changed, 1 insertion(+) diff --git a/ui/app/components/hex-as-decimal-input.js b/ui/app/components/hex-as-decimal-input.js index bbd86b254..e39805787 100644 --- a/ui/app/components/hex-as-decimal-input.js +++ b/ui/app/components/hex-as-decimal-input.js @@ -72,6 +72,7 @@ HexAsDecimalInput.prototype.render = function () { } this.setState({ invalid: msg }) event.preventDefault() + return false }, }), h('div', { From 612bace17d8fb84fd755a30f03fc9075b4d967f1 Mon Sep 17 00:00:00 2001 From: Dan Finlay Date: Thu, 23 Mar 2017 15:01:05 -0700 Subject: [PATCH 07/17] Prevent default for reset and reject buttons --- ui/app/components/pending-tx.js | 3 ++- ui/app/conf-tx.js | 1 + 2 files changed, 3 insertions(+), 1 deletion(-) diff --git a/ui/app/components/pending-tx.js b/ui/app/components/pending-tx.js index 75004b208..6753fc098 100644 --- a/ui/app/components/pending-tx.js +++ b/ui/app/components/pending-tx.js @@ -286,8 +286,9 @@ PendingTx.prototype.render = function () { : null, h('button', { - onClick: () => { + onClick: (event) => { this.resetGasFields() + event.preventDefault() }, }, 'Reset'), diff --git a/ui/app/conf-tx.js b/ui/app/conf-tx.js index ce7422f9c..83e2c7482 100644 --- a/ui/app/conf-tx.js +++ b/ui/app/conf-tx.js @@ -180,6 +180,7 @@ ConfirmTxScreen.prototype.sendTransaction = function (txData, event) { ConfirmTxScreen.prototype.cancelTransaction = function (txData, event) { this.stopPropagation(event) + event.preventDefault() this.props.dispatch(actions.cancelTx(txData)) } From 31c1839ed76c56c3e988d1f77957ae71f433836c Mon Sep 17 00:00:00 2001 From: Dan Finlay Date: Thu, 23 Mar 2017 15:10:57 -0700 Subject: [PATCH 08/17] Fix initial gas price estimate --- ui/app/components/pending-tx.js | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/ui/app/components/pending-tx.js b/ui/app/components/pending-tx.js index 6753fc098..c0786d83e 100644 --- a/ui/app/components/pending-tx.js +++ b/ui/app/components/pending-tx.js @@ -15,9 +15,6 @@ const addressSummary = util.addressSummary const nameForAddress = require('../../lib/contract-namer') const HexInput = require('./hex-as-decimal-input') -const DEFAULT_GAS_PRICE_BN = new BN(20000000000, '10') -const DEFAULT_GAS_PRICE = DEFAULT_GAS_PRICE_BN.toString(16) - const MIN_GAS_PRICE_BN = new BN(20000000) @@ -373,12 +370,16 @@ PendingTx.prototype.isValid = function () { } PendingTx.prototype.calculateGas = function () { + const state = this.state + const props = this.props + const txData = props.txData + const txMeta = this.gatherParams() log.debug(`pending-tx-details calculating gas for ${JSON.stringify(txMeta)}`) const txParams = txMeta.txParams const gasCost = new BN(ethUtil.stripHexPrefix(txParams.gas || txMeta.estimatedGas), 16) - const gasPrice = new BN(ethUtil.stripHexPrefix(txParams.gasPrice || DEFAULT_GAS_PRICE), 16) + const gasPrice = (state.gasPrice === undefined) ? txData.gasPrice : state.gasPrice const valid = !gasPrice.lt(MIN_GAS_PRICE_BN) this.validChanged(valid) From 018b1d006f30f7022252c39849abaf8be6fffa45 Mon Sep 17 00:00:00 2001 From: Dan Finlay Date: Thu, 23 Mar 2017 15:14:18 -0700 Subject: [PATCH 09/17] Make reset button clear errors --- ui/app/components/pending-tx.js | 1 + 1 file changed, 1 insertion(+) diff --git a/ui/app/components/pending-tx.js b/ui/app/components/pending-tx.js index c0786d83e..b2195804e 100644 --- a/ui/app/components/pending-tx.js +++ b/ui/app/components/pending-tx.js @@ -414,6 +414,7 @@ PendingTx.prototype.resetGasFields = function () { this.setState({ gas: txData.txParams.gas, gasPrice: txData.gasPrice, + valid: true, }) } From 3400ed0955b7f31ddb0be182736fc1e7ae20d4da Mon Sep 17 00:00:00 2001 From: Dan Finlay Date: Thu, 23 Mar 2017 16:02:40 -0700 Subject: [PATCH 10/17] Fix a couple things Sorry apparently the gas fixes weren't in the last commit, but are in this one. As reported in previous commit, fixes a bug where initial estimate is not derived from the network. Also fixes a bug where clicking "reset" does not clear our custom validation warnings. --- ui/app/components/hex-as-decimal-input.js | 29 +++++++++++++++++++---- ui/app/components/pending-tx.js | 28 ++++++++++++++-------- 2 files changed, 42 insertions(+), 15 deletions(-) diff --git a/ui/app/components/hex-as-decimal-input.js b/ui/app/components/hex-as-decimal-input.js index e39805787..96a11b84f 100644 --- a/ui/app/components/hex-as-decimal-input.js +++ b/ui/app/components/hex-as-decimal-input.js @@ -56,12 +56,11 @@ HexAsDecimalInput.prototype.render = function () { }, style), value: parseInt(decimalValue), + onBlur: (event) => { + this.updateValidity(event) + }, onChange: (event) => { - const target = event.target - const valid = target.checkValidity() - if (valid) { - this.setState({ invalid: null }) - } + this.updateValidity(event) const hexString = (event.target.value === '') ? '' : hexify(event.target.value) onChange(hexString) }, @@ -103,6 +102,26 @@ HexAsDecimalInput.prototype.render = function () { ) } +HexAsDecimalInput.prototype.setValid = function (message) { + this.setState({ invalid: null }) +} + +HexAsDecimalInput.prototype.updateValidity = function (event) { + const target = event.target + const value = this.props.value + const newValue = target.value + + if (value === newValue) { + return + } + + const valid = target.checkValidity() + console.log('change triggered checking validity and found ' + valid) + if (valid) { + this.setState({ invalid: null }) + } +} + HexAsDecimalInput.prototype.constructWarning = function () { const { name, min, max } = this.props let message = name ? name + ' ' : '' diff --git a/ui/app/components/pending-tx.js b/ui/app/components/pending-tx.js index b2195804e..82d9b9fe7 100644 --- a/ui/app/components/pending-tx.js +++ b/ui/app/components/pending-tx.js @@ -53,8 +53,7 @@ PendingTx.prototype.render = function () { const dataLength = txParams.data ? (txParams.data.length - 2) / 2 : 0 const imageify = props.imageifyIdenticons === undefined ? true : props.imageifyIdenticons - console.log('miniaccountpanelforrecipient?') - console.dir(this.miniAccountPanelForRecipient) + this.inputs = [] return ( @@ -167,6 +166,7 @@ PendingTx.prototype.render = function () { log.info(`Gas limit changed to ${newHex}`) this.setState({ gas: newHex }) }, + ref: (hexInput) => { this.inputs.push(hexInput) }, }), ]), ]), @@ -189,6 +189,7 @@ PendingTx.prototype.render = function () { log.info(`Gas price changed to: ${newHex}`) this.setState({ gasPrice: newHex }) }, + ref: (hexInput) => { this.inputs.push(hexInput) }, }), ]), ]), @@ -351,7 +352,7 @@ PendingTx.prototype.miniAccountPanelForRecipient = function () { } PendingTx.prototype.componentDidUpdate = function (prevProps, previousState) { - log.debug(`pending-tx-details componentDidUpdate`) + log.debug(`pending-tx componentDidUpdate`) const state = this.state || {} const prevState = previousState || {} const { gas, gasPrice } = state @@ -375,22 +376,22 @@ PendingTx.prototype.calculateGas = function () { const txData = props.txData const txMeta = this.gatherParams() - log.debug(`pending-tx-details calculating gas for ${JSON.stringify(txMeta)}`) + log.debug(`pending-tx calculating gas for ${JSON.stringify(txMeta)}`) const txParams = txMeta.txParams - const gasCost = new BN(ethUtil.stripHexPrefix(txParams.gas || txMeta.estimatedGas), 16) - const gasPrice = (state.gasPrice === undefined) ? txData.gasPrice : state.gasPrice + const gasLimit = new BN(ethUtil.stripHexPrefix(txParams.gas || txMeta.estimatedGas), 16) + const gasPriceHex = state.gasPrice || txData.gasPrice + const gasPrice = new BN(ethUtil.stripHexPrefix(gasPriceHex), 16) const valid = !gasPrice.lt(MIN_GAS_PRICE_BN) this.validChanged(valid) - const txFee = gasCost.mul(gasPrice) + const txFee = gasLimit.mul(gasPrice) const txValue = new BN(ethUtil.stripHexPrefix(txParams.value || '0x0'), 16) const maxCost = txValue.add(txFee) const txFeeHex = '0x' + txFee.toString('hex') const maxCostHex = '0x' + maxCost.toString('hex') - const gasPriceHex = '0x' + gasPrice.toString('hex') txMeta.txFee = txFeeHex txMeta.maxCost = maxCostHex @@ -409,8 +410,15 @@ PendingTx.prototype.calculateGas = function () { } PendingTx.prototype.resetGasFields = function () { - log.debug(`pending-tx-details#resetGasFields`) + log.debug(`pending-tx resetGasFields`) const txData = this.props.txData + + this.inputs.forEach((hexInput) => { + if (hexInput) { + hexInput.setValid() + } + }) + this.setState({ gas: txData.txParams.gas, gasPrice: txData.gasPrice, @@ -420,7 +428,7 @@ PendingTx.prototype.resetGasFields = function () { // After a customizable state value has been updated, PendingTx.prototype.gatherParams = function () { - log.debug(`pending-tx-details#gatherParams`) + log.debug(`pending-tx gatherParams`) const props = this.props const state = this.state || {} const txData = state.txData || props.txData From 9bea31a402d0b343bae6a9ef055efa2b83be9071 Mon Sep 17 00:00:00 2001 From: Dan Finlay Date: Thu, 23 Mar 2017 16:36:33 -0700 Subject: [PATCH 11/17] Fix initial tx fee estimation --- ui/app/components/hex-as-decimal-input.js | 1 - ui/app/components/pending-tx.js | 8 +++++--- 2 files changed, 5 insertions(+), 4 deletions(-) diff --git a/ui/app/components/hex-as-decimal-input.js b/ui/app/components/hex-as-decimal-input.js index 96a11b84f..e37aaa8c3 100644 --- a/ui/app/components/hex-as-decimal-input.js +++ b/ui/app/components/hex-as-decimal-input.js @@ -116,7 +116,6 @@ HexAsDecimalInput.prototype.updateValidity = function (event) { } const valid = target.checkValidity() - console.log('change triggered checking validity and found ' + valid) if (valid) { this.setState({ invalid: null }) } diff --git a/ui/app/components/pending-tx.js b/ui/app/components/pending-tx.js index 82d9b9fe7..9a3ef272d 100644 --- a/ui/app/components/pending-tx.js +++ b/ui/app/components/pending-tx.js @@ -44,11 +44,13 @@ PendingTx.prototype.render = function () { const account = props.accounts[address] const balance = account ? account.balance : '0x0' + const gas = (state.gas === undefined) ? txParams.gas : state.gas const gasPrice = (state.gasPrice === undefined) ? txData.gasPrice : state.gasPrice + const gasBn = new BN(gas, 16) + const gasPriceBn = new BN(gasPrice, 16) - const txFee = state.txFee || txData.txFee || '' - const txFeeBn = new BN(txFee, 16) + const txFeeBn = gasBn.mul(gasPriceBn) const maxCost = state.maxCost || txData.maxCost || '' const dataLength = txParams.data ? (txParams.data.length - 2) / 2 : 0 const imageify = props.imageifyIdenticons === undefined ? true : props.imageifyIdenticons @@ -380,7 +382,7 @@ PendingTx.prototype.calculateGas = function () { const txParams = txMeta.txParams const gasLimit = new BN(ethUtil.stripHexPrefix(txParams.gas || txMeta.estimatedGas), 16) - const gasPriceHex = state.gasPrice || txData.gasPrice + const gasPriceHex = (state.gasPrice === undefined) ? txData.gasPrice : state.gasPrice const gasPrice = new BN(ethUtil.stripHexPrefix(gasPriceHex), 16) const valid = !gasPrice.lt(MIN_GAS_PRICE_BN) From 6a46e9ce0662413f6351756658b2bae8a895a33b Mon Sep 17 00:00:00 2001 From: Dan Finlay Date: Thu, 23 Mar 2017 17:00:59 -0700 Subject: [PATCH 12/17] Make gas calculations on render more consistent --- ui/app/components/pending-tx.js | 26 ++++++++++++++++---------- 1 file changed, 16 insertions(+), 10 deletions(-) diff --git a/ui/app/components/pending-tx.js b/ui/app/components/pending-tx.js index 9a3ef272d..2f9e9885b 100644 --- a/ui/app/components/pending-tx.js +++ b/ui/app/components/pending-tx.js @@ -21,40 +21,46 @@ const MIN_GAS_PRICE_BN = new BN(20000000) module.exports = connect(mapStateToProps)(PendingTx) function mapStateToProps (state) { - return { - - } + return {} } inherits(PendingTx, Component) function PendingTx () { Component.call(this) - this.state = { valid: true } + this.state = { + valid: true, + gas: null, + gasPrice: null, + txData: null, + } } PendingTx.prototype.render = function () { const props = this.props - const txData = props.txData - const state = this.state + const txData = state.txData || props.txData const txParams = txData.txParams || {} + const address = txParams.from || props.selectedAddress const identity = props.identities[address] || { address: address } const account = props.accounts[address] const balance = account ? account.balance : '0x0' - - const gas = (state.gas === undefined) ? txParams.gas : state.gas - const gasPrice = (state.gasPrice === undefined) ? txData.gasPrice : state.gasPrice + const gas = state.gas || txParams.gas + const gasPrice = state.gasPrice || txData.gasPrice const gasBn = new BN(gas, 16) const gasPriceBn = new BN(gasPrice, 16) const txFeeBn = gasBn.mul(gasPriceBn) - const maxCost = state.maxCost || txData.maxCost || '' + const valueBn = new BN(ethUtil.stripHexPrefix(txParams.value), 16) + const maxCost = txFeeBn.add(valueBn) + const dataLength = txParams.data ? (txParams.data.length - 2) / 2 : 0 const imageify = props.imageifyIdenticons === undefined ? true : props.imageifyIdenticons + log.info(`rendering pending-tx form with gas limit ${gas.toString()}, gasPrice ${gasPrice.toString()}, `) + this.inputs = [] return ( From 0e74cf2cba206520dbb8d7cc7b2a989566317201 Mon Sep 17 00:00:00 2001 From: Dan Finlay Date: Fri, 24 Mar 2017 09:45:03 -0700 Subject: [PATCH 13/17] Disable accept button when gas limit is too low --- ui/app/components/pending-tx.js | 13 +++++-------- 1 file changed, 5 insertions(+), 8 deletions(-) diff --git a/ui/app/components/pending-tx.js b/ui/app/components/pending-tx.js index 2f9e9885b..cfccf2a89 100644 --- a/ui/app/components/pending-tx.js +++ b/ui/app/components/pending-tx.js @@ -16,7 +16,7 @@ const nameForAddress = require('../../lib/contract-namer') const HexInput = require('./hex-as-decimal-input') const MIN_GAS_PRICE_BN = new BN(20000000) - +const MIN_GAS_LIMIT_BN = new BN(21000) module.exports = connect(mapStateToProps)(PendingTx) @@ -164,7 +164,7 @@ PendingTx.prototype.render = function () { h(HexInput, { name: 'Gas Limit', value: gas, - min: 21000, // The hard lower limit for gas. + min: MIN_GAS_LIMIT_BN.toString(10), // The hard lower limit for gas. suffix: 'UNITS', style: { position: 'relative', @@ -298,6 +298,7 @@ PendingTx.prototype.render = function () { }, }, 'Reset'), + // Accept Button h('input.confirm.btn-green', { type: 'submit', value: 'ACCEPT', @@ -374,10 +375,6 @@ PendingTx.prototype.componentDidUpdate = function (prevProps, previousState) { } } -PendingTx.prototype.isValid = function () { - return this.state.valid -} - PendingTx.prototype.calculateGas = function () { const state = this.state const props = this.props @@ -388,10 +385,10 @@ PendingTx.prototype.calculateGas = function () { const txParams = txMeta.txParams const gasLimit = new BN(ethUtil.stripHexPrefix(txParams.gas || txMeta.estimatedGas), 16) - const gasPriceHex = (state.gasPrice === undefined) ? txData.gasPrice : state.gasPrice + const gasPriceHex = state.gasPrice || txData.gasPrice const gasPrice = new BN(ethUtil.stripHexPrefix(gasPriceHex), 16) - const valid = !gasPrice.lt(MIN_GAS_PRICE_BN) + const valid = !gasPrice.lt(MIN_GAS_PRICE_BN) && !gasLimit.lt(MIN_GAS_LIMIT_BN) this.validChanged(valid) const txFee = gasLimit.mul(gasPrice) From 8e7b5d6a13e949435fade115f5bf69897c340be1 Mon Sep 17 00:00:00 2001 From: Dan Finlay Date: Fri, 24 Mar 2017 10:26:50 -0700 Subject: [PATCH 14/17] Remove unnecessary log --- ui/app/components/pending-tx.js | 2 -- 1 file changed, 2 deletions(-) diff --git a/ui/app/components/pending-tx.js b/ui/app/components/pending-tx.js index cfccf2a89..bd3ec6377 100644 --- a/ui/app/components/pending-tx.js +++ b/ui/app/components/pending-tx.js @@ -59,8 +59,6 @@ PendingTx.prototype.render = function () { const dataLength = txParams.data ? (txParams.data.length - 2) / 2 : 0 const imageify = props.imageifyIdenticons === undefined ? true : props.imageifyIdenticons - log.info(`rendering pending-tx form with gas limit ${gas.toString()}, gasPrice ${gasPrice.toString()}, `) - this.inputs = [] return ( From 1dfcc5438151fb8be6e28477e624d2abe20b7c42 Mon Sep 17 00:00:00 2001 From: Kevin Serrano Date: Fri, 24 Mar 2017 13:57:04 -0400 Subject: [PATCH 15/17] Remove goHome action causing erratic UI behavior. --- ui/app/actions.js | 1 - 1 file changed, 1 deletion(-) diff --git a/ui/app/actions.js b/ui/app/actions.js index d02b7dcaa..7288db256 100644 --- a/ui/app/actions.js +++ b/ui/app/actions.js @@ -397,7 +397,6 @@ function signTx (txData) { dispatch(actions.hideLoadingIndication()) if (err) return dispatch(actions.displayWarning(err.message)) dispatch(actions.hideWarning()) - dispatch(actions.goHome()) }) dispatch(this.showConfTxPage()) } From 5cc934f18ccb64d97f6046ecb1adee5860b3b3fa Mon Sep 17 00:00:00 2001 From: Dan Finlay Date: Fri, 24 Mar 2017 12:50:39 -0700 Subject: [PATCH 16/17] Fix tx selecting bug --- ui/app/components/pending-tx.js | 1 + ui/app/conf-tx.js | 4 ++-- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/ui/app/components/pending-tx.js b/ui/app/components/pending-tx.js index bd3ec6377..5bb088af9 100644 --- a/ui/app/components/pending-tx.js +++ b/ui/app/components/pending-tx.js @@ -472,3 +472,4 @@ function forwardCarrat () { ) } + diff --git a/ui/app/conf-tx.js b/ui/app/conf-tx.js index 83e2c7482..54c171a8a 100644 --- a/ui/app/conf-tx.js +++ b/ui/app/conf-tx.js @@ -43,8 +43,8 @@ ConfirmTxScreen.prototype.render = function () { unapprovedMsgs, unapprovedPersonalMsgs } = props var unconfTxList = txHelper(unapprovedTxs, unapprovedMsgs, unapprovedPersonalMsgs, network) - var index = props.index !== undefined && unconfTxList[index] ? props.index : 0 - var txData = unconfTxList[index] || {} + + var txData = unconfTxList[props.index] || {} var txParams = txData.params || {} var isNotification = isPopupOrNotification() === 'notification' From 5cd917b0e94d770e416eb2ec67013c7404ab2fbc Mon Sep 17 00:00:00 2001 From: Kevin Serrano Date: Fri, 24 Mar 2017 16:39:55 -0400 Subject: [PATCH 17/17] Add personalMessages to function to calculate pending tx index. --- ui/app/reducers/app.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/ui/app/reducers/app.js b/ui/app/reducers/app.js index b9e3f7b16..3a6baca91 100644 --- a/ui/app/reducers/app.js +++ b/ui/app/reducers/app.js @@ -592,8 +592,9 @@ function hasPendingTxs (state) { function indexForPending (state, txId) { var unapprovedTxs = state.metamask.unapprovedTxs var unapprovedMsgs = state.metamask.unapprovedMsgs + var unapprovedPersonalMsgs = state.metamask.unapprovedPersonalMsgs var network = state.metamask.network - var unconfTxList = txHelper(unapprovedTxs, unapprovedMsgs, network) + var unconfTxList = txHelper(unapprovedTxs, unapprovedMsgs, unapprovedPersonalMsgs, network) let idx unconfTxList.forEach((tx, i) => { if (tx.id === txId) {