diff options
| -rw-r--r-- | ui/app/components/pending-tx/confirm-send-ether.js (renamed from ui/app/components/pending-tx.js) | 243 | ||||
| -rw-r--r-- | ui/app/components/pending-tx/index.js | 103 |
2 files changed, 163 insertions, 183 deletions
diff --git a/ui/app/components/pending-tx.js b/ui/app/components/pending-tx/confirm-send-ether.js index a8fac4c28..29c6d349c 100644 --- a/ui/app/components/pending-tx.js +++ b/ui/app/components/pending-tx/confirm-send-ether.js @@ -1,34 +1,20 @@ const Component = require('react').Component const { connect } = require('react-redux') const h = require('react-hyperscript') -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 actions = require('../../actions') const clone = require('clone') -const FiatValue = require('./fiat-value') -const Identicon = require('./identicon') - +const Identicon = require('../identicon') const ethUtil = require('ethereumjs-util') const BN = ethUtil.BN -const hexToBn = require('../../../app/scripts/lib/hex-to-bn') -const util = require('../util') -const { conversionUtil, addCurrencies } = require('../conversion-util') +const hexToBn = require('../../../../app/scripts/lib/hex-to-bn') +const { conversionUtil, addCurrencies } = require('../../conversion-util') const MIN_GAS_PRICE_GWEI_BN = new BN(1) const GWEI_FACTOR = new BN(1e9) const MIN_GAS_PRICE_BN = MIN_GAS_PRICE_GWEI_BN.mul(GWEI_FACTOR) -// Next: create separate react components -// roughly 5 components: -// heroIcon -// numericDisplay (contains symbol + currency) -// divider -// contentBox -// actionButtons - -module.exports = connect(mapStateToProps, mapDispatchToProps)(PendingTx) +module.exports = connect(mapStateToProps, mapDispatchToProps)(ConfirmSendEther) function mapStateToProps (state) { const { @@ -52,87 +38,45 @@ function mapDispatchToProps (dispatch) { } } -inherits(PendingTx, Component) -function PendingTx () { +inherits(ConfirmSendEther, Component) +function ConfirmSendEther () { Component.call(this) - this.state = { - valid: true, - txData: null, - submitting: false, - } + this.state = {} this.onSubmit = this.onSubmit.bind(this) } -PendingTx.prototype.componentWillMount = function () { - this.props.setCurrentCurrencyToUSD() -} - -PendingTx.prototype.getAmount = function () { +ConfirmSendEther.prototype.getAmount = function () { const { conversionRate } = this.props const txMeta = this.gatherTxMeta() const txParams = txMeta.txParams || {} - const decodedData = txParams.data && abiDecoder.decodeMethod(txParams.data) - const { params = [] } = decodedData || {} - const { name, value } = params[1] || {} - const amountBn = name === '_value' - ? value - : txParams.value - - if (name === '_value') { - const token = util.getContractAtAddress(txParams.to) - token.symbol().then(symbol => console.log({symbol})) - console.log({txParams, txMeta, decodedData, token}) - const USD = conversionUtil(amountBn, { - fromNumericBase: 'hex', - toNumericBase: 'dec', - fromCurrency: 'ETH', - toCurrency: 'USD', - numberOfDecimals: 2, - fromDenomination: 'WEI', - conversionRate, - }) - const ETH = conversionUtil(amountBn, { - fromNumericBase: 'hex', - toNumericBase: 'dec', - fromCurrency: 'ETH', - toCurrency: 'ETH', - fromDenomination: 'WEI', - conversionRate, - numberOfDecimals: 6, - }) - return { - USD, - ETH, - } - } else { - const USD = conversionUtil(amountBn, { - fromNumericBase: 'hex', - toNumericBase: 'dec', - fromCurrency: 'ETH', - toCurrency: 'USD', - numberOfDecimals: 2, - fromDenomination: 'WEI', - conversionRate, - }) - const ETH = conversionUtil(amountBn, { - fromNumericBase: 'hex', - toNumericBase: 'dec', - fromCurrency: 'ETH', - toCurrency: 'ETH', - fromDenomination: 'WEI', - conversionRate, - numberOfDecimals: 6, - }) - - return { - USD, - ETH, - } + + const USD = conversionUtil(txParams.value, { + fromNumericBase: 'hex', + toNumericBase: 'dec', + fromCurrency: 'ETH', + toCurrency: 'USD', + numberOfDecimals: 2, + fromDenomination: 'WEI', + conversionRate, + }) + const ETH = conversionUtil(txParams.value, { + fromNumericBase: 'hex', + toNumericBase: 'dec', + fromCurrency: 'ETH', + toCurrency: 'ETH', + fromDenomination: 'WEI', + conversionRate, + numberOfDecimals: 6, + }) + + return { + USD, + ETH, } } -PendingTx.prototype.getGasFee = function () { +ConfirmSendEther.prototype.getGasFee = function () { const { conversionRate } = this.props const txMeta = this.gatherTxMeta() const txParams = txMeta.txParams || {} @@ -140,7 +84,7 @@ PendingTx.prototype.getGasFee = function () { // 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) @@ -178,13 +122,10 @@ PendingTx.prototype.getGasFee = function () { } } -PendingTx.prototype.getData = function () { +ConfirmSendEther.prototype.getData = function () { const { identities } = this.props const txMeta = this.gatherTxMeta() const txParams = txMeta.txParams || {} - const decodedData = txParams.data && abiDecoder.decodeMethod(txParams.data) - const { name, params = [] } = decodedData || {} - const { type, value } = params[0] || {} const { USD: gasFeeInUSD, ETH: gasFeeInETH } = this.getGasFee() const { USD: amountInUSD, ETH: amountInETH } = this.getAmount() @@ -197,51 +138,30 @@ PendingTx.prototype.getData = function () { numberOfDecimals: 6, }) - if (name === 'transfer' && type === 'address') { - return { - from: { - address: txParams.from, - name: identities[txParams.from].name, - }, - to: { - address: value, - name: identities[value] ? identities[value].name : 'New Recipient', - }, - memo: txParams.memo || '', - gasFeeInUSD, - gasFeeInETH, - amountInUSD, - amountInETH, - } - } else { - return { - from: { - address: txParams.from, - name: identities[txParams.from].name, - }, - to: { - address: txParams.to, - name: identities[txParams.to] ? identities[txParams.to].name : 'New Recipient', - }, - memo: txParams.memo || '', - gasFeeInUSD, - gasFeeInETH, - amountInUSD, - amountInETH, - totalInUSD, - totalInETH, - } + return { + from: { + address: txParams.from, + name: identities[txParams.from].name, + }, + to: { + address: txParams.to, + name: identities[txParams.to] ? identities[txParams.to].name : 'New Recipient', + }, + memo: txParams.memo || '', + gasFeeInUSD, + gasFeeInETH, + amountInUSD, + amountInETH, + totalInUSD, + totalInETH, } } -PendingTx.prototype.render = function () { +ConfirmSendEther.prototype.render = function () { const { backToAccountDetail, selectedAddress } = this.props const txMeta = this.gatherTxMeta() const txParams = txMeta.txParams || {} - // recipient check - // const isValidAddress = !txParams.to || util.isValidAddress(txParams.to) - const { from: { address: fromAddress, @@ -255,7 +175,6 @@ PendingTx.prototype.render = function () { gasFeeInUSD, gasFeeInETH, amountInUSD, - amountInETH, totalInUSD, totalInETH, } = this.getData() @@ -450,13 +369,6 @@ PendingTx.prototype.render = function () { h('form#pending-tx-form.flex-column.flex-center', { onSubmit: this.onSubmit, }, [ - // Reset Button - // h('button', { - // onClick: (event) => { - // this.resetGasFields() - // event.preventDefault() - // }, - // }, 'Reset'), // Accept Button h('button.confirm-screen-confirm-button', ['CONFIRM']), @@ -470,42 +382,7 @@ PendingTx.prototype.render = function () { ) } -// PendingTx.prototype.gasPriceChanged = function (newBN, valid) { -// log.info(`Gas price changed to: ${newBN.toString(10)}`) -// const txMeta = this.gatherTxMeta() -// txMeta.txParams.gasPrice = '0x' + newBN.toString('hex') -// this.setState({ -// txData: clone(txMeta), -// valid, -// }) -// } - -// PendingTx.prototype.gasLimitChanged = function (newBN, valid) { -// log.info(`Gas limit changed to ${newBN.toString(10)}`) -// const txMeta = this.gatherTxMeta() -// txMeta.txParams.gas = '0x' + newBN.toString('hex') -// this.setState({ -// txData: clone(txMeta), -// valid, -// }) -// } - -// PendingTx.prototype.resetGasFields = function () { -// log.debug(`pending-tx resetGasFields`) - -// this.inputs.forEach((hexInput) => { -// if (hexInput) { -// hexInput.setValid() -// } -// }) - -// this.setState({ -// txData: null, -// valid: true, -// }) -// } - -PendingTx.prototype.onSubmit = function (event) { +ConfirmSendEther.prototype.onSubmit = function (event) { event.preventDefault() const txMeta = this.gatherTxMeta() const valid = this.checkValidity() @@ -519,18 +396,18 @@ PendingTx.prototype.onSubmit = function (event) { } } -PendingTx.prototype.cancel = function (event, txMeta) { +ConfirmSendEther.prototype.cancel = function (event, txMeta) { event.preventDefault() this.props.cancelTransaction(txMeta) } -PendingTx.prototype.checkValidity = function () { +ConfirmSendEther.prototype.checkValidity = function () { const form = this.getFormEl() const valid = form.checkValidity() return valid } -PendingTx.prototype.getFormEl = function () { +ConfirmSendEther.prototype.getFormEl = function () { const form = document.querySelector('form#pending-tx-form') // Stub out form for unit tests: if (!form) { @@ -540,7 +417,7 @@ PendingTx.prototype.getFormEl = function () { } // After a customizable state value has been updated, -PendingTx.prototype.gatherTxMeta = function () { +ConfirmSendEther.prototype.gatherTxMeta = function () { const props = this.props const state = this.state const txData = clone(state.txData) || clone(props.txData) @@ -549,7 +426,7 @@ PendingTx.prototype.gatherTxMeta = function () { return txData } -PendingTx.prototype.verifyGasParams = function () { +ConfirmSendEther.prototype.verifyGasParams = function () { // We call this in case the gas has not been modified at all if (!this.state) { return true } return ( @@ -558,11 +435,11 @@ PendingTx.prototype.verifyGasParams = function () { ) } -PendingTx.prototype._notZeroOrEmptyString = function (obj) { +ConfirmSendEther.prototype._notZeroOrEmptyString = function (obj) { return obj !== '' && obj !== '0x0' } -PendingTx.prototype.bnMultiplyByFraction = function (targetBN, numerator, denominator) { +ConfirmSendEther.prototype.bnMultiplyByFraction = function (targetBN, numerator, denominator) { const numBN = new BN(numerator) const denomBN = new BN(denominator) return targetBN.mul(numBN).div(denomBN) diff --git a/ui/app/components/pending-tx/index.js b/ui/app/components/pending-tx/index.js new file mode 100644 index 000000000..3797b5642 --- /dev/null +++ b/ui/app/components/pending-tx/index.js @@ -0,0 +1,103 @@ +const Component = require('react').Component +const { connect } = require('react-redux') +const h = require('react-hyperscript') +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 util = require('../../util') +const ConfirmSendEther = require('./confirm-send-ether') + +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, + } = state.metamask + const accounts = state.metamask.accounts + const selectedAddress = state.metamask.selectedAddress || Object.keys(accounts)[0] + return { + conversionRate, + identities, + selectedAddress, + } +} + +function mapDispatchToProps (dispatch) { + return { + setCurrentCurrencyToUSD: () => dispatch(actions.setCurrentCurrency('USD')), + 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: '', + } +} + +PendingTx.prototype.componentWillMount = function () { + const txMeta = this.gatherTxMeta() + const txParams = txMeta.txParams || {} + + this.props.setCurrentCurrencyToUSD() + + if (txParams.to) { + const token = util.getContractAtAddress(txParams.to) + token + .symbol() + .then(result => { + const symbol = result[0] || null + this.setState({ + transactionType: symbol ? TX_TYPES.SEND_TOKEN : TX_TYPES.SEND_ETHER, + isFetching: false, + }) + }) + .catch(() => this.setState({ + transactionType: TX_TYPES.SEND_ETHER, + isFetching: false, + })) + } else { + this.setState({ + transactionType: TX_TYPES.DEPLOY_CONTRACT, + 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 } = this.state + + if (isFetching) { + return h('noscript') + } + + + switch (transactionType) { + case TX_TYPES.SEND_ETHER: + return h(ConfirmSendEther, { txData: this.gatherTxMeta() }) + default: + return h('noscript') + } +} |