From e45265ac711b6ba837099fe300ca20f6955cd6d1 Mon Sep 17 00:00:00 2001
From: Art <artur@vegaprotocol.io>
Date: Tue, 3 Jan 2023 23:54:54 +0100
Subject: [PATCH] chore: chain id to name (714) (#2503)

---
 .../src/app/components/web3-connector/web3-connector.tsx  | 4 ++--
 .../src/components/web3-connector/web3-connector.tsx      | 4 ++--
 libs/deposits/src/lib/deposit-form.tsx                    | 4 ++--
 libs/web3/src/lib/constants.ts                            | 5 +++++
 libs/web3/src/lib/web3-container.spec.tsx                 | 8 ++++----
 libs/web3/src/lib/web3-container.tsx                      | 3 ++-
 libs/withdraws/src/lib/withdrawal-feedback.tsx            | 4 ++--
 7 files changed, 19 insertions(+), 13 deletions(-)

diff --git a/apps/multisig-signer/src/app/components/web3-connector/web3-connector.tsx b/apps/multisig-signer/src/app/components/web3-connector/web3-connector.tsx
index 7e71b0d54..d02e3ead1 100644
--- a/apps/multisig-signer/src/app/components/web3-connector/web3-connector.tsx
+++ b/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>
diff --git a/apps/token/src/components/web3-connector/web3-connector.tsx b/apps/token/src/components/web3-connector/web3-connector.tsx
index 8d1bd2321..9a8f60a99 100644
--- a/apps/token/src/components/web3-connector/web3-connector.tsx
+++ b/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>
diff --git a/libs/deposits/src/lib/deposit-form.tsx b/libs/deposits/src/lib/deposit-form.tsx
index aee2a66b8..8ed50201b 100644
--- a/libs/deposits/src/lib/deposit-form.tsx
+++ b/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
diff --git a/libs/web3/src/lib/constants.ts b/libs/web3/src/lib/constants.ts
index 810a55cd4..1c1075a4b 100644
--- a/libs/web3/src/lib/constants.ts
+++ b/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';
+};
diff --git a/libs/web3/src/lib/web3-container.spec.tsx b/libs/web3/src/lib/web3-container.spec.tsx
index 509fe8ddd..abf70c974 100644
--- a/libs/web3/src/lib/web3-container.spec.tsx
+++ b/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',
-  chain_id: '3',
+  network_id: '11155111',
+  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();
 });
diff --git a/libs/web3/src/lib/web3-container.tsx b/libs/web3/src/lib/web3-container.tsx
index af24e963c..26082bb7e 100644
--- a/libs/web3/src/lib/web3-container.tsx
+++ b/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')}
diff --git a/libs/withdraws/src/lib/withdrawal-feedback.tsx b/libs/withdraws/src/lib/withdrawal-feedback.tsx
index 959b6306e..bca2abd50 100644
--- a/libs/withdraws/src/lib/withdrawal-feedback.tsx
+++ b/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">