refactor: updated select buttons in explore to use mmds by brianacnguyen · Pull Request #30781 · MetaMask/metamask-mobile

brianacnguyen · 2026-05-29T06:04:46Z

Description

Migrates the Trending token list filter controls to the MetaMask Design System SelectButton (primary variant) and left-aligns all filters in a single row.

Why: The Trending screen used custom TouchableOpacity + component-library styling for filter pills. That diverged from MMDS and produced a spread layout (justify-between) that didn’t match design.

What changed:

FilterButton now wraps MMDS SelectButton with SelectButtonVariant.Primary instead of a custom pill.
FilterBar lays out price change, network, and extra filters (e.g. time) in one left-aligned row with gap-2 instead of splitting them across the screen.
The 24h time filter in TrendingTokensFullView uses the shared FilterButton for consistent styling and behavior.
Sort-direction icons use MMDS IconName so they work with SelectButton’s startIconName.

Scope: Shared FilterBar / FilterButton (also used by RWA selector and Bridge trending section via FilterButton export). Visual alignment on Bridge trending may differ if those screens relied on flex-1 stretching.

Changelog

CHANGELOG entry: Updated Trending filter buttons to use the design system and aligned them to the left.

Related issues

Fixes: https://consensyssoftware.atlassian.net/browse/DSYS-765

Manual testing steps

Feature: Trending token list filters

  Scenario: filter buttons render with MMDS styling and left alignment
    Given the user is on the Trending tokens full-screen view (not in search mode)
    When the user views the filter row below the header
    Then "Price change", "All networks", and "24h" appear as primary SelectButtons in a left-aligned row with consistent spacing

  Scenario: price change filter opens bottom sheet
    Given the user is on the Trending tokens full-screen view with tokens loaded
    When the user taps the price change filter
    Then the price change / sort bottom sheet opens

  Scenario: network filter opens bottom sheet
    Given the user is on the Trending tokens full-screen view
    When the user taps the network filter
    Then the network selection bottom sheet opens

  Scenario: time filter opens bottom sheet
    Given the user is on the Trending tokens full-screen view and search is not active
    When the user taps the "24h" filter
    Then the time selection bottom sheet opens

  Scenario: filters are disabled during search where applicable
    Given the user has opened search on the Trending tokens view
    When the user views the filter row
    Then the time filter is disabled while search is active
    And the price change filter is disabled when there are no search results

Screenshots/Recordings

Before

Simulator.Screen.Recording.-.iPhone.15.Pro.Max.-.2026-05-28.at.23.08.07.mov

After

Simulator.Screen.Recording.-.iPhone.15.Pro.Max.-.2026-05-28.at.22.51.55.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 — FilterBar.test.tsx (14 tests passing)
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
I've tested with a power user scenario
I've instrumented key operations with Sentry traces for production performance metrics

Note

Low Risk
UI and design-system alignment only; filter behavior and bottom sheets are unchanged, with minor layout differences on other consumers of FilterBar.

Overview
Trending explore filter controls now use MMDS SelectButton (primary) instead of custom TouchableOpacity pills with component-library text/icons.

FilterButton is a thin wrapper around SelectButton, including optional startIconName for sort direction. FilterBar lays out price change, network, and any extra filters (e.g. 24h) in one left-aligned row with gap-2, replacing the previous justify-between split layout. TrendingTokensFullView uses the shared FilterButton for the time filter instead of an inline control. Sort icons in useTokenListFilters import IconName from the design system so they match SelectButton.

Shared FilterBar / FilterButton also affect other token-list surfaces (e.g. RWA, Bridge trending); alignment may differ where layouts relied on the old stretching behavior.

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

github-actions · 2026-05-29T06:04:56Z

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.

codecov-commenter · 2026-05-29T06:25:58Z

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 82.70%. Comparing base (f0b6941) to head (6115a91).

Additional details and impacted files

@@            Coverage Diff             @@
##             main   #30781      +/-   ##
==========================================
- Coverage   82.70%   82.70%   -0.01%     
==========================================
  Files        5545     5545              
  Lines      142217   142212       -5     
  Branches    32834    32831       -3     
==========================================
- Hits       117624   117614      -10     
- Misses      16746    16751       +5     
  Partials     7847     7847

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

vinnyhoward

Good catch. LGTM

…to refactor/select-explore

…/metamask-mobile into refactor/select-explore

cursor

Cursor Bugbot has reviewed your changes and found 1 potential issue.

^{❌ Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, have a team admin enable autofix in the Cursor dashboard.}

^{Reviewed by Cursor Bugbot for commit d994846. Configure here.}

cursor · 2026-06-03T16:39:23Z

+          numberOfLines={1}
+          ellipsizeMode="tail"
+        />
+        {extraFilters}


Filter row lost shrink layout

Medium Severity

