release(runway): cherry-pick fix: Fix account icons in send flow (#36917)

- fix: cp-13.5.0 Fix account icons in send flow (#36877)

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

<!--
Write a short description of the changes included in this pull request,
also include relevant motivation and context. Have in mind the following
questions:
1. What is the reason for the change?
2. What is the improvement/solution?
-->

This PR aims to centralise seed account icon map in a hook and use it in
send flow.

[![Open in GitHub

Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/MetaMask/metamask-extension/pull/36877?quickstart=1)

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

## **Related issues**

Fixes: #36657

## **Manual testing steps**

Account icon should be consistent as other parts of the wallet.

## **Screenshots/Recordings**

<!-- If applicable, add screenshots and/or recordings to visualize the
before and after of your change. -->

### **Before**

<!-- [screenshots/recordings] -->

### **After**




https://github.com/user-attachments/assets/466421d4-e7bc-4a35-98e9-236c7d85d558



## **Pre-merge author checklist**

- [X] I've followed [MetaMask Contributor
Docs](https://github.com/MetaMask/contributor-docs) and [MetaMask
Extension Coding

Standards](https://github.com/MetaMask/metamask-extension/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-extension/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]
> Adds a hook to map account addresses to seed icon addresses and
updates send flow to render consistent avatars using this map.
> 
> - **Send Flow UI**:
>   - `Recipient`: Passes `seedIcon ?? address` to `PreferredAvatar`.
> - `RecipientInput`: Uses mapped seed address for avatar when a
recipient is resolved.
> - **Hooks**:
> - New `useAccountAddressSeedIconMap` builds a map from account groups
to seed icon addresses.
> - `useAccountRecipients`/`useContactRecipients`: Include `seedIcon` in
`Recipient` objects and update memo deps.
> - **Tests**:
>   - Add comprehensive tests for `useAccountAddressSeedIconMap`.
> - Update related tests to mock the new hook and reflect avatar/seed
behavior.
> 
> <sup>Written by [Cursor
Bugbot](https://cursor.com/dashboard?tab=bugbot) for commit
08a33ba. This will update automatically
on new commits. Configure
[here](https://cursor.com/dashboard?tab=bugbot).</sup>
<!-- /CURSOR_SUMMARY -->


[743b315](743b315)

Co-authored-by: OGPoyraz <[email protected]>
Co-authored-by: Gauthier Petetin <[email protected]>

Author: 3 people

ui/pages/confirmations/components/UI/recipient/recipient.test.tsx

@@ -5,6 +5,12 @@ import configureStore from '../../../../../store/store';
 import mockDefaultState from '../../../../../../test/data/mock-state.json';
 import { Recipient } from './recipient';
 
+jest.mock('../../../hooks/send/useAccountAddressSeedIconMap', () => ({
+  useAccountAddressSeedIconMap: jest.fn().mockReturnValue({
+    accountAddressSeedIconMap: new Map(),
+  }),
+}));
+
 const mockContactRecipient = {
   address: '0x1234567890abcdef1234567890abcdef12345678',
   contactName: 'John Doe',

ui/pages/confirmations/components/UI/recipient/recipient.tsx

@@ -24,7 +24,7 @@ export const Recipient = ({
   recipient: RecipientType;
   onClick: (recipient: RecipientType) => void;
 }) => {
-  const { address } = recipient;
+  const { address, seedIcon } = recipient;
   const recipientName = isAccount
     ? recipient.accountGroupName
     : recipient.contactName;
@@ -48,7 +48,7 @@ export const Recipient = ({
       onClick={() => onClick(recipient)}
     >
       <PreferredAvatar
-        address={address}
+        address={seedIcon ?? address}
         size={AvatarAccountSize.Lg}
         data-testid="avatar"
       />

ui/pages/confirmations/components/send/recipient-input/recipient-input.test.tsx

@@ -15,6 +15,11 @@ jest.mock('../../../../../hooks/useI18nContext');
 jest.mock('../../../hooks/send/metrics/useRecipientSelectionMetrics');
 jest.mock('../../../context/send');
 jest.mock('../../../hooks/send/useRecipients');
+jest.mock('../../../hooks/send/useAccountAddressSeedIconMap', () => ({
+  useAccountAddressSeedIconMap: jest.fn().mockReturnValue({
+    accountAddressSeedIconMap: new Map(),
+  }),
+}));
 
 describe('RecipientInput', () => {
   const mockUseI18nContext = jest.mocked(useI18nContext);

ui/pages/confirmations/components/send/recipient-input/recipient-input.tsx

@@ -29,6 +29,7 @@ import {
 import { useI18nContext } from '../../../../../hooks/useI18nContext';
 import { useRecipientValidation } from '../../../hooks/send/useRecipientValidation';
 import { useRecipients } from '../../../hooks/send/useRecipients';
+import { useAccountAddressSeedIconMap } from '../../../hooks/send/useAccountAddressSeedIconMap';
 import { useRecipientSelectionMetrics } from '../../../hooks/send/metrics/useRecipientSelectionMetrics';
 import { useSendContext } from '../../../context/send';
 import { ConfusableRecipientName } from './confusable-recipient-name';
@@ -47,12 +48,15 @@ export const RecipientInput = ({
   const recipients = useRecipients();
   const t = useI18nContext();
   const { to, updateTo } = useSendContext();
+  const { accountAddressSeedIconMap } = useAccountAddressSeedIconMap();
   const {
     recipientConfusableCharacters,
     recipientError,
     recipientResolvedLookup,
     toAddressValidated,
   } = recipientValidationResult;
+  const avatarSeedAddress =
+    accountAddressSeedIconMap.get(to?.toLowerCase() as string) ?? to ?? '';
 
   const onToChange = useCallback(
     (e) => {
@@ -105,7 +109,7 @@ export const RecipientInput = ({
         >
           <Box alignItems={AlignItems.center} display={Display.Flex}>
             <PreferredAvatar
-              address={resolvedAddress}
+              address={avatarSeedAddress}
               size={AvatarAccountSize.Md}
             />
             <Box

ui/pages/confirmations/hooks/send/useAccountAddressSeedIconMap.test.ts

@@ -0,0 +1,173 @@
+import { renderHookWithProvider } from '../../../../../test/lib/render-helpers';
+import mockState from '../../../../../test/data/mock-state.json';
+import * as accountTreeSelectors from '../../../../selectors/multichain-accounts/account-tree';
+import { AccountGroupWithInternalAccounts } from '../../../../selectors/multichain-accounts/account-tree.types';
+import { useAccountAddressSeedIconMap } from './useAccountAddressSeedIconMap';
+
+jest.mock('../../../../selectors/multichain-accounts/account-tree');
+
+describe('useAccountAddressSeedIconMap', () => {
+  const mockGetAccountGroupWithInternalAccounts = jest.spyOn(
+    accountTreeSelectors,
+    'getAccountGroupWithInternalAccounts',
+  );
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+    mockGetAccountGroupWithInternalAccounts.mockReturnValue([]);
+  });
+
+  it('creates seed address map from account groups with single account per group', () => {
+    const mockAccountGroups = [
+      {
+        accounts: [{ address: '0x1234567890abcdef1234567890abcdef12345678' }],
+      },
+      {
+        accounts: [{ address: '0xABCDEF1234567890ABCDEF1234567890ABCDEF12' }],
+      },
+    ];
+
+    mockGetAccountGroupWithInternalAccounts.mockReturnValue(
+      mockAccountGroups as AccountGroupWithInternalAccounts[],
+    );
+
+    const { result } = renderHookWithProvider(
+      () => useAccountAddressSeedIconMap(),
+      mockState,
+    );
+
+    expect(result.current.accountAddressSeedIconMap.size).toBe(2);
+    expect(
+      result.current.accountAddressSeedIconMap.get(
+        '0x1234567890abcdef1234567890abcdef12345678',
+      ),
+    ).toBe('0x1234567890abcdef1234567890abcdef12345678');
+    expect(
+      result.current.accountAddressSeedIconMap.get(
+        '0xabcdef1234567890abcdef1234567890abcdef12',
+      ),
+    ).toBe('0xABCDEF1234567890ABCDEF1234567890ABCDEF12');
+  });
+
+  it('creates seed address map from account groups with multiple accounts per group', () => {
+    const mockAccountGroups = [
+      {
+        accounts: [
+          { address: '0x1111111111111111111111111111111111111111' },
+          { address: '0x2222222222222222222222222222222222222222' },
+          { address: '0x3333333333333333333333333333333333333333' },
+        ],
+      },
+      {
+        accounts: [
+          { address: '0xAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA' },
+          { address: '0xBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBB' },
+        ],
+      },
+    ];
+
+    mockGetAccountGroupWithInternalAccounts.mockReturnValue(
+      mockAccountGroups as AccountGroupWithInternalAccounts[],
+    );
+
+    const { result } = renderHookWithProvider(
+      () => useAccountAddressSeedIconMap(),
+      mockState,
+    );
+
+    expect(result.current.accountAddressSeedIconMap.size).toBe(5);
+    expect(
+      result.current.accountAddressSeedIconMap.get(
+        '0x1111111111111111111111111111111111111111',
+      ),
+    ).toBe('0x1111111111111111111111111111111111111111');
+    expect(
+      result.current.accountAddressSeedIconMap.get(
+        '0x2222222222222222222222222222222222222222',
+      ),
+    ).toBe('0x1111111111111111111111111111111111111111');
+    expect(
+      result.current.accountAddressSeedIconMap.get(
+        '0x3333333333333333333333333333333333333333',
+      ),
+    ).toBe('0x1111111111111111111111111111111111111111');
+    expect(
+      result.current.accountAddressSeedIconMap.get(
+        '0xaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa',
+      ),
+    ).toBe('0xAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA');
+    expect(
+      result.current.accountAddressSeedIconMap.get(
+        '0xbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb',
+      ),
+    ).toBe('0xAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA');
+  });
+
+  it('returns empty map when no account groups exist', () => {
+    const { result } = renderHookWithProvider(
+      () => useAccountAddressSeedIconMap(),
+      mockState,
+    );
+
+    expect(result.current.accountAddressSeedIconMap.size).toBe(0);
+  });
+
+  it('handles account groups with empty accounts array', () => {
+    const mockAccountGroups = [
+      {
+        accounts: [],
+      },
+      {
+        accounts: [{ address: '0x1111111111111111111111111111111111111111' }],
+      },
+    ];
+
+    mockGetAccountGroupWithInternalAccounts.mockReturnValue(
+      mockAccountGroups as AccountGroupWithInternalAccounts[],
+    );
+
+    const { result } = renderHookWithProvider(
+      () => useAccountAddressSeedIconMap(),
+      mockState,
+    );
+
+    expect(result.current.accountAddressSeedIconMap.size).toBe(1);
+    expect(
+      result.current.accountAddressSeedIconMap.get(
+        '0x1111111111111111111111111111111111111111',
+      ),
+    ).toBe('0x1111111111111111111111111111111111111111');
+  });
+
+  it('handles mixed case addresses by converting keys to lowercase', () => {
+    const mockAccountGroups = [
+      {
+        accounts: [
+          { address: '0xAbCdEf1234567890AbCdEf1234567890AbCdEf12' },
+          { address: '0X1234567890ABCDEF1234567890ABCDEF12345678' },
+        ],
+      },
+    ];
+
+    mockGetAccountGroupWithInternalAccounts.mockReturnValue(
+      mockAccountGroups as AccountGroupWithInternalAccounts[],
+    );
+
+    const { result } = renderHookWithProvider(
+      () => useAccountAddressSeedIconMap(),
+      mockState,
+    );
+
+    expect(result.current.accountAddressSeedIconMap.size).toBe(2);
+    expect(
+      result.current.accountAddressSeedIconMap.get(
+        '0xabcdef1234567890abcdef1234567890abcdef12',
+      ),
+    ).toBe('0xAbCdEf1234567890AbCdEf1234567890AbCdEf12');
+    expect(
+      result.current.accountAddressSeedIconMap.get(
+        '0x1234567890abcdef1234567890abcdef12345678',
+      ),
+    ).toBe('0xAbCdEf1234567890AbCdEf1234567890AbCdEf12');
+  });
+});

ui/pages/confirmations/hooks/send/useAccountAddressSeedIconMap.ts

@@ -0,0 +1,31 @@
+import { useMemo } from 'react';
+import { useSelector } from 'react-redux';
+import { getAccountGroupWithInternalAccounts } from '../../../../selectors/multichain-accounts/account-tree';
+
+export const useAccountAddressSeedIconMap = () => {
+  const accountGroupsWithAddresses = useSelector(
+    getAccountGroupWithInternalAccounts,
+  );
+
+  const accountAddressSeedIconMap = useMemo(() => {
+    const map = new Map<string, string>();
+
+    accountGroupsWithAddresses.forEach((accountGroup) => {
+      const { accounts } = accountGroup;
+
+      if (accounts.length === 0) {
+        return;
+      }
+
+      const seedAddress = accounts[0].address;
+
+      accounts.forEach((account) => {
+        map.set(account.address.toLowerCase(), seedAddress);
+      });
+    });
+
+    return map;
+  }, [accountGroupsWithAddresses]);
+
+  return { accountAddressSeedIconMap };
+};

ui/pages/confirmations/hooks/send/useAccountRecipients.test.ts

@@ -13,6 +13,11 @@ jest.mock('./useSendType');
 jest.mock('../../../../selectors/multichain-accounts/account-tree');
 jest.mock('../../context/send');
 jest.mock('../../utils/account');
+jest.mock('./useAccountAddressSeedIconMap', () => ({
+  useAccountAddressSeedIconMap: jest.fn().mockReturnValue({
+    accountAddressSeedIconMap: new Map(),
+  }),
+}));
 
 const mockUseSendType = jest.spyOn(useSendTypeModule, 'useSendType');
 const mockGetWalletsWithAccounts = jest.spyOn(

ui/pages/confirmations/hooks/send/useAccountRecipients.ts

@@ -9,10 +9,12 @@ import {
 import { useSendContext } from '../../context/send';
 import { type Recipient } from './useRecipients';
 import { useSendType } from './useSendType';
+import { useAccountAddressSeedIconMap } from './useAccountAddressSeedIconMap';
 
 export const useAccountRecipients = (): Recipient[] => {
   const { isEvmSendType, isSolanaSendType } = useSendType();
   const { from } = useSendContext();
+  const { accountAddressSeedIconMap } = useAccountAddressSeedIconMap();
 
   const walletsWithAccounts = useSelector(getWalletsWithAccounts);
 
@@ -36,6 +38,9 @@ export const useAccountRecipients = (): Recipient[] => {
 
           if (shouldInclude) {
             recipients.push({
+              seedIcon: accountAddressSeedIconMap.get(
+                account.address.toLowerCase(),
+              ),
               accountGroupName,
               address: account.address,
               walletName,
@@ -46,5 +51,11 @@ export const useAccountRecipients = (): Recipient[] => {
     });
 
     return recipients;
-  }, [walletsWithAccounts, isEvmSendType, isSolanaSendType, from]);
+  }, [
+    from,
+    isEvmSendType,
+    isSolanaSendType,
+    accountAddressSeedIconMap,
+    walletsWithAccounts,
+  ]);
 };

ui/pages/confirmations/hooks/send/useContactRecipients.test.ts

@@ -9,6 +9,11 @@ import { useSendType } from './useSendType';
 
 jest.mock('./useSendType');
 jest.mock('../../../../selectors');
+jest.mock('./useAccountAddressSeedIconMap', () => ({
+  useAccountAddressSeedIconMap: jest.fn().mockReturnValue({
+    accountAddressSeedIconMap: new Map(),
+  }),
+}));
 jest.mock('ethers/lib/utils');
 jest.mock('@metamask/bridge-controller');
 

ui/pages/confirmations/hooks/send/useContactRecipients.ts

@@ -7,18 +7,24 @@ import { AddressBookEntry } from '@metamask/address-book-controller';
 import { getCompleteAddressBook } from '../../../../selectors';
 import { type Recipient } from './useRecipients';
 import { useSendType } from './useSendType';
+import { useAccountAddressSeedIconMap } from './useAccountAddressSeedIconMap';
 
 export const useContactRecipients = (): Recipient[] => {
   const { isEvmSendType, isSolanaSendType } = useSendType();
   const addressBook = useSelector(getCompleteAddressBook);
+  const { accountAddressSeedIconMap } = useAccountAddressSeedIconMap();
 
-  const processContacts = useCallback((contact: AddressBookEntry) => {
-    return {
-      address: contact.address,
-      contactName: contact.name,
-      isContact: true,
-    };
-  }, []);
+  const processContacts = useCallback(
+    (contact: AddressBookEntry) => {
+      return {
+        address: contact.address,
+        contactName: contact.name,
+        isContact: true,
+        seedIcon: accountAddressSeedIconMap.get(contact.address.toLowerCase()),
+      };
+    },
+    [accountAddressSeedIconMap],
+  );
 
   if (isEvmSendType) {
     return addressBook