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

## **Description**

The Money / mUSD account activity list rendered the same mUSD token logo
for every row regardless of transaction type. This change replaces that
leading element with a neutral circular `AvatarIcon` whose icon is
derived from the transaction type, so each row communicates what kind of
activity it was, matching the MUSD-801 Figma reference.

A pure icon resolver was added to `useMoneyTransactionDisplayInfo`
following the same precedence as the existing label resolver
(`moneyActivityTitleKey` first, then `TransactionType` fallback).
Mapping: deposited/added → `Add`, received → `Arrow2Down`, converted →
`Refresh`, transferred → `SwapHorizontal`, card_transaction → `Card`,
sent → `Arrow2UpRight`, with `Arrow2Down` as the default. All icons are
existing MMDS (`@metamask/design-system-react-native`) icons; no new
assets.

## **Changelog**

CHANGELOG entry: Updated the Money activity list to show a standard icon
for each transaction type

## **Related issues**

Fixes: https://consensyssoftware.atlassian.net/browse/MUSD-801

## **Manual testing steps**

```gherkin
Feature: Money activity list transaction icons

  Scenario: user views the Money account activity list
    Given the user has mUSD activity containing deposit, receive, convert, transfer and card transactions

    When the user opens the Money account activity list
    Then each row shows the standard MMDS icon for its transaction type
    And the icons render correctly in both light and dark themes
```

## **Screenshots/Recordings**

### **Before**

Every activity row showed the mUSD token logo.

### **After**

<img width="1206" height="2622" alt="image"
src="https://github.com/user-attachments/assets/1eda0500-6e5b-47c4-a0b8-b1c6da74342e"
/>


## **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
- [ ] 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.

#### Performance checks (if applicable)

- [ ] I've tested on Android
  - Ideally on a mid-range device; emulator is acceptable
- [ ] I've tested with a power user scenario
- Use these [power-user
SRPs](https://consensyssoftware.atlassian.net/wiki/spaces/TL1/pages/edit-v2/401401446401?draftShareId=9d77e1e1-4bdc-4be1-9ebb-ccd916988d93)
to import wallets with many accounts and tokens
- [ ] I've instrumented key operations with Sentry traces for production
performance metrics
- See [`trace()`](/app/util/trace.ts) for usage and
[`addToken`](/app/components/Views/AddAsset/components/AddCustomToken/AddCustomToken.tsx#L274)
for an example

For performance guidelines and tooling, see the [Performance
Guide](https://consensyssoftware.atlassian.net/wiki/spaces/TL1/pages/400085549067/Performance+Guide+for+Engineers).

## **Pre-merge reviewer checklist**

- [x] I've manually tested the PR (e.g. pull and build branch, run the
app, test code being changed).
- [x] 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]
> **Low Risk**
> Low risk UI change that swaps the leading activity-row avatar to an
icon derived from transaction metadata; primary risk is
incorrect/missing icon mapping for some transaction types.
> 
> **Overview**
> Updates the Money/mUSD activity list to render a neutral `AvatarIcon`
per row instead of always showing the mUSD token logo, including when
the optional network badge is displayed.
> 
> Extends `useMoneyTransactionDisplayInfo` to return an `icon: IconName`
resolved from `moneyActivityTitleKey` (preferred) or `TransactionType`
(fallback) with sensible defaults, and updates tests to cover the new
icon mapping and `AvatarIcon` rendering via a new
`MoneyActivityItemTestIds.ICON` test id.
> 
> <sup>Reviewed by [Cursor Bugbot](https://cursor.com/bugbot) for commit
4cb0e48. Bugbot is set up for automated
code reviews on this repo. Configure
[here](https://www.cursor.com/dashboard/bugbot).</sup>
<!-- /CURSOR_SUMMARY -->

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],
   );