FilterBar now lays out all filter controls in one flex-row without the previous min-w-0 shrink wrapper around the network and extra filters. On narrow widths, long labels (e.g. localized copy or a specific network name) can overflow the row instead of truncating, because numberOfLines/ellipsizeMode on the buttons no longer get a bounded width to ellipsize against.

^{Reviewed by Cursor Bugbot for commit d994846. Configure here.}

github-actions · 2026-06-03T16:39:55Z

🔍 Smart E2E Test Selection

Selected E2E tags: SmokeWalletPlatform
Selected Performance tags: None (no tests recommended)
Risk Level: low
AI Confidence: 90%

click to see 🤖 AI reasoning details

E2E Test Selection:
The three changed files are all within the Trending feature UI layer:

TrendingTokensFullView.tsx: Refactored the time filter button from a custom TouchableOpacity to use the extracted FilterButton component. This is a pure UI refactoring with no logic changes.
FilterBar.tsx: Replaced the custom TouchableOpacity+Icon+Text button implementation with SelectButton from @metamask/design-system-react-native. Also simplified the layout (removed nested View wrapper, changed justify-between to gap-2). This is a visual/structural refactoring.
useTokenListFilters.ts: Updated IconName import from local component library to @metamask/design-system-react-native — a simple import path change.

All changes are confined to the Trending feature's filter UI components. The Trending feature is tested under SmokeWalletPlatform (tests/smoke/trending/ directory). The trending-feed.spec.ts test navigates to the Tokens full view section which exercises the changed TrendingTokensFullView and FilterBar components. No other feature areas are impacted.

No other tags are needed:

No confirmations, swaps, staking, accounts, or network changes
No controller or Engine changes
No navigation or shared component changes that would affect other test suites

Performance Test Selection:
The changes are pure UI component refactoring — replacing custom TouchableOpacity implementations with design system SelectButton components. There are no changes to data loading, state management, list rendering algorithms, or any performance-critical paths. The visual output may differ slightly but the rendering complexity is comparable. No performance tests are warranted.

View GitHub Actions results

refactor: updated select buttons in explore to use mmds

6115a91

brianacnguyen self-assigned this May 29, 2026

brianacnguyen added No QA Needed Apply this label when your PR does not need any QA effort. team-design-system All issues relating to design system in Mobile labels May 29, 2026

metamaskbotv2 Bot added the INVALID-PR-TEMPLATE PR's body doesn't match template label May 29, 2026

github-actions Bot added the size-M label May 29, 2026

Merge branch 'main' into refactor/select-explore

1238496

github-actions Bot added the risk:medium AI analysis: medium risk label May 29, 2026

vinnyhoward previously approved these changes May 29, 2026

View reviewed changes

brianacnguyen enabled auto-merge May 29, 2026 14:30

brianacnguyen added 3 commits May 29, 2026 15:45

Merge branch 'main' into refactor/select-explore

209a727

Merge branch 'main' of https://github.com/MetaMask/metamask-mobile in…

e3c5569

…to refactor/select-explore

Merge branch 'refactor/select-explore' of https://github.com/MetaMask…

91b95df

…/metamask-mobile into refactor/select-explore

brianacnguyen dismissed vinnyhoward’s stale review via 91b95df June 1, 2026 22:43

vinnyhoward approved these changes Jun 1, 2026

View reviewed changes

brianacnguyen added 2 commits June 1, 2026 16:15

Merge branch 'main' into refactor/select-explore

c209bb7

Merge branch 'main' into refactor/select-explore

d994846

cursor Bot reviewed Jun 3, 2026

View reviewed changes

brianacnguyen added this pull request to the merge queue Jun 3, 2026

Merged via the queue into main with commit 89a95f1 Jun 3, 2026
207 of 234 checks passed

brianacnguyen deleted the refactor/select-explore branch June 3, 2026 17:41

github-actions Bot locked and limited conversation to collaborators Jun 3, 2026

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

refactor: updated select buttons in explore to use mmds#30781

refactor: updated select buttons in explore to use mmds#30781
brianacnguyen merged 7 commits into
mainfrom
refactor/select-explore

brianacnguyen commented May 29, 2026 •

edited by cursor Bot

Loading

Uh oh!

github-actions Bot commented May 29, 2026

Uh oh!

codecov-commenter commented May 29, 2026

Uh oh!

vinnyhoward left a comment

Uh oh!

cursor Bot left a comment

Uh oh!

cursor Bot Jun 3, 2026

Uh oh!

github-actions Bot commented Jun 3, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Uh oh!

Conversation

brianacnguyen commented May 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

Performance checks (if applicable)

Uh oh!

github-actions Bot commented May 29, 2026

Uh oh!

codecov-commenter commented May 29, 2026

Codecov Report

Uh oh!

vinnyhoward 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 Jun 3, 2026

Choose a reason for hiding this comment

Filter row lost shrink layout

Uh oh!

github-actions Bot commented Jun 3, 2026

🔍 Smart E2E Test Selection

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

brianacnguyen commented May 29, 2026 •

edited by cursor Bot

Loading