feat: add account selection on money account deposit page (#28415)

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

Add account selection on money account deposit page.

## **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: https://consensyssoftware.atlassian.net/browse/CONF-1148

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

https://github.com/user-attachments/assets/eb5c374a-a312-4d6e-b4c5-97a6aeb48d3e

## **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**
> Touches confirmation/pay selection logic and introduces
`from`-dependent asset/balance lookups, which can affect token selection
and displayed balances across deposit flows.
> 
> **Overview**
> Adds a configurable label and an `AccountSelectorSkeleton` to
`AccountSelector`, and exposes the skeleton via the component index.
> 
> Updates `CustomAmountInfo` to show an account selector for
`moneyAccountDeposit` transactions (labeled **From**) and persist the
chosen account by calling `updateEditableParams(..., { from })`
(withdraw still sets `{ to }`).
> 
> Makes token/pay UI and data **from-address aware**: `PayWithRow`
temporarily disables interaction while the `from` address changes and
until a new pay token is available, `useAutomaticTransactionPayToken`
re-selects a pay token when `txParams.from` changes, and
`useAccountTokens`/`useTokenWithBalance` look up assets/balances for the
transaction’s `from` account group when present (adding
`selectAssetsByAccountGroupId` selector). Tests are expanded accordingly
and a new `confirm.label.from` string is added.
> 
> <sup>Reviewed by [Cursor Bugbot](https://cursor.com/bugbot) for commit
6093f4b. Bugbot is set up for automated
code reviews on this repo. Configure
[here](https://www.cursor.com/dashboard/bugbot).</sup>
<!-- /CURSOR_SUMMARY -->

Author: jpuri

app/components/Views/confirmations/components/AccountSelector/AccountSelector.test.tsx

@@ -1,7 +1,10 @@
 import React from 'react';
 import { render, fireEvent } from '@testing-library/react-native';
 import { mockTheme } from '../../../../../util/theme';
-import AccountSelector, { ACCOUNT_SELECTOR_TEST_IDS } from './AccountSelector';
+import AccountSelector, {
+  ACCOUNT_SELECTOR_TEST_IDS,
+  AccountSelectorSkeleton,
+} from './AccountSelector';
 
 jest.mock('../../../../../../locales/i18n', () => ({
   strings: (key: string) => key,
@@ -31,8 +34,14 @@ jest.mock('@metamask/design-system-react-native', () => {
     testID?: string;
     twClassName?: string;
   }) => <RNText {...props}>{children}</RNText>;
+  const MockSkeleton = (props: {
+    height?: number;
+    width?: number;
+    twClassName?: string;
+  }) => <RNText testID="skeleton">{`${props.height}x${props.width}`}</RNText>;
   return {
     Text: MockText,
+    Skeleton: MockSkeleton,
     TextVariant: { BodyMd: 'BodyMd', HeadingMd: 'HeadingMd' },
     TextColor: { TextAlternative: 'TextAlternative' },
   };
@@ -257,4 +266,24 @@ describe('AccountSelector', () => {
 
     expect(queryByTestId(ACCOUNT_SELECTOR_TEST_IDS.MODAL)).toBeNull();
   });
+
+  it('renders custom label when label prop is provided', () => {
+    const { getByText, queryByText } = render(
+      <AccountSelector
+        label="From"
+        onAccountSelected={mockOnAccountSelected}
+      />,
+    );
+
+    expect(getByText('From')).toBeOnTheScreen();
+    expect(queryByText('confirm.label.to')).toBeNull();
+  });
+});
+
+describe('AccountSelectorSkeleton', () => {
+  it('renders skeleton with correct testID', () => {
+    const { getByTestId } = render(<AccountSelectorSkeleton />);
+
+    expect(getByTestId('account-selector-skeleton')).toBeOnTheScreen();
+  });
 });

app/components/Views/confirmations/components/AccountSelector/AccountSelector.tsx

@@ -14,6 +14,7 @@ import Icon, {
   IconSize,
 } from '../../../../../component-library/components/Icons/Icon';
 import {
+  Skeleton,
   Text,
   TextColor,
   TextVariant,
@@ -38,11 +39,14 @@ export const ACCOUNT_SELECTOR_TEST_IDS = {
 export interface AccountSelectorProps {
   selectedAddress?: string;
   onAccountSelected: (address: string) => void;
+  /** Label shown on the left side of the row. Defaults to the "To" i18n string. */
+  label?: string;
 }
 
 const AccountSelector: React.FC<AccountSelectorProps> = ({
   selectedAddress,
   onAccountSelected,
+  label = strings('confirm.label.to'),
 }) => {
   const [isModalVisible, setIsModalVisible] = useState(false);
 
@@ -122,7 +126,7 @@ const AccountSelector: React.FC<AccountSelectorProps> = ({
         testID={ACCOUNT_SELECTOR_TEST_IDS.PILL}
       >
         <Text variant={TextVariant.BodyMd} color={TextColor.TextAlternative}>
-          {strings('confirm.label.to')}
+          {label}
         </Text>
         <View style={styles.valueContainer}>
           {selectedAddress && accountName ? (
@@ -192,4 +196,20 @@ const AccountSelector: React.FC<AccountSelectorProps> = ({
   );
 };
 
+export function AccountSelectorSkeleton() {
+  const { styles } = useStyles(stylesheet, {});
+
+  return (
+    <View style={styles.container} testID="account-selector-skeleton">
+      <View style={styles.row}>
+        <Skeleton height={18} width={60} />
+        <View style={styles.valueContainer}>
+          <Skeleton height={32} width={32} twClassName="rounded-full" />
+          <Skeleton height={18} width={120} />
+        </View>
+      </View>
+    </View>
+  );
+}
+
 export default AccountSelector;

app/components/Views/confirmations/components/AccountSelector/index.ts

@@ -1 +1 @@
-export { default } from './AccountSelector';
+export { default, AccountSelectorSkeleton } from './AccountSelector';

app/components/Views/confirmations/components/info/custom-amount-info/custom-amount-info.test.tsx

@@ -1,7 +1,11 @@
 import React, { act } from 'react';
 import { merge, noop } from 'lodash';
 import renderWithProvider from '../../../../../../util/test/renderWithProvider';
-import { CustomAmountInfo, CustomAmountInfoProps } from './custom-amount-info';
+import {
+  CustomAmountInfo,
+  CustomAmountInfoProps,
+  CustomAmountInfoSkeleton,
+} from './custom-amount-info';
 import { simpleSendTransactionControllerMock } from '../../../__mocks__/controllers/transaction-controller-mock';
 import { transactionApprovalControllerMock } from '../../../__mocks__/controllers/approval-controller-mock';
 import { otherControllersMock } from '../../../__mocks__/controllers/other-controllers-mock';
@@ -55,7 +59,7 @@ jest.mock('../../../../../../util/transaction-controller', () => ({
   updateEditableParams: jest.fn(),
 }));
 jest.mock('../../AccountSelector', () => {
-  const { TouchableOpacity, Text } = jest.requireActual('react-native');
+  const { TouchableOpacity, Text, View } = jest.requireActual('react-native');
   return {
     __esModule: true,
     default: ({
@@ -448,4 +452,69 @@ describe('CustomAmountInfo', () => {
       to: '0xTestRecipient',
     });
   });
+
+  it('renders AccountSelector for moneyAccountDeposit transactions', () => {
+    useTransactionMetadataRequestMock.mockReturnValue({
+      type: TransactionType.moneyAccountDeposit,
+      txParams: { from: '0x123' },
+    } as never);
+
+    const { getByTestId } = render({
+      transactionType: TransactionType.moneyAccountDeposit,
+    });
+
+    expect(getByTestId('account-selector')).toBeOnTheScreen();
+  });
+
+  it('renders AccountSelector for moneyAccountDeposit when txParams.from is undefined', () => {
+    useTransactionMetadataRequestMock.mockReturnValue({
+      type: TransactionType.moneyAccountDeposit,
+      txParams: {},
+    } as never);
+
+    const { getByTestId } = render({
+      transactionType: TransactionType.moneyAccountDeposit,
+    });
+
+    expect(getByTestId('account-selector')).toBeOnTheScreen();
+  });
+
+  it('calls updateEditableParams with from key when deposit account is selected', async () => {
+    const { updateEditableParams } = jest.requireMock(
+      '../../../../../../util/transaction-controller',
+    );
+
+    useTransactionMetadataRequestMock.mockReturnValue({
+      id: 'mock-tx-id',
+      type: TransactionType.moneyAccountDeposit,
+      txParams: { from: '0x123' },
+    } as never);
+
+    const { getByTestId } = render({
+      transactionType: TransactionType.moneyAccountDeposit,
+    });
+
+    await act(async () => {
+      fireEvent.press(getByTestId('account-selector'));
+    });
+
+    expect(updateEditableParams).toHaveBeenCalledWith('mock-tx-id', {
+      from: '0xTestRecipient',
+    });
+  });
+});
+
+describe('CustomAmountInfoSkeleton', () => {
+  it('renders skeleton without AccountSelectorSkeleton', () => {
+    const { queryByTestId } = renderWithProvider(<CustomAmountInfoSkeleton />, {
+      state: merge(
+        {},
+        simpleSendTransactionControllerMock,
+        transactionApprovalControllerMock,
+        otherControllersMock,
+      ),
+    });
+
+    expect(queryByTestId('account-selector-skeleton')).toBeNull();
+  });
 });

app/components/Views/confirmations/components/info/custom-amount-info/custom-amount-info.tsx

@@ -60,8 +60,10 @@ import Engine from '../../../../../../core/Engine';
 import { ConfirmationFooterSelectorIDs } from '../../../ConfirmationView.testIds';
 import { useTransactionPayToken } from '../../../hooks/pay/useTransactionPayToken';
 import { getNativeTokenAddress } from '@metamask/assets-controllers';
+import { useSelector } from 'react-redux';
 import AccountSelector from '../../AccountSelector';
 import { updateEditableParams } from '../../../../../../util/transaction-controller';
+import { selectSelectedInternalAccountAddress } from '../../../../../../selectors/accountsController';
 
 export interface CustomAmountInfoProps {
   children?: ReactNode;
@@ -120,10 +122,23 @@ export const CustomAmountInfo: React.FC<CustomAmountInfoProps> = memo(
     const isMoneyAccountWithdraw = hasTransactionType(transactionMeta, [
       TransactionType.moneyAccountWithdraw,
     ]);
+    const isMoneyAccountDeposit = hasTransactionType(transactionMeta, [
+      TransactionType.moneyAccountDeposit,
+    ]);
     const [selectedRecipientAddress, setSelectedRecipientAddress] = useState<
       string | undefined
     >(undefined);
 
+    const globalSelectedAddress = useSelector(
+      selectSelectedInternalAccountAddress,
+    );
+    const initialFromAddress =
+      (transactionMeta?.txParams?.from as string | undefined) ??
+      globalSelectedAddress;
+    const [selectedFromAddress, setSelectedFromAddress] = useState<
+      string | undefined
+    >(initialFromAddress);
+
     const handleRecipientAccountSelected = useCallback(
       (address: string) => {
         if (transactionId) {
@@ -134,6 +149,16 @@ export const CustomAmountInfo: React.FC<CustomAmountInfoProps> = memo(
       [transactionId],
     );
 
+    const handleFromAccountSelected = useCallback(
+      (address: string) => {
+        if (transactionId) {
+          updateEditableParams(transactionId, { from: address as Hex });
+        }
+        setSelectedFromAddress(address);
+      },
+      [transactionId],
+    );
+
     const isRecipientMissing =
       isMoneyAccountWithdraw && !selectedRecipientAddress;
 
@@ -206,6 +231,13 @@ export const CustomAmountInfo: React.FC<CustomAmountInfoProps> = memo(
         <Box gap={16}>
           {!overrideContent && (
             <>
+              {isMoneyAccountDeposit && (
+                <AccountSelector
+                  label={strings('confirm.label.from')}
+                  selectedAddress={selectedFromAddress}
+                  onAccountSelected={handleFromAccountSelected}
+                />
+              )}
               {isMoneyAccountWithdraw && (
                 <AccountSelector
                   selectedAddress={selectedRecipientAddress}

app/components/Views/confirmations/components/rows/pay-with-row/pay-with-row.styles.ts

@@ -34,6 +34,10 @@ const styleSheet = (params: { theme: Theme }) =>
       marginLeft: -1,
       borderRadius: 99,
     },
+
+    disabled: {
+      opacity: 0.5,
+    },
   });
 
 export default styleSheet;

app/components/Views/confirmations/components/rows/pay-with-row/pay-with-row.test.tsx

@@ -14,7 +14,9 @@ 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';
 
+jest.mock('../../../hooks/transactions/useTransactionMetadataRequest');
 jest.mock('@react-navigation/native', () => ({
   ...jest.requireActual('@react-navigation/native'),
   useNavigation: jest.fn(),
@@ -56,6 +58,9 @@ describe('PayWithRow', () => {
   const useTransactionPayRequiredTokensMock = jest.mocked(
     useTransactionPayRequiredTokens,
   );
+  const useTransactionMetadataRequestMock = jest.mocked(
+    useTransactionMetadataRequest,
+  );
   const mockSetConfirmationMetric = jest.fn();
 
   beforeEach(() => {
@@ -241,4 +246,96 @@ describe('PayWithRow', () => {
       );
     });
   });
+
+  describe('from address change', () => {
+    beforeEach(() => {
+      useTransactionMetadataRequestMock.mockReturnValue({
+        txParams: { from: '0xFromAddress' },
+      } as never);
+    });
+
+    it('completes reselecting cycle when from changes and payToken stays set', async () => {
+      const { rerender, getByText } = render();
+
+      useTransactionMetadataRequestMock.mockReturnValue({
+        txParams: { from: '0xDifferentAddress' },
+      } as never);
+
+      await act(async () => {
+        rerender(<PayWithRow />);
+      });
+
+      await act(async () => {
+        fireEvent.press(getByText(`${ADDRESS_MOCK} ${CHAIN_ID_MOCK}`));
+      });
+
+      expect(navigateMock).toHaveBeenCalledWith(
+        Routes.CONFIRMATION_PAY_WITH_MODAL,
+      );
+    });
+
+    it('shows skeleton when payToken clears during from address change', async () => {
+      const { rerender, getByTestId } = render();
+
+      useTransactionMetadataRequestMock.mockReturnValue({
+        txParams: { from: '0xDifferentAddress' },
+      } as never);
+
+      jest.mocked(useTransactionPayToken).mockReturnValue({
+        payToken: undefined,
+        setPayToken: jest.fn(),
+      });
+
+      await act(async () => {
+        rerender(<PayWithRow />);
+      });
+
+      expect(getByTestId('pay-with-row-skeleton')).toBeDefined();
+    });
+
+    it('re-enables row when new payToken arrives after from change', async () => {
+      const { rerender, getByText, getByTestId } = render();
+
+      useTransactionMetadataRequestMock.mockReturnValue({
+        txParams: { from: '0xDifferentAddress' },
+      } as never);
+
+      jest.mocked(useTransactionPayToken).mockReturnValue({
+        payToken: undefined,
+        setPayToken: jest.fn(),
+      });
+
+      await act(async () => {
+        rerender(<PayWithRow />);
+      });
+
+      expect(getByTestId('pay-with-row-skeleton')).toBeDefined();
+
+      jest.mocked(useTransactionPayToken).mockReturnValue({
+        payToken: {
+          address: ADDRESS_MOCK,
+          balanceHuman: '0',
+          balanceFiat: '$0',
+          balanceRaw: '0',
+          balanceUsd: '0',
+          chainId: CHAIN_ID_MOCK,
+          decimals: 4,
+          symbol: 'test',
+        },
+        setPayToken: jest.fn(),
+      });
+
+      await act(async () => {
+        rerender(<PayWithRow />);
+      });
+
+      await act(async () => {
+        fireEvent.press(getByText(`${ADDRESS_MOCK} ${CHAIN_ID_MOCK}`));
+      });
+
+      expect(navigateMock).toHaveBeenCalledWith(
+        Routes.CONFIRMATION_PAY_WITH_MODAL,
+      );
+    });
+  });
 });