fix: selected network when there are two with the same chain id.

ui/components/multichain/app-header/app-header-locked-content.tsx

@@ -6,13 +6,10 @@ import MetafoxLogo from '../../ui/metafox-logo';
 import { PickerNetwork } from '../../component-library';
 import { DEFAULT_ROUTE } from '../../../helpers/constants/routes';
 import { getTestNetworkBackgroundColor } from '../../../selectors';
-import {
-  MultichainProviderConfig,
-  ProviderConfigWithImageUrl,
-} from '../../../../shared/constants/multichain/networks';
+import { MultichainNetwork } from '../../../selectors/multichain';
 
 type AppHeaderLockedContentProps = {
-  currentNetwork: ProviderConfigWithImageUrl | MultichainProviderConfig;
+  currentNetwork: MultichainNetwork;
   networkOpenCallback: () => void;
 };
 
@@ -36,7 +33,7 @@ export const AppHeaderLockedContent = ({
           }}
           aria-label={`${t('networkMenu')} ${currentNetwork?.nickname}`}
           label={currentNetwork?.nickname ?? ''}
-          src={currentNetwork?.rpcPrefs?.imageUrl}
+          src={currentNetwork?.network?.rpcPrefs?.imageUrl}
           onClick={(e: React.MouseEvent<HTMLElement>) => {
             e.stopPropagation();
             e.preventDefault();

ui/components/multichain/app-header/app-header-unlocked-content.tsx

@@ -51,16 +51,13 @@ import { MetaMetricsContext } from '../../../contexts/metametrics';
 import { useCopyToClipboard } from '../../../hooks/useCopyToClipboard';
 import { MINUTE } from '../../../../shared/constants/time';
 import { NotificationsTagCounter } from '../notifications-tag-counter';
-import {
-  MultichainProviderConfig,
-  ProviderConfigWithImageUrl,
-} from '../../../../shared/constants/multichain/networks';
 import { CONNECTIONS } from '../../../helpers/constants/routes';
+import { MultichainNetwork } from '../../../selectors/multichain';
 
 type AppHeaderUnlockedContentProps = {
   popupStatus: boolean;
   isEvmNetwork: boolean;
-  currentNetwork: ProviderConfigWithImageUrl | MultichainProviderConfig;
+  currentNetwork: MultichainNetwork;
   networkOpenCallback: () => void;
   disableNetworkPicker: boolean;
   disableAccountPicker: boolean;
@@ -135,7 +132,7 @@ export const AppHeaderUnlockedContent = ({
               className="multichain-app-header__contents--avatar-network"
               ref={menuRef}
               as="button"
-              src={currentNetwork?.rpcPrefs?.imageUrl ?? ''}
+              src={currentNetwork?.network?.rpcPrefs?.imageUrl ?? ''}
               label={currentNetwork?.nickname ?? ''}
               aria-label={`${t('networkMenu')} ${currentNetwork?.nickname}`}
               labelProps={{
@@ -162,7 +159,7 @@ export const AppHeaderUnlockedContent = ({
             margin={2}
             aria-label={`${t('networkMenu')} ${currentNetwork?.nickname}`}
             label={currentNetwork?.nickname ?? ''}
-            src={currentNetwork?.rpcPrefs?.imageUrl}
+            src={currentNetwork?.network?.rpcPrefs?.imageUrl}
             onClick={(e: React.MouseEvent<HTMLElement>) => {
               e.stopPropagation();
               e.preventDefault();

ui/components/multichain/app-header/app-header.js

@@ -40,13 +40,8 @@ export const AppHeader = ({ location }) => {
   const menuRef = useRef(null);
   const isUnlocked = useSelector(getIsUnlocked);
 
-  const {
-    chainId,
-    // Used for network icon / dropdown
-    network: currentNetwork,
-    // Used for network icon / dropdown
-    isEvmNetwork,
-  } = useSelector(getMultichainNetwork);
+  const multichainNetwork = useSelector(getMultichainNetwork);
+  const { chainId, isEvmNetwork } = multichainNetwork;
 
   const dispatch = useDispatch();
 
@@ -149,15 +144,15 @@ export const AppHeader = ({ location }) => {
               <AppHeaderUnlockedContent
                 popupStatus={popupStatus}
                 isEvmNetwork={isEvmNetwork}
-                currentNetwork={currentNetwork}
+                currentNetwork={multichainNetwork}
                 networkOpenCallback={networkOpenCallback}
                 disableNetworkPicker={disableNetworkPicker}
                 disableAccountPicker={disableAccountPicker}
                 menuRef={menuRef}
               />
             ) : (
               <AppHeaderLockedContent
-                currentNetwork={currentNetwork}
+                currentNetwork={multichainNetwork}
                 networkOpenCallback={networkOpenCallback}
               />
             )}

ui/components/multichain/app-header/app-header.test.js

@@ -23,19 +23,29 @@ jest.mock('react-router-dom', () => ({
 
 const render = ({
   stateChanges = {},
+  provider = {},
+  networkConfigurations = {},
   location = {},
   isUnlocked = true,
 } = {}) => {
   const store = configureStore({
     ...mockState,
     metamask: {
       ...mockState.metamask,
-      isUnlocked,
+      providerConfig: {
+        ...mockState.metamask.providerConfig,
+        ...(provider ?? {}),
+      },
+      networkConfigurations: {
+        ...mockState.metamask.networkConfigurations,
+        ...(networkConfigurations ?? {}),
+      },
+      isUnlocked: isUnlocked ?? true,
     },
     activeTab: {
       origin: 'https://remix.ethereum.org',
     },
-    ...stateChanges,
+    ...(stateChanges ?? {}),
   });
   return renderWithProvider(<AppHeader location={location} />, store);
 };
@@ -175,4 +185,48 @@ describe('App Header', () => {
       expect(connectionPickerButton).not.toBeInTheDocument();
     });
   });
+
+  describe('network picker', () => {
+    it('shows custom rpc if it has the same chainId as a default network', () => {
+      const mockProviderConfig = {
+        id: 'custom-rpc-localhost',
+        type: 'rpc',
+        ticker: 'ETH',
+        chainId: '0x1',
+        rpcUrl: 'https://localhost:8545',
+        nickname: 'Localhost',
+      };
+
+      const mockNetworkConfigurations = {
+        [mockProviderConfig.id]: mockProviderConfig,
+      };
+      const { getByText } = render({
+        provider: mockProviderConfig,
+        networkConfigurations: mockNetworkConfigurations,
+        isUnlocked: true,
+      });
+      expect(getByText(mockProviderConfig.nickname)).toBeInTheDocument();
+    });
+
+    it("shows rpc url as nickname if there isn't a nickname set", () => {
+      const mockProviderConfig = {
+        id: 'custom-rpc-localhost',
+        type: 'rpc',
+        ticker: 'ETH',
+        chainId: '0x1',
+        rpcUrl: 'https://localhost:8545',
+        nickname: null,
+      };
+      const mockNetworkConfigurations = {
+        [mockProviderConfig.id]: mockProviderConfig,
+      };
+
+      const { getByText } = render({
+        provider: mockProviderConfig,
+        networkConfigurations: mockNetworkConfigurations,
+        isUnlocked: true,
+      });
+      expect(getByText(mockProviderConfig.rpcUrl)).toBeInTheDocument();
+    });
+  });
 });

ui/components/multichain/token-list-item/__snapshots__/token-list-item.test.js.snap

@@ -26,7 +26,7 @@ exports[`TokenListItem should render correctly 1`] = `
             class="mm-box mm-text mm-avatar-base mm-avatar-base--size-xs mm-avatar-network mm-text--body-xs mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-alternative mm-box--rounded-full mm-box--border-color-border-muted box--border-style-solid box--border-width-1"
           >
             <img
-              alt="Ethereum Mainnet logo"
+              alt="network logo"
               class="mm-avatar-network__network-image"
               src="./images/eth_logo.svg"
             />

ui/pages/asset/components/__snapshots__/asset-page.test.tsx.snap

@@ -192,7 +192,7 @@ exports[`AssetPage should render a native asset 1`] = `
                 class="mm-box mm-text mm-avatar-base mm-avatar-base--size-xs mm-avatar-network mm-text--body-xs mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-alternative mm-box--rounded-full mm-box--border-color-border-muted box--border-style-solid box--border-width-1"
               >
                 <img
-                  alt="Ethereum Mainnet logo"
+                  alt="network logo"
                   class="mm-avatar-network__network-image"
                   src="./images/eth_logo.svg"
                 />
@@ -476,7 +476,7 @@ exports[`AssetPage should render an ERC20 asset without prices 1`] = `
                 class="mm-box mm-text mm-avatar-base mm-avatar-base--size-xs mm-avatar-network mm-text--body-xs mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-alternative mm-box--rounded-full mm-box--border-color-border-muted box--border-style-solid box--border-width-1"
               >
                 <img
-                  alt="Ethereum Mainnet logo"
+                  alt="network logo"
                   class="mm-avatar-network__network-image"
                   src="./images/eth_logo.svg"
                 />
@@ -953,7 +953,7 @@ exports[`AssetPage should render an ERC20 token with prices 1`] = `
                 class="mm-box mm-text mm-avatar-base mm-avatar-base--size-xs mm-avatar-network mm-text--body-xs mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-alternative mm-box--rounded-full mm-box--border-color-border-muted box--border-style-solid box--border-width-1"
               >
                 <img
-                  alt="Ethereum Mainnet logo"
+                  alt="network logo"
                   class="mm-avatar-network__network-image"
                   src="./images/eth_logo.svg"
                 />

ui/pages/confirmations/confirm-send-ether/__snapshots__/confirm-send-ether.test.js.snap

@@ -302,7 +302,7 @@ exports[`ConfirmSendEther should render correct information for for confirm send
                 <div
                   class="mm-box mm-text mm-avatar-base mm-avatar-base--size-xs mm-avatar-network mm-text--body-xs mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-alternative mm-box--rounded-full mm-box--border-color-transparent box--border-style-solid box--border-width-1"
                 >
-                  C
+                  g
                 </div>
               </div>
               <span

ui/selectors/multichain.test.ts

@@ -1,6 +1,9 @@
 import { Cryptocurrency } from '@metamask/assets-controllers';
 import { InternalAccount } from '@metamask/keyring-api';
-import { getNativeCurrency } from '../ducks/metamask/metamask';
+import {
+  getNativeCurrency,
+  getProviderConfig,
+} from '../ducks/metamask/metamask';
 import {
   MULTICHAIN_PROVIDER_CONFIGS,
   MultichainNetworks,
@@ -12,7 +15,11 @@ import {
   MOCK_ACCOUNT_BIP122_P2WPKH,
   MOCK_ACCOUNT_BIP122_P2WPKH_TESTNET,
 } from '../../test/data/mock-accounts';
-import { CHAIN_IDS } from '../../shared/constants/network';
+import {
+  CHAIN_IDS,
+  ETH_TOKEN_IMAGE_URL,
+  MAINNET_DISPLAY_NAME,
+} from '../../shared/constants/network';
 import { MultichainNativeAssets } from '../../shared/constants/multichain/assets';
 import { AccountsState } from './accounts';
 import {
@@ -33,7 +40,6 @@ import {
 } from './multichain';
 import {
   getCurrentCurrency,
-  getCurrentNetwork,
   getSelectedAccountCachedBalance,
   getShouldShowFiat,
 } from '.';
@@ -157,6 +163,47 @@ describe('Multichain Selectors', () => {
       const network = getMultichainNetwork(state);
       expect(network.isEvmNetwork).toBe(true);
     });
+
+    it('returns a EVM network with the correct network image', () => {
+      const state = getEvmState();
+
+      const network = getMultichainNetwork(state);
+      expect(network.network.rpcPrefs?.imageUrl).toBe(ETH_TOKEN_IMAGE_URL);
+    });
+
+    it('returns a nickname for default networks', () => {
+      const state = getEvmState();
+
+      const network = getMultichainNetwork(state);
+      expect(network.nickname).toBe(MAINNET_DISPLAY_NAME);
+    });
+
+    it('returns rpcUrl as its nickname if its not defined', () => {
+      const mockNetworkRpc = 'https://mock-rpc.com';
+      const mockNetwork = {
+        id: 'mock-network',
+        type: 'rpc',
+        ticker: 'MOCK',
+        chainId: '0x123123123',
+        rpcUrl: mockNetworkRpc,
+        // `nickname` is undefined here
+      };
+
+      const state = {
+        ...getEvmState(),
+        metamask: {
+          ...getEvmState().metamask,
+          providerConfig: mockNetwork,
+          networkConfigurations: {
+            [mockNetwork.id]: mockNetwork,
+          },
+        },
+      };
+
+      const network = getMultichainNetwork(state);
+      expect(network.nickname).toBe(network.network.rpcUrl);
+      expect(network.nickname).toBe(mockNetworkRpc);
+    });
   });
 
   describe('getMultichainIsEvm', () => {
@@ -177,9 +224,7 @@ describe('Multichain Selectors', () => {
     it('returns a ProviderConfig if account is EVM', () => {
       const state = getEvmState();
 
-      // NOTE: We do fallback to `getCurrentNetwork` (using the "original" list
-      // of network) when using EVM context, so check against this value here
-      const evmMainnetNetwork = getCurrentNetwork(state);
+      const evmMainnetNetwork = getProviderConfig(state);
       expect(getMultichainProviderConfig(state)).toBe(evmMainnetNetwork);
     });