chore(runway): cherry-pick fix(perps): set confirmation header and safe area by navigation source cp-7.64.0 (#25627)

- fix(perps): set confirmation header and safe area by navigation source
cp-7.64.0 (#25601)

## **Description**

Set confirmation header by navigation source

## **Changelog**

<!--
If this PR is not End-User-Facing and should not show up in the
CHANGELOG, you can choose to either:
1. Write `CHANGELOG entry: null`
2. Label with `no-changelog`

If this PR is End-User-Facing, please write a short User-Facing
description in the past tense like:
`CHANGELOG entry: Added a new tab for users to see their NFTs`
`CHANGELOG entry: Fixed a bug that was causing some NFTs to flicker`

(This helps the Release Engineer do their job more quickly and
accurately)
-->

CHANGELOG entry: Fixed Perps confirmation screen so the header is hidden
when opening from the one-click order flow and shows a minimal header
when opening from other flows.

## **Related issues**

Fixes: #25469

## **Manual testing steps**

```gherkin
Feature: Perps confirmation screen header

  Scenario: user opens confirmation via one-click order (navigateToOrder)
    Given user is on a Perps market and taps place order (one-click flow)

    When deposit is confirmed and confirmation screen opens

    Then the confirmation screen has no header (header: () => null)

  Scenario: user opens confirmation from another flow
    Given user reaches RedesignedConfirmations from a path other than navigateToOrder

    When the confirmation screen is shown

    Then the screen shows a minimal header (header visible, no left button, empty title)
```

## **Screenshots/Recordings**

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

### **Before**
<img width="1206" height="2622" alt="Simulator Screenshot - iPhone 17
Pro - 2026-02-03 at 19 47 49"

src="https://github.com/user-attachments/assets/8ff43507-5222-426c-a86a-a30a6403baa6"
/>

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

### **After**
<img width="1206" height="2622" alt="Simulator Screenshot - iPhone 17
Pro - 2026-02-03 at 19 46 49"

src="https://github.com/user-attachments/assets/d374525a-5732-4049-9c73-da03bd5f29d6"
/>

<!-- [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 Perps navigation params and `RedesignedConfirmations` screen
options, which can affect the confirmation flow’s header visibility and
layout. Risk is limited to Perps UI/navigation but could cause
regressions if other entry points don’t pass expected params.
> 
> **Overview**
> Updates Perps confirmations to **conditionally show/hide the header
and safe area** based on the navigation source.
> 
> Adds `CONFIRMATION_HEADER_CONFIG` and a `showPerpsHeader` navigation
param; `navigateToOrder` now passes `showPerpsHeader: false` for the
deposit-and-trade (one-click) path, while other paths default to a
minimal header.
> 
> The Perps stack now derives `RedesignedConfirmations` screen options
from route params (and toggles `Confirm`’s `disableSafeArea`
accordingly), with types and tests updated to cover the new param
behavior.
> 
> <sup>Written by [Cursor
Bugbot](https://cursor.com/dashboard?tab=bugbot) for commit
7d77188. This will update automatically
on new commits. Configure
[here](https://cursor.com/dashboard?tab=bugbot).</sup>
<!-- /CURSOR_SUMMARY -->

---------

Co-authored-by: Cursor <cursoragent@cursor.com>
[2bc0e0e](2bc0e0e)

Co-authored-by: Michal Szorad <michal.szorad@consensys.net>
Co-authored-by: Cursor <cursoragent@cursor.com>

Author: 3 people

app/components/UI/Perps/constants/perpsConfig.ts

@@ -128,6 +128,17 @@ export const ORDER_SLIPPAGE_CONFIG = {
   DefaultLimitSlippageBps: 100,
 } as const;
 
+/**
+ * Redesigned confirmations screen header configuration (Perps)
+ * Controls whether the Perps header is shown when navigating to the confirmation screen
+ */
+export const CONFIRMATION_HEADER_CONFIG = {
+  /** Default: show Perps header when opening confirmations from Perps flows */
+  DefaultShowPerpsHeader: true,
+  /** Hide Perps header when navigating from deposit-and-trade flow */
+  ShowPerpsHeaderForDepositAndTrade: false,
+} as const;
+
 /**
  * Performance optimization constants
  * These values control debouncing and throttling for better performance

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

@@ -4,6 +4,7 @@ import { useNavigation } from '@react-navigation/native';
 import { usePerpsNavigation } from './usePerpsNavigation';
 import { usePerpsTrading } from './usePerpsTrading';
 import Routes from '../../../../constants/navigation/Routes';
+import { CONFIRMATION_HEADER_CONFIG } from '../constants/perpsConfig';
 
 jest.mock('@react-navigation/native', () => ({
   useNavigation: jest.fn(),
@@ -188,7 +189,11 @@ describe('usePerpsNavigation', () => {
         expect(mockDepositWithOrder).toHaveBeenCalled();
         expect(mockNavigate).toHaveBeenCalledWith(
           Routes.FULL_SCREEN_CONFIRMATIONS.REDESIGNED_CONFIRMATIONS,
-          params,
+          {
+            ...params,
+            showPerpsHeader:
+              CONFIRMATION_HEADER_CONFIG.ShowPerpsHeaderForDepositAndTrade,
+          },
         );
       });
     });

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

@@ -6,7 +6,10 @@ import type { PerpsMarketData, Position, Order } from '../controllers/types';
 import { usePerpsTrading } from './usePerpsTrading';
 import Logger from '../../../../util/Logger';
 import { ensureError } from '../../../../util/errorUtils';
-import { PERPS_CONSTANTS } from '../constants/perpsConfig';
+import {
+  PERPS_CONSTANTS,
+  CONFIRMATION_HEADER_CONFIG,
+} from '../constants/perpsConfig';
 
 /**
  * Navigation handler result interface
@@ -136,7 +139,11 @@ export const usePerpsNavigation = (): PerpsNavigationHandlers => {
         .then(() => {
           navigation.navigate(
             Routes.FULL_SCREEN_CONFIRMATIONS.REDESIGNED_CONFIRMATIONS,
-            params,
+            {
+              ...params,
+              showPerpsHeader:
+                CONFIRMATION_HEADER_CONFIG.ShowPerpsHeaderForDepositAndTrade,
+            },
           );
         })
         .catch((error: unknown) => {

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

@@ -1,6 +1,7 @@
 import { createStackNavigator } from '@react-navigation/stack';
 import React from 'react';
 import { useSelector } from 'react-redux';
+import type { PerpsNavigationParamList } from '../types/navigation';
 import { SafeAreaView } from 'react-native-safe-area-context';
 import { StyleSheet } from 'react-native';
 import { IconName } from '@metamask/design-system-react-native';
@@ -37,8 +38,10 @@ import PerpsStreamBridge from '../components/PerpsStreamBridge';
 import { HIP3DebugView } from '../Debug';
 import PerpsCrossMarginWarningBottomSheet from '../components/PerpsCrossMarginWarningBottomSheet';
 import { useTheme } from '../../../../util/theme';
+import { RouteProp, useRoute } from '@react-navigation/native';
+import { CONFIRMATION_HEADER_CONFIG } from '../constants/perpsConfig';
 
-const Stack = createStackNavigator();
+const Stack = createStackNavigator<PerpsNavigationParamList>();
 const ModalStack = createStackNavigator();
 
 const styles = StyleSheet.create({
@@ -47,12 +50,34 @@ const styles = StyleSheet.create({
   },
 });
 
-const PerpsConfirmScreen = (props: React.ComponentProps<typeof Confirm>) => {
+function getRedesignedConfirmationsHeaderOptions({
+  showPerpsHeader = CONFIRMATION_HEADER_CONFIG.DefaultShowPerpsHeader,
+}: PerpsNavigationParamList['RedesignedConfirmations'] = {}) {
+  return showPerpsHeader
+    ? {
+        headerLeft: () => null,
+        headerShown: true,
+        title: '',
+      }
+    : { header: () => null };
+}
+
+const PerpsConfirmScreen = (
+  props: React.ComponentProps<typeof Confirm> & {
+    route: RouteProp<PerpsNavigationParamList, 'RedesignedConfirmations'>;
+  },
+) => {
   const theme = useTheme();
+  const params =
+    useRoute<RouteProp<PerpsNavigationParamList, 'RedesignedConfirmations'>>();
+  const showPerpsHeader =
+    params?.params?.showPerpsHeader ??
+    CONFIRMATION_HEADER_CONFIG.DefaultShowPerpsHeader;
+
   return (
     <Confirm
       {...props}
-      disableSafeArea
+      disableSafeArea={!showPerpsHeader}
       fullscreenStyle={{
         backgroundColor: theme.colors.background.default,
       }}
@@ -394,9 +419,9 @@ const PerpsScreenStack = () => {
           <Stack.Screen
             name={Routes.FULL_SCREEN_CONFIRMATIONS.REDESIGNED_CONFIRMATIONS}
             component={PerpsConfirmScreen}
-            options={{
-              header: () => null,
-            }}
+            options={({ route }) =>
+              getRedesignedConfirmationsHeaderOptions(route.params)
+            }
           />
         </Stack.Navigator>
       </PerpsStreamProvider>

app/components/UI/Perps/types/navigation.ts

@@ -25,6 +25,8 @@ export interface PerpsNavigationParamList extends ParamListBase {
     orderType?: OrderType;
     existingPosition?: Position; // Pass existing position for leverage consistency when adding to position
     hideTPSL?: boolean; // Hide TP/SL row when modifying existing position
+    /** When false, confirmation screen uses header: () => null; when true/undefined uses headerLeft/title options */
+    showPerpsHeader?: boolean;
   };
 
   PerpsOrderSuccess: {
@@ -208,6 +210,11 @@ export interface PerpsNavigationParamList extends ParamListBase {
 
   // Root perps view
   Perps: undefined;
+
+  /** Params for RedesignedConfirmations when shown in Perps stack (header options) */
+  RedesignedConfirmations: {
+    showPerpsHeader?: boolean;
+  };
 }
 
 /**