@web3auth/modal 10.15.0 → 11.0.0-beta.0

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

@@ -10,10 +10,10 @@ var noModal = require('@web3auth/no-modal');
 var Bowser = require('bowser');
 var client = require('react-dom/client');
 var utils = require('../utils.js');
-var Widget = require('./components/Widget/Widget.js');
 var constants = require('./constants.js');
+var Widget = require('./containers/Widget/Widget.js');
 var AnalyticsContext = require('./context/AnalyticsContext.js');
-var ThemeContext = require('./context/ThemeContext.js');
+var WidgetContext = require('./context/WidgetContext.js');
 var interfaces = require('./interfaces.js');
 var localeImport = require('./localeImport.js');
 var utils$1 = require('./utils.js');
@@ -40,15 +40,11 @@ class LoginModal {
   constructor(_uiConfig, callbacks) {
     _defineProperty(this, "uiConfig", void 0);
     _defineProperty(this, "stateEmitter", void 0);
-    _defineProperty(this, "chainNamespaces", void 0);
-    _defineProperty(this, "walletRegistry", void 0);
     _defineProperty(this, "callbacks", void 0);
     _defineProperty(this, "externalWalletsConfig", void 0);
     _defineProperty(this, "analytics", void 0);
+    _defineProperty(this, "modalStatus", interfaces.MODAL_STATUS.INITIALIZED);
     _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) {
@@ -127,10 +123,7 @@ class LoginModal {
         this.stateEmitter.once("MOUNTED", () => {
           noModal.log.info("rendered");
           this.setState({
-            status: interfaces.MODAL_STATUS.INITIALIZED,
-            web3authClientId: this.uiConfig.web3authClientId,
-            web3authNetwork: this.uiConfig.web3authNetwork,
-            authBuildEnv: this.uiConfig.authBuildEnv
+            status: interfaces.MODAL_STATUS.INITIALIZED
           });
           return resolve();
         });
@@ -142,32 +135,29 @@ class LoginModal {
           throw noModal.WalletInitializationError.invalidParams(`Invalid widget type: ${this.uiConfig.widgetType}`);
         }
         const container = document.getElementById("w3a-parent-container");
-        if (darkState.isDark) {
+        if (this.isDark) {
           container.classList.add("w3a--dark");
         } else {
           container.classList.remove("w3a--dark");
         }
         const root = client.createRoot(container);
-        root.render(jsxRuntime.jsx(ThemeContext.ThemedContext.Provider, {
-          value: darkState,
-          children: jsxRuntime.jsx(AnalyticsContext.AnalyticsContext.Provider, {
-            value: {
-              analytics: this.analytics
-            },
+        root.render(jsxRuntime.jsx(AnalyticsContext.AnalyticsContext.Provider, {
+          value: {
+            analytics: this.analytics
+          },
+          children: jsxRuntime.jsx(WidgetContext.WidgetProvider, {
+            isDark: this.isDark,
+            deviceDetails: this.deviceDetails,
+            uiConfig: this.uiConfig,
+            handleShowExternalWallets: this.handleShowExternalWallets,
+            handleExternalWalletClick: this.handleExternalWalletClick,
+            handleMobileVerifyConnect: this.handleMobileVerifyConnect,
+            handleSocialLoginClick: this.handleSocialLoginClick,
+            handleAcceptConsent: this.handleAcceptConsent,
+            handleDeclineConsent: this.handleDeclineConsent,
+            closeModal: this.closeModal,
             children: jsxRuntime.jsx(Widget, {
-              stateListener: this.stateEmitter,
-              appLogo: darkState.isDark ? this.uiConfig.logoDark : this.uiConfig.logoLight,
-              appName: this.uiConfig.appName,
-              chainNamespaces: this.chainNamespaces,
-              walletRegistry: this.walletRegistry,
-              deviceDetails: this.deviceDetails,
-              handleShowExternalWallets: this.handleShowExternalWallets,
-              handleExternalWalletClick: this.handleExternalWalletClick,
-              handleMobileVerifyConnect: this.handleMobileVerifyConnect,
-              handleSocialLoginClick: this.handleSocialLoginClick,
-              closeModal: this.closeModal,
-              uiConfig: this.uiConfig,
-              initialAuthenticationMode: this.uiConfig.initialAuthenticationMode
+              stateListener: this.stateEmitter
             })
           })
         }));
@@ -185,19 +175,18 @@ class LoginModal {
         }
       });
     });
-    _defineProperty(this, "addSocialLogins", (connector, loginMethods, loginMethodsOrder, uiConfig) => {
+    _defineProperty(this, "addSocialLogins", (loginMethods, loginMethodsOrder, uiConfig) => {
       this.setState({
         socialLoginsConfig: {
-          connector,
           loginMethods,
           loginMethodsOrder,
           uiConfig
         }
       });
-      noModal.log.info("addSocialLogins", connector, loginMethods, loginMethodsOrder, uiConfig);
+      noModal.log.info("addSocialLogins", loginMethods, loginMethodsOrder, uiConfig);
     });
     _defineProperty(this, "addWalletLogins", (externalWalletsConfig, options) => {
-      this.externalWalletsConfig = externalWalletsConfig;
+      this.externalWalletsConfig = _objectSpread(_objectSpread({}, this.externalWalletsConfig), externalWalletsConfig);
       const isMMAvailable = !!externalWalletsConfig[noModal.WALLET_CONNECTORS.METAMASK];
       this.setState({
         externalWalletsConfig,
@@ -207,13 +196,13 @@ class LoginModal {
       });
     });
     _defineProperty(this, "open", () => {
-      var _this$analytics, _this$walletRegistry, _this$walletRegistry2;
+      var _this$analytics, _this$uiConfig$wallet, _this$uiConfig$wallet2;
       this.setState({
         modalVisibility: true
       });
       (_this$analytics = this.analytics) === null || _this$analytics === void 0 || _this$analytics.track(noModal.ANALYTICS_EVENTS.LOGIN_MODAL_OPENED, _objectSpread(_objectSpread({
-        chain_namespaces: this.chainNamespaces,
-        wallet_registry_count: Object.keys((_this$walletRegistry = this.walletRegistry) === null || _this$walletRegistry === void 0 ? void 0 : _this$walletRegistry.default).length + Object.keys((_this$walletRegistry2 = this.walletRegistry) === null || _this$walletRegistry2 === void 0 ? void 0 : _this$walletRegistry2.others).length,
+        chain_namespaces: this.uiConfig.chainNamespaces,
+        wallet_registry_count: Object.keys((_this$uiConfig$wallet = this.uiConfig.walletRegistry) === null || _this$uiConfig$wallet === void 0 ? void 0 : _this$uiConfig$wallet.default).length + Object.keys((_this$uiConfig$wallet2 = this.uiConfig.walletRegistry) === null || _this$uiConfig$wallet2 === void 0 ? void 0 : _this$uiConfig$wallet2.others).length,
         external_wallet_connectors: Object.keys(this.externalWalletsConfig || {})
       }, noModal.getWhitelabelAnalyticsProperties(this.uiConfig)), utils.getLoginModalAnalyticsProperties(this.uiConfig)));
       if (this.callbacks.onModalVisibility) {
@@ -269,27 +258,32 @@ class LoginModal {
         });
       }
     });
+    _defineProperty(this, "handleAcceptConsent", () => {
+      return this.callbacks.onAcceptConsent();
+    });
+    _defineProperty(this, "handleDeclineConsent", () => {
+      return this.callbacks.onDeclineConsent();
+    });
     _defineProperty(this, "handleSocialLoginClick", params => {
       var _this$analytics3;
       noModal.log.info("social login clicked", params);
       const {
-        connector,
         loginParams
       } = params;
       (_this$analytics3 = this.analytics) === null || _this$analytics3 === void 0 || _this$analytics3.track(noModal.ANALYTICS_EVENTS.SOCIAL_LOGIN_SELECTED, {
-        connector,
+        connector: noModal.WALLET_CONNECTORS.AUTH,
         auth_connection: loginParams.authConnection,
         auth_connection_id: loginParams.authConnectionId,
         group_auth_connection_id: loginParams.groupedAuthConnectionId
       });
       if (this.callbacks.onSocialLogin) {
         this.callbacks.onSocialLogin({
-          connector,
           loginParams
         });
       }
     });
     _defineProperty(this, "setState", newState => {
+      if (newState.status) this.modalStatus = newState.status;
       this.stateEmitter.emit("STATE_UPDATED", newState);
     });
     _defineProperty(this, "handleConnectorData", connectorData => {
@@ -325,13 +319,14 @@ class LoginModal {
       });
       listener.on(noModal.CONNECTOR_EVENTS.CONNECTED, data => {
         noModal.log.debug("connected with connector", data);
+        if (data.pendingUserConsent) return;
         // only show success if not being reconnected again.
         if (!data.reconnected && data.loginMode === noModal.LOGIN_MODE.MODAL) {
           this.setState({
             status: interfaces.MODAL_STATUS.CONNECTED,
             modalVisibility: true,
             postLoadingMessage: "modal.post-loading.connected",
-            currentPage: constants.PAGES.LOGIN
+            currentPage: constants.PAGES.LOGIN_OPTIONS
           });
         } else {
           this.setState({
@@ -369,15 +364,42 @@ class LoginModal {
         this.handleConnectorData(connectorData);
       });
       listener.on(noModal.CONNECTOR_EVENTS.AUTHORIZING, () => {
+        if (this.modalStatus === interfaces.MODAL_STATUS.CONSENT_REQUIRING) return;
         this.setState({
           status: interfaces.MODAL_STATUS.AUTHORIZING
         });
       });
       listener.on(noModal.CONNECTOR_EVENTS.AUTHORIZED, () => {
+        if (this.modalStatus === interfaces.MODAL_STATUS.CONSENT_REQUIRING) return;
         this.setState({
           status: interfaces.MODAL_STATUS.AUTHORIZED
         });
       });
+      listener.on(noModal.CONNECTOR_EVENTS.CONSENT_REQUIRING, () => {
+        this.setState({
+          status: interfaces.MODAL_STATUS.CONSENT_REQUIRING,
+          modalVisibility: true
+        });
+      });
+      listener.on(noModal.CONNECTOR_EVENTS.CONSENT_ACCEPTED, data => {
+        if (this.uiConfig.initialAuthenticationMode === noModal.CONNECTOR_INITIAL_AUTHENTICATION_MODE.CONNECT_AND_SIGN) {
+          this.setState({
+            status: interfaces.MODAL_STATUS.AUTHORIZED,
+            modalVisibility: true
+          });
+        } else if (!data.reconnected) {
+          this.setState({
+            status: interfaces.MODAL_STATUS.CONNECTED,
+            modalVisibility: true,
+            postLoadingMessage: "modal.post-loading.connected",
+            currentPage: constants.PAGES.LOGIN_OPTIONS
+          });
+        } else {
+          this.setState({
+            status: interfaces.MODAL_STATUS.CONNECTED
+          });
+        }
+      });
     });
     this.uiConfig = _uiConfig;
     if (!_uiConfig.logoDark) this.uiConfig.logoDark = constants.DEFAULT_LOGO_DARK;
@@ -390,18 +412,27 @@ class LoginModal {
     if (!_uiConfig.primaryButton) this.uiConfig.primaryButton = "socialLogin";
     if (!_uiConfig.defaultLanguage) this.uiConfig.defaultLanguage = utils$1.getUserLanguage(_uiConfig.defaultLanguage);
     if (!_uiConfig.widgetType) this.uiConfig.widgetType = noModal.WIDGET_TYPE.MODAL;
-    if (!_uiConfig.initialAuthenticationMode) this.uiConfig.initialAuthenticationMode = noModal.CONNECTOR_INITIAL_AUTHENTICATION_MODE.CONNECT_ONLY;
+    if (!_uiConfig.initialAuthenticationMode) this.uiConfig.initialAuthenticationMode = noModal.CONNECTOR_INITIAL_AUTHENTICATION_MODE.CONNECT_AND_SIGN;
+    if (!_uiConfig.buttonRadiusType) this.uiConfig.buttonRadiusType = "pill";
+    if (!_uiConfig.logoAlignment) this.uiConfig.logoAlignment = "center";
+    if (typeof _uiConfig.displayInstalledExternalWallets === "undefined") this.uiConfig.displayInstalledExternalWallets = true;
+    if (typeof _uiConfig.displayExternalWalletsCount === "undefined") this.uiConfig.displayExternalWalletsCount = true;
+    if (typeof _uiConfig.hideSuccessScreen === "undefined") this.uiConfig.hideSuccessScreen = false;
+    if (!_uiConfig.privacyPolicy) this.uiConfig.privacyPolicy = "";
+    if (!_uiConfig.tncLink) this.uiConfig.tncLink = "";
     if (_uiConfig.widgetType === noModal.WIDGET_TYPE.EMBED && !_uiConfig.targetId) {
       noModal.log.error("targetId is required for embed widget");
       throw noModal.WalletInitializationError.invalidParams("targetId is required for embed widget");
     }
     this.stateEmitter = new auth.SafeEventEmitter();
-    this.chainNamespaces = _uiConfig.chainNamespaces;
-    this.walletRegistry = _uiConfig.walletRegistry;
     this.callbacks = callbacks;
     this.analytics = _uiConfig.analytics;
     this.subscribeCoreEvents(this.uiConfig.connectorListener);
   }
+  get consentRequired() {
+    var _this$uiConfig$consen;
+    return ((_this$uiConfig$consen = this.uiConfig.consentConfig) === null || _this$uiConfig$consen === void 0 ? void 0 : _this$uiConfig$consen.required) || false;
+  }
   get isDark() {
     return this.uiConfig.mode === "dark" || this.uiConfig.mode === "auto" && window.matchMedia("(prefers-color-scheme: dark)").matches;
   }

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

@@ -10,56 +10,8 @@ const WalletServicesInnerProvider = vue.defineComponent({
   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);
-        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.removeListener(noModal.PLUGIN_EVENTS.CONNECTED, connectedListener);
-        prevWalletServicesPlugin.removeListener(noModal.PLUGIN_EVENTS.DISCONNECTED, disconnectedListener);
-        prevWalletServicesPlugin.removeListener(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
-    });
+    const value = vue$1.useWalletServicesInnerContextValue(web3AuthContext);
+    vue.provide(vue$1.WalletServicesContextKey, value);
   },
   render() {
     var _this$$slots$default;

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

@@ -1,6 +1,7 @@
 'use strict';
 
 var noModal = require('@web3auth/no-modal');
+var vue$1 = require('@web3auth/no-modal/vue');
 var vue = require('vue');
 var modalManager = require('../modalManager.js');
 var WalletServicesInnerProvider = require('./WalletServicesInnerProvider.js');
@@ -14,177 +15,13 @@ const Web3AuthProvider = vue.defineComponent({
     }
   },
   setup(props) {
-    const web3Auth = vue.shallowRef(null);
-    const provider = vue.ref(null);
-    const isMFAEnabled = vue.ref(false);
-    const status = vue.ref(null);
-    const isAuthorized = vue.ref(false);
-    const chainId = vue.ref(null);
-    const chainNamespace = vue.ref(null);
-    const isInitializing = vue.ref(false);
-    const initError = vue.ref(null);
-    const isInitialized = vue.ref(false);
-    const isConnected = vue.ref(false);
-    const getPlugin = name => {
-      if (!web3Auth.value) throw noModal.WalletInitializationError.notReady();
-      return web3Auth.value.getPlugin(name);
-    };
-    const setIsMFAEnabled = isMfaEnabled => {
-      isMFAEnabled.value = isMfaEnabled;
-    };
-    vue.watch(() => props.config, (newConfig, _, onInvalidate) => {
-      const resetHookState = () => {
-        provider.value = null;
-        isMFAEnabled.value = false;
-        isConnected.value = false;
-        isAuthorized.value = false;
-        status.value = null;
-        chainId.value = null;
-        chainNamespace.value = null;
-      };
-      onInvalidate(() => {
-        if (web3Auth.value) {
-          web3Auth.value.cleanup();
-        }
-      });
-      resetHookState();
-      const {
-        web3AuthOptions
-      } = newConfig;
-      const web3AuthInstance = new modalManager.Web3Auth(web3AuthOptions);
-      web3AuthInstance.setAnalyticsProperties({
-        integration_type: noModal.ANALYTICS_INTEGRATION_TYPE.VUE_COMPOSABLES
-      });
-      web3Auth.value = web3AuthInstance;
-    }, {
-      immediate: true
-    });
-    vue.watch(web3Auth, async (newWeb3Auth, _, onInvalidate) => {
-      const controller = new AbortController();
-      // Invalidate the controller here before calling any async methods.
-      onInvalidate(() => {
-        controller.abort();
-      });
-      if (newWeb3Auth) {
-        try {
-          initError.value = null;
-          isInitializing.value = true;
-          await newWeb3Auth.init({
-            signal: controller.signal
-          });
-        } catch (error) {
-          noModal.log.error("Error initializing web3auth", error);
-          initError.value = error;
-        } finally {
-          isInitializing.value = false;
-        }
-      }
-    }, {
-      immediate: true
-    });
-    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.CONNECTOR_STATUS.CONNECTED) {
-          var _web3Auth$value$curre, _web3Auth$value$curre2;
-          if (!isInitialized.value) isInitialized.value = true;
-          isConnected.value = true;
-          provider.value = newWeb3Auth.provider;
-          chainId.value = web3Auth.value.currentChainId;
-          chainNamespace.value = (_web3Auth$value$curre = (_web3Auth$value$curre2 = web3Auth.value.currentChain) === null || _web3Auth$value$curre2 === void 0 ? void 0 : _web3Auth$value$curre2.chainNamespace) !== null && _web3Auth$value$curre !== void 0 ? _web3Auth$value$curre : null;
-        }
-      };
-      const disconnectedListener = () => {
-        status.value = web3Auth.value.status;
-        isConnected.value = false;
-        provider.value = null;
-        isMFAEnabled.value = false;
-        isAuthorized.value = false;
-      };
-      const connectingListener = () => {
-        status.value = web3Auth.value.status;
-      };
-      const errorListener = () => {
-        status.value = web3Auth.value.status;
-      };
-      const authorizedListener = () => {
-        status.value = web3Auth.value.status;
-        if (web3Auth.value.status === noModal.CONNECTOR_STATUS.AUTHORIZED) {
-          isConnected.value = true;
-          isAuthorized.value = true;
-        }
-      };
-      const mfaEnabledListener = () => {
-        isMFAEnabled.value = true;
-      };
-      // unregister previous listeners
-      if (prevWeb3Auth && newWeb3Auth !== prevWeb3Auth) {
-        prevWeb3Auth.removeListener(noModal.CONNECTOR_EVENTS.NOT_READY, notReadyListener);
-        prevWeb3Auth.removeListener(noModal.CONNECTOR_EVENTS.READY, readyListener);
-        prevWeb3Auth.removeListener(noModal.CONNECTOR_EVENTS.CONNECTED, connectedListener);
-        prevWeb3Auth.removeListener(noModal.CONNECTOR_EVENTS.AUTHORIZED, authorizedListener);
-        prevWeb3Auth.removeListener(noModal.CONNECTOR_EVENTS.DISCONNECTED, disconnectedListener);
-        prevWeb3Auth.removeListener(noModal.CONNECTOR_EVENTS.CONNECTING, connectingListener);
-        prevWeb3Auth.removeListener(noModal.CONNECTOR_EVENTS.ERRORED, errorListener);
-        prevWeb3Auth.removeListener(noModal.CONNECTOR_EVENTS.REHYDRATION_ERROR, errorListener);
-        prevWeb3Auth.removeListener(noModal.CONNECTOR_EVENTS.MFA_ENABLED, mfaEnabledListener);
-      }
-      if (newWeb3Auth && newWeb3Auth !== prevWeb3Auth) {
-        status.value = newWeb3Auth.status;
-        // web3Auth is initialized here.
-        newWeb3Auth.on(noModal.CONNECTOR_EVENTS.NOT_READY, notReadyListener);
-        newWeb3Auth.on(noModal.CONNECTOR_EVENTS.READY, readyListener);
-        newWeb3Auth.on(noModal.CONNECTOR_EVENTS.CONNECTED, connectedListener);
-        newWeb3Auth.on(noModal.CONNECTOR_EVENTS.AUTHORIZED, authorizedListener);
-        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.REHYDRATION_ERROR, errorListener);
-        newWeb3Auth.on(noModal.CONNECTOR_EVENTS.MFA_ENABLED, mfaEnabledListener);
-      }
-    }, {
-      immediate: true
-    });
-    // Listen for chain changes on the provider
-    vue.watch(provider, (newProvider, prevProvider) => {
-      const handleChainChange = newChainId => {
-        var _web3Auth$value$curre3, _web3Auth$value;
-        chainId.value = newChainId;
-        chainNamespace.value = (_web3Auth$value$curre3 = (_web3Auth$value = web3Auth.value) === null || _web3Auth$value === void 0 || (_web3Auth$value = _web3Auth$value.currentChain) === null || _web3Auth$value === void 0 ? void 0 : _web3Auth$value.chainNamespace) !== null && _web3Auth$value$curre3 !== void 0 ? _web3Auth$value$curre3 : null;
-      };
-      // unregister previous listener
-      if (prevProvider && newProvider !== prevProvider) {
-        prevProvider.removeListener("chainChanged", handleChainChange);
-      }
-      if (newProvider && newProvider !== prevProvider) {
-        newProvider.on("chainChanged", handleChainChange);
-      }
-    }, {
-      immediate: true
-    });
-    vue.provide(noModal.Web3AuthContextKey, {
-      web3Auth,
-      isConnected,
-      isAuthorized,
-      isInitialized,
-      provider,
-      status,
-      isInitializing,
-      initError,
-      isMFAEnabled,
-      chainId,
-      chainNamespace,
-      getPlugin,
-      setIsMFAEnabled
+    const value = vue$1.useWeb3AuthInnerContextValue({
+      Web3AuthConstructor: modalManager.Web3Auth,
+      watchSource: () => props.config,
+      getWeb3AuthOptions: config => config.web3AuthOptions,
+      createConnectionRef: () => vue.shallowRef(null)
     });
+    vue.provide(noModal.Web3AuthContextKey, value);
   },
   render() {
     var _this$$slots$default;

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

@@ -1,59 +1,57 @@
 'use strict';
 
 var noModal = require('@web3auth/no-modal');
-var vue = require('vue');
+var vue = require('@web3auth/no-modal/vue');
+var vue$1 = require('vue');
 var useWeb3AuthInner = require('./useWeb3AuthInner.js');
 
 const useWeb3AuthConnect = () => {
   const {
-    web3Auth,
-    isConnected
+    web3Auth
   } = useWeb3AuthInner.useWeb3AuthInner();
-  const loading = vue.ref(false);
-  const error = vue.ref(null);
-  const connectorName = vue.ref(null);
-  vue.watch(isConnected, newVal => {
-    if (!newVal && connectorName.value) {
-      connectorName.value = null;
-    }
-    if (newVal && !connectorName.value) {
-      var _web3Auth$value;
-      connectorName.value = (_web3Auth$value = web3Auth.value) === null || _web3Auth$value === void 0 ? void 0 : _web3Auth$value.connectedConnectorName;
-    }
+  // Web3AuthModal extends the NoModal class, so we can use the same composable
+  const {
+    isConnected,
+    loading: sharedLoading,
+    error: sharedError,
+    connectorName,
+    connect: sharedConnectTo
+  } = vue.useWeb3AuthConnect();
+  const loading = vue$1.ref(false);
+  const error = vue$1.ref(null);
+  const connectLoading = vue$1.ref(false);
+  const connectError = vue$1.ref(null);
+  const activeFlow = vue$1.ref(null);
+  vue$1.watch([connectLoading, sharedLoading], ([newConnectLoading, newSharedLoading]) => {
+    loading.value = newConnectLoading || newSharedLoading;
+  }, {
+    immediate: true
+  });
+  vue$1.watch([activeFlow, connectError, sharedError], ([newActiveFlow, newConnectError, newSharedError]) => {
+    error.value = newActiveFlow === "connect" ? newConnectError : newSharedError;
   }, {
     immediate: true
   });
   const connect = async () => {
     try {
+      activeFlow.value = "connect";
       if (!web3Auth.value) throw noModal.WalletInitializationError.notReady();
-      error.value = null;
-      loading.value = true;
+      connectError.value = null;
+      connectLoading.value = true;
       const localProvider = await web3Auth.value.connect();
-      connectorName.value = web3Auth.value.connectedConnectorName;
       return localProvider;
     } catch (err) {
       noModal.log.error("Error connecting", err);
-      error.value = err;
+      connectError.value = err;
       return null;
     } finally {
-      loading.value = false;
+      connectLoading.value = false;
     }
   };
   const connectTo = async (connectorType, loginParams) => {
-    try {
-      if (!web3Auth.value) throw noModal.WalletInitializationError.notReady();
-      error.value = null;
-      loading.value = true;
-      const localProvider = await web3Auth.value.connectTo(connectorType, loginParams);
-      connectorName.value = web3Auth.value.connectedConnectorName;
-      return localProvider;
-    } catch (err) {
-      noModal.log.error("Error connecting to", err);
-      error.value = err;
-      return null;
-    } finally {
-      loading.value = false;
-    }
+    activeFlow.value = "connectTo";
+    connectError.value = null;
+    return sharedConnectTo(connectorType, loginParams);
   };
   return {
     isConnected,

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

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