feat(ramps): add provider selection page with async quotes by georgeweiler · Pull Request #44553 · MetaMask/metamask-extension

georgeweiler · 2026-07-16T18:07:41Z

Description

Adds a ramps provider selection screen so users can change the selected provider from the payment method page, with per-provider quotes loading asynchronously.

Reason: After choosing amount and payment method, users need a way to switch providers (mobile/portfolio parity) before continuing.
Solution: New /ramps/provider-selection route lists providers with portfolio-style wordmark logos and quote amounts. Selecting a provider updates selectedProvider and returns to payment methods. Relative logo paths from the providers API are resolved against the on-ramp content CDN.

Depends on / stacks on #44526.

Changelog

CHANGELOG entry: Added a provider selection screen in ramps so users can compare quotes and change their buy provider.

Related issues

Fixes:

Manual testing steps

Run the extension (yarn start) with ramps enabled.
Start a buy flow and enter a fiat amount on build quote.
Continue to the payment method page and confirm payment methods show quotes.
Tap Change provider in the footer.
On the providers screen, confirm provider wordmark logos load (not letter circles) and quotes appear asynchronously per row.
Select a different provider and confirm you return to payment methods with the footer reflecting the new provider.
Confirm tags like best rate / most reliable / previously used appear when applicable, and unavailable/limit cases show a subtitle.

Screenshots/Recordings

Before

After

Pre-merge author checklist

I've followed MetaMask Contributor Docs and MetaMask Extension 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.

Let users change providers from payment methods, with portfolio-style wordmark logos and per-provider quote loading. Co-authored-by: Cursor <cursoragent@cursor.com>

github-actions · 2026-07-16T18:07:52Z

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.

metamask-ci · 2026-07-16T18:08:06Z

✨ Files requiring CODEOWNER review ✨

👨‍🔧 @MetaMask/money-movement (28 files, +2964 -12)

📁 ui/
- 📁 hooks/
  - 📁 ramps/
    - 📁 queries/
      - 📄 quotes.ts +4 -0
    - 📁 utils/
      - 📄 resolveRampsContentUrl.test.ts +48 -0
      - 📄 resolveRampsContentUrl.ts +44 -0
      - 📄 useRampsQuotes.ts +2 -0
- 📁 pages/
  - 📁 ramps/
    - 📁 build-quote/
      - 📁 __snapshots__/
        
        📄 build-quote.test.tsx.snap +7 -7
    - 📁 payment-method/
      - 📁 __snapshots__/
        
        📄 payment-method.test.tsx.snap +135 -0
      - 📁 components/
        
        📁 __snapshots__/
        
        📄 ramps-change-provider-footer.test.tsx.snap +47 -0
        
        📄 ramps-change-provider-footer.test.tsx +61 -0
        
        📄 ramps-change-provider-footer.tsx +63 -0
      - 📁 utils/
        
        📄 get-payment-method-icon.ts +7 -5
        
        📄 payment-method.test.tsx +16 -0
        
        📄 payment-method.tsx +20 -0
    - 📁 provider-selection/
      - 📁 __snapshots__/
        
        📄 provider-selection.test.tsx.snap +761 -0
      - 📁 components/
        
        📁 __snapshots__/
        
        📄 ramps-provider-list-item.test.tsx.snap +177 -0
        
        📄 ramps-provider-list-helpers.tsx +55 -0
        
        📄 ramps-provider-list-item.test.tsx +133 -0
        
        📄 ramps-provider-list-item.tsx +182 -0
      - 📁 utils/
        
        📄 build-provider-list-items.test.ts +156 -0
        
        📄 build-provider-list-items.ts +176 -0
        
        📄 index.ts +1 -0
        
        📄 provider-selection.test.tsx +295 -0
        
        📄 provider-selection.tsx +320 -0
    - 📁 utils/
      - 📄 getProviderLimitMessage.test.ts +85 -0
      - 📄 getProviderLimitMessage.ts +78 -0
      - 📄 isProviderLimitError.test.ts +21 -0
      - 📄 isProviderLimitError.ts +16 -0
      - 📄 providerSupportsAsset.test.ts +34 -0
      - 📄 providerSupportsAsset.ts +20 -0

