1
0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-23 09:52:26 +01:00

Make token confirmations compatible.

This commit is contained in:
Dan 2018-03-13 23:44:05 -02:30
parent 0d33aed20e
commit e94a14ef8a
2 changed files with 88 additions and 14 deletions

View File

@ -8,6 +8,7 @@ abiDecoder.addABI(tokenAbi)
const actions = require('../../actions') const actions = require('../../actions')
const clone = require('clone') const clone = require('clone')
const Identicon = require('../identicon') const Identicon = require('../identicon')
const GasFeeDisplay = require('../send/gas-fee-display-v2.js')
const ethUtil = require('ethereumjs-util') const ethUtil = require('ethereumjs-util')
const BN = ethUtil.BN const BN = ethUtil.BN
const { const {
@ -88,6 +89,42 @@ function mapDispatchToProps (dispatch, ownProps) {
})) }))
dispatch(actions.showSendTokenPage()) 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
let nonce
if (lastGasPrice) {
const stripped = ethUtil.stripHexPrefix(lastGasPrice)
forceGasMin = ethUtil.addHexPrefix(multiplyCurrencies(stripped, 1.1, {
multiplicandBase: 16,
multiplierBase: 10,
toNumericBase: 'hex',
fromDenomination: 'WEI',
toDenomination: 'GWEI',
}))
}
dispatch(actions.updateSend({
gasLimit: sendGasLimit || txGasLimit,
gasPrice: sendGasPrice || txGasPrice,
editingTransactionId: id,
gasTotal: sendGasTotal,
to,
amount: tokenAmountInHex,
forceGasMin,
}))
dispatch(actions.showModal({ name: 'CUSTOMIZE_GAS' }))
},
} }
} }
@ -187,6 +224,7 @@ ConfirmSendToken.prototype.getGasFee = function () {
token: tokenExchangeRate token: tokenExchangeRate
? tokenGas ? tokenGas
: null, : null,
gasFeeInHex: gasTotal.toString(16),
} }
} }
@ -239,19 +277,31 @@ ConfirmSendToken.prototype.renderHeroAmount = function () {
} }
ConfirmSendToken.prototype.renderGasFee = function () { ConfirmSendToken.prototype.renderGasFee = function () {
const { token: { symbol }, currentCurrency } = this.props const {
const { fiat: fiatGas, token: tokenGas, eth: ethGas } = this.getGasFee() token: { symbol },
currentCurrency: convertedCurrency,
conversionRate,
send: { gasTotal, gasLimit: sendGasLimit, gasPrice: sendGasPrice },
showCustomizeGasModal,
} = this.props
const txMeta = this.gatherTxMeta()
const {
fiat: fiatGas,
token: tokenGas,
eth: ethGas,
gasFeeInHex
} = this.getGasFee()
return ( return (
h('section.flex-row.flex-center.confirm-screen-row', [ h('section.flex-row.flex-center.confirm-screen-row', [
h('span.confirm-screen-label.confirm-screen-section-column', [ 'Gas Fee' ]), h('span.confirm-screen-label.confirm-screen-section-column', [ 'Gas Fee' ]),
h('div.confirm-screen-section-column', [ h('div.confirm-screen-section-column', [
h('div.confirm-screen-row-info', `${fiatGas} ${currentCurrency}`), h(GasFeeDisplay, {
gasTotal: gasTotal || gasFeeInHex,
h( conversionRate,
'div.confirm-screen-row-detail', convertedCurrency,
tokenGas ? `${tokenGas} ${symbol}` : `${ethGas} ETH` onClick: () => showCustomizeGasModal(txMeta, sendGasLimit, sendGasPrice, gasTotal),
), }),
]), ]),
]) ])
) )
@ -307,16 +357,21 @@ ConfirmSendToken.prototype.render = function () {
this.inputs = [] this.inputs = []
const title = txMeta.lastGasPrice ? 'Reprice Transaction' : 'Confirm'
const subtitle = txMeta.lastGasPrice
? 'Increase your gas fee to attempt to overwrite and speed up your transaction'
: 'Please review your transaction.'
return ( return (
h('div.confirm-screen-container.confirm-send-token', [ h('div.confirm-screen-container.confirm-send-token', [
// Main Send token Card // Main Send token Card
h('div.page-container', [ h('div.page-container', [
h('div.page-container__header', [ h('div.page-container__header', [
h('button.confirm-screen-back-button', { !txMeta.lastGasPrice && h('button.confirm-screen-back-button', {
onClick: () => editTransaction(txMeta), onClick: () => editTransaction(txMeta),
}, 'Edit'), }, 'Edit'),
h('div.page-container__title', 'Confirm'), h('div.page-container__title', title),
h('div.page-container__subtitle', `Please review your transaction.`), h('div.page-container__subtitle', subtitle),
]), ]),
h('div.flex-row.flex-center.confirm-screen-identicons', [ h('div.flex-row.flex-center.confirm-screen-identicons', [
h('div.confirm-screen-account-wrapper', [ h('div.confirm-screen-account-wrapper', [
@ -438,6 +493,14 @@ ConfirmSendToken.prototype.gatherTxMeta = function () {
const state = this.state const state = this.state
const txData = clone(state.txData) || clone(props.txData) const txData = clone(state.txData) || clone(props.txData)
if (txData.lastGasPrice) {
const { gasPrice: sendGasPrice, gas: sendGasLimit } = props.send
const { gasPrice: txGasPrice, gas: txGasLimit } = txData.txParams
txData.txParams.gasPrice = sendGasPrice || txGasPrice
txData.txParams.gas = sendGasLimit || txGasLimit
}
// log.debug(`UI has defaulted to tx meta ${JSON.stringify(txData)}`) // log.debug(`UI has defaulted to tx meta ${JSON.stringify(txData)}`)
return txData return txData
} }

View File

@ -28,6 +28,7 @@ function mapStateToProps (state) {
function mapDispatchToProps (dispatch) { function mapDispatchToProps (dispatch) {
return { return {
setSelectedToken: tokenAddress => dispatch(actions.setSelectedToken(tokenAddress)),
retryTransaction: transactionId => dispatch(actions.retryTransaction(transactionId)), retryTransaction: transactionId => dispatch(actions.retryTransaction(transactionId)),
} }
} }
@ -39,6 +40,7 @@ function TxListItem () {
this.state = { this.state = {
total: null, total: null,
fiatTotal: null, fiatTotal: null,
isTokenTx: null,
} }
} }
@ -47,12 +49,13 @@ TxListItem.prototype.componentDidMount = async function () {
const decodedData = txParams.data && abiDecoder.decodeMethod(txParams.data) const decodedData = txParams.data && abiDecoder.decodeMethod(txParams.data)
const { name: txDataName } = decodedData || {} const { name: txDataName } = decodedData || {}
const isTokenTx = txDataName === 'transfer'
const { total, fiatTotal } = txDataName === 'transfer' const { total, fiatTotal } = isTokenTx
? await this.getSendTokenTotal() ? await this.getSendTokenTotal()
: this.getSendEtherTotal() : this.getSendEtherTotal()
this.setState({ total, fiatTotal }) this.setState({ total, fiatTotal, isTokenTx })
} }
TxListItem.prototype.getAddressText = function () { TxListItem.prototype.getAddressText = function () {
@ -193,6 +196,10 @@ TxListItem.prototype.showRetryButton = function () {
return currentTxIsLatestWithNonce && Date.now() - transactionSubmittedTime > 30000 return currentTxIsLatestWithNonce && Date.now() - transactionSubmittedTime > 30000
} }
TxListItem.prototype.setSelectedToken = function (tokenAddress) {
this.props.setSelectedToken(tokenAddress)
}
TxListItem.prototype.resubmit = function () { TxListItem.prototype.resubmit = function () {
const { transactionId } = this.props const { transactionId } = this.props
this.props.retryTransaction(transactionId) this.props.retryTransaction(transactionId)
@ -207,8 +214,9 @@ TxListItem.prototype.render = function () {
dateString, dateString,
address, address,
className, className,
txParams,
} = this.props } = this.props
const { total, fiatTotal } = this.state const { total, fiatTotal, isTokenTx } = this.state
const showFiatTotal = transactionAmount !== '0x0' && fiatTotal const showFiatTotal = transactionAmount !== '0x0' && fiatTotal
return h(`div${className || ''}`, { return h(`div${className || ''}`, {
@ -280,6 +288,9 @@ TxListItem.prototype.render = function () {
h('span.tx-list-item-retry-link', { h('span.tx-list-item-retry-link', {
onClick: (event) => { onClick: (event) => {
event.stopPropagation() event.stopPropagation()
if (isTokenTx) {
this.setSelectedToken(txParams.to)
}
this.resubmit() this.resubmit()
}, },
}, 'Increase the gas price on your transaction'), }, 'Increase the gas price on your transaction'),