@web3auth/modal 10.0.0-alpha.2 → 10.0.0-beta.1

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

@@ -1,10 +1,6 @@
 // capture whitelabel only once
 
 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,9 +9,12 @@ 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
+let TOAST_TYPE = /*#__PURE__*/function (TOAST_TYPE) {
+  TOAST_TYPE["SUCCESS"] = "success";
+  TOAST_TYPE["ERROR"] = "error";
+  TOAST_TYPE["WARNING"] = "warning";
+  TOAST_TYPE["INFO"] = "info";
+  return TOAST_TYPE;
+}({});
 
-const WALLET_CONNECT_LOGO = "https://images.web3auth.io/login-wallet-connect.svg";
-
-export { DEFAULT_LOGO_DARK, DEFAULT_LOGO_LIGHT, LOGIN_MODAL_EVENTS, MODAL_STATUS, WALLET_CONNECT_LOGO };
+export { LOGIN_MODAL_EVENTS, MODAL_STATUS, TOAST_TYPE };

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

@@ -1,16 +1,17 @@
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
-import './css/web3auth.css.js';
-import { SafeEventEmitter, LANGUAGES, applyWhiteLabelTheme } from '@web3auth/auth';
-import { log, WALLET_CONNECTORS, CONNECTOR_EVENTS } from '@web3auth/no-modal';
+import './css/index.css.js';
+import { LANGUAGES, applyWhiteLabelTheme, SafeEventEmitter } from '@web3auth/auth';
+import { log, WIDGET_TYPE, WalletInitializationError, WALLET_CONNECTORS, CONNECTOR_EVENTS } from '@web3auth/no-modal';
 import { createRoot } from 'react-dom/client';
-import Modal from './components/Modal.js';
+import Widget from './components/Widget/Widget.js';
+import { DEFAULT_LOGO_DARK, DEFAULT_LOGO_LIGHT } from './constants.js';
 import { ThemedContext } from './context/ThemeContext.js';
-import { MODAL_STATUS, LOGIN_MODAL_EVENTS, DEFAULT_LOGO_DARK, DEFAULT_LOGO_LIGHT } from './interfaces.js';
+import { MODAL_STATUS } from './interfaces.js';
 import i18nInstance from './localeImport.js';
 import { getUserLanguage } from './utils.js';
 import { jsx } from 'react/jsx-runtime';
 
