Fix new network configuration merge

MetaMask · Sep 20, 2024 · d342fb3 · d342fb3
1 parent 8dfb2e6
commit d342fb3
Show file tree

Hide file tree

Showing 6 changed files with 40 additions and 23 deletions.
diff --git a/ui/components/multichain/edit-networks-modal/edit-networks-modal.js b/ui/components/multichain/edit-networks-modal/edit-networks-modal.js
@@ -207,10 +207,7 @@ EditNetworksModal.propTypes = {
   nonTestNetworks: PropTypes.arrayOf(
     PropTypes.shape({
       chainId: PropTypes.string.isRequired, // The chain ID of the network
-      nickname: PropTypes.string.isRequired, // Display name of the network
-      rpcPrefs: PropTypes.shape({
-        imageUrl: PropTypes.string, // Optional image URL for the network icon
-      }),
+      name: PropTypes.string.isRequired, // Display name of the network
     }),
   ).isRequired,
 
@@ -220,10 +217,7 @@ EditNetworksModal.propTypes = {
   testNetworks: PropTypes.arrayOf(
     PropTypes.shape({
       chainId: PropTypes.string.isRequired, // The chain ID of the network
-      nickname: PropTypes.string.isRequired, // Display name of the network
-      rpcPrefs: PropTypes.shape({
-        imageUrl: PropTypes.string, // Optional image URL for the network icon
-      }),
+      name: PropTypes.string.isRequired, // Display name of the network
     }),
   ).isRequired,
 

diff --git a/ui/components/multichain/network-list-menu/network-list-menu.tsx b/ui/components/multichain/network-list-menu/network-list-menu.tsx
@@ -130,7 +130,6 @@ export const NetworkListMenu = ({ onClose }: { onClose: () => void }) => {
   const currentlyOnTestNetwork = (TEST_CHAINS as Hex[]).includes(
     currentChainId,
   );
-
   const [nonTestNetworks, testNetworks] = useMemo(
     () =>
       Object.entries(networkConfigurations).reduce(

diff --git a/ui/components/multichain/pages/review-permissions-page/review-permissions-page.tsx b/ui/components/multichain/pages/review-permissions-page/review-permissions-page.tsx
@@ -3,6 +3,7 @@ import { useDispatch, useSelector } from 'react-redux';
 import { useHistory, useParams } from 'react-router-dom';
 import { NonEmptyArray } from '@metamask/utils';
 import { InternalAccount, isEvmAccountType } from '@metamask/keyring-api';
+import { NetworkConfiguration } from '@metamask/network-controller';
 import {
   BlockSize,
   Display,
@@ -13,11 +14,10 @@ import { useI18nContext } from '../../../../hooks/useI18nContext';
 import {
   getConnectedSitesList,
   getInternalAccounts,
-  getNonTestNetworks,
+  getNetworkConfigurationsByChainId,
   getPermissionSubjects,
   getPermittedAccountsForSelectedTab,
   getPermittedChainsForSelectedTab,
-  getTestNetworks,
   getUpdatedAndSortedAccounts,
 } from '../../../../selectors';
 import {
@@ -51,6 +51,7 @@ import {
 import { PermissionsHeader } from '../../permissions-header/permissions-header';
 import { mergeAccounts } from '../../account-list-menu/account-list-menu';
 import { MergedInternalAccount } from '../../../../selectors/selectors.types';
+import { TEST_CHAINS } from '../../../../../shared/constants/network';
 import { SiteCell } from '.';
 
 export const ReviewPermissions = () => {
@@ -98,8 +99,19 @@ export const ReviewPermissions = () => {
     setShowDisconnectAllModal(true);
   };
 
-  const testNetworks = useSelector(getTestNetworks);
-  const nonTestNetworks = useSelector(getNonTestNetworks);
+  const networkConfigurations = useSelector(getNetworkConfigurationsByChainId);
+  const [nonTestNetworks, testNetworks] = useMemo(
+    () =>
+      Object.entries(networkConfigurations).reduce(
+        ([nonTestNetworksList, testNetworksList], [chainId, network]) => {
+          const isTest = (TEST_CHAINS as string[]).includes(chainId);
+          (isTest ? testNetworksList : nonTestNetworksList).push(network);
+          return [nonTestNetworksList, testNetworksList];
+        },
+        [[] as NetworkConfiguration[], [] as NetworkConfiguration[]],
+      ),
+    [networkConfigurations],
+  );
   const connectedChainIds = useSelector((state) =>
     getPermittedChainsForSelectedTab(state, activeTabOrigin),
   ) as string[];

diff --git a/ui/components/multichain/pages/review-permissions-page/site-cell/site-cell-tooltip.js b/ui/components/multichain/pages/review-permissions-page/site-cell/site-cell-tooltip.js
@@ -25,6 +25,7 @@ import {
 } from '../../../../component-library';
 import { getUseBlockie } from '../../../../../selectors';
 import { useI18nContext } from '../../../../../hooks/useI18nContext';
+import { CHAIN_ID_TO_NETWORK_IMAGE_URL_MAP } from '../../../../../../shared/constants/network';
 
 export const SiteCellTooltip = ({ accounts, networks }) => {
   const t = useI18nContext();
@@ -40,8 +41,8 @@ export const SiteCellTooltip = ({ accounts, networks }) => {
   }));
 
   const avatarNetworksData = networks?.map((network) => ({
-    avatarValue: network.rpcPrefs?.imageUrl || '',
-    symbol: network.nickname,
+    avatarValue: CHAIN_ID_TO_NETWORK_IMAGE_URL_MAP[network.chainId],
+    symbol: network.name,
   }));
 
   return (

diff --git a/ui/components/multichain/pages/review-permissions-page/site-cell/site-cell.tsx b/ui/components/multichain/pages/review-permissions-page/site-cell/site-cell.tsx
@@ -13,8 +13,7 @@ import { SiteCellConnectionListItem } from './site-cell-connection-list-item';
 
 // Define types for networks, accounts, and other props
 type Network = {
-  rpcPrefs?: { imageUrl?: string };
-  nickname: string;
+  name: string;
   chainId: string;
 };
 
@@ -51,8 +50,8 @@ export const SiteCell: React.FC<SiteCellProps> = ({
   const selectedAccounts = accounts.filter(({ address }) =>
     selectedAccountAddresses.includes(address),
   );
-  const selectedNetworks = allNetworks.filter(
-    ({ chainId }) => chainId && selectedChainIds.includes(chainId),
+  const selectedNetworks = allNetworks.filter(({ chainId }) =>
+    selectedChainIds.includes(chainId),
   );
 
   // Determine the messages for connected and not connected states

diff --git a/ui/pages/permissions-connect/connect-page/connect-page.tsx b/ui/pages/permissions-connect/connect-page/connect-page.tsx
@@ -1,12 +1,12 @@
 import React, { useMemo, useState } from 'react';
 import { useSelector } from 'react-redux';
 import { InternalAccount, isEvmAccountType } from '@metamask/keyring-api';
+import { NetworkConfiguration } from '@metamask/network-controller';
 import { useI18nContext } from '../../../hooks/useI18nContext';
 import {
   getInternalAccounts,
-  getNonTestNetworks,
+  getNetworkConfigurationsByChainId,
   getSelectedInternalAccount,
-  getTestNetworks,
   getUpdatedAndSortedAccounts,
 } from '../../../selectors';
 import {
@@ -30,6 +30,7 @@ import {
 } from '../../../helpers/constants/design-system';
 import { MergedInternalAccount } from '../../../selectors/selectors.types';
 import { mergeAccounts } from '../../../components/multichain/account-list-menu/account-list-menu';
+import { TEST_CHAINS } from '../../../../shared/constants/network';
 
 type Request = {
   id: string;
@@ -55,8 +56,19 @@ export const ConnectPage: React.FC<ConnectPageProps> = ({
 }) => {
   const t = useI18nContext();
 
-  const testNetworks = useSelector(getTestNetworks);
-  const nonTestNetworks = useSelector(getNonTestNetworks);
+  const networkConfigurations = useSelector(getNetworkConfigurationsByChainId);
+  const [nonTestNetworks, testNetworks] = useMemo(
+    () =>
+      Object.entries(networkConfigurations).reduce(
+        ([nonTestNetworksList, testNetworksList], [chainId, network]) => {
+          const isTest = (TEST_CHAINS as string[]).includes(chainId);
+          (isTest ? testNetworksList : nonTestNetworksList).push(network);
+          return [nonTestNetworksList, testNetworksList];
+        },
+        [[] as NetworkConfiguration[], [] as NetworkConfiguration[]],
+      ),
+    [networkConfigurations],
+  );
   const defaultSelectedChainIds = nonTestNetworks.map(({ chainId }) => chainId);
   const [selectedChainIds, setSelectedChainIds] = useState(
     defaultSelectedChainIds,