Alexander Tseung
6 years ago
parent
e16f5ab54d
commit
279bdfc2e7
@ -1,358 +0,0 @@ |
||||
const { Component } = require('react') |
||||
const connect = require('react-redux').connect |
||||
const h = require('react-hyperscript') |
||||
const PropTypes = require('prop-types') |
||||
const actions = require('../../actions') |
||||
const clone = require('clone') |
||||
const ethUtil = require('ethereumjs-util') |
||||
const BN = ethUtil.BN |
||||
const hexToBn = require('../../../../app/scripts/lib/hex-to-bn') |
||||
const { conversionUtil } = require('../../conversion-util') |
||||
const SenderToRecipient = require('../sender-to-recipient') |
||||
const NetworkDisplay = require('../network-display') |
||||
|
||||
const { MIN_GAS_PRICE_HEX } = require('../send/send.constants') |
||||
|
||||
class ConfirmDeployContract extends Component { |
||||
constructor (props) { |
||||
super(props) |
||||
|
||||
this.state = { |
||||
valid: false, |
||||
submitting: false, |
||||
} |
||||
} |
||||
|
||||
onSubmit (event) { |
||||
event.preventDefault() |
||||
const txMeta = this.gatherTxMeta() |
||||
const valid = this.checkValidity() |
||||
this.setState({ valid, submitting: true }) |
||||
|
||||
if (valid && this.verifyGasParams()) { |
||||
this.props.sendTransaction(txMeta, event) |
||||
} else { |
||||
this.props.displayWarning(this.context.t('invalidGasParams')) |
||||
this.setState({ submitting: false }) |
||||
} |
||||
} |
||||
|
||||
cancel (event, txMeta) { |
||||
event.preventDefault() |
||||
this.props.cancelTransaction(txMeta) |
||||
} |
||||
|
||||
checkValidity () { |
||||
const form = this.getFormEl() |
||||
const valid = form.checkValidity() |
||||
return valid |
||||
} |
||||
|
||||
getFormEl () { |
||||
const form = document.querySelector('form#pending-tx-form') |
||||
// Stub out form for unit tests:
|
||||
if (!form) { |
||||
return { checkValidity () { return true } } |
||||
} |
||||
return form |
||||
} |
||||
|
||||
// After a customizable state value has been updated,
|
||||
gatherTxMeta () { |
||||
const props = this.props |
||||
const state = this.state |
||||
const txData = clone(state.txData) || clone(props.txData) |
||||
|
||||
// log.debug(`UI has defaulted to tx meta ${JSON.stringify(txData)}`)
|
||||
return txData |
||||
} |
||||
|
||||
verifyGasParams () { |
||||
// We call this in case the gas has not been modified at all
|
||||
if (!this.state) { return true } |
||||
return ( |
||||
this._notZeroOrEmptyString(this.state.gas) && |
||||
this._notZeroOrEmptyString(this.state.gasPrice) |
||||
) |
||||
} |
||||
|
||||
_notZeroOrEmptyString (obj) { |
||||
return obj !== '' && obj !== '0x0' |
||||
} |
||||
|
||||
bnMultiplyByFraction (targetBN, numerator, denominator) { |
||||
const numBN = new BN(numerator) |
||||
const denomBN = new BN(denominator) |
||||
return targetBN.mul(numBN).div(denomBN) |
||||
} |
||||
|
||||
getData () { |
||||
const { identities } = this.props |
||||
const txMeta = this.gatherTxMeta() |
||||
const txParams = txMeta.txParams || {} |
||||
|
||||
return { |
||||
from: { |
||||
address: txParams.from, |
||||
name: identities[txParams.from].name, |
||||
}, |
||||
memo: txParams.memo || '', |
||||
} |
||||
} |
||||
|
||||
getAmount () { |
||||
const { conversionRate, currentCurrency } = this.props |
||||
const txMeta = this.gatherTxMeta() |
||||
const txParams = txMeta.txParams || {} |
||||
|
||||
const FIAT = conversionUtil(txParams.value, { |
||||
fromNumericBase: 'hex', |
||||
toNumericBase: 'dec', |
||||
fromCurrency: 'ETH', |
||||
toCurrency: currentCurrency, |
||||
numberOfDecimals: 2, |
||||
fromDenomination: 'WEI', |
||||
conversionRate, |
||||
}) |
||||
const ETH = conversionUtil(txParams.value, { |
||||
fromNumericBase: 'hex', |
||||
toNumericBase: 'dec', |
||||
fromCurrency: 'ETH', |
||||
toCurrency: 'ETH', |
||||
fromDenomination: 'WEI', |
||||
conversionRate, |
||||
numberOfDecimals: 6, |
||||
}) |
||||
|
||||
return { |
||||
fiat: Number(FIAT), |
||||
token: Number(ETH), |
||||
} |
||||
|
||||
} |
||||
|
||||
getGasFee () { |
||||
const { conversionRate, currentCurrency } = this.props |
||||
const txMeta = this.gatherTxMeta() |
||||
const txParams = txMeta.txParams || {} |
||||
|
||||
// Gas
|
||||
const gas = txParams.gas |
||||
const gasBn = hexToBn(gas) |
||||
|
||||
// Gas Price
|
||||
const gasPrice = txParams.gasPrice || MIN_GAS_PRICE_HEX |
||||
const gasPriceBn = hexToBn(gasPrice) |
||||
|
||||
const txFeeBn = gasBn.mul(gasPriceBn) |
||||
|
||||
const FIAT = conversionUtil(txFeeBn, { |
||||
fromNumericBase: 'BN', |
||||
toNumericBase: 'dec', |
||||
fromDenomination: 'WEI', |
||||
fromCurrency: 'ETH', |
||||
toCurrency: currentCurrency, |
||||
numberOfDecimals: 2, |
||||
conversionRate, |
||||
}) |
||||
const ETH = conversionUtil(txFeeBn, { |
||||
fromNumericBase: 'BN', |
||||
toNumericBase: 'dec', |
||||
fromDenomination: 'WEI', |
||||
fromCurrency: 'ETH', |
||||
toCurrency: 'ETH', |
||||
numberOfDecimals: 6, |
||||
conversionRate, |
||||
}) |
||||
|
||||
return { |
||||
fiat: Number(FIAT), |
||||
eth: Number(ETH), |
||||
} |
||||
} |
||||
|
||||
renderGasFee () { |
||||
const { currentCurrency } = this.props |
||||
const { fiat: fiatGas, eth: ethGas } = this.getGasFee() |
||||
|
||||
return ( |
||||
h('section.flex-row.flex-center.confirm-screen-row', [ |
||||
h('span.confirm-screen-label.confirm-screen-section-column', [ this.context.t('gasFee') ]), |
||||
h('div.confirm-screen-section-column', [ |
||||
h('div.confirm-screen-row-info', `${fiatGas} ${currentCurrency.toUpperCase()}`), |
||||
|
||||
h( |
||||
'div.confirm-screen-row-detail', |
||||
`${ethGas} ETH` |
||||
), |
||||
]), |
||||
]) |
||||
) |
||||
} |
||||
|
||||
renderHeroAmount () { |
||||
const { currentCurrency } = this.props |
||||
const { fiat: fiatAmount } = this.getAmount() |
||||
const txMeta = this.gatherTxMeta() |
||||
const txParams = txMeta.txParams || {} |
||||
const { memo = '' } = txParams |
||||
|
||||
return ( |
||||
h('div.confirm-send-token__hero-amount-wrapper', [ |
||||
h('h3.flex-center.confirm-screen-send-amount', `${fiatAmount}`), |
||||
h('h3.flex-center.confirm-screen-send-amount-currency', currentCurrency.toUpperCase()), |
||||
h('div.flex-center.confirm-memo-wrapper', [ |
||||
h('h3.confirm-screen-send-memo', memo), |
||||
]), |
||||
]) |
||||
) |
||||
} |
||||
|
||||
renderTotalPlusGas () { |
||||
const { currentCurrency } = this.props |
||||
const { fiat: fiatAmount, token: tokenAmount } = this.getAmount() |
||||
const { fiat: fiatGas, eth: ethGas } = this.getGasFee() |
||||
|
||||
return ( |
||||
h('section.flex-row.flex-center.confirm-screen-row.confirm-screen-total-box ', [ |
||||
h('div.confirm-screen-section-column', [ |
||||
h('span.confirm-screen-label', [ this.context.t('total') + ' ' ]), |
||||
h('div.confirm-screen-total-box__subtitle', [ this.context.t('amountPlusGas') ]), |
||||
]), |
||||
|
||||
h('div.confirm-screen-section-column', [ |
||||
h('div.confirm-screen-row-info', `${fiatAmount + fiatGas} ${currentCurrency.toUpperCase()}`), |
||||
h('div.confirm-screen-row-detail', `${tokenAmount + ethGas} ETH`), |
||||
]), |
||||
]) |
||||
) |
||||
} |
||||
|
||||
render () { |
||||
const { backToAccountDetail, selectedAddress } = this.props |
||||
const txMeta = this.gatherTxMeta() |
||||
|
||||
const { |
||||
from: { |
||||
address: fromAddress, |
||||
name: fromName, |
||||
}, |
||||
} = this.getData() |
||||
|
||||
this.inputs = [] |
||||
|
||||
return ( |
||||
h('.page-container', [ |
||||
h('.page-container__header', [ |
||||
h('.page-container__header-row', [ |
||||
h('span.page-container__back-button', { |
||||
onClick: () => backToAccountDetail(selectedAddress), |
||||
}, this.context.t('back')), |
||||
window.METAMASK_UI_TYPE === 'notification' && h(NetworkDisplay), |
||||
]), |
||||
h('.page-container__title', this.context.t('confirmContract')), |
||||
h('.page-container__subtitle', this.context.t('pleaseReviewTransaction')), |
||||
]), |
||||
// Main Send token Card
|
||||
h('.page-container__content', [ |
||||
|
||||
h(SenderToRecipient, { |
||||
senderName: fromName, |
||||
senderAddress: fromAddress, |
||||
}), |
||||
|
||||
// h('h3.flex-center.confirm-screen-sending-to-message', {
|
||||
// style: {
|
||||
// textAlign: 'center',
|
||||
// fontSize: '16px',
|
||||
// },
|
||||
// }, [
|
||||
// `You're deploying a new contract.`,
|
||||
// ]),
|
||||
|
||||
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', [ this.context.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('section.flex-row.flex-center.confirm-screen-row', [ |
||||
h('span.confirm-screen-label.confirm-screen-section-column', [ this.context.t('to') ]), |
||||
h('div.confirm-screen-section-column', [ |
||||
h('div.confirm-screen-row-info', this.context.t('newContract')), |
||||
]), |
||||
]), |
||||
|
||||
this.renderGasFee(), |
||||
|
||||
this.renderTotalPlusGas(), |
||||
|
||||
]), |
||||
]), |
||||
|
||||
h('form#pending-tx-form', { |
||||
onSubmit: event => this.onSubmit(event), |
||||
}, [ |
||||
h('.page-container__footer', [ |
||||
// Cancel Button
|
||||
h('button.btn-cancel.page-container__footer-button.allcaps', { |
||||
onClick: event => this.cancel(event, txMeta), |
||||
}, this.context.t('cancel')), |
||||
|
||||
// Accept Button
|
||||
h('button.btn-confirm.page-container__footer-button.allcaps', { |
||||
onClick: event => this.onSubmit(event), |
||||
}, this.context.t('confirm')), |
||||
]), |
||||
]), |
||||
]) |
||||
) |
||||
} |
||||
} |
||||
|
||||
ConfirmDeployContract.propTypes = { |
||||
sendTransaction: PropTypes.func, |
||||
cancelTransaction: PropTypes.func, |
||||
backToAccountDetail: PropTypes.func, |
||||
displayWarning: PropTypes.func, |
||||
identities: PropTypes.object, |
||||
conversionRate: PropTypes.number, |
||||
currentCurrency: PropTypes.string, |
||||
selectedAddress: PropTypes.string, |
||||
t: PropTypes.func, |
||||
} |
||||
|
||||
const mapStateToProps = state => { |
||||
const { |
||||
conversionRate, |
||||
identities, |
||||
currentCurrency, |
||||
} = state.metamask |
||||
const accounts = state.metamask.accounts |
||||
const selectedAddress = state.metamask.selectedAddress || Object.keys(accounts)[0] |
||||
return { |
||||
currentCurrency, |
||||
conversionRate, |
||||
identities, |
||||
selectedAddress, |
||||
} |
||||
} |
||||
|
||||
const mapDispatchToProps = dispatch => { |
||||
return { |
||||
backToAccountDetail: address => dispatch(actions.backToAccountDetail(address)), |
||||
cancelTransaction: ({ id }) => dispatch(actions.cancelTx({ id })), |
||||
displayWarning: warning => actions.displayWarning(warning), |
||||
} |
||||
} |
||||
|
||||
ConfirmDeployContract.contextTypes = { |
||||
t: PropTypes.func, |
||||
} |
||||
|
||||
module.exports = connect(mapStateToProps, mapDispatchToProps)(ConfirmDeployContract) |
||||
@ -1,692 +0,0 @@ |
||||
const Component = require('react').Component |
||||
const { withRouter } = require('react-router-dom') |
||||
const { compose } = require('recompose') |
||||
const PropTypes = require('prop-types') |
||||
const connect = require('react-redux').connect |
||||
const h = require('react-hyperscript') |
||||
const inherits = require('util').inherits |
||||
const actions = require('../../actions') |
||||
const clone = require('clone') |
||||
const ethUtil = require('ethereumjs-util') |
||||
const BN = ethUtil.BN |
||||
const hexToBn = require('../../../../app/scripts/lib/hex-to-bn') |
||||
const classnames = require('classnames') |
||||
const { |
||||
conversionUtil, |
||||
addCurrencies, |
||||
multiplyCurrencies, |
||||
} = require('../../conversion-util') |
||||
const { |
||||
calcGasTotal, |
||||
isBalanceSufficient, |
||||
} = require('../send/send.utils') |
||||
const GasFeeDisplay = require('../send/send-content/send-gas-row/gas-fee-display/').default |
||||
const SenderToRecipient = require('../sender-to-recipient') |
||||
const NetworkDisplay = require('../network-display') |
||||
const currencyFormatter = require('currency-formatter') |
||||
const currencies = require('currency-formatter/currencies') |
||||
|
||||
const { MIN_GAS_PRICE_HEX } = require('../send/send.constants') |
||||
const { SEND_ROUTE, DEFAULT_ROUTE } = require('../../routes') |
||||
const { |
||||
ENVIRONMENT_TYPE_POPUP, |
||||
ENVIRONMENT_TYPE_NOTIFICATION, |
||||
} = require('../../../../app/scripts/lib/enums') |
||||
|
||||
import { |
||||
updateSendErrors, |
||||
} from '../../ducks/send.duck' |
||||
|
||||
ConfirmSendEther.contextTypes = { |
||||
t: PropTypes.func, |
||||
} |
||||
|
||||
module.exports = compose( |
||||
withRouter, |
||||
connect(mapStateToProps, mapDispatchToProps) |
||||
)(ConfirmSendEther) |
||||
|
||||
|
||||
function mapStateToProps (state) { |
||||
const { |
||||
conversionRate, |
||||
identities, |
||||
currentCurrency, |
||||
send, |
||||
} = state.metamask |
||||
const accounts = state.metamask.accounts |
||||
const selectedAddress = state.metamask.selectedAddress || Object.keys(accounts)[0] |
||||
const { balance } = accounts[selectedAddress] |
||||
return { |
||||
conversionRate, |
||||
identities, |
||||
selectedAddress, |
||||
currentCurrency, |
||||
send, |
||||
balance, |
||||
} |
||||
} |
||||
|
||||
function mapDispatchToProps (dispatch) { |
||||
return { |
||||
clearSend: () => dispatch(actions.clearSend()), |
||||
editTransaction: txMeta => { |
||||
const { id, txParams } = txMeta |
||||
const { |
||||
gas: gasLimit, |
||||
gasPrice, |
||||
to, |
||||
value: amount, |
||||
} = txParams |
||||
|
||||
dispatch(actions.updateSend({ |
||||
gasLimit, |
||||
gasPrice, |
||||
gasTotal: null, |
||||
to, |
||||
amount, |
||||
errors: { to: null, amount: null }, |
||||
editingTransactionId: id, |
||||
})) |
||||
}, |
||||
cancelTransaction: ({ id }) => dispatch(actions.cancelTx({ id })), |
||||
showCustomizeGasModal: (txMeta, sendGasLimit, sendGasPrice, sendGasTotal) => { |
||||
const { id, txParams, lastGasPrice } = txMeta |
||||
const { gas: txGasLimit, gasPrice: txGasPrice } = txParams |
||||
|
||||
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, |
||||
forceGasMin, |
||||
})) |
||||
dispatch(actions.showModal({ name: 'CUSTOMIZE_GAS' })) |
||||
}, |
||||
updateSendErrors: error => dispatch(updateSendErrors(error)), |
||||
} |
||||
} |
||||
|
||||
inherits(ConfirmSendEther, Component) |
||||
function ConfirmSendEther () { |
||||
Component.call(this) |
||||
this.state = {} |
||||
this.onSubmit = this.onSubmit.bind(this) |
||||
} |
||||
|
||||
ConfirmSendEther.prototype.updateComponentSendErrors = function (prevProps) { |
||||
const { |
||||
balance: oldBalance, |
||||
conversionRate: oldConversionRate, |
||||
} = prevProps |
||||
const { |
||||
updateSendErrors, |
||||
balance, |
||||
conversionRate, |
||||
send: { |
||||
errors: { |
||||
simulationFails, |
||||
}, |
||||
}, |
||||
} = this.props |
||||
const txMeta = this.gatherTxMeta() |
||||
|
||||
const shouldUpdateBalanceSendErrors = balance && [ |
||||
balance !== oldBalance, |
||||
conversionRate !== oldConversionRate, |
||||
].some(x => Boolean(x)) |
||||
|
||||
if (shouldUpdateBalanceSendErrors) { |
||||
const balanceIsSufficient = this.isBalanceSufficient(txMeta) |
||||
updateSendErrors({ |
||||
insufficientFunds: balanceIsSufficient ? false : 'insufficientFunds', |
||||
}) |
||||
} |
||||
|
||||
const shouldUpdateSimulationSendError = Boolean(txMeta.simulationFails) !== Boolean(simulationFails) |
||||
|
||||
if (shouldUpdateSimulationSendError) { |
||||
updateSendErrors({ |
||||
simulationFails: !txMeta.simulationFails ? false : 'transactionError', |
||||
}) |
||||
} |
||||
} |
||||
|
||||
ConfirmSendEther.prototype.componentWillMount = function () { |
||||
this.updateComponentSendErrors({}) |
||||
} |
||||
|
||||
ConfirmSendEther.prototype.componentDidUpdate = function (prevProps) { |
||||
this.updateComponentSendErrors(prevProps) |
||||
} |
||||
|
||||
ConfirmSendEther.prototype.getAmount = function () { |
||||
const { conversionRate, currentCurrency } = this.props |
||||
const txMeta = this.gatherTxMeta() |
||||
const txParams = txMeta.txParams || {} |
||||
|
||||
const FIAT = conversionUtil(txParams.value, { |
||||
fromNumericBase: 'hex', |
||||
toNumericBase: 'dec', |
||||
fromCurrency: 'ETH', |
||||
toCurrency: currentCurrency, |
||||
numberOfDecimals: 2, |
||||
fromDenomination: 'WEI', |
||||
conversionRate, |
||||
}) |
||||
const ETH = conversionUtil(txParams.value, { |
||||
fromNumericBase: 'hex', |
||||
toNumericBase: 'dec', |
||||
fromCurrency: 'ETH', |
||||
toCurrency: 'ETH', |
||||
fromDenomination: 'WEI', |
||||
conversionRate, |
||||
numberOfDecimals: 6, |
||||
}) |
||||
|
||||
return { |
||||
FIAT, |
||||
ETH, |
||||
} |
||||
|
||||
} |
||||
|
||||
ConfirmSendEther.prototype.getGasFee = function () { |
||||
const { conversionRate, currentCurrency } = this.props |
||||
const txMeta = this.gatherTxMeta() |
||||
const txParams = txMeta.txParams || {} |
||||
|
||||
// Gas
|
||||
const gas = txParams.gas |
||||
const gasBn = hexToBn(gas) |
||||
|
||||
// From latest master
|
||||
// const gasLimit = new BN(parseInt(blockGasLimit))
|
||||
// const safeGasLimitBN = this.bnMultiplyByFraction(gasLimit, 19, 20)
|
||||
// const saferGasLimitBN = this.bnMultiplyByFraction(gasLimit, 18, 20)
|
||||
// const safeGasLimit = safeGasLimitBN.toString(10)
|
||||
|
||||
// Gas Price
|
||||
const gasPrice = txParams.gasPrice || MIN_GAS_PRICE_HEX |
||||
const gasPriceBn = hexToBn(gasPrice) |
||||
|
||||
const txFeeBn = gasBn.mul(gasPriceBn) |
||||
|
||||
const FIAT = conversionUtil(txFeeBn, { |
||||
fromNumericBase: 'BN', |
||||
toNumericBase: 'dec', |
||||
fromDenomination: 'WEI', |
||||
fromCurrency: 'ETH', |
||||
toCurrency: currentCurrency, |
||||
numberOfDecimals: 2, |
||||
conversionRate, |
||||
}) |
||||
const ETH = conversionUtil(txFeeBn, { |
||||
fromNumericBase: 'BN', |
||||
toNumericBase: 'dec', |
||||
fromDenomination: 'WEI', |
||||
fromCurrency: 'ETH', |
||||
toCurrency: 'ETH', |
||||
numberOfDecimals: 6, |
||||
conversionRate, |
||||
}) |
||||
|
||||
return { |
||||
FIAT, |
||||
ETH, |
||||
gasFeeInHex: txFeeBn.toString(16), |
||||
} |
||||
} |
||||
|
||||
ConfirmSendEther.prototype.getData = function () { |
||||
const { identities } = this.props |
||||
const txMeta = this.gatherTxMeta() |
||||
const txParams = txMeta.txParams || {} |
||||
const account = identities ? identities[txParams.from] || {} : {} |
||||
const { FIAT: gasFeeInFIAT, ETH: gasFeeInETH, gasFeeInHex } = this.getGasFee() |
||||
const { FIAT: amountInFIAT, ETH: amountInETH } = this.getAmount() |
||||
|
||||
const totalInFIAT = addCurrencies(gasFeeInFIAT, amountInFIAT, { |
||||
toNumericBase: 'dec', |
||||
numberOfDecimals: 2, |
||||
}) |
||||
const totalInETH = addCurrencies(gasFeeInETH, amountInETH, { |
||||
toNumericBase: 'dec', |
||||
numberOfDecimals: 6, |
||||
}) |
||||
|
||||
return { |
||||
from: { |
||||
address: txParams.from, |
||||
name: account.name, |
||||
}, |
||||
to: { |
||||
address: txParams.to, |
||||
name: identities[txParams.to] ? identities[txParams.to].name : this.context.t('newRecipient'), |
||||
}, |
||||
memo: txParams.memo || '', |
||||
gasFeeInFIAT, |
||||
gasFeeInETH, |
||||
amountInFIAT, |
||||
amountInETH, |
||||
totalInFIAT, |
||||
totalInETH, |
||||
gasFeeInHex, |
||||
} |
||||
} |
||||
|
||||
ConfirmSendEther.prototype.convertToRenderableCurrency = function (value, currencyCode) { |
||||
const upperCaseCurrencyCode = currencyCode.toUpperCase() |
||||
|
||||
return currencies.find(currency => currency.code === upperCaseCurrencyCode) |
||||
? currencyFormatter.format(Number(value), { |
||||
code: upperCaseCurrencyCode, |
||||
}) |
||||
: value |
||||
} |
||||
|
||||
ConfirmSendEther.prototype.editTransaction = function () { |
||||
const { editTransaction, history } = this.props |
||||
const txMeta = this.gatherTxMeta() |
||||
editTransaction(txMeta) |
||||
history.push(SEND_ROUTE) |
||||
} |
||||
|
||||
ConfirmSendEther.prototype.renderHeaderRow = function (isTxReprice) { |
||||
const windowType = window.METAMASK_UI_TYPE |
||||
const isFullScreen = windowType !== ENVIRONMENT_TYPE_NOTIFICATION && |
||||
windowType !== ENVIRONMENT_TYPE_POPUP |
||||
|
||||
if (isTxReprice && isFullScreen) { |
||||
return null |
||||
} |
||||
|
||||
return ( |
||||
h('.page-container__header-row', [ |
||||
h('span.page-container__back-button', { |
||||
onClick: () => this.editTransaction(), |
||||
style: { |
||||
visibility: isTxReprice ? 'hidden' : 'initial', |
||||
}, |
||||
}, 'Edit'), |
||||
!isFullScreen && h(NetworkDisplay), |
||||
]) |
||||
) |
||||
} |
||||
|
||||
ConfirmSendEther.prototype.renderHeader = function (isTxReprice) { |
||||
const title = isTxReprice ? this.context.t('speedUpTitle') : this.context.t('confirm') |
||||
const subtitle = isTxReprice |
||||
? this.context.t('speedUpSubtitle') |
||||
: this.context.t('pleaseReviewTransaction') |
||||
|
||||
return ( |
||||
h('.page-container__header', [ |
||||
this.renderHeaderRow(isTxReprice), |
||||
h('.page-container__title', title), |
||||
h('.page-container__subtitle', subtitle), |
||||
]) |
||||
) |
||||
} |
||||
|
||||
ConfirmSendEther.prototype.render = function () { |
||||
const { |
||||
currentCurrency, |
||||
clearSend, |
||||
conversionRate, |
||||
currentCurrency: convertedCurrency, |
||||
showCustomizeGasModal, |
||||
send: { |
||||
gasTotal, |
||||
gasLimit: sendGasLimit, |
||||
gasPrice: sendGasPrice, |
||||
errors, |
||||
}, |
||||
} = this.props |
||||
const txMeta = this.gatherTxMeta() |
||||
const isTxReprice = Boolean(txMeta.lastGasPrice) |
||||
const txParams = txMeta.txParams || {} |
||||
|
||||
const { |
||||
from: { |
||||
address: fromAddress, |
||||
name: fromName, |
||||
}, |
||||
to: { |
||||
address: toAddress, |
||||
name: toName, |
||||
}, |
||||
memo, |
||||
gasFeeInHex, |
||||
amountInFIAT, |
||||
totalInFIAT, |
||||
totalInETH, |
||||
} = this.getData() |
||||
|
||||
const convertedAmountInFiat = this.convertToRenderableCurrency(amountInFIAT, currentCurrency) |
||||
const convertedTotalInFiat = this.convertToRenderableCurrency(totalInFIAT, currentCurrency) |
||||
|
||||
// This is from the latest master
|
||||
// It handles some of the errors that we are not currently handling
|
||||
// Leaving as comments fo reference
|
||||
|
||||
// const balanceBn = hexToBn(balance)
|
||||
// const insufficientBalance = balanceBn.lt(maxCost)
|
||||
// const buyDisabled = insufficientBalance || !this.state.valid || !isValidAddress || this.state.submitting
|
||||
// const showRejectAll = props.unconfTxListLength > 1
|
||||
// const dangerousGasLimit = gasBn.gte(saferGasLimitBN)
|
||||
// const gasLimitSpecified = txMeta.gasLimitSpecified
|
||||
|
||||
this.inputs = [] |
||||
|
||||
return ( |
||||
// Main Send token Card
|
||||
h('.page-container', [ |
||||
this.renderHeader(isTxReprice), |
||||
h('.page-container__content', [ |
||||
h(SenderToRecipient, { |
||||
senderName: fromName, |
||||
senderAddress: fromAddress, |
||||
recipientName: toName, |
||||
recipientAddress: txParams.to, |
||||
}), |
||||
|
||||
// h('h3.flex-center.confirm-screen-sending-to-message', {
|
||||
// style: {
|
||||
// textAlign: 'center',
|
||||
// fontSize: '16px',
|
||||
// },
|
||||
// }, [
|
||||
// `You're sending to Recipient ...${toAddress.slice(toAddress.length - 4)}`,
|
||||
// ]),
|
||||
|
||||
h('h3.flex-center.confirm-screen-send-amount', [`${convertedAmountInFiat}`]), |
||||
h('h3.flex-center.confirm-screen-send-amount-currency', [ currentCurrency.toUpperCase() ]), |
||||
h('div.flex-center.confirm-memo-wrapper', [ |
||||
h('h3.confirm-screen-send-memo', [ memo ? `"${memo}"` : '' ]), |
||||
]), |
||||
|
||||
h('div.confirm-screen-rows', [ |
||||
h('section.flex-row.flex-center.confirm-screen-row', [ |
||||
h('span.confirm-screen-label.confirm-screen-section-column', [ this.context.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('section.flex-row.flex-center.confirm-screen-row', [ |
||||
h('span.confirm-screen-label.confirm-screen-section-column', [ this.context.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('section.flex-row.flex-center.confirm-screen-row', [ |
||||
h('span.confirm-screen-label.confirm-screen-section-column', [ this.context.t('gasFee') ]), |
||||
h('div.confirm-screen-section-column', [ |
||||
h(GasFeeDisplay, { |
||||
gasTotal: gasTotal || gasFeeInHex, |
||||
conversionRate, |
||||
convertedCurrency, |
||||
onClick: () => showCustomizeGasModal(txMeta, sendGasLimit, sendGasPrice, gasTotal), |
||||
}), |
||||
]), |
||||
]), |
||||
|
||||
h('section.flex-row.flex-center.confirm-screen-row.confirm-screen-total-box ', [ |
||||
h('div', { |
||||
className: classnames({ |
||||
'confirm-screen-section-column--with-error': errors['insufficientFunds'], |
||||
'confirm-screen-section-column': !errors['insufficientFunds'], |
||||
}), |
||||
}, [ |
||||
h('span.confirm-screen-label', [ this.context.t('total') + ' ' ]), |
||||
h('div.confirm-screen-total-box__subtitle', [ this.context.t('amountPlusGas') ]), |
||||
]), |
||||
|
||||
h('div.confirm-screen-section-column', [ |
||||
h('div.confirm-screen-row-info', `${convertedTotalInFiat} ${currentCurrency.toUpperCase()}`), |
||||
h('div.confirm-screen-row-detail', `${totalInETH} ETH`), |
||||
]), |
||||
|
||||
this.renderErrorMessage('insufficientFunds'), |
||||
]), |
||||
]), |
||||
|
||||
// These are latest errors handling from master
|
||||
// Leaving as comments as reference when we start implementing error handling
|
||||
// h('style', `
|
||||
// .conf-buttons button {
|
||||
// margin-left: 10px;
|
||||
// text-transform: uppercase;
|
||||
// }
|
||||
// `),
|
||||
|
||||
// txMeta.simulationFails ?
|
||||
// h('.error', {
|
||||
// style: {
|
||||
// marginLeft: 50,
|
||||
// fontSize: '0.9em',
|
||||
// },
|
||||
// }, 'Transaction Error. Exception thrown in contract code.')
|
||||
// : null,
|
||||
|
||||
// !isValidAddress ?
|
||||
// h('.error', {
|
||||
// style: {
|
||||
// marginLeft: 50,
|
||||
// fontSize: '0.9em',
|
||||
// },
|
||||
// }, 'Recipient address is invalid. Sending this transaction will result in a loss of ETH.')
|
||||
// : null,
|
||||
|
||||
// insufficientBalance ?
|
||||
// h('span.error', {
|
||||
// style: {
|
||||
// marginLeft: 50,
|
||||
// fontSize: '0.9em',
|
||||
// },
|
||||
// }, 'Insufficient balance for transaction')
|
||||
// : null,
|
||||
|
||||
// // send + cancel
|
||||
// h('.flex-row.flex-space-around.conf-buttons', {
|
||||
// style: {
|
||||
// display: 'flex',
|
||||
// justifyContent: 'flex-end',
|
||||
// margin: '14px 25px',
|
||||
// },
|
||||
// }, [
|
||||
// h('button', {
|
||||
// onClick: (event) => {
|
||||
// this.resetGasFields()
|
||||
// event.preventDefault()
|
||||
// },
|
||||
// }, 'Reset'),
|
||||
|
||||
// // Accept Button or Buy Button
|
||||
// insufficientBalance ? h('button.btn-green', { onClick: props.buyEth }, 'Buy Ether') :
|
||||
// h('input.confirm.btn-green', {
|
||||
// type: 'submit',
|
||||
// value: 'SUBMIT',
|
||||
// style: { marginLeft: '10px' },
|
||||
// disabled: buyDisabled,
|
||||
// }),
|
||||
|
||||
// h('button.cancel.btn-red', {
|
||||
// onClick: props.cancelTransaction,
|
||||
// }, 'Reject'),
|
||||
// ]),
|
||||
// showRejectAll ? h('.flex-row.flex-space-around.conf-buttons', {
|
||||
// style: {
|
||||
// display: 'flex',
|
||||
// justifyContent: 'flex-end',
|
||||
// margin: '14px 25px',
|
||||
// },
|
||||
// }, [
|
||||
// h('button.cancel.btn-red', {
|
||||
// onClick: props.cancelAllTransactions,
|
||||
// }, 'Reject All'),
|
||||
// ]) : null,
|
||||
// ]),
|
||||
// ])
|
||||
// )
|
||||
// }
|
||||
]), |
||||
|
||||
h('form#pending-tx-form', { |
||||
className: 'confirm-screen-form', |
||||
onSubmit: this.onSubmit, |
||||
}, [ |
||||
this.renderErrorMessage('simulationFails'), |
||||
h('.page-container__footer', [ |
||||
// Cancel Button
|
||||
h('button.btn-cancel.page-container__footer-button.allcaps', { |
||||
onClick: (event) => { |
||||
clearSend() |
||||
this.cancel(event, txMeta) |
||||
}, |
||||
}, this.context.t('cancel')), |
||||
|
||||
// Accept Button
|
||||
h('button.btn-confirm.page-container__footer-button.allcaps', { |
||||
onClick: event => this.onSubmit(event), |
||||
}, this.context.t('confirm')), |
||||
]), |
||||
]), |
||||
]) |
||||
) |
||||
} |
||||
|
||||
ConfirmSendEther.prototype.renderErrorMessage = function (message) { |
||||
const { send: { errors } } = this.props |
||||
|
||||
return errors[message] |
||||
? h('div.confirm-screen-error', [ errors[message] ]) |
||||
: null |
||||
} |
||||
|
||||
ConfirmSendEther.prototype.onSubmit = function (event) { |
||||
event.preventDefault() |
||||
const { updateSendErrors } = this.props |
||||
const txMeta = this.gatherTxMeta() |
||||
const valid = this.checkValidity() |
||||
const balanceIsSufficient = this.isBalanceSufficient(txMeta) |
||||
this.setState({ valid, submitting: true }) |
||||
|
||||
if (valid && this.verifyGasParams() && balanceIsSufficient) { |
||||
this.props.sendTransaction(txMeta, event) |
||||
} else if (!balanceIsSufficient) { |
||||
updateSendErrors({ insufficientFunds: 'insufficientFunds' }) |
||||
} else { |
||||
updateSendErrors({ invalidGasParams: 'invalidGasParams' }) |
||||
this.setState({ submitting: false }) |
||||
} |
||||
} |
||||
|
||||
ConfirmSendEther.prototype.cancel = function (event, txMeta) { |
||||
event.preventDefault() |
||||
const { cancelTransaction } = this.props |
||||
|
||||
cancelTransaction(txMeta) |
||||
.then(() => this.props.history.push(DEFAULT_ROUTE)) |
||||
} |
||||
|
||||
ConfirmSendEther.prototype.isBalanceSufficient = function (txMeta) { |
||||
const { |
||||
balance, |
||||
conversionRate, |
||||
} = this.props |
||||
const { |
||||
txParams: { |
||||
gas, |
||||
gasPrice, |
||||
value: amount, |
||||
}, |
||||
} = txMeta |
||||
const gasTotal = calcGasTotal(gas, gasPrice) |
||||
|
||||
return isBalanceSufficient({ |
||||
amount, |
||||
gasTotal, |
||||
balance, |
||||
conversionRate, |
||||
}) |
||||
} |
||||
|
||||
ConfirmSendEther.prototype.checkValidity = function () { |
||||
const form = this.getFormEl() |
||||
const valid = form.checkValidity() |
||||
return valid |
||||
} |
||||
|
||||
ConfirmSendEther.prototype.getFormEl = function () { |
||||
const form = document.querySelector('form#pending-tx-form') |
||||
// Stub out form for unit tests:
|
||||
if (!form) { |
||||
return { checkValidity () { return true } } |
||||
} |
||||
return form |
||||
} |
||||
|
||||
// After a customizable state value has been updated,
|
||||
ConfirmSendEther.prototype.gatherTxMeta = function () { |
||||
const props = this.props |
||||
const state = this.state |
||||
const txData = clone(state.txData) || clone(props.txData) |
||||
|
||||
const { gasPrice: sendGasPrice, gasLimit: 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 |
||||
} |
||||
|
||||
ConfirmSendEther.prototype.verifyGasParams = function () { |
||||
// We call this in case the gas has not been modified at all
|
||||
if (!this.state) { return true } |
||||
return ( |
||||
this._notZeroOrEmptyString(this.state.gas) && |
||||
this._notZeroOrEmptyString(this.state.gasPrice) |
||||
) |
||||
} |
||||
|
||||
ConfirmSendEther.prototype._notZeroOrEmptyString = function (obj) { |
||||
return obj !== '' && obj !== '0x0' |
||||
} |
||||
|
||||
ConfirmSendEther.prototype.bnMultiplyByFraction = function (targetBN, numerator, denominator) { |
||||
const numBN = new BN(numerator) |
||||
const denomBN = new BN(denominator) |
||||
return targetBN.mul(numBN).div(denomBN) |
||||
} |
||||
@ -1,696 +0,0 @@ |
||||
const Component = require('react').Component |
||||
const { withRouter } = require('react-router-dom') |
||||
const { compose } = require('recompose') |
||||
const PropTypes = require('prop-types') |
||||
const connect = require('react-redux').connect |
||||
const h = require('react-hyperscript') |
||||
const inherits = require('util').inherits |
||||
const tokenAbi = require('human-standard-token-abi') |
||||
const abiDecoder = require('abi-decoder') |
||||
abiDecoder.addABI(tokenAbi) |
||||
const actions = require('../../actions') |
||||
const clone = require('clone') |
||||
const Identicon = require('../identicon') |
||||
const GasFeeDisplay = require('../send/send-content/send-gas-row/gas-fee-display/').default |
||||
const NetworkDisplay = require('../network-display') |
||||
const ethUtil = require('ethereumjs-util') |
||||
const BN = ethUtil.BN |
||||
const { |
||||
conversionUtil, |
||||
multiplyCurrencies, |
||||
addCurrencies, |
||||
} = require('../../conversion-util') |
||||
const { |
||||
calcGasTotal, |
||||
isBalanceSufficient, |
||||
} = require('../send/send.utils') |
||||
const { |
||||
calcTokenAmount, |
||||
} = require('../../token-util') |
||||
const classnames = require('classnames') |
||||
const currencyFormatter = require('currency-formatter') |
||||
const currencies = require('currency-formatter/currencies') |
||||
|
||||
const { MIN_GAS_PRICE_HEX } = require('../send/send.constants') |
||||
|
||||
const { |
||||
getTokenExchangeRate, |
||||
getSelectedAddress, |
||||
getSelectedTokenContract, |
||||
} = require('../../selectors') |
||||
const { SEND_ROUTE, DEFAULT_ROUTE } = require('../../routes') |
||||
|
||||
import { |
||||
updateSendErrors, |
||||
} from '../../ducks/send.duck' |
||||
|
||||
const { |
||||
ENVIRONMENT_TYPE_POPUP, |
||||
ENVIRONMENT_TYPE_NOTIFICATION, |
||||
} = require('../../../../app/scripts/lib/enums') |
||||
|
||||
ConfirmSendToken.contextTypes = { |
||||
t: PropTypes.func, |
||||
} |
||||
|
||||
module.exports = compose( |
||||
withRouter, |
||||
connect(mapStateToProps, mapDispatchToProps) |
||||
)(ConfirmSendToken) |
||||
|
||||
|
||||
function mapStateToProps (state, ownProps) { |
||||
const { token: { address }, txData } = ownProps |
||||
const { txParams } = txData || {} |
||||
const tokenData = txParams.data && abiDecoder.decodeMethod(txParams.data) |
||||
|
||||
const { |
||||
conversionRate, |
||||
identities, |
||||
currentCurrency, |
||||
} = state.metamask |
||||
const accounts = state.metamask.accounts |
||||
const selectedAddress = getSelectedAddress(state) |
||||
const tokenExchangeRate = getTokenExchangeRate(state, address) |
||||
const { balance } = accounts[selectedAddress] |
||||
return { |
||||
conversionRate, |
||||
identities, |
||||
selectedAddress, |
||||
tokenExchangeRate, |
||||
tokenData: tokenData || {}, |
||||
currentCurrency: currentCurrency.toUpperCase(), |
||||
send: state.metamask.send, |
||||
tokenContract: getSelectedTokenContract(state), |
||||
balance, |
||||
} |
||||
} |
||||
|
||||
function mapDispatchToProps (dispatch, ownProps) { |
||||
return { |
||||
backToAccountDetail: address => dispatch(actions.backToAccountDetail(address)), |
||||
cancelTransaction: ({ id }) => dispatch(actions.cancelTx({ id })), |
||||
editTransaction: txMeta => { |
||||
const { token: { address } } = ownProps |
||||
const { txParams = {}, id } = txMeta |
||||
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', |
||||
}) |
||||
const { |
||||
gas: gasLimit, |
||||
gasPrice, |
||||
} = txParams |
||||
dispatch(actions.setSelectedToken(address)) |
||||
dispatch(actions.updateSend({ |
||||
gasLimit, |
||||
gasPrice, |
||||
gasTotal: null, |
||||
to, |
||||
amount: tokenAmountInHex, |
||||
errors: { to: null, amount: null }, |
||||
editingTransactionId: id && id.toString(), |
||||
token: ownProps.token, |
||||
})) |
||||
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' })) |
||||
}, |
||||
updateSendErrors: error => dispatch(updateSendErrors(error)), |
||||
} |
||||
} |
||||
|
||||
inherits(ConfirmSendToken, Component) |
||||
function ConfirmSendToken () { |
||||
Component.call(this) |
||||
this.state = {} |
||||
this.onSubmit = this.onSubmit.bind(this) |
||||
} |
||||
|
||||
ConfirmSendToken.prototype.editTransaction = function (txMeta) { |
||||
const { editTransaction, history } = this.props |
||||
editTransaction(txMeta) |
||||
history.push(SEND_ROUTE) |
||||
} |
||||
|
||||
ConfirmSendToken.prototype.updateComponentSendErrors = function (prevProps) { |
||||
const { |
||||
balance: oldBalance, |
||||
conversionRate: oldConversionRate, |
||||
} = prevProps |
||||
const { |
||||
updateSendErrors, |
||||
balance, |
||||
conversionRate, |
||||
send: { |
||||
errors: { |
||||
simulationFails, |
||||
}, |
||||
}, |
||||
} = this.props |
||||
const txMeta = this.gatherTxMeta() |
||||
|
||||
const shouldUpdateBalanceSendErrors = balance && [ |
||||
balance !== oldBalance, |
||||
conversionRate !== oldConversionRate, |
||||
].some(x => Boolean(x)) |
||||
|
||||
if (shouldUpdateBalanceSendErrors) { |
||||
const balanceIsSufficient = this.isBalanceSufficient(txMeta) |
||||
updateSendErrors({ |
||||
insufficientFunds: balanceIsSufficient ? false : this.context.t('insufficientFunds'), |
||||
}) |
||||
} |
||||
|
||||
const shouldUpdateSimulationSendError = Boolean(txMeta.simulationFails) !== Boolean(simulationFails) |
||||
|
||||
if (shouldUpdateSimulationSendError) { |
||||
updateSendErrors({ |
||||
simulationFails: !txMeta.simulationFails ? false : this.context.t('transactionError'), |
||||
}) |
||||
} |
||||
} |
||||
|
||||
ConfirmSendToken.prototype.componentWillMount = function () { |
||||
const { tokenContract, selectedAddress } = this.props |
||||
tokenContract && tokenContract |
||||
.balanceOf(selectedAddress) |
||||
.then(usersToken => { |
||||
}) |
||||
this.updateComponentSendErrors({}) |
||||
} |
||||
|
||||
ConfirmSendToken.prototype.componentDidUpdate = function (prevProps) { |
||||
this.updateComponentSendErrors(prevProps) |
||||
} |
||||
|
||||
ConfirmSendToken.prototype.getAmount = function () { |
||||
const { |
||||
conversionRate, |
||||
tokenExchangeRate, |
||||
token, |
||||
tokenData, |
||||
send: { amount, editingTransactionId }, |
||||
} = this.props |
||||
const { params = [] } = tokenData |
||||
let { value } = params[1] || {} |
||||
const { decimals } = token |
||||
|
||||
if (editingTransactionId) { |
||||
value = conversionUtil(amount, { |
||||
fromNumericBase: 'hex', |
||||
toNumericBase: 'dec', |
||||
}) |
||||
} |
||||
|
||||
const sendTokenAmount = calcTokenAmount(value, decimals) |
||||
|
||||
return { |
||||
fiat: tokenExchangeRate |
||||
? +(sendTokenAmount * tokenExchangeRate * conversionRate).toFixed(2) |
||||
: null, |
||||
token: typeof value === 'undefined' |
||||
? this.context.t('unknown') |
||||
: +sendTokenAmount.toFixed(decimals), |
||||
} |
||||
|
||||
} |
||||
|
||||
ConfirmSendToken.prototype.getGasFee = function () { |
||||
const { conversionRate, tokenExchangeRate, token, currentCurrency } = this.props |
||||
const txMeta = this.gatherTxMeta() |
||||
const txParams = txMeta.txParams || {} |
||||
const { decimals } = token |
||||
|
||||
const gas = txParams.gas |
||||
const gasPrice = txParams.gasPrice || MIN_GAS_PRICE_HEX |
||||
const gasTotal = multiplyCurrencies(gas, gasPrice, { |
||||
multiplicandBase: 16, |
||||
multiplierBase: 16, |
||||
}) |
||||
|
||||
const FIAT = conversionUtil(gasTotal, { |
||||
fromNumericBase: 'BN', |
||||
toNumericBase: 'dec', |
||||
fromDenomination: 'WEI', |
||||
fromCurrency: 'ETH', |
||||
toCurrency: currentCurrency, |
||||
numberOfDecimals: 2, |
||||
conversionRate, |
||||
}) |
||||
const ETH = conversionUtil(gasTotal, { |
||||
fromNumericBase: 'BN', |
||||
toNumericBase: 'dec', |
||||
fromDenomination: 'WEI', |
||||
fromCurrency: 'ETH', |
||||
toCurrency: 'ETH', |
||||
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(FIAT).toFixed(2), |
||||
eth: ETH, |
||||
token: tokenExchangeRate |
||||
? tokenGas |
||||
: null, |
||||
gasFeeInHex: gasTotal.toString(16), |
||||
} |
||||
} |
||||
|
||||
ConfirmSendToken.prototype.getData = function () { |
||||
const { identities, tokenData } = this.props |
||||
const { params = [] } = tokenData |
||||
const { value } = params[0] || {} |
||||
const txMeta = this.gatherTxMeta() |
||||
const txParams = txMeta.txParams || {} |
||||
|
||||
return { |
||||
from: { |
||||
address: txParams.from, |
||||
name: identities[txParams.from].name, |
||||
}, |
||||
to: { |
||||
address: value, |
||||
name: identities[value] ? identities[value].name : this.context.t('newRecipient'), |
||||
}, |
||||
memo: txParams.memo || '', |
||||
} |
||||
} |
||||
|
||||
ConfirmSendToken.prototype.renderHeroAmount = function () { |
||||
const { token: { symbol }, currentCurrency } = this.props |
||||
const { fiat: fiatAmount, token: tokenAmount } = this.getAmount() |
||||
const txMeta = this.gatherTxMeta() |
||||
const txParams = txMeta.txParams || {} |
||||
const { memo = '' } = txParams |
||||
|
||||
const convertedAmountInFiat = this.convertToRenderableCurrency(fiatAmount, currentCurrency) |
||||
|
||||
return fiatAmount |
||||
? ( |
||||
h('div.confirm-send-token__hero-amount-wrapper', [ |
||||
h('h3.flex-center.confirm-screen-send-amount', `${convertedAmountInFiat}`), |
||||
h('h3.flex-center.confirm-screen-send-amount-currency', currentCurrency), |
||||
h('div.flex-center.confirm-memo-wrapper', [ |
||||
h('h3.confirm-screen-send-memo', [ memo ? `"${memo}"` : '' ]), |
||||
]), |
||||
]) |
||||
) |
||||
: ( |
||||
h('div.confirm-send-token__hero-amount-wrapper', [ |
||||
h('h3.flex-center.confirm-screen-send-amount', tokenAmount), |
||||
h('h3.flex-center.confirm-screen-send-amount-currency', symbol), |
||||
h('div.flex-center.confirm-memo-wrapper', [ |
||||
h('h3.confirm-screen-send-memo', [ memo ? `"${memo}"` : '' ]), |
||||
]), |
||||
]) |
||||
) |
||||
} |
||||
|
||||
ConfirmSendToken.prototype.renderGasFee = function () { |
||||
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', [ this.context.t('gasFee') ]), |
||||
h('div.confirm-screen-section-column', [ |
||||
h(GasFeeDisplay, { |
||||
gasTotal: gasTotal || gasFeeInHex, |
||||
conversionRate, |
||||
convertedCurrency, |
||||
onClick: () => showCustomizeGasModal(txMeta, sendGasLimit, sendGasPrice, gasTotal), |
||||
}), |
||||
]), |
||||
]) |
||||
) |
||||
} |
||||
|
||||
ConfirmSendToken.prototype.renderTotalPlusGas = function () { |
||||
const { token: { symbol }, currentCurrency, send: { errors } } = this.props |
||||
const { fiat: fiatAmount, token: tokenAmount } = this.getAmount() |
||||
const { fiat: fiatGas, token: tokenGas } = this.getGasFee() |
||||
|
||||
const totalInFIAT = fiatAmount && fiatGas && addCurrencies(fiatAmount, fiatGas) |
||||
const convertedTotalInFiat = this.convertToRenderableCurrency(totalInFIAT, currentCurrency) |
||||
|
||||
return fiatAmount && fiatGas |
||||
? ( |
||||
h('section.flex-row.flex-center.confirm-screen-row.confirm-screen-total-box ', [ |
||||
h('div.confirm-screen-section-column', [ |
||||
h('span.confirm-screen-label', [ this.context.t('total') + ' ' ]), |
||||
h('div.confirm-screen-total-box__subtitle', [ this.context.t('amountPlusGas') ]), |
||||
]), |
||||
|
||||
h('div.confirm-screen-section-column', [ |
||||
h('div.confirm-screen-row-info', `${convertedTotalInFiat} ${currentCurrency}`), |
||||
h('div.confirm-screen-row-detail', `${addCurrencies(tokenAmount, tokenGas || '0')} ${symbol}`), |
||||
]), |
||||
]) |
||||
) |
||||
: ( |
||||
h('section.flex-row.flex-center.confirm-screen-row.confirm-screen-total-box ', [ |
||||
h('div', { |
||||
className: classnames({ |
||||
'confirm-screen-section-column--with-error': errors['insufficientFunds'], |
||||
'confirm-screen-section-column': !errors['insufficientFunds'], |
||||
}), |
||||
}, [ |
||||
h('span.confirm-screen-label', [ this.context.t('total') + ' ' ]), |
||||
h('div.confirm-screen-total-box__subtitle', [ this.context.t('amountPlusGas') ]), |
||||
]), |
||||
|
||||
h('div.confirm-screen-section-column', [ |
||||
h('div.confirm-screen-row-info', `${tokenAmount} ${symbol}`), |
||||
h('div.confirm-screen-row-detail', `+ ${fiatGas} ${currentCurrency} ${this.context.t('gas')}`), |
||||
]), |
||||
|
||||
this.renderErrorMessage('insufficientFunds'), |
||||
]) |
||||
) |
||||
} |
||||
|
||||
ConfirmSendToken.prototype.renderErrorMessage = function (message) { |
||||
const { send: { errors } } = this.props |
||||
|
||||
return errors[message] |
||||
? h('div.confirm-screen-error', [ errors[message] ]) |
||||
: null |
||||
} |
||||
|
||||
ConfirmSendToken.prototype.convertToRenderableCurrency = function (value, currencyCode) { |
||||
const upperCaseCurrencyCode = currencyCode.toUpperCase() |
||||
|
||||
return currencies.find(currency => currency.code === upperCaseCurrencyCode) |
||||
? currencyFormatter.format(Number(value), { |
||||
code: upperCaseCurrencyCode, |
||||
}) |
||||
: value |
||||
} |
||||
|
||||
ConfirmSendToken.prototype.renderHeaderRow = function (isTxReprice) { |
||||
const windowType = window.METAMASK_UI_TYPE |
||||
const isFullScreen = windowType !== ENVIRONMENT_TYPE_NOTIFICATION && |
||||
windowType !== ENVIRONMENT_TYPE_POPUP |
||||
|
||||
if (isTxReprice && isFullScreen) { |
||||
return null |
||||
} |
||||
|
||||
return ( |
||||
h('.page-container__header-row', [ |
||||
h('span.page-container__back-button', { |
||||
onClick: () => this.editTransaction(), |
||||
style: { |
||||
visibility: isTxReprice ? 'hidden' : 'initial', |
||||
}, |
||||
}, 'Edit'), |
||||
!isFullScreen && h(NetworkDisplay), |
||||
]) |
||||
) |
||||
} |
||||
|
||||
ConfirmSendToken.prototype.renderHeader = function (isTxReprice) { |
||||
const title = isTxReprice ? this.context.t('speedUpTitle') : this.context.t('confirm') |
||||
const subtitle = isTxReprice |
||||
? this.context.t('speedUpSubtitle') |
||||
: this.context.t('pleaseReviewTransaction') |
||||
|
||||
return ( |
||||
h('.page-container__header', [ |
||||
this.renderHeaderRow(isTxReprice), |
||||
h('.page-container__title', title), |
||||
h('.page-container__subtitle', subtitle), |
||||
]) |
||||
) |
||||
} |
||||
|
||||
ConfirmSendToken.prototype.render = function () { |
||||
const txMeta = this.gatherTxMeta() |
||||
const { |
||||
from: { |
||||
address: fromAddress, |
||||
name: fromName, |
||||
}, |
||||
to: { |
||||
address: toAddress, |
||||
name: toName, |
||||
}, |
||||
} = this.getData() |
||||
|
||||
const isTxReprice = Boolean(txMeta.lastGasPrice) |
||||
|
||||
return ( |
||||
h('div.confirm-screen-container.confirm-send-token', [ |
||||
// Main Send token Card
|
||||
h('div.page-container', [ |
||||
this.renderHeader(isTxReprice), |
||||
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)),
|
||||
]), |
||||
]), |
||||
|
||||
// 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', [ this.context.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)}`), |
||||
]), |
||||
]), |
||||
|
||||
toAddress && h('section.flex-row.flex-center.confirm-screen-row', [ |
||||
h('span.confirm-screen-label.confirm-screen-section-column', [ this.context.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.renderGasFee(), |
||||
|
||||
this.renderTotalPlusGas(), |
||||
|
||||
]), |
||||
|
||||
]), |
||||
|
||||
h('form#pending-tx-form', { |
||||
className: 'confirm-screen-form', |
||||
onSubmit: this.onSubmit, |
||||
}, [ |
||||
this.renderErrorMessage('simulationFails'), |
||||
h('.page-container__footer', [ |
||||
// Cancel Button
|
||||
h('button.btn-cancel.page-container__footer-button.allcaps', { |
||||
onClick: (event) => this.cancel(event, txMeta), |
||||
}, this.context.t('cancel')), |
||||
|
||||
// Accept Button
|
||||
h('button.btn-confirm.page-container__footer-button.allcaps', { |
||||
onClick: event => this.onSubmit(event), |
||||
}, [this.context.t('confirm')]), |
||||
]), |
||||
]), |
||||
]), |
||||
]) |
||||
) |
||||
} |
||||
|
||||
ConfirmSendToken.prototype.onSubmit = function (event) { |
||||
event.preventDefault() |
||||
const { updateSendErrors } = this.props |
||||
const txMeta = this.gatherTxMeta() |
||||
const valid = this.checkValidity() |
||||
const balanceIsSufficient = this.isBalanceSufficient(txMeta) |
||||
this.setState({ valid, submitting: true }) |
||||
|
||||
if (valid && this.verifyGasParams() && balanceIsSufficient) { |
||||
this.props.sendTransaction(txMeta, event) |
||||
} else if (!balanceIsSufficient) { |
||||
updateSendErrors({ insufficientFunds: 'insufficientFunds' }) |
||||
} else { |
||||
updateSendErrors({ invalidGasParams: 'invalidGasParams' }) |
||||
this.setState({ submitting: false }) |
||||
} |
||||
} |
||||
|
||||
ConfirmSendToken.prototype.isBalanceSufficient = function (txMeta) { |
||||
const { |
||||
balance, |
||||
conversionRate, |
||||
} = this.props |
||||
const { |
||||
txParams: { |
||||
gas, |
||||
gasPrice, |
||||
}, |
||||
} = txMeta |
||||
const gasTotal = calcGasTotal(gas, gasPrice) |
||||
|
||||
return isBalanceSufficient({ |
||||
amount: '0', |
||||
gasTotal, |
||||
balance, |
||||
conversionRate, |
||||
}) |
||||
} |
||||
|
||||
|
||||
ConfirmSendToken.prototype.cancel = function (event, txMeta) { |
||||
event.preventDefault() |
||||
const { cancelTransaction } = this.props |
||||
|
||||
cancelTransaction(txMeta) |
||||
.then(() => this.props.history.push(DEFAULT_ROUTE)) |
||||
} |
||||
|
||||
ConfirmSendToken.prototype.checkValidity = function () { |
||||
const form = this.getFormEl() |
||||
const valid = form.checkValidity() |
||||
return valid |
||||
} |
||||
|
||||
ConfirmSendToken.prototype.getFormEl = function () { |
||||
const form = document.querySelector('form#pending-tx-form') |
||||
// Stub out form for unit tests:
|
||||
if (!form) { |
||||
return { checkValidity () { return true } } |
||||
} |
||||
return form |
||||
} |
||||
|
||||
// After a customizable state value has been updated,
|
||||
ConfirmSendToken.prototype.gatherTxMeta = function () { |
||||
const props = this.props |
||||
const state = this.state |
||||
const txData = clone(state.txData) || clone(props.txData) |
||||
|
||||
const { gasPrice: sendGasPrice, gasLimit: 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 |
||||
} |
||||
|
||||
ConfirmSendToken.prototype.verifyGasParams = function () { |
||||
// We call this in case the gas has not been modified at all
|
||||
if (!this.state) { return true } |
||||
return ( |
||||
this._notZeroOrEmptyString(this.state.gas) && |
||||
this._notZeroOrEmptyString(this.state.gasPrice) |
||||
) |
||||
} |
||||
|
||||
ConfirmSendToken.prototype._notZeroOrEmptyString = function (obj) { |
||||
return obj !== '' && obj !== '0x0' |
||||
} |
||||
|
||||
ConfirmSendToken.prototype.bnMultiplyByFraction = function (targetBN, numerator, denominator) { |
||||
const numBN = new BN(numerator) |
||||
const denomBN = new BN(denominator) |
||||
return targetBN.mul(numBN).div(denomBN) |
||||
} |
||||
Loading…
Reference in new issue