feat: cp-7.60.0 reject duplicate metamask pay transactions (#22836)

## **Description**

Reject any existing unapproved Perps and Predict deposit transactions
when navigating to the confirmation, and using the custom loader.

Also remove the back button in the Perps deposit confirmation while
loading.

## **Changelog**

CHANGELOG entry: null

## **Related issues**

Fixes: #22715 

## **Manual testing steps**

## **Screenshots/Recordings**

### **Before**

### **After**

## **Pre-merge author checklist**

- [x] I’ve followed [MetaMask Contributor
Docs](https://github.com/MetaMask/contributor-docs) and [MetaMask Mobile
Coding
Standards](https://github.com/MetaMask/metamask-mobile/blob/main/.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
- [x] 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-mobile/blob/main/.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.

<!-- CURSOR_SUMMARY -->
---

> [!NOTE]
> Reject unapproved transactions when navigating to confirmation with
CustomAmount loader and adjust Perps confirmation header (show header,
no back); add supporting tests/mocks.
> 
> - **Confirmations**:
> - Reject unapproved `transactions` via `ApprovalController.reject`
when navigating with `loader: CustomAmount`, then proceed to navigate
once cleared.
> - Read pending txs from Redux (`selectTransactions`); manage deferred
navigation with local state/effect; add logs.
> - Default `loader` to `CustomAmount` when `stack ===
Routes.PERPS.ROOT`; honor `headerShown === false` to use `NO_HEADER`
route.
> - **UI (Perps)**:
> - `routes/index.tsx`: For
`FULL_SCREEN_CONFIRMATIONS.REDESIGNED_CONFIRMATIONS`, set `headerShown:
true` and `headerLeft: () => null` (no back button).
> - **Tests**:
> - Add `useConfirmNavigation` tests covering stack/no-header and
rejection of pending txs.
>   - Update `PredictTabView.test.tsx` to mock `useConfirmNavigation`.
> 
> <sup>Written by [Cursor
Bugbot](https://cursor.com/dashboard?tab=bugbot) for commit
1c0ef84. This will update automatically
on new commits. Configure
[here](https://cursor.com/dashboard?tab=bugbot).</sup>
<!-- /CURSOR_SUMMARY -->

Author: matthewwalsh0

app/components/UI/Perps/routes/index.tsx

@@ -261,6 +261,8 @@ const PerpsScreenStack = () => (
           name={Routes.FULL_SCREEN_CONFIRMATIONS.REDESIGNED_CONFIRMATIONS}
           component={Confirm}
           options={{
+            headerLeft: () => null,
+            headerShown: true,
             title: '',
           }}
         />

app/components/UI/Predict/views/PredictTabView/PredictTabView.test.tsx

@@ -331,6 +331,12 @@ jest.mock('@shopify/flash-list', () => {
   };
 });
 
+jest.mock('../../../../Views/confirmations/hooks/useConfirmNavigation', () => ({
+  useConfirmNavigation: () => ({
+    navigateToConfirmation: jest.fn(),
+  }),
+}));
+
 import PredictTabView from './PredictTabView';
 import { useSelector } from 'react-redux';
 

app/components/Views/confirmations/hooks/useConfirmNavigation.test.ts

@@ -1,7 +1,13 @@
+import {
+  TransactionMeta,
+  TransactionStatus,
+} from '@metamask/transaction-controller';
 import Routes from '../../../../constants/navigation/Routes';
 import { renderHookWithProvider } from '../../../../util/test/renderWithProvider';
 import { ConfirmationLoader } from '../components/confirm/confirm-component';
 import { useConfirmNavigation } from './useConfirmNavigation';
+import { act } from '@testing-library/react-native';
+import Engine from '../../../../core/Engine';
 
 const mockNavigate = jest.fn();
 
@@ -12,10 +18,29 @@ jest.mock('@react-navigation/native', () => ({
   }),
 }));
 
+jest.mock('../../../../core/Engine', () => ({
+  context: {
+    ApprovalController: {
+      reject: jest.fn(),
+    },
+  },
+}));
+
 const STACK_MOCK = 'SomeStack';
+const TRANSACTION_ID_MOCK = '123-456';
 
-function runHook() {
-  return renderHookWithProvider(useConfirmNavigation, { state: {} });
+function runHook({ transactions }: { transactions?: TransactionMeta[] } = {}) {
+  return renderHookWithProvider(useConfirmNavigation, {
+    state: {
+      engine: {
+        backgroundState: {
+          TransactionController: {
+            transactions: transactions ?? [],
+          },
+        },
+      },
+    },
+  });
 }
 
 describe('useConfirmNavigation', () => {
@@ -62,4 +87,34 @@ describe('useConfirmNavigation', () => {
       {},
     );
   });
+
+  it('rejects pending transactions before navigating if custom amount loader', async () => {
+    const { result } = runHook({
+      transactions: [
+        {
+          id: TRANSACTION_ID_MOCK,
+          status: TransactionStatus.unapproved,
+        } as TransactionMeta,
+      ],
+    });
+
+    const { navigateToConfirmation } = result.current;
+
+    await act(async () => {
+      navigateToConfirmation({
+        headerShown: false,
+        loader: ConfirmationLoader.CustomAmount,
+      });
+    });
+
+    const approvalControllerMock = jest.mocked(
+      Engine.context.ApprovalController,
+    );
+
+    expect(approvalControllerMock.reject).toHaveBeenCalledTimes(1);
+    expect(approvalControllerMock.reject).toHaveBeenCalledWith(
+      TRANSACTION_ID_MOCK,
+      expect.anything(),
+    );
+  });
 });

app/components/Views/confirmations/hooks/useConfirmNavigation.ts

@@ -1,10 +1,21 @@
 import { useNavigation } from '@react-navigation/native';
-import { useCallback } from 'react';
+import { useCallback, useEffect, useMemo, useState } from 'react';
 import Routes from '../../../../constants/navigation/Routes';
 import {
   ConfirmationLoader,
   ConfirmationParams,
 } from '../components/confirm/confirm-component';
+import {
+  TransactionMeta,
+  TransactionStatus,
+} from '@metamask/transaction-controller';
+import Engine from '../../../../core/Engine';
+import { providerErrors } from '@metamask/rpc-errors';
+import { createProjectLogger } from '@metamask/utils';
+import { useSelector } from 'react-redux';
+import { selectTransactions } from '../../../../selectors/transactionController';
+
+const log = createProjectLogger('confirm-navigation');
 
 const ROUTE = Routes.FULL_SCREEN_CONFIRMATIONS.REDESIGNED_CONFIRMATIONS;
 const ROUTE_NO_HEADER = Routes.FULL_SCREEN_CONFIRMATIONS.NO_HEADER;
@@ -17,6 +28,17 @@ export type ConfirmNavigateOptions = {
 
 export function useConfirmNavigation() {
   const { navigate } = useNavigation();
+  const transactions = useSelector(selectTransactions);
+  const [pendingParams, setPendingParams] = useState<ConfirmNavigateOptions>();
+  const [transactionsToRemove, setTransactionsToRemove] = useState<string[]>();
+
+  const pendingTransactions = useMemo(
+    () =>
+      (transactions ?? []).filter(
+        (tx) => tx.status === TransactionStatus.unapproved,
+      ),
+    [transactions],
+  );
 
   const navigateToConfirmation = useCallback(
     (options: ConfirmNavigateOptions) => {
@@ -27,17 +49,65 @@ export function useConfirmNavigation() {
         params.loader = ConfirmationLoader.CustomAmount;
       }
 
+      if (
+        params.loader === ConfirmationLoader.CustomAmount &&
+        pendingTransactions.length &&
+        !pendingParams
+      ) {
+        log('Rejecting pending transactions before navigating');
+
+        setPendingParams(options);
+        setTransactionsToRemove(pendingTransactions.map((tx) => tx.id));
+        rejectTransactions(pendingTransactions);
+        return;
+      }
+
       const route = headerShown === false ? ROUTE_NO_HEADER : ROUTE;
 
+      log('Navigating', { route, params, stack });
+
       if (stack) {
         navigate(stack, { screen: route, params });
         return;
       }
 
       navigate(route, params);
     },
-    [navigate],
+    [navigate, pendingParams, pendingTransactions],
   );
 
+  useEffect(() => {
+    if (
+      !pendingParams ||
+      pendingTransactions.some((tx) => transactionsToRemove?.includes(tx.id))
+    ) {
+      return;
+    }
+
+    log('Navigating after rejecting pending transactions');
+
+    navigateToConfirmation(pendingParams);
+    setPendingParams(undefined);
+    setTransactionsToRemove(undefined);
+  }, [
+    pendingTransactions,
+    pendingParams,
+    navigateToConfirmation,
+    transactionsToRemove,
+  ]);
+
   return { navigateToConfirmation };
 }
+
+function rejectTransactions(transactions: TransactionMeta[]) {
+  const { ApprovalController } = Engine.context;
+
+  for (const tx of transactions) {
+    try {
+      ApprovalController.reject(tx.id, providerErrors.userRejectedRequest());
+      log('Rejected transaction', tx.type, tx.id);
+    } catch {
+      log('Failed to reject transaction', tx.type, tx.id);
+    }
+  }
+}