Fix template navigation

MetaMask · Nov 29, 2024 · 07b0dcb · 07b0dcb
1 parent 52a0e95
commit 07b0dcb
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 21 deletions.
diff --git a/ui/pages/confirmations/components/confirm/nav/nav.tsx b/ui/pages/confirmations/components/confirm/nav/nav.tsx
@@ -1,6 +1,6 @@
 import { providerErrors, serializeError } from '@metamask/rpc-errors';
 import React, { useCallback } from 'react';
-import { useDispatch, useSelector } from 'react-redux';
+import { useDispatch } from 'react-redux';
 
 import { QueueType } from '../../../../../../shared/constants/metametrics';
 import {
@@ -25,7 +25,6 @@ import {
   TextVariant,
 } from '../../../../../helpers/constants/design-system';
 import { useI18nContext } from '../../../../../hooks/useI18nContext';
-import { pendingConfirmationsSortedSelector } from '../../../../../selectors';
 import { rejectPendingApproval } from '../../../../../store/actions';
 import { useConfirmContext } from '../../../context/confirm';
 import { useQueuedConfirmationsEvent } from '../../../hooks/useQueuedConfirmationEvents';
@@ -34,9 +33,11 @@ import { useConfirmationNavigation } from '../../../hooks/useConfirmationNavigat
 const Nav = () => {
   const t = useI18nContext();
   const dispatch = useDispatch();
-  const { getIndex, navigateToIndex } = useConfirmationNavigation();
   const { currentConfirmation } = useConfirmContext();
-  const pendingConfirmations = useSelector(pendingConfirmationsSortedSelector);
+
+  const { confirmations, count, getIndex, navigateToIndex } =
+    useConfirmationNavigation();
+
   const position = getIndex(currentConfirmation?.id);
 
   const onNavigateButtonClick = useCallback(
@@ -47,19 +48,19 @@ const Nav = () => {
   );
 
   const onRejectAll = useCallback(() => {
-    pendingConfirmations.forEach((conf) => {
+    confirmations.forEach((conf) => {
       dispatch(
         rejectPendingApproval(
           conf.id,
           serializeError(providerErrors.userRejectedRequest()),
         ),
       );
     });
-  }, [pendingConfirmations]);
+  }, [confirmations]);
 
   useQueuedConfirmationsEvent(QueueType.NavigationHeader);
 
-  if (pendingConfirmations.length <= 1) {
+  if (count <= 1) {
     return null;
   }
 
@@ -93,7 +94,7 @@ const Nav = () => {
           marginInline={2}
           variant={TextVariant.bodySm}
         >
-          {position + 1} of {pendingConfirmations.length}
+          {position + 1} of {count}
         </Text>
         <ButtonIcon
           ariaLabel="Next Confirmation"
@@ -102,7 +103,7 @@ const Nav = () => {
           borderRadius={BorderRadius.full}
           className="confirm_nav__right_btn"
           color={IconColor.iconAlternative}
-          disabled={position === pendingConfirmations.length - 1}
+          disabled={position === count - 1}
           iconName={IconName.ArrowRight}
           onClick={() => onNavigateButtonClick(1)}
           size={ButtonIconSize.Sm}

diff --git a/ui/pages/confirmations/hooks/useConfirmationNavigation.ts b/ui/pages/confirmations/hooks/useConfirmationNavigation.ts
@@ -11,7 +11,7 @@ import {
 } from '../../../helpers/constants/routes';
 
 export function useConfirmationNavigation() {
-  const pendingConfirmations = useSelector(
+  const confirmations = useSelector(
     pendingConfirmationsSortedSelector,
     isEqual,
   );
@@ -24,18 +24,18 @@ export function useConfirmationNavigation() {
         return 0;
       }
 
-      return pendingConfirmations.findIndex(({ id }) => id === confirmationId);
+      return confirmations.findIndex(({ id }) => id === confirmationId);
     },
-    [pendingConfirmations],
+    [confirmations],
   );
 
   const navigateToId = useCallback(
     (confirmationId?: string) => {
-      if (pendingConfirmations?.length <= 0 || !confirmationId) {
+      if (confirmations?.length <= 0 || !confirmationId) {
         return;
       }
 
-      const nextConfirmation = pendingConfirmations.find(
+      const nextConfirmation = confirmations.find(
         (confirmation) => confirmation.id === confirmationId,
       );
 
@@ -48,24 +48,24 @@ export function useConfirmationNavigation() {
       );
 
       if (isTemplate) {
-        history.replace(`/${CONFIRMATION_V_NEXT_ROUTE}/${nextConfirmation.id}`);
+        history.replace(`${CONFIRMATION_V_NEXT_ROUTE}/${confirmationId}`);
         return;
       }
 
-      history.replace(`${CONFIRM_TRANSACTION_ROUTE}/${nextConfirmation.id}`);
+      history.replace(`${CONFIRM_TRANSACTION_ROUTE}/${confirmationId}`);
     },
-    [pendingConfirmations, history],
+    [confirmations, history],
   );
 
   const navigateToIndex = useCallback(
     (index: number) => {
-      const nextConfirmation = pendingConfirmations[index];
+      const nextConfirmation = confirmations[index];
       navigateToId(nextConfirmation?.id);
     },
-    [pendingConfirmations, navigateToId],
+    [confirmations, navigateToId],
   );
 
-  const count = pendingConfirmations.length;
+  const count = confirmations.length;
 
-  return { count, getIndex, navigateToId, navigateToIndex };
+  return { confirmations, count, getIndex, navigateToId, navigateToIndex };
 }