MetaMask
diff --git a/‎app/components/Views/confirmations/components/UI/payment-method-row/payment-method-row.test.tsx‎
Lines changed: 10 additions & 0 deletions b/‎app/components/Views/confirmations/components/UI/payment-method-row/payment-method-row.test.tsx‎
Lines changed: 10 additions & 0 deletions
diff --git a/‎app/components/Views/confirmations/components/UI/payment-method-row/payment-method-row.tsx‎
Lines changed: 6 additions & 3 deletions b/‎app/components/Views/confirmations/components/UI/payment-method-row/payment-method-row.tsx‎
Lines changed: 6 additions & 3 deletions
diff --git a/‎app/components/Views/confirmations/components/rows/pay-with-row/pay-with-row.tsx‎
Lines changed: 3 additions & 10 deletions b/‎app/components/Views/confirmations/components/rows/pay-with-row/pay-with-row.tsx‎
Lines changed: 3 additions & 10 deletions
diff --git a/‎app/components/Views/confirmations/hooks/pay/sections/usePayWithCryptoSection.test.tsx‎
Lines changed: 83 additions & 0 deletions b/‎app/components/Views/confirmations/hooks/pay/sections/usePayWithCryptoSection.test.tsx‎
Lines changed: 83 additions & 0 deletions
diff --git a/‎app/components/Views/confirmations/hooks/pay/sections/usePayWithCryptoSection.ts‎
Lines changed: 8 additions & 0 deletions b/‎app/components/Views/confirmations/hooks/pay/sections/usePayWithCryptoSection.ts‎
Lines changed: 8 additions & 0 deletions
diff --git a/‎app/components/Views/confirmations/hooks/pay/useLastUsedPaymentMethod.test.ts‎
Lines changed: 133 additions & 0 deletions b/‎app/components/Views/confirmations/hooks/pay/useLastUsedPaymentMethod.test.ts‎
Lines changed: 133 additions & 0 deletions
@@ -44,6 +44,16 @@ describe('PaymentMethodRow', () => {
     ).toBeOnTheScreen();
   });
 
