@web3auth/no-modal 9.6.0 → 10.0.0-alpha.0

package/dist/lib.esm/react/no-modal/Web3AuthInnerContext.js

@@ -0,0 +1,213 @@
+import { createContext, useState, useCallback, useEffect, useMemo, createElement } from 'react';
+import { WalletInitializationError, WalletLoginError } from '../../base/errors/index.js';
+import { Web3AuthNoModal } from '../../noModal.js';
+import { ADAPTER_EVENTS, ADAPTER_STATUS } from '../../base/adapter/constants.js';
+
+const Web3AuthInnerContext = createContext(null);
+function Web3AuthInnerProvider(params) {
+  const {
+    children,
+    config
+  } = params;
+  const [web3Auth, setWeb3Auth] = useState(null);
+  const [isConnecting, setIsConnecting] = useState(false);
+  const [isInitializing, setIsInitializing] = useState(false);
+  const [initError, setInitError] = useState(null);
+  const [connectError, setConnectError] = useState(null);
+  const [isConnected, setIsConnected] = useState(false);
+  const [provider, setProvider] = useState(null);
+  const [userInfo, setUserInfo] = useState(null);
+  const [isMFAEnabled, setIsMFAEnabled] = useState(false);
+  const [isInitialized, setIsInitialized] = useState(false);
+  const [status, setStatus] = useState(null);
+  const addPlugin = useCallback(plugin => {
+    if (!web3Auth) throw WalletInitializationError.notReady();
+    return web3Auth.addPlugin(plugin);
+  }, [web3Auth]);
+  const getPlugin = useCallback(name => {
+    if (!web3Auth) throw WalletInitializationError.notReady();
+    return web3Auth.getPlugin(name);
+  }, [web3Auth]);
+  useEffect(() => {
+    const resetHookState = () => {
+      setProvider(null);
+      setUserInfo(null);
+      setIsMFAEnabled(false);
+      setIsConnected(false);
+      setStatus(null);
+    };
+    resetHookState();
+    const {
+      web3AuthOptions,
+      adapters = [],
+      plugins = []
+    } = config;
+    const web3Instance = new Web3AuthNoModal(web3AuthOptions);
+    if (adapters.length) adapters.map(adapter => web3Instance.configureAdapter(adapter));
+    if (plugins.length) plugins.forEach(plugin => {
+      web3Instance.addPlugin(plugin);
+    });
+    setWeb3Auth(web3Instance);
+  }, [config]);
+  useEffect(() => {
+    async function init() {
+      try {
+        setInitError(null);
+        setIsInitializing(true);
+        await web3Auth.init();
+      } catch (error) {
+        setInitError(error);
+      } finally {
+        setIsInitializing(false);
+      }
+    }
+    if (web3Auth) init();
+  }, [web3Auth]);
+  useEffect(() => {
+    const addState = async () => {
+      setProvider(web3Auth.provider);
+      const userState = await web3Auth.getUserInfo();
+      setUserInfo(userState);
+      setIsMFAEnabled((userState === null || userState === void 0 ? void 0 : userState.isMfaEnabled) || false);
+    };
+    const resetState = () => {
+      setProvider(null);
+      setUserInfo(null);
+      setIsMFAEnabled(false);
+    };
+    if (web3Auth) {
+      if (isConnected) addState();else resetState();
+    }
+  }, [web3Auth, isConnected]);
+
+  // TODO: don't throw error in init, connect in v9
+
+  useEffect(() => {
+    const notReadyListener = () => setStatus(ADAPTER_STATUS.NOT_READY);
+    const readyListener = () => {
+      setStatus(web3Auth.status);
+      setIsInitialized(true);
+    };
+    const connectedListener = () => {
+      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 === ADAPTER_STATUS.CONNECTED) {
+        setIsInitialized(true);
+        setIsConnected(true);
+      }
+    };
+    const disconnectedListener = () => {
+      setStatus(web3Auth.status);
+      setIsConnected(false);
+    };
+    const connectingListener = () => {
+      setStatus(web3Auth.status);
+    };
+    const errorListener = () => {
+      setStatus(ADAPTER_STATUS.ERRORED);
+    };
+    if (web3Auth) {
+      // web3Auth is initialized here.
+      setStatus(web3Auth.status);
+      web3Auth.on(ADAPTER_EVENTS.NOT_READY, notReadyListener);
+      web3Auth.on(ADAPTER_EVENTS.READY, readyListener);
+      web3Auth.on(ADAPTER_EVENTS.CONNECTED, connectedListener);
+      web3Auth.on(ADAPTER_EVENTS.DISCONNECTED, disconnectedListener);
+      web3Auth.on(ADAPTER_EVENTS.CONNECTING, connectingListener);
+      web3Auth.on(ADAPTER_EVENTS.ERRORED, errorListener);
+    }
+    return () => {
+      if (web3Auth) {
+        web3Auth.off(ADAPTER_EVENTS.NOT_READY, notReadyListener);
+        web3Auth.off(ADAPTER_EVENTS.READY, readyListener);
+        web3Auth.off(ADAPTER_EVENTS.CONNECTED, connectedListener);
+        web3Auth.off(ADAPTER_EVENTS.DISCONNECTED, disconnectedListener);
+        web3Auth.off(ADAPTER_EVENTS.CONNECTING, connectingListener);
+        web3Auth.off(ADAPTER_EVENTS.ERRORED, errorListener);
+      }
+    };
+  }, [web3Auth]);
+  const enableMFA = useCallback(async loginParams => {
+    if (!web3Auth) throw WalletInitializationError.notReady();
+    if (!isConnected) throw WalletLoginError.notConnectedError();
+    await web3Auth.enableMFA(loginParams);
+    const localUserInfo = await web3Auth.getUserInfo();
+    setUserInfo(localUserInfo);
+    setIsMFAEnabled(localUserInfo.isMfaEnabled || false);
+  }, [web3Auth, isConnected]);
+  const manageMFA = useCallback(async loginParams => {
+    if (!web3Auth) throw WalletInitializationError.notReady();
+    if (!isConnected) throw WalletLoginError.notConnectedError();
+    await web3Auth.manageMFA(loginParams);
+  }, [web3Auth, isConnected]);
+  const logout = useCallback(async (logoutParams = {
+    cleanup: false
+  }) => {
+    if (!web3Auth) throw WalletInitializationError.notReady();
+    if (!isConnected) throw WalletLoginError.notConnectedError();
+    await web3Auth.logout(logoutParams);
+  }, [web3Auth, isConnected]);
+  const connectTo = useCallback(async (walletName, loginParams) => {
+    if (!web3Auth) throw WalletInitializationError.notReady();
+    try {
+      setConnectError(null);
+      setIsConnecting(true);
+      const localProvider = await web3Auth.connectTo(walletName, loginParams);
+      return localProvider;
+    } catch (error) {
+      setConnectError(error);
+      throw error;
+    } finally {
+      setIsConnecting(false);
+    }
+  }, [web3Auth]);
+  const addAndSwitchChain = useCallback(async chainConfig => {
+    if (!web3Auth) throw WalletInitializationError.notReady();
+    await web3Auth.addChain(chainConfig);
+    await web3Auth.switchChain({
+      chainId: chainConfig.chainId
+    });
+  }, [web3Auth]);
+  const authenticateUser = useCallback(async () => {
+    if (!web3Auth) throw WalletInitializationError.notReady();
+    return web3Auth.authenticateUser();
+  }, [web3Auth]);
+  const addChain = useCallback(async chainConfig => {
+    if (!web3Auth) throw WalletInitializationError.notReady();
+    return web3Auth.addChain(chainConfig);
+  }, [web3Auth]);
+  const switchChain = useCallback(chainParams => {
+    if (!web3Auth) throw WalletInitializationError.notReady();
+    return web3Auth.switchChain(chainParams);
+  }, [web3Auth]);
+  const value = useMemo(() => {
+    return {
+      web3Auth,
+      isConnected,
+      isInitialized,
+      provider,
+      userInfo,
+      isMFAEnabled,
+      status,
+      getPlugin,
+      connectTo,
+      enableMFA,
+      manageMFA,
+      logout,
+      addAndSwitchChain,
+      addChain,
+      addPlugin,
+      authenticateUser,
+      switchChain,
+      isInitializing,
+      isConnecting,
+      initError,
+      connectError
+    };
+  }, [web3Auth, isConnected, isInitialized, provider, userInfo, isMFAEnabled, status, connectTo, getPlugin, enableMFA, manageMFA, logout, addAndSwitchChain, addChain, addPlugin, authenticateUser, switchChain, isConnecting, isInitializing, initError, connectError]);
+  return createElement(Web3AuthInnerContext.Provider, {
+    value
+  }, children);
+}
+
+export { Web3AuthInnerContext, Web3AuthInnerProvider };

