feat(MUSD-801): use standard transaction-type icons in Money activity list

Replace the mUSD token avatar in the activity list with a neutral
AvatarIcon whose icon is derived per transaction type. Adds an icon
resolver to useMoneyTransactionDisplayInfo (moneyActivityTitleKey first,
then TransactionType fallback) mapping each type to its MMDS IconName:
deposited/added->Add, received->Arrow2Down, converted->Refresh,
transferred->SwapHorizontal, card_transaction->Card, sent->Arrow2UpRight.

Author: Kureev

app/components/UI/Money/components/MoneyActivityItem/MoneyActivityItem.test.tsx

@@ -4,6 +4,7 @@ import {
   type TransactionMeta,
   TransactionType,
 } from '@metamask/transaction-controller';
+import { IconName } from '@metamask/design-system-react-native';
 import type { Hex } from '@metamask/utils';
 import renderWithProvider from '../../../../../util/test/renderWithProvider';
 import { useMoneyTransactionDisplayInfo } from '../../hooks/useMoneyTransactionDisplayInfo';
@@ -31,13 +32,20 @@ jest.mock('../../../../../util/networks', () => ({
   getNetworkImageSource: jest.fn(() => ({ uri: 'network' })),
 }));
 
-jest.mock(
-  '../../../../../component-library/components/Avatars/Avatar/variants/AvatarToken',
-  () => {
-    const { View } = jest.requireActual('react-native');
-    return () => <View testID="mock-avatar-token" />;
-  },
-);
+jest.mock('@metamask/design-system-react-native', () => {
+  const actual = jest.requireActual('@metamask/design-system-react-native');
+  const { View } = jest.requireActual('react-native');
+  return {
+    ...actual,
+    AvatarIcon: ({
+      iconName,
+      testID,
+    }: {
+      iconName: string;
+      testID?: string;
+    }) => <View testID={testID} accessibilityLabel={iconName} />,
+  };
+});
 
 jest.mock(
   '../../../../../component-library/components/Badges/BadgeWrapper',
@@ -83,6 +91,7 @@ describe('MoneyActivityItem', () => {
       primaryAmount: '+$0.00',
       fiatAmount: '$0.00',
       isIncoming: true,
+      icon: IconName.Arrow2Down,
     });
   });
 
@@ -107,6 +116,7 @@ describe('MoneyActivityItem', () => {
       primaryAmount: '+$0.00',
       fiatAmount: '$0.00',
       isIncoming: false,
+      icon: IconName.Arrow2Down,
     });
 
     const { queryByText } = renderWithProvider(
@@ -135,4 +145,41 @@ describe('MoneyActivityItem', () => {
     expect(getByTestId('mock-badge-wrapper')).toBeOnTheScreen();
     expect(getByTestId('mock-network-badge')).toBeOnTheScreen();
   });
+
+  it('renders the AvatarIcon and no longer renders the token avatar', () => {
+    const { getByTestId, queryByTestId } = renderWithProvider(
+      <MoneyActivityItem tx={baseTx} moneyAddress="0x1" />,
+    );
+
+    expect(getByTestId(MoneyActivityItemTestIds.ICON)).toBeOnTheScreen();
+    expect(queryByTestId('mock-avatar-token')).toBeNull();
+  });
+
+  it('renders the AvatarIcon inside the network badge subtree', () => {
+    const { getByTestId } = renderWithProvider(
+      <MoneyActivityItem tx={baseTx} moneyAddress="0x1" showNetworkBadge />,
+    );
+
+    expect(getByTestId(MoneyActivityItemTestIds.ICON)).toBeOnTheScreen();
+  });
+
+  it('forwards the icon name from useMoneyTransactionDisplayInfo', () => {
+    mockUseMoneyTransactionDisplayInfo.mockReturnValue({
+      label: 'Label',
+      description: 'Description',
+      primaryAmount: '+$0.00',
+      fiatAmount: '$0.00',
+      isIncoming: true,
+      icon: IconName.SwapHorizontal,
+    });
+
+    const { getByTestId } = renderWithProvider(
+      <MoneyActivityItem tx={baseTx} moneyAddress="0x1" />,
+    );
+
+    expect(getByTestId(MoneyActivityItemTestIds.ICON)).toHaveProp(
+      'accessibilityLabel',
+      IconName.SwapHorizontal,
+    );
+  });
 });

app/components/UI/Money/components/MoneyActivityItem/MoneyActivityItem.testIds.ts

@@ -1,3 +1,4 @@
 export const MoneyActivityItemTestIds = {
   ROW: 'money-activity-item-row',
+  ICON: 'money-activity-item-icon',
 };

app/components/UI/Money/components/MoneyActivityItem/MoneyActivityItem.tsx

