From 81f46786467b9475b1f4ca6b08e0ed40323c102e Mon Sep 17 00:00:00 2001
From: Jyoti Puri <jyotipuri@gmail.com>
Date: Mon, 21 Oct 2024 18:17:24 +0530
Subject: [PATCH] fix: error in navigating between transaction when one of the
 transaction is approve all (#27985)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## **Description**
Navigation in transaction header was broken when one of the transaction
is of type Approve All

## **Related issues**

Fixes: https://github.com/MetaMask/metamask-extension/issues/27913

## **Manual testing steps**

1. Go to test dapp
2. Submit any re-designed transaction followed by an approve all
transaction
3. Try navigating between transaction using header buttons

## **Screenshots/Recordings**

TODO

## **Pre-merge author checklist**

- [X] I've followed [MetaMask Contributor
Docs](https://github.com/MetaMask/contributor-docs) and [MetaMask
Extension Coding
Standards](https://github.com/MetaMask/metamask-extension/blob/develop/.github/guidelines/CODING_GUIDELINES.md).
- [X] I've completed the PR template to the best of my ability
- [X] I’ve included tests if applicable
- [ ] I’ve documented my code using [JSDoc](https://jsdoc.app/) format
if applicable
- [X] I’ve applied the right labels on the PR (see [labeling
guidelines](https://github.com/MetaMask/metamask-extension/blob/develop/.github/guidelines/LABELING_GUIDELINES.md)).
Not required for external contributors.

## **Pre-merge reviewer checklist**

- [ ] I've manually tested the PR (e.g. pull and build branch, run the
app, test code being changed).
- [ ] I confirm that this PR addresses all acceptance criteria described
in the ticket it closes and includes the necessary testing evidence such
as recordings and or screenshots.
---
 .../info/hooks/useDecodedTransactionData.ts        | 14 ++++++++++----
 .../components/confirm/title/title.tsx             |  5 +++--
 2 files changed, 13 insertions(+), 6 deletions(-)

diff --git a/ui/pages/confirmations/components/confirm/info/hooks/useDecodedTransactionData.ts b/ui/pages/confirmations/components/confirm/info/hooks/useDecodedTransactionData.ts
index 6934f893378d..5276e02eaad1 100644
--- a/ui/pages/confirmations/components/confirm/info/hooks/useDecodedTransactionData.ts
+++ b/ui/pages/confirmations/components/confirm/info/hooks/useDecodedTransactionData.ts
@@ -10,18 +10,24 @@ import { DecodedTransactionDataResponse } from '../../../../../../../shared/type
 import { useConfirmContext } from '../../../../context/confirm';
 import { hasTransactionData } from '../../../../../../../shared/modules/transaction.utils';
 
-export function useDecodedTransactionData(): AsyncResult<
-  DecodedTransactionDataResponse | undefined
-> {
+export function useDecodedTransactionData(
+  transactionTypeFilter?: string,
+): AsyncResult<DecodedTransactionDataResponse | undefined> {
   const { currentConfirmation } = useConfirmContext<TransactionMeta>();
 
+  const currentTransactionType = currentConfirmation?.type;
   const chainId = currentConfirmation?.chainId as Hex;
   const contractAddress = currentConfirmation?.txParams?.to as Hex;
   const transactionData = currentConfirmation?.txParams?.data as Hex;
   const transactionTo = currentConfirmation?.txParams?.to as Hex;
 
   return useAsyncResult(async () => {
-    if (!hasTransactionData(transactionData) || !transactionTo) {
+    if (
+      !hasTransactionData(transactionData) ||
+      !transactionTo ||
+      (transactionTypeFilter &&
+        currentTransactionType !== transactionTypeFilter)
+    ) {
       return undefined;
     }
 
diff --git a/ui/pages/confirmations/components/confirm/title/title.tsx b/ui/pages/confirmations/components/confirm/title/title.tsx
index 969e9c05518d..a926c0f6b482 100644
--- a/ui/pages/confirmations/components/confirm/title/title.tsx
+++ b/ui/pages/confirmations/components/confirm/title/title.tsx
@@ -174,11 +174,12 @@ const ConfirmTitle: React.FC = memo(() => {
 
   let isRevokeSetApprovalForAll = false;
   let revokePending = false;
+  const decodedResponse = useDecodedTransactionData(
+    TransactionType.tokenMethodSetApprovalForAll,
+  );
   if (
     currentConfirmation?.type === TransactionType.tokenMethodSetApprovalForAll
   ) {
-    const decodedResponse = useDecodedTransactionData();
-
     isRevokeSetApprovalForAll = getIsRevokeSetApprovalForAll(
       decodedResponse.value,
     );