@web3auth/modal 10.16.0 → 11.0.0-beta.1

package/dist/lib.cjs/packages/modal/src/react/context/WalletServicesInnerContext.js

@@ -1,68 +1,15 @@
 'use strict';
 
-var noModal = require('@web3auth/no-modal');
+var react$1 = require('@web3auth/no-modal/react');
 var react = require('react');
 
-const WalletServicesContext = /*#__PURE__*/react.createContext(null);
+const WalletServicesContext = react$1.WalletServicesContext;
 function WalletServicesContextProvider({
   children,
   context
 }) {
   const web3AuthContext = react.useContext(context);
-  const {
-    getPlugin,
-    isInitialized,
-    isConnected
-  } = web3AuthContext;
-  const [ready, setReady] = react.useState(false);
-  const [connecting, setConnecting] = react.useState(false);
-  const [walletServicesPlugin, setWalletServicesPlugin] = react.useState(null);
-  react.useEffect(() => {
-    if (isInitialized) {
-      const plugin = getPlugin(noModal.EVM_PLUGINS.WALLET_SERVICES);
-      setWalletServicesPlugin(plugin);
-    }
-  }, [isInitialized, getPlugin]);
-  react.useEffect(() => {
-    if (isConnected) {
-      const plugin = getPlugin(noModal.EVM_PLUGINS.WALLET_SERVICES);
-      setWalletServicesPlugin(plugin);
-      // when rehydrating, the connectedListener may be registered after the connected event is emitted, we need to check the status here
-      if (noModal.CONNECTED_STATUSES.includes(plugin === null || plugin === void 0 ? void 0 : plugin.status)) setReady(true);
-    }
-  }, [isConnected, getPlugin, walletServicesPlugin]);
-  react.useEffect(() => {
-    const connectedListener = () => {
-      setReady(true);
-      setConnecting(false);
-    };
-    const disconnectedListener = () => {
-      setReady(false);
-      setConnecting(false);
-    };
-    const connectingListener = () => {
-      setConnecting(true);
-    };
-    if (walletServicesPlugin) {
-      walletServicesPlugin.on(noModal.PLUGIN_EVENTS.CONNECTED, connectedListener);
-      walletServicesPlugin.on(noModal.PLUGIN_EVENTS.DISCONNECTED, disconnectedListener);
-      walletServicesPlugin.on(noModal.PLUGIN_EVENTS.CONNECTING, connectingListener);
-    }
-    return () => {
-      if (walletServicesPlugin) {
-        walletServicesPlugin.removeListener(noModal.PLUGIN_EVENTS.CONNECTED, connectedListener);
-        walletServicesPlugin.removeListener(noModal.PLUGIN_EVENTS.DISCONNECTED, disconnectedListener);
-        walletServicesPlugin.removeListener(noModal.PLUGIN_EVENTS.CONNECTING, connectingListener);
-      }
-    };
-  }, [walletServicesPlugin]);
-  const value = react.useMemo(() => {
-    return {
-      plugin: walletServicesPlugin,
-      ready,
-      connecting
-    };
-  }, [walletServicesPlugin, ready, connecting]);
+  const value = react$1.useWalletServicesContextValue(web3AuthContext);
   return /*#__PURE__*/react.createElement(WalletServicesContext.Provider, {
     value
   }, children);

package/dist/lib.cjs/packages/modal/src/react/context/Web3AuthInnerContext.js

@@ -1,10 +1,9 @@
 'use strict';
 
-var noModal = require('@web3auth/no-modal');
-var react = require('react');
+var react = require('@web3auth/no-modal/react');
+var react$1 = require('react');
 var modalManager = require('../../modalManager.js');
 
-const Web3AuthInnerContext = /*#__PURE__*/react.createContext(null);
 function Web3AuthInnerProvider(params) {
   const {
     children,
@@ -14,157 +13,21 @@ function Web3AuthInnerProvider(params) {
   const {
     web3AuthOptions
   } = config;
-  const [chainId, setChainId] = react.useState(null);
-  const [chainNamespace, setChainNamespace] = react.useState(null);
-  const [isInitializing, setIsInitializing] = react.useState(false);
-  const [initError, setInitError] = react.useState(null);
-  const [provider, setProvider] = react.useState(null);
-  const [isInitialized, setIsInitialized] = react.useState(false);
-  const [isMFAEnabled, setIsMFAEnabled] = react.useState(false);
-  const web3Auth = react.useMemo(() => {
-    setProvider(null);
-    return new modalManager.Web3Auth(web3AuthOptions, initialState);
-  }, [web3AuthOptions, initialState]);
-  const [isConnected, setIsConnected] = react.useState(web3Auth.status === noModal.CONNECTOR_STATUS.CONNECTED);
-  const [isAuthorized, setIsAuthorized] = react.useState(web3Auth.status === noModal.CONNECTOR_STATUS.AUTHORIZED);
-  const [status, setStatus] = react.useState(web3Auth.status);
-  const getPlugin = react.useCallback(name => {
-    if (!web3Auth) throw noModal.WalletInitializationError.notReady();
-    return web3Auth.getPlugin(name);
-  }, [web3Auth]);
-  react.useEffect(() => {
-    const controller = new AbortController();
-    async function init() {
-      try {
-        var _web3Auth$currentChai;
-        setInitError(null);
-        setIsInitializing(true);
-        web3Auth.setAnalyticsProperties({
-          integration_type: noModal.ANALYTICS_INTEGRATION_TYPE.REACT_HOOKS
-        });
-        await web3Auth.init({
-          signal: controller.signal
-        });
-        setChainId(web3Auth.currentChainId);
-        setChainNamespace((_web3Auth$currentChai = web3Auth.currentChain) === null || _web3Auth$currentChai === void 0 ? void 0 : _web3Auth$currentChai.chainNamespace);
-      } catch (error) {
-        setInitError(error);
-      } finally {
-        setIsInitializing(false);
-      }
-    }
-    if (web3Auth) init();
-    return () => {
-      controller.abort();
-    };
-  }, [web3Auth, config]);
-  react.useEffect(() => {
-    const handleChainChange = async chainId => {
-      var _web3Auth$currentChai2;
-      setChainId(chainId);
-      setChainNamespace(web3Auth === null || web3Auth === void 0 || (_web3Auth$currentChai2 = web3Auth.currentChain) === null || _web3Auth$currentChai2 === void 0 ? void 0 : _web3Auth$currentChai2.chainNamespace);
-    };
-    if (provider) {
-      provider.on("chainChanged", handleChainChange);
-      return () => {
-        if (provider) {
-          provider.removeListener("chainChanged", handleChainChange);
-        }
-      };
-    }
-  }, [web3Auth, provider]);
-  react.useEffect(() => {
-    const notReadyListener = () => setStatus(web3Auth.status);
-    const readyListener = () => {
-      setStatus(web3Auth.status);
-      setIsInitialized(true);
-    };
-    const connectedListener = data => {
-      setStatus(web3Auth.status);
-      // we do this because of rehydration issues. status connected is fired first but web3auth sdk is not ready yet.
-      if (web3Auth.status === noModal.CONNECTOR_STATUS.CONNECTED) {
-        setIsInitialized(true);
-        setIsConnected(true);
-        setProvider(data.provider);
-      }
-    };
-    const authorizedListener = _data => {
-      setStatus(web3Auth.status);
-      if (web3Auth.status === noModal.CONNECTOR_STATUS.AUTHORIZED) {
-        setIsConnected(true);
-        setIsAuthorized(true);
-      }
-    };
-    const disconnectedListener = () => {
-      setStatus(web3Auth.status);
-      setIsConnected(false);
-      setIsAuthorized(false);
-      setProvider(null);
-    };
-    const connectingListener = () => {
-      setStatus(web3Auth.status);
-    };
-    const errorListener = () => {
-      setStatus(web3Auth.status);
-    };
-    const rehydrationErrorListener = () => {
-      setStatus(web3Auth.status);
-      setIsConnected(false);
-      setIsAuthorized(false);
-      setProvider(null);
-    };
-    const mfaEnabledListener = isMFAEnabled => {
-      if (typeof isMFAEnabled === "boolean") setIsMFAEnabled(isMFAEnabled);
-    };
-    if (web3Auth) {
-      // web3Auth is initialized here.
-      setStatus(web3Auth.status);
-      web3Auth.on(noModal.CONNECTOR_EVENTS.NOT_READY, notReadyListener);
-      web3Auth.on(noModal.CONNECTOR_EVENTS.READY, readyListener);
-      web3Auth.on(noModal.CONNECTOR_EVENTS.CONNECTED, connectedListener);
-      web3Auth.on(noModal.CONNECTOR_EVENTS.AUTHORIZED, authorizedListener);
-      web3Auth.on(noModal.CONNECTOR_EVENTS.DISCONNECTED, disconnectedListener);
-      web3Auth.on(noModal.CONNECTOR_EVENTS.CONNECTING, connectingListener);
-      web3Auth.on(noModal.CONNECTOR_EVENTS.ERRORED, errorListener);
-      web3Auth.on(noModal.CONNECTOR_EVENTS.REHYDRATION_ERROR, rehydrationErrorListener);
-      web3Auth.on(noModal.CONNECTOR_EVENTS.MFA_ENABLED, mfaEnabledListener);
-    }
-    return () => {
-      if (web3Auth) {
-        web3Auth.removeListener(noModal.CONNECTOR_EVENTS.NOT_READY, notReadyListener);
-        web3Auth.removeListener(noModal.CONNECTOR_EVENTS.READY, readyListener);
-        web3Auth.removeListener(noModal.CONNECTOR_EVENTS.CONNECTED, connectedListener);
-        web3Auth.removeListener(noModal.CONNECTOR_EVENTS.AUTHORIZED, authorizedListener);
-        web3Auth.removeListener(noModal.CONNECTOR_EVENTS.DISCONNECTED, disconnectedListener);
-        web3Auth.removeListener(noModal.CONNECTOR_EVENTS.CONNECTING, connectingListener);
-        web3Auth.removeListener(noModal.CONNECTOR_EVENTS.ERRORED, errorListener);
-        web3Auth.removeListener(noModal.CONNECTOR_EVENTS.REHYDRATION_ERROR, rehydrationErrorListener);
-        web3Auth.removeListener(noModal.CONNECTOR_EVENTS.MFA_ENABLED, mfaEnabledListener);
-        web3Auth.cleanup();
-      }
-    };
-  }, [web3Auth]);
-  const value = react.useMemo(() => {
-    return {
-      web3Auth,
-      isConnected,
-      isAuthorized,
-      isInitialized,
-      provider,
-      status,
-      isInitializing,
-      initError,
-      isMFAEnabled,
-      chainId,
-      chainNamespace,
-      getPlugin,
-      setIsMFAEnabled
-    };
-  }, [web3Auth, isConnected, isAuthorized, isMFAEnabled, setIsMFAEnabled, isInitialized, provider, status, getPlugin, isInitializing, initError, chainId, chainNamespace]);
-  return /*#__PURE__*/react.createElement(Web3AuthInnerContext.Provider, {
+  const value = react.useWeb3AuthInnerContextValue({
+    Web3AuthConstructor: modalManager.Web3Auth,
+    web3AuthOptions,
+    initialState,
+    notReadyUsesCurrentStatus: true,
+    cleanupOnUnmount: true,
+    initEffectDependency: config
+  });
+  return /*#__PURE__*/react$1.createElement(react.Web3AuthInnerContext.Provider, {
     value
   }, children);
 }
 
-exports.Web3AuthInnerContext = Web3AuthInnerContext;
+Object.defineProperty(exports, "Web3AuthInnerContext", {
+    enumerable: true,
+    get: function () { return react.Web3AuthInnerContext; }
+});
 exports.Web3AuthInnerProvider = Web3AuthInnerProvider;

package/dist/lib.cjs/packages/modal/src/react/hooks/useWeb3Auth.js

@@ -3,28 +3,7 @@
 var useWeb3AuthInner = require('./useWeb3AuthInner.js');
 
 const useWeb3Auth = () => {
-  const {
-    initError,
-    isConnected,
-    isAuthorized,
-    isInitialized,
-    isInitializing,
-    provider,
-    status,
-    web3Auth,
-    getPlugin
-  } = useWeb3AuthInner.useWeb3AuthInner();
-  return {
-    initError,
-    isConnected,
-    isAuthorized,
-    isInitialized,
-    isInitializing,
-    provider,
-    status,
-    web3Auth,
-    getPlugin
-  };
+  return useWeb3AuthInner.useWeb3AuthInner();
 };
 
 exports.useWeb3Auth = useWeb3Auth;

package/dist/lib.cjs/packages/modal/src/react/hooks/useWeb3AuthConnect.js

@@ -1,60 +1,47 @@
 'use strict';
 
-var react = require('react');
+var react = require('@web3auth/no-modal/react');
+var react$1 = require('react');
 var useWeb3AuthInner = require('./useWeb3AuthInner.js');
 
 const useWeb3AuthConnect = () => {
   const {
-    web3Auth,
-    isConnected
+    web3Auth
   } = useWeb3AuthInner.useWeb3AuthInner();
-  const [loading, setLoading] = react.useState(false);
-  const [error, setError] = react.useState(null);
-  const [connectorName, setConnectorName] = react.useState(null);
-  react.useEffect(() => {
-    if (!web3Auth) return;
-    if (!isConnected && connectorName) {
-      setConnectorName(null);
-    }
-    if (isConnected && !connectorName) {
-      setConnectorName(web3Auth.connectedConnectorName);
-    }
-  }, [isConnected, connectorName, web3Auth]);
-  const connect = react.useCallback(async () => {
-    setLoading(true);
-    setError(null);
-    try {
-      const provider = await web3Auth.connect();
-      if (provider) {
-        setConnectorName(web3Auth.connectedConnectorName);
-      }
-      return provider;
-    } catch (error) {
-      setError(error);
-    } finally {
-      setLoading(false);
-    }
-  }, [web3Auth]);
-  const connectTo = react.useCallback(async (connector, params) => {
-    setLoading(true);
-    setError(null);
+  const {
+    isConnected,
+    loading: sharedLoading,
+    error: sharedError,
+    connectorName,
+    connect: sharedConnectTo
+  } = react.useWeb3AuthConnect();
+  const [connectLoading, setConnectLoading] = react$1.useState(false);
+  const [connectError, setConnectError] = react$1.useState(null);
+  const [activeFlow, setActiveFlow] = react$1.useState(null);
+  const connect = react$1.useCallback(async () => {
+    setActiveFlow("connect");
+    setConnectLoading(true);
+    setConnectError(null);
+    let connection = null;
     try {
-      const provider = await web3Auth.connectTo(connector, params);
-      if (provider) {
-        setConnectorName(web3Auth.connectedConnectorName);
-      }
-      return provider;
+      connection = await web3Auth.connect();
     } catch (error) {
-      setError(error);
+      setConnectError(error);
     } finally {
-      setLoading(false);
+      setConnectLoading(false);
     }
+    return connection;
   }, [web3Auth]);
+  const connectTo = react$1.useCallback(async (connector, params) => {
+    setActiveFlow("connectTo");
+    setConnectError(null);
+    return sharedConnectTo(connector, params);
+  }, [sharedConnectTo]);
   return {
     isConnected,
-    loading,
-    error,
-    connectorName,
+    loading: connectLoading || sharedLoading,
+    error: activeFlow === "connect" ? connectError : sharedError,
+    connectorName: connectorName,
     connect,
     connectTo
   };

package/dist/lib.cjs/packages/modal/src/react/hooks/useWeb3AuthInner.js

@@ -2,12 +2,16 @@
 
 var noModal = require('@web3auth/no-modal');
 var react = require('react');
-var Web3AuthInnerContext = require('../context/Web3AuthInnerContext.js');
+var modalManager = require('../../modalManager.js');
+var react$1 = require('@web3auth/no-modal/react');
 
+function isModalWeb3AuthInnerContext(context) {
+  return !!context && context.web3Auth instanceof modalManager.Web3Auth;
+}
 const useWeb3AuthInner = () => {
-  const context = react.useContext(Web3AuthInnerContext.Web3AuthInnerContext);
-  if (!context) {
-    throw noModal.WalletInitializationError.fromCode(1000, "usage of useWeb3Auth not wrapped in `Web3AuthContextProvider`.");
+  const context = react.useContext(react$1.Web3AuthInnerContext);
+  if (!isModalWeb3AuthInnerContext(context)) {
+    throw noModal.WalletInitializationError.fromCode(1000, "usage of useWeb3Auth not wrapped in modal `Web3AuthProvider`.");
   }
   return context;
 };

package/dist/lib.cjs/packages/modal/src/react/index.js

@@ -1,39 +1,72 @@
 'use strict';
 
-var useChain = require('./hooks/useChain.js');
-var useCheckout = require('./hooks/useCheckout.js');
-var useEnableMFA = require('./hooks/useEnableMFA.js');
-var useFunding = require('./hooks/useFunding.js');
-var useIdentityToken = require('./hooks/useIdentityToken.js');
-var useManageMFA = require('./hooks/useManageMFA.js');
-var useReceive = require('./hooks/useReceive.js');
-var useSwap = require('./hooks/useSwap.js');
-var useSwitchChain = require('./hooks/useSwitchChain.js');
-var useWalletConnectScanner = require('./hooks/useWalletConnectScanner.js');
-var useWalletServicesPlugin = require('./hooks/useWalletServicesPlugin.js');
-var useWalletUI = require('./hooks/useWalletUI.js');
+var react = require('@web3auth/no-modal/react');
 var useWeb3Auth = require('./hooks/useWeb3Auth.js');
 var useWeb3AuthConnect = require('./hooks/useWeb3AuthConnect.js');
-var useWeb3AuthDisconnect = require('./hooks/useWeb3AuthDisconnect.js');
-var useWeb3AuthUser = require('./hooks/useWeb3AuthUser.js');
 var Web3AuthProvider = require('./Web3AuthProvider.js');
 
 
 
-exports.useChain = useChain.useChain;
-exports.useCheckout = useCheckout.useCheckout;
-exports.useEnableMFA = useEnableMFA.useEnableMFA;
-exports.useFunding = useFunding.useFunding;
-exports.useIdentityToken = useIdentityToken.useIdentityToken;
-exports.useManageMFA = useManageMFA.useManageMFA;
-exports.useReceive = useReceive.useReceive;
-exports.useSwap = useSwap.useSwap;
-exports.useSwitchChain = useSwitchChain.useSwitchChain;
-exports.useWalletConnectScanner = useWalletConnectScanner.useWalletConnectScanner;
-exports.useWalletServicesPlugin = useWalletServicesPlugin.useWalletServicesPlugin;
-exports.useWalletUI = useWalletUI.useWalletUI;
+Object.defineProperty(exports, "useAuthTokenInfo", {
+	enumerable: true,
+	get: function () { return react.useAuthTokenInfo; }
+});
+Object.defineProperty(exports, "useChain", {
+	enumerable: true,
+	get: function () { return react.useChain; }
+});
+Object.defineProperty(exports, "useCheckout", {
+	enumerable: true,
+	get: function () { return react.useCheckout; }
+});
+Object.defineProperty(exports, "useEnableMFA", {
+	enumerable: true,
+	get: function () { return react.useEnableMFA; }
+});
+Object.defineProperty(exports, "useFunding", {
+	enumerable: true,
+	get: function () { return react.useFunding; }
+});
+Object.defineProperty(exports, "useManageMFA", {
+	enumerable: true,
+	get: function () { return react.useManageMFA; }
+});
+Object.defineProperty(exports, "useReceive", {
+	enumerable: true,
+	get: function () { return react.useReceive; }
+});
+Object.defineProperty(exports, "useSwap", {
+	enumerable: true,
+	get: function () { return react.useSwap; }
+});
+Object.defineProperty(exports, "useSwitchChain", {
+	enumerable: true,
+	get: function () { return react.useSwitchChain; }
+});
+Object.defineProperty(exports, "useWalletConnectScanner", {
+	enumerable: true,
+	get: function () { return react.useWalletConnectScanner; }
+});
+Object.defineProperty(exports, "useWalletServicesPlugin", {
+	enumerable: true,
+	get: function () { return react.useWalletServicesPlugin; }
+});
+Object.defineProperty(exports, "useWalletUI", {
+	enumerable: true,
+	get: function () { return react.useWalletUI; }
+});
+Object.defineProperty(exports, "useWallets", {
+	enumerable: true,
+	get: function () { return react.useWallets; }
+});
+Object.defineProperty(exports, "useWeb3AuthDisconnect", {
+	enumerable: true,
+	get: function () { return react.useWeb3AuthDisconnect; }
+});
+Object.defineProperty(exports, "useWeb3AuthUser", {
+	enumerable: true,
+	get: function () { return react.useWeb3AuthUser; }
+});
 exports.useWeb3Auth = useWeb3Auth.useWeb3Auth;
 exports.useWeb3AuthConnect = useWeb3AuthConnect.useWeb3AuthConnect;
-exports.useWeb3AuthDisconnect = useWeb3AuthDisconnect.useWeb3AuthDisconnect;
-exports.useWeb3AuthUser = useWeb3AuthUser.useWeb3AuthUser;
 exports.Web3AuthProvider = Web3AuthProvider.Web3AuthProvider;

package/dist/lib.cjs/packages/modal/src/react/solana/index.js

@@ -1,13 +1,26 @@
 'use strict';
 
-var useSignAndSendTransaction = require('./hooks/useSignAndSendTransaction.js');
-var useSignMessage = require('./hooks/useSignMessage.js');
-var useSignTransaction = require('./hooks/useSignTransaction.js');
-var useSolanaWallet = require('./hooks/useSolanaWallet.js');
+var solana = require('@web3auth/no-modal/react/solana');
 
 
 
-exports.useSignAndSendTransaction = useSignAndSendTransaction.useSignAndSendTransaction;
-exports.useSignMessage = useSignMessage.useSignMessage;
-exports.useSignTransaction = useSignTransaction.useSignTransaction;
-exports.useSolanaWallet = useSolanaWallet.useSolanaWallet;
+Object.defineProperty(exports, "SolanaProvider", {
+	enumerable: true,
+	get: function () { return solana.SolanaProvider; }
+});
+Object.defineProperty(exports, "useSignAndSendTransaction", {
+	enumerable: true,
+	get: function () { return solana.useSignAndSendTransaction; }
+});
+Object.defineProperty(exports, "useSignMessage", {
+	enumerable: true,
+	get: function () { return solana.useSignMessage; }
+});
+Object.defineProperty(exports, "useSignTransaction", {
+	enumerable: true,
+	get: function () { return solana.useSignTransaction; }
+});
+Object.defineProperty(exports, "useSolanaWallet", {
+	enumerable: true,
+	get: function () { return solana.useSolanaWallet; }
+});

package/dist/lib.cjs/packages/modal/src/react/wagmi/provider.js

@@ -7,6 +7,8 @@ var react = require('react');
 var viem = require('viem');
 var wagmi = require('wagmi');
 var connectors = require('wagmi/connectors');
+var react$1 = require('@web3auth/no-modal/react');
+var useWeb3Auth = require('../hooks/useWeb3Auth.js');
 require('@babel/runtime/helpers/defineProperty');
 require('@web3auth/auth');
 require('deepmerge');
@@ -21,13 +23,13 @@ require('@toruslabs/http-helpers');
 require('clsx');
 require('tailwind-merge');
 require('react-i18next');
-require('../../ui/context/RootContext.js');
 require('../../ui/localeImport.js');
+require('../../ui/components/SpinnerLoader/SpinnerLoader.css.js');
+require('../../ui/context/RootContext.js');
+require('../../ui/containers/AccountLinking/AccountLinking.js');
 require('classnames');
 require('react-qrcode-logo');
-require('../../ui/components/Login/Login.js');
-var useWeb3Auth = require('../hooks/useWeb3Auth.js');
-var useWeb3AuthDisconnect = require('../hooks/useWeb3AuthDisconnect.js');
+require('../../ui/containers/Login/Login.js');
 var constants = require('./constants.js');
 
 const _excluded = ["children"];
@@ -94,16 +96,20 @@ function Web3AuthWagmiProvider({
 }) {
   const {
     isConnected,
-    provider
+    connection,
+    web3Auth: {
+      primaryConnectorName
+    }
   } = useWeb3Auth.useWeb3Auth();
   const {
     disconnect
-  } = useWeb3AuthDisconnect.useWeb3AuthDisconnect();
+  } = react$1.useWeb3AuthDisconnect();
   const wagmiConfig = wagmi.useConfig();
   const {
-    reconnect
+    mutate: reconnect
   } = wagmi.useReconnect();
-  wagmi.useAccountEffect({
+  const lastSyncedWeb3AuthConnection = react.useRef(null);
+  wagmi.useConnectionEffect({
     onDisconnect: async () => {
       noModal.log.info("Disconnected from wagmi");
       if (isConnected) await disconnect();
@@ -116,22 +122,33 @@ function Web3AuthWagmiProvider({
     }
   });
   react.useEffect(() => {
-    (async () => {
-      if (isConnected && provider) {
-        const connector = await setupConnector(provider, wagmiConfig);
-        if (!connector) {
-          noModal.log.error("Failed to setup react wagmi connector");
-          throw new Error("Failed to setup connector");
+    (async _connection$ethereumP => {
+      const newConnection = connection !== null && connection !== void 0 ? connection : null;
+      const newEth = (_connection$ethereumP = connection === null || connection === void 0 ? void 0 : connection.ethereumProvider) !== null && _connection$ethereumP !== void 0 ? _connection$ethereumP : null;
+      if (isConnected && newConnection && newEth && newConnection.connectorName === primaryConnectorName) {
+        // `ethereumProvider` is a stable proxy (`commonJRPCProvider`) across account switches,
+        // so key wagmi resyncs off the Web3Auth connection object instead of provider identity.
+        if (lastSyncedWeb3AuthConnection.current !== newConnection) {
+          if (getWeb3authConnector(wagmiConfig)) {
+            resetConnectorState(wagmiConfig);
+          }
+          lastSyncedWeb3AuthConnection.current = newConnection;
+          const connector = await setupConnector(newEth, wagmiConfig);
+          if (!connector) {
+            noModal.log.error("Failed to setup react wagmi connector");
+            throw new Error("Failed to setup connector");
+          }
+          await connectWeb3AuthWithWagmi(connector, wagmiConfig);
+          reconnect();
         }
-        await connectWeb3AuthWithWagmi(connector, wagmiConfig);
-        reconnect();
       } else if (!isConnected) {
+        lastSyncedWeb3AuthConnection.current = null;
         if (wagmiConfig.state.status === "connected") {
           await disconnectWeb3AuthFromWagmi(wagmiConfig);
         }
       }
     })();
-  }, [isConnected, wagmiConfig, provider, reconnect]);
+  }, [isConnected, wagmiConfig, connection, reconnect, primaryConnectorName]);
   return /*#__PURE__*/react.createElement(react.Fragment, null, children);
 }
 function WagmiProvider(_ref) {