fix: name from network configurations

MetaMask · Jul 15, 2024 · c9bc7c6 · c9bc7c6
1 parent 3bdb6de
commit c9bc7c6
Show file tree

Hide file tree

Showing 4 changed files with 70 additions and 17 deletions.
diff --git a/ui/components/multichain/app-header/__snapshots__/app-header.test.js.snap b/ui/components/multichain/app-header/__snapshots__/app-header.test.js.snap
@@ -10,20 +10,20 @@ exports[`App Header locked state matches snapshot: locked 1`] = `
     >
       <div>
         <button
-          aria-label="Network Menu goerli"
+          aria-label="Network Menu Chain 5"
           class="mm-box mm-picker-network multichain-app-header__contents__network-picker mm-box--padding-right-4 mm-box--padding-left-2 mm-box--display-flex mm-box--gap-2 mm-box--align-items-center mm-box--background-color-background-alternative mm-box--rounded-pill"
           data-testid="network-display"
         >
           <div
             class="mm-box mm-text mm-avatar-base mm-avatar-base--size-xs mm-avatar-network mm-picker-network__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"
             role="img"
           >
-            g
+            C
           </div>
           <span
             class="mm-box mm-text mm-text--body-sm mm-text--ellipsis mm-box--color-text-default"
           >
-            goerli
+            Chain 5
           </span>
           <span
             class="mm-box mm-picker-network__arrow-down-icon mm-icon mm-icon--size-xs mm-box--margin-left-auto mm-box--display-inline-block mm-box--color-icon-default"
@@ -435,7 +435,7 @@ exports[`App Header unlocked state matches snapshot: unlocked 1`] = `
     >
       <div>
         <button
-          aria-label="Network Menu goerli"
+          aria-label="Network Menu Chain 5"
           class="mm-box mm-picker-network multichain-app-header__contents__network-picker mm-box--margin-2 mm-box--padding-right-4 mm-box--padding-left-2 mm-box--display-none mm-box--sm:display-flex mm-box--gap-2 mm-box--align-items-center mm-box--background-color-background-alternative mm-box--rounded-pill"
           data-testid="network-display"
           disabled=""
