fix(perps): route deposit flow to redesigned confirmations with perps header cp-7.69.0 (MetaMask#27106)

## **Description**

The perps deposit flow was using `navigateToConfirmation({ stack:
Routes.PERPS.ROOT })`, which did not correctly route users to the
redesigned confirmations screen after initiating a deposit. Users could
end up on the wrong confirmation stack or without the perps-specific
header.

This change updates the flow so that when the user taps the Perps
balance token to deposit:
1. The current approval/confirmation is dismissed via `handleReject()`
from `useApprovalRequest`.
2. `depositWithConfirmation()` runs to start the deposit flow.
3. On success, navigation goes to `REDESIGNED_CONFIRMATIONS` with
`showPerpsHeader: true` instead of the previous PERPS.ROOT stack.

Dependencies on `useConfirmNavigation` are removed in favor of
`useNavigation` and `useApprovalRequest` so the deposit action and
post-deposit navigation are explicit and aligned with the redesigned
confirmations screen.

## **Changelog**

CHANGELOG entry: Fixed perps deposit flow so it routes to the redesigned
confirmations screen with the perps header after a successful deposit.

## **Related issues**

Fixes:
https://consensys.slack.com/archives/C092T3GPHQD/p1772719051867319

## **Manual testing steps**

```gherkin
Feature: Perps deposit from pay-with / token list

  Scenario: user initiates perps deposit from token selector
    Given user is on a confirmation screen with "Perps balance" in the token list (e.g. perps deposit and order)
    When user taps "Perps balance" to deposit
    Then the current confirmation is dismissed, deposit flow runs, and on success the user is taken to the redesigned confirmations screen with the perps header visible
```

## **Screenshots/Recordings**

<!-- If applicable, add screenshots and/or recordings to visualize the
before and after of your change. -->

### **Before**

<!-- [screenshots/recordings] -->

### **After**
<img width="1206" height="2622"
alt="simulator_screenshot_1025DB15-7197-4622-964F-F1F05143DFC8"
src="https://github.com/user-attachments/assets/5e3dde3e-e91b-4966-945e-8a1b910933e0"
/>


<!-- [screenshots/recordings] -->

## **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]
> **Medium Risk**
> Changes the perps deposit tap-handler to dismiss the current approval
and navigate to a different confirmation route, so regressions could
strand users on the wrong screen or break the deposit flow sequencing.
> 
> **Overview**
> Fixes the **Perps “Add funds”** action from the synthetic “Perps
balance” token so it no longer uses
`useConfirmNavigation`/`Routes.PERPS.ROOT`.
> 
> The handler now calls `useApprovalRequest().onReject()` to dismiss the
current approval, runs `depositWithConfirmation()`, and then navigates
via React Navigation to
`Routes.FULL_SCREEN_CONFIRMATIONS.REDESIGNED_CONFIRMATIONS` with
`showPerpsHeader: true`. Tests were updated to mock the new hooks
(`useNavigation`, `useApprovalRequest`) and assert the new call
order/route using `waitFor`.
> 
> <sup>Written by [Cursor
Bugbot](https://cursor.com/dashboard?tab=bugbot) for commit
48571b0. This will update automatically
on new commits. Configure
[here](https://cursor.com/dashboard?tab=bugbot).</sup>
<!-- /CURSOR_SUMMARY -->

Author: michalconsensys

app/components/UI/Perps/hooks/usePerpsBalanceTokenFilter.test.ts

@@ -1,4 +1,4 @@
-import { renderHook } from '@testing-library/react-native';
+import { renderHook, waitFor } from '@testing-library/react-native';
 import { useSelector } from 'react-redux';
 import { TransactionType } from '@metamask/transaction-controller';
 import { usePerpsBalanceTokenFilter } from './usePerpsBalanceTokenFilter';
@@ -10,8 +10,12 @@ import {
   isHighlightedItemOutsideAssetList,
 } from '../../../Views/confirmations/types/token';
 import { usePerpsTrading } from './usePerpsTrading';
-import { useConfirmNavigation } from '../../../Views/confirmations/hooks/useConfirmNavigation';
 import { usePerpsPaymentToken } from './usePerpsPaymentToken';
+import Routes from '../../../../constants/navigation/Routes';
+import { useNavigation } from '@react-navigation/native';
+import useApprovalRequest from '../../../Views/confirmations/hooks/useApprovalRequest';
+import { selectPerpsAccountState } from '../selectors/perpsController';
+import { selectPerpsPayWithAnyTokenAllowlistAssets } from '../selectors/featureFlags';
 
 jest.mock('../../../../../locales/i18n', () => ({
   strings: jest.fn((key: string) => key),
@@ -22,8 +26,12 @@ jest.mock(
 );
 jest.mock('./useIsPerpsBalanceSelected');
 jest.mock('./usePerpsTrading');
-jest.mock('../../../Views/confirmations/hooks/useConfirmNavigation', () => ({
-  useConfirmNavigation: jest.fn(),
+jest.mock('../../../Views/confirmations/hooks/useApprovalRequest', () => ({
+  __esModule: true,
+  default: jest.fn(),
+}));
+jest.mock('@react-navigation/native', () => ({
+  useNavigation: jest.fn(),
 }));
 jest.mock('./usePerpsPaymentToken');
 jest.mock('./usePerpsNetworkManagement', () => ({
@@ -58,17 +66,21 @@ const mockUseSelector = useSelector as jest.MockedFunction<typeof useSelector>;
 const mockUsePerpsTrading = usePerpsTrading as jest.MockedFunction<
   typeof usePerpsTrading
 >;
-const mockUseConfirmNavigation = useConfirmNavigation as jest.MockedFunction<
-  typeof useConfirmNavigation
->;
 const mockUsePerpsPaymentToken = usePerpsPaymentToken as jest.MockedFunction<
   typeof usePerpsPaymentToken
 >;
+const mockUseNavigation = useNavigation as jest.MockedFunction<
+  typeof useNavigation
+>;
+const mockUseApprovalRequest = useApprovalRequest as jest.MockedFunction<
+  typeof useApprovalRequest
+>;
 
 describe('usePerpsBalanceTokenFilter', () => {
   const chainId = '0xa4b1';
   const mockDepositWithConfirmation = jest.fn().mockResolvedValue(undefined);
-  const mockNavigateToConfirmation = jest.fn();
+  const mockNavigate = jest.fn();
+  const mockOnReject = jest.fn();
   const mockOnPerpsPaymentTokenChange = jest.fn();
 
   beforeEach(() => {
@@ -77,10 +89,10 @@ describe('usePerpsBalanceTokenFilter', () => {
     mockUseIsPerpsBalanceSelected.mockReturnValue(false);
     mockUseSelector.mockImplementation(
       (selector: (state: unknown) => unknown) => {
-        if (selector.name === 'selectPerpsAccountState') {
+        if (selector === selectPerpsAccountState) {
           return { availableBalance: '1500.00' };
         }
-        if (selector.name === 'selectPerpsPayWithAnyTokenAllowlistAssets') {
+        if (selector === selectPerpsPayWithAnyTokenAllowlistAssets) {
           return [];
         }
         return undefined;
@@ -89,9 +101,12 @@ describe('usePerpsBalanceTokenFilter', () => {
     mockUsePerpsTrading.mockReturnValue({
       depositWithConfirmation: mockDepositWithConfirmation,
     } as unknown as ReturnType<typeof usePerpsTrading>);
-    mockUseConfirmNavigation.mockReturnValue({
-      navigateToConfirmation: mockNavigateToConfirmation,
-    } as unknown as ReturnType<typeof useConfirmNavigation>);
+    mockUseNavigation.mockReturnValue({
+      navigate: mockNavigate,
+    } as unknown as ReturnType<typeof useNavigation>);
+    mockUseApprovalRequest.mockReturnValue({
+      onReject: mockOnReject,
+    } as unknown as ReturnType<typeof useApprovalRequest>);
     mockUsePerpsPaymentToken.mockReturnValue({
       onPaymentTokenChange: mockOnPerpsPaymentTokenChange,
     } as unknown as ReturnType<typeof usePerpsPaymentToken>);
@@ -200,9 +215,8 @@ describe('usePerpsBalanceTokenFilter', () => {
     it('uses zero balance when perps account is null', () => {
       mockUseSelector.mockImplementation(
         (selector: (state: unknown) => unknown) => {
-          if (selector.name === 'selectPerpsAccountState') return null;
-          if (selector.name === 'selectPerpsPayWithAnyTokenAllowlistAssets')
-            return [];
+          if (selector === selectPerpsAccountState) return null;
+          if (selector === selectPerpsPayWithAnyTokenAllowlistAssets) return [];
           return undefined;
         },
       );
@@ -222,10 +236,9 @@ describe('usePerpsBalanceTokenFilter', () => {
     it('clears isSelected on other tokens when perps balance is selected', () => {
       mockUseSelector.mockImplementation(
         (selector: (state: unknown) => unknown) => {
-          if (selector.name === 'selectPerpsAccountState')
+          if (selector === selectPerpsAccountState)
             return { availableBalance: '1500.00' };
-          if (selector.name === 'selectPerpsPayWithAnyTokenAllowlistAssets')
-            return [];
+          if (selector === selectPerpsPayWithAnyTokenAllowlistAssets) return [];
           return undefined;
         },
       );
@@ -255,10 +268,9 @@ describe('usePerpsBalanceTokenFilter', () => {
     it('keeps token isSelected when perps balance is not selected', () => {
       mockUseSelector.mockImplementation(
         (selector: (state: unknown) => unknown) => {
-          if (selector.name === 'selectPerpsAccountState')
+          if (selector === selectPerpsAccountState)
             return { availableBalance: '1500.00' };
-          if (selector.name === 'selectPerpsPayWithAnyTokenAllowlistAssets')
-            return [];
+          if (selector === selectPerpsPayWithAnyTokenAllowlistAssets) return [];
           return undefined;
         },
       );
@@ -280,14 +292,15 @@ describe('usePerpsBalanceTokenFilter', () => {
 
     it('filters to only allowlisted tokens when allowlist is set', () => {
       const allowlistKey = `${chainId}.0xusdc`.toLowerCase();
-      let callIndex = 0;
-      mockUseSelector.mockImplementation(() => {
-        callIndex += 1;
-        // Hook calls selectPerpsAccountState first, then selectPerpsPayWithAnyTokenAllowlistAssets
-        if (callIndex === 1) return { availableBalance: '100.00' };
-        if (callIndex === 2) return [allowlistKey];
-        return [];
-      });
+      mockUseSelector.mockImplementation(
+        (selector: (state: unknown) => unknown) => {
+          if (selector === selectPerpsAccountState)
+            return { availableBalance: '100.00' };
+          if (selector === selectPerpsPayWithAnyTokenAllowlistAssets)
+            return [allowlistKey];
+          return [];
+        },
+      );
       const inputTokens: AssetType[] = [
         {
           address: '0xusdc',
@@ -314,7 +327,7 @@ describe('usePerpsBalanceTokenFilter', () => {
       expect((output[1] as AssetType).symbol).toBe('USDC');
     });
 
-    it('calls navigateToConfirmation and depositWithConfirmation when Add funds is pressed', async () => {
+    it('calls onReject, depositWithConfirmation and navigation.navigate when Add funds is pressed', async () => {
       mockUseSelector.mockReturnValue({
         availableBalance: '500.00',
       });
@@ -336,12 +349,17 @@ describe('usePerpsBalanceTokenFilter', () => {
       expect(isHighlightedItemOutsideAssetList(highlightedAction)).toBe(true);
       if (isHighlightedItemOutsideAssetList(highlightedAction)) {
         highlightedAction.actions?.[0]?.onPress();
-        // handlePerpsDepositPress is async (ensureArbitrumNetworkExists().then(...))
-        await Promise.resolve();
-        expect(mockNavigateToConfirmation).toHaveBeenCalledWith({
-          stack: expect.any(String),
-        });
-        expect(mockDepositWithConfirmation).toHaveBeenCalledTimes(1);
+        await waitFor(
+          () => {
+            expect(mockOnReject).toHaveBeenCalledTimes(1);
+            expect(mockDepositWithConfirmation).toHaveBeenCalledTimes(1);
+            expect(mockNavigate).toHaveBeenCalledWith(
+              Routes.FULL_SCREEN_CONFIRMATIONS.REDESIGNED_CONFIRMATIONS,
+              { showPerpsHeader: true },
+            );
+          },
+          { timeout: 2000 },
+        );
       }
     });
 

app/components/UI/Perps/hooks/usePerpsBalanceTokenFilter.ts

@@ -19,8 +19,9 @@ import { useIsPerpsBalanceSelected } from './useIsPerpsBalanceSelected';
 import { usePerpsPaymentToken } from './usePerpsPaymentToken';
 import Routes from '../../../../constants/navigation/Routes';
 import { usePerpsTrading } from './usePerpsTrading';
+import { useNavigation } from '@react-navigation/native';
+import useApprovalRequest from '../../../Views/confirmations/hooks/useApprovalRequest';
 import { usePerpsNetworkManagement } from './usePerpsNetworkManagement';
-import { useConfirmNavigation } from '../../../Views/confirmations/hooks/useConfirmNavigation';
 
 /** URI for the perps balance token icon, shared with PerpsPayRow and pay-with modal. */
 const resolvedPerpsIcon = Image.resolveAssetSource(perpsPayTokenIcon);
@@ -46,27 +47,38 @@ export function usePerpsBalanceTokenFilter(): (
   const formatFiat = useFiatFormatter({ currency: 'usd' });
 
   const { depositWithConfirmation } = usePerpsTrading();
-  const { ensureArbitrumNetworkExists } = usePerpsNetworkManagement();
-  const { navigateToConfirmation } = useConfirmNavigation();
 
   const isPerpsDepositAndOrder = hasTransactionType(transactionMeta, [
     TransactionType.perpsDepositAndOrder,
   ]);
 
+  const { onReject: handleReject } = useApprovalRequest();
+  const { ensureArbitrumNetworkExists } = usePerpsNetworkManagement();
+
+  const navigation = useNavigation();
+
   const handlePerpsDepositPress = useCallback(() => {
     ensureArbitrumNetworkExists()
       .then(() => {
-        navigateToConfirmation({ stack: Routes.PERPS.ROOT });
+        handleReject();
         return depositWithConfirmation();
       })
-      .catch((_err) => {
+      .then(() => {
+        navigation.navigate(
+          Routes.FULL_SCREEN_CONFIRMATIONS.REDESIGNED_CONFIRMATIONS,
+          {
+            showPerpsHeader: true,
+          },
+        );
+      })
+      .catch(() => {
         // Deposit flow handles errors (e.g. user rejection or missing network).
-        // ensureArbitrumNetworkExists errors are logged inside the hook itself.
       });
   }, [
-    ensureArbitrumNetworkExists,
-    navigateToConfirmation,
+    navigation,
     depositWithConfirmation,
+    handleReject,
+    ensureArbitrumNetworkExists,
   ]);
 
   const { onPaymentTokenChange: onPerpsPaymentTokenChange } =