@web3auth/modal 10.0.0-beta.5 → 10.0.0-beta.6

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

@@ -2,7 +2,7 @@
 
 var noModal = require('@web3auth/no-modal');
 
-const version = "10.0.0-beta.5";
+const version = "10.0.0-beta.6";
 const defaultConnectorsModalConfig = {
   hideWalletDiscovery: false,
   connectors: {

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

@@ -0,0 +1,35 @@
+'use strict';
+
+var react = require('react');
+var useSolanaWallet = require('./useSolanaWallet.js');
+
+const useSignAndSendTransaction = () => {
+  const {
+    solanaWallet
+  } = useSolanaWallet.useSolanaWallet();
+  const [loading, setLoading] = react.useState(false);
+  const [error, setError] = react.useState(null);
+  const [data, setData] = react.useState(null);
+  const signAndSendTransaction = react.useCallback(async transaction => {
+    setLoading(true);
+    setError(null);
+    try {
+      if (!solanaWallet) throw new Error("Solana wallet not found");
+      const signature = await solanaWallet.signAndSendTransaction(transaction);
+      setData(signature);
+      return signature;
+    } catch (error) {
+      setError(error);
+    } finally {
+      setLoading(false);
+    }
+  }, [solanaWallet]);
+  return {
+    loading,
+    error,
+    data,
+    signAndSendTransaction
+  };
+};
+
+exports.useSignAndSendTransaction = useSignAndSendTransaction;

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

@@ -0,0 +1,36 @@
+'use strict';
+
+var react = require('react');
+var useSolanaWallet = require('./useSolanaWallet.js');
+
+const useSignMessage = () => {
+  const {
+    solanaWallet,
+    accounts
+  } = useSolanaWallet.useSolanaWallet();
+  const [loading, setLoading] = react.useState(false);
+  const [error, setError] = react.useState(null);
+  const [data, setData] = react.useState(null);
+  const signMessage = react.useCallback(async (message, from) => {
+    setLoading(true);
+    setError(null);
+    try {
+      if (!solanaWallet) throw new Error("Solana wallet not found");
+      const signature = await solanaWallet.signMessage(message, from !== null && from !== void 0 ? from : accounts === null || accounts === void 0 ? void 0 : accounts[0]);
+      setData(signature);
+      return signature;
+    } catch (error) {
+      setError(error);
+    } finally {
+      setLoading(false);
+    }
+  }, [solanaWallet, accounts]);
+  return {
+    loading,
+    error,
+    data,
+    signMessage
+  };
+};
+
+exports.useSignMessage = useSignMessage;

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

@@ -0,0 +1,34 @@
+'use strict';
+
+var react = require('react');
+var useSolanaWallet = require('./useSolanaWallet.js');
+
+const useSignTransaction = () => {
+  const {
+    solanaWallet
+  } = useSolanaWallet.useSolanaWallet();
+  const [loading, setLoading] = react.useState(false);
+  const [error, setError] = react.useState(null);
+  const [data, setData] = react.useState(null);
+  const signTransaction = react.useCallback(async transaction => {
+    setLoading(true);
+    setError(null);
+    try {
+      const signedTransaction = await solanaWallet.signTransaction(transaction);
+      setData(signedTransaction);
+      return signedTransaction;
+    } catch (error) {
+      setError(error);
+    } finally {
+      setLoading(false);
+    }
+  }, [solanaWallet]);
+  return {
+    loading,
+    error,
+    data,
+    signTransaction
+  };
+};
+
+exports.useSignTransaction = useSignTransaction;

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

@@ -0,0 +1,32 @@
+'use strict';
+
+var noModal = require('@web3auth/no-modal');
+var react = require('react');
+var useWeb3Auth = require('../../hooks/useWeb3Auth.js');
+
+const useSolanaWallet = () => {
+  const {
+    provider
+  } = useWeb3Auth.useWeb3Auth();
+  const [accounts, setAccounts] = react.useState(null);
+  const solanaWallet = react.useMemo(() => {
+    if (!provider) return null;
+    return new noModal.SolanaWallet(provider);
+  }, [provider]);
+  react.useEffect(() => {
+    const fetchAccounts = async () => {
+      if (!solanaWallet) return;
+      const accounts = await solanaWallet.requestAccounts();
+      if ((accounts === null || accounts === void 0 ? void 0 : accounts.length) > 0) {
+        setAccounts(accounts);
+      }
+    };
+    if (solanaWallet) fetchAccounts();
+  }, [solanaWallet]);
+  return {
+    solanaWallet,
+    accounts
+  };
+};
+
+exports.useSolanaWallet = useSolanaWallet;

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

@@ -0,0 +1,13 @@
+'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');
+
+
+
+exports.useSignAndSendTransaction = useSignAndSendTransaction.useSignAndSendTransaction;
+exports.useSignMessage = useSignMessage.useSignMessage;
+exports.useSignTransaction = useSignTransaction.useSignTransaction;
+exports.useSolanaWallet = useSolanaWallet.useSolanaWallet;

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

@@ -479,7 +479,7 @@ function Login(props) {
     children: [jsxRuntime.jsxs("div", {
       className: utils.cn("w3a--flex w3a--flex-col w3a--items-center w3a--justify-center w3a--gap-y-2 w3a--pt-6", logoAlignment === "center" ? "" : "w3a--w-full"),
       children: [jsxRuntime.jsx("figure", {
-        className: utils.cn("w3a--mx-auto w3a--h-12 w3a--w-[200px]", logoAlignment === "center" ? "w3a--flex w3a--justify-center w3a--items-center" : "w3a--ml-0"),
+        className: utils.cn("w3a--mx-auto w3a--h-12 w3a--w-[200px]", logoAlignment === "center" ? "w3a--flex w3a--justify-center w3a--items-center" : "w3a--ml-0 w3a--w-auto"),
         children: jsxRuntime.jsx("img", {
           src: headerLogo || utils.getIcons(isDark ? "logo-dark" : "logo-light"),
           alt: "Logo",

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

@@ -0,0 +1,70 @@
+'use strict';
+
+var noModal = require('@web3auth/no-modal');
+var vue$1 = require('@web3auth/no-modal/vue');
+var vue = require('vue');
+var useWeb3AuthInner = require('./composables/useWeb3AuthInner.js');
+
+const WalletServicesInnerProvider = vue.defineComponent({
+  name: "WalletServicesInnerProvider",
+  setup() {
+    const web3AuthContext = useWeb3AuthInner.useWeb3AuthInner();
+    if (!web3AuthContext) throw noModal.WalletServicesPluginError.fromCode(1000, "`WalletServicesProvider` must be wrapped by `Web3AuthProvider`");
+    const {
+      getPlugin,
+      isInitialized,
+      isConnected
+    } = web3AuthContext;
+    const walletServicesPlugin = vue.shallowRef(null);
+    const ready = vue.ref(false);
+    const connecting = vue.ref(false);
+    vue.watch(isInitialized, newIsInitialized => {
+      if (newIsInitialized) {
+        const plugin = getPlugin(noModal.EVM_PLUGINS.WALLET_SERVICES);
+        walletServicesPlugin.value = plugin;
+      }
+    });
+    vue.watch(isConnected, newIsConnected => {
+      if (newIsConnected) {
+        var _walletServicesPlugin;
+        const plugin = getPlugin(noModal.EVM_PLUGINS.WALLET_SERVICES);
+        if (!walletServicesPlugin.value) walletServicesPlugin.value = plugin;
+        // when rehydrating, the connectedListener may be registered after the connected event is emitted, we need to check the status here
+        if (((_walletServicesPlugin = walletServicesPlugin.value) === null || _walletServicesPlugin === void 0 ? void 0 : _walletServicesPlugin.status) === noModal.CONNECTOR_STATUS.CONNECTED) ready.value = true;
+      }
+    });
+    vue.watch(walletServicesPlugin, (newWalletServicesPlugin, prevWalletServicesPlugin) => {
+      const connectedListener = () => {
+        ready.value = true;
+      };
+      const disconnectedListener = () => {
+        ready.value = false;
+      };
+      const connectingListener = () => {
+        connecting.value = true;
+      };
+      // unregister previous listeners
+      if (prevWalletServicesPlugin && newWalletServicesPlugin !== prevWalletServicesPlugin) {
+        prevWalletServicesPlugin.off(noModal.PLUGIN_EVENTS.CONNECTED, connectedListener);
+        prevWalletServicesPlugin.off(noModal.PLUGIN_EVENTS.DISCONNECTED, disconnectedListener);
+        prevWalletServicesPlugin.off(noModal.PLUGIN_EVENTS.CONNECTING, connectingListener);
+      }
+      if (newWalletServicesPlugin && newWalletServicesPlugin !== prevWalletServicesPlugin) {
+        newWalletServicesPlugin.on(noModal.PLUGIN_EVENTS.CONNECTED, connectedListener);
+        newWalletServicesPlugin.on(noModal.PLUGIN_EVENTS.DISCONNECTED, disconnectedListener);
+        newWalletServicesPlugin.on(noModal.PLUGIN_EVENTS.CONNECTING, connectingListener);
+      }
+    });
+    vue.provide(vue$1.WalletServicesContextKey, {
+      plugin: walletServicesPlugin,
+      ready,
+      connecting
+    });
+  },
+  render() {
+    var _this$$slots$default;
+    return vue.h((_this$$slots$default = this.$slots.default) !== null && _this$$slots$default !== void 0 ? _this$$slots$default : "");
+  }
+});
+
+exports.WalletServicesInnerProvider = WalletServicesInnerProvider;

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

@@ -3,6 +3,7 @@
 var noModal = require('@web3auth/no-modal');
 var vue = require('vue');
 var modalManager = require('../modalManager.js');
+var WalletServicesInnerProvider = require('./WalletServicesInnerProvider.js');
 
 const Web3AuthProvider = vue.defineComponent({
   name: "Web3AuthProvider",
@@ -15,65 +16,22 @@ const Web3AuthProvider = vue.defineComponent({
   setup(props) {
     const web3Auth = vue.shallowRef(null);
     const provider = vue.ref(null);
-    const userInfo = vue.ref(null);
     const isMFAEnabled = vue.ref(false);
     const status = vue.ref(null);
     const isInitializing = vue.ref(false);
     const initError = vue.ref(null);
     const isInitialized = vue.ref(false);
-    const isConnecting = vue.ref(false);
-    const connectError = vue.ref(null);
     const isConnected = vue.ref(false);
     const getPlugin = name => {
       if (!web3Auth.value) throw noModal.WalletInitializationError.notReady();
       return web3Auth.value.getPlugin(name);
     };
-    const enableMFA = async loginParams => {
-      if (!web3Auth.value) throw noModal.WalletInitializationError.notReady();
-      if (!isConnected.value) throw noModal.WalletLoginError.notConnectedError();
-      await web3Auth.value.enableMFA(loginParams);
-      const localUserInfo = await web3Auth.value.getUserInfo();
-      userInfo.value = localUserInfo;
-      isMFAEnabled.value = localUserInfo.isMfaEnabled || false;
-    };
-    const manageMFA = async loginParams => {
-      if (!web3Auth.value) throw noModal.WalletInitializationError.notReady();
-      if (!isConnected.value) throw noModal.WalletLoginError.notConnectedError();
-      await web3Auth.value.manageMFA(loginParams);
-    };
-    const logout = async (logoutParams = {
-      cleanup: false
-    }) => {
-      if (!web3Auth.value) throw noModal.WalletInitializationError.notReady();
-      if (!isConnected.value) throw noModal.WalletLoginError.notConnectedError();
-      await web3Auth.value.logout(logoutParams);
-    };
-    const connect = async () => {
-      if (!web3Auth.value) throw noModal.WalletInitializationError.notReady();
-      try {
-        connectError.value = null;
-        isConnecting.value = true;
-        const localProvider = await web3Auth.value.connect();
-        return localProvider;
-      } catch (error) {
-        connectError.value = error;
-        return null;
-      } finally {
-        isConnecting.value = false;
-      }
-    };
-    const authenticateUser = async () => {
-      if (!web3Auth.value) throw noModal.WalletInitializationError.notReady();
-      return web3Auth.value.authenticateUser();
-    };
-    const switchChain = chainParams => {
-      if (!web3Auth.value) throw noModal.WalletInitializationError.notReady();
-      return web3Auth.value.switchChain(chainParams);
+    const setIsMFAEnabled = isMfaEnabled => {
+      isMFAEnabled.value = isMfaEnabled;
     };
     vue.watch(() => props.config, (newConfig, _, onInvalidate) => {
       const resetHookState = () => {
         provider.value = null;
-        userInfo.value = null;
         isMFAEnabled.value = false;
         isConnected.value = false;
         status.value = null;
@@ -114,22 +72,6 @@ const Web3AuthProvider = vue.defineComponent({
     }, {
       immediate: true
     });
-    vue.watch(isConnected, newIsConnected => {
-      if (web3Auth.value) {
-        const addState = async web3AuthInstance => {
-          provider.value = web3AuthInstance.provider;
-          const userState = await web3AuthInstance.getUserInfo();
-          userInfo.value = userState;
-          isMFAEnabled.value = (userState === null || userState === void 0 ? void 0 : userState.isMfaEnabled) || false;
-        };
-        const resetState = () => {
-          provider.value = null;
-          userInfo.value = null;
-          isMFAEnabled.value = false;
-        };
-        if (newIsConnected) addState(web3Auth.value);else resetState();
-      }
-    });
     vue.watch(web3Auth, (newWeb3Auth, prevWeb3Auth) => {
       const notReadyListener = () => {
         status.value = web3Auth.value.status;
@@ -142,13 +84,16 @@ const Web3AuthProvider = vue.defineComponent({
         status.value = web3Auth.value.status;
         // we do this because of rehydration issues. status connected is fired first but web3auth sdk is not ready yet.
         if (web3Auth.value.status === noModal.CONNECTOR_STATUS.CONNECTED) {
-          isInitialized.value = true;
+          if (!isInitialized.value) isInitialized.value = true;
           isConnected.value = true;
+          provider.value = newWeb3Auth.provider;
         }
       };
       const disconnectedListener = () => {
         status.value = web3Auth.value.status;
         isConnected.value = false;
+        provider.value = null;
+        isMFAEnabled.value = false;
       };
       const connectingListener = () => {
         status.value = web3Auth.value.status;
@@ -156,6 +101,9 @@ const Web3AuthProvider = vue.defineComponent({
       const errorListener = () => {
         status.value = noModal.CONNECTOR_EVENTS.ERRORED;
       };
+      const mfaEnabledListener = () => {
+        isMFAEnabled.value = true;
+      };
       // unregister previous listeners
       if (prevWeb3Auth && newWeb3Auth !== prevWeb3Auth) {
         prevWeb3Auth.off(noModal.CONNECTOR_EVENTS.NOT_READY, notReadyListener);
@@ -164,6 +112,7 @@ const Web3AuthProvider = vue.defineComponent({
         prevWeb3Auth.off(noModal.CONNECTOR_EVENTS.DISCONNECTED, disconnectedListener);
         prevWeb3Auth.off(noModal.CONNECTOR_EVENTS.CONNECTING, connectingListener);
         prevWeb3Auth.off(noModal.CONNECTOR_EVENTS.ERRORED, errorListener);
+        prevWeb3Auth.off(noModal.CONNECTOR_EVENTS.MFA_ENABLED, mfaEnabledListener);
       }
       if (newWeb3Auth && newWeb3Auth !== prevWeb3Auth) {
         status.value = newWeb3Auth.status;
@@ -174,6 +123,7 @@ const Web3AuthProvider = vue.defineComponent({
         newWeb3Auth.on(noModal.CONNECTOR_EVENTS.DISCONNECTED, disconnectedListener);
         newWeb3Auth.on(noModal.CONNECTOR_EVENTS.CONNECTING, connectingListener);
         newWeb3Auth.on(noModal.CONNECTOR_EVENTS.ERRORED, errorListener);
+        newWeb3Auth.on(noModal.CONNECTOR_EVENTS.MFA_ENABLED, mfaEnabledListener);
       }
     }, {
       immediate: true
@@ -183,25 +133,17 @@ const Web3AuthProvider = vue.defineComponent({
       isConnected,
       isInitialized,
       provider,
-      userInfo,
-      isMFAEnabled,
       status,
-      getPlugin,
-      connect,
-      enableMFA,
-      manageMFA,
-      logout,
-      authenticateUser,
-      switchChain,
       isInitializing,
-      isConnecting,
       initError,
-      connectError
+      isMFAEnabled,
+      getPlugin,
+      setIsMFAEnabled
     });
   },
   render() {
     var _this$$slots$default;
-    return vue.h((_this$$slots$default = this.$slots.default) !== null && _this$$slots$default !== void 0 ? _this$$slots$default : "");
+    return vue.h(WalletServicesInnerProvider.WalletServicesInnerProvider, {}, (_this$$slots$default = this.$slots.default) !== null && _this$$slots$default !== void 0 ? _this$$slots$default : "");
   }
 });
 

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

@@ -0,0 +1,34 @@
+'use strict';
+
+var noModal = require('@web3auth/no-modal');
+var vue = require('vue');
+var useWalletServicesPlugin = require('./useWalletServicesPlugin.js');
+
+const useCheckout = () => {
+  const {
+    plugin,
+    ready
+  } = useWalletServicesPlugin.useWalletServicesPlugin();
+  const loading = vue.ref(false);
+  const error = vue.ref(null);
+  const showCheckout = async showCheckoutParams => {
+    loading.value = true;
+    error.value = null;
+    try {
+      if (!plugin) throw noModal.WalletServicesPluginError.notInitialized();
+      if (!ready) throw noModal.WalletServicesPluginError.walletPluginNotConnected();
+      await plugin.value.showCheckout(showCheckoutParams);
+    } catch (err) {
+      error.value = err;
+    } finally {
+      loading.value = false;
+    }
+  };
+  return {
+    loading,
+    error,
+    showCheckout
+  };
+};
+
+exports.useCheckout = useCheckout;

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

@@ -0,0 +1,32 @@
+'use strict';
+
+var noModal = require('@web3auth/no-modal');
+var vue = require('vue');
+var useWeb3AuthInner = require('./useWeb3AuthInner.js');
+
+const useEnableMFA = () => {
+  const {
+    web3Auth
+  } = useWeb3AuthInner.useWeb3AuthInner();
+  const loading = vue.ref(false);
+  const error = vue.ref(null);
+  const enableMFA = async () => {
+    try {
+      if (!web3Auth.value) throw noModal.WalletInitializationError.notReady();
+      error.value = null;
+      loading.value = true;
+      await web3Auth.value.enableMFA();
+    } catch (err) {
+      error.value = err;
+    } finally {
+      loading.value = false;
+    }
+  };
+  return {
+    loading,
+    error,
+    enableMFA
+  };
+};
+
+exports.useEnableMFA = useEnableMFA;

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

@@ -0,0 +1,44 @@
+'use strict';
+
+var noModal = require('@web3auth/no-modal');
+var vue = require('vue');
+var useWeb3AuthInner = require('./useWeb3AuthInner.js');
+
+const useIdentityToken = () => {
+  const {
+    web3Auth,
+    isConnected
+  } = useWeb3AuthInner.useWeb3AuthInner();
+  const loading = vue.ref(false);
+  const error = vue.ref(null);
+  const token = vue.ref(null);
+  const authenticateUser = async () => {
+    try {
+      if (!web3Auth.value) throw noModal.WalletInitializationError.notReady();
+      error.value = null;
+      loading.value = true;
+      const result = await web3Auth.value.authenticateUser();
+      if (result !== null && result !== void 0 && result.idToken) {
+        token.value = result.idToken;
+      }
+      return result === null || result === void 0 ? void 0 : result.idToken;
+    } catch (err) {
+      error.value = err;
+    } finally {
+      loading.value = false;
+    }
+  };
+  vue.watch(isConnected, newIsConnected => {
+    if (!newIsConnected && token.value) {
+      token.value = null;
+    }
+  });
+  return {
+    loading,
+    error,
+    token,
+    authenticateUser
+  };
+};
+
+exports.useIdentityToken = useIdentityToken;

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

@@ -0,0 +1,32 @@
+'use strict';
+
+var noModal = require('@web3auth/no-modal');
+var vue = require('vue');
+var useWeb3AuthInner = require('./useWeb3AuthInner.js');
+
+const useManageMFA = () => {
+  const {
+    web3Auth
+  } = useWeb3AuthInner.useWeb3AuthInner();
+  const loading = vue.ref(false);
+  const error = vue.ref(null);
+  const manageMFA = async () => {
+    try {
+      if (!web3Auth.value) throw noModal.WalletInitializationError.notReady();
+      error.value = null;
+      loading.value = true;
+      await web3Auth.value.enableMFA();
+    } catch (err) {
+      error.value = err;
+    } finally {
+      loading.value = false;
+    }
+  };
+  return {
+    loading,
+    error,
+    manageMFA
+  };
+};
+
+exports.useManageMFA = useManageMFA;

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

@@ -0,0 +1,34 @@
+'use strict';
+
+var noModal = require('@web3auth/no-modal');
+var vue = require('vue');
+var useWalletServicesPlugin = require('./useWalletServicesPlugin.js');
+
+const useSwap = () => {
+  const {
+    plugin,
+    ready
+  } = useWalletServicesPlugin.useWalletServicesPlugin();
+  const loading = vue.ref(false);
+  const error = vue.ref(null);
+  const showSwap = async showSwapParams => {
+    loading.value = true;
+    error.value = null;
+    try {
+      if (!plugin) throw noModal.WalletServicesPluginError.notInitialized();
+      if (!ready) throw noModal.WalletServicesPluginError.walletPluginNotConnected();
+      await plugin.value.showSwap(showSwapParams);
+    } catch (err) {
+      error.value = err;
+    } finally {
+      loading.value = false;
+    }
+  };
+  return {
+    loading,
+    error,
+    showSwap
+  };
+};
+
+exports.useSwap = useSwap;

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

@@ -0,0 +1,32 @@
+'use strict';
+
+var noModal = require('@web3auth/no-modal');
+var vue = require('vue');
+var useWeb3AuthInner = require('./useWeb3AuthInner.js');
+
+const useSwitchChain = () => {
+  const {
+    web3Auth
+  } = useWeb3AuthInner.useWeb3AuthInner();
+  const loading = vue.ref(false);
+  const error = vue.ref(null);
+  const switchChain = async chainParams => {
+    try {
+      if (!web3Auth.value) throw noModal.WalletInitializationError.notReady();
+      error.value = null;
+      loading.value = true;
+      await web3Auth.value.switchChain(chainParams);
+    } catch (err) {
+      error.value = err;
+    } finally {
+      loading.value = false;
+    }
+  };
+  return {
+    loading,
+    error,
+    switchChain
+  };
+};
+
+exports.useSwitchChain = useSwitchChain;

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

@@ -0,0 +1,34 @@
+'use strict';
+
+var noModal = require('@web3auth/no-modal');
+var vue = require('vue');
+var useWalletServicesPlugin = require('./useWalletServicesPlugin.js');
+
+const useWalletConnectScanner = () => {
+  const {
+    plugin,
+    ready
+  } = useWalletServicesPlugin.useWalletServicesPlugin();
+  const loading = vue.ref(false);
+  const error = vue.ref(null);
+  const showWalletConnectScanner = async showWalletConnectScannerParams => {
+    loading.value = true;
+    error.value = null;
+    try {
+      if (!plugin) throw noModal.WalletServicesPluginError.notInitialized();
+      if (!ready) throw noModal.WalletServicesPluginError.walletPluginNotConnected();
+      await plugin.value.showWalletConnectScanner(showWalletConnectScannerParams);
+    } catch (err) {
+      error.value = err;
+    } finally {
+      loading.value = false;
+    }
+  };
+  return {
+    loading,
+    error,
+    showWalletConnectScanner
+  };
+};
+
+exports.useWalletConnectScanner = useWalletConnectScanner;

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

@@ -0,0 +1,12 @@
+'use strict';
+
+var vue$1 = require('@web3auth/no-modal/vue');
+var vue = require('vue');
+
+const useWalletServicesPlugin = () => {
+  const context = vue.inject(vue$1.WalletServicesContextKey);
+  if (!context) throw new Error("WalletServicesContext not found");
+  return context;
+};
+
+exports.useWalletServicesPlugin = useWalletServicesPlugin;