@web3auth/modal 9.7.0 → 10.0.0-alpha.1

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

@@ -0,0 +1,242 @@
+import _objectSpread from '@babel/runtime/helpers/objectSpread2';
+import { LOGIN_PROVIDER } from '@web3auth/auth';
+import { log, cloneDeep, CONNECTOR_NAMES } from '@web3auth/no-modal';
+import deepmerge from 'deepmerge';
+import { useState, useEffect, useCallback, useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { MODAL_STATUS } from '../interfaces.js';
+import i18nInstance from '../localeImport.js';
+import DetailedLoader from './AdapterLoader.js';
+import Button from './Button/Button.js';
+import ExternalWallet from './ExternalWallets.js';
+import Footer from './Footer.js';
+import memoizedHeader from './Header.js';
+import SocialLoginPasswordless from './SocialLoginPasswordless.js';
+import SocialLogins from './SocialLogins.js';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+
+log.enableAll();
+function Modal(props) {
+  var _modalState$socialLog, _modalState$socialLog2, _modalState$socialLog5, _modalState$socialLog7, _modalState$socialLog9, _modalState$socialLog10;
+  const [modalTransitionClasses, setModalTransitionClasses] = useState(["w3a-modal__inner"]);
+  const [modalState, setModalState] = useState({
+    externalWalletsVisibility: false,
+    status: MODAL_STATUS.INITIALIZED,
+    hasExternalWallets: false,
+    externalWalletsInitialized: false,
+    modalVisibility: false,
+    modalVisibilityDelayed: false,
+    postLoadingMessage: "",
+    walletConnectUri: "",
+    socialLoginsConfig: {
+      loginMethods: {},
+      loginMethodsOrder: [],
+      connector: "",
+      uiConfig: {}
+    },
+    externalWalletsConfig: {},
+    detailedLoaderConnector: "",
+    detailedLoaderConnectorName: "",
+    showExternalWalletsOnly: false
+  });
+  const [t] = useTranslation(undefined, {
+    i18n: i18nInstance
+  });
+  const {
+    stateListener,
+    appLogo,
+    appName,
+    chainNamespace,
+    walletRegistry,
+    handleSocialLoginClick,
+    handleExternalWalletClick,
+    handleShowExternalWallets,
+    closeModal
+  } = props;
+  const [transition, setTransition] = useState("");
+  useEffect(() => {
+    stateListener.emit("MOUNTED");
+    stateListener.on("STATE_UPDATED", newModalState => {
+      log.debug("state updated", newModalState);
+      setModalState(prevState => {
+        const mergedState = cloneDeep(deepmerge(prevState, newModalState));
+        return mergedState;
+      });
+    });
+  }, [stateListener]);
+  useEffect(() => {
+    let timeOutId;
+    if (modalState.modalVisibility) {
+      setModalState(prevState => {
+        return _objectSpread(_objectSpread({}, prevState), {}, {
+          modalVisibilityDelayed: modalState.modalVisibility
+        });
+      });
+      timeOutId = window.setTimeout(() => {
+        setModalTransitionClasses(["w3a-modal__inner", modalState.modalVisibility ? "w3a-modal__inner--active" : ""]);
+        // hide external wallets, if modal is closing, so that it will show social login screen on reopen.
+      }, 100);
+    } else {
+      setModalTransitionClasses(["w3a-modal__inner", modalState.modalVisibility ? "w3a-modal__inner--active" : ""]);
+      // hide external wallets, if modal is closing, so that it will show social login screen on reopen.
+
+      timeOutId = window.setTimeout(() => {
+        setModalState(prevState => {
+          return _objectSpread(_objectSpread({}, prevState), {}, {
+            modalVisibilityDelayed: modalState.modalVisibility
+          });
+        });
+      }, 250);
+    }
+    return () => {
+      clearTimeout(timeOutId);
+    };
+  }, [modalState.modalVisibility]);
+  const onCloseLoader = useCallback(() => {
+    if (modalState.status === MODAL_STATUS.CONNECTED) {
+      closeModal();
+    }
+    if (modalState.status === MODAL_STATUS.ERRORED) {
+      setModalState(prevState => {
+        return _objectSpread(_objectSpread({}, prevState), {}, {
+          modalVisibility: true,
+          status: MODAL_STATUS.INITIALIZED
+        });
+      });
+    }
+  }, [closeModal, modalState.status]);
+  const preHandleExternalWalletClick = useCallback(params => {
+    const {
+      connector
+    } = params;
+    setModalState(prevState => {
+      return _objectSpread(_objectSpread({}, prevState), {}, {
+        detailedLoaderConnector: connector,
+        detailedLoaderConnectorName: CONNECTOR_NAMES[connector]
+      });
+    });
+    handleExternalWalletClick(params);
+  }, [handleExternalWalletClick]);
+  const preHandleSocialWalletClick = params => {
+    const {
+      loginParams
+    } = params;
+    setModalState(prevState => {
+      return _objectSpread(_objectSpread({}, prevState), {}, {
+        detailedLoaderConnector: loginParams.loginProvider,
+        detailedLoaderConnectorName: loginParams.name
+      });
+    });
+    handleSocialLoginClick(params);
+  };
+  const isEmailPrimary = ((_modalState$socialLog = modalState.socialLoginsConfig) === null || _modalState$socialLog === void 0 || (_modalState$socialLog = _modalState$socialLog.uiConfig) === null || _modalState$socialLog === void 0 ? void 0 : _modalState$socialLog.primaryButton) === "emailLogin";
+  const isExternalPrimary = ((_modalState$socialLog2 = modalState.socialLoginsConfig) === null || _modalState$socialLog2 === void 0 || (_modalState$socialLog2 = _modalState$socialLog2.uiConfig) === null || _modalState$socialLog2 === void 0 ? void 0 : _modalState$socialLog2.primaryButton) === "externalLogin";
+  const externalWalletButton = /*#__PURE__*/jsx("div", {
+    className: "w3ajs-external-wallet w3a-group w3a--w-full",
+    children: /*#__PURE__*/jsx("div", {
+      className: "w3a-external-toggle w3ajs-external-toggle",
+      children: /*#__PURE__*/jsx(Button, {
+        variant: isExternalPrimary ? "primary" : "tertiary",
+        type: "button",
+        className: "w3a--w-full w3ajs-external-toggle__button",
+        style: {
+          width: "100%"
+        },
+        onClick: () => {
+          setModalState(prevState => {
+            return _objectSpread(_objectSpread({}, prevState), {}, {
+              externalWalletsVisibility: true
+            });
+          });
+          setTransition("slide-enter");
+          handleShowExternalWallets(modalState.externalWalletsInitialized);
+          setTimeout(() => {
+            setTransition("slide-exit");
+          }, 300);
+        },
+        children: t("modal.external.connect")
+      })
+    })
+  });
+  const areSocialLoginsVisible = useMemo(() => {
+    var _modalState$socialLog3, _modalState$socialLog4;
+    if (modalState.showExternalWalletsOnly) return false;
+    if (Object.keys(((_modalState$socialLog3 = modalState.socialLoginsConfig) === null || _modalState$socialLog3 === void 0 ? void 0 : _modalState$socialLog3.loginMethods) || {}).length === 0) return false;
+    const isAnySocialLoginVisible = Object.entries(((_modalState$socialLog4 = modalState.socialLoginsConfig) === null || _modalState$socialLog4 === void 0 ? void 0 : _modalState$socialLog4.loginMethods) || {}).some(([k, v]) => k !== LOGIN_PROVIDER.EMAIL_PASSWORDLESS && v.showOnModal !== false);
+    if (isAnySocialLoginVisible) return true;
+    return false;
+  }, [modalState.showExternalWalletsOnly, (_modalState$socialLog5 = modalState.socialLoginsConfig) === null || _modalState$socialLog5 === void 0 ? void 0 : _modalState$socialLog5.loginMethods]);
+  log.info("modal state", modalState, areSocialLoginsVisible);
+  const isEmailPasswordlessLoginVisible = useMemo(() => {
+    var _modalState$socialLog6;
+    return (_modalState$socialLog6 = modalState.socialLoginsConfig) === null || _modalState$socialLog6 === void 0 || (_modalState$socialLog6 = _modalState$socialLog6.loginMethods[LOGIN_PROVIDER.EMAIL_PASSWORDLESS]) === null || _modalState$socialLog6 === void 0 ? void 0 : _modalState$socialLog6.showOnModal;
+  }, [(_modalState$socialLog7 = modalState.socialLoginsConfig) === null || _modalState$socialLog7 === void 0 ? void 0 : _modalState$socialLog7.loginMethods]);
+  const isSmsPasswordlessLoginVisible = useMemo(() => {
+    var _modalState$socialLog8;
+    return (_modalState$socialLog8 = modalState.socialLoginsConfig) === null || _modalState$socialLog8 === void 0 || (_modalState$socialLog8 = _modalState$socialLog8.loginMethods[LOGIN_PROVIDER.SMS_PASSWORDLESS]) === null || _modalState$socialLog8 === void 0 ? void 0 : _modalState$socialLog8.showOnModal;
+  }, [(_modalState$socialLog9 = modalState.socialLoginsConfig) === null || _modalState$socialLog9 === void 0 ? void 0 : _modalState$socialLog9.loginMethods]);
+  return modalState.modalVisibilityDelayed && /*#__PURE__*/jsx("div", {
+    id: "w3a-modal",
+    className: "w3a-modal",
+    children: /*#__PURE__*/jsxs("div", {
+      className: `${modalTransitionClasses.join(" ")} ${modalState.status !== MODAL_STATUS.INITIALIZED ? "w3a--p-6 w3a--pt-7" : ""} ${(areSocialLoginsVisible || isEmailPasswordlessLoginVisible || isSmsPasswordlessLoginVisible) && !modalState.externalWalletsVisibility ? "" : "wallet-adapter-container"}`,
+      children: [modalState.status !== MODAL_STATUS.INITIALIZED ? /*#__PURE__*/jsxs(Fragment, {
+        children: [/*#__PURE__*/jsx(memoizedHeader, {
+          onClose: closeModal,
+          appLogo: appLogo,
+          appName: appName
+        }), /*#__PURE__*/jsx("div", {
+          className: "w3a-modal__content w3ajs-content",
+          children: /*#__PURE__*/jsx(DetailedLoader, {
+            onClose: onCloseLoader,
+            appLogo: appLogo,
+            modalStatus: modalState.status,
+            message: t(modalState.postLoadingMessage),
+            connector: modalState.detailedLoaderConnector,
+            connectorName: modalState.detailedLoaderConnectorName
+          })
+        })]
+      }) : /*#__PURE__*/jsx("div", {
+        className: `transition-wrapper ${transition}`,
+        children: (areSocialLoginsVisible || isEmailPasswordlessLoginVisible || isSmsPasswordlessLoginVisible) && !modalState.externalWalletsVisibility ? /*#__PURE__*/jsxs(Fragment, {
+          children: [/*#__PURE__*/jsx(memoizedHeader, {
+            onClose: closeModal,
+            appLogo: appLogo,
+            appName: appName
+          }), /*#__PURE__*/jsxs("div", {
+            className: "w3a-modal__content w3ajs-content",
+            children: [areSocialLoginsVisible ? /*#__PURE__*/jsx(SocialLogins, {
+              handleSocialLoginClick: params => preHandleSocialWalletClick(params),
+              socialLoginsConfig: modalState.socialLoginsConfig
+            }) : null, (isEmailPasswordlessLoginVisible || isSmsPasswordlessLoginVisible) && /*#__PURE__*/jsx(SocialLoginPasswordless, {
+              isEmailVisible: isEmailPasswordlessLoginVisible,
+              isSmsVisible: isSmsPasswordlessLoginVisible,
+              connector: (_modalState$socialLog10 = modalState.socialLoginsConfig) === null || _modalState$socialLog10 === void 0 ? void 0 : _modalState$socialLog10.connector,
+              handleSocialLoginClick: params => preHandleSocialWalletClick(params),
+              isPrimaryBtn: isEmailPrimary
+            }), modalState.hasExternalWallets && externalWalletButton]
+          })]
+        }) : /*#__PURE__*/jsx("div", {
+          className: "w3a-modal__content_external_wallet w3ajs-content",
+          children: /*#__PURE__*/jsx(ExternalWallet, {
+            modalStatus: modalState.status,
+            showBackButton: areSocialLoginsVisible || isEmailPasswordlessLoginVisible || isSmsPasswordlessLoginVisible,
+            handleExternalWalletClick: preHandleExternalWalletClick,
+            chainNamespace: chainNamespace,
+            walletConnectUri: modalState.walletConnectUri,
+            config: modalState.externalWalletsConfig,
+            hideExternalWallets: () => setModalState(prevState => {
+              return _objectSpread(_objectSpread({}, prevState), {}, {
+                externalWalletsVisibility: false
+              });
+            }),
+            walletRegistry: walletRegistry,
+            closeModal: closeModal
+          })
+        })
+      }), /*#__PURE__*/jsx(Footer, {})]
+    })
+  });
+}
+
+export { Modal as default };

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

@@ -0,0 +1,28 @@
+import { useTranslation } from 'react-i18next';
+import i18nInstance from '../localeImport.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+function SelfCustodyViaWeb3Auth() {
+  const [t] = useTranslation(undefined, {
+    i18n: i18nInstance
+  });
+  return /*#__PURE__*/jsxs("div", {
+    className: "w3a--flex w3a--items-center w3a--gap-2 w3a--justify-center",
+    children: [/*#__PURE__*/jsx("div", {
+      className: "w3a--text-xs w3a--text-app-gray-300 dark:w3a--text-app-gray-500",
+      children: t("modal.footer.message-new")
+    }), /*#__PURE__*/jsx("img", {
+      height: "16",
+      src: "https://images.web3auth.io/web3auth-footer-logo-light.svg",
+      alt: "Web3Auth Logo Light",
+      className: "w3a--h-4 w3a--block dark:w3a--hidden"
+    }), /*#__PURE__*/jsx("img", {
+      height: "16",
+      src: "https://images.web3auth.io/web3auth-footer-logo-dark.svg",
+      alt: "Web3Auth Logo Dark",
+      className: "w3a--h-4 w3a--hidden dark:w3a--block"
+    })]
+  });
+}
+
+export { SelfCustodyViaWeb3Auth as default };

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

