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

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

@@ -1,49 +0,0 @@
-import { useContext } from 'react';
-import { ThemedContext } from '../context/ThemeContext.js';
-import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
-
-function Image(props) {
-  const {
-    hoverImageId,
-    darkHoverImageId,
-    imageId,
-    darkImageId,
-    isButton = false,
-    height = "auto",
-    width = "auto",
-    fallbackImageId,
-    extension = "svg"
-  } = props;
-  const {
-    isDark
-  } = useContext(ThemedContext);
-  const imgName = isDark && darkImageId ? darkImageId : imageId;
-  const hoverImgName = isDark && darkHoverImageId ? darkHoverImageId : hoverImageId;
-  return /*#__PURE__*/jsxs(Fragment, {
-    children: [/*#__PURE__*/jsx("img", {
-      src: `https://images.web3auth.io/${imgName}.${extension}`,
-      height: height,
-      width: width,
-      alt: imageId,
-      className: "image-icon w3a--object-contain w3a--rounded",
-      onError: ({
-        currentTarget
-      }) => {
-        if (fallbackImageId) {
-          // eslint-disable-next-line no-param-reassign
-          currentTarget.onerror = null; // prevents looping
-          // eslint-disable-next-line no-param-reassign
-          currentTarget.src = `https://images.web3auth.io/${fallbackImageId}.svg`;
-        }
-      }
-    }), isButton ? /*#__PURE__*/jsx("img", {
-      src: `https://images.web3auth.io/${hoverImgName}.${extension}`,
-      height: height,
-      width: width,
-      alt: hoverImageId,
-      className: "hover-icon w3a--object-contain w3a--rounded"
-    }) : null]
-  });
-}
-
-export { Image as default };

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

@@ -1,57 +0,0 @@
-import { log, CONNECTOR_STATUS } from '@web3auth/no-modal';
-import { useEffect } from 'react';
-import { MODAL_STATUS } from '../interfaces.js';
-import Icon from './Icon.js';
-import { jsxs, jsx } from 'react/jsx-runtime';
-
-const closeIcon = /*#__PURE__*/jsx(Icon, {
-  iconName: "close"
-});
-function Loader(props) {
-  const {
-    message,
-    modalStatus,
-    label,
-    onClose,
-    canEmit = true
-  } = props;
-  useEffect(() => {
-    log.debug("loader re-rendering");
-    if (modalStatus === MODAL_STATUS.CONNECTED && canEmit) {
-      setTimeout(() => {
-        onClose();
-      }, 3000);
-    }
-  }, [canEmit, modalStatus, onClose]);
-  return modalStatus !== MODAL_STATUS.INITIALIZED ? /*#__PURE__*/jsxs("div", {
-    className: "w3ajs-modal-loader w3a-modal__loader",
-    children: [/*#__PURE__*/jsx("div", {
-      className: "w3a-modal__loader-content",
-      children: /*#__PURE__*/jsxs("div", {
-        className: "w3a-modal__loader-info",
-        children: [modalStatus === MODAL_STATUS.CONNECTING && /*#__PURE__*/jsx("div", {
-          className: "w3ajs-modal-loader__spinner w3a-spinner",
-          children: /*#__PURE__*/jsx("div", {
-            className: "w3a-spinner__spinner"
-          })
-        }), /*#__PURE__*/jsx("div", {
-          className: "w3ajs-modal-loader__label w3a-spinner-label",
-          children: label
-        }), modalStatus === CONNECTOR_STATUS.CONNECTED && /*#__PURE__*/jsx("div", {
-          className: "w3ajs-modal-loader__message w3a-spinner-message",
-          children: message
-        }), modalStatus === CONNECTOR_STATUS.ERRORED && /*#__PURE__*/jsx("div", {
-          className: "w3ajs-modal-loader__message w3a-spinner-message w3a-spinner-message--error",
-          children: message
-        })]
-      })
-    }), (modalStatus === CONNECTOR_STATUS.CONNECTED || modalStatus === CONNECTOR_STATUS.ERRORED) && /*#__PURE__*/jsx("button", {
-      type: "button",
-      className: "w3a-header__button w3ajs-loader-close-btn",
-      onClick: onClose,
-      children: closeIcon
-    })]
-  }) : null;
-}
-
-export { Loader as default };

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

