make network change based on the url params on the first render

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

package.json

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

src/App.jsx

@@ -160,7 +160,7 @@ function App() {
                 setWrongNetworkToastId(null);
             }
         }
-    }, [chainId, addressChainId, isConnected])
+    }, [chainId, addressChainId, isConnected, wrongNetworkToastId])
 
     useEffect(() => {
         if (errorMessage) {

src/components/TopBar/SelectNetwork.jsx

@@ -12,8 +12,8 @@ import { isNetworkAvailable } from "../../constants";
 import { parseKnownToken } from "../../components/Token/Token";
 
 import { useSwitchChain } from 'wagmi';
-import toast from "react-hot-toast";
 import { useNavigate, useLocation } from 'react-router-dom';
+import toast from "react-hot-toast";
 
 function SelectNetwork({ chainId, wrongNetworkToastId, setWrongNetworkToastId, small }) {
     const theme = useTheme();
@@ -25,29 +25,43 @@ function SelectNetwork({ chainId, wrongNetworkToastId, setWrongNetworkToastId, s
     const [networkId, setNetworkId] = useState(chainId);
 
     useEffect(() => {
-        if (chainId !== networkId) setNetworkId(chainId);
-    }, [chainId])
-
-    useEffect(() => {
-        const chainName = chains.find((chain) => chain.id === chainId).name;
         const parts = pathname.split('/');
         if (parts.length > 2) {
-            parts[1] = chainName.toLowerCase();
+            let targetChain = chains.at(0);
-            const newPath = parts.join("/");
+            const chainName = parts[1].toLowerCase();
-            navigate(newPath);
+            const chain = chains.find(chain => chain.name.toLowerCase() === chainName);
+            if (chain && targetChain.name !== chain.name) {
+                targetChain = chain;
             }
-    }, [chains, chainId])
+            changeNetworkId(targetChain.name, targetChain.id)
+        }
+    }, [])
 
-    const handleChange = (event) => {
+    useEffect(() => {
-        const chainName = chains.find((chain) => chain.id === event.target.value).name;
+        if (chainId !== networkId) setNetworkId(chainId);
+    }, [chainId, networkId])
+
+    const changeNetworkId = (chainName, newNetworkId) => {
         toast.dismiss(wrongNetworkToastId);
         const toastId = toast.loading(`Trying to connect to ${chainName} network... Wait please`, {
             position: 'bottom-right'
         });
         setWrongNetworkToastId(toastId);
 
-        setNetworkId(event.target.value);
+        setNetworkId(newNetworkId);
-        switchChain({ chainId: event.target.value });
+        switchChain({ chainId: newNetworkId });
+    }
+
+    const handleChange = (event) => {
+        const chainName = chains.find((chain) => chain.id === event.target.value).name;
+        changeNetworkId(chainName, event.target.value);
+
+        const parts = pathname.split('/');
+        if (parts.length > 2) {
+            parts[1] = chainName.toLowerCase();
+            const newPath = parts.join("/");
+            navigate(newPath, { replace: true });
+        }
     }
 
     return(

src/containers/NotFound/NotFound.jsx

@@ -31,7 +31,6 @@ export default function NotFound({
         });
         setWrongNetworkToastId(toastId);
 
-
         setNetworkId(newChainId);
         switchChain({ chainId: newChainId });
     }