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

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

@@ -0,0 +1,49 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var reactI18next = require('react-i18next');
+var constants = require('../../../constants.js');
+var localeImport = require('../../../localeImport.js');
+
+function ConnectWalletHeader(props) {
+  const {
+    onBackClick,
+    currentPage,
+    selectedButton
+  } = props;
+  const [t] = reactI18next.useTranslation(undefined, {
+    i18n: localeImport
+  });
+  const handleBack = () => {
+    if (onBackClick) {
+      onBackClick();
+    }
+  };
+  return jsxRuntime.jsxs("div", {
+    className: "w3a--flex w3a--items-center w3a--justify-between",
+    children: [jsxRuntime.jsx("button", {
+      type: "button",
+      className: "w3a--z-20 w3a--flex w3a--size-5 w3a--cursor-pointer w3a--items-center w3a--justify-center w3a--rounded-full",
+      onClick: handleBack,
+      children: jsxRuntime.jsx("svg", {
+        xmlns: "http://www.w3.org/2000/svg",
+        fill: "none",
+        viewBox: "0 0 20 20",
+        className: "w3a--text-app-gray-900 dark:w3a--text-app-white",
+        children: jsxRuntime.jsx("path", {
+          fill: "currentColor",
+          fillRule: "evenodd",
+          d: "M9.707 16.707a1 1 0 0 1-1.414 0l-6-6a1 1 0 0 1 0-1.414l6-6a1 1 0 0 1 1.414 1.414L5.414 9H17a1 1 0 1 1 0 2H5.414l4.293 4.293a1 1 0 0 1 0 1.414",
+          clipRule: "evenodd"
+        })
+      })
+    }), jsxRuntime.jsx("p", {
+      className: "w3a--text-base w3a--font-medium w3a--text-app-gray-900 dark:w3a--text-app-white",
+      children: currentPage === constants.CONNECT_WALLET_PAGES.SELECTED_WALLET ? selectedButton === null || selectedButton === void 0 ? void 0 : selectedButton.displayName : currentPage === constants.CONNECT_WALLET_PAGES.CONNECT_WALLET ? t("modal.connectYourWallet") : currentPage
+    }), jsxRuntime.jsx("div", {
+      className: "w3a--z-[-1] w3a--size-5"
+    })]
+  });
+}
+
+module.exports = ConnectWalletHeader;

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