…der-selection

metamask-ci · 2026-07-16T18:54:41Z

Builds ready [e5e45a0]

⚠️ Make sure the build is safe before downloading and running this build.
- Please do not use these builds with accounts that contain significant real money.
- Beware the security risks of cache poisoning.
Webpack builds: chrome, firefox
Webpack builds (beta): chrome, firefox
Webpack builds (flask): chrome, firefox
Webpack builds (test): chrome, firefox
Webpack builds (test-flask): chrome, firefox
bundle size: Bundle Size Stats
bundle analyzer: Bundle Analyzer
interaction-benchmark: Interaction Stats
storybook: Storybook
typescript migration: Dashboard
all artifacts

Deprecated Browserify fallback builds

Browserify builds: chrome, firefox
Browserify builds (beta): chrome, firefox
Browserify builds (flask): chrome, firefox
Browserify builds (test): chrome, firefox
Browserify builds (test-flask): chrome, firefox

⚡ Performance Benchmarks (Total: 🟢 17 pass · 🟡 7 warn · 🔴 0 fail)

Baseline (latest main): 4c7819a | Date: 7/16/2026 | Pipeline: 29523262086 | Baseline logs

Interaction Benchmarks · Samples: 5

Benchmark chrome-webpack firefox-webpack
loadNewAccount
[Sentry log · main/release] 🟢 [CI log] 🟢 [CI log]
confirmTx
[Sentry log · main/release] 🟢 [CI log] 🟢 [CI log]
bridgeUserActions
[Sentry log · main/release] 🟢 [CI log] 🟢 [CI log]

📈 Results compared to the previous 5 runs on main
↓ loadNewAccount/inp: -15%
↓ loadNewAccount/lcp: -11%
↓ bridgeUserActions/bridge_load_page: -27%
↓ bridgeUserActions/bridge_load_asset_picker: -12%
↓ bridgeUserActions/longTaskCount: -17%
↓ bridgeUserActions/longTaskTotalDuration: -10%
↑ bridgeUserActions/inp: +23%
↑ loadNewAccount/load_new_account: +112%
↑ loadNewAccount/total: +112%
↓ loadNewAccount/inp: -15%
↓ loadNewAccount/fcp: -44%
↑ loadNewAccount/lcp: +1184%
↑ confirmTx/confirm_tx: +14%
↓ confirmTx/longTaskCount: -100%
↓ confirmTx/longTaskTotalDuration: -100%
↓ confirmTx/longTaskMaxDuration: -100%
↓ confirmTx/tbt: -100%
↑ confirmTx/total: +14%
↓ confirmTx/fcp: -43%
↑ confirmTx/lcp: +1340%
↑ bridgeUserActions/bridge_load_page: +207%
↑ bridgeUserActions/bridge_load_asset_picker: +153%
↓ bridgeUserActions/longTaskCount: -100%
↓ bridgeUserActions/longTaskTotalDuration: -100%
↓ bridgeUserActions/longTaskMaxDuration: -100%
↓ bridgeUserActions/tbt: -100%
↑ bridgeUserActions/total: +251%
↑ bridgeUserActions/inp: +13%
↓ bridgeUserActions/fcp: -46%
↑ bridgeUserActions/lcp: +1274%

Startup Benchmarks · Samples: 100

Benchmark chrome-webpack firefox-webpack
startupStandardHome
[Sentry log · main/release] 🟢 [CI log] 🟢 [CI log]
startupPowerUserHome
[Sentry log · main/release] – 🟡 [CI log]

