From 89af385a352daf66ad1a6fb3bba75676fd3b9e7f Mon Sep 17 00:00:00 2001 From: Dan Date: Wed, 18 Oct 2017 15:38:53 -0230 Subject: Fix handling of arithmetic on token gas in confirm-send-token. --- ui/app/components/pending-tx/confirm-send-token.js | 49 +++++++++++++++------- ui/app/conversion-util.js | 8 ++-- ui/app/selectors.js | 11 ++++- 3 files changed, 47 insertions(+), 21 deletions(-) (limited to 'ui') diff --git a/ui/app/components/pending-tx/confirm-send-token.js b/ui/app/components/pending-tx/confirm-send-token.js index 92bba8f62..de716a26a 100644 --- a/ui/app/components/pending-tx/confirm-send-token.js +++ b/ui/app/components/pending-tx/confirm-send-token.js @@ -11,12 +11,22 @@ const Identicon = require('../identicon') const ethUtil = require('ethereumjs-util') const BN = ethUtil.BN const hexToBn = require('../../../../app/scripts/lib/hex-to-bn') -const { conversionUtil } = require('../../conversion-util') +const { + conversionUtil, + multiplyCurrencies, + addCurrencies, +} = require('../../conversion-util') const MIN_GAS_PRICE_GWEI_BN = new BN(1) const GWEI_FACTOR = new BN(1e9) const MIN_GAS_PRICE_BN = MIN_GAS_PRICE_GWEI_BN.mul(GWEI_FACTOR) +const { + getSelectedTokenExchangeRate, + getTokenExchangeRate, + getSelectedAddress, +} = require('../../selectors') + module.exports = connect(mapStateToProps, mapDispatchToProps)(ConfirmSendToken) function mapStateToProps (state, ownProps) { @@ -28,10 +38,8 @@ function mapStateToProps (state, ownProps) { identities, } = state.metamask const accounts = state.metamask.accounts - const selectedAddress = state.metamask.selectedAddress || Object.keys(accounts)[0] - const tokenExchangeRates = state.metamask.tokenExchangeRates - const pair = `${symbol.toLowerCase()}_eth` - const { rate: tokenExchangeRate = 0 } = tokenExchangeRates[pair] || {} + const selectedAddress = getSelectedAddress(state) + const tokenExchangeRate = getTokenExchangeRate(state, symbol) return { conversionRate, @@ -86,17 +94,14 @@ ConfirmSendToken.prototype.getGasFee = function () { const txParams = txMeta.txParams || {} const { decimals } = token - // Gas const gas = txParams.gas - const gasBn = hexToBn(gas) - - // Gas Price const gasPrice = txParams.gasPrice || MIN_GAS_PRICE_BN.toString(16) - const gasPriceBn = hexToBn(gasPrice) - const txFeeBn = gasBn.mul(gasPriceBn) - + const gasTotal = multiplyCurrencies(gas, gasPrice, { + multiplicandBase: 16, + multiplierBase: 16, + }) - const USD = conversionUtil(txFeeBn, { + const USD = conversionUtil(gasTotal, { fromNumericBase: 'BN', toNumericBase: 'dec', fromDenomination: 'WEI', @@ -105,7 +110,7 @@ ConfirmSendToken.prototype.getGasFee = function () { numberOfDecimals: 2, conversionRate, }) - const ETH = conversionUtil(txFeeBn, { + const ETH = conversionUtil(gasTotal, { fromNumericBase: 'BN', toNumericBase: 'dec', fromDenomination: 'WEI', @@ -114,12 +119,22 @@ ConfirmSendToken.prototype.getGasFee = function () { numberOfDecimals: 6, conversionRate, }) + const tokenGas = multiplyCurrencies(gas, gasPrice, { + toNumericBase: 'dec', + multiplicandBase: 16, + multiplierBase: 16, + toCurrency: 'BAT', + conversionRate: tokenExchangeRate, + invertConversionRate: true, + fromDenomination: 'WEI', + numberOfDecimals: decimals || 4, + }) return { fiat: +Number(USD).toFixed(2), eth: ETH, token: tokenExchangeRate - ? +(ETH * tokenExchangeRate).toFixed(decimals) + ? tokenGas : null, } } @@ -196,6 +211,8 @@ ConfirmSendToken.prototype.renderTotalPlusGas = function () { const { fiat: fiatAmount, token: tokenAmount } = this.getAmount() const { fiat: fiatGas, token: tokenGas } = this.getGasFee() + const tokenTotal = addCurrencies(tokenAmount, tokenGas || '0') + return fiatAmount && fiatGas ? ( h('section.flex-row.flex-center.confirm-screen-total-box ', [ @@ -206,7 +223,7 @@ ConfirmSendToken.prototype.renderTotalPlusGas = function () { h('div.confirm-screen-section-column', [ h('div.confirm-screen-row-info', `$${fiatAmount + fiatGas} USD`), - h('div.confirm-screen-row-detail', `${tokenAmount + tokenGas} ${symbol}`), + h('div.confirm-screen-row-detail', `${tokenTotal} ${symbol}`), ]), ]) ) diff --git a/ui/app/conversion-util.js b/ui/app/conversion-util.js index e008ee1cb..51c7bd355 100644 --- a/ui/app/conversion-util.js +++ b/ui/app/conversion-util.js @@ -147,16 +147,16 @@ const addCurrencies = (a, b, options = {}) => { const multiplyCurrencies = (a, b, options = {}) => { const { - toNumericBase, - numberOfDecimals, multiplicandBase, multiplierBase, + ...conversionOptions, } = options + const value = (new BigNumber(a, multiplicandBase)).times(b, multiplierBase); + return converter({ value, - toNumericBase, - numberOfDecimals, + ...conversionOptions, }) } diff --git a/ui/app/selectors.js b/ui/app/selectors.js index 9d4e6eb67..8806a516f 100644 --- a/ui/app/selectors.js +++ b/ui/app/selectors.js @@ -6,6 +6,7 @@ const selectors = { getSelectedAccount, getSelectedToken, getSelectedTokenExchangeRate, + getTokenExchangeRate, conversionRateSelector, transactionsSelector, accountsWithSendEtherInfoSelector, @@ -57,7 +58,15 @@ function getSelectedTokenExchangeRate (state) { return tokenExchangeRate } -function conversionRateSelector (state) { +function getTokenExchangeRate (state, tokenSymbol) { + const pair = `${tokenSymbol.toLowerCase()}_eth` + const tokenExchangeRates = state.metamask.tokenExchangeRates + const { rate: tokenExchangeRate = 0 } = tokenExchangeRates[pair] || {} + + return tokenExchangeRate +} + +function conversionRateSelector (state) { return state.metamask.conversionRate } -- cgit From 7362fb8dfc5b8d9f3ae9a3399f9448ea5720cd43 Mon Sep 17 00:00:00 2001 From: Dan Date: Wed, 18 Oct 2017 15:56:13 -0230 Subject: Identicon in send token show who you are sending to, not the token's identicon. --- ui/app/components/pending-tx/confirm-send-token.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) (limited to 'ui') diff --git a/ui/app/components/pending-tx/confirm-send-token.js b/ui/app/components/pending-tx/confirm-send-token.js index de716a26a..356da36c3 100644 --- a/ui/app/components/pending-tx/confirm-send-token.js +++ b/ui/app/components/pending-tx/confirm-send-token.js @@ -145,14 +145,14 @@ ConfirmSendToken.prototype.getData = function () { const { value } = params[0] || {} const txMeta = this.gatherTxMeta() const txParams = txMeta.txParams || {} - + return { from: { address: txParams.from, name: identities[txParams.from].name, }, to: { - address: txParams.to, + address: value, name: identities[value] ? identities[value].name : 'New Recipient', }, memo: txParams.memo || '', @@ -290,7 +290,7 @@ ConfirmSendToken.prototype.render = function () { h( Identicon, { - address: txParams.to, + address: toAddress, diameter: 60, }, ), -- 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. --- .../customize-gas-modal/gas-modal-card.js | 18 ++++++++--------- ui/app/components/customize-gas-modal/index.js | 17 ++++++++++------ ui/app/components/send/send-constants.js | 23 ++++++++++++++++++++++ ui/app/send-v2.js | 7 ++++--- 4 files changed, 47 insertions(+), 18 deletions(-) create mode 100644 ui/app/components/send/send-constants.js (limited to 'ui') diff --git a/ui/app/components/customize-gas-modal/gas-modal-card.js b/ui/app/components/customize-gas-modal/gas-modal-card.js index 8e739ee40..de181dc67 100644 --- a/ui/app/components/customize-gas-modal/gas-modal-card.js +++ b/ui/app/components/customize-gas-modal/gas-modal-card.js @@ -19,7 +19,7 @@ GasModalCard.prototype.render = function () { unitLabel, value, min, - max, + // max, step, title, copy @@ -34,20 +34,20 @@ GasModalCard.prototype.render = function () { h(InputNumber, { unitLabel, step, - max, + // max, min, placeholder: '0', value, onChange, }), - h(GasSlider, { - value, - step, - max, - min, - onChange, - }), + // h(GasSlider, { + // value, + // step, + // max, + // min, + // onChange, + // }), ]) 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', diff --git a/ui/app/components/send/send-constants.js b/ui/app/components/send/send-constants.js new file mode 100644 index 000000000..a819a8c28 --- /dev/null +++ b/ui/app/components/send/send-constants.js @@ -0,0 +1,23 @@ +const Identicon = require('../identicon') +const { multiplyCurrencies } = require('../../conversion-util') + +const MIN_GAS_PRICE_GWEI = '1' +const GWEI_FACTOR = '1e9' +const MIN_GAS_PRICE = multiplyCurrencies(GWEI_FACTOR, MIN_GAS_PRICE_GWEI, { + multiplicandBase: 16, + multiplierBase: 16, +}) +const MIN_GAS_LIMIT = (21000).toString(16) +const MIN_GAS_TOTAL = multiplyCurrencies(MIN_GAS_LIMIT, MIN_GAS_PRICE, { + toNumericBase: 'hex', + multiplicandBase: 16, + multiplierBase: 16, +}) + +module.exports = { + MIN_GAS_PRICE_GWEI, + GWEI_FACTOR, + MIN_GAS_PRICE, + MIN_GAS_LIMIT, + MIN_GAS_TOTAL, +} diff --git a/ui/app/send-v2.js b/ui/app/send-v2.js index c0a03690a..8915350a3 100644 --- a/ui/app/send-v2.js +++ b/ui/app/send-v2.js @@ -10,6 +10,8 @@ const CurrencyDisplay = require('./components/send/currency-display') const MemoTextArea = require('./components/send/memo-textarea') const GasFeeDisplay = require('./components/send/gas-fee-display-v2') +const { MIN_GAS_TOTAL } = require('./components/send/send-constants') + const { showModal } = require('./actions') const { @@ -135,9 +137,8 @@ SendTransactionScreen.prototype.renderHeader = function () { SendTransactionScreen.prototype.renderErrorMessage = function(errorType) { const { errors } = this.props - console.log(`! errors`, errors); const errorMessage = errors[errorType]; - console.log(`errorMessage`, errorMessage); + return errorMessage ? h('div.send-v2__error', [ errorMessage ] ) : null @@ -309,7 +310,7 @@ SendTransactionScreen.prototype.renderGasRow = function () { const { conversionRate, showCustomizeGasModal, - gasTotal, + gasTotal = MIN_GAS_TOTAL, } = this.props return h('div.send-v2__form-row', [ -- cgit