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

package/dist/lib.cjs/types/ui/loginModal.d.ts

@@ -1,17 +1,19 @@
-import "./css/web3auth.css";
-import { SafeEventEmitter } from "@web3auth/auth";
-import { BaseConnectorConfig, LoginMethodConfig, WALLET_CONNECTOR_TYPE } from "@web3auth/no-modal";
-import { LoginModalProps, UIConfig } from "./interfaces";
-export declare class LoginModal extends SafeEventEmitter {
+import "./css/index.css";
+import { type BaseConnectorConfig, type LoginMethodConfig, type WALLET_CONNECTOR_TYPE } from "@web3auth/no-modal";
+import { LoginModalCallbacks, LoginModalProps, UIConfig } from "./interfaces";
+export declare class LoginModal {
     private uiConfig;
     private stateEmitter;
     private chainNamespaces;
     private walletRegistry;
-    constructor(uiConfig: LoginModalProps);
+    private callbacks;
+    constructor(uiConfig: LoginModalProps, callbacks: LoginModalCallbacks);
     get isDark(): boolean;
     initModal: () => Promise<void>;
     addSocialLogins: (connector: WALLET_CONNECTOR_TYPE, loginMethods: LoginMethodConfig, loginMethodsOrder: string[], uiConfig: Omit<UIConfig, "connectorListener">) => void;
-    addWalletLogins: (externalWalletsConfig: Record<string, BaseConnectorConfig>, options: {
+    addWalletLogins: (externalWalletsConfig: Record<string, BaseConnectorConfig>, options?: {
+        externalWalletsInitialized: boolean;
+        externalWalletsVisibility: boolean;
         showExternalWalletsOnly: boolean;
     }) => void;
     open: () => void;

package/dist/lib.cjs/types/ui/utils.d.ts

@@ -1,10 +1,25 @@
-import { type LANGUAGE_TYPE } from "@web3auth/auth";
+import { LANGUAGE_TYPE } from "@web3auth/auth";
+import { ClassValue } from "clsx";
+import { browser, mobileOs, platform } from "./interfaces";
+/** Merge classes with tailwind-merge with clsx full feature and memoization */
+export declare function cn(...inputs: ClassValue[]): string;
+export declare const getBrowserExtensionUrl: (browserType: browser, walletId: string) => string;
+export declare const getMobileInstallLink: (os: mobileOs, appId: string) => string;
+export declare const getOsName: (os: mobileOs) => "iOS" | "Android" | "";
+export declare const getBrowserName: (browserType: browser) => string;
+export declare const getIcons: (icon: string) => string;
 export declare function validateImageUrl(url: string): Promise<boolean>;
 export declare function getNetworkIconId(ticker: string): Promise<string>;
-export declare const passwordlessBackendUrl = "https://api-passwordless.web3auth.io";
+export declare const passwordlessBackendUrl = "https://api.web3auth.io/passwordless-service";
 export declare const getUserCountry: () => Promise<{
     country: string;
     dialCode: string;
 } | null>;
 export declare const validatePhoneNumber: (phoneNumber: string) => Promise<string | boolean>;
 export declare const getUserLanguage: (defaultLanguage: string | undefined) => LANGUAGE_TYPE;
+export declare const getPlatform: () => platform;
+export declare function formatIOSMobile(params: {
+    uri: string;
+    link?: string;
+}): string;
+export declare const getErrorMessages: (errorCode: string) => string;

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

@@ -1,7 +1,7 @@
 function styleInject(css, ref) {
   if (ref === void 0) ref = {};
   var insertAt = ref.insertAt;
-  if (!css || typeof document === 'undefined') {
+  if (typeof document === 'undefined') {
     return;
   }
   var head = document.head || document.getElementsByTagName('head')[0];

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

@@ -1,9 +1,9 @@
 import _objectSpread from '@babel/runtime/helpers/objectSpread2';
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
-import { Web3AuthNoModal, cloneDeep, log, CONNECTOR_EVENTS, WalletInitializationError, CONNECTOR_STATUS, fetchProjectConfig, fetchWalletRegistry, WALLET_CONNECTORS, CONNECTOR_NAMES, CONNECTOR_CATEGORY } from '@web3auth/no-modal';
+import { Web3AuthNoModal, cloneDeep, WALLET_CONNECTORS, log, CONNECTOR_STATUS, CONNECTOR_EVENTS, WalletInitializationError, fetchProjectConfig, fetchWalletRegistry, CONNECTOR_CATEGORY, CONNECTOR_NAMES } from '@web3auth/no-modal';
 import deepmerge from 'deepmerge';
 import { defaultConnectorsModalConfig, walletRegistryUrl } from './config.js';
-import { AUTH_PROVIDERS, capitalizeFirstLetter } from './ui/config.js';
+import { AUTH_PROVIDERS_NAMES, AUTH_PROVIDERS, capitalizeFirstLetter } from './ui/config.js';
 import { LOGIN_MODAL_EVENTS } from './ui/interfaces.js';
 import { LoginModal } from './ui/loginModal.js';
 import { getUserLanguage } from './ui/utils.js';
@@ -14,6 +14,54 @@ class Web3Auth extends Web3AuthNoModal {
     _defineProperty(this, "loginModal", void 0);
     _defineProperty(this, "options", void 0);
     _defineProperty(this, "modalConfig", cloneDeep(defaultConnectorsModalConfig));
+    _defineProperty(this, "onInitExternalWallets", async params => {
+      if (params.externalWalletsInitialized) return;
+      // initialize WC connector only as other external wallets are initialized in initModal
+      await this.initExternalConnectors(this.connectors.filter(x => x.name === WALLET_CONNECTORS.WALLET_CONNECT_V2), {
+        externalWalletsInitialized: true,
+        externalWalletsVisibility: true
+      });
+    });
+    _defineProperty(this, "onSocialLogin", async params => {
+      try {
+        await this.connectTo(params.connector, params.loginParams);
+      } catch (error) {
+        log.error(`Error while connecting to connector: ${params.connector}`, error);
+      }
+    });
+    _defineProperty(this, "onExternalWalletLogin", async params => {
+      try {
+        await this.connectTo(params.connector, params.loginParams);
+      } catch (error) {
+        log.error(`Error while connecting to connector: ${params.connector}`, error);
+      }
+    });
+    _defineProperty(this, "onModalVisibility", async visibility => {
+      log.debug("is login modal visible", visibility);
+      this.emit(LOGIN_MODAL_EVENTS.MODAL_VISIBILITY, visibility);
+      const wcConnector = this.getConnector(WALLET_CONNECTORS.WALLET_CONNECT_V2);
+      if (wcConnector) {
+        const walletConnectStatus = wcConnector === null || wcConnector === void 0 ? void 0 : wcConnector.status;
+        log.debug("trying refreshing wc session", visibility, walletConnectStatus);
+        if (visibility && (walletConnectStatus === CONNECTOR_STATUS.READY || walletConnectStatus === CONNECTOR_STATUS.CONNECTING)) {
+          log.debug("refreshing wc session");
+
+          // refreshing session for wallet connect whenever modal is opened.
+          try {
+            const initialChain = this.getInitialChainIdForConnector(wcConnector);
+            wcConnector.connect({
+              chainId: initialChain.chainId
+            });
+          } catch (error) {
+            log.error(`Error while disconnecting to wallet connect in core`, error);
+          }
+        }
+        if (!visibility && this.status === CONNECTOR_STATUS.CONNECTED && (walletConnectStatus === CONNECTOR_STATUS.READY || walletConnectStatus === CONNECTOR_STATUS.CONNECTING)) {
+          log.debug("this stops wc connector from trying to reconnect once proposal expires");
+          wcConnector.status = CONNECTOR_STATUS.READY;
+        }
+      }
+    });
     this.options = _objectSpread({}, options);
     if (!this.options.uiConfig) this.options.uiConfig = {};
     if (this.options.modalConfig) this.modalConfig = this.options.modalConfig;
@@ -30,6 +78,7 @@ class Web3Auth extends Web3AuthNoModal {
     this.options.uiConfig = deepmerge(cloneDeep(projectConfig.whitelabel || {}), this.options.uiConfig || {});
     if (!this.options.uiConfig.defaultLanguage) this.options.uiConfig.defaultLanguage = getUserLanguage(this.options.uiConfig.defaultLanguage);
     if (!this.options.uiConfig.mode) this.options.uiConfig.mode = "light";
+    this.options.uiConfig = deepmerge(projectConfig.loginModal || {}, this.options.uiConfig || {});
 
     // init config
     super.initAccountAbstractionConfig(projectConfig);
@@ -43,10 +92,16 @@ class Web3Auth extends Web3AuthNoModal {
     } = this.filterWalletRegistry(walletRegistry, projectConfig);
     this.loginModal = new LoginModal(_objectSpread(_objectSpread({}, this.options.uiConfig), {}, {
       connectorListener: this,
+      web3authClientId: this.options.clientId,
+      web3authNetwork: this.options.web3AuthNetwork,
       chainNamespaces: [...new Set(((_this$coreOptions$cha = this.coreOptions.chains) === null || _this$coreOptions$cha === void 0 ? void 0 : _this$coreOptions$cha.map(x => x.chainNamespace)) || [])],
       walletRegistry: filteredWalletRegistry
-    }));
-    this.subscribeToLoginModalEvents();
+    }), {
+      onInitExternalWallets: this.onInitExternalWallets,
+      onSocialLogin: this.onSocialLogin,
+      onExternalWalletLogin: this.onExternalWalletLogin,
+      onModalVisibility: this.onModalVisibility
+    });
     await this.loginModal.initModal();
 
     // setup common JRPC provider
@@ -73,18 +128,29 @@ class Web3Auth extends Web3AuthNoModal {
     if (this.connectedConnectorName && this.status === CONNECTOR_STATUS.CONNECTED && this.provider) return this.provider;
     this.loginModal.open();
     return new Promise((resolve, reject) => {
-      this.once(CONNECTOR_EVENTS.CONNECTED, () => {
+      // remove all listeners when promise is resolved or rejected.
+      // this is to prevent memory leaks if user clicks connect button multiple times.
+      const handleConnected = () => {
+        this.removeListener(CONNECTOR_EVENTS.ERRORED, handleError);
+        this.removeListener(LOGIN_MODAL_EVENTS.MODAL_VISIBILITY, handleVisibility);
         return resolve(this.provider);
-      });
-      this.once(CONNECTOR_EVENTS.ERRORED, err => {
+      };
+      const handleError = err => {
+        this.removeListener(CONNECTOR_EVENTS.CONNECTED, handleConnected);
+        this.removeListener(LOGIN_MODAL_EVENTS.MODAL_VISIBILITY, handleVisibility);
         return reject(err);
-      });
-      this.once(LOGIN_MODAL_EVENTS.MODAL_VISIBILITY, visibility => {
+      };
+      const handleVisibility = visibility => {
         // modal is closed but user is not connected to any wallet.
         if (!visibility && this.status !== CONNECTOR_STATUS.CONNECTED) {
+          this.removeListener(CONNECTOR_EVENTS.CONNECTED, handleConnected);
+          this.removeListener(CONNECTOR_EVENTS.ERRORED, handleError);
           return reject(new Error("User closed the modal"));
         }
-      });
+      };
+      this.once(CONNECTOR_EVENTS.CONNECTED, handleConnected);
+      this.once(CONNECTOR_EVENTS.ERRORED, handleError);
+      this.once(LOGIN_MODAL_EVENTS.MODAL_VISIBILITY, handleVisibility);
     });
   }
   filterWalletRegistry(walletRegistry, projectConfig) {
@@ -102,6 +168,8 @@ class Web3Auth extends Web3AuthNoModal {
     if (disableAllOtherWallets) {
       Object.keys(walletRegistry.others).forEach(wallet => disabledExternalWallets.add(wallet));
     }
+    // always show MetaMask, force enable it
+    disabledExternalWallets.delete(WALLET_CONNECTORS.METAMASK);
 
     // remove wallets that are disabled in project config from wallet registry
     const filteredWalletRegistry = cloneDeep(walletRegistry);
@@ -120,12 +188,16 @@ class Web3Auth extends Web3AuthNoModal {
     let projectConfig;
     try {
       var _this$options$account;
-      projectConfig = await fetchProjectConfig(this.options.clientId, this.options.web3AuthNetwork, (_this$options$account = this.options.accountAbstractionConfig) === null || _this$options$account === void 0 ? void 0 : _this$options$account.smartAccountType);
+      projectConfig = await fetchProjectConfig({
+        clientId: this.options.clientId,
+        web3AuthNetwork: this.options.web3AuthNetwork,
+        aaProvider: (_this$options$account = this.options.accountAbstractionConfig) === null || _this$options$account === void 0 ? void 0 : _this$options$account.smartAccountType,
+        authBuildEnv: this.options.authBuildEnv
+      });
     } catch (e) {
       log.error("Failed to fetch project configurations", e);
       throw WalletInitializationError.notReady("failed to fetch project configurations", e);
     }
-
     // get wallet registry
     let walletRegistry = {
       others: {},
@@ -160,15 +232,28 @@ class Web3Auth extends Web3AuthNoModal {
       hasInAppConnectors,
       hasExternalConnectors
     } = await this.checkConnectorAvailability(filteredConnectorNames);
+    const filteredConnectors = connectors.filter(x => filteredConnectorNames.includes(x.name));
     if (hasInAppConnectors) {
-      await this.initInAppAndCachedConnectors(connectors, filteredConnectorNames);
-      // show connect button if external wallets are available
-      if (hasExternalConnectors) this.loginModal.initExternalWalletContainer();
-    } else if (hasExternalConnectors) {
-      // if no in app wallet is available then initialize external wallets in modal
-      await this.initExternalConnectors(connectors, false, {
-        showExternalWalletsOnly: true
-      });
+      await this.initInAppAndCachedConnectors(filteredConnectors);
+    }
+    if (hasExternalConnectors) {
+      if (hasInAppConnectors) {
+        // show connect button if both in-app and external wallets are available
+        this.loginModal.initExternalWalletContainer();
+        // initialize installed external wallets (except WC), don't mark external wallets as fully initialized
+        this.initExternalConnectors(filteredConnectors.filter(x => x.type === CONNECTOR_CATEGORY.EXTERNAL && x.name !== WALLET_CONNECTORS.WALLET_CONNECT_V2), {
+          externalWalletsInitialized: false,
+          showExternalWalletsOnly: false,
+          externalWalletsVisibility: false
+        });
+      } else {
+        // if no in app wallet is available then initialize all external wallets in modal
+        await this.initExternalConnectors(filteredConnectors.filter(x => x.type === CONNECTOR_CATEGORY.EXTERNAL), {
+          externalWalletsInitialized: true,
+          showExternalWalletsOnly: true,
+          externalWalletsVisibility: true
+        });
+      }
     }
 
     // emit ready event if connector is ready
@@ -181,25 +266,31 @@ class Web3Auth extends Web3AuthNoModal {
     projectConfig,
     disabledExternalWallets
   }) {
-    var _this$modalConfig2, _this$modalConfig3, _projectConfig$loginM, _projectConfig$loginM2;
-    // Auth connector config: merge code config with config from dashboard
+    var _this$modalConfig2;
+    // Auth connector config: populate this with the default config for auth connectors.
     const loginMethods = {};
+    const embedWalletConfigMap = new Map();
     for (const authConnectionConfig of projectConfig.embeddedWalletAuth || []) {
       const {
         isDefault,
-        authConnectionId,
+        authConnection,
         groupedAuthConnectionId,
-        authConnection
+        authConnectionId
       } = authConnectionConfig;
-      // for custom auth connections, authConnectionId or groupedAuthConnectionId are required.
-      if (!isDefault && (!authConnectionId || !groupedAuthConnectionId)) return;
-      loginMethods[authConnection] = _objectSpread(_objectSpread({
-        name: authConnection
-      }, authConnectionConfig), {}, {
-        showOnModal: true,
-        showOnDesktop: true,
-        showOnMobile: true
-      });
+      if (isDefault) {
+        loginMethods[authConnection] = {
+          name: AUTH_PROVIDERS_NAMES[authConnection],
+          authConnection: authConnection,
+          authConnectionId: authConnectionId,
+          groupedAuthConnectionId: groupedAuthConnectionId,
+          extraLoginOptions: authConnectionConfig.jwtParameters,
+          isDefault: true,
+          showOnModal: true,
+          showOnDesktop: true,
+          showOnMobile: true
+        };
+      }
+      embedWalletConfigMap.set(groupedAuthConnectionId || authConnectionId, authConnectionConfig);
     }
     const dashboardConnectorConfig = {
       [WALLET_CONNECTORS.AUTH]: {
@@ -207,29 +298,41 @@ class Web3Auth extends Web3AuthNoModal {
         loginMethods
       }
     };
+
+    // populate the user config data with the dashboard config.
     if ((_this$modalConfig2 = this.modalConfig) !== null && _this$modalConfig2 !== void 0 && (_this$modalConfig2 = _this$modalConfig2.connectors) !== null && _this$modalConfig2 !== void 0 && _this$modalConfig2[WALLET_CONNECTORS.AUTH]) {
       if (!this.modalConfig.connectors[WALLET_CONNECTORS.AUTH].loginMethods) this.modalConfig.connectors[WALLET_CONNECTORS.AUTH].loginMethods = {};
     }
-    this.modalConfig.connectors = deepmerge(dashboardConnectorConfig, cloneDeep(this.modalConfig.connectors || {}));
-    // TODO: validate modal connector config here.!!
-
-    if ((_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 && _this$modalConfig3.loginMethods) {
-      const authProviders = new Set(AUTH_PROVIDERS);
-      Object.keys(this.modalConfig.connectors[WALLET_CONNECTORS.AUTH].loginMethods).forEach(key => {
-        if (!authProviders.has(key)) {
-          throw WalletInitializationError.invalidParams(`Invalid auth connection: ${key}`);
-        }
-      });
-    }
+    const authProviders = new Set(AUTH_PROVIDERS);
+    Object.keys(this.modalConfig.connectors[WALLET_CONNECTORS.AUTH].loginMethods).forEach(key => {
+      const userConfig = this.modalConfig.connectors[WALLET_CONNECTORS.AUTH].loginMethods[key];
+      const {
+        authConnectionId,
+        groupedAuthConnectionId
+      } = userConfig;
+      if (!authProviders.has(key)) {
+        throw WalletInitializationError.invalidParams(`Invalid auth connection: ${key}`);
+      }
 
-    // external wallets config
-    const isExternalWalletEnabled = Boolean(projectConfig.externalWalletAuth);
-    const isInstalledWalletWalletDisplayed = Boolean((_projectConfig$loginM = (_projectConfig$loginM2 = projectConfig.loginModal) === null || _projectConfig$loginM2 === void 0 ? void 0 : _projectConfig$loginM2.displayInstalledExternalWallets) !== null && _projectConfig$loginM !== void 0 ? _projectConfig$loginM : true);
+      // only throw error if one of them is defined in the config.
+      if (groupedAuthConnectionId || authConnectionId) {
+        if (!embedWalletConfigMap.has(groupedAuthConnectionId || authConnectionId)) throw WalletInitializationError.invalidParams(`Invalid auth connection config, authConnection: ${key}. Missing AuthConnectionConfig from the dashboard.`);
+        const configFromDashboard = embedWalletConfigMap.get(groupedAuthConnectionId || authConnectionId);
+        this.modalConfig.connectors[WALLET_CONNECTORS.AUTH].loginMethods[key] = {
+          authConnection: configFromDashboard.authConnection,
+          authConnectionId: configFromDashboard.authConnectionId,
+          groupedAuthConnectionId: configFromDashboard.groupedAuthConnectionId,
+          isDefault: configFromDashboard.isDefault || false,
+          extraLoginOptions: _objectSpread(_objectSpread({}, configFromDashboard.jwtParameters), userConfig.extraLoginOptions)
+        };
+      }
+    });
+    this.modalConfig.connectors = deepmerge(dashboardConnectorConfig, cloneDeep(this.modalConfig.connectors || {}));
 
     // merge default connectors with the custom configured connectors.
     const allConnectorNames = [...new Set([...Object.keys(this.modalConfig.connectors || {}), ...this.connectors.map(connector => connector.name)])];
     const connectorNames = allConnectorNames.map(connectorName => {
-      var _this$modalConfig4, _this$modalConfig$con, _this$modalConfig$con2;
+      var _this$modalConfig3, _this$modalConfig$con, _this$modalConfig$con2;
       // start with the default config of connector.
       const defaultConnectorConfig = {
         label: CONNECTOR_NAMES[connectorName] || connectorName.split("-").map(capitalizeFirstLetter).join(" "),
@@ -237,7 +340,7 @@ class Web3Auth extends Web3AuthNoModal {
         showOnMobile: true,
         showOnDesktop: true
       };
-      this.modalConfig.connectors[connectorName] = _objectSpread(_objectSpread({}, defaultConnectorConfig), ((_this$modalConfig4 = this.modalConfig) === null || _this$modalConfig4 === void 0 || (_this$modalConfig4 = _this$modalConfig4.connectors) === null || _this$modalConfig4 === void 0 ? void 0 : _this$modalConfig4[connectorName]) || {});
+      this.modalConfig.connectors[connectorName] = _objectSpread(_objectSpread({}, defaultConnectorConfig), ((_this$modalConfig3 = this.modalConfig) === null || _this$modalConfig3 === void 0 || (_this$modalConfig3 = _this$modalConfig3.connectors) === null || _this$modalConfig3 === void 0 ? void 0 : _this$modalConfig3[connectorName]) || {});
 
       // check if connector is configured/added by user and exist in connectors map.
       const connector = this.getConnector(connectorName);
@@ -253,18 +356,18 @@ class Web3Auth extends Web3AuthNoModal {
       // skip connector if it is hidden by user
       if (!connectorConfig.showOnModal) return;
 
-      // skip external connector if external wallets are disabled or it is disabled or displayInstalledExternalWallets is false
-      if (connector.type === CONNECTOR_CATEGORY.EXTERNAL) {
+      // skip external connector if external wallets are disabled except for MetaMask
+      const isExternalWalletEnabled = Boolean(projectConfig.externalWalletAuth);
+      if (connector.type === CONNECTOR_CATEGORY.EXTERNAL && connector.name !== WALLET_CONNECTORS.METAMASK) {
         if (!isExternalWalletEnabled) return;
         if (disabledExternalWallets.has(connectorName)) return;
-        if (!isInstalledWalletWalletDisplayed) return;
       }
 
       // skip WC connector if external wallets are disabled or hideWalletDiscovery is true
       if (connectorName === WALLET_CONNECTORS.WALLET_CONNECT_V2) {
-        var _this$modalConfig5;
+        var _this$modalConfig4;
         if (!isExternalWalletEnabled) return;
-        if ((_this$modalConfig5 = this.modalConfig) !== null && _this$modalConfig5 !== void 0 && _this$modalConfig5.hideWalletDiscovery) return;
+        if ((_this$modalConfig4 = this.modalConfig) !== null && _this$modalConfig4 !== void 0 && _this$modalConfig4.hideWalletDiscovery) return;
       }
       this.modalConfig.connectors[connectorName] = connectorConfig;
       return connectorName;
@@ -296,10 +399,9 @@ class Web3Auth extends Web3AuthNoModal {
       hasExternalConnectors
     };
   }
-  async initInAppAndCachedConnectors(connectors, connectorNames) {
-    await Promise.all(connectorNames.map(async connectorName => {
-      const connector = connectors.find(x => x.name === connectorName);
-      if (!connector) return;
+  async initInAppAndCachedConnectors(connectors) {
+    await Promise.all(connectors.map(async connector => {
+      const connectorName = connector.name;
       try {
         // skip if connector is already initialized
         if (connector.status !== CONNECTOR_STATUS.NOT_READY) return;
@@ -333,101 +435,52 @@ class Web3Auth extends Web3AuthNoModal {
       }
     }));
   }
-  async initExternalConnectors(connectors, externalWalletsInitialized, options) {
-    if (externalWalletsInitialized) return;
+  async initExternalConnectors(externalConnectors, options) {
     const connectorsConfig = {};
     // we do it like this because we don't want one slow connector to delay the load of the entire external wallet section.
-    connectors.forEach(async connector => {
+    externalConnectors.forEach(async connector => {
       const connectorName = connector.name;
-      if ((connector === null || connector === void 0 ? void 0 : connector.type) === CONNECTOR_CATEGORY.EXTERNAL) {
-        log.debug("init external wallet", this.cachedConnector, connectorName, connector.status);
-        this.subscribeToConnectorEvents(connector);
+      log.debug("init external wallet", this.cachedConnector, connectorName, connector.status);
+      if (connector.status === CONNECTOR_STATUS.NOT_READY) {
         // we are not initializing cached connector here as it is already being initialized in initModal before.
-        if (this.cachedConnector === connectorName) {
-          return;
+        if (this.cachedConnector === connectorName) return;
+        try {
+          this.subscribeToConnectorEvents(connector);
+          const initialChain = this.getInitialChainIdForConnector(connector);
+          await connector.init({
+            autoConnect: this.cachedConnector === connectorName,
+            chainId: initialChain.chainId
+          });
+          const connectorModalConfig = this.modalConfig.connectors[connectorName];
+          connectorsConfig[connectorName] = _objectSpread(_objectSpread({}, connectorModalConfig), {}, {
+            isInjected: connector.isInjected,
+            icon: connector.icon
+          });
+          this.loginModal.addWalletLogins(connectorsConfig, {
+            showExternalWalletsOnly: !!options.showExternalWalletsOnly,
+            externalWalletsVisibility: !!options.externalWalletsVisibility,
+            externalWalletsInitialized: !!options.externalWalletsInitialized
+          });
+        } catch (error) {
+          log.error(error, "error while initializing connector", connectorName);
         }
-        if (connector.status === CONNECTOR_STATUS.NOT_READY) {
-          try {
-            const initialChain = this.getInitialChainIdForConnector(connector);
-            await connector.init({
-              autoConnect: this.cachedConnector === connectorName,
-              chainId: initialChain.chainId
-            });
-            const connectorModalConfig = this.modalConfig.connectors[connectorName];
-            connectorsConfig[connectorName] = _objectSpread(_objectSpread({}, connectorModalConfig), {}, {
-              isInjected: connector.isInjected
-            });
-            this.loginModal.addWalletLogins(connectorsConfig, {
-              showExternalWalletsOnly: !!(options !== null && options !== void 0 && options.showExternalWalletsOnly)
-            });
-          } catch (error) {
-            log.error(error, "error while initializing connector", connectorName);
-          }
-        } else if (connector.status === CONNECTOR_STATUS.READY || connector.status === CONNECTOR_STATUS.CONNECTING) {
+      } else {
+        if (connector.status === CONNECTOR_STATUS.READY || connector.status === CONNECTOR_STATUS.CONNECTING) {
           // we use connecting status for wallet connect
           const connectorModalConfig = this.modalConfig.connectors[connectorName];
           connectorsConfig[connectorName] = _objectSpread(_objectSpread({}, connectorModalConfig), {}, {
-            isInjected: connector.isInjected
+            isInjected: connector.isInjected,
+            icon: connector.icon
           });
           this.loginModal.addWalletLogins(connectorsConfig, {
-            showExternalWalletsOnly: !!(options !== null && options !== void 0 && options.showExternalWalletsOnly)
+            showExternalWalletsOnly: !!options.showExternalWalletsOnly,
+            externalWalletsVisibility: !!options.externalWalletsVisibility,
+            externalWalletsInitialized: !!options.externalWalletsInitialized
           });
         }
       }
     });
   }
-  subscribeToLoginModalEvents() {
-    this.loginModal.on(LOGIN_MODAL_EVENTS.EXTERNAL_WALLET_LOGIN, async params => {
-      try {
-        await this.connectTo(params.connector);
-      } catch (error) {
-        log.error(`Error while connecting to connector: ${params.connector}`, error);
-      }
-    });
-    this.loginModal.on(LOGIN_MODAL_EVENTS.SOCIAL_LOGIN, async params => {
-      try {
-        await this.connectTo(params.connector, params.loginParams);
-      } catch (error) {
-        log.error(`Error while connecting to connector: ${params.connector}`, error);
-      }
-    });
-    this.loginModal.on(LOGIN_MODAL_EVENTS.INIT_EXTERNAL_WALLETS, async params => {
-      await this.initExternalConnectors(this.connectors, params.externalWalletsInitialized);
-    });
-    this.loginModal.on(LOGIN_MODAL_EVENTS.DISCONNECT, async () => {
-      try {
-        await this.logout();
-      } catch (error) {
-        log.error(`Error while disconnecting`, error);
-      }
-    });
-    this.loginModal.on(LOGIN_MODAL_EVENTS.MODAL_VISIBILITY, async visibility => {
-      log.debug("is login modal visible", visibility);
-      this.emit(LOGIN_MODAL_EVENTS.MODAL_VISIBILITY, visibility);
-      const wcConnector = this.getConnector(WALLET_CONNECTORS.WALLET_CONNECT_V2);
-      if (wcConnector) {
-        const walletConnectStatus = wcConnector === null || wcConnector === void 0 ? void 0 : wcConnector.status;
-        log.debug("trying refreshing wc session", visibility, walletConnectStatus);
-        if (visibility && (walletConnectStatus === CONNECTOR_STATUS.READY || walletConnectStatus === CONNECTOR_STATUS.CONNECTING)) {
-          log.debug("refreshing wc session");
-
-          // refreshing session for wallet connect whenever modal is opened.
-          try {
-            const initialChain = this.getInitialChainIdForConnector(wcConnector);
-            wcConnector.connect({
-              chainId: initialChain.chainId
-            });
-          } catch (error) {
-            log.error(`Error while disconnecting to wallet connect in core`, error);
-          }
-        }
-        if (!visibility && this.status === CONNECTOR_STATUS.CONNECTED && (walletConnectStatus === CONNECTOR_STATUS.READY || walletConnectStatus === CONNECTOR_STATUS.CONNECTING)) {
-          log.debug("this stops wc connector from trying to reconnect once proposal expires");
-          wcConnector.status = CONNECTOR_STATUS.READY;
-        }
-      }
-    });
-  }
 }
 
 export { Web3Auth };

package/dist/lib.esm/packages/modal/src/ui/components/BottomSheet/BottomSheet.js

@@ -0,0 +1,58 @@
+import { cn } from '../../utils.js';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+
+/**
+ * BottomSheet component
+ * @returns BottomSheet component
+ */
+function BottomSheet({
+  isShown,
+  onClose,
+  children,
+  uiConfig
+}) {
+  const {
+    borderRadiusType
+  } = uiConfig;
+  return /*#__PURE__*/jsxs(Fragment, {
+    children: [/*#__PURE__*/jsx("div", {
+      className: cn("w3a--bottom-sheet-bg w3a--fixed w3a--left-0 w3a--top-0 w3a--size-full w3a--transition-opacity w3a--duration-300", {
+        "w3a--rounded-[30px]": borderRadiusType === "large",
+        "w3a--rounded-2xl": borderRadiusType === "medium",
+        "w3a--rounded-none": borderRadiusType === "small"
+      }),
+      onClick: onClose,
+      "aria-hidden": "true",
+      role: "button"
+    }), /*#__PURE__*/jsxs("div", {
+      className: cn(`w3a--fixed w3a--bottom-2 w3a--left-2 w3a--mx-auto w3a--flex w3a--w-[96%] w3a--flex-col 
+      w3a--gap-y-2 w3a--rounded-3xl w3a--border w3a--border-app-gray-100 w3a--bg-app-white w3a--p-4 w3a--shadow-lg w3a--transition-transform w3a--duration-500 
+      w3a--ease-out dark:w3a--border-app-gray-600 dark:w3a--bg-app-dark-surface-main
+      ${isShown ? "w3a--translate-y-0 w3a--delay-700" : "w3a--translate-y-full"}`, {
+        "w3a--rounded-[30px]": borderRadiusType === "large",
+        "w3a--rounded-2xl": borderRadiusType === "medium",
+        "w3a--rounded-none": borderRadiusType === "small"
+      }),
+      children: [/*#__PURE__*/jsx("div", {
+        className: "w3a--absolute w3a--right-4 w3a--top-[16px] w3a--z-10 w3a--cursor-pointer",
+        children: /*#__PURE__*/jsx("svg", {
+          width: "13",
+          height: "13",
+          viewBox: "0 0 13 13",
+          fill: "none",
+          xmlns: "http://www.w3.org/2000/svg",
+          onClick: onClose,
+          className: "w3a--text-app-gray-500 dark:w3a--text-app-gray-200",
+          children: /*#__PURE__*/jsx("path", {
+            fillRule: "evenodd",
+            clipRule: "evenodd",
+            d: "M0.292787 1.29299C0.480314 1.10552 0.734622 1.0002 0.999786 1.0002C1.26495 1.0002 1.51926 1.10552 1.70679 1.29299L5.99979 5.58599L10.2928 1.29299C10.385 1.19748 10.4954 1.1213 10.6174 1.06889C10.7394 1.01648 10.8706 0.988893 11.0034 0.987739C11.1362 0.986585 11.2678 1.01189 11.3907 1.06217C11.5136 1.11245 11.6253 1.1867 11.7192 1.28059C11.8131 1.37449 11.8873 1.48614 11.9376 1.60904C11.9879 1.73193 12.0132 1.86361 12.012 1.99639C12.0109 2.12917 11.9833 2.26039 11.9309 2.38239C11.8785 2.5044 11.8023 2.61474 11.7068 2.70699L7.41379 6.99999L11.7068 11.293C11.8889 11.4816 11.9897 11.7342 11.9875 11.9964C11.9852 12.2586 11.88 12.5094 11.6946 12.6948C11.5092 12.8802 11.2584 12.9854 10.9962 12.9877C10.734 12.9899 10.4814 12.8891 10.2928 12.707L5.99979 8.41399L1.70679 12.707C1.51818 12.8891 1.26558 12.9899 1.00339 12.9877C0.741188 12.9854 0.490376 12.8802 0.304968 12.6948C0.11956 12.5094 0.0143906 12.2586 0.0121121 11.9964C0.00983372 11.7342 0.110629 11.4816 0.292787 11.293L4.58579 6.99999L0.292787 2.70699C0.105316 2.51946 0 2.26515 0 1.99999C0 1.73483 0.105316 1.48052 0.292787 1.29299V1.29299Z",
+            fill: "currentColor"
+          })
+        })
+      }), children]
+    })]
+  });
+}
+
+export { BottomSheet as default };