mirror of
https://github.com/kremalicious/metamask-extension.git
synced 2024-12-23 09:52:26 +01:00
Merge develop
This commit is contained in:
Alexander Tseung
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…
x
Reference in New Issue
Block a user