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

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

@@ -27,7 +27,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: /*#__PURE__*/jsx("path", {
           fill: "currentColor",
           fillRule: "evenodd",

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

@@ -1,3 +1,4 @@
+import { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import i18nInstance from '../../../localeImport.js';
 import { cn, getIcons } from '../../../utils.js';
@@ -25,7 +26,7 @@ function WalletsFound(props) {
   } = props;
   if (isLoading) {
     return /*#__PURE__*/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) => /*#__PURE__*/jsx("div", {
@@ -80,7 +81,7 @@ function MoreWalletsButton(props) {
   }
   return /*#__PURE__*/jsxs("button", {
     type: "button",
-    className: 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: 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"
@@ -113,9 +114,16 @@ function ConnectWalletList(props) {
     walletConnectUri,
     buttonRadius
   } = props;
+  const [showMoreWallets, setShowMoreWallets] = useState(true);
+  const onShowMoreWalletsClick = () => {
+    setShowMoreWallets(false);
+    handleMoreWallets();
+  };
   return /*#__PURE__*/jsxs(Fragment, {
     children: [/*#__PURE__*/jsx("ul", {
-      className: cn("w3a--overflow-y-auto w3a--flex w3a--flex-col w3a--gap-y-2 w3a--h-[280px]"),
+      className: 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 ? /*#__PURE__*/jsx(NoWalletsFound, {}) : /*#__PURE__*/jsx(WalletsFound, {
         externalButtons: externalButtons,
         isLoading: isLoading,
@@ -124,10 +132,10 @@ function ConnectWalletList(props) {
         walletConnectUri: walletConnectUri,
         buttonRadius: buttonRadius
       })
-    }), totalExternalWalletsCount > 15 && !isLoading && initialWalletCount < totalExternalWalletsCount && /*#__PURE__*/jsx(MoreWalletsButton, {
+    }), showMoreWallets && totalExternalWalletsCount > 15 && !isLoading && initialWalletCount < totalExternalWalletsCount && /*#__PURE__*/jsx(MoreWalletsButton, {
       totalExternalWalletsCount: totalExternalWalletsCount,
       initialWalletCount: initialWalletCount,
-      handleMoreWallets: handleMoreWallets,
+      handleMoreWallets: onShowMoreWalletsClick,
       isLoading: isLoading,
       isDark: isDark,
       buttonRadius: buttonRadius

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

@@ -75,7 +75,7 @@ function ConnectWalletQrCode(props) {
         }), "?"]
       }), /*#__PURE__*/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.esm/packages/modal/src/ui/components/Image/Image.js

@@ -1,5 +1,6 @@
 import { useContext, useMemo } from 'react';
 import { ThemedContext } from '../../context/ThemeContext.js';
+import { cn } from '../../utils.js';
 import { jsx } from 'react/jsx-runtime';
 
 /**
@@ -34,7 +35,7 @@ function Image(props) {
         height: height,
         width: width,
         alt: hoverImageId,
-        className: "w3a--object-contain"
+        className: cn("w3a--object-contain", `w3a--h-${height} w3a--w-${width}`)
       });
     }
     return /*#__PURE__*/jsx("img", {
@@ -43,7 +44,7 @@ function Image(props) {
       height: height,
       width: width,
       alt: hoverImageId,
-      className: "w3a--rounded w3a--object-contain"
+      className: cn("w3a--rounded w3a--object-contain", `w3a--h-${height} w3a--w-${width}`)
     });
   }
   if (imageData) {
@@ -53,7 +54,7 @@ function Image(props) {
       height: height,
       width: width,
       alt: imageId,
-      className: "w3a--object-contain",
+      className: cn("w3a--object-contain", `w3a--h-${height} w3a--w-${width}`),
       onError: ({
         currentTarget
       }) => {
@@ -71,7 +72,7 @@ function Image(props) {
     height: height,
     width: width,
     alt: imageId,
-    className: "w3a--rounded w3a--object-contain",
+    className: cn("w3a--rounded w3a--object-contain", `w3a--h-${height} w3a--w-${width}`),
     onError: ({
       currentTarget
     }) => {

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

@@ -32,7 +32,7 @@ function ConnectingStatus(props) {
     children: [/*#__PURE__*/jsxs("div", {
       className: "w3a--flex w3a--items-center w3a--justify-center w3a--gap-x-6",
       children: [/*#__PURE__*/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: /*#__PURE__*/jsx("img", {
           src: appLogo,
           alt: "",

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

@@ -22,6 +22,7 @@ function Login(props) {
   const {
     web3authClientId,
     web3authNetwork,
+    authBuildEnv,
     appLogo,
     isModalVisible,
     handleSocialLoginHeight,
@@ -40,8 +41,7 @@ function Login(props) {
     showExternalWalletCount,
     showInstalledExternalWallets,
     logoAlignment = "center",
-    buttonRadius = "pill",
-    enableMainSocialLoginButton = false
+    buttonRadius = "pill"
   } = props;
   const [t] = useTranslation(undefined, {
     i18n: i18nInstance
@@ -77,16 +77,41 @@ 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 = 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;
@@ -106,8 +131,7 @@ function Login(props) {
             name,
             login_hint: ""
           },
-          order,
-          isMainOption
+          order
         });
       }
       otherRows.push({
@@ -124,14 +148,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 = createPasswordlessHandler(authConnection, {
@@ -139,7 +162,8 @@ function Login(props) {
         web3authClientId,
         network: web3authNetwork,
         uiConfig: socialLoginsConfig.uiConfig,
-        authConnection
+        authConnection,
+        authBuildEnv
       });
       let token = "";
       if (authConnection === AUTH_CONNECTION.SMS_PASSWORDLESS) {
@@ -340,22 +364,22 @@ function Login(props) {
       className: 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 => /*#__PURE__*/jsxs("button", {
         type: "button",
-        className: cn("w3a--btn !w3a--justify-between w3a-external-wallet-btn", {
+        className: 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: [/*#__PURE__*/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
         }), /*#__PURE__*/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 && /*#__PURE__*/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  dark:w3a--border dark:w3a--border-app-primary-400 dark:w3a--bg-transparent dark:w3a--text-app-primary-400",
             children: t("modal.external.installed")
           }), /*#__PURE__*/jsx("figure", {
-            className: wallet.icon ? "w3a--size-5" : "w3a--size-5 w3a--rounded-full w3a--bg-app-gray-300",
+            className: "w3a--size-5",
             children: /*#__PURE__*/jsx(Image, {
               imageData: wallet.icon,
               imageId: `login-${wallet.name}`,
@@ -367,25 +391,30 @@ function Login(props) {
               extension: wallet.imgExtension || "webp"
             })
           })]
+        }), /*#__PURE__*/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 group-hover:w3a--translate-x-0 group-hover:w3a--opacity-100",
+          src: getIcons(isDark ? "chevron-right-dark" : "chevron-right-light"),
+          alt: "arrow"
         })]
       }, wallet.name)), totalExternalWallets > 3 && /*#__PURE__*/jsxs("button", {
         type: "button",
-        className: cn("w3a--btn !w3a--justify-between w3a-external-wallet-btn", {
+        className: 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: [/*#__PURE__*/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 && /*#__PURE__*/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
         }), /*#__PURE__*/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 group-hover:w3a--translate-x-0 group-hover:w3a--opacity-100",
           src: getIcons(isDark ? "chevron-right-dark" : "chevron-right-light"),
           alt: "arrow"
         })]
@@ -460,7 +489,7 @@ function Login(props) {
         children: /*#__PURE__*/jsx("img", {
           src: headerLogo || getIcons(isDark ? "logo-dark" : "logo-light"),
           alt: "Logo",
-          className: "w3a--object-contain"
+          className: "w3a--size-full w3a--object-contain"
         })
       }), /*#__PURE__*/jsx("p", {
         className: 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.esm/packages/modal/src/ui/components/Login/LoginPasswordLess/LoginPasswordLess.js

@@ -3,7 +3,7 @@ import { useTranslation } from 'react-i18next';
 import i18nInstance from '../../../localeImport.js';
 import { cn, getIcons } from '../../../utils.js';
 import PulseLoader from '../../PulseLoader/PulseLoader.js';
-import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 
 function LoginPasswordLess(props) {
   const {
@@ -55,9 +55,9 @@ function LoginPasswordLess(props) {
     }
   }, [isPasswordLessCtaClicked]);
   if (!isPasswordLessCtaClicked) {
-    return /*#__PURE__*/jsx("button", {
+    return /*#__PURE__*/jsxs("button", {
       type: "button",
-      className: cn("w3a--btn !w3a--justify-between", {
+      className: 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"
@@ -65,12 +65,17 @@ function LoginPasswordLess(props) {
       onClick: () => {
         setIsPasswordLessCtaClicked(true);
       },
-      children: /*#__PURE__*/jsx("p", {
+      children: [/*#__PURE__*/jsx("p", {
         className: "w3a--text-app-gray-900 dark:w3a--text-app-white",
         children: t("modal.passwordless.title", {
           title
         })
-      })
+      }), /*#__PURE__*/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 group-hover:w3a--translate-x-0 group-hover:w3a--opacity-100",
+        src: getIcons(isDark ? "chevron-right-dark" : "chevron-right-light"),
+        alt: "arrow"
+      })]
     });
   }
   return /*#__PURE__*/jsxs(Fragment, {
@@ -98,7 +103,7 @@ function LoginPasswordLess(props) {
         disabled: isPasswordLessLoading
       }), isPasswordLessLoading && /*#__PURE__*/jsx(PulseLoader, {}), inputValue && !isPasswordLessLoading && /*#__PURE__*/jsx("button", {
         type: "button",
-        className: "w3a--icon-animation w3a--appearance-none",
+        className: "w3a--appearance-none",
         onClick: onFormSubmit,
         children: /*#__PURE__*/jsx("img", {
           src: getIcons(isDark ? "chevron-right-dark" : "chevron-right-light"),

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

@@ -69,7 +69,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: /*#__PURE__*/jsx("path", {
             fillRule: "evenodd",
             clipRule: "evenodd",

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

@@ -4,11 +4,11 @@ const PulseLoader = () => {
   return /*#__PURE__*/jsxs("div", {
     className: "w3a--flex w3a--items-center w3a--justify-center w3a--gap-x-2",
     children: [/*#__PURE__*/jsx("div", {
-      className: "w3a--animate-circle w3a--bg-app-gray-500 dark:w3a--bg-app-gray-200"
+      className: "w3a--size-3 w3a--animate-pulse w3a--rounded-full w3a--bg-app-gray-500 dark:w3a--bg-app-gray-200"
     }), /*#__PURE__*/jsx("div", {
-      className: "w3a--animate-circle w3a--bg-app-gray-400 dark:w3a--bg-app-gray-400"
+      className: "w3a--size-3 w3a--animate-pulse w3a--rounded-full w3a--bg-app-gray-400 dark:w3a--bg-app-gray-400"
     }), /*#__PURE__*/jsx("div", {
-      className: "w3a--animate-circle w3a--bg-app-gray-200 dark:w3a--bg-app-gray-600"
+      className: "w3a--size-3 w3a--animate-pulse w3a--rounded-full w3a--bg-app-gray-200 dark:w3a--bg-app-gray-600"
     })]
   });
 };

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

@@ -45,7 +45,6 @@ function Root(props) {
   const {
     logoAlignment = "center",
     buttonRadiusType = "pill",
-    enableMainSocialLoginButton = false,
     privacyPolicy = "",
     tncLink = "",
     displayInstalledExternalWallets = true,
@@ -110,7 +109,7 @@ function Root(props) {
           target: "_blank",
           children: /*#__PURE__*/jsxs("button", {
             type: "button",
-            className: 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", {
+            className: cn("w3a--group w3a--relative w3a--overflow-hidden w3a--h-11 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"
@@ -129,8 +128,8 @@ function Root(props) {
                 os: getOsName(osKey)
               })
             }), /*#__PURE__*/jsx("img", {
-              id: "device-link-arrow",
-              className: "w3a--icon-animation w3a--ml-auto",
+              id: "install-links-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 group-hover:w3a--translate-x-0 group-hover:w3a--opacity-100",
               src: getIcons(isDark ? "chevron-right-dark" : "chevron-right-light"),
               alt: "arrow"
             })]
@@ -157,7 +156,7 @@ function Root(props) {
         target: "_blank",
         children: /*#__PURE__*/jsxs("button", {
           type: "button",
-          className: 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", {
+          className: cn("w3a--group w3a--relative w3a--overflow-hidden w3a--h-11 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"
@@ -176,8 +175,8 @@ function Root(props) {
               browser: getBrowserName(deviceDetails.browser)
             })
           }), /*#__PURE__*/jsx("img", {
-            id: "device-link-arrow",
-            className: "w3a--icon-animation w3a--ml-auto",
+            id: "install-links-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 group-hover:w3a--translate-x-0 group-hover:w3a--opacity-100",
             src: getIcons(isDark ? "chevron-right-dark" : "chevron-right-light"),
             alt: "arrow"
           })]
@@ -188,28 +187,15 @@ function Root(props) {
   }, [(_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 = useMemo(() => modalState.externalWalletsConfig, [modalState.externalWalletsConfig]);
   const connectorVisibilityMap = 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;
+      var _config$connector;
+      canShowMap[connector] = Boolean((_config$connector = config[connector]) === null || _config$connector === void 0 ? void 0 : _config$connector.showOnModal);
     });
     return canShowMap;
-  }, [deviceDetails, config]);
+  }, [config]);
   const isWalletConnectConnectorIncluded = 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]);
@@ -297,7 +283,6 @@ function Root(props) {
   };
   const containerMaxHeight = useMemo(() => {
     const isPrivacyPolicyOrTncLink = privacyPolicy || tncLink;
-    const isEnableMainSocialLoginButton = enableMainSocialLoginButton;
 
     // Loader Screen
     if (modalState.status !== MODAL_STATUS.INITIALIZED) {
@@ -321,23 +306,20 @@ function Root(props) {
 
     // Only MetaMask
     if (topInstalledConnectorButtons.length === 1) {
-      if (isPrivacyPolicyOrTncLink) {
-        return isEnableMainSocialLoginButton ? "600px" : "560px";
-      }
-      return isEnableMainSocialLoginButton ? "570px" : "530px";
+      return isPrivacyPolicyOrTncLink ? "560px" : "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 + 60}px`;
       }
-      return `${maxHeight + (isEnableMainSocialLoginButton ? 66 : 16)}px`;
+      return `${maxHeight + 16}px`;
     }
     // Default
     return "539px";
-  }, [privacyPolicy, tncLink, enableMainSocialLoginButton, modalState.status, modalState.currentPage, isWalletDetailsExpanded, isSocialLoginsExpanded, topInstalledConnectorButtons.length]);
+  }, [privacyPolicy, tncLink, modalState.status, modalState.currentPage, isWalletDetailsExpanded, isSocialLoginsExpanded, topInstalledConnectorButtons.length]);
   const contextValue = useMemo(() => ({
     bodyState,
     setBodyState,
@@ -367,6 +349,7 @@ function Root(props) {
             children: [modalState.currentPage === PAGES.LOGIN && showExternalWalletPage && modalState.status === MODAL_STATUS.INITIALIZED && /*#__PURE__*/jsx(Login, {
               web3authClientId: modalState.web3authClientId,
               web3authNetwork: modalState.web3authNetwork,
+              authBuildEnv: modalState.authBuildEnv,
               isModalVisible: modalState.modalVisibility,
               isDark: isDark,
               appLogo: appLogo,
@@ -384,7 +367,6 @@ function Root(props) {
               totalExternalWallets: totalExternalWallets,
               logoAlignment: logoAlignment,
               buttonRadius: buttonRadiusType,
-              enableMainSocialLoginButton: enableMainSocialLoginButton,
               handleSocialLoginClick: handleSocialLoginClick,
               handleExternalWalletBtnClick: onExternalWalletBtnClick,
               handleSocialLoginHeight: handleSocialLoginHeight,
@@ -433,7 +415,10 @@ function Root(props) {
             onClose: () => setBodyState({
               showWalletDetails: false
             }),
-            children: [/*#__PURE__*/jsx("div", {
+            children: [/*#__PURE__*/jsx("p", {
+              className: "w3a--mb-2 w3a--text-center w3a--text-base w3a--font-semibold w3a--text-app-gray-900 dark:w3a--text-app-white",
+              children: t("modal.getWallet")
+            }), /*#__PURE__*/jsx("div", {
               className: "w3a--my-4 w3a--flex w3a--justify-center",
               children: /*#__PURE__*/jsx(Image, {
                 imageId: `login-${bodyState.walletDetails.name}`,

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

@@ -3,22 +3,22 @@ import { cn, getIcons } from '../../utils.js';
 import Button from '../Button/Button.js';
 import { BUTTON_TYPE } from '../Button/Button.type.js';
 import LoginHint from '../LoginHint/LoginHint.js';
-import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 
 function getProviderIcon(method, isDark, extension) {
-  const imageId = method === AUTH_CONNECTION.TWITTER ? `login-twitter-x${isDark ? "-light" : "-dark"}` : `login-${method}${isDark ? "-light" : "-dark"}`;
+  const imageId = method === AUTH_CONNECTION.TWITTER ? `login-X${isDark ? "-light" : "-dark"}` : `login-${method}${isDark ? "-light" : "-dark"}`;
   const hoverId = method === AUTH_CONNECTION.APPLE || method === AUTH_CONNECTION.GITHUB || method === AUTH_CONNECTION.TWITTER ? imageId : `login-${method}-active`;
   return /*#__PURE__*/jsxs(Fragment, {
     children: [/*#__PURE__*/jsx("img", {
       id: "active-login-img",
       src: `https://images.web3auth.io/${hoverId}${extension}`,
       alt: "active-login-img",
-      className: "w3a--size-5 w3a--object-contain"
+      className: "w3a--hidden w3a--size-5 w3a--object-contain group-hover:w3a--block"
     }), /*#__PURE__*/jsx("img", {
       id: "login-img",
       src: `https://images.web3auth.io/${imageId}${extension}`,
       alt: "login-img",
-      className: "w3a--size-5 w3a--object-contain"
+      className: "w3a--block w3a--size-5 w3a--object-contain group-hover:w3a--hidden"
     })]
   });
 }
@@ -44,31 +44,11 @@ function SocialLoginList(props) {
     }
   };
   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 /*#__PURE__*/jsxs("div", {
+    return /*#__PURE__*/jsx("div", {
       className: "w3a--flex w3a--w-full w3a--flex-col w3a--items-center w3a--justify-center w3a--gap-y-2",
-      children: [isMainOption && /*#__PURE__*/jsx(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: /*#__PURE__*/jsx(Fragment, {
-            children: getProviderIcon(visibleRow[0].method, isDark, ".svg")
-          }),
-          onClick: () => handleSocialLoginClick({
-            connector: visibleRow[0].connector,
-            loginParams: visibleRow[0].loginParams
-          }),
-          buttonRadius
-        }
-      }, visibleRow[0].method), /*#__PURE__*/jsxs("div", {
+      children: /*#__PURE__*/jsxs("div", {
         className: cn("w3a--grid w3a--w-full w3a--gap-x-2", getGridRowFromVisibleLogin()),
-        children: [rowsToShow.filter((_, index) => rowsToShow.length === 4 ? index <= 3 : index < 3).map(row => /*#__PURE__*/jsx(LoginHint, {
+        children: [visibleRow.filter((_, index) => visibleRow.length === 4 ? index <= 3 : index < 3).map(row => /*#__PURE__*/jsx(LoginHint, {
           content: "Last Login",
           isDark: isDark,
           hideHint: true,
@@ -79,7 +59,7 @@ function SocialLoginList(props) {
               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",
+              btnStyle: "w3a--flex w3a--items-center !w3a--justify-center w3a--w-full w3a--h-11 w3a--group",
               children: /*#__PURE__*/jsx(Fragment, {
                 children: getProviderIcon(row.method, isDark, ".svg")
               }),
@@ -90,11 +70,12 @@ function SocialLoginList(props) {
               buttonRadius
             }
           }, row.method)
-        }, row.method)), canShowMore && rowsToShow.length > 4 && /*#__PURE__*/jsx(Button, {
+        }, row.method)), canShowMore && visibleRow.length > 4 && /*#__PURE__*/jsx(Button, {
           type: BUTTON_TYPE.SOCIAL,
           props: {
             showIcon: false,
             onClick: handleExpandSocialLogins,
+            btnStyle: "w3a--flex w3a--items-center !w3a--justify-center w3a--w-full w3a--h-11",
             children: /*#__PURE__*/jsx("img", {
               src: getIcons(isDark ? "dots-dark-horizontal" : "dots-light-horizontal"),
               alt: "Logo",
@@ -103,7 +84,7 @@ function SocialLoginList(props) {
             buttonRadius
           }
         })]
-      })]
+      })
     });
   }
   return /*#__PURE__*/jsxs("div", {
@@ -118,9 +99,9 @@ function SocialLoginList(props) {
         className: "w3a--object-contain"
       })
     }), /*#__PURE__*/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",
+      className: "w3a--social-container 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--pl-2 w3a--pr-3",
       children: otherRow.map(row => /*#__PURE__*/jsx("div", {
-        className: "w3a--h-[50px] w3a--w-full",
+        className: "w3a--h-11 w3a--w-full",
         children: /*#__PURE__*/jsx(Button, {
           type: BUTTON_TYPE.SOCIAL,
           props: {
@@ -131,7 +112,7 @@ function SocialLoginList(props) {
               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",
+            btnStyle: "w3a--group w3a--relative w3a--overflow-hidden w3a--flex w3a--items-center !w3a--justify-start w3a--w-full w3a--h-11",
             buttonRadius,
             children: /*#__PURE__*/jsxs(Fragment, {
               children: [getProviderIcon(row.method, isDark, ".svg"), /*#__PURE__*/jsx("p", {
@@ -139,8 +120,8 @@ function SocialLoginList(props) {
                 children: row.name
               }), /*#__PURE__*/jsx("img", {
                 id: "login-arrow",
-                className: "w3a--icon-animation w3a--ml-auto",
-                src: getIcons(props.isDark ? "chevron-right-dark" : "chevron-right-light"),
+                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 group-hover:w3a--translate-x-0 group-hover:w3a--opacity-100",
+                src: getIcons(isDark ? "chevron-right-dark" : "chevron-right-light"),
                 alt: "arrow"
               })]
             })