@web3auth/modal 10.0.0-beta.2 → 10.0.0-beta.3

package/dist/lib.cjs/packages/modal/src/ui/i18n/turkish.json.js

@@ -6,6 +6,9 @@ var modal = {
   "adapter-loader.message": "Devam etmek için {{adapter}} hesabınızı doğrula",
   "adapter-loader.message1": "{{adapter}} doğrula",
   "adapter-loader.message2": "devam edecek hesap",
+  allChains: "Tüm zincirler",
+  "connect-wallet.more-wallets": "Daha fazla cüzdan",
+  connectYourWallet: "Cüzdanınızı bağlayın",
   "errors-invalid-email": "Geçersiz E-posta",
   "errors-invalid-number": "Geçersiz Telefon Numarası",
   "errors-invalid-number-email": "Geçersiz E-posta veya Telefon Numarası",
@@ -13,8 +16,6 @@ var modal = {
   "external.all-wallets": "Tüm cüzdanlar",
   "external.back": "Geri",
   "external.connect": "Cüzdanla devam et",
-  "external.search-text": "Cüzdanınızı görmüyor musunuz?",
-  "external.search-subtext": "Bunun yerine aramayı deneyin",
   "external.connect-wallet": "Cüzdanı Bağla",
   "external.continue": "Harici cüzdanla devam et",
   "external.continue-custom": "{{wallet}} ile devam et",
@@ -25,19 +26,26 @@ var modal = {
   "external.install-mobile-app": "{{os}} uygulamasını yükle",
   "external.installed": "Yüklendi",
   "external.no-wallets-found": "Cüzdan bulunamadı",
+  "external.search-subtext": "Bunun yerine aramayı deneyin",
+  "external.search-text": "Cüzdanınızı görmüyor musunuz?",
   "external.search-wallet": "{{count}} cüzdan ara...",
   "external.select-chain": "Zincir seç",
   "external.select-chain-description": "Bu {{wallet}} cüzdan birden fazla zincir destekler. İstediğiniz zinciri seçin",
   "external.title": "Harici Cüzdan",
   "external.walletconnect-connect": "Bağla",
-  "external.walletconnect-copy": "WalletConnect destekli bir cüzdanla tarayın veya panonuza kopyalamak için QR kodunu tıklayın.",
+  "external.walletconnect-copy": "WalletConnect destekli bir cüzdanla QR kodu tarayın veya bağlantıyı kopyalayın",
   "external.walletconnect-subtitle": "QR kodunu WalletConnect uyumlu bir cüzdanla tarayın",
+  "footer.and": "ve",
+  "footer.by-signing-in": "Giriş yapmak, bizimle ilgili şartları kabul ettiğiniz anlamına gelir.",
   "footer.message": "Öz-yönetimli giriş yapan:",
   "footer.message-new": "Kendi kendine velayet",
   "footer.policy": "Gizlilik Politikası",
+  "footer.privacy-policy": "Gizlilik Politikası",
   "footer.terms": "Kullanım Şartları",
+  "footer.terms-of-service": "Kullanım Şartları",
   "footer.terms-service": "Hizmet Şartları",
   "footer.version": "Versiyon",
+  getWallet: "Cüzdanı al",
   "header-subtitle": "Devam etmek için seçeneklerden birini işaretle",
   "header-subtitle-name": "Tek tıklama ile {{appName}} cüzdanınız",
   "header-subtitle-new": "Tek tıklama ile blockchain cüzdanınız",
@@ -50,6 +58,12 @@ var modal = {
   "network.proceed": "Devam",
   "network.switch-request": "Bu site ağ değiştirmeyi talep ediyor",
   "network.to": "Nereye",
+  "otp.email-subtext": "6 haneli doğrulama kodunu giriniz",
+  "otp.email-subtext-example": "{{email}} adresine gönderildi",
+  "otp.email-title": "Email Doğrulama",
+  "otp.mobile-subtext": "OTP Doğrulama",
+  "otp.mobile-title": "OTP Doğrulama",
+  "otp.success": "Hesabınıza bağlandınız!",
   "passkey.add": "Passkey ekle",
   "passkey.haveExisting": "Mevcut bir passkey'ınız mı var?",
   "passkey.learn-more": "Daha fazla bilgi edin",
@@ -57,10 +71,13 @@ var modal = {
   "passkey.register-desc": "passkeys ile kimliğinizi yüzünüz, parmak iziniz veya güvenlik anahtarlarınız aracılığıyla doğrulayabilirsiniz.",
   "passkey.register-title": "Passkey'ı kaydedin",
   "passkey.use": "Bir passkey'im var",
+  "passwordless.title": "{{title}} ile devam et",
   "popup.phone-body": "Ülke kodunuz otomatik olarak algılanacaktır, ancak farklı bir ülkeden bir telefon numarası kullanıyorsanız, doğru ülke kodunu manuel olarak girmeniz gerekir.",
   "popup.phone-header": "Telefon numarası ve ülke kodu",
   "post-loading.connected": "Hesabınızla bağlandınız",
   "post-loading.something-wrong": "Bir şeyler ters gitti!",
+  resendCode: "Kodu tekrar gönder",
+  resendTimer: " {{timer}} saniye sonra tekrar gönder",
   "social.continue": "Devam et: ",
   "social.continueCustom": "{{adapter}} ile devam et",
   "social.email": "E-posta",
@@ -68,9 +85,10 @@ var modal = {
   "social.email-new": "isim@ornek.com",
   "social.passwordless-cta": "Devam et",
   "social.passwordless-login": "Giriş yapmak",
-  "social.passwordless-title": "E-posta veya Telefon",
+  "social.passwordless-title": "E-posta/Telefon",
   "social.phone": "Telefon",
   "social.policy": "Sosyal medya girişlerinizle ilgili hiçbir veriyi saklamıyoruz.",
+  "social.sign-in": "Giriş yap",
   "social.sms": "Mobil Telefon",
   "social.sms-continue": "Telefon ile devam et",
   "social.sms-invalid-number": "Geçersiz telefon numarası",
@@ -78,39 +96,22 @@ var modal = {
   "social.view-less": "Daha az görüntüle",
   "social.view-less-socials": "Daha az socials görüntüle",
   "social.view-more": "Daha fazla görüntüle",
-  "social.view-more-socials": "Daha fazlasını görüntüle socials",
-  "social.sign-in": "Giriş yap",
-  "footer.by-signing-in": "Giriş yapmak, bizimle ilgili şartları kabul ettiğiniz anlamına gelir.",
-  "footer.terms-of-service": "Kullanım Şartları",
-  "footer.and": "ve",
-  "footer.privacy-policy": "Gizlilik Politikası",
-  "connect-wallet.more-wallets": "Daha fazla cüzdan",
-  "otp.success": "Hesabınıza bağlandınız!",
-  "otp.mobile-title": "OTP Doğrulama",
-  "otp.mobile-subtext": "OTP Doğrulama",
-  "otp.email-title": "Email Doğrulama",
-  "otp.email-subtext": "6 haneli doğrulama kodunu giriniz",
-  "otp.email-subtext-example": "{{email}} adresine gönderildi",
-  "passwordless.title": "{{title}} ile devam et",
-  resendCode: "Kodu tekrar gönder",
-  resendTimer: " {{timer}} saniye sonra tekrar gönder",
-  connectYourWallet: "Cüzdanınızı bağlayın",
-  allChains: "Tüm zincirler"
+  "social.view-more-socials": "Daha fazlasını görüntüle socials"
 };
 var passwordless = {
-  "error-invalid-params": "Eksik ya da hatalı parametreler var.",
-  "error-sending-sms-failed": "SMS gönderilirken bir hata oldu. Lütfen tekrar deneyin.",
-  "error-no-mail-generated": "E-posta oluşturulmadı. Lütfen önce şifresiz akışı başlatın.",
   "error-invalid-link": "Hatalı ya da süresi geçmiş doğrulama linki",
-  "error-new-link-generated-heading": "Yeni doğrulama linki oluşturuldu.",
+  "error-invalid-origin": "Bir şeyler ters gitti, hata kodu: E002",
   "error-invalid-otp": "Hatalı OTP, lütfen tekrar deneyin.",
-  "error-otp-expired": "OTP'nin süresi geçti.",
-  "error-no-sms-generated": "OTP oluşturulmadı. Lütfen önce şifresiz akışı başlatın.",
+  "error-invalid-params": "Eksik ya da hatalı parametreler var.",
   "error-max-retry-limit-reached": "Hatalı deneme limitine ulaştınız. Doğrulamayı tamamlamak için lütfen akışı baştan başlatın.",
-  "error-recaptcha-verification-failed": "Captcha doğrulama hatası. Lütfen tekrar deneyin.",
+  "error-new-link-generated-heading": "Yeni doğrulama linki oluşturuldu.",
+  "error-no-mail-generated": "E-posta oluşturulmadı. Lütfen önce şifresiz akışı başlatın.",
+  "error-no-sms-generated": "OTP oluşturulmadı. Lütfen önce şifresiz akışı başlatın.",
+  "error-otp-expired": "OTP'nin süresi geçti.",
   "error-plan-limit-reached": "E411. Sınır aşıldı",
-  "something-wrong-error": "Bir şeyler ters gitti",
-  "error-invalid-origin": "Bir şeyler ters gitti, hata kodu: E002"
+  "error-recaptcha-verification-failed": "Captcha doğrulama hatası. Lütfen tekrar deneyin.",
+  "error-sending-sms-failed": "SMS gönderilirken bir hata oldu. Lütfen tekrar deneyin.",
+  "something-wrong-error": "Bir şeyler ters gitti"
 };
 var turkish = {
   modal: modal,

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

@@ -116,13 +116,14 @@ class LoginModal {
         });
       }
       return new Promise(resolve => {
-        var _this$uiConfig;
+        var _this$uiConfig, _this$uiConfig$theme, _this$uiConfig2;
         this.stateEmitter.once("MOUNTED", () => {
           noModal.log.info("rendered");
           this.setState({
             status: interfaces.MODAL_STATUS.INITIALIZED,
             web3authClientId: this.uiConfig.web3authClientId,
-            web3authNetwork: this.uiConfig.web3authNetwork
+            web3authNetwork: this.uiConfig.web3authNetwork,
+            authBuildEnv: this.uiConfig.authBuildEnv
           });
           return resolve();
         });
@@ -155,7 +156,8 @@ class LoginModal {
             uiConfig: this.uiConfig
           })
         }));
-        if ((_this$uiConfig = this.uiConfig) !== null && _this$uiConfig !== void 0 && _this$uiConfig.theme) {
+        const isDefaultColors = ((_this$uiConfig = this.uiConfig) === null || _this$uiConfig === void 0 || (_this$uiConfig = _this$uiConfig.theme) === null || _this$uiConfig === void 0 ? void 0 : _this$uiConfig.primary) === constants.DEFAULT_PRIMARY_COLOR && ((_this$uiConfig$theme = this.uiConfig.theme) === null || _this$uiConfig$theme === void 0 ? void 0 : _this$uiConfig$theme.onPrimary) === constants.DEFAULT_ON_PRIMARY_COLOR;
+        if ((_this$uiConfig2 = this.uiConfig) !== null && _this$uiConfig2 !== void 0 && _this$uiConfig2.theme && !isDefaultColors) {
           const rootElement = document.getElementById("w3a-parent-container");
           auth.applyWhiteLabelTheme(rootElement, this.uiConfig.theme);
         }

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

@@ -70,7 +70,7 @@ const Web3AuthProvider = vue.defineComponent({
       if (!web3Auth.value) throw noModal.WalletInitializationError.notReady();
       return web3Auth.value.switchChain(chainParams);
     };
-    vue.watch(() => props.config, newConfig => {
+    vue.watch(() => props.config, (newConfig, _, onInvalidate) => {
       const resetHookState = () => {
         provider.value = null;
         userInfo.value = null;
@@ -78,6 +78,11 @@ const Web3AuthProvider = vue.defineComponent({
         isConnected.value = false;
         status.value = null;
       };
+      onInvalidate(() => {
+        if (web3Auth.value) {
+          web3Auth.value.cleanup();
+        }
+      });
       resetHookState();
       const {
         web3AuthOptions
@@ -87,12 +92,19 @@ const Web3AuthProvider = vue.defineComponent({
     }, {
       immediate: true
     });
-    vue.watch(web3Auth, async newWeb3Auth => {
+    vue.watch(web3Auth, async (newWeb3Auth, _, onInvalidate) => {
+      const controller = new AbortController();
+      // Invalidate the controller here before calling any async methods.
+      onInvalidate(() => {
+        controller.abort();
+      });
       if (newWeb3Auth) {
         try {
           initError.value = null;
           isInitializing.value = true;
-          await newWeb3Auth.initModal();
+          await newWeb3Auth.initModal({
+            signal: controller.signal
+          });
         } catch (error) {
           initError.value = error;
         } finally {

package/dist/lib.cjs/types/interface.d.ts

@@ -7,6 +7,8 @@ export interface ConnectorsModalConfig {
     hideWalletDiscovery?: boolean;
 }
 export interface IWeb3AuthModal extends IWeb3Auth {
-    initModal(): Promise<void>;
+    initModal(options?: {
+        signal?: AbortSignal;
+    }): Promise<void>;
     connect(): Promise<IProvider | null>;
 }

package/dist/lib.cjs/types/modalManager.d.ts

@@ -16,10 +16,13 @@ export declare class Web3Auth extends Web3AuthNoModal implements IWeb3AuthModal
     readonly options: Web3AuthOptions;
     private modalConfig;
     constructor(options: Web3AuthOptions);
-    initModal(): Promise<void>;
+    initModal(options?: {
+        signal?: AbortSignal;
+    }): Promise<void>;
     connect(): Promise<IProvider | null>;
     private filterWalletRegistry;
     private getProjectAndWalletConfig;
+    private initUIConfig;
     private initConnectors;
     private filterConnectors;
     private checkConnectorAvailability;

package/dist/lib.cjs/types/ui/components/Login/Login.type.d.ts

@@ -1,8 +1,9 @@
-import { WEB3AUTH_NETWORK_TYPE } from "@web3auth/no-modal";
+import { BUILD_ENV_TYPE, WEB3AUTH_NETWORK_TYPE } from "@web3auth/auth";
 import type { ButtonRadiusType, ExternalButton, ExternalWalletEventType, LogoAlignmentType, SocialLoginEventType, SocialLoginsConfig } from "../../interfaces";
 export interface LoginProps {
     web3authClientId: string;
     web3authNetwork: WEB3AUTH_NETWORK_TYPE;
+    authBuildEnv: BUILD_ENV_TYPE;
     isModalVisible: boolean;
     isDark: boolean;
     appLogo?: string;
@@ -21,7 +22,6 @@ export interface LoginProps {
     totalExternalWallets: number;
     logoAlignment?: LogoAlignmentType;
     buttonRadius?: ButtonRadiusType;
-    enableMainSocialLoginButton?: boolean;
     handleExternalWalletBtnClick?: (flag: boolean) => void;
     handleSocialLoginClick: (params: SocialLoginEventType) => void;
     handleExternalWalletClick: (params: ExternalWalletEventType) => void;

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

@@ -1,7 +1,7 @@
 import { AUTH_CONNECTION_TYPE, BUILD_ENV_TYPE } from "@web3auth/auth";
 export declare function capitalizeFirstLetter(string: string): string;
 export declare const restrictedLoginMethods: Set<AUTH_CONNECTION_TYPE>;
-export declare const AUTH_PROVIDERS: ("google" | "telegram" | "facebook" | "reddit" | "discord" | "twitch" | "apple" | "github" | "linkedin" | "twitter" | "weibo" | "line" | "email_passwordless" | "sms_passwordless" | "kakao" | "wechat" | "farcaster" | "custom" | "passkeys" | "authenticator")[];
+export declare const AUTH_PROVIDERS: ("google" | "twitter" | "facebook" | "discord" | "farcaster" | "apple" | "github" | "reddit" | "line" | "kakao" | "linkedin" | "twitch" | "telegram" | "wechat" | "email_passwordless" | "sms_passwordless" | "custom" | "passkeys" | "authenticator")[];
 export declare const AUTH_PROVIDERS_NAMES: Record<AUTH_CONNECTION_TYPE, string>;
 export declare const PASSWORDLESS_BUILD_ENV_MAP: Record<BUILD_ENV_TYPE, string>;
 export declare const CAPTCHA_SITE_KEY = "d5f0c15c-eeda-4f9c-934a-d8e0348e83b2";

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

@@ -11,3 +11,5 @@ export declare const CONNECT_WALLET_PAGES: {
 export declare const DEFAULT_LOGO_LIGHT = "https://images.web3auth.io/web3auth-logo-w.svg";
 export declare const DEFAULT_LOGO_DARK = "https://images.web3auth.io/web3auth-logo-w-light.svg";
 export declare const WALLET_CONNECT_LOGO = "https://images.web3auth.io/login-wallet-connect.svg";
+export declare const DEFAULT_PRIMARY_COLOR = "#0364FF";
+export declare const DEFAULT_ON_PRIMARY_COLOR = "#FFFFFF";

package/dist/lib.cjs/types/ui/handlers/AbstractHandler.d.ts

@@ -1,6 +1,6 @@
 import { CodeInitiateRequestBodyParams, CodeVerifyRequestBodyParams, IStartResponse, IVerifyResponse, PasswordlessHandlerParams, WhiteLabelParams } from "../interfaces";
 export declare abstract class PasswordlessHandler {
-    readonly authBaseApiUrl: string;
+    authBaseApiUrl: string;
     passwordlessParams: PasswordlessHandlerParams;
     trackingIdentifier?: string;
     constructor(params: PasswordlessHandlerParams);

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

@@ -1,4 +1,4 @@
-import type { AUTH_CONNECTION_TYPE, EMAIL_FLOW_TYPE, ExtraLoginOptions, LANGUAGES, SafeEventEmitter, THEME_MODE_TYPE, WEB3AUTH_NETWORK_TYPE } from "@web3auth/auth";
+import type { AUTH_CONNECTION_TYPE, BUILD_ENV_TYPE, EMAIL_FLOW_TYPE, ExtraLoginOptions, LANGUAGES, SafeEventEmitter, THEME_MODE_TYPE, WEB3AUTH_NETWORK_TYPE } from "@web3auth/auth";
 import { type AuthLoginParams, type BaseConnectorConfig, type ChainNamespaceType, type LoginMethodConfig, type LoginModalConfig, type UIConfig as CoreUIConfig, type WALLET_CONNECTOR_TYPE, type WalletRegistry, type WalletRegistryItem, type Web3AuthNoModalEvents } from "@web3auth/no-modal";
 export interface UIConfig extends CoreUIConfig, LoginModalConfig {
     /**
@@ -8,7 +8,7 @@ export interface UIConfig extends CoreUIConfig, LoginModalConfig {
     /**
      * order of how login methods are shown
      *
-     * @defaultValue `["google", "facebook", "twitter", "reddit", "discord", "twitch", "apple", "line", "github", "kakao", "linkedin", "weibo", "wechat", "email_passwordless"]`
+     * @defaultValue `["google", "facebook", "twitter", "reddit", "discord", "twitch", "apple", "line", "github", "kakao", "linkedin", "wechat", "email_passwordless"]`
      */
     loginMethodsOrder?: string[];
     /**
@@ -46,6 +46,7 @@ export interface LoginModalProps extends UIConfig {
     walletRegistry: WalletRegistry;
     web3authClientId: string;
     web3authNetwork: WEB3AUTH_NETWORK_TYPE;
+    authBuildEnv: BUILD_ENV_TYPE;
 }
 export interface LoginModalCallbacks {
     onInitExternalWallets: (params: {
@@ -96,6 +97,7 @@ export interface ModalState {
     currentPage?: string;
     web3authClientId: string;
     web3authNetwork: WEB3AUTH_NETWORK_TYPE;
+    authBuildEnv: BUILD_ENV_TYPE;
 }
 export type SocialLoginEventType = {
     connector: string;
@@ -140,13 +142,13 @@ export type rowType = {
         extraLoginOptions?: ExtraLoginOptions;
     };
     order: number;
-    isMainOption: boolean;
 };
 export type PasswordlessHandlerParams = {
     authConnection: AUTH_CONNECTION_TYPE;
     web3authClientId: string;
     loginHint: string;
     network: string;
+    authBuildEnv?: BUILD_ENV_TYPE;
     uiConfig?: Omit<UIConfig, "connectorListener">;
 };
 export interface WhiteLabelParams {

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

@@ -5,9 +5,7 @@ const defaultConnectorsModalConfig = {
   connectors: {
     [EVM_CONNECTORS.AUTH]: {
       label: "Auth",
-      showOnModal: true,
-      showOnMobile: true,
-      showOnDesktop: true
+      showOnModal: true
     }
   }
 };

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

@@ -1,6 +1,6 @@
 import _objectSpread from '@babel/runtime/helpers/objectSpread2';
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
-import { Web3AuthNoModal, cloneDeep, WALLET_CONNECTORS, log, CONNECTOR_STATUS, CONNECTOR_EVENTS, WalletInitializationError, fetchProjectConfig, fetchWalletRegistry, CONNECTOR_CATEGORY, CONNECTOR_NAMES, CONNECTOR_NAMESPACES } from '@web3auth/no-modal';
+import { Web3AuthNoModal, cloneDeep, WALLET_CONNECTORS, log, CONNECTOR_STATUS, withAbort, CONNECTOR_EVENTS, WalletInitializationError, fetchProjectConfig, fetchWalletRegistry, CONNECTOR_CATEGORY, CONNECTOR_NAMES, CONNECTOR_NAMESPACES } from '@web3auth/no-modal';
 import deepmerge from 'deepmerge';
 import { defaultConnectorsModalConfig, walletRegistryUrl } from './config.js';
 import { AUTH_PROVIDERS_NAMES, AUTH_PROVIDERS, capitalizeFirstLetter } from './ui/config.js';
@@ -71,19 +71,19 @@ class Web3Auth extends Web3AuthNoModal {
     if (this.options.modalConfig) this.modalConfig = this.options.modalConfig;
     log.info("modalConfig", this.modalConfig);
   }
-  async initModal() {
+  async initModal(options) {
+    const {
+      signal
+    } = options || {};
     super.checkInitRequirements();
     // get project config and wallet registry
     const {
       projectConfig,
       walletRegistry
     } = await this.getProjectAndWalletConfig();
-    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
+    this.initUIConfig(projectConfig);
     super.initAccountAbstractionConfig(projectConfig);
     super.initChainsConfig(projectConfig);
     super.initCachedConnectorAndChainId();
@@ -97,6 +97,7 @@ class Web3Auth extends Web3AuthNoModal {
       connectorListener: this,
       web3authClientId: this.options.clientId,
       web3authNetwork: this.options.web3AuthNetwork,
+      authBuildEnv: this.options.authBuildEnv,
       chainNamespaces: this.getChainNamespaces(),
       walletRegistry: filteredWalletRegistry
     }), {
@@ -105,25 +106,34 @@ class Web3Auth extends Web3AuthNoModal {
       onExternalWalletLogin: this.onExternalWalletLogin,
       onModalVisibility: this.onModalVisibility
     });
-    await this.loginModal.initModal();
+    await withAbort(() => this.loginModal.initModal(), signal);
 
     // setup common JRPC provider
-    await this.setupCommonJRPCProvider();
+    await withAbort(() => this.setupCommonJRPCProvider(), signal);
 
     // initialize connectors
     this.on(CONNECTOR_EVENTS.CONNECTORS_UPDATED, ({
       connectors: newConnectors
-    }) => this.initConnectors({
-      connectors: newConnectors,
-      projectConfig,
-      disabledExternalWallets
-    }));
-    await this.loadConnectors({
-      projectConfig
+    }) => {
+      const onAbortHandler = () => {
+        var _this$connectors;
+        log.debug("init aborted");
+        if (((_this$connectors = this.connectors) === null || _this$connectors === void 0 ? void 0 : _this$connectors.length) > 0) {
+          super.cleanup();
+        }
+      };
+      withAbort(() => this.initConnectors({
+        connectors: newConnectors,
+        projectConfig,
+        disabledExternalWallets
+      }), signal, onAbortHandler);
     });
+    await withAbort(() => super.loadConnectors({
+      projectConfig
+    }), signal);
 
     // initialize plugins
-    await this.initPlugins();
+    await withAbort(() => super.initPlugins(), signal);
   }
   async connect() {
     if (!this.loginModal) throw WalletInitializationError.notReady("Login modal is not initialized");
@@ -219,6 +229,24 @@ class Web3Auth extends Web3AuthNoModal {
       walletRegistry
     };
   }
+  initUIConfig(projectConfig) {
+    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);
+
+    // merge login methods order from project config and user config, with user config taking precedence
+    const defaultAuthConnections = projectConfig.embeddedWalletAuth.filter(x => x.isDefault).map(x => x.authConnection);
+    const mergedAuthConnections = [...(this.options.uiConfig.loginMethodsOrder || []), ...defaultAuthConnections];
+    const loginMethodsOrder = [];
+    const authConnectionSet = new Set();
+    for (const authConnection of mergedAuthConnections) {
+      if (authConnectionSet.has(authConnection)) continue;
+      authConnectionSet.add(authConnection);
+      loginMethodsOrder.push(authConnection);
+    }
+    this.options.uiConfig.loginMethodsOrder = loginMethodsOrder;
+  }
   async initConnectors({
     connectors,
     projectConfig,
@@ -288,9 +316,7 @@ class Web3Auth extends Web3AuthNoModal {
           groupedAuthConnectionId: groupedAuthConnectionId,
           extraLoginOptions: authConnectionConfig.jwtParameters,
           isDefault: true,
-          showOnModal: true,
-          showOnDesktop: true,
-          showOnMobile: true
+          showOnModal: true
         };
       }
       embedWalletConfigMap.set(groupedAuthConnectionId || authConnectionId, authConnectionConfig);
@@ -339,9 +365,7 @@ class Web3Auth extends Web3AuthNoModal {
       // start with the default config of connector.
       const defaultConnectorConfig = {
         label: CONNECTOR_NAMES[connectorName] || connectorName.split("-").map(capitalizeFirstLetter).join(" "),
-        showOnModal: true,
-        showOnMobile: true,
-        showOnDesktop: true
+        showOnModal: true
       };
       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]) || {});
 

package/dist/lib.esm/packages/modal/src/react/context/Web3AuthInnerContext.js

@@ -81,11 +81,14 @@ function Web3AuthInnerProvider(params) {
     setWeb3Auth(web3AuthInstance);
   }, [config]);
   useEffect(() => {
+    const controller = new AbortController();
     async function init() {
       try {
         setInitError(null);
         setIsInitializing(true);
-        await web3Auth.initModal();
+        await web3Auth.initModal({
+          signal: controller.signal
+        });
       } catch (error) {
         setInitError(error);
       } finally {
@@ -93,6 +96,9 @@ function Web3AuthInnerProvider(params) {
       }
     }
     if (web3Auth) init();
+    return () => {
+      controller.abort();
+    };
   }, [web3Auth, config]);
   useEffect(() => {
     const addState = async () => {
@@ -152,6 +158,7 @@ function Web3AuthInnerProvider(params) {
         web3Auth.off(CONNECTOR_EVENTS.DISCONNECTED, disconnectedListener);
         web3Auth.off(CONNECTOR_EVENTS.CONNECTING, connectingListener);
         web3Auth.off(CONNECTOR_EVENTS.ERRORED, errorListener);
+        web3Auth.cleanup();
       }
     };
   }, [web3Auth]);

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

@@ -42,7 +42,7 @@ function BottomSheet({
           fill: "none",
           xmlns: "http://www.w3.org/2000/svg",
           onClick: onClose,
-          className: "w3a--text-app-gray-500 dark:w3a--text-app-gray-200",
+          className: "w3a--text-app-gray-500 hover:w3a--text-app-gray-900 dark:w3a--text-app-gray-200 dark:hover:w3a--text-app-white",
           children: /*#__PURE__*/jsx("path", {
             fillRule: "evenodd",
             clipRule: "evenodd",

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

@@ -4,7 +4,7 @@ import Image from '../../Image/Image.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
 function getProviderIcon(method, isDark, isPrimaryBtn) {
-  const imageId = method === AUTH_CONNECTION.TWITTER ? `login-twitter-x${isDark ? "-light" : "-dark"}` : `login-${method}${isDark ? "-light" : "-dark"}`;
+  const imageId = method === AUTH_CONNECTION.TWITTER ? `login-X${isDark ? "-light" : "-dark"}` : `login-${method}${isDark ? "-light" : "-dark"}`;
   const hoverId = method === AUTH_CONNECTION.APPLE || method === AUTH_CONNECTION.GITHUB || method === AUTH_CONNECTION.TWITTER ? imageId : `login-${method}-active`;
   if (isPrimaryBtn) {
     return /*#__PURE__*/jsx(Image, {

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

@@ -1,8 +1,9 @@
 import cn from 'classnames';
-import { useMemo } from 'react';
+import { useContext, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
+import { ThemedContext } from '../../../context/ThemeContext.js';
 import i18nInstance from '../../../localeImport.js';
-import { formatIOSMobile } from '../../../utils.js';
+import { formatIOSMobile, getIcons } from '../../../utils.js';
 import Image from '../../Image/Image.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
@@ -18,6 +19,7 @@ function ButtonWallet(props) {
     label,
     buttonRadius
   } = props;
+  const isDark = useContext(ThemedContext);
   const isLink = useMemo(() => deviceDetails.platform !== "desktop" && button.href && button.hasWalletConnect && !button.hasInjectedWallet, [deviceDetails, button]);
   const href = useMemo(() => button.href ? formatIOSMobile({
     uri: walletConnectUri,
@@ -32,7 +34,8 @@ function ButtonWallet(props) {
   };
   return /*#__PURE__*/jsxs("button", {
     type: "button",
-    className: cn(`w3a--flex w3a--w-full w3a--items-center w3a--justify-between w3a--bg-app-gray-50 w3a--p-3 hover:w3a--bg-app-gray-200 hover:w3a--text-app-gray-900 dark:w3a--bg-app-gray-800 dark:hover:w3a--bg-app-gray-600`, {
+    className: cn(`w3a--group w3a--relative w3a--overflow-hidden w3a--flex w3a--w-full w3a--items-center w3a--justify-between w3a--bg-app-gray-50 w3a--p-3 hover:w3a--bg-app-gray-200 
+        hover:w3a--text-app-gray-900 dark:w3a--bg-app-gray-800 dark:hover:w3a--bg-app-gray-600 active:w3a--scale-95 w3a--transition-all w3a--duration-150`, {
       "w3a--rounded-full": buttonRadius === "pill",
       "w3a--rounded-lg": buttonRadius === "rounded",
       "w3a--rounded-none": buttonRadius === "square"
@@ -41,7 +44,7 @@ function ButtonWallet(props) {
     children: [/*#__PURE__*/jsxs("div", {
       className: "w3a--flex w3a--items-center w3a--gap-x-2",
       children: [/*#__PURE__*/jsx("figure", {
-        className: button.icon ? "w3a--size-5" : "w3a--size-5 w3a--rounded-full w3a--bg-app-gray-300",
+        className: "w3a--size-5",
         children: /*#__PURE__*/jsx(Image, {
           imageData: button.icon,
           imageId: `login-${button.name}`,
@@ -53,12 +56,17 @@ function ButtonWallet(props) {
           extension: button.imgExtension || "webp"
         })
       }), /*#__PURE__*/jsx("p", {
-        className: "w3a--text-base w3a--font-normal w3a--text-app-gray-700 dark:w3a--text-app-white",
+        className: "w3a--max-w-[180px] w3a--truncate w3a--text-base w3a--font-normal w3a--text-app-gray-700 dark:w3a--text-app-white",
         children: label
       })]
     }), button.hasInjectedWallet && /*#__PURE__*/jsx("span", {
-      className: "w3a--inline-flex w3a--items-center w3a--rounded-md w3a--bg-app-primary-100 w3a--px-2 w3a--py-1 w3a--text-xs w3a--font-medium w3a--text-app-primary-800  dark:w3a--border dark:w3a--border-app-primary-400 dark:w3a--bg-transparent dark:w3a--text-app-primary-400",
+      className: "w3a--absolute w3a--right-4 w3a--top-1/2 w3a--flex w3a--w-auto -w3a--translate-y-1/2 w3a--items-center w3a--rounded-md w3a--bg-app-primary-100 w3a--px-2 w3a--py-1 w3a--text-xs w3a--font-medium w3a--text-app-primary-800 w3a--transition-all w3a--duration-300 group-hover:w3a--translate-x-6 group-hover:w3a--opacity-0  dark:w3a--border dark:w3a--border-app-primary-400 dark:w3a--bg-transparent dark:w3a--text-app-primary-400",
       children: t("modal.external.installed")
+    }), /*#__PURE__*/jsx("img", {
+      id: "injected-wallet-arrow",
+      className: "w3a--absolute w3a--right-4 w3a--top-1/2 -w3a--translate-x-10 -w3a--translate-y-1/2 w3a--opacity-0 w3a--transition-all w3a--duration-300 group-hover:w3a--translate-x-0 group-hover:w3a--opacity-100",
+      src: getIcons(isDark ? "chevron-right-light" : "chevron-right-dark"),
+      alt: "arrow"
     })]
   });
 }

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

@@ -57,7 +57,7 @@ function ConnectWallet(props) {
   }, [walletRegistry]);
   const allUniqueButtons = useMemo(() => {
     const uniqueButtonSet = new Set();
-    return allExternalButtons.concat(customConnectorButtons).filter(button => {
+    return customConnectorButtons.concat(allExternalButtons).filter(button => {
       if (uniqueButtonSet.has(button.name)) return false;
       uniqueButtonSet.add(button.name);
       return true;
@@ -102,7 +102,7 @@ function ConnectWallet(props) {
   };
   const filteredButtons = useMemo(() => {
     if (walletDiscoverySupported) {
-      return allUniqueButtons.filter(button => selectedChain === "all" || button.chainNamespaces.includes(selectedChain)).filter(button => button.name.toLowerCase().includes(walletSearch.toLowerCase()));
+      return [...allUniqueButtons.filter(button => button.hasInjectedWallet), ...allUniqueButtons.filter(button => !button.hasInjectedWallet)].filter(button => selectedChain === "all" || button.chainNamespaces.includes(selectedChain)).filter(button => button.name.toLowerCase().includes(walletSearch.toLowerCase()));
     }
     return installedWalletButtons;
   }, [walletDiscoverySupported, installedWalletButtons, walletSearch, allUniqueButtons, selectedChain]);

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

@@ -41,11 +41,11 @@ function ConnectWalletChainFilter(props) {
     });
   }
   return /*#__PURE__*/jsx("div", {
-    className: "w3a--flex w3a--items-center w3a--justify-items-start w3a--gap-x-2",
+    className: "w3a--flex w3a--items-center w3a--justify-items-start w3a--gap-x-4",
     children: chains.map(chain => /*#__PURE__*/jsxs("button", {
       type: "button",
-      className: cn("w3a--flex w3a--items-center w3a--justify-center w3a--gap-x-1 w3a--text-xs w3a--font-medium w3a--px-4 w3a--py-3 w3a--text-app-gray-500 dark:w3a--text-app-gray-300 hover:w3a--bg-app-gray-200 dark:hover:w3a--bg-app-gray-700 w3a--h-12 w3a--rounded-2xl", {
-        "w3a--bg-app-gray-100 dark:w3a--bg-app-gray-800 w3a--border w3a--border-app-gray-200 dark:w3a--border-app-gray-700 w3a--text-app-gray-900 dark:w3a--text-app-white": selectedChain === chain.id
+      className: cn("w3a--flex w3a--w-[104px] w3a--items-center w3a--justify-center w3a--gap-x-1 w3a--text-xs w3a--font-medium w3a--px-4 w3a--py-3 w3a--text-app-gray-500 dark:w3a--text-app-gray-300 hover:w3a--bg-app-gray-200 dark:hover:w3a--bg-app-gray-700 w3a--h-12 w3a--rounded-2xl w3a--border w3a--border-transparent", {
+        "w3a--bg-app-gray-100 dark:w3a--bg-app-gray-800 w3a--border-app-gray-200 dark:w3a--border-app-gray-700 w3a--text-app-gray-900 dark:w3a--text-app-white hover:!w3a--bg-app-gray-100 dark:hover:!w3a--bg-app-gray-800": selectedChain === chain.id
       }),
       onClick: () => setSelectedChain(chain.id),
       children: [chain.icon && /*#__PURE__*/jsx("img", {

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

@@ -54,7 +54,7 @@ const ConnectWalletChainNamespaceSelect = props => {
       }) => /*#__PURE__*/jsx("li", {
         children: /*#__PURE__*/jsxs("button", {
           type: "button",
-          className: "w3a--btn w3a-external-wallet-btn w3a--h-12 w3a--w-full w3a--items-center !w3a--justify-between w3a--rounded-full",
+          className: "w3a--btn w3a--group w3a--relative w3a--h-11 w3a--w-full w3a--items-center !w3a--justify-between w3a--overflow-hidden w3a--rounded-full",
           onClick: () => handleExternalWalletClick({
             connector: wallet.name,
             chainNamespace
@@ -74,8 +74,8 @@ const ConnectWalletChainNamespaceSelect = props => {
               children: displayName
             })]
           }), /*#__PURE__*/jsx("img", {
-            id: "external-wallet-arrow",
-            className: "w3a--icon-animation",
+            id: "chain-namespace-arrow",
+            className: "w3a--absolute w3a--right-4 w3a--top-1/2 -w3a--translate-x-6 -w3a--translate-y-1/2 w3a--opacity-0 w3a--transition-all w3a--duration-300 group-hover:w3a--translate-x-0 group-hover:w3a--opacity-100",
             src: getIcons(isDark ? "chevron-right-dark" : "chevron-right-light"),
             alt: "arrow"
           })]