fixes wagmi switch chain

Author: arch1995

demo/vue-app-new/package-lock.json

@@ -6,17 +6,17 @@ import {
   useEnableMFA,
   useIdentityToken,
   useManageMFA,
-  useSwitchChain,
   useWalletConnectScanner,
   useWalletUI,
   useWeb3Auth,
   useWeb3AuthUser,
+  useSwitchChain as useWeb3AuthSwitchChain,
 } from "@web3auth/modal/vue";
 import { type CustomChainConfig, type NFTCheckoutPluginType } from "@web3auth/no-modal";
 import { useI18n } from "petite-vue-i18n";
 
 import { useSignAndSendTransaction, useSignMessage as useSolanaSignMessage, useSignTransaction, useSolanaWallet } from "@web3auth/modal/vue/solana";
-import { useAccount, useBalance, useChainId, useSignMessage, useSignTypedData } from "@wagmi/vue";
+import { useAccount, useBalance, useChainId, useSignMessage, useSignTypedData, useSwitchChain as useWagmiSwitchChain } from "@wagmi/vue";
 
 import { LAMPORTS_PER_SOL, PublicKey, SystemProgram, Transaction } from "@solana/web3.js";
 import { ProviderConfig } from "@toruslabs/base-controllers";
@@ -42,15 +42,16 @@ const { isConnected, provider, web3Auth, isMFAEnabled } = useWeb3Auth();
 const { userInfo, loading: userInfoLoading } = useWeb3AuthUser();
 const { enableMFA } = useEnableMFA();
 const { manageMFA } = useManageMFA();
-const { switchChain } = useSwitchChain();
+const { switchChainAsync } = useWagmiSwitchChain();
+const { switchChain } = useWeb3AuthSwitchChain();
 const { showWalletUI, loading: showWalletUILoading } = useWalletUI();
 const { showWalletConnectScanner, loading: showWalletConnectScannerLoading } = useWalletConnectScanner();
 const { showCheckout, loading: showCheckoutLoading } = useCheckout();
 const { authenticateUser, loading: authenticateUserLoading } = useIdentityToken();
 const { status, address } = useAccount();
 const { signTypedDataAsync } = useSignTypedData();
 const { signMessageAsync } = useSignMessage();
-const chainId = useChainId();
+const wagmiChainId = useChainId();
 const balance = useBalance({
   address: address,
 });
@@ -188,7 +189,7 @@ const onGetPrivateKey = async () => {
 };
 
 const getConnectedChainId = async () => {
-  printToConsole("chainId", chainId.value);
+  printToConsole("chainId", wagmiChainId.value);
 };
 
 const onGetBalance = async () => {
@@ -323,8 +324,8 @@ const onSwitchChain = async () => {
     const currentNamespace = currentChainNamespace.value;
     const newChain = props.chains.find((x) => x.chainNamespace === currentNamespace && x.chainId !== chainId);
     if (!newChain) throw new Error(`Please configure at least 2 chains for ${currentNamespace} in the config`);
-    await switchChain({ chainId: newChain.chainId });
-    printToConsole("switchedChain", { chainId: newChain.chainId });
+    const data =await switchChainAsync({ chainId: Number(newChain.chainId) });
+    printToConsole("switchedChain", { chainId: data.id });
   } catch (error) {
     printToConsole("switchedChain error", error);
   }

demo/vue-app-new/src/components/AppDashboard.vue

@@ -10,7 +10,7 @@ import {
   useWeb3AuthDisconnect,
   useWeb3AuthUser,
 } from "@web3auth/modal/react";
-import { useAccount, useBalance, useSignMessage, useSignTypedData } from "wagmi";
+import { useAccount, useBalance, useChainId, useSignMessage, useSignTypedData, useSwitchChain } from "wagmi";
 
 import styles from "../styles/Home.module.css";
 
@@ -29,13 +29,17 @@ const Main = () => {
   const { showWalletConnectScanner, loading: isWalletConnectScannerLoading, error: walletConnectScannerError } = useWalletConnectScanner();
   const { showWalletUI, loading: isWalletUILoading, error: walletUIError } = useWalletUI();
   const { token, loading: isUserTokenLoading, error: userTokenError, authenticateUser } = useIdentityToken();
+  const { switchChainAsync, chains } = useSwitchChain();
+  const chainId = useChainId();
+
   const loggedInView = (
     <>
       <div className={styles.container}>
         <div style={{ marginTop: "16px", marginBottom: "16px" }}>
           <p>Account Address: {address}</p>
           <p>Account Balance: {balance?.value}</p>
           <p>MFA Enabled: {isMFAEnabled ? "Yes" : "No"}</p>
+          <p>ConnectedChain ID: {chainId}</p>
         </div>
 
         {/* User Info */}
@@ -174,6 +178,22 @@ const Main = () => {
           {signedTypedDataData && <textarea disabled rows={5} value={signedTypedDataData} style={{ width: "100%" }} />}
         </div>
 
+        {/* Chain Actions */}
+        <div style={{ marginTop: "16px", marginBottom: "16px" }}>
+          <p>Switch Chain</p>
+          {chains.map((chain) => (
+            <button
+              key={chain.id}
+              onClick={async () => switchChainAsync({ chainId: chain.id })}
+              className={styles.card}
+              disabled={chainId === chain.id}
+              style={{ opacity: chainId === chain.id ? 0.5 : 1 }}
+            >
+              Switch to {chain.name}
+            </button>
+          ))}
+        </div>
+
         {/* Disconnect */}
         <div style={{ marginTop: "16px", marginBottom: "16px" }}>
           <p>Logout</p>

demo/wagmi-react-app/src/components/Main.tsx

@@ -10,6 +10,7 @@ import {
   CreateConnectorFn,
   useAccountEffect,
   useConfig as useWagmiConfig,
+  useReconnect,
   WagmiProvider as WagmiProviderBase,
 } from "wagmi";
 import { injected } from "wagmi/connectors";
@@ -86,6 +87,7 @@ function Web3AuthWagmiProvider({ children }: PropsWithChildren) {
   const { isConnected, provider } = useWeb3Auth();
   const { disconnect } = useWeb3AuthDisconnect();
   const wagmiConfig = useWagmiConfig();
+  const { reconnect } = useReconnect();
 
   useAccountEffect({
     onDisconnect: async () => {
@@ -104,13 +106,14 @@ function Web3AuthWagmiProvider({ children }: PropsWithChildren) {
         }
 
         await connectWeb3AuthWithWagmi(connector, wagmiConfig);
+        reconnect();
       } else if (!isConnected) {
         if (wagmiConfig.state.status === "connected") {
           await disconnectWeb3AuthFromWagmi(wagmiConfig);
         }
       }
     })();
-  }, [isConnected, wagmiConfig, provider]);
+  }, [isConnected, wagmiConfig, provider, reconnect]);
 
   return createElement(Fragment, null, children);
 }

