@web3auth/modal 9.6.0 → 10.0.0-alpha.0

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

@@ -0,0 +1,165 @@
+import Bowser from 'bowser';
+import { useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+import i18nInstance from '../../localeImport.js';
+import Button from '../Button/Button.js';
+import Image from '../Image.js';
+import ExternalWalletHeader from './ExternalWalletHeader.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+const getBrowserExtensionUrl = (browserType, walletId) => {
+  if (walletId !== null && walletId !== void 0 && walletId.startsWith("https://")) return walletId;
+  switch (browserType) {
+    case "chrome":
+      return `https://chrome.google.com/webstore/detail/${walletId}`;
+    case "firefox":
+      return `https://addons.mozilla.org/firefox/addon/${walletId}`;
+    case "edge":
+      return `https://microsoftedge.microsoft.com/addons/detail/${walletId}`;
+    default:
+      return null;
+  }
+};
+const getMobileInstallLink = (os, appId) => {
+  if (appId !== null && appId !== void 0 && appId.includes("https://")) {
+    return appId;
+  }
+  switch (os) {
+    case "android":
+      return `https://play.google.com/store/apps/details?id=${appId}`;
+    case "ios":
+      return `https://apps.apple.com/app/safepal-wallet/${appId}`;
+    default:
+      return "";
+  }
+};
+const getOsName = os => {
+  switch (os) {
+    case "ios":
+      return "iOS";
+    case "android":
+      return "Android";
+    default:
+      return "";
+  }
+};
+const getBrowserName = browser => {
+  return browser.charAt(0).toUpperCase() + browser.slice(1);
+};
+function ExternalWalletInstall(props) {
+  const {
+    connectButton,
+    goBack,
+    closeModal
+  } = props;
+  const [t] = useTranslation(undefined, {
+    i18n: i18nInstance
+  });
+  const deviceDetails = useMemo(() => {
+    const browser = Bowser.getParser(window.navigator.userAgent);
+    return {
+      platform: browser.getPlatformType(),
+      browser: browser.getBrowserName().toLowerCase(),
+      os: browser.getOSName()
+    };
+  }, []);
+  const mobileInstallLinks = () => {
+    const installConfig = connectButton.walletRegistryItem.app || {};
+    const installLinks = Object.keys(installConfig).reduce((acc, os) => {
+      if (!["android", "ios"].includes(os)) return acc;
+      const appId = installConfig[os];
+      if (!appId) return acc;
+      const appUrl = getMobileInstallLink(os, appId);
+      if (!appUrl) return acc;
+      const logoLight = `${os}-light`;
+      const logoDark = `${os}-dark`;
+      acc.push(/*#__PURE__*/jsx("li", {
+        className: "w3a--w-full",
+        children: /*#__PURE__*/jsx("a", {
+          href: appUrl,
+          rel: "noopener noreferrer",
+          target: "_blank",
+          children: /*#__PURE__*/jsxs(Button, {
+            type: "button",
+            variant: "tertiary",
+            className: "w3a--w-full !w3a--justify-start w3a--flex w3a--items-center w3a--gap-2 wallet-link-btn",
+            children: [/*#__PURE__*/jsx(Image, {
+              imageId: logoLight,
+              darkImageId: logoDark,
+              hoverImageId: logoLight,
+              darkHoverImageId: logoDark,
+              height: "28",
+              width: "28",
+              isButton: true
+            }), /*#__PURE__*/jsx("span", {
+              className: "w3a--text-sm w3a--font-medium",
+              children: t("modal.external.install-mobile-app", {
+                os: getOsName(os)
+              })
+            })]
+          })
+        })
+      }, os));
+      return acc;
+    }, []);
+    return installLinks;
+  };
+  const desktopInstallLinks = () => {
+    // if browser is brave, use chrome extension
+    const browserType = deviceDetails.browser === "brave" ? "chrome" : deviceDetails.browser;
+    const browserExtensionConfig = connectButton.walletRegistryItem.app || {};
+    const extensionForCurrentBrowser = browserExtensionConfig.browser && browserExtensionConfig.browser.includes(browserType) ? browserExtensionConfig.browser : undefined;
+    const browserExtensionId = browserExtensionConfig[browserType] || extensionForCurrentBrowser;
+    const browserExtensionUrl = browserExtensionId ? getBrowserExtensionUrl(browserType, browserExtensionId) : null;
+    const installLink = browserExtensionUrl ? /*#__PURE__*/jsx("li", {
+      children: /*#__PURE__*/jsx("a", {
+        href: browserExtensionUrl,
+        rel: "noopener noreferrer",
+        target: "_blank",
+        children: /*#__PURE__*/jsxs(Button, {
+          type: "button",
+          variant: "tertiary",
+          className: "w3a--w-full !w3a--justify-start w3a--flex w3a--items-center w3a--gap-2 wallet-link-btn",
+          children: [/*#__PURE__*/jsx(Image, {
+            imageId: deviceDetails.browser,
+            darkImageId: deviceDetails.browser,
+            hoverImageId: deviceDetails.browser,
+            darkHoverImageId: deviceDetails.browser,
+            height: "30",
+            width: "30",
+            isButton: true
+          }), /*#__PURE__*/jsx("span", {
+            className: "w3a--text-sm w3a--font-medium",
+            children: t("modal.external.install-browser-extension", {
+              browser: getBrowserName(deviceDetails.browser)
+            })
+          })]
+        })
+      })
+    }, deviceDetails.browser) : null;
+    return [installLink, ...mobileInstallLinks()];
+  };
+  return /*#__PURE__*/jsxs("div", {
+    children: [/*#__PURE__*/jsx(ExternalWalletHeader, {
+      title: `${t("modal.external.get")} ${connectButton.displayName}`,
+      goBack: goBack,
+      closeModal: closeModal
+    }), /*#__PURE__*/jsx("div", {
+      className: "w3a--flex w3a--justify-center w3a--my-6",
+      children: /*#__PURE__*/jsx(Image, {
+        imageId: `login-${connectButton.name}`,
+        hoverImageId: `login-${connectButton.name}`,
+        fallbackImageId: "wallet",
+        height: "100",
+        width: "100",
+        isButton: true,
+        extension: connectButton.imgExtension
+      })
+    }), /*#__PURE__*/jsx("ul", {
+      className: "w3a--flex w3a--flex-col w3a--gap-3",
+      children: deviceDetails.platform === "desktop" ? desktopInstallLinks() : mobileInstallLinks()
+    })]
+  });
+}
+
+export { ExternalWalletInstall as default };

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

