fix(activity): show account name and avatar for owned accounts in activity list

app/components/UI/ActivityListItemRow/ActivityListItemRow.styles.ts

@@ -130,6 +130,15 @@ export const createStyles = (
       alignItems: 'center',
       marginTop: 0,
     },
+    subtitleRowSpaced: {
+      marginTop: 4,
+    },
+    subtitleAccountAvatar: {
+      marginRight: 4,
+    },
+    subtitleAccountName: {
+      flexShrink: 1,
+    } as TextStyle,
     subtitleLeadingIcon: {
       height: 16,
       justifyContent: 'center',

app/components/UI/ActivityListItemRow/ActivityListItemRow.test.tsx

@@ -26,6 +26,7 @@ import { useTokensData } from '../../hooks/useTokensData/useTokensData';
 const LINEA_MUSD_ADDRESS = '0xaca92e438df0b2401ff60da7e4337b687a2435da';
 const LINEA_MUSD_CHECKSUM_ADDRESS =
   '0xacA92E438df0B2401fF60dA7E4337B687a2435DA';
+const OWNED_ACCOUNT_ADDRESS = '0xAa60919dd0d0964B76620dAaF08bF357e1c9DD73';
 
 const mockState = {
   user: {
@@ -61,6 +62,35 @@ const mockState = {
           },
         },
       },
+      AccountsController: {
+        internalAccounts: {
+          selectedAccount: 'owned-account-1',
+          accounts: {
+            'owned-account-1': {
+              id: 'owned-account-1',
+              address: OWNED_ACCOUNT_ADDRESS,
+              metadata: { name: 'Account 2' },
+            },
+          },
+        },
+      },
+      AccountTreeController: {
+        accountTree: {
+          wallets: {
+            'entropy:wallet-1': {
+              id: 'entropy:wallet-1',
+              metadata: { name: 'Wallet 1' },
+              groups: {
+                'entropy:wallet-1/1': {
+                  id: 'entropy:wallet-1/1',
+                  metadata: { name: 'ETH DeFi' },
+                  accounts: ['owned-account-1'],
+                },
+              },
+            },
+          },
+        },
+      },
     },
   },
 };
@@ -222,6 +252,11 @@ jest.mock('@metamask/design-system-react-native', () => {
       severity,
     });
 
+  const AvatarAccount = ({ address }: { address?: string }) =>
+    ReactActual.createElement(View, {
+      testID: `avatar-account-${address ?? 'unknown'}`,
+    });
+
   const BadgeNetwork = ({ src }: { src?: unknown }) =>
     ReactActual.createElement(View, { src });
 