package/dist/lib.esm/react/no-modal/Web3AuthProvider.js

@@ -0,0 +1,13 @@
+import { createElement } from 'react';
+import { Web3AuthInnerProvider } from './Web3AuthInnerContext.js';
+
+function Web3AuthProvider({
+  config,
+  children
+}) {
+  return createElement(Web3AuthInnerProvider, {
+    config
+  }, children);
+}
+
+export { Web3AuthProvider };

package/dist/lib.esm/react/no-modal/hooks/useWeb3Auth.js

@@ -0,0 +1,13 @@
+import { useContext } from 'react';
+import { WalletInitializationError } from '../../../base/errors/index.js';
+import { Web3AuthInnerContext } from '../Web3AuthInnerContext.js';
+
+const useWeb3Auth = () => {
+  const context = useContext(Web3AuthInnerContext);
+  if (!context) {
+    throw WalletInitializationError.fromCode(1000, "usage of useWeb3Auth not wrapped in `Web3AuthContextProvider`.");
+  }
+  return context;
+};
+
+export { useWeb3Auth };

package/dist/lib.esm/react/wallet-services-plugin/WalletServicesContext.js

@@ -0,0 +1,83 @@
+import { createContext, useState, useContext, useEffect, useCallback, useMemo, createElement } from 'react';
+import { EVM_PLUGINS, PLUGIN_EVENTS } from '../../base/plugin/IPlugin.js';
+import { WalletServicesPluginError } from '../../base/plugin/errors.js';
+
+const WalletServicesContext = createContext(null);
+function WalletServicesContextProvider({
+  children,
+  context
+}) {
+  const [isPluginConnected, setIsPluginConnected] = useState(false);
+  const [walletServicesPlugin, setWalletServicesPlugin] = useState(null);
+  const web3AuthContext = useContext(context);
+  const {
+    getPlugin,
+    isInitialized,
+    isConnected
+  } = web3AuthContext;
+  useEffect(() => {
+    if (isInitialized) {
+      const plugin = getPlugin(EVM_PLUGINS.WALLET_SERVICES);
+      setWalletServicesPlugin(plugin);
+    }
+  }, [isInitialized, getPlugin]);
+  useEffect(() => {
+    if (isConnected) {
+      const plugin = getPlugin(EVM_PLUGINS.WALLET_SERVICES);
+      if (!walletServicesPlugin) setWalletServicesPlugin(plugin);
+    }
+  }, [isConnected, getPlugin, walletServicesPlugin]);
+  useEffect(() => {
+    const connectedListener = () => {
+      setIsPluginConnected(true);
+    };
+    const disconnectedListener = () => {
+      setIsPluginConnected(false);
+    };
+    if (walletServicesPlugin) {
+      walletServicesPlugin.on(PLUGIN_EVENTS.CONNECTED, connectedListener);
+      walletServicesPlugin.on(PLUGIN_EVENTS.DISCONNECTED, disconnectedListener);
+    }
+    return () => {
+      if (walletServicesPlugin) {
+        walletServicesPlugin.off(PLUGIN_EVENTS.CONNECTED, connectedListener);
+        walletServicesPlugin.off(PLUGIN_EVENTS.DISCONNECTED, disconnectedListener);
+      }
+    };
+  }, [walletServicesPlugin]);
+  const showWalletConnectScanner = useCallback(async showWalletConnectParams => {
+    if (!walletServicesPlugin) throw WalletServicesPluginError.notInitialized();
+    if (!isPluginConnected) throw WalletServicesPluginError.walletPluginNotConnected();
+    return walletServicesPlugin.showWalletConnectScanner(showWalletConnectParams);
+  }, [walletServicesPlugin, isPluginConnected]);
+  const showWalletUI = useCallback(async showWalletUiParams => {
+    if (!walletServicesPlugin) throw WalletServicesPluginError.notInitialized();
+    if (!isPluginConnected) throw WalletServicesPluginError.walletPluginNotConnected();
+    return walletServicesPlugin.showWalletUi(showWalletUiParams);
+  }, [walletServicesPlugin, isPluginConnected]);
+  const showCheckout = useCallback(async showCheckoutParams => {
+    if (!walletServicesPlugin) throw WalletServicesPluginError.notInitialized();
+    if (!isPluginConnected) throw WalletServicesPluginError.walletPluginNotConnected();
+    return walletServicesPlugin.showCheckout(showCheckoutParams);
+  }, [walletServicesPlugin, isPluginConnected]);
+  const showSwap = useCallback(async showSwapParams => {
+    if (!walletServicesPlugin) throw WalletServicesPluginError.notInitialized();
+    if (!isPluginConnected) throw WalletServicesPluginError.walletPluginNotConnected();
+    return walletServicesPlugin.showSwap(showSwapParams);
+  }, [walletServicesPlugin, isPluginConnected]);
+  const value = useMemo(() => {
+    return {
+      plugin: walletServicesPlugin,
+      isPluginConnected,
+      showWalletConnectScanner,
+      showCheckout,
+      showWalletUI,
+      showSwap
+    };
+  }, [walletServicesPlugin, isPluginConnected, showWalletConnectScanner, showCheckout, showWalletUI, showSwap]);
+  return createElement(WalletServicesContext.Provider, {
+    value
+  }, children);
+}
+
+export { WalletServicesContext, WalletServicesContextProvider };

