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

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

@@ -63,13 +63,16 @@ 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;
     super.checkInitRequirements();
     // get project config and wallet registry
     const {
@@ -93,7 +96,7 @@ 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)) || [])],
+      chainNamespaces: this.getChainNamespaces(),
       walletRegistry: filteredWalletRegistry
     }), {
       onInitExternalWallets: this.onInitExternalWallets,
@@ -417,13 +420,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 +442,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/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",

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

@@ -46,15 +46,18 @@ function ConnectWalletChainFilter(props) {
     className: "w3a--flex w3a--items-center w3a--justify-items-start w3a--gap-x-2",
     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--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--bg-app-gray-100 dark:w3a--bg-app-gray-800 w3a--border w3a--border-app-gray-200 dark:w3a--border-app-gray-700 w3a--text-app-gray-900 dark:w3a--text-app-white": 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-external-wallet-btn w3a--h-12 w3a--w-full w3a--items-center !w3a--justify-between w3a--rounded-full",
           onClick: () => handleExternalWalletClick({
             connector: wallet.name,
             chainNamespace
@@ -77,6 +77,7 @@ const ConnectWalletChainNamespaceSelect = props => {
             })]
           }), jsxRuntime.jsx("img", {
             id: "external-wallet-arrow",
+            className: "w3a--icon-animation",
             src: utils.getIcons(isDark ? "chevron-right-dark" : "chevron-right-light"),
             alt: "arrow"
           })]

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

@@ -224,20 +224,22 @@ function Root(props) {
         const deepLink = walletRegistryItem === null || walletRegistryItem === void 0 || (_walletRegistryItem$m2 = walletRegistryItem.mobile) === null || _walletRegistryItem$m2 === void 0 ? void 0 : _walletRegistryItem$m2.native;
         href = universalLink || deepLink;
       }
+      // determine the chain namespaces supported by the wallet
+      const connectorConfig = config[wallet];
+      const connectorChainNamespaces = (connectorConfig === null || connectorConfig === void 0 ? void 0 : connectorConfig.chainNamespaces) || [];
       const registryNamespaces = new Set((_walletRegistryItem$c = walletRegistryItem.chains) === null || _walletRegistryItem$c === void 0 ? void 0 : _walletRegistryItem$c.map(chain => chain.split(":")[0]));
       const injectedChainNamespaces = new Set((_walletRegistryItem$i = walletRegistryItem.injected) === null || _walletRegistryItem$i === void 0 ? void 0 : _walletRegistryItem$i.map(injected => injected.namespace));
-      const availableChainNamespaces = chainNamespaces.filter(x => registryNamespaces.has(x) || injectedChainNamespaces.has(x));
-      const connector = config[wallet];
+      const availableChainNamespaces = chainNamespaces.filter(x => registryNamespaces.has(x) || injectedChainNamespaces.has(x) || connectorChainNamespaces.includes(x));
       const button = {
         name: wallet,
         displayName: walletRegistryItem.name,
         href,
-        hasInjectedWallet: (connector === null || connector === void 0 ? void 0 : connector.isInjected) || false,
+        hasInjectedWallet: (connectorConfig === null || connectorConfig === void 0 ? void 0 : connectorConfig.isInjected) || false,
         hasWalletConnect: isWalletConnectConnectorIncluded && ((_walletRegistryItem$w = walletRegistryItem.walletConnect) === null || _walletRegistryItem$w === void 0 || (_walletRegistryItem$w = _walletRegistryItem$w.sdks) === null || _walletRegistryItem$w === void 0 ? void 0 : _walletRegistryItem$w.includes("sign_v2")),
         hasInstallLinks: Object.keys(walletRegistryItem.app || {}).length > 0,
         walletRegistryItem,
         imgExtension: walletRegistryItem.imgExtension || "svg",
-        icon: connector === null || connector === void 0 ? void 0 : connector.icon,
+        icon: connectorConfig === null || connectorConfig === void 0 ? void 0 : connectorConfig.icon,
         chainNamespaces: availableChainNamespaces
       };
       if (!button.hasInjectedWallet && !button.hasWalletConnect && !button.hasInstallLinks) return acc;
