fix: hovered address list component (#37539)

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

This PR introduces a new address list component that displays aggregated
account addresses by chain type. EVM addresses will now be grouped
together.

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

[![Open in GitHub
Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/MetaMask/metamask-extension/pull/37539?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: Adds a hovered component when the address link is
hovered over.

## **Related issues**

Fixes:
https://consensyssoftware.atlassian.net/browse/MUL-1226?atlOrigin=eyJpIjoiNGFiYzMyNTBlODg1NDI1NjhjZDRlNjhkOTI1NDk5YWEiLCJwIjoiaiJ9
Fixes: 

## **Manual testing steps**

1. Open the wallet
2. See the network address link
3. Hover over the link and see and address list appear
4. Click on view all to go to the full screen address page. 

## **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/642ebac2-7682-46d9-96c6-015bf37b8938





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

## **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 hoverable multichain address list in the header that aggregates
EVM networks with avatars, copy action, and a "View all" link, plus
supporting components, i18n, styles, stories, and tests.
> 
> - **UI/Components**:
> - **MultichainHoveredAddressRowsList**: New hover popover listing
aggregated addresses per network group with priority ordering, copy
support, and "View all" navigation.
> - **MultichainAggregatedAddressListRow**: Row showing grouped network
avatars, derived group name (incl. Bitcoin SegWit), truncated address,
and copy feedback.
> - **MultichainAccountNetworkGroup**: New reusable avatar group for
networks (CAIP→hex conversion, priority sorting, limit display).
> - **App Header Integration**:
> - Replaces networks link/count with hoverable address list + network
avatars; removes usage of `networkAddress(es)` strings.
> - **i18n**:
> - Adds `multichainAddressViewAll`, `networkNameBitcoinSegwit`; removes
`networkAddress`/`networkAddresses`.
> - **Styles**:
> - Adds hover/row styling for multichain address list and header
subtitle.
> - **Types/Exports**:
>   - Exports `CopyParams` from `multichain-address-row`.
> - **Stories/Tests**:
> - Comprehensive Storybook stories and unit tests for new components
and behaviors (hover, copy, sorting, navigation).
> 
> <sup>Written by [Cursor
Bugbot](https://cursor.com/dashboard?tab=bugbot) for commit
34b0287. This will update automatically
on new commits. Configure
[here](https://cursor.com/dashboard?tab=bugbot).</sup>
<!-- /CURSOR_SUMMARY -->

Author: montelaidev

app/_locales/en/messages.json

@@ -0,0 +1,2 @@
+export { MultichainAccountNetworkGroup } from './multichain-account-network-group';
+export type { MultichainAccountNetworkGroupProps } from './multichain-account-network-group';

app/_locales/en_GB/messages.json

@@ -0,0 +1,162 @@
+import React, { useMemo } from 'react';
+import { useSelector } from 'react-redux';
+import { AccountGroupId } from '@metamask/account-api';
+import { Box } from '@metamask/design-system-react';
+import { AvatarGroup } from '../../multichain/avatar-group';
+import { AvatarType } from '../../multichain/avatar-group/avatar-group.types';
+import { CHAIN_ID_TO_NETWORK_IMAGE_URL_MAP } from '../../../../shared/constants/network';
+import { convertCaipToHexChainId } from '../../../../shared/modules/network.utils';
+import { getInternalAccountListSpreadByScopesByGroupId } from '../../../selectors/multichain-accounts/account-tree';
+
+export type MultichainAccountNetworkGroupProps = {
+  /**
+   * The account group ID to fetch networks for
+   */
+  groupId?: AccountGroupId;
+  /**
+   * Array of specific chain IDs to display
+   * - If provided with groupId: shows only chains that exist in both the group and this list
+   * - If provided without groupId: shows only these specific chains
+   */
+  chainIds?: string[];
+  /**
+   * Whether to exclude test networks (default: true)
+   */
+  excludeTestNetworks?: boolean;
+  /**
+   * Maximum number of avatars to display before showing "+X"
+   */
+  limit?: number;
+  /**
+   * Optional className for additional styling
+   */
+  className?: string;
+};
+
+/**
+ * A reusable component that displays a group of network avatars.
+ * Can fetch networks based on account group ID or accept explicit chain IDs.
+ * Handles conversion from CAIP chain IDs to hex format for EVM chains.
+ *
+ * @param props - The component props
+ * @param props.groupId - The account group ID to fetch networks for. When provided, fetches chain IDs from the account group.
+ * @param props.chainIds - Array of specific chain IDs to display. Behavior depends on groupId:
+ * - If provided with groupId: shows only chains that exist in both the group and this list (intersection)
+ * - If provided without groupId: shows only these specific chains
+ * @param props.excludeTestNetworks - Whether to exclude test networks from display. Defaults to true.
+ * @param props.limit - Maximum number of avatars to display before showing "+X" indicator. Defaults to 4.
+ * @param props.className - Optional CSS class name for additional styling
+ * @returns A React component displaying network avatars in a group
+ */
+export const MultichainAccountNetworkGroup: React.FC<
+  MultichainAccountNetworkGroupProps
+> = ({
+  groupId,
+  chainIds,
+  excludeTestNetworks = true,
+  limit = 4,
+  className,
+}) => {
+  // Fetch chain IDs from account group if groupId is provided
+  const accountGroupScopes = useSelector((state) =>
+    groupId
+      ? getInternalAccountListSpreadByScopesByGroupId(state, groupId)
+      : [],
+  );
+
+  const filteredChainIds = useMemo(() => {
+    // If only filterChainIds is provided (no groupId), show those chains
+    if (chainIds && !groupId) {
+      return chainIds;
+    }
+
+    // If groupId is provided
+    if (groupId && accountGroupScopes.length > 0) {
+      // Extract unique chain IDs from account group scopes
+      const groupChainIds = new Set<string>();
+      accountGroupScopes.forEach((item) => {
+        groupChainIds.add(item.scope);
+      });
+
+      // If filterChainIds is also provided, show intersection
+      if (chainIds) {
+        const filterSet = new Set(chainIds);
+        return Array.from(groupChainIds).filter((chainId) =>
+          filterSet.has(chainId),
+        );
+      }
+
+      // Otherwise, show all chains from the group
+      return Array.from(groupChainIds);
+    }
+
+    return [];
+  }, [chainIds, groupId, accountGroupScopes]);
+
+  const networkData = useMemo(() => {
+    if (excludeTestNetworks) {
+      // TODO: Add test network filtering logic here
+      // For now, we'll keep all networks
+    }
+
+    // Define chain priority - these chains will appear first in this order
+    const chainPriority: Record<string, number> = {
+      // Ethereum mainnet
+      'eip155:1': 1,
+      '0x1': 1,
+      // Linea mainnet
+      'eip155:59144': 2,
+      '0xe708': 2,
+      // Solana mainnet
+      'solana:5eykt4UsFv8P8NJdTREpY1vzqKqZKvdp': 3,
+      // Bitcoin mainnet
+      'bip122:000000000019d6689c085ae165831e93': 4,
+    };
+
+    // Sort chainIds based on priority
+    const sortedChainIds = [...filteredChainIds].sort((a, b) => {
+      const priorityA = chainPriority[a] || 999;
+      const priorityB = chainPriority[b] || 999;
+      return priorityA - priorityB;
+    });
+
+    return sortedChainIds
+      .map((chain) => {
+        let hexChainId = chain;
+        // Convert CAIP chain ID to hex format for EVM chains
+        if (chain.startsWith('eip155:')) {
+          try {
+            hexChainId = convertCaipToHexChainId(
+              chain as `${string}:${string}`,
+            );
+          } catch {
+            // If conversion fails, fall back to using the original chain ID
+            hexChainId = chain;
+          }
+        }
+        return {
+          avatarValue:
+            CHAIN_ID_TO_NETWORK_IMAGE_URL_MAP[
+              hexChainId as keyof typeof CHAIN_ID_TO_NETWORK_IMAGE_URL_MAP
+            ],
+        };
+      })
+      .filter((network) => network.avatarValue); // Only include networks with valid avatar images
+  }, [filteredChainIds, excludeTestNetworks]);
+
+  return (
+    <Box
+      style={{
+        flexShrink: 1,
+        width: 'fit-content',
+      }}
+    >
+      <AvatarGroup
+        limit={limit}
+        members={networkData}
+        avatarType={AvatarType.NETWORK}
+        className={className}
+      />
+    </Box>
+  );
+};

app/_locales/ga/messages.json

@@ -3,3 +3,4 @@
 @import "multichain-account-menu-items";
 @import "account-details-row";
 @import "add-multichain-account";
+@import "multichain-address-rows-hovered-list";

ui/components/multichain-accounts/multichain-account-network-group/index.ts

@@ -27,7 +27,7 @@ import { getImageForChainId } from '../../../selectors/multichain';
 import { convertCaipToHexChainId } from '../../../../shared/modules/network.utils';
 import { useI18nContext } from '../../../hooks/useI18nContext';
 
-type CopyParams = {
+export type CopyParams = {
   /**
    * Message to display when the copy callback is executed
    */

ui/components/multichain-accounts/multichain-account-network-group/multichain-account-network-group.tsx

@@ -0,0 +1,4 @@
+.multichain-address-row {
+  transition: background-color 0.3s ease-in-out;
+}
+

ui/components/multichain-accounts/multichain-accounts.scss

@@ -0,0 +1,2 @@
+export { MultichainAggregatedAddressListRow } from './multichain-aggregated-list-row';
+export { MultichainHoveredAddressRowsList } from './multichain-hovered-address-rows-hovered-list';