Merge pull request #647 from onflow/detect-network-added-metamask

detect if user has flow network selected and don't prompt to add network

src/components/addNetworkButton.tsx

@@ -1,12 +1,34 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import {
   Button,
   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 [isNetworkAdded, setIsNetworkAdded] = useState<boolean>(false);
+  const [chainId, setChainId] = useState<string>(''); // Flow Previewnet
+
+  const getChainId = async () => {
+    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();
+  }, []);
+
   const hasEthereum = window?.ethereum !== undefined;
 
+  useEffect(() => {
+    if (targetChainIds.includes(chainId)) {
+      setIsNetworkAdded(true);
+    } else {
+      setIsNetworkAdded(false);
+    }
+  }, [chainId]);
+
   const addFlowNetwork = async () => {
     try {
       // Define your network details here
@@ -36,16 +58,21 @@ export const AddNetworkButton = () => {
 
   // eslint-disable-next-line @typescript-eslint/no-misused-promises
   return hasEthereum ? (
-    <Button className='my-5 ' variant='secondary' onClick={addFlowNetwork}>
-      Add Flow Network
+    <Button
+      className="my-5 "
+      disabled={isNetworkAdded}
+      variant="secondary"
+      onClick={addFlowNetwork}
+    >
+      {isNetworkAdded ? 'Flow Network Added!' : 'Add Flow Network'}
     </Button>
   ) : (
     <ButtonLink
-      className='my-5'
-      variant='primary'
-      href='https://metamask.io/download/'
+      className="my-5"
+      variant="primary"
+      href="https://metamask.io/download/"
     >
       Install MetaMask
     </ButtonLink>
-  )
+  );
 };

src/ui/design-system/src/lib/Components/Button/index.tsx

@@ -15,11 +15,13 @@ const VARIANTS = {
     "dark:bg-white dark:text-black",
     "dark:hover:border-white dark:hover:bg-black dark:hover:text-white",
     "dark:active:border-gray-500 dark:active:bg-black dark:active:text-gray-500",
+    "disabled:opacity-50 disabled:bg-gray-200 disabled:cursor-not-allowed", 
   ],
   "primary-no-darkmode": [
     "bg-black text-white border-transparent",
     "hover:border-black hover:bg-white hover:text-black",
     "active:border-gray-500 active:bg-white active:text-gray-500",
+    "disabled:opacity-50 disabled:bg-gray-200 disabled:cursor-not-allowed", 
   ],
   secondary: [
     "text-primary-blue border-primary-blue",
@@ -28,6 +30,7 @@ const VARIANTS = {
     "dark:bg-black dark:text-blue-dark dark:border-blue-dark",
     "dark:hover:bg-blue-dark dark:hover:text-white",
     "dark:active:bg-blue-hover-dark dark:active:text-white dark:active:border-blue-hover-dark",
+    "disabled:opacity-50 disabled:cursor-not-allowed", 
   ],
 }