@web3auth/modal 9.5.4 → 10.0.0-alpha.0

package/dist/lib.cjs/packages/modal/src/ui/loginModal.js

@@ -0,0 +1,309 @@
+'use strict';
+
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
+require('./css/web3auth.css.js');
+var auth = require('@web3auth/auth');
+var noModal = require('@web3auth/no-modal');
+var client = require('react-dom/client');
+var Modal = require('./components/Modal.js');
+var ThemeContext = require('./context/ThemeContext.js');
+var interfaces = require('./interfaces.js');
+var localeImport = require('./localeImport.js');
+var utils = require('./utils.js');
+var jsxRuntime = require('react/jsx-runtime');
+
+function createWrapper(parentZIndex) {
+  const existingWrapper = document.getElementById("w3a-parent-container");
+  if (existingWrapper) existingWrapper.remove();
+  const parent = document.createElement("section");
+  parent.classList.add("w3a-parent-container");
+  parent.setAttribute("id", "w3a-parent-container");
+  parent.style.zIndex = parentZIndex;
+  parent.style.position = "relative";
+  const wrapper = document.createElement("section");
+  wrapper.setAttribute("id", "w3a-container");
+  parent.appendChild(wrapper);
+  document.body.appendChild(parent);
+  return wrapper;
+}
+class LoginModal extends auth.SafeEventEmitter {
+  constructor(_uiConfig) {
+    super();
+    _defineProperty(this, "uiConfig", void 0);
+    _defineProperty(this, "stateEmitter", void 0);
+    _defineProperty(this, "chainNamespace", void 0);
+    _defineProperty(this, "walletRegistry", void 0);
+    _defineProperty(this, "initModal", async () => {
+      const darkState = {
+        isDark: this.isDark
+      };
+      const useLang = this.uiConfig.defaultLanguage || auth.LANGUAGES.en;
+
+      // Load new language resource
+
+      if (useLang === auth.LANGUAGES.de) {
+        Promise.resolve().then(function () { return require('./i18n/german.json.js'); }).then(messages => {
+          localeImport.addResourceBundle(useLang, "translation", messages.default);
+          return localeImport.changeLanguage(useLang);
+        }).catch(error => {
+          noModal.log.error(error);
+        });
+      } else if (useLang === auth.LANGUAGES.ja) {
+        Promise.resolve().then(function () { return require('./i18n/japanese.json.js'); }).then(messages => {
+          localeImport.addResourceBundle(useLang, "translation", messages.default);
+          return localeImport.changeLanguage(useLang);
+        }).catch(error => {
+          noModal.log.error(error);
+        });
+      } else if (useLang === auth.LANGUAGES.ko) {
+        Promise.resolve().then(function () { return require('./i18n/korean.json.js'); }).then(messages => {
+          localeImport.addResourceBundle(useLang, "translation", messages.default);
+          return localeImport.changeLanguage(useLang);
+        }).catch(error => {
+          noModal.log.error(error);
+        });
+      } else if (useLang === auth.LANGUAGES.zh) {
+        Promise.resolve().then(function () { return require('./i18n/mandarin.json.js'); }).then(messages => {
+          localeImport.addResourceBundle(useLang, "translation", messages.default);
+          return localeImport.changeLanguage(useLang);
+        }).catch(error => {
+          noModal.log.error(error);
+        });
+      } else if (useLang === auth.LANGUAGES.es) {
+        Promise.resolve().then(function () { return require('./i18n/spanish.json.js'); }).then(messages => {
+          localeImport.addResourceBundle(useLang, "translation", messages.default);
+          return localeImport.changeLanguage(useLang);
+        }).catch(error => {
+          noModal.log.error(error);
+        });
+      } else if (useLang === auth.LANGUAGES.fr) {
+        Promise.resolve().then(function () { return require('./i18n/french.json.js'); }).then(messages => {
+          localeImport.addResourceBundle(useLang, "translation", messages.default);
+          return localeImport.changeLanguage(useLang);
+        }).catch(error => {
+          noModal.log.error(error);
+        });
+      } else if (useLang === auth.LANGUAGES.pt) {
+        Promise.resolve().then(function () { return require('./i18n/portuguese.json.js'); }).then(messages => {
+          localeImport.addResourceBundle(useLang, "translation", messages.default);
+          return localeImport.changeLanguage(useLang);
+        }).catch(error => {
+          noModal.log.error(error);
+        });
+      } else if (useLang === auth.LANGUAGES.nl) {
+        Promise.resolve().then(function () { return require('./i18n/dutch.json.js'); }).then(messages => {
+          localeImport.addResourceBundle(useLang, "translation", messages.default);
+          return localeImport.changeLanguage(useLang);
+        }).catch(error => {
+          noModal.log.error(error);
+        });
+      } else if (useLang === auth.LANGUAGES.tr) {
+        Promise.resolve().then(function () { return require('./i18n/turkish.json.js'); }).then(messages => {
+          localeImport.addResourceBundle(useLang, "translation", messages.default);
+          return localeImport.changeLanguage(useLang);
+        }).catch(error => {
+          noModal.log.error(error);
+        });
+      } else if (useLang === auth.LANGUAGES.en) {
+        Promise.resolve().then(function () { return require('./i18n/english.json.js'); }).then(messages => {
+          localeImport.addResourceBundle(useLang, "translation", messages.default);
+          return localeImport.changeLanguage(useLang);
+        }).catch(error => {
+          noModal.log.error(error);
+        });
+      }
+      return new Promise(resolve => {
+        var _this$uiConfig;
+        this.stateEmitter.once("MOUNTED", () => {
+          noModal.log.info("rendered");
+          this.setState({
+            status: interfaces.MODAL_STATUS.INITIALIZED
+          });
+          return resolve();
+        });
+        const container = createWrapper(this.uiConfig.modalZIndex);
+        if (darkState.isDark) {
+          container.classList.add("w3a--dark");
+        } else {
+          container.classList.remove("w3a--dark");
+        }
+        const root = client.createRoot(container);
+        root.render(/*#__PURE__*/jsxRuntime.jsx(ThemeContext.ThemedContext.Provider, {
+          value: darkState,
+          children: /*#__PURE__*/jsxRuntime.jsx(Modal, {
+            closeModal: this.closeModal,
+            stateListener: this.stateEmitter,
+            handleShowExternalWallets: this.handleShowExternalWallets,
+            handleExternalWalletClick: this.handleExternalWalletClick,
+            handleSocialLoginClick: this.handleSocialLoginClick,
+            appLogo: darkState.isDark ? this.uiConfig.logoDark : this.uiConfig.logoLight,
+            appName: this.uiConfig.appName,
+            chainNamespace: this.chainNamespace,
+            walletRegistry: this.walletRegistry
+          })
+        }));
+        if ((_this$uiConfig = this.uiConfig) !== null && _this$uiConfig !== void 0 && _this$uiConfig.theme) {
+          const rootElement = document.getElementById("w3a-parent-container");
+          auth.applyWhiteLabelTheme(rootElement, this.uiConfig.theme);
+        }
+      });
+    });
+    _defineProperty(this, "addSocialLogins", (adapter, loginMethods, loginMethodsOrder, uiConfig) => {
+      this.setState({
+        socialLoginsConfig: {
+          adapter,
+          loginMethods,
+          loginMethodsOrder,
+          uiConfig
+        }
+      });
+      noModal.log.info("addSocialLogins", adapter, loginMethods, loginMethodsOrder, uiConfig);
+    });
+    _defineProperty(this, "addWalletLogins", (externalWalletsConfig, options) => {
+      this.setState({
+        externalWalletsConfig,
+        externalWalletsInitialized: true,
+        showExternalWalletsOnly: !!(options !== null && options !== void 0 && options.showExternalWalletsOnly),
+        externalWalletsVisibility: true
+      });
+    });
+    _defineProperty(this, "open", () => {
+      this.setState({
+        modalVisibility: true
+      });
+      this.emit(interfaces.LOGIN_MODAL_EVENTS.MODAL_VISIBILITY, true);
+    });
+    _defineProperty(this, "closeModal", () => {
+      this.setState({
+        modalVisibility: false,
+        externalWalletsVisibility: false
+      });
+      this.emit(interfaces.LOGIN_MODAL_EVENTS.MODAL_VISIBILITY, false);
+    });
+    _defineProperty(this, "initExternalWalletContainer", () => {
+      this.setState({
+        hasExternalWallets: true
+      });
+    });
+    _defineProperty(this, "handleShowExternalWallets", status => {
+      this.emit(interfaces.LOGIN_MODAL_EVENTS.INIT_EXTERNAL_WALLETS, {
+        externalWalletsInitialized: status
+      });
+    });
+    _defineProperty(this, "handleExternalWalletClick", params => {
+      noModal.log.info("external wallet clicked", params);
+      const {
+        adapter
+      } = params;
+      this.emit(interfaces.LOGIN_MODAL_EVENTS.LOGIN, {
+        adapter
+      });
+    });
+    _defineProperty(this, "handleSocialLoginClick", params => {
+      noModal.log.info("social login clicked", params);
+      const {
+        adapter,
+        loginParams
+      } = params;
+      this.emit(interfaces.LOGIN_MODAL_EVENTS.LOGIN, {
+        adapter,
+        loginParams: {
+          loginProvider: loginParams.loginProvider,
+          login_hint: loginParams.login_hint,
+          name: loginParams.name
+        }
+      });
+    });
+    _defineProperty(this, "setState", newState => {
+      this.stateEmitter.emit("STATE_UPDATED", newState);
+    });
+    _defineProperty(this, "updateWalletConnect", walletConnectUri => {
+      if (!walletConnectUri) return;
+      this.setState({
+        walletConnectUri
+      });
+    });
+    _defineProperty(this, "handleAdapterData", adapterData => {
+      if (adapterData.adapterName === noModal.WALLET_ADAPTERS.WALLET_CONNECT_V2) {
+        const walletConnectData = adapterData.data;
+        this.updateWalletConnect(walletConnectData.uri);
+      }
+    });
+    _defineProperty(this, "subscribeCoreEvents", listener => {
+      listener.on(noModal.ADAPTER_EVENTS.CONNECTING, data => {
+        noModal.log.info("connecting with adapter", data);
+        // don't show loader in case of wallet connect, because currently it listens for incoming for incoming
+        // connections without any user interaction.
+        if ((data === null || data === void 0 ? void 0 : data.adapter) !== noModal.WALLET_ADAPTERS.WALLET_CONNECT_V2) {
+          // const provider = data?.loginProvider || "";
+
+          this.setState({
+            status: interfaces.MODAL_STATUS.CONNECTING
+          });
+        }
+      });
+      listener.on(noModal.ADAPTER_EVENTS.CONNECTED, data => {
+        noModal.log.debug("connected with adapter", data);
+        // only show success if not being reconnected again.
+        if (!data.reconnected) {
+          this.setState({
+            status: interfaces.MODAL_STATUS.CONNECTED,
+            modalVisibility: true,
+            postLoadingMessage: "modal.post-loading.connected"
+          });
+        } else {
+          this.setState({
+            status: interfaces.MODAL_STATUS.CONNECTED
+          });
+        }
+      });
+      // TODO: send adapter name in error
+      listener.on(noModal.ADAPTER_EVENTS.ERRORED, error => {
+        noModal.log.error("error", error, error.message);
+        if (error.code === 5000) {
+          if (this.uiConfig.displayErrorsOnModal) this.setState({
+            modalVisibility: true,
+            postLoadingMessage: error.message || "modal.post-loading.something-wrong",
+            status: interfaces.MODAL_STATUS.ERRORED
+          });else this.setState({
+            modalVisibility: false
+          });
+        } else {
+          this.setState({
+            modalVisibility: true,
+            status: interfaces.MODAL_STATUS.INITIALIZED
+          });
+        }
+      });
+      listener.on(noModal.ADAPTER_EVENTS.DISCONNECTED, () => {
+        this.setState({
+          status: interfaces.MODAL_STATUS.INITIALIZED,
+          externalWalletsVisibility: false
+        });
+        // this.toggleMessage("");
+      });
+      listener.on(noModal.ADAPTER_EVENTS.ADAPTER_DATA_UPDATED, adapterData => {
+        this.handleAdapterData(adapterData);
+      });
+    });
+    this.uiConfig = _uiConfig;
+    if (!_uiConfig.logoDark) this.uiConfig.logoDark = interfaces.DEFAULT_LOGO_DARK;
+    if (!_uiConfig.logoLight) this.uiConfig.logoLight = interfaces.DEFAULT_LOGO_LIGHT;
+    if (!_uiConfig.mode) this.uiConfig.mode = "light";
+    if (!_uiConfig.modalZIndex) this.uiConfig.modalZIndex = "99998";
+    if (typeof _uiConfig.displayErrorsOnModal === "undefined") this.uiConfig.displayErrorsOnModal = true;
+    if (!_uiConfig.appName) this.uiConfig.appName = "Web3Auth";
+    if (!_uiConfig.loginGridCol) this.uiConfig.loginGridCol = 3;
+    if (!_uiConfig.primaryButton) this.uiConfig.primaryButton = "socialLogin";
+    if (!_uiConfig.defaultLanguage) this.uiConfig.defaultLanguage = utils.getUserLanguage(_uiConfig.defaultLanguage);
+    this.stateEmitter = new auth.SafeEventEmitter();
+    this.chainNamespace = _uiConfig.chainNamespace;
+    this.walletRegistry = _uiConfig.walletRegistry;
+    this.subscribeCoreEvents(this.uiConfig.adapterListener);
+  }
+  get isDark() {
+    return this.uiConfig.mode === "dark" || this.uiConfig.mode === "auto" && window.matchMedia("(prefers-color-scheme: dark)").matches;
+  }
+}
+
+exports.LoginModal = LoginModal;

