Merge pull request #906 from onflow/nialexsan/add-evm-buttons

Nialexsan/add evm buttons
onflow · Sep 20, 2024 · 4a00801 · 4a00801
2 parents 20ebaf0 + 5f9ee02
commit 4a00801
Show file tree

Hide file tree

Showing 2 changed files with 56 additions and 26 deletions.
diff --git a/sidebars.js b/sidebars.js
@@ -13,7 +13,6 @@
 
 /** @type {import('@docusaurus/plugin-content-docs').SidebarsConfig} */
 const sidebars = {
-  overview: [{ type: 'autogenerated', dirName: 'overview' }],
   networks: [
     'networks/index',
     {
@@ -120,7 +119,6 @@ const sidebars = {
   ],
   build: [{ type: 'autogenerated', dirName: 'build' }],
   evm: [{ type: 'autogenerated', dirName: 'evm' }],
-  tutorials: [{ type: 'autogenerated', dirName: 'tutorials' }],
   tools: [{ type: 'autogenerated', dirName: 'tools' }],
   ecosystem: [{ type: 'autogenerated', dirName: 'ecosystem' }],
 };

diff --git a/src/components/addNetworkButton.tsx b/src/components/addNetworkButton.tsx
@@ -4,41 +4,67 @@ import {
   ButtonLink,
 } from '@site/src/ui/design-system/src/lib/Components/Button/index';
 
-export const AddNetworkButton = () => {
-  const targetChainIds = [747, 646, 545]; // Your target chain IDs
+const targetChains = [
+  {
+    id: 747,
+    name: 'EVM on Flow',
+    rpcUrls: ['https://mainnet.evm.nodes.onflow.org'],
+    blockExplorerUrls: ['https://evm.flowscan.io/'],
+  },
+  {
+    id: 545,
+    name: 'EVM on Flow Testnet',
+    rpcUrls: ['https://testnet.evm.nodes.onflow.org'],
+    blockExplorerUrls: ['https://evm-testnet.flowscan.io/'],
+  },
+];
+
+export const AddNetworkButton = (): JSX.Element => {
   const [isNetworkAdded, setIsNetworkAdded] = useState<boolean>(false);
-  const [chainId, setChainId] = useState<string>(''); // Flow Testnet
+  const [chainId, setChainId] = useState<number>(0); // Flow Testnet
 
-  const getChainId = async () => {
+  const getChainId = async (): Promise<void> => {
     if (!window?.ethereum) return;
     const chainId = await window?.ethereum.request({ method: 'eth_chainId' });
     setChainId(parseInt(chainId, 16)); // Convert chainId from hex to decimal
   };
 
   useEffect(() => {
-    getChainId();
+    getChainId().catch((e) => {
+      console.error(e);
+    });
   }, []);
 
   const hasEthereum = window?.ethereum !== undefined;
 
   useEffect(() => {
-    if (targetChainIds.includes(chainId)) {
+    if (targetChains.map(({ id }) => id).includes(chainId)) {
       setIsNetworkAdded(true);
     } else {
       setIsNetworkAdded(false);
     }
   }, [chainId]);
 
-  const addFlowNetwork = async () => {
+  const addFlowNetwork = async ({
+    id,
+    name,
+    rpcUrls,
+    blockExplorerUrls,
+  }: {
+    id: number;
+    name: string;
+    rpcUrls: string[];
+    blockExplorerUrls: string[];
+  }): Promise<void> => {
     try {
       // Define your network details here
       await window?.ethereum?.request({
         method: 'wallet_addEthereumChain',
         params: [
           {
-            chainId: '0x2eb', // 747 in hexadecimal
-            chainName: 'EVM on Flow',
-            rpcUrls: ['https://mainnet.evm.nodes.onflow.org'],
+            chainId: id.toString(16), // '0x2eb', // 747 in hexadecimal
+            chainName: name,
+            rpcUrls,
             iconUrls: [
               'https://assets-global.website-files.com/5f734f4dbd95382f4fdfa0ea/65b016be9b9cf0a402a67a38_ico-flow-crescendo.png',
             ],
@@ -47,7 +73,7 @@ export const AddNetworkButton = () => {
               symbol: 'FLOW',
               decimals: 18,
            },
-            blockExplorerUrls: ['https://evm.flowscan.io/'],
+            blockExplorerUrls,
           },
         ],
       });
@@ -58,20 +84,26 @@ export const AddNetworkButton = () => {
 
   // eslint-disable-next-line @typescript-eslint/no-misused-promises
   return hasEthereum ? (
-    <Button
-      className="my-5 "
-      disabled={isNetworkAdded}
-      variant="secondary"
-      onClick={() => addFlowNetwork()}
-    >
-      {isNetworkAdded ? 'Flow Network Added!' : 'Add Flow Network'}
-    </Button>
+    <div className="flex gap-2 my-5">
+      {targetChains.map((chain) => (
+        <Button
+          key={chain.id}
+          disabled={isNetworkAdded}
+          variant="secondary"
+          onClick={() => {
+            addFlowNetwork(chain).catch((e) => {
+              console.error(e);
+            });
+          }}
+        >
+          {isNetworkAdded
+            ? `${chain.name} Network Added!`
+            : `Add ${chain.name} Network`}
+        </Button>
+      ))}
+    </div>
   ) : (
-    <ButtonLink
-      className="my-5"
-      variant="primary"
-      href="https://metamask.io/download/"
-    >
+    <ButtonLink variant="primary" href="https://metamask.io/download/">
       Install MetaMask
     </ButtonLink>
   );