@web3auth/modal 10.8.2 → 10.8.3

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

@@ -2,7 +2,7 @@
 
 var noModal = require('@web3auth/no-modal');
 
-const version = "10.8.2";
+const version = "10.8.3";
 const defaultConnectorsModalConfig = {
   hideWalletDiscovery: false,
   connectors: {

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

@@ -118,7 +118,6 @@ function ConnectWallet(props) {
   };
   const handleChainFilterChange = chain => {
     setSelectedChain(chain);
-    setIsShowAllWallets(false);
   };
   const filteredButtons = react.useMemo(() => {
     if (walletDiscoverySupported) {
@@ -137,6 +136,15 @@ function ConnectWallet(props) {
     if (isShowAllWallets) return totalExternalWalletsCount;
     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
+  react.useEffect(() => {
+    if (walletDiscoverySupported && totalExternalWalletsCount <= 15) {
+      setIsShowAllWallets(true);
+    } else {
+      setIsShowAllWallets(false);
+    }
+  }, [walletDiscoverySupported, selectedChain, totalExternalWalletsCount]);
   /**
    * Wallet click logic
    * - For installed wallets
@@ -261,7 +269,8 @@ function ConnectWallet(props) {
         isDark: isDark,
         deviceDetails: deviceDetails,
         walletConnectUri: walletConnectUri,
-        buttonRadius: buttonRadius
+        buttonRadius: buttonRadius,
+        isShowAllWallets: isShowAllWallets
       })]
     })]
   });

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

@@ -1,7 +1,6 @@
 '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');
@@ -114,17 +113,17 @@ function ConnectWalletList(props) {
     isDark,
     deviceDetails,
     walletConnectUri,
-    buttonRadius
+    buttonRadius,
+    isShowAllWallets
   } = props;
-  const [showMoreWallets, setShowMoreWallets] = react.useState(true);
   const onShowMoreWalletsClick = () => {
-    setShowMoreWallets(false);
     handleMoreWallets();
   };
+  const showMoreWalletsButton = !isShowAllWallets;
   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] w3a--social-container w3a--pr-2.5", {
-        "w3a--h-[328px]": !showMoreWallets
+        "w3a--h-[328px]": !showMoreWalletsButton
       }),
       children: externalButtons.length === 0 ? jsxRuntime.jsx(NoWalletsFound, {}) : jsxRuntime.jsx(WalletsFound, {
         externalButtons: externalButtons,
@@ -134,7 +133,7 @@ function ConnectWalletList(props) {
         walletConnectUri: walletConnectUri,
         buttonRadius: buttonRadius
       })
-    }), showMoreWallets && totalExternalWalletsCount > 15 && !isLoading && initialWalletCount < totalExternalWalletsCount && jsxRuntime.jsx(MoreWalletsButton, {
+    }), showMoreWalletsButton && !isLoading && initialWalletCount < totalExternalWalletsCount && jsxRuntime.jsx(MoreWalletsButton, {
       totalExternalWalletsCount: totalExternalWalletsCount,
       initialWalletCount: initialWalletCount,
       handleMoreWallets: onShowMoreWalletsClick,

package/dist/lib.cjs/types/ui/components/ConnectWallet/ConnectWalletList/ConnectWalletList.type.d.ts

@@ -14,6 +14,7 @@ export interface ConnectWalletListProps {
     buttonRadius: ButtonRadiusType;
     handleWalletClick: (button: ExternalButton) => void;
     handleMoreWallets: () => void;
+    isShowAllWallets: boolean;
 }
 export type WalletsFoundProps = Pick<ConnectWalletListProps, "externalButtons" | "isLoading" | "handleWalletClick" | "deviceDetails" | "walletConnectUri" | "buttonRadius">;
 export type MoreWalletsButtonProps = Pick<ConnectWalletListProps, "totalExternalWalletsCount" | "initialWalletCount" | "handleMoreWallets" | "isLoading" | "isDark" | "buttonRadius">;

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

@@ -1,6 +1,6 @@
 import { EVM_CONNECTORS } from '@web3auth/no-modal';
 
-const version = "10.8.2";
+const version = "10.8.3";
 const defaultConnectorsModalConfig = {
   hideWalletDiscovery: false,
   connectors: {

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

@@ -1,6 +1,6 @@
 import _objectSpread from '@babel/runtime/helpers/objectSpread2';
 import { WALLET_CONNECTORS, ANALYTICS_EVENTS, log } from '@web3auth/no-modal';
-import { useContext, useState, useMemo } from 'react';
+import { useContext, useState, useMemo, useEffect } from 'react';
 import { CONNECT_WALLET_PAGES } from '../../constants.js';
 import { AnalyticsContext } from '../../context/AnalyticsContext.js';
 import { RootContext } from '../../context/RootContext.js';
@@ -116,7 +116,6 @@ function ConnectWallet(props) {
   };
   const handleChainFilterChange = chain => {
     setSelectedChain(chain);
-    setIsShowAllWallets(false);
   };
   const filteredButtons = useMemo(() => {
     if (walletDiscoverySupported) {
@@ -136,6 +135,16 @@ function ConnectWallet(props) {
     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
@@ -263,7 +272,8 @@ function ConnectWallet(props) {
         isDark: isDark,
         deviceDetails: deviceDetails,
         walletConnectUri: walletConnectUri,
-        buttonRadius: buttonRadius
+        buttonRadius: buttonRadius,
+        isShowAllWallets: isShowAllWallets
       })]
     })]
   });

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

@@ -1,4 +1,3 @@
-import { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import i18nInstance from '../../../localeImport.js';
 import { cn, getIcons } from '../../../utils.js';
@@ -112,17 +111,17 @@ function ConnectWalletList(props) {
     isDark,
     deviceDetails,
     walletConnectUri,
-    buttonRadius
+    buttonRadius,
+    isShowAllWallets
   } = props;
-  const [showMoreWallets, setShowMoreWallets] = useState(true);
   const onShowMoreWalletsClick = () => {
-    setShowMoreWallets(false);
     handleMoreWallets();
   };
+  const showMoreWalletsButton = !isShowAllWallets;
   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] w3a--social-container w3a--pr-2.5", {
-        "w3a--h-[328px]": !showMoreWallets
+        "w3a--h-[328px]": !showMoreWalletsButton
       }),
       children: externalButtons.length === 0 ? /*#__PURE__*/jsx(NoWalletsFound, {}) : /*#__PURE__*/jsx(WalletsFound, {
         externalButtons: externalButtons,
@@ -132,7 +131,7 @@ function ConnectWalletList(props) {
         walletConnectUri: walletConnectUri,
         buttonRadius: buttonRadius
       })
-    }), showMoreWallets && totalExternalWalletsCount > 15 && !isLoading && initialWalletCount < totalExternalWalletsCount && /*#__PURE__*/jsx(MoreWalletsButton, {
+    }), showMoreWalletsButton && !isLoading && initialWalletCount < totalExternalWalletsCount && /*#__PURE__*/jsx(MoreWalletsButton, {
       totalExternalWalletsCount: totalExternalWalletsCount,
       initialWalletCount: initialWalletCount,
       handleMoreWallets: onShowMoreWalletsClick,