@web3auth/modal 11.0.0-beta.0 → 11.0.0-beta.1

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

@@ -1,22 +1,25 @@
 import _objectSpread from '@babel/runtime/helpers/objectSpread2';
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import { serializeError } from '@web3auth/auth';
-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, 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';
 
 class Web3Auth extends Web3AuthNoModal {
   constructor(options, initialState) {
-    var _this$options$uiConfi;
     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
@@ -33,6 +36,13 @@ class Web3Auth extends Web3AuthNoModal {
       }
     });
     _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);
@@ -51,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);
@@ -112,7 +126,8 @@ class Web3Auth extends Web3AuthNoModal {
     }
     if (!this.options.uiConfig) this.options.uiConfig = {};
     if (this.options.modalConfig) this.modalConfig = this.options.modalConfig;
-    this.consentRequired = ((_this$options$uiConfi = this.options.uiConfig.consentConfig) === null || _this$options$uiConfi === void 0 ? void 0 : _this$options$uiConfi.required) || false;
+    // 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) {
@@ -133,7 +148,7 @@ class Web3Auth extends Web3AuthNoModal {
     });
     let trackData = {};
     try {
-      var _this$options$uiConfi2, _authConnector$authIn, _this$coreOptions$uiC;
+      var _authConnector$authIn, _this$coreOptions$uiC;
       const {
         signal
       } = options || {};
@@ -179,7 +194,7 @@ class Web3Auth extends Web3AuthNoModal {
         onAcceptConsent: this.onAcceptConsent,
         onDeclineConsent: this.onDeclineConsent
       });
-      this.consentRequired = ((_this$options$uiConfi2 = this.options.uiConfig.consentConfig) === null || _this$options$uiConfi2 === void 0 ? void 0 : _this$options$uiConfi2.required) || false;
+      this.consentRequired = this.loginModal.consentRequired;
       await withAbort(() => this.loginModal.initModal(), signal);
 
       // setup common JRPC provider
