Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
joaoloureirop merged 1 commit into from
Feb 4, 2026
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 11 additions & 0 deletions app/components/UI/Perps/constants/perpsConfig.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
7 changes: 6 additions & 1 deletion app/components/UI/Perps/hooks/usePerpsNavigation.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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(),
Expand Down Expand Up @@ -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,
},
);
});
});
Expand Down
11 changes: 9 additions & 2 deletions app/components/UI/Perps/hooks/usePerpsNavigation.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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) => {
Expand Down
37 changes: 31 additions & 6 deletions app/components/UI/Perps/routes/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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';
Expand Down Expand Up @@ -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({
Expand All @@ -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 };
Copy link
Copy Markdown
Contributor

@cursor cursor Bot Feb 4, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Header visibility override causes unintended empty header space

Medium Severity

When showPerpsHeader is false, getRedesignedConfirmationsHeaderOptions returns { header: () => null } to hide the header. However, the Confirm component internally calls navigation.setOptions({ headerShown: true }) when isFullScreenConfirmation is true (which includes perpsDepositAndOrder transactions). Since setOptions merges options, the final result is both header: () => null AND headerShown: true, which causes React Navigation to render an empty header container instead of no header at all.

Fix in Cursor Fix in Web

}

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,
}}
Expand Down Expand Up @@ -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>
Expand Down
7 changes: 7 additions & 0 deletions app/components/UI/Perps/types/navigation.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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: {
Expand Down Expand Up @@ -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;
};
}

/**
Expand Down
Loading