Add support for Ganache, Hardhat and Anvil

Author: duckception

src/index.js

@@ -484,18 +484,43 @@ const initialize = async () => {
   };
 
   addEthereumChain.onclick = async () => {
-    await ethereum.request({
-      method: 'wallet_addEthereumChain',
-      params: [
-        {
-          chainId: '0x539',
-          rpcUrls: ['http://127.0.0.1:8545'],
-          chainName: 'Localhost 8545',
-          nativeCurrency: { name: 'Ether', decimals: 18, symbol: 'ETH' },
-          blockExplorerUrls: null,
-        },
-      ],
-    });
+    try {
+      const response = await fetch('http://127.0.0.1:8545', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          jsonrpc: '2.0',
+          method: 'eth_chainId',
+          params: [],
+          id: 1,
+        }),
+      });
+
+      const chainId = (await response.json()).result;
+      const chainIdDecimal = parseInt(chainId, 16);
+      console.log(
+        `Fetched chain ID from local node: ${chainId} (${chainIdDecimal})`,
+      );
+
+      await ethereum.request({
+        method: 'wallet_addEthereumChain',
+        params: [
+          {
+            chainId,
+            rpcUrls: ['http://127.0.0.1:8545'],
+            chainName: 'Localhost 8545',
+            nativeCurrency: { name: 'Ether', decimals: 18, symbol: 'ETH' },
+            blockExplorerUrls: null,
+          },
+        ],
+      });
+    } catch (err) {
+      if (err.message === 'Failed to fetch') {
+        console.error('Local node RPC is unavailable. Cannot fetch chain ID');
+      } else {
+        console.error(err);
+      }
+    }
   };
 
   switchEthereumChain.onclick = async () => {