feat(ramps): adds payment selection modal by georgeweiler · Pull Request #25681 · MetaMask/metamask-mobile

georgeweiler · 2026-02-05T00:29:30Z

Description

Introduces the payment selection modal and payment selection flow. Users can choose a payment method (e.g. debit/credit card). Quotes and an option to change provider coming soon.

Changelog

CHANGELOG entry: adds functionality for selecting a payment method

Related issues

Fixes:

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

Loom video of the feature working:
https://www.loom.com/share/bfcf206254ff46b48107f8efb55875e5

Loading state:

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
Touches Ramp navigation and selection state (payment method/provider) and upgrades @metamask/ramps-controller, which could affect runtime behavior across the ramps flow despite being mostly additive and UI-focused.

Overview
Adds a new payment selection bottom sheet modal to the Ramp buy flow, letting users pick a paymentMethod (and a stubbed provider-selection view) and persisting the choice via useRampsController.setSelectedPaymentMethod.

Updates BuildQuote to use controller-managed selectedToken/selectedPaymentMethod (instead of route param lookup), display a “Select payment method” placeholder, show a loading spinner/disable interaction while payment methods load, and navigate to the new modal. Also centralizes payment-delay string formatting into shared Aggregator/utils helpers and bumps @metamask/ramps-controller to ^7.0.0, with new/updated tests and snapshots covering the modal, pill loading state, and navigation.

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

…nt-method-modal

github-actions · 2026-02-05T00:29:38Z

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.

app/components/UI/Ramp/components/PaymentSelectionModal/PaymentMethodListItem.tsx

app/components/UI/Ramp/components/PaymentSelectionModal/ProviderSelection.tsx

…nt-method-modal

socket-security · 2026-02-05T20:07:30Z

Review the following changes in direct dependencies. Learn more about Socket for GitHub.

Diff	Package	Supply Chain Security	Vulnerability	Quality	Maintenance	License
	npm/@metamask/ramps-controller@6.0.0 ⏵ 7.0.0			⁺¹	⁺¹

View full report

locales/languages/en.json

app/components/UI/Ramp/components/PaymentSelectionModal/ProviderSelection.tsx

app/components/UI/Ramp/components/PaymentSelectionModal/PaymentSelectionModal.tsx

app/components/UI/Ramp/components/BuildQuote/BuildQuote.tsx

cursor

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

app/components/UI/Ramp/components/PaymentSelectionModal/PaymentSelectionModal.test.tsx

…nt-method-modal

amitabh94 · 2026-02-05T22:38:36Z

This is looking great! 🔥
Quick nit: Why do we have so much blank space at the bottom of the payment modal ?

amitabh94

Minor comments but overall looks 💯

app/components/UI/Ramp/components/BuildQuote/BuildQuote.tsx

amitabh94 · 2026-02-05T22:46:09Z

app/components/UI/Ramp/components/PaymentSelectionModal/PaymentSelectionModal.tsx

+  const translateX = useSharedValue(0);
+
+  const paymentPageStyle = useAnimatedStyle(() => ({
+    transform: [{ translateX: translateX.value }],
+  }));
+
+  const providerPageStyle = useAnimatedStyle(() => ({
+    transform: [{ translateX: translateX.value + screenWidth }],
+  }));
+
+  const handleChangeProviderPress = useCallback(() => {
+    translateX.value = withTiming(-screenWidth, {
+      duration: ANIMATION_DURATION,
+    });
+  }, [screenWidth, translateX]);
+
+  const handleProviderBack = useCallback(() => {
+    translateX.value = withTiming(0, { duration: ANIMATION_DURATION });
+  }, [translateX]);
+
+  const handleProviderSelect = useCallback(
+    (provider: Provider) => {
+      setSelectedProvider(provider);
+      translateX.value = withTiming(0, { duration: ANIMATION_DURATION });
+    },
+    [setSelectedProvider, translateX],
+  );
+


Can we double check if this is the best way to do horizontal animation and there isn't already a helper that is being used in other modals?

...nents/UI/Ramp/Deposit/Views/Modals/PaymentMethodSelectorModal/PaymentMethodSelectorModal.tsx

amitabh94 · 2026-02-05T23:49:07Z

locales/languages/en.json

Looks like we are updating more than we should.

…obile into payment-method-modal

github-actions · 2026-02-06T00:29:28Z

🔍 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:
This PR focuses entirely on the Ramps (buy/sell crypto) feature with the following changes:

Package Update: Upgrades @metamask/ramps-controller from v6.0.0 to v7.0.0 - this is a major version bump which could introduce breaking changes in the ramps functionality.
New PaymentSelectionModal: Introduces a new modal component for selecting payment methods and providers in the buy/sell flow. This includes:
- PaymentSelectionModal.tsx - Main modal with animated transitions
- PaymentMethodListItem.tsx - List items for payment methods
- PaymentMethodQuote.tsx - Quote display component
- ProviderSelection.tsx - Provider selection view
BuildQuote Updates: Modified to integrate with the new payment selection modal, changing how payment methods are selected.
PaymentMethodPill Updates: Added loading state support for better UX during payment method loading.
Utility Refactoring: Extracted formatDelayFromArray and renderDelayToken functions from PaymentMethod.tsx to utils for reuse.
New Navigation Route: Added PAYMENT_SELECTION route for the new modal.

All changes are scoped to the Ramps feature (app/components/UI/Ramp/). The SmokeRamps tag covers the off-ramp token amount input screen, on-ramp flows, and payment method selection - all of which could be affected by these changes. No other features (confirmations, wallet platform, accounts, etc.) are impacted by these changes.

Performance Test Selection:
The changes are localized to the Ramps feature and introduce new UI components (PaymentSelectionModal with animations using react-native-reanimated). While there are new components with FlatList rendering and animations, these are specific to the payment selection flow within the buy/sell crypto feature. The changes don't affect core app performance areas like app launch, login, account list rendering, asset loading, or swap flows. The Ramps feature doesn't have dedicated performance tests, and the changes are unlikely to cause measurable performance regressions in the existing performance test areas.

View GitHub Actions results

sonarqubecloud · 2026-02-06T00:51:11Z

Quality Gate passed

Issues
5 New issues
0 Accepted issues

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

See analysis details on SonarQube Cloud

georgeweiler added 5 commits February 4, 2026 14:29

feat: adds ramp payment method modal

f877fef

Merge branch 'main' of github.com:MetaMask/metamask-mobile into payme…

9017f05

…nt-method-modal

feat: adds loading state to payment method pill

547a761

feat: adds ramp payment method modal

48c7d65

fix: snapshots

5c83d68

georgeweiler requested a review from a team as a code owner February 5, 2026 00:29

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

georgeweiler changed the title ~~Payment method modal~~ feat(ramps): adds payment selection modal Feb 5, 2026

github-actions bot added the size-L label Feb 5, 2026