Reality2byte
diff --git a/‎app/components/Views/confirmations/components/rows/pay-with-row/pay-with-row.test.tsx‎
Lines changed: 95 additions & 4 deletions b/‎app/components/Views/confirmations/components/rows/pay-with-row/pay-with-row.test.tsx‎
Lines changed: 95 additions & 4 deletions
diff --git a/‎app/components/Views/confirmations/components/rows/pay-with-row/pay-with-row.tsx‎
Lines changed: 95 additions & 0 deletions b/‎app/components/Views/confirmations/components/rows/pay-with-row/pay-with-row.tsx‎
Lines changed: 95 additions & 0 deletions
@@ -1,24 +1,29 @@
 import React from 'react';
+import { type PaymentMethod } from '@metamask/ramps-controller';
+import { PaymentOverride } from '@metamask/transaction-pay-controller';
+import { useNavigation } from '@react-navigation/native';
+import { act, fireEvent } from '@testing-library/react-native';
+import { merge } from 'lodash';
+import { Text as MockText } from 'react-native';
+
 import { PayWithRow } from './pay-with-row';
 import { TokenIconProps } from '../../token-icon';
 import { useTransactionPayToken } from '../../../hooks/pay/useTransactionPayToken';
 import { useTransactionPayWithdraw } from '../../../hooks/pay/useTransactionPayWithdraw';
 import { useTransactionPayRequiredTokens } from '../../../hooks/pay/useTransactionPayData';
 import { useTransactionPaySelectedFiatPaymentMethod } from '../../../hooks/pay/useTransactionPaySelectedFiatPaymentMethod';
-import { type PaymentMethod } from '@metamask/ramps-controller';
-import { useNavigation } from '@react-navigation/native';
-import { act, fireEvent } from '@testing-library/react-native';
 import Routes from '../../../../../../constants/navigation/Routes';
-import { Text as MockText } from 'react-native';
 import renderWithProvider from '../../../../../../util/test/renderWithProvider';
 import { backgroundState } from '../../../../../../util/test/initial-root-state';
 import { isHardwareAccount } from '../../../../../../util/address';
 import { useConfirmationMetricEvents } from '../../../hooks/metrics/useConfirmationMetricEvents';
 import { useTransactionMetadataRequest } from '../../../hooks/transactions/useTransactionMetadataRequest';
 import { useParams } from '../../../../../../util/navigation/navUtils';
+import useMoneyAccountBalance from '../../../../../UI/Money/hooks/useMoneyAccountBalance';
 
 jest.mock('../../../hooks/transactions/useTransactionMetadataRequest');
 jest.mock('../../../../../../util/navigation/navUtils');
+jest.mock('../../../../../UI/Money/hooks/useMoneyAccountBalance');
 jest.mock('@react-navigation/native', () => ({
   ...jest.requireActual('@react-navigation/native'),
   useNavigation: jest.fn(),
@@ -131,6 +136,11 @@ describe('PayWithRow', () => {
       navigate: navigateMock,
     } as never);
 
+    jest.mocked(useTransactionMetadataRequest).mockReturnValue(undefined);
+    jest.mocked(useMoneyAccountBalance).mockReturnValue({
+      totalFiatFormatted: undefined,
+    } as ReturnType<typeof useMoneyAccountBalance>);
+
     isHardwareAccountMock.mockReturnValue(false);
   });
 
@@ -285,4 +295,85 @@ describe('PayWithRow', () => {
       );
     });
   });
