@web3auth/modal 10.6.0 → 10.8.0

package/dist/lib.cjs/packages/modal/src/config.js

@@ -2,7 +2,7 @@
 
 var noModal = require('@web3auth/no-modal');
 
-const version = "10.6.0";
+const version = "10.8.0";
 const defaultConnectorsModalConfig = {
   hideWalletDiscovery: false,
   connectors: {

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

@@ -14,6 +14,8 @@ 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);
@@ -33,6 +35,7 @@ function Web3AuthInnerProvider(params) {
     const controller = new AbortController();
     async function init() {
       try {
+        var _web3Auth$currentChai;
         setInitError(null);
         setIsInitializing(true);
         web3Auth.setAnalyticsProperties({
@@ -41,6 +44,8 @@ function Web3AuthInnerProvider(params) {
         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 {
@@ -52,6 +57,19 @@ function Web3AuthInnerProvider(params) {
       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 () => {
+        provider.off("chainChanged", handleChainChange);
+      };
+    }
+  }, [web3Auth, provider]);
   react.useEffect(() => {
     const notReadyListener = () => setStatus(web3Auth.status);
     const readyListener = () => {
@@ -122,10 +140,12 @@ function Web3AuthInnerProvider(params) {
       isInitializing,
       initError,
       isMFAEnabled,
+      chainId,
+      chainNamespace,
       getPlugin,
       setIsMFAEnabled
     };
-  }, [web3Auth, isConnected, isMFAEnabled, setIsMFAEnabled, isInitialized, provider, status, getPlugin, isInitializing, initError]);
+  }, [web3Auth, isConnected, isMFAEnabled, setIsMFAEnabled, isInitialized, provider, status, getPlugin, isInitializing, initError, chainId, chainNamespace]);
   return /*#__PURE__*/react.createElement(Web3AuthInnerContext.Provider, {
     value
   }, children);

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

@@ -0,0 +1,16 @@
+'use strict';
+
+var useWeb3AuthInner = require('./useWeb3AuthInner.js');
+
+const useChain = () => {
+  const {
+    chainId,
+    chainNamespace
+  } = useWeb3AuthInner.useWeb3AuthInner();
+  return {
+    chainId,
+    chainNamespace
+  };
+};
+
+exports.useChain = useChain;

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

@@ -1,5 +1,6 @@
 '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');
@@ -19,6 +20,7 @@ var Web3AuthProvider = require('./Web3AuthProvider.js');
 
 
 
+exports.useChain = useChain.useChain;
 exports.useCheckout = useCheckout.useCheckout;
 exports.useEnableMFA = useEnableMFA.useEnableMFA;
 exports.useFunding = useFunding.useFunding;

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

@@ -3,6 +3,27 @@
 var web3_js = require('@solana/web3.js');
 var noModal = require('@web3auth/no-modal');
 var react = require('react');
+var useChain = require('../../hooks/useChain.js');
+require('@babel/runtime/helpers/objectSpread2');
+require('@babel/runtime/helpers/defineProperty');
+require('@web3auth/auth');
+require('deepmerge');
+require('../../../config.js');
+require('../../../ui/config.js');
+require('../../../ui/interfaces.js');
+require('react/jsx-runtime');
+require('../../../ui/css/index.css.js');
+require('bowser');
+require('react-dom/client');
+require('@toruslabs/http-helpers');
+require('clsx');
+require('tailwind-merge');
+require('react-i18next');
+require('../../../ui/context/RootContext.js');
+require('../../../ui/localeImport.js');
+require('classnames');
+require('react-qrcode-logo');
+require('../../../ui/components/Login/Login.js');
 var useWeb3Auth = require('../../hooks/useWeb3Auth.js');
 
 const useSolanaWallet = () => {
@@ -10,19 +31,23 @@ const useSolanaWallet = () => {
     provider,
     web3Auth
   } = useWeb3Auth.useWeb3Auth();
+  const {
+    chainNamespace
+  } = useChain.useChain();
   const [accounts, setAccounts] = react.useState(null);
   const solanaWallet = react.useMemo(() => {
     if (!provider) return null;
+    if (chainNamespace !== noModal.CHAIN_NAMESPACES.SOLANA) return null;
     return new noModal.SolanaWallet(provider);
-  }, [provider]);
+  }, [provider, chainNamespace]);
   const connection = react.useMemo(() => {
-    if (!web3Auth || !provider) return null;
+    if (!web3Auth || !provider || chainNamespace !== noModal.CHAIN_NAMESPACES.SOLANA) return null;
     return new web3_js.Connection(web3Auth.currentChain.rpcTarget);
-  }, [web3Auth, provider]);
+  }, [web3Auth, provider, chainNamespace]);
   react.useEffect(() => {
     const init = async () => {
-      var _web3Auth$currentChai;
-      if (!(web3Auth !== null && web3Auth !== void 0 && (_web3Auth$currentChai = web3Auth.currentChain) !== null && _web3Auth$currentChai !== void 0 && _web3Auth$currentChai.chainNamespace) || web3Auth.currentChain.chainNamespace !== noModal.CHAIN_NAMESPACES.SOLANA) {
+      if (chainNamespace !== noModal.CHAIN_NAMESPACES.SOLANA) {
+        setAccounts(null);
         return;
       }
       if (!solanaWallet) return;
@@ -32,7 +57,7 @@ const useSolanaWallet = () => {
       }
     };
     if (solanaWallet) init();
-  }, [solanaWallet, web3Auth]);
+  }, [solanaWallet, chainNamespace]);
   return {
     solanaWallet,
     accounts,

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

@@ -32,10 +32,13 @@ var constants = require('./constants.js');
 
 const _excluded = ["children"];
 const WEB3AUTH_CONNECTOR_ID = "web3auth";
+function getWeb3authConnector(config) {
+  return config.connectors.find(c => c.id === WEB3AUTH_CONNECTOR_ID);
+}
 // Helper to initialize connectors for the given wallets
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 async function setupConnector(provider, config) {
-  let connector = config.connectors.find(c => c.id === WEB3AUTH_CONNECTOR_ID);
+  let connector = getWeb3authConnector(config);
   if (connector) return connector;
   // Create new connector if not already existing
   connector = connectors.injected({
@@ -70,8 +73,15 @@ async function connectWeb3AuthWithWagmi(connector, config) {
     status: "connected"
   }));
 }
-async function disconnectWeb3AuthFromWagmi(config) {
+function resetConnectorState(config) {
   config._internal.connectors.setState(prev => prev.filter(c => c.id !== WEB3AUTH_CONNECTOR_ID));
+  config.connectors.filter(c => c.id !== WEB3AUTH_CONNECTOR_ID);
+}
+async function disconnectWeb3AuthFromWagmi(config) {
+  var _config$storage3, _config$storage4;
+  const connector = getWeb3authConnector(config);
+  await Promise.all([(_config$storage3 = config.storage) === null || _config$storage3 === void 0 ? void 0 : _config$storage3.setItem(`${connector === null || connector === void 0 ? void 0 : connector.id}.disconnected`, true), (_config$storage4 = config.storage) === null || _config$storage4 === void 0 ? void 0 : _config$storage4.removeItem("injected.connected")]);
+  resetConnectorState(config);
   config.setState(state => _objectSpread(_objectSpread({}, state), {}, {
     chainId: state.chainId,
     connections: new Map(),
@@ -97,6 +107,12 @@ function Web3AuthWagmiProvider({
     onDisconnect: async () => {
       noModal.log.info("Disconnected from wagmi");
       if (isConnected) await disconnect();
+      const connector = getWeb3authConnector(wagmiConfig);
+      // reset wagmi connector state if the provider handles disconnection because of the accountsChanged event
+      // from the connected provider
+      if (connector) {
+        resetConnectorState(wagmiConfig);
+      }
     }
   });
   react.useEffect(() => {

package/dist/lib.cjs/packages/modal/src/ui/components/ConnectWallet/ConnectWallet.js

@@ -58,7 +58,7 @@ function ConnectWallet(props) {
     }
   };
   const walletDiscoverySupported = react.useMemo(() => {
-    const supported = walletRegistry && Object.keys(walletRegistry.default || {}).length > 0 && Object.keys(walletRegistry.others || {}).length > 0;
+    const supported = walletRegistry && (Object.keys(walletRegistry.default || {}).length > 0 || Object.keys(walletRegistry.others || {}).length > 0);
     return supported;
   }, [walletRegistry]);
   const allUniqueButtons = react.useMemo(() => {

package/dist/lib.cjs/packages/modal/src/vue/composables/useChain.js

@@ -0,0 +1,24 @@
+'use strict';
+
+var vue = require('vue');
+var useWeb3AuthInner = require('./useWeb3AuthInner.js');
+
+const useChain = () => {
+  const context = useWeb3AuthInner.useWeb3AuthInner();
+  const chainId = vue.computed(() => {
+    var _context$web3Auth$val;
+    if (!((_context$web3Auth$val = context.web3Auth.value) !== null && _context$web3Auth$val !== void 0 && _context$web3Auth$val.currentChain)) return null;
+    return context.web3Auth.value.currentChain.chainId;
+  });
+  const chainNamespace = vue.computed(() => {
+    var _context$web3Auth$val2;
+    if (!((_context$web3Auth$val2 = context.web3Auth.value) !== null && _context$web3Auth$val2 !== void 0 && _context$web3Auth$val2.currentChain)) return null;
+    return context.web3Auth.value.currentChain.chainNamespace;
+  });
+  return {
+    chainId,
+    chainNamespace
+  };
+};
+
+exports.useChain = useChain;

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

@@ -1,5 +1,6 @@
 'use strict';
 
+var useChain = require('./composables/useChain.js');
 var useCheckout = require('./composables/useCheckout.js');
 var useEnableMFA = require('./composables/useEnableMFA.js');
 var useFunding = require('./composables/useFunding.js');
@@ -19,6 +20,7 @@ var Web3AuthProvider = require('./Web3AuthProvider.js');
 
 
 
+exports.useChain = useChain.useChain;
 exports.useCheckout = useCheckout.useCheckout;
 exports.useEnableMFA = useEnableMFA.useEnableMFA;
 exports.useFunding = useFunding.useFunding;

package/dist/lib.cjs/packages/modal/src/vue/solana/composables/useSolanaWallet.js

@@ -3,6 +3,7 @@
 var web3_js = require('@solana/web3.js');
 var noModal = require('@web3auth/no-modal');
 var vue = require('vue');
+var useChain = require('../../composables/useChain.js');
 require('@web3auth/no-modal/vue');
 var useWeb3Auth = require('../../composables/useWeb3Auth.js');
 
@@ -11,12 +12,19 @@ const useSolanaWallet = () => {
     provider,
     web3Auth
   } = useWeb3Auth.useWeb3Auth();
+  const {
+    chainNamespace
+  } = useChain.useChain();
   const accounts = vue.ref([]);
   const solanaWallet = vue.shallowRef(null);
   const connection = vue.shallowRef(null);
+  const isSolana = vue.computed(() => chainNamespace.value === noModal.CHAIN_NAMESPACES.SOLANA);
   const setupWallet = async () => {
-    var _web3Auth$value, _web3Auth$value2;
-    if (!((_web3Auth$value = web3Auth.value) !== null && _web3Auth$value !== void 0 && (_web3Auth$value = _web3Auth$value.currentChain) !== null && _web3Auth$value !== void 0 && _web3Auth$value.chainNamespace) || web3Auth.value.currentChain.chainNamespace !== noModal.CHAIN_NAMESPACES.SOLANA) {
+    var _web3Auth$value;
+    if (!isSolana.value) {
+      return;
+    }
+    if (!provider.value) {
       return;
     }
     solanaWallet.value = new noModal.SolanaWallet(provider.value);
@@ -24,19 +32,26 @@ const useSolanaWallet = () => {
     if ((result === null || result === void 0 ? void 0 : result.length) > 0) {
       accounts.value = result;
     }
-    connection.value = new web3_js.Connection((_web3Auth$value2 = web3Auth.value) === null || _web3Auth$value2 === void 0 || (_web3Auth$value2 = _web3Auth$value2.currentChain) === null || _web3Auth$value2 === void 0 ? void 0 : _web3Auth$value2.rpcTarget);
+    if ((_web3Auth$value = web3Auth.value) !== null && _web3Auth$value !== void 0 && (_web3Auth$value = _web3Auth$value.currentChain) !== null && _web3Auth$value !== void 0 && _web3Auth$value.rpcTarget) {
+      connection.value = new web3_js.Connection(web3Auth.value.currentChain.rpcTarget);
+    }
+  };
+  const resetWallet = () => {
+    solanaWallet.value = null;
+    accounts.value = null;
+    connection.value = null;
   };
   if (provider.value && !solanaWallet.value) {
     setupWallet();
   }
-  vue.watch(provider, async newVal => {
-    if (!newVal && solanaWallet.value) {
-      solanaWallet.value = null;
-      accounts.value = null;
-      connection.value = null;
+  vue.watch([provider, chainNamespace], async ([newProvider, newChainNamespace]) => {
+    if (!newProvider || newChainNamespace !== noModal.CHAIN_NAMESPACES.SOLANA) {
+      if (solanaWallet.value) {
+        resetWallet();
+      }
       return;
     }
-    if (newVal && !solanaWallet.value) {
+    if (newProvider && !solanaWallet.value) {
       setupWallet();
     }
   }, {

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

@@ -14,10 +14,13 @@ var useWeb3AuthDisconnect = require('../composables/useWeb3AuthDisconnect.js');
 var constants = require('./constants.js');
 
 const WEB3AUTH_CONNECTOR_ID = "web3auth";
+function getWeb3authConnector(config) {
+  return config.connectors.find(c => c.id === WEB3AUTH_CONNECTOR_ID);
+}
 // Helper to initialize connectors for the given wallets
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 async function setupConnector(provider, config) {
-  let connector = config.connectors.find(c => c.id === WEB3AUTH_CONNECTOR_ID);
+  let connector = getWeb3authConnector(config);
   if (connector) return connector;
   // Create new connector if not already existing
   connector = connectors.injected({
@@ -52,8 +55,15 @@ async function connectWeb3AuthWithWagmi(connector, config) {
     status: "connected"
   }));
 }
-async function disconnectWeb3AuthFromWagmi(config) {
+function resetConnectorState(config) {
   config._internal.connectors.setState(prev => prev.filter(c => c.id !== WEB3AUTH_CONNECTOR_ID));
+  config.connectors.filter(c => c.id !== WEB3AUTH_CONNECTOR_ID);
+}
+async function disconnectWeb3AuthFromWagmi(config) {
+  var _config$storage3, _config$storage4;
+  const connector = getWeb3authConnector(config);
+  await Promise.all([(_config$storage3 = config.storage) === null || _config$storage3 === void 0 ? void 0 : _config$storage3.setItem(`${connector === null || connector === void 0 ? void 0 : connector.id}.disconnected`, true), (_config$storage4 = config.storage) === null || _config$storage4 === void 0 ? void 0 : _config$storage4.removeItem("injected.connected")]);
+  resetConnectorState(config);
   config.setState(state => _objectSpread(_objectSpread({}, state), {}, {
     chainId: state.chainId,
     connections: new Map(),
@@ -79,6 +89,12 @@ const Web3AuthWagmiProvider = vue.defineComponent({
       onDisconnect: async () => {
         noModal.log.info("Disconnected from wagmi");
         if (isConnected.value) await disconnect();
+        const connector = getWeb3authConnector(wagmiConfig);
+        // reset wagmi connector state if the provider handles disconnection because of the accountsChanged event
+        // from the connected provider
+        if (connector) {
+          resetConnectorState(wagmiConfig);
+        }
       }
     });
     vue.watch(isConnected, async newIsConnected => {

package/dist/lib.cjs/types/react/hooks/index.d.ts

@@ -1,3 +1,4 @@
+export * from "./useChain";
 export * from "./useCheckout";
 export * from "./useEnableMFA";
 export * from "./useFunding";

package/dist/lib.cjs/types/react/hooks/useChain.d.ts

@@ -0,0 +1,6 @@
+import { ChainNamespaceType } from "@web3auth/no-modal";
+export type IUseChain = {
+    chainId: string | null;
+    chainNamespace: ChainNamespaceType | null;
+};
+export declare const useChain: () => IUseChain;

package/dist/lib.cjs/types/react/hooks/useWeb3Auth.d.ts

@@ -1,3 +1,3 @@
 import { IWeb3AuthInnerContext } from "../interfaces";
-export type IUseWeb3Auth = Omit<IWeb3AuthInnerContext, "isMFAEnabled" | "setIsMFAEnabled">;
+export type IUseWeb3Auth = Omit<IWeb3AuthInnerContext, "isMFAEnabled" | "setIsMFAEnabled" | "chainId" | "chainNamespace">;
 export declare const useWeb3Auth: () => IUseWeb3Auth;

package/dist/lib.cjs/types/vue/composables/index.d.ts

@@ -1,3 +1,4 @@
+export * from "./useChain";
 export * from "./useCheckout";
 export * from "./useEnableMFA";
 export * from "./useFunding";

package/dist/lib.cjs/types/vue/composables/useChain.d.ts

@@ -0,0 +1,7 @@
+import { ChainNamespaceType } from "@web3auth/no-modal";
+import { ComputedRef } from "vue";
+export type IUseChain = {
+    chainId: ComputedRef<string | null>;
+    chainNamespace: ComputedRef<ChainNamespaceType | null>;
+};
+export declare const useChain: () => IUseChain;

package/dist/lib.esm/packages/modal/src/config.js

@@ -1,6 +1,6 @@
 import { EVM_CONNECTORS } from '@web3auth/no-modal';
 
-const version = "10.6.0";
+const version = "10.8.0";
 const defaultConnectorsModalConfig = {
   hideWalletDiscovery: false,
   connectors: {

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

@@ -12,6 +12,8 @@ function Web3AuthInnerProvider(params) {
   const {
     web3AuthOptions
   } = config;
+  const [chainId, setChainId] = useState(null);
+  const [chainNamespace, setChainNamespace] = useState(null);
   const [isInitializing, setIsInitializing] = useState(false);
   const [initError, setInitError] = useState(null);
   const [provider, setProvider] = useState(null);
@@ -31,6 +33,7 @@ function Web3AuthInnerProvider(params) {
     const controller = new AbortController();
     async function init() {
       try {
+        var _web3Auth$currentChai;
         setInitError(null);
         setIsInitializing(true);
         web3Auth.setAnalyticsProperties({
@@ -39,6 +42,8 @@ function Web3AuthInnerProvider(params) {
         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 {
@@ -50,6 +55,19 @@ function Web3AuthInnerProvider(params) {
       controller.abort();
     };
   }, [web3Auth, config]);
+  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 () => {
+        provider.off("chainChanged", handleChainChange);
+      };
+    }
+  }, [web3Auth, provider]);
   useEffect(() => {
     const notReadyListener = () => setStatus(web3Auth.status);
     const readyListener = () => {
@@ -120,10 +138,12 @@ function Web3AuthInnerProvider(params) {
       isInitializing,
       initError,
       isMFAEnabled,
+      chainId,
+      chainNamespace,
       getPlugin,
       setIsMFAEnabled
     };
-  }, [web3Auth, isConnected, isMFAEnabled, setIsMFAEnabled, isInitialized, provider, status, getPlugin, isInitializing, initError]);
+  }, [web3Auth, isConnected, isMFAEnabled, setIsMFAEnabled, isInitialized, provider, status, getPlugin, isInitializing, initError, chainId, chainNamespace]);
   return /*#__PURE__*/createElement(Web3AuthInnerContext.Provider, {
     value
   }, children);

package/dist/lib.esm/packages/modal/src/react/hooks/useChain.js

@@ -0,0 +1,14 @@
+import { useWeb3AuthInner } from './useWeb3AuthInner.js';
+
+const useChain = () => {
+  const {
+    chainId,
+    chainNamespace
+  } = useWeb3AuthInner();
+  return {
+    chainId,
+    chainNamespace
+  };
+};
+
+export { useChain };

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

@@ -1,3 +1,4 @@
+export { useChain } from './hooks/useChain.js';
 export { useCheckout } from './hooks/useCheckout.js';
 export { useEnableMFA } from './hooks/useEnableMFA.js';
 export { useFunding } from './hooks/useFunding.js';

package/dist/lib.esm/packages/modal/src/react/solana/hooks/useSolanaWallet.js

@@ -1,6 +1,25 @@
 import { Connection } from '@solana/web3.js';
-import { SolanaWallet, CHAIN_NAMESPACES } from '@web3auth/no-modal';
+import { CHAIN_NAMESPACES, SolanaWallet } from '@web3auth/no-modal';
 import { useState, useMemo, useEffect } from 'react';
+import { useChain } from '../../hooks/useChain.js';
+import '@babel/runtime/helpers/objectSpread2';
+import '@babel/runtime/helpers/defineProperty';
+import '@web3auth/auth';
+import 'deepmerge';
+import '../../../config.js';
+import '../../../ui/config.js';
+import '../../../ui/css/index.css.js';
+import 'bowser';
+import 'react-dom/client';
+import '@toruslabs/http-helpers';
+import 'clsx';
+import 'tailwind-merge';
+import 'react/jsx-runtime';
+import 'react-i18next';
+import '../../../ui/localeImport.js';
+import 'classnames';
+import 'react-qrcode-logo';
+import '../../../ui/components/Login/Login.js';
 import { useWeb3Auth } from '../../hooks/useWeb3Auth.js';
 
 const useSolanaWallet = () => {
@@ -8,19 +27,23 @@ const useSolanaWallet = () => {
     provider,
     web3Auth
   } = useWeb3Auth();
+  const {
+    chainNamespace
+  } = useChain();
   const [accounts, setAccounts] = useState(null);
   const solanaWallet = useMemo(() => {
     if (!provider) return null;
+    if (chainNamespace !== CHAIN_NAMESPACES.SOLANA) return null;
     return new SolanaWallet(provider);
-  }, [provider]);
+  }, [provider, chainNamespace]);
   const connection = useMemo(() => {
-    if (!web3Auth || !provider) return null;
+    if (!web3Auth || !provider || chainNamespace !== CHAIN_NAMESPACES.SOLANA) return null;
     return new Connection(web3Auth.currentChain.rpcTarget);
-  }, [web3Auth, provider]);
+  }, [web3Auth, provider, chainNamespace]);
   useEffect(() => {
     const init = async () => {
-      var _web3Auth$currentChai;
-      if (!(web3Auth !== null && web3Auth !== void 0 && (_web3Auth$currentChai = web3Auth.currentChain) !== null && _web3Auth$currentChai !== void 0 && _web3Auth$currentChai.chainNamespace) || web3Auth.currentChain.chainNamespace !== CHAIN_NAMESPACES.SOLANA) {
+      if (chainNamespace !== CHAIN_NAMESPACES.SOLANA) {
+        setAccounts(null);
         return;
       }
       if (!solanaWallet) return;
@@ -30,7 +53,7 @@ const useSolanaWallet = () => {
       }
     };
     if (solanaWallet) init();
-  }, [solanaWallet, web3Auth]);
+  }, [solanaWallet, chainNamespace]);
   return {
     solanaWallet,
     accounts,

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

@@ -28,11 +28,14 @@ import { defaultWagmiConfig } from './constants.js';
 
 const _excluded = ["children"];
 const WEB3AUTH_CONNECTOR_ID = "web3auth";
+function getWeb3authConnector(config) {
+  return config.connectors.find(c => c.id === WEB3AUTH_CONNECTOR_ID);
+}
 
 // Helper to initialize connectors for the given wallets
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 async function setupConnector(provider, config) {
-  let connector = config.connectors.find(c => c.id === WEB3AUTH_CONNECTOR_ID);
+  let connector = getWeb3authConnector(config);
   if (connector) return connector;
 
   // Create new connector if not already existing
@@ -69,8 +72,15 @@ async function connectWeb3AuthWithWagmi(connector, config) {
     status: "connected"
   }));
 }
-async function disconnectWeb3AuthFromWagmi(config) {
+function resetConnectorState(config) {
   config._internal.connectors.setState(prev => prev.filter(c => c.id !== WEB3AUTH_CONNECTOR_ID));
+  config.connectors.filter(c => c.id !== WEB3AUTH_CONNECTOR_ID);
+}
+async function disconnectWeb3AuthFromWagmi(config) {
+  var _config$storage3, _config$storage4;
+  const connector = getWeb3authConnector(config);
+  await Promise.all([(_config$storage3 = config.storage) === null || _config$storage3 === void 0 ? void 0 : _config$storage3.setItem(`${connector === null || connector === void 0 ? void 0 : connector.id}.disconnected`, true), (_config$storage4 = config.storage) === null || _config$storage4 === void 0 ? void 0 : _config$storage4.removeItem("injected.connected")]);
+  resetConnectorState(config);
   config.setState(state => _objectSpread(_objectSpread({}, state), {}, {
     chainId: state.chainId,
     connections: new Map(),
@@ -96,6 +106,12 @@ function Web3AuthWagmiProvider({
     onDisconnect: async () => {
       log.info("Disconnected from wagmi");
       if (isConnected) await disconnect();
+      const connector = getWeb3authConnector(wagmiConfig);
+      // reset wagmi connector state if the provider handles disconnection because of the accountsChanged event
+      // from the connected provider
+      if (connector) {
+        resetConnectorState(wagmiConfig);
+      }
     }
   });
   useEffect(() => {

package/dist/lib.esm/packages/modal/src/ui/components/ConnectWallet/ConnectWallet.js

@@ -56,7 +56,7 @@ function ConnectWallet(props) {
     }
   };
   const walletDiscoverySupported = useMemo(() => {
-    const supported = walletRegistry && Object.keys(walletRegistry.default || {}).length > 0 && Object.keys(walletRegistry.others || {}).length > 0;
+    const supported = walletRegistry && (Object.keys(walletRegistry.default || {}).length > 0 || Object.keys(walletRegistry.others || {}).length > 0);
     return supported;
   }, [walletRegistry]);
   const allUniqueButtons = useMemo(() => {

package/dist/lib.esm/packages/modal/src/vue/composables/useChain.js

@@ -0,0 +1,22 @@
+import { computed } from 'vue';
+import { useWeb3AuthInner } from './useWeb3AuthInner.js';
+
+const useChain = () => {
+  const context = useWeb3AuthInner();
+  const chainId = computed(() => {
+    var _context$web3Auth$val;
+    if (!((_context$web3Auth$val = context.web3Auth.value) !== null && _context$web3Auth$val !== void 0 && _context$web3Auth$val.currentChain)) return null;
+    return context.web3Auth.value.currentChain.chainId;
+  });
+  const chainNamespace = computed(() => {
+    var _context$web3Auth$val2;
+    if (!((_context$web3Auth$val2 = context.web3Auth.value) !== null && _context$web3Auth$val2 !== void 0 && _context$web3Auth$val2.currentChain)) return null;
+    return context.web3Auth.value.currentChain.chainNamespace;
+  });
+  return {
+    chainId,
+    chainNamespace
+  };
+};
+
+export { useChain };

package/dist/lib.esm/packages/modal/src/vue/index.js

@@ -1,3 +1,4 @@
+export { useChain } from './composables/useChain.js';
 export { useCheckout } from './composables/useCheckout.js';
 export { useEnableMFA } from './composables/useEnableMFA.js';
 export { useFunding } from './composables/useFunding.js';