MetaMask · vinistevam · May 8, 2026 · May 8, 2026 · May 8, 2026 · May 8, 2026
@@ -46,6 +46,7 @@ import { useIsPerpsBalanceSelected } from '../../hooks/useIsPerpsBalanceSelected
 import { usePerpsEventTracking } from '../../hooks/usePerpsEventTracking';
 import { Hex } from '@metamask/utils';
 import { MetaMetricsEvents } from '../../../../../core/Analytics/MetaMetrics.events';
+import { isPayWithBottomSheetEnabled } from '../../../../Views/confirmations/utils/transaction-pay';
 
 const tokenIconStyles = StyleSheet.create({
   iconSmall: {
@@ -122,6 +123,10 @@ export const PerpsPayRow = ({
       [PERPS_EVENT_PROPERTY.INTERACTION_TYPE]:
         PERPS_EVENT_VALUE.INTERACTION_TYPE.PAYMENT_TOKEN_SELECTOR,
     });
+    if (isPayWithBottomSheetEnabled()) {
+      navigation.navigate(Routes.CONFIRMATION_PAY_WITH_BOTTOM_SHEET);
+      return;
+    }
     navigation.navigate(Routes.CONFIRMATION_PAY_WITH_MODAL);
   }, [canEdit, navigation, setConfirmationMetric, track]);
 

@@ -16,6 +16,7 @@ import { useNavigation } from '@react-navigation/native';
 import useApprovalRequest from '../../../Views/confirmations/hooks/useApprovalRequest';
 import { selectPerpsAccountState } from '../selectors/perpsController';
 import { selectPerpsPayWithAnyTokenAllowlistAssets } from '../selectors/featureFlags';
+import { isPayWithBottomSheetEnabled } from '../../../Views/confirmations/utils/transaction-pay';
 
 jest.mock('../../../../../locales/i18n', () => ({
   strings: jest.fn((key: string) => key),
@@ -42,6 +43,10 @@ jest.mock('images/perps-pay-token-icon.png', () => ({
   uri: 'perps-pay-token-icon-uri',
 }));
 
+jest.mock('../../../Views/confirmations/utils/transaction-pay', () => ({
+  ...jest.requireActual('../../../Views/confirmations/utils/transaction-pay'),
+  isPayWithBottomSheetEnabled: jest.fn(() => false),
+}));
 jest.mock('../../../UI/SimulationDetails/FiatDisplay/useFiatFormatter', () =>
   jest.fn(
     () => (value: { toNumber: () => number }) =>
@@ -70,6 +75,10 @@ const mockUseNavigation = useNavigation as jest.MockedFunction<
 const mockUseApprovalRequest = useApprovalRequest as jest.MockedFunction<
   typeof useApprovalRequest
 >;
+const mockIsPayWithBottomSheetEnabled =
+  isPayWithBottomSheetEnabled as jest.MockedFunction<
+    typeof isPayWithBottomSheetEnabled
+  >;
 
 describe('usePerpsBalanceTokenFilter', () => {
   const chainId = '0xa4b1';
@@ -80,6 +89,7 @@ describe('usePerpsBalanceTokenFilter', () => {
 
   beforeEach(() => {
     jest.clearAllMocks();
+    mockIsPayWithBottomSheetEnabled.mockReturnValue(false);
     mockUseTransactionMetadataRequest.mockReturnValue(undefined);
     mockUseIsPerpsBalanceSelected.mockReturnValue(false);
     mockUseSelector.mockImplementation(
@@ -401,5 +411,62 @@ describe('usePerpsBalanceTokenFilter', () => {
         expect(mockOnPerpsPaymentTokenChange).toHaveBeenCalledWith(null);
       }
     });
+
+    it('omits the synthetic perps balance row when the new Pay With bottom sheet is enabled', () => {
+      mockIsPayWithBottomSheetEnabled.mockReturnValue(true);
+      const inputTokens: AssetType[] = [
+        {
+          address: '0xabc',
+          chainId,
+          symbol: 'USDC',
+          name: 'USD Coin',
+          balance: '100',
+        } as AssetType,
+      ];
+
+      const { result } = renderHook(() => usePerpsBalanceTokenFilter());
+      const output = result.current(inputTokens);
+
+      expect(output).toHaveLength(1);
+      expect(isHighlightedItemOutsideAssetList(output[0])).toBe(false);
+      expect((output[0] as AssetType).address).toBe('0xabc');
+    });
+
+    it('still applies the allowlist filter when the new Pay With bottom sheet is enabled', () => {
+      mockIsPayWithBottomSheetEnabled.mockReturnValue(true);
+      const allowlistKey = `${chainId}.0xusdc`.toLowerCase();
+      mockUseSelector.mockImplementation(
+        (selector: (state: unknown) => unknown) => {
+          if (selector === selectPerpsAccountState)
+            return { spendableBalance: '100.00' };
+          if (selector === selectPerpsPayWithAnyTokenAllowlistAssets)
+            return [allowlistKey];
+          return [];
+        },
+      );
+      const inputTokens: AssetType[] = [
+        {
+          address: '0xusdc',
+          chainId,
+          symbol: 'USDC',
+          name: 'USD Coin',
+          balance: '500',
+        } as AssetType,
+        {
+          address: '0xother',
+          chainId,
+          symbol: 'OTHER',
+          name: 'Other',
+          balance: '100',
+        } as AssetType,
+      ];
+
+      const { result } = renderHook(() => usePerpsBalanceTokenFilter());
+      const output = result.current(inputTokens);
+
+      expect(output).toHaveLength(1);
+      expect(isHighlightedItemOutsideAssetList(output[0])).toBe(false);
+      expect((output[0] as AssetType).address).toBe('0xusdc');
+    });
   });
 });
@@ -12,6 +12,7 @@ import {
   HighlightedItem,
   type TokenListItem,
 } from '../../../Views/confirmations/types/token';
+import { isPayWithBottomSheetEnabled } from '../../../Views/confirmations/utils/transaction-pay';
 import { hasTransactionType } from '../../../Views/confirmations/utils/transaction';
 import { selectPerpsPayWithAnyTokenAllowlistAssets } from '../selectors/featureFlags';
 import { selectPerpsAccountState } from '../selectors/perpsController';
@@ -108,6 +109,10 @@ export function usePerpsBalanceTokenFilter(): (
         return mappedTokens;
       }
 
+      if (isPayWithBottomSheetEnabled()) {
+        return mappedTokens;
+      }
+
       const highlightedAction: HighlightedItem = {
         position: 'outside_of_asset_list',
         icon: PERPS_BALANCE_ICON_URI,

@@ -5,15 +5,20 @@ import { useTransactionPayToken } from '../../../Views/confirmations/hooks/pay/u
 import Engine from '../../../../core/Engine';
 import { parsePayWithToken } from '../utils/parsePayWithToken';
 
+export type PerpsPaymentTokenInput =
+  | AssetType
+  | { address: string; chainId: string }
+  | null;
+
 export interface UsePerpsPaymentTokenResult {
-  onPaymentTokenChange: (token: AssetType | null) => void;
+  onPaymentTokenChange: (token: PerpsPaymentTokenInput) => void;
 }
 
 export function usePerpsPaymentToken(): UsePerpsPaymentTokenResult {
   const { setPayToken } = useTransactionPayToken();
 
   const onPaymentTokenChange = useCallback(
-    (token: AssetType | null) => {
+    (token: PerpsPaymentTokenInput) => {
       const parsed =
         token === null || token === undefined ? null : parsePayWithToken(token);
 

@@ -43,6 +43,7 @@ import { HIP3DebugView } from '../Debug';
 import PerpsCrossMarginWarningBottomSheet from '../components/PerpsCrossMarginWarningBottomSheet';
 import PerpsSelectProviderView from '../Views/PerpsSelectProviderView';
 import { PayWithModal } from '../../../Views/confirmations/components/modals/pay-with-modal/pay-with-modal';
+import { PayWithBottomSheet } from '../../../Views/confirmations/components/modals/pay-with-bottom-sheet/pay-with-bottom-sheet';
 import { RouteProp, useNavigation, useRoute } from '@react-navigation/native';
 /* eslint-disable-next-line */
 import { NavigationContext } from '@react-navigation/core';
@@ -441,6 +442,14 @@ const PerpsScreenStack = () => {
               ...transparentModalScreenOptions,
             }}
           />
+          <Stack.Screen
+            name={Routes.CONFIRMATION_PAY_WITH_BOTTOM_SHEET}
+            component={PayWithBottomSheet}
+            options={{
+              headerShown: false,
+              ...transparentModalScreenOptions,
+            }}
+          />
 
           {/* Order redirect screen - handles one-click trade from token details */}
           <Stack.Screen

@@ -1,6 +1,8 @@
 import React, { useCallback, useMemo, useRef } from 'react';
 import { Hex } from '@metamask/utils';
+import { StackActions, useNavigation } from '@react-navigation/native';
 import Engine from '../../../../../../core/Engine';
+import { useParams } from '../../../../../../util/navigation/navUtils';
 import { useTransactionPayToken } from '../../../hooks/pay/useTransactionPayToken';
 import { useTransactionPayWithdraw } from '../../../hooks/pay/useTransactionPayWithdraw';
 import { useWithdrawTokenFilter } from '../../../hooks/pay/useWithdrawTokenFilter';
@@ -40,7 +42,22 @@ import { usePerpsPaymentToken } from '../../../../../UI/Perps/hooks/usePerpsPaym
 import { usePredictBalanceTokenFilter } from '../../../../../UI/Predict/hooks/usePredictBalanceTokenFilter';
 import { usePredictPaymentToken } from '../../../../../UI/Predict/hooks/usePredictPaymentToken';
 
+interface PayWithModalParams {
+  /**
+   * When > 1, PayWithModal owns navigation on close by dispatching
+   * `StackActions.pop(N)` atomically instead of relying on the legacy
+   * `BottomSheet`'s built-in `navigation.goBack()`. Set to 2 by the new Pay
+   * With bottom sheet's "Other assets" launcher so picking a token pops both
+   * this modal AND the bottom sheet underneath in a single navigator
+   * dispatch — avoids the Android view-hierarchy race that crashes with
+   * `IllegalStateException` on two adjacent pops.
+   */
+  dismissOnSelectCount?: number;
+}
+
 export function PayWithModal() {
+  const navigation = useNavigation();
+  const { dismissOnSelectCount = 1 } = useParams<PayWithModalParams>({});
   const transactionMeta = useTransactionMetadataRequest();
   const hideNetworkFilter = hasTransactionType(
     transactionMeta,
@@ -114,6 +131,10 @@ export function PayWithModal() {
   const handleTokenSelect = useCallback(
     (token: AssetType) => {
       const onClosed = async () => {
+        if (dismissOnSelectCount > 1) {
+          navigation.dispatch(StackActions.pop(dismissOnSelectCount));
+        }
+
         if (
           hasTransactionType(transactionMeta, [TransactionType.musdConversion])
         ) {
@@ -171,8 +192,10 @@ export function PayWithModal() {
     },
     [
       close,
+      dismissOnSelectCount,
       isPredictContext,
       isWithdraw,
+      navigation,
       onMusdPaymentTokenChange,
       onPerpsPaymentTokenChange,
       onPredictPaymentTokenChange,
@@ -245,6 +268,7 @@ export function PayWithModal() {
       isFullscreen
       ref={bottomSheetRef}
       keyboardAvoidingViewEnabled={false}
+      shouldNavigateBack={dismissOnSelectCount <= 1}
     >
       <HeaderCompactStandard
         title={modalTitle}

@@ -1,2 +1,3 @@
 export { usePayWithCryptoSection } from './usePayWithCryptoSection';
 export { usePayWithFiatSection } from './usePayWithFiatSection';
+export { usePayWithPerpsSection } from './usePayWithPerpsSection';