@@ -1,6 +1,9 @@
 import React, { useMemo } from 'react';
 import { Pressable } from 'react-native';
 import {
+  AvatarIcon,
+  AvatarIconSeverity,
+  AvatarIconSize,
   Box,
   BoxAlignItems,
   FontWeight,
@@ -11,7 +14,6 @@ import {
 import { useTailwind } from '@metamask/design-system-twrnc-preset';
 import type { TransactionMeta } from '@metamask/transaction-controller';
 import { getNetworkImageSource } from '../../../../../util/networks';
-import AvatarToken from '../../../../../component-library/components/Avatars/Avatar/variants/AvatarToken';
 import { AvatarSize } from '../../../../../component-library/components/Avatars/Avatar';
 import BadgeWrapper from '../../../../../component-library/components/Badges/BadgeWrapper';
 import {
@@ -21,7 +23,6 @@ import {
 import Badge, {
   BadgeVariant,
 } from '../../../../../component-library/components/Badges/Badge';
-import { MUSD_TOKEN } from '../../../Earn/constants/musd';
 import { useMoneyTransactionDisplayInfo } from '../../hooks/useMoneyTransactionDisplayInfo';
 import { MoneyActivityItemTestIds } from './MoneyActivityItem.testIds';
 
@@ -80,18 +81,20 @@ const MoneyActivityItem = ({
             />
           }
         >
-          <AvatarToken
-            name={MUSD_TOKEN.name}
-            imageSource={MUSD_TOKEN.imageSource}
-            size={AvatarSize.Lg}
+          <AvatarIcon
+            iconName={display.icon}
+            severity={AvatarIconSeverity.Neutral}
+            size={AvatarIconSize.Lg}
+            testID={MoneyActivityItemTestIds.ICON}
           />
         </BadgeWrapper>
       ) : (
         <Box twClassName="self-center">
-          <AvatarToken
-            name={MUSD_TOKEN.name}
-            imageSource={MUSD_TOKEN.imageSource}
-            size={AvatarSize.Lg}
+          <AvatarIcon
+            iconName={display.icon}
+            severity={AvatarIconSeverity.Neutral}
+            size={AvatarIconSize.Lg}
+            testID={MoneyActivityItemTestIds.ICON}
           />
         </Box>
       )}

app/components/UI/Money/hooks/useMoneyTransactionDisplayInfo.test.tsx

@@ -2,11 +2,13 @@ import {
   type TransactionMeta,
   TransactionType,
 } from '@metamask/transaction-controller';
+import { IconName } from '@metamask/design-system-react-native';
 import type { Hex } from '@metamask/utils';
 import { safeToChecksumAddress } from '../../../../util/address';
 import { renderHookWithProvider } from '../../../../util/test/renderWithProvider';
 import { useMoneyTransactionDisplayInfo } from './useMoneyTransactionDisplayInfo';
 import { MUSD_TOKEN_ADDRESS } from '../../Earn/constants/musd';
+import type { MoneyActivityTitleKey } from '../constants/mockActivityData';
 
 const MOCK_CHAIN: Hex = '0x1';
 const checksumToken = safeToChecksumAddress(MUSD_TOKEN_ADDRESS) as string;
@@ -93,4 +95,99 @@ describe('useMoneyTransactionDisplayInfo', () => {
     expect(result.current.primaryAmount).toMatch(/1,000\.00/);
     expect(result.current.primaryAmount).toContain('mUSD');
   });
+
+  function renderIcon(tx: TransactionMeta): IconName {
+    const { result } = renderHookWithProvider(
+      () => useMoneyTransactionDisplayInfo(tx, undefined),
+      {
+        state: {
+          engine: {
+            backgroundState: {
+              CurrencyRateController: {
+                currentCurrency: 'usd',
+                currencyRates: {
+                  ETH: {
+                    conversionRate: 3000,
+                    usdConversionRate: 3000,
+                    conversionDate: null,
+                  },
+                },
+              },
+              TokenRatesController: tokenMarketState(1 / 3000),
+            },
+          },
+        },
+      },
+    );
+    return result.current.icon;
+  }
+
+  function txWithTitleKey(key: MoneyActivityTitleKey): TransactionMeta {
+    return {
+      ...baseTx,
+      moneyActivityTitleKey: key,
+    } as unknown as TransactionMeta;
+  }
+
+  function txWithType(type: TransactionType | undefined): TransactionMeta {
+    return {
+      ...baseTx,
+      type,
+    } as unknown as TransactionMeta;
+  }
+
+  describe('icon', () => {
+    it.each<[MoneyActivityTitleKey, IconName]>([
+      ['added', IconName.Add],
+      ['deposited', IconName.Add],
+      ['received', IconName.Arrow2Down],
+      ['converted', IconName.Refresh],
+      ['transferred', IconName.SwapHorizontal],
+      ['card_transaction', IconName.Card],
+      ['sent', IconName.Arrow2UpRight],
+    ])('maps title key "%s" to %s', (key, expected) => {
+      expect(renderIcon(txWithTitleKey(key))).toBe(expected);
+    });
+
+    it.each<[TransactionType, IconName]>([
+      [TransactionType.moneyAccountDeposit, IconName.Add],
+      [TransactionType.incoming, IconName.Arrow2Down],
+      [TransactionType.musdConversion, IconName.Refresh],
+      [TransactionType.moneyAccountWithdraw, IconName.SwapHorizontal],
+      [TransactionType.simpleSend, IconName.Arrow2UpRight],
+    ])('falls back to type "%s" mapping %s', (type, expected) => {
+      expect(renderIcon(txWithType(type))).toBe(expected);
+    });
+
+    it('defaults to Arrow2Down when type is undefined and no title key', () => {
+      expect(renderIcon(txWithType(undefined))).toBe(IconName.Arrow2Down);
+    });
+
+    it('defaults to Arrow2Down for an unmapped transaction type', () => {
+      expect(renderIcon(txWithType(TransactionType.contractInteraction))).toBe(
+        IconName.Arrow2Down,
+      );
+    });
+
+    it('disambiguates moneyAccountWithdraw (no title key) to SwapHorizontal', () => {
+      expect(renderIcon(txWithType(TransactionType.moneyAccountWithdraw))).toBe(
+        IconName.SwapHorizontal,
+      );
+    });
+
+    it('disambiguates simpleSend (no title key) to Arrow2UpRight', () => {
+      expect(renderIcon(txWithType(TransactionType.simpleSend))).toBe(
+        IconName.Arrow2UpRight,
+      );
+    });
+
+    it('prefers the title key over the transaction type', () => {
+      const tx = {
+        ...baseTx,
+        type: TransactionType.simpleSend,
+        moneyActivityTitleKey: 'received',
+      } as unknown as TransactionMeta;
+      expect(renderIcon(tx)).toBe(IconName.Arrow2Down);
+    });
+  });
 });

app/components/UI/Money/hooks/useMoneyTransactionDisplayInfo.ts

@@ -4,6 +4,7 @@ import {
   type TransactionMeta,
   TransactionType,
 } from '@metamask/transaction-controller';
+import { IconName } from '@metamask/design-system-react-native';
 import { strings } from '../../../../../locales/i18n';
 import {
   selectCurrencyRates,
@@ -26,6 +27,7 @@ export interface MoneyTransactionDisplayInfo {
   primaryAmount: string;
   fiatAmount: string;
   isIncoming: boolean;
+  icon: IconName;
 }
 
 function titleKeyToLabel(key: MoneyActivityTitleKey): string {
@@ -80,6 +82,57 @@ function getLabel(tx: TransactionMeta): string {
   return getLabelForTransactionType(tx.type);
 }
 
+function titleKeyToIcon(key: MoneyActivityTitleKey): IconName {
+  switch (key) {
+    case 'added':
+      return IconName.Add;
+    case 'deposited':
+      return IconName.Add;
+    case 'received':
+      return IconName.Arrow2Down;
+    case 'card_transaction':
+      return IconName.Card;
+    case 'converted':
+      return IconName.Refresh;
+    case 'sent':
+      return IconName.Arrow2UpRight;
+    case 'transferred':
+      return IconName.SwapHorizontal;
+    default:
+      return IconName.Arrow2Down;
+  }
+}
+
+function getIconForTransactionType(
+  type: TransactionType | undefined,
+): IconName {
+  if (!type) {
+    return IconName.Arrow2Down;
+  }
+  switch (type) {
+    case TransactionType.moneyAccountDeposit:
+      return IconName.Add;
+    case TransactionType.incoming:
+      return IconName.Arrow2Down;
+    case TransactionType.musdConversion:
+      return IconName.Refresh;
+    case TransactionType.moneyAccountWithdraw:
+      return IconName.SwapHorizontal;
+    case TransactionType.simpleSend:
+      return IconName.Arrow2UpRight;
+    default:
+      return IconName.Arrow2Down;
+  }
+}
+
+function getIcon(tx: TransactionMeta): IconName {
+  const extended = tx as MoneyActivityTransactionMeta;
+  if (extended.moneyActivityTitleKey) {
+    return titleKeyToIcon(extended.moneyActivityTitleKey);
+  }
+  return getIconForTransactionType(tx.type);
+}
+
 /**
  * Derives display strings for a Money activity row backed by {@link TransactionMeta}.
  */
@@ -104,6 +157,7 @@ export function useMoneyTransactionDisplayInfo(
         tokenMarketData,
       ),
       isIncoming: isIncomingMoneyTransactionMeta(tx),
+      icon: getIcon(tx),
     }),
     [tx, subtitle, currentCurrency, currencyRates, tokenMarketData],
   );