@web3auth/modal 10.9.0 → 10.9.1

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

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

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

@@ -21,7 +21,7 @@ function ConnectWallet(props) {
     walletConnectUri,
     metamaskConnectUri,
     walletRegistry,
-    allExternalButtons,
+    allRegistryButtons,
     customConnectorButtons,
     connectorVisibilityMap,
     deviceDetails,
@@ -63,16 +63,16 @@ function ConnectWallet(props) {
   }, [walletRegistry]);
   const allUniqueButtons = react.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 = 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))].sort((a, b) => {
+    const buttons = [...allRegistryButtons.filter(button => button.hasInjectedWallet && defaultButtonKeys.has(button.name)), ...customConnectorButtons, ...allRegistryButtons.filter(button => !button.hasInjectedWallet && defaultButtonKeys.has(button.name))].sort((a, b) => {
       // favor MetaMask over other wallets
       if (a.name === noModal.WALLET_CONNECTORS.METAMASK && b.name === noModal.WALLET_CONNECTORS.METAMASK) {
         // favor installed MetaMask over non-installed MetaMask
@@ -96,7 +96,7 @@ function ConnectWallet(props) {
       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]);
+  }, [allRegistryButtons, customConnectorButtons, defaultButtonKeys, selectedChain]);
   const installedWalletButtons = react.useMemo(() => {
     const visibilityMap = connectorVisibilityMap;
     return Object.keys(config).reduce((acc, localConnector) => {

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

@@ -35,6 +35,7 @@ function Login(props) {
     isDark,
     handleSocialLoginClick,
     totalExternalWallets,
+    remainingUndisplayedWallets,
     isEmailPasswordLessLoginVisible,
     isSmsPasswordLessLoginVisible,
     handleExternalWalletBtnClick,
@@ -448,7 +449,7 @@ function Login(props) {
           src: utils.getIcons(isDark ? "chevron-right-dark" : "chevron-right-light"),
           alt: "arrow"
         })]
-      }, wallet.name)), totalExternalWallets > 3 && jsxRuntime.jsxs("button", {
+      }, wallet.name)), remainingUndisplayedWallets > 0 && jsxRuntime.jsxs("button", {
         type: "button",
         className: utils.cn("w3a--btn !w3a--justify-between w3a--group w3a--relative w3a--overflow-hidden", {
           "w3a--rounded-full": buttonRadius === "pill",
@@ -459,10 +460,10 @@ function Login(props) {
         children: [jsxRuntime.jsx("p", {
           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", {
+        }), showExternalWalletCount && jsxRuntime.jsx("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",
-          children: totalExternalWallets - 1
+          children: remainingUndisplayedWallets
         }), jsxRuntime.jsx("img", {
           id: "external-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",

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

@@ -242,7 +242,7 @@ function Root(props) {
       return acc;
     }, []);
   }, [connectorVisibilityMap, chainNamespaces, config, deviceDetails.platform, isWalletConnectConnectorIncluded]);
-  const allButtons = react.useMemo(() => {
+  const allRegistryButtons = react.useMemo(() => {
     return [...generateWalletButtons(walletRegistry.default), ...generateWalletButtons(walletRegistry.others)];
   }, [generateWalletButtons, walletRegistry.default, walletRegistry.others]);
   const installedConnectorButtons = react.useMemo(() => {
@@ -265,7 +265,7 @@ function Root(props) {
     const metamaskConnectorIdx = installedConnectors.findIndex(x => x.name === noModal.WALLET_CONNECTORS.METAMASK && !x.hasInjectedWallet);
     if (metamaskConnectorIdx !== -1) {
       const metamaskConnector = installedConnectors[metamaskConnectorIdx];
-      let metamaskRegistryButton = allButtons.find(button => button.name === noModal.WALLET_CONNECTORS.METAMASK);
+      let metamaskRegistryButton = allRegistryButtons.find(button => button.name === noModal.WALLET_CONNECTORS.METAMASK);
       if (!metamaskRegistryButton) {
         // use the default metamask registry item if it's not in the registry
         metamaskRegistryButton = generateWalletButtons({
@@ -282,7 +282,7 @@ function Root(props) {
     }
     // make metamask the first button and limit the number of buttons
     return installedConnectors;
-  }, [allButtons, config, connectorVisibilityMap, generateWalletButtons]);
+  }, [allRegistryButtons, config, connectorVisibilityMap, generateWalletButtons]);
   const customConnectorButtons = react.useMemo(() => {
     return installedConnectorButtons.filter(button => !button.hasInjectedWallet);
   }, [installedConnectorButtons]);
@@ -291,14 +291,19 @@ function Root(props) {
     // make metamask the first button and limit the number of buttons
     return installedConnectorButtons.sort((a, _) => a.name === noModal.WALLET_CONNECTORS.METAMASK ? -1 : 1).slice(0, displayInstalledExternalWallets ? MAX_TOP_INSTALLED_CONNECTORS : 1);
   }, [installedConnectorButtons, displayInstalledExternalWallets]);
-  const totalExternalWallets = react.useMemo(() => {
-    const uniqueWalletSet = new Set();
-    return allButtons.concat(installedConnectorButtons).filter(button => {
-      if (uniqueWalletSet.has(button.name)) return false;
-      uniqueWalletSet.add(button.name);
+  const allExternalWallets = react.useMemo(() => {
+    const uniqueButtonSet = new Set();
+    return installedConnectorButtons.concat(allRegistryButtons).filter(button => {
+      if (uniqueButtonSet.has(button.name)) return false;
+      uniqueButtonSet.add(button.name);
       return true;
+    });
+  }, [allRegistryButtons, installedConnectorButtons]);
+  const remainingUndisplayedWallets = react.useMemo(() => {
+    return allExternalWallets.filter(button => {
+      return !topInstalledConnectorButtons.includes(button);
     }).length;
-  }, [allButtons, installedConnectorButtons]);
+  }, [allExternalWallets, topInstalledConnectorButtons]);
   const handleSocialLoginHeight = () => {
     setIsSocialLoginsExpanded(prev => !prev);
   };
@@ -409,7 +414,8 @@ function Root(props) {
                 installedExternalWalletConfig: topInstalledConnectorButtons,
                 isEmailPasswordLessLoginVisible: isEmailPasswordLessLoginVisible,
                 isSmsPasswordLessLoginVisible: isSmsPasswordLessLoginVisible,
-                totalExternalWallets: totalExternalWallets,
+                totalExternalWallets: allExternalWallets.length,
+                remainingUndisplayedWallets: remainingUndisplayedWallets,
                 logoAlignment: logoAlignment,
                 buttonRadius: buttonRadiusType,
                 deviceDetails: deviceDetails,
@@ -423,7 +429,7 @@ function Root(props) {
                 metamaskConnectUri: modalState.metamaskConnectUri,
                 config: modalState.externalWalletsConfig,
                 walletRegistry: walletRegistry,
-                allExternalButtons: allButtons,
+                allRegistryButtons: allRegistryButtons,
                 connectorVisibilityMap: connectorVisibilityMap,
                 customConnectorButtons: customConnectorButtons,
                 deviceDetails: deviceDetails,

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

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

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

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

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

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

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

@@ -19,7 +19,7 @@ function ConnectWallet(props) {
     walletConnectUri,
     metamaskConnectUri,
     walletRegistry,
-    allExternalButtons,
+    allRegistryButtons,
     customConnectorButtons,
     connectorVisibilityMap,
     deviceDetails,
@@ -61,16 +61,16 @@ function ConnectWallet(props) {
   }, [walletRegistry]);
   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)), ...customConnectorButtons, ...allExternalButtons.filter(button => !button.hasInjectedWallet && defaultButtonKeys.has(button.name))].sort((a, b) => {
+    const buttons = [...allRegistryButtons.filter(button => button.hasInjectedWallet && defaultButtonKeys.has(button.name)), ...customConnectorButtons, ...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) {
         // favor installed MetaMask over non-installed MetaMask
@@ -94,7 +94,7 @@ function ConnectWallet(props) {
       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]);
+  }, [allRegistryButtons, customConnectorButtons, defaultButtonKeys, selectedChain]);
   const installedWalletButtons = useMemo(() => {
     const visibilityMap = connectorVisibilityMap;
     return Object.keys(config).reduce((acc, localConnector) => {

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

@@ -33,6 +33,7 @@ function Login(props) {
     isDark,
     handleSocialLoginClick,
     totalExternalWallets,
+    remainingUndisplayedWallets,
     isEmailPasswordLessLoginVisible,
     isSmsPasswordLessLoginVisible,
     handleExternalWalletBtnClick,
@@ -451,7 +452,7 @@ function Login(props) {
           src: getIcons(isDark ? "chevron-right-dark" : "chevron-right-light"),
           alt: "arrow"
         })]
-      }, wallet.name)), totalExternalWallets > 3 && /*#__PURE__*/jsxs("button", {
+      }, wallet.name)), remainingUndisplayedWallets > 0 && /*#__PURE__*/jsxs("button", {
         type: "button",
         className: cn("w3a--btn !w3a--justify-between w3a--group w3a--relative w3a--overflow-hidden", {
           "w3a--rounded-full": buttonRadius === "pill",
@@ -462,10 +463,10 @@ function Login(props) {
         children: [/*#__PURE__*/jsx("p", {
           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", {
+        }), showExternalWalletCount && /*#__PURE__*/jsx("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",
-          children: totalExternalWallets - 1
+          children: remainingUndisplayedWallets
         }), /*#__PURE__*/jsx("img", {
           id: "external-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",

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

@@ -243,7 +243,7 @@ function Root(props) {
       return acc;
     }, []);
   }, [connectorVisibilityMap, chainNamespaces, config, deviceDetails.platform, isWalletConnectConnectorIncluded]);
-  const allButtons = useMemo(() => {
+  const allRegistryButtons = useMemo(() => {
     return [...generateWalletButtons(walletRegistry.default), ...generateWalletButtons(walletRegistry.others)];
   }, [generateWalletButtons, walletRegistry.default, walletRegistry.others]);
   const installedConnectorButtons = useMemo(() => {
@@ -267,7 +267,7 @@ function Root(props) {
     const metamaskConnectorIdx = installedConnectors.findIndex(x => x.name === WALLET_CONNECTORS.METAMASK && !x.hasInjectedWallet);
     if (metamaskConnectorIdx !== -1) {
       const metamaskConnector = installedConnectors[metamaskConnectorIdx];
-      let metamaskRegistryButton = allButtons.find(button => button.name === WALLET_CONNECTORS.METAMASK);
+      let metamaskRegistryButton = allRegistryButtons.find(button => button.name === WALLET_CONNECTORS.METAMASK);
       if (!metamaskRegistryButton) {
         // use the default metamask registry item if it's not in the registry
         metamaskRegistryButton = generateWalletButtons({
@@ -285,7 +285,7 @@ function Root(props) {
 
     // make metamask the first button and limit the number of buttons
     return installedConnectors;
-  }, [allButtons, config, connectorVisibilityMap, generateWalletButtons]);
+  }, [allRegistryButtons, config, connectorVisibilityMap, generateWalletButtons]);
   const customConnectorButtons = useMemo(() => {
     return installedConnectorButtons.filter(button => !button.hasInjectedWallet);
   }, [installedConnectorButtons]);
@@ -295,14 +295,19 @@ function Root(props) {
     // make metamask the first button and limit the number of buttons
     return installedConnectorButtons.sort((a, _) => a.name === WALLET_CONNECTORS.METAMASK ? -1 : 1).slice(0, displayInstalledExternalWallets ? MAX_TOP_INSTALLED_CONNECTORS : 1);
   }, [installedConnectorButtons, displayInstalledExternalWallets]);
-  const totalExternalWallets = useMemo(() => {
-    const uniqueWalletSet = new Set();
-    return allButtons.concat(installedConnectorButtons).filter(button => {
-      if (uniqueWalletSet.has(button.name)) return false;
-      uniqueWalletSet.add(button.name);
+  const allExternalWallets = useMemo(() => {
+    const uniqueButtonSet = new Set();
+    return installedConnectorButtons.concat(allRegistryButtons).filter(button => {
+      if (uniqueButtonSet.has(button.name)) return false;
+      uniqueButtonSet.add(button.name);
       return true;
+    });
+  }, [allRegistryButtons, installedConnectorButtons]);
+  const remainingUndisplayedWallets = useMemo(() => {
+    return allExternalWallets.filter(button => {
+      return !topInstalledConnectorButtons.includes(button);
     }).length;
-  }, [allButtons, installedConnectorButtons]);
+  }, [allExternalWallets, topInstalledConnectorButtons]);
   const handleSocialLoginHeight = () => {
     setIsSocialLoginsExpanded(prev => !prev);
   };
@@ -420,7 +425,8 @@ function Root(props) {
                 installedExternalWalletConfig: topInstalledConnectorButtons,
                 isEmailPasswordLessLoginVisible: isEmailPasswordLessLoginVisible,
                 isSmsPasswordLessLoginVisible: isSmsPasswordLessLoginVisible,
-                totalExternalWallets: totalExternalWallets,
+                totalExternalWallets: allExternalWallets.length,
+                remainingUndisplayedWallets: remainingUndisplayedWallets,
                 logoAlignment: logoAlignment,
                 buttonRadius: buttonRadiusType,
                 deviceDetails: deviceDetails,
@@ -434,7 +440,7 @@ function Root(props) {
                 metamaskConnectUri: modalState.metamaskConnectUri,
                 config: modalState.externalWalletsConfig,
                 walletRegistry: walletRegistry,
-                allExternalButtons: allButtons,
+                allRegistryButtons: allRegistryButtons,
                 connectorVisibilityMap: connectorVisibilityMap,
                 customConnectorButtons: customConnectorButtons,
                 deviceDetails: deviceDetails,