package/dist/lib.esm/react/wallet-services-plugin/WalletServicesProvider.js

@@ -0,0 +1,14 @@
+import { createElement } from 'react';
+import { WalletServicesContextProvider } from './WalletServicesContext.js';
+
+function WalletServicesProvider({
+  children,
+  context
+}) {
+  const wsElement = createElement(WalletServicesContextProvider, {
+    context
+  }, children);
+  return wsElement;
+}
+
+export { WalletServicesProvider };

package/dist/lib.esm/react/wallet-services-plugin/hooks/useWalletServicesPlugin.js

@@ -0,0 +1,13 @@
+import { useContext } from 'react';
+import { WalletInitializationError } from '../../../base/errors/index.js';
+import { WalletServicesContext } from '../WalletServicesContext.js';
+
+const useWalletServicesPlugin = () => {
+  const context = useContext(WalletServicesContext);
+  if (!context) {
+    throw WalletInitializationError.fromCode(1000, "usage of useWalletServicesPlugin not wrapped in `WalletServicesContextProvider`.");
+  }
+  return context;
+};
+
+export { useWalletServicesPlugin };

package/dist/lib.esm/vue/index.js

@@ -0,0 +1,5 @@
+export { useWeb3Auth } from './no-modal/composables/useWeb3Auth.js';
+export { Web3AuthProvider } from './no-modal/Web3AuthProvider.js';
+export { useWalletServicesPlugin } from './wallet-services-plugin/composables/useWalletServicesPlugin.js';
+export { WalletServicesContextKey } from './wallet-services-plugin/context.js';
+export { WalletServicesProvider } from './wallet-services-plugin/WalletServicesProvider.js';

