diff --git a/package.json b/package.json index 6da6401..d519e76 100644 --- a/package.json +++ b/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", diff --git a/src/App.jsx b/src/App.jsx index 6663ab7..724d995 100644 --- a/src/App.jsx +++ b/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} diff --git a/src/components/TopBar/SelectNetwork.jsx b/src/components/TopBar/SelectNetwork.jsx index a4b1770..ccb5e26 100644 --- a/src/components/TopBar/SelectNetwork.jsx +++ b/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', diff --git a/src/components/TopBar/TopBar.jsx b/src/components/TopBar/TopBar.jsx index d823439..6dbc30e 100644 --- a/src/components/TopBar/TopBar.jsx +++ b/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} />