+  it('renders the Last used label inside the tag with the localised string', () => {
+    const { getByTestId } = render(
+      <PaymentMethodRow {...baseProps} isLastUsed />,
+    );
+
+    expect(
+      getByTestId('payment-method-row-usdc-last-used-tag'),
+    ).toHaveTextContent('confirm.pay_with_bottom_sheet.last_used');
+  });
+
   it('does not render Last used tag when isLastUsed is false', () => {
     const { queryByTestId } = render(<PaymentMethodRow {...baseProps} />);
 
 
@@ -10,12 +10,13 @@ import {
   IconColor,
   IconName,
   IconSize,
+  Tag,
+  TagSeverity,
   Text,
   TextColor,
   TextVariant,
 } from '@metamask/design-system-react-native';
 import { useTailwind } from '@metamask/design-system-twrnc-preset';
-import Tag from '../../../../../../component-library/components/Tags/Tag';
 import { strings } from '../../../../../../../locales/i18n';
 import { PayWithRowConfig } from '../../modals/pay-with-bottom-sheet/pay-with-bottom-sheet.types';
 
@@ -96,9 +97,11 @@ const PaymentMethodRow = ({
           </Text>
           {isLastUsed ? (
             <Tag
-              label={strings('confirm.pay_with_bottom_sheet.last_used')}
+              severity={TagSeverity.Info}
               testID={`${resolvedTestID}-last-used-tag`}
-            />
+            >
+              {strings('confirm.pay_with_bottom_sheet.last_used')}
+            </Tag>
           ) : null}
         </Box>
         {subtitle ? (
 
@@ -44,6 +44,7 @@ import { useParams } from '../../../../../../util/navigation/navUtils';
 import { SetPayTokenRequest } from '../../../hooks/pay/useAutomaticTransactionPayToken';
 import { useConfirmationContext } from '../../../context/confirmation-context';
 import { useTheme } from '../../../../../../util/theme';
+import { isPayWithBottomSheetEnabled } from '../../../utils/transaction-pay';
 
 interface PayWithRouteParams {
   preferredPaymentToken?: SetPayTokenRequest;
@@ -60,8 +61,6 @@ export function PayWithRow() {
   const { styles } = useStyles(styleSheet, {});
   const { setConfirmationMetric } = useConfirmationMetricEvents();
   const { preferredPaymentToken } = useParams<PayWithRouteParams>({});
-  const isPayWithBottomSheetEnabled =
-    process.env.MM_DEV_PAY_WITH_BOTTOM_SHEET === 'true';
 
   const {
     txParams: { from },
@@ -79,21 +78,15 @@ export function PayWithRow() {
         mm_pay_token_list_opened: true,
       },
     });
-    if (isPayWithBottomSheetEnabled) {
+    if (isPayWithBottomSheetEnabled()) {
       navigation.navigate(Routes.CONFIRMATION_PAY_WITH_BOTTOM_SHEET, {
         preferredPaymentToken,
       });
       return;
     }
 
     navigation.navigate(Routes.CONFIRMATION_PAY_WITH_MODAL);
-  }, [
-    isDisabled,
-    isPayWithBottomSheetEnabled,
-    navigation,
-    preferredPaymentToken,
-    setConfirmationMetric,
-  ]);
+  }, [isDisabled, navigation, preferredPaymentToken, setConfirmationMetric]);
 
   const label = isWithdraw
     ? strings('confirm.label.receive_as')
 
@@ -9,6 +9,7 @@ import useFiatFormatter from '../../../../../UI/SimulationDetails/FiatDisplay/us
 import { TokenIcon, TokenIconVariant } from '../../../components/token-icon';
 import { MUSD_TOKEN_ADDRESS } from '../../../../../UI/Earn/constants/musd';
 import { useTransactionMetadataRequest } from '../../transactions/useTransactionMetadataRequest';
+import { useLastUsedPaymentMethod } from '../useLastUsedPaymentMethod';
 import { usePayWithPreferredToken } from '../usePayWithPreferredToken';
 import { usePayWithSelectedToken } from '../usePayWithSelectedToken';
 import { usePayWithCryptoSection } from './usePayWithCryptoSection';
@@ -34,6 +35,7 @@ jest.mock('../../../../../../../locales/i18n', () => ({
 jest.mock('../../../../../../util/navigation/navUtils');
 jest.mock('../../../../../UI/SimulationDetails/FiatDisplay/useFiatFormatter');
 jest.mock('../../transactions/useTransactionMetadataRequest');
+jest.mock('../useLastUsedPaymentMethod');
 jest.mock('../usePayWithPreferredToken');
 jest.mock('../usePayWithSelectedToken');
 
@@ -64,9 +66,11 @@ describe('usePayWithCryptoSection', () => {
   );
   const usePayWithPreferredTokenMock = jest.mocked(usePayWithPreferredToken);
   const usePayWithSelectedTokenMock = jest.mocked(usePayWithSelectedToken);
+  const useLastUsedPaymentMethodMock = jest.mocked(useLastUsedPaymentMethod);
   const navigateMock = jest.fn();
   const goBackMock = jest.fn();
   const selectTokenMock = jest.fn();
+  const isLastUsedMock = jest.fn().mockReturnValue(false);
 
   beforeEach(() => {
     jest.resetAllMocks();
@@ -93,6 +97,11 @@ describe('usePayWithCryptoSection', () => {
       },
       selectToken: selectTokenMock,
     });
+    isLastUsedMock.mockReturnValue(false);
+    useLastUsedPaymentMethodMock.mockReturnValue({
+      lastUsedToken: undefined,
+      isLastUsed: isLastUsedMock,
+    });
   });
 
   it('passes route preferred payment token params to both pay-with hooks', () => {
@@ -430,4 +439,78 @@ describe('usePayWithCryptoSection', () => {
       Routes.CONFIRMATION_PAY_WITH_MODAL,
     );
   });
+
+  it('marks the preferred row as last used when the last-used token matches it', () => {
+    isLastUsedMock.mockImplementation(
+      (address, chainId) =>
+        address === TOKEN_MOCK.address && chainId === TOKEN_MOCK.chainId,
+    );
+
+    const { result } = renderHook(() => usePayWithCryptoSection());
+
+    expect(result.current?.rows[0]).toEqual(
+      expect.objectContaining({
+        id: 'crypto-preferred-token',
+        isLastUsed: true,
+      }),
+    );
+  });
+
+  it('does not mark any row as last used when the last-used token does not match', () => {
+    isLastUsedMock.mockReturnValue(false);
+
+    const { result } = renderHook(() => usePayWithCryptoSection());
+
+    for (const row of result.current?.rows ?? []) {
+      expect(row.isLastUsed ?? false).toBe(false);
+    }
+  });
+
+  it('marks the user-selected row as last used when the last-used token matches the selected token', () => {
+    const distinctSelectedToken = {
+      ...TOKEN_MOCK,
+      address: SELECTED_TOKEN_MOCK.address,
+      symbol: SELECTED_TOKEN_MOCK.symbol,
+      balanceUsd: SELECTED_TOKEN_MOCK.balanceUsd,
+    };
+    usePayWithPreferredTokenMock.mockReturnValue({
+      hasTokens: true,
+      preferredToken: TOKEN_MOCK,
+      selectedToken: distinctSelectedToken,
+    });
+    usePayWithSelectedTokenMock.mockReturnValue({
+      isSelectedDistinctFromAutomatic: true,
+      selectedToken: SELECTED_TOKEN_MOCK,
+      selectToken: selectTokenMock,
+    });
+    isLastUsedMock.mockImplementation(
+      (address, chainId) =>
+        address === SELECTED_TOKEN_MOCK.address &&
+        chainId === SELECTED_TOKEN_MOCK.chainId,
+    );
+
+    const { result } = renderHook(() => usePayWithCryptoSection());
+
+    const preferredRow = result.current?.rows.find(
+      (row) => row.id === 'crypto-preferred-token',
+    );
+    const selectedRow = result.current?.rows.find(
+      (row) => row.id === 'crypto-selected-token',
+    );
+
+    expect(preferredRow?.isLastUsed ?? false).toBe(false);
+    expect(selectedRow).toEqual(expect.objectContaining({ isLastUsed: true }));
+  });
+
+  it('never marks the other-assets row as last used', () => {
+    isLastUsedMock.mockReturnValue(true);
+
+    const { result } = renderHook(() => usePayWithCryptoSection());
+
+    const otherAssetsRow = result.current?.rows.find(
+      (row) => row.id === 'crypto-other-assets',
+    );
+
+    expect(otherAssetsRow?.isLastUsed ?? false).toBe(false);
+  });
 });
@@ -21,6 +21,7 @@ import {
   resolvePreferredPayToken,
 } from '../../../utils/transaction-pay';
 import { SetPayTokenRequest } from '../useAutomaticTransactionPayToken';
+import { useLastUsedPaymentMethod } from '../useLastUsedPaymentMethod';
 import { usePayWithPreferredToken } from '../usePayWithPreferredToken';
 import { usePayWithSelectedToken } from '../usePayWithSelectedToken';
 import { useTransactionMetadataRequest } from '../../transactions/useTransactionMetadataRequest';
@@ -60,6 +61,7 @@ export function usePayWithCryptoSection(): PayWithSectionConfig | null {
     selectedToken: selectedTokenDisplay,
     selectToken,
   } = usePayWithSelectedToken({ preferredToken: resolvedPreferredToken });
+  const { isLastUsed } = useLastUsedPaymentMethod();
 
   const handleOtherAssetsPress = useCallback(() => {
     navigation.navigate(Routes.CONFIRMATION_PAY_WITH_MODAL);
@@ -111,6 +113,7 @@ export function usePayWithCryptoSection(): PayWithSectionConfig | null {
           balance: preferredTokenBalance,
         }),
         isSelected: isPreferredTokenSelected,
+        isLastUsed: isLastUsed(preferredToken.address, preferredToken.chainId),
         trailingElement: isPreferredTokenSelected ? 'checkmark' : 'none',
         onPress: handlePreferredTokenPress,
         testID: PAY_WITH_CRYPTO_PREFERRED_TOKEN_ROW_TEST_ID,
@@ -130,6 +133,10 @@ export function usePayWithCryptoSection(): PayWithSectionConfig | null {
           balance: selectedTokenBalance,
         }),
         isSelected: true,
+        isLastUsed: isLastUsed(
+          selectedTokenDisplay.address,
+          selectedTokenDisplay.chainId,
+        ),
         trailingElement: 'checkmark',
         testID: PAY_WITH_CRYPTO_SELECTED_TOKEN_ROW_TEST_ID,
       });
@@ -161,6 +168,7 @@ export function usePayWithCryptoSection(): PayWithSectionConfig | null {
     handleOtherAssetsPress,
     handlePreferredTokenPress,
     hasTokens,
+    isLastUsed,
     isSelectedDistinctFromAutomatic,
     preferredToken,
     preferredTokenBalance,
 
@@ -0,0 +1,133 @@
+import { renderHook } from '@testing-library/react-hooks';
+import { TransactionType } from '@metamask/transaction-controller';
+import { Hex } from '@metamask/utils';
+import { useSelector } from 'react-redux';
+import { selectLastUsedPaymentMethod } from '../../../../../selectors/transactionController';
+import { useTransactionMetadataRequest } from '../transactions/useTransactionMetadataRequest';
+import { useLastUsedPaymentMethod } from './useLastUsedPaymentMethod';
+
+jest.mock('react-redux', () => ({
+  useSelector: jest.fn(),
+}));
+jest.mock('../transactions/useTransactionMetadataRequest');
+jest.mock('../../../../../selectors/transactionController', () => ({
+  selectLastUsedPaymentMethod: jest.fn(),
+}));
+
+const TOKEN_ADDRESS_MOCK = '0x1234567890abcdef1234567890abcdef12345678' as Hex;
+const CHAIN_ID_MOCK = '0x1' as Hex;
+const OTHER_TOKEN_ADDRESS_MOCK =
+  '0xabcdefabcdefabcdefabcdefabcdefabcdefabcd' as Hex;
+const OTHER_CHAIN_ID_MOCK = '0x89' as Hex;
+
+describe('useLastUsedPaymentMethod', () => {
+  const useSelectorMock = jest.mocked(useSelector);
+  const useTransactionMetadataRequestMock = jest.mocked(
+    useTransactionMetadataRequest,
+  );
+
+  beforeEach(() => {
+    jest.resetAllMocks();
+
+    useTransactionMetadataRequestMock.mockReturnValue({
+      id: 'tx-1',
+      type: TransactionType.perpsDeposit,
+      txParams: {},
+    } as never);
+
+    useSelectorMock.mockReturnValue({
+      address: TOKEN_ADDRESS_MOCK,
+      chainId: CHAIN_ID_MOCK,
+    });
+  });
+
+  it('returns the last used token from the selector keyed by transaction type', () => {
+    const { result } = renderHook(() => useLastUsedPaymentMethod());
+
+    expect(result.current.lastUsedToken).toStrictEqual({
+      address: TOKEN_ADDRESS_MOCK,
+      chainId: CHAIN_ID_MOCK,
+    });
+  });
+
+  it('returns undefined when no last used token exists', () => {
+    useSelectorMock.mockReturnValue(undefined);
+
+    const { result } = renderHook(() => useLastUsedPaymentMethod());
+
+    expect(result.current.lastUsedToken).toBeUndefined();
+  });
+
+  it('isLastUsed returns true when address and chainId match the last used token (case-insensitive)', () => {
+    const { result } = renderHook(() => useLastUsedPaymentMethod());
+
+    expect(
+      result.current.isLastUsed(
+        TOKEN_ADDRESS_MOCK.toUpperCase() as Hex,
+        CHAIN_ID_MOCK,
+      ),
+    ).toBe(true);
+  });
+
+  it('isLastUsed returns false when address does not match', () => {
+    const { result } = renderHook(() => useLastUsedPaymentMethod());
+
+    expect(
+      result.current.isLastUsed(OTHER_TOKEN_ADDRESS_MOCK, CHAIN_ID_MOCK),
+    ).toBe(false);
+  });
+
+  it('isLastUsed returns false when chainId does not match', () => {
+    const { result } = renderHook(() => useLastUsedPaymentMethod());
+
+    expect(
+      result.current.isLastUsed(TOKEN_ADDRESS_MOCK, OTHER_CHAIN_ID_MOCK),
+    ).toBe(false);
+  });
+
+  it('isLastUsed returns false when the last used token is undefined', () => {
+    useSelectorMock.mockReturnValue(undefined);
+
+    const { result } = renderHook(() => useLastUsedPaymentMethod());
+
+    expect(result.current.isLastUsed(TOKEN_ADDRESS_MOCK, CHAIN_ID_MOCK)).toBe(
+      false,
+    );
+  });
+
+  it('invokes selectLastUsedPaymentMethod with the current transaction type and id so the current transaction is excluded', () => {
+    renderHook(() => useLastUsedPaymentMethod());
+
+    expect(useSelectorMock).toHaveBeenCalled();
+    const selectorFn = useSelectorMock.mock.calls[0][0];
+    selectorFn({} as never);
+    expect(selectLastUsedPaymentMethod).toHaveBeenCalledWith(
+      {},
+      TransactionType.perpsDeposit,
+      'tx-1',
+    );
+  });
+
+  it('passes undefined transactionType and id when no transaction metadata is available', () => {
+    useTransactionMetadataRequestMock.mockReturnValue(undefined);
+
+    renderHook(() => useLastUsedPaymentMethod());
+
+    const selectorFn = useSelectorMock.mock.calls[0][0];
+    selectorFn({} as never);
+    expect(selectLastUsedPaymentMethod).toHaveBeenCalledWith(
+      {},
+      undefined,
+      undefined,
+    );
+  });
+
+  it('keeps the result reference stable across renders when nothing changes', () => {
+    const { result, rerender } = renderHook(() => useLastUsedPaymentMethod());
+    const firstResult = result.current;
+
+    rerender();
+
+    expect(result.current).toBe(firstResult);
+  });
+});