Description

Fixed a bug where selecting a provider for some token (e.g. MUSD on Linea) would instantly show "No payment methods are available" because the provider's cached supportedCryptoCurrencies map was stale and didn't include the token.

Root cause: The providers data (supportedCryptoCurrencies) was persisted across sessions and only refreshed on region change or fresh install. For tokens added to the backend after the user's last provider cache update, the map wouldn't include the token, causing the payment methods query to be disabled and the "Token Not Available" modal to show — even though the API supports it.

Evidence from reporter's state logs (v7.71.0 build 4173):

• MUSD Linea (eip155:59144/erc20:0xaca92e438df0b2401ff60da7e4337b687a2435da) was NOT IN MAP for all 11 providers
• Fresh /providers endpoint already includes MUSD Linea for Transak and Mercuryo
• Providers data was served from stale Redux persist cache

Fix:

1. queries/providers.ts + useRampsProviders: added a react-query wrapper for getProviders with staleTime: 15min and refetchOnMount: true. Providers (including supportedCryptoCurrencies) are refreshed when data is stale (>15min) and a component using useRampsProviders mounts (e.g. after password unlock or entering the buy flow). On app restart, react-query cache is empty so the first mount always fetches fresh data. The query calls getProviders(regionCode, { forceRefresh: true }) to bypass the controller's internal cache.
2. ProviderSelectionModal: skip quotes fetch when selectedPaymentMethod is null (prevents API error "Payment methods are required"), and set showQuotes=false so no "No providers available" error is shown
3. ProviderSelection: when quotes are not available, fall back to separating providers by supportedCryptoCurrencies — supported tokens on top, others under "Other options"

Companion fix in core: George's feat: removes provider and token persistence in ramps controller (#8307) sets persist: false for providers and tokens so stale data won't survive across app restarts. The react-query refresh complements this by also catching stale data within long-running sessions.

Changelog

CHANGELOG entry: Fixed payment methods and provider availability for newly added tokens by refreshing providers via react-query (15min TTL) on mount and separating the provider list by token support

Related issues

Fixes: TRAM-3383

Manual testing steps

Feature: Payment methods load for tokens missing from supportedCryptoCurrencies

  Scenario: providers are refreshed when stale on mount
    Given the app has provider data older than 15 minutes
    When the user enters the buy flow or unlocks the app (component mounts)
    Then providers data should be refetched from the API via react-query
    And supportedCryptoCurrencies should be up to date

  Scenario: providers are always fresh after app restart
    Given the user restarts the app (react-query cache is empty)
    When the user enters the password and the app loads
    Then providers data should be fetched fresh from the API
    And supportedCryptoCurrencies should include newly added tokens

  Scenario: user opens change provider when no payment method is selected
    Given user is on the Buy screen with a provider that does not support the selected token
    And no payment method is selected (selectedPaymentMethod is null)

    When user taps "Change provider"
    Then the provider list should show supported providers at the top
    And unsupported providers should appear under "Other options" separator
    And no "No providers available" error should be shown

Screenshots/Recordings

Before

After

Payment methods query fires and returns results from the API.

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.