fix: hide chain avatar beside Popular Networks (#29948) (#30263)

<!--
Please submit this PR as a draft initially.

Do not mark it as "Ready for review" until this PR meets the canonical
Definition of Ready For Review in `docs/readme/ready-for-review.md`.

In short: the template must be materially complete (not just section
titles
present), all status checks must be currently passing, and the only
expected
follow-up commits must be reviewer-driven.
-->

## **Description**

When multiple networks are enabled, the token list and Activity tabs
show the **Popular Networks** label using `totalEnabledNetworksCount >
1`. The network **avatar** was still gated on `!areAllNetworksSelected`
for **popular EVM** rows only. After adding a custom network (e.g.
Tempo) or leaving one popular chain off, that mismatch showed an
**Ethereum** (or first-enabled) icon next to **Popular Networks**, which
is incorrect per product expectation ([issue
#29948](#29948)).

**Change:** show the filter avatar only when we are **not** in the
Popular Networks label state **and** not all popular EVM networks are
selected—aligned in `BaseControlBar` (Tokens / DeFi control bar) and
`ActivityView` (Activity tab).

## **Changelog**

CHANGELOG entry: Fixed Popular Networks filter incorrectly showing a
chain icon after enabling additional networks (e.g. Tempo).

## **Related issues**

Fixes: #29948

## **Manual testing steps**

```gherkin
Feature: Popular Networks filter label and icon

  Scenario: No icon beside Popular Networks after adding a custom network
    Given the wallet has "All popular networks" (or equivalent multi-network) enabled with more than one network in the global filter
    When the user opens Menu > Networks, adds a custom network (e.g. Tempo), and closes the menu
    Then the Tokens tab network filter shows "Popular Networks" with no chain avatar beside it

  Scenario: Activity tab matches Tokens behavior
    Given the same multi-network state as above
    When the user opens the Activity tab (Transactions) network filter
    Then the filter shows "Popular networks" with no chain avatar beside it
```

## **Screenshots/Recordings**

<!-- Author will add before/after recordings in this section. -->

### **Before**



https://github.com/user-attachments/assets/80528325-e123-4d7d-bf4f-2140c8c49df1



### **After**


https://github.com/user-attachments/assets/0984784e-9114-4a6e-aaab-b118778eec4b





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

- [ ] 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]
> **Low Risk**
> Low risk UI-only conditional rendering change that affects when the
network filter avatar is shown; main risk is minor visual regression
across network-selection edge cases.
> 
> **Overview**
> Prevents the network filter from showing a chain `Avatar` when the
label is `wallet.popular_networks` (i.e., when
`totalEnabledNetworksCount > 1`) in both `BaseControlBar` and
`ActivityView`.
> 
> Updates unit tests to assert **no avatar** beside “Popular networks”
in multi-network scenarios, while still rendering an avatar for
single-network filters when not all popular networks are selected.
> 
> <sup>Reviewed by [Cursor Bugbot](https://cursor.com/bugbot) for commit
e0a3038. Bugbot is set up for automated
code reviews on this repo. Configure
[here](https://www.cursor.com/dashboard/bugbot).</sup>
<!-- /CURSOR_SUMMARY -->

Author: wachunei

app/components/UI/shared/BaseControlBar/BaseControlBar.test.tsx

@@ -9,6 +9,7 @@ import { useNavigation } from '@react-navigation/native';
 import { strings } from '../../../../../locales/i18n';
 import ButtonBase from '../../../../component-library/components/Buttons/Button/foundation/ButtonBase';
 import ButtonIcon from '../../../../component-library/components/Buttons/ButtonIcon';
+import Avatar from '../../../../component-library/components/Avatars/Avatar';
 
 // Mock dependencies
 jest.mock('../../../../util/networks', () => ({
@@ -205,6 +206,8 @@ describe('BaseControlBar', () => {
     useNetworksByNamespaceModule.useNetworksByCustomNamespace.mockReturnValue({
       areAllNetworksSelected: false,
       totalEnabledNetworksCount: 2,
+      networkCount: 10,
+      selectedCount: 9,
     });
     useStylesModule.useStyles.mockReturnValue({ styles: defaultStyles });
     useNetworkEnablementModule.useNetworkEnablement.mockReturnValue({
@@ -289,19 +292,28 @@ describe('BaseControlBar', () => {
       expect(getByText('wallet.current_network')).toBeTruthy();
     });
 
-    it('shows network avatar when not all networks selected', () => {
+    it('does not show network avatar beside "Popular Networks" when multiple networks enabled', () => {
       useNetworksByNamespaceModule.useNetworksByCustomNamespace.mockReturnValue(
         {
           areAllNetworksSelected: false,
           totalEnabledNetworksCount: 2,
         },
       );
 
-      renderComponent();
-      // Avatar should be rendered (tested via component structure)
-      expect(
-        useNetworksByNamespaceModule.useNetworksByCustomNamespace,
-      ).toHaveBeenCalled();
+      const { UNSAFE_queryAllByType } = renderComponent();
+      expect(UNSAFE_queryAllByType(Avatar)).toHaveLength(0);
+    });
+
+    it('shows network avatar when one network enabled and not all popular selected', () => {
+      useNetworksByNamespaceModule.useNetworksByCustomNamespace.mockReturnValue(
+        {
+          areAllNetworksSelected: false,
+          totalEnabledNetworksCount: 1,
+        },
+      );
+
+      const { UNSAFE_getAllByType } = renderComponent();
+      expect(UNSAFE_getAllByType(Avatar).length).toBeGreaterThan(0);
     });
 
     it('does not show network avatar when all networks selected', () => {

app/components/UI/shared/BaseControlBar/BaseControlBar.tsx

@@ -125,6 +125,8 @@ const BaseControlBar: React.FC<BaseControlBarProps> = ({
   }, [customIsDisabled]);
 
   const displayAllNetworks = totalEnabledNetworksCount > 1;
+  const showNetworkFilterAvatar =
+    !displayAllNetworks && !areAllNetworksSelected;
 
   // Shared navigation handlers
   const defaultHandleFilterControls = useCallback(() => {
@@ -148,7 +150,7 @@ const BaseControlBar: React.FC<BaseControlBarProps> = ({
   // Shared network label rendering
   const renderNetworkLabel = () => (
     <View style={styles.networkManagerWrapper}>
-      {!areAllNetworksSelected && (
+      {showNetworkFilterAvatar && (
         <View style={styles.networkAvatarWrapper}>
           <Avatar
             variant={AvatarVariant.Network}

app/components/Views/ActivityView/index.js

@@ -41,7 +41,6 @@ import { useCurrentNetworkInfo } from '../../hooks/useCurrentNetworkInfo';
 import {
   NetworkType,
   useNetworksByCustomNamespace,
-  useNetworksByNamespace,
 } from '../../hooks/useNetworksByNamespace/useNetworksByNamespace';
 import { useStyles } from '../../hooks/useStyles';
 import ErrorBoundary from '../ErrorBoundary';
@@ -96,15 +95,17 @@ const ActivityView = () => {
   const networkName = useSelector(selectNetworkName);
 
   const { enabledNetworks, getNetworkInfo } = useCurrentNetworkInfo();
-  const { areAllNetworksSelected } = useNetworksByNamespace({
+  const {
+    areAllNetworksSelected: areAllEvmPopularNetworksEnabled,
+    totalEnabledNetworksCount,
+  } = useNetworksByCustomNamespace({
     networkType: NetworkType.Popular,
+    namespace: KnownCaipNamespace.Eip155,
   });
 
-  const { areAllNetworksSelected: areAllEvmPopularNetworksEnabled } =
-    useNetworksByCustomNamespace({
-      networkType: NetworkType.Popular,
-      namespace: KnownCaipNamespace.Eip155,
-    });
+  const displayAllNetworks = totalEnabledNetworksCount > 1;
+  const showNetworkFilterAvatar =
+    !displayAllNetworks && !areAllEvmPopularNetworksEnabled;
 
   const currentNetworkName = getNetworkInfo(0)?.networkName;
 
@@ -255,7 +256,7 @@ const ActivityView = () => {
                   label={
                     <>
                       <View style={styles.networkManagerWrapper}>
-                        {!areAllNetworksSelected && (
+                        {showNetworkFilterAvatar && (
                           <Avatar
                             variant={AvatarVariant.Network}
                             size={AvatarSize.Xs}
@@ -267,7 +268,7 @@ const ActivityView = () => {
                           variant={TextVariant.BodyMDMedium}
                           numberOfLines={1}
                         >
-                          {enabledNetworks.length > 1
+                          {displayAllNetworks
                             ? strings('wallet.popular_networks')
                             : (currentNetworkName ??
                               strings('wallet.current_network'))}

app/components/Views/ActivityView/index.test.tsx

@@ -139,6 +139,8 @@ jest.mock('../../../core/Engine', () => ({
 }));
 
 let mockAreAllEvmPopularNetworksEnabled = false;
+/** Must mirror controller: label uses totalEnabledNetworksCount > 1 */
+let mockTotalEnabledNetworksCount = 2;
 
 jest.mock('../../hooks/useNetworksByNamespace/useNetworksByNamespace', () => ({
   useNetworksByNamespace: () => ({
@@ -151,6 +153,7 @@ jest.mock('../../hooks/useNetworksByNamespace/useNetworksByNamespace', () => ({
   useNetworksByCustomNamespace: () => ({
     networks: [],
     areAllNetworksSelected: mockAreAllEvmPopularNetworksEnabled,
+    totalEnabledNetworksCount: mockTotalEnabledNetworksCount,
   }),
   NetworkType: {
     Popular: 'popular',
@@ -286,6 +289,7 @@ describe('ActivityView', () => {
     mockPerpsEnabled = false;
     mockPredictEnabled = false;
     mockAreAllEvmPopularNetworksEnabled = false;
+    mockTotalEnabledNetworksCount = 2;
     clearRenderedTabs();
     mockRoute.params = {};
   });
@@ -301,12 +305,26 @@ describe('ActivityView', () => {
     });
 
     it('displays "Popular networks" text when multiple networks are enabled', () => {
+      mockTotalEnabledNetworksCount = 2;
+      mockAreAllEvmPopularNetworksEnabled = false;
+
       const { getByText } = renderComponent(mockInitialState);
 
       expect(getByText('Popular networks')).toBeOnTheScreen();
     });
 
+    it('does not render network avatar beside Popular networks when multiple networks enabled', () => {
+      mockTotalEnabledNetworksCount = 2;
+      mockAreAllEvmPopularNetworksEnabled = false;
+
+      const { getByText, queryByTestId } = renderComponent(mockInitialState);
+
+      expect(getByText('Popular networks')).toBeOnTheScreen();
+      expect(queryByTestId('network-avatar-image')).toBeNull();
+    });
+
     it('displays network name when single network is enabled', () => {
+      mockTotalEnabledNetworksCount = 1;
       const singleNetworkInfo = {
         enabledNetworks: [{ chainId: '0x1', enabled: true }],
         getNetworkInfo: jest.fn(() => ({