feat(website): Improve behavior on adding chains and tokens (#14781)

Co-authored-by: dave | d1onys1us <13951458+d1onys1us@users.noreply.github.com>
taikoxyz · Sep 25, 2023 · fa59e09 · fa59e09
1 parent 9cc10ba
commit fa59e09
Show file tree

Hide file tree

Showing 4 changed files with 47 additions and 37 deletions.
diff --git 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
@@ -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
diff --git a/packages/website/utils/switchOrAddChain.ts 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],
+    });
+  }
+}