From ea9d51e427b8e607e612a01629bebf153e516ad9 Mon Sep 17 00:00:00 2001 From: Alexander Tseung Date: Fri, 22 Jun 2018 23:52:45 -0700 Subject: Refactor and redesign confirm transaction views --- .../confirm-transaction.component.js | 59 ++++++++++++++++++++++ .../confirm-transaction.container.js | 19 +++++++ .../components/pages/confirm-transaction/index.js | 2 + 3 files changed, 80 insertions(+) create mode 100644 ui/app/components/pages/confirm-transaction/confirm-transaction.component.js create mode 100644 ui/app/components/pages/confirm-transaction/confirm-transaction.container.js create mode 100644 ui/app/components/pages/confirm-transaction/index.js (limited to 'ui/app/components/pages/confirm-transaction') diff --git a/ui/app/components/pages/confirm-transaction/confirm-transaction.component.js b/ui/app/components/pages/confirm-transaction/confirm-transaction.component.js new file mode 100644 index 000000000..cc0b019e0 --- /dev/null +++ b/ui/app/components/pages/confirm-transaction/confirm-transaction.component.js @@ -0,0 +1,59 @@ +import React, { Component } from 'react' +import PropTypes from 'prop-types' +import { Switch, Route } from 'react-router-dom' +import ConfirmTransactionSwitch from '../confirm-transaction-switch' +import ConfirmTransactionBase from '../confirm-transaction-base' +import ConfirmSendEther from '../confirm-send-ether' +import ConfirmSendToken from '../confirm-send-token' +import ConfirmDeployContract from '../confirm-deploy-contract' +import ConfirmApprove from '../confirm-approve' +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, +} from '../../../routes' + +export default class ConfirmTransaction extends Component { + static propTypes = { + history: PropTypes.object.isRequired, + totalUnapprovedCount: PropTypes.number.isRequired, + match: PropTypes.object, + send: PropTypes.object, + } + + componentDidMount () { + const { totalUnapprovedCount = 0, send = {}, history } = this.props + + if (!totalUnapprovedCount && !send.to) { + history.replace(DEFAULT_ROUTE) + } + } + + render () { + return ( + + + + + + + + + + ) + } +} diff --git a/ui/app/components/pages/confirm-transaction/confirm-transaction.container.js b/ui/app/components/pages/confirm-transaction/confirm-transaction.container.js new file mode 100644 index 000000000..6779e69b7 --- /dev/null +++ b/ui/app/components/pages/confirm-transaction/confirm-transaction.container.js @@ -0,0 +1,19 @@ +import { connect } from 'react-redux' +import { compose } from 'recompose' +import { withRouter } from 'react-router-dom' +import ConfirmTransaction from './confirm-transaction.component' +import { getTotalUnapprovedCount } from '../../../selectors' + +const mapStateToProps = (state, props) => { + const { metamask: { send } } = state + + return { + totalUnapprovedCount: getTotalUnapprovedCount(state), + send, + } +} + +export default compose( + withRouter, + connect(mapStateToProps), +)(ConfirmTransaction) diff --git a/ui/app/components/pages/confirm-transaction/index.js b/ui/app/components/pages/confirm-transaction/index.js new file mode 100644 index 000000000..4bf42d85c --- /dev/null +++ b/ui/app/components/pages/confirm-transaction/index.js @@ -0,0 +1,2 @@ +import ConfirmTransaction from './confirm-transaction.container' +module.exports = ConfirmTransaction -- cgit From e89549846fd3bd520b99740c7845f48f368c3afa Mon Sep 17 00:00:00 2001 From: Alexander Tseung Date: Mon, 25 Jun 2018 12:06:57 -0700 Subject: Refactor data flow, signature request routing --- .../confirm-transaction.component.js | 126 ++++++++++++++++----- .../confirm-transaction.container.js | 17 ++- 2 files changed, 114 insertions(+), 29 deletions(-) (limited to 'ui/app/components/pages/confirm-transaction') 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) -- cgit From 7732cd4100f3c40f35eeaec669094f63292cbe3d Mon Sep 17 00:00:00 2001 From: Alexander Tseung Date: Mon, 25 Jun 2018 21:29:16 -0700 Subject: Display newest transaction --- .../pages/confirm-transaction/confirm-transaction.component.js | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) (limited to 'ui/app/components/pages/confirm-transaction') 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 29ee5eedc..d4581e8ed 100644 --- a/ui/app/components/pages/confirm-transaction/confirm-transaction.component.js +++ b/ui/app/components/pages/confirm-transaction/confirm-transaction.component.js @@ -61,7 +61,7 @@ export default class ConfirmTransaction extends Component { setTransactionToConfirm(paramsTransactionId) } - if (!paramsTransactionId) { + if (!transactionId) { this.setTransactionToConfirm() } } @@ -84,7 +84,8 @@ export default class ConfirmTransaction extends Component { setTransactionToConfirm(paramsTransactionId) } } else if (unconfirmedTransactions.length) { - const transactionId = unconfirmedTransactions[0].id + const totalUnconfirmed = unconfirmedTransactions.length + const transactionId = unconfirmedTransactions[totalUnconfirmed - 1].id setTransactionToConfirm(transactionId) } } -- cgit From 9cde5ab11b0670eed7baeb2f31486cb3e253bdcb Mon Sep 17 00:00:00 2001 From: Alexander Tseung Date: Thu, 28 Jun 2018 11:23:31 -0700 Subject: Use eth-method-registry to get method data --- .../pages/confirm-transaction/confirm-transaction.component.js | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) (limited to 'ui/app/components/pages/confirm-transaction') 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 d4581e8ed..219f5b49a 100644 --- a/ui/app/components/pages/confirm-transaction/confirm-transaction.component.js +++ b/ui/app/components/pages/confirm-transaction/confirm-transaction.component.js @@ -85,8 +85,12 @@ export default class ConfirmTransaction extends Component { } } else if (unconfirmedTransactions.length) { const totalUnconfirmed = unconfirmedTransactions.length - const transactionId = unconfirmedTransactions[totalUnconfirmed - 1].id - setTransactionToConfirm(transactionId) + const transaction = unconfirmedTransactions[totalUnconfirmed - 1] + const { id: transactionId, loadingDefaults } = transaction + + if (!loadingDefaults) { + setTransactionToConfirm(transactionId) + } } } -- cgit From a2d9c43fba49680d7553409a4f5013d3febd80e9 Mon Sep 17 00:00:00 2001 From: Alexander Tseung Date: Fri, 6 Jul 2018 11:58:41 -0700 Subject: Various fixes from PR comments --- .../confirm-transaction.component.js | 24 ++++++++++++++++------ .../confirm-transaction.container.js | 7 +++++-- 2 files changed, 23 insertions(+), 8 deletions(-) (limited to 'ui/app/components/pages/confirm-transaction') 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 219f5b49a..874a89fd2 100644 --- a/ui/app/components/pages/confirm-transaction/confirm-transaction.component.js +++ b/ui/app/components/pages/confirm-transaction/confirm-transaction.component.js @@ -1,7 +1,6 @@ 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' @@ -30,6 +29,12 @@ export default class ConfirmTransaction extends Component { unconfirmedTransactions: PropTypes.array, setTransactionToConfirm: PropTypes.func, confirmTransaction: PropTypes.object, + clearConfirmTransaction: PropTypes.func, + } + + getParamsTransactionId () { + const { match: { params: { id } = {} } } = this.props + return id || null } componentDidMount () { @@ -52,13 +57,16 @@ export default class ConfirmTransaction extends Component { componentDidUpdate () { const { - match: { params: { id: paramsTransactionId } = {} }, setTransactionToConfirm, confirmTransaction: { txData: { id: transactionId } = {} }, + clearConfirmTransaction, } = this.props + const paramsTransactionId = this.getParamsTransactionId() if (paramsTransactionId && transactionId && paramsTransactionId !== transactionId + '') { + clearConfirmTransaction() setTransactionToConfirm(paramsTransactionId) + return } if (!transactionId) { @@ -70,13 +78,13 @@ export default class ConfirmTransaction extends Component { const { history, unconfirmedTransactions, - match: { params: { id: paramsTransactionId } = {} }, setTransactionToConfirm, } = this.props + const paramsTransactionId = this.getParamsTransactionId() if (paramsTransactionId) { // Check to make sure params ID is valid - const tx = R.find(({ id }) => id + '' === paramsTransactionId)(unconfirmedTransactions) + const tx = unconfirmedTransactions.find(({ id }) => id + '' === paramsTransactionId) if (!tx) { history.replace(DEFAULT_ROUTE) @@ -96,8 +104,12 @@ export default class ConfirmTransaction extends Component { render () { const { confirmTransaction: { txData: { id } } = {} } = this.props + const paramsTransactionId = this.getParamsTransactionId() - return id + // Show routes when state.confirmTransaction has been set and when either the ID in the params + // isn't specified or is specified and matches the ID in state.confirmTransaction in order to + // support URLs of /confirm-transaction or /confirm-transaction/ + return id && (!paramsTransactionId || paramsTransactionId === 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 1ad5aa355..1bc2f1efb 100644 --- a/ui/app/components/pages/confirm-transaction/confirm-transaction.container.js +++ b/ui/app/components/pages/confirm-transaction/confirm-transaction.container.js @@ -1,7 +1,10 @@ import { connect } from 'react-redux' import { compose } from 'recompose' import { withRouter } from 'react-router-dom' -import { setTransactionToConfirm } from '../../../ducks/confirm-transaction.duck' +import { + setTransactionToConfirm, + clearConfirmTransaction, +} from '../../../ducks/confirm-transaction.duck' import ConfirmTransaction from './confirm-transaction.component' import { getTotalUnapprovedCount } from '../../../selectors' import { unconfirmedTransactionsListSelector } from '../../../selectors/confirm-transaction' @@ -20,7 +23,7 @@ const mapStateToProps = state => { const mapDispatchToProps = dispatch => { return { setTransactionToConfirm: transactionId => dispatch(setTransactionToConfirm(transactionId)), - + clearConfirmTransaction: () => dispatch(clearConfirmTransaction()), } } -- cgit