fix: error in navigating between transaction when one of the transact…

…ion is approve all (#27985)

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

## **Related issues**

Fixes: #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.

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;
     }
 

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,
     );