feat: add support for blocklisted chains and tokens for MMPay (#26629)

<!--
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**

<!--
Write a short description of the changes included in this pull request,
also include relevant motivation and context. Have in mind the following
questions:
1. What is the reason for the change?
2. What is the improvement/solution?
-->

## **Changelog**

<!--
If this PR is not End-User-Facing and should not show up in the
CHANGELOG, you can choose to either:
1. Write `CHANGELOG entry: null`
2. Label with `no-changelog`

If this PR is End-User-Facing, please write a short User-Facing
description in the past tense like:
`CHANGELOG entry: Added a new tab for users to see their NFTs`
`CHANGELOG entry: Fixed a bug that was causing some NFTs to flicker`

(This helps the Release Engineer do their job more quickly and
accurately)
-->

CHANGELOG entry:

## **Related issues**

Fixes: MetaMask/MetaMask-planning#6982

## **Manual testing steps**

```gherkin
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**
<img width="397" height="852" alt="Screenshot 2026-02-26 at 6 56 11 PM"
src="https://github.com/user-attachments/assets/c53aba8a-938c-454f-acae-634fc933778b"
/>

## **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**

- [ ] 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.

<!-- CURSOR_SUMMARY -->
---

> [!NOTE]
> **Medium Risk**
> Changes payment-token availability/selection logic to enforce a
remote-configured blocklist, which could unintentionally disable valid
tokens or alter default token selection if misconfigured.
> 
> **Overview**
> **MetaMask Pay token lists now respect a remote-configured
blocklist.** A new `blockedTokens` config is added to
`confirmations_pay_tokens` flags (with per-transaction-type overrides)
and consumed via `useTransactionPayBlockedTokens` in both `PayWithModal`
and `useTransactionPayAvailableTokens`.
> 
> `getAvailableTokens` now marks blocklisted chains/tokens as `disabled`
with a new `pay_with_modal.not_supported` message, and sorts disabled
tokens to the bottom; tests were expanded/updated to cover blocklist
resolution and behavior.
> 
> <sup>Written by [Cursor
Bugbot](https://cursor.com/dashboard?tab=bugbot) for commit
2eba3c5. This will update automatically
on new commits. Configure
[here](https://cursor.com/dashboard?tab=bugbot).</sup>
<!-- /CURSOR_SUMMARY -->

Author: jpuri

app/components/Views/confirmations/components/modals/pay-with-modal/pay-with-modal.tsx

@@ -19,6 +19,7 @@ import {
 } from '../../../types/token';
 import { useTransactionPayRequiredTokens } from '../../../hooks/pay/useTransactionPayData';
 import { getAvailableTokens } from '../../../utils/transaction-pay';
+import { useTransactionPayBlockedTokens } from '../../../hooks/pay/useTransactionPayBlockedTokens';
 import { useTransactionMetadataRequest } from '../../../hooks/transactions/useTransactionMetadataRequest';
 import { TransactionType } from '@metamask/transaction-controller';
 import {
@@ -48,6 +49,7 @@ export function PayWithModal() {
     usePerpsPaymentToken();
   const perpsBalanceTokenFilter = usePerpsBalanceTokenFilter();
   const withdrawTokenFilter = useWithdrawTokenFilter();
+  const blockedTokens = useTransactionPayBlockedTokens();
 
   const close = useCallback((onClosed?: () => void) => {
     // Called after the bottom sheet's closing animation completes.
@@ -153,6 +155,7 @@ export function PayWithModal() {
         payToken,
         requiredTokens,
         tokens,
+        blockedTokens,
       });
 
       let filteredTokens: TokenListItem[] = availableTokens;
@@ -172,6 +175,7 @@ export function PayWithModal() {
       return wrapHighlightedItemCallbacks(filteredTokens);
     },
     [
+      blockedTokens,
       withdrawTokenFilter,
       musdTokenFilter,
       payToken,

app/components/Views/confirmations/hooks/pay/useAutomaticTransactionPayToken.test.ts

@@ -7,7 +7,10 @@ import {
 import { useTransactionPayToken } from './useTransactionPayToken';
 import { simpleSendTransactionControllerMock } from '../../__mocks__/controllers/transaction-controller-mock';
 import { transactionApprovalControllerMock } from '../../__mocks__/controllers/approval-controller-mock';
-import { selectMetaMaskPayTokensFlags } from '../../../../../selectors/featureFlagController/confirmations';
+import {
+  MetaMaskPayTokensFlags,
+  selectMetaMaskPayTokensFlags,
+} from '../../../../../selectors/featureFlagController/confirmations';
 import { isHardwareAccount } from '../../../../../util/address';
 import { TransactionType } from '@metamask/transaction-controller';
 import { TransactionPayRequiredToken } from '@metamask/transaction-pay-controller';
@@ -111,7 +114,14 @@ describe('useAutomaticTransactionPayToken', () => {
     selectMetaMaskPayTokensFlagsMock.mockReturnValue({
       preferredTokens: { default: [], overrides: {} },
       minimumRequiredTokenBalance: 0,
-    });
+      blockedTokens: {
+        default: {
+          chainIds: [],
+          tokens: [],
+        },
+        overrides: {},
+      },
+    } as MetaMaskPayTokensFlags);
   });
 
   it('selects first token', () => {
@@ -341,7 +351,14 @@ describe('useAutomaticTransactionPayToken', () => {
         },
       },
       minimumRequiredTokenBalance: 5,
-    });
+      blockedTokens: {
+        default: {
+          chainIds: [],
+          tokens: [],
+        },
+        overrides: {},
+      },
+    } as MetaMaskPayTokensFlags);
 
     useTransactionPayAvailableTokensMock.mockReturnValue({
       availableTokens: [
@@ -387,7 +404,14 @@ describe('useAutomaticTransactionPayToken', () => {
         },
       },
       minimumRequiredTokenBalance: 15,
-    });
+      blockedTokens: {
+        default: {
+          chainIds: [],
+          tokens: [],
+        },
+        overrides: {},
+      },
+    } as MetaMaskPayTokensFlags);
 
     useTransactionPayAvailableTokensMock.mockReturnValue({
       availableTokens: [
@@ -428,7 +452,14 @@ describe('useAutomaticTransactionPayToken', () => {
         },
       },
       minimumRequiredTokenBalance: 100,
-    });
+      blockedTokens: {
+        default: {
+          chainIds: [],
+          tokens: [],
+        },
+        overrides: {},
+      },
+    } as MetaMaskPayTokensFlags);
 
     useTransactionPayAvailableTokensMock.mockReturnValue({
       availableTokens: [
@@ -495,7 +526,14 @@ describe('useAutomaticTransactionPayToken', () => {
         },
       },
       minimumRequiredTokenBalance: 0,
-    });
+      blockedTokens: {
+        default: {
+          chainIds: [],
+          tokens: [],
+        },
+        overrides: {},
+      },
+    } as MetaMaskPayTokensFlags);
 
     useTransactionPayAvailableTokensMock.mockReturnValue({
       availableTokens: [
@@ -543,7 +581,14 @@ describe('useAutomaticTransactionPayToken', () => {
         },
       },
       minimumRequiredTokenBalance: 5,
-    });
+      blockedTokens: {
+        default: {
+          chainIds: [],
+          tokens: [],
+        },
+        overrides: {},
+      },
+    } as MetaMaskPayTokensFlags);
 
     useTransactionPayAvailableTokensMock.mockReturnValue({
       availableTokens: [

app/components/Views/confirmations/hooks/pay/useTransactionPayAvailableTokens.test.ts

@@ -7,10 +7,23 @@ import { AssetType, TokenStandard } from '../../types/token';
 import { renderHookWithProvider } from '../../../../../util/test/renderWithProvider';
 import { getAvailableTokens } from '../../utils/transaction-pay';
 import { useTransactionMetadataRequest } from '../transactions/useTransactionMetadataRequest';
+import {
+  selectMetaMaskPayTokensFlags,
+  MetaMaskPayTokensFlags,
+} from '../../../../../selectors/featureFlagController/confirmations';
 
 jest.mock('../send/useAccountTokens');
-jest.mock('../../utils/transaction-pay');
+jest.mock('../../utils/transaction-pay', () => ({
+  ...jest.requireActual('../../utils/transaction-pay'),
+  getAvailableTokens: jest.fn(),
+}));
 jest.mock('../transactions/useTransactionMetadataRequest');
+jest.mock(
+  '../../../../../selectors/featureFlagController/confirmations',
+  () => ({
+    selectMetaMaskPayTokensFlags: jest.fn(),
+  }),
+);
 
 const TOKEN_MOCK = {
   accountType: EthAccountType.Eoa,
@@ -30,12 +43,26 @@ describe('useTransactionPayAvailableTokens', () => {
     useTransactionMetadataRequest,
   );
 
+  const selectMetaMaskPayTokensFlagsMock = jest.mocked(
+    selectMetaMaskPayTokensFlags,
+  );
+
+  const defaultPayTokensFlags: MetaMaskPayTokensFlags = {
+    preferredTokens: { default: [], overrides: {} },
+    blockedTokens: {
+      default: { chainIds: [], tokens: [] },
+      overrides: {},
+    },
+    minimumRequiredTokenBalance: 0,
+  };
+
   beforeEach(() => {
     jest.resetAllMocks();
 
     useAccountTokensMock.mockReturnValue([]);
     useTransactionMetadataRequestMock.mockReturnValue(undefined);
     jest.mocked(getAvailableTokens).mockReturnValue([TOKEN_MOCK]);
+    selectMetaMaskPayTokensFlagsMock.mockReturnValue(defaultPayTokensFlags);
   });
 
   it('returns available tokens and hasTokens true when tokens exist', () => {
@@ -61,4 +88,56 @@ describe('useTransactionPayAvailableTokens', () => {
     expect(result.current.availableTokens).toEqual([]);
     expect(result.current.hasTokens).toBe(true);
   });
+
+  it('passes resolved blocklist to getAvailableTokens', () => {
+    const blockedList = {
+      chainIds: ['0xa4b1'],
+      tokens: [{ address: '0xabc', chainId: '0x1' }],
+    };
+
+    selectMetaMaskPayTokensFlagsMock.mockReturnValue({
+      ...defaultPayTokensFlags,
+      blockedTokens: {
+        default: { chainIds: [], tokens: [] },
+        overrides: {
+          perpsDeposit: blockedList,
+        },
+      },
+    });
+
+    useTransactionMetadataRequestMock.mockReturnValue({
+      type: TransactionType.perpsDeposit,
+    } as ReturnType<typeof useTransactionMetadataRequest>);
+
+    renderHookWithProvider(useTransactionPayAvailableTokens);
+
+    expect(getAvailableTokens).toHaveBeenCalledWith(
+      expect.objectContaining({
+        blockedTokens: blockedList,
+      }),
+    );
+  });
+
+  it('passes default blocklist when transaction type has no override', () => {
+    const defaultBlocked = {
+      chainIds: ['0x1'],
+      tokens: [],
+    };
+
+    selectMetaMaskPayTokensFlagsMock.mockReturnValue({
+      ...defaultPayTokensFlags,
+      blockedTokens: {
+        default: defaultBlocked,
+        overrides: {},
+      },
+    });
+
+    renderHookWithProvider(useTransactionPayAvailableTokens);
+
+    expect(getAvailableTokens).toHaveBeenCalledWith(
+      expect.objectContaining({
+        blockedTokens: defaultBlocked,
+      }),
+    );
+  });
 });

app/components/Views/confirmations/hooks/pay/useTransactionPayAvailableTokens.ts

@@ -1,20 +1,24 @@
 import { useMemo } from 'react';
+
 import { useAccountTokens } from '../send/useAccountTokens';
 import { getAvailableTokens } from '../../utils/transaction-pay';
 import { useTransactionMetadataRequest } from '../transactions/useTransactionMetadataRequest';
 import { isTransactionPayWithdraw } from '../../utils/transaction';
+import { useTransactionPayBlockedTokens } from './useTransactionPayBlockedTokens';
 
 export function useTransactionPayAvailableTokens() {
   const tokens = useAccountTokens({ includeNoBalance: true });
   const transactionMeta = useTransactionMetadataRequest();
   const isPostQuote = isTransactionPayWithdraw(transactionMeta);
+  const blockedTokens = useTransactionPayBlockedTokens();
 
   const availableTokens = useMemo(
     () =>
       getAvailableTokens({
         tokens,
+        blockedTokens,
       }),
-    [tokens],
+    [tokens, blockedTokens],
   );
 
   // For post-quote transactions, tokens are always available

app/components/Views/confirmations/hooks/pay/useTransactionPayBlockedTokens.ts

@@ -0,0 +1,19 @@
+import { useMemo } from 'react';
+import { useSelector } from 'react-redux';
+import { selectMetaMaskPayTokensFlags } from '../../../../../selectors/featureFlagController/confirmations';
+import { getBlockedTokensForTransactionType } from '../../utils/transaction-pay';
+import { useTransactionMetadataRequest } from '../transactions/useTransactionMetadataRequest';
+
+export function useTransactionPayBlockedTokens() {
+  const transactionMeta = useTransactionMetadataRequest();
+  const payTokensFlags = useSelector(selectMetaMaskPayTokensFlags);
+
+  return useMemo(
+    () =>
+      getBlockedTokensForTransactionType(
+        payTokensFlags.blockedTokens,
+        transactionMeta?.type,
+      ),
+    [payTokensFlags.blockedTokens, transactionMeta?.type],
+  );
+}