@@ -234,9 +249,11 @@ class Web3Auth extends Web3AuthNoModal {
   async connect() {
     if (!this.loginModal) throw WalletInitializationError.notReady("Login modal is not initialized");
     // if already connected return connection
-    if (this.connectedConnectorName && CONNECTED_STATUSES.includes(this.status) && this.connection) return this.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 handleCompletion = () => {
@@ -249,6 +266,22 @@ class Web3Auth extends Web3AuthNoModal {
         }
         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, handleCompletion);
         this.removeListener(CONNECTOR_EVENTS.AUTHORIZED, handleCompletion);
@@ -265,7 +298,7 @@ class Web3Auth extends Web3AuthNoModal {
         }
       };
       if (this.consentRequired) {
-        this.once(CONNECTOR_EVENTS.CONSENT_ACCEPTED, handleCompletion);
+        this.once(CONNECTOR_EVENTS.CONSENT_ACCEPTED, handleConsentAccepted);
       }
       if (this.coreOptions.initialAuthenticationMode === CONNECTOR_INITIAL_AUTHENTICATION_MODE.CONNECT_AND_SIGN) {
         this.once(CONNECTOR_EVENTS.AUTHORIZED, handleCompletion);
@@ -279,6 +312,115 @@ class Web3Auth extends Web3AuthNoModal {
   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 || {});
@@ -301,26 +443,26 @@ class Web3Auth extends Web3AuthNoModal {
     this.options.uiConfig.loginMethodsOrder = loginMethodsOrder;
   }
   getInitializationTrackData() {
-    var _this$modalConfig, _this$modalConfig2, _this$modalConfig3, _this$options$uiConfi3, _this$options$uiConfi4, _this$options$uiConfi5, _this$options$uiConfi6, _this$options$uiConfi7, _this$options$uiConfi8, _this$options$uiConfi9, _this$options$uiConfi0, _this$options$uiConfi1, _this$options$uiConfi10, _this$options$uiConfi11, _this$options$uiConfi12, _this$options$uiConfi13, _this$options$uiConfi14;
+    var _this$modalConfig, _this$modalConfig2, _this$modalConfig3, _this$options$uiConfi, _this$options$uiConfi2, _this$options$uiConfi3, _this$options$uiConfi4, _this$options$uiConfi5, _this$options$uiConfi6, _this$options$uiConfi7, _this$options$uiConfi8, _this$options$uiConfi9, _this$options$uiConfi0, _this$options$uiConfi1, _this$options$uiConfi10, _this$options$uiConfi11, _this$options$uiConfi12;
     return _objectSpread(_objectSpread({}, super.getInitializationTrackData()), {}, {
       modal_hide_wallet_discovery: (_this$modalConfig = this.modalConfig) === null || _this$modalConfig === void 0 ? void 0 : _this$modalConfig.hideWalletDiscovery,
       modal_connectors: Object.keys(((_this$modalConfig2 = this.modalConfig) === null || _this$modalConfig2 === void 0 ? void 0 : _this$modalConfig2.connectors) || {}),
       modal_auth_connector_login_methods: Object.keys(((_this$modalConfig3 = this.modalConfig) === null || _this$modalConfig3 === void 0 || (_this$modalConfig3 = _this$modalConfig3.connectors) === null || _this$modalConfig3 === void 0 || (_this$modalConfig3 = _this$modalConfig3[WALLET_CONNECTORS.AUTH]) === null || _this$modalConfig3 === void 0 ? void 0 : _this$modalConfig3.loginMethods) || {}),
       // UI config
-      ui_login_methods_order: (_this$options$uiConfi3 = this.options.uiConfig) === null || _this$options$uiConfi3 === void 0 ? void 0 : _this$options$uiConfi3.loginMethodsOrder,
-      ui_modal_z_index: (_this$options$uiConfi4 = this.options.uiConfig) === null || _this$options$uiConfi4 === void 0 ? void 0 : _this$options$uiConfi4.modalZIndex,
-      ui_display_errors_on_modal: (_this$options$uiConfi5 = this.options.uiConfig) === null || _this$options$uiConfi5 === void 0 ? void 0 : _this$options$uiConfi5.displayErrorsOnModal,
-      ui_login_grid_col: (_this$options$uiConfi6 = this.options.uiConfig) === null || _this$options$uiConfi6 === void 0 ? void 0 : _this$options$uiConfi6.loginGridCol,
-      ui_primary_button: (_this$options$uiConfi7 = this.options.uiConfig) === null || _this$options$uiConfi7 === void 0 ? void 0 : _this$options$uiConfi7.primaryButton,
-      ui_modal_widget_type: (_this$options$uiConfi8 = this.options.uiConfig) === null || _this$options$uiConfi8 === void 0 ? void 0 : _this$options$uiConfi8.widgetType,
-      ui_modal_target_id_used: Boolean((_this$options$uiConfi9 = this.options.uiConfig) === null || _this$options$uiConfi9 === void 0 ? void 0 : _this$options$uiConfi9.targetId),
-      ui_modal_logo_alignment: (_this$options$uiConfi0 = this.options.uiConfig) === null || _this$options$uiConfi0 === void 0 ? void 0 : _this$options$uiConfi0.logoAlignment,
-      ui_modal_border_radius_type: (_this$options$uiConfi1 = this.options.uiConfig) === null || _this$options$uiConfi1 === void 0 ? void 0 : _this$options$uiConfi1.borderRadiusType,
-      ui_modal_button_radius_type: (_this$options$uiConfi10 = this.options.uiConfig) === null || _this$options$uiConfi10 === void 0 ? void 0 : _this$options$uiConfi10.buttonRadiusType,
-      ui_modal_sign_in_methods: (_this$options$uiConfi11 = this.options.uiConfig) === null || _this$options$uiConfi11 === void 0 ? void 0 : _this$options$uiConfi11.signInMethods,
-      ui_modal_add_previous_login_hint: (_this$options$uiConfi12 = this.options.uiConfig) === null || _this$options$uiConfi12 === void 0 ? void 0 : _this$options$uiConfi12.addPreviousLoginHint,
-      ui_modal_display_installed_external_wallets: (_this$options$uiConfi13 = this.options.uiConfig) === null || _this$options$uiConfi13 === void 0 ? void 0 : _this$options$uiConfi13.displayInstalledExternalWallets,
-      ui_modal_display_external_wallets_count: (_this$options$uiConfi14 = this.options.uiConfig) === null || _this$options$uiConfi14 === void 0 ? void 0 : _this$options$uiConfi14.displayExternalWalletsCount
+      ui_login_methods_order: (_this$options$uiConfi = this.options.uiConfig) === null || _this$options$uiConfi === void 0 ? void 0 : _this$options$uiConfi.loginMethodsOrder,
+      ui_modal_z_index: (_this$options$uiConfi2 = this.options.uiConfig) === null || _this$options$uiConfi2 === void 0 ? void 0 : _this$options$uiConfi2.modalZIndex,
+      ui_display_errors_on_modal: (_this$options$uiConfi3 = this.options.uiConfig) === null || _this$options$uiConfi3 === void 0 ? void 0 : _this$options$uiConfi3.displayErrorsOnModal,
+      ui_login_grid_col: (_this$options$uiConfi4 = this.options.uiConfig) === null || _this$options$uiConfi4 === void 0 ? void 0 : _this$options$uiConfi4.loginGridCol,
+      ui_primary_button: (_this$options$uiConfi5 = this.options.uiConfig) === null || _this$options$uiConfi5 === void 0 ? void 0 : _this$options$uiConfi5.primaryButton,
+      ui_modal_widget_type: (_this$options$uiConfi6 = this.options.uiConfig) === null || _this$options$uiConfi6 === void 0 ? void 0 : _this$options$uiConfi6.widgetType,
+      ui_modal_target_id_used: Boolean((_this$options$uiConfi7 = this.options.uiConfig) === null || _this$options$uiConfi7 === void 0 ? void 0 : _this$options$uiConfi7.targetId),
+      ui_modal_logo_alignment: (_this$options$uiConfi8 = this.options.uiConfig) === null || _this$options$uiConfi8 === void 0 ? void 0 : _this$options$uiConfi8.logoAlignment,
+      ui_modal_border_radius_type: (_this$options$uiConfi9 = this.options.uiConfig) === null || _this$options$uiConfi9 === void 0 ? void 0 : _this$options$uiConfi9.borderRadiusType,
+      ui_modal_button_radius_type: (_this$options$uiConfi0 = this.options.uiConfig) === null || _this$options$uiConfi0 === void 0 ? void 0 : _this$options$uiConfi0.buttonRadiusType,
+      ui_modal_sign_in_methods: (_this$options$uiConfi1 = this.options.uiConfig) === null || _this$options$uiConfi1 === void 0 ? void 0 : _this$options$uiConfi1.signInMethods,
+      ui_modal_add_previous_login_hint: (_this$options$uiConfi10 = this.options.uiConfig) === null || _this$options$uiConfi10 === void 0 ? void 0 : _this$options$uiConfi10.addPreviousLoginHint,
+      ui_modal_display_installed_external_wallets: (_this$options$uiConfi11 = this.options.uiConfig) === null || _this$options$uiConfi11 === void 0 ? void 0 : _this$options$uiConfi11.displayInstalledExternalWallets,
+      ui_modal_display_external_wallets_count: (_this$options$uiConfi12 = this.options.uiConfig) === null || _this$options$uiConfi12 === void 0 ? void 0 : _this$options$uiConfi12.displayExternalWalletsCount
     });
   }
   filterWalletRegistry(walletRegistry, projectConfig) {
@@ -593,12 +735,12 @@ class Web3Auth extends Web3AuthNoModal {
         // note: not adding cachedWallet to modal if it is external wallet.
         // adding it later if no in-app wallets are available.
         if (connector.type === CONNECTOR_CATEGORY.IN_APP) {
-          var _this$modalConfig$con6, _this$options$uiConfi15, _this$options$uiConfi16, _this$options$uiConfi17;
+          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(loginMethods, ((_this$options$uiConfi15 = this.options.uiConfig) === null || _this$options$uiConfi15 === void 0 ? void 0 : _this$options$uiConfi15.loginMethodsOrder) || AUTH_PROVIDERS, _objectSpread(_objectSpread({}, this.options.uiConfig), {}, {
-            loginGridCol: ((_this$options$uiConfi16 = this.options.uiConfig) === null || _this$options$uiConfi16 === void 0 ? void 0 : _this$options$uiConfi16.loginGridCol) || 3,
-            primaryButton: ((_this$options$uiConfi17 = this.options.uiConfig) === null || _this$options$uiConfi17 === void 0 ? void 0 : _this$options$uiConfi17.primaryButton) || "socialLogin"
+          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"
           }));
         }
       } catch (error) {
@@ -612,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);
 
@@ -625,7 +768,7 @@ 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);
@@ -655,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/index.js

@@ -1,4 +1,4 @@
+export { useAuthTokenInfo, useChain, useCheckout, useEnableMFA, useFunding, useManageMFA, useReceive, useSwap, useSwitchChain, useWalletConnectScanner, useWalletServicesPlugin, useWalletUI, useWallets, useWeb3AuthDisconnect, useWeb3AuthUser } from '@web3auth/no-modal/react';
 export { useWeb3Auth } from './hooks/useWeb3Auth.js';
 export { useWeb3AuthConnect } from './hooks/useWeb3AuthConnect.js';
-export { useAuthTokenInfo, useChain, useCheckout, useEnableMFA, useFunding, useManageMFA, useReceive, useSwap, useSwitchChain, useWalletConnectScanner, useWalletServicesPlugin, useWalletUI, useWeb3AuthDisconnect, useWeb3AuthUser } from '@web3auth/no-modal/react';
 export { Web3AuthProvider } from './Web3AuthProvider.js';