fix(perps): watchlist and explore header and list padding fix cp-7.64.0 by geositta · Pull Request #25407 · MetaMask/metamask-mobile

geositta · 2026-01-29T19:40:46Z

Description

Fix header font weight to match Figma design specs (500 Medium instead of 700
Bold)
- Implement dynamic header padding based on context (balance visibility, watchlist
  presence)
- Remove redundant horizontal padding from Watchlist component (inherited from
  parent)
- Increase explore market row vertical padding from 6px to 16px
- Add horizontal margin to "See All Perps" button
Changes

Font Weight:
- Changed Watchlist and Explore headers from TextVariant.HeadingMD to
  TextVariant.BodyLGMedium
Dynamic Header Padding:
- Watchlist header: 16px/4px (no balance) or 24px/4px (with balance)
- Explore header: 16px/4px (no balance), 24px/4px (with balance), or 20px/8px (below
  watchlist)
Padding Cleanup:
- Removed duplicate paddingHorizontal: 16 from watchlist header/list (inherits from
  parent)
- Updated explore market row paddingVertical from 6px to 16px
- Added marginHorizontal: 16 to "See All Perps" button

Changelog

CHANGELOG entry: Fix watchlist and explore header and list padding

Related issues

Fixes:

Manual testing steps

Feature: my feature name

  Scenario: user [verb for user action]
    Given [describe expected initial app state]

    When user [verb for user action]
    Then [describe expected outcome]

Verify Watchlist/Explore headers display with Medium font weight (500)
Verify header padding adjusts correctly when balance is empty vs non-empty
Verify Explore header spacing changes when Watchlist is visible vs hidden
Verify market row spacing matches Figma spec

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.

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
Low risk UI-only changes adjusting layout/typography and swapping PerpsTabView to inline-render watchlist rows; no business logic or data flow changes beyond presentation.

Overview
Adjusts the Perps wallet-home tab layout to match design specs by standardizing header typography (TextVariant.BodyLGMedium) and tuning spacing (dynamic watchlist/explore header padding based on balance visibility and watchlist presence, larger row vertical padding, and horizontal margins for the “See all perps” button).

PerpsTabView no longer uses PerpsWatchlistMarkets in the empty state; it now renders watchlist rows inline via PerpsMarketRowItem with a local skeleton state. Shared section components (PerpsHomeSection, PerpsMarketTypeSection, PerpsWatchlistMarkets) also get minor header spacing tweaks, and tests are updated to mock the new dependencies.

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

github-actions · 2026-01-29T19:40:58Z

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.

app/components/UI/Perps/components/PerpsWatchlistMarkets/PerpsWatchlistMarkets.styles.ts

app/components/UI/Perps/Views/PerpsTabView/PerpsTabView.styles.ts

app/components/UI/Perps/components/PerpsWatchlistMarkets/PerpsWatchlistMarkets.styles.ts

…arrow from watchlist header

app/components/UI/Perps/Views/PerpsTabView/PerpsTabView.tsx

cursor · 2026-01-29T21:03:45Z

app/components/UI/Perps/Views/PerpsTabView/PerpsTabView.tsx

+        </View>
+        {watchlistMarkets.map(renderExploreMarketRow)}
+      </View>
+    );


Watchlist header tap-to-navigate functionality removed

Medium Severity

The new inline renderWatchlistSection function renders the "Watchlist" header as a plain View, but the previous PerpsWatchlistMarkets component used a TouchableOpacity with an onPress handler that navigated to Routes.PERPS.MARKET_LIST. Users could tap the watchlist header to view all markets. This navigation functionality is now missing entirely in the PerpsTabView, as the header is no longer interactive.

Additional Locations (1)

app/components/UI/Perps/Views/PerpsTabView/PerpsTabView.tsx#L369-L379

app/components/UI/Perps/Views/PerpsTabView/PerpsTabView.styles.ts

