fix: PerpsMarketList navigation, and performance optimizations in TabList cp-7.59.0

[gambinish]

Description

Navigating from a subsection in the PerpHomeScreen should navigate to the proper tab in the MarketList. This PR also introduces some performance optimizations in the horizontal scroll view by memoizing list items to reduce the memory footprint, leading to a snappier behavior.

If we want further optimizations, we can remove swipe navigation, in favor of just pressing the tabs and leaning into lazy loading more.

Changelog

CHANGELOG entry: Fix PerpsMarketList navigation and improve performance on swipeable list view

Related issues

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

Manual testing steps

Feature: Perps Market List Tab Navigation

  Scenario: user navigates to Stocks tab from home screen Explore stocks and commodities section
    Given user is on the Perps home screen
    And the "Explore stocks and commodities" section is visible

    When user taps "See all" in the "Explore stocks and commodities" section
    Then user is navigated to the Perps market list screen
    And the "Stocks" tab is selected
    And stocks and commodities markets are displayed

  Scenario: user navigates to Crypto tab from home screen Explore crypto section
    Given user is on the Perps home screen
    And the "Explore crypto" section is visible

    When user taps "See all" in the "Explore crypto" section
    Then user is navigated to the Perps market list screen
    And the "Crypto" tab is selected
    And crypto markets are displayed

  Scenario: user switches tabs by tapping tab bar
    Given user is on the Perps market list screen
    And the "All" tab is currently selected
    And the market list is scrolled to the middle

    When user taps the "Crypto" tab
    Then the "Crypto" tab becomes active
    And only crypto markets are displayed
    And the market list is scrolled to the top
    And no performance lag is observed

  Scenario: user switches tabs by swiping
    Given user is on the Perps market list screen
    And the "All" tab is currently selected

    When user swipes left on the market list
    Then the "Crypto" tab becomes active
    And the tab bar indicator animates to "Crypto"
    And only crypto markets are displayed
    And the swipe gesture is smooth without stuttering

  Scenario: user swipes between multiple tabs quickly
    Given user is on the Perps market list screen
    And the "All" tab is currently selected

    When user swipes left to the "Crypto" tab
    And user swipes left again to the "Stocks" tab
    Then the "Stocks" tab becomes active
    And the tab bar indicator animates smoothly to "Stocks"
    And stocks and commodities markets are displayed
    And tab switching is instant without noticeable delay

  Scenario: user returns to previously viewed tab
    Given user is on the Perps market list screen
    And the "Crypto" tab is currently selected
    And user has previously viewed the "All" tab

    When user taps the "All" tab
    Then the "All" tab becomes active
    And all markets (crypto, stocks, and commodities) are displayed
    And the market list is scrolled to the top
    And no re-rendering delay is observed

  Scenario: user applies sub-filter on Stocks tab
    Given user is on the Perps market list screen
    And the "Stocks" tab is currently selected
    And both stocks and commodities are displayed

    When user taps the stocks/commodities filter dropdown
    And user selects "Stocks only"
    Then only equity markets are displayed
    And commodity markets are hidden
    And the filter updates instantly

  Scenario: user switches away from Stocks tab with active sub-filter
    Given user is on the Perps market list screen
    And the "Stocks" tab is currently selected
    And the sub-filter is set to "Stocks only"

    When user taps the "Crypto" tab
    And user taps back to the "Stocks" tab
    Then the "Stocks" tab becomes active
    And the sub-filter is reset to "All"
    And both stocks and commodities are displayed

Screenshots/Recordings

Screen.Recording.2025-11-07.at.10.40.56.AM.mov

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.

---

Note

Routes "See all" to the correct market tab and refactors MarketListView with swipe/tab sync fixes, simplified filtering, and memoized row items for better performance.

• Perps Home & Sections:
  • PerpsHomeView: pass marketType="stocks_and_commodities" to Stocks & Commodities section.
  • PerpsMarketTypeSection: support marketType="stocks_and_commodities"; on "See All" navigate with defaultMarketTypeFilter set to provided marketType.
• Market List View:
  • Simplify tab filtering: introduce displayMarkets applying sub-filter only on stocks_and_commodities; replace checks/usages from filteredMarkets → displayMarkets.
  • Tabs rendering: inline tab content; remove getFilteredMarketsForTab/MarketTypeTabContent and tabsToRender.
  • Swipe/tab sync: add isScrollingProgrammatically guard; sync ScrollView position on tab change; handle scroll to update marketTypeFilter without feedback loops.
  • Active tab mapping: include stocks_and_commodities and legacy equity/commodity.
  • Update measurement and event tracking conditions to use displayMarkets.length.
• Performance:
  • PerpsMarketRowItem: export as React.memo to reduce re-renders.
• Tests:
  • Update navigation assertions in PerpsMarketTypeSection.test.tsx to expect specific defaultMarketTypeFilter.
  • Adjust PerpsMarketRowItem.test.tsx rerenders to pass new props copies.

^{Written by Cursor Bugbot for commit 5921889. This will update automatically on new commits. Configure here.}

[github-actions]

CLA Signature Action: All authors have signed the CLA. You may need to manually re-run the blocking PR check if it doesn't pass in a few minutes.

[michalconsensys]

Hello @abretonc7s @gambinish , I've just tested this locally and when I click on "See all" next to "Explore stocks and commodities", it seems to redirect me to a screen with no assets. I'd expect to see a list of stocks and commodities on the screen

Simulator.Screen.Recording.-.iPhone.16e.-.2025-11-10.at.12.19.47.mov

[abretonc7s]

Hello @abretonc7s @gambinish , I've just tested this locally and when I click on "See all" next to "Explore stocks and commodities", it seems to redirect me to a screen with no assets. I'd expect to see a list of stocks and commodities on the screen

Simulator.Screen.Recording.-.iPhone.16e.-.2025-11-10.at.12.19.47.mov

fix_tablist.mp4

[sonarqubecloud]

Quality Gate failed

Failed conditions
62.2% Coverage on New Code (required ≥ 80%)

See analysis details on SonarQube Cloud