@web3auth/modal 10.16.0 → 11.0.0-beta.1

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

@@ -3,15 +3,15 @@ import _objectSpread from '@babel/runtime/helpers/objectSpread2';
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import './css/index.css.js';
 import { LANGUAGES, applyWhiteLabelTheme, THEME_MODES, SafeEventEmitter } from '@web3auth/auth';
-import { log, WIDGET_TYPE, WalletInitializationError, WALLET_CONNECTORS, ANALYTICS_EVENTS, getWhitelabelAnalyticsProperties, CONNECTOR_EVENTS, LOGIN_MODE, CONNECTOR_INITIAL_AUTHENTICATION_MODE } from '@web3auth/no-modal';
+import { log, WIDGET_TYPE, WalletInitializationError, WALLET_CONNECTORS, CONNECTOR_INITIAL_AUTHENTICATION_MODE, ANALYTICS_EVENTS, getWhitelabelAnalyticsProperties, CONNECTOR_EVENTS, LOGIN_MODE } from '@web3auth/no-modal';
 import Bowser from 'bowser';
 import { createRoot } from 'react-dom/client';
 import { getLoginModalAnalyticsProperties } from '../utils.js';
-import Widget from './components/Widget/Widget.js';
 import { DEFAULT_PRIMARY_COLOR, DEFAULT_ON_PRIMARY_COLOR, PAGES, DEFAULT_LOGO_DARK, DEFAULT_LOGO_LIGHT } from './constants.js';
+import Widget from './containers/Widget/Widget.js';
 import { AnalyticsContext } from './context/AnalyticsContext.js';
-import { ThemedContext } from './context/ThemeContext.js';
-import { MODAL_STATUS } from './interfaces.js';
+import { WidgetProvider } from './context/WidgetContext.js';
+import { MODAL_STATUS, DEFAULT_ACCOUNT_LINKING_STATE, ACCOUNT_LINKING_STATUS, ACCOUNT_LINKING_INTENT } from './interfaces.js';
 import i18nInstance from './localeImport.js';
 import { getUserLanguage } from './utils.js';
 import { jsx } from 'react/jsx-runtime';
