Automatically pull chain id

docs/build/getting-started/networks-endpoints.mdx

@@ -14,6 +14,7 @@ keywords:
 ---
 
 import { AddToMetaMaskButton, EVMNetworks } from '@theme/AddToMetaMaskButton';
+import { GetChainId } from '@theme/GetChainId';
 
 # Networks & Endpoints
 
@@ -57,7 +58,7 @@ Mainnet.
 
 | Base Token    | Protocol  | Chain ID | RPC URL                                                                       | Explorer                             |
 | ------------- | --------- | -------- | ----------------------------------------------------------------------------- | ------------------------------------ |
-| Shimmer Token | ISC / EVM | 148      | https://json-rpc.evm.shimmer.network or wss://ws.json-rpc.evm.shimmer.network | https://explorer.evm.shimmer.network |
+| Shimmer Token | ISC / EVM | <GetChainId url='https://json-rpc.evm.shimmer.network'/>      | https://json-rpc.evm.shimmer.network or wss://ws.json-rpc.evm.shimmer.network | https://explorer.evm.shimmer.network |
 
 ## Public Testnet
 
@@ -86,7 +87,7 @@ This network is subject to occasional resets (no data retention) which are usual
 
 | Base Token                | Protocol  | Chain ID | RPC URL                                      | Faucet                                     | Explorer                                     |
 | ------------------------- | --------- | -------- | -------------------------------------------- | ------------------------------------------ | -------------------------------------------- |
-| Testnet Tokens (no value) | ISC / EVM | 1073     | https://json-rpc.evm.testnet.shimmer.network | https://evm-faucet.testnet.shimmer.network | https://explorer.evm.testnet.shimmer.network |
+| Testnet Tokens (no value) | ISC / EVM | <GetChainId url='https://json-rpc.evm.testnet.shimmer.network'/> | https://json-rpc.evm.testnet.shimmer.network | https://evm-faucet.testnet.shimmer.network | https://explorer.evm.testnet.shimmer.network |
 
 ## DevNet
 

theme/package.json

@@ -20,7 +20,8 @@
     "@metamask/providers": "^10.2.1",
     "clsx": "^1.2.1",
     "html-react-parser": "^4.2.2",
-    "react-markdown": "6"
+    "react-markdown": "6",
+    "web3": "^4.2.2"
   },
   "devDependencies": {
     "@docusaurus/types": "2.4.1",

theme/src/theme/GetChainId/index.tsx

@@ -0,0 +1,26 @@
+import React, { useEffect, useState } from 'react';
+import { Web3 } from 'web3';
+
+interface GetChainIdProps {
+  url: string;
+}
+
+export function GetChainId(props: GetChainIdProps) {
+  const [chainId, setChainId] = useState<bigint | null>(null);
+  const [error, setError] = useState<Error | null>(null);
+
+  console.log(props.url);
+
+  useEffect(() => {
+    const web3 = new Web3(props.url);
+    web3.eth.getChainId().then(setChainId).catch(setError);
+  }, []);
+
+  console.log(chainId);
+  return (
+    <>
+      {chainId !== null && <span>{chainId.toString()}</span>}
+      {error !== null && <span>Error: {error.message}</span>}
+    </>
+  );
+}