From 803eaaf968161f16aaf72d59b979dfbb7fb9b352 Mon Sep 17 00:00:00 2001 From: Dan J Miller Date: Fri, 13 Oct 2017 16:19:22 -0400 Subject: [NewUI] SendV2-#8: Send container handles tokens; gas info dynamic from state (#2364) * Adds memo field to send-v2. * Vertical align transaction with flexbox. * Customize Gas UI * Remove internal state from InputNumber and fix use in gastooltip. * Move customize-gas-modal to its own folder and minor cleanup * Create send container, get account info from state, and make currency display more reusable * Adjusts send-v2 and container for send-token. Dynamically getting suggested gas prices. --- ui/app/components/customize-gas-modal/index.js | 91 ++++++++++++++++++++++++++ 1 file changed, 91 insertions(+) create mode 100644 ui/app/components/customize-gas-modal/index.js (limited to 'ui/app/components/customize-gas-modal/index.js') diff --git a/ui/app/components/customize-gas-modal/index.js b/ui/app/components/customize-gas-modal/index.js new file mode 100644 index 000000000..91e2626b4 --- /dev/null +++ b/ui/app/components/customize-gas-modal/index.js @@ -0,0 +1,91 @@ +const Component = require('react').Component +const h = require('react-hyperscript') +const inherits = require('util').inherits +const connect = require('react-redux').connect +const actions = require('../../actions') +const GasModalCard = require('./gas-modal-card') + +function mapStateToProps (state) { + return {} +} + +function mapDispatchToProps (dispatch) { + return { + hideModal: () => dispatch(actions.hideModal()), + } +} + +inherits(CustomizeGasModal, Component) +function CustomizeGasModal () { + Component.call(this) + + this.state = { + gasPrice: '0.23', + gasLimit: '25000', + } +} + +module.exports = connect(mapStateToProps, mapDispatchToProps)(CustomizeGasModal) + +CustomizeGasModal.prototype.render = function () { + const { hideModal } = this.props + const { gasPrice, gasLimit } = this.state + + return h('div.send-v2__customize-gas', {}, [ + h('div', { + }, [ + h('div.send-v2__customize-gas__header', {}, [ + + h('div.send-v2__customize-gas__title', 'Customize Gas'), + + h('div.send-v2__customize-gas__close', { + onClick: hideModal, + }), + + ]), + + h('div.send-v2__customize-gas__body', {}, [ + + h(GasModalCard, { + value: gasPrice, + min: 0.0, + max: 5.0, + step: 0.01, + onChange: gasPrice => this.setState({ gasPrice }), + title: 'Gas Price', + copy: 'We calculate the suggested gas prices based on network success rates.', + }), + + h(GasModalCard, { + value: gasLimit, + min: 20000, + max: 100000, + step: 1, + onChange: gasLimit => this.setState({ gasLimit }), + title: 'Gas Limit', + copy: 'We calculate the suggested gas limit based on network success rates.', + }), + + ]), + + h('div.send-v2__customize-gas__footer', {}, [ + + h('div.send-v2__customize-gas__revert', { + onClick: () => console.log('Revert'), + }, ['Revert']), + + h('div.send-v2__customize-gas__buttons', [ + h('div.send-v2__customize-gas__cancel', { + onClick: this.props.hideModal, + }, ['CANCEL']), + + h('div.send-v2__customize-gas__save', { + onClick: () => console.log('Save'), + }, ['SAVE']), + ]) + + ]), + + ]), + ]) +} -- cgit From a9244f5e426d6572ef135e07ab75a49c00e84942 Mon Sep 17 00:00:00 2001 From: Dan Date: Thu, 12 Oct 2017 14:12:14 -0230 Subject: Customize Gas connected to state --- ui/app/components/customize-gas-modal/index.js | 84 ++++++++++++++++++++++---- 1 file changed, 71 insertions(+), 13 deletions(-) (limited to 'ui/app/components/customize-gas-modal/index.js') diff --git a/ui/app/components/customize-gas-modal/index.js b/ui/app/components/customize-gas-modal/index.js index 91e2626b4..2df24b4e1 100644 --- a/ui/app/components/customize-gas-modal/index.js +++ b/ui/app/components/customize-gas-modal/index.js @@ -5,32 +5,90 @@ const connect = require('react-redux').connect const actions = require('../../actions') const GasModalCard = require('./gas-modal-card') +const { conversionUtil } = require('../../conversion-util') + +const { + getGasPrice, + getGasLimit, + conversionRateSelector, +} = require('../../selectors') + function mapStateToProps (state) { - return {} + return { + gasPrice: getGasPrice(state), + gasLimit: getGasLimit(state), + conversionRate: conversionRateSelector(state), + } } function mapDispatchToProps (dispatch) { return { hideModal: () => dispatch(actions.hideModal()), + updateGasPrice: newGasPrice => dispatch(actions.updateGasPrice(newGasPrice)), + updateGasLimit: newGasLimit => dispatch(actions.updateGasLimit(newGasLimit)), } } inherits(CustomizeGasModal, Component) -function CustomizeGasModal () { +function CustomizeGasModal (props) { Component.call(this) this.state = { - gasPrice: '0.23', - gasLimit: '25000', + gasPrice: props.gasPrice, + gasLimit: props.gasLimit, } } module.exports = connect(mapStateToProps, mapDispatchToProps)(CustomizeGasModal) +CustomizeGasModal.prototype.save = function (gasPrice, gasLimit) { + const { + updateGasPrice, + updateGasLimit, + hideModal, + } = this.props + + updateGasPrice(gasPrice) + updateGasLimit(gasLimit) + hideModal() +} + +CustomizeGasModal.prototype.convertAndSetGasLimit = function (newGasLimit) { + const convertedGasLimit = conversionUtil(newGasLimit, { + fromNumericBase: 'dec', + toNumericBase: 'hex', + }) + + this.setState({ gasLimit: convertedGasLimit }) +} + +CustomizeGasModal.prototype.convertAndSetGasPrice = function (newGasPrice) { + const convertedGasPrice = conversionUtil(newGasPrice, { + fromNumericBase: 'dec', + toNumericBase: 'hex', + fromDenomination: 'GWEI', + toDenomination: 'WEI', + }) + + this.setState({ gasPrice: convertedGasPrice }) +} + CustomizeGasModal.prototype.render = function () { - const { hideModal } = this.props + const { hideModal, conversionRate } = this.props const { gasPrice, gasLimit } = this.state + const convertedGasPrice = conversionUtil(gasPrice, { + fromNumericBase: 'hex', + toNumericBase: 'dec', + fromDenomination: 'WEI', + toDenomination: 'GWEI', + }) + + const convertedGasLimit = conversionUtil(gasLimit, { + fromNumericBase: 'hex', + toNumericBase: 'dec', + }) + return h('div.send-v2__customize-gas', {}, [ h('div', { }, [ @@ -47,21 +105,21 @@ CustomizeGasModal.prototype.render = function () { h('div.send-v2__customize-gas__body', {}, [ h(GasModalCard, { - value: gasPrice, - min: 0.0, - max: 5.0, - step: 0.01, - onChange: gasPrice => this.setState({ gasPrice }), + value: convertedGasPrice, + min: 0, + max: 1000, + step: 1, + onChange: value => this.convertAndSetGasPrice(value), title: 'Gas Price', copy: 'We calculate the suggested gas prices based on network success rates.', }), h(GasModalCard, { - value: gasLimit, + value: convertedGasLimit, min: 20000, max: 100000, step: 1, - onChange: gasLimit => this.setState({ gasLimit }), + onChange: value => this.convertAndSetGasLimit(value), title: 'Gas Limit', copy: 'We calculate the suggested gas limit based on network success rates.', }), @@ -80,7 +138,7 @@ CustomizeGasModal.prototype.render = function () { }, ['CANCEL']), h('div.send-v2__customize-gas__save', { - onClick: () => console.log('Save'), + onClick: () => this.save(gasPrice, gasLimit), }, ['SAVE']), ]) -- cgit From f81226fbe9f98d5a6c408e289fa0ea61a467e7dc Mon Sep 17 00:00:00 2001 From: Dan Date: Tue, 17 Oct 2017 14:52:23 -0230 Subject: Move all of send state to metamask state. --- ui/app/components/customize-gas-modal/index.js | 11 ++++++++++- 1 file changed, 10 insertions(+), 1 deletion(-) (limited to 'ui/app/components/customize-gas-modal/index.js') diff --git a/ui/app/components/customize-gas-modal/index.js b/ui/app/components/customize-gas-modal/index.js index 2df24b4e1..0ba768893 100644 --- a/ui/app/components/customize-gas-modal/index.js +++ b/ui/app/components/customize-gas-modal/index.js @@ -5,7 +5,7 @@ const connect = require('react-redux').connect const actions = require('../../actions') const GasModalCard = require('./gas-modal-card') -const { conversionUtil } = require('../../conversion-util') +const { conversionUtil, multiplyCurrencies } = require('../../conversion-util') const { getGasPrice, @@ -26,6 +26,7 @@ function mapDispatchToProps (dispatch) { hideModal: () => dispatch(actions.hideModal()), updateGasPrice: newGasPrice => dispatch(actions.updateGasPrice(newGasPrice)), updateGasLimit: newGasLimit => dispatch(actions.updateGasLimit(newGasLimit)), + updateGasTotal: newGasTotal => dispatch(actions.updateGasTotal(newGasTotal)), } } @@ -46,10 +47,18 @@ CustomizeGasModal.prototype.save = function (gasPrice, gasLimit) { updateGasPrice, updateGasLimit, hideModal, + updateGasTotal } = this.props + const newGasTotal = multiplyCurrencies(gasLimit, gasPrice, { + toNumericBase: 'hex', + multiplicandBase: 16, + multiplierBase: 16, + }) + updateGasPrice(gasPrice) updateGasLimit(gasLimit) + updateGasTotal(newGasTotal) hideModal() } -- cgit From c2880c4b8fe56f3b175d75b6ae8a84271dde3e28 Mon Sep 17 00:00:00 2001 From: Dan Date: Wed, 18 Oct 2017 16:53:35 -0230 Subject: Min and default gas price, limit, total; comments out code for gas slider. --- ui/app/components/customize-gas-modal/index.js | 17 +++++++++++------ 1 file changed, 11 insertions(+), 6 deletions(-) (limited to 'ui/app/components/customize-gas-modal/index.js') diff --git a/ui/app/components/customize-gas-modal/index.js b/ui/app/components/customize-gas-modal/index.js index 0ba768893..744891c47 100644 --- a/ui/app/components/customize-gas-modal/index.js +++ b/ui/app/components/customize-gas-modal/index.js @@ -5,6 +5,11 @@ const connect = require('react-redux').connect const actions = require('../../actions') const GasModalCard = require('./gas-modal-card') +const { + MIN_GAS_PRICE, + MIN_GAS_LIMIT, +} = require('../send/send-constants') + const { conversionUtil, multiplyCurrencies } = require('../../conversion-util') const { @@ -35,8 +40,8 @@ function CustomizeGasModal (props) { Component.call(this) this.state = { - gasPrice: props.gasPrice, - gasLimit: props.gasLimit, + gasPrice: props.gasPrice || MIN_GAS_PRICE, + gasLimit: props.gasLimit || MIN_GAS_LIMIT, } } @@ -115,8 +120,8 @@ CustomizeGasModal.prototype.render = function () { h(GasModalCard, { value: convertedGasPrice, - min: 0, - max: 1000, + min: MIN_GAS_PRICE, + // max: 1000, step: 1, onChange: value => this.convertAndSetGasPrice(value), title: 'Gas Price', @@ -125,8 +130,8 @@ CustomizeGasModal.prototype.render = function () { h(GasModalCard, { value: convertedGasLimit, - min: 20000, - max: 100000, + min: MIN_GAS_LIMIT, + // max: 100000, step: 1, onChange: value => this.convertAndSetGasLimit(value), title: 'Gas Limit', -- cgit From e737a9565a6b78639b74511d026339c1b54bca1a Mon Sep 17 00:00:00 2001 From: Dan Date: Sun, 22 Oct 2017 17:44:03 -0230 Subject: Improve customize gas modal error handling --- ui/app/components/customize-gas-modal/index.js | 144 +++++++++++++++++++++---- 1 file changed, 121 insertions(+), 23 deletions(-) (limited to 'ui/app/components/customize-gas-modal/index.js') diff --git a/ui/app/components/customize-gas-modal/index.js b/ui/app/components/customize-gas-modal/index.js index 744891c47..710ee24c0 100644 --- a/ui/app/components/customize-gas-modal/index.js +++ b/ui/app/components/customize-gas-modal/index.js @@ -6,23 +6,46 @@ const actions = require('../../actions') const GasModalCard = require('./gas-modal-card') const { - MIN_GAS_PRICE, - MIN_GAS_LIMIT, + MIN_GAS_PRICE_DEC, + MIN_GAS_LIMIT_DEC, + MIN_GAS_PRICE_GWEI, } = require('../send/send-constants') -const { conversionUtil, multiplyCurrencies } = require('../../conversion-util') +const { + isBalanceSufficient, +} = require('../send/send-utils') + +const { + conversionUtil, + multiplyCurrencies, + conversionGreaterThan, +} = require('../../conversion-util') const { getGasPrice, getGasLimit, conversionRateSelector, + getSendAmount, + getSelectedToken, + getSendFrom, + getCurrentAccountWithSendEtherInfo, + getSelectedTokenToFiatRate, } = require('../../selectors') function mapStateToProps (state) { + const selectedToken = getSelectedToken(state) + const currentAccount = getSendFrom(state) || getCurrentAccountWithSendEtherInfo(state) + const conversionRate = conversionRateSelector(state) + return { gasPrice: getGasPrice(state), gasLimit: getGasLimit(state), - conversionRate: conversionRateSelector(state), + conversionRate, + amount: getSendAmount(state), + balance: currentAccount.balance, + primaryCurrency: selectedToken && selectedToken.symbol, + selectedToken, + amountConversionRate: selectedToken ? getSelectedTokenToFiatRate(state) : conversionRate, } } @@ -39,15 +62,26 @@ inherits(CustomizeGasModal, Component) function CustomizeGasModal (props) { Component.call(this) + const gasPrice = props.gasPrice || MIN_GAS_PRICE_DEC + const gasLimit = props.gasLimit || MIN_GAS_LIMIT_DEC + + const gasTotal = multiplyCurrencies(gasLimit, gasPrice, { + toNumericBase: 'hex', + multiplicandBase: 16, + multiplierBase: 16, + }) + this.state = { - gasPrice: props.gasPrice || MIN_GAS_PRICE, - gasLimit: props.gasLimit || MIN_GAS_LIMIT, + gasPrice, + gasLimit, + gasTotal, + error: null, } } module.exports = connect(mapStateToProps, mapDispatchToProps)(CustomizeGasModal) -CustomizeGasModal.prototype.save = function (gasPrice, gasLimit) { +CustomizeGasModal.prototype.save = function (gasPrice, gasLimit, gasTotal) { const { updateGasPrice, updateGasLimit, @@ -55,41 +89,101 @@ CustomizeGasModal.prototype.save = function (gasPrice, gasLimit) { updateGasTotal } = this.props - const newGasTotal = multiplyCurrencies(gasLimit, gasPrice, { - toNumericBase: 'hex', - multiplicandBase: 16, - multiplierBase: 16, - }) - updateGasPrice(gasPrice) updateGasLimit(gasLimit) - updateGasTotal(newGasTotal) + updateGasTotal(gasTotal) hideModal() } +CustomizeGasModal.prototype.validate = function ({ gasTotal, gasLimit }) { + const { + amount, + balance, + primaryCurrency, + selectedToken, + amountConversionRate, + conversionRate, + } = this.props + + let error = null + + const balanceIsSufficient = isBalanceSufficient({ + amount, + gasTotal, + balance, + primaryCurrency, + selectedToken, + amountConversionRate, + conversionRate, + }) + + if (!balanceIsSufficient) { + error = 'Insufficient balance for current gas total' + } + + const gasLimitTooLow = gasLimit && conversionGreaterThan( + { + value: MIN_GAS_LIMIT_DEC, + fromNumericBase: 'dec', + conversionRate, + }, + { + value: gasLimit, + fromNumericBase: 'hex', + }, + ) + + if (gasLimitTooLow) { + error = 'Gas limit must be at least 21000' + } + + this.setState({ error }) + return error +} + CustomizeGasModal.prototype.convertAndSetGasLimit = function (newGasLimit) { - const convertedGasLimit = conversionUtil(newGasLimit, { + const { gasPrice } = this.state + + const gasLimit = conversionUtil(newGasLimit, { fromNumericBase: 'dec', toNumericBase: 'hex', }) - this.setState({ gasLimit: convertedGasLimit }) + const gasTotal = multiplyCurrencies(gasLimit, gasPrice, { + toNumericBase: 'hex', + multiplicandBase: 16, + multiplierBase: 16, + }) + + this.validate({ gasTotal, gasLimit }) + + this.setState({ gasTotal, gasLimit }) } CustomizeGasModal.prototype.convertAndSetGasPrice = function (newGasPrice) { - const convertedGasPrice = conversionUtil(newGasPrice, { + const { gasLimit } = this.state + + const gasPrice = conversionUtil(newGasPrice, { fromNumericBase: 'dec', toNumericBase: 'hex', fromDenomination: 'GWEI', toDenomination: 'WEI', }) - this.setState({ gasPrice: convertedGasPrice }) + const gasTotal = multiplyCurrencies(gasLimit, gasPrice, { + toNumericBase: 'hex', + multiplicandBase: 16, + multiplierBase: 16, + }) + + this.validate({ gasTotal }) + + this.setState({ gasTotal, gasPrice }) } CustomizeGasModal.prototype.render = function () { const { hideModal, conversionRate } = this.props - const { gasPrice, gasLimit } = this.state + const { gasPrice, gasLimit, gasTotal, error } = this.state const convertedGasPrice = conversionUtil(gasPrice, { fromNumericBase: 'hex', @@ -120,7 +214,7 @@ CustomizeGasModal.prototype.render = function () { h(GasModalCard, { value: convertedGasPrice, - min: MIN_GAS_PRICE, + min: MIN_GAS_PRICE_GWEI, // max: 1000, step: 1, onChange: value => this.convertAndSetGasPrice(value), @@ -130,7 +224,7 @@ CustomizeGasModal.prototype.render = function () { h(GasModalCard, { value: convertedGasLimit, - min: MIN_GAS_LIMIT, + min: 1, // max: 100000, step: 1, onChange: value => this.convertAndSetGasLimit(value), @@ -141,6 +235,10 @@ CustomizeGasModal.prototype.render = function () { ]), h('div.send-v2__customize-gas__footer', {}, [ + + error && h('div.send-v2__customize-gas__error-message', [ + error, + ]), h('div.send-v2__customize-gas__revert', { onClick: () => console.log('Revert'), @@ -151,8 +249,8 @@ CustomizeGasModal.prototype.render = function () { onClick: this.props.hideModal, }, ['CANCEL']), - h('div.send-v2__customize-gas__save', { - onClick: () => this.save(gasPrice, gasLimit), + h(`div.send-v2__customize-gas__save${error ? '__error' : ''}`, { + onClick: () => !error && this.save(gasPrice, gasLimit, gasTotal), }, ['SAVE']), ]) -- cgit From 0d522139ba7c5372e0ef4219a69a4b8e8f83706a Mon Sep 17 00:00:00 2001 From: Chi Kei Chan Date: Wed, 25 Oct 2017 01:08:14 -0700 Subject: Fix gas input styling on mobile view --- ui/app/components/customize-gas-modal/index.js | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) (limited to 'ui/app/components/customize-gas-modal/index.js') diff --git a/ui/app/components/customize-gas-modal/index.js b/ui/app/components/customize-gas-modal/index.js index 710ee24c0..e5bfcfc63 100644 --- a/ui/app/components/customize-gas-modal/index.js +++ b/ui/app/components/customize-gas-modal/index.js @@ -198,7 +198,7 @@ CustomizeGasModal.prototype.render = function () { }) return h('div.send-v2__customize-gas', {}, [ - h('div', { + h('div.send-v2__customize-gas__content', { }, [ h('div.send-v2__customize-gas__header', {}, [ @@ -241,8 +241,9 @@ CustomizeGasModal.prototype.render = function () { ]), h('div.send-v2__customize-gas__revert', { - onClick: () => console.log('Revert'), - }, ['Revert']), + // onClick: () => console.log('Revert'), + }, ['']), + // }, ['Revert']), h('div.send-v2__customize-gas__buttons', [ h('div.send-v2__customize-gas__cancel', { -- cgit From 2b72b70647caaa81c0077e224a7dc8b9f823c872 Mon Sep 17 00:00:00 2001 From: Chi Kei Chan Date: Wed, 25 Oct 2017 01:17:17 -0700 Subject: Add GWEI to gas price unit --- ui/app/components/customize-gas-modal/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'ui/app/components/customize-gas-modal/index.js') diff --git a/ui/app/components/customize-gas-modal/index.js b/ui/app/components/customize-gas-modal/index.js index e5bfcfc63..598247497 100644 --- a/ui/app/components/customize-gas-modal/index.js +++ b/ui/app/components/customize-gas-modal/index.js @@ -218,7 +218,7 @@ CustomizeGasModal.prototype.render = function () { // max: 1000, step: 1, onChange: value => this.convertAndSetGasPrice(value), - title: 'Gas Price', + title: 'Gas Price (GWEI)', copy: 'We calculate the suggested gas prices based on network success rates.', }), -- cgit From f89b76653434ff801779e10b9f8a9a546997cb9b Mon Sep 17 00:00:00 2001 From: Dan Date: Wed, 25 Oct 2017 14:10:03 -0230 Subject: Adds revert feature to customize gas modal. --- ui/app/components/customize-gas-modal/index.js | 23 +++++++++++++++-------- 1 file changed, 15 insertions(+), 8 deletions(-) (limited to 'ui/app/components/customize-gas-modal/index.js') diff --git a/ui/app/components/customize-gas-modal/index.js b/ui/app/components/customize-gas-modal/index.js index 598247497..722ed2b23 100644 --- a/ui/app/components/customize-gas-modal/index.js +++ b/ui/app/components/customize-gas-modal/index.js @@ -58,10 +58,7 @@ function mapDispatchToProps (dispatch) { } } -inherits(CustomizeGasModal, Component) -function CustomizeGasModal (props) { - Component.call(this) - +function getOriginalState(props) { const gasPrice = props.gasPrice || MIN_GAS_PRICE_DEC const gasLimit = props.gasLimit || MIN_GAS_LIMIT_DEC @@ -71,7 +68,7 @@ function CustomizeGasModal (props) { multiplierBase: 16, }) - this.state = { + return { gasPrice, gasLimit, gasTotal, @@ -79,6 +76,13 @@ function CustomizeGasModal (props) { } } +inherits(CustomizeGasModal, Component) +function CustomizeGasModal (props) { + Component.call(this) + + this.state = getOriginalState(props) +} + module.exports = connect(mapStateToProps, mapDispatchToProps)(CustomizeGasModal) CustomizeGasModal.prototype.save = function (gasPrice, gasLimit, gasTotal) { @@ -95,6 +99,10 @@ CustomizeGasModal.prototype.save = function (gasPrice, gasLimit, gasTotal) { hideModal() } +CustomizeGasModal.prototype.revert = function () { + this.setState(getOriginalState(this.props)) +} + CustomizeGasModal.prototype.validate = function ({ gasTotal, gasLimit }) { const { amount, @@ -241,9 +249,8 @@ CustomizeGasModal.prototype.render = function () { ]), h('div.send-v2__customize-gas__revert', { - // onClick: () => console.log('Revert'), - }, ['']), - // }, ['Revert']), + onClick: () => this.revert(), + }, ['Revert']), h('div.send-v2__customize-gas__buttons', [ h('div.send-v2__customize-gas__cancel', { -- cgit From 220da24f9ab4a57a10bc1fc3e249c511a98ecb46 Mon Sep 17 00:00:00 2001 From: Dan Date: Thu, 26 Oct 2017 13:36:34 -0230 Subject: Change min gas price to 0.1 GWEI --- ui/app/components/customize-gas-modal/index.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) (limited to 'ui/app/components/customize-gas-modal/index.js') diff --git a/ui/app/components/customize-gas-modal/index.js b/ui/app/components/customize-gas-modal/index.js index 722ed2b23..80ea98cc8 100644 --- a/ui/app/components/customize-gas-modal/index.js +++ b/ui/app/components/customize-gas-modal/index.js @@ -2,6 +2,7 @@ const Component = require('react').Component const h = require('react-hyperscript') const inherits = require('util').inherits const connect = require('react-redux').connect +const ethUtil = require('ethereumjs-util') const actions = require('../../actions') const GasModalCard = require('./gas-modal-card') @@ -224,7 +225,7 @@ CustomizeGasModal.prototype.render = function () { value: convertedGasPrice, min: MIN_GAS_PRICE_GWEI, // max: 1000, - step: 1, + step: MIN_GAS_PRICE_GWEI, onChange: value => this.convertAndSetGasPrice(value), title: 'Gas Price (GWEI)', copy: 'We calculate the suggested gas prices based on network success rates.', -- cgit From 5a94775b3fa22517a71232ebe229ee83e9debcf1 Mon Sep 17 00:00:00 2001 From: Dan Date: Thu, 2 Nov 2017 00:00:33 -0230 Subject: Lint fixes for NewUI-flat. --- ui/app/components/customize-gas-modal/index.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) (limited to 'ui/app/components/customize-gas-modal/index.js') diff --git a/ui/app/components/customize-gas-modal/index.js b/ui/app/components/customize-gas-modal/index.js index 80ea98cc8..4bd9d079a 100644 --- a/ui/app/components/customize-gas-modal/index.js +++ b/ui/app/components/customize-gas-modal/index.js @@ -2,7 +2,6 @@ const Component = require('react').Component const h = require('react-hyperscript') const inherits = require('util').inherits const connect = require('react-redux').connect -const ethUtil = require('ethereumjs-util') const actions = require('../../actions') const GasModalCard = require('./gas-modal-card') @@ -191,7 +190,7 @@ CustomizeGasModal.prototype.convertAndSetGasPrice = function (newGasPrice) { } CustomizeGasModal.prototype.render = function () { - const { hideModal, conversionRate } = this.props + const { hideModal } = this.props const { gasPrice, gasLimit, gasTotal, error } = this.state const convertedGasPrice = conversionUtil(gasPrice, { -- cgit From 56e9f98bd05de8ae26f653d15eec4304f0c72155 Mon Sep 17 00:00:00 2001 From: Dan Date: Thu, 2 Nov 2017 09:45:59 -0230 Subject: More lint fixes --- ui/app/components/customize-gas-modal/index.js | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) (limited to 'ui/app/components/customize-gas-modal/index.js') diff --git a/ui/app/components/customize-gas-modal/index.js b/ui/app/components/customize-gas-modal/index.js index 4bd9d079a..101a19d9f 100644 --- a/ui/app/components/customize-gas-modal/index.js +++ b/ui/app/components/customize-gas-modal/index.js @@ -58,7 +58,7 @@ function mapDispatchToProps (dispatch) { } } -function getOriginalState(props) { +function getOriginalState (props) { const gasPrice = props.gasPrice || MIN_GAS_PRICE_DEC const gasLimit = props.gasLimit || MIN_GAS_LIMIT_DEC @@ -90,7 +90,7 @@ CustomizeGasModal.prototype.save = function (gasPrice, gasLimit, gasTotal) { updateGasPrice, updateGasLimit, hideModal, - updateGasTotal + updateGasTotal, } = this.props updateGasPrice(gasPrice) @@ -126,9 +126,9 @@ CustomizeGasModal.prototype.validate = function ({ gasTotal, gasLimit }) { }) if (!balanceIsSufficient) { - error = 'Insufficient balance for current gas total' + error = 'Insufficient balance for current gas total' } - + const gasLimitTooLow = gasLimit && conversionGreaterThan( { value: MIN_GAS_LIMIT_DEC, @@ -142,7 +142,7 @@ CustomizeGasModal.prototype.validate = function ({ gasTotal, gasLimit }) { ) if (gasLimitTooLow) { - error = 'Gas limit must be at least 21000' + error = 'Gas limit must be at least 21000' } this.setState({ error }) @@ -219,7 +219,7 @@ CustomizeGasModal.prototype.render = function () { ]), h('div.send-v2__customize-gas__body', {}, [ - + h(GasModalCard, { value: convertedGasPrice, min: MIN_GAS_PRICE_GWEI, @@ -247,7 +247,7 @@ CustomizeGasModal.prototype.render = function () { error && h('div.send-v2__customize-gas__error-message', [ error, ]), - + h('div.send-v2__customize-gas__revert', { onClick: () => this.revert(), }, ['Revert']), @@ -260,7 +260,7 @@ CustomizeGasModal.prototype.render = function () { h(`div.send-v2__customize-gas__save${error ? '__error' : ''}`, { onClick: () => !error && this.save(gasPrice, gasLimit, gasTotal), }, ['SAVE']), - ]) + ]), ]), -- cgit From b16946723f94b855ab70469dca5899ad80f129b3 Mon Sep 17 00:00:00 2001 From: Dan Date: Mon, 30 Oct 2017 16:11:05 -0230 Subject: Insufficient balance warning in gas customizer works for send token --- ui/app/components/customize-gas-modal/index.js | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) (limited to 'ui/app/components/customize-gas-modal/index.js') diff --git a/ui/app/components/customize-gas-modal/index.js b/ui/app/components/customize-gas-modal/index.js index 101a19d9f..5bd6c54cb 100644 --- a/ui/app/components/customize-gas-modal/index.js +++ b/ui/app/components/customize-gas-modal/index.js @@ -107,19 +107,17 @@ CustomizeGasModal.prototype.validate = function ({ gasTotal, gasLimit }) { const { amount, balance, - primaryCurrency, selectedToken, amountConversionRate, conversionRate, } = this.props let error = null - + const balanceIsSufficient = isBalanceSufficient({ amount, gasTotal, balance, - primaryCurrency, selectedToken, amountConversionRate, conversionRate, -- cgit From 716bbf67d7180ffe0f59d07484d30231ed5f5e49 Mon Sep 17 00:00:00 2001 From: Dan Date: Mon, 30 Oct 2017 19:16:56 -0230 Subject: Set gas price allows for WEI precision. --- ui/app/components/customize-gas-modal/index.js | 20 ++++++++++++++++---- 1 file changed, 16 insertions(+), 4 deletions(-) (limited to 'ui/app/components/customize-gas-modal/index.js') diff --git a/ui/app/components/customize-gas-modal/index.js b/ui/app/components/customize-gas-modal/index.js index 5bd6c54cb..dcb058690 100644 --- a/ui/app/components/customize-gas-modal/index.js +++ b/ui/app/components/customize-gas-modal/index.js @@ -73,6 +73,8 @@ function getOriginalState (props) { gasLimit, gasTotal, error: null, + priceSigZeros: '', + priceSigDec: '', } } @@ -167,7 +169,15 @@ CustomizeGasModal.prototype.convertAndSetGasLimit = function (newGasLimit) { } CustomizeGasModal.prototype.convertAndSetGasPrice = function (newGasPrice) { - const { gasLimit } = this.state + const { gasLimit, priceSigZeros } = this.state + const priceStrLength = newGasPrice.length + const sigZeros = String(newGasPrice).match(/^\d+[.]\d*?(0+)$/) + const sigDec = String(newGasPrice).match(/^\d+([.])0*$/) + + this.setState({ + priceSigZeros: sigZeros && sigZeros[1] || '', + priceSigDec: sigDec && sigDec[1] || '', + }) const gasPrice = conversionUtil(newGasPrice, { fromNumericBase: 'dec', @@ -189,15 +199,17 @@ CustomizeGasModal.prototype.convertAndSetGasPrice = function (newGasPrice) { CustomizeGasModal.prototype.render = function () { const { hideModal } = this.props - const { gasPrice, gasLimit, gasTotal, error } = this.state + const { gasPrice, gasLimit, gasTotal, error, priceSigZeros, priceSigDec } = this.state - const convertedGasPrice = conversionUtil(gasPrice, { + let convertedGasPrice = conversionUtil(gasPrice, { fromNumericBase: 'hex', toNumericBase: 'dec', fromDenomination: 'WEI', toDenomination: 'GWEI', }) + convertedGasPrice += convertedGasPrice.match(/[.]/) ? priceSigZeros : `${priceSigDec}${priceSigZeros}` + const convertedGasLimit = conversionUtil(gasLimit, { fromNumericBase: 'hex', toNumericBase: 'dec', @@ -222,7 +234,7 @@ CustomizeGasModal.prototype.render = function () { value: convertedGasPrice, min: MIN_GAS_PRICE_GWEI, // max: 1000, - step: MIN_GAS_PRICE_GWEI, + step: multiplyCurrencies(MIN_GAS_PRICE_GWEI, 10), onChange: value => this.convertAndSetGasPrice(value), title: 'Gas Price (GWEI)', copy: 'We calculate the suggested gas prices based on network success rates.', -- cgit From 8c6e1232e417f5a2974b5aa1cc479dac4925df63 Mon Sep 17 00:00:00 2001 From: Dan Date: Mon, 6 Nov 2017 16:14:46 -0330 Subject: Lint fixes. --- ui/app/components/customize-gas-modal/index.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) (limited to 'ui/app/components/customize-gas-modal/index.js') diff --git a/ui/app/components/customize-gas-modal/index.js b/ui/app/components/customize-gas-modal/index.js index dcb058690..b77e1990f 100644 --- a/ui/app/components/customize-gas-modal/index.js +++ b/ui/app/components/customize-gas-modal/index.js @@ -169,8 +169,7 @@ CustomizeGasModal.prototype.convertAndSetGasLimit = function (newGasLimit) { } CustomizeGasModal.prototype.convertAndSetGasPrice = function (newGasPrice) { - const { gasLimit, priceSigZeros } = this.state - const priceStrLength = newGasPrice.length + const { gasLimit } = this.state const sigZeros = String(newGasPrice).match(/^\d+[.]\d*?(0+)$/) const sigDec = String(newGasPrice).match(/^\d+([.])0*$/) -- cgit From 5120cfdff3047e4bf88cec544895cc713d063cdd Mon Sep 17 00:00:00 2001 From: Thomas Huang Date: Thu, 9 Nov 2017 14:23:10 -0800 Subject: Linting --- ui/app/components/customize-gas-modal/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'ui/app/components/customize-gas-modal/index.js') diff --git a/ui/app/components/customize-gas-modal/index.js b/ui/app/components/customize-gas-modal/index.js index b77e1990f..f01f42fe0 100644 --- a/ui/app/components/customize-gas-modal/index.js +++ b/ui/app/components/customize-gas-modal/index.js @@ -115,7 +115,7 @@ CustomizeGasModal.prototype.validate = function ({ gasTotal, gasLimit }) { } = this.props let error = null - + const balanceIsSufficient = isBalanceSufficient({ amount, gasTotal, -- cgit From 960cc8abcbdc82ae2b73a82f0faf1658f113a9d3 Mon Sep 17 00:00:00 2001 From: Dan Date: Wed, 15 Nov 2017 15:29:57 -0330 Subject: Gas customzier does not consider amount when sending tokens. --- ui/app/components/customize-gas-modal/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'ui/app/components/customize-gas-modal/index.js') diff --git a/ui/app/components/customize-gas-modal/index.js b/ui/app/components/customize-gas-modal/index.js index f01f42fe0..485dacf90 100644 --- a/ui/app/components/customize-gas-modal/index.js +++ b/ui/app/components/customize-gas-modal/index.js @@ -117,7 +117,7 @@ CustomizeGasModal.prototype.validate = function ({ gasTotal, gasLimit }) { let error = null const balanceIsSufficient = isBalanceSufficient({ - amount, + amount: selectedToken ? '0' : amount, gasTotal, balance, selectedToken, -- cgit From c6713e93adcaeeba1ec559d44135bb62c76d2538 Mon Sep 17 00:00:00 2001 From: Dan Finlay Date: Fri, 17 Nov 2017 13:23:25 -0800 Subject: Fix bug where gas param was not a string Prevented sending transactions. Fixes #2598 --- ui/app/components/customize-gas-modal/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'ui/app/components/customize-gas-modal/index.js') diff --git a/ui/app/components/customize-gas-modal/index.js b/ui/app/components/customize-gas-modal/index.js index 485dacf90..6d27702e8 100644 --- a/ui/app/components/customize-gas-modal/index.js +++ b/ui/app/components/customize-gas-modal/index.js @@ -244,7 +244,7 @@ CustomizeGasModal.prototype.render = function () { min: 1, // max: 100000, step: 1, - onChange: value => this.convertAndSetGasLimit(value), + onChange: value => this.convertAndSetGasLimit(String(value)), title: 'Gas Limit', copy: 'We calculate the suggested gas limit based on network success rates.', }), -- cgit From 28409294c3cd70ddbc9a9f3467d402c89e110261 Mon Sep 17 00:00:00 2001 From: Dan Finlay Date: Mon, 20 Nov 2017 10:54:05 -0800 Subject: Remove unneeded type casting --- ui/app/components/customize-gas-modal/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'ui/app/components/customize-gas-modal/index.js') diff --git a/ui/app/components/customize-gas-modal/index.js b/ui/app/components/customize-gas-modal/index.js index 6d27702e8..485dacf90 100644 --- a/ui/app/components/customize-gas-modal/index.js +++ b/ui/app/components/customize-gas-modal/index.js @@ -244,7 +244,7 @@ CustomizeGasModal.prototype.render = function () { min: 1, // max: 100000, step: 1, - onChange: value => this.convertAndSetGasLimit(String(value)), + onChange: value => this.convertAndSetGasLimit(value), title: 'Gas Limit', copy: 'We calculate the suggested gas limit based on network success rates.', }), -- cgit From 2e9137dddd4abd07cc45caa670f09bdc9559bbbb Mon Sep 17 00:00:00 2001 From: Dan Date: Thu, 16 Nov 2017 14:44:25 -0330 Subject: Update max amount behaviour to meet new specs. --- ui/app/components/customize-gas-modal/index.js | 22 +++++++++++++++++++++- 1 file changed, 21 insertions(+), 1 deletion(-) (limited to 'ui/app/components/customize-gas-modal/index.js') diff --git a/ui/app/components/customize-gas-modal/index.js b/ui/app/components/customize-gas-modal/index.js index 485dacf90..826d2cd4b 100644 --- a/ui/app/components/customize-gas-modal/index.js +++ b/ui/app/components/customize-gas-modal/index.js @@ -5,6 +5,8 @@ const connect = require('react-redux').connect const actions = require('../../actions') const GasModalCard = require('./gas-modal-card') +const ethUtil = require('ethereumjs-util') + const { MIN_GAS_PRICE_DEC, MIN_GAS_LIMIT_DEC, @@ -19,6 +21,7 @@ const { conversionUtil, multiplyCurrencies, conversionGreaterThan, + subtractCurrencies, } = require('../../conversion-util') const { @@ -30,6 +33,7 @@ const { getSendFrom, getCurrentAccountWithSendEtherInfo, getSelectedTokenToFiatRate, + getSendMaxModeState, } = require('../../selectors') function mapStateToProps (state) { @@ -42,6 +46,7 @@ function mapStateToProps (state) { gasLimit: getGasLimit(state), conversionRate, amount: getSendAmount(state), + maxModeOn: getSendMaxModeState(state), balance: currentAccount.balance, primaryCurrency: selectedToken && selectedToken.symbol, selectedToken, @@ -55,6 +60,7 @@ function mapDispatchToProps (dispatch) { updateGasPrice: newGasPrice => dispatch(actions.updateGasPrice(newGasPrice)), updateGasLimit: newGasLimit => dispatch(actions.updateGasLimit(newGasLimit)), updateGasTotal: newGasTotal => dispatch(actions.updateGasTotal(newGasTotal)), + updateSendAmount: newAmount => dispatch(actions.updateSendAmount(newAmount)), } } @@ -93,8 +99,21 @@ CustomizeGasModal.prototype.save = function (gasPrice, gasLimit, gasTotal) { updateGasLimit, hideModal, updateGasTotal, + maxModeOn, + selectedToken, + balance, + updateSendAmount, } = this.props + if (maxModeOn && !selectedToken) { + const maxAmount = subtractCurrencies( + ethUtil.addHexPrefix(balance), + ethUtil.addHexPrefix(gasTotal), + { toNumericBase: 'hex' } + ) + updateSendAmount(maxAmount) + } + updateGasPrice(gasPrice) updateGasLimit(gasLimit) updateGasTotal(gasTotal) @@ -112,12 +131,13 @@ CustomizeGasModal.prototype.validate = function ({ gasTotal, gasLimit }) { selectedToken, amountConversionRate, conversionRate, + maxModeOn, } = this.props let error = null const balanceIsSufficient = isBalanceSufficient({ - amount: selectedToken ? '0' : amount, + amount: selectedToken || maxModeOn ? '0' : amount, gasTotal, balance, selectedToken, -- cgit