@@ -0,0 +1,271 @@
+import { log, WALLET_ADAPTERS } from '@web3auth/no-modal';
+import Bowser from 'bowser';
+import { useState, useMemo, useEffect } from 'react';
+import { useTranslation } from 'react-i18next';
+import { MODAL_STATUS } from '../interfaces.js';
+import i18nInstance from '../localeImport.js';
+import ExternalWalletButton from './ExternalWallet/ExternalWalletButton.js';
+import ExternalWalletDetail from './ExternalWallet/ExternalWalletDetails.js';
+import ExternalWalletHeader from './ExternalWallet/ExternalWalletHeader.js';
+import Loader from './Loader.js';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+
+function formatIOSMobile(params) {
+  const encodedUri = encodeURIComponent(params.uri);
+  if (params.link.startsWith("http")) return `${params.link}/wc?uri=${encodedUri}`;
+  if (params.link) return `${params.link}wc?uri=${encodedUri}`;
+  return "";
+}
+function ExternalWallet(props) {
+  const {
+    hideExternalWallets,
+    handleExternalWalletClick,
+    closeModal,
+    config = {},
+    walletConnectUri,
+    showBackButton,
+    modalStatus,
+    chainNamespace,
+    walletRegistry
+  } = props;
+  const [externalButtons, setExternalButtons] = useState([]);
+  const [totalExternalWallets, setTotalExternalWallets] = useState(0);
+  const [selectedButton, setSelectedButton] = useState(null);
+  const [walletSearch, setWalletSearch] = useState("");
+  const [t] = useTranslation(undefined, {
+    i18n: i18nInstance
+  });
+  const walletDiscoverySupported = useMemo(() => {
+    const supported = walletRegistry && Object.keys(walletRegistry.default).length > 0 && Object.keys(walletRegistry.others).length > 0;
+    return supported;
+  }, [walletRegistry]);
+  const deviceDetails = useMemo(() => {
+    const browser = Bowser.getParser(window.navigator.userAgent);
+    return {
+      platform: browser.getPlatformType(),
+      os: browser.getOSName(),
+      browser: browser.getBrowserName().toLowerCase()
+    };
+  }, []);
+  const handleWalletSearch = e => {
+    setWalletSearch(e.target.value);
+  };
+  const adapterVisibilityMap = useMemo(() => {
+    const canShowMap = {};
+    Object.keys(config).forEach(adapter => {
+      const adapterConfig = config[adapter];
+      if (!adapterConfig.showOnModal) {
+        canShowMap[adapter] = false;
+        return;
+      }
+      if (deviceDetails.platform === "desktop" && adapterConfig.showOnDesktop) {
+        canShowMap[adapter] = true;
+        return;
+      }
+      if ((deviceDetails.platform === "mobile" || deviceDetails.platform === "tablet") && adapterConfig.showOnMobile) {
+        canShowMap[adapter] = true;
+        return;
+      }
+      canShowMap[adapter] = false;
+    });
+    log.debug("adapter visibility map", canShowMap);
+    return canShowMap;
+  }, [config, deviceDetails.platform]);
+  useEffect(() => {
+    var _config$WALLET_ADAPTE;
+    log.debug("loaded external wallets", config, walletConnectUri);
+    const wcAvailable = (((_config$WALLET_ADAPTE = config[WALLET_ADAPTERS.WALLET_CONNECT_V2]) === null || _config$WALLET_ADAPTE === void 0 ? void 0 : _config$WALLET_ADAPTE.showOnModal) || false) !== false;
+    if (wcAvailable && !walletConnectUri) {
+      handleExternalWalletClick({
+        adapter: WALLET_ADAPTERS.WALLET_CONNECT_V2
+      });
+    }
+  }, [config, handleExternalWalletClick, walletConnectUri]);
+  useEffect(() => {
+    if (walletDiscoverySupported) {
+      const isWalletConnectAdapterIncluded = Object.keys(config).some(adapter => adapter === WALLET_ADAPTERS.WALLET_CONNECT_V2);
+      const defaultButtonKeys = new Set(Object.keys(walletRegistry.default));
+      const generateWalletButtons = wallets => {
+        return Object.keys(wallets).reduce((acc, wallet) => {
+          var _config$wallet, _walletRegistryItem$w, _walletRegistryItem$c, _walletRegistryItem$i;
+          if (adapterVisibilityMap[wallet] === false) return acc;
+          const walletRegistryItem = wallets[wallet];
+          let href = "";
+          if (deviceDetails.platform === Bowser.PLATFORMS_MAP.mobile) {
+            var _walletRegistryItem$m, _walletRegistryItem$m2;
+            const universalLink = walletRegistryItem === null || walletRegistryItem === void 0 || (_walletRegistryItem$m = walletRegistryItem.mobile) === null || _walletRegistryItem$m === void 0 ? void 0 : _walletRegistryItem$m.universal;
+            const deepLink = walletRegistryItem === null || walletRegistryItem === void 0 || (_walletRegistryItem$m2 = walletRegistryItem.mobile) === null || _walletRegistryItem$m2 === void 0 ? void 0 : _walletRegistryItem$m2.native;
+            href = universalLink || deepLink;
+          }
+          const button = {
+            name: wallet,
+            displayName: walletRegistryItem.name,
+            href,
+            hasInjectedWallet: ((_config$wallet = config[wallet]) === null || _config$wallet === void 0 ? void 0 : _config$wallet.isInjected) || false,
+            hasWalletConnect: isWalletConnectAdapterIncluded && ((_walletRegistryItem$w = walletRegistryItem.walletConnect) === null || _walletRegistryItem$w === void 0 || (_walletRegistryItem$w = _walletRegistryItem$w.sdks) === null || _walletRegistryItem$w === void 0 ? void 0 : _walletRegistryItem$w.includes("sign_v2")),
+            hasInstallLinks: Object.keys(walletRegistryItem.app || {}).length > 0,
+            walletRegistryItem,
+            imgExtension: walletRegistryItem.imgExtension || "svg"
+          };
+          // const isBrowserExtensionAvailable = walletRegistryItem.app?.chrome || walletRegistryItem.app?.firefox || walletRegistryItem.app?.edge;
+          if (!button.hasInjectedWallet && !button.hasWalletConnect && !button.hasInstallLinks) return acc;
+          const chainNamespaces = new Set((_walletRegistryItem$c = walletRegistryItem.chains) === null || _walletRegistryItem$c === void 0 ? void 0 : _walletRegistryItem$c.map(chain => chain.split(":")[0]));
+          const injectedChainNamespaces = new Set((_walletRegistryItem$i = walletRegistryItem.injected) === null || _walletRegistryItem$i === void 0 ? void 0 : _walletRegistryItem$i.map(injected => injected.namespace));
+          if (!chainNamespaces.has(chainNamespace) && !injectedChainNamespaces.has(chainNamespace)) return acc;
+          acc.push(button);
+          return acc;
+        }, []);
+      };
+
+      // Generate buttons for default and other wallets
+      const defaultButtons = generateWalletButtons(walletRegistry.default);
+      const otherButtons = generateWalletButtons(walletRegistry.others);
+
+      // Generate custom adapter buttons
+      const customAdapterButtons = Object.keys(config).reduce((acc, adapter) => {
+        if (![WALLET_ADAPTERS.WALLET_CONNECT_V2].includes(adapter) && !config[adapter].isInjected && adapterVisibilityMap[adapter]) {
+          log.debug("custom adapter", adapter, config[adapter]);
+          acc.push({
+            name: adapter,
+            displayName: config[adapter].label || adapter,
+            hasInjectedWallet: false,
+            hasWalletConnect: false,
+            hasInstallLinks: false
+          });
+        }
+        return acc;
+      }, []);
+      const allButtons = [...defaultButtons, ...otherButtons];
+
+      // Filter and set external buttons based on search input
+      if (walletSearch) {
+        const filteredList = allButtons.concat(customAdapterButtons).filter(button => button.name.toLowerCase().includes(walletSearch.toLowerCase()));
+        log.debug("filteredLists", filteredList);
+        setExternalButtons(filteredList);
+      } else {
+        const sortedButtons = [...allButtons.filter(button => button.hasInjectedWallet && defaultButtonKeys.has(button.name)), ...customAdapterButtons, ...allButtons.filter(button => !button.hasInjectedWallet && defaultButtonKeys.has(button.name))];
+        setExternalButtons(sortedButtons);
+      }
+      setTotalExternalWallets(allButtons.length + customAdapterButtons.length);
+      log.debug("external buttons", allButtons);
+    } else {
+      const buttons = Object.keys(config).reduce((acc, adapter) => {
+        log.debug("external buttons", adapter, adapterVisibilityMap[adapter]);
+        if (![WALLET_ADAPTERS.WALLET_CONNECT_V2].includes(adapter) && adapterVisibilityMap[adapter]) {
+          acc.push({
+            name: adapter,
+            displayName: config[adapter].label || adapter,
+            hasInjectedWallet: config[adapter].isInjected,
+            hasWalletConnect: false,
+            hasInstallLinks: false
+          });
+        }
+        return acc;
+      }, []);
+      setExternalButtons(buttons);
+      setTotalExternalWallets(buttons.length);
+    }
+  }, [config, deviceDetails, adapterVisibilityMap, walletRegistry, walletSearch, chainNamespace, walletDiscoverySupported]);
+  const handleWalletClick = button => {
+    // if has injected wallet, connect to injected wallet
+    // if doesn't have wallet connect & doesn't have install links, must be a custom adapter
+    if (button.hasInjectedWallet || !button.hasWalletConnect && !button.hasInstallLinks) {
+      handleExternalWalletClick({
+        adapter: button.name
+      });
+    } else {
+      // else, show wallet detail
+      setSelectedButton(button);
+    }
+  };
+  return /*#__PURE__*/jsx("div", {
+    className: `w3ajs-external-wallet w3a-group ${totalExternalWallets === 0 ? "w3a-group-loader-height" : ""}`,
+    children: /*#__PURE__*/jsx("div", {
+      className: "w3a-external-container w3ajs-external-container",
+      children: totalExternalWallets === 0 ? /*#__PURE__*/jsx(Loader, {
+        modalStatus: MODAL_STATUS.CONNECTING,
+        canEmit: false
+      }) : modalStatus === MODAL_STATUS.INITIALIZED && (
+      // All wallets
+      !selectedButton ? /*#__PURE__*/jsxs(Fragment, {
+        children: [/*#__PURE__*/jsx(ExternalWalletHeader, {
+          disableBackButton: !showBackButton,
+          title: t("modal.external.connect-wallet"),
+          goBack: hideExternalWallets,
+          closeModal: closeModal
+        }), totalExternalWallets > 15 && /*#__PURE__*/jsx("div", {
+          className: "w3a--py-4",
+          children: /*#__PURE__*/jsx("input", {
+            className: "w3a--w-full w3a-text-field",
+            name: "passwordless-input",
+            required: true,
+            value: walletSearch,
+            placeholder: t("modal.external.search-wallet", {
+              count: totalExternalWallets
+            }),
+            onFocus: e => {
+              e.target.placeholder = "";
+            },
+            onBlur: e => {
+              e.target.placeholder = t("modal.external.search-wallet", {
+                count: totalExternalWallets
+              });
+            },
+            onChange: e => handleWalletSearch(e)
+          })
+        }), externalButtons.length === 0 ? /*#__PURE__*/jsx("div", {
+          className: "w3a--w-full w3a--text-center w3a--text-app-gray-400 dark:w3a--text-app-gray-500 w3a--py-6 w3a--flex w3a--justify-center w3a--items-center",
+          children: t("modal.external.no-wallets-found")
+        }) : /*#__PURE__*/jsx("div", {
+          className: `w3a-adapter-list-container ${totalExternalWallets < 15 ? "w3a--py-4" : ""}`,
+          children: /*#__PURE__*/jsxs("ul", {
+            className: "w3a-adapter-list w3ajs-wallet-adapters",
+            children: [externalButtons.map(button => {
+              return /*#__PURE__*/jsxs("li", {
+                className: "w3a-adapter-item w3a-adapter-item--full",
+                children: [deviceDetails.platform === "desktop" && /*#__PURE__*/jsx(ExternalWalletButton, {
+                  button: button,
+                  handleWalletClick: handleWalletClick
+                }), deviceDetails.platform !== "desktop" && (button.href && button.hasWalletConnect && !button.hasInjectedWallet ? /*#__PURE__*/jsx("a", {
+                  href: button.href ? formatIOSMobile({
+                    uri: walletConnectUri,
+                    link: button.href
+                  }) : walletConnectUri,
+                  target: "_blank",
+                  className: "w3a--w-full",
+                  rel: "noreferrer noopener",
+                  children: /*#__PURE__*/jsx(ExternalWalletButton, {
+                    button: button,
+                    handleWalletClick: handleWalletClick
+                  })
+                }) : /*#__PURE__*/jsx(ExternalWalletButton, {
+                  button: button,
+                  handleWalletClick: handleWalletClick
+                }))]
+              }, button.name + button.displayName);
+            }), totalExternalWallets > 10 && !walletSearch && /*#__PURE__*/jsxs("li", {
+              className: "w3a--flex w3a--flex-col w3a--items-center w3a--justify-center w3a--gap-y-0.5 w3a--my-4 w3a--w-full w3a--mx-auto w3a-adapter-item--full",
+              children: [/*#__PURE__*/jsx("p", {
+                className: "w3a--text-xs w3a--text-app-gray-500 dark:w3a--text-app-gray-400",
+                children: t("modal.external.search-text")
+              }), /*#__PURE__*/jsx("p", {
+                className: "w3a--text-xs w3a--font-medium w3a--text-app-gray-900 dark:w3a--text-app-white",
+                children: t("modal.external.search-subtext")
+              })]
+            })]
+          })
+        })]
+      }) :
+      /*#__PURE__*/
+      // Wallet Detail
+      jsx(ExternalWalletDetail, {
+        connectButton: selectedButton,
+        goBack: () => setSelectedButton(null),
+        walletConnectUri: walletConnectUri,
+        closeModal: closeModal
+      }))
+    })
+  });
+}
+
+export { ExternalWallet as default };

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