📈 Results compared to the previous 5 runs on main
↓ startupStandardHome/uiStartup: -12%
↓ startupStandardHome/load: -12%
↓ startupStandardHome/domContentLoaded: -12%
↓ startupStandardHome/backgroundConnect: -11%
↓ startupStandardHome/firstReactRender: -10%
↑ startupStandardHome/initialActions: +15%
↓ startupStandardHome/loadScripts: -12%
↓ startupStandardHome/setupStore: -11%
↓ startupStandardHome/numNetworkReqs: -18%
↓ startupStandardHome/longTaskCount: -23%
↓ startupStandardHome/longTaskTotalDuration: -16%
↓ startupStandardHome/longTaskMaxDuration: -12%
↓ startupStandardHome/tbt: -15%
↓ startupStandardHome/fcp: -12%
↑ startupStandardHome/lcp: +85%
↓ startupStandardHome/uiStartup: -18%
↓ startupStandardHome/load: -19%
↓ startupStandardHome/domContentLoaded: -19%
↓ startupStandardHome/domInteractive: -21%
↓ startupStandardHome/backgroundConnect: -14%
↓ startupStandardHome/firstReactRender: -18%
↓ startupStandardHome/initialActions: -44%
↓ startupStandardHome/loadScripts: -20%
↓ startupStandardHome/setupStore: -23%
↓ startupStandardHome/fcp: -15%
↓ startupStandardHome/lcp: -19%
↓ startupPowerUserHome/domInteractive: -15%
↑ startupPowerUserHome/setupStore: +15%
↑ startupPowerUserHome/inp: +28%
↓ startupPowerUserHome/fcp: -15%

🌐 Core Web Vitals — 🟢 good · 🟡 needs improvement · 🔴 poor (web.dev thresholds)
🟡 startupPowerUserHome/INP: p75 248ms
🟡 startupPowerUserHome/LCP: p75 3.4s

User Journey Benchmarks · Samples: 5 · mock API

Benchmark chrome-webpack firefox-webpack
onboardingImportWallet
[Sentry log · main/release] 🟢 [CI log] 🟢 [CI log]
onboardingNewWallet
[Sentry log · main/release] 🟢 [CI log] 🟡 [CI log]
🟡 total
assetDetails
[Sentry log · main/release] 🟢 [CI log] 🟡 [CI log]
solanaAssetDetails
[Sentry log · main/release] 🟢 [CI log] 🟡 [CI log]
importSrpHome
[Sentry log · main/release] 🟡 [CI log] 🟢 [CI log]
sendTransactions
[Sentry log · main/release] 🟢 [CI log] 🟡 [CI log]
swap
[Sentry log · main/release] 🟢 [CI log] 🟡 [CI log]

📈 Results compared to the previous 5 runs on main
↑ onboardingImportWallet/srpButtonToSrpForm: +12%
↑ onboardingImportWallet/confirmSrpToPwForm: +13%
↑ onboardingImportWallet/pwFormToMetricsScreen: +13%
↓ onboardingImportWallet/doneButtonToHomeScreen: -87%
↓ onboardingImportWallet/openAccountMenuToAccountListLoaded: -81%
↓ onboardingImportWallet/longTaskCount: -87%
↓ onboardingImportWallet/longTaskTotalDuration: -96%
↓ onboardingImportWallet/longTaskMaxDuration: -92%
↓ onboardingImportWallet/tbt: -99%
↓ onboardingImportWallet/total: -85%
↓ onboardingNewWallet/doneButtonToAssetList: -27%
↓ onboardingNewWallet/longTaskCount: -50%
↓ onboardingNewWallet/longTaskTotalDuration: -76%
↓ onboardingNewWallet/longTaskMaxDuration: -64%
↓ onboardingNewWallet/tbt: -95%
↓ onboardingNewWallet/total: -24%
↓ solanaAssetDetails/assetClickToPriceChart: -52%
↓ solanaAssetDetails/total: -52%
↓ solanaAssetDetails/inp: -12%
↓ solanaAssetDetails/cls: -86%
↓ importSrpHome/loginToHomeScreen: -21%
↓ importSrpHome/homeAfterImportWithNewWallet: -72%
↓ importSrpHome/longTaskCount: -61%
↓ importSrpHome/longTaskTotalDuration: -56%
↓ importSrpHome/tbt: -52%
↓ importSrpHome/total: -65%
↓ importSrpHome/inp: -17%
↓ importSrpHome/cls: -55%
↓ sendTransactions/openSendPageFromHome: -26%
↓ sendTransactions/reviewTransactionToConfirmationPage: -98%
↓ sendTransactions/longTaskCount: -100%
↓ sendTransactions/longTaskTotalDuration: -100%
↓ sendTransactions/longTaskMaxDuration: -100%
↓ sendTransactions/tbt: -100%
↓ sendTransactions/total: -96%
↓ sendTransactions/inp: -20%
↓ sendTransactions/lcp: -68%
↓ sendTransactions/cls: -86%
↑ swap/fetchAndDisplaySwapQuotes: +66%
↓ swap/longTaskCount: -100%
↓ swap/longTaskTotalDuration: -100%
↓ swap/longTaskMaxDuration: -100%
↓ swap/tbt: -100%
↑ swap/total: +66%
↓ swap/lcp: -67%
↓ swap/cls: -86%

