fix: Polish token selector for Buy, Swap and Send

[amandaye0h]

Description

What is the reason for the change?

• Inconsistent filter pill styling: Send screen network filter pills used different styling (8px radius, transparent + border) than the Bridge token selector (12px radius, solid selected/unselected pills), which made the product feel inconsistent.
• Layout: On Send, the search bar was above the network pills; aligning with Bridge and putting filters first improves scan order when choosing a network.
• Typography: Ramp token list subtitles (e.g. MUSD, ETH, BTC) used Body MD instead of the smaller Body SM used elsewhere for symbols/secondary labels.

What is the improvement/solution?

• Unified filter pill UI: Send network filter pills now use the same component and styling as the Bridge token selector: ButtonToggle with 12px corner radius (rounded-xl), solid background when selected (primary) and when unselected (secondary), and no border. This matches the Bridge “Select token” filter chips.
• Reordered Send layout: Network filter pills are rendered below the search bar on the Send asset screen
• Ramp token list typography: Ramp TokenListItem subtitles (symbols) now use TextVariant.BodySM instead of TextVariant.BodyMD for consistent secondary label sizing.
• Tests: Snapshots were updated for the affected components (e.g. network filter, asset view, Ramp token list, Bridge token selector, NFT confirmations) to reflect the UI changes.

Changelog

CHANGELOG entry: fix: Polish token selector for Buy, Swap and Send

Related issues

Fixes:

Manual testing steps

Feature: Send and token selector UI alignment

  Scenario: user uses network filters and sees consistent token list styling
    Given the user is on the Send screen or Ramp/Bridge token selection

    When the user views network filter pills and token list items
    Then network pills are above search on Send, use 12px radius and solid pill styling
    And Ramp token list subtitles (MUSD, ETH, BTC) use Body SM

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
Primarily UI layout/styling refactors (chip components, spacing, avatar sizes) with minimal behavioral change; risk is limited to visual regressions and testID-dependent UI tests.

Overview
Aligns token-selection UIs across Bridge, Ramp, and Send by standardizing spacing and filter chip styling.

Bridge and Ramp token selectors reorder the search bar and network pills/filters and switch to Tailwind-based layout spacing (removing some local styles). Send confirmations’ NetworkFilter is restyled to use ButtonToggle chips with AvatarNetwork icons (and new avatar test IDs), and the send asset search padding is adjusted.

Token list item visuals are polished (e.g., Bridge TokenSelectorItem row height/spacing, larger token avatar, smaller secondary balance text; NFT avatar gets rounded corners), and tests are updated to assert the new avatar test IDs.

^{Reviewed by Cursor Bugbot for commit d2da76b. Bugbot is set up for automated code reviews on this repo. 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.

[amandaye0h]

I have read the CLA Document and I hereby sign the CLA

[cursor]

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

^{❌ 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 ad4b35f. Configure here.}

[github-actions]

🔍 Smart E2E Test Selection

• Selected E2E tags: SmokeTrade, SmokeConfirmations, SmokeRamps
• Selected Performance tags: None (no tests recommended)
• Risk Level: medium
• AI Confidence: 88%

click to see 🤖 AI reasoning details

E2E Test Selection:

The PR contains UI/styling and component migration changes across three main areas:

1. Bridge Token Selector (BridgeTokenSelector.tsx, BridgeTokenSelector.styles.ts, TokenSelectorItem.tsx): Layout reorder (search bar moved above network pills), visual tweaks to token items (avatar size, padding, min-height). These changes affect the bridge token selection flow → SmokeTrade (bridge flows). Per SmokeTrade tag description, bridge flows also require SmokeConfirmations.

2. Ramp Token Selection (TokenSelection.tsx, TokenNetworkFilterBar.tsx, TokenNetworkFilterBar.styles.ts): Layout reorder (search bar moved above network filter bar), component migration from old Button/AvatarNetwork to new ButtonToggle design system component. This affects the buy/sell token selection UI → SmokeRamps.

3. Confirmations/Send (network-filter.tsx, network-filter.testIds.ts, network-filter.test.tsx, asset.tsx, nft.tsx): The network filter component in the send flow was refactored from Pressable+Avatar to ButtonToggle (a more significant change as it changes the interactive element). New test IDs added. Minor padding/style changes to asset search and NFT display. These affect the send/confirmation flows → SmokeConfirmations.

All changes are UI-level (no business logic, no controller changes, no state management changes). The component migration from Pressable to ButtonToggle in the network filter is the most impactful change as it changes the interactive behavior of the send flow's network selector. The layout reorders in Bridge and Ramp are cosmetic but could affect test selectors or user interaction flows.

No tags beyond SmokeTrade, SmokeConfirmations, and SmokeRamps are warranted as:

• No account management changes (SmokeAccounts not needed)
• No network/chain permission changes (SmokeNetworkAbstractions not needed)
• No identity/sync changes (SmokeIdentity not needed)
• No Snaps changes (FlaskBuildTests not needed)
• No multi-chain API changes (SmokeMultiChainAPI not needed)

Performance Test Selection:
All changes are UI styling and component migration changes (layout reorders, padding adjustments, avatar size tweaks, ButtonToggle migration). These are cosmetic/structural UI changes that do not affect data loading, state management, app startup, or rendering performance in a measurable way. No performance-sensitive code paths (controllers, Redux, API calls, list virtualization logic) were modified.

View GitHub Actions results

[sonarqubecloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
95.2% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud

[github-actions]

✅ E2E Fixture Validation — Schema is up to date
11 value mismatches detected (expected — fixture represents an existing user).
View details