fix: display of network name in network switch toast on confirmation …

…pages (#27100)
MetaMask · Sep 13, 2024 · fb72eca · fb72eca
1 parent 250d195
commit fb72eca
Show file tree

Hide file tree

Showing 3 changed files with 42 additions and 6 deletions.
diff --git a/...ges/confirmations/components/confirm/network-change-toast/network-change-toast-legacy.tsx b/...ges/confirmations/components/confirm/network-change-toast/network-change-toast-legacy.tsx
@@ -7,8 +7,7 @@ import {
   getLastInteractedConfirmationInfo,
   setLastInteractedConfirmationInfo,
 } from '../../../../../store/actions';
-import { getCurrentChainId } from '../../../../../selectors';
-import { NETWORK_TO_NAME_MAP } from '../../../../../../shared/constants/network';
+import { getCurrentChainId, getNetworkDetails } from '../../../../../selectors';
 import { useI18nContext } from '../../../../../hooks/useI18nContext';
 
 const CHAIN_CHANGE_THRESHOLD_MILLISECONDS = 60 * 1000; // 1 Minute
@@ -20,8 +19,12 @@ const NetworkChangeToastLegacy = ({
   confirmation: { id: string; chainId: string };
 }) => {
   const chainId = useSelector(getCurrentChainId);
+  const newChainId = confirmation?.chainId ?? chainId;
   const [toastVisible, setToastVisible] = useState(false);
   const t = useI18nContext();
+  const networkInfo = useSelector((state) =>
+    getNetworkDetails(state, newChainId),
+  );
 
   const hideToast = useCallback(() => {
     setToastVisible(false);
@@ -36,7 +39,6 @@ const NetworkChangeToastLegacy = ({
       const lastInteractedConfirmationInfo =
         await getLastInteractedConfirmationInfo();
       const currentTimestamp = new Date().getTime();
-      const newChainId = confirmation.chainId ?? chainId;
       if (
         lastInteractedConfirmationInfo &&
         lastInteractedConfirmationInfo.chainId !== newChainId &&
@@ -72,13 +74,11 @@ const NetworkChangeToastLegacy = ({
     return null;
   }
 
-  const networkName = (NETWORK_TO_NAME_MAP as Record<string, string>)[chainId];
-
   return (
     <Box className="toast_wrapper">
       <Toast
         onClose={hideToast}
-        text={t('networkSwitchMessage', [networkName ?? ''])}
+        text={t('networkSwitchMessage', [networkInfo?.nickname ?? ''])}
         startAdornment={null}
       />
     </Box>

diff --git a/ui/selectors/selectors.js b/ui/selectors/selectors.js
@@ -799,6 +799,20 @@ export function getSwitchedNetworkDetails(state) {
   return null;
 }
 
+export function getNetworkDetails(state, chainId) {
+  const allNetworks = getAllNetworks(state);
+  if (chainId) {
+    const network = allNetworks.find(({ chainId: id }) => chainId === id);
+    return {
+      nickname: network?.nickname,
+      imageUrl: network?.rpcPrefs?.imageUrl,
+      origin: network?.origin,
+    };
+  }
+
+  return null;
+}
+
 export function getAppIsLoading(state) {
   return state.appState.isLoading;
 }

diff --git a/ui/selectors/selectors.test.js b/ui/selectors/selectors.test.js
@@ -216,6 +216,28 @@ describe('Selectors', () => {
     });
   });
 
+  describe('#getNetworkDetails', () => {
+    it('returns no details when chainId is undefined', () => {
+      expect(selectors.getNetworkDetails(mockState, undefined)).toStrictEqual(
+        null,
+      );
+    });
+
+    it('returns network information when valid chainId is present', () => {
+      expect(
+        selectors.getNetworkDetails(
+          mockState,
+          mockState.metamask.networkConfigurations.testNetworkConfigurationId
+            .chainId,
+        ),
+      ).toStrictEqual({
+        imageUrl: './images/eth_logo.svg',
+        nickname: 'Ethereum Mainnet',
+        origin: undefined,
+      });
+    });
+  });
+
   describe('#getNumberOfAllUnapprovedTransactionsAndMessages', () => {
     it('returns no unapproved transactions and messages', () => {
       expect(