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…
Reference in New Issue