chore: chain id to name (714) (#2503)

apps/multisig-signer/src/app/components/web3-connector/web3-connector.tsx

@@ -1,5 +1,5 @@
 import { useEnvironment } from '@vegaprotocol/environment';
-import { useEthereumConfig } from '@vegaprotocol/web3';
+import { getChainName, useEthereumConfig } from '@vegaprotocol/web3';
 import { Button, Splash, AsyncRenderer } from '@vegaprotocol/ui-toolkit';
 import { Web3ConnectDialog } from '@vegaprotocol/web3';
 import { useWeb3React } from '@web3-react/core';
@@ -82,7 +82,7 @@ export const Web3Content = ({
       <Splash>
         <div className="flex flex-col items-center gap-12">
           <p className="text-white">
-            This app only works on chain ID: {appChainId}
+            This app only works on {getChainName(appChainId)}
           </p>
           <Button onClick={() => connector.deactivate()}>Disconnect</Button>
         </div>

apps/token/src/components/web3-connector/web3-connector.tsx

@@ -1,5 +1,5 @@
 import { Button, Splash } from '@vegaprotocol/ui-toolkit';
-import { Web3ConnectDialog } from '@vegaprotocol/web3';
+import { getChainName, Web3ConnectDialog } from '@vegaprotocol/web3';
 import { useWeb3React } from '@web3-react/core';
 import type { ReactElement } from 'react';
 import { useCallback, useEffect } from 'react';
@@ -78,7 +78,7 @@ export const Web3Content = ({ children, appChainId }: Web3ContentProps) => {
       <Splash>
         <div className="flex flex-col items-center gap-12">
           <p className="text-white">
-            This app only works on chain ID: {appChainId}
+            This app only works on {getChainName(appChainId)}
           </p>
           <Button onClick={() => connector.deactivate()}>Disconnect</Button>
         </div>

libs/deposits/src/lib/deposit-form.tsx

@@ -29,7 +29,7 @@ import { useAssetDetailsDialogStore } from '@vegaprotocol/assets';
 import {
   ETHEREUM_EAGER_CONNECT,
   useWeb3ConnectStore,
-  ChainIdMap,
+  getChainName,
 } from '@vegaprotocol/web3';
 
 interface FormFields {
@@ -323,7 +323,7 @@ const FormButton = ({
     );
   } else if (chainId !== desiredChainId) {
     console.log(chainId, desiredChainId);
-    const chainName = desiredChainId ? ChainIdMap[desiredChainId] : 'Unknown';
+    const chainName = getChainName(desiredChainId);
     message = t(`This app only works on ${chainName}.`);
     button = (
       <Button

libs/web3/src/lib/constants.ts

@@ -4,3 +4,8 @@ export const ChainIdMap: {
   11155111: 'Sepolia',
   1: 'Mainnet',
 };
+
+export const getChainName = (chainId: number | null | undefined) => {
+  const name = chainId ? ChainIdMap[chainId] : undefined;
+  return name || 'Unknown';
+};

libs/web3/src/lib/web3-container.spec.tsx

@@ -12,13 +12,13 @@ const defaultHookValue = {
   isActive: false,
   error: undefined,
   connector: null,
-  chainId: 3,
+  chainId: 11155111,
 } as unknown as ReturnType<typeof useWeb3React>;
 let mockHookValue: ReturnType<typeof useWeb3React>;
 
 const mockEthereumConfig = {
-  network_id: '3',
+  network_id: '11155111',
-  chain_id: '3',
+  chain_id: '11155111',
   confirmations: 3,
   collateral_bridge_contract: {
     address: 'bridge address',
@@ -118,7 +118,7 @@ it('Checks that chain ID matches app ID', async () => {
 
   expect(screen.getByText('Loading...')).toBeInTheDocument();
   expect(
-    await screen.findByText(`This app only works on chain ID: 3`)
+    await screen.findByText(`This app only works on Sepolia`)
   ).toBeInTheDocument();
   expect(screen.queryByText('Child')).not.toBeInTheDocument();
 });

libs/web3/src/lib/web3-container.tsx

@@ -8,6 +8,7 @@ import { Web3Provider } from './web3-provider';
 import { useEthereumConfig } from './use-ethereum-config';
 import { useWeb3ConnectStore } from './web3-connect-store';
 import { createConnectors } from './web3-connectors';
+import { getChainName } from './constants';
 
 interface Web3ContainerProps {
   children: ReactNode;
@@ -109,7 +110,7 @@ export const Web3Content = ({
     return (
       <SplashWrapper>
         <p className="mb-4">
-          {t(`This app only works on chain ID: ${appChainId}`)}
+          {t(`This app only works on ${getChainName(appChainId)}`)}
         </p>
         <Button onClick={() => connector.deactivate()}>
           {t('Disconnect')}

libs/withdraws/src/lib/withdrawal-feedback.tsx

@@ -10,7 +10,7 @@ import {
   KeyValueTableRow,
 } from '@vegaprotocol/ui-toolkit';
 import type { VegaTxState } from '@vegaprotocol/wallet';
-import { ChainIdMap, useWeb3ConnectStore } from '@vegaprotocol/web3';
+import { getChainName, useWeb3ConnectStore } from '@vegaprotocol/web3';
 import { useWeb3React } from '@web3-react/core';
 import { formatDistanceToNow } from 'date-fns';
 import type { WithdrawalFieldsFragment } from './__generated__/Withdrawal';
@@ -114,7 +114,7 @@ const ActionButton = ({
   }
 
   if (chainId !== desiredChainId) {
-    const chainName = desiredChainId ? ChainIdMap[desiredChainId] : 'Unknown';
+    const chainName = getChainName(chainId);
     return (
       <>
         <p className="text-danger mb-2">