@web3auth/modal 10.16.0 → 11.0.0-beta.1

package/dist/lib.esm/packages/modal/src/modalManager.js

@@ -1,11 +1,11 @@
 import _objectSpread from '@babel/runtime/helpers/objectSpread2';
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import { serializeError } from '@web3auth/auth';
-import { Web3AuthNoModal, cloneDeep, WALLET_CONNECTORS, LOGIN_MODE, log, CONNECTOR_STATUS, CONNECTED_STATUSES, sdkVersion, ANALYTICS_SDK_TYPE, withAbort, CONNECTOR_EVENTS, ANALYTICS_EVENTS, getErrorAnalyticsProperties, WalletInitializationError, CONNECTOR_INITIAL_AUTHENTICATION_MODE, fetchProjectConfig, fetchWalletRegistry, WALLET_REGISTRY_URL, CONNECTOR_CATEGORY, CONNECTOR_NAMES, CONNECTOR_NAMESPACES } from '@web3auth/no-modal';
+import { Web3AuthNoModal, LOGIN_MODE, cloneDeep, WALLET_CONNECTORS, log, CONNECTOR_STATUS, CONNECTED_STATUSES, CONNECTOR_INITIAL_AUTHENTICATION_MODE, sdkVersion, ANALYTICS_SDK_TYPE, withAbort, CONNECTOR_EVENTS, ANALYTICS_EVENTS, getErrorAnalyticsProperties, WalletInitializationError, AccountLinkingError, fetchProjectConfig, fetchWalletRegistry, WALLET_REGISTRY_URL, CONNECTOR_CATEGORY, CONNECTOR_NAMES, CONNECTOR_NAMESPACES, Web3AuthError, WalletLoginError } from '@web3auth/no-modal';
 import deepmerge from 'deepmerge';
 import { defaultConnectorsModalConfig } from './config.js';
 import { AUTH_PROVIDERS_NAMES, AUTH_PROVIDERS, capitalizeFirstLetter } from './ui/config.js';
-import { LOGIN_MODAL_EVENTS } from './ui/interfaces.js';
+import { LOGIN_MODAL_EVENTS, ACCOUNT_LINKING_INTENT, ACCOUNT_LINKING_STATUS } from './ui/interfaces.js';
 import { LoginModal } from './ui/loginModal.js';
 import { getUserLanguage } from './ui/utils.js';
 
