chore(runway): cherry-pick fix: fix recipient account icons cp-7.60.0 (#23362)

## **Description**

The icon being used for each recipient addresses was not re-using their
account group icons (we use the EVM address of a multichain account
group as the seed of account's icons).

This PR fixes this while keeping the original `recipient.address` as a
fallback (which should never happen anyway).

## **Changelog**

CHANGELOG entry: Fix account's icons for send flows

## **Related issues**

Fixes:
- #22806

## **Manual testing steps**

```gherkin
Feature: Send non-EVM token

  Scenario: user starts a send flow for Solana
    Given the user has funds

    When user selects the recipient address
    Then he should see the same icons than the one used for the account list
```

## **Screenshots/Recordings**

### **Before**


https://github.com/user-attachments/assets/100969c2-15e9-49c4-a2f3-cd24aac8e839

<img width="382" height="192" alt="Screenshot 2025-11-27 at 13 28 36"
src="https://github.com/user-attachments/assets/53225dd9-8e47-4788-850e-09579c312e96"
/>
<img width="377" height="250" alt="Screenshot 2025-11-27 at 13 28 22"
src="https://github.com/user-attachments/assets/07e5b9aa-4a1c-44ff-ac6a-402a0712bd1a"
/>

### **After**


https://github.com/user-attachments/assets/221c05e4-b040-4583-b81f-de674f716db1

<img width="385" height="220" alt="Screenshot 2025-11-27 at 13 29 52"
src="https://github.com/user-attachments/assets/02b959f4-7334-454f-8939-931054f68bf3"
/>
<img width="383" height="194" alt="Screenshot 2025-11-27 at 13 29 36"
src="https://github.com/user-attachments/assets/a1eb109d-e74a-4de2-9844-ec5675e565c3"
/>

## **Pre-merge author checklist**

- [ ] 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).
- [ ] I've completed the PR template to the best of my ability
- [ ] I’ve included tests if applicable
- [ ] I’ve documented my code using [JSDoc](https://jsdoc.app/) format
if applicable
- [ ] 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]
> Recipient avatars now derive from the account group’s icon seed (with
address fallback), and useAccounts returns accountGroupId; tests updated
accordingly.
> 
> - **UI (recipient)**:
> - Avatar `accountAddress` now sourced from account group icon seed via
`selectIconSeedAddressByAccountGroupId`, with fallback to
`recipient.address`.
> - `RecipientType` extended with `accountGroupId`; Redux selector added
to compute avatar seed.
> - **Hooks**:
> - `useAccounts` now includes `accountGroupId` in returned recipient
objects.
> - **Tests**:
> - Updated `useAccounts.test.ts` expectations to include
`accountGroupId` across EVM, Solana, Bitcoin, and Tron cases.
> 
> <sup>Written by [Cursor
Bugbot](https://cursor.com/dashboard?tab=bugbot) for commit
bcc1017. This will update automatically
on new commits. Configure
[here](https://cursor.com/dashboard?tab=bugbot).</sup>
<!-- /CURSOR_SUMMARY -->

Author: ccharly

app/components/Views/confirmations/components/UI/recipient/recipient.tsx

@@ -19,10 +19,15 @@ import styleSheet from './recipient.styles';
 import { useStyles } from '../../../../../hooks/useStyles';
 import { AccountTypeLabel } from '../account-type-label';
 import { ACCOUNT_TYPE_LABELS } from '../../../../../../constants/account-type-labels';
+import { AccountGroupId } from '@metamask/account-api';
+import { useSelector } from 'react-redux';
+import { selectIconSeedAddressByAccountGroupId } from '../../../../../../selectors/multichainAccounts/accounts';
+import { RootState } from '../../../../../../reducers';
 
 export interface RecipientType {
   address: string;
   accountName?: string;
+  accountGroupId?: AccountGroupId;
   accountGroupName?: string;
   accountType?: string;
   contactName?: string;
@@ -46,6 +51,20 @@ export function Recipient({
   const tw = useTailwind();
   const { styles } = useStyles(styleSheet, {});
 
+  // Always default to recipient address if account group has no associated icon seed
+  // address (which should never really happen).
+  const accountAvatarSeedAddress = useSelector((state: RootState) => {
+    if (!recipient.accountGroupId) return recipient.address;
+    try {
+      const selector = selectIconSeedAddressByAccountGroupId(
+        recipient.accountGroupId,
+      );
+      return selector(state);
+    } catch {
+      return recipient.address;
+    }
+  });
+
   const handlePressRecipient = useCallback(() => {
     onPress?.(recipient);
   }, [recipient, onPress]);
@@ -73,7 +92,7 @@ export function Recipient({
           <Avatar
             variant={AvatarVariant.Account}
             type={accountAvatarType}
-            accountAddress={recipient.address}
+            accountAddress={accountAvatarSeedAddress}
             size={AvatarSize.Md}
           />
         </Box>

app/components/Views/confirmations/hooks/send/useAccounts.test.ts

@@ -212,6 +212,7 @@ describe('useAccounts', () => {
 
       expect(result.current).toEqual([
         {
+          accountGroupId: 'group-1',
           accountGroupName: 'Group 1',
           accountName: 'Account 1',
           accountType: 'eip155:eoa',
@@ -273,6 +274,7 @@ describe('useAccounts', () => {
 
       expect(result.current).toEqual([
         {
+          accountGroupId: 'group-2',
           accountGroupName: 'Group 2',
           accountName: 'Solana Account 1',
           accountType: 'solana:data-account',
@@ -317,6 +319,7 @@ describe('useAccounts', () => {
 
       expect(result.current).toEqual([
         {
+          accountGroupId: 'group-3',
           accountGroupName: 'Group 3',
           accountName: 'Bitcoin Account 1',
           accountType: 'bip122:p2wpkh',
@@ -378,6 +381,7 @@ describe('useAccounts', () => {
 
       expect(result.current).toEqual([
         {
+          accountGroupId: 'group-4',
           accountGroupName: 'Group 4',
           accountName: 'Tron Account 1',
           accountType: 'tron:eoa',
@@ -598,13 +602,15 @@ describe('useAccounts', () => {
       expect(result.current).toEqual(
         expect.arrayContaining([
           {
+            accountGroupId: 'group-1',
             accountGroupName: 'Group 1',
             accountName: 'Account 1',
             accountType: 'eip155:eoa',
             address: '0x1234567890123456789012345678901234567890',
             walletName: 'Wallet 1',
           },
           {
+            accountGroupId: 'group-3',
             accountGroupName: 'Group 3',
             accountName: 'Account 2',
             accountType: 'eip155:eoa',

app/components/Views/confirmations/hooks/send/useAccounts.ts

@@ -85,6 +85,7 @@ export const useAccounts = (): RecipientType[] => {
       if (!account) return null;
 
       return {
+        accountGroupId: accountGroup.id,
         accountGroupName: accountGroup.metadata.name,
         accountName: account.metadata.name,
         accountType: account.type,