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

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

@@ -0,0 +1,138 @@
+import { useTranslation } from 'react-i18next';
+import i18nInstance from '../../../localeImport.js';
+import { cn, getIcons } from '../../../utils.js';
+import Button from '../../Button/Button.js';
+import { BUTTON_TYPE } from '../../Button/Button.type.js';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+
+function NoWalletsFound() {
+  const [t] = useTranslation(undefined, {
+    i18n: i18nInstance
+  });
+  return /*#__PURE__*/jsx("div", {
+    className: "w3a--flex w3a--w-full w3a--items-center w3a--justify-center w3a--py-6 w3a--text-center w3a--text-app-gray-400 dark:w3a--text-app-gray-500",
+    children: t("modal.external.no-wallets-found")
+  });
+}
+function WalletsFound(props) {
+  const {
+    externalButtons,
+    isLoading,
+    handleWalletClick,
+    deviceDetails,
+    walletConnectUri,
+    buttonRadius
+  } = props;
+  if (isLoading) {
+    return /*#__PURE__*/jsx("div", {
+      className: "w3a--flex w3a--flex-col w3a--gap-y-2 w3a--pr-1.5",
+      children: Array.from({
+        length: 6
+      }).map((_, index) => /*#__PURE__*/jsx("div", {
+        className: cn("w3a--h-12 w3a--w-full w3a--animate-pulse w3a--rounded-2xl w3a--bg-app-gray-200 dark:w3a--bg-app-gray-700", {
+          "w3a--rounded-full": buttonRadius === "pill",
+          "w3a--rounded-lg": buttonRadius === "rounded",
+          "w3a--rounded-none": buttonRadius === "square"
+        })
+      }, `loader-${index}`))
+    });
+  }
+  return /*#__PURE__*/jsx("div", {
+    className: "w3a--flex w3a--flex-col w3a--gap-y-2 w3a--pr-1.5",
+    children: externalButtons.map(button => /*#__PURE__*/jsx(Button, {
+      type: BUTTON_TYPE.WALLET,
+      props: {
+        label: button.displayName,
+        onClick: () => handleWalletClick(button),
+        button,
+        deviceDetails,
+        walletConnectUri,
+        buttonRadius
+      }
+    }, button.name))
+  });
+}
+function MoreWalletsButton(props) {
+  const {
+    totalExternalWalletsCount,
+    initialWalletCount,
+    handleMoreWallets,
+    isLoading,
+    isDark,
+    buttonRadius
+  } = props;
+  const [t] = useTranslation(undefined, {
+    i18n: i18nInstance
+  });
+  const onMoreWalletsClick = () => {
+    if (handleMoreWallets) {
+      handleMoreWallets();
+    }
+  };
+  if (isLoading && initialWalletCount < totalExternalWalletsCount) {
+    return /*#__PURE__*/jsx("div", {
+      className: cn("w3a--h-12 w3a--w-full w3a--animate-pulse w3a--bg-app-gray-200 dark:w3a--bg-app-gray-700", {
+        "w3a--rounded-full": buttonRadius === "pill",
+        "w3a--rounded-lg": buttonRadius === "rounded",
+        "w3a--rounded-none": buttonRadius === "square"
+      })
+    });
+  }
+  return /*#__PURE__*/jsxs("button", {
+    type: "button",
+    className: cn("w3a--flex w3a--items-center w3a--justify-start w3a--gap-x-2 w3a--bg-app-gray-50 w3a--p-3 hover:w3a--bg-app-gray-200 dark:w3a--bg-app-gray-800 dark:hover:w3a--bg-app-gray-600", {
+      "w3a--rounded-full": buttonRadius === "pill",
+      "w3a--rounded-lg": buttonRadius === "rounded",
+      "w3a--rounded-none": buttonRadius === "square"
+    }),
+    onClick: onMoreWalletsClick,
+    children: [/*#__PURE__*/jsx("img", {
+      src: getIcons(isDark ? "view-dark" : "view-light"),
+      alt: "view",
+      height: "24",
+      width: "24"
+    }), /*#__PURE__*/jsx("p", {
+      className: "w3a--text-base w3a--font-normal w3a--text-app-gray-700 dark:w3a--text-app-white",
+      children: t("modal.connect-wallet.more-wallets")
+    }), /*#__PURE__*/jsx("span", {
+      className: "w3a--inline-flex w3a--items-center w3a--rounded-full w3a--bg-app-primary-100 w3a--px-2 w3a--py-1 w3a--text-xs w3a--font-medium w3a--text-app-primary-800  dark:w3a--border dark:w3a--border-app-primary-400 dark:w3a--bg-transparent dark:w3a--text-app-primary-400",
+      children: totalExternalWalletsCount - initialWalletCount
+    })]
+  });
+}
+function ConnectWalletList(props) {
+  const {
+    externalButtons,
+    isLoading,
+    totalExternalWalletsCount,
+    initialWalletCount,
+    handleWalletClick,
+    handleMoreWallets,
+    isDark,
+    deviceDetails,
+    walletConnectUri,
+    buttonRadius
+  } = props;
+  return /*#__PURE__*/jsxs(Fragment, {
+    children: [/*#__PURE__*/jsx("ul", {
+      className: cn("w3a--overflow-y-auto w3a--flex w3a--flex-col w3a--gap-y-2 w3a--h-[280px]"),
+      children: externalButtons.length === 0 ? /*#__PURE__*/jsx(NoWalletsFound, {}) : /*#__PURE__*/jsx(WalletsFound, {
+        externalButtons: externalButtons,
+        isLoading: isLoading,
+        handleWalletClick: handleWalletClick,
+        deviceDetails: deviceDetails,
+        walletConnectUri: walletConnectUri,
+        buttonRadius: buttonRadius
+      })
+    }), totalExternalWalletsCount > 15 && !isLoading && initialWalletCount < totalExternalWalletsCount && /*#__PURE__*/jsx(MoreWalletsButton, {
+      totalExternalWalletsCount: totalExternalWalletsCount,
+      initialWalletCount: initialWalletCount,
+      handleMoreWallets: handleMoreWallets,
+      isLoading: isLoading,
+      isDark: isDark,
+      buttonRadius: buttonRadius
+    })]
+  });
+}
+
+export { ConnectWalletList as default };

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

