fix: buy flow quote loading and provider selection (#28373)

<!--
Please submit this PR as a draft initially.
Do not mark it as "Ready for review" until the template has been
completely filled out, and PR status checks have passed at least once.
-->

## **Description**

**Quotes felt slow to load** on Buy (Continue / amount screen loading,
modals sluggish) partly because every quote path passed **`forceRefresh:
true`** and React Query used **`staleTime: 0`**, so **`getQuotes` almost
always bypassed the ramps controller cache** (15s TTL) even when token,
amount, provider, and payment method were unchanged.

This PR sets **`RAMPS_QUOTES_STALE_TIME_MS` (15s)** on the quotes
query—aligned with **`RampsController` `DEFAULT_QUOTES_TTL`**—and
**stops passing `forceRefresh`** from Build Quote, provider selection,
and payment selection so controller + React Query can reuse responses
within that window.

**Provider list correctness:** The provider selection modal filtered the
visible list using only the route **`assetId`**. When that param was
absent but **`selectedToken`** was set, the UI could still show every
provider while **`getQuotes`** used the token from **`selectedToken`**,
inflating quote work and mismatching the list vs quotes.

This change uses the same **effective asset id** as quote fetching
(`paramAssetId ?? selectedToken?.assetId`) to derive
**`displayProviders`** from **`supportedCryptoCurrencies`**, so only
providers that support the current asset appear and are included in
quote params.

## **Changelog**

CHANGELOG entry: Fixed buy flow provider selection so only providers
that support the selected asset are shown; improved quote responsiveness
by aligning React Query cache with the ramps quotes TTL (15s) and
avoiding unnecessary `forceRefresh` on each fetch.

## **Related issues**

Fixes:
[TRAM-3425](https://consensyssoftware.atlassian.net/browse/TRAM-3425)

## **Manual testing steps**

```gherkin
Feature: Ramp buy flow quotes and provider selection

  Scenario: Provider list matches token support without route asset id
    Given user is in the MetaMask buy flow with a token selected
    When user opens the provider selection screen
    Then only providers that declare support for that token asset id are listed

  Scenario: Quotes reuse cache within a short window when inputs unchanged
    Given user is on Build Quote with token, provider, payment method, and amount set
    When user navigates away and back to the same screen without changing those inputs
    Then quote loading should not repeatedly pay full cold-fetch latency where the 15s cache applies
```

## **Screenshots/Recordings**

<div>
<a href="https://www.loom.com/share/4884506a4acd4ff2a20454dc62490b09">
      <p>Simulator - Money Movement Sim - 3 April 2026 - Watch Video</p>
    </a>
<a href="https://www.loom.com/share/4884506a4acd4ff2a20454dc62490b09">
<img style="max-width:300px;"
src="https://cdn.loom.com/sessions/thumbnails/4884506a4acd4ff2a20454dc62490b09-ebf6caaf52f2a4f2-full-play.gif#t=0.1">
    </a>
  </div>

## **Pre-merge author checklist**

- [x] I've followed [MetaMask Contributor
Docs](https://github.com/MetaMask/contributor-docs) and [MetaMask Mobile
Coding
Standards](https://github.com/MetaMask/metamask-mobile/blob/main/.github/guidelines/CODING_GUIDELINES.md).
- [x] I've completed the PR template to the best of my ability
- [x] I've included tests if applicable
- [x] I've documented my code using [JSDoc](https://jsdoc.app/) format
if applicable
- [x] I've applied the right labels on the PR (see [labeling
guidelines](https://github.com/MetaMask/metamask-mobile/blob/main/.github/guidelines/LABELING_GUIDELINES.md)).
Not required for external contributors.

## **Pre-merge reviewer checklist**

- [x] I've manually tested the PR (e.g. pull and build branch, run the
app, test code being changed).
- [x] 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.

Author: amitabh94

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

@@ -431,7 +431,6 @@ function BuildQuote() {
             redirectUrl: getRampCallbackBaseUrl(),
             paymentMethods: [selectedPaymentMethod.id],
             providers: [selectedProvider.id],
-            forceRefresh: true,
           }
         : null,
     [

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

@@ -358,7 +358,6 @@ describe('PaymentSelectionModal', () => {
         '/payments/debit-credit-card-1',
         '/payments/debit-credit-card-2',
       ],
-      forceRefresh: true,
     });
   });
 

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

