Description

Problem: When a first-time perps user tapped any item in the Perpetuals homepage section (market tile, position row, "View more" card, or section title), they were navigated directly to the perps screens without seeing the tutorial first. The tutorial was only triggered via the main action button.

Solution:

• PerpsSection: Added a navigateToTutorialOrScreen wrapper that checks selectIsFirstTimePerpsUser. If the user hasn't completed the tutorial, all navigation actions (title press, tile press, position press, "View more") redirect to the tutorial with redirectScreen and redirectParams so the user lands on the originally intended screen after completing the tutorial. If the user has already completed the tutorial, navigation proceeds directly.
• PerpsTutorialCarousel: Reads redirectScreen and redirectParams from route params. After tutorial completion (or skip), navigates to the redirect target instead of always going to Perps Home. Uses StackActions.replace instead of navigate so the tutorial screen is removed from the navigation stack — pressing back won't return to the tutorial.
• Navigation types: Added redirectScreen and redirectParams to PerpsTutorial route params.

Tests: Unit tests added/updated for PerpsSection (first-time user tutorial redirect for each interaction type) and PerpsTutorialCarousel (redirect with params, redirect without params, skip redirect, fallback to default).

Changelog

CHANGELOG entry: Fixed a bug where tapping perpetuals items on the homepage did not show the tutorial for first-time users

Related issues

Fixes: https://consensyssoftware.atlassian.net/browse/TMCU-566

Manual testing steps

Feature: Homepage Perpetuals section triggers tutorial for first-time users

  Scenario: first-time user taps a market tile on the homepage perps section
    Given the user has never completed the perps tutorial
    And the Perpetuals section is visible on the homepage with trending markets

    When the user taps a market tile (e.g. SOL)
    Then the perps tutorial carousel is displayed
    And after completing or skipping the tutorial, the user lands on the Market Details screen for that market

  Scenario: first-time user taps "View more" on the homepage perps section
    Given the user has never completed the perps tutorial
    And the Perpetuals section is visible on the homepage

    When the user taps the "View more" card
    Then the perps tutorial carousel is displayed
    And after completing or skipping the tutorial, the user lands on the Market List screen

  Scenario: first-time user taps the Perpetuals section title
    Given the user has never completed the perps tutorial

    When the user taps the "Perpetuals" title
    Then the perps tutorial carousel is displayed
    And after completing or skipping the tutorial, the user lands on Perps Home

  Scenario: first-time user taps a position row on the homepage perps section
    Given the user has never completed the perps tutorial
    And the user has open positions shown in the Perpetuals section

    When the user taps a position row (e.g. BTC)
    Then the perps tutorial carousel is displayed
    And after completing or skipping the tutorial, the user lands on Market Details with the position tab selected

  Scenario: returning user navigates directly without tutorial
    Given the user has already completed the perps tutorial

    When the user taps any item in the Perpetuals section
    Then the user navigates directly to the target screen without seeing the tutorial

  Scenario: back navigation does not return to tutorial
    Given the user just completed the tutorial and was redirected to a perps screen

    When the user presses the back button
    Then the user does NOT return to the tutorial screen (it was replaced in the stack)

Screenshots/Recordings

Before

After

selectIsFirstTimePerpsUser was mocked to be true

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.