package/dist/lib.esm/vue/no-modal/Web3AuthProvider.js

@@ -0,0 +1,220 @@
+import { defineComponent, h, shallowRef, ref, watch, provide } from 'vue';
+import { Web3AuthContextKey } from '../../base/composables/index.js';
+import { WalletInitializationError, WalletLoginError } from '../../base/errors/index.js';
+import { Web3AuthNoModal } from '../../noModal.js';
+import { ADAPTER_EVENTS, ADAPTER_STATUS } from '../../base/adapter/constants.js';
+
+const Web3AuthProvider = defineComponent({
+  name: "Web3AuthProvider",
+  props: {
+    config: {
+      type: Object,
+      required: true
+    }
+  },
+  setup(props) {
+    const web3Auth = shallowRef(null);
+    const provider = ref(null);
+    const userInfo = ref(null);
+    const isMFAEnabled = ref(false);
+    const status = ref(null);
+    const isInitializing = ref(false);
+    const initError = ref(null);
+    const isInitialized = ref(false);
+    const isConnecting = ref(false);
+    const connectError = ref(null);
+    const isConnected = ref(false);
+    const addPlugin = plugin => {
+      if (!web3Auth.value) throw WalletInitializationError.notReady();
+      return web3Auth.value.addPlugin(plugin);
+    };
+    const getPlugin = name => {
+      if (!web3Auth.value) throw WalletInitializationError.notReady();
+      return web3Auth.value.getPlugin(name);
+    };
+    const enableMFA = async loginParams => {
+      if (!web3Auth.value) throw WalletInitializationError.notReady();
+      if (!isConnected.value) throw 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 WalletInitializationError.notReady();
+      if (!isConnected.value) throw WalletLoginError.notConnectedError();
+      await web3Auth.value.manageMFA(loginParams);
+    };
+    const logout = async (logoutParams = {
+      cleanup: false
+    }) => {
+      if (!web3Auth.value) throw WalletInitializationError.notReady();
+      if (!isConnected.value) throw WalletLoginError.notConnectedError();
+      await web3Auth.value.logout(logoutParams);
+    };
+    const connectTo = async (walletName, loginParams) => {
+      if (!web3Auth.value) throw WalletInitializationError.notReady();
+      try {
+        connectError.value = null;
+        isConnecting.value = true;
+        const localProvider = await web3Auth.value.connectTo(walletName, loginParams);
+        return localProvider;
+      } catch (error) {
+        connectError.value = error;
+      } finally {
+        isConnecting.value = false;
+      }
+    };
+    const addAndSwitchChain = async chainConfig => {
+      if (!web3Auth.value) throw WalletInitializationError.notReady();
+      await web3Auth.value.addChain(chainConfig);
+      await web3Auth.value.switchChain({
+        chainId: chainConfig.chainId
+      });
+    };
+    const authenticateUser = async () => {
+      if (!web3Auth.value) throw WalletInitializationError.notReady();
+      return web3Auth.value.authenticateUser();
+    };
+    const addChain = async chainConfig => {
+      if (!web3Auth.value) throw WalletInitializationError.notReady();
+      return web3Auth.value.addChain(chainConfig);
+    };
+    const switchChain = chainParams => {
+      if (!web3Auth.value) throw WalletInitializationError.notReady();
+      return web3Auth.value.switchChain(chainParams);
+    };
+    watch(() => props.config, newConfig => {
+      const resetHookState = () => {
+        provider.value = null;
+        userInfo.value = null;
+        isMFAEnabled.value = false;
+        isConnected.value = false;
+        status.value = null;
+      };
+      resetHookState();
+      const {
+        web3AuthOptions,
+        adapters = [],
+        plugins = []
+      } = newConfig;
+      const web3AuthInstance = new Web3AuthNoModal(web3AuthOptions);
+      if (adapters.length) adapters.map(adapter => web3AuthInstance.configureAdapter(adapter));
+      if (plugins.length) {
+        plugins.forEach(plugin => {
+          web3AuthInstance.addPlugin(plugin);
+        });
+      }
+      web3Auth.value = web3AuthInstance;
+    }, {
+      immediate: true
+    });
+    watch(web3Auth, async newWeb3Auth => {
+      if (newWeb3Auth) {
+        try {
+          initError.value = null;
+          isInitializing.value = true;
+          await newWeb3Auth.init();
+        } catch (error) {
+          initError.value = error;
+        } finally {
+          isInitializing.value = false;
+        }
+      }
+    }, {
+      immediate: true
+    });
+    watch(isConnected, () => {
+      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 (isConnected.value) addState(web3Auth.value);else resetState();
+      }
+    });
+    watch(web3Auth, (newWeb3Auth, prevWeb3Auth) => {
+      const notReadyListener = () => status.value = web3Auth.value.status;
+      const readyListener = () => {
+        status.value = web3Auth.value.status;
+        isInitialized.value = true;
+      };
+      const connectedListener = () => {
+        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 === ADAPTER_STATUS.CONNECTED) {
+          isInitialized.value = true;
+          isConnected.value = true;
+        }
+      };
+      const disconnectedListener = () => {
+        status.value = web3Auth.value.status;
+        isConnected.value = false;
+      };
+      const connectingListener = () => {
+        status.value = web3Auth.value.status;
+      };
+      const errorListener = () => {
+        status.value = ADAPTER_EVENTS.ERRORED;
+      };
+
+      // unregister previous listeners
+      if (prevWeb3Auth && newWeb3Auth !== prevWeb3Auth) {
+        prevWeb3Auth.off(ADAPTER_EVENTS.NOT_READY, notReadyListener);
+        prevWeb3Auth.off(ADAPTER_EVENTS.READY, readyListener);
+        prevWeb3Auth.off(ADAPTER_EVENTS.CONNECTED, connectedListener);
+        prevWeb3Auth.off(ADAPTER_EVENTS.DISCONNECTED, disconnectedListener);
+        prevWeb3Auth.off(ADAPTER_EVENTS.CONNECTING, connectingListener);
+        prevWeb3Auth.off(ADAPTER_EVENTS.ERRORED, errorListener);
+      }
+      if (newWeb3Auth && newWeb3Auth !== prevWeb3Auth) {
+        status.value = newWeb3Auth.status;
+        // web3Auth is initialized here.
+        newWeb3Auth.on(ADAPTER_EVENTS.NOT_READY, notReadyListener);
+        newWeb3Auth.on(ADAPTER_EVENTS.READY, readyListener);
+        newWeb3Auth.on(ADAPTER_EVENTS.CONNECTED, connectedListener);
+        newWeb3Auth.on(ADAPTER_EVENTS.DISCONNECTED, disconnectedListener);
+        newWeb3Auth.on(ADAPTER_EVENTS.CONNECTING, connectingListener);
+        newWeb3Auth.on(ADAPTER_EVENTS.ERRORED, errorListener);
+      }
+    }, {
+      immediate: true
+    });
+    provide(Web3AuthContextKey, {
+      web3Auth,
+      isConnected,
+      isInitialized,
+      provider,
+      userInfo,
+      isMFAEnabled,
+      status,
+      getPlugin,
+      connectTo,
+      enableMFA,
+      manageMFA,
+      logout,
+      addAndSwitchChain,
+      addChain,
+      addPlugin,
+      authenticateUser,
+      switchChain,
+      isInitializing,
+      isConnecting,
+      initError,
+      connectError
+    });
+  },
+  render() {
+    var _this$$slots$default;
+    return h((_this$$slots$default = this.$slots.default) !== null && _this$$slots$default !== void 0 ? _this$$slots$default : "");
+  }
+});
+
+export { Web3AuthProvider };

