Merge branch 'master' into feat/connect-sign

Author: chaitanyapotti

lerna.json

@@ -1,4 +1,4 @@
 {
-  "version": "10.9.0-alpha.0",
+  "version": "10.9.1",
   "npmClient": "npm"
 }

package-lock.json

@@ -19,11 +19,11 @@
     "eslint": "^9.39.1",
     "eslint-import-resolver-typescript": "^4.4.4",
     "husky": "^9.1.7",
-    "lerna": "^9.0.0",
-    "lint-staged": "^16.2.6",
+    "lerna": "^9.0.3",
+    "lint-staged": "^16.2.7",
     "mocha": "^11.7.5",
-    "prettier": "^3.6.2",
-    "rimraf": "^6.1.0",
+    "prettier": "^3.7.3",
+    "rimraf": "^6.1.2",
     "ts-node": "^10.9.2",
     "ts-patch": "^3.3.0",
     "tsconfig-paths": "^4.2.0",
@@ -53,8 +53,8 @@
   },
   "name": "web3auth",
   "optionalDependencies": {
-    "@nx/nx-linux-x64-gnu": "^22.0.2",
-    "@rollup/rollup-linux-x64-gnu": "^4.52.5"
+    "@nx/nx-linux-x64-gnu": "^22.1.3",
+    "@rollup/rollup-linux-x64-gnu": "^4.53.3"
   },
   "private": true,
   "repository": {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@web3auth/modal",
-  "version": "10.9.0-alpha.0",
+  "version": "10.9.1",
   "description": "Multi chain wallet aggregator for web3Auth",
   "keywords": [
     "web3Auth/ui",
@@ -65,11 +65,11 @@
     "@toruslabs/eslint-config-vue": "^4.1.5",
     "@toruslabs/isomorphic-style-loader": "^5.4.0",
     "@toruslabs/vue-components": "^8.1.2",
-    "@types/react": "^19.2.2",
-    "@types/react-dom": "^19.2.2",
+    "@types/react": "^19.2.7",
+    "@types/react-dom": "^19.2.3",
     "@wagmi/core": "^2.20.1",
     "@wagmi/vue": "^0.2.2",
-    "autoprefixer": "^10.4.21",
+    "autoprefixer": "^10.4.22",
     "css-loader": "^7.1.2",
     "live-server": "^1.2.2",
     "postcss": "^8.5.6",
@@ -82,26 +82,26 @@
     "style-loader": "^4.0.0",
     "tailwindcss": "^3.4.17",
     "url-loader": "^4.1.1",
-    "viem": "^2.35.1",
-    "vue": "^3.5.24",
+    "viem": "^2.40.3",
+    "vue": "^3.5.25",
     "wagmi": "^2.16.6"
   },
   "dependencies": {
-    "@hcaptcha/react-hcaptcha": "^1.14.0",
-    "@toruslabs/base-controllers": "^8.9.0",
+    "@hcaptcha/react-hcaptcha": "^1.16.0",
+    "@toruslabs/base-controllers": "^8.10.0",
     "@toruslabs/http-helpers": "^8.1.1",
-    "@web3auth/auth": "^10.7.0",
-    "@web3auth/no-modal": "^10.9.0-alpha.0",
-    "bowser": "^2.12.1",
+    "@web3auth/auth": "^10.8.0",
+    "@web3auth/no-modal": "^10.9.0",
+    "bowser": "^2.13.1",
     "classnames": "^2.5.1",
     "clsx": "^2.1.1",
-    "color": "^5.0.2",
+    "color": "^5.0.3",
     "copy-to-clipboard": "^3.3.3",
     "deepmerge": "^4.3.1",
-    "i18next": "^25.6.1",
+    "i18next": "^25.7.1",
     "react-i18next": "^15.7.2",
     "react-qrcode-logo": "^3.0.0",
-    "tailwind-merge": "^3.3.1"
+    "tailwind-merge": "^3.4.0"
   },
   "exports": {
     ".": {

packages/modal/package.json

@@ -1,5 +1,5 @@
 import { ANALYTICS_EVENTS, type ChainNamespaceType, log, type WALLET_CONNECTOR_TYPE, WALLET_CONNECTORS } from "@web3auth/no-modal";
-import { FormEvent, useContext, useMemo, useState } from "react";
+import { FormEvent, useContext, useEffect, useMemo, useState } from "react";
 
 import { CONNECT_WALLET_PAGES } from "../../constants";
 import { AnalyticsContext } from "../../context/AnalyticsContext";
@@ -19,7 +19,7 @@ function ConnectWallet(props: ConnectWalletProps) {
     walletConnectUri,
     metamaskConnectUri,
     walletRegistry,
-    allExternalButtons,
+    allRegistryButtons,
     customConnectorButtons,
     connectorVisibilityMap,
     deviceDetails,
@@ -62,21 +62,21 @@ function ConnectWallet(props: ConnectWalletProps) {
 
   const allUniqueButtons = useMemo(() => {
     const uniqueButtonSet = new Set();
-    return customConnectorButtons.concat(allExternalButtons).filter((button) => {
+    return customConnectorButtons.concat(allRegistryButtons).filter((button) => {
       if (uniqueButtonSet.has(button.name)) return false;
       uniqueButtonSet.add(button.name);
       return true;
     });
-  }, [allExternalButtons, customConnectorButtons]);
+  }, [allRegistryButtons, customConnectorButtons]);
 
   const defaultButtonKeys = useMemo(() => new Set(Object.keys(walletRegistry.default)), [walletRegistry]);
 
   const defaultButtons = useMemo(() => {
     // display order: default injected buttons > custom adapter buttons > default non-injected buttons
     const buttons = [
-      ...allExternalButtons.filter((button) => button.hasInjectedWallet && defaultButtonKeys.has(button.name)),
+      ...allRegistryButtons.filter((button) => button.hasInjectedWallet && defaultButtonKeys.has(button.name)),
       ...customConnectorButtons,
-      ...allExternalButtons.filter((button) => !button.hasInjectedWallet && defaultButtonKeys.has(button.name)),
+      ...allRegistryButtons.filter((button) => !button.hasInjectedWallet && defaultButtonKeys.has(button.name)),
     ].sort((a, b) => {
       // favor MetaMask over other wallets
       if (a.name === WALLET_CONNECTORS.METAMASK && b.name === WALLET_CONNECTORS.METAMASK) {
@@ -101,7 +101,7 @@ function ConnectWallet(props: ConnectWalletProps) {
         return true;
       })
       .filter((button) => selectedChain === "all" || button.chainNamespaces?.includes(selectedChain as ChainNamespaceType));
-  }, [allExternalButtons, customConnectorButtons, defaultButtonKeys, selectedChain]);
+  }, [allRegistryButtons, customConnectorButtons, defaultButtonKeys, selectedChain]);
 
   const installedWalletButtons = useMemo(() => {
     const visibilityMap = connectorVisibilityMap;
@@ -126,7 +126,6 @@ function ConnectWallet(props: ConnectWalletProps) {
 
   const handleChainFilterChange = (chain: string) => {
     setSelectedChain(chain);
-    setIsShowAllWallets(false);
   };
 
   const filteredButtons = useMemo(() => {
@@ -153,6 +152,16 @@ function ConnectWallet(props: ConnectWalletProps) {
     return walletDiscoverySupported ? defaultButtons.length : installedWalletButtons.length;
   }, [walletDiscoverySupported, defaultButtons, installedWalletButtons, isShowAllWallets, totalExternalWalletsCount]);
 
+  // Automatically show all wallets if there are less than or equal to 15 wallets
+  // also resets everytime we search causing no. of wallets to change or select different chain
+  useEffect(() => {
+    if (walletDiscoverySupported && totalExternalWalletsCount <= 15) {
+      setIsShowAllWallets(true);
+    } else {
+      setIsShowAllWallets(false);
+    }
+  }, [walletDiscoverySupported, selectedChain, totalExternalWalletsCount]);
+
   /**
    * Wallet click logic
    * - For installed wallets
@@ -289,6 +298,7 @@ function ConnectWallet(props: ConnectWalletProps) {
             deviceDetails={deviceDetails}
             walletConnectUri={walletConnectUri}
             buttonRadius={buttonRadius}
+            isShowAllWallets={isShowAllWallets}
           />
         </div>
       )}

packages/modal/src/ui/components/ConnectWallet/ConnectWallet.tsx

@@ -8,7 +8,7 @@ export interface ConnectWalletProps {
   walletConnectUri: string | undefined;
   metamaskConnectUri: string | undefined;
   walletRegistry?: WalletRegistry;
-  allExternalButtons: ExternalButton[];
+  allRegistryButtons: ExternalButton[];
   customConnectorButtons: ExternalButton[];
   connectorVisibilityMap: Record<string, boolean>;
   deviceDetails: { platform: platform; browser: browser; os: os };

packages/modal/src/ui/components/ConnectWallet/ConnectWallet.type.ts

@@ -1,4 +1,3 @@
-import { useState } from "react";
 import { useTranslation } from "react-i18next";
 
 import i18n from "../../../localeImport";
@@ -114,20 +113,20 @@ function ConnectWalletList(props: ConnectWalletListProps) {
     deviceDetails,
     walletConnectUri,
     buttonRadius,
+    isShowAllWallets,
   } = props;
 
-  const [showMoreWallets, setShowMoreWallets] = useState(true);
-
   const onShowMoreWalletsClick = () => {
-    setShowMoreWallets(false);
     handleMoreWallets();
   };
 
+  const showMoreWalletsButton = !isShowAllWallets;
+
   return (
     <>
       <ul
         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,
+          "w3a--h-[328px]": !showMoreWalletsButton,
         })}
       >
         {externalButtons.length === 0 ? (
@@ -143,7 +142,7 @@ function ConnectWalletList(props: ConnectWalletListProps) {
           />
         )}
       </ul>
-      {showMoreWallets && totalExternalWalletsCount > 15 && !isLoading && initialWalletCount < totalExternalWalletsCount && (
+      {showMoreWalletsButton && !isLoading && initialWalletCount < totalExternalWalletsCount && (
         <MoreWalletsButton
           totalExternalWalletsCount={totalExternalWalletsCount}
           initialWalletCount={initialWalletCount}

packages/modal/src/ui/components/ConnectWallet/ConnectWalletList/ConnectWalletList.tsx

@@ -11,6 +11,7 @@ export interface ConnectWalletListProps {
   buttonRadius: ButtonRadiusType;
   handleWalletClick: (button: ExternalButton) => void;
   handleMoreWallets: () => void;
+  isShowAllWallets: boolean;
 }
 
 export type WalletsFoundProps = Pick<

packages/modal/src/ui/components/ConnectWallet/ConnectWalletList/ConnectWalletList.type.ts

@@ -50,6 +50,7 @@ function Login(props: LoginProps) {
     isDark,
     handleSocialLoginClick,
     totalExternalWallets,
+    remainingUndisplayedWallets,
     isEmailPasswordLessLoginVisible,
     isSmsPasswordLessLoginVisible,
     handleExternalWalletBtnClick,
@@ -509,7 +510,7 @@ function Login(props: LoginProps) {
           ))}
 
         {/* EXTERNAL WALLETS DISCOVERY */}
-        {totalExternalWallets > 3 && (
+        {remainingUndisplayedWallets > 0 && (
           <button
             type="button"
             className={cn("w3a--btn !w3a--justify-between w3a--group w3a--relative w3a--overflow-hidden", {
@@ -520,12 +521,12 @@ function Login(props: LoginProps) {
             onClick={handleConnectWallet}
           >
             <p className="w3a--text-base w3a--font-normal w3a--text-app-gray-900 dark:w3a--text-app-white">{t("modal.external.all-wallets")}</p>
-            {showExternalWalletCount && totalExternalWallets > 0 && (
+            {showExternalWalletCount && (
               <div
                 id="external-wallet-count"
                 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"
               >
-                {totalExternalWallets - 1}
+                {remainingUndisplayedWallets}
               </div>
             )}
             <img

packages/modal/src/ui/components/Login/Login.tsx

@@ -32,6 +32,7 @@ export interface LoginProps {
   isEmailPasswordLessLoginVisible: boolean;
   isSmsPasswordLessLoginVisible: boolean;
   totalExternalWallets: number;
+  remainingUndisplayedWallets: number;
   logoAlignment?: LogoAlignmentType;
   buttonRadius?: ButtonRadiusType;
   deviceDetails: { platform: platform; browser: browser; os: os };