@@ -248,28 +250,22 @@ function Root(props) {
   }, [connectorVisibilityMap, chainNamespaces, config, deviceDetails.platform, isWalletConnectConnectorIncluded]);
   const installedConnectorButtons = react.useMemo(() => {
     const installedConnectors = Object.keys(config).reduce((acc, connector) => {
-      var _walletRegistryItem$c2, _walletRegistryItem$i2, _config$connector, _config$connector2;
       if ([noModal.WALLET_CONNECTORS.WALLET_CONNECT_V2].includes(connector) || !connectorVisibilityMap[connector]) return acc;
-      // determine chain namespaces based on wallet registry
-      const walletRegistryItem = walletRegistry.default[connector];
-      const registryNamespaces = new Set(walletRegistryItem === null || walletRegistryItem === void 0 || (_walletRegistryItem$c2 = walletRegistryItem.chains) === null || _walletRegistryItem$c2 === void 0 ? void 0 : _walletRegistryItem$c2.map(chain => chain.split(":")[0]));
-      const injectedChainNamespaces = new Set(walletRegistryItem === null || walletRegistryItem === void 0 || (_walletRegistryItem$i2 = walletRegistryItem.injected) === null || _walletRegistryItem$i2 === void 0 ? void 0 : _walletRegistryItem$i2.map(injected => injected.namespace));
-      const availableChainNamespaces = chainNamespaces.filter(x => registryNamespaces.has(x) || injectedChainNamespaces.has(x));
+      const connectorConfig = config[connector];
       acc.push({
         name: connector,
-        displayName: config[connector].label || connector,
-        hasInjectedWallet: ((_config$connector = config[connector]) === null || _config$connector === void 0 ? void 0 : _config$connector.isInjected) || false,
+        displayName: (connectorConfig === null || connectorConfig === void 0 ? void 0 : connectorConfig.label) || connector,
+        hasInjectedWallet: (connectorConfig === null || connectorConfig === void 0 ? void 0 : connectorConfig.isInjected) || false,
         hasWalletConnect: false,
         hasInstallLinks: false,
-        walletRegistryItem,
-        icon: (_config$connector2 = config[connector]) === null || _config$connector2 === void 0 ? void 0 : _config$connector2.icon,
-        chainNamespaces: availableChainNamespaces
+        icon: connectorConfig === null || connectorConfig === void 0 ? void 0 : connectorConfig.icon,
+        chainNamespaces: (connectorConfig === null || connectorConfig === void 0 ? void 0 : connectorConfig.chainNamespaces) || []
       });
       return acc;
     }, []);
     // make metamask the first button and limit the number of buttons
     return installedConnectors;
-  }, [config, connectorVisibilityMap, walletRegistry.default, chainNamespaces]);
+  }, [config, connectorVisibilityMap]);
   const customConnectorButtons = react.useMemo(() => {
     return installedConnectorButtons.filter(button => !button.hasInjectedWallet);
   }, [installedConnectorButtons]);
@@ -331,7 +327,7 @@ function Root(props) {
     }
     // Default
     return "539px";
