feat: update provider selection modal ui by georgeweiler · Pull Request #26726 · MetaMask/metamask-mobile

georgeweiler · 2026-02-28T12:30:57Z

Description

Updates the Provider Selection modal UI with improved quote-driven sorting, provider tags, skeleton loading states, and a redesigned payment method banner.

Payment Method Banner

Replaced the plain "Quotes displayed for {paymentMethod}" text with a full-width banner component featuring a circular payment method icon on the left and the descriptive text left-aligned beside it, matching the latest design spec.

Quote-Based Provider Sorting

Providers with quotes are now sorted by the API's QuoteSortOrder reliability ranking (via quotes.sorted), placing the most reliable provider at the top.
Providers without quotes are pushed to the bottom of the list, sorted alphabetically, with an "Other options" text separator between the two groups.

Skeleton Loading State

When quotes are loading, the provider list is replaced with a skeleton placeholder (5 rows) instead of showing unsorted providers with individual loading spinners. Once quotes resolve, providers render in their sorted order.

Provider Tags

Each provider can display one tag below its name: Previously used, Most reliable, or Best rate.
Tags use the quote's metadata.tags (isMostReliable, isBestRate) from the API response, and getOrdersProviders from Redux to identify previously used providers from completed order history.
Precedence when a provider qualifies for multiple tags: Previously used > Most reliable > Best rate.

Conditional Back Button

The header back arrow is now only shown when the Payment Selection modal is in the navigation stack (i.e., the user navigated from payment selection to provider selection). When the provider modal is opened directly (e.g., from error recovery or token-not-available flows), the back button is hidden since there's nothing to go back to.

Changed Files

ProviderSelection.tsx — Banner, skeleton, sorting, tags, conditional back button
ProviderSelectionModal.tsx — Passes ordersProviders from Redux, showBackButton from navigation state
ProviderSelection.test.tsx — Updated test for skeleton loading behavior
en.json — Added i18n strings: other_options, previously_used, best_rate, most_reliable

Changelog

CHANGELOG entry: Updates ramp provider selection modal UI

Related issues

Fixes:

https://consensyssoftware.atlassian.net/browse/TRAM-3307
https://consensyssoftware.atlassian.net/browse/TRAM-3187

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]

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

Medium Risk
Changes provider ordering/visibility and quote presentation logic in the provider selection flow (sorting, skeleton states, tags, and back-button behavior), which could affect user selection and navigation in edge cases. No security- or data-sensitive logic is introduced.

Overview
Updates ProviderSelection to be quote-driven: providers with successful quotes are sorted by the API reliability order and shown above an “Other options” separator, while providers without quotes are pushed below and alphabetized.

Replaces the prior “show providers while loading” behavior with a dedicated skeleton list, updates the payment-method header to a banner with an icon, and adds per-provider tags (Previously used, Most reliable, Best rate) derived from order history and quote metadata.

ProviderSelectionModal now conditionally shows the back button only when the payment selection modal exists in the navigation stack and passes ordersProviders from Redux; tests/snapshots and i18n strings were updated accordingly.

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

github-actions · 2026-02-28T12:31:08Z

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 · 2026-02-28T12:52:08Z

🔍 Smart E2E Test Selection

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

click to see 🤖 AI reasoning details

E2E Test Selection:
The changes are focused entirely on the Ramp Provider Selection Modal component within the fiat on-ramp/off-ramp feature. The modifications include:

UI/UX improvements to ProviderSelection.tsx: Added skeleton loading states, payment method banner with icons, provider tags (previously used, best rate, most reliable), sorting logic for providers, and a separator between providers with/without quotes.
ProviderSelectionModal.tsx integration: Added Redux selector for previously used providers and navigation state checks.
New localization strings: Added 4 new translation keys for the provider selection UI.
Test updates: Unit tests and snapshots updated to reflect the new behavior.

These changes are isolated to the Ramps feature and don't affect:

Core wallet functionality (accounts, transactions, confirmations)
Network management or multi-chain features
Trading features (swaps, bridges)
Identity/sync features
Snaps or Flask functionality

The SmokeRamps tag is the appropriate and only necessary tag since:

The changes are in app/components/UI/Ramp/Views/Modals/ProviderSelectionModal/
The E2E tests for ramps cover buy/sell flows including provider selection
No other features are impacted by these changes

Risk is medium because while the changes are UI-focused and well-tested with unit tests, they modify the provider selection flow which is a critical part of the buy/sell crypto user journey.

Performance Test Selection:
The changes are UI refinements to the provider selection modal in the Ramps feature. While there are some rendering changes (skeleton loading, list sorting), these are minor UI updates that don't significantly impact app performance. The changes don't affect: app launch/startup, login flow, account list rendering, swap flows, asset loading, or any other performance-critical paths. The skeleton loading is actually a UX improvement that doesn't add performance overhead. No performance tests are needed for these changes.

