Merge pull request #4800 from MetaMask/i4785-confirm-screen-fixes
Add fallback when no function found, fix network colors, add fiat values for tokens with contract exchange ratesfeature/default_network_editable
Alexander Tseung
6 years ago
committed by
GitHub
commit
f6ca06f775
@ -1,67 +0,0 @@ |
|||||||
const assert = require('assert') |
|
||||||
const h = require('react-hyperscript') |
|
||||||
const PendingTx = require('../../../ui/app/components/pending-tx') |
|
||||||
const ethUtil = require('ethereumjs-util') |
|
||||||
|
|
||||||
const { createMockStore } = require('redux-test-utils') |
|
||||||
const { shallowWithStore } = require('../../lib/shallow-with-store') |
|
||||||
|
|
||||||
const identities = { abc: {}, def: {} } |
|
||||||
const mockState = { |
|
||||||
metamask: { |
|
||||||
accounts: { abc: {} }, |
|
||||||
identities, |
|
||||||
conversionRate: 10, |
|
||||||
selectedAddress: 'abc', |
|
||||||
}, |
|
||||||
} |
|
||||||
|
|
||||||
describe('PendingTx', function () { |
|
||||||
const gasPrice = '0x4A817C800' // 20 Gwei
|
|
||||||
const txData = { |
|
||||||
'id': 5021615666270214, |
|
||||||
'time': 1494458763011, |
|
||||||
'status': 'unapproved', |
|
||||||
'metamaskNetworkId': '1494442339676', |
|
||||||
'txParams': { |
|
||||||
'from': '0xfdea65c8e26263f6d9a1b5de9555d2931a33b826', |
|
||||||
'to': '0xc5b8dbac4c1d3f152cdeb400e2313f309c410acb', |
|
||||||
'value': '0xde0b6b3a7640000', |
|
||||||
gasPrice, |
|
||||||
'gas': '0x7b0c', |
|
||||||
}, |
|
||||||
'gasLimitSpecified': false, |
|
||||||
'estimatedGas': '0x5208', |
|
||||||
} |
|
||||||
const newGasPrice = '0x77359400' |
|
||||||
|
|
||||||
const computedBalances = {} |
|
||||||
computedBalances[Object.keys(identities)[0]] = { |
|
||||||
ethBalance: '0x00000000000000056bc75e2d63100000', |
|
||||||
} |
|
||||||
const props = { |
|
||||||
txData, |
|
||||||
computedBalances, |
|
||||||
sendTransaction: (txMeta, event) => { |
|
||||||
// Assert changes:
|
|
||||||
const result = ethUtil.addHexPrefix(txMeta.txParams.gasPrice) |
|
||||||
assert.notEqual(result, gasPrice, 'gas price should change') |
|
||||||
assert.equal(result, newGasPrice, 'gas price assigned.') |
|
||||||
}, |
|
||||||
} |
|
||||||
|
|
||||||
let pendingTxComponent |
|
||||||
let store |
|
||||||
let component |
|
||||||
beforeEach(function () { |
|
||||||
store = createMockStore(mockState) |
|
||||||
component = shallowWithStore(h(PendingTx, props), store) |
|
||||||
pendingTxComponent = component |
|
||||||
}) |
|
||||||
|
|
||||||
it('should render correctly', function (done) { |
|
||||||
assert.equal(pendingTxComponent.props().identities, identities) |
|
||||||
done() |
|
||||||
}) |
|
||||||
}) |
|
||||||
|
|
||||||
@ -1,19 +0,0 @@ |
|||||||
.confirm-send-token { |
|
||||||
&__title { |
|
||||||
padding: 4px 0; |
|
||||||
display: flex; |
|
||||||
align-items: center; |
|
||||||
} |
|
||||||
|
|
||||||
&__identicon { |
|
||||||
flex: 0 0 auto; |
|
||||||
} |
|
||||||
|
|
||||||
&__title-text { |
|
||||||
font-size: 2.25rem; |
|
||||||
white-space: nowrap; |
|
||||||
overflow: hidden; |
|
||||||
text-overflow: ellipsis; |
|
||||||
padding-left: 8px; |
|
||||||
} |
|
||||||
} |
|
||||||
@ -0,0 +1,85 @@ |
|||||||
|
import React, { Component } from 'react' |
||||||
|
import PropTypes from 'prop-types' |
||||||
|
import ConfirmTransactionBase from '../confirm-transaction-base' |
||||||
|
import { |
||||||
|
formatCurrency, |
||||||
|
convertTokenToFiat, |
||||||
|
addFiat, |
||||||
|
} from '../../../helpers/confirm-transaction/util' |
||||||
|
|
||||||
|
export default class ConfirmTokenTransactionBase extends Component { |
||||||
|
static contextTypes = { |
||||||
|
t: PropTypes.func, |
||||||
|
} |
||||||
|
|
||||||
|
static propTypes = { |
||||||
|
tokenAddress: PropTypes.string, |
||||||
|
toAddress: PropTypes.string, |
||||||
|
tokenAmount: PropTypes.number, |
||||||
|
tokenSymbol: PropTypes.string, |
||||||
|
fiatTransactionTotal: PropTypes.string, |
||||||
|
ethTransactionTotal: PropTypes.string, |
||||||
|
contractExchangeRate: PropTypes.number, |
||||||
|
conversionRate: PropTypes.number, |
||||||
|
currentCurrency: PropTypes.string, |
||||||
|
} |
||||||
|
|
||||||
|
getFiatTransactionAmount () { |
||||||
|
const { tokenAmount, currentCurrency, conversionRate, contractExchangeRate } = this.props |
||||||
|
|
||||||
|
return convertTokenToFiat({ |
||||||
|
value: tokenAmount, |
||||||
|
toCurrency: currentCurrency, |
||||||
|
conversionRate, |
||||||
|
contractExchangeRate, |
||||||
|
}) |
||||||
|
} |
||||||
|
|
||||||
|
getSubtitle () { |
||||||
|
const { currentCurrency, contractExchangeRate } = this.props |
||||||
|
|
||||||
|
if (typeof contractExchangeRate === 'undefined') { |
||||||
|
return this.context.t('noConversionRateAvailable') |
||||||
|
} else { |
||||||
|
const fiatTransactionAmount = this.getFiatTransactionAmount() |
||||||
|
return formatCurrency(fiatTransactionAmount, currentCurrency) |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
getFiatTotalTextOverride () { |
||||||
|
const { fiatTransactionTotal, currentCurrency, contractExchangeRate } = this.props |
||||||
|
|
||||||
|
if (typeof contractExchangeRate === 'undefined') { |
||||||
|
return formatCurrency(fiatTransactionTotal, currentCurrency) |
||||||
|
} else { |
||||||
|
const fiatTransactionAmount = this.getFiatTransactionAmount() |
||||||
|
const fiatTotal = addFiat(fiatTransactionAmount, fiatTransactionTotal) |
||||||
|
return formatCurrency(fiatTotal, currentCurrency) |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
render () { |
||||||
|
const { |
||||||
|
toAddress, |
||||||
|
tokenAddress, |
||||||
|
tokenSymbol, |
||||||
|
tokenAmount, |
||||||
|
ethTransactionTotal, |
||||||
|
...restProps |
||||||
|
} = this.props |
||||||
|
|
||||||
|
const tokensText = `${tokenAmount} ${tokenSymbol}` |
||||||
|
|
||||||
|
return ( |
||||||
|
<ConfirmTransactionBase |
||||||
|
toAddress={toAddress} |
||||||
|
identiconAddress={tokenAddress} |
||||||
|
title={tokensText} |
||||||
|
subtitle={this.getSubtitle()} |
||||||
|
ethTotalTextOverride={`${tokensText} + \u2666 ${ethTransactionTotal}`} |
||||||
|
fiatTotalTextOverride={this.getFiatTotalTextOverride()} |
||||||
|
{...restProps} |
||||||
|
/> |
||||||
|
) |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,34 @@ |
|||||||
|
import { connect } from 'react-redux' |
||||||
|
import ConfirmTokenTransactionBase from './confirm-token-transaction-base.component' |
||||||
|
import { |
||||||
|
tokenAmountAndToAddressSelector, |
||||||
|
contractExchangeRateSelector, |
||||||
|
} from '../../../selectors/confirm-transaction' |
||||||
|
|
||||||
|
const mapStateToProps = (state, ownProps) => { |
||||||
|
const { tokenAmount: ownTokenAmount } = ownProps |
||||||
|
const { confirmTransaction, metamask: { currentCurrency, conversionRate } } = state |
||||||
|
const { |
||||||
|
txData: { txParams: { to: tokenAddress } = {} } = {}, |
||||||
|
tokenProps: { tokenSymbol } = {}, |
||||||
|
fiatTransactionTotal, |
||||||
|
ethTransactionTotal, |
||||||
|
} = confirmTransaction |
||||||
|
|
||||||
|
const { tokenAmount, toAddress } = tokenAmountAndToAddressSelector(state) |
||||||
|
const contractExchangeRate = contractExchangeRateSelector(state) |
||||||
|
|
||||||
|
return { |
||||||
|
toAddress, |
||||||
|
tokenAddress, |
||||||
|
tokenAmount: typeof ownTokenAmount !== 'undefined' ? ownTokenAmount : tokenAmount, |
||||||
|
tokenSymbol, |
||||||
|
currentCurrency, |
||||||
|
conversionRate, |
||||||
|
contractExchangeRate, |
||||||
|
fiatTransactionTotal, |
||||||
|
ethTransactionTotal, |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
export default connect(mapStateToProps)(ConfirmTokenTransactionBase) |
||||||
@ -0,0 +1,2 @@ |
|||||||
|
export { default } from './confirm-token-transaction-base.container' |
||||||
|
export { default as ConfirmTokenTransactionBase } from './confirm-token-transaction-base.component' |
||||||
@ -1,2 +1,3 @@ |
|||||||
export const TOKEN_METHOD_TRANSFER = 'transfer' |
export const TOKEN_METHOD_TRANSFER = 'transfer' |
||||||
export const TOKEN_METHOD_APPROVE = 'approve' |
export const TOKEN_METHOD_APPROVE = 'approve' |
||||||
|
export const TOKEN_METHOD_TRANSFER_FROM = 'transferfrom' |
||||||
|
|||||||
@ -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) |
|
||||||
} |
|
||||||
@ -1,165 +0,0 @@ |
|||||||
const Component = require('react').Component |
|
||||||
const connect = require('react-redux').connect |
|
||||||
const h = require('react-hyperscript') |
|
||||||
const PropTypes = require('prop-types') |
|
||||||
const clone = require('clone') |
|
||||||
const abi = require('human-standard-token-abi') |
|
||||||
const abiDecoder = require('abi-decoder') |
|
||||||
abiDecoder.addABI(abi) |
|
||||||
const inherits = require('util').inherits |
|
||||||
const actions = require('../../actions') |
|
||||||
const { getSymbolAndDecimals } = require('../../token-util') |
|
||||||
const ConfirmSendEther = require('./confirm-send-ether') |
|
||||||
const ConfirmSendToken = require('./confirm-send-token') |
|
||||||
const ConfirmDeployContract = require('./confirm-deploy-contract') |
|
||||||
const Loading = require('../loading-screen') |
|
||||||
|
|
||||||
const TX_TYPES = { |
|
||||||
DEPLOY_CONTRACT: 'deploy_contract', |
|
||||||
SEND_ETHER: 'send_ether', |
|
||||||
SEND_TOKEN: 'send_token', |
|
||||||
} |
|
||||||
|
|
||||||
module.exports = connect(mapStateToProps, mapDispatchToProps)(PendingTx) |
|
||||||
|
|
||||||
function mapStateToProps (state) { |
|
||||||
const { |
|
||||||
conversionRate, |
|
||||||
identities, |
|
||||||
tokens: existingTokens, |
|
||||||
} = state.metamask |
|
||||||
const accounts = state.metamask.accounts |
|
||||||
const selectedAddress = state.metamask.selectedAddress || Object.keys(accounts)[0] |
|
||||||
return { |
|
||||||
conversionRate, |
|
||||||
identities, |
|
||||||
selectedAddress, |
|
||||||
existingTokens, |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
function mapDispatchToProps (dispatch) { |
|
||||||
return { |
|
||||||
backToAccountDetail: address => dispatch(actions.backToAccountDetail(address)), |
|
||||||
cancelTransaction: ({ id }) => dispatch(actions.cancelTx({ id })), |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
inherits(PendingTx, Component) |
|
||||||
function PendingTx () { |
|
||||||
Component.call(this) |
|
||||||
this.state = { |
|
||||||
isFetching: true, |
|
||||||
transactionType: '', |
|
||||||
tokenAddress: '', |
|
||||||
tokenSymbol: '', |
|
||||||
tokenDecimals: '', |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
PendingTx.prototype.componentDidMount = function () { |
|
||||||
this.setTokenData() |
|
||||||
} |
|
||||||
|
|
||||||
PendingTx.prototype.componentDidUpdate = function (prevProps, prevState) { |
|
||||||
if (prevState.isFetching) { |
|
||||||
this.setTokenData() |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
PendingTx.prototype.setTokenData = async function () { |
|
||||||
const { existingTokens } = this.props |
|
||||||
const txMeta = this.gatherTxMeta() |
|
||||||
const txParams = txMeta.txParams || {} |
|
||||||
|
|
||||||
if (txMeta.loadingDefaults) { |
|
||||||
return |
|
||||||
} |
|
||||||
|
|
||||||
if (!txParams.to) { |
|
||||||
return this.setState({ |
|
||||||
transactionType: TX_TYPES.DEPLOY_CONTRACT, |
|
||||||
isFetching: false, |
|
||||||
}) |
|
||||||
} |
|
||||||
|
|
||||||
// inspect tx data for supported special confirmation screens
|
|
||||||
let isTokenTransaction = false |
|
||||||
if (txParams.data) { |
|
||||||
const tokenData = abiDecoder.decodeMethod(txParams.data) |
|
||||||
const { name: tokenMethodName } = tokenData || {} |
|
||||||
isTokenTransaction = (tokenMethodName === 'transfer') |
|
||||||
} |
|
||||||
|
|
||||||
if (isTokenTransaction) { |
|
||||||
const { symbol, decimals } = await getSymbolAndDecimals(txParams.to, existingTokens) |
|
||||||
|
|
||||||
this.setState({ |
|
||||||
transactionType: TX_TYPES.SEND_TOKEN, |
|
||||||
tokenAddress: txParams.to, |
|
||||||
tokenSymbol: symbol, |
|
||||||
tokenDecimals: decimals, |
|
||||||
isFetching: false, |
|
||||||
}) |
|
||||||
} else { |
|
||||||
this.setState({ |
|
||||||
transactionType: TX_TYPES.SEND_ETHER, |
|
||||||
isFetching: false, |
|
||||||
}) |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
PendingTx.prototype.gatherTxMeta = function () { |
|
||||||
const props = this.props |
|
||||||
const state = this.state |
|
||||||
const txData = clone(state.txData) || clone(props.txData) |
|
||||||
|
|
||||||
return txData |
|
||||||
} |
|
||||||
|
|
||||||
PendingTx.prototype.render = function () { |
|
||||||
const { |
|
||||||
isFetching, |
|
||||||
transactionType, |
|
||||||
tokenAddress, |
|
||||||
tokenSymbol, |
|
||||||
tokenDecimals, |
|
||||||
} = this.state |
|
||||||
|
|
||||||
const { sendTransaction } = this.props |
|
||||||
|
|
||||||
if (isFetching) { |
|
||||||
return h(Loading, { |
|
||||||
loadingMessage: this.context.t('generatingTransaction'), |
|
||||||
}) |
|
||||||
} |
|
||||||
|
|
||||||
switch (transactionType) { |
|
||||||
case TX_TYPES.SEND_ETHER: |
|
||||||
return h(ConfirmSendEther, { |
|
||||||
txData: this.gatherTxMeta(), |
|
||||||
sendTransaction, |
|
||||||
}) |
|
||||||
case TX_TYPES.SEND_TOKEN: |
|
||||||
return h(ConfirmSendToken, { |
|
||||||
txData: this.gatherTxMeta(), |
|
||||||
sendTransaction, |
|
||||||
token: { |
|
||||||
address: tokenAddress, |
|
||||||
symbol: tokenSymbol, |
|
||||||
decimals: tokenDecimals, |
|
||||||
}, |
|
||||||
}) |
|
||||||
case TX_TYPES.DEPLOY_CONTRACT: |
|
||||||
return h(ConfirmDeployContract, { |
|
||||||
txData: this.gatherTxMeta(), |
|
||||||
sendTransaction, |
|
||||||
}) |
|
||||||
default: |
|
||||||
return h(Loading) |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
PendingTx.contextTypes = { |
|
||||||
t: PropTypes.func, |
|
||||||
} |
|
||||||
Loading…
Reference in new issue