@@ -95,7 +95,6 @@ function PaymentSelectionModal() {
             assetId,
             providers: selectedProvider ? [selectedProvider.id] : undefined,
             paymentMethods: paymentMethodIds,
-            forceRefresh: true,
           }
         : null,
     [

app/components/UI/Ramp/Views/Modals/ProviderSelectionModal/ProviderSelectionModal.test.tsx

@@ -63,6 +63,8 @@ jest.mock('react-native', () => {
   };
 });
 
+const defaultTestAssetId = 'eip155:1/slip44:60';
+
 const mockProviders = [
   {
     id: '/providers/transak',
@@ -77,6 +79,7 @@ const mockProviders = [
       height: 24,
       width: 90,
     },
+    supportedCryptoCurrencies: { [defaultTestAssetId]: true },
   },
   {
     id: '/providers/moonpay',
@@ -91,6 +94,7 @@ const mockProviders = [
       height: 24,
       width: 90,
     },
+    supportedCryptoCurrencies: { [defaultTestAssetId]: true },
   },
 ];
 
@@ -212,7 +216,6 @@ describe('ProviderSelectionModal', () => {
         assetId: 'eip155:1/slip44:60',
         providers: ['/providers/transak', '/providers/moonpay'],
         paymentMethods: ['/payments/debit-credit-card-1'],
-        forceRefresh: true,
       }),
     );
   });
@@ -246,6 +249,29 @@ describe('ProviderSelectionModal', () => {
     expect(mockUseRampsQuotes).toHaveBeenCalledWith(null);
   });
 
