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

package/dist/lib.cjs/packages/modal/src/config.js

@@ -7,9 +7,7 @@ const defaultConnectorsModalConfig = {
   connectors: {
     [noModal.EVM_CONNECTORS.AUTH]: {
       label: "Auth",
-      showOnModal: true,
-      showOnMobile: true,
-      showOnDesktop: true
+      showOnModal: true
     }
   }
 };

package/dist/lib.cjs/packages/modal/src/modalManager.js

@@ -72,18 +72,18 @@ class Web3Auth extends noModal.Web3AuthNoModal {
     if (this.options.modalConfig) this.modalConfig = this.options.modalConfig;
     noModal.log.info("modalConfig", this.modalConfig);
   }
-  async initModal() {
+  async initModal(options) {
+    const {
+      signal
+    } = options || {};
     super.checkInitRequirements();
     // get project config and wallet registry
     const {
       projectConfig,
       walletRegistry
     } = await this.getProjectAndWalletConfig();
-    this.options.uiConfig = deepmerge(noModal.cloneDeep(projectConfig.whitelabel || {}), this.options.uiConfig || {});
-    if (!this.options.uiConfig.defaultLanguage) this.options.uiConfig.defaultLanguage = utils.getUserLanguage(this.options.uiConfig.defaultLanguage);
-    if (!this.options.uiConfig.mode) this.options.uiConfig.mode = "light";
-    this.options.uiConfig = deepmerge(projectConfig.loginModal || {}, this.options.uiConfig || {});
     // init config
+    this.initUIConfig(projectConfig);
     super.initAccountAbstractionConfig(projectConfig);
     super.initChainsConfig(projectConfig);
     super.initCachedConnectorAndChainId();
@@ -96,6 +96,7 @@ class Web3Auth extends noModal.Web3AuthNoModal {
       connectorListener: this,
       web3authClientId: this.options.clientId,
       web3authNetwork: this.options.web3AuthNetwork,
+      authBuildEnv: this.options.authBuildEnv,
       chainNamespaces: this.getChainNamespaces(),
       walletRegistry: filteredWalletRegistry
     }), {
@@ -104,22 +105,31 @@ class Web3Auth extends noModal.Web3AuthNoModal {
       onExternalWalletLogin: this.onExternalWalletLogin,
       onModalVisibility: this.onModalVisibility
     });
-    await this.loginModal.initModal();
+    await noModal.withAbort(() => this.loginModal.initModal(), signal);
     // setup common JRPC provider
-    await this.setupCommonJRPCProvider();
+    await noModal.withAbort(() => this.setupCommonJRPCProvider(), signal);
     // initialize connectors
     this.on(noModal.CONNECTOR_EVENTS.CONNECTORS_UPDATED, ({
       connectors: newConnectors
-    }) => this.initConnectors({
-      connectors: newConnectors,
-      projectConfig,
-      disabledExternalWallets
-    }));
-    await this.loadConnectors({
-      projectConfig
+    }) => {
+      const onAbortHandler = () => {
+        var _this$connectors;
+        noModal.log.debug("init aborted");
+        if (((_this$connectors = this.connectors) === null || _this$connectors === void 0 ? void 0 : _this$connectors.length) > 0) {
+          super.cleanup();
+        }
+      };
+      noModal.withAbort(() => this.initConnectors({
+        connectors: newConnectors,
+        projectConfig,
+        disabledExternalWallets
+      }), signal, onAbortHandler);
     });
+    await noModal.withAbort(() => super.loadConnectors({
+      projectConfig
+    }), signal);
     // initialize plugins
-    await this.initPlugins();
+    await noModal.withAbort(() => super.initPlugins(), signal);
   }
   async connect() {
     if (!this.loginModal) throw noModal.WalletInitializationError.notReady("Login modal is not initialized");
@@ -213,6 +223,23 @@ class Web3Auth extends noModal.Web3AuthNoModal {
       walletRegistry
     };
   }
