fix: connect button when connected to wrong chain (#848)

src/components/header/web3Status/index.tsx

@@ -96,7 +96,7 @@ const getCommonWalletButtonProps = (isXXS: boolean) =>
     }
   } as const);
 function Web3StatusInner({ showOnlyIcon }: { showOnlyIcon?: boolean }) {
-  const { chainId, account } = useWeb3React();
+  const { chainId, account, isActive } = useWeb3React();
   const accountRef = useRef(account);
   const chainIdRef = useRef(chainId);
   useEffect(() => {
@@ -108,8 +108,7 @@ function Web3StatusInner({ showOnlyIcon }: { showOnlyIcon?: boolean }) {
     if (account && chainId && chainId !== chainIdRef.current) {
       chainIdRef.current = chainId;
     }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [chainId]);
+  }, [chainId, account]);
   const { isXXS } = useBreakpoints();
   const switchingChain = useAppSelector(
     (state) => state.wallets.switchingChain
@@ -134,8 +133,13 @@ function Web3StatusInner({ showOnlyIcon }: { showOnlyIcon?: boolean }) {
   });
   const wasConnected = !!accountRef.current;
   const previousChainId = chainIdRef.current;
-  const configs = getConfigsByChainId(previousChainId);
-  const connectedToWrongChainId = wasConnected && !configs?.length;
+  const configsPreviousChain = getConfigsByChainId(previousChainId);
+  const configsCurrentChain = getConfigsByChainId(chainId);
+
+  const connectedToWrongChainId = account
+    ? !configsCurrentChain?.length
+    : wasConnected && !configsPreviousChain?.length && isActive;
+
   if (!connectedToWrongChainId && account) {
     const color = getColor1OverColor2WithContrast({
       color2: buttonBgColor,

src/lib/connection/index.ts

@@ -10,7 +10,10 @@ import UNISWAP_LOGO from "assets/svg/logo.svg";
 import COINBASE_ICON from "assets/wallets/coinbase-icon.svg";
 import UNIWALLET_ICON from "assets/wallets/uniswap-wallet-icon.png";
 import WALLET_CONNECT_ICON from "assets/wallets/walletconnect-icon.svg";
-import { defaultChainId as importedDefaultChainId } from "lib/config";
+import {
+  defaultChainId,
+  defaultChainId as importedDefaultChainId
+} from "lib/config";
 import { useSyncExternalStore } from "react";
 
 import { RPC_URLS } from "../constants/networks";
@@ -34,7 +37,11 @@ function onError(error: Error) {
 
 const [web3Network, web3NetworkHooks] = initializeConnector<Network>(
   (actions) =>
-    new Network({ actions, urlMap: RPC_PROVIDERS, defaultChainId: 1 })
+    new Network({
+      actions,
+      urlMap: RPC_PROVIDERS,
+      defaultChainId: defaultChainId
+    })
 );
 export const networkConnection: Connection = {
   getName: () => "Network",

src/lib/utils/hooks/useDisconnect.ts

@@ -8,11 +8,11 @@ export const useDisconnect = () => {
 
   const dispatch = useAppDispatch();
 
-  return useCallback(() => {
+  return useCallback(async () => {
     if (connector && connector.deactivate) {
-      connector.deactivate();
+      await connector.deactivate();
     }
-    connector.resetState();
+    await connector.resetState();
     dispatch(updateSelectedWallet({ wallet: undefined }));
   }, [connector, dispatch]);
 };

src/lib/utils/hooks/useSyncChainQuery.ts

@@ -3,7 +3,7 @@ import { useWeb3React } from "@web3-react/core";
 import { useConfigContext } from "components/config/ConfigContext";
 import { configQueryParameters } from "lib/routing/parameters";
 import { ParsedQs } from "qs";
-import { useEffect, useRef } from "react";
+import { useCallback, useEffect, useRef } from "react";
 import { useSearchParams } from "react-router-dom";
 
 import { isSupportedChain } from "../../constants/chains";
@@ -22,15 +22,19 @@ function getParsedConfigId(parsedQs?: ParsedQs) {
 export default function useSyncChainQuery() {
   const { chainId, isActive, account } = useWeb3React();
   const { config } = useConfigContext();
-  const disconnect = useDisconnect();
+  const _disconnect = useDisconnect();
+
   const currentConfigId = config.envConfig.configId;
   const currentChainId = config.envConfig.chainId;
 
   const parsedQs = useParsedQueryString();
   const configIdRef = useRef(currentConfigId);
   const accountRef = useRef(account);
   const accountAlreadyConnected = useRef(account);
-
+  const disconnect = useCallback(() => {
+    accountAlreadyConnected.current = undefined;
+    _disconnect();
+  }, [_disconnect]);
   useEffect(() => {
     if (!isActive) {
       return;