From 5752742459da8e9aa3e14ee599d9caa5ad9fc505 Mon Sep 17 00:00:00 2001
From: Ariella Vu <20778143+digiwand@users.noreply.github.com>
Date: Sat, 11 Feb 2023 22:17:12 +0700
Subject: [PATCH] Clean ConfirmTranscationPage component (#17546)
* ConfirmTransaction: rm unused metricEvent context
* ConfirmTransaction: rm unused mapToProps props:
- unapprovedTxs
- id
* ConfirmTransaction: convert to FC
* ConfirmTransaction: use const ORIGIN_METAMASK
* ConfirmTransaction: rm mapStateToProps
* ConfirmTransaction: mv confirm-transaction ducks
* ConfirmTransaction: mv getContractMethodData duck
* ConfirmTransaction: rm container file
* ConfirmTransaction: use ORIGIN_METAMASK const
* clean: rn totalUnapprovedCount -> totalUnapproved
* clean: reorder ConfirmTransaction & alphabetize
* clean: rn validTransactionId> isValidTransactionId
* clean: rn unconfirmedTransactions > unconfirmedTxs
* ConfirmationTransaction: add tests
* ConfirmTransaction: mv const
* ConfirmTransaction: update jest mock after merge
* ConfirmTransaction: fix from merge fault
* tests: update snapshot after mock-state updates
---
.../confirm-transaction.component.js | 57 +++++++++----------
1 file changed, 28 insertions(+), 29 deletions(-)
diff --git a/ui/pages/confirm-transaction/confirm-transaction.component.js b/ui/pages/confirm-transaction/confirm-transaction.component.js
index cfa563c5d..066fef15b 100644
--- a/ui/pages/confirm-transaction/confirm-transaction.component.js
+++ b/ui/pages/confirm-transaction/confirm-transaction.component.js
@@ -1,13 +1,14 @@
import React, { useCallback, useEffect, useMemo, useState } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { Switch, Route, useHistory, useParams } from 'react-router-dom';
+
import Loading from '../../components/ui/loading-screen';
-import ConfirmTransactionSwitch from '../confirm-transaction-switch';
import ConfirmContractInteraction from '../confirm-contract-interaction';
-import ConfirmSendEther from '../confirm-send-ether';
import ConfirmDeployContract from '../confirm-deploy-contract';
import ConfirmDecryptMessage from '../confirm-decrypt-message';
import ConfirmEncryptionPublicKey from '../confirm-encryption-public-key';
+import ConfirmSendEther from '../confirm-send-ether';
+import ConfirmTransactionSwitch from '../confirm-transaction-switch';
import { ORIGIN_METAMASK } from '../../../shared/constants/app';
@@ -18,14 +19,14 @@ import {
import { getMostRecentOverviewPage } from '../../ducks/history/history';
import { getSendTo } from '../../ducks/send';
import {
- CONFIRM_TRANSACTION_ROUTE,
CONFIRM_DEPLOY_CONTRACT_PATH,
CONFIRM_SEND_ETHER_PATH,
CONFIRM_TOKEN_METHOD_PATH,
- SIGNATURE_REQUEST_PATH,
+ CONFIRM_TRANSACTION_ROUTE,
DECRYPT_MESSAGE_REQUEST_PATH,
- ENCRYPTION_PUBLIC_KEY_REQUEST_PATH,
DEFAULT_ROUTE,
+ ENCRYPTION_PUBLIC_KEY_REQUEST_PATH,
+ SIGNATURE_REQUEST_PATH,
} from '../../helpers/constants/routes';
import { isTokenMethodAction } from '../../helpers/utils/transactions.util';
import { usePrevious } from '../../hooks/usePrevious';
@@ -56,29 +57,31 @@ const ConfirmTransaction = () => {
const mostRecentOverviewPage = useSelector(getMostRecentOverviewPage);
const sendTo = useSelector(getSendTo);
const unapprovedTxs = useSelector(getUnapprovedTransactions);
- const unconfirmedTransactions = useSelector(
- unconfirmedTransactionsListSelector,
- );
+ const unconfirmedTxs = useSelector(unconfirmedTransactionsListSelector);
const unconfirmedMessages = useSelector(unconfirmedTransactionsHashSelector);
- const totalUnapprovedCount = unconfirmedTransactions.length || 0;
+ const totalUnapproved = unconfirmedTxs.length || 0;
+
const transaction = useMemo(() => {
- return totalUnapprovedCount
+ return totalUnapproved
? unapprovedTxs[paramsTransactionId] ||
unconfirmedMessages[paramsTransactionId] ||
- unconfirmedTransactions[0]
+ unconfirmedTxs[0]
: {};
}, [
paramsTransactionId,
- totalUnapprovedCount,
+ totalUnapproved,
unapprovedTxs,
unconfirmedMessages,
- unconfirmedTransactions,
+ unconfirmedTxs,
]);
const { id, type } = transaction;
const transactionId = id && String(id);
const isValidERC20TokenMethod = isTokenMethodAction(type);
+ const isValidTransactionId =
+ transactionId &&
+ (!paramsTransactionId || paramsTransactionId === transactionId);
const prevParamsTransactionId = usePrevious(paramsTransactionId);
const prevTransactionId = usePrevious(transactionId);
@@ -95,8 +98,6 @@ const ConfirmTransaction = () => {
useEffect(() => {
setIsMounted(true);
- const { txParams: { data } = {}, origin } = transaction;
-
getGasFeeEstimatesAndStartPolling().then((_pollingToken) => {
if (isMounted) {
setPollingToken(_pollingToken);
@@ -109,9 +110,11 @@ const ConfirmTransaction = () => {
window.addEventListener('beforeunload', _beforeUnload);
- if (!totalUnapprovedCount && !sendTo) {
+ if (!totalUnapproved && !sendTo) {
history.replace(mostRecentOverviewPage);
} else {
+ const { txParams: { data } = {}, origin } = transaction;
+
if (origin !== ORIGIN_METAMASK) {
dispatch(getContractMethodData(data));
}
@@ -130,19 +133,19 @@ const ConfirmTransaction = () => {
}, []);
useEffect(() => {
- const { txData: { txParams: { data } = {}, origin } = {} } = transaction;
-
if (
paramsTransactionId &&
transactionId &&
prevParamsTransactionId !== paramsTransactionId
) {
+ const { txData: { txParams: { data } = {}, origin } = {} } = transaction;
+
dispatch(clearConfirmTransaction());
dispatch(setTransactionToConfirm(paramsTransactionId));
if (origin !== ORIGIN_METAMASK) {
dispatch(getContractMethodData(data));
}
- } else if (prevTransactionId && !transactionId && !totalUnapprovedCount) {
+ } else if (prevTransactionId && !transactionId && !totalUnapproved) {
dispatch(setDefaultHomeActiveTabName('activity')).then(() => {
history.replace(DEFAULT_ROUTE);
});
@@ -155,27 +158,23 @@ const ConfirmTransaction = () => {
}
}, [
dispatch,
- transaction,
- paramsTransactionId,
- transactionId,
history,
mostRecentOverviewPage,
+ paramsTransactionId,
prevParamsTransactionId,
prevTransactionId,
- totalUnapprovedCount,
+ totalUnapproved,
+ transaction,
+ transactionId,
]);
- const validTransactionId =
- transactionId &&
- (!paramsTransactionId || paramsTransactionId === transactionId);
-
- if (isValidERC20TokenMethod && validTransactionId) {
+ if (isValidERC20TokenMethod && isValidTransactionId) {
return ;
}
// 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 validTransactionId ? (
+ return isValidTransactionId ? (