mirror of
https://github.com/kremalicious/metamask-extension.git
synced 2024-12-23 01:39:44 +01:00
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
This commit is contained in:
parent
7774ee6e2f
commit
5752742459
@ -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 <ConfirmTokenTransactionSwitch transaction={transaction} />;
|
||||
}
|
||||
// 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/<transactionId>
|
||||
return validTransactionId ? (
|
||||
return isValidTransactionId ? (
|
||||
<Switch>
|
||||
<Route
|
||||
exact
|
||||
|
Loading…
Reference in New Issue
Block a user