@@ -249,6 +284,13 @@ jest.mock('@metamask/design-system-react-native', () => {
     AvatarIcon,
     AvatarIconSeverity: { Neutral: 'neutral', Danger: 'danger' },
     AvatarIconSize: { Xs: 'xs', Sm: 'sm', Md: 'md', Lg: 'lg', Xl: 'xl' },
+    AvatarAccount,
+    AvatarAccountVariant: {
+      Jazzicon: 'Jazzicon',
+      Blockies: 'Blockies',
+      Maskicon: 'Maskicon',
+    },
+    AvatarBaseSize: { Xs: 'xs', Sm: 'sm', Md: 'md', Lg: 'lg', Xl: 'xl' },
     BadgeNetwork,
     BadgeWrapper,
     BadgeWrapperPosition: { BottomRight: 'BottomRight' },
@@ -455,6 +497,57 @@ describe('ActivityListItemRow — row content', () => {
     expect(getByTestId('avatar-token-USDC')).toBeOnTheScreen();
   });
 
+  it('renders the account name in the subtitle when sending to an owned account', () => {
+    const item = makeItem({
+      type: 'send',
+      status: 'success',
+      // Lowercased on purpose: the owned-account match is case-insensitive.
+      to: OWNED_ACCOUNT_ADDRESS.toLowerCase(),
+      token: {
+        amount: '10',
+        symbol: 'USDC',
+        direction: 'out',
+      },
+    });
+    const { getByTestId } = render(
+      <ActivityListItemRow item={item} index={0} />,
+    );
+
+    expect(getByTestId('activity-subtitle-0xabc').props.children).toBe('To: ');
+    expect(
+      getByTestId('activity-subtitle-account-name-0xabc').props.children,
+    ).toBe('ETH DeFi');
+    expect(
+      getByTestId('activity-subtitle-account-avatar-0xabc'),
+    ).toBeOnTheScreen();
+  });
+
+  it('renders the account name in the subtitle when receiving from an owned account', () => {
+    const item = makeItem({
+      type: 'receive',
+      status: 'success',
+      from: OWNED_ACCOUNT_ADDRESS,
+      token: {
+        amount: '10',
+        symbol: 'USDC',
+        direction: 'in',
+      },
+    });
+    const { getByTestId } = render(
+      <ActivityListItemRow item={item} index={0} />,
+    );
+
+    expect(getByTestId('activity-subtitle-0xabc').props.children).toBe(
+      'From: ',
+    );
+    expect(
+      getByTestId('activity-subtitle-account-name-0xabc').props.children,
+    ).toBe('ETH DeFi');
+    expect(
+      getByTestId('activity-subtitle-account-avatar-0xabc'),
+    ).toBeOnTheScreen();
+  });
+
   it('shows "Send cancelled" and hides the amount for a cancelled send', () => {
     const item = makeItem({
       type: 'send',

app/components/UI/ActivityListItemRow/ActivityListItemRow.tsx

@@ -12,6 +12,7 @@ import { PendingActivityListItemRow } from './PendingActivityListItemRow';
 import { resolveTransactionIconName } from './resolveIconType';
 import { useActivityListItemRowContent } from './useActivityListItemRowContent';
 import { useNftActivityImage } from './useNftActivityImage';
+import { useSubtitleAccountParts } from './useSubtitleAccountParts';
 import type { ActivityListItemRowProps } from './ActivityListItemRow.types';
 import {
   isPerpsOrderKind,
@@ -68,6 +69,11 @@ function ResolvedActivityListItemRow({
 
   const nftImageUrl = useNftActivityImage(item);
   const styles = createStyles(colors, typography);
+  const subtitleParts = useSubtitleAccountParts(
+    content,
+    styles,
+    item.hash ?? index,
+  );
   const isFailed = item.status === 'failed';
   const fallbackIconName = resolveTransactionIconName(item.type);
   const networkImageSource = isSingleNetworkDomainKind(item.type)
@@ -105,6 +111,7 @@ function ResolvedActivityListItemRow({
       secondaryAmount={content.secondaryAmount}
       styles={styles}
       subtitle={content.subtitle}
+      subtitleParts={subtitleParts}
       title={titleOverride ?? content.title}
     />
   );

app/components/UI/ActivityListItemRow/ActivityListItemRow.types.ts

@@ -36,6 +36,7 @@ export interface ActivityListItemRowProps
 export interface ActivityListItemRowContent {
   title: string;
   subtitle?: string;
+  subtitleAccount?: { prefix: string; address: string; name: string };
   primaryToken?: TokenAmount;
   secondaryToken?: TokenAmount;
   primaryAmount?: string;

app/components/UI/ActivityListItemRow/ActivityListItemRowLayout.tsx

@@ -7,7 +7,7 @@
 } from '../../../util/activity-adapters';
 import type { ActivityListItemRowStyles } from './ActivityListItemRow.styles';
 
 export function ActivityListItemRowLayout({
   avatar,
   footer,
   index,
@@ -23,6 +23,7 @@
   styles,
   subtitle,
   subtitleLeadingAccessory,
+  subtitleParts,
   title,
   titleAccessory,
 }: {
@@ -41,6 +42,7 @@
   styles: ActivityListItemRowStyles;
   subtitle?: string;
   subtitleLeadingAccessory?: React.ReactNode;
+  subtitleParts?: { pre: string; avatar: React.ReactNode; name: string };
   title: string;
   titleAccessory?: React.ReactNode;
 }) {
@@ -68,28 +70,51 @@
   ) : (
     titleText
   );
-  const subtitleNode = subtitle ? (
+  const subtitleNode = subtitleParts ? (
+    <View style={[styles.subtitleRow, styles.subtitleRowSpaced]}>
+      {subtitleLeadingAccessory}
+      <Text
+        numberOfLines={1}
+        style={[styles.subtitleText, styles.statusText]}
+        testID={`activity-subtitle-${testIdSuffix}`}
+      >
+        {subtitleParts.pre}
+      </Text>
+      {subtitleParts.avatar}
+      <Text
+        numberOfLines={1}
+        style={[
+          styles.subtitleText,
+          styles.statusText,
+          styles.subtitleAccountName,
+        ]}
+        testID={`activity-subtitle-account-name-${testIdSuffix}`}
+      >
+        {subtitleParts.name}
+      </Text>
+    </View>
+  ) : subtitle ? (
     subtitleLeadingAccessory ? (
       <View style={styles.subtitleRow}>
         {subtitleLeadingAccessory}
         <Text
           numberOfLines={1}
           style={styles.subtitleText}
           testID={`activity-subtitle-${testIdSuffix}`}
         >
           {subtitle}
         </Text>
       </View>
     ) : (
       <Text
         numberOfLines={1}
         style={styles.subtitleText}
         testID={`activity-subtitle-${testIdSuffix}`}
       >
         {subtitle}
       </Text>
     )
   ) : undefined;
   const primaryAmountNode = primaryAmount ? (
     <Text
       numberOfLines={1}

app/components/UI/ActivityListItemRow/PendingActivityListItemRow.tsx

@@ -20,6 +20,7 @@ import { ActivityListItemRowIcon } from './ActivityListItemRowIcon';
 import { ActivityListItemRowLayout } from './ActivityListItemRowLayout';
 import { resolveTransactionIconName } from './resolveIconType';
 import { useActivityListItemRowContent } from './useActivityListItemRowContent';
+import { useSubtitleAccountParts } from './useSubtitleAccountParts';
 import type { ActivityListItemRowProps } from './ActivityListItemRow.types';
 
 export function PendingActivityListItemRow({
@@ -53,6 +54,19 @@ export function PendingActivityListItemRow({
       : content.subtitle
     : undefined;
 
+  const subtitleAccountParts = useSubtitleAccountParts(
+    content,
+    styles,
+    testIdSuffix,
+  );
+  const subtitleParts =
+    subtitleAccountParts && isQueued
+      ? {
+          ...subtitleAccountParts,
+          pre: `${strings('transaction.queued')} • ${subtitleAccountParts.pre}`,
+        }
+      : subtitleAccountParts;
+
   const titleAccessory = isQueued ? undefined : (
     <View style={styles.titleSpinner}>
       <PendingSpinner testID={`activity-pending-spinner-${testIdSuffix}`} />
@@ -89,6 +103,7 @@ export function PendingActivityListItemRow({
       styles={styles}
       subtitle={subtitle}
       subtitleLeadingAccessory={subtitleLeadingAccessory}
+      subtitleParts={subtitleParts}
       title={titleOverride ?? content.title}
       titleAccessory={titleAccessory}
     />

app/components/UI/ActivityListItemRow/useActivityListItemRowContent.ts

@@ -44,6 +44,8 @@
 } from '../../../util/number/bigint';
 // eslint-disable-next-line import-x/no-restricted-paths -- TODO(ADR-0020): route-isolation backlog
 import { getPerpsDisplaySymbol } from '@metamask/perps-controller';
+import { useAccountNames } from '../../hooks/DisplayName/useAccountNames';
+import { NameType } from '../Name/Name.types';
 import type { ActivityListItemRowContent } from './ActivityListItemRow.types';
 import {
   ACTIVITY_FALLBACK_TITLE_RESOLVERS,
@@ -466,6 +468,7 @@
 function resolveCoreContent(
   item: ActivityListItem,
   bridgeHistoryItem?: BridgeHistoryItem,
+  counterpartyName?: string,
 ): Omit<
   ActivityListItemRowContent,
   'avatarTokens' | 'primaryAmount' | 'secondaryAmount'
@@ -483,6 +486,10 @@
       const cancelledLabel =
         item.type === 'receive' ? 'Receive cancelled' : 'Send cancelled';
       const subtitlePrefix = item.type === 'receive' ? 'From' : 'To';
+      const counterpartyLabel =
+        counterpartyName ||
+        shortAddress(address) ||
+        strings('transactions.unavailable');
 
       return {
         title: statusTitle(item, {
@@ -491,7 +498,16 @@
           failed: failedLabel,
           cancelled: cancelledLabel,
         }),
-        subtitle: `${subtitlePrefix}: ${shortAddress(address) ?? strings('transactions.unavailable')}`,
+        subtitle: `${subtitlePrefix}: ${counterpartyLabel}`,
+        ...(counterpartyName && address
+          ? {
+              subtitleAccount: {
+                prefix: subtitlePrefix,
+                address,
+                name: counterpartyName,
+              },
+            }
+          : {}),
         primaryToken: token,
       };
     }
@@ -1154,7 +1170,28 @@
   }
   const lendingTokenData = useTokensData(lendingAssetIds);
 
-  const content = resolveCoreContent(item, bridgeHistoryItem);
+  // The send/receive subtitle names the counterparty. Resolve it against the
+  // user's own accounts so transfers between their accounts read as
+  // "To: <account name>" instead of a hex address.
+  const counterpartyAddress =
+    item.type === 'send' || item.type === 'receive'
+      ? item.type === 'receive'
+        ? item.data.from
+        : item.data.to
+      : undefined;
+  const counterpartyName = useAccountNames(
+    counterpartyAddress
+      ? [
+          {
+            value: counterpartyAddress,
+            variation: networkChainId ?? '',
+            type: NameType.EthereumAddress,
+          },
+        ]
+      : [],
+  )[0];
+
+  const content = resolveCoreContent(item, bridgeHistoryItem, counterpartyName);
 
   let basePrimaryToken: TokenAmount | undefined;
   if (isSpendingCap) {

app/components/UI/ActivityListItemRow/useSubtitleAccountParts.tsx

@@ -0,0 +1,47 @@
+import React from 'react';
+import { View } from 'react-native';
+import { useSelector } from 'react-redux';
+import {
+  AvatarAccount,
+  AvatarBaseSize,
+} from '@metamask/design-system-react-native';
+import { getAvatarAccountVariant } from '../../../component-library/components-temp/MultichainAccounts/avatarAccountVariant';
+import { selectAvatarAccountType } from '../../../selectors/settings';
+import type { ActivityListItemRowContent } from './ActivityListItemRow.types';
+import type { ActivityListItemRowStyles } from './ActivityListItemRow.styles';
+
+/**
+ * Builds the structured "To: <avatar> Name" subtitle for rows whose
+ * counterparty resolved to one of the user's own accounts, using the same
+ * account avatar the Accounts list shows.
+ */
+export function useSubtitleAccountParts(
+  content: ActivityListItemRowContent,
+  styles: ActivityListItemRowStyles,
+  testIdSuffix: string | number | undefined,
+): { pre: string; avatar: React.ReactNode; name: string } | undefined {
+  const avatarVariant = getAvatarAccountVariant(
+    useSelector(selectAvatarAccountType),
+  );
+  const account = content.subtitleAccount;
+  if (!account) {
+    return undefined;
+  }
+
+  return {
+    pre: `${account.prefix}: `,
+    avatar: (
+      <View
+        style={styles.subtitleAccountAvatar}
+        testID={`activity-subtitle-account-avatar-${testIdSuffix}`}
+      >
+        <AvatarAccount
+          address={account.address}
+          variant={avatarVariant}
+          size={AvatarBaseSize.Xs}
+        />
+      </View>
+    ),
+    name: account.name,
+  };
+}