From 89af0ef408eb62b7af5e05167f210d6563ef0f43 Mon Sep 17 00:00:00 2001 From: Kevin Serrano Date: Fri, 17 Feb 2017 12:08:54 -0800 Subject: Change state to props, add modifiable fields. --- ui/app/components/pending-tx.js | 42 ++++++++++++++++++++++++++++++++--------- 1 file changed, 33 insertions(+), 9 deletions(-) (limited to 'ui/app/components/pending-tx.js') 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') +} -- cgit From 6b56d6ba9853ec978cd2d3d030882fa5ee3645cd Mon Sep 17 00:00:00 2001 From: Dan Finlay Date: Fri, 17 Feb 2017 12:44:09 -0800 Subject: Broke hex decimal input into its own component Also added a new state to try to make UI dev mode work again, but it has other issues, like #1128, that need to be addressed before UI dev mode can be used again. --- ui/app/components/pending-tx.js | 46 ++++++++++++++++++++--------------------- 1 file changed, 22 insertions(+), 24 deletions(-) (limited to 'ui/app/components/pending-tx.js') diff --git a/ui/app/components/pending-tx.js b/ui/app/components/pending-tx.js index 9eefe1b22..761c75be3 100644 --- a/ui/app/components/pending-tx.js +++ b/ui/app/components/pending-tx.js @@ -2,8 +2,7 @@ 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') +const HexInput = require('./hex-as-decimal-input') module.exports = PendingTx @@ -13,12 +12,13 @@ function PendingTx () { } PendingTx.prototype.render = function () { - 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) + 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 ( @@ -78,24 +78,22 @@ PendingTx.prototype.render = function () { onClick: props.cancelTransaction, }, 'Reject'), ]), - h('input', { - value: decimalGas, - onChange: (event) => { - const hexString = hexify(event.target.value) - this.setState({ gas: hexString }) - } + + h(HexInput, { + value: gas, + onChange: (newHex) => { + this.setState({ gas: newHex }) + }, + }), + + h(HexInput, { + value: gasPrice, + onChange: (newHex) => { + this.setState({ gasPrice: newHex }) + }, }), + ]) ) } -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') -} -- cgit From dfc89d6c6dd622e7dff79544c0885594000ffd37 Mon Sep 17 00:00:00 2001 From: Kevin Serrano Date: Fri, 24 Feb 2017 15:06:55 -0800 Subject: Make gasPrice accessible to the UI. --- ui/app/components/pending-tx.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) (limited to 'ui/app/components/pending-tx.js') diff --git a/ui/app/components/pending-tx.js b/ui/app/components/pending-tx.js index 761c75be3..f1f479794 100644 --- a/ui/app/components/pending-tx.js +++ b/ui/app/components/pending-tx.js @@ -18,7 +18,7 @@ PendingTx.prototype.render = function () { const txParams = txData.txParams const gas = state.gas || txParams.gas - const gasPrice = state.gasPrice || txParams.gasPrice + const gasPrice = state.gasPrice || txData.gasPrice return ( @@ -96,4 +96,3 @@ PendingTx.prototype.render = function () { ]) ) } - -- cgit From a77a5f0ab329433404893ff1280fb90ff2a12029 Mon Sep 17 00:00:00 2001 From: Kevin Serrano Date: Mon, 27 Feb 2017 13:53:43 -0800 Subject: Move input boxes into table and into details component. --- ui/app/components/pending-tx.js | 16 ---------------- 1 file changed, 16 deletions(-) (limited to 'ui/app/components/pending-tx.js') diff --git a/ui/app/components/pending-tx.js b/ui/app/components/pending-tx.js index f1f479794..23b0dc00f 100644 --- a/ui/app/components/pending-tx.js +++ b/ui/app/components/pending-tx.js @@ -2,7 +2,6 @@ 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 @@ -78,21 +77,6 @@ PendingTx.prototype.render = function () { onClick: props.cancelTransaction, }, 'Reject'), ]), - - h(HexInput, { - value: gas, - onChange: (newHex) => { - this.setState({ gas: newHex }) - }, - }), - - h(HexInput, { - value: gasPrice, - onChange: (newHex) => { - this.setState({ gasPrice: newHex }) - }, - }), - ]) ) } -- cgit From c4e935457589b9bb503a430906515b48a24a6d3d Mon Sep 17 00:00:00 2001 From: Dan Finlay Date: Mon, 27 Feb 2017 16:09:05 -0800 Subject: Linted --- ui/app/components/pending-tx.js | 5 ----- 1 file changed, 5 deletions(-) (limited to 'ui/app/components/pending-tx.js') diff --git a/ui/app/components/pending-tx.js b/ui/app/components/pending-tx.js index 23b0dc00f..3c898edec 100644 --- a/ui/app/components/pending-tx.js +++ b/ui/app/components/pending-tx.js @@ -12,12 +12,7 @@ function PendingTx () { PendingTx.prototype.render = function () { 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 || txData.gasPrice return ( -- cgit From a600ccd4f863d7a473392fc283f4cec248225a27 Mon Sep 17 00:00:00 2001 From: Kevin Serrano Date: Tue, 28 Feb 2017 16:36:05 -0800 Subject: Add reset button to reset gas fields. --- ui/app/components/pending-tx.js | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) (limited to 'ui/app/components/pending-tx.js') diff --git a/ui/app/components/pending-tx.js b/ui/app/components/pending-tx.js index 3c898edec..d39cbc0f8 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 extend = require('xtend') module.exports = PendingTx @@ -12,6 +13,7 @@ function PendingTx () { PendingTx.prototype.render = function () { const props = this.props + const newProps = extend(props, {ref: 'details'}) const txData = props.txData return ( @@ -21,7 +23,7 @@ PendingTx.prototype.render = function () { }, [ // tx info - h(PendingTxDetails, props), + h(PendingTxDetails, newProps), h('style', ` .conf-buttons button { @@ -71,6 +73,12 @@ PendingTx.prototype.render = function () { h('button.cancel.btn-red', { onClick: props.cancelTransaction, }, 'Reject'), + + h('button', { + onClick: () => { + this.refs.details.resetGasFields() + }, + }, 'Reset'), ]), ]) ) -- cgit