@@ -0,0 +1,139 @@
+import { LOGIN_PROVIDER } from '@web3auth/auth';
+import { useState, useEffect, useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+import i18nInstance from '../localeImport.js';
+import { validatePhoneNumber, getUserCountry } from '../utils.js';
+import Button from './Button/Button.js';
+import Icon from './Icon.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+function SocialLoginPasswordless(props) {
+  const {
+    handleSocialLoginClick,
+    connector,
+    isPrimaryBtn,
+    isEmailVisible,
+    isSmsVisible
+  } = props;
+  const [fieldValue, setFieldValue] = useState("");
+  const [countryCode, setCountryCode] = useState("");
+  const [isValidInput, setIsValidInput] = useState(null);
+  const [t] = useTranslation(undefined, {
+    i18n: i18nInstance
+  });
+  const handleFormSubmit = async e => {
+    e.preventDefault();
+    const value = fieldValue;
+    if (isEmailVisible) {
+      const isEmailValid = value.match(/^([\w.%+-]+)@([\w-]+\.)+([\w]{2,})$/i);
+      if (isEmailValid) {
+        return handleSocialLoginClick({
+          connector,
+          loginParams: {
+            loginProvider: LOGIN_PROVIDER.EMAIL_PASSWORDLESS,
+            login_hint: value,
+            name: "Email"
+          }
+        });
+      }
+    }
+    if (isSmsVisible) {
+      const number = value.startsWith("+") ? value : `${countryCode}${value}`;
+      const result = await validatePhoneNumber(number);
+      if (result) {
+        return handleSocialLoginClick({
+          connector,
+          loginParams: {
+            loginProvider: LOGIN_PROVIDER.SMS_PASSWORDLESS,
+            login_hint: typeof result === "string" ? result : number,
+            name: "Mobile"
+          }
+        });
+      }
+    }
+    setIsValidInput(false);
+    return undefined;
+  };
+  useEffect(() => {
+    const getLocation = async () => {
+      const result = await getUserCountry();
+      if (result && result.dialCode) {
+        setCountryCode(result.dialCode);
+      }
+    };
+    if (isSmsVisible) getLocation();
+  }, [isSmsVisible]);
+  const handleInputChange = e => {
+    setFieldValue(e.target.value);
+    if (isValidInput === false) setIsValidInput(null);
+  };
+  const title = useMemo(() => {
+    if (isEmailVisible && isSmsVisible) return "modal.social.passwordless-title";
+    if (isEmailVisible) return "modal.social.email";
+    return "modal.social.phone";
+  }, [isEmailVisible, isSmsVisible]);
+  const placeholder = useMemo(() => {
+    if (isEmailVisible && isSmsVisible) return "+(00)123456/name@example.com";
+    if (isEmailVisible) return "name@example.com";
+    return "+(00)123456";
+  }, [isEmailVisible, isSmsVisible]);
+  const invalidInputErrorMessage = useMemo(() => {
+    if (isEmailVisible && isSmsVisible) return "modal.errors-invalid-number-email";
+    if (isEmailVisible) return "modal.errors-invalid-email";
+    return "modal.errors-invalid-number";
+  }, [isEmailVisible, isSmsVisible]);
+  return /*#__PURE__*/jsxs("div", {
+    className: "w3ajs-passwordless w3a-group w3a-group--passwordless",
+    children: [/*#__PURE__*/jsxs("div", {
+      className: "w3a-group__title",
+      children: [t(title), isSmsVisible && /*#__PURE__*/jsxs("div", {
+        className: "w3a--relative w3a--flex w3a--flex-col w3a--items-center w3a--cursor-pointer w3a--group",
+        children: [/*#__PURE__*/jsx(Icon, {
+          iconName: "information-circle-light",
+          darkIconName: "information-circle"
+        }), /*#__PURE__*/jsxs("div", {
+          className: "w3a--absolute w3a--z-20 w3a--flex-col w3a--items-center w3a--hidden w3a--mb-5 w3a--top-4 group-hover:w3a--flex",
+          children: [/*#__PURE__*/jsx("div", {
+            className: "w3a--w-3 w3a--h-3 w3a--ml-[3px] -w3a--mb-2 w3a--rotate-45 w3a--bg-app-gray-50 dark:w3a--bg-app-gray-600"
+          }), /*#__PURE__*/jsxs("div", {
+            className: `w3a--relative w3a--p-4 w3a--w-[300px] w3a--text-xs w3a--leading-none w3a--text-app-white w3a--rounded-md w3a--bg-app-gray-50 dark:w3a--bg-app-gray-600 w3a--shadow-lg ${isSmsVisible && !isEmailVisible ? "w3a--left-20" : "w3a--left-8"}`,
+            children: [/*#__PURE__*/jsx("div", {
+              className: "w3a--mb-1 w3a--text-xs w3a--font-medium w3a--text-app-gray-900 dark:w3a--text-app-white",
+              children: t("modal.popup.phone-header")
+            }), /*#__PURE__*/jsx("div", {
+              className: "w3a--text-xs w3a--text-app-gray-400",
+              children: t("modal.popup.phone-body")
+            })]
+          })]
+        })]
+      })]
+    }), /*#__PURE__*/jsxs("form", {
+      className: "w3ajs-passwordless-form",
+      onSubmit: e => handleFormSubmit(e),
+      children: [/*#__PURE__*/jsx("input", {
+        className: "w3a--w-full w3a--mb-4 w3a-text-field",
+        name: "passwordless-input",
+        required: true,
+        placeholder: `${t("modal.social.sms-placeholder-text")} ${placeholder}`,
+        onFocus: e => {
+          e.target.placeholder = "";
+        },
+        onBlur: e => {
+          e.target.placeholder = `${t("modal.social.sms-placeholder-text")} ${placeholder}`;
+        },
+        onChange: e => handleInputChange(e)
+      }), isValidInput === false && /*#__PURE__*/jsx("div", {
+        className: "w3a-sms-field--error",
+        children: t(invalidInputErrorMessage)
+      }), /*#__PURE__*/jsx(Button, {
+        variant: isPrimaryBtn ? "primary" : "tertiary",
+        disabled: fieldValue === "",
+        className: "w3a--w-full",
+        type: "submit",
+        children: t("modal.social.passwordless-cta")
+      })]
+    })]
+  });
+}
+
+export { SocialLoginPasswordless as default };

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

