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

package/dist/lib.cjs/packages/modal/src/react/context/Web3AuthInnerContext.js

@@ -1,31 +1,31 @@
 'use strict';
 
 var noModal = require('@web3auth/no-modal');
-var React = require('react');
+var react = require('react');
 var modalManager = require('../../modalManager.js');
 
-const Web3AuthInnerContext = /*#__PURE__*/React.createContext(null);
+const Web3AuthInnerContext = /*#__PURE__*/react.createContext(null);
 function Web3AuthInnerProvider(params) {
   const {
     children,
     config
   } = params;
-  const [web3Auth, setWeb3Auth] = React.useState(null);
-  const [isConnecting, setIsConnecting] = React.useState(false);
-  const [isInitializing, setIsInitializing] = React.useState(false);
-  const [initError, setInitError] = React.useState(null);
-  const [connectError, setConnectError] = React.useState(null);
-  const [isConnected, setIsConnected] = React.useState(false);
-  const [provider, setProvider] = React.useState(null);
-  const [userInfo, setUserInfo] = React.useState(null);
-  const [isMFAEnabled, setIsMFAEnabled] = React.useState(false);
-  const [isInitialized, setIsInitialized] = React.useState(false);
-  const [status, setStatus] = React.useState(null);
-  const getPlugin = React.useCallback(name => {
+  const [web3Auth, setWeb3Auth] = react.useState(null);
+  const [isConnecting, setIsConnecting] = react.useState(false);
+  const [isInitializing, setIsInitializing] = react.useState(false);
+  const [initError, setInitError] = react.useState(null);
+  const [connectError, setConnectError] = react.useState(null);
+  const [isConnected, setIsConnected] = react.useState(false);
+  const [provider, setProvider] = react.useState(null);
+  const [userInfo, setUserInfo] = react.useState(null);
+  const [isMFAEnabled, setIsMFAEnabled] = react.useState(false);
+  const [isInitialized, setIsInitialized] = react.useState(false);
+  const [status, setStatus] = react.useState(null);
+  const getPlugin = react.useCallback(name => {
     if (!web3Auth) throw noModal.WalletInitializationError.notReady();
     return web3Auth.getPlugin(name);
   }, [web3Auth]);
-  const enableMFA = React.useCallback(async loginParams => {
+  const enableMFA = react.useCallback(async loginParams => {
     if (!web3Auth) throw noModal.WalletInitializationError.notReady();
     if (!isConnected) throw noModal.WalletLoginError.notConnectedError();
     await web3Auth.enableMFA(loginParams);
@@ -33,19 +33,19 @@ function Web3AuthInnerProvider(params) {
     setUserInfo(localUserInfo);
     setIsMFAEnabled(localUserInfo.isMfaEnabled || false);
   }, [web3Auth, isConnected]);
-  const manageMFA = React.useCallback(async loginParams => {
+  const manageMFA = react.useCallback(async loginParams => {
     if (!web3Auth) throw noModal.WalletInitializationError.notReady();
     if (!isConnected) throw noModal.WalletLoginError.notConnectedError();
     await web3Auth.manageMFA(loginParams);
   }, [web3Auth, isConnected]);
-  const logout = React.useCallback(async (logoutParams = {
+  const logout = react.useCallback(async (logoutParams = {
     cleanup: false
   }) => {
     if (!web3Auth) throw noModal.WalletInitializationError.notReady();
     if (!isConnected) throw noModal.WalletLoginError.notConnectedError();
     await web3Auth.logout(logoutParams);
   }, [web3Auth, isConnected]);
-  const connect = React.useCallback(async () => {
+  const connect = react.useCallback(async () => {
     if (!web3Auth) throw noModal.WalletInitializationError.notReady();
     try {
       setConnectError(null);
@@ -59,15 +59,15 @@ function Web3AuthInnerProvider(params) {
       setIsConnecting(false);
     }
   }, [web3Auth]);
-  const authenticateUser = React.useCallback(async () => {
+  const authenticateUser = react.useCallback(async () => {
     if (!web3Auth) throw noModal.WalletInitializationError.notReady();
     return web3Auth.authenticateUser();
   }, [web3Auth]);
-  const switchChain = React.useCallback(chainParams => {
+  const switchChain = react.useCallback(chainParams => {
     if (!web3Auth) throw noModal.WalletInitializationError.notReady();
     return web3Auth.switchChain(chainParams);
   }, [web3Auth]);
-  React.useEffect(() => {
+  react.useEffect(() => {
     const resetHookState = () => {
       setProvider(null);
       setUserInfo(null);
@@ -82,23 +82,12 @@ function Web3AuthInnerProvider(params) {
     const web3AuthInstance = new modalManager.Web3Auth(web3AuthOptions);
     setWeb3Auth(web3AuthInstance);
   }, [config]);
-  React.useEffect(() => {
+  react.useEffect(() => {
     async function init() {
       try {
         setInitError(null);
         setIsInitializing(true);
-        const {
-          modalConfig,
-          hideWalletDiscovery
-        } = config;
-        if (modalConfig) {
-          await web3Auth.initModal({
-            modalConfig,
-            hideWalletDiscovery
-          });
-        } else {
-          await web3Auth.initModal();
-        }
+        await web3Auth.initModal();
       } catch (error) {
         setInitError(error);
       } finally {
@@ -107,7 +96,7 @@ function Web3AuthInnerProvider(params) {
     }
     if (web3Auth) init();
   }, [web3Auth, config]);
-  React.useEffect(() => {
+  react.useEffect(() => {
     const addState = async () => {
       setProvider(web3Auth.provider);
       const userState = await web3Auth.getUserInfo();
@@ -123,7 +112,7 @@ function Web3AuthInnerProvider(params) {
       if (isConnected) addState();else resetState();
     }
   }, [web3Auth, isConnected]);
-  React.useEffect(() => {
+  react.useEffect(() => {
     const notReadyListener = () => setStatus(web3Auth.status);
     const readyListener = () => {
       setStatus(web3Auth.status);
@@ -168,7 +157,7 @@ function Web3AuthInnerProvider(params) {
       }
     };
   }, [web3Auth]);
-  const value = React.useMemo(() => {
+  const value = react.useMemo(() => {
     return {
       web3Auth,
       isConnected,
@@ -190,7 +179,7 @@ function Web3AuthInnerProvider(params) {
       connectError
     };
   }, [web3Auth, isConnected, isInitialized, provider, userInfo, isMFAEnabled, status, getPlugin, connect, enableMFA, manageMFA, logout, authenticateUser, switchChain, isInitializing, isConnecting, initError, connectError]);
-  return /*#__PURE__*/React.createElement(Web3AuthInnerContext.Provider, {
+  return /*#__PURE__*/react.createElement(Web3AuthInnerContext.Provider, {
     value
   }, children);
 }

package/dist/lib.cjs/packages/modal/src/react/hooks/useWeb3Auth.js

@@ -1,11 +1,11 @@
 'use strict';
 
 var noModal = require('@web3auth/no-modal');
-var React = require('react');
+var react = require('react');
 var Web3AuthInnerContext = require('../context/Web3AuthInnerContext.js');
 
 const useWeb3Auth = () => {
-  const context = React.useContext(Web3AuthInnerContext.Web3AuthInnerContext);
+  const context = react.useContext(Web3AuthInnerContext.Web3AuthInnerContext);
   if (!context) {
     throw noModal.WalletInitializationError.fromCode(1000, "usage of useWeb3Auth not wrapped in `Web3AuthContextProvider`.");
   }

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

@@ -0,0 +1,60 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var utils = require('../../utils.js');
+
+/**
+ * BottomSheet component
+ * @returns BottomSheet component
+ */
+function BottomSheet({
+  isShown,
+  onClose,
+  children,
+  uiConfig
+}) {
+  const {
+    borderRadiusType
+  } = uiConfig;
+  return jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [jsxRuntime.jsx("div", {
+      className: utils.cn("w3a--bottom-sheet-bg w3a--fixed w3a--left-0 w3a--top-0 w3a--size-full w3a--transition-opacity w3a--duration-300", {
+        "w3a--rounded-[30px]": borderRadiusType === "large",
+        "w3a--rounded-2xl": borderRadiusType === "medium",
+        "w3a--rounded-none": borderRadiusType === "small"
+      }),
+      onClick: onClose,
+      "aria-hidden": "true",
+      role: "button"
+    }), jsxRuntime.jsxs("div", {
+      className: utils.cn(`w3a--fixed w3a--bottom-2 w3a--left-2 w3a--mx-auto w3a--flex w3a--w-[96%] w3a--flex-col 
+      w3a--gap-y-2 w3a--rounded-3xl w3a--border w3a--border-app-gray-100 w3a--bg-app-white w3a--p-4 w3a--shadow-lg w3a--transition-transform w3a--duration-500 
+      w3a--ease-out dark:w3a--border-app-gray-600 dark:w3a--bg-app-dark-surface-main
+      ${isShown ? "w3a--translate-y-0 w3a--delay-700" : "w3a--translate-y-full"}`, {
+        "w3a--rounded-[30px]": borderRadiusType === "large",
+        "w3a--rounded-2xl": borderRadiusType === "medium",
+        "w3a--rounded-none": borderRadiusType === "small"
+      }),
+      children: [jsxRuntime.jsx("div", {
+        className: "w3a--absolute w3a--right-4 w3a--top-[16px] 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: onClose,
+          className: "w3a--text-app-gray-500 dark:w3a--text-app-gray-200",
+          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 = BottomSheet;

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

@@ -1,33 +1,58 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
-require('./styles.css.js');
-var React = require('react');
+var Button_type = require('./Button.type.js');
+var ButtonSocial = require('./ButtonSocial/ButtonSocial.js');
+var ButtonWallet = require('./ButtonWallet/ButtonWallet.js');
 
 function Button(props) {
   const {
-    variant = "primary",
+    type,
+    props: buttonProps
+  } = props;
+  const SocialButtonProps = buttonProps;
+  const WalletButtonProps = buttonProps;
+  const {
+    text,
+    showIcon,
+    showText,
+    method,
+    isDark,
+    isPrimaryBtn,
     onClick,
     children,
-    title,
-    className,
-    style,
-    size = "md",
-    disabled,
-    type = "button"
-  } = props;
-  const sizeClass = `size-${size}`;
-  return jsxRuntime.jsx("button", {
-    disabled: disabled,
-    // eslint-disable-next-line react/button-has-type
-    type: type,
-    className: `t-btn t-btn-${variant} w3a--rounded-full ${sizeClass} ${className}`,
-    onClick: onClick,
-    title: title,
-    style: style,
-    children: children
+    btnStyle,
+    buttonRadius
+  } = SocialButtonProps;
+  const {
+    label,
+    onClick: walletOnClick,
+    button,
+    deviceDetails,
+    walletConnectUri,
+    buttonRadius: walletButtonRadius
+  } = WalletButtonProps;
+  return jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [type === Button_type.BUTTON_TYPE.SOCIAL && jsxRuntime.jsx(ButtonSocial, {
+      text: text,
+      showIcon: showIcon,
+      showText: showText,
+      method: method,
+      isDark: isDark,
+      isPrimaryBtn: isPrimaryBtn,
+      onClick: onClick,
+      btnStyle: btnStyle,
+      buttonRadius: buttonRadius,
+      children: children
+    }), type === Button_type.BUTTON_TYPE.WALLET && jsxRuntime.jsx(ButtonWallet, {
+      label: label,
+      walletConnectUri: walletConnectUri,
+      onClick: walletOnClick,
+      button: button,
+      deviceDetails: deviceDetails,
+      buttonRadius: walletButtonRadius
+    })]
   });
 }
-var Button$1 = /*#__PURE__*/React.memo(Button);
 
-module.exports = Button$1;
+module.exports = Button;

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

@@ -0,0 +1,8 @@
+'use strict';
+
+const BUTTON_TYPE = {
+  SOCIAL: "social",
+  WALLET: "wallet"
+};
+
+exports.BUTTON_TYPE = BUTTON_TYPE;

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

@@ -0,0 +1,53 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var auth = require('@web3auth/auth');
+var utils = require('../../../utils.js');
+var Image = require('../../Image/Image.js');
+
+function getProviderIcon(method, isDark, isPrimaryBtn) {
+  const imageId = method === auth.AUTH_CONNECTION.TWITTER ? `login-twitter-x${isDark ? "-light" : "-dark"}` : `login-${method}${isDark ? "-light" : "-dark"}`;
+  const hoverId = method === auth.AUTH_CONNECTION.APPLE || method === auth.AUTH_CONNECTION.GITHUB || method === auth.AUTH_CONNECTION.TWITTER ? imageId : `login-${method}-active`;
+  if (isPrimaryBtn) {
+    return jsxRuntime.jsx(Image, {
+      width: "20",
+      imageId: hoverId,
+      hoverImageId: hoverId,
+      isButton: true
+    });
+  }
+  return jsxRuntime.jsx(Image, {
+    width: "20",
+    imageId: imageId,
+    hoverImageId: hoverId
+  });
+}
+function SocialLoginButton(props) {
+  const {
+    text,
+    showIcon,
+    showText,
+    method,
+    isDark,
+    isPrimaryBtn,
+    onClick,
+    children,
+    btnStyle,
+    buttonRadius = "pill"
+  } = props;
+  return jsxRuntime.jsxs("button", {
+    type: "button",
+    onClick: e => onClick && onClick(e),
+    className: utils.cn("w3a--btn", btnStyle, {
+      "w3a--rounded-full": buttonRadius === "pill",
+      "w3a--rounded-lg": buttonRadius === "rounded",
+      "w3a--rounded-none": buttonRadius === "square"
+    }),
+    children: [showIcon && getProviderIcon(method, isDark, isPrimaryBtn), showText && jsxRuntime.jsx("p", {
+      className: "w3a--text-sm w3a--font-normal w3a--text-app-gray-900 dark:w3a--text-app-white",
+      children: text
+    }), children]
+  });
+}
+
+module.exports = SocialLoginButton;

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

@@ -0,0 +1,68 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var cn = require('classnames');
+var react = require('react');
+var reactI18next = require('react-i18next');
+var localeImport = require('../../../localeImport.js');
+var utils = require('../../../utils.js');
+var Image = require('../../Image/Image.js');
+
+function ButtonWallet(props) {
+  const [t] = reactI18next.useTranslation(undefined, {
+    i18n: localeImport
+  });
+  const {
+    deviceDetails,
+    button,
+    walletConnectUri,
+    onClick,
+    label,
+    buttonRadius
+  } = props;
+  const isLink = react.useMemo(() => deviceDetails.platform !== "desktop" && button.href && button.hasWalletConnect && !button.hasInjectedWallet, [deviceDetails, button]);
+  const href = react.useMemo(() => button.href ? utils.formatIOSMobile({
+    uri: walletConnectUri,
+    link: button.href
+  }) : walletConnectUri, [button, walletConnectUri]);
+  const handleBtnClick = () => {
+    if (href && isLink) {
+      window.open(href, "_blank");
+    } else if (onClick) {
+      onClick();
+    }
+  };
+  return jsxRuntime.jsxs("button", {
+    type: "button",
+    className: cn(`w3a--flex w3a--w-full w3a--items-center w3a--justify-between w3a--bg-app-gray-50 w3a--p-3 hover:w3a--bg-app-gray-200 hover:w3a--text-app-gray-900 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: handleBtnClick,
+    children: [jsxRuntime.jsxs("div", {
+      className: "w3a--flex w3a--items-center w3a--gap-x-2",
+      children: [jsxRuntime.jsx("figure", {
+        className: button.icon ? "w3a--size-5" : "w3a--size-5 w3a--rounded-full w3a--bg-app-gray-300",
+        children: jsxRuntime.jsx(Image, {
+          imageData: button.icon,
+          imageId: `login-${button.name}`,
+          hoverImageId: `login-${button.name}`,
+          fallbackImageId: "wallet",
+          height: "24",
+          width: "24",
+          isButton: true,
+          extension: button.imgExtension || "webp"
+        })
+      }), jsxRuntime.jsx("p", {
+        className: "w3a--text-base w3a--font-normal w3a--text-app-gray-700 dark:w3a--text-app-white",
+        children: label
+      })]
+    }), button.hasInjectedWallet && jsxRuntime.jsx("span", {
+      className: "w3a--inline-flex w3a--items-center w3a--rounded-md 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: t("modal.external.installed")
+    })]
+  });
+}
+
+module.exports = ButtonWallet;

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

@@ -0,0 +1,202 @@
+'use strict';
+
+var _objectSpread = require('@babel/runtime/helpers/objectSpread2');
+var jsxRuntime = require('react/jsx-runtime');
+var noModal = require('@web3auth/no-modal');
+var react = require('react');
+var constants = require('../../constants.js');
+var RootContext = require('../../context/RootContext.js');
+var ConnectWalletChainFilter = require('./ConnectWalletChainFilter/ConnectWalletChainFilter.js');
+var ConnectWalletHeader = require('./ConnectWalletHeader/ConnectWalletHeader.js');
+var ConnectWalletList = require('./ConnectWalletList/ConnectWalletList.js');
+var ConnectWalletQrCode = require('./ConnectWalletQrCode/ConnectWalletQrCode.js');
+var ConnectWalletSearch = require('./ConnectWalletSearch/ConnectWalletSearch.js');
+
+function ConnectWallet(props) {
+  var _selectedButton$walle;
+  const {
+    isDark,
+    config,
+    walletConnectUri,
+    walletRegistry,
+    allExternalButtons,
+    customConnectorButtons,
+    connectorVisibilityMap,
+    deviceDetails,
+    buttonRadius = "pill",
+    chainNamespace,
+    onBackClick,
+    handleExternalWalletClick,
+    handleWalletDetailsHeight
+  } = props;
+  const {
+    bodyState,
+    setBodyState,
+    toast,
+    setToast
+  } = react.useContext(RootContext.RootContext);
+  const [currentPage, setCurrentPage] = react.useState(constants.CONNECT_WALLET_PAGES.CONNECT_WALLET);
+  const [selectedWallet, setSelectedWallet] = react.useState(false);
+  const [isLoading] = react.useState(false);
+  const [selectedButton, setSelectedButton] = react.useState(null);
+  const [walletSearch, setWalletSearch] = react.useState("");
+  const [selectedChain, setSelectedChain] = react.useState("all");
+  const [isShowAllWallets, setIsShowAllWallets] = react.useState(false);
+  const handleBack = () => {
+    if (!selectedWallet && currentPage === constants.CONNECT_WALLET_PAGES.CONNECT_WALLET && onBackClick) {
+      onBackClick(false);
+      return;
+    }
+    if (selectedWallet) {
+      setCurrentPage(constants.CONNECT_WALLET_PAGES.CONNECT_WALLET);
+      setSelectedWallet(false);
+      handleWalletDetailsHeight();
+    }
+  };
+  const walletDiscoverySupported = react.useMemo(() => {
+    const supported = walletRegistry && Object.keys(walletRegistry.default || {}).length > 0 && Object.keys(walletRegistry.others || {}).length > 0;
+    return supported;
+  }, [walletRegistry]);
+  const allUniqueButtons = react.useMemo(() => {
+    const uniqueButtonSet = new Set();
+    return allExternalButtons.concat(customConnectorButtons).filter(button => {
+      if (uniqueButtonSet.has(button.name)) return false;
+      uniqueButtonSet.add(button.name);
+      return true;
+    });
+  }, [allExternalButtons, customConnectorButtons]);
+  const defaultButtonKeys = react.useMemo(() => new Set(Object.keys(walletRegistry.default)), [walletRegistry]);
+  const defaultButtons = react.useMemo(() => {
+    // display order: default injected buttons > custom adapter buttons > default non-injected buttons
+    const buttons = [...allExternalButtons.filter(button => button.hasInjectedWallet && defaultButtonKeys.has(button.name)), ...customConnectorButtons, ...allExternalButtons.filter(button => !button.hasInjectedWallet && defaultButtonKeys.has(button.name))];
+    const buttonSet = new Set();
+    return buttons.filter(button => {
+      if (buttonSet.has(button.name)) return false;
+      buttonSet.add(button.name);
+      return true;
+    }).filter(button => {
+      var _button$chainNamespac;
+      return selectedChain === "all" || ((_button$chainNamespac = button.chainNamespaces) === null || _button$chainNamespac === void 0 ? void 0 : _button$chainNamespac.includes(selectedChain));
+    });
+  }, [allExternalButtons, customConnectorButtons, defaultButtonKeys, selectedChain]);
+  const installedWalletButtons = react.useMemo(() => {
+    const visibilityMap = connectorVisibilityMap;
+    return Object.keys(config).reduce((acc, adapter) => {
+      if (![noModal.WALLET_CONNECTORS.WALLET_CONNECT_V2].includes(adapter) && visibilityMap[adapter]) {
+        acc.push({
+          name: adapter,
+          displayName: config[adapter].label || adapter,
+          hasInjectedWallet: config[adapter].isInjected,
+          hasWalletConnect: false,
+          hasInstallLinks: false
+        });
+      }
+      return acc;
+    }, []);
+  }, [connectorVisibilityMap, config]);
+  const handleWalletSearch = e => {
+    const searchValue = e.target.value;
+    setWalletSearch(searchValue);
+  };
+  const handleChainFilterChange = chain => {
+    setSelectedChain(chain);
+    setIsShowAllWallets(false);
+  };
+  const filteredButtons = react.useMemo(() => {
+    if (walletDiscoverySupported) {
+      return allUniqueButtons.filter(button => selectedChain === "all" || button.chainNamespaces.includes(selectedChain)).filter(button => button.name.toLowerCase().includes(walletSearch.toLowerCase()));
+    }
+    return installedWalletButtons;
+  }, [walletDiscoverySupported, installedWalletButtons, walletSearch, allUniqueButtons, selectedChain]);
+  const externalButtons = react.useMemo(() => {
+    if (walletDiscoverySupported && !walletSearch && !isShowAllWallets) {
+      return defaultButtons;
+    }
+    return filteredButtons;
+  }, [walletDiscoverySupported, walletSearch, filteredButtons, defaultButtons, isShowAllWallets]);
+  const totalExternalWalletsCount = react.useMemo(() => filteredButtons.length, [filteredButtons]);
+  const initialWalletCount = react.useMemo(() => {
+    if (isShowAllWallets) return totalExternalWalletsCount;
+    return walletDiscoverySupported ? defaultButtons.length : installedWalletButtons.length;
+  }, [walletDiscoverySupported, defaultButtons, installedWalletButtons, isShowAllWallets, totalExternalWalletsCount]);
+  const handleWalletClick = button => {
+    var _button$chainNamespac2, _button$chainNamespac3;
+    // show chain namespace selector if the button is an injected connector with multiple chain namespaces
+    const isChainNamespaceSelectorRequired = button.hasInjectedWallet && ((_button$chainNamespac2 = button.chainNamespaces) === null || _button$chainNamespac2 === void 0 ? void 0 : _button$chainNamespac2.length) > 1;
+    if (isChainNamespaceSelectorRequired) {
+      setBodyState(_objectSpread(_objectSpread({}, bodyState), {}, {
+        showMultiChainSelector: true,
+        walletDetails: button
+      }));
+      return;
+    }
+    const isInjectedConnectorAndSingleChainNamespace = button.hasInjectedWallet && ((_button$chainNamespac3 = button.chainNamespaces) === null || _button$chainNamespac3 === void 0 ? void 0 : _button$chainNamespac3.length) === 1;
+    // if doesn't have wallet connect & doesn't have install links, must be a custom connector
+    const isCustomConnector = !button.hasInjectedWallet && !button.hasWalletConnect && !button.hasInstallLinks;
+    if (isInjectedConnectorAndSingleChainNamespace || isCustomConnector) {
+      return handleExternalWalletClick({
+        connector: button.name
+      });
+    }
+    if (button.hasWalletConnect || !isInjectedConnectorAndSingleChainNamespace) {
+      setSelectedButton(button);
+      setSelectedWallet(true);
+      setCurrentPage(constants.CONNECT_WALLET_PAGES.SELECTED_WALLET);
+      handleWalletDetailsHeight();
+    } else {
+      setBodyState(_objectSpread(_objectSpread({}, bodyState), {}, {
+        showWalletDetails: true,
+        walletDetails: button
+      }));
+    }
+  };
+  const handleMoreWallets = () => {
+    setIsShowAllWallets(true);
+  };
+  return jsxRuntime.jsxs("div", {
+    className: "w3a--relative w3a--flex w3a--flex-1 w3a--flex-col w3a--gap-y-4",
+    children: [jsxRuntime.jsx(ConnectWalletHeader, {
+      onBackClick: handleBack,
+      currentPage: currentPage,
+      selectedButton: selectedButton
+    }), selectedWallet ? jsxRuntime.jsx(ConnectWalletQrCode, {
+      toast: toast,
+      setToast: setToast,
+      walletConnectUri: walletConnectUri,
+      isDark: isDark,
+      selectedButton: selectedButton,
+      bodyState: bodyState,
+      primaryColor: (_selectedButton$walle = selectedButton.walletRegistryItem) === null || _selectedButton$walle === void 0 ? void 0 : _selectedButton$walle.primaryColor,
+      logoImage: `https://images.web3auth.io/login-${selectedButton.name}.${selectedButton.imgExtension}`,
+      setBodyState: setBodyState
+    }) : jsxRuntime.jsxs("div", {
+      className: "w3a--flex w3a--flex-col w3a--gap-y-2",
+      children: [jsxRuntime.jsx(ConnectWalletChainFilter, {
+        isDark: isDark,
+        isLoading: isLoading,
+        selectedChain: selectedChain,
+        setSelectedChain: handleChainFilterChange,
+        chainNamespace: chainNamespace
+      }), jsxRuntime.jsx(ConnectWalletSearch, {
+        totalExternalWalletCount: totalExternalWalletsCount,
+        isLoading: isLoading,
+        walletSearch: walletSearch,
+        handleWalletSearch: handleWalletSearch,
+        buttonRadius: buttonRadius
+      }), jsxRuntime.jsx(ConnectWalletList, {
+        externalButtons: externalButtons,
+        isLoading: isLoading,
+        totalExternalWalletsCount: totalExternalWalletsCount,
+        initialWalletCount: initialWalletCount,
+        handleWalletClick: handleWalletClick,
+        handleMoreWallets: handleMoreWallets,
+        isDark: isDark,
+        deviceDetails: deviceDetails,
+        walletConnectUri: walletConnectUri,
+        buttonRadius: buttonRadius
+      })]
+    })]
+  });
+}
+
+module.exports = ConnectWallet;