Fix disconnect with walletConnect (#300)

Author: rin-st

packages/nextjs/app/admin/_components/AccessDenied.tsx

@@ -5,7 +5,7 @@ import { signOut } from "next-auth/react";
 import { useDisconnect } from "wagmi";
 
 export const AccessDenied = () => {
-  const { disconnect } = useDisconnect();
+  const { disconnectAsync } = useDisconnect();
   return (
     <div className="flex flex-col items-center px-4 py-10 sm:py-20">
       <h1 className="text-3xl text-center font-extrabold mb-1">Access Denied</h1>
@@ -16,9 +16,13 @@ export const AccessDenied = () => {
         </Link>
         <button
           className="btn btn-primary border-2 border-primary"
-          onClick={() => {
-            disconnect();
-            signOut();
+          onClick={async () => {
+            try {
+              await disconnectAsync();
+              await signOut();
+            } catch (error) {
+              console.error("Error during disconnecting/signing out:", error);
+            }
           }}
         >
           Disconnect

packages/nextjs/components/scaffold-eth/RainbowKitCustomConnectButton/AddressInfoDropdown.tsx

@@ -37,7 +37,7 @@ export const AddressInfoDropdown = ({
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   blockExplorerAddressLink,
 }: AddressInfoDropdownProps) => {
-  const { disconnect } = useDisconnect();
+  const { disconnectAsync } = useDisconnect();
   const checkSumAddress = getAddress(address);
 
   const [addressCopied, setAddressCopied] = useState(false);
@@ -129,9 +129,13 @@ export const AddressInfoDropdown = ({
             <button
               className="menu-item text-error btn-sm !rounded-xl flex gap-3 py-3"
               type="button"
-              onClick={() => {
-                disconnect();
-                signOut();
+              onClick={async () => {
+                try {
+                  await disconnectAsync();
+                  await signOut();
+                } catch (error) {
+                  console.error("Error during disconnecting/signing out:", error);
+                }
               }}
             >
               <ArrowLeftEndOnRectangleIcon className="h-6 w-4" /> <span>Disconnect</span>

packages/nextjs/components/scaffold-eth/RainbowKitCustomConnectButton/WrongNetworkDropdown.tsx

@@ -1,9 +1,10 @@
 import { NetworkOptions } from "./NetworkOptions";
+import { signOut } from "next-auth/react";
 import { useDisconnect } from "wagmi";
 import { ArrowLeftOnRectangleIcon, ChevronDownIcon } from "@heroicons/react/24/outline";
 
 export const WrongNetworkDropdown = () => {
-  const { disconnect } = useDisconnect();
+  const { disconnectAsync } = useDisconnect();
 
   return (
     <div className="dropdown dropdown-end mr-2">
@@ -20,7 +21,14 @@ export const WrongNetworkDropdown = () => {
           <button
             className="menu-item text-error btn-sm !rounded-xl flex gap-3 py-3"
             type="button"
-            onClick={() => disconnect()}
+            onClick={async () => {
+              try {
+                await disconnectAsync();
+                await signOut();
+              } catch (error) {
+                console.error("Error during disconnecting/signing out:", error);
+              }
+            }}
           >
             <ArrowLeftOnRectangleIcon className="h-6 w-4 ml-2 sm:ml-0" />
             <span>Disconnect</span>

packages/nextjs/components/scaffold-eth/RainbowKitCustomConnectButton/index.tsx

@@ -25,17 +25,25 @@ export const RainbowKitCustomConnectButton = () => {
   const { targetNetwork } = useTargetNetwork();
   const { address: connectedAddress } = useAccount();
   const { data: user, isLoading: isLoadingUser } = useUser(connectedAddress);
-  const { disconnect } = useDisconnect();
+  const { disconnectAsync } = useDisconnect();
   const { userAddress: sessionUserAddress } = useAuthSession();
   const isAdmin = user?.role === UserRole.ADMIN;
   const { isAdmin: isAdminFromSession } = useAuthSession();
 
   useEffect(() => {
-    if (sessionUserAddress && connectedAddress && connectedAddress !== sessionUserAddress) {
-      disconnect();
-      signOut({ redirect: true, callbackUrl: "/" });
-    }
-  }, [connectedAddress, sessionUserAddress, disconnect]);
+    const disconnectIfWrongAddress = async () => {
+      if (sessionUserAddress && connectedAddress && connectedAddress !== sessionUserAddress) {
+        try {
+          await disconnectAsync();
+          await signOut({ redirect: true, callbackUrl: "/" });
+        } catch (error) {
+          console.error("Error during disconnecting/signing out:", error);
+        }
+      }
+    };
+
+    disconnectIfWrongAddress();
+  }, [connectedAddress, sessionUserAddress, disconnectAsync]);
 
   return (
     <ConnectButton.Custom>
@@ -69,7 +77,16 @@ export const RainbowKitCustomConnectButton = () => {
           return (
             <div className="flex items-baseline gap-4">
               <RegisterUser />
-              <button className="flex items-center rounded-full bg-base-300" onClick={() => disconnect()}>
+              <button
+                className="flex items-center rounded-full bg-base-300"
+                onClick={async () => {
+                  try {
+                    await disconnectAsync();
+                  } catch (error) {
+                    console.error("Error during disconnecting:", error);
+                  }
+                }}
+              >
                 <XMarkIcon className="w-6 h-6" />
               </button>
             </div>