@@ -0,0 +1,18 @@
+import SelfCustodyViaWeb3Auth from './SelfCustodyViaWeb3Auth.js';
+import { jsx } from 'react/jsx-runtime';
+
+function Footer() {
+  return /*#__PURE__*/jsx("div", {
+    className: "w3a-modal__footer",
+    children: /*#__PURE__*/jsx("div", {
+      className: "w3a-footer",
+      children: /*#__PURE__*/jsx("div", {
+        children: /*#__PURE__*/jsx("div", {
+          children: /*#__PURE__*/jsx(SelfCustodyViaWeb3Auth, {})
+        })
+      })
+    })
+  });
+}
+
+export { Footer as default };

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

@@ -0,0 +1,79 @@
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { DEFAULT_LOGO_DARK, DEFAULT_LOGO_LIGHT } from '../interfaces.js';
+import i18nInstance from '../localeImport.js';
+import Icon from './Icon.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+function Header(props) {
+  const {
+    onClose,
+    appLogo,
+    appName
+  } = props;
+  const [t] = useTranslation(undefined, {
+    i18n: i18nInstance
+  });
+  const headerLogo = [DEFAULT_LOGO_DARK, DEFAULT_LOGO_LIGHT].includes(appLogo) ? "" : appLogo;
+  const subtitle = t("modal.header-subtitle-name", {
+    appName
+  });
+  return /*#__PURE__*/jsxs("div", {
+    className: "w3a-modal__header",
+    children: [/*#__PURE__*/jsx("div", {
+      className: "w3a-header",
+      children: /*#__PURE__*/jsxs("div", {
+        children: [headerLogo && /*#__PURE__*/jsx("div", {
+          className: "w3a-header__logo",
+          children: /*#__PURE__*/jsx("img", {
+            src: headerLogo,
+            alt: ""
+          })
+        }), /*#__PURE__*/jsx("div", {
+          className: "w3a-header__title",
+          children: t("modal.header-title")
+        }), /*#__PURE__*/jsxs("div", {
+          className: "w3a-header__subtitle",
+          children: [subtitle, /*#__PURE__*/jsxs("div", {
+            className: "w3a--relative w3a--flex w3a--flex-col w3a--items-center w3a--group w3a--cursor-pointer",
+            children: [/*#__PURE__*/jsx(Icon, {
+              iconName: "information-circle-light",
+              darkIconName: "information-circle"
+            }), /*#__PURE__*/jsxs("div", {
+              className: "w3a--absolute w3a--top-4 w3a--z-20 w3a--flex-col w3a--items-center w3a--hidden w3a--mb-5 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-[270px] w3a--translate-x-[-16px] 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 ${subtitle.length > 34 ? "-w3a--ml-[100px]" : ""}`,
+                children: [/*#__PURE__*/jsx("div", {
+                  className: "w3a--text-xs w3a--font-medium w3a--mb-1 w3a--text-app-gray-900 dark:w3a--text-app-white",
+                  children: t("modal.header-tooltip-title")
+                }), /*#__PURE__*/jsx("div", {
+                  className: "w3a--text-xs w3a--text-app-gray-400",
+                  children: t("modal.header-tooltip-desc")
+                })]
+              })]
+            })]
+          })]
+        })]
+      })
+    }), /*#__PURE__*/jsx("button", {
+      type: "button",
+      onClick: onClose,
+      className: "w3a-header__button w3ajs-close-btn ",
+      children: /*#__PURE__*/jsx(Icon, {
+        iconName: "x-light",
+        darkIconName: "x-dark"
+      })
+    })]
+  });
+}
+const memoizedHeader = /*#__PURE__*/memo(Header, (prevProps, nextProps) => {
+  if (prevProps.appLogo !== nextProps.appLogo) {
+    return true;
+  }
+  return false;
+});
+memoizedHeader.displayName = "Header";
+
+export { memoizedHeader as default };

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