package/dist/lib.cjs/packages/modal/src/ui/utils.js

@@ -0,0 +1,71 @@
+'use strict';
+
+var _objectSpread = require('@babel/runtime/helpers/objectSpread2');
+var httpHelpers = require('@toruslabs/http-helpers');
+var auth = require('@web3auth/auth');
+var noModal = require('@web3auth/no-modal');
+var config = require('./config.js');
+
+const getAdapterSocialLogins = (adapterName, loginMethodsConfig = {}) => {
+  const finalLoginMethodsConfig = {};
+  if (adapterName === noModal.WALLET_ADAPTERS.AUTH) {
+    config.AUTH_PROVIDERS.forEach(loginMethod => {
+      const currentLoginMethodConfig = loginMethodsConfig[loginMethod] || {
+        name: config.AUTH_PROVIDERS_NAMES[loginMethod],
+        showOnMobile: true,
+        showOnModal: true,
+        showOnDesktop: true
+      };
+      finalLoginMethodsConfig[loginMethod] = _objectSpread({}, currentLoginMethodConfig);
+    });
+    noModal.log.debug("auth login method ui config", finalLoginMethodsConfig);
+  } else {
+    throw noModal.WalletInitializationError.invalidParams(`${adapterName} is not a valid adapter`);
+  }
+  return finalLoginMethodsConfig;
+};
+const passwordlessBackendUrl = "https://api-passwordless.web3auth.io";
+const getUserCountry = async () => {
+  try {
+    const result = await httpHelpers.get(`${passwordlessBackendUrl}/api/v3/user/location`);
+    if (result && result.data.country) return {
+      country: result.data.country,
+      dialCode: result.data.dial_code
+    };
+    return null;
+  } catch (error) {
+    noModal.log.error("error getting user country", error);
+    return null;
+  }
+};
+const validatePhoneNumber = async phoneNumber => {
+  try {
+    const result = await httpHelpers.post(`${passwordlessBackendUrl}/api/v3/phone_number/validate`, {
+      phone_number: phoneNumber
+    });
+    if (result && result.success) return result.parsed_number;
+    return false;
+  } catch (error) {
+    noModal.log.error("error validating phone number", error);
+    if (error.status === 400) {
+      return false;
+    }
+    // sending true because we don't want the user to be stuck on a flow
+    // if there is an error with the api or something went wrong.
+    return true;
+  }
+};
+const getUserLanguage = defaultLanguage => {
+  let userLanguage = defaultLanguage;
+  if (!userLanguage) {
+    const browserLanguage = typeof window !== "undefined" ? window.navigator.userLanguage || window.navigator.language || "en-US" : "en-US";
+    userLanguage = browserLanguage.split("-")[0];
+  }
+  return Object.prototype.hasOwnProperty.call(auth.LANGUAGE_MAP, userLanguage) ? userLanguage : auth.LANGUAGES.en;
+};
+
+exports.getAdapterSocialLogins = getAdapterSocialLogins;
+exports.getUserCountry = getUserCountry;
+exports.getUserLanguage = getUserLanguage;
+exports.passwordlessBackendUrl = passwordlessBackendUrl;
+exports.validatePhoneNumber = validatePhoneNumber;

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

