fix: map the supported block explorers

ui/components/multichain/notification-detail-block-explorer-button/notification-detail-block-explorer-button.tsx

@@ -26,7 +26,7 @@ export const NotificationDetailBlockExplorerButton = ({
   const t = useI18nContext();
 
   const chainIdHex = decimalToHex(chainId);
-  const { nativeBlockExplorerUrl } = getNetworkDetailsByChainId(
+  const { blockExplorerConfig } = getNetworkDetailsByChainId(
     `0x${chainIdHex}` as keyof typeof CHAIN_IDS,
   );
 
@@ -36,7 +36,21 @@ export const NotificationDetailBlockExplorerButton = ({
   }, [defaultNetworks]);
 
   const blockExplorerUrl =
-    defaultNetwork?.rpcPrefs?.blockExplorerUrl ?? nativeBlockExplorerUrl;
+    defaultNetwork?.rpcPrefs?.blockExplorerUrl ?? blockExplorerConfig?.url;
+
+  const getBlockExplorerButtonText = () => {
+    if (defaultNetwork?.rpcPrefs?.blockExplorerUrl) {
+      return t('notificationItemCheckBlockExplorer');
+    }
+    if (blockExplorerConfig?.name) {
+      return t('notificationTransactionSuccessView', [
+        blockExplorerConfig.name,
+      ]);
+    }
+    return t('notificationItemCheckBlockExplorer');
+  };
+
+  const blockExplorerButtonText = getBlockExplorerButtonText();
 
   if (!blockExplorerUrl) {
     return null;
@@ -46,7 +60,7 @@ export const NotificationDetailBlockExplorerButton = ({
     <NotificationDetailButton
       notification={notification}
       variant={ButtonVariant.Secondary}
-      text={t('notificationItemCheckBlockExplorer') || ''}
+      text={blockExplorerButtonText}
       href={`${blockExplorerUrl}/tx/${txHash}`}
       id={id}
       isExternal={true}

ui/helpers/constants/metamask-notifications/metamask-notifications.ts

@@ -0,0 +1,53 @@
+import { CHAIN_IDS } from '../../../../shared/constants/network';
+
+/**
+ * Configuration for a block explorer.
+ *
+ * @property {string} url - The URL of the block explorer.
+ * @property {string} name - The name of the block explorer.
+ */
+export type BlockExplorerConfig = {
+  url: string;
+  name: string;
+};
+
+/**
+ * Map of all supported block explorers for notifications.
+ */
+export const SUPPORTED_NOTIFICATION_BLOCK_EXPLORERS = {
+  // ETHEREUM
+  [CHAIN_IDS.MAINNET]: {
+    url: 'https://etherscan.io',
+    name: 'Etherscan',
+  },
+  // OPTIMISM
+  [CHAIN_IDS.OPTIMISM]: {
+    url: 'https://optimistic.etherscan.io',
+    name: 'Optimistic Etherscan',
+  },
+  // BSC
+  [CHAIN_IDS.BSC]: {
+    url: 'https://bscscan.com',
+    name: 'BscScan',
+  },
+  // POLYGON
+  [CHAIN_IDS.POLYGON]: {
+    url: 'https://polygonscan.com',
+    name: 'PolygonScan',
+  },
+  // ARBITRUM
+  [CHAIN_IDS.ARBITRUM]: {
+    url: 'https://arbiscan.io',
+    name: 'Arbiscan',
+  },
+  // AVALANCHE
+  [CHAIN_IDS.AVALANCHE]: {
+    url: 'https://snowtrace.io',
+    name: 'Snowtrace',
+  },
+  // LINEA
+  [CHAIN_IDS.LINEA_MAINNET]: {
+    url: 'https://lineascan.build',
+    name: 'LineaScan',
+  },
+} as const;

ui/helpers/utils/notification.util.ts

@@ -5,7 +5,6 @@ import {
   CHAIN_IDS,
   CHAIN_ID_TO_CURRENCY_SYMBOL_MAP,
   CHAIN_ID_TO_NETWORK_IMAGE_URL_MAP,
-  ETHERSCAN_SUPPORTED_NETWORKS,
   NETWORK_TO_NAME_MAP,
   FEATURED_RPCS,
   MAINNET_RPC_URL,
@@ -16,17 +15,30 @@ import {
   LINEA_MAINNET_RPC_URL,
   LOCALHOST_RPC_URL,
 } from '../../../shared/constants/network';
+import { SUPPORTED_NOTIFICATION_BLOCK_EXPLORERS } from '../constants/metamask-notifications/metamask-notifications';
 import { calcTokenAmount } from '../../../shared/lib/transactions-controller-utils';
 import type {
   OnChainRawNotification,
   OnChainRawNotificationsWithNetworkFields,
 } from '../../../app/scripts/controllers/metamask-notifications/types/on-chain-notification/on-chain-notification';
+import type { BlockExplorerConfig } from '../constants/metamask-notifications/metamask-notifications';
 import {
   hexWEIToDecGWEI,
   hexWEIToDecETH,
   decimalToHex,
 } from '../../../shared/modules/conversion.utils';
 
+/**
+ * Type guard to ensure a key is present in an object.
+ *
+ * @param object - The object to check.
+ * @param key - The key to check for.
+ * @returns True if the key is present, false otherwise.
+ */
+function isKey<T extends object>(object: T, key: PropertyKey): key is keyof T {
+  return key in object;
+}
+
 /**
  * Checks if 2 date objects are on the same day
  *
@@ -301,7 +313,7 @@ export function getNetworkDetailsByChainId(chainId?: keyof typeof CHAIN_IDS): {
   nativeCurrencySymbol: string;
   nativeCurrencyLogo: string;
   nativeCurrencyAddress: string;
-  nativeBlockExplorerUrl?: string;
+  blockExplorerConfig?: BlockExplorerConfig;
 } {
   const fullNativeCurrencyName =
     NETWORK_TO_NAME_MAP[chainId as keyof typeof NETWORK_TO_NAME_MAP] ?? '';
@@ -315,22 +327,16 @@ export function getNetworkDetailsByChainId(chainId?: keyof typeof CHAIN_IDS): {
       chainId as keyof typeof CHAIN_ID_TO_NETWORK_IMAGE_URL_MAP
     ];
   const nativeCurrencyAddress = '0x0000000000000000000000000000000000000000';
-
   const blockExplorerConfig =
-    ETHERSCAN_SUPPORTED_NETWORKS[
-      chainId as keyof typeof ETHERSCAN_SUPPORTED_NETWORKS
-    ];
-  let nativeBlockExplorerUrl;
-  if (blockExplorerConfig) {
-    nativeBlockExplorerUrl = `https://www.${blockExplorerConfig.domain}`;
-  }
-
+    chainId && isKey(SUPPORTED_NOTIFICATION_BLOCK_EXPLORERS, chainId)
+      ? SUPPORTED_NOTIFICATION_BLOCK_EXPLORERS[chainId]
+      : undefined;
   return {
     nativeCurrencyName,
     nativeCurrencySymbol,
     nativeCurrencyLogo,
     nativeCurrencyAddress,
-    nativeBlockExplorerUrl,
+    blockExplorerConfig,
   };
 }