Fixed navigation through multiple unapproved transactions for ERC20 t…

…okens
MetaMask · Dec 6, 2022 · 991f5d8 · 991f5d8
1 parent 2434c43
commit 991f5d8
Showing 1 changed file with 52 additions and 0 deletions.
diff --git a/ui/pages/token-allowance/token-allowance.js b/ui/pages/token-allowance/token-allowance.js
@@ -30,6 +30,7 @@ import {
   getKnownMethodData,
   getRpcPrefsForCurrentProvider,
   getCustomTokenAmount,
+  getUnapprovedTransactions,
 } from '../../selectors';
 import { NETWORK_TO_NAME_MAP } from '../../../shared/constants/network';
 import {
@@ -45,6 +46,10 @@ import Dialog from '../../components/ui/dialog';
 import { useGasFeeContext } from '../../contexts/gasFee';
 import { getCustomTxParamsData } from '../confirm-approve/confirm-approve.util';
 import { setCustomTokenAmount } from '../../ducks/app/app';
+import { ConfirmPageContainerNavigation } from '../../components/app/confirm-page-container';
+import { transactionMatchesNetwork } from '../../../shared/modules/transaction.utils';
+import { hexToDecimal } from '../../../shared/lib/metamask-controller-utils';
+import { CONFIRM_TRANSACTION_ROUTE } from '../../helpers/constants/routes';
 
 export default function TokenAllowance({
   origin,
@@ -187,6 +192,39 @@ export default function TokenAllowance({
 
   const isEmpty = customTokenAmount === '';
 
+  const unapprovedTxs = useSelector(getUnapprovedTransactions);
+  const network = hexToDecimal(fullTxData.chainId);
+
+  const currentNetworkUnapprovedTxs = Object.keys(unapprovedTxs)
+    .filter((key) =>
+      transactionMatchesNetwork(
+        unapprovedTxs[key],
+        fullTxData.chainId,
+        network,
+      ),
+    )
+    .reduce((acc, key) => ({ ...acc, [key]: unapprovedTxs[key] }), {});
+
+  const enumUnapprovedTxs = Object.keys(currentNetworkUnapprovedTxs);
+  const currentPosition = enumUnapprovedTxs.indexOf(
+    fullTxData.id ? fullTxData.id.toString() : '',
+  );
+
+  const totalTx = enumUnapprovedTxs.length;
+  const positionOfCurrentTx = currentPosition + 1;
+  const nextTxId = enumUnapprovedTxs[currentPosition + 1];
+  const prevTxId = enumUnapprovedTxs[currentPosition - 1];
+  const showNavigation = enumUnapprovedTxs.length > 1;
+  const firstTx = enumUnapprovedTxs[0];
+  const lastTx = enumUnapprovedTxs[enumUnapprovedTxs.length - 1];
+
+  const handleNextTx = (txId) => {
+    if (txId) {
+      dispatch(clearConfirmTransaction());
+      history.push(`${CONFIRM_TRANSACTION_ROUTE}/${txId}`);
+    }
+  };
+
   const renderContractTokenValues = (
     <Box marginTop={4} key={tokenAddress}>
       <ContractTokenValues
@@ -200,6 +238,20 @@ export default function TokenAllowance({
 
   return (
     <Box className="token-allowance-container page-container">
+      <Box>
+        <ConfirmPageContainerNavigation
+          totalTx={totalTx}
+          positionOfCurrentTx={positionOfCurrentTx}
+          nextTxId={nextTxId}
+          prevTxId={prevTxId}
+          showNavigation={showNavigation}
+          onNextTx={(txId) => handleNextTx(txId)}
+          firstTx={firstTx}
+          lastTx={lastTx}
+          ofText={t('ofTextNofM')}
+          requestsWaitingText={t('requestsAwaitingAcknowledgement')}
+        />
+      </Box>
       <Box
         paddingLeft={4}
         paddingRight={4}