+
+  describe('money account mode', () => {
+    const TRANSACTION_ID_MOCK = 'tx-money-1';
+
+    const MONEY_ACCOUNT_STATE = merge({}, STATE_MOCK, {
+      engine: {
+        backgroundState: {
+          TransactionPayController: {
+            transactionData: {
+              [TRANSACTION_ID_MOCK]: {
+                paymentOverride: PaymentOverride.MoneyAccount,
+              },
+            },
+          },
+        },
+      },
+    });
+
+    function renderMoneyAccount() {
+      return renderWithProvider(<PayWithRow />, {
+        state: MONEY_ACCOUNT_STATE,
+      });
+    }
+
+    beforeEach(() => {
+      jest.mocked(useTransactionMetadataRequest).mockReturnValue({
+        id: TRANSACTION_ID_MOCK,
+      } as never);
+    });
+
+    it('renders money account label with balance', () => {
+      jest.mocked(useMoneyAccountBalance).mockReturnValue({
+        totalFiatFormatted: '$500.00',
+      } as ReturnType<typeof useMoneyAccountBalance>);
+
+      const { getByTestId } = renderMoneyAccount();
+
+      expect(getByTestId('pay-with-symbol').props.children).toContain(
+        'Money account',
+      );
+      expect(getByTestId('pay-with-balance')).toBeDefined();
+    });
+
+    it('renders money account label without balance when totalFiatFormatted is undefined', () => {
+      jest.mocked(useMoneyAccountBalance).mockReturnValue({
+        totalFiatFormatted: undefined,
+      } as ReturnType<typeof useMoneyAccountBalance>);
+
+      const { getByTestId, queryByTestId } = renderMoneyAccount();
+
+      expect(getByTestId('pay-with-symbol').props.children).toContain(
+        'Money account',
+      );
+      expect(queryByTestId('pay-with-balance')).toBeNull();
+    });
+
+    it('renders skeleton when no pay token in money account mode', () => {
+      jest.mocked(useTransactionPayToken).mockReturnValue({
+        payToken: undefined,
+        setPayToken: jest.fn(),
+      });
+
+      const { getByTestId } = renderMoneyAccount();
+
+      expect(getByTestId('pay-with-row-skeleton')).toBeDefined();
+    });
+
+    it('navigates to pay-with modal on press', async () => {
+      jest.mocked(useMoneyAccountBalance).mockReturnValue({
+        totalFiatFormatted: '$500.00',
+      } as ReturnType<typeof useMoneyAccountBalance>);
+
+      const { getByTestId } = renderMoneyAccount();
+
+      await act(() => {
+        fireEvent.press(getByTestId('pay-with'));
+      });
+
+      expect(navigateMock).toHaveBeenCalled();
+    });
+  });
 });
@@ -1,7 +1,10 @@
 import React, { useCallback, useMemo } from 'react';
 import { useNavigation } from '@react-navigation/native';
+import { useSelector } from 'react-redux';
 import { PaymentType } from '@consensys/on-ramp-sdk';
 import Routes from '../../../../../../constants/navigation/Routes';
+import { RootState } from '../../../../../../reducers';
+import { selectPaymentOverrideByTransactionId } from '../../../../../../selectors/transactionPayController';
 import { TokenIcon, TokenIconVariant } from '../../token-icon';
 import { useTransactionPayToken } from '../../../hooks/pay/useTransactionPayToken';
 import { useTransactionPayWithdraw } from '../../../hooks/pay/useTransactionPayWithdraw';