@@ -0,0 +1,234 @@
+'use strict';
+
+var noModal = require('@web3auth/no-modal');
+var vue = require('vue');
+var modalManager = require('../modalManager.js');
+
+const Web3AuthProvider = vue.defineComponent({
+  name: "Web3AuthProvider",
+  props: {
+    config: {
+      type: Object,
+      required: true
+    }
+  },
+  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 addPlugin = plugin => {
+      if (!web3Auth.value) throw noModal.WalletInitializationError.notReady();
+      return web3Auth.value.addPlugin(plugin);
+    };
+    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 addAndSwitchChain = async chainConfig => {
+      if (!web3Auth.value) throw noModal.WalletInitializationError.notReady();
+      await web3Auth.value.addChain(chainConfig);
+      await web3Auth.value.switchChain({
+        chainId: chainConfig.chainId
+      });
+    };
+    const authenticateUser = async () => {
+      if (!web3Auth.value) throw noModal.WalletInitializationError.notReady();
+      return web3Auth.value.authenticateUser();
+    };
+    const addChain = async chainConfig => {
+      if (!web3Auth.value) throw noModal.WalletInitializationError.notReady();
+      return web3Auth.value.addChain(chainConfig);
+    };
+    const switchChain = chainParams => {
+      if (!web3Auth.value) throw noModal.WalletInitializationError.notReady();
+      return web3Auth.value.switchChain(chainParams);
+    };
+    vue.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 modalManager.Web3Auth(web3AuthOptions);
+      if (adapters.length) adapters.map(adapter => web3AuthInstance.configureAdapter(adapter));
+      if (plugins.length) {
+        plugins.forEach(plugin => {
+          web3AuthInstance.addPlugin(plugin);
+        });
+      }
+      web3Auth.value = web3AuthInstance;
+    }, {
+      immediate: true
+    });
+    vue.watch(web3Auth, async newWeb3Auth => {
+      if (newWeb3Auth) {
+        try {
+          initError.value = null;
+          isInitializing.value = true;
+          const {
+            modalConfig,
+            hideWalletDiscovery
+          } = props.config;
+          if (modalConfig) {
+            await newWeb3Auth.initModal({
+              modalConfig,
+              hideWalletDiscovery
+            });
+          } else {
+            await newWeb3Auth.initModal();
+          }
+        } catch (error) {
+          initError.value = error;
+        } finally {
+          isInitializing.value = false;
+        }
+      }
+    }, {
+      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;
+      };
+      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 === noModal.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 = noModal.ADAPTER_EVENTS.ERRORED;
+      };
+
+      // unregister previous listeners
+      if (prevWeb3Auth && newWeb3Auth !== prevWeb3Auth) {
+        prevWeb3Auth.off(noModal.ADAPTER_EVENTS.NOT_READY, notReadyListener);
+        prevWeb3Auth.off(noModal.ADAPTER_EVENTS.READY, readyListener);
+        prevWeb3Auth.off(noModal.ADAPTER_EVENTS.CONNECTED, connectedListener);
+        prevWeb3Auth.off(noModal.ADAPTER_EVENTS.DISCONNECTED, disconnectedListener);
+        prevWeb3Auth.off(noModal.ADAPTER_EVENTS.CONNECTING, connectingListener);
+        prevWeb3Auth.off(noModal.ADAPTER_EVENTS.ERRORED, errorListener);
+      }
+      if (newWeb3Auth && newWeb3Auth !== prevWeb3Auth) {
+        status.value = newWeb3Auth.status;
+        // web3Auth is initialized here.
+        newWeb3Auth.on(noModal.ADAPTER_EVENTS.NOT_READY, notReadyListener);
+        newWeb3Auth.on(noModal.ADAPTER_EVENTS.READY, readyListener);
+        newWeb3Auth.on(noModal.ADAPTER_EVENTS.CONNECTED, connectedListener);
+        newWeb3Auth.on(noModal.ADAPTER_EVENTS.DISCONNECTED, disconnectedListener);
+        newWeb3Auth.on(noModal.ADAPTER_EVENTS.CONNECTING, connectingListener);
+        newWeb3Auth.on(noModal.ADAPTER_EVENTS.ERRORED, errorListener);
+      }
+    }, {
+      immediate: true
+    });
+    vue.provide(noModal.Web3AuthContextKey, {
+      web3Auth,
+      isConnected,
+      isInitialized,
+      provider,
+      userInfo,
+      isMFAEnabled,
+      status,
+      getPlugin,
+      connect,
+      enableMFA,
+      manageMFA,
+      logout,
+      addAndSwitchChain,
+      addChain,
+      addPlugin,
+      authenticateUser,
+      switchChain,
+      isInitializing,
+      isConnecting,
+      initError,
+      connectError
+    });
+  },
+  render() {
+    var _this$$slots$default;
+    return vue.h((_this$$slots$default = this.$slots.default) !== null && _this$$slots$default !== void 0 ? _this$$slots$default : "");
+  }
+});
+
+exports.Web3AuthProvider = Web3AuthProvider;

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