app/components/UI/Perps/Views/PerpsTabView/PerpsTabView.tsx

cursor · 2026-01-29T21:24:44Z

app/components/UI/Perps/components/PerpsWatchlistMarkets/PerpsWatchlistMarkets.tsx

+      </View>
    ),
-    [styles.header, styles.titleRow, handleViewAll, headerStyle],
+    [styles.header, headerStyle],


Shared component lost clickable header navigation functionality

Medium Severity

The PerpsWatchlistMarkets component's header was changed from a pressable TouchableOpacity (with arrow icon and navigation to market list) to a non-interactive View. While PerpsTabView now uses inline rendering and doesn't rely on this component, PerpsHomeView still uses PerpsWatchlistMarkets directly. This removes the ability for users to tap the "Watchlist" header to navigate to the full market list in PerpsHomeView. The PR description mentions font weight and padding changes but not this functional regression.

github-actions · 2026-01-29T23:17:53Z

🔍 Smart E2E Test Selection

Selected E2E tags: SmokePerps
Selected Performance tags: @PerformancePreps
Risk Level: low
AI Confidence: 90%

click to see 🤖 AI reasoning details

E2E Test Selection:
The changes are purely UI/styling modifications to the Perps (perpetuals trading) components:

PerpsTabView.tsx: Refactored to use a new PerpsMarketRowItem component instead of inline rendering, replaced PerpsWatchlistMarkets component with inline rendering, added context-aware header styles, and changed text variants from BodyMDMedium to BodyLGMedium.
PerpsHomeSection.tsx: Minor margin adjustment (marginBottom: 8 → 12).
PerpsMarketTypeSection.tsx: Changed text variant from HeadingMD to BodyLGMedium and margin adjustment.
PerpsWatchlistMarkets.tsx: Simplified header component by removing TouchableOpacity navigation and arrow icon, changed text variant.
Style files: Various padding/margin adjustments for visual consistency.
Test file: Added mock for usePerpsLivePrices and test selectors.

All changes are contained within the Perps UI components with no functional/business logic changes. The SmokePerps tag is the appropriate choice as it covers the Perps trading functionality including the Add Funds flow, balance verification, and Perps interface. No other features are affected by these changes.

Performance Test Selection:
The changes involve refactoring of Perps UI components including market list rendering (PerpsMarketRowItem), watchlist section rendering, and explore section rendering. While these are primarily styling changes, the component refactoring (replacing inline rendering with a new component, changing from shared PerpsWatchlistMarkets to inline rendering) could potentially impact rendering performance. The @PerformancePreps tag covers perps market loading and position management which aligns with the changed components.

View GitHub Actions results

gambinish

LGTM! Thanks for working through this

cursor

Cursor Bugbot has reviewed your changes and found 2 potential issues.

cursor · 2026-01-29T23:26:35Z

app/components/UI/Perps/Views/PerpsTabView/PerpsTabView.styles.ts

      justifyContent: 'space-between',
      alignItems: 'center',
-      paddingVertical: 6,
+      paddingVertical: 16,


Unused explore market row styles after refactoring

Low Severity

The styles exploreMarketRow, exploreMarketLeft, exploreMarketIcon, exploreMarketInfo, exploreMarketHeader, exploreMarketSecondRow, exploreMarketRight, exploreMarketPrice, and exploreMarketChange are now dead code. These were used by the removed renderExploreMarketRow function, which was replaced with PerpsMarketRowItem. The styles remain defined but are never referenced anywhere in the codebase.

cursor · 2026-01-29T23:26:35Z

app/components/UI/Perps/components/PerpsWatchlistMarkets/PerpsWatchlistMarkets.styles.ts

      alignItems: 'center',
      paddingHorizontal: 16,
-      marginBottom: 8,
+      marginBottom: 12,


Unused titleRow style in PerpsWatchlistMarkets

Low Severity