@@ -0,0 +1,140 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var reactI18next = require('react-i18next');
+var localeImport = require('../../../localeImport.js');
+var utils = require('../../../utils.js');
+var Button = require('../../Button/Button.js');
+var Button_type = require('../../Button/Button.type.js');
+
+function NoWalletsFound() {
+  const [t] = reactI18next.useTranslation(undefined, {
+    i18n: localeImport
+  });
+  return jsxRuntime.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 jsxRuntime.jsx("div", {
+      className: "w3a--flex w3a--flex-col w3a--gap-y-2 w3a--pr-1.5",
+      children: Array.from({
+        length: 6
+      }).map((_, index) => jsxRuntime.jsx("div", {
+        className: utils.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 jsxRuntime.jsx("div", {
+    className: "w3a--flex w3a--flex-col w3a--gap-y-2 w3a--pr-1.5",
+    children: externalButtons.map(button => jsxRuntime.jsx(Button, {
+      type: 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] = reactI18next.useTranslation(undefined, {
+    i18n: localeImport
+  });
+  const onMoreWalletsClick = () => {
+    if (handleMoreWallets) {
+      handleMoreWallets();
+    }
+  };
+  if (isLoading && initialWalletCount < totalExternalWalletsCount) {
+    return jsxRuntime.jsx("div", {
+      className: utils.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 jsxRuntime.jsxs("button", {
+    type: "button",
+    className: utils.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: [jsxRuntime.jsx("img", {
+      src: utils.getIcons(isDark ? "view-dark" : "view-light"),
+      alt: "view",
+      height: "24",
+      width: "24"
+    }), jsxRuntime.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")
+    }), jsxRuntime.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 \n        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 jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [jsxRuntime.jsx("ul", {
+      className: utils.cn("w3a--overflow-y-auto w3a--flex w3a--flex-col w3a--gap-y-2 w3a--h-[280px]"),
+      children: externalButtons.length === 0 ? jsxRuntime.jsx(NoWalletsFound, {}) : jsxRuntime.jsx(WalletsFound, {
+        externalButtons: externalButtons,
+        isLoading: isLoading,
+        handleWalletClick: handleWalletClick,
+        deviceDetails: deviceDetails,
+        walletConnectUri: walletConnectUri,
+        buttonRadius: buttonRadius
+      })
+    }), totalExternalWalletsCount > 15 && !isLoading && initialWalletCount < totalExternalWalletsCount && jsxRuntime.jsx(MoreWalletsButton, {
+      totalExternalWalletsCount: totalExternalWalletsCount,
+      initialWalletCount: initialWalletCount,
+      handleMoreWallets: handleMoreWallets,
+      isLoading: isLoading,
+      isDark: isDark,
+      buttonRadius: buttonRadius
+    })]
+  });
+}
+
+module.exports = ConnectWalletList;

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

@@ -0,0 +1,93 @@
+'use strict';
+
+var _objectSpread = require('@babel/runtime/helpers/objectSpread2');
+var jsxRuntime = require('react/jsx-runtime');
+var Bowser = require('bowser');
+var react = require('react');
+var reactI18next = require('react-i18next');
+var reactQrcodeLogo = require('react-qrcode-logo');
+var constants = require('../../../constants.js');
+var localeImport = require('../../../localeImport.js');
+var Image = require('../../Image/Image.js');
+
+function ConnectWalletQrCode(props) {
+  var _getComputedStyle;
+  const [t] = reactI18next.useTranslation(undefined, {
+    i18n: localeImport
+  });
+  const {
+    walletConnectUri,
+    isDark,
+    selectedButton,
+    setBodyState,
+    bodyState,
+    logoImage,
+    primaryColor
+  } = props;
+  const isDesktop = react.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 jsxRuntime.jsxs("div", {
+    className: "w3a--contents",
+    children: [walletConnectUri ? jsxRuntime.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: [jsxRuntime.jsx("div", {
+        className: "w3a--relative w3a--flex w3a--size-[300px] w3a--items-center w3a--justify-center w3a--rounded-2xl",
+        children: jsxRuntime.jsx(reactQrcodeLogo.QRCode, {
+          size: isDesktop ? 300 : 260,
+          eyeRadius: 5,
+          qrStyle: "dots",
+          removeQrCodeBehindLogo: true,
+          logoImage: logoImage || constants.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("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")
+      })]
+    }) : jsxRuntime.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: jsxRuntime.jsx(Image, {
+        imageId: `login-${selectedButton.name}`,
+        hoverImageId: `login-${selectedButton.name}`,
+        fallbackImageId: "wallet",
+        height: "30",
+        width: "30",
+        isButton: true,
+        extension: selectedButton.imgExtension
+      })
+    }), jsxRuntime.jsxs("div", {
+      className: "w3a--flex w3a--w-full w3a--items-center w3a--justify-between w3a--rounded-2xl w3a--bg-app-gray-50 \n      w3a--px-4 w3a--py-2 w3a--text-app-gray-900 dark:w3a--bg-app-gray-800 dark:w3a--text-app-white",
+      children: [jsxRuntime.jsxs("p", {
+        className: "w3a--text-sm w3a--text-app-gray-900 dark:w3a--text-app-white",
+        children: [t("modal.external.dont-have"), " ", jsxRuntime.jsx("span", {
+          children: selectedButton === null || selectedButton === void 0 ? void 0 : selectedButton.displayName
+        }), "?"]
+      }), jsxRuntime.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")
+      })]
+    })]
+  });
+}
+
+module.exports = ConnectWalletQrCode;

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

@@ -0,0 +1,55 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var reactI18next = require('react-i18next');
+var localeImport = require('../../../localeImport.js');
+var utils = require('../../../utils.js');
+
+function ConnectWalletSearch(props) {
+  const {
+    totalExternalWalletCount,
+    isLoading,
+    walletSearch,
+    handleWalletSearch,
+    buttonRadius
+  } = props;
+  const [isInputFocused, setIsInputFocused] = react.useState(false);
+  const [t] = reactI18next.useTranslation(undefined, {
+    i18n: localeImport
+  });
+  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 jsxRuntime.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: utils.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"
+    })
+  });
+}
+
+module.exports = ConnectWalletSearch;

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

@@ -0,0 +1,70 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var utils = require('../../utils.js');
+
+/**
+ * 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] = react.useState(false);
+  react.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 jsxRuntime.jsxs("div", {
+    className: utils.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 && jsxRuntime.jsx("div", {
+      className: "w3a--absolute w3a--right-6 w3a--top-[30px] w3a--z-10 w3a--cursor-pointer",
+      children: jsxRuntime.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: jsxRuntime.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]
+  });
+}
+
+module.exports = Embed;

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

@@ -0,0 +1,53 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var reactI18next = require('react-i18next');
+var localeImport = require('../../localeImport.js');
+
+/**
+ * Footer component
+ * @returns Footer component
+ */
+function Footer({
+  privacyPolicy,
+  termsOfService
+}) {
+  const [t] = reactI18next.useTranslation(undefined, {
+    i18n: localeImport
+  });
+  return jsxRuntime.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) && jsxRuntime.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 && jsxRuntime.jsxs("a", {
+        href: termsOfService,
+        className: "w3a--text-app-primary-600 dark:w3a--text-app-primary-500",
+        children: [t("modal.footer.terms-of-service"), " "]
+      }), privacyPolicy && jsxRuntime.jsxs(jsxRuntime.Fragment, {
+        children: [t("modal.footer.and"), " ", jsxRuntime.jsx("a", {
+          href: privacyPolicy,
+          className: "w3a--text-app-primary-600 dark:w3a--text-app-primary-500",
+          children: t("modal.footer.privacy-policy")
+        })]
+      })]
+    }), jsxRuntime.jsxs("div", {
+      className: "w3a--flex w3a--items-center w3a--justify-center w3a--gap-2",
+      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--block w3a--h-4 dark:w3a--hidden"
+      }), jsxRuntime.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"
+      })]
+    })]
+  });
+}
+
+module.exports = Footer;

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

@@ -0,0 +1,89 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var ThemeContext = require('../../context/ThemeContext.js');
+
+/**
+ * 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
+  } = react.useContext(ThemeContext.ThemedContext);
+  const imgName = react.useMemo(() => isDark && darkImageId ? darkImageId : imageId, [isDark, darkImageId, imageId]);
+  const hoverImgName = react.useMemo(() => isDark && darkHoverImageId ? darkHoverImageId : hoverImageId, [isDark, darkHoverImageId, hoverImageId]);
+  if (isButton) {
+    if (imageData) {
+      return jsxRuntime.jsx("img", {
+        id: id,
+        src: imageData,
+        height: height,
+        width: width,
+        alt: hoverImageId,
+        className: "w3a--object-contain"
+      });
+    }
+    return jsxRuntime.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 jsxRuntime.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 jsxRuntime.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`;
+      }
+    }
+  });
+}
+
+module.exports = Image;