+  it('filters providers by selectedToken.assetId when route assetId is omitted', () => {
+    mockUseParams.mockReturnValue({ amount: 100, skipQuotes: true });
+    mockUseRampsController.mockImplementation(() => ({
+      ...defaultControllerReturn,
+      providers: [
+        {
+          ...mockProviders[0],
+          supportedCryptoCurrencies: { [defaultTestAssetId]: true },
+        },
+        {
+          ...mockProviders[1],
+          supportedCryptoCurrencies: { [defaultTestAssetId]: false },
+        },
+      ],
+    }));
+    const { getByText, queryByText } = renderWithProvider(
+      ProviderSelectionModal,
+    );
+
+    expect(getByText('Transak')).toBeOnTheScreen();
+    expect(queryByText('MoonPay')).toBeNull();
+  });
+
   it('filters providers by assetId when provided', () => {
     const assetId = 'eip155:1/erc20:0x123';
     mockUseParams.mockReturnValue({ assetId, skipQuotes: true });
@@ -254,16 +280,25 @@ describe('ProviderSelectionModal', () => {
       providers: [
         {
           ...mockProviders[0],
-          supportedCryptoCurrencies: { [assetId]: true },
+          supportedCryptoCurrencies: {
+            [assetId]: true,
+            [defaultTestAssetId]: false,
+          },
         },
         {
           ...mockProviders[1],
-          supportedCryptoCurrencies: { [assetId]: true },
+          supportedCryptoCurrencies: {
+            [assetId]: true,
+            [defaultTestAssetId]: false,
+          },
         },
         {
           id: '/providers/other',
           name: 'Other',
-          supportedCryptoCurrencies: { 'eip155:1/slip44:60': true },
+          supportedCryptoCurrencies: {
+            [defaultTestAssetId]: true,
+            [assetId]: false,
+          },
           environmentType: 'PRODUCTION',
           description: '',
           hqAddress: '',

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

@@ -82,12 +82,19 @@ function ProviderSelectionModal() {
     '';
   const assetId = paramAssetId ?? selectedToken?.assetId ?? '';
 
+  /**
+   * Only list (and quote) providers that support the effective asset. Uses the
+   * same id as `getQuotes` (`paramAssetId ?? selectedToken?.assetId`), so flows
+   * without route `assetId` still filter when `selectedToken` is set.
+   */
   const displayProviders = useMemo(() => {
-    if (!paramAssetId) return providers;
+    if (!assetId) {
+      return providers;
+    }
     return providers.filter(
-      (p) => p.supportedCryptoCurrencies?.[paramAssetId] === true,
+      (p) => p.supportedCryptoCurrencies?.[assetId] === true,
     );
-  }, [providers, paramAssetId]);
+  }, [providers, assetId]);
 
   const providerIds = useMemo(
     () => displayProviders.map((p) => p.id),
@@ -107,7 +114,6 @@ function ProviderSelectionModal() {
             assetId,
             providers: providerIds,
             paymentMethods: [selectedPaymentMethod.id],
-            forceRefresh: true,
           }
         : null,
     [

app/components/UI/Ramp/Views/Modals/ProviderSelectionModal/__snapshots__/ProviderSelectionModal.test.tsx.snap

@@ -516,6 +516,9 @@ exports[`ProviderSelectionModal matches snapshot 1`] = `
                                       "width": 90,
                                     },
                                     "name": "Transak",
+                                    "supportedCryptoCurrencies": {
+                                      "eip155:1/slip44:60": true,
+                                    },
                                   },
                                   "type": "provider",
                                 },
@@ -533,6 +536,9 @@ exports[`ProviderSelectionModal matches snapshot 1`] = `
                                       "width": 90,
                                     },
                                     "name": "MoonPay",
+                                    "supportedCryptoCurrencies": {
+                                      "eip155:1/slip44:60": true,
+                                    },
                                   },
                                   "type": "provider",
                                 },

app/components/UI/Ramp/queries/quotes.test.ts

@@ -1,4 +1,8 @@
-import { rampsQuotesKeys, rampsQuotesOptions } from './quotes';
+import {
+  RAMPS_QUOTES_STALE_TIME_MS,
+  rampsQuotesKeys,
+  rampsQuotesOptions,
+} from './quotes';
 
 describe('rampsQuotesOptions', () => {
   it('creates a stable query key for quotes', () => {
@@ -28,7 +32,6 @@ describe('rampsQuotesOptions', () => {
       walletAddress: '0x123',
       paymentMethods: ['/payments/card'],
       providers: ['/providers/transak'],
-      forceRefresh: true,
     });
 
     expect(opts.queryKey).toEqual([
@@ -41,6 +44,6 @@ describe('rampsQuotesOptions', () => {
       '/providers/transak',
     ]);
     expect(typeof opts.queryFn).toBe('function');
-    expect(opts.staleTime).toBe(0);
+    expect(opts.staleTime).toBe(RAMPS_QUOTES_STALE_TIME_MS);
   });
 });

app/components/UI/Ramp/queries/quotes.ts

@@ -3,6 +3,9 @@ import type { QuotesResponse } from '@metamask/ramps-controller';
 import type { GetQuotesOptions } from '../hooks/useRampsQuotes';
 import Engine from '../../../../core/Engine';
 
+/** Aligns with `DEFAULT_QUOTES_TTL` in RampsController (15s controller-side cache). */
+export const RAMPS_QUOTES_STALE_TIME_MS = 15_000;
+
 type RampsQuotesQueryParams = Pick<
   GetQuotesOptions,
   | 'assetId'
@@ -42,5 +45,5 @@ export const rampsQuotesOptions = (params: RampsQuotesQueryParams) =>
         forceRefresh: params.forceRefresh,
         ttl: params.ttl,
       }),
-    staleTime: 0,
+    staleTime: RAMPS_QUOTES_STALE_TIME_MS,
   });