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-switch.component.js | 71 ++++++++++++++++++++++ 1 file changed, 71 insertions(+) create mode 100644 ui/app/components/pages/confirm-transaction-switch/confirm-transaction-switch.component.js (limited to 'ui/app/components/pages/confirm-transaction-switch/confirm-transaction-switch.component.js') 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 new file mode 100644 index 000000000..5f337ab61 --- /dev/null +++ b/ui/app/components/pages/confirm-transaction-switch/confirm-transaction-switch.component.js @@ -0,0 +1,71 @@ +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, +} 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] + } + + redirectToTransaction (txData) { + const { id, txParams: { data } } = txData + + if (isConfirmDeployContract(txData)) { + return + } + + if (data) { + const tokenData = getTokenData(data) + const { name: tokenMethodName } = tokenData || {} + + switch (tokenMethodName) { + case TOKEN_METHOD_TRANSFER: + return + case TOKEN_METHOD_APPROVE: + return + default: + return + } + } + + return + } + + render () { + const txData = this.getTransaction() + + if (!txData) { + return + } + + if (txData.txParams) { + return this.redirectToTransaction(txData) + } else if (txData.msgParams) { + return + } + + return + } +} -- 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-switch.component.js | 59 ++++++++++------------ 1 file changed, 27 insertions(+), 32 deletions(-) (limited to 'ui/app/components/pages/confirm-transaction-switch/confirm-transaction-switch.component.js') 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 -- 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 --- .../confirm-transaction-switch.component.js | 26 +++++++++++++++------- 1 file changed, 18 insertions(+), 8 deletions(-) (limited to 'ui/app/components/pages/confirm-transaction-switch/confirm-transaction-switch.component.js') 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 9ec0fc623..db28d0bad 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 @@ -11,7 +11,7 @@ import { CONFIRM_TOKEN_METHOD_PATH, SIGNATURE_REQUEST_PATH, } from '../../../routes' -import { isConfirmDeployContract, getTokenData } from './confirm-transaction-switch.util' +import { isConfirmDeployContract } from './confirm-transaction-switch.util' import { TOKEN_METHOD_TRANSFER, TOKEN_METHOD_APPROVE } from './confirm-transaction-switch.constants' export default class ConfirmTransactionSwitch extends Component { @@ -19,19 +19,29 @@ export default class ConfirmTransactionSwitch extends Component { confirmTransaction: PropTypes.object, } - redirectToTransaction (txData) { - const { id, txParams: { data } } = txData + redirectToTransaction () { + const { + confirmTransaction: { + txData, + methodData: { name }, + fetchingMethodData, + }, + } = this.props + const { id } = txData if (isConfirmDeployContract(txData)) { const pathname = `${CONFIRM_TRANSACTION_ROUTE}/${id}${CONFIRM_DEPLOY_CONTRACT_PATH}` return } - if (data) { - const tokenData = getTokenData(data) - const { name: tokenMethodName } = tokenData || {} + if (fetchingMethodData) { + return + } + + if (name) { + const methodName = name.toLowerCase() - switch (tokenMethodName) { + switch (methodName.toLowerCase()) { case TOKEN_METHOD_TRANSFER: { const pathname = `${CONFIRM_TRANSACTION_ROUTE}/${id}${CONFIRM_SEND_TOKEN_PATH}` return @@ -55,7 +65,7 @@ export default class ConfirmTransactionSwitch extends Component { const { confirmTransaction: { txData } } = this.props if (txData.txParams) { - return this.redirectToTransaction(txData) + return this.redirectToTransaction() } else if (txData.msgParams) { const pathname = `${CONFIRM_TRANSACTION_ROUTE}/${txData.id}${SIGNATURE_REQUEST_PATH}` return -- 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-switch.component.js | 15 ++++++++------- 1 file changed, 8 insertions(+), 7 deletions(-) (limited to 'ui/app/components/pages/confirm-transaction-switch/confirm-transaction-switch.component.js') 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 db28d0bad..25259b98c 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 @@ -16,19 +16,20 @@ import { TOKEN_METHOD_TRANSFER, TOKEN_METHOD_APPROVE } from './confirm-transacti export default class ConfirmTransactionSwitch extends Component { static propTypes = { - confirmTransaction: PropTypes.object, + txData: PropTypes.object, + methodData: PropTypes.object, + fetchingMethodData: PropTypes.bool, } redirectToTransaction () { const { - confirmTransaction: { - txData, - methodData: { name }, - fetchingMethodData, - }, + txData, + methodData: { name }, + fetchingMethodData, } = this.props const { id } = txData + if (isConfirmDeployContract(txData)) { const pathname = `${CONFIRM_TRANSACTION_ROUTE}/${id}${CONFIRM_DEPLOY_CONTRACT_PATH}` return @@ -62,7 +63,7 @@ export default class ConfirmTransactionSwitch extends Component { } render () { - const { confirmTransaction: { txData } } = this.props + const { txData } = this.props if (txData.txParams) { return this.redirectToTransaction() -- cgit From d19c42fcaeea933793ed459ab5248b42811a0498 Mon Sep 17 00:00:00 2001 From: Alexander Tseung Date: Sat, 14 Jul 2018 13:47:07 -0700 Subject: Add fallback when no function found, fix network colors, add fiat values for tokens with contract exchange rates --- .../confirm-transaction-switch.component.js | 20 ++++++++++++++------ 1 file changed, 14 insertions(+), 6 deletions(-) (limited to 'ui/app/components/pages/confirm-transaction-switch/confirm-transaction-switch.component.js') 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 25259b98c..0280f73c6 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 @@ -8,11 +8,16 @@ import { CONFIRM_SEND_ETHER_PATH, CONFIRM_SEND_TOKEN_PATH, CONFIRM_APPROVE_PATH, + CONFIRM_TRANSFER_FROM_PATH, CONFIRM_TOKEN_METHOD_PATH, SIGNATURE_REQUEST_PATH, } from '../../../routes' import { isConfirmDeployContract } from './confirm-transaction-switch.util' -import { TOKEN_METHOD_TRANSFER, TOKEN_METHOD_APPROVE } from './confirm-transaction-switch.constants' +import { + TOKEN_METHOD_TRANSFER, + TOKEN_METHOD_APPROVE, + TOKEN_METHOD_TRANSFER_FROM, +} from './confirm-transaction-switch.constants' export default class ConfirmTransactionSwitch extends Component { static propTypes = { @@ -27,8 +32,7 @@ export default class ConfirmTransactionSwitch extends Component { methodData: { name }, fetchingMethodData, } = this.props - const { id } = txData - + const { id, txParams: { data } = {} } = txData if (isConfirmDeployContract(txData)) { const pathname = `${CONFIRM_TRANSACTION_ROUTE}/${id}${CONFIRM_DEPLOY_CONTRACT_PATH}` @@ -39,10 +43,10 @@ export default class ConfirmTransactionSwitch extends Component { return } - if (name) { - const methodName = name.toLowerCase() + if (data) { + const methodName = name && name.toLowerCase() - switch (methodName.toLowerCase()) { + switch (methodName) { case TOKEN_METHOD_TRANSFER: { const pathname = `${CONFIRM_TRANSACTION_ROUTE}/${id}${CONFIRM_SEND_TOKEN_PATH}` return @@ -51,6 +55,10 @@ export default class ConfirmTransactionSwitch extends Component { const pathname = `${CONFIRM_TRANSACTION_ROUTE}/${id}${CONFIRM_APPROVE_PATH}` return } + case TOKEN_METHOD_TRANSFER_FROM: { + const pathname = `${CONFIRM_TRANSACTION_ROUTE}/${id}${CONFIRM_TRANSFER_FROM_PATH}` + return + } default: { const pathname = `${CONFIRM_TRANSACTION_ROUTE}/${id}${CONFIRM_TOKEN_METHOD_PATH}` return -- cgit