feat: metamask pay with send picker (#22363)

## **Description**

Use asset picker from send flow in MetaMask Pay.

Also display disabled entries in token list, including associated
message.

## **Changelog**

CHANGELOG entry: null

## **Related issues**

Fixes:
[#6174](MetaMask/MetaMask-planning#6174)

## **Manual testing steps**

## **Screenshots/Recordings**

### **Before**

### **After**

<img width="300" alt="Asset Picker"
src="https://github.com/user-attachments/assets/dffb1e98-32c5-43f7-afd7-8bfadbff07e6"
/>

## **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]
> Replaces the Pay With modal’s token selector with the Send flow’s
Asset picker, adds disabled-token handling/no-gas messaging, drops the
network selector modal, and updates hooks/types/tests accordingly.
> 
> - **UI/UX**:
> - **PayWithModal**: Refactored to BottomSheet using `send/asset`
picker; filters to EVM `ERC20` tokens, shows zero-balance tokens if
required/selected, and disables tokens lacking native gas with
`pay_with_modal.no_gas` message.
> - **Token**: Supports `disabled` state (press disabled, opacity) and
optional `disabledMessage` display.
> - **Asset/TokenList**: New props `hideNfts`, `includeNoBalance`,
`onTokenSelect`, `tokenFilter`; adaptive search placeholder; NFT section
hidden when `hideNfts`.
> - **Navigation**:
> - Removed `Routes.CONFIRMATION_PAY_WITH_NETWORK_MODAL` screen and
references.
> - **Data/Hooks/Types**:
> - `useAccountTokens` accepts `{ includeNoBalance }` to optionally
include zero-balance assets.
>   - Added `disabled`/`disabledMessage` to `AssetType`.
>   - Removed `useTransactionPayAvailableTokens` hook and its tests.
> - **Localization**:
>   - Added strings: `send.search_tokens`, `pay_with_modal.no_gas`.
> - **Tests**:
> - Added/updated tests for PayWithModal filtering/selection, token
disabled behavior, Asset/TokenList props and behavior; removed obsolete
network modal and available-tokens tests.
> 
> <sup>Written by [Cursor
Bugbot](https://cursor.com/dashboard?tab=bugbot) for commit
c264c90. This will update automatically
on new commits. Configure
[here](https://cursor.com/dashboard?tab=bugbot).</sup>
<!-- /CURSOR_SUMMARY -->

Author: matthewwalsh0

app/components/Nav/App/App.tsx

@@ -148,7 +148,6 @@ import { Duration } from '@metamask/utils';
 import { selectSeedlessOnboardingLoginFlow } from '../../../selectors/seedlessOnboardingController';
 import { SmartAccountUpdateModal } from '../../Views/confirmations/components/smart-account-update-modal';
 import { PayWithModal } from '../../Views/confirmations/components/modals/pay-with-modal/pay-with-modal';
-import { PayWithNetworkModal } from '../../Views/confirmations/components/modals/pay-with-network-modal/pay-with-network-modal';
 import { useMetrics } from '../../hooks/useMetrics';
 import { State2AccountConnectWrapper } from '../../Views/MultichainAccounts/MultichainAccountConnect/State2AccountConnectWrapper';
 import { SmartAccountModal } from '../../Views/MultichainAccounts/AccountDetails/components/SmartAccountModal/SmartAccountModal';
@@ -1052,10 +1051,6 @@ const AppFlow = () => {
           name={Routes.CONFIRMATION_PAY_WITH_MODAL}
           component={PayWithModal}
         />
-        <Stack.Screen
-          name={Routes.CONFIRMATION_PAY_WITH_NETWORK_MODAL}
-          component={PayWithNetworkModal}
-        />
       </Stack.Navigator>
     </>
   );

app/components/Views/confirmations/components/UI/token/token.test.tsx

@@ -4,6 +4,7 @@ import { BtcAccountType } from '@metamask/keyring-api';
 import renderWithProvider from '../../../../../../util/test/renderWithProvider';
 import { AssetType } from '../../../types/token';
 import { Token } from './token';
+import { act, fireEvent } from '@testing-library/react-native';
 
 describe('Token', () => {
   const createMockToken = (overrides: Partial<AssetType> = {}): AssetType => ({
@@ -129,4 +130,48 @@ describe('Token', () => {
 
     expect(getByText('Native SegWit')).toBeOnTheScreen();
   });
+
+  it('renders disabled message when token is disabled', () => {
+    const mockToken = createMockToken({
+      disabled: true,
+      disabledMessage: 'Disabled Test',
+    });
+
+    const { getByText } = renderWithProvider(
+      <Token asset={mockToken} onPress={mockOnPress} />,
+    );
+
+    expect(getByText('Disabled Test')).toBeOnTheScreen();
+  });
+
+  it('calls onPress when token is pressed', async () => {
+    const mockToken = createMockToken();
+
+    const { getByText } = renderWithProvider(
+      <Token asset={mockToken} onPress={mockOnPress} />,
+    );
+
+    await act(() => {
+      fireEvent.press(getByText('ETH'));
+    });
+
+    expect(mockOnPress).toHaveBeenCalledTimes(1);
+    expect(mockOnPress).toHaveBeenCalledWith(mockToken);
+  });
+
+  it('does not call onPress when token is disabled and pressed', async () => {
+    const mockToken = createMockToken({
+      disabled: true,
+    });
+
+    const { getByText } = renderWithProvider(
+      <Token asset={mockToken} onPress={mockOnPress} />,
+    );
+
+    await act(() => {
+      fireEvent.press(getByText('ETH'));
+    });
+
+    expect(mockOnPress).not.toHaveBeenCalled();
+  });
 });

app/components/Views/confirmations/components/UI/token/token.tsx

@@ -41,10 +41,12 @@ export function Token({ asset, onPress }: TokenProps) {
 
   return (
     <Pressable
+      disabled={asset.disabled}
       style={({ pressed }) =>
         tw.style(
           'w-full flex-row items-center justify-between py-2 max-w-full',
           pressed || asset.isSelected ? 'bg-pressed' : 'bg-transparent',
+          asset.disabled && 'opacity-50',
         )
       }
       onPress={handlePress}
@@ -98,7 +100,9 @@ export function Token({ asset, onPress }: TokenProps) {
             color={TextColor.TextAlternative}
             numberOfLines={1}
           >
-            {asset.symbol}
+            {!asset.disabled || !asset.disabledMessage
+              ? asset.symbol
+              : asset.disabledMessage}
           </Text>
         </Box>
       </Box>