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

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

@@ -0,0 +1,452 @@
+'use strict';
+
+var _objectSpread = require('@babel/runtime/helpers/objectSpread2');
+var jsxRuntime = require('react/jsx-runtime');
+var noModal = require('@web3auth/no-modal');
+var Bowser = require('bowser');
+var react = require('react');
+var reactI18next = require('react-i18next');
+var constants = require('../../constants.js');
+var RootContext = require('../../context/RootContext.js');
+var ThemeContext = require('../../context/ThemeContext.js');
+var interfaces = require('../../interfaces.js');
+var localeImport = require('../../localeImport.js');
+var utils = require('../../utils.js');
+var BottomSheet = require('../BottomSheet/BottomSheet.js');
+var ConnectWallet = require('../ConnectWallet/ConnectWallet.js');
+var ConnectWalletChainNamespaceSelect = require('../ConnectWallet/ConnectWalletChainNamespaceSelect/ConnectWalletChainNamespaceSelect.js');
+var Footer = require('../Footer/Footer.js');
+var Image = require('../Image/Image.js');
+var Loader = require('../Loader/Loader.js');
+var Login = require('../Login/Login.js');
+var Toast = require('../Toast/Toast.js');
+
+function Root(props) {
+  var _bodyState$walletDeta2, _bodyState$walletDeta4;
+  const {
+    setModalState,
+    modalState,
+    handleExternalWalletBtnClick,
+    chainNamespaces,
+    walletRegistry,
+    appLogo,
+    onCloseLoader,
+    handleSocialLoginClick,
+    showPasswordLessInput,
+    showExternalWalletButton,
+    socialLoginsConfig,
+    areSocialLoginsVisible,
+    isEmailPrimary,
+    isExternalPrimary,
+    showExternalWalletPage,
+    isEmailPasswordLessLoginVisible,
+    isSmsPasswordLessLoginVisible,
+    preHandleExternalWalletClick,
+    uiConfig
+  } = props;
+  const {
+    logoAlignment = "center",
+    buttonRadiusType = "pill",
+    enableMainSocialLoginButton = false,
+    privacyPolicy = "",
+    tncLink = "",
+    displayInstalledExternalWallets = true,
+    displayExternalWalletsCount = true
+  } = uiConfig;
+  const [t] = reactI18next.useTranslation(undefined, {
+    i18n: localeImport
+  });
+  const {
+    isDark
+  } = react.useContext(ThemeContext.ThemedContext);
+  const [bodyState, setBodyState] = react.useState({
+    showWalletDetails: false,
+    walletDetails: null,
+    showMultiChainSelector: false
+  });
+  const [toast, setToast] = react.useState({
+    message: "",
+    type: interfaces.TOAST_TYPE.SUCCESS
+  });
+  const [isSocialLoginsExpanded, setIsSocialLoginsExpanded] = react.useState(false);
+  const [isWalletDetailsExpanded, setIsWalletDetailsExpanded] = react.useState(false);
+  const onExternalWalletBtnClick = flag => {
+    setModalState(_objectSpread(_objectSpread({}, modalState), {}, {
+      currentPage: constants.PAGES.CONNECT_WALLET
+    }));
+    if (handleExternalWalletBtnClick) handleExternalWalletBtnClick(flag);
+  };
+  const onBackClick = flag => {
+    setModalState(_objectSpread(_objectSpread({}, modalState), {}, {
+      currentPage: constants.PAGES.LOGIN
+    }));
+    if (handleExternalWalletBtnClick) handleExternalWalletBtnClick(flag);
+  };
+  // Wallet Details
+  const deviceDetails = react.useMemo(() => {
+    const browserData = Bowser.getParser(window.navigator.userAgent);
+    return {
+      platform: browserData.getPlatformType(),
+      browser: browserData.getBrowserName().toLowerCase(),
+      os: browserData.getOSName()
+    };
+  }, []);
+  const mobileInstallLinks = react.useMemo(() => {
+    var _bodyState$walletDeta;
+    if (deviceDetails.platform === "desktop") return [];
+    const installConfig = ((_bodyState$walletDeta = bodyState.walletDetails) === null || _bodyState$walletDeta === void 0 || (_bodyState$walletDeta = _bodyState$walletDeta.walletRegistryItem) === null || _bodyState$walletDeta === void 0 ? void 0 : _bodyState$walletDeta.app) || {};
+    const installLinks = Object.keys(installConfig).reduce((acc, osKey) => {
+      if (!["android", "ios"].includes(osKey)) return acc;
+      const appId = installConfig[osKey];
+      if (!appId) return acc;
+      const appUrl = utils.getMobileInstallLink(osKey, appId);
+      if (!appUrl) return acc;
+      const logoLight = `${osKey}-light`;
+      const logoDark = `${osKey}-dark`;
+      acc.push(jsxRuntime.jsx("li", {
+        className: "w3a--w-full",
+        children: jsxRuntime.jsx("a", {
+          href: appUrl,
+          rel: "noopener noreferrer",
+          target: "_blank",
+          children: jsxRuntime.jsxs("button", {
+            type: "button",
+            className: utils.cn("w3a--link-arrow w3a--flex w3a--w-full w3a--items-center w3a--justify-start w3a--gap-x-2 w3a--border w3a--border-app-gray-200 w3a--bg-app-gray-50 w3a--px-5 w3a--py-2.5 hover:w3a--translate-y-[0.5px] hover:w3a--border-app-gray-50 dark:w3a--border-app-gray-500 dark:w3a--bg-app-gray-800 dark:hover:w3a--border-app-gray-800", {
+              "w3a--rounded-full": buttonRadiusType === "pill",
+              "w3a--rounded-lg": buttonRadiusType === "rounded",
+              "w3a--rounded-none": buttonRadiusType === "square"
+            }),
+            children: [jsxRuntime.jsx(Image, {
+              imageId: logoLight,
+              darkImageId: logoDark,
+              hoverImageId: logoLight,
+              darkHoverImageId: logoDark,
+              height: "28",
+              width: "28",
+              isButton: true
+            }), jsxRuntime.jsx("span", {
+              className: "w3a--text-sm w3a--font-medium w3a--text-app-gray-900 dark:w3a--text-app-white",
+              children: t("modal.external.install-mobile-app", {
+                os: utils.getOsName(osKey)
+              })
+            }), jsxRuntime.jsx("img", {
+              id: "device-link-arrow",
+              className: "w3a--icon-animation w3a--ml-auto",
+              src: utils.getIcons(isDark ? "chevron-right-dark" : "chevron-right-light"),
+              alt: "arrow"
+            })]
+          })
+        })
+      }));
+      return acc;
+    }, []);
+    return installLinks;
+  }, [(_bodyState$walletDeta2 = bodyState.walletDetails) === null || _bodyState$walletDeta2 === void 0 || (_bodyState$walletDeta2 = _bodyState$walletDeta2.walletRegistryItem) === null || _bodyState$walletDeta2 === void 0 ? void 0 : _bodyState$walletDeta2.app, deviceDetails.platform, isDark, t, buttonRadiusType]);
+  const desktopInstallLinks = react.useMemo(() => {
+    var _bodyState$walletDeta3;
+    if (deviceDetails.platform !== "desktop") return [];
+    // if browser is brave, use chrome extension
+    const browserType = deviceDetails.browser === "brave" ? "chrome" : deviceDetails.browser;
+    const browserExtensionConfig = ((_bodyState$walletDeta3 = bodyState.walletDetails) === null || _bodyState$walletDeta3 === void 0 || (_bodyState$walletDeta3 = _bodyState$walletDeta3.walletRegistryItem) === null || _bodyState$walletDeta3 === void 0 ? void 0 : _bodyState$walletDeta3.app) || {};
+    const extensionForCurrentBrowser = browserExtensionConfig.browser && browserExtensionConfig.browser.includes(browserType) ? browserExtensionConfig.browser : undefined;
+    const browserExtensionId = browserExtensionConfig[browserType] || extensionForCurrentBrowser;
+    const browserExtensionUrl = browserExtensionId ? utils.getBrowserExtensionUrl(browserType, browserExtensionId) : null;
+    const installLink = browserExtensionUrl ? jsxRuntime.jsx("li", {
+      children: jsxRuntime.jsx("a", {
+        href: browserExtensionUrl,
+        rel: "noopener noreferrer",
+        target: "_blank",
+        children: jsxRuntime.jsxs("button", {
+          type: "button",
+          className: utils.cn("w3a--link-arrow w3a--flex w3a--w-full w3a--items-center w3a--justify-start w3a--gap-x-2 w3a--border w3a--border-app-gray-200 w3a--bg-app-gray-50 w3a--px-5 w3a--py-2.5 hover:w3a--translate-y-[0.5px] hover:w3a--border-app-gray-50 dark:w3a--border-app-gray-500 dark:w3a--bg-app-gray-800 dark:hover:w3a--border-app-gray-800", {
+            "w3a--rounded-full": buttonRadiusType === "pill",
+            "w3a--rounded-lg": buttonRadiusType === "rounded",
+            "w3a--rounded-none": buttonRadiusType === "square"
+          }),
+          children: [jsxRuntime.jsx(Image, {
+            imageId: deviceDetails.browser,
+            darkImageId: deviceDetails.browser,
+            hoverImageId: deviceDetails.browser,
+            darkHoverImageId: deviceDetails.browser,
+            height: "30",
+            width: "30",
+            isButton: true
+          }), jsxRuntime.jsx("span", {
+            className: "w3a--text-sm w3a--font-medium w3a--text-app-gray-900 dark:w3a--text-app-white",
+            children: t("modal.external.install-browser-extension", {
+              browser: utils.getBrowserName(deviceDetails.browser)
+            })
+          }), jsxRuntime.jsx("img", {
+            id: "device-link-arrow",
+            className: "w3a--icon-animation w3a--ml-auto",
+            src: utils.getIcons(isDark ? "chevron-right-dark" : "chevron-right-light"),
+            alt: "arrow"
+          })]
+        })
+      })
+    }) : null;
+    return [installLink, ...mobileInstallLinks];
+  }, [(_bodyState$walletDeta4 = bodyState.walletDetails) === null || _bodyState$walletDeta4 === void 0 || (_bodyState$walletDeta4 = _bodyState$walletDeta4.walletRegistryItem) === null || _bodyState$walletDeta4 === void 0 ? void 0 : _bodyState$walletDeta4.app, deviceDetails.browser, deviceDetails.platform, isDark, mobileInstallLinks, buttonRadiusType, t]);
+  // External Wallets
+  const config = react.useMemo(() => modalState.externalWalletsConfig, [modalState.externalWalletsConfig]);
+  const connectorVisibilityMap = react.useMemo(() => {
+    const canShowMap = {};
+    Object.keys(config).forEach(connector => {
+      const connectorConfig = config[connector];
+      if (!connectorConfig.showOnModal) {
+        canShowMap[connector] = false;
+        return;
+      }
+      if (deviceDetails.platform === "desktop" && connectorConfig.showOnDesktop) {
+        canShowMap[connector] = true;
+        return;
+      }
+      if ((deviceDetails.platform === "mobile" || deviceDetails.platform === "tablet") && connectorConfig.showOnMobile) {
+        canShowMap[connector] = true;
+        return;
+      }
+      canShowMap[connector] = false;
+    });
+    return canShowMap;
+  }, [deviceDetails, config]);
+  const isWalletConnectConnectorIncluded = react.useMemo(
+  // WC is always included when enabling wallet discovery
+  () => Object.keys((walletRegistry === null || walletRegistry === void 0 ? void 0 : walletRegistry.default) || {}).length > 0 || Object.keys((walletRegistry === null || walletRegistry === void 0 ? void 0 : walletRegistry.others) || {}).length > 0, [walletRegistry]);
+  const generateWalletButtons = react.useCallback(wallets => {
+    return Object.keys(wallets).reduce((acc, wallet) => {
+      var _walletRegistryItem$c, _walletRegistryItem$i, _walletRegistryItem$w;
+      if (connectorVisibilityMap[wallet] === false) return acc;
+      const walletRegistryItem = wallets[wallet];
+      let href = "";
+      if (deviceDetails.platform !== "desktop") {
+        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 registryNamespaces = 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));
+      const availableChainNamespaces = chainNamespaces.filter(x => registryNamespaces.has(x) || injectedChainNamespaces.has(x));
+      const connector = config[wallet];
+      const button = {
+        name: wallet,
+        displayName: walletRegistryItem.name,
+        href,
+        hasInjectedWallet: (connector === null || connector === void 0 ? void 0 : connector.isInjected) || false,
+        hasWalletConnect: isWalletConnectConnectorIncluded && ((_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",
+        icon: connector === null || connector === void 0 ? void 0 : connector.icon,
+        chainNamespaces: availableChainNamespaces
+      };
+      if (!button.hasInjectedWallet && !button.hasWalletConnect && !button.hasInstallLinks) return acc;
+      if (availableChainNamespaces.length === 0) return acc;
+      acc.push(button);
+      return acc;
+    }, []);
+  }, [connectorVisibilityMap, chainNamespaces, config, deviceDetails.platform, isWalletConnectConnectorIncluded]);
+  const installedConnectorButtons = react.useMemo(() => {
+    const installedConnectors = Object.keys(config).reduce((acc, connector) => {
+      var _walletRegistryItem$c2, _walletRegistryItem$i2, _config$connector, _config$connector2;
+      if ([noModal.WALLET_CONNECTORS.WALLET_CONNECT_V2].includes(connector) || !connectorVisibilityMap[connector]) return acc;
+      // determine chain namespaces based on wallet registry
+      const walletRegistryItem = walletRegistry.default[connector];
+      const registryNamespaces = new Set(walletRegistryItem === null || walletRegistryItem === void 0 || (_walletRegistryItem$c2 = walletRegistryItem.chains) === null || _walletRegistryItem$c2 === void 0 ? void 0 : _walletRegistryItem$c2.map(chain => chain.split(":")[0]));
+      const injectedChainNamespaces = new Set(walletRegistryItem === null || walletRegistryItem === void 0 || (_walletRegistryItem$i2 = walletRegistryItem.injected) === null || _walletRegistryItem$i2 === void 0 ? void 0 : _walletRegistryItem$i2.map(injected => injected.namespace));
+      const availableChainNamespaces = chainNamespaces.filter(x => registryNamespaces.has(x) || injectedChainNamespaces.has(x));
+      acc.push({
+        name: connector,
+        displayName: config[connector].label || connector,
+        hasInjectedWallet: ((_config$connector = config[connector]) === null || _config$connector === void 0 ? void 0 : _config$connector.isInjected) || false,
+        hasWalletConnect: false,
+        hasInstallLinks: false,
+        walletRegistryItem,
+        icon: (_config$connector2 = config[connector]) === null || _config$connector2 === void 0 ? void 0 : _config$connector2.icon,
+        chainNamespaces: availableChainNamespaces
+      });
+      return acc;
+    }, []);
+    // make metamask the first button and limit the number of buttons
+    return installedConnectors;
+  }, [config, connectorVisibilityMap, walletRegistry.default, chainNamespaces]);
+  const customConnectorButtons = react.useMemo(() => {
+    return installedConnectorButtons.filter(button => !button.hasInjectedWallet);
+  }, [installedConnectorButtons]);
+  const topInstalledConnectorButtons = react.useMemo(() => {
+    const MAX_TOP_INSTALLED_CONNECTORS = 3;
+    // make metamask the first button and limit the number of buttons
+    return installedConnectorButtons.sort((a, _) => a.name === noModal.WALLET_CONNECTORS.METAMASK ? -1 : 1).slice(0, displayInstalledExternalWallets ? MAX_TOP_INSTALLED_CONNECTORS : 1);
+  }, [installedConnectorButtons, displayInstalledExternalWallets]);
+  const allButtons = react.useMemo(() => {
+    return [...generateWalletButtons(walletRegistry.default), ...generateWalletButtons(walletRegistry.others)];
+  }, [generateWalletButtons, walletRegistry.default, walletRegistry.others]);
+  const totalExternalWallets = react.useMemo(() => {
+    const uniqueWalletSet = new Set();
+    return allButtons.concat(installedConnectorButtons).filter(button => {
+      if (uniqueWalletSet.has(button.name)) return false;
+      uniqueWalletSet.add(button.name);
+      return true;
+    }).length;
+  }, [allButtons, installedConnectorButtons]);
+  const handleSocialLoginHeight = () => {
+    setIsSocialLoginsExpanded(prev => !prev);
+  };
+  const handleWalletDetailsHeight = () => {
+    setIsWalletDetailsExpanded(prev => !prev);
+  };
+  const containerMaxHeight = react.useMemo(() => {
+    const isPrivacyPolicyOrTncLink = privacyPolicy || tncLink;
+    const isEnableMainSocialLoginButton = enableMainSocialLoginButton;
+    // Loader Screen
+    if (modalState.status !== interfaces.MODAL_STATUS.INITIALIZED) {
+      return "642px";
+    }
+    // Wallet Details Screen
+    if (isWalletDetailsExpanded) {
+      return "588px";
+    }
+    // Connect Wallet Screen
+    if (modalState.currentPage === constants.PAGES.CONNECT_WALLET) {
+      return isPrivacyPolicyOrTncLink ? "640px" : "580px";
+    }
+    // Expanded Social Login Screen
+    if (isSocialLoginsExpanded) {
+      return isPrivacyPolicyOrTncLink ? "644px" : "588px";
+    }
+    // Only MetaMask
+    if (topInstalledConnectorButtons.length === 1) {
+      if (isPrivacyPolicyOrTncLink) {
+        return isEnableMainSocialLoginButton ? "600px" : "560px";
+      }
+      return isEnableMainSocialLoginButton ? "570px" : "530px";
+    }
+    // More than 1 connector
+    if (topInstalledConnectorButtons.length > 1) {
+      const maxHeight = 500 + (topInstalledConnectorButtons.length - 1) * 58;
+      if (isPrivacyPolicyOrTncLink) {
+        return `${maxHeight + (isEnableMainSocialLoginButton ? 120 : 60)}px`;
+      }
+      return `${maxHeight + (isEnableMainSocialLoginButton ? 66 : 16)}px`;
+    }
+    // Default
+    return "539px";
+  }, [isWalletDetailsExpanded, modalState.currentPage, isSocialLoginsExpanded, installedConnectorButtons, privacyPolicy, tncLink, enableMainSocialLoginButton, modalState.status]);
+  const contextValue = react.useMemo(() => ({
+    bodyState,
+    setBodyState,
+    toast,
+    setToast
+  }), [bodyState, setBodyState, toast, setToast]);
+  return jsxRuntime.jsx(RootContext.RootContext.Provider, {
+    value: contextValue,
+    children: jsxRuntime.jsxs("div", {
+      className: "w3a--relative w3a--flex w3a--flex-col",
+      children: [jsxRuntime.jsxs("div", {
+        className: "w3a--relative w3a--h-screen w3a--overflow-hidden w3a--transition-all w3a--duration-[400ms] w3a--ease-in-out",
+        style: {
+          maxHeight: containerMaxHeight
+        },
+        children: [jsxRuntime.jsx("div", {
+          className: "w3a--modal-curtain"
+        }), jsxRuntime.jsxs("div", {
+          className: "w3a--relative w3a--flex w3a--h-full w3a--flex-1 w3a--flex-col w3a--p-6",
+          children: [modalState.status !== interfaces.MODAL_STATUS.INITIALIZED ? jsxRuntime.jsx(Loader, {
+            connector: modalState.detailedLoaderConnector,
+            connectorName: modalState.detailedLoaderConnectorName,
+            modalStatus: modalState.status,
+            onClose: onCloseLoader,
+            appLogo: appLogo
+          }) : jsxRuntime.jsxs(jsxRuntime.Fragment, {
+            children: [modalState.currentPage === constants.PAGES.LOGIN && showExternalWalletPage && modalState.status === interfaces.MODAL_STATUS.INITIALIZED && jsxRuntime.jsx(Login, {
+              web3authClientId: modalState.web3authClientId,
+              web3authNetwork: modalState.web3authNetwork,
+              isModalVisible: modalState.modalVisibility,
+              isDark: isDark,
+              appLogo: appLogo,
+              showPasswordLessInput: showPasswordLessInput,
+              showExternalWalletButton: showExternalWalletButton,
+              showExternalWalletCount: displayExternalWalletsCount,
+              showInstalledExternalWallets: displayInstalledExternalWallets,
+              socialLoginsConfig: socialLoginsConfig,
+              areSocialLoginsVisible: areSocialLoginsVisible,
+              isEmailPrimary: isEmailPrimary,
+              isExternalPrimary: isExternalPrimary,
+              installedExternalWalletConfig: topInstalledConnectorButtons,
+              isEmailPasswordLessLoginVisible: isEmailPasswordLessLoginVisible,
+              isSmsPasswordLessLoginVisible: isSmsPasswordLessLoginVisible,
+              totalExternalWallets: totalExternalWallets,
+              logoAlignment: logoAlignment,
+              buttonRadius: buttonRadiusType,
+              enableMainSocialLoginButton: enableMainSocialLoginButton,
+              handleSocialLoginClick: handleSocialLoginClick,
+              handleExternalWalletBtnClick: onExternalWalletBtnClick,
+              handleSocialLoginHeight: handleSocialLoginHeight,
+              handleExternalWalletClick: preHandleExternalWalletClick
+            }), modalState.currentPage === constants.PAGES.CONNECT_WALLET && !showExternalWalletPage && modalState.status === interfaces.MODAL_STATUS.INITIALIZED && jsxRuntime.jsx(ConnectWallet, {
+              isDark: isDark,
+              walletConnectUri: modalState.walletConnectUri,
+              config: modalState.externalWalletsConfig,
+              walletRegistry: walletRegistry,
+              allExternalButtons: allButtons,
+              connectorVisibilityMap: connectorVisibilityMap,
+              customConnectorButtons: customConnectorButtons,
+              deviceDetails: {
+                platform: deviceDetails.platform,
+                browser: deviceDetails.browser,
+                os: deviceDetails.os
+              },
+              chainNamespace: chainNamespaces,
+              buttonRadius: buttonRadiusType,
+              handleWalletDetailsHeight: handleWalletDetailsHeight,
+              onBackClick: onBackClick,
+              handleExternalWalletClick: preHandleExternalWalletClick
+            })]
+          }), jsxRuntime.jsx(Footer, {
+            privacyPolicy: privacyPolicy,
+            termsOfService: tncLink
+          }), bodyState.showMultiChainSelector && jsxRuntime.jsx(BottomSheet, {
+            uiConfig: uiConfig,
+            isShown: bodyState.showMultiChainSelector,
+            onClose: () => setBodyState({
+              showMultiChainSelector: false
+            }),
+            children: jsxRuntime.jsx(ConnectWalletChainNamespaceSelect, {
+              isDark: isDark,
+              wallet: bodyState.walletDetails,
+              handleExternalWalletClick: params => {
+                preHandleExternalWalletClick(params);
+                setBodyState({
+                  showMultiChainSelector: false
+                });
+              }
+            })
+          }), bodyState.showWalletDetails && jsxRuntime.jsxs(BottomSheet, {
+            uiConfig: uiConfig,
+            isShown: bodyState.showWalletDetails,
+            onClose: () => setBodyState({
+              showWalletDetails: false
+            }),
+            children: [jsxRuntime.jsx("div", {
+              className: "w3a--my-4 w3a--flex w3a--justify-center",
+              children: jsxRuntime.jsx(Image, {
+                imageId: `login-${bodyState.walletDetails.name}`,
+                hoverImageId: `login-${bodyState.walletDetails.name}`,
+                fallbackImageId: "wallet",
+                height: "80",
+                width: "80",
+                isButton: true,
+                extension: bodyState.walletDetails.imgExtension
+              })
+            }), jsxRuntime.jsx("ul", {
+              className: "w3a--flex w3a--flex-col w3a--gap-y-2",
+              children: deviceDetails.platform === "desktop" ? desktopInstallLinks : mobileInstallLinks
+            })]
+          })]
+        })]
+      }), jsxRuntime.jsx(Toast, {})]
+    })
+  });
+}
+
+module.exports = Root;

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

@@ -0,0 +1,156 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var auth = require('@web3auth/auth');
+var utils = require('../../utils.js');
+var Button = require('../Button/Button.js');
+var Button_type = require('../Button/Button.type.js');
+var LoginHint = require('../LoginHint/LoginHint.js');
+
+function getProviderIcon(method, isDark, extension) {
+  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`;
+  return jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [jsxRuntime.jsx("img", {
+      id: "active-login-img",
+      src: `https://images.web3auth.io/${hoverId}${extension}`,
+      alt: "active-login-img",
+      className: "w3a--size-5 w3a--object-contain"
+    }), jsxRuntime.jsx("img", {
+      id: "login-img",
+      src: `https://images.web3auth.io/${imageId}${extension}`,
+      alt: "login-img",
+      className: "w3a--size-5 w3a--object-contain"
+    })]
+  });
+}
+function SocialLoginList(props) {
+  const {
+    visibleRow,
+    otherRow,
+    isDark,
+    canShowMore,
+    handleSocialLoginClick,
+    handleExpandSocialLogins,
+    buttonRadius
+  } = props;
+  const getGridRowFromVisibleLogin = () => {
+    if (visibleRow.length === 1) {
+      return "w3a--grid-cols-1";
+    } else if (visibleRow.length === 2) {
+      return "w3a--grid-cols-2";
+    } else if (visibleRow.length === 3) {
+      return "w3a--grid-cols-3";
+    } else {
+      return "w3a--grid-cols-4";
+    }
+  };
+  if (visibleRow.length !== 0 && (otherRow === null || otherRow === void 0 ? void 0 : otherRow.length) === 0) {
+    var _visibleRow$;
+    const isMainOption = (_visibleRow$ = visibleRow[0]) === null || _visibleRow$ === void 0 ? void 0 : _visibleRow$.isMainOption;
+    const rowsToShow = isMainOption ? visibleRow.filter(row => !row.isMainOption) : visibleRow;
+    return jsxRuntime.jsxs("div", {
+      className: "w3a--flex w3a--w-full w3a--flex-col w3a--items-center w3a--justify-center w3a--gap-y-2",
+      children: [isMainOption && jsxRuntime.jsx(Button, {
+        type: Button_type.BUTTON_TYPE.SOCIAL,
+        props: {
+          showText: false,
+          method: visibleRow[0].method,
+          isDark,
+          isPrimaryBtn: false,
+          btnStyle: "w3a--flex w3a--items-center !w3a--justify-center w3a--w-full w3a--h-full w3a-arrow w3a-img-login-group",
+          children: jsxRuntime.jsx(jsxRuntime.Fragment, {
+            children: getProviderIcon(visibleRow[0].method, isDark, ".svg")
+          }),
+          onClick: () => handleSocialLoginClick({
+            connector: visibleRow[0].connector,
+            loginParams: visibleRow[0].loginParams
+          }),
+          buttonRadius
+        }
+      }, visibleRow[0].method), jsxRuntime.jsxs("div", {
+        className: utils.cn("w3a--grid w3a--w-full w3a--gap-x-2", getGridRowFromVisibleLogin()),
+        children: [rowsToShow.filter((_, index) => rowsToShow.length === 4 ? index <= 3 : index < 3).map(row => jsxRuntime.jsx(LoginHint, {
+          content: "Last Login",
+          isDark: isDark,
+          hideHint: true,
+          children: jsxRuntime.jsx(Button, {
+            type: Button_type.BUTTON_TYPE.SOCIAL,
+            props: {
+              showText: false,
+              method: row.method,
+              isDark,
+              isPrimaryBtn: false,
+              btnStyle: "w3a--flex w3a--items-center !w3a--justify-center w3a--w-full w3a--h-full w3a-arrow w3a-img-login-group",
+              children: jsxRuntime.jsx(jsxRuntime.Fragment, {
+                children: getProviderIcon(row.method, isDark, ".svg")
+              }),
+              onClick: () => handleSocialLoginClick({
+                connector: row.connector,
+                loginParams: row.loginParams
+              }),
+              buttonRadius
+            }
+          }, row.method)
+        }, row.method)), canShowMore && rowsToShow.length > 4 && jsxRuntime.jsx(Button, {
+          type: Button_type.BUTTON_TYPE.SOCIAL,
+          props: {
+            showIcon: false,
+            onClick: handleExpandSocialLogins,
+            children: jsxRuntime.jsx("img", {
+              src: utils.getIcons(isDark ? "dots-dark-horizontal" : "dots-light-horizontal"),
+              alt: "Logo",
+              className: "w3a--object-contain"
+            }),
+            buttonRadius
+          }
+        })]
+      })]
+    });
+  }
+  return jsxRuntime.jsxs("div", {
+    className: "w3a--flex w3a--w-full w3a--flex-col w3a--items-start w3a--justify-start w3a--gap-y-4",
+    children: [jsxRuntime.jsx("button", {
+      type: "button",
+      className: "w3a--appearance-none",
+      onClick: () => handleExpandSocialLogins(),
+      children: jsxRuntime.jsx("img", {
+        src: utils.getIcons(isDark ? "arrow-left-dark" : "arrow-left-light"),
+        alt: "Logo",
+        className: "w3a--object-contain"
+      })
+    }), jsxRuntime.jsx("div", {
+      className: "w3a--grid w3a--h-[300px] w3a--w-full w3a--auto-rows-min w3a--grid-cols-1 w3a--gap-y-2 w3a--overflow-y-auto w3a--px-1",
+      children: otherRow.map(row => jsxRuntime.jsx("div", {
+        className: "w3a--h-[50px] w3a--w-full",
+        children: jsxRuntime.jsx(Button, {
+          type: Button_type.BUTTON_TYPE.SOCIAL,
+          props: {
+            method: row.method,
+            isDark,
+            isPrimaryBtn: false,
+            onClick: () => handleSocialLoginClick({
+              connector: row.connector,
+              loginParams: row.loginParams
+            }),
+            btnStyle: "w3a--flex w3a--items-center !w3a--justify-start w3a--w-full w3a--h-full w3a-arrow w3a-img-login-group",
+            buttonRadius,
+            children: jsxRuntime.jsxs(jsxRuntime.Fragment, {
+              children: [getProviderIcon(row.method, isDark, ".svg"), jsxRuntime.jsx("p", {
+                className: "w3a--text-sm w3a--font-normal w3a--text-app-gray-900 dark:w3a--text-app-white",
+                children: row.name
+              }), jsxRuntime.jsx("img", {
+                id: "login-arrow",
+                className: "w3a--icon-animation w3a--ml-auto",
+                src: utils.getIcons(props.isDark ? "chevron-right-dark" : "chevron-right-light"),
+                alt: "arrow"
+              })]
+            })
+          }
+        })
+      }, row.method))
+    })]
+  });
+}
+
+module.exports = SocialLoginList;

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