🌐 Core Web Vitals — 🟢 good · 🟡 needs improvement · 🔴 poor (web.dev thresholds)
🟡 importSrpHome/INP: p75 272ms
🟡 assetDetails/FCP: p75 1.9s
🟡 solanaAssetDetails/FCP: p75 1.8s
🟡 sendTransactions/FCP: p75 2.0s
🔴 swap/INP: p75 768ms
🟡 swap/FCP: p75 1.9s

Dapp Page Load Benchmarks · Samples: 100

Benchmark chrome-webpack
dappPageLoad
[Sentry log · main/release] 🟢 [CI log]

Bundle size diffs [🚨 Warning! Bundle size has increased!]

background: 947 Bytes (0.01%)
ui: 23.42 KiB (0.13%)
common: 0 Bytes (0%)
other: 0 Bytes (0%)
contentScripts: 182 Bytes (0.01%)
zip: 9.23 KiB (0.03%)

feat(ramps): add provider selection page with async quotes

b18633e

Let users change providers from payment methods, with portfolio-style wordmark logos and per-provider quote loading. Co-authored-by: Cursor <cursoragent@cursor.com>

georgeweiler temporarily deployed to pr-comment July 16, 2026 18:07 — with GitHub Actions Inactive

metamask-ci Bot added the team-money-movement label Jul 16, 2026

github-actions Bot added the size-XL label Jul 16, 2026

Merge branch 'feat/ramps-payment-method-quotes' into feat/ramps-provi…

e5e45a0

…der-selection

georgeweiler temporarily deployed to pr-comment July 16, 2026 18:16 — with GitHub Actions Inactive

georgeweiler temporarily deployed to pr-comment July 16, 2026 18:53 — with GitHub Actions Inactive

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

feat(ramps): add provider selection page with async quotes#44553

feat(ramps): add provider selection page with async quotes#44553
georgeweiler wants to merge 2 commits into
feat/ramps-payment-method-quotesfrom
feat/ramps-provider-selection

georgeweiler commented Jul 16, 2026 •

edited

Loading

Uh oh!

github-actions Bot commented Jul 16, 2026

Uh oh!

metamask-ci Bot commented Jul 16, 2026

Uh oh!

metamask-ci Bot commented Jul 16, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

Uh oh!

Conversation

georgeweiler commented Jul 16, 2026 • edited 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 Jul 16, 2026

Uh oh!

metamask-ci Bot commented Jul 16, 2026

✨ Files requiring CODEOWNER review ✨

Uh oh!

metamask-ci Bot commented Jul 16, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

georgeweiler commented Jul 16, 2026 •

edited

Loading