packages/modal/src/react/wagmi/provider.ts

@@ -1,5 +1,5 @@
 import { Config, Connection, Connector, CreateConfigParameters, CreateConnectorFn, hydrate } from "@wagmi/core";
-import { configKey, createConfig as createWagmiConfig, useAccountEffect, useConfig as useWagmiConfig } from "@wagmi/vue";
+import { configKey, createConfig as createWagmiConfig, useAccountEffect, useConfig as useWagmiConfig, useReconnect } from "@wagmi/vue";
 import { injected } from "@wagmi/vue/connectors";
 import { log } from "@web3auth/no-modal";
 import { type Chain, defineChain, http, webSocket } from "viem";
@@ -80,6 +80,7 @@ const Web3AuthWagmiProvider = defineComponent({
     const { isConnected, provider } = useWeb3Auth();
     const { disconnect } = useWeb3AuthDisconnect();
     const wagmiConfig = useWagmiConfig();
+    const { reconnect } = useReconnect();
 
     useAccountEffect({
       onDisconnect: async () => {
@@ -99,6 +100,7 @@ const Web3AuthWagmiProvider = defineComponent({
           }
 
           await connectWeb3AuthWithWagmi(connector, wagmiConfig);
+          reconnect();
         } else if (!newIsConnected) {
           if (wagmiConfig.state.status === "connected") {
             await disconnectWeb3AuthFromWagmi(wagmiConfig);

packages/modal/src/vue/wagmi/provider.ts

@@ -9,6 +9,7 @@ import {
   CreateConnectorFn,
   useAccountEffect,
   useConfig as useWagmiConfig,
+  useReconnect,
   WagmiProvider as WagmiProviderBase,
 } from "wagmi";
 import { injected } from "wagmi/connectors";
@@ -86,6 +87,7 @@ function Web3AuthWagmiProvider({ children }: PropsWithChildren) {
   const { isConnected, provider } = useWeb3Auth();
   const { disconnect } = useWeb3AuthDisconnect();
   const wagmiConfig = useWagmiConfig();
+  const { reconnect } = useReconnect();
 
   useAccountEffect({
     onDisconnect: async () => {
@@ -103,13 +105,14 @@ function Web3AuthWagmiProvider({ children }: PropsWithChildren) {
         }
 
         await connectWeb3AuthWithWagmi(connector, wagmiConfig);
+        reconnect();
       } else if (!isConnected) {
         if (wagmiConfig.state.status === "connected") {
           await disconnectWeb3AuthFromWagmi(wagmiConfig);
         }
       }
     })();
-  }, [isConnected, wagmiConfig, provider]);
+  }, [isConnected, wagmiConfig, provider, reconnect]);
 
   return createElement(Fragment, null, children);
 }

packages/no-modal/src/react/wagmi/provider.ts

@@ -1,5 +1,12 @@
 import { type Config, type Connection, type Connector, type CreateConnectorFn, hydrate } from "@wagmi/core";
-import { configKey, createConfig as createWagmiConfig, type CreateConfigParameters, useAccountEffect, useConfig as useWagmiConfig } from "@wagmi/vue";
+import {
+  configKey,
+  createConfig as createWagmiConfig,
+  type CreateConfigParameters,
+  useAccountEffect,
+  useConfig as useWagmiConfig,
+  useReconnect,
+} from "@wagmi/vue";
 import { injected } from "@wagmi/vue/connectors";
 import { type Chain, defineChain, http, webSocket } from "viem";
 import { defineComponent, h, PropType, provide, shallowRef, watch } from "vue";
@@ -80,6 +87,7 @@ const Web3AuthWagmiProvider = defineComponent({
     const { isConnected, provider } = useWeb3Auth();
     const { disconnect } = useWeb3AuthDisconnect();
     const wagmiConfig = useWagmiConfig();
+    const { reconnect } = useReconnect();
 
     useAccountEffect({
       onDisconnect: async () => {
@@ -98,6 +106,7 @@ const Web3AuthWagmiProvider = defineComponent({
           }
 
           await connectWeb3AuthWithWagmi(connector, wagmiConfig);
+          reconnect();
         } else if (!newIsConnected) {
           if (wagmiConfig.state.status === "connected") {
             await disconnectWeb3AuthFromWagmi(wagmiConfig);