+  initUIConfig(projectConfig) {
+    this.options.uiConfig = deepmerge(noModal.cloneDeep(projectConfig.whitelabel || {}), this.options.uiConfig || {});
+    if (!this.options.uiConfig.defaultLanguage) this.options.uiConfig.defaultLanguage = utils.getUserLanguage(this.options.uiConfig.defaultLanguage);
+    if (!this.options.uiConfig.mode) this.options.uiConfig.mode = "light";
+    this.options.uiConfig = deepmerge(projectConfig.loginModal || {}, this.options.uiConfig);
+    // merge login methods order from project config and user config, with user config taking precedence
+    const defaultAuthConnections = projectConfig.embeddedWalletAuth.filter(x => x.isDefault).map(x => x.authConnection);
+    const mergedAuthConnections = [...(this.options.uiConfig.loginMethodsOrder || []), ...defaultAuthConnections];
+    const loginMethodsOrder = [];
+    const authConnectionSet = new Set();
+    for (const authConnection of mergedAuthConnections) {
+      if (authConnectionSet.has(authConnection)) continue;
+      authConnectionSet.add(authConnection);
+      loginMethodsOrder.push(authConnection);
+    }
+    this.options.uiConfig.loginMethodsOrder = loginMethodsOrder;
+  }
   async initConnectors({
     connectors,
     projectConfig,
@@ -280,9 +307,7 @@ class Web3Auth extends noModal.Web3AuthNoModal {
           groupedAuthConnectionId: groupedAuthConnectionId,
           extraLoginOptions: authConnectionConfig.jwtParameters,
           isDefault: true,
-          showOnModal: true,
-          showOnDesktop: true,
-          showOnMobile: true
+          showOnModal: true
         };
       }
       embedWalletConfigMap.set(groupedAuthConnectionId || authConnectionId, authConnectionConfig);
@@ -328,9 +353,7 @@ class Web3Auth extends noModal.Web3AuthNoModal {
       // start with the default config of connector.
       const defaultConnectorConfig = {
         label: noModal.CONNECTOR_NAMES[connectorName] || connectorName.split("-").map(config$1.capitalizeFirstLetter).join(" "),
-        showOnModal: true,
-        showOnMobile: true,
-        showOnDesktop: true
+        showOnModal: true
       };
       this.modalConfig.connectors[connectorName] = _objectSpread(_objectSpread({}, defaultConnectorConfig), ((_this$modalConfig3 = this.modalConfig) === null || _this$modalConfig3 === void 0 || (_this$modalConfig3 = _this$modalConfig3.connectors) === null || _this$modalConfig3 === void 0 ? void 0 : _this$modalConfig3[connectorName]) || {});
       // check if connector is configured/added by user and exist in connectors map.

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

@@ -83,11 +83,14 @@ function Web3AuthInnerProvider(params) {
     setWeb3Auth(web3AuthInstance);
   }, [config]);
   react.useEffect(() => {
+    const controller = new AbortController();
     async function init() {
       try {
         setInitError(null);
         setIsInitializing(true);
-        await web3Auth.initModal();
+        await web3Auth.initModal({
+          signal: controller.signal
+        });
       } catch (error) {
         setInitError(error);
       } finally {
@@ -95,6 +98,9 @@ function Web3AuthInnerProvider(params) {
       }
     }
     if (web3Auth) init();
+    return () => {
+      controller.abort();
+    };
   }, [web3Auth, config]);
   react.useEffect(() => {
     const addState = async () => {
@@ -154,6 +160,7 @@ function Web3AuthInnerProvider(params) {
         web3Auth.off(noModal.CONNECTOR_EVENTS.DISCONNECTED, disconnectedListener);
         web3Auth.off(noModal.CONNECTOR_EVENTS.CONNECTING, connectingListener);
         web3Auth.off(noModal.CONNECTOR_EVENTS.ERRORED, errorListener);
+        web3Auth.cleanup();
       }
     };
   }, [web3Auth]);

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

@@ -44,7 +44,7 @@ function BottomSheet({
           fill: "none",
           xmlns: "http://www.w3.org/2000/svg",
           onClick: onClose,
-          className: "w3a--text-app-gray-500 dark:w3a--text-app-gray-200",
+          className: "w3a--text-app-gray-500 hover:w3a--text-app-gray-900 dark:w3a--text-app-gray-200 dark:hover:w3a--text-app-white",
           children: jsxRuntime.jsx("path", {
             fillRule: "evenodd",
             clipRule: "evenodd",

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

@@ -6,7 +6,7 @@ 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 imageId = method === auth.AUTH_CONNECTION.TWITTER ? `login-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, {

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

@@ -4,6 +4,7 @@ var jsxRuntime = require('react/jsx-runtime');
 var cn = require('classnames');
 var react = require('react');
 var reactI18next = require('react-i18next');
+var ThemeContext = require('../../../context/ThemeContext.js');
 var localeImport = require('../../../localeImport.js');
 var utils = require('../../../utils.js');
 var Image = require('../../Image/Image.js');
@@ -20,6 +21,7 @@ function ButtonWallet(props) {
     label,
     buttonRadius
   } = props;
+  const isDark = react.useContext(ThemeContext.ThemedContext);
   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,
@@ -34,7 +36,8 @@ function ButtonWallet(props) {
   };
   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`, {
+    className: cn(`w3a--group w3a--relative w3a--overflow-hidden 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 active:w3a--scale-95 w3a--transition-all w3a--duration-150`, {
       "w3a--rounded-full": buttonRadius === "pill",
       "w3a--rounded-lg": buttonRadius === "rounded",
       "w3a--rounded-none": buttonRadius === "square"
@@ -43,7 +46,7 @@ function ButtonWallet(props) {
     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",
+        className: "w3a--size-5",
         children: jsxRuntime.jsx(Image, {
           imageData: button.icon,
           imageId: `login-${button.name}`,
@@ -55,12 +58,17 @@ function ButtonWallet(props) {
           extension: button.imgExtension || "webp"
         })
       }), jsxRuntime.jsx("p", {
-        className: "w3a--text-base w3a--font-normal w3a--text-app-gray-700 dark:w3a--text-app-white",
+        className: "w3a--max-w-[180px] w3a--truncate 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",
+      className: "w3a--absolute w3a--right-4 w3a--top-1/2 w3a--flex w3a--w-auto -w3a--translate-y-1/2 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 w3a--transition-all w3a--duration-300 group-hover:w3a--translate-x-6 group-hover:w3a--opacity-0 \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")
+    }), jsxRuntime.jsx("img", {
+      id: "injected-wallet-arrow",
+      className: "w3a--absolute w3a--right-4 w3a--top-1/2 -w3a--translate-x-10 -w3a--translate-y-1/2 w3a--opacity-0 w3a--transition-all w3a--duration-300\n          group-hover:w3a--translate-x-0 group-hover:w3a--opacity-100",
+      src: utils.getIcons(isDark ? "chevron-right-light" : "chevron-right-dark"),
+      alt: "arrow"
     })]
   });
 }

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

@@ -59,7 +59,7 @@ function ConnectWallet(props) {
   }, [walletRegistry]);
   const allUniqueButtons = react.useMemo(() => {
     const uniqueButtonSet = new Set();
-    return allExternalButtons.concat(customConnectorButtons).filter(button => {
+    return customConnectorButtons.concat(allExternalButtons).filter(button => {
       if (uniqueButtonSet.has(button.name)) return false;
       uniqueButtonSet.add(button.name);
       return true;
@@ -104,7 +104,7 @@ function ConnectWallet(props) {
   };
   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 [...allUniqueButtons.filter(button => button.hasInjectedWallet), ...allUniqueButtons.filter(button => !button.hasInjectedWallet)].filter(button => selectedChain === "all" || button.chainNamespaces.includes(selectedChain)).filter(button => button.name.toLowerCase().includes(walletSearch.toLowerCase()));
     }
     return installedWalletButtons;
   }, [walletDiscoverySupported, installedWalletButtons, walletSearch, allUniqueButtons, selectedChain]);

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

@@ -43,11 +43,11 @@ function ConnectWalletChainFilter(props) {
     });
   }
   return jsxRuntime.jsx("div", {
-    className: "w3a--flex w3a--items-center w3a--justify-items-start w3a--gap-x-2",
+    className: "w3a--flex w3a--items-center w3a--justify-items-start w3a--gap-x-4",
     children: chains.map(chain => jsxRuntime.jsxs("button", {
       type: "button",
-      className: utils.cn("w3a--flex w3a--items-center w3a--justify-center w3a--gap-x-1 w3a--text-xs w3a--font-medium w3a--px-4 w3a--py-3 w3a--text-app-gray-500 dark:w3a--text-app-gray-300 hover:w3a--bg-app-gray-200 dark:hover:w3a--bg-app-gray-700 w3a--h-12 w3a--rounded-2xl", {
-        "w3a--bg-app-gray-100 dark:w3a--bg-app-gray-800 w3a--border w3a--border-app-gray-200 dark:w3a--border-app-gray-700 w3a--text-app-gray-900 dark:w3a--text-app-white": selectedChain === chain.id
+      className: utils.cn("w3a--flex w3a--w-[104px] w3a--items-center w3a--justify-center w3a--gap-x-1 w3a--text-xs w3a--font-medium w3a--px-4 w3a--py-3 w3a--text-app-gray-500 dark:w3a--text-app-gray-300 hover:w3a--bg-app-gray-200 dark:hover:w3a--bg-app-gray-700 w3a--h-12 w3a--rounded-2xl w3a--border w3a--border-transparent", {
+        "w3a--bg-app-gray-100 dark:w3a--bg-app-gray-800 w3a--border-app-gray-200 dark:w3a--border-app-gray-700 w3a--text-app-gray-900 dark:w3a--text-app-white hover:!w3a--bg-app-gray-100 dark:hover:!w3a--bg-app-gray-800": selectedChain === chain.id
       }),
       onClick: () => setSelectedChain(chain.id),
       children: [chain.icon && jsxRuntime.jsx("img", {

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

@@ -56,7 +56,7 @@ const ConnectWalletChainNamespaceSelect = props => {
       }) => jsxRuntime.jsx("li", {
         children: jsxRuntime.jsxs("button", {
           type: "button",
-          className: "w3a--btn w3a-external-wallet-btn w3a--h-12 w3a--w-full w3a--items-center !w3a--justify-between w3a--rounded-full",
+          className: "w3a--btn w3a--group w3a--relative w3a--h-11 w3a--w-full w3a--items-center !w3a--justify-between w3a--overflow-hidden w3a--rounded-full",
           onClick: () => handleExternalWalletClick({
             connector: wallet.name,
             chainNamespace
@@ -76,8 +76,8 @@ const ConnectWalletChainNamespaceSelect = props => {
               children: displayName
             })]
           }), jsxRuntime.jsx("img", {
-            id: "external-wallet-arrow",
-            className: "w3a--icon-animation",
+            id: "chain-namespace-arrow",
+            className: "w3a--absolute w3a--right-4 w3a--top-1/2 -w3a--translate-x-6 -w3a--translate-y-1/2 w3a--opacity-0 w3a--transition-all w3a--duration-300\n          group-hover:w3a--translate-x-0 group-hover:w3a--opacity-100",
             src: utils.getIcons(isDark ? "chevron-right-dark" : "chevron-right-light"),
             alt: "arrow"
           })]

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

@@ -29,7 +29,7 @@ function ConnectWalletHeader(props) {
         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",
+        className: "w3a--text-app-gray-500 hover:w3a--text-app-gray-900 dark:w3a--text-app-gray-200 dark:hover:w3a--text-app-white",
         children: jsxRuntime.jsx("path", {
           fill: "currentColor",
           fillRule: "evenodd",

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

@@ -1,6 +1,7 @@
 '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');
@@ -27,7 +28,7 @@ function WalletsFound(props) {
   } = props;
   if (isLoading) {
     return jsxRuntime.jsx("div", {
-      className: "w3a--flex w3a--flex-col w3a--gap-y-2 w3a--pr-1.5",
+      className: "w3a--flex w3a--flex-col w3a--gap-y-2",
       children: Array.from({
         length: 6
       }).map((_, index) => jsxRuntime.jsx("div", {
@@ -82,7 +83,7 @@ function MoreWalletsButton(props) {
   }
   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", {
+    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 active:w3a--scale-95 w3a--transition-all w3a--duration-150 w3a--mr-2.5", {
       "w3a--rounded-full": buttonRadius === "pill",
       "w3a--rounded-lg": buttonRadius === "rounded",
       "w3a--rounded-none": buttonRadius === "square"
@@ -115,9 +116,16 @@ function ConnectWalletList(props) {
     walletConnectUri,
     buttonRadius
   } = props;
+  const [showMoreWallets, setShowMoreWallets] = react.useState(true);
+  const onShowMoreWalletsClick = () => {
+    setShowMoreWallets(false);
+    handleMoreWallets();
+  };
   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]"),
+      className: utils.cn("w3a--overflow-y-auto w3a--flex w3a--flex-col w3a--gap-y-2 w3a--h-[280px] w3a--social-container w3a--pr-2.5", {
+        "w3a--h-[328px]": !showMoreWallets
+      }),
       children: externalButtons.length === 0 ? jsxRuntime.jsx(NoWalletsFound, {}) : jsxRuntime.jsx(WalletsFound, {
         externalButtons: externalButtons,
         isLoading: isLoading,
@@ -126,10 +134,10 @@ function ConnectWalletList(props) {
         walletConnectUri: walletConnectUri,
         buttonRadius: buttonRadius
       })
-    }), totalExternalWalletsCount > 15 && !isLoading && initialWalletCount < totalExternalWalletsCount && jsxRuntime.jsx(MoreWalletsButton, {
+    }), showMoreWallets && totalExternalWalletsCount > 15 && !isLoading && initialWalletCount < totalExternalWalletsCount && jsxRuntime.jsx(MoreWalletsButton, {
       totalExternalWalletsCount: totalExternalWalletsCount,
       initialWalletCount: initialWalletCount,
-      handleMoreWallets: handleMoreWallets,
+      handleMoreWallets: onShowMoreWalletsClick,
       isLoading: isLoading,
       isDark: isDark,
       buttonRadius: buttonRadius

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

@@ -77,7 +77,7 @@ function ConnectWalletQrCode(props) {
         }), "?"]
       }), 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",
+        className: "w3a--appearance-none w3a--rounded-full w3a--border w3a--border-app-gray-200 w3a--bg-transparent w3a--px-5 w3a--py-2 w3a--text-base w3a--font-normal w3a--text-app-gray-700 w3a--transition-all w3a--duration-150 hover:w3a--border-transparent hover:w3a--shadow-light active:w3a--scale-95 dark:w3a--border-app-gray-700 dark:w3a--text-app-gray-300 dark:hover:w3a--border-transparent dark:hover:w3a--shadow-dark",
         onClick: () => {
           setBodyState(_objectSpread(_objectSpread({}, bodyState), {}, {
             showWalletDetails: true,

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

@@ -3,6 +3,7 @@
 var jsxRuntime = require('react/jsx-runtime');
 var react = require('react');
 var ThemeContext = require('../../context/ThemeContext.js');
+var utils = require('../../utils.js');
 
 /**
  * Image component
@@ -36,7 +37,7 @@ function Image(props) {
         height: height,
         width: width,
         alt: hoverImageId,
-        className: "w3a--object-contain"
+        className: utils.cn("w3a--object-contain", `w3a--h-${height} w3a--w-${width}`)
       });
     }
     return jsxRuntime.jsx("img", {
@@ -45,7 +46,7 @@ function Image(props) {
       height: height,
       width: width,
       alt: hoverImageId,
-      className: "w3a--rounded w3a--object-contain"
+      className: utils.cn("w3a--rounded w3a--object-contain", `w3a--h-${height} w3a--w-${width}`)
     });
   }
   if (imageData) {
@@ -55,7 +56,7 @@ function Image(props) {
       height: height,
       width: width,
       alt: imageId,
-      className: "w3a--object-contain",
+      className: utils.cn("w3a--object-contain", `w3a--h-${height} w3a--w-${width}`),
       onError: ({
         currentTarget
       }) => {
@@ -73,7 +74,7 @@ function Image(props) {
     height: height,
     width: width,
     alt: imageId,
-    className: "w3a--rounded w3a--object-contain",
+    className: utils.cn("w3a--rounded w3a--object-contain", `w3a--h-${height} w3a--w-${width}`),
     onError: ({
       currentTarget
     }) => {

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

@@ -34,7 +34,7 @@ function ConnectingStatus(props) {
     children: [jsxRuntime.jsxs("div", {
       className: "w3a--flex w3a--items-center w3a--justify-center w3a--gap-x-6",
       children: [jsxRuntime.jsx("figure", {
-        className: "w3a--loader-logo-size w3a--flex w3a--items-center w3a--justify-center w3a--overflow-hidden",
+        className: "w3a--flex w3a--size-10 w3a--items-center w3a--justify-center w3a--overflow-hidden",
         children: jsxRuntime.jsx("img", {
           src: appLogo,
           alt: "",

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

@@ -24,6 +24,7 @@ function Login(props) {
   const {
     web3authClientId,
     web3authNetwork,
+    authBuildEnv,
     appLogo,
     isModalVisible,
     handleSocialLoginHeight,
@@ -42,8 +43,7 @@ function Login(props) {
     showExternalWalletCount,
     showInstalledExternalWallets,
     logoAlignment = "center",
-    buttonRadius = "pill",
-    enableMainSocialLoginButton = false
+    buttonRadius = "pill"
   } = props;
   const [t] = reactI18next.useTranslation(undefined, {
     i18n: localeImport
@@ -79,16 +79,38 @@ function Login(props) {
     });
     const visibleRows = [];
     const otherRows = [];
+    const loginMethodsOrder = (socialLoginsConfig.loginMethodsOrder || []).reduce((acc, method, index) => {
+      acc[method] = index;
+      return acc;
+    }, {});
     const loginOptions = Object.keys(socialLoginsConfig.loginMethods).filter(method => {
       return !socialLoginsConfig.loginMethods[method].showOnModal === false && !restrictedLoginMethods.includes(method);
+    }).sort((a, b) => {
+      var _loginMethodsOrder$a, _loginMethodsOrder$b;
+      const maxOrder = (socialLoginsConfig.loginMethodsOrder || []).length;
+      const aOrder = (_loginMethodsOrder$a = loginMethodsOrder[a]) !== null && _loginMethodsOrder$a !== void 0 ? _loginMethodsOrder$a : maxOrder;
+      const bOrder = (_loginMethodsOrder$b = loginMethodsOrder[b]) !== null && _loginMethodsOrder$b !== void 0 ? _loginMethodsOrder$b : maxOrder;
+      const {
+        mainOption: aMainOption
+      } = socialLoginsConfig.loginMethods[a] || {};
+      const {
+        mainOption: bMainOption
+      } = socialLoginsConfig.loginMethods[b] || {};
+      // if both are main options, sort by order
+      if (aMainOption && bMainOption) {
+        return aOrder - bOrder;
+      }
+      // if one is main option, it should be first
+      if (aMainOption) return -1;
+      if (bMainOption) return 1;
+      // if none are main options, sort by order
+      return aOrder - bOrder;
     });
     loginOptions.forEach((method, index) => {
       var _socialLoginsConfig$u;
       const connectorConfig = socialLoginsConfig.loginMethods[method];
       const name = config.capitalizeFirstLetter(connectorConfig.name || method);
-      // const orderIndex = socialLoginsConfig.loginMethodsOrder.indexOf(method) + 1;
       const order = index + 1;
-      const isMainOption = order === 1 && enableMainSocialLoginButton;
       const isPrimaryBtn = (socialLoginsConfig === null || socialLoginsConfig === void 0 || (_socialLoginsConfig$u = socialLoginsConfig.uiConfig) === null || _socialLoginsConfig$u === void 0 ? void 0 : _socialLoginsConfig$u.primaryButton) === "socialLogin" && order === 1;
       const loginOptionLength = loginOptions.length;
       const moreThanFour = loginOptionLength >= 4;
@@ -108,8 +130,7 @@ function Login(props) {
             name,
             login_hint: ""
           },
-          order,
-          isMainOption
+          order
         });
       }
       otherRows.push({
@@ -126,14 +147,13 @@ function Login(props) {
           name,
           login_hint: ""
         },
-        order,
-        isMainOption
+        order
       });
     });
     setVisibleRow(visibleRows);
     setOtherRow(otherRows);
     setCanShowMore(maxOptions.length > 4); // Update the state based on the condition
-  }, [socialLoginsConfig, isDark, enableMainSocialLoginButton, buttonRadius]);
+  }, [socialLoginsConfig, isDark, buttonRadius]);
   const handleCustomLogin = async (authConnection, loginHint) => {
     try {
       const handler = factory.createPasswordlessHandler(authConnection, {
@@ -141,7 +161,8 @@ function Login(props) {
         web3authClientId,
         network: web3authNetwork,
         uiConfig: socialLoginsConfig.uiConfig,
-        authConnection
+        authConnection,
+        authBuildEnv
       });
       let token = "";
       if (authConnection === auth.AUTH_CONNECTION.SMS_PASSWORDLESS) {
@@ -342,22 +363,22 @@ function Login(props) {
       className: utils.cn("w3a--flex w3a--w-full w3a--flex-col w3a--items-start w3a--justify-start w3a--gap-y-2"),
       children: [installedExternalWallets.length > 0 && installedExternalWallets.map(wallet => jsxRuntime.jsxs("button", {
         type: "button",
-        className: utils.cn("w3a--btn !w3a--justify-between w3a-external-wallet-btn", {
+        className: utils.cn("w3a--btn !w3a--justify-between w3a--group w3a--relative w3a--overflow-hidden", {
           "w3a--rounded-full": buttonRadius === "pill",
           "w3a--rounded-lg": buttonRadius === "rounded",
           "w3a--rounded-none": buttonRadius === "square"
         }),
         onClick: () => handleInstalledWalletClick(wallet),
         children: [jsxRuntime.jsx("p", {
-          className: "w3a--text-base w3a--font-normal w3a--text-app-gray-700 dark:w3a--text-app-white",
+          className: "w3a--max-w-[180px] w3a--truncate w3a--text-base w3a--font-normal w3a--text-app-gray-700 dark:w3a--text-app-white",
           children: wallet.displayName
         }), jsxRuntime.jsxs("div", {
-          className: "w3a--flex w3a--items-center w3a--gap-x-2",
+          className: "w3a--absolute w3a--right-4 w3a--top-1/2 w3a--flex w3a--w-auto -w3a--translate-y-1/2 w3a--items-center w3a--gap-x-2 w3a--transition-all w3a--duration-300 group-hover:w3a--translate-x-6 group-hover:w3a--opacity-0",
           children: [wallet.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")
           }), jsxRuntime.jsx("figure", {
-            className: wallet.icon ? "w3a--size-5" : "w3a--size-5 w3a--rounded-full w3a--bg-app-gray-300",
+            className: "w3a--size-5",
             children: jsxRuntime.jsx(Image, {
               imageData: wallet.icon,
               imageId: `login-${wallet.name}`,
@@ -369,25 +390,30 @@ function Login(props) {
               extension: wallet.imgExtension || "webp"
             })
           })]
+        }), jsxRuntime.jsx("img", {
+          id: "injected-wallet-arrow",
+          className: "w3a--absolute w3a--right-4 w3a--top-1/2 -w3a--translate-x-10 -w3a--translate-y-1/2 w3a--opacity-0 w3a--transition-all w3a--duration-300\n          group-hover:w3a--translate-x-0 group-hover:w3a--opacity-100",
+          src: utils.getIcons(isDark ? "chevron-right-dark" : "chevron-right-light"),
+          alt: "arrow"
         })]
       }, wallet.name)), totalExternalWallets > 3 && jsxRuntime.jsxs("button", {
         type: "button",
-        className: utils.cn("w3a--btn !w3a--justify-between w3a-external-wallet-btn", {
+        className: utils.cn("w3a--btn !w3a--justify-between w3a--group w3a--relative w3a--overflow-hidden", {
           "w3a--rounded-full": buttonRadius === "pill",
           "w3a--rounded-lg": buttonRadius === "rounded",
           "w3a--rounded-none": buttonRadius === "square"
         }),
         onClick: handleConnectWallet,
         children: [jsxRuntime.jsx("p", {
-          className: "w3a--text-app-gray-900 dark:w3a--text-app-white",
+          className: "w3a--text-base w3a--font-normal w3a--text-app-gray-900 dark:w3a--text-app-white",
           children: t("modal.external.all-wallets")
         }), showExternalWalletCount && totalExternalWallets > 0 && jsxRuntime.jsx("div", {
           id: "external-wallet-count",
-          className: "w3a--w-auto w3a--rounded-full w3a--bg-app-primary-100 w3a--px-2.5 w3a--py-0.5 w3a--text-xs w3a--font-medium w3a--text-app-primary-800 dark:w3a--border dark:w3a--border-app-primary-500 dark:w3a--bg-transparent dark:w3a--text-app-primary-500",
+          className: "w3a--absolute w3a--right-4 w3a--top-1/2 w3a--w-auto -w3a--translate-y-1/2 w3a--rounded-full w3a--bg-app-primary-100 w3a--px-2.5 w3a--py-0.5 w3a--text-xs w3a--font-medium w3a--text-app-primary-800 w3a--transition-all w3a--delay-300 w3a--duration-300 group-hover:w3a--translate-x-6 group-hover:w3a--opacity-0 group-hover:w3a--delay-0 dark:w3a--border dark:w3a--border-app-primary-500 dark:w3a--bg-transparent dark:w3a--text-app-primary-500",
           children: totalExternalWallets - 1
         }), jsxRuntime.jsx("img", {
           id: "external-wallet-arrow",
-          className: "w3a--icon-animation",
+          className: "w3a--absolute w3a--right-4 w3a--top-1/2 -w3a--translate-x-10 -w3a--translate-y-1/2 w3a--opacity-0 w3a--transition-all w3a--duration-300\n          group-hover:w3a--translate-x-0 group-hover:w3a--opacity-100",
           src: utils.getIcons(isDark ? "chevron-right-dark" : "chevron-right-light"),
           alt: "arrow"
         })]
@@ -460,7 +486,7 @@ function Login(props) {
         children: jsxRuntime.jsx("img", {
           src: headerLogo || utils.getIcons(isDark ? "logo-dark" : "logo-light"),
           alt: "Logo",
-          className: "w3a--object-contain"
+          className: "w3a--size-full w3a--object-contain"
         })
       }), jsxRuntime.jsx("p", {
         className: utils.cn("w3a--text-lg w3a--font-semibold w3a--text-app-gray-900 dark:w3a--text-app-white", logoAlignment === "center" ? "w3a--text-center" : "w3a--text-left w3a--w-full w3a--ml-4"),

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

@@ -57,9 +57,9 @@ function LoginPasswordLess(props) {
     }
   }, [isPasswordLessCtaClicked]);
   if (!isPasswordLessCtaClicked) {
-    return jsxRuntime.jsx("button", {
+    return jsxRuntime.jsxs("button", {
       type: "button",
-      className: utils.cn("w3a--btn !w3a--justify-between", {
+      className: utils.cn("w3a--btn !w3a--justify-between w3a--relative w3a--group w3a--overflow-hidden", {
         "w3a--rounded-full": buttonRadius === "pill",
         "w3a--rounded-lg": buttonRadius === "rounded",
         "w3a--rounded-none": buttonRadius === "square"
@@ -67,12 +67,17 @@ function LoginPasswordLess(props) {
       onClick: () => {
         setIsPasswordLessCtaClicked(true);
       },
-      children: jsxRuntime.jsx("p", {
+      children: [jsxRuntime.jsx("p", {
         className: "w3a--text-app-gray-900 dark:w3a--text-app-white",
         children: t("modal.passwordless.title", {
           title
         })
-      })
+      }), jsxRuntime.jsx("img", {
+        id: "passwordless-arrow",
+        className: "w3a--absolute w3a--right-4 w3a--top-1/2 -w3a--translate-x-6 -w3a--translate-y-1/2 w3a--opacity-0 w3a--transition-all w3a--duration-300\n          group-hover:w3a--translate-x-0 group-hover:w3a--opacity-100",
+        src: utils.getIcons(isDark ? "chevron-right-dark" : "chevron-right-light"),
+        alt: "arrow"
+      })]
     });
   }
   return jsxRuntime.jsxs(jsxRuntime.Fragment, {
@@ -100,7 +105,7 @@ function LoginPasswordLess(props) {
         disabled: isPasswordLessLoading
       }), isPasswordLessLoading && jsxRuntime.jsx(PulseLoader, {}), inputValue && !isPasswordLessLoading && jsxRuntime.jsx("button", {
         type: "button",
-        className: "w3a--icon-animation w3a--appearance-none",
+        className: "w3a--appearance-none",
         onClick: onFormSubmit,
         children: jsxRuntime.jsx("img", {
           src: utils.getIcons(isDark ? "chevron-right-dark" : "chevron-right-light"),

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

@@ -71,7 +71,7 @@ function Modal(props) {
           fill: "none",
           xmlns: "http://www.w3.org/2000/svg",
           onClick: onCloseHandler,
-          className: "w3a--text-app-gray-500 dark:w3a--text-app-gray-200",
+          className: "w3a--text-app-gray-500 hover:w3a--text-app-gray-900 dark:w3a--text-app-gray-200 dark:hover:w3a--text-app-white",
           children: jsxRuntime.jsx("path", {
             fillRule: "evenodd",
             clipRule: "evenodd",