Description

Perps tutorial was taking >5 seconds to load due to being wrapped in PerpsConnectionProvider, which blocks rendering until WebSocket connection completes.

Solution: Moved Tutorial to app-level navigation (outside provider) while keeping all connected screens inside. Connection now initializes in background during tutorial, eliminating the loading delay.

Changelog

CHANGELOG entry: Fixed Perps tutorial taking over 5 seconds to load

Related issues

Fixes: https://consensyssoftware.atlassian.net/browse/TAT-1840

Manual testing steps

Feature: Perps Tutorial Loading Performance

  Scenario: First-time user navigates to tutorial
    Given user is a first-time Perps user
    When user taps "Trade" button from wallet actions
    Then tutorial displays instantly without "Connecting to perps" screen
    And WebSocket connection initializes in background

  Scenario: Tutorial to Markets navigation
    Given user is viewing tutorial
    When user completes or skips tutorial
    Then user navigates to Markets view
    And Markets loads with active WebSocket connection

  Scenario: Deeplink to tutorial for first-time user
    Given user is a first-time Perps user
    When user opens perps deeplink
    Then tutorial displays instantly

Screenshots/Recordings

Before

• Tutorial showed "Connecting to perps" loading screen for 5+ seconds

After

• Tutorial displays instantly
• Connection establishes in background during tutorial (no loader ever displayed since now connected when reaching marketlist screen)

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.

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.

Technical Details

Files changed:

• MainNavigator.js: Added Tutorial as sibling to PERPS.ROOT
• routes/index.tsx: Removed Tutorial from PerpsScreenStack
• PerpsTutorialCarousel.tsx: Added background connection initialization
• Navigation updates: handlePerpsUrl.ts, WalletActions.tsx, TradeWalletActions.tsx, PerpsGTMModal.tsx, WaysToEarn.tsx, PerpsTabView.tsx

Navigation patterns:

• Tutorial: Direct navigate(Routes.PERPS.TUTORIAL) (app level)
• Markets/other: Nested navigate(Routes.PERPS.ROOT, { screen: Routes.PERPS.MARKETS }) (inside provider)