diff options
Diffstat (limited to 'ui/app/components/pending-tx/confirm-send-token.js')
| -rw-r--r-- | ui/app/components/pending-tx/confirm-send-token.js | 223 |
1 files changed, 146 insertions, 77 deletions
diff --git a/ui/app/components/pending-tx/confirm-send-token.js b/ui/app/components/pending-tx/confirm-send-token.js index 69afa8094..ccd87c0a4 100644 --- a/ui/app/components/pending-tx/confirm-send-token.js +++ b/ui/app/components/pending-tx/confirm-send-token.js @@ -9,6 +9,7 @@ const actions = require('../../actions') const t = require('../../../i18n') const clone = require('clone') const Identicon = require('../identicon') +const GasFeeDisplay = require('../send/gas-fee-display-v2.js') const ethUtil = require('ethereumjs-util') const BN = ethUtil.BN const { @@ -89,6 +90,39 @@ function mapDispatchToProps (dispatch, ownProps) { })) dispatch(actions.showSendTokenPage()) }, + showCustomizeGasModal: (txMeta, sendGasLimit, sendGasPrice, sendGasTotal) => { + const { id, txParams, lastGasPrice } = txMeta + const { gas: txGasLimit, gasPrice: txGasPrice } = txParams + const tokenData = txParams.data && abiDecoder.decodeMethod(txParams.data) + const { params = [] } = tokenData + const { value: to } = params[0] || {} + const { value: tokenAmountInDec } = params[1] || {} + const tokenAmountInHex = conversionUtil(tokenAmountInDec, { + fromNumericBase: 'dec', + toNumericBase: 'hex', + }) + + let forceGasMin + if (lastGasPrice) { + forceGasMin = ethUtil.addHexPrefix(multiplyCurrencies(lastGasPrice, 1.1, { + multiplicandBase: 16, + multiplierBase: 10, + toNumericBase: 'hex', + fromDenomination: 'WEI', + })) + } + + dispatch(actions.updateSend({ + gasLimit: sendGasLimit || txGasLimit, + gasPrice: sendGasPrice || txGasPrice, + editingTransactionId: id, + gasTotal: sendGasTotal, + to, + amount: tokenAmountInHex, + forceGasMin, + })) + dispatch(actions.showModal({ name: 'CUSTOMIZE_GAS' })) + }, } } @@ -188,6 +222,7 @@ ConfirmSendToken.prototype.getGasFee = function () { token: tokenExchangeRate ? tokenGas : null, + gasFeeInHex: gasTotal.toString(16), } } @@ -240,19 +275,25 @@ ConfirmSendToken.prototype.renderHeroAmount = function () { } ConfirmSendToken.prototype.renderGasFee = function () { - const { token: { symbol }, currentCurrency } = this.props - const { fiat: fiatGas, token: tokenGas, eth: ethGas } = this.getGasFee() + const { + currentCurrency: convertedCurrency, + conversionRate, + send: { gasTotal, gasLimit: sendGasLimit, gasPrice: sendGasPrice }, + showCustomizeGasModal, + } = this.props + const txMeta = this.gatherTxMeta() + const { gasFeeInHex } = this.getGasFee() return ( h('section.flex-row.flex-center.confirm-screen-row', [ h('span.confirm-screen-label.confirm-screen-section-column', [ t('gasFee') ]), h('div.confirm-screen-section-column', [ - h('div.confirm-screen-row-info', `${fiatGas} ${currentCurrency}`), - - h( - 'div.confirm-screen-row-detail', - tokenGas ? `${tokenGas} ${symbol}` : `${ethGas} ETH` - ), + h(GasFeeDisplay, { + gasTotal: gasTotal || gasFeeInHex, + conversionRate, + convertedCurrency, + onClick: () => showCustomizeGasModal(txMeta, sendGasLimit, sendGasPrice, gasTotal), + }), ]), ]) ) @@ -265,7 +306,7 @@ ConfirmSendToken.prototype.renderTotalPlusGas = function () { return fiatAmount && fiatGas ? ( - h('section.flex-row.flex-center.confirm-screen-total-box ', [ + h('section.flex-row.flex-center.confirm-screen-row.confirm-screen-total-box ', [ h('div.confirm-screen-section-column', [ h('span.confirm-screen-label', [ t('total') + ' ' ]), h('div.confirm-screen-total-box__subtitle', [ t('amountPlusGas') ]), @@ -278,7 +319,7 @@ ConfirmSendToken.prototype.renderTotalPlusGas = function () { ]) ) : ( - h('section.flex-row.flex-center.confirm-screen-total-box ', [ + h('section.flex-row.flex-center.confirm-screen-row.confirm-screen-total-box ', [ h('div.confirm-screen-section-column', [ h('span.confirm-screen-label', [ t('total') + ' ' ]), h('div.confirm-screen-total-box__subtitle', [ t('amountPlusGas') ]), @@ -308,91 +349,98 @@ ConfirmSendToken.prototype.render = function () { this.inputs = [] + const title = txMeta.lastGasPrice ? 'Reprice Transaction' : t('confirm') + const subtitle = txMeta.lastGasPrice + ? 'Increase your gas fee to attempt to overwrite and speed up your transaction' + : t('pleaseReviewTransaction') + return ( h('div.confirm-screen-container.confirm-send-token', [ // Main Send token Card h('div.page-container', [ h('div.page-container__header', [ - h('button.confirm-screen-back-button', { + !txMeta.lastGasPrice && h('button.confirm-screen-back-button', { onClick: () => editTransaction(txMeta), }, t('edit')), - h('div.page-container__title', t('confirm')), - h('div.page-container__subtitle', t('pleaseReviewTransaction')), + h('div.page-container__title', title), + h('div.page-container__subtitle', subtitle), ]), - h('div.flex-row.flex-center.confirm-screen-identicons', [ - h('div.confirm-screen-account-wrapper', [ - h( - Identicon, - { - address: fromAddress, - diameter: 60, - }, - ), - h('span.confirm-screen-account-name', fromName), - // h('span.confirm-screen-account-number', fromAddress.slice(fromAddress.length - 4)), - ]), - h('i.fa.fa-arrow-right.fa-lg'), - h('div.confirm-screen-account-wrapper', [ - h( - Identicon, - { - address: toAddress, - diameter: 60, - }, - ), - h('span.confirm-screen-account-name', toName), - // h('span.confirm-screen-account-number', toAddress.slice(toAddress.length - 4)), - ]), - ]), - - // h('h3.flex-center.confirm-screen-sending-to-message', { - // style: { - // textAlign: 'center', - // fontSize: '16px', - // }, - // }, [ - // `You're sending to Recipient ...${toAddress.slice(toAddress.length - 4)}`, - // ]), - - this.renderHeroAmount(), - - h('div.confirm-screen-rows', [ - h('section.flex-row.flex-center.confirm-screen-row', [ - h('span.confirm-screen-label.confirm-screen-section-column', [ t('from') ]), - h('div.confirm-screen-section-column', [ - h('div.confirm-screen-row-info', fromName), - h('div.confirm-screen-row-detail', `...${fromAddress.slice(fromAddress.length - 4)}`), + h('.page-container__content', [ + h('div.flex-row.flex-center.confirm-screen-identicons', [ + h('div.confirm-screen-account-wrapper', [ + h( + Identicon, + { + address: fromAddress, + diameter: 60, + }, + ), + h('span.confirm-screen-account-name', fromName), + // h('span.confirm-screen-account-number', fromAddress.slice(fromAddress.length - 4)), + ]), + h('i.fa.fa-arrow-right.fa-lg'), + h('div.confirm-screen-account-wrapper', [ + h( + Identicon, + { + address: toAddress, + diameter: 60, + }, + ), + h('span.confirm-screen-account-name', toName), + // h('span.confirm-screen-account-number', toAddress.slice(toAddress.length - 4)), ]), ]), - toAddress && h('section.flex-row.flex-center.confirm-screen-row', [ - h('span.confirm-screen-label.confirm-screen-section-column', [ t('to') ]), - h('div.confirm-screen-section-column', [ - h('div.confirm-screen-row-info', toName), - h('div.confirm-screen-row-detail', `...${toAddress.slice(toAddress.length - 4)}`), + // h('h3.flex-center.confirm-screen-sending-to-message', { + // style: { + // textAlign: 'center', + // fontSize: '16px', + // }, + // }, [ + // `You're sending to Recipient ...${toAddress.slice(toAddress.length - 4)}`, + // ]), + + this.renderHeroAmount(), + + h('div.confirm-screen-rows', [ + h('section.flex-row.flex-center.confirm-screen-row', [ + h('span.confirm-screen-label.confirm-screen-section-column', [ t('from') ]), + h('div.confirm-screen-section-column', [ + h('div.confirm-screen-row-info', fromName), + h('div.confirm-screen-row-detail', `...${fromAddress.slice(fromAddress.length - 4)}`), + ]), ]), - ]), - this.renderGasFee(), + toAddress && h('section.flex-row.flex-center.confirm-screen-row', [ + h('span.confirm-screen-label.confirm-screen-section-column', [ t('to') ]), + h('div.confirm-screen-section-column', [ + h('div.confirm-screen-row-info', toName), + h('div.confirm-screen-row-detail', `...${toAddress.slice(toAddress.length - 4)}`), + ]), + ]), - this.renderTotalPlusGas(), + this.renderGasFee(), - ]), - ]), + this.renderTotalPlusGas(), - h('form#pending-tx-form', { - onSubmit: this.onSubmit, - }, [ - // Cancel Button - h('div.cancel.btn-light.confirm-screen-cancel-button.allcaps', { - onClick: (event) => this.cancel(event, txMeta), - }, t('cancel')), + ]), - // Accept Button - h('button.confirm-screen-confirm-button.allcaps', [t('confirm')]), + ]), + h('form#pending-tx-form', { + onSubmit: this.onSubmit, + }, [ + h('.page-container__footer', [ + // Cancel Button + h('button.btn-cancel.page-container__footer-button.allcaps', { + onClick: (event) => this.cancel(event, txMeta), + }, t('cancel')), + + // Accept Button + h('button.btn-confirm.page-container__footer-button.allcaps', [t('confirm')]), + ]), + ]), ]), - - ]) ) } @@ -439,6 +487,27 @@ ConfirmSendToken.prototype.gatherTxMeta = function () { const state = this.state const txData = clone(state.txData) || clone(props.txData) + const { gasPrice: sendGasPrice, gas: sendGasLimit } = props.send + const { + lastGasPrice, + txParams: { + gasPrice: txGasPrice, + gas: txGasLimit, + }, + } = txData + + let forceGasMin + if (lastGasPrice) { + forceGasMin = ethUtil.addHexPrefix(multiplyCurrencies(lastGasPrice, 1.1, { + multiplicandBase: 16, + multiplierBase: 10, + toNumericBase: 'hex', + })) + } + + txData.txParams.gasPrice = sendGasPrice || forceGasMin || txGasPrice + txData.txParams.gas = sendGasLimit || txGasLimit + // log.debug(`UI has defaulted to tx meta ${JSON.stringify(txData)}`) return txData } |