diff --git a/ui/app/components/pages/confirm-transaction-base/confirm-transaction-base.component.js b/ui/app/components/pages/confirm-transaction-base/confirm-transaction-base.component.js index 3b60a5d5d..dfbbd0177 100644 --- a/ui/app/components/pages/confirm-transaction-base/confirm-transaction-base.component.js +++ b/ui/app/components/pages/confirm-transaction-base/confirm-transaction-base.component.js @@ -36,7 +36,6 @@ export default class ConfirmTransactionBase extends Component { balance: PropTypes.string, currentCurrency: PropTypes.string, conversionRate: PropTypes.number, - setTransactionToConfirm: PropTypes.func, clearConfirmTransaction: PropTypes.func, cancelTransaction: PropTypes.func, clearSend: PropTypes.func, @@ -66,20 +65,12 @@ export default class ConfirmTransactionBase extends Component { onSubmit: PropTypes.func, } - componentDidMount () { - const { match: { params: { id } = {} }, setTransactionToConfirm } = this.props - setTransactionToConfirm(id) - } - - componentDidUpdate (prevProps) { + componentDidUpdate () { const { transactionStatus, showTransactionConfirmedModal, history, clearConfirmTransaction, - match: { params: { id } = {} }, - setTransactionToConfirm, - txData, } = this.props if (transactionStatus === 'dropped') { @@ -92,10 +83,6 @@ export default class ConfirmTransactionBase extends Component { return } - - if (id && id !== txData.id + '') { - setTransactionToConfirm(id) - } } getError () { diff --git a/ui/app/components/pages/confirm-transaction-base/confirm-transaction-base.container.js b/ui/app/components/pages/confirm-transaction-base/confirm-transaction-base.container.js index ea1a1d296..19c39aed9 100644 --- a/ui/app/components/pages/confirm-transaction-base/confirm-transaction-base.container.js +++ b/ui/app/components/pages/confirm-transaction-base/confirm-transaction-base.container.js @@ -4,7 +4,6 @@ import { withRouter } from 'react-router-dom' import R from 'ramda' import ConfirmTransactionBase from './confirm-transaction-base.component' import { - setTransactionToConfirm, clearConfirmTransaction, updateGasAndCalculate, } from '../../../ducks/confirm-transaction.duck' @@ -72,7 +71,6 @@ const mapStateToProps = (state, props) => { const mapDispatchToProps = dispatch => { return { - setTransactionToConfirm: transactionId => dispatch(setTransactionToConfirm(transactionId)), clearConfirmTransaction: () => dispatch(clearConfirmTransaction()), clearSend: () => dispatch(clearSend()), showTransactionConfirmedModal: ({ onHide }) => { diff --git a/ui/app/components/pages/confirm-transaction-switch/confirm-transaction-switch.component.js b/ui/app/components/pages/confirm-transaction-switch/confirm-transaction-switch.component.js index 5f337ab61..9ec0fc623 100644 --- a/ui/app/components/pages/confirm-transaction-switch/confirm-transaction-switch.component.js +++ b/ui/app/components/pages/confirm-transaction-switch/confirm-transaction-switch.component.js @@ -1,39 +1,30 @@ import React, { Component } from 'react' import PropTypes from 'prop-types' import { Redirect } from 'react-router-dom' -import R from 'ramda' import Loading from '../../loading-screen' import { - CONFIRM_DEPLOY_CONTRACT_ROUTE, - CONFIRM_SEND_ETHER_ROUTE, - CONFIRM_SEND_TOKEN_ROUTE, - CONFIRM_APPROVE_ROUTE, - CONFIRM_TOKEN_METHOD_ROUTE, - SIGNATURE_REQUEST_ROUTE, + CONFIRM_TRANSACTION_ROUTE, + CONFIRM_DEPLOY_CONTRACT_PATH, + CONFIRM_SEND_ETHER_PATH, + CONFIRM_SEND_TOKEN_PATH, + CONFIRM_APPROVE_PATH, + CONFIRM_TOKEN_METHOD_PATH, + SIGNATURE_REQUEST_PATH, } from '../../../routes' import { isConfirmDeployContract, getTokenData } from './confirm-transaction-switch.util' import { TOKEN_METHOD_TRANSFER, TOKEN_METHOD_APPROVE } from './confirm-transaction-switch.constants' export default class ConfirmTransactionSwitch extends Component { static propTypes = { - unconfirmedTransactions: PropTypes.array, - match: PropTypes.object, - } - - getTransaction () { - const { unconfirmedTransactions, match } = this.props - const { params: { id: paramsTransactionId } = {} } = match - - return paramsTransactionId - ? R.find(({ id }) => id + '' === paramsTransactionId)(unconfirmedTransactions) - : unconfirmedTransactions[0] + confirmTransaction: PropTypes.object, } redirectToTransaction (txData) { const { id, txParams: { data } } = txData if (isConfirmDeployContract(txData)) { - return + const pathname = `${CONFIRM_TRANSACTION_ROUTE}/${id}${CONFIRM_DEPLOY_CONTRACT_PATH}` + return } if (data) { @@ -41,29 +32,33 @@ export default class ConfirmTransactionSwitch extends Component { const { name: tokenMethodName } = tokenData || {} switch (tokenMethodName) { - case TOKEN_METHOD_TRANSFER: - return - case TOKEN_METHOD_APPROVE: - return - default: - return + case TOKEN_METHOD_TRANSFER: { + const pathname = `${CONFIRM_TRANSACTION_ROUTE}/${id}${CONFIRM_SEND_TOKEN_PATH}` + return + } + case TOKEN_METHOD_APPROVE: { + const pathname = `${CONFIRM_TRANSACTION_ROUTE}/${id}${CONFIRM_APPROVE_PATH}` + return + } + default: { + const pathname = `${CONFIRM_TRANSACTION_ROUTE}/${id}${CONFIRM_TOKEN_METHOD_PATH}` + return + } } } - return + const pathname = `${CONFIRM_TRANSACTION_ROUTE}/${id}${CONFIRM_SEND_ETHER_PATH}` + return } render () { - const txData = this.getTransaction() - - if (!txData) { - return - } + const { confirmTransaction: { txData } } = this.props if (txData.txParams) { return this.redirectToTransaction(txData) } else if (txData.msgParams) { - return + const pathname = `${CONFIRM_TRANSACTION_ROUTE}/${txData.id}${SIGNATURE_REQUEST_PATH}` + return } return diff --git a/ui/app/components/pages/confirm-transaction-switch/confirm-transaction-switch.container.js b/ui/app/components/pages/confirm-transaction-switch/confirm-transaction-switch.container.js index cb6008acb..c04d388a9 100644 --- a/ui/app/components/pages/confirm-transaction-switch/confirm-transaction-switch.container.js +++ b/ui/app/components/pages/confirm-transaction-switch/confirm-transaction-switch.container.js @@ -1,10 +1,11 @@ import { connect } from 'react-redux' import ConfirmTransactionSwitch from './confirm-transaction-switch.component' -import { unconfirmedTransactionsListSelector } from '../../../selectors/confirm-transaction' const mapStateToProps = state => { + const { confirmTransaction } = state + return { - unconfirmedTransactions: unconfirmedTransactionsListSelector(state), + confirmTransaction, } } diff --git a/ui/app/components/pages/confirm-transaction/confirm-transaction.component.js b/ui/app/components/pages/confirm-transaction/confirm-transaction.component.js index cc0b019e0..29ee5eedc 100644 --- a/ui/app/components/pages/confirm-transaction/confirm-transaction.component.js +++ b/ui/app/components/pages/confirm-transaction/confirm-transaction.component.js @@ -1,6 +1,8 @@ import React, { Component } from 'react' import PropTypes from 'prop-types' import { Switch, Route } from 'react-router-dom' +import R from 'ramda' +import Loading from '../../loading-screen' import ConfirmTransactionSwitch from '../confirm-transaction-switch' import ConfirmTransactionBase from '../confirm-transaction-base' import ConfirmSendEther from '../confirm-send-ether' @@ -11,12 +13,12 @@ import ConfTx from '../../../conf-tx' import { DEFAULT_ROUTE, CONFIRM_TRANSACTION_ROUTE, - CONFIRM_DEPLOY_CONTRACT_ROUTE, - CONFIRM_SEND_ETHER_ROUTE, - CONFIRM_SEND_TOKEN_ROUTE, - CONFIRM_APPROVE_ROUTE, - CONFIRM_TOKEN_METHOD_ROUTE, - SIGNATURE_REQUEST_ROUTE, + CONFIRM_DEPLOY_CONTRACT_PATH, + CONFIRM_SEND_ETHER_PATH, + CONFIRM_SEND_TOKEN_PATH, + CONFIRM_APPROVE_PATH, + CONFIRM_TOKEN_METHOD_PATH, + SIGNATURE_REQUEST_PATH, } from '../../../routes' export default class ConfirmTransaction extends Component { @@ -25,35 +27,107 @@ export default class ConfirmTransaction extends Component { totalUnapprovedCount: PropTypes.number.isRequired, match: PropTypes.object, send: PropTypes.object, + unconfirmedTransactions: PropTypes.array, + setTransactionToConfirm: PropTypes.func, + confirmTransaction: PropTypes.object, } componentDidMount () { - const { totalUnapprovedCount = 0, send = {}, history } = this.props + const { + totalUnapprovedCount = 0, + send = {}, + history, + confirmTransaction: { txData: { id: transactionId } = {} }, + } = this.props if (!totalUnapprovedCount && !send.to) { history.replace(DEFAULT_ROUTE) + return + } + + if (!transactionId) { + this.setTransactionToConfirm() + } + } + + componentDidUpdate () { + const { + match: { params: { id: paramsTransactionId } = {} }, + setTransactionToConfirm, + confirmTransaction: { txData: { id: transactionId } = {} }, + } = this.props + + if (paramsTransactionId && transactionId && paramsTransactionId !== transactionId + '') { + setTransactionToConfirm(paramsTransactionId) + } + + if (!paramsTransactionId) { + this.setTransactionToConfirm() + } + } + + setTransactionToConfirm () { + const { + history, + unconfirmedTransactions, + match: { params: { id: paramsTransactionId } = {} }, + setTransactionToConfirm, + } = this.props + + if (paramsTransactionId) { + // Check to make sure params ID is valid + const tx = R.find(({ id }) => id + '' === paramsTransactionId)(unconfirmedTransactions) + + if (!tx) { + history.replace(DEFAULT_ROUTE) + } else { + setTransactionToConfirm(paramsTransactionId) + } + } else if (unconfirmedTransactions.length) { + const transactionId = unconfirmedTransactions[0].id + setTransactionToConfirm(transactionId) } } render () { - return ( - - - - - - - - - - ) + const { confirmTransaction: { txData: { id } } = {} } = this.props + + return id + ? ( + + + + + + + + + + ) + : } } diff --git a/ui/app/components/pages/confirm-transaction/confirm-transaction.container.js b/ui/app/components/pages/confirm-transaction/confirm-transaction.container.js index 6779e69b7..1ad5aa355 100644 --- a/ui/app/components/pages/confirm-transaction/confirm-transaction.container.js +++ b/ui/app/components/pages/confirm-transaction/confirm-transaction.container.js @@ -1,19 +1,30 @@ import { connect } from 'react-redux' import { compose } from 'recompose' import { withRouter } from 'react-router-dom' +import { setTransactionToConfirm } from '../../../ducks/confirm-transaction.duck' import ConfirmTransaction from './confirm-transaction.component' import { getTotalUnapprovedCount } from '../../../selectors' +import { unconfirmedTransactionsListSelector } from '../../../selectors/confirm-transaction' -const mapStateToProps = (state, props) => { - const { metamask: { send } } = state +const mapStateToProps = state => { + const { metamask: { send }, confirmTransaction } = state return { totalUnapprovedCount: getTotalUnapprovedCount(state), send, + confirmTransaction, + unconfirmedTransactions: unconfirmedTransactionsListSelector(state), + } +} + +const mapDispatchToProps = dispatch => { + return { + setTransactionToConfirm: transactionId => dispatch(setTransactionToConfirm(transactionId)), + } } export default compose( withRouter, - connect(mapStateToProps), + connect(mapStateToProps, mapDispatchToProps), )(ConfirmTransaction) diff --git a/ui/app/conf-tx.js b/ui/app/conf-tx.js index 461587cb1..4e8aaa07d 100644 --- a/ui/app/conf-tx.js +++ b/ui/app/conf-tx.js @@ -105,7 +105,7 @@ ConfirmTxScreen.prototype.componentDidUpdate = function (prevProps) { const unconfTxList = txHelper(unapprovedTxs, {}, {}, {}, network) - if (prevTx.status === 'dropped') { + if (prevTx && prevTx.status === 'dropped') { this.props.dispatch(actions.showModal({ name: 'TRANSACTION_CONFIRMED', onHide: () => history.push(DEFAULT_ROUTE), @@ -174,7 +174,6 @@ ConfirmTxScreen.prototype.render = function () { ]), */ - return currentTxView({ // Properties txData: txData, diff --git a/ui/app/ducks/confirm-transaction.duck.js b/ui/app/ducks/confirm-transaction.duck.js index 6df1333dd..c4557bf2f 100644 --- a/ui/app/ducks/confirm-transaction.duck.js +++ b/ui/app/ducks/confirm-transaction.duck.js @@ -284,30 +284,34 @@ export function setTransactionToConfirm (transactionId) { return } - const { lastGasPrice } = transaction - const txData = lastGasPrice ? increaseFromLastGasPrice(transaction) : transaction - dispatch(updateTxDataAndCalculate(txData)) - - const { txParams } = transaction - - if (txParams.data) { - const { tokens: existingTokens } = state - const { data, to: tokenAddress } = txParams - const tokenData = getTokenData(data) - dispatch(updateTokenData(tokenData)) - - const tokenSymbolData = await getSymbolAndDecimals(tokenAddress, existingTokens) || {} - const { symbol: tokenSymbol = '', decimals: tokenDecimals = '' } = tokenSymbolData - dispatch(updateTokenProps({ tokenSymbol, tokenDecimals })) - } + if (transaction.txParams) { + const { lastGasPrice } = transaction + const txData = lastGasPrice ? increaseFromLastGasPrice(transaction) : transaction + dispatch(updateTxDataAndCalculate(txData)) + + const { txParams } = transaction + + if (txParams.data) { + const { tokens: existingTokens } = state + const { data, to: tokenAddress } = txParams + const tokenData = getTokenData(data) + dispatch(updateTokenData(tokenData)) + + const tokenSymbolData = await getSymbolAndDecimals(tokenAddress, existingTokens) || {} + const { symbol: tokenSymbol = '', decimals: tokenDecimals = '' } = tokenSymbolData + dispatch(updateTokenProps({ tokenSymbol, tokenDecimals })) + } - if (txParams.nonce) { - const nonce = conversionUtil(txParams.nonce, { - fromNumericBase: 'hex', - toNumericBase: 'dec', - }) + if (txParams.nonce) { + const nonce = conversionUtil(txParams.nonce, { + fromNumericBase: 'hex', + toNumericBase: 'dec', + }) - dispatch(updateNonce(nonce)) + dispatch(updateNonce(nonce)) + } + } else { + dispatch(updateTxData(transaction)) } } } diff --git a/ui/app/routes.js b/ui/app/routes.js index 2d73bc768..7ac606b1a 100644 --- a/ui/app/routes.js +++ b/ui/app/routes.js @@ -21,14 +21,13 @@ const INITIALIZE_NOTICE_ROUTE = '/initialize/notice' const INITIALIZE_BACKUP_PHRASE_ROUTE = '/initialize/backup-phrase' const INITIALIZE_CONFIRM_SEED_ROUTE = '/initialize/confirm-phrase' -const CONFIRM_TRANSACTION_BASE = '/confirm-transaction' -const CONFIRM_TRANSACTION_ROUTE = `${CONFIRM_TRANSACTION_BASE}` -const CONFIRM_SEND_ETHER_ROUTE = `${CONFIRM_TRANSACTION_BASE}/send-ether` -const CONFIRM_SEND_TOKEN_ROUTE = `${CONFIRM_TRANSACTION_BASE}/send-token` -const CONFIRM_DEPLOY_CONTRACT_ROUTE = `${CONFIRM_TRANSACTION_BASE}/deploy-contract` -const CONFIRM_APPROVE_ROUTE = `${CONFIRM_TRANSACTION_BASE}/approve` -const CONFIRM_TOKEN_METHOD_ROUTE = `${CONFIRM_TRANSACTION_BASE}/token-method` -const SIGNATURE_REQUEST_ROUTE = `${CONFIRM_TRANSACTION_BASE}/signature-request` +const CONFIRM_TRANSACTION_ROUTE = '/confirm-transaction' +const CONFIRM_SEND_ETHER_PATH = '/send-ether' +const CONFIRM_SEND_TOKEN_PATH = '/send-token' +const CONFIRM_DEPLOY_CONTRACT_PATH = '/deploy-contract' +const CONFIRM_APPROVE_PATH = '/approve' +const CONFIRM_TOKEN_METHOD_PATH = '/token-method' +const SIGNATURE_REQUEST_PATH = '/signature-request' module.exports = { DEFAULT_ROUTE, @@ -54,10 +53,10 @@ module.exports = { INITIALIZE_BACKUP_PHRASE_ROUTE, INITIALIZE_CONFIRM_SEED_ROUTE, CONFIRM_TRANSACTION_ROUTE, - CONFIRM_SEND_ETHER_ROUTE, - CONFIRM_SEND_TOKEN_ROUTE, - CONFIRM_DEPLOY_CONTRACT_ROUTE, - CONFIRM_APPROVE_ROUTE, - CONFIRM_TOKEN_METHOD_ROUTE, - SIGNATURE_REQUEST_ROUTE, + CONFIRM_SEND_ETHER_PATH, + CONFIRM_SEND_TOKEN_PATH, + CONFIRM_DEPLOY_CONTRACT_PATH, + CONFIRM_APPROVE_PATH, + CONFIRM_TOKEN_METHOD_PATH, + SIGNATURE_REQUEST_PATH, }