@web3auth/modal 10.0.0-beta.1 → 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

@@ -63,24 +63,27 @@ class Web3Auth extends noModal.Web3AuthNoModal {
         }
       }
     });
+    _defineProperty(this, "getChainNamespaces", () => {
+      var _this$coreOptions$cha;
+      return [...new Set(((_this$coreOptions$cha = this.coreOptions.chains) === null || _this$coreOptions$cha === void 0 ? void 0 : _this$coreOptions$cha.map(x => x.chainNamespace)) || [])];
+    });
     this.options = _objectSpread({}, options);
     if (!this.options.uiConfig) this.options.uiConfig = {};
     if (this.options.modalConfig) this.modalConfig = this.options.modalConfig;
     noModal.log.info("modalConfig", this.modalConfig);
   }
-  async initModal() {
-    var _this$coreOptions$cha;
+  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();
@@ -93,7 +96,8 @@ class Web3Auth extends noModal.Web3AuthNoModal {
       connectorListener: this,
       web3authClientId: this.options.clientId,
       web3authNetwork: this.options.web3AuthNetwork,
-      chainNamespaces: [...new Set(((_this$coreOptions$cha = this.coreOptions.chains) === null || _this$coreOptions$cha === void 0 ? void 0 : _this$coreOptions$cha.map(x => x.chainNamespace)) || [])],
+      authBuildEnv: this.options.authBuildEnv,
+      chainNamespaces: this.getChainNamespaces(),
       walletRegistry: filteredWalletRegistry
     }), {
       onInitExternalWallets: this.onInitExternalWallets,
@@ -101,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");
@@ -210,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,
@@ -277,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);
@@ -325,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.
@@ -417,13 +443,21 @@ class Web3Auth extends noModal.Web3AuthNoModal {
   }
   async initExternalConnectors(externalConnectors, options) {
     const connectorsConfig = {};
+    const connectorChainNamespaceMap = {};
     // we do it like this because we don't want one slow connector to delay the load of the entire external wallet section.
     externalConnectors.forEach(async connector => {
       const connectorName = connector.name;
       noModal.log.debug("init external wallet", this.cachedConnector, connectorName, connector.status);
-      if (connector.status === noModal.CONNECTOR_STATUS.NOT_READY) {
-        // we are not initializing cached connector here as it is already being initialized in initModal before.
-        if (this.cachedConnector === connectorName) return;
+      // a wallet can support multiple chain namespaces e.g. Phantom has EvmInjected connector and WalletStandard connector.
+      if (!connectorChainNamespaceMap[connectorName]) connectorChainNamespaceMap[connectorName] = new Set();
+      if (connector.connectorNamespace === noModal.CONNECTOR_NAMESPACES.MULTICHAIN) {
+        this.getChainNamespaces().forEach(x => connectorChainNamespaceMap[connectorName].add(x));
+      } else {
+        connectorChainNamespaceMap[connectorName].add(connector.connectorNamespace);
+      }
+      // initialize connectors
+      // skip initializing cached connector here as it is already being initialized in initModal before.
+      if (connector.status === noModal.CONNECTOR_STATUS.NOT_READY && this.cachedConnector !== connectorName) {
         try {
           this.subscribeToConnectorEvents(connector);
           const initialChain = this.getInitialChainIdForConnector(connector);
@@ -431,33 +465,23 @@ class Web3Auth extends noModal.Web3AuthNoModal {
             autoConnect: this.cachedConnector === connectorName,
             chainId: initialChain.chainId
           });
-          const connectorModalConfig = this.modalConfig.connectors[connectorName];
-          connectorsConfig[connectorName] = _objectSpread(_objectSpread({}, connectorModalConfig), {}, {
-            isInjected: connector.isInjected,
-            icon: connector.icon
-          });
-          this.loginModal.addWalletLogins(connectorsConfig, {
-            showExternalWalletsOnly: !!options.showExternalWalletsOnly,
-            externalWalletsVisibility: !!options.externalWalletsVisibility,
-            externalWalletsInitialized: !!options.externalWalletsInitialized
-          });
         } catch (error) {
           noModal.log.error(error, "error while initializing connector", connectorName);
         }
-      } else {
-        if (connector.status === noModal.CONNECTOR_STATUS.READY || connector.status === noModal.CONNECTOR_STATUS.CONNECTING) {
-          // we use connecting status for wallet connect
-          const connectorModalConfig = this.modalConfig.connectors[connectorName];
-          connectorsConfig[connectorName] = _objectSpread(_objectSpread({}, connectorModalConfig), {}, {
-            isInjected: connector.isInjected,
-            icon: connector.icon
-          });
-          this.loginModal.addWalletLogins(connectorsConfig, {
-            showExternalWalletsOnly: !!options.showExternalWalletsOnly,
-            externalWalletsVisibility: !!options.externalWalletsVisibility,
-            externalWalletsInitialized: !!options.externalWalletsInitialized
-          });
-        }
+      }
+      // update connector config
+      if ([noModal.CONNECTOR_STATUS.NOT_READY, noModal.CONNECTOR_STATUS.READY, noModal.CONNECTOR_STATUS.CONNECTING].includes(connector.status)) {
+        const connectorModalConfig = this.modalConfig.connectors[connectorName];
+        connectorsConfig[connectorName] = _objectSpread(_objectSpread({}, connectorModalConfig), {}, {
+          isInjected: connector.isInjected,
+          icon: connector.icon,
+          chainNamespaces: Array.from(connectorChainNamespaceMap[connectorName])
+        });
+        this.loginModal.addWalletLogins(connectorsConfig, {
+          showExternalWalletsOnly: !!options.showExternalWalletsOnly,
+          externalWalletsVisibility: !!options.externalWalletsVisibility,
+          externalWalletsInitialized: !!options.externalWalletsInitialized
+        });
       }
     });
   }

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

