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

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

@@ -6,14 +6,16 @@ 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ı",
   "errors-required": "Zorunlu",
+  "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",
@@ -24,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",
@@ -49,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",
@@ -56,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",
@@ -67,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ı",
@@ -79,9 +98,26 @@ var modal = {
   "social.view-more": "Daha fazla görüntüle",
   "social.view-more-socials": "Daha fazlasını görüntüle socials"
 };
+var passwordless = {
+  "error-invalid-link": "Hatalı ya da süresi geçmiş doğrulama linki",
+  "error-invalid-origin": "Bir şeyler ters gitti, hata kodu: E002",
+  "error-invalid-otp": "Hatalı OTP, lütfen tekrar deneyin.",
+  "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-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ı",
+  "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
+  modal: modal,
+  passwordless: passwordless
 };
 
 exports.default = turkish;
 exports.modal = modal;
+exports.passwordless = passwordless;

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

@@ -1,10 +1,6 @@
 'use strict';
 
 const LOGIN_MODAL_EVENTS = {
-  INIT_EXTERNAL_WALLETS: "INIT_EXTERNAL_WALLETS",
-  EXTERNAL_WALLET_LOGIN: "EXTERNAL_WALLET_LOGIN",
-  SOCIAL_LOGIN: "SOCIAL_LOGIN",
-  DISCONNECT: "DISCONNECT",
   MODAL_VISIBILITY: "MODAL_VISIBILITY"
 };
 const MODAL_STATUS = {
@@ -13,12 +9,13 @@ const MODAL_STATUS = {
   CONNECTING: "connecting",
   ERRORED: "errored"
 };
-const DEFAULT_LOGO_LIGHT = "https://images.web3auth.io/web3auth-logo-w.svg"; // logo used on light mode
-const DEFAULT_LOGO_DARK = "https://images.web3auth.io/web3auth-logo-w-light.svg"; // logo used on dark mode
-const WALLET_CONNECT_LOGO = "https://images.web3auth.io/login-wallet-connect.svg";
+exports.TOAST_TYPE = void 0;
+(function (TOAST_TYPE) {
+  TOAST_TYPE["SUCCESS"] = "success";
+  TOAST_TYPE["ERROR"] = "error";
+  TOAST_TYPE["WARNING"] = "warning";
+  TOAST_TYPE["INFO"] = "info";
+})(exports.TOAST_TYPE || (exports.TOAST_TYPE = {}));
 
-exports.DEFAULT_LOGO_DARK = DEFAULT_LOGO_DARK;
-exports.DEFAULT_LOGO_LIGHT = DEFAULT_LOGO_LIGHT;
 exports.LOGIN_MODAL_EVENTS = LOGIN_MODAL_EVENTS;
 exports.MODAL_STATUS = MODAL_STATUS;
-exports.WALLET_CONNECT_LOGO = WALLET_CONNECT_LOGO;

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

@@ -1,18 +1,20 @@
+'use client';
 'use strict';
 
 var _defineProperty = require('@babel/runtime/helpers/defineProperty');
 var jsxRuntime = require('react/jsx-runtime');
-require('./css/web3auth.css.js');
+require('./css/index.css.js');
 var auth = require('@web3auth/auth');
 var noModal = require('@web3auth/no-modal');
 var client = require('react-dom/client');
-var Modal = require('./components/Modal.js');
+var Widget = require('./components/Widget/Widget.js');
+var constants = require('./constants.js');
 var ThemeContext = require('./context/ThemeContext.js');
 var interfaces = require('./interfaces.js');
 var localeImport = require('./localeImport.js');
 var utils = require('./utils.js');
 
-function createWrapper(parentZIndex) {
+function createWrapperForModal(parentZIndex) {
   const existingWrapper = document.getElementById("w3a-parent-container");
   if (existingWrapper) existingWrapper.remove();
   const parent = document.createElement("section");
@@ -20,19 +22,24 @@ function createWrapper(parentZIndex) {
   parent.setAttribute("id", "w3a-parent-container");
   parent.style.zIndex = parentZIndex;
   parent.style.position = "relative";
-  const wrapper = document.createElement("section");
-  wrapper.setAttribute("id", "w3a-container");
-  parent.appendChild(wrapper);
   document.body.appendChild(parent);
-  return wrapper;
 }
-class LoginModal extends auth.SafeEventEmitter {
-  constructor(_uiConfig) {
-    super();
+function createWrapperForEmbed(targetId) {
+  const targetElement = document.getElementById(targetId);
+  if (!targetElement) {
+    noModal.log.error(`Element with ID ${targetId} not found`);
+    return;
+  }
+  targetElement.innerHTML = `<div id="w3a-parent-container" class="w3a-parent-container"></div>`;
+}
+class LoginModal {
+  constructor(_uiConfig, callbacks) {
     _defineProperty(this, "uiConfig", void 0);
     _defineProperty(this, "stateEmitter", void 0);
     _defineProperty(this, "chainNamespaces", void 0);
     _defineProperty(this, "walletRegistry", void 0);
+    _defineProperty(this, "callbacks", void 0);
+    _defineProperty(this, "externalWalletsConfig", void 0);
     _defineProperty(this, "initModal", async () => {
       const darkState = {
         isDark: this.isDark
@@ -111,15 +118,25 @@ class LoginModal extends auth.SafeEventEmitter {
         });
       }
       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
+            status: interfaces.MODAL_STATUS.INITIALIZED,
+            web3authClientId: this.uiConfig.web3authClientId,
+            web3authNetwork: this.uiConfig.web3authNetwork,
+            authBuildEnv: this.uiConfig.authBuildEnv
           });
           return resolve();
         });
-        const container = createWrapper(this.uiConfig.modalZIndex);
+        if (this.uiConfig.widgetType === noModal.WIDGET_TYPE.MODAL) {
+          createWrapperForModal(this.uiConfig.modalZIndex);
+        } else if (this.uiConfig.widgetType === noModal.WIDGET_TYPE.EMBED) {
+          createWrapperForEmbed(this.uiConfig.targetId);
+        } else {
+          throw noModal.WalletInitializationError.invalidParams(`Invalid widget type: ${this.uiConfig.widgetType}`);
+        }
+        const container = document.getElementById("w3a-parent-container");
         if (darkState.isDark) {
           container.classList.add("w3a--dark");
         } else {
@@ -128,19 +145,21 @@ class LoginModal extends auth.SafeEventEmitter {
         const root = client.createRoot(container);
         root.render(jsxRuntime.jsx(ThemeContext.ThemedContext.Provider, {
           value: darkState,
-          children: jsxRuntime.jsx(Modal, {
-            closeModal: this.closeModal,
+          children: jsxRuntime.jsx(Widget, {
             stateListener: this.stateEmitter,
-            handleShowExternalWallets: this.handleShowExternalWallets,
-            handleExternalWalletClick: this.handleExternalWalletClick,
-            handleSocialLoginClick: this.handleSocialLoginClick,
             appLogo: darkState.isDark ? this.uiConfig.logoDark : this.uiConfig.logoLight,
             appName: this.uiConfig.appName,
             chainNamespaces: this.chainNamespaces,
-            walletRegistry: this.walletRegistry
+            walletRegistry: this.walletRegistry,
+            handleShowExternalWallets: this.handleShowExternalWallets,
+            handleExternalWalletClick: this.handleExternalWalletClick,
+            handleSocialLoginClick: this.handleSocialLoginClick,
+            closeModal: this.closeModal,
+            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);
         }
@@ -158,25 +177,30 @@ class LoginModal extends auth.SafeEventEmitter {
       noModal.log.info("addSocialLogins", connector, loginMethods, loginMethodsOrder, uiConfig);
     });
     _defineProperty(this, "addWalletLogins", (externalWalletsConfig, options) => {
+      this.externalWalletsConfig = externalWalletsConfig;
       this.setState({
         externalWalletsConfig,
-        externalWalletsInitialized: true,
-        showExternalWalletsOnly: !!(options !== null && options !== void 0 && options.showExternalWalletsOnly),
-        externalWalletsVisibility: true
+        externalWalletsInitialized: !!options.externalWalletsInitialized,
+        showExternalWalletsOnly: !!options.showExternalWalletsOnly,
+        externalWalletsVisibility: !!options.externalWalletsVisibility
       });
     });
     _defineProperty(this, "open", () => {
       this.setState({
         modalVisibility: true
       });
-      this.emit(interfaces.LOGIN_MODAL_EVENTS.MODAL_VISIBILITY, true);
+      if (this.callbacks.onModalVisibility) {
+        this.callbacks.onModalVisibility(true);
+      }
     });
     _defineProperty(this, "closeModal", () => {
       this.setState({
         modalVisibility: false,
         externalWalletsVisibility: false
       });
-      this.emit(interfaces.LOGIN_MODAL_EVENTS.MODAL_VISIBILITY, false);
+      if (this.callbacks.onModalVisibility) {
+        this.callbacks.onModalVisibility(false);
+      }
     });
     _defineProperty(this, "initExternalWalletContainer", () => {
       this.setState({
@@ -184,9 +208,11 @@ class LoginModal extends auth.SafeEventEmitter {
       });
     });
     _defineProperty(this, "handleShowExternalWallets", status => {
-      this.emit(interfaces.LOGIN_MODAL_EVENTS.INIT_EXTERNAL_WALLETS, {
-        externalWalletsInitialized: status
-      });
+      if (this.callbacks.onInitExternalWallets) {
+        this.callbacks.onInitExternalWallets({
+          externalWalletsInitialized: status
+        });
+      }
     });
     _defineProperty(this, "handleExternalWalletClick", params => {
       noModal.log.info("external wallet clicked", params);
@@ -194,12 +220,14 @@ class LoginModal extends auth.SafeEventEmitter {
         connector,
         chainNamespace
       } = params;
-      this.emit(interfaces.LOGIN_MODAL_EVENTS.EXTERNAL_WALLET_LOGIN, {
-        connector,
-        loginParams: {
-          chainNamespace
-        }
-      });
+      if (this.callbacks.onExternalWalletLogin) {
+        this.callbacks.onExternalWalletLogin({
+          connector,
+          loginParams: {
+            chainNamespace
+          }
+        });
+      }
     });
     _defineProperty(this, "handleSocialLoginClick", params => {
       noModal.log.info("social login clicked", params);
@@ -207,48 +235,51 @@ class LoginModal extends auth.SafeEventEmitter {
         connector,
         loginParams
       } = params;
-      this.emit(interfaces.LOGIN_MODAL_EVENTS.SOCIAL_LOGIN, {
-        connector,
-        loginParams: {
-          authConnection: loginParams.authConnection,
-          authConnectionId: loginParams.authConnectionId,
-          groupedAuthConnectionId: loginParams.groupedAuthConnectionId,
-          login_hint: loginParams.login_hint,
-          extraLoginOptions: loginParams.extraLoginOptions
-        }
-      });
+      if (this.callbacks.onSocialLogin) {
+        this.callbacks.onSocialLogin({
+          connector,
+          loginParams
+        });
+      }
     });
     _defineProperty(this, "setState", newState => {
       this.stateEmitter.emit("STATE_UPDATED", newState);
     });
-    _defineProperty(this, "updateWalletConnect", walletConnectUri => {
-      if (!walletConnectUri) return;
-      this.setState({
-        walletConnectUri
-      });
-    });
     _defineProperty(this, "handleConnectorData", connectorData => {
       if (connectorData.connectorName === noModal.WALLET_CONNECTORS.WALLET_CONNECT_V2) {
         const walletConnectData = connectorData.data;
-        this.updateWalletConnect(walletConnectData.uri);
+        if (walletConnectData.uri) {
+          this.setState({
+            walletConnectUri: walletConnectData.uri
+          });
+        }
+      }
+      if (connectorData.connectorName === noModal.WALLET_CONNECTORS.METAMASK) {
+        const metamaskData = connectorData.data;
+        if (metamaskData.uri) {
+          this.setState({
+            metamaskConnectUri: metamaskData.uri
+          });
+        }
       }
     });
     _defineProperty(this, "subscribeCoreEvents", listener => {
       listener.on(noModal.CONNECTOR_EVENTS.CONNECTING, data => {
+        var _this$externalWallets;
         noModal.log.info("connecting with connector", data);
-        // don't show loader in case of wallet connect, because currently it listens for incoming for incoming
-        // connections without any user interaction.
-        if ((data === null || data === void 0 ? void 0 : data.connector) !== noModal.WALLET_CONNECTORS.WALLET_CONNECT_V2) {
-          // const provider = data?.loginProvider || "";
-          this.setState({
-            status: interfaces.MODAL_STATUS.CONNECTING
-          });
-        }
+        // don't show loader in case of wallet connect, because currently it listens for incoming connections without any user interaction
+        if ((data === null || data === void 0 ? void 0 : data.connector) === noModal.WALLET_CONNECTORS.WALLET_CONNECT_V2) return;
+        // don't show loader in case of metamask qr code, because currently it listens for incoming connections without any user interaction
+        const isMetamaskInjected = (_this$externalWallets = this.externalWalletsConfig) === null || _this$externalWallets === void 0 || (_this$externalWallets = _this$externalWallets[noModal.WALLET_CONNECTORS.METAMASK]) === null || _this$externalWallets === void 0 ? void 0 : _this$externalWallets.isInjected;
+        if ((data === null || data === void 0 ? void 0 : data.connector) === noModal.WALLET_CONNECTORS.METAMASK && !isMetamaskInjected) return;
+        this.setState({
+          status: interfaces.MODAL_STATUS.CONNECTING
+        });
       });
       listener.on(noModal.CONNECTOR_EVENTS.CONNECTED, data => {
         noModal.log.debug("connected with connector", data);
         // only show success if not being reconnected again.
-        if (!data.reconnected) {
+        if (!data.reconnected && data.loginMode === noModal.LOGIN_MODE.MODAL) {
           this.setState({
             status: interfaces.MODAL_STATUS.CONNECTED,
             modalVisibility: true,
@@ -290,8 +321,8 @@ class LoginModal extends auth.SafeEventEmitter {
       });
     });
     this.uiConfig = _uiConfig;
-    if (!_uiConfig.logoDark) this.uiConfig.logoDark = interfaces.DEFAULT_LOGO_DARK;
-    if (!_uiConfig.logoLight) this.uiConfig.logoLight = interfaces.DEFAULT_LOGO_LIGHT;
+    if (!_uiConfig.logoDark) this.uiConfig.logoDark = constants.DEFAULT_LOGO_DARK;
+    if (!_uiConfig.logoLight) this.uiConfig.logoLight = constants.DEFAULT_LOGO_LIGHT;
     if (!_uiConfig.mode) this.uiConfig.mode = "light";
     if (!_uiConfig.modalZIndex) this.uiConfig.modalZIndex = "99998";
     if (typeof _uiConfig.displayErrorsOnModal === "undefined") this.uiConfig.displayErrorsOnModal = true;
@@ -299,9 +330,15 @@ class LoginModal extends auth.SafeEventEmitter {
     if (!_uiConfig.loginGridCol) this.uiConfig.loginGridCol = 3;
     if (!_uiConfig.primaryButton) this.uiConfig.primaryButton = "socialLogin";
     if (!_uiConfig.defaultLanguage) this.uiConfig.defaultLanguage = utils.getUserLanguage(_uiConfig.defaultLanguage);
+    if (!_uiConfig.widgetType) this.uiConfig.widgetType = noModal.WIDGET_TYPE.MODAL;
+    if (_uiConfig.widgetType === noModal.WIDGET_TYPE.EMBED && !_uiConfig.targetId) {
+      noModal.log.error("targetId is required for embed widget");
+      throw noModal.WalletInitializationError.invalidParams("targetId is required for embed widget");
+    }
     this.stateEmitter = new auth.SafeEventEmitter();
     this.chainNamespaces = _uiConfig.chainNamespaces;
     this.walletRegistry = _uiConfig.walletRegistry;
+    this.callbacks = callbacks;
     this.subscribeCoreEvents(this.uiConfig.connectorListener);
   }
   get isDark() {

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

@@ -3,8 +3,67 @@
 var httpHelpers = require('@toruslabs/http-helpers');
 var auth = require('@web3auth/auth');
 var noModal = require('@web3auth/no-modal');
+var clsx = require('clsx');
+var tailwindMerge = require('tailwind-merge');
 
-const passwordlessBackendUrl = "https://api-passwordless.web3auth.io";
+const cache = new Map();
+/** Merge classes with tailwind-merge with clsx full feature and memoization */
+function cn(...inputs) {
+  // Create a cache key using JSON.stringify
+  const cacheKey = JSON.stringify(inputs);
+  // Check if the result is already cached
+  if (cache.has(cacheKey)) {
+    return cache.get(cacheKey);
+  }
+  // If not cached, compute the result
+  const result = tailwindMerge.twMerge(clsx(inputs));
+  // Store the result in the cache
+  cache.set(cacheKey, result);
+  return result;
+}
+const getBrowserExtensionUrl = (browserType, walletId) => {
+  if (walletId !== null && walletId !== void 0 && walletId.startsWith("https://")) return walletId;
+  switch (browserType) {
+    case "chrome":
+      return `https://chrome.google.com/webstore/detail/${walletId}`;
+    case "firefox":
+      return `https://addons.mozilla.org/firefox/addon/${walletId}`;
+    case "edge":
+      return `https://microsoftedge.microsoft.com/addons/detail/${walletId}`;
+    default:
+      return null;
+  }
+};
+const getMobileInstallLink = (os, appId) => {
+  if (appId !== null && appId !== void 0 && appId.includes("https://")) {
+    return appId;
+  }
+  switch (os) {
+    case "android":
+      return `https://play.google.com/store/apps/details?id=${appId}`;
+    case "ios":
+      return `https://apps.apple.com/app/safepal-wallet/${appId}`;
+    default:
+      return "";
+  }
+};
+const getOsName = os => {
+  switch (os) {
+    case "ios":
+      return "iOS";
+    case "android":
+      return "Android";
+    default:
+      return "";
+  }
+};
+const getBrowserName = browserType => {
+  return browserType.charAt(0).toUpperCase() + browserType.slice(1);
+};
+const getIcons = icon => {
+  return `https://images.web3auth.io/login-modal/${icon}.svg`;
+};
+const passwordlessBackendUrl = "https://api.web3auth.io/passwordless-service";
 const getUserCountry = async () => {
   try {
     const result = await httpHelpers.get(`${passwordlessBackendUrl}/api/v3/user/location`);
@@ -23,16 +82,28 @@ const validatePhoneNumber = async phoneNumber => {
     const result = await httpHelpers.post(`${passwordlessBackendUrl}/api/v3/phone_number/validate`, {
       phone_number: phoneNumber
     });
-    if (result && result.success) return result.parsed_number;
-    return false;
+    if (result && result.success) return result;
+    return {
+      success: false,
+      parsed_number: "",
+      country_flag: ""
+    };
   } catch (error) {
     noModal.log.error("error validating phone number", error);
     if (error.status === 400) {
-      return false;
+      return {
+        success: false,
+        parsed_number: "",
+        country_flag: ""
+      };
     }
     // sending true because we don't want the user to be stuck on a flow
     // if there is an error with the api or something went wrong.
-    return true;
+    return {
+      success: false,
+      parsed_number: "",
+      country_flag: ""
+    };
   }
 };
 const getUserLanguage = defaultLanguage => {
@@ -43,7 +114,54 @@ const getUserLanguage = defaultLanguage => {
   }
   return Object.prototype.hasOwnProperty.call(auth.LANGUAGE_MAP, userLanguage) ? userLanguage : auth.LANGUAGES.en;
 };
+function formatIOSMobile(params) {
+  const encodedUri = encodeURIComponent(params.uri);
+  if (params.link.startsWith("http")) return `${params.link}/wc?uri=${encodedUri}`;
+  if (params.link) return `${params.link}wc?uri=${encodedUri}`;
+  return "";
+}
+const getErrorMessages = errorCode => {
+  if (!errorCode) return "passwordless.something-wrong-error";
+  switch (errorCode) {
+    case "E001":
+      return "passwordless.error-invalid-params";
+    case "E002":
+      return "passwordless.error-invalid-origin";
+    case "E201":
+      return "passwordless.error-sending-sms-failed";
+    case "E300":
+      return "passwordless.error-no-mail-generated";
+    case "E301":
+      return "passwordless.error-invalid-link";
+    case "E302":
+      return "passwordless.error-new-link-generated-heading";
+    case "E304":
+    case "E403":
+      return "passwordless.error-max-retry-limit-reached";
+    case "E305":
+    case "E401":
+      return "passwordless.error-invalid-otp";
+    case "E306":
+      return "passwordless.error-otp-expired";
+    case "E400":
+      return "passwordless.error-no-sms-generated";
+    case "E411":
+      return "passwordless.error-plan-limit-reached";
+    case "E412":
+      return "passwordless.error-recaptcha-verification-failed";
+    default:
+      return "passwordless.something-wrong-error";
+  }
+};
 
+exports.cn = cn;
+exports.formatIOSMobile = formatIOSMobile;
+exports.getBrowserExtensionUrl = getBrowserExtensionUrl;
+exports.getBrowserName = getBrowserName;
+exports.getErrorMessages = getErrorMessages;
+exports.getIcons = getIcons;
+exports.getMobileInstallLink = getMobileInstallLink;
+exports.getOsName = getOsName;
 exports.getUserCountry = getUserCountry;
 exports.getUserLanguage = getUserLanguage;
 exports.passwordlessBackendUrl = passwordlessBackendUrl;

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

@@ -0,0 +1,70 @@
+'use strict';
+
+var noModal = require('@web3auth/no-modal');
+var vue$1 = require('@web3auth/no-modal/vue');
+var vue = require('vue');
+var useWeb3AuthInner = require('./composables/useWeb3AuthInner.js');
+
+const WalletServicesInnerProvider = vue.defineComponent({
+  name: "WalletServicesInnerProvider",
+  setup() {
+    const web3AuthContext = useWeb3AuthInner.useWeb3AuthInner();
+    if (!web3AuthContext) throw noModal.WalletServicesPluginError.fromCode(1000, "`WalletServicesProvider` must be wrapped by `Web3AuthProvider`");
+    const {
+      getPlugin,
+      isInitialized,
+      isConnected
+    } = web3AuthContext;
+    const walletServicesPlugin = vue.shallowRef(null);
+    const ready = vue.ref(false);
+    const connecting = vue.ref(false);
+    vue.watch(isInitialized, newIsInitialized => {
+      if (newIsInitialized) {
+        const plugin = getPlugin(noModal.EVM_PLUGINS.WALLET_SERVICES);
+        walletServicesPlugin.value = plugin;
+      }
+    });
+    vue.watch(isConnected, newIsConnected => {
+      if (newIsConnected) {
+        var _walletServicesPlugin;
+        const plugin = getPlugin(noModal.EVM_PLUGINS.WALLET_SERVICES);
+        if (!walletServicesPlugin.value) walletServicesPlugin.value = plugin;
+        // when rehydrating, the connectedListener may be registered after the connected event is emitted, we need to check the status here
+        if (((_walletServicesPlugin = walletServicesPlugin.value) === null || _walletServicesPlugin === void 0 ? void 0 : _walletServicesPlugin.status) === noModal.CONNECTOR_STATUS.CONNECTED) ready.value = true;
+      }
+    });
+    vue.watch(walletServicesPlugin, (newWalletServicesPlugin, prevWalletServicesPlugin) => {
+      const connectedListener = () => {
+        ready.value = true;
+      };
+      const disconnectedListener = () => {
+        ready.value = false;
+      };
+      const connectingListener = () => {
+        connecting.value = true;
+      };
+      // unregister previous listeners
+      if (prevWalletServicesPlugin && newWalletServicesPlugin !== prevWalletServicesPlugin) {
+        prevWalletServicesPlugin.off(noModal.PLUGIN_EVENTS.CONNECTED, connectedListener);
+        prevWalletServicesPlugin.off(noModal.PLUGIN_EVENTS.DISCONNECTED, disconnectedListener);
+        prevWalletServicesPlugin.off(noModal.PLUGIN_EVENTS.CONNECTING, connectingListener);
+      }
+      if (newWalletServicesPlugin && newWalletServicesPlugin !== prevWalletServicesPlugin) {
+        newWalletServicesPlugin.on(noModal.PLUGIN_EVENTS.CONNECTED, connectedListener);
+        newWalletServicesPlugin.on(noModal.PLUGIN_EVENTS.DISCONNECTED, disconnectedListener);
+        newWalletServicesPlugin.on(noModal.PLUGIN_EVENTS.CONNECTING, connectingListener);
+      }
+    });
+    vue.provide(vue$1.WalletServicesContextKey, {
+      plugin: walletServicesPlugin,
+      ready,
+      connecting
+    });
+  },
+  render() {
+    var _this$$slots$default;
+    return vue.h((_this$$slots$default = this.$slots.default) !== null && _this$$slots$default !== void 0 ? _this$$slots$default : "");
+  }
+});
+
+exports.WalletServicesInnerProvider = WalletServicesInnerProvider;