Description

Migrates the Perps modal navigators (PerpsModalStack and PerpsClosePositionBottomSheetStack) from @react-navigation/stack (JS stack) to @react-navigation/native-stack, matching the existing native PerpsScreenStack.

Why: The Perps screen stack is already native — the nested modal stacks were the last JS-stack holdouts inside app/components/UI/Perps/routes/index.tsx. Native stack uses platform navigators, which gives better performance, gesture handling, and a single consistent navigator API across the Perps surface. This also removes a few JS-stack-only workarounds (the zero-opacity cardStyleInterpolator trick on the tooltip stack, redundant per-screen cardStyle transparency).

What:

• ModalStack = createStackNavigator() → createNativeStackNavigator()
• Navigator screen options swap clearStackNavigatorOptions + presentation: 'transparentModal' for clearNativeStackNavigatorOptions + transparentModalScreenOptions
• PerpsClosePositionBottomSheetStack drops its presentation: 'modal' + cardStyleInterpolator overlay-clear hack in favor of the same native presets (semantically equivalent: transparent, non-dimming overlay)
• Removes per-screen cardStyle: { backgroundColor: 'transparent' } (navigator-level contentStyle now covers it)
• Drops the @react-navigation/stack import from this file
  MainNavigator's outer registration of Routes.PERPS.MODALS.ROOT is unchanged — the parent stack there is still JS-stack and continues to mount PerpsModalStackWithErrorGate via transparentModal.

Changelog

CHANGELOG entry:null

Related issues

Fixes:

Manual testing steps

Feature: Perps modal navigation on native stack
  Scenario: user opens the GTM modal from the wallet
    Given the Perps feature flag is enabled
    And the `@MetaMask:perpsGTMModalShown` storage flag is cleared
    When user opens the Wallet tab
    Then the Perps "What's new" modal appears full screen
    And tapping "Not now" returns to the wallet without errors
    And tapping "Try now" navigates to the Perps tutorial
  
Scenario: user closes all open positions
    Given the user is on Wallet → Perps tab
    And the user has at least one open position
    When user taps "Close all" in the Positions header
    Then the Close All Positions bottom sheet opens
    And dismissing it returns to the Perps tab with no leftover backdrop
  
Scenario: user cancels all open orders
    Given the user is on Wallet → Perps tab
    And the user has at least one pending order
    When user taps "Cancel all" in the Open orders header
    Then the Cancel All Orders bottom sheet opens and dismisses correctly
  
Scenario: user opens a close-position tooltip
    Given the user has an open position
    When user opens Close position from market details
    And user taps the info icon next to "Fees" or "You'll receive"
    Then the tooltip bottom sheet (PerpsClosePositionModals → PerpsTooltip) appears
    And tapping outside or the close button dismisses it without dimming the parent screen
  
Scenario: user opens the provider selector (multi-provider builds)
    Given multi-provider is enabled
    When user taps the provider badge in Perps
    Then the Select Provider modal opens with a transparent background
  
Scenario: user triggers cross-margin warning
    Given the user has a cross-margin position on the underlying exchange
    When user attempts to place an order on that market
    Then the Cross Margin Warning modal appears
  
Scenario: user enters deposit / trade confirmation
    Given the user is on the Perps trade flow
    When the Redesigned Confirmations screen mounts inside the Perps stack
    Then the header / transparent overlay behavior is unchanged from main

Screenshots/Recordings

Before

After

Pre-merge author checklist

• I've followed MetaMask Contributor Docs and MetaMask Mobile Coding Standards.
• I've completed the PR template to the best of my ability
• I've included tests if applicable
• I've documented my code using JSDoc format if applicable
• I've applied the right labels on the PR (see labeling guidelines). Not required for external contributors.

Performance checks (if applicable)

• I've tested on Android
  • Ideally on a mid-range device; emulator is acceptable
• I've tested with a power user scenario
  • Use these power-user SRPs to import wallets with many accounts and tokens
• I've instrumented key operations with Sentry traces for production performance metrics
  • See trace() for usage and addToken for an example

For performance guidelines and tooling, see the Performance Guide.

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.