-function createWrapper(parentZIndex) {
+function createWrapperForModal(parentZIndex) {
   const existingWrapper = document.getElementById("w3a-parent-container");
   if (existingWrapper) existingWrapper.remove();
   const parent = document.createElement("section");
@@ -18,19 +19,23 @@ 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 SafeEventEmitter {
-  constructor(_uiConfig) {
-    super();
+function createWrapperForEmbed(targetId) {
+  const targetElement = document.getElementById(targetId);
+  if (!targetElement) {
+    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, "initModal", async () => {
       const darkState = {
         isDark: this.isDark
@@ -115,11 +120,20 @@ class LoginModal extends SafeEventEmitter {
         this.stateEmitter.once("MOUNTED", () => {
           log.info("rendered");
           this.setState({
-            status: MODAL_STATUS.INITIALIZED
+            status: MODAL_STATUS.INITIALIZED,
+            web3authClientId: this.uiConfig.web3authClientId,
+            web3authNetwork: this.uiConfig.web3authNetwork
           });
           return resolve();
         });
-        const container = createWrapper(this.uiConfig.modalZIndex);
+        if (this.uiConfig.widgetType === WIDGET_TYPE.MODAL) {
+          createWrapperForModal(this.uiConfig.modalZIndex);
+        } else if (this.uiConfig.widgetType === WIDGET_TYPE.EMBED) {
+          createWrapperForEmbed(this.uiConfig.targetId);
+        } else {
+          throw 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,16 +142,17 @@ class LoginModal extends SafeEventEmitter {
         const root = createRoot(container);
         root.render(/*#__PURE__*/jsx(ThemedContext.Provider, {
           value: darkState,
-          children: /*#__PURE__*/jsx(Modal, {
-            closeModal: this.closeModal,
+          children: /*#__PURE__*/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) {
@@ -160,23 +175,27 @@ class LoginModal extends SafeEventEmitter {
     _defineProperty(this, "addWalletLogins", (externalWalletsConfig, options) => {
       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(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(LOGIN_MODAL_EVENTS.MODAL_VISIBILITY, false);
+      if (this.callbacks.onModalVisibility) {
+        this.callbacks.onModalVisibility(false);
+      }
     });
     _defineProperty(this, "initExternalWalletContainer", () => {
       this.setState({
@@ -184,9 +203,11 @@ class LoginModal extends SafeEventEmitter {
       });
     });
     _defineProperty(this, "handleShowExternalWallets", status => {
-      this.emit(LOGIN_MODAL_EVENTS.INIT_EXTERNAL_WALLETS, {
-        externalWalletsInitialized: status
-      });
+      if (this.callbacks.onInitExternalWallets) {
+        this.callbacks.onInitExternalWallets({
+          externalWalletsInitialized: status
+        });
+      }
     });
     _defineProperty(this, "handleExternalWalletClick", params => {
       log.info("external wallet clicked", params);
@@ -194,12 +215,14 @@ class LoginModal extends SafeEventEmitter {
         connector,
         chainNamespace
       } = params;
-      this.emit(LOGIN_MODAL_EVENTS.EXTERNAL_WALLET_LOGIN, {
-        connector,
-        loginParams: {
-          chainNamespace
-        }
-      });
+      if (this.callbacks.onExternalWalletLogin) {
+        this.callbacks.onExternalWalletLogin({
+          connector,
+          loginParams: {
+            chainNamespace
+          }
+        });
+      }
     });
     _defineProperty(this, "handleSocialLoginClick", params => {
       log.info("social login clicked", params);
@@ -207,15 +230,12 @@ class LoginModal extends SafeEventEmitter {
         connector,
         loginParams
       } = params;
-      this.emit(LOGIN_MODAL_EVENTS.SOCIAL_LOGIN, {
-        connector,
-        loginParams: {
-          authConnection: loginParams.authConnection,
-          authConnectionId: loginParams.authConnectionId,
-          groupedAuthConnectionId: loginParams.groupedAuthConnectionId,
-          login_hint: loginParams.login_hint
-        }
-      });
+      if (this.callbacks.onSocialLogin) {
+        this.callbacks.onSocialLogin({
+          connector,
+          loginParams
+        });
+      }
     });
     _defineProperty(this, "setState", newState => {
       this.stateEmitter.emit("STATE_UPDATED", newState);
@@ -299,9 +319,15 @@ class LoginModal extends SafeEventEmitter {
     if (!_uiConfig.loginGridCol) this.uiConfig.loginGridCol = 3;
     if (!_uiConfig.primaryButton) this.uiConfig.primaryButton = "socialLogin";
     if (!_uiConfig.defaultLanguage) this.uiConfig.defaultLanguage = getUserLanguage(_uiConfig.defaultLanguage);
+    if (!_uiConfig.widgetType) this.uiConfig.widgetType = WIDGET_TYPE.MODAL;
+    if (_uiConfig.widgetType === WIDGET_TYPE.EMBED && !_uiConfig.targetId) {
+      log.error("targetId is required for embed widget");
+      throw WalletInitializationError.invalidParams("targetId is required for embed widget");
+    }
     this.stateEmitter = new SafeEventEmitter();
     this.chainNamespaces = _uiConfig.chainNamespaces;
     this.walletRegistry = _uiConfig.walletRegistry;
+    this.callbacks = callbacks;
     this.subscribeCoreEvents(this.uiConfig.connectorListener);
   }
   get isDark() {

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

@@ -1,28 +1,71 @@
-import _objectSpread from '@babel/runtime/helpers/objectSpread2';
-import { post, get } from '@toruslabs/http-helpers';
+import { get, post } from '@toruslabs/http-helpers';
 import { LANGUAGES, LANGUAGE_MAP } from '@web3auth/auth';
-import { WALLET_CONNECTORS, log, WalletInitializationError } from '@web3auth/no-modal';
-import { AUTH_PROVIDERS, AUTH_PROVIDERS_NAMES } from './config.js';
+import { log } from '@web3auth/no-modal';
+import clsx from 'clsx';
+import { twMerge } from 'tailwind-merge';
 
-const getConnectorSocialLogins = (connectorName, loginMethodsConfig = {}) => {
-  const finalLoginMethodsConfig = {};
-  if (connectorName === WALLET_CONNECTORS.AUTH) {
-    AUTH_PROVIDERS.forEach(loginMethod => {
-      const currentLoginMethodConfig = loginMethodsConfig[loginMethod] || {
-        name: AUTH_PROVIDERS_NAMES[loginMethod],
-        showOnMobile: true,
-        showOnModal: true,
-        showOnDesktop: true
-      };
-      finalLoginMethodsConfig[loginMethod] = _objectSpread({}, currentLoginMethodConfig);
-    });
-    log.debug("auth login method ui config", finalLoginMethodsConfig);
-  } else {
-    throw WalletInitializationError.invalidParams(`${connectorName} is not a valid connector`);
+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 = 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;
   }
-  return finalLoginMethodsConfig;
 };
-const passwordlessBackendUrl = "https://api-passwordless.web3auth.io";
+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 get(`${passwordlessBackendUrl}/api/v3/user/location`);
@@ -61,5 +104,44 @@ const getUserLanguage = defaultLanguage => {
   }
   return Object.prototype.hasOwnProperty.call(LANGUAGE_MAP, userLanguage) ? userLanguage : 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";
+  }
+};
 
-export { getConnectorSocialLogins, getUserCountry, getUserLanguage, passwordlessBackendUrl, validatePhoneNumber };
+export { cn, formatIOSMobile, getBrowserExtensionUrl, getBrowserName, getErrorMessages, getIcons, getMobileInstallLink, getOsName, getUserCountry, getUserLanguage, passwordlessBackendUrl, validatePhoneNumber };

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

@@ -90,18 +90,7 @@ const Web3AuthProvider = defineComponent({
         try {
           initError.value = null;
           isInitializing.value = true;
-          const {
-            modalConfig,
-            hideWalletDiscovery
-          } = props.config;
-          if (modalConfig || typeof hideWalletDiscovery === "boolean") {
-            await newWeb3Auth.initModal({
-              modalConfig,
-              hideWalletDiscovery
-            });
-          } else {
-            await newWeb3Auth.initModal();
-          }
+          await newWeb3Auth.initModal();
         } catch (error) {
           initError.value = error;
         } finally {