@@ -0,0 +1,146 @@
+import { LOGIN_PROVIDER } from '@web3auth/auth';
+import classNames from 'classnames';
+import { useState, useContext, useEffect } from 'react';
+import { useTranslation } from 'react-i18next';
+import { capitalizeFirstLetter } from '../config.js';
+import { ThemedContext } from '../context/ThemeContext.js';
+import i18nInstance from '../localeImport.js';
+import Button from './Button/Button.js';
+import Image from './Image.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+function getProviderIcon(method, isDark, isPrimaryBtn) {
+  const imageId = method === LOGIN_PROVIDER.TWITTER ? `login-twitter-x${isDark ? "-light" : "-dark"}` : `login-${method}${isDark ? "-light" : "-dark"}`;
+  const hoverId = method === LOGIN_PROVIDER.APPLE || method === LOGIN_PROVIDER.GITHUB || method === LOGIN_PROVIDER.TWITTER ? imageId : `login-${method}-active`;
+  if (isPrimaryBtn) {
+    return /*#__PURE__*/jsx(Image, {
+      width: "20",
+      imageId: hoverId,
+      hoverImageId: hoverId,
+      isButton: true
+    });
+  }
+  return /*#__PURE__*/jsx(Image, {
+    width: "20",
+    imageId: imageId,
+    hoverImageId: hoverId,
+    isButton: true
+  });
+}
+function SocialLogins(props) {
+  const [canShowMore, setCanShowMore] = useState(false);
+  const [isExpanded, setIsExpanded] = useState(false);
+  const {
+    socialLoginsConfig = {
+      loginMethods: {},
+      loginMethodsOrder: [],
+      connector: "",
+      uiConfig: {}
+    },
+    handleSocialLoginClick
+  } = props;
+  const {
+    isDark
+  } = useContext(ThemedContext);
+  const [t] = useTranslation(undefined, {
+    i18n: i18nInstance
+  });
+
+  // Too small a function to use `useCallback`
+  const expandClickHandler = () => {
+    setIsExpanded(!isExpanded);
+  };
+  useEffect(() => {
+    const maxOptions = Object.keys(socialLoginsConfig.loginMethods).filter(loginMethodKey => {
+      return socialLoginsConfig.loginMethods[loginMethodKey].showOnModal;
+    });
+    setCanShowMore(maxOptions.length > 4);
+  }, [socialLoginsConfig.loginMethods]);
+  const adapterListClass = classNames("w3a-adapter-list", "w3ajs-socials-adapters", !isExpanded ? " w3a-adapter-list--shrink" : "");
+  const adapterButtonClass = classNames("w3a-button-expand", "w3ajs-button-expand", isExpanded ? "w3a-button--rotate" : "");
+  const adapterExpandText = isExpanded ? t("modal.social.view-less") : t("modal.social.view-more");
+  const loginMethodsCount = Object.keys(socialLoginsConfig.loginMethods).length + 1;
+  const restrictedLoginMethods = [LOGIN_PROVIDER.WEBAUTHN, LOGIN_PROVIDER.JWT, LOGIN_PROVIDER.SMS_PASSWORDLESS, LOGIN_PROVIDER.EMAIL_PASSWORDLESS, LOGIN_PROVIDER.AUTHENTICATOR, LOGIN_PROVIDER.PASSKEYS];
+  return /*#__PURE__*/jsxs("div", {
+    className: "w3ajs-social-logins w3a-group",
+    children: [/*#__PURE__*/jsx("ul", {
+      className: adapterListClass,
+      children: Object.keys(socialLoginsConfig.loginMethods).map(method => {
+        var _socialLoginsConfig$u, _socialLoginsConfig$u2;
+        const name = capitalizeFirstLetter(socialLoginsConfig.loginMethods[method].name || method);
+        const orderIndex = socialLoginsConfig.loginMethodsOrder.indexOf(method) + 1;
+        const order = orderIndex || Object.keys(socialLoginsConfig.loginMethods).length + 1;
+        const isMainOption = socialLoginsConfig.loginMethods[method].mainOption;
+        const isPrimaryBtn = (socialLoginsConfig === null || socialLoginsConfig === void 0 || (_socialLoginsConfig$u = socialLoginsConfig.uiConfig) === null || _socialLoginsConfig$u === void 0 ? void 0 : _socialLoginsConfig$u.primaryButton) === "socialLogin" && order === 1;
+        const providerIcon = getProviderIcon(method, isDark, isPrimaryBtn);
+        if (socialLoginsConfig.loginMethods[method].showOnModal === false || restrictedLoginMethods.includes(method)) {
+          return null;
+        }
+        const loginMethodSpan = classNames("w3a-adapter-item", (socialLoginsConfig === null || socialLoginsConfig === void 0 || (_socialLoginsConfig$u2 = socialLoginsConfig.uiConfig) === null || _socialLoginsConfig$u2 === void 0 ? void 0 : _socialLoginsConfig$u2.loginGridCol) === 2 ? "w3a--col-span-3" : "w3a--col-span-2");
+        if (isMainOption || order === 1) {
+          return /*#__PURE__*/jsx("li", {
+            className: "w3a--col-span-6 w3a-adapter-item",
+            style: {
+              order
+            },
+            children: /*#__PURE__*/jsxs(Button, {
+              variant: "secondary",
+              onClick: () => handleSocialLoginClick({
+                connector: socialLoginsConfig.connector,
+                loginParams: {
+                  loginProvider: method,
+                  name,
+                  login_hint: ""
+                }
+              }),
+              className: "w3a--w-full",
+              title: name,
+              children: [providerIcon, /*#__PURE__*/jsx("p", {
+                className: "w3a--ml-2",
+                children: t("modal.social.continueCustom", {
+                  adapter: name
+                })
+              })]
+            })
+          }, method);
+        }
+        return /*#__PURE__*/jsx("li", {
+          className: loginMethodSpan,
+          style: {
+            order: order + loginMethodsCount
+          },
+          children: /*#__PURE__*/jsx(Button, {
+            variant: "secondary",
+            onClick: () => handleSocialLoginClick({
+              connector: socialLoginsConfig.connector,
+              loginParams: {
+                loginProvider: method,
+                name,
+                login_hint: ""
+              }
+            }),
+            className: "w3a--w-full",
+            title: name,
+            children: providerIcon
+          })
+        }, method);
+      })
+    }), /*#__PURE__*/jsx("div", {
+      className: "w3a-social__policy",
+      children: t("modal.social.policy")
+    }), canShowMore && /*#__PURE__*/jsx("div", {
+      className: "w3a--text-right",
+      children: /*#__PURE__*/jsx("button", {
+        type: "button",
+        className: adapterButtonClass,
+        onClick: expandClickHandler,
+        children: /*#__PURE__*/jsx("span", {
+          className: "w3ajs-button-expand-text",
+          children: adapterExpandText
+        })
+      })
+    })]
+  });
+}
+
+export { SocialLogins as default };

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

