Description

The bridge token selector currently shows all supported networks as horizontal pills, which doesn't scale as we add more chains. When there are many networks (e.g. 7+), the pill bar becomes crowded and harder to navigate.

This PR introduces an overflow pattern: only the top 4 networks are shown as pills, with a "+X more" pill that opens a NetworkListModal bottom sheet containing the full list. Selecting a non-visible network from the modal dynamically swaps it into the visible pill bar.

Key changes:

• NetworkPills: Limited to MAX_VISIBLE_PILLS (4) with a "+X more" overflow button. Visible set is derived from the first 4 entries in the feature-flag-controlled chainRanking. When a non-visible network is selected (via the modal), it's pushed to the front of the visible pills.
• NetworkListModal (new): A bottom sheet showing all available networks with checkmark selection state, using Cell and BottomSheet from the component library.
• Redux state: The network filter (tokenSelectorNetworkFilter) was lifted from local useState to the bridge Redux slice so it can be shared between BridgeTokenSelector, NetworkPills, and NetworkListModal (which lives on a separate navigation stack).

Changelog

CHANGELOG entry: Added network pill overflow with "+X more" button that opens a full network list in the bridge token selector

Related issues

Fixes:

Manual testing steps

**Feature: Network pills overflow in bridge token selector**

**Scenario: user sees limited pills with overflow indicator**
- Given user opens the bridge token selector (source or dest)
- And there are more than 4 supported networks
- When the token selector screen loads
- Then user sees "All" pill, 4 network pills with icons, and a "+X more" pill
- And the "+X more" count reflects the number of hidden networks

**Scenario: user opens full network list from overflow pill**
- Given user is on the bridge token selector
- And the "+X more" pill is visible
- When user taps the "+X more" pill
- Then a bottom sheet opens showing all available networks
- And the currently selected network (or "All") has a checkmark

**Scenario: user selects a non-visible network from the modal**
- Given user has opened the network list modal
- And "Polygon" is not currently visible in the pill bar
- When user taps "Polygon" in the modal
- Then the modal closes
- And "Polygon" appears as the first pill in the bar (replacing the last visible pill)
- And the token list filters to show only Polygon tokens

**Scenario: user selects "All networks" from the modal**
- Given user has a specific network selected
- And user has opened the network list modal
- When user taps "All networks"
- Then the modal closes
- And the "All" pill is highlighted
- And the token list shows tokens from all networks

**Scenario: user taps a visible network pill directly**
- Given user is on the bridge token selector
- When user taps the "Ethereum" pill
- Then the pill is highlighted
- And the token list filters to show only Ethereum tokens

**Scenario: overflow pill does not appear when few networks exist**
- Given there are 4 or fewer supported networks
- When the token selector screen loads
- Then all networks are shown as pills
- And no "+X more" pill is displayed

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.