From eeb7bacfa88416069d2bfdf4f4658ed8ea1f5738 Mon Sep 17 00:00:00 2001
From: albertfolch-redeemeum
 <102516373+albertfolch-redeemeum@users.noreply.github.com>
Date: Wed, 27 Sep 2023 13:57:30 +0200
Subject: [PATCH] fix: connect button when connected to wrong chain (#848)

---
 src/components/header/web3Status/index.tsx | 14 +++++++++-----
 src/lib/connection/index.ts                | 11 +++++++++--
 src/lib/utils/hooks/useDisconnect.ts       |  6 +++---
 src/lib/utils/hooks/useSyncChainQuery.ts   | 10 +++++++---
 4 files changed, 28 insertions(+), 13 deletions(-)

diff --git a/src/components/header/web3Status/index.tsx b/src/components/header/web3Status/index.tsx
index 6fa04953f..460110a00 100644
--- a/src/components/header/web3Status/index.tsx
+++ b/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,
diff --git a/src/lib/connection/index.ts b/src/lib/connection/index.ts
index b39637025..ff133bab0 100644
--- a/src/lib/connection/index.ts
+++ b/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",
diff --git a/src/lib/utils/hooks/useDisconnect.ts b/src/lib/utils/hooks/useDisconnect.ts
index dccf24e25..913aa44ba 100644
--- a/src/lib/utils/hooks/useDisconnect.ts
+++ b/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]);
 };
diff --git a/src/lib/utils/hooks/useSyncChainQuery.ts b/src/lib/utils/hooks/useSyncChainQuery.ts
index d90ee6acc..ff51c7a60 100644
--- a/src/lib/utils/hooks/useSyncChainQuery.ts
+++ b/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,7 +22,8 @@ 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;
 
@@ -30,7 +31,10 @@ export default function useSyncChainQuery() {
   const configIdRef = useRef(currentConfigId);
   const accountRef = useRef(account);
   const accountAlreadyConnected = useRef(account);
-
+  const disconnect = useCallback(() => {
+    accountAlreadyConnected.current = undefined;
+    _disconnect();
+  }, [_disconnect]);
   useEffect(() => {
     if (!isActive) {
       return;