Automatically pull chain id

iotaledger · Dec 2, 2023 · 074b056 · 074b056
1 parent 5a306ca
commit 074b056
Show file tree

Hide file tree

Showing 4 changed files with 418 additions and 5 deletions.
diff --git a/docs/build/getting-started/networks-endpoints.mdx b/docs/build/getting-started/networks-endpoints.mdx
@@ -14,6 +14,7 @@ keywords:
 ---
 
 import { AddToMetaMaskButton, EVMNetworks } from '@theme/AddToMetaMaskButton';
+import { ChainId } from '@theme/ChainId';
 
 # 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 | <ChainId 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 | <ChainId 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
 

diff --git a/theme/package.json b/theme/package.json
@@ -20,7 +20,8 @@
     "@metamask/providers": "^10.2.1",
     "clsx": "^1.2.1",
     "html-react-parser": "^4.2.10",
-    "react-markdown": "6"
+    "react-markdown": "6",
+    "web3": "^4.2.2"
   },
   "devDependencies": {
     "@docusaurus/types": "2.4.1",

diff --git a/theme/src/theme/ChainId/index.tsx b/theme/src/theme/ChainId/index.tsx
@@ -0,0 +1,20 @@
+import { useEffect, useState } from 'react';
+import { Web3 } from 'web3';
+
+interface ChainIdProps {
+  url: string;
+}
+
+export function ChainId(props: ChainIdProps) {
+  const [value, setValue] = useState<string | null>(null);
+
+  useEffect(() => {
+    const web3 = new Web3(props.url);
+    web3.eth
+      .getChainId()
+      .then((chainId) => setValue(chainId.toString()))
+      .catch((error) => setValue(`Error: ${error.message}`));
+  }, []);
+
+  return value;
+}