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

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

@@ -1,244 +0,0 @@
-'use strict';
-
-var _objectSpread = require('@babel/runtime/helpers/objectSpread2');
-var jsxRuntime = require('react/jsx-runtime');
-var auth = require('@web3auth/auth');
-var noModal = require('@web3auth/no-modal');
-var deepmerge = require('deepmerge');
-var React = require('react');
-var reactI18next = require('react-i18next');
-var interfaces = require('../interfaces.js');
-var localeImport = require('../localeImport.js');
-var AdapterLoader = require('./AdapterLoader.js');
-var Button = require('./Button/Button.js');
-var ExternalWallets = require('./ExternalWallets.js');
-var Footer = require('./Footer.js');
-var Header = require('./Header.js');
-var SocialLoginPasswordless = require('./SocialLoginPasswordless.js');
-var SocialLogins = require('./SocialLogins.js');
-
-noModal.log.enableAll();
-function Modal(props) {
-  var _modalState$socialLog, _modalState$socialLog2, _modalState$socialLog5, _modalState$socialLog7, _modalState$socialLog9, _modalState$socialLog10;
-  const [modalTransitionClasses, setModalTransitionClasses] = React.useState(["w3a-modal__inner"]);
-  const [modalState, setModalState] = React.useState({
-    externalWalletsVisibility: false,
-    status: interfaces.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] = reactI18next.useTranslation(undefined, {
-    i18n: localeImport
-  });
-  const {
-    stateListener,
-    appLogo,
-    appName,
-    chainNamespaces,
-    walletRegistry,
-    handleSocialLoginClick,
-    handleExternalWalletClick,
-    handleShowExternalWallets,
-    closeModal
-  } = props;
-  const [transition, setTransition] = React.useState("");
-  React.useEffect(() => {
-    stateListener.emit("MOUNTED");
-    stateListener.on("STATE_UPDATED", newModalState => {
-      noModal.log.debug("state updated", newModalState);
-      setModalState(prevState => {
-        const mergedState = noModal.cloneDeep(deepmerge(prevState, newModalState));
-        return mergedState;
-      });
-    });
-  }, [stateListener]);
-  React.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 = React.useCallback(() => {
-    if (modalState.status === interfaces.MODAL_STATUS.CONNECTED) {
-      closeModal();
-    }
-    if (modalState.status === interfaces.MODAL_STATUS.ERRORED) {
-      setModalState(prevState => {
-        return _objectSpread(_objectSpread({}, prevState), {}, {
-          modalVisibility: true,
-          status: interfaces.MODAL_STATUS.INITIALIZED
-        });
-      });
-    }
-  }, [closeModal, modalState.status]);
-  const preHandleExternalWalletClick = React.useCallback(params => {
-    const {
-      connector
-    } = params;
-    setModalState(prevState => {
-      return _objectSpread(_objectSpread({}, prevState), {}, {
-        detailedLoaderConnector: connector,
-        detailedLoaderConnectorName: noModal.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 = jsxRuntime.jsx("div", {
-    className: "w3ajs-external-wallet w3a-group w3a--w-full",
-    children: jsxRuntime.jsx("div", {
-      className: "w3a-external-toggle w3ajs-external-toggle",
-      children: jsxRuntime.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 = React.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.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]);
-  noModal.log.info("modal state", modalState, areSocialLoginsVisible);
-  const isEmailPasswordlessLoginVisible = React.useMemo(() => {
-    var _modalState$socialLog6;
-    return (_modalState$socialLog6 = modalState.socialLoginsConfig) === null || _modalState$socialLog6 === void 0 || (_modalState$socialLog6 = _modalState$socialLog6.loginMethods[auth.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 = React.useMemo(() => {
-    var _modalState$socialLog8;
-    return (_modalState$socialLog8 = modalState.socialLoginsConfig) === null || _modalState$socialLog8 === void 0 || (_modalState$socialLog8 = _modalState$socialLog8.loginMethods[auth.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 && jsxRuntime.jsx("div", {
-    id: "w3a-modal",
-    className: "w3a-modal",
-    children: jsxRuntime.jsxs("div", {
-      className: `${modalTransitionClasses.join(" ")} ${modalState.status !== interfaces.MODAL_STATUS.INITIALIZED ? "w3a--p-6 w3a--pt-7" : ""} ${(areSocialLoginsVisible || isEmailPasswordlessLoginVisible || isSmsPasswordlessLoginVisible) && !modalState.externalWalletsVisibility ? "" : "wallet-adapter-container"}`,
-      children: [modalState.status !== interfaces.MODAL_STATUS.INITIALIZED ? jsxRuntime.jsxs(jsxRuntime.Fragment, {
-        children: [jsxRuntime.jsx(Header, {
-          onClose: closeModal,
-          appLogo: appLogo,
-          appName: appName
-        }), jsxRuntime.jsx("div", {
-          className: "w3a-modal__content w3ajs-content",
-          children: jsxRuntime.jsx(AdapterLoader, {
-            onClose: onCloseLoader,
-            appLogo: appLogo,
-            modalStatus: modalState.status,
-            message: t(modalState.postLoadingMessage),
-            connector: modalState.detailedLoaderConnector,
-            connectorName: modalState.detailedLoaderConnectorName
-          })
-        })]
-      }) : jsxRuntime.jsx("div", {
-        className: `transition-wrapper ${transition}`,
-        children: (areSocialLoginsVisible || isEmailPasswordlessLoginVisible || isSmsPasswordlessLoginVisible) && !modalState.externalWalletsVisibility ? jsxRuntime.jsxs(jsxRuntime.Fragment, {
-          children: [jsxRuntime.jsx(Header, {
-            onClose: closeModal,
-            appLogo: appLogo,
-            appName: appName
-          }), jsxRuntime.jsxs("div", {
-            className: "w3a-modal__content w3ajs-content",
-            children: [areSocialLoginsVisible ? jsxRuntime.jsx(SocialLogins, {
-              handleSocialLoginClick: params => preHandleSocialWalletClick(params),
-              socialLoginsConfig: modalState.socialLoginsConfig
-            }) : null, (isEmailPasswordlessLoginVisible || isSmsPasswordlessLoginVisible) && jsxRuntime.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]
-          })]
-        }) : jsxRuntime.jsx("div", {
-          className: "w3a-modal__content_external_wallet w3ajs-content",
-          children: jsxRuntime.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
-          })
-        })
-      }), jsxRuntime.jsx(Footer, {})]
-    })
-  });
-}
-
-module.exports = Modal;

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

@@ -1,30 +0,0 @@
-'use strict';
-
-var jsxRuntime = require('react/jsx-runtime');
-var reactI18next = require('react-i18next');
-var localeImport = require('../localeImport.js');
-
-function SelfCustodyViaWeb3Auth() {
-  const [t] = reactI18next.useTranslation(undefined, {
-    i18n: localeImport
-  });
-  return jsxRuntime.jsxs("div", {
-    className: "w3a--flex w3a--items-center w3a--gap-2 w3a--justify-center",
-    children: [jsxRuntime.jsx("div", {
-      className: "w3a--text-xs w3a--text-app-gray-300 dark:w3a--text-app-gray-500",
-      children: t("modal.footer.message-new")
-    }), jsxRuntime.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"
-    }), jsxRuntime.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"
-    })]
-  });
-}
-
-module.exports = SelfCustodyViaWeb3Auth;

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

@@ -1,148 +0,0 @@
-'use strict';
-
-var jsxRuntime = require('react/jsx-runtime');
-var auth = require('@web3auth/auth');
-var React = require('react');
-var reactI18next = require('react-i18next');
-var localeImport = require('../localeImport.js');
-var utils = require('../utils.js');
-var Button = require('./Button/Button.js');
-var Icon = require('./Icon.js');
-
-function SocialLoginPasswordless(props) {
-  const {
-    handleSocialLoginClick,
-    connector,
-    isPrimaryBtn,
-    isEmailVisible,
-    isSmsVisible,
-    socialLoginsConfig
-  } = props;
-  const [fieldValue, setFieldValue] = React.useState("");
-  const [countryCode, setCountryCode] = React.useState("");
-  const [isValidInput, setIsValidInput] = React.useState(null);
-  const [t] = reactI18next.useTranslation(undefined, {
-    i18n: localeImport
-  });
-  const handleFormSubmit = async e => {
-    e.preventDefault();
-    const value = fieldValue;
-    if (isEmailVisible) {
-      const emailConfig = socialLoginsConfig.loginMethods[auth.AUTH_CONNECTION.EMAIL_PASSWORDLESS];
-      const isEmailValid = value.match(/^([\w.%+-]+)@([\w-]+\.)+([\w]{2,})$/i);
-      if (isEmailValid) {
-        return handleSocialLoginClick({
-          connector,
-          loginParams: {
-            authConnection: auth.AUTH_CONNECTION.EMAIL_PASSWORDLESS,
-            authConnectionId: emailConfig.authConnectionId,
-            groupedAuthConnectionId: "",
-            login_hint: value,
-            name: "Email"
-          }
-        });
-      }
-    }
-    if (isSmsVisible) {
-      const smsConfig = socialLoginsConfig.loginMethods[auth.AUTH_CONNECTION.SMS_PASSWORDLESS];
-      const number = value.startsWith("+") ? value : `${countryCode}${value}`;
-      const result = await utils.validatePhoneNumber(number);
-      if (result) {
-        return handleSocialLoginClick({
-          connector,
-          loginParams: {
-            authConnection: auth.AUTH_CONNECTION.SMS_PASSWORDLESS,
-            authConnectionId: smsConfig.authConnectionId,
-            groupedAuthConnectionId: smsConfig.groupedAuthConnectionId,
-            login_hint: typeof result === "string" ? result : number,
-            name: "Mobile"
-          }
-        });
-      }
-    }
-    setIsValidInput(false);
-    return undefined;
-  };
-  React.useEffect(() => {
-    const getLocation = async () => {
-      const result = await utils.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 = React.useMemo(() => {
-    if (isEmailVisible && isSmsVisible) return "modal.social.passwordless-title";
-    if (isEmailVisible) return "modal.social.email";
-    return "modal.social.phone";
-  }, [isEmailVisible, isSmsVisible]);
-  const placeholder = React.useMemo(() => {
-    if (isEmailVisible && isSmsVisible) return "+(00)123456/name@example.com";
-    if (isEmailVisible) return "name@example.com";
-    return "+(00)123456";
-  }, [isEmailVisible, isSmsVisible]);
-  const invalidInputErrorMessage = React.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 jsxRuntime.jsxs("div", {
-    className: "w3ajs-passwordless w3a-group w3a-group--passwordless",
-    children: [jsxRuntime.jsxs("div", {
-      className: "w3a-group__title",
-      children: [t(title), isSmsVisible && jsxRuntime.jsxs("div", {
-        className: "w3a--relative w3a--flex w3a--flex-col w3a--items-center w3a--cursor-pointer w3a--group",
-        children: [jsxRuntime.jsx(Icon, {
-          iconName: "information-circle-light",
-          darkIconName: "information-circle"
-        }), jsxRuntime.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: [jsxRuntime.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"
-          }), jsxRuntime.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: [jsxRuntime.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")
-            }), jsxRuntime.jsx("div", {
-              className: "w3a--text-xs w3a--text-app-gray-400",
-              children: t("modal.popup.phone-body")
-            })]
-          })]
-        })]
-      })]
-    }), jsxRuntime.jsxs("form", {
-      className: "w3ajs-passwordless-form",
-      onSubmit: e => handleFormSubmit(e),
-      children: [jsxRuntime.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 && jsxRuntime.jsx("div", {
-        className: "w3a-sms-field--error",
-        children: t(invalidInputErrorMessage)
-      }), jsxRuntime.jsx(Button, {
-        variant: isPrimaryBtn ? "primary" : "tertiary",
-        disabled: fieldValue === "",
-        className: "w3a--w-full",
-        type: "submit",
-        children: t("modal.social.passwordless-cta")
-      })]
-    })]
-  });
-}
-
-module.exports = SocialLoginPasswordless;

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

@@ -1,152 +0,0 @@
-'use strict';
-
-var jsxRuntime = require('react/jsx-runtime');
-var auth = require('@web3auth/auth');
-var classNames = require('classnames');
-var React = require('react');
-var reactI18next = require('react-i18next');
-var config = require('../config.js');
-var ThemeContext = require('../context/ThemeContext.js');
-var localeImport = require('../localeImport.js');
-var Button = require('./Button/Button.js');
-var Image = require('./Image.js');
-
-function getProviderIcon(method, isDark, isPrimaryBtn) {
-  const imageId = method === auth.AUTH_CONNECTION.TWITTER ? `login-twitter-x${isDark ? "-light" : "-dark"}` : `login-${method}${isDark ? "-light" : "-dark"}`;
-  const hoverId = method === auth.AUTH_CONNECTION.APPLE || method === auth.AUTH_CONNECTION.GITHUB || method === auth.AUTH_CONNECTION.TWITTER ? imageId : `login-${method}-active`;
-  if (isPrimaryBtn) {
-    return jsxRuntime.jsx(Image, {
-      width: "20",
-      imageId: hoverId,
-      hoverImageId: hoverId,
-      isButton: true
-    });
-  }
-  return jsxRuntime.jsx(Image, {
-    width: "20",
-    imageId: imageId,
-    hoverImageId: hoverId,
-    isButton: true
-  });
-}
-function SocialLogins(props) {
-  const [canShowMore, setCanShowMore] = React.useState(false);
-  const [isExpanded, setIsExpanded] = React.useState(false);
-  const {
-    socialLoginsConfig = {
-      loginMethods: {},
-      loginMethodsOrder: [],
-      connector: "",
-      uiConfig: {}
-    },
-    handleSocialLoginClick
-  } = props;
-  const {
-    isDark
-  } = React.useContext(ThemeContext.ThemedContext);
-  const [t] = reactI18next.useTranslation(undefined, {
-    i18n: localeImport
-  });
-  // Too small a function to use `useCallback`
-  const expandClickHandler = () => {
-    setIsExpanded(!isExpanded);
-  };
-  React.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.AUTH_CONNECTION.CUSTOM, auth.AUTH_CONNECTION.SMS_PASSWORDLESS, auth.AUTH_CONNECTION.EMAIL_PASSWORDLESS, auth.AUTH_CONNECTION.PASSKEYS, auth.AUTH_CONNECTION.TELEGRAM, auth.AUTH_CONNECTION.AUTHENTICATOR];
-  return jsxRuntime.jsxs("div", {
-    className: "w3ajs-social-logins w3a-group",
-    children: [jsxRuntime.jsx("ul", {
-      className: adapterListClass,
-      children: Object.keys(socialLoginsConfig.loginMethods).map(method => {
-        var _socialLoginsConfig$u, _socialLoginsConfig$u2;
-        const socialLoginConfig = socialLoginsConfig.loginMethods[method];
-        const name = config.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 jsxRuntime.jsx("li", {
-            className: "w3a--col-span-6 w3a-adapter-item",
-            style: {
-              order
-            },
-            children: jsxRuntime.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, jsxRuntime.jsx("p", {
-                className: "w3a--ml-2",
-                children: t("modal.social.continueCustom", {
-                  adapter: name
-                })
-              })]
-            })
-          }, method);
-        }
-        return jsxRuntime.jsx("li", {
-          className: loginMethodSpan,
-          style: {
-            order: order + loginMethodsCount
-          },
-          children: jsxRuntime.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);
-      })
-    }), jsxRuntime.jsx("div", {
-      className: "w3a-social__policy",
-      children: t("modal.social.policy")
-    }), canShowMore && jsxRuntime.jsx("div", {
-      className: "w3a--text-right",
-      children: jsxRuntime.jsx("button", {
-        type: "button",
-        className: adapterButtonClass,
-        onClick: expandClickHandler,
-        children: jsxRuntime.jsx("span", {
-          className: "w3ajs-button-expand-text",
-          children: adapterExpandText
-        })
-      })
-    })]
-  });
-}
-
-module.exports = SocialLogins;

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

@@ -1,84 +0,0 @@
-'use strict';
-
-var jsxRuntime = require('react/jsx-runtime');
-var Bowser = require('bowser');
-var copyToClipboard = require('copy-to-clipboard');
-var React = require('react');
-var reactI18next = require('react-i18next');
-var reactQrcodeLogo = require('react-qrcode-logo');
-var ThemeContext = require('../context/ThemeContext.js');
-var interfaces = require('../interfaces.js');
-var localeImport = require('../localeImport.js');
-
-function WalletConnect(props) {
-  var _getComputedStyle;
-  const {
-    walletConnectUri,
-    logoImage,
-    primaryColor
-  } = props;
-  const {
-    isDark
-  } = React.useContext(ThemeContext.ThemedContext);
-  const isDesktop = React.useMemo(() => {
-    const browser = Bowser.getParser(window.navigator.userAgent);
-    return browser.getPlatformType() === "desktop";
-  }, []);
-  const [t] = reactI18next.useTranslation(undefined, {
-    i18n: localeImport
-  });
-  const [isCopied, setIsCopied] = React.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 jsxRuntime.jsx("div", {
-    className: "w3ajs-wallet-connect w3a-wallet-connect",
-    children: jsxRuntime.jsx("div", {
-      className: "w3ajs-wallet-connect__container w3a-wallet-connect__container",
-      children: jsxRuntime.jsxs("div", {
-        className: "w3a-wallet-connect__container-desktop",
-        children: [jsxRuntime.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 && jsxRuntime.jsxs("div", {
-            className: "tooltip",
-            children: ["Copied", jsxRuntime.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)]"
-            })]
-          }), jsxRuntime.jsx(reactQrcodeLogo.QRCode, {
-            size: isDesktop ? 300 : 260,
-            eyeRadius: 5,
-            qrStyle: "dots",
-            removeQrCodeBehindLogo: true,
-            logoImage: logoImage || interfaces.WALLET_CONNECT_LOGO,
-            value: walletConnectUri,
-            logoHeight: 32,
-            logoWidth: 32,
-            logoPadding: 10,
-            eyeColor: isDark ? whiteColor : qrColor,
-            bgColor: isDark ? modalColor : whiteColor,
-            fgColor: isDark ? whiteColor : blackColor
-          })]
-        }), jsxRuntime.jsx("div", {
-          className: "text-xs",
-          children: t("modal.external.walletconnect-copy")
-        })]
-      })
-    })
-  });
-}
-var WalletConnect$1 = /*#__PURE__*/React.memo(WalletConnect);
-
-module.exports = WalletConnect$1;