-  }, [isWalletDetailsExpanded, modalState.currentPage, isSocialLoginsExpanded, installedConnectorButtons, privacyPolicy, tncLink, enableMainSocialLoginButton, modalState.status]);
+  }, [privacyPolicy, tncLink, enableMainSocialLoginButton, modalState.status, modalState.currentPage, isWalletDetailsExpanded, isSocialLoginsExpanded, topInstalledConnectorButtons.length]);
   const contextValue = react.useMemo(() => ({
     bodyState,
     setBodyState,

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

@@ -61,7 +61,9 @@ function Widget(props) {
     stateListener.on("STATE_UPDATED", newModalState => {
       noModal.log.debug("state updated", newModalState);
       setModalState(prevState => {
-        const mergedState = noModal.cloneDeep(deepmerge(prevState, newModalState));
+        const mergedState = noModal.cloneDeep(deepmerge(prevState, newModalState, {
+          arrayMerge: (_prevState, newState) => newState
+        }));
         return mergedState;
       });
     });

package/dist/lib.cjs/types/interface.d.ts

@@ -1,5 +1,5 @@
 import type { BaseConnectorConfig, IProvider, IWeb3Auth, LoginMethodConfig, WALLET_CONNECTOR_TYPE } from "@web3auth/no-modal";
-export interface ModalConfig extends Omit<BaseConnectorConfig, "isInjected"> {
+export interface ModalConfig extends Omit<BaseConnectorConfig, "isInjected" | "chainNamespaces"> {
     loginMethods?: LoginMethodConfig;
 }
 export interface ConnectorsModalConfig {

package/dist/lib.cjs/types/modalManager.d.ts

@@ -29,4 +29,5 @@ export declare class Web3Auth extends Web3AuthNoModal implements IWeb3AuthModal
     private onSocialLogin;
     private onExternalWalletLogin;
     private onModalVisibility;
+    private getChainNamespaces;
 }

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

@@ -1,6 +1,6 @@
 import _objectSpread from '@babel/runtime/helpers/objectSpread2';
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
-import { Web3AuthNoModal, cloneDeep, WALLET_CONNECTORS, log, CONNECTOR_STATUS, CONNECTOR_EVENTS, WalletInitializationError, fetchProjectConfig, fetchWalletRegistry, CONNECTOR_CATEGORY, CONNECTOR_NAMES } from '@web3auth/no-modal';
+import { Web3AuthNoModal, cloneDeep, WALLET_CONNECTORS, log, CONNECTOR_STATUS, CONNECTOR_EVENTS, WalletInitializationError, fetchProjectConfig, fetchWalletRegistry, CONNECTOR_CATEGORY, CONNECTOR_NAMES, CONNECTOR_NAMESPACES } from '@web3auth/no-modal';
 import deepmerge from 'deepmerge';
 import { defaultConnectorsModalConfig, walletRegistryUrl } from './config.js';
 import { AUTH_PROVIDERS_NAMES, AUTH_PROVIDERS, capitalizeFirstLetter } from './ui/config.js';
@@ -62,13 +62,16 @@ class Web3Auth extends 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;
     log.info("modalConfig", this.modalConfig);
   }
   async initModal() {
-    var _this$coreOptions$cha;
     super.checkInitRequirements();
     // get project config and wallet registry
     const {
@@ -94,7 +97,7 @@ class Web3Auth extends 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)) || [])],
+      chainNamespaces: this.getChainNamespaces(),
       walletRegistry: filteredWalletRegistry
     }), {
       onInitExternalWallets: this.onInitExternalWallets,
@@ -437,13 +440,24 @@ class Web3Auth extends 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;
       log.debug("init external wallet", this.cachedConnector, connectorName, connector.status);
-      if (connector.status === 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 === 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 === CONNECTOR_STATUS.NOT_READY && this.cachedConnector !== connectorName) {
         try {
           this.subscribeToConnectorEvents(connector);
           const initialChain = this.getInitialChainIdForConnector(connector);
@@ -451,33 +465,24 @@ class Web3Auth extends 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) {
           log.error(error, "error while initializing connector", connectorName);
         }
-      } else {
-        if (connector.status === CONNECTOR_STATUS.READY || connector.status === 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 ([CONNECTOR_STATUS.NOT_READY, CONNECTOR_STATUS.READY, 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.esm/packages/modal/src/ui/components/BottomSheet/BottomSheet.js

@@ -12,7 +12,7 @@ function BottomSheet({
   uiConfig
 }) {
   const {
-    borderRadiusType
+    borderRadiusType = "large"
   } = uiConfig;
   return /*#__PURE__*/jsxs(Fragment, {
     children: [/*#__PURE__*/jsx("div", {
@@ -26,7 +26,7 @@ function BottomSheet({
       role: "button"
     }), /*#__PURE__*/jsxs("div", {
       className: 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",

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

@@ -44,15 +44,18 @@ function ConnectWalletChainFilter(props) {
     className: "w3a--flex w3a--items-center w3a--justify-items-start w3a--gap-x-2",
     children: chains.map(chain => /*#__PURE__*/jsxs("button", {
       type: "button",
-      className: 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: 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 hover:w3a--bg-app-gray-200 dark:hover:w3a--bg-app-gray-700 w3a--h-12 w3a--rounded-2xl", {
+        "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--text-app-gray-900 dark:w3a--text-app-white": selectedChain === chain.id
       }),
       onClick: () => setSelectedChain(chain.id),
       children: [chain.icon && /*#__PURE__*/jsx("img", {
         src: getIcons(isDark ? `${chain.icon}-dark` : `${chain.icon}-light`),
         alt: chain.name,
         className: "w3a--size-5 w3a--object-contain"
-      }), t(chain.name)]
+      }), /*#__PURE__*/jsx("span", {
+        className: "first-letter:w3a--capitalize",
+        children: t(chain.name)
+      })]
     }, chain.id))
   });
 }

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

@@ -54,7 +54,7 @@ const ConnectWalletChainNamespaceSelect = props => {
       }) => /*#__PURE__*/jsx("li", {
         children: /*#__PURE__*/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-external-wallet-btn w3a--h-12 w3a--w-full w3a--items-center !w3a--justify-between w3a--rounded-full",
           onClick: () => handleExternalWalletClick({
             connector: wallet.name,
             chainNamespace
@@ -75,6 +75,7 @@ const ConnectWalletChainNamespaceSelect = props => {
             })]
           }), /*#__PURE__*/jsx("img", {
             id: "external-wallet-arrow",
+            className: "w3a--icon-animation",
             src: getIcons(isDark ? "chevron-right-dark" : "chevron-right-light"),
             alt: "arrow"
           })]

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

@@ -225,20 +225,23 @@ function Root(props) {
         const deepLink = walletRegistryItem === null || walletRegistryItem === void 0 || (_walletRegistryItem$m2 = walletRegistryItem.mobile) === null || _walletRegistryItem$m2 === void 0 ? void 0 : _walletRegistryItem$m2.native;
         href = universalLink || deepLink;
       }
+
+      // determine the chain namespaces supported by the wallet
+      const connectorConfig = config[wallet];
+      const connectorChainNamespaces = (connectorConfig === null || connectorConfig === void 0 ? void 0 : connectorConfig.chainNamespaces) || [];
       const registryNamespaces = new Set((_walletRegistryItem$c = walletRegistryItem.chains) === null || _walletRegistryItem$c === void 0 ? void 0 : _walletRegistryItem$c.map(chain => chain.split(":")[0]));
       const injectedChainNamespaces = new Set((_walletRegistryItem$i = walletRegistryItem.injected) === null || _walletRegistryItem$i === void 0 ? void 0 : _walletRegistryItem$i.map(injected => injected.namespace));
-      const availableChainNamespaces = chainNamespaces.filter(x => registryNamespaces.has(x) || injectedChainNamespaces.has(x));
-      const connector = config[wallet];
+      const availableChainNamespaces = chainNamespaces.filter(x => registryNamespaces.has(x) || injectedChainNamespaces.has(x) || connectorChainNamespaces.includes(x));
       const button = {
         name: wallet,
         displayName: walletRegistryItem.name,
         href,
-        hasInjectedWallet: (connector === null || connector === void 0 ? void 0 : connector.isInjected) || false,
+        hasInjectedWallet: (connectorConfig === null || connectorConfig === void 0 ? void 0 : connectorConfig.isInjected) || false,
         hasWalletConnect: isWalletConnectConnectorIncluded && ((_walletRegistryItem$w = walletRegistryItem.walletConnect) === null || _walletRegistryItem$w === void 0 || (_walletRegistryItem$w = _walletRegistryItem$w.sdks) === null || _walletRegistryItem$w === void 0 ? void 0 : _walletRegistryItem$w.includes("sign_v2")),
         hasInstallLinks: Object.keys(walletRegistryItem.app || {}).length > 0,
         walletRegistryItem,
         imgExtension: walletRegistryItem.imgExtension || "svg",
-        icon: connector === null || connector === void 0 ? void 0 : connector.icon,
+        icon: connectorConfig === null || connectorConfig === void 0 ? void 0 : connectorConfig.icon,
         chainNamespaces: availableChainNamespaces
       };
       if (!button.hasInjectedWallet && !button.hasWalletConnect && !button.hasInstallLinks) return acc;
@@ -249,30 +252,23 @@ function Root(props) {
   }, [connectorVisibilityMap, chainNamespaces, config, deviceDetails.platform, isWalletConnectConnectorIncluded]);
   const installedConnectorButtons = useMemo(() => {
     const installedConnectors = Object.keys(config).reduce((acc, connector) => {
-      var _walletRegistryItem$c2, _walletRegistryItem$i2, _config$connector, _config$connector2;
       if ([WALLET_CONNECTORS.WALLET_CONNECT_V2].includes(connector) || !connectorVisibilityMap[connector]) return acc;
-
-      // determine chain namespaces based on wallet registry
-      const walletRegistryItem = walletRegistry.default[connector];
-      const registryNamespaces = new Set(walletRegistryItem === null || walletRegistryItem === void 0 || (_walletRegistryItem$c2 = walletRegistryItem.chains) === null || _walletRegistryItem$c2 === void 0 ? void 0 : _walletRegistryItem$c2.map(chain => chain.split(":")[0]));
-      const injectedChainNamespaces = new Set(walletRegistryItem === null || walletRegistryItem === void 0 || (_walletRegistryItem$i2 = walletRegistryItem.injected) === null || _walletRegistryItem$i2 === void 0 ? void 0 : _walletRegistryItem$i2.map(injected => injected.namespace));
-      const availableChainNamespaces = chainNamespaces.filter(x => registryNamespaces.has(x) || injectedChainNamespaces.has(x));
+      const connectorConfig = config[connector];
       acc.push({
         name: connector,
-        displayName: config[connector].label || connector,
-        hasInjectedWallet: ((_config$connector = config[connector]) === null || _config$connector === void 0 ? void 0 : _config$connector.isInjected) || false,
+        displayName: (connectorConfig === null || connectorConfig === void 0 ? void 0 : connectorConfig.label) || connector,
+        hasInjectedWallet: (connectorConfig === null || connectorConfig === void 0 ? void 0 : connectorConfig.isInjected) || false,
         hasWalletConnect: false,
         hasInstallLinks: false,
-        walletRegistryItem,
-        icon: (_config$connector2 = config[connector]) === null || _config$connector2 === void 0 ? void 0 : _config$connector2.icon,
-        chainNamespaces: availableChainNamespaces
+        icon: connectorConfig === null || connectorConfig === void 0 ? void 0 : connectorConfig.icon,
+        chainNamespaces: (connectorConfig === null || connectorConfig === void 0 ? void 0 : connectorConfig.chainNamespaces) || []
       });
       return acc;
     }, []);
 
     // make metamask the first button and limit the number of buttons
     return installedConnectors;
-  }, [config, connectorVisibilityMap, walletRegistry.default, chainNamespaces]);
+  }, [config, connectorVisibilityMap]);
   const customConnectorButtons = useMemo(() => {
     return installedConnectorButtons.filter(button => !button.hasInjectedWallet);
   }, [installedConnectorButtons]);
@@ -341,7 +337,7 @@ function Root(props) {
     }
     // Default
     return "539px";
-  }, [isWalletDetailsExpanded, modalState.currentPage, isSocialLoginsExpanded, installedConnectorButtons, privacyPolicy, tncLink, enableMainSocialLoginButton, modalState.status]);
+  }, [privacyPolicy, tncLink, enableMainSocialLoginButton, modalState.status, modalState.currentPage, isWalletDetailsExpanded, isSocialLoginsExpanded, topInstalledConnectorButtons.length]);
   const contextValue = useMemo(() => ({
     bodyState,
     setBodyState,

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

@@ -59,7 +59,9 @@ function Widget(props) {
     stateListener.on("STATE_UPDATED", newModalState => {
       log.debug("state updated", newModalState);
       setModalState(prevState => {
-        const mergedState = cloneDeep(deepmerge(prevState, newModalState));
+        const mergedState = cloneDeep(deepmerge(prevState, newModalState, {
+          arrayMerge: (_prevState, newState) => newState
+        }));
         return mergedState;
       });
     });