@@ -0,0 +1,82 @@
+import Bowser from 'bowser';
+import copyToClipboard from 'copy-to-clipboard';
+import { memo, useContext, useMemo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { QRCode } from 'react-qrcode-logo';
+import { ThemedContext } from '../context/ThemeContext.js';
+import { WALLET_CONNECT_LOGO } from '../interfaces.js';
+import i18nInstance from '../localeImport.js';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+function WalletConnect(props) {
+  var _getComputedStyle;
+  const {
+    walletConnectUri,
+    logoImage,
+    primaryColor
+  } = props;
+  const {
+    isDark
+  } = useContext(ThemedContext);
+  const isDesktop = useMemo(() => {
+    const browser = Bowser.getParser(window.navigator.userAgent);
+    return browser.getPlatformType() === "desktop";
+  }, []);
+  const [t] = useTranslation(undefined, {
+    i18n: i18nInstance
+  });
+  const [isCopied, setIsCopied] = useState(false);
+  const handleCopy = () => {
+    copyToClipboard(walletConnectUri);
+    setIsCopied(true);
+    setTimeout(() => {
+      setIsCopied(false);
+    }, 3000);
+  };
+  const root = document.documentElement;
+  const whiteColor = "#FFFFFF";
+  const blackColor = "#000000";
+  const modalColor = ((_getComputedStyle = getComputedStyle(root)) === null || _getComputedStyle === void 0 || (_getComputedStyle = _getComputedStyle.getPropertyValue("--app-gray-800")) === null || _getComputedStyle === void 0 ? void 0 : _getComputedStyle.trim()) || "#1f2a37";
+  const qrColor = primaryColor.toLowerCase() === "#ffffff" ? "#000000" : primaryColor;
+  return /*#__PURE__*/jsx("div", {
+    className: "w3ajs-wallet-connect w3a-wallet-connect",
+    children: /*#__PURE__*/jsx("div", {
+      className: "w3ajs-wallet-connect__container w3a-wallet-connect__container",
+      children: /*#__PURE__*/jsxs("div", {
+        className: "w3a-wallet-connect__container-desktop",
+        children: [/*#__PURE__*/jsxs("div", {
+          className: "w3ajs-wallet-connect-qr w3a-wallet-connect-qr w3a--rounded-md w3a--mb-2",
+          tabIndex: 0,
+          role: "button",
+          onClick: handleCopy,
+          onKeyDown: () => copyToClipboard(walletConnectUri),
+          children: [isCopied && /*#__PURE__*/jsxs("div", {
+            className: "tooltip",
+            children: ["Copied", /*#__PURE__*/jsx("div", {
+              className: "w3a--absolute w3a--border-8 w3a--border-b-0 w3a--border-r-transparent w3a--border-t-app-gray-900 w3a--border-l-transparent w3a--top-[100%] w3a--left-[calc(50%_-_8px)]"
+            })]
+          }), /*#__PURE__*/jsx(QRCode, {
+            size: isDesktop ? 300 : 260,
+            eyeRadius: 5,
+            qrStyle: "dots",
+            removeQrCodeBehindLogo: true,
+            logoImage: logoImage || WALLET_CONNECT_LOGO,
+            value: walletConnectUri,
+            logoHeight: 32,
+            logoWidth: 32,
+            logoPadding: 10,
+            eyeColor: isDark ? whiteColor : qrColor,
+            bgColor: isDark ? modalColor : whiteColor,
+            fgColor: isDark ? whiteColor : blackColor
+          })]
+        }), /*#__PURE__*/jsx("div", {
+          className: "text-xs",
+          children: t("modal.external.walletconnect-copy")
+        })]
+      })
+    })
+  });
+}
+var WalletConnect$1 = /*#__PURE__*/memo(WalletConnect);
+
+export { WalletConnect$1 as default };

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

@@ -0,0 +1,13 @@
+import { LOGIN_PROVIDER } from '@web3auth/auth';
+
+function capitalizeFirstLetter(string) {
+  return string.charAt(0).toUpperCase() + string.slice(1);
+}
+const restrictedLoginMethods = new Set([LOGIN_PROVIDER.AUTHENTICATOR, LOGIN_PROVIDER.PASSKEYS, LOGIN_PROVIDER.JWT, LOGIN_PROVIDER.WEBAUTHN]);
+const AUTH_PROVIDERS = Object.values(LOGIN_PROVIDER).filter(x => !restrictedLoginMethods.has(x));
+const AUTH_PROVIDERS_NAMES = AUTH_PROVIDERS.reduce((acc, x) => {
+  if (x === "email_passwordless") acc[x] = "Email";else if (x === "sms_passwordless") acc[x] = "Mobile";else acc[x] = capitalizeFirstLetter(x);
+  return acc;
+}, {});
+
+export { AUTH_PROVIDERS, AUTH_PROVIDERS_NAMES, capitalizeFirstLetter };

package/dist/lib.esm/packages/modal/src/ui/context/ThemeContext.js

@@ -0,0 +1,7 @@
+import { createContext } from 'react';
+
+const ThemedContext = /*#__PURE__*/createContext({
+  isDark: true // default value
+});
+
+export { ThemedContext };