@@ -0,0 +1,70 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var RootContext = require('../../context/RootContext.js');
+var interfaces = require('../../interfaces.js');
+
+const Toast = () => {
+  const {
+    toast,
+    setToast
+  } = react.useContext(RootContext.RootContext);
+  react.useEffect(() => {
+    if (toast.message) {
+      setTimeout(() => {
+        setToast({
+          message: "",
+          type: interfaces.TOAST_TYPE.SUCCESS
+        });
+      }, 3000);
+    }
+  }, [toast.message, setToast]);
+  if (!toast.message) return null;
+  const toastClass = {
+    success: "w3a--border-app-green-200 w3a--bg-app-green-100 w3a--text-app-green-900",
+    error: "w3a--border-app-red-200 w3a--bg-app-red-100 w3a--text-app-red-900",
+    warning: "w3a--border-app-yellow-200 w3a--bg-app-yellow-100 w3a--text-app-yellow-900",
+    info: "w3a--border-app-blue-200 w3a--bg-app-blue-100 w3a--text-app-blue-900"
+  };
+  const toastIconClass = {
+    success: "w3a--text-app-green-900",
+    error: "w3a--text-app-red-900",
+    warning: "w3a--text-app-yellow-900",
+    info: "w3a--text-app-blue-900"
+  };
+  return jsxRuntime.jsxs("div", {
+    className: `w3a--absolute w3a--inset-x-4 w3a--bottom-4 w3a--z-[60] w3a--mx-auto w3a--w-[90%] w3a--rounded-md w3a--border w3a--p-4 w3a--text-sm ${toastClass[toast.type]}`,
+    children: [jsxRuntime.jsx("div", {
+      className: "w3a--absolute w3a--right-4 w3a--top-4 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: () => setToast({
+          message: "",
+          type: interfaces.TOAST_TYPE.SUCCESS
+        }),
+        className: toastIconClass[toast.type],
+        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"
+        })
+      })
+    }), jsxRuntime.jsxs("div", {
+      className: "w3a--flex w3a--items-center w3a--gap-2",
+      children: [jsxRuntime.jsx("p", {
+        className: toastIconClass[toast.type],
+        children: "x"
+      }), jsxRuntime.jsx("p", {
+        children: toast.message
+      })]
+    })]
+  });
+};
+
+module.exports = Toast;