The titleRow style is now dead code after the header was simplified from a pressable TouchableOpacity with nested content and chevron icon to a simple View with just text. The style definition remains but styles.titleRow is never referenced in PerpsWatchlistMarkets.tsx.

sonarqubecloud · 2026-01-29T23:39:19Z

Quality Gate failed

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

See analysis details on SonarQube Cloud

fix(perps): watchlist and explore header and list padding fix

bd24eb2

metamaskbot added the team-perps Perps team label Jan 29, 2026

github-actions bot added the size-S label Jan 29, 2026

aganglada changed the title ~~fix(perps): watchlist and explore header and list padding fix cp-7.63.0~~ fix(perps): watchlist and explore header and list padding fix cp-7.64.0 Jan 29, 2026

aganglada previously approved these changes Jan 29, 2026

View reviewed changes

Merge branch 'main' into perps/fix-header-styles

43b9c35

geositta marked this pull request as ready for review January 29, 2026 19:47

geositta requested a review from a team as a code owner January 29, 2026 19:47

geositta enabled auto-merge January 29, 2026 19:52

cursor bot reviewed Jan 29, 2026

View reviewed changes

geositta disabled auto-merge January 29, 2026 20:04

aganglada added the skip-sonar-cloud Only used for bypassing sonar cloud when failures are not relevant to the changes. label Jan 29, 2026

fix(perps): create inline watchlist component for perps tab view, rm …

d55171d

…arrow from watchlist header

geositta dismissed aganglada’s stale review via d55171d January 29, 2026 20:56

github-actions bot added size-M and removed size-S labels Jan 29, 2026

cursor bot reviewed Jan 29, 2026

View reviewed changes

fix(perps): rm touch from watchlist header

bd89fbb

cursor bot reviewed Jan 29, 2026

View reviewed changes

geositta and others added 2 commits January 29, 2026 17:10

fix(perps): use market row item

55122be

Merge branch 'main' into perps/fix-header-styles

a86ce7e

gambinish approved these changes Jan 29, 2026

View reviewed changes

cursor bot reviewed Jan 29, 2026

View reviewed changes

geositta enabled auto-merge January 29, 2026 23:26

geositta added this pull request to the merge queue Jan 29, 2026

Merged via the queue into main with commit 74f8159 Jan 30, 2026
85 of 86 checks passed

geositta deleted the perps/fix-header-styles branch January 30, 2026 00:07

github-actions bot locked and limited conversation to collaborators Jan 30, 2026

metamaskbot added the release-7.65.0 Issue or pull request that will be included in release 7.65.0 label Jan 30, 2026

Uh oh!

Conversation

geositta commented Jan 29, 2026 • edited by cursor bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Changelog

Related issues

Manual testing steps

Screenshots/Recordings

Before

After

Pre-merge author checklist

Pre-merge reviewer checklist

Uh oh!

github-actions bot commented Jan 29, 2026

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

cursor bot Jan 29, 2026

Choose a reason for hiding this comment

Watchlist header tap-to-navigate functionality removed

Uh oh!

Uh oh!

Uh oh!

cursor bot Jan 29, 2026

Choose a reason for hiding this comment

Shared component lost clickable header navigation functionality

Uh oh!

github-actions bot commented Jan 29, 2026

🔍 Smart E2E Test Selection

Uh oh!

gambinish left a comment

Choose a reason for hiding this comment

Uh oh!

cursor bot left a comment

Choose a reason for hiding this comment

Uh oh!

cursor bot Jan 29, 2026

Choose a reason for hiding this comment

Unused explore market row styles after refactoring

Uh oh!

cursor bot Jan 29, 2026

Choose a reason for hiding this comment

Unused titleRow style in PerpsWatchlistMarkets

Uh oh!

sonarqubecloud bot commented Jan 29, 2026

Quality Gate failed

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

geositta commented Jan 29, 2026 •

edited by cursor bot

Loading

Unused `titleRow` style in PerpsWatchlistMarkets