@@ -0,0 +1,12 @@
+'use strict';
+
+var noModal = require('@web3auth/no-modal');
+var vue = require('vue');
+
+const useWeb3Auth = () => {
+  const context = vue.inject(noModal.Web3AuthContextKey);
+  if (!context) throw noModal.WalletInitializationError.fromCode(1000, "usage of `useWeb3Auth` not wrapped in `Web3AuthProvider`.");
+  return context;
+};
+
+exports.useWeb3Auth = useWeb3Auth;

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

@@ -0,0 +1,9 @@
+'use strict';
+
+var useWeb3Auth = require('./composables/useWeb3Auth.js');
+var Web3AuthProvider = require('./Web3AuthProvider.js');
+
+
+
+exports.useWeb3Auth = useWeb3Auth.useWeb3Auth;
+exports.Web3AuthProvider = Web3AuthProvider.Web3AuthProvider;

package/dist/lib.esm/node_modules/style-inject/dist/style-inject.es.js

@@ -0,0 +1,26 @@
+function styleInject(css, ref) {
+  if (ref === void 0) ref = {};
+  var insertAt = ref.insertAt;
+  if (!css || typeof document === 'undefined') {
+    return;
+  }
+  var head = document.head || document.getElementsByTagName('head')[0];
+  var style = document.createElement('style');
+  style.type = 'text/css';
+  if (insertAt === 'top') {
+    if (head.firstChild) {
+      head.insertBefore(style, head.firstChild);
+    } else {
+      head.appendChild(style);
+    }
+  } else {
+    head.appendChild(style);
+  }
+  if (style.styleSheet) {
+    style.styleSheet.cssText = css;
+  } else {
+    style.appendChild(document.createTextNode(css));
+  }
+}
+
+export { styleInject as default };

package/dist/lib.esm/{config.js → packages/modal/src/config.js}

@@ -1,4 +1,4 @@
-import { CHAIN_NAMESPACES, SOLANA_ADAPTERS, EVM_ADAPTERS } from '@web3auth/base';
+import { SOLANA_ADAPTERS, CHAIN_NAMESPACES, EVM_ADAPTERS } from '@web3auth/no-modal';
 
 const defaultSolanaDappModalConfig = {
   chainNamespace: CHAIN_NAMESPACES.SOLANA,

package/dist/lib.esm/{index.js → packages/modal/src/index.js}

@@ -1,2 +1,3 @@
 export { defaultEvmDappModalConfig, defaultEvmWalletModalConfig, defaultOtherModalConfig, defaultSolanaDappModalConfig, defaultSolanaWalletModalConfig, walletRegistryUrl } from './config.js';
 export { Web3Auth } from './modalManager.js';
+export * from '@web3auth/no-modal';