switch networks more aggressive because of metamask delays

Signed-off-by: Uncle Fatso <uncle.fatso@ghostchain.io>

package.json

@@ -1,7 +1,7 @@
 {
   "name": "ghost-dao-interface",
   "private": true,
-  "version": "0.7.6",
+  "version": "0.7.7",
   "type": "module",
   "scripts": {
     "dev": "vite",

src/App.jsx

@@ -116,7 +116,7 @@ function App() {
     const [isSidebarExpanded, setIsSidebarExpanded] = useState(false);
     const [mobileOpen, setMobileOpen] = useState(false);
 
-    const { address = "", chainId: addressChainId, isConnected, isReconnecting } = useAccount();
+    const { address = "", chainId: addressChainId, status, isConnected, isReconnecting } = useAccount();
 
     const provider = usePublicClient();
     const chainId  = useChainId();
@@ -177,7 +177,6 @@ function App() {
     };
 
     const themeMode = theme === "light" ? lightTheme : theme === "dark" ? darkTheme : gTheme;
-
     const chainExists = isNetworkAvailable(chainId, addressChainId);
 
     useEffect(() => {
@@ -194,6 +193,7 @@ function App() {
                         wrongNetworkToastId={wrongNetworkToastId}
                         setWrongNetworkToastId={setWrongNetworkToastId}
                         address={address}
+                        status={status}
                         chainId={addressChainId ? addressChainId : chainId}
                         chainExists={chainExists}
                         handleDrawerToggle={handleDrawerToggle}

src/components/TopBar/SelectNetwork.jsx

@@ -1,4 +1,4 @@
-import { useState, useEffect } from "react";
+import { useState, useEffect, useRef } from "react";
 
 import { Box, Typography, SvgIcon, useTheme } from "@mui/material";
 
@@ -15,9 +15,10 @@ import { useSwitchChain } from 'wagmi';
 import { useNavigate, useLocation } from 'react-router-dom';
 import toast from "react-hot-toast";
 
-function SelectNetwork({ chainId, wrongNetworkToastId, setWrongNetworkToastId, small }) {
+function SelectNetwork({ chainId, wrongNetworkToastId, setWrongNetworkToastId, small, status }) {
     const theme = useTheme();
     const navigate = useNavigate();
+    const hasAttemptedSwitch = useRef(false);
 
     const { chains, switchChain } = useSwitchChain();
     const { pathname } = useLocation();
@@ -25,21 +26,21 @@ function SelectNetwork({ chainId, wrongNetworkToastId, setWrongNetworkToastId, s
     const [networkId, setNetworkId] = useState(chainId);
 
     useEffect(() => {
+        if (status === 'reconnecting' || status === 'connecting') return;
+
         const parts = pathname.split('/');
-        if (parts.length > 2) {
+        if (!hasAttemptedSwitch.current && parts.length > 2) {
             let targetChain = chains.at(0);
             const chainName = parts[1].toLowerCase();
             const chain = chains.find(chain => chain.name.toLowerCase() === chainName);
             if (chain && targetChain.name !== chain.name) {
                 targetChain = chain;
             }
-            changeNetworkId(targetChain.name, targetChain.id)
-        }
-    }, [])
 
-    useEffect(() => {
-        if (chainId !== networkId) setNetworkId(chainId);
-    }, [chainId, networkId])
+            hasAttemptedSwitch.current = true;
+            changeNetworkId(targetChain.name, targetChain.id);
+        }
+    }, [status, chains, pathname]);
 
     const changeNetworkId = (chainName, newNetworkId) => {
         toast.dismiss(wrongNetworkToastId);
@@ -49,7 +50,12 @@ function SelectNetwork({ chainId, wrongNetworkToastId, setWrongNetworkToastId, s
         setWrongNetworkToastId(toastId);
 
         setNetworkId(newNetworkId);
-        switchChain({ chainId: newNetworkId });
+        switchChain({
+            chainId: newNetworkId
+        }, {
+            onSuccess: (data) => console.log("Network switched to", data.name),
+            onError: (error) => console.log("Error during network switching", error),
+        });
     }
 
     const handleChange = (event) => {
@@ -70,6 +76,7 @@ function SelectNetwork({ chainId, wrongNetworkToastId, setWrongNetworkToastId, s
                 labelId="network-select-helper-label"
                 id="network-select-helper"
                 value={networkId}
+                disabled={!hasAttemptedSwitch.current}
                 onChange={handleChange}
                 sx={{
                     boxShadow: 'none',

src/components/TopBar/TopBar.jsx

@@ -18,6 +18,7 @@ function TopBar({
     address,
     wrongNetworkToastId,
     connect,
+    status,
     handleDrawerToggle,
     setWrongNetworkToastId
 }) {
@@ -39,6 +40,7 @@ function TopBar({
                         setWrongNetworkToastId={setWrongNetworkToastId}
                         chainId={chainId}
                         small={small}
+                        status={status}
                     />
                     <Wallet address={address} connect={connect} chainId={chainId} />
                 </Box>