@@ -0,0 +1,71 @@
+import ArrowDark from '../assets/arrow-left-dark.svg.js';
+import ArrowLight from '../assets/arrow-left-light.svg.js';
+import XDark from '../assets/x-dark.svg.js';
+import XLight from '../assets/x-light.svg.js';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+
+const icons = {
+  "arrow-left": {
+    image: "https://images.web3auth.io/circle-arrow-left.svg"
+  },
+  close: {
+    image: "https://images.web3auth.io/close.svg"
+  },
+  "expand-light": {
+    image: "https://images.web3auth.io/expand-light.svg"
+  },
+  expand: {
+    image: "https://images.web3auth.io/expand.svg"
+  },
+  connected: {
+    image: "https://images.web3auth.io/connected.svg"
+  },
+  "information-circle-light": {
+    image: "https://images.web3auth.io/information-circle-light.svg"
+  },
+  "information-circle": {
+    image: "https://images.web3auth.io/information-circle.svg"
+  },
+  "arrow-left-light": {
+    image: ArrowLight
+  },
+  "x-light": {
+    image: XLight
+  },
+  "arrow-left-dark": {
+    image: ArrowDark
+  },
+  "x-dark": {
+    image: XDark
+  }
+};
+function Icon(props) {
+  const {
+    iconName,
+    iconTitle = "",
+    height = "auto",
+    width = "auto",
+    darkIconName = ""
+  } = props;
+  const h = height === "auto" ? "w3a--h-auto" : `w3a--h-[${height}px]`;
+  const w = width === "auto" ? "w3a--w-auto" : `w3a--w-[${width}px]`;
+  return /*#__PURE__*/jsxs(Fragment, {
+    children: [icons[iconName] && /*#__PURE__*/jsx("img", {
+      className: `${iconTitle ? "w3a--cursor-pointer" : ""} dark:w3a--hidden w3a--block ${h} ${w}`,
+      height: height,
+      width: width,
+      src: icons[iconName].image,
+      alt: iconName,
+      title: iconTitle
+    }), icons[darkIconName] && /*#__PURE__*/jsx("img", {
+      className: `${iconTitle ? "w3a--cursor-pointer" : ""} w3a--hidden dark:w3a--block ${h} ${w}`,
+      height: height,
+      width: width,
+      src: icons[darkIconName].image,
+      alt: darkIconName,
+      title: iconTitle
+    })]
+  });
+}
+
+export { Icon as default };

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

@@ -0,0 +1,49 @@
+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 };