package/dist/lib.esm/vue/no-modal/composables/useWeb3Auth.js

@@ -0,0 +1,11 @@
+import { inject } from 'vue';
+import { Web3AuthContextKey } from '../../../base/composables/index.js';
+import { WalletInitializationError } from '../../../base/errors/index.js';
+
+const useWeb3Auth = () => {
+  const context = inject(Web3AuthContextKey);
+  if (!context) throw WalletInitializationError.fromCode(1000, "usage of `useWeb3Auth` not wrapped in `Web3AuthProvider`.");
+  return context;
+};
+
+export { useWeb3Auth };

package/dist/lib.esm/vue/wallet-services-plugin/WalletServicesProvider.js

@@ -0,0 +1,84 @@
+import { defineComponent, h, inject, ref, watch, provide } from 'vue';
+import { Web3AuthContextKey } from '../../base/composables/index.js';
+import { WalletServicesContextKey } from './context.js';
+import { WalletServicesPluginError } from '../../base/plugin/errors.js';
+import { EVM_PLUGINS, PLUGIN_EVENTS } from '../../base/plugin/IPlugin.js';
+
+const WalletServicesProvider = defineComponent({
+  name: "WalletServicesProvider",
+  setup() {
+    const web3AuthContext = inject(Web3AuthContextKey);
+    if (!web3AuthContext) throw WalletServicesPluginError.fromCode(1000, "`WalletServicesProvider` must be wrapped by `Web3AuthProvider`");
+    const {
+      getPlugin,
+      isInitialized,
+      isConnected
+    } = web3AuthContext;
+    const walletServicesPlugin = ref(null);
+    const isPluginConnected = ref(false);
+    watch(isInitialized, newIsInitialized => {
+      if (newIsInitialized) {
+        const plugin = getPlugin(EVM_PLUGINS.WALLET_SERVICES);
+        walletServicesPlugin.value = plugin;
+      }
+    });
+    watch(isConnected, newIsConnected => {
+      if (newIsConnected) {
+        const plugin = getPlugin(EVM_PLUGINS.WALLET_SERVICES);
+        if (!walletServicesPlugin.value) walletServicesPlugin.value = plugin;
+      }
+    });
+    watch(walletServicesPlugin, (newWalletServicesPlugin, prevWalletServicesPlugin) => {
+      const connectedListener = () => {
+        isPluginConnected.value = true;
+      };
+      const disconnectedListener = () => {
+        isPluginConnected.value = false;
+      };
+
+      // unregister previous listeners
+      if (prevWalletServicesPlugin && newWalletServicesPlugin !== prevWalletServicesPlugin) {
+        prevWalletServicesPlugin.off(PLUGIN_EVENTS.CONNECTED, connectedListener);
+        prevWalletServicesPlugin.off(PLUGIN_EVENTS.DISCONNECTED, disconnectedListener);
+      }
+      if (newWalletServicesPlugin && newWalletServicesPlugin !== prevWalletServicesPlugin) {
+        newWalletServicesPlugin.on(PLUGIN_EVENTS.CONNECTED, connectedListener);
+        newWalletServicesPlugin.on(PLUGIN_EVENTS.DISCONNECTED, disconnectedListener);
+      }
+    });
+    const showWalletConnectScanner = async showWalletConnectScannerParams => {
+      if (!walletServicesPlugin.value) throw WalletServicesPluginError.notInitialized();
+      if (!isPluginConnected.value) throw WalletServicesPluginError.walletPluginNotConnected();
+      return walletServicesPlugin.value.showWalletConnectScanner(showWalletConnectScannerParams);
+    };
+    const showWalletUI = async showWalletUiParams => {
+      if (!walletServicesPlugin.value) throw WalletServicesPluginError.notInitialized();
+      if (!isPluginConnected.value) throw WalletServicesPluginError.walletPluginNotConnected();
+      return walletServicesPlugin.value.showWalletUi(showWalletUiParams);
+    };
+    const showCheckout = async showCheckoutParams => {
+      if (!walletServicesPlugin.value) throw WalletServicesPluginError.notInitialized();
+      if (!isPluginConnected.value) throw WalletServicesPluginError.walletPluginNotConnected();
+      return walletServicesPlugin.value.showCheckout(showCheckoutParams);
+    };
+    const showSwap = async showSwapParams => {
+      if (!walletServicesPlugin.value) throw WalletServicesPluginError.notInitialized();
+      if (!isPluginConnected.value) throw WalletServicesPluginError.walletPluginNotConnected();
+      return walletServicesPlugin.value.showSwap(showSwapParams);
+    };
+    provide(WalletServicesContextKey, {
+      plugin: walletServicesPlugin,
+      isPluginConnected,
+      showWalletConnectScanner,
+      showCheckout,
+      showWalletUI,
+      showSwap
+    });
+  },
+  render() {
+    var _this$$slots$default;
+    return h((_this$$slots$default = this.$slots.default) !== null && _this$$slots$default !== void 0 ? _this$$slots$default : "");
+  }
+});
+
+export { WalletServicesProvider };

package/dist/lib.esm/vue/wallet-services-plugin/composables/useWalletServicesPlugin.js

@@ -0,0 +1,11 @@
+import { inject } from 'vue';
+import { WalletServicesContextKey } from '../context.js';
+import { WalletServicesPluginError } from '../../../base/plugin/errors.js';
+
+const useWalletServicesPlugin = () => {
+  const context = inject(WalletServicesContextKey);
+  if (!context) throw WalletServicesPluginError.fromCode(1000, "usage of `useWalletServicesPlugin` not wrapped in `WalletServicesProvider`.");
+  return context;
+};
+
+export { useWalletServicesPlugin };