From fa59e092de6114f586f6b8104aae718c61ff01cf Mon Sep 17 00:00:00 2001
From: Nakochi <109920857+Nakochi-crypto@users.noreply.github.com>
Date: Mon, 25 Sep 2023 18:44:17 +0900
Subject: [PATCH] feat(website): Improve behavior on adding chains and tokens
 (#14781)

Co-authored-by: dave | d1onys1us <13951458+d1onys1us@users.noreply.github.com>
---
 .../components/Button/AddTokensButton.tsx     | 25 +++++++++--------
 .../Button/ConnectToMetamaskButton.tsx        | 20 ++++---------
 packages/website/utils/ethereumRequest.ts     | 11 --------
 packages/website/utils/switchOrAddChain.ts    | 28 +++++++++++++++++++
 4 files changed, 47 insertions(+), 37 deletions(-)
 delete mode 100644 packages/website/utils/ethereumRequest.ts
 create mode 100644 packages/website/utils/switchOrAddChain.ts

diff --git a/packages/website/components/Button/AddTokensButton.tsx b/packages/website/components/Button/AddTokensButton.tsx
index f9da4ee2dbb..d6daabf957d 100644
--- a/packages/website/components/Button/AddTokensButton.tsx
+++ b/packages/website/components/Button/AddTokensButton.tsx
@@ -1,13 +1,11 @@
 import {
-  SEPOLIA_ADD_ETHEREUM_CHAIN,
   SEPOLIA_ADD_TOKENS,
   SEPOLIA_CONFIG,
-  JOLNIR_ADD_ETHEREUM_CHAIN,
   JOLNIR_ADD_TOKENS,
   JOLNIR_CONFIG,
 } from "../../domain/chain";
 
-import { ethereumRequest } from "../../utils/ethereumRequest";
+import { switchOrAddChain } from "../../utils/switchOrAddChain";
 
 type ConnectButtonProps = {
   network:
@@ -17,11 +15,7 @@ type ConnectButtonProps = {
 
 const chainMap = {
   Sepolia: SEPOLIA_CONFIG.chainId.hex,
-};
-
-const configMap = {
-  Sepolia: SEPOLIA_ADD_ETHEREUM_CHAIN,
-  Jolnir: JOLNIR_ADD_ETHEREUM_CHAIN,
+  Jolnir: JOLNIR_CONFIG.chainId.hex,
 };
 
 const tokenConfigMap = {
@@ -35,9 +29,18 @@ interface AddTokensButtonProps {
 
 const addTokensToWallet = async ({ network }: AddTokensButtonProps) => {
   const { ethereum } = window as any;
-  if (ethereum.chainId != chainMap[network]) {
-    await ethereumRequest("wallet_addEthereumChain", [configMap[network]]);
+
+  const chainId = await ethereum.request({ method: "eth_chainId" });
+
+  if (chainId != chainMap[network]) {
+    try {
+      await switchOrAddChain(network);
+    } catch (error) {
+      alert("Failed to switch the network with wallet_switchEthereumNetwork. Error log: " + error.message);
+      return;
+    }
   }
+
   for (const token of tokenConfigMap[network]) {
     const params = {
       options: {
@@ -48,7 +51,7 @@ const addTokensToWallet = async ({ network }: AddTokensButtonProps) => {
       },
       type: "ERC20",
     };
-    await ethereumRequest("wallet_watchAsset", params);
+    await ethereum.request({ method: "wallet_watchAsset", params });
   }
 };
 
diff --git a/packages/website/components/Button/ConnectToMetamaskButton.tsx b/packages/website/components/Button/ConnectToMetamaskButton.tsx
index 9df9684b151..589385a22b7 100644
--- a/packages/website/components/Button/ConnectToMetamaskButton.tsx
+++ b/packages/website/components/Button/ConnectToMetamaskButton.tsx
@@ -1,10 +1,9 @@
 import {
   SEPOLIA_CONFIG,
   TAIKO_CONFIG,
-  TAIKO_ADD_ETHEREUM_CHAIN,
 } from "../../domain/chain";
 
-import { ethereumRequest } from "../../utils/ethereumRequest";
+import { switchOrAddChain } from "../../utils/switchOrAddChain";
 
 type ConnectButtonProps = {
   network:
@@ -24,24 +23,15 @@ async function ConnectToMetamask(network: ConnectButtonProps["network"]) {
     return;
   }
 
-  if (ethereum.chainId == chainMap[network]) {
+  const chainId = await ethereum.request({ method: "eth_chainId" });
+
+  if (chainId == chainMap[network]) {
     alert(`You are already connected to ${network}.`);
     return;
   }
 
-  let params: any;
-  if (network === SEPOLIA_CONFIG.names.shortName) {
-    params = [{ chainId: chainMap[network] }];
-  } else {
-    params = [TAIKO_ADD_ETHEREUM_CHAIN];
-  }
   try {
-    await ethereumRequest(
-      network === SEPOLIA_CONFIG.names.shortName
-        ? "wallet_switchEthereumChain"
-        : "wallet_addEthereumChain",
-      params
-    );
+    await switchOrAddChain(network);
   } catch (error) {
     alert(
       "Failed to add the network with wallet_addEthereumChain request. Add the network with https://chainlist.org/ or do it manually. Error log: " +
diff --git a/packages/website/utils/ethereumRequest.ts b/packages/website/utils/ethereumRequest.ts
deleted file mode 100644
index 4a856ca76ec..00000000000
--- a/packages/website/utils/ethereumRequest.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-export const ethereumRequest = async (method: string, params: any) => {
-  const { ethereum } = window as any;
-  try {
-    await ethereum.request({
-      method,
-      params,
-    });
-  } catch (ex) {
-    console.error(ex);
-  }
-};
diff --git a/packages/website/utils/switchOrAddChain.ts b/packages/website/utils/switchOrAddChain.ts
new file mode 100644
index 00000000000..fd97d703088
--- /dev/null
+++ b/packages/website/utils/switchOrAddChain.ts
@@ -0,0 +1,28 @@
+import {
+  SEPOLIA_CONFIG,
+  TAIKO_CONFIG,
+  TAIKO_ADD_ETHEREUM_CHAIN,
+} from "../domain/chain";
+
+const chainMap = {
+  Sepolia: SEPOLIA_CONFIG.chainId.hex,
+  Jolnir: TAIKO_CONFIG.chainId.hex,
+};
+
+export async function switchOrAddChain(network: string) {
+  const { ethereum } = window as any;
+  try {
+    await ethereum.request({
+      method: "wallet_switchEthereumChain",
+      params: [{ chainId: chainMap[network] }],
+    });
+  } catch (switchError) {
+    if (switchError.code !== 4902) {
+      throw switchError;
+    }
+    await ethereum.request({
+      method: "wallet_addEthereumChain",
+      params: [TAIKO_ADD_ETHEREUM_CHAIN],
+    });
+  }
+}