fix: hide chain avatar beside Popular Networks in token and activity filters

The filter label uses global enabled network count while the avatar used
only popular-EVM "all selected", so one deselected popular chain or added
custom network could show an Ethereum icon next to Popular Networks.

Fixes #29948

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(() => ({