@@ -0,0 +1,91 @@
+import _objectSpread from '@babel/runtime/helpers/objectSpread2';
+import Bowser from 'bowser';
+import { useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { QRCode } from 'react-qrcode-logo';
+import { WALLET_CONNECT_LOGO } from '../../../constants.js';
+import i18nInstance from '../../../localeImport.js';
+import Image from '../../Image/Image.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+function ConnectWalletQrCode(props) {
+  var _getComputedStyle;
+  const [t] = useTranslation(undefined, {
+    i18n: i18nInstance
+  });
+  const {
+    walletConnectUri,
+    isDark,
+    selectedButton,
+    setBodyState,
+    bodyState,
+    logoImage,
+    primaryColor
+  } = props;
+  const isDesktop = useMemo(() => {
+    const browser = Bowser.getParser(window.navigator.userAgent);
+    return browser.getPlatformType() === "desktop";
+  }, []);
+  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 && primaryColor.toLowerCase() === "#ffffff" ? "#000000" : primaryColor;
+  return /*#__PURE__*/jsxs("div", {
+    className: "w3a--contents",
+    children: [walletConnectUri ? /*#__PURE__*/jsxs("div", {
+      className: "w3a--flex w3a--flex-col w3a--items-center w3a--justify-center w3a--gap-y-4 w3a--rounded-2xl w3a--border w3a--border-app-gray-200 w3a--p-4 dark:w3a--border-app-gray-700",
+      children: [/*#__PURE__*/jsx("div", {
+        className: "w3a--relative w3a--flex w3a--size-[300px] w3a--items-center w3a--justify-center w3a--rounded-2xl",
+        children: /*#__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("p", {
+        className: "w3a--text-center w3a--text-sm w3a--font-normal w3a--text-app-gray-500 dark:w3a--text-app-gray-300",
+        children: t("modal.external.walletconnect-copy")
+      })]
+    }) : /*#__PURE__*/jsx("div", {
+      className: "w3a--mx-auto w3a--flex w3a--size-[300px] w3a--animate-pulse w3a--items-center w3a--justify-center w3a--rounded-lg w3a--bg-app-gray-200 w3a--p-2 dark:w3a--bg-app-gray-700",
+      children: /*#__PURE__*/jsx(Image, {
+        imageId: `login-${selectedButton.name}`,
+        hoverImageId: `login-${selectedButton.name}`,
+        fallbackImageId: "wallet",
+        height: "30",
+        width: "30",
+        isButton: true,
+        extension: selectedButton.imgExtension
+      })
+    }), /*#__PURE__*/jsxs("div", {
+      className: "w3a--flex w3a--w-full w3a--items-center w3a--justify-between w3a--rounded-2xl w3a--bg-app-gray-50  w3a--px-4 w3a--py-2 w3a--text-app-gray-900 dark:w3a--bg-app-gray-800 dark:w3a--text-app-white",
+      children: [/*#__PURE__*/jsxs("p", {
+        className: "w3a--text-sm w3a--text-app-gray-900 dark:w3a--text-app-white",
+        children: [t("modal.external.dont-have"), " ", /*#__PURE__*/jsx("span", {
+          children: selectedButton === null || selectedButton === void 0 ? void 0 : selectedButton.displayName
+        }), "?"]
+      }), /*#__PURE__*/jsx("button", {
+        type: "button",
+        className: "w3a--appearance-none w3a--rounded-full w3a--border w3a--border-app-gray-400 w3a--px-3 w3a--py-2 w3a--text-sm w3a--font-medium w3a--text-app-gray-400 hover:w3a--bg-app-white hover:w3a--shadow-2xl dark:w3a--border-app-gray-300 dark:w3a--text-app-gray-300 dark:hover:w3a--bg-app-gray-700",
+        onClick: () => {
+          setBodyState(_objectSpread(_objectSpread({}, bodyState), {}, {
+            showWalletDetails: true,
+            walletDetails: selectedButton
+          }));
+        },
+        children: t("modal.external.get-wallet")
+      })]
+    })]
+  });
+}
+
+export { ConnectWalletQrCode as default };

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

@@ -0,0 +1,56 @@
+import { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import i18nInstance from '../../../localeImport.js';
+import { cn } from '../../../utils.js';
+import { jsx } from 'react/jsx-runtime';
+
+function ConnectWalletSearch(props) {
+  const {
+    totalExternalWalletCount,
+    isLoading,
+    walletSearch,
+    handleWalletSearch,
+    buttonRadius
+  } = props;
+  const [isInputFocused, setIsInputFocused] = useState(false);
+  const [t] = useTranslation(undefined, {
+    i18n: i18nInstance
+  });
+  const onWalletSearch = e => {
+    handleWalletSearch(e);
+    setIsInputFocused(true);
+  };
+
+  // const isShowSearch = totalExternalWalletCount > 15 && !isLoading;
+
+  // if (!isShowSearch) {
+  //   return <div className="w3a--h-[50px] w3a--w-full w3a--animate-pulse w3a--rounded-full w3a--bg-app-gray-200 dark:w3a--bg-app-gray-700" />;
+  // }
+
+  return /*#__PURE__*/jsx("input", {
+    type: "text",
+    value: walletSearch,
+    onInput: onWalletSearch,
+    onFocus: e => {
+      e.target.placeholder = "";
+      setIsInputFocused(true);
+    },
+    onBlur: e => {
+      e.target.placeholder = t("modal.external.search-wallet", {
+        count: totalExternalWalletCount
+      });
+      setIsInputFocused(false);
+    },
+    placeholder: isLoading ? t("modal.external.search-wallet-loading") : t("modal.external.search-wallet", {
+      count: totalExternalWalletCount
+    }),
+    disabled: isLoading,
+    className: cn("w3a--input w3a--appearance-none w3a--outline-none active:w3a--outline-none focus:w3a--outline-none w3a--bg-transparent placeholder:w3a--text-app-gray-400 dark:placeholder:w3a--text-app-gray-500 w3a--text-app-gray-900 dark:w3a--text-app-white", isInputFocused && "!w3a--border-app-primary-600", {
+      "w3a--rounded-full": buttonRadius === "pill",
+      "w3a--rounded-lg": buttonRadius === "rounded",
+      "w3a--rounded-none": buttonRadius === "square"
+    })
+  });
+}
+
+export { ConnectWalletSearch as default };

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

@@ -0,0 +1,68 @@
+import { useState, useEffect } from 'react';
+import { cn } from '../../utils.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+/**
+ * Embed component
+ * @param props - EmbedProps
+ * @returns Embed component
+ */
+function Embed(props) {
+  const {
+    open = true,
+    padding = true,
+    shadow = true,
+    border = false,
+    showCloseIcon = false,
+    onClose,
+    children,
+    borderRadius = "large"
+  } = props;
+  const [isOpen, setIsOpen] = useState(false);
+  useEffect(() => {
+    if (open) {
+      // Give a very small delay for the animation to start from the correct position
+      setTimeout(() => {
+        setIsOpen(true);
+      }, 50);
+    } else {
+      setIsOpen(false);
+    }
+  }, [open]);
+  const onCloseHandler = () => {
+    if (onClose) onClose();
+  };
+  if (!isOpen) return null;
+  return /*#__PURE__*/jsxs("div", {
+    className: cn("w3a--bg-app-light-surface1 dark:w3a--bg-app-dark-surface-main w3a--rounded-3xl w3a--w-[356px] [@media(min-width:375px)]:w3a--w-[393px] w3a--h-auto w3a--flex w3a--flex-col w3a--duration-500", {
+      "w3a--translate-y-0 w3a--delay-100": isOpen,
+      "w3a--translate-y-[100vh]": !isOpen,
+      "w3a--p-4": padding,
+      "w3a--shadow-xl sm:w3a--shadow-lg": shadow,
+      "w3a--border w3a--border-app-gray-100 dark:w3a--border-app-gray-800": border,
+      "w3a--rounded-[30px]": borderRadius === "large",
+      "w3a--rounded-2xl": borderRadius === "medium",
+      "w3a--rounded-none": borderRadius === "small"
+    }),
+    children: [showCloseIcon && /*#__PURE__*/jsx("div", {
+      className: "w3a--absolute w3a--right-6 w3a--top-[30px] w3a--z-10 w3a--cursor-pointer",
+      children: /*#__PURE__*/jsx("svg", {
+        width: "13",
+        height: "13",
+        viewBox: "0 0 13 13",
+        fill: "none",
+        xmlns: "http://www.w3.org/2000/svg",
+        onClick: onCloseHandler,
+        className: "w3a--text-app-gray-900 dark:w3a--text-app-white",
+        children: /*#__PURE__*/jsx("path", {
+          fillRule: "evenodd",
+          clipRule: "evenodd",
+          d: "M0.292787 1.29299C0.480314 1.10552 0.734622 1.0002 0.999786 1.0002C1.26495 1.0002 1.51926 1.10552 1.70679 1.29299L5.99979 5.58599L10.2928 1.29299C10.385 1.19748 10.4954 1.1213 10.6174 1.06889C10.7394 1.01648 10.8706 0.988893 11.0034 0.987739C11.1362 0.986585 11.2678 1.01189 11.3907 1.06217C11.5136 1.11245 11.6253 1.1867 11.7192 1.28059C11.8131 1.37449 11.8873 1.48614 11.9376 1.60904C11.9879 1.73193 12.0132 1.86361 12.012 1.99639C12.0109 2.12917 11.9833 2.26039 11.9309 2.38239C11.8785 2.5044 11.8023 2.61474 11.7068 2.70699L7.41379 6.99999L11.7068 11.293C11.8889 11.4816 11.9897 11.7342 11.9875 11.9964C11.9852 12.2586 11.88 12.5094 11.6946 12.6948C11.5092 12.8802 11.2584 12.9854 10.9962 12.9877C10.734 12.9899 10.4814 12.8891 10.2928 12.707L5.99979 8.41399L1.70679 12.707C1.51818 12.8891 1.26558 12.9899 1.00339 12.9877C0.741188 12.9854 0.490376 12.8802 0.304968 12.6948C0.11956 12.5094 0.0143906 12.2586 0.0121121 11.9964C0.00983372 11.7342 0.110629 11.4816 0.292787 11.293L4.58579 6.99999L0.292787 2.70699C0.105316 2.51946 0 2.26515 0 1.99999C0 1.73483 0.105316 1.48052 0.292787 1.29299V1.29299Z",
+          fill: "currentColor"
+        })
+      })
+    }), children]
+  });
+}
+
+export { Embed as default };

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

@@ -0,0 +1,51 @@
+import { useTranslation } from 'react-i18next';
+import i18nInstance from '../../localeImport.js';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+
+/**
+ * Footer component
+ * @returns Footer component
+ */
+function Footer({
+  privacyPolicy,
+  termsOfService
+}) {
+  const [t] = useTranslation(undefined, {
+    i18n: i18nInstance
+  });
+  return /*#__PURE__*/jsxs("div", {
+    className: "w3a--mx-auto w3a--mt-auto w3a--flex w3a--flex-col w3a--items-center w3a--justify-center w3a--gap-y-4 w3a--pt-6",
+    children: [(privacyPolicy || termsOfService) && /*#__PURE__*/jsxs("p", {
+      className: "w3a--mx-auto w3a--w-4/5 w3a--text-center w3a--text-xs w3a--text-app-gray-500 dark:w3a--text-app-gray-400",
+      children: [t("modal.footer.by-signing-in"), " ", termsOfService && /*#__PURE__*/jsxs("a", {
+        href: termsOfService,
+        className: "w3a--text-app-primary-600 dark:w3a--text-app-primary-500",
+        children: [t("modal.footer.terms-of-service"), " "]
+      }), privacyPolicy && /*#__PURE__*/jsxs(Fragment, {
+        children: [t("modal.footer.and"), " ", /*#__PURE__*/jsx("a", {
+          href: privacyPolicy,
+          className: "w3a--text-app-primary-600 dark:w3a--text-app-primary-500",
+          children: t("modal.footer.privacy-policy")
+        })]
+      })]
+    }), /*#__PURE__*/jsxs("div", {
+      className: "w3a--flex w3a--items-center w3a--justify-center w3a--gap-2",
+      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--block w3a--h-4 dark:w3a--hidden"
+      }), /*#__PURE__*/jsx("img", {
+        height: "16",
+        src: "https://images.web3auth.io/web3auth-footer-logo-dark.svg",
+        alt: "Web3Auth Logo Dark",
+        className: "w3a--hidden w3a--h-4 dark:w3a--block"
+      })]
+    })]
+  });
+}
+
+export { Footer as default };

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

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

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

@@ -0,0 +1,152 @@
+import { useEffect, useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { MODAL_STATUS } from '../../interfaces.js';
+import i18nInstance from '../../localeImport.js';
+import Image from '../Image/Image.js';
+import PulseLoader from '../PulseLoader/PulseLoader.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+/**
+ * ConnectingStatus component
+ * @param props - ConnectingStatusType
+ * @returns ConnectingStatus component
+ */
+function ConnectingStatus(props) {
+  const [t] = useTranslation(undefined, {
+    i18n: i18nInstance
+  });
+  const {
+    connector,
+    appLogo,
+    connectorName
+  } = props;
+  const providerIcon = useMemo(() => connector === "twitter" ? /*#__PURE__*/jsx(Image, {
+    imageId: "login-x-dark"
+  }) : /*#__PURE__*/jsx(Image, {
+    imageId: `login-${connector}`,
+    height: "40",
+    width: "40"
+  }), [connector]);
+  return /*#__PURE__*/jsxs("div", {
+    className: "w3a--flex w3a--h-full w3a--flex-1 w3a--flex-col w3a--items-center w3a--justify-center w3a--gap-y-4",
+    children: [/*#__PURE__*/jsxs("div", {
+      className: "w3a--flex w3a--items-center w3a--justify-center w3a--gap-x-6",
+      children: [/*#__PURE__*/jsx("figure", {
+        className: "w3a--loader-logo-size w3a--flex w3a--items-center w3a--justify-center w3a--overflow-hidden",
+        children: /*#__PURE__*/jsx("img", {
+          src: appLogo,
+          alt: "",
+          className: "w3a--size-full w3a--object-contain"
+        })
+      }), /*#__PURE__*/jsx(PulseLoader, {}), providerIcon]
+    }), /*#__PURE__*/jsxs("div", {
+      className: "w3a--flex w3a--flex-col w3a--gap-y-1",
+      children: [/*#__PURE__*/jsx("div", {
+        className: "w3a--text-center w3a--text-sm w3a--text-app-gray-500 dark:w3a--text-app-gray-400",
+        children: t("modal.adapter-loader.message1", {
+          adapter: connectorName
+        })
+      }), /*#__PURE__*/jsx("div", {
+        className: "w3a--text-center w3a--text-sm w3a--text-app-gray-500 dark:w3a--text-app-gray-400",
+        children: t("modal.adapter-loader.message2", {
+          adapter: connectorName
+        })
+      })]
+    })]
+  });
+}
+
+/**
+ * ConnectedStatus component
+ * @param props - ConnectedStatusType
+ * @returns ConnectedStatus component
+ */
+function ConnectedStatus(props) {
+  const {
+    message
+  } = props;
+  return /*#__PURE__*/jsxs("div", {
+    className: "w3a--flex w3a--flex-col w3a--items-center w3a--gap-y-2",
+    children: [/*#__PURE__*/jsx("svg", {
+      xmlns: "http://www.w3.org/2000/svg",
+      fill: "none",
+      viewBox: "0 0 20 20",
+      className: "w3a--connected-logo",
+      children: /*#__PURE__*/jsx("path", {
+        fill: "currentColor",
+        fillRule: "evenodd",
+        d: "M6.267 3.455a3.07 3.07 0 0 0 1.745-.723 3.066 3.066 0 0 1 3.976 0 3.07 3.07 0 0 0 1.745.723 3.066 3.066 0 0 1 2.812 2.812c.051.643.304 1.254.723 1.745a3.066 3.066 0 0 1 0 3.976 3.07 3.07 0 0 0-.723 1.745 3.066 3.066 0 0 1-2.812 2.812 3.07 3.07 0 0 0-1.745.723 3.066 3.066 0 0 1-3.976 0 3.07 3.07 0 0 0-1.745-.723 3.066 3.066 0 0 1-2.812-2.812 3.07 3.07 0 0 0-.723-1.745 3.066 3.066 0 0 1 0-3.976 3.07 3.07 0 0 0 .723-1.745 3.066 3.066 0 0 1 2.812-2.812m7.44 5.252a1 1 0 0 0-1.414-1.414L9 10.586 7.707 9.293a1 1 0 0 0-1.414 1.414l2 2a1 1 0 0 0 1.414 0z",
+        clipRule: "evenodd"
+      })
+    }), /*#__PURE__*/jsx("p", {
+      className: "w3a--text-center w3a--text-sm w3a--text-app-gray-500 dark:w3a--text-app-gray-400",
+      children: message
+    })]
+  });
+}
+
+/**
+ * ErroredStatus component
+ * @param props - ErroredStatusType
+ * @returns ErroredStatus component
+ */
+function ErroredStatus(props) {
+  const {
+    message
+  } = props;
+  return /*#__PURE__*/jsxs("div", {
+    className: "w3a--flex w3a--flex-col w3a--items-center w3a--gap-y-2",
+    children: [/*#__PURE__*/jsx("svg", {
+      xmlns: "http://www.w3.org/2000/svg",
+      fill: "none",
+      viewBox: "0 0 20 20",
+      className: "w3a--error-logo",
+      children: /*#__PURE__*/jsx("path", {
+        fill: "currentColor",
+        fillRule: "evenodd",
+        d: "M18 10a8 8 0 1 1-16.001 0A8 8 0 0 1 18 10m-7 4a1 1 0 1 1-2 0 1 1 0 0 1 2 0m-1-9a1 1 0 0 0-1 1v4a1 1 0 1 0 2 0V6a1 1 0 0 0-1-1",
+        clipRule: "evenodd"
+      })
+    }), /*#__PURE__*/jsx("p", {
+      className: "w3a--text-center w3a--text-sm w3a--text-app-gray-500 dark:w3a--text-app-gray-400",
+      children: message
+    })]
+  });
+}
+
+/**
+ * Loader component
+ * @param props - LoaderProps
+ * @returns Loader component
+ */
+function Loader(props) {
+  const {
+    connector,
+    connectorName,
+    modalStatus,
+    onClose,
+    appLogo,
+    message
+  } = props;
+  useEffect(() => {
+    if (modalStatus === MODAL_STATUS.CONNECTED) {
+      setTimeout(() => {
+        onClose();
+      }, 1000);
+    }
+  }, [modalStatus, onClose]);
+  return /*#__PURE__*/jsxs("div", {
+    className: "w3a--flex w3a--h-full w3a--flex-1 w3a--flex-col w3a--items-center w3a--justify-center w3a--gap-y-4",
+    children: [modalStatus === MODAL_STATUS.CONNECTING && /*#__PURE__*/jsx(ConnectingStatus, {
+      connector: connector,
+      connectorName: connectorName,
+      appLogo: appLogo
+    }), modalStatus === MODAL_STATUS.CONNECTED && /*#__PURE__*/jsx(ConnectedStatus, {
+      message: message
+    }), modalStatus === MODAL_STATUS.ERRORED && /*#__PURE__*/jsx(ErroredStatus, {
+      message: message
+    })]
+  });
+}
+
+export { Loader as default };