@@ -24,6 +27,7 @@ import {
 import { useStyles } from '../../../../../hooks/useStyles';
 import styleSheet from './pay-with-row.styles';
 import { BigNumber } from 'bignumber.js';
+import { PaymentOverride } from '@metamask/transaction-pay-controller';
 import { strings } from '../../../../../../../locales/i18n';
 import { useTransactionMetadataRequest } from '../../../hooks/transactions/useTransactionMetadataRequest';
 import { isHardwareAccount } from '../../../../../../util/address';
@@ -42,6 +46,7 @@ import { useConfirmationMetricEvents } from '../../../hooks/metrics/useConfirmat
 import { type PaymentMethod } from '@metamask/ramps-controller';
 import { useParams } from '../../../../../../util/navigation/navUtils';
 import { SetPayTokenRequest } from '../../../hooks/pay/useAutomaticTransactionPayToken';
+import useMoneyAccountBalance from '../../../../../UI/Money/hooks/useMoneyAccountBalance';
 import { useConfirmationContext } from '../../../context/confirmation-context';
 import { useTheme } from '../../../../../../util/theme';
 import { isPayWithBottomSheetEnabled } from '../../../utils/transaction-pay';
@@ -51,6 +56,19 @@ interface PayWithRouteParams {
 }
 
 export function PayWithRow() {
+  const transactionId = useTransactionMetadataRequest()?.id ?? '';
+  const paymentOverride = useSelector((state: RootState) =>
+    selectPaymentOverrideByTransactionId(state, transactionId),
+  );
+
+  if (paymentOverride === PaymentOverride.MoneyAccount) {
+    return <PayWithRowMoneyAccount />;
+  }
+
+  return <PayWithRowInteractive />;
+}
+
+function PayWithRowInteractive() {
   const navigation = useNavigation();
   const { payToken } = useTransactionPayToken();
   const { isWithdraw } = useTransactionPayWithdraw();
@@ -248,6 +266,83 @@ function PayWithFiatPaymentMethodRow({
   );
 }
 
+function PayWithRowMoneyAccount() {
+  const navigation = useNavigation();
+  const { payToken } = useTransactionPayToken();
+  const { styles } = useStyles(styleSheet, {});
+  const { setConfirmationMetric } = useConfirmationMetricEvents();
+  const { preferredPaymentToken } = useParams<PayWithRouteParams>({});
+  const { totalFiatFormatted } = useMoneyAccountBalance();
+
+  const handleClick = useCallback(() => {
+    setConfirmationMetric({
+      properties: { mm_pay_token_list_opened: true },
+    });
+    if (isPayWithBottomSheetEnabled()) {
+      navigation.navigate(Routes.CONFIRMATION_PAY_WITH_BOTTOM_SHEET, {
+        preferredPaymentToken,
+      });
+      return;
+    }
+    navigation.navigate(Routes.CONFIRMATION_PAY_WITH_MODAL);
+  }, [navigation, preferredPaymentToken, setConfirmationMetric]);
+
+  if (!payToken) {
+    return <PayWithRowSkeleton />;
+  }
+
+  return (
+    <TouchableOpacity
+      onPress={handleClick}
+      testID={ConfirmationRowComponentIDs.PAY_WITH}
+    >
+      <Box
+        flexDirection={FlexDirection.Row}
+        alignItems={AlignItems.center}
+        justifyContent={JustifyContent.spaceBetween}
+        style={styles.container}
+      >
+        <Text variant={TextVariant.BodyMd} color={TextColor.TextAlternative}>
+          {strings('confirm.label.pay_with')}
+        </Text>
+        <Box
+          flexDirection={FlexDirection.Row}
+          alignItems={AlignItems.center}
+          gap={8}
+        >
+          <TokenIcon
+            address={payToken.address}
+            chainId={payToken.chainId}
+            variant={TokenIconVariant.Row}
+          />
+          <Text
+            variant={TextVariant.BodyMd}
+            fontWeight={FontWeight.Medium}
+            color={TextColor.TextDefault}
+            testID={TransactionPayComponentIDs.PAY_WITH_SYMBOL}
+          >
+            {strings('confirm.pay_with_bottom_sheet.money_account')}
+            {totalFiatFormatted && (
+              <Text
+                variant={TextVariant.BodyMd}
+                color={TextColor.TextAlternative}
+                testID={TransactionPayComponentIDs.PAY_WITH_BALANCE}
+              >
+                {` (${totalFiatFormatted})`}
+              </Text>
+            )}
+          </Text>
+          <Icon
+            name={IconName.ArrowDown}
+            size={IconSize.Sm}
+            color={IconColor.Alternative}
+          />
+        </Box>
+      </Box>
+    </TouchableOpacity>
+  );
+}
+
 export function PayWithRowSkeleton() {
   const { styles } = useStyles(styleSheet, {});