@@ -14,7 +14,7 @@ function BottomSheet({
   uiConfig
 }) {
   const {
-    borderRadiusType
+    borderRadiusType = "large"
   } = uiConfig;
   return jsxRuntime.jsxs(jsxRuntime.Fragment, {
     children: [jsxRuntime.jsx("div", {
@@ -28,7 +28,7 @@ function BottomSheet({
       role: "button"
     }), jsxRuntime.jsxs("div", {
       className: utils.cn(`w3a--fixed w3a--bottom-2 w3a--left-2 w3a--mx-auto w3a--flex w3a--w-[96%] w3a--flex-col 
-      w3a--gap-y-2 w3a--rounded-3xl w3a--border w3a--border-app-gray-100 w3a--bg-app-white w3a--p-4 w3a--shadow-lg w3a--transition-transform w3a--duration-500 
+      w3a--gap-y-2 w3a--border w3a--border-app-gray-100 w3a--bg-app-white w3a--p-4 w3a--shadow-lg w3a--transition-transform w3a--duration-500 
       w3a--ease-out dark:w3a--border-app-gray-600 dark:w3a--bg-app-dark-surface-main
       ${isShown ? "w3a--translate-y-0 w3a--delay-700" : "w3a--translate-y-full"}`, {
         "w3a--rounded-[30px]": borderRadiusType === "large",
@@ -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,18 +43,21 @@ 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 w3a--h-12", {
-        "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--rounded-2xl hover:w3a--bg-app-gray-200 dark:hover:w3a--bg-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", {
         src: utils.getIcons(isDark ? `${chain.icon}-dark` : `${chain.icon}-light`),
         alt: chain.name,
         className: "w3a--size-5 w3a--object-contain"
-      }), t(chain.name)]
+      }), jsxRuntime.jsx("span", {
+        className: "first-letter:w3a--capitalize",
+        children: t(chain.name)
+      })]
     }, chain.id))
   });
 }

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--size-xl 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,7 +76,8 @@ const ConnectWalletChainNamespaceSelect = props => {
               children: displayName
             })]
           }), jsxRuntime.jsx("img", {
-            id: "external-wallet-arrow",
+            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: "",