@@ -38,15 +38,12 @@ 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", MODAL_STATUS.INITIALIZED);
+    _defineProperty(this, "accountLinkingState", _objectSpread({}, DEFAULT_ACCOUNT_LINKING_STATE));
     _defineProperty(this, "initModal", async () => {
-      const darkState = {
-        isDark: this.isDark
-      };
       const useLang = this.uiConfig.defaultLanguage || LANGUAGES.en;
 
       // Load new language resource
@@ -127,10 +124,7 @@ class LoginModal {
         this.stateEmitter.once("MOUNTED", () => {
           log.info("rendered");
           this.setState({
-            status: MODAL_STATUS.INITIALIZED,
-            web3authClientId: this.uiConfig.web3authClientId,
-            web3authNetwork: this.uiConfig.web3authNetwork,
-            authBuildEnv: this.uiConfig.authBuildEnv
+            status: MODAL_STATUS.INITIALIZED
           });
           return resolve();
         });
@@ -142,32 +136,29 @@ class LoginModal {
           throw 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 = createRoot(container);
-        root.render(/*#__PURE__*/jsx(ThemedContext.Provider, {
-          value: darkState,
-          children: /*#__PURE__*/jsx(AnalyticsContext.Provider, {
-            value: {
-              analytics: this.analytics
-            },
+        root.render(/*#__PURE__*/jsx(AnalyticsContext.Provider, {
+          value: {
+            analytics: this.analytics
+          },
+          children: /*#__PURE__*/jsx(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: /*#__PURE__*/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 +176,18 @@ class LoginModal {
         }
       });
     });
-    _defineProperty(this, "addSocialLogins", (connector, loginMethods, loginMethodsOrder, uiConfig) => {
+    _defineProperty(this, "addSocialLogins", (loginMethods, loginMethodsOrder, uiConfig) => {
       this.setState({
         socialLoginsConfig: {
-          connector,
           loginMethods,
           loginMethodsOrder,
           uiConfig
         }
       });
-      log.info("addSocialLogins", connector, loginMethods, loginMethodsOrder, uiConfig);
+      log.info("addSocialLogins", loginMethods, loginMethodsOrder, uiConfig);
     });
     _defineProperty(this, "addWalletLogins", (externalWalletsConfig, options) => {
-      this.externalWalletsConfig = externalWalletsConfig;
+      this.externalWalletsConfig = _objectSpread(_objectSpread({}, this.externalWalletsConfig), externalWalletsConfig);
       const isMMAvailable = !!externalWalletsConfig[WALLET_CONNECTORS.METAMASK];
       this.setState({
         externalWalletsConfig,
@@ -206,14 +196,120 @@ class LoginModal {
         externalWalletsVisibility: isMMAvailable ? false : !!options.externalWalletsVisibility
       });
     });
+    _defineProperty(this, "startAccountLinkingSession", params => {
+      var _params$transportConn, _params$intent;
+      this.updateAccountLinkingState(_objectSpread(_objectSpread({}, DEFAULT_ACCOUNT_LINKING_STATE), {}, {
+        active: true,
+        connectorName: params.connectorName,
+        transportConnectorName: (_params$transportConn = params.transportConnectorName) !== null && _params$transportConn !== void 0 ? _params$transportConn : params.connectorName,
+        chainId: params.chainId,
+        intent: (_params$intent = params.intent) !== null && _params$intent !== void 0 ? _params$intent : ACCOUNT_LINKING_INTENT.LINK,
+        status: ACCOUNT_LINKING_STATUS.INITIALIZING
+      }));
+    });
+    _defineProperty(this, "updateAccountLinkingState", accountLinking => {
+      this.accountLinkingState = _objectSpread(_objectSpread({}, this.accountLinkingState), accountLinking);
+      this.setState({
+        accountLinking: this.accountLinkingState
+      });
+    });
+    _defineProperty(this, "resetAccountLinkingSession", () => {
+      this.accountLinkingState = _objectSpread({}, DEFAULT_ACCOUNT_LINKING_STATE);
+      this.setState({
+        accountLinking: this.accountLinkingState
+      });
+    });
+    _defineProperty(this, "hasActiveAccountLinkingSession", () => {
+      return this.accountLinkingState.active;
+    });
+    _defineProperty(this, "startAccountLinkingPicker", params => {
+      this.accountLinkingState = _objectSpread(_objectSpread({}, DEFAULT_ACCOUNT_LINKING_STATE), {}, {
+        active: true,
+        pickerActive: true,
+        chainId: params.chainId,
+        intent: ACCOUNT_LINKING_INTENT.LINK
+      });
+      this.setState({
+        accountLinking: this.accountLinkingState,
+        currentPage: PAGES.WALLET_LIST,
+        modalVisibility: true,
+        status: MODAL_STATUS.INITIALIZED
+      });
+      if (this.callbacks.onModalVisibility) {
+        this.callbacks.onModalVisibility(true);
+      }
+    });
+    _defineProperty(this, "endAccountLinkingPicker", () => {
+      this.accountLinkingState = _objectSpread(_objectSpread({}, this.accountLinkingState), {}, {
+        pickerActive: false,
+        active: false
+      });
+      this.setState({
+        accountLinking: this.accountLinkingState
+      });
+    });
+    _defineProperty(this, "startConnectingLoader", params => {
+      this.setState({
+        status: MODAL_STATUS.CONNECTING,
+        modalVisibility: true,
+        detailedLoaderConnector: params.connector,
+        detailedLoaderConnectorName: params.connectorName
+      });
+      if (this.callbacks.onModalVisibility) {
+        this.callbacks.onModalVisibility(true);
+      }
+    });
+    _defineProperty(this, "markLoaderAuthorizing", () => {
+      this.setState({
+        status: MODAL_STATUS.AUTHORIZING
+      });
+    });
+    _defineProperty(this, "endConnectingLoader", params => {
+      if (params.success) {
+        var _params$successMessag;
+        if (params.skipSuccessScreen) {
+          this.setState({
+            modalVisibility: false
+          });
+          if (this.callbacks.onModalVisibility) {
+            this.callbacks.onModalVisibility(false);
+          }
+          return;
+        }
+        // Account-linking success is terminal regardless of authentication mode (no signing step),
+        // so emit the mode's terminal success status so the Loader renders the success UI and auto-closes:
+        // - CONNECT_AND_SIGN expects AUTHORIZED as terminal success.
+        // - Other modes expect CONNECTED.
+        const isConnectAndSign = this.uiConfig.initialAuthenticationMode === CONNECTOR_INITIAL_AUTHENTICATION_MODE.CONNECT_AND_SIGN;
+        this.setState({
+          status: isConnectAndSign ? MODAL_STATUS.AUTHORIZED : MODAL_STATUS.CONNECTED,
+          postLoadingMessage: (_params$successMessag = params.successMessage) !== null && _params$successMessag !== void 0 ? _params$successMessag : "modal.post-loading.connected"
+        });
+        return;
+      }
+      if (this.uiConfig.displayErrorsOnModal) {
+        this.setState({
+          modalVisibility: true,
+          status: MODAL_STATUS.ERRORED,
+          postLoadingMessage: params.errorMessage || "modal.post-loading.something-wrong"
+        });
+      } else {
+        this.setState({
+          modalVisibility: false
+        });
+        if (this.callbacks.onModalVisibility) {
+          this.callbacks.onModalVisibility(false);
+        }
+      }
+    });
     _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(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 || {})
       }, getWhitelabelAnalyticsProperties(this.uiConfig)), getLoginModalAnalyticsProperties(this.uiConfig)));
       if (this.callbacks.onModalVisibility) {
@@ -269,27 +365,32 @@ class LoginModal {
         });
       }
     });
+    _defineProperty(this, "handleAcceptConsent", () => {
+      return this.callbacks.onAcceptConsent();
+    });
+    _defineProperty(this, "handleDeclineConsent", () => {
+      return this.callbacks.onDeclineConsent();
+    });
     _defineProperty(this, "handleSocialLoginClick", params => {
       var _this$analytics3;
       log.info("social login clicked", params);
       const {
-        connector,
         loginParams
       } = params;
       (_this$analytics3 = this.analytics) === null || _this$analytics3 === void 0 || _this$analytics3.track(ANALYTICS_EVENTS.SOCIAL_LOGIN_SELECTED, {
-        connector,
+        connector: 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 => {
@@ -326,13 +427,14 @@ class LoginModal {
       });
       listener.on(CONNECTOR_EVENTS.CONNECTED, data => {
         log.debug("connected with connector", data);
+        if (data.pendingUserConsent) return;
         // only show success if not being reconnected again.
         if (!data.reconnected && data.loginMode === LOGIN_MODE.MODAL) {
           this.setState({
             status: MODAL_STATUS.CONNECTED,
             modalVisibility: true,
             postLoadingMessage: "modal.post-loading.connected",
-            currentPage: PAGES.LOGIN
+            currentPage: PAGES.LOGIN_OPTIONS
           });
         } else {
           this.setState({
@@ -370,15 +472,44 @@ class LoginModal {
         this.handleConnectorData(connectorData);
       });
       listener.on(CONNECTOR_EVENTS.AUTHORIZING, () => {
+        if (this.modalStatus === MODAL_STATUS.CONSENT_REQUIRING) return;
         this.setState({
           status: MODAL_STATUS.AUTHORIZING
         });
       });
       listener.on(CONNECTOR_EVENTS.AUTHORIZED, () => {
+        if (this.modalStatus === MODAL_STATUS.CONSENT_REQUIRING) return;
+        this.setState({
+          status: MODAL_STATUS.AUTHORIZED,
+          postLoadingMessage: ""
+        });
+      });
+      listener.on(CONNECTOR_EVENTS.CONSENT_REQUIRING, () => {
         this.setState({
-          status: MODAL_STATUS.AUTHORIZED
+          status: MODAL_STATUS.CONSENT_REQUIRING,
+          modalVisibility: true
         });
       });
+      listener.on(CONNECTOR_EVENTS.CONSENT_ACCEPTED, data => {
+        if (this.uiConfig.initialAuthenticationMode === CONNECTOR_INITIAL_AUTHENTICATION_MODE.CONNECT_AND_SIGN) {
+          this.setState({
+            status: MODAL_STATUS.AUTHORIZED,
+            modalVisibility: true,
+            postLoadingMessage: ""
+          });
+        } else if (!data.reconnected) {
+          this.setState({
+            status: MODAL_STATUS.CONNECTED,
+            modalVisibility: true,
+            postLoadingMessage: "modal.post-loading.connected",
+            currentPage: PAGES.LOGIN_OPTIONS
+          });
+        } else {
+          this.setState({
+            status: MODAL_STATUS.CONNECTED
+          });
+        }
+      });
     });
     this.uiConfig = _uiConfig;
     if (!_uiConfig.logoDark) this.uiConfig.logoDark = DEFAULT_LOGO_DARK;
@@ -391,18 +522,27 @@ class LoginModal {
     if (!_uiConfig.primaryButton) this.uiConfig.primaryButton = "socialLogin";
     if (!_uiConfig.defaultLanguage) this.uiConfig.defaultLanguage = getUserLanguage(_uiConfig.defaultLanguage);
     if (!_uiConfig.widgetType) this.uiConfig.widgetType = WIDGET_TYPE.MODAL;
-    if (!_uiConfig.initialAuthenticationMode) this.uiConfig.initialAuthenticationMode = CONNECTOR_INITIAL_AUTHENTICATION_MODE.CONNECT_ONLY;
+    if (!_uiConfig.initialAuthenticationMode) this.uiConfig.initialAuthenticationMode = 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 === WIDGET_TYPE.EMBED && !_uiConfig.targetId) {
       log.error("targetId is required for embed widget");
       throw WalletInitializationError.invalidParams("targetId is required for embed widget");
     }
     this.stateEmitter = new SafeEventEmitter();
-    this.chainNamespaces = _uiConfig.chainNamespaces;
-    this.walletRegistry = _uiConfig.walletRegistry;
     this.callbacks = callbacks;
     this.analytics = _uiConfig.analytics;
     this.subscribeCoreEvents(this.uiConfig.connectorListener);
   }
+  get consentRequired() {
+    // consent required is true if the consent required is true and the privacy policy and tnc link are set
+    return this.uiConfig.consentRequired && Boolean(this.uiConfig.privacyPolicy) && Boolean(this.uiConfig.tncLink) || false;
+  }
   get isDark() {
     return this.uiConfig.mode === "dark" || this.uiConfig.mode === "auto" && window.matchMedia("(prefers-color-scheme: dark)").matches;
   }

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

@@ -1,6 +1,6 @@
-import { WalletServicesPluginError, EVM_PLUGINS, CONNECTOR_STATUS, PLUGIN_EVENTS } from '@web3auth/no-modal';
-import { WalletServicesContextKey } from '@web3auth/no-modal/vue';
-import { defineComponent, h, shallowRef, ref, watch, provide } from 'vue';
+import { WalletServicesPluginError } from '@web3auth/no-modal';
+import { useWalletServicesInnerContextValue, WalletServicesContextKey } from '@web3auth/no-modal/vue';
+import { defineComponent, h, provide } from 'vue';
 import { useWeb3AuthInner } from './composables/useWeb3AuthInner.js';
 
 const WalletServicesInnerProvider = defineComponent({
@@ -8,57 +8,8 @@ const WalletServicesInnerProvider = defineComponent({
   setup() {
     const web3AuthContext = useWeb3AuthInner();
     if (!web3AuthContext) throw WalletServicesPluginError.fromCode(1000, "`WalletServicesProvider` must be wrapped by `Web3AuthProvider`");
-    const {
-      getPlugin,
-      isInitialized,
-      isConnected
-    } = web3AuthContext;
-    const walletServicesPlugin = shallowRef(null);
-    const ready = ref(false);
-    const connecting = ref(false);
-    watch(isInitialized, newIsInitialized => {
-      if (newIsInitialized) {
-        const plugin = getPlugin(EVM_PLUGINS.WALLET_SERVICES);
-        walletServicesPlugin.value = plugin;
-      }
-    });
-    watch(isConnected, newIsConnected => {
-      if (newIsConnected) {
-        var _walletServicesPlugin;
-        const plugin = getPlugin(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) === CONNECTOR_STATUS.CONNECTED) ready.value = true;
-      }
-    });
-    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(PLUGIN_EVENTS.CONNECTED, connectedListener);
-        prevWalletServicesPlugin.removeListener(PLUGIN_EVENTS.DISCONNECTED, disconnectedListener);
-        prevWalletServicesPlugin.removeListener(PLUGIN_EVENTS.CONNECTING, connectingListener);
-      }
-      if (newWalletServicesPlugin && newWalletServicesPlugin !== prevWalletServicesPlugin) {
-        newWalletServicesPlugin.on(PLUGIN_EVENTS.CONNECTED, connectedListener);
-        newWalletServicesPlugin.on(PLUGIN_EVENTS.DISCONNECTED, disconnectedListener);
-        newWalletServicesPlugin.on(PLUGIN_EVENTS.CONNECTING, connectingListener);
-      }
-    });
-    provide(WalletServicesContextKey, {
-      plugin: walletServicesPlugin,
-      ready,
-      connecting
-    });
+    const value = useWalletServicesInnerContextValue(web3AuthContext);
+    provide(WalletServicesContextKey, value);
   },
   render() {
     var _this$$slots$default;

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

@@ -1,5 +1,6 @@
-import { ANALYTICS_INTEGRATION_TYPE, log, CONNECTOR_EVENTS, Web3AuthContextKey, CONNECTOR_STATUS, WalletInitializationError } from '@web3auth/no-modal';
-import { defineComponent, h, shallowRef, ref, watch, provide } from 'vue';
+import { Web3AuthContextKey } from '@web3auth/no-modal';
+import { useWeb3AuthInnerContextValue } from '@web3auth/no-modal/vue';
+import { defineComponent, h, shallowRef, provide } from 'vue';
 import { Web3Auth } from '../modalManager.js';
 import { WalletServicesInnerProvider } from './WalletServicesInnerProvider.js';
 
@@ -12,181 +13,13 @@ const Web3AuthProvider = defineComponent({
     }
   },
   setup(props) {
-    const web3Auth = shallowRef(null);
-    const provider = ref(null);
-    const isMFAEnabled = ref(false);
-    const status = ref(null);
-    const isAuthorized = ref(false);
-    const chainId = ref(null);
-    const chainNamespace = ref(null);
-    const isInitializing = ref(false);
-    const initError = ref(null);
-    const isInitialized = ref(false);
-    const isConnected = ref(false);
-    const getPlugin = name => {
-      if (!web3Auth.value) throw WalletInitializationError.notReady();
-      return web3Auth.value.getPlugin(name);
-    };
-    const setIsMFAEnabled = isMfaEnabled => {
-      isMFAEnabled.value = isMfaEnabled;
-    };
-    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 Web3Auth(web3AuthOptions);
-      web3AuthInstance.setAnalyticsProperties({
-        integration_type: ANALYTICS_INTEGRATION_TYPE.VUE_COMPOSABLES
-      });
-      web3Auth.value = web3AuthInstance;
-    }, {
-      immediate: true
-    });
-    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) {
-          log.error("Error initializing web3auth", error);
-          initError.value = error;
-        } finally {
-          isInitializing.value = false;
-        }
-      }
-    }, {
-      immediate: true
-    });
-    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 === CONNECTOR_STATUS.CONNECTED) {
-          var _currentChain$chainNa, _currentChain;
-          if (!isInitialized.value) isInitialized.value = true;
-          isConnected.value = true;
-          provider.value = newWeb3Auth.provider;
-          chainId.value = web3Auth.value.currentChainId;
-          chainNamespace.value = (_currentChain$chainNa = (_currentChain = web3Auth.value.currentChain) === null || _currentChain === void 0 ? void 0 : _currentChain.chainNamespace) !== null && _currentChain$chainNa !== void 0 ? _currentChain$chainNa : 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 === CONNECTOR_STATUS.AUTHORIZED) {
-          isConnected.value = true;
-          isAuthorized.value = true;
-        }
-      };
-      const mfaEnabledListener = () => {
-        isMFAEnabled.value = true;
-      };
-
-      // unregister previous listeners
-      if (prevWeb3Auth && newWeb3Auth !== prevWeb3Auth) {
-        prevWeb3Auth.removeListener(CONNECTOR_EVENTS.NOT_READY, notReadyListener);
-        prevWeb3Auth.removeListener(CONNECTOR_EVENTS.READY, readyListener);
-        prevWeb3Auth.removeListener(CONNECTOR_EVENTS.CONNECTED, connectedListener);
-        prevWeb3Auth.removeListener(CONNECTOR_EVENTS.AUTHORIZED, authorizedListener);
-        prevWeb3Auth.removeListener(CONNECTOR_EVENTS.DISCONNECTED, disconnectedListener);
-        prevWeb3Auth.removeListener(CONNECTOR_EVENTS.CONNECTING, connectingListener);
-        prevWeb3Auth.removeListener(CONNECTOR_EVENTS.ERRORED, errorListener);
-        prevWeb3Auth.removeListener(CONNECTOR_EVENTS.REHYDRATION_ERROR, errorListener);
-        prevWeb3Auth.removeListener(CONNECTOR_EVENTS.MFA_ENABLED, mfaEnabledListener);
-      }
-      if (newWeb3Auth && newWeb3Auth !== prevWeb3Auth) {
-        status.value = newWeb3Auth.status;
-        // web3Auth is initialized here.
-        newWeb3Auth.on(CONNECTOR_EVENTS.NOT_READY, notReadyListener);
-        newWeb3Auth.on(CONNECTOR_EVENTS.READY, readyListener);
-        newWeb3Auth.on(CONNECTOR_EVENTS.CONNECTED, connectedListener);
-        newWeb3Auth.on(CONNECTOR_EVENTS.AUTHORIZED, authorizedListener);
-        newWeb3Auth.on(CONNECTOR_EVENTS.DISCONNECTED, disconnectedListener);
-        newWeb3Auth.on(CONNECTOR_EVENTS.CONNECTING, connectingListener);
-        newWeb3Auth.on(CONNECTOR_EVENTS.ERRORED, errorListener);
-        newWeb3Auth.on(CONNECTOR_EVENTS.REHYDRATION_ERROR, errorListener);
-        newWeb3Auth.on(CONNECTOR_EVENTS.MFA_ENABLED, mfaEnabledListener);
-      }
-    }, {
-      immediate: true
-    });
-
-    // Listen for chain changes on the provider
-    watch(provider, (newProvider, prevProvider) => {
-      const handleChainChange = newChainId => {
-        var _web3Auth$value$curre, _web3Auth$value;
-        chainId.value = newChainId;
-        chainNamespace.value = (_web3Auth$value$curre = (_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$curre !== void 0 ? _web3Auth$value$curre : null;
-      };
-
-      // unregister previous listener
-      if (prevProvider && newProvider !== prevProvider) {
-        prevProvider.removeListener("chainChanged", handleChainChange);
-      }
-      if (newProvider && newProvider !== prevProvider) {
-        newProvider.on("chainChanged", handleChainChange);
-      }
-    }, {
-      immediate: true
-    });
-    provide(Web3AuthContextKey, {
-      web3Auth,
-      isConnected,
-      isAuthorized,
-      isInitialized,
-      provider,
-      status,
-      isInitializing,
-      initError,
-      isMFAEnabled,
-      chainId,
-      chainNamespace,
-      getPlugin,
-      setIsMFAEnabled
+    const value = useWeb3AuthInnerContextValue({
+      Web3AuthConstructor: Web3Auth,
+      watchSource: () => props.config,
+      getWeb3AuthOptions: config => config.web3AuthOptions,
+      createConnectionRef: () => shallowRef(null)
     });
+    provide(Web3AuthContextKey, value);
   },
   render() {
     var _this$$slots$default;