@@ -444,12 +444,12 @@ exports[`App Header unlocked state matches snapshot: unlocked 1`] = `
             class="mm-box mm-text mm-avatar-base mm-avatar-base--size-xs mm-avatar-network mm-picker-network__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"
             role="img"
           >
-            g
+            C
           </div>
           <span
             class="mm-box mm-text mm-text--body-sm mm-text--ellipsis mm-box--color-text-default"
           >
-            goerli
+            Chain 5
           </span>
           <span
             class="mm-box mm-picker-network__arrow-down-icon mm-icon mm-icon--size-xs mm-box--margin-left-auto mm-box--display-inline-block mm-box--color-icon-default"

diff --git a/ui/components/multichain/app-header/app-header.test.js b/ui/components/multichain/app-header/app-header.test.js
@@ -24,6 +24,7 @@ jest.mock('react-router-dom', () => ({
 const render = ({
   stateChanges = {},
   provider = {},
+  networkConfigurations = {},
   location = {},
   isUnlocked = true,
 } = {}) => {
@@ -35,6 +36,10 @@ const render = ({
         ...mockState.metamask.providerConfig,
         ...(provider ?? {}),
       },
+      networkConfigurations: {
+        ...mockState.metamask.networkConfigurations,
+        ...(networkConfigurations ?? {}),
+      },
       isUnlocked: isUnlocked ?? true,
     },
     activeTab: {
@@ -184,29 +189,42 @@ describe('App Header', () => {
   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();

diff --git a/ui/selectors/multichain.test.ts b/ui/selectors/multichain.test.ts
@@ -180,16 +180,27 @@ describe('Multichain Selectors', () => {
 
     it('returns rpcUrl as its nickname if its not defined', () => {
       const mockNetworkRpc = 'https://mock-rpc.com';
+
       const state = {
         ...getEvmState(),
         metamask: {
           ...getEvmState().metamask,
           providerConfig: {
+            id: 'mock-network',
             type: 'rpc',
             ticker: 'MOCK',
             chainId: '0x123123123',
             rpcUrl: mockNetworkRpc,
           },
+          networkConfigurations: {
+            'mock-network': {
+              id: 'mock-network',
+              type: 'rpc',
+              ticker: 'MOCK',
+              chainId: '0x123123123',
+              rpcUrl: mockNetworkRpc,
+            },
+          },
         },
       };
 

diff --git a/ui/selectors/multichain.ts b/ui/selectors/multichain.ts
@@ -1,6 +1,9 @@
 import PropTypes from 'prop-types';
 import { InternalAccount, isEvmAccountType } from '@metamask/keyring-api';
-import { ProviderConfig } from '@metamask/network-controller';
+import {
+  NetworkConfiguration,
+  ProviderConfig,
+} from '@metamask/network-controller';
 import type { RatesControllerState } from '@metamask/assets-controllers';
 import { CaipChainId, KnownCaipNamespace } from '@metamask/utils';
 import { createSelector } from '@reduxjs/toolkit';
@@ -30,6 +33,7 @@ import {
   getIsMainnet,
   getMaybeSelectedInternalAccount,
   getNativeCurrencyImage,
+  getNetworkConfigurations,
   getSelectedAccountCachedBalance,
   getSelectedInternalAccount,
   getShouldShowFiat,
@@ -49,6 +53,9 @@ export type ProviderConfigWithImageUrlAndExplorerUrl = ProviderConfig & {
   rpcPrefs?: { blockExplorerUrl?: string; imageUrl?: string };
 };
 
+// TODO: Remove after updating to @metamask/network-controller 20.0.0
+export type NetworkConfigurationWithId = NetworkConfiguration & { id: string };
+
 export type MultichainNetwork = {
   nickname: string;
   isEvmNetwork: boolean;
@@ -118,15 +125,29 @@ export function getMultichainNetwork(
   if (isEvm) {
     // EVM networks
     const evmChainId: string = getCurrentChainId(state);
-    const evmNetwork: ProviderConfigWithImageUrlAndExplorerUrl =
+
+    // TODO: Update to use network configurations when @metamask/network-controller is updated to 20.0.0
+    // ProviderConfig will be deprecated to use NetworkConfigurations
+    // When a user updates a network name its only updated in the NetworkConfigurations.
+    const currentEvmNetwork: ProviderConfigWithImageUrlAndExplorerUrl =
       getProviderConfig(state);
+    // Could be undefined for default configurations.
+    const currentEvmNetworkConfiguration = Object.values(
+      (getNetworkConfigurations(state) as Record<
+        string,
+        NetworkConfigurationWithId
+      >) ?? {},
+    ).find(
+      (config: NetworkConfigurationWithId) =>
+        config.id === currentEvmNetwork.id,
+    );
 
     if (
-      !evmNetwork?.rpcPrefs?.imageUrl &&
+      !currentEvmNetwork?.rpcPrefs?.imageUrl &&
       evmChainId in CHAIN_ID_TO_NETWORK_IMAGE_URL_MAP
     ) {
-      evmNetwork.rpcPrefs = {
-        ...evmNetwork.rpcPrefs,
+      currentEvmNetwork.rpcPrefs = {
+        ...currentEvmNetwork.rpcPrefs,
         imageUrl:
           CHAIN_ID_TO_NETWORK_IMAGE_URL_MAP[
             evmChainId as keyof typeof CHAIN_ID_TO_NETWORK_IMAGE_URL_MAP
@@ -135,16 +156,19 @@ export function getMultichainNetwork(
     }
 
     let nickname;
-    if (evmNetwork.type === NETWORK_TYPES.RPC) {
+    if (currentEvmNetwork.type === NETWORK_TYPES.RPC) {
       // These are custom networks defined by the user.
       // If there aren't any nicknames, the rpc url is displayed.
 
-      // rpcUrl will always be defined for custom networks.
-      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-      nickname = evmNetwork.nickname ?? evmNetwork.rpcUrl!;
+      nickname =
+        currentEvmNetworkConfiguration?.nickname ??
+        currentEvmNetwork.nickname ??
+        // rpcUrl will always be defined for custom networks.
+        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+        currentEvmNetwork.rpcUrl!;
     } else {
       // these are the default networks, they do not have nicknames
-      nickname = NETWORK_TO_NAME_MAP[evmNetwork.type];
+      nickname = NETWORK_TO_NAME_MAP[currentEvmNetwork.type];
     }
 
     return {
@@ -156,7 +180,7 @@ export function getMultichainNetwork(
       chainId: `${KnownCaipNamespace.Eip155}:${Number(
         evmChainId,
       )}` as CaipChainId,
-      network: evmNetwork,
+      network: currentEvmNetwork,
     };
   }