Cherry-picking commits from main to release/7.82.0 for PR #31243

[runway-github]

• refactor(perps): standardize Perps homepage section layout cp-7.82.0 (refactor(perps): standardize Perps homepage section layout cp-7.82.0 #31243)

Description

Perps homepage sections used a mix of custom borders, one-off margins,
and the legacy component-library SectionHeader, which made spacing
inconsistent across Positions, Orders, Watchlist, Top Movers,
market-type sections, Recent Activity, and What's Happening.

This PR standardizes those sections on MMDS SectionHeader and
SectionDivider, removes bespoke section styles from PerpsHomeView,
and consolidates banner spacing above the first section.
WhatsHappeningSection follows the same section pattern when rendered
on Perps (and drops redundant bottom margin on Explore's Now tab, since
the section now owns its own spacing).

Changes:

• Refactor PerpsHomeSection to use MMDS SectionHeader /
  SectionDivider instead of custom layout and legacy header components
• Apply the same section pattern to PerpsWatchlistMarkets,
  PerpsTopMoversSection, PerpsRecentActivityList, and
  PerpsMarketTypeSection
• Remove unused section/border styles from PerpsHomeView and related
  style files
• Group service interruption, balance actions, and competition banners
  in a shared Box with consistent bottom padding
• Update WhatsHappeningSection layout for Perps and adjust Explore Now
  tab wrapper spacing
• Update PerpsHomeSection unit test for empty-title edge case

No functional or navigation behavior changes — this is a
layout/consistency refactor only.

Changelog

CHANGELOG entry: Standardize Perps homepage section layout

Related issues

Refs: https://consensyssoftware.atlassian.net/browse/DSYS-780

Manual testing steps

Feature: Perps homepage section layout

  Scenario: Perps home sections render with consistent spacing and dividers
    Given Perps is enabled and the user has an active Perps account with positions and/or orders
    When the user opens the Perps home screen
    Then Positions and Orders sections show MMDS section headers with dividers above them
    And section spacing is visually consistent between Positions, Orders, Watchlist, Top Movers, and market-type sections
    And tapping section header actions (e.g. close all / cancel all) still works as before

  Scenario: What's Happening section on Perps home
    Given the What's Happening feature flag is enabled
    When the user scrolls to the What's Happening section on Perps home
    Then the section shows a divider, header, and horizontal carousel
    And tapping the header or a card navigates to the detail view as before

  Scenario: Explore Now tab What's Happening spacing
    Given the What's Happening feature flag is enabled
    When the user opens Explore and views the Now tab
    Then the What's Happening section spacing looks correct relative to adjacent sections
    And no extra bottom margin causes awkward gaps

  Scenario: Empty and loading states unchanged
    Given the user has no open positions or orders
    When the user opens Perps home
    Then empty Positions/Orders sections are still hidden
    And loading skeletons still appear while data is fetching

Screenshots/Recordings

Before

Simulator.Screen.Recording.-.iPhone.15.Pro.Max.-.2026-06-08.at.16.48.27.mov

After

Simulator.Screen.Recording.-.iPhone.15.Pro.Max.-.2026-06-09.at.15.19.00.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.

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

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

Low Risk
UI layout and design-system component swaps only; navigation and
section visibility/loading behavior are intended to stay the same.

Overview
Perps home and related sections are **aligned on MMDS SectionDivider

• SectionHeader** instead of legacy component-library headers and
  one-off top borders/margins.

PerpsHomeSection drops custom StyleSheet/Tailwind section
chrome and uses design-system headers; overflow actions use
ButtonIcon instead of TouchableOpacity + Icon.
PerpsMarketTypeSection, PerpsRecentActivityList,
PerpsWatchlistMarkets (v1/v2), PerpsTopMoversSection, and
WhatsHappeningSection follow the same pattern, with interactive
headers for “See all” where navigation existed before. Unused section
border styles are removed from PerpsHomeView and several
*.styles.ts files.

PerpsHomeView wraps the service interruption, balance actions,
and competition banners in a shared Box with bottom padding, and
renders What’s Happening without an extra wrapper view. Explore
NowTab drops redundant bottom margin on the What’s Happening
wrapper. One unit test asserts section presence via testID instead
of an empty title string.

^{Reviewed by Cursor Bugbot for commit
b9daf49. Bugbot is set up for automated
code reviews on this repo. Configure
here.}

[2c5d5a0](https://github.com/MetaMask/metamask-mobile/commit/2c5d5a093992bf7eb7490b1ae9e4a935bec8332a)

[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.

[github-actions]

🔍 Smart E2E Test Selection

⏭️ Smart E2E selection skipped - PR targets a release or stable branch (release/* or stable)

All E2E tests pre-selected.

View GitHub Actions results