View GitHub Actions results

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

cursor · 2026-02-28T12:59:26Z

+          showBackButton={hasPaymentModalInStack}
+          ordersProviders={ordersProviders.filter(
+            (id): id is string => id != null,
+          )}


Inline .filter() defeats useCallback memoization on every render

Low Severity

The ordersProviders.filter(...) call is inline in JSX, creating a new array reference on every render. This new reference is passed as the ordersProviders prop to ProviderSelection, where it's listed as a dependency of the renderItem useCallback. Since the reference changes every render, renderItem is recreated every render, causing FlatList to re-render all items unnecessarily and defeating the memoization. Wrapping the filter in useMemo keyed on ordersProviders would preserve referential stability.

Additional Locations (1)

app/components/UI/Ramp/Views/Modals/ProviderSelectionModal/ProviderSelection.tsx#L294-L306

good catch.

amitabh94 · 2026-02-28T12:57:20Z

  });

-  it('renders providers immediately when quotes are loading', () => {
+  it('renders skeleton loading state when quotes are loading', () => {


Thanks for this change! 🙏

amitabh94 · 2026-02-28T12:59:54Z

    "quote_unavailable": "Quote unavailable.",
    "providers": "Providers",
    "quotes_displayed_for": "Quotes displayed for {{paymentMethodName}}.",
+    "other_options": "Other options",


In what cases will we see other options ?

like here when there are no quotes for that payment method

feat: update provider selection modal ui

a6db44c

georgeweiler requested a review from a team as a code owner February 28, 2026 12:30

metamaskbot added the team-money-movement issues related to Money Movement features label Feb 28, 2026

github-actions Bot added the size-M label Feb 28, 2026

feat: handle case when no quotes are returned

18258af

cursor Bot reviewed Feb 28, 2026

View reviewed changes

Comment thread app/components/UI/Ramp/Views/Modals/ProviderSelectionModal/ProviderSelectionModal.tsx

Comment thread app/components/UI/Ramp/Views/Modals/ProviderSelectionModal/ProviderSelection.tsx

chore: butbot fix

790f8c3

cursor Bot reviewed Feb 28, 2026

View reviewed changes

amitabh94 reviewed Feb 28, 2026

View reviewed changes

amitabh94 approved these changes Feb 28, 2026

View reviewed changes

georgeweiler added this pull request to the merge queue Feb 28, 2026

Merged via the queue into main with commit 2541e58 Feb 28, 2026
60 of 62 checks passed

georgeweiler deleted the TRAM-3307-provider-selection-modal-ui-update branch February 28, 2026 18:51

github-actions Bot locked and limited conversation to collaborators Feb 28, 2026

metamaskbot added the release-7.69.0 Issue or pull request that will be included in release 7.69.0 label Feb 28, 2026

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

feat: update provider selection modal ui#26726

feat: update provider selection modal ui#26726
georgeweiler merged 3 commits into
mainfrom
TRAM-3307-provider-selection-modal-ui-update

georgeweiler commented Feb 28, 2026 •

edited by cursor Bot

Loading

Uh oh!

github-actions Bot commented Feb 28, 2026

Uh oh!

Uh oh!

Uh oh!

github-actions Bot commented Feb 28, 2026

Uh oh!

cursor Bot left a comment

Uh oh!

cursor Bot Feb 28, 2026

Uh oh!

georgeweiler Feb 28, 2026

Uh oh!

amitabh94 Feb 28, 2026

Uh oh!

amitabh94 Feb 28, 2026

Uh oh!

georgeweiler Feb 28, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Uh oh!

Conversation

georgeweiler commented Feb 28, 2026 • edited by cursor Bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Payment Method Banner

Quote-Based Provider Sorting

Skeleton Loading State

Provider Tags

Conditional Back Button

Changed Files

Changelog

Related issues

Manual testing steps

Screenshots/Recordings

Before

After

Pre-merge author checklist

Pre-merge reviewer checklist

Uh oh!

github-actions Bot commented Feb 28, 2026

Uh oh!

Uh oh!

Uh oh!

github-actions Bot commented Feb 28, 2026

🔍 Smart E2E Test Selection

Uh oh!

cursor Bot left a comment

Choose a reason for hiding this comment

Uh oh!

cursor Bot Feb 28, 2026

Choose a reason for hiding this comment

Inline .filter() defeats useCallback memoization on every render

Uh oh!

georgeweiler Feb 28, 2026

Choose a reason for hiding this comment

Uh oh!

amitabh94 Feb 28, 2026

Choose a reason for hiding this comment

Uh oh!

amitabh94 Feb 28, 2026

Choose a reason for hiding this comment

Uh oh!

georgeweiler Feb 28, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

georgeweiler commented Feb 28, 2026 •

edited by cursor Bot

Loading

Inline `.filter()` defeats `useCallback` memoization on every render