@@ -13,8 +13,13 @@ class Web3Auth extends Web3AuthNoModal {
   constructor(options, initialState) {
     super(options, initialState);
     _defineProperty(this, "loginModal", void 0);
+    _defineProperty(this, "loginMode", LOGIN_MODE.MODAL);
     _defineProperty(this, "options", void 0);
     _defineProperty(this, "modalConfig", cloneDeep(defaultConnectorsModalConfig));
+    _defineProperty(this, "removeAccountLinkingConnectorListeners", null);
+    _defineProperty(this, "removeAccountLinkingResetOnCloseListener", null);
+    _defineProperty(this, "accountLinkingPickerResolver", null);
+    _defineProperty(this, "removeAccountLinkingPickerCloseListener", null);
     _defineProperty(this, "onInitExternalWallets", async params => {
       if (params.externalWalletsInitialized) return;
       // initialize WC connector only as other external wallets are initialized in initModal
@@ -27,10 +32,17 @@ class Web3Auth extends Web3AuthNoModal {
       try {
         await this.connectTo(WALLET_CONNECTORS.AUTH, params.loginParams, LOGIN_MODE.MODAL);
       } catch (error) {
-        log.error(`Error while connecting to connector: ${params.connector}`, error);
+        log.error("Error while connecting via social login (AUTH)", error);
       }
     });
     _defineProperty(this, "onExternalWalletLogin", async params => {
+      // If the modal is in account-linking picker mode, hand off the selected connector
+      // to the linking flow instead of running the regular login `connectTo`.
+      if (this.accountLinkingPickerResolver) {
+        const resolver = this.accountLinkingPickerResolver;
+        resolver(params.connector);
+        return;
+      }
       try {
         var _params$loginParams;
         const connector = this.getConnector(params.connector, (_params$loginParams = params.loginParams) === null || _params$loginParams === void 0 ? void 0 : _params$loginParams.chainNamespace);
@@ -49,8 +61,12 @@ class Web3Auth extends Web3AuthNoModal {
       }
     });
     _defineProperty(this, "onModalVisibility", async visibility => {
+      var _this$loginModal;
       log.debug("is login modal visible", visibility);
       this.emit(LOGIN_MODAL_EVENTS.MODAL_VISIBILITY, visibility);
+      if ((_this$loginModal = this.loginModal) !== null && _this$loginModal !== void 0 && _this$loginModal.hasActiveAccountLinkingSession()) {
+        return;
+      }
 
       // handle WC session refresh
       const wcConnector = this.getConnector(WALLET_CONNECTORS.WALLET_CONNECT_V2);
@@ -79,18 +95,39 @@ class Web3Auth extends Web3AuthNoModal {
     _defineProperty(this, "onMobileVerifyConnect", async params => {
       try {
         const connector = this.getConnector(params.connector);
-        await connector.getIdentityToken();
+        await connector.getAuthTokenInfo();
       } catch (error) {
         log.error(`Error while connecting to connector: ${params.connector}`, error);
       }
     });
+    _defineProperty(this, "onAcceptConsent", async () => {
+      try {
+        await this.acceptConsent();
+      } catch (error) {
+        log.error("Error while accepting consent", error);
+      }
+    });
+    _defineProperty(this, "onDeclineConsent", async () => {
+      try {
+        await this.logout();
+      } catch (error) {
+        log.error("Error while declining consent", error);
+      } finally {
+        this.loginModal.closeModal();
+      }
+    });
     _defineProperty(this, "getChainNamespaces", () => {
       var _this$coreOptions$cha;
       return [...new Set(((_this$coreOptions$cha = this.coreOptions.chains) === null || _this$coreOptions$cha === void 0 ? void 0 : _this$coreOptions$cha.map(x => x.chainNamespace)) || [])];
     });
     this.options = _objectSpread({}, options);
+    if (!this.options.initialAuthenticationMode) {
+      this.options.initialAuthenticationMode = CONNECTOR_INITIAL_AUTHENTICATION_MODE.CONNECT_AND_SIGN;
+    }
     if (!this.options.uiConfig) this.options.uiConfig = {};
     if (this.options.modalConfig) this.modalConfig = this.options.modalConfig;
+    // consent required is true if the consent required is true and the privacy policy and tnc link are set
+    this.consentRequired = this.options.uiConfig.consentRequired && Boolean(this.options.uiConfig.privacyPolicy) && Boolean(this.options.uiConfig.tncLink) || false;
     log.info("modalConfig", this.modalConfig);
   }
   async init(options) {
@@ -153,8 +190,11 @@ class Web3Auth extends Web3AuthNoModal {
         onSocialLogin: this.onSocialLogin,
         onExternalWalletLogin: this.onExternalWalletLogin,
         onModalVisibility: this.onModalVisibility,
-        onMobileVerifyConnect: this.onMobileVerifyConnect
+        onMobileVerifyConnect: this.onMobileVerifyConnect,
+        onAcceptConsent: this.onAcceptConsent,
+        onDeclineConsent: this.onDeclineConsent
       });
+      this.consentRequired = this.loginModal.consentRequired;
       await withAbort(() => this.loginModal.initModal(), signal);
 
       // setup common JRPC provider
@@ -208,41 +248,179 @@ class Web3Auth extends Web3AuthNoModal {
   }
   async connect() {
     if (!this.loginModal) throw WalletInitializationError.notReady("Login modal is not initialized");
-    // if already connected return provider
-    if (this.connectedConnectorName && CONNECTED_STATUSES.includes(this.status) && this.provider) return this.provider;
+    // if already connected return connection
+    if (CONNECTED_STATUSES.includes(this.status) && this.connection) return this.connection;
     this.loginModal.open();
     return new Promise((resolve, reject) => {
+      // track connection started event
+      const startTime = Date.now();
       // remove all listeners when promise is resolved or rejected.
       // this is to prevent memory leaks if user clicks connect button multiple times.
-      const handleConnected = () => {
+      const handleCompletion = () => {
         this.removeListener(CONNECTOR_EVENTS.ERRORED, handleError);
         this.removeListener(LOGIN_MODAL_EVENTS.MODAL_VISIBILITY, handleVisibility);
-        return resolve(this.provider);
+        if (this.coreOptions.initialAuthenticationMode === CONNECTOR_INITIAL_AUTHENTICATION_MODE.CONNECT_AND_SIGN) {
+          this.removeListener(CONNECTOR_EVENTS.AUTHORIZED, handleCompletion);
+        } else {
+          this.removeListener(CONNECTOR_EVENTS.CONNECTED, handleCompletion);
+        }
+        return resolve(this.connection);
+      };
+      const handleConsentAccepted = async () => {
+        try {
+          var _this$primaryConnecto;
+          // track connection completed event
+          const userInfo = await this.getUserInfo();
+          // TODO: correct event data
+          this.analytics.track(ANALYTICS_EVENTS.CONNECTION_COMPLETED, {
+            connector: (_this$primaryConnecto = this.primaryConnector) === null || _this$primaryConnecto === void 0 ? void 0 : _this$primaryConnecto.name,
+            is_mfa_enabled: userInfo === null || userInfo === void 0 ? void 0 : userInfo.isMfaEnabled,
+            duration: Date.now() - startTime
+          });
+        } catch (error) {
+          log.error("Failed to track connection completed event after consent acceptance", error);
+        }
+        handleCompletion();
       };
       const handleError = err => {
-        this.removeListener(CONNECTOR_EVENTS.CONNECTED, handleConnected);
-        this.removeListener(CONNECTOR_EVENTS.AUTHORIZED, handleConnected);
+        this.removeListener(CONNECTOR_EVENTS.CONNECTED, handleCompletion);
+        this.removeListener(CONNECTOR_EVENTS.AUTHORIZED, handleCompletion);
         this.removeListener(LOGIN_MODAL_EVENTS.MODAL_VISIBILITY, handleVisibility);
         return reject(err);
       };
       const handleVisibility = visibility => {
         // modal is closed but user is not connected to any wallet.
         if (!visibility && !CONNECTED_STATUSES.includes(this.status)) {
-          this.removeListener(CONNECTOR_EVENTS.CONNECTED, handleConnected);
+          this.removeListener(CONNECTOR_EVENTS.CONNECTED, handleCompletion);
           this.removeListener(CONNECTOR_EVENTS.ERRORED, handleError);
-          this.removeListener(CONNECTOR_EVENTS.AUTHORIZED, handleConnected);
+          this.removeListener(CONNECTOR_EVENTS.AUTHORIZED, handleCompletion);
           return reject(new Error("User closed the modal"));
         }
       };
+      if (this.consentRequired) {
+        this.once(CONNECTOR_EVENTS.CONSENT_ACCEPTED, handleConsentAccepted);
+      }
       if (this.coreOptions.initialAuthenticationMode === CONNECTOR_INITIAL_AUTHENTICATION_MODE.CONNECT_AND_SIGN) {
-        this.once(CONNECTOR_EVENTS.AUTHORIZED, handleConnected);
+        this.once(CONNECTOR_EVENTS.AUTHORIZED, handleCompletion);
       } else {
-        this.once(CONNECTOR_EVENTS.CONNECTED, handleConnected);
+        this.once(CONNECTOR_EVENTS.CONNECTED, handleCompletion);
       }
       this.once(CONNECTOR_EVENTS.ERRORED, handleError);
       this.once(LOGIN_MODAL_EVENTS.MODAL_VISIBILITY, handleVisibility);
     });
   }
+  async acceptConsent() {
+    await super.completeConsentAcceptance();
+  }
+  async switchAccount(account) {
+    const authConnector = this.getMainAuthConnector();
+    const switchResult = await authConnector.switchAccount(account, {
+      activeAccount: this.activeAccount,
+      currentChainId: this.currentChainId
+    });
+    if (!switchResult) {
+      return;
+    }
+    try {
+      var _await$this$getProjec;
+      const existingConnector = switchResult.kind === "external" ? this.getConnectedWalletConnector(switchResult.targetAccount) : null;
+      // check if the existing connector is connected and usable, then we can switch to it without re-connecting again
+      const isExistingConnectorConnected = Boolean(existingConnector && this.hasUsableConnectedSwitchConnector(existingConnector));
+      const projectConfig = switchResult.kind === "external" && !isExistingConnectorConnected ? (_await$this$getProjec = await this.getProjectAndWalletConfig()) === null || _await$this$getProjec === void 0 ? void 0 : _await$this$getProjec.projectConfig : undefined;
+      if (switchResult.kind !== "external" || isExistingConnectorConnected) {
+        await this.runNonWalletConnectAccountAction(switchResult.targetAccount.connector, () => super.processSwitchAccountResult(authConnector, switchResult, {
+          walletConnector: isExistingConnectorConnected && existingConnector ? existingConnector : undefined,
+          projectConfig
+        }), {
+          skipSuccessScreen: true
+        });
+        await authConnector.trackSwitchAccountCompleted(switchResult.targetAccount);
+        return;
+      }
+      const connectorToSwitchTo = await this.prepareAccountSwitchConnector(switchResult.targetAccount.connector, switchResult.activeChainId, projectConfig);
+      if (connectorToSwitchTo.name !== WALLET_CONNECTORS.WALLET_CONNECT_V2) {
+        await this.runNonWalletConnectAccountAction(switchResult.targetAccount.connector, () => super.processSwitchAccountResult(authConnector, switchResult, {
+          walletConnector: connectorToSwitchTo,
+          projectConfig
+        }), {
+          skipSuccessScreen: true
+        });
+        await authConnector.trackSwitchAccountCompleted(switchResult.targetAccount);
+        return;
+      }
+      await this.switchToWalletConnectV2Account(switchResult, connectorToSwitchTo, projectConfig);
+    } catch (error) {
+      await authConnector.trackSwitchAccountFailed(switchResult.targetAccount, error);
+      throw error;
+    }
+  }
+  async linkAccount(params) {
+    // Pre-flight: ensure user is connected via AUTH so we fail fast before opening the modal.
+    this.getMainAuthConnector();
+    const chainId = this.resolveLinkAccountChainId(params === null || params === void 0 ? void 0 : params.chainId);
+    if (!(params !== null && params !== void 0 && params.connectorName)) {
+      const pickedConnector = await this.pickWalletForAccountLinking(chainId);
+      return this.linkAccountWithChosenConnector(pickedConnector, chainId);
+    }
+    return this.linkAccountWithChosenConnector(params.connectorName, chainId);
+  }
+  startAccountLinkingModalSession(params) {
+    if (!this.loginModal) throw WalletInitializationError.notReady("Login modal is not initialized");
+    this.loginModal.startAccountLinkingSession(params);
+  }
+  updateAccountLinkingModalSession(accountLinking) {
+    if (!this.loginModal) throw WalletInitializationError.notReady("Login modal is not initialized");
+    this.loginModal.updateAccountLinkingState(accountLinking);
+  }
+  resetAccountLinkingModalSession() {
+    if (!this.loginModal) throw WalletInitializationError.notReady("Login modal is not initialized");
+    this.loginModal.resetAccountLinkingSession();
+  }
+  formatAccountLinkingErrorMessage(error) {
+    if (error instanceof AccountLinkingError) {
+      const isUnlink = error.code >= 5406 && error.code <= 5408;
+      return isUnlink ? `[${error.code}] Account unlinking failed` : `[${error.code}] Account linking failed`;
+    }
+    return error === null || error === void 0 ? void 0 : error.message;
+  }
+  async prepareAccountLinkingConnector(connectorName, chainId) {
+    const {
+      projectConfig
+    } = await this.getProjectAndWalletConfig();
+    const connector = await super.createLinkingWalletConnector(connectorName, chainId, projectConfig);
+    if (connector.name !== WALLET_CONNECTORS.WALLET_CONNECT_V2) {
+      return connector;
+    }
+    if (!this.loginModal) throw WalletInitializationError.notReady("Login modal is not initialized");
+    this.clearAccountLinkingConnectorListeners();
+    this.removeAccountLinkingConnectorListeners = this.subscribeToAccountLinkingConnectorEvents(connector);
+    this.startAccountLinkingModalSession({
+      connectorName,
+      transportConnectorName: connector.name,
+      chainId,
+      intent: ACCOUNT_LINKING_INTENT.LINK
+    });
+    this.loginModal.open();
+    return connector;
+  }
+  async prepareAccountSwitchConnector(connectorName, chainId, projectConfig) {
+    const finalProjectConfig = projectConfig !== null && projectConfig !== void 0 ? projectConfig : (await this.getProjectAndWalletConfig()).projectConfig;
+    const connector = await super.createSwitchingWalletConnector(connectorName, chainId, finalProjectConfig);
+    if (connector.name !== WALLET_CONNECTORS.WALLET_CONNECT_V2) {
+      return connector;
+    }
+    if (!this.loginModal) throw WalletInitializationError.notReady("Login modal is not initialized");
+    this.clearAccountLinkingConnectorListeners();
+    this.removeAccountLinkingConnectorListeners = this.subscribeToAccountLinkingConnectorEvents(connector);
+    this.startAccountLinkingModalSession({
+      connectorName,
+      transportConnectorName: connector.name,
+      chainId,
+      intent: ACCOUNT_LINKING_INTENT.SWITCH
+    });
+    this.loginModal.open();
+    return connector;
+  }
   initUIConfig(projectConfig) {
     super.initUIConfig(projectConfig);
     this.options.uiConfig = deepmerge(cloneDeep(projectConfig.whitelabel || {}), this.options.uiConfig || {});
@@ -551,7 +729,7 @@ class Web3Auth extends Web3AuthNoModal {
         await connector.init({
           autoConnect,
           chainId: initialChain.chainId,
-          getIdentityToken: this.options.initialAuthenticationMode === CONNECTOR_INITIAL_AUTHENTICATION_MODE.CONNECT_AND_SIGN
+          getAuthTokenInfo: this.options.initialAuthenticationMode === CONNECTOR_INITIAL_AUTHENTICATION_MODE.CONNECT_AND_SIGN
         });
 
         // note: not adding cachedWallet to modal if it is external wallet.
@@ -560,7 +738,7 @@ class Web3Auth extends Web3AuthNoModal {
           var _this$modalConfig$con6, _this$options$uiConfi13, _this$options$uiConfi14, _this$options$uiConfi15;
           log.info("connectorInitResults", connectorName);
           const loginMethods = ((_this$modalConfig$con6 = this.modalConfig.connectors[connectorName]) === null || _this$modalConfig$con6 === void 0 ? void 0 : _this$modalConfig$con6.loginMethods) || {};
-          this.loginModal.addSocialLogins(connectorName, loginMethods, ((_this$options$uiConfi13 = this.options.uiConfig) === null || _this$options$uiConfi13 === void 0 ? void 0 : _this$options$uiConfi13.loginMethodsOrder) || AUTH_PROVIDERS, _objectSpread(_objectSpread({}, this.options.uiConfig), {}, {
+          this.loginModal.addSocialLogins(loginMethods, ((_this$options$uiConfi13 = this.options.uiConfig) === null || _this$options$uiConfi13 === void 0 ? void 0 : _this$options$uiConfi13.loginMethodsOrder) || AUTH_PROVIDERS, _objectSpread(_objectSpread({}, this.options.uiConfig), {}, {
             loginGridCol: ((_this$options$uiConfi14 = this.options.uiConfig) === null || _this$options$uiConfi14 === void 0 ? void 0 : _this$options$uiConfi14.loginGridCol) || 3,
             primaryButton: ((_this$options$uiConfi15 = this.options.uiConfig) === null || _this$options$uiConfi15 === void 0 ? void 0 : _this$options$uiConfi15.primaryButton) || "socialLogin"
           }));
@@ -576,6 +754,7 @@ class Web3Auth extends Web3AuthNoModal {
 
     // we do it like this because we don't want one slow connector to delay the load of the entire external wallet section.
     externalConnectors.forEach(async connector => {
+      var _this$connection;
       const connectorName = connector.name;
       log.debug("init external wallet", this.cachedConnector, connectorName, connector.status);
 
@@ -589,14 +768,14 @@ class Web3Auth extends Web3AuthNoModal {
 
       // initialize connectors
       // skip initializing cached connector here as it is already being initialized in initModal before.
-      if (connector.status === CONNECTOR_STATUS.NOT_READY && this.cachedConnector !== connectorName) {
+      if (connector.status === CONNECTOR_STATUS.NOT_READY && this.cachedConnector !== connectorName && ((_this$connection = this.connection) === null || _this$connection === void 0 ? void 0 : _this$connection.connectorName) !== connectorName) {
         try {
           this.subscribeToConnectorEvents(connector);
           const initialChain = this.getInitialChainIdForConnector(connector);
           await connector.init({
             autoConnect: this.cachedConnector === connectorName,
             chainId: initialChain.chainId,
-            getIdentityToken: this.options.initialAuthenticationMode === CONNECTOR_INITIAL_AUTHENTICATION_MODE.CONNECT_AND_SIGN
+            getAuthTokenInfo: this.options.initialAuthenticationMode === CONNECTOR_INITIAL_AUTHENTICATION_MODE.CONNECT_AND_SIGN
           });
         } catch (error) {
           log.error(error, "error while initializing connector", connectorName);
@@ -619,6 +798,286 @@ class Web3Auth extends Web3AuthNoModal {
       }
     });
   }
+  async switchToWalletConnectV2Account(switchResult, connectorToSwitchTo, projectConfig) {
+    const authConnector = this.getMainAuthConnector();
+    try {
+      await this.runWalletConnectV2AccountAction({
+        connector: connectorToSwitchTo,
+        connectParams: {
+          chainId: switchResult.activeChainId
+        },
+        onConnected: async connector => {
+          await super.processSwitchAccountResult(authConnector, switchResult, {
+            walletConnector: connector,
+            projectConfig
+          });
+          await authConnector.trackSwitchAccountCompleted(switchResult.targetAccount);
+          return {
+            result: undefined,
+            retainConnector: true
+          };
+        },
+        intent: ACCOUNT_LINKING_INTENT.SWITCH
+      });
+    } catch (error) {
+      await authConnector.trackSwitchAccountFailed(switchResult.targetAccount, error);
+      throw error;
+    }
+  }
+
+  /**
+   * Runs a link/switch action for WalletConnect v2, racing connector.connect()
+   * against a modal-close promise to cancel and clean up the WC session if the
+   * user closes the modal during QR scanning.
+   * For synchronous connectors use {@link runNonWalletConnectAccountAction}.
+   */
+  async runWalletConnectV2AccountAction(params) {
+    if (!this.loginModal) throw WalletInitializationError.notReady("Login modal is not initialized");
+    this.clearAccountLinkingResetOnCloseListener();
+    let retainConnector = false;
+    let connectCancelled = false;
+    let removeConnectPhaseVisibilityListener = () => {};
+    const closeDuringConnectPromise = new Promise((_resolve, reject) => {
+      const handleVisibility = visibility => {
+        if (!visibility) {
+          connectCancelled = true;
+          reject(WalletLoginError.popupClosed("User closed the modal"));
+        }
+      };
+      this.on(LOGIN_MODAL_EVENTS.MODAL_VISIBILITY, handleVisibility);
+      removeConnectPhaseVisibilityListener = () => {
+        this.removeListener(LOGIN_MODAL_EVENTS.MODAL_VISIBILITY, handleVisibility);
+      };
+    });
+    const connector = params.connector;
+    const connectPromise = connector.connect(params.connectParams);
+    void connectPromise.then(async connection => {
+      if (!connectCancelled || !connection || !connector.connected || retainConnector) return undefined;
+      try {
+        await connector.disconnect({
+          cleanup: true
+        });
+      } catch (error) {
+        log.debug("Failed to disconnect cancelled WalletConnect connector during cleanup", error);
+      }
+      return undefined;
+    }).catch(() => {});
+    try {
+      const connection = await Promise.race([connectPromise, closeDuringConnectPromise]);
+      if (!connection) {
+        throw AccountLinkingError.requestFailed("Failed to connect wallet.");
+      }
+      removeConnectPhaseVisibilityListener();
+      this.updateAccountLinkingModalSession({
+        status: ACCOUNT_LINKING_STATUS.LINKING,
+        intent: params.intent,
+        walletConnectUri: "",
+        errorMessage: ""
+      });
+      const {
+        result,
+        retainConnector: shouldRetainConnector = false
+      } = await params.onConnected(connector, connection);
+      retainConnector = shouldRetainConnector;
+      this.resetAccountLinkingModalSession();
+      this.loginModal.endConnectingLoader({
+        success: true,
+        successMessage: "",
+        skipSuccessScreen: params.intent === ACCOUNT_LINKING_INTENT.SWITCH
+      });
+      return result;
+    } catch (error) {
+      const isPopupClosed = error instanceof Web3AuthError && error.code === 5114;
+      if (isPopupClosed) {
+        this.resetAccountLinkingModalSession();
+      } else {
+        const fallbackMessage = params.intent === ACCOUNT_LINKING_INTENT.SWITCH ? "Failed to switch wallet." : undefined;
+        const errorMessage = this.formatAccountLinkingErrorMessage(error) || fallbackMessage;
+        this.resetAccountLinkingModalSession();
+        this.loginModal.endConnectingLoader({
+          success: false,
+          errorMessage
+        });
+      }
+      this.installAccountLinkingResetOnCloseListener();
+      throw error;
+    } finally {
+      removeConnectPhaseVisibilityListener();
+      this.clearAccountLinkingConnectorListeners();
+      try {
+        if (!retainConnector && connector.connected) {
+          await connector.disconnect({
+            cleanup: true
+          });
+        }
+      } catch (error) {
+        log.debug("Failed to disconnect WalletConnect connector during cleanup", error);
+      }
+    }
+  }
+  async linkAccountWithChosenConnector(connectorName, chainId) {
+    const connectorToLink = await this.prepareAccountLinkingConnector(connectorName, chainId);
+    if (connectorToLink.name !== WALLET_CONNECTORS.WALLET_CONNECT_V2) {
+      return this.runNonWalletConnectAccountAction(connectorName, () => super.linkAccountWithConnector(connectorName, chainId, connectorToLink), {
+        connector: connectorToLink
+      });
+    }
+    return this.runWalletConnectV2AccountAction({
+      connector: connectorToLink,
+      connectParams: {
+        chainId,
+        isAccountLinking: true
+      },
+      onConnected: async connector => ({
+        result: await super.linkAccountWithConnector(connectorName, chainId, connector)
+      }),
+      intent: ACCOUNT_LINKING_INTENT.LINK
+    });
+  }
+  pickWalletForAccountLinking(chainId) {
+    if (!this.loginModal) throw WalletInitializationError.notReady("Login modal is not initialized");
+    if (this.accountLinkingPickerResolver) {
+      throw AccountLinkingError.requestFailed("Another account linking picker is already in progress.");
+    }
+    this.loginModal.startAccountLinkingPicker({
+      chainId
+    });
+    return new Promise((resolve, reject) => {
+      const cleanup = () => {
+        this.accountLinkingPickerResolver = null;
+        if (this.removeAccountLinkingPickerCloseListener) {
+          this.removeAccountLinkingPickerCloseListener();
+          this.removeAccountLinkingPickerCloseListener = null;
+        }
+        this.loginModal.endAccountLinkingPicker();
+      };
+      const handleVisibility = visible => {
+        if (visible) return;
+        cleanup();
+        reject(WalletLoginError.popupClosed("User closed the modal"));
+      };
+      this.accountLinkingPickerResolver = connector => {
+        cleanup();
+        resolve(connector);
+      };
+      this.on(LOGIN_MODAL_EVENTS.MODAL_VISIBILITY, handleVisibility);
+      this.removeAccountLinkingPickerCloseListener = () => {
+        this.removeListener(LOGIN_MODAL_EVENTS.MODAL_VISIBILITY, handleVisibility);
+      };
+    });
+  }
+
+  /**
+   * Runs a link/switch action for synchronous connectors (injected wallets, already-connected).
+   * Shows the connecting loader, forwards AUTHORIZING events to the modal, and
+   * resolves/rejects the loader on completion.
+   * For WalletConnect v2 use {@link runWalletConnectV2AccountAction}.
+   */
+  async runNonWalletConnectAccountAction(connectorName, fn, options = {}) {
+    if (!this.loginModal) throw WalletInitializationError.notReady("Login modal is not initialized");
+    const displayName = CONNECTOR_NAMES[connectorName] || connectorName;
+    this.loginModal.startConnectingLoader({
+      connector: connectorName,
+      connectorName: displayName
+    });
+
+    // Forward the AUTHORIZING event from the linking wallet connector to the modal so we can
+    // swap the loader from "connecting" to "authorizing" while the user reviews the signature
+    // request inside their wallet.
+    const handleAuthorizing = () => {
+      var _this$loginModal2;
+      return (_this$loginModal2 = this.loginModal) === null || _this$loginModal2 === void 0 ? void 0 : _this$loginModal2.markLoaderAuthorizing();
+    };
+    if (options.connector) {
+      options.connector.on(CONNECTOR_EVENTS.AUTHORIZING, handleAuthorizing);
+    }
+    try {
+      const result = await fn();
+      this.resetAccountLinkingModalSession();
+      this.loginModal.endConnectingLoader({
+        success: true,
+        skipSuccessScreen: options.skipSuccessScreen
+      });
+      return result;
+    } catch (error) {
+      const message = this.formatAccountLinkingErrorMessage(error);
+      this.resetAccountLinkingModalSession();
+      this.loginModal.endConnectingLoader({
+        success: false,
+        errorMessage: message
+      });
+      throw error;
+    } finally {
+      if (options.connector) {
+        options.connector.removeListener(CONNECTOR_EVENTS.AUTHORIZING, handleAuthorizing);
+      }
+    }
+  }
+  subscribeToAccountLinkingConnectorEvents(connector) {
+    const handleConnecting = () => {
+      this.updateAccountLinkingModalSession({
+        status: ACCOUNT_LINKING_STATUS.AWAITING_CONNECTION,
+        errorMessage: ""
+      });
+    };
+    const handleConnectorDataUpdated = connectorData => {
+      if (connectorData.connectorName !== WALLET_CONNECTORS.WALLET_CONNECT_V2) return;
+      const walletConnectData = connectorData.data;
+      if (!walletConnectData.uri) return;
+      this.updateAccountLinkingModalSession({
+        walletConnectUri: walletConnectData.uri,
+        status: ACCOUNT_LINKING_STATUS.AWAITING_CONNECTION,
+        errorMessage: ""
+      });
+    };
+    const handleConnected = _data => {
+      this.updateAccountLinkingModalSession({
+        status: ACCOUNT_LINKING_STATUS.WALLET_CONNECTED,
+        walletConnectUri: "",
+        errorMessage: ""
+      });
+    };
+    const handleErrored = error => {
+      this.updateAccountLinkingModalSession({
+        status: ACCOUNT_LINKING_STATUS.ERRORED,
+        errorMessage: error.message || "Failed to connect wallet."
+      });
+    };
+    connector.on(CONNECTOR_EVENTS.CONNECTING, handleConnecting);
+    connector.on(CONNECTOR_EVENTS.CONNECTOR_DATA_UPDATED, handleConnectorDataUpdated);
+    connector.on(CONNECTOR_EVENTS.CONNECTED, handleConnected);
+    connector.on(CONNECTOR_EVENTS.ERRORED, handleErrored);
+    return () => {
+      connector.removeListener(CONNECTOR_EVENTS.CONNECTING, handleConnecting);
+      connector.removeListener(CONNECTOR_EVENTS.CONNECTOR_DATA_UPDATED, handleConnectorDataUpdated);
+      connector.removeListener(CONNECTOR_EVENTS.CONNECTED, handleConnected);
+      connector.removeListener(CONNECTOR_EVENTS.ERRORED, handleErrored);
+    };
+  }
+  clearAccountLinkingConnectorListeners() {
+    if (this.removeAccountLinkingConnectorListeners) {
+      this.removeAccountLinkingConnectorListeners();
+      this.removeAccountLinkingConnectorListeners = null;
+    }
+  }
+  installAccountLinkingResetOnCloseListener() {
+    this.clearAccountLinkingResetOnCloseListener();
+    const handleVisibility = visibility => {
+      if (visibility) return;
+      this.resetAccountLinkingModalSession();
+      this.clearAccountLinkingResetOnCloseListener();
+    };
+    this.on(LOGIN_MODAL_EVENTS.MODAL_VISIBILITY, handleVisibility);
+    this.removeAccountLinkingResetOnCloseListener = () => {
+      this.removeListener(LOGIN_MODAL_EVENTS.MODAL_VISIBILITY, handleVisibility);
+    };
+  }
+  clearAccountLinkingResetOnCloseListener() {
+    if (this.removeAccountLinkingResetOnCloseListener) {
+      this.removeAccountLinkingResetOnCloseListener();
+      this.removeAccountLinkingResetOnCloseListener = null;
+    }
+  }
   getCombinedConnectionId(authConnectionId, groupedAuthConnectionId) {
     let id = authConnectionId;
     if (groupedAuthConnectionId) {

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

@@ -1,13 +1,15 @@
 import { createElement } from 'react';
 import { WalletServicesContextProvider } from './context/WalletServicesInnerContext.js';
-import { Web3AuthInnerProvider, Web3AuthInnerContext } from './context/Web3AuthInnerContext.js';
+import { Web3AuthInnerProvider } from './context/Web3AuthInnerContext.js';
+import { Web3AuthInnerContext } from '@web3auth/no-modal/react';
 
 function Web3AuthProvider({
   config,
   initialState,
   children
 }) {
-  const pluginChild = /*#__PURE__*/createElement(WalletServicesContextProvider, {
+  const SharedWalletServicesContextProvider = WalletServicesContextProvider;
+  const pluginChild = /*#__PURE__*/createElement(SharedWalletServicesContextProvider, {
     context: Web3AuthInnerContext
   }, children);
   return /*#__PURE__*/createElement(Web3AuthInnerProvider, {