@@ -1,243 +0,0 @@
-import _objectSpread from '@babel/runtime/helpers/objectSpread2';
-import { AUTH_CONNECTION } 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 ExternalWallets 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,
-    chainNamespaces,
-    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.authConnection,
-        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 !== AUTH_CONNECTION.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[AUTH_CONNECTION.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[AUTH_CONNECTION.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),
-              socialLoginsConfig: modalState.socialLoginsConfig,
-              isPrimaryBtn: isEmailPrimary
-            }), modalState.hasExternalWallets && externalWalletButton]
-          })]
-        }) : /*#__PURE__*/jsx("div", {
-          className: "w3a-modal__content_external_wallet w3ajs-content",
-          children: /*#__PURE__*/jsx(ExternalWallets, {
-            modalStatus: modalState.status,
-            showBackButton: areSocialLoginsVisible || isEmailPasswordlessLoginVisible || isSmsPasswordlessLoginVisible,
-            handleExternalWalletClick: preHandleExternalWalletClick,
-            chainNamespaces: chainNamespaces,
-            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

@@ -1,28 +0,0 @@
-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

@@ -1,146 +0,0 @@
-import { AUTH_CONNECTION } 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,
-    socialLoginsConfig
-  } = 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 emailConfig = socialLoginsConfig.loginMethods[AUTH_CONNECTION.EMAIL_PASSWORDLESS];
-      const isEmailValid = value.match(/^([\w.%+-]+)@([\w-]+\.)+([\w]{2,})$/i);
-      if (isEmailValid) {
-        return handleSocialLoginClick({
-          connector,
-          loginParams: {
-            authConnection: AUTH_CONNECTION.EMAIL_PASSWORDLESS,
-            authConnectionId: emailConfig.authConnectionId,
-            groupedAuthConnectionId: "",
-            login_hint: value,
-            name: "Email"
-          }
-        });
-      }
-    }
-    if (isSmsVisible) {
-      const smsConfig = socialLoginsConfig.loginMethods[AUTH_CONNECTION.SMS_PASSWORDLESS];
-      const number = value.startsWith("+") ? value : `${countryCode}${value}`;
-      const result = await validatePhoneNumber(number);
-      if (result) {
-        return handleSocialLoginClick({
-          connector,
-          loginParams: {
-            authConnection: AUTH_CONNECTION.SMS_PASSWORDLESS,
-            authConnectionId: smsConfig.authConnectionId,
-            groupedAuthConnectionId: smsConfig.groupedAuthConnectionId,
-            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

@@ -1,151 +0,0 @@
-import { AUTH_CONNECTION } 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 === AUTH_CONNECTION.TWITTER ? `login-twitter-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, {
-      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 = [AUTH_CONNECTION.CUSTOM, AUTH_CONNECTION.SMS_PASSWORDLESS, AUTH_CONNECTION.EMAIL_PASSWORDLESS, AUTH_CONNECTION.PASSKEYS, AUTH_CONNECTION.TELEGRAM, AUTH_CONNECTION.AUTHENTICATOR];
-  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 socialLoginConfig = socialLoginsConfig.loginMethods[method];
-        const name = capitalizeFirstLetter(socialLoginConfig.name || method);
-        const orderIndex = socialLoginsConfig.loginMethodsOrder.indexOf(method) + 1;
-        const order = orderIndex || Object.keys(socialLoginsConfig.loginMethods).length + 1;
-        const isMainOption = socialLoginConfig.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 (socialLoginConfig.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: {
-                  authConnection: method,
-                  name: socialLoginConfig.name,
-                  authConnectionId: socialLoginConfig.authConnectionId,
-                  groupedAuthConnectionId: socialLoginConfig.groupedAuthConnectionId,
-                  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: {
-                authConnection: method,
-                name: socialLoginConfig.name,
-                authConnectionId: socialLoginConfig.authConnectionId,
-                groupedAuthConnectionId: socialLoginConfig.groupedAuthConnectionId,
-                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 };