- Adds metamask button

- Adds chainnamespace filters and select chainnamespace screen.
- Fixes multiple re render.

Author: arch1995

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

@@ -1,15 +1,18 @@
-import { WALLET_CONNECTORS } from "@web3auth/no-modal";
+import { ChainNamespaceType, WALLET_CONNECTORS } from "@web3auth/no-modal";
 import { FormEvent, useContext, useEffect, useMemo, useState } from "react";
 
 import { CONNECT_WALLET_PAGES } from "../../constants";
 import { RootContext } from "../../context/RootContext";
 import { ExternalButton } from "../../interfaces";
 import { ConnectWalletProps } from "./ConnectWallet.type";
+import ConnectWalletChainFilter from "./ConnectWalletChainFilter";
 import ConnectWalletHeader from "./ConnectWalletHeader";
 import ConnectWalletList from "./ConnectWalletList";
 import ConnectWalletQrCode from "./ConnectWalletQrCode";
 import ConnectWalletSearch from "./ConnectWalletSearch";
 
+const WALLET_LIMIT_COUNT = 10;
+
 function ConnectWallet(props: ConnectWalletProps) {
   const {
     isDark,
@@ -24,6 +27,7 @@ function ConnectWallet(props: ConnectWalletProps) {
     adapterVisibilityMap,
     deviceDetails,
     handleWalletDetailsHeight,
+    chainNamespace,
   } = props;
 
   const { bodyState, setBodyState } = useContext(RootContext);
@@ -35,7 +39,7 @@ function ConnectWallet(props: ConnectWalletProps) {
   const [selectedButton, setSelectedButton] = useState<ExternalButton>(null);
   const [walletSearch, setWalletSearch] = useState<string>("");
   const [isLoading, setIsLoading] = useState<boolean>(true);
-  // const [selectedChain, setSelectedChain] = useState<string>("all");
+  const [selectedChain, setSelectedChain] = useState<string>("all");
   const [initialWalletCount, setInitialWalletCount] = useState<number>(0);
 
   const handleBack = () => {
@@ -111,13 +115,14 @@ function ConnectWallet(props: ConnectWalletProps) {
   }, [walletDiscoverySupported, sortedButtons, visibleButtons, totalExternalWallets]);
 
   const handleWalletClick = (button: ExternalButton) => {
-    // if has injected wallet, connect to injected wallet
-    // if doesn't have wallet connect & doesn't have install links, must be a custom adapter
-    // TODO: handle multiple chain namespaces with ui
-    // TODO: fix more wallets not shown in UI + scroll issue
-    if (button.hasInjectedWallet || (!button.hasWalletConnect && !button.hasInstallLinks)) {
-      handleExternalWalletClick({ connector: button.name });
-    } else if (button.hasWalletConnect) {
+    const isInjectedConnectorAndSingleChainNamespace = button.hasInjectedWallet && button.chainNamespaces?.length === 1;
+    // if doesn't have wallet connect & doesn't have install links, must be a custom connector
+    const isCustomConnector = !button.hasInjectedWallet && !button.hasWalletConnect && !button.hasInstallLinks;
+    if (isInjectedConnectorAndSingleChainNamespace || isCustomConnector) {
+      return handleExternalWalletClick({ connector: button.name });
+    }
+
+    if (button.hasWalletConnect || !isInjectedConnectorAndSingleChainNamespace) {
       setSelectedButton(button);
       setSelectedWallet(true);
       setCurrentPage(CONNECT_WALLET_PAGES.SELECTED_WALLET);
@@ -132,11 +137,23 @@ function ConnectWallet(props: ConnectWalletProps) {
   };
 
   const handleMoreWallets = () => {
-    // setIsLoading(true);
-    setInitialWalletCount((prev) => prev + 10);
     const allButtons = [...allExternalButtons, ...customAdapterButtons];
-    const buttons = allButtons.slice(initialWalletCount, initialWalletCount + 10);
+    const buttons = allButtons.slice(initialWalletCount, initialWalletCount + WALLET_LIMIT_COUNT);
     setExternalButtons((prev) => [...prev, ...buttons]);
+    setInitialWalletCount((prev) => prev + WALLET_LIMIT_COUNT);
+  };
+
+  const handleChainFilterChange = (chain: string) => {
+    setInitialWalletCount(0);
+    setSelectedChain(chain);
+    if (chain === "all") {
+      setExternalButtons(sortedButtons.slice(0, WALLET_LIMIT_COUNT));
+      setTotalExternalWalletsCount(sortedButtons.length);
+    } else {
+      const filteredButtons = sortedButtons.filter((button) => button.chainNamespaces.includes(chain as ChainNamespaceType));
+      setExternalButtons(filteredButtons.slice(0, WALLET_LIMIT_COUNT));
+      setTotalExternalWalletsCount(filteredButtons.length);
+    }
   };
 
   return (
@@ -149,22 +166,22 @@ function ConnectWallet(props: ConnectWalletProps) {
           walletConnectUri={walletConnectUri}
           isDark={isDark}
           selectedButton={selectedButton}
-          setBodyState={setBodyState}
           bodyState={bodyState}
+          setBodyState={setBodyState}
+          handleExternalWalletClick={handleExternalWalletClick}
         />
       ) : (
         <div className="w3a--flex w3a--flex-col w3a--gap-y-2">
-          {/* TODO: To be implemented */}
-          {/* <ConnectWalletChainFilter
+          <ConnectWalletChainFilter
             isDark={isDark}
             isLoading={isLoading}
             selectedChain={selectedChain}
-            setSelectedChain={setSelectedChain}
-            chains={CHAIN_LIST}
-          /> */}
+            setSelectedChain={handleChainFilterChange}
+            chainNamespace={chainNamespace}
+          />
           {/* Search Input */}
           <ConnectWalletSearch
-            totalExternalWallets={totalExternalWalletsCount}
+            totalExternalWalletCount={totalExternalWalletsCount}
             isLoading={isLoading}
             walletSearch={walletSearch}
             handleWalletSearch={handleWalletSearch}
@@ -173,7 +190,7 @@ function ConnectWallet(props: ConnectWalletProps) {
           <ConnectWalletList
             externalButtons={externalButtons}
             isLoading={isLoading}
-            totalExternalWallets={totalExternalWalletsCount}
+            totalExternalWalletsCount={totalExternalWalletsCount}
             initialWalletCount={initialWalletCount}
             handleWalletClick={handleWalletClick}
             handleMoreWallets={handleMoreWallets}

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

@@ -1,4 +1,4 @@
-import type { BaseConnectorConfig, WalletRegistry } from "@web3auth/no-modal";
+import type { BaseConnectorConfig, ChainNamespaceType, WalletRegistry } from "@web3auth/no-modal";
 
 import type { browser, ExternalButton, os, platform } from "../../interfaces";
 
@@ -12,7 +12,8 @@ export interface ConnectWalletProps {
   customAdapterButtons: ExternalButton[];
   adapterVisibilityMap: Record<string, boolean>;
   deviceDetails: { platform: platform; browser: browser; os: os };
+  chainNamespace: ChainNamespaceType[];
   onBackClick?: (flag: boolean) => void;
-  handleExternalWalletClick: (params: { connector: string }) => void;
+  handleExternalWalletClick: (params: { connector: string; chainNamespace?: ChainNamespaceType }) => void;
   handleWalletDetailsHeight: () => void;
 }

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

@@ -1,17 +1,31 @@
-import { useId } from "react";
+import { useMemo } from "react";
 
 import { cn, getIcons } from "../../../utils";
 import { ConnectWalletChainFilterProps } from "./ConnectWalletChainFilter.type";
 
 function ConnectWalletChainFilter(props: ConnectWalletChainFilterProps) {
-  const { isDark, isLoading, selectedChain, setSelectedChain, chains } = props;
-  const uuid = useId();
+  const { isDark, isLoading, selectedChain, setSelectedChain, chainNamespace } = props;
+
+  const chains = useMemo(() => {
+    const chains = [{ id: "all", name: "All Chains", icon: "" }];
+    for (const chain of chainNamespace) {
+      chains.push({
+        id: chain,
+        name: chain === "eip155" ? "Ethereum" : chain,
+        icon: chain === "eip155" ? "ethereum" : chain,
+      });
+    }
+    return chains;
+  }, [chainNamespace]);
 
   if (isLoading) {
     return (
       <div className="w3a--flex w3a--items-center w3a--justify-between w3a--gap-x-2">
-        {Array.from({ length: chains.length }).map(() => (
-          <div key={uuid} className="w3a--h-12 w3a--w-[100px] w3a--animate-pulse w3a--rounded-2xl w3a--bg-app-gray-200 dark:w3a--bg-app-gray-700" />
+        {Array.from({ length: chains.length }).map((_, index) => (
+          <div
+            key={`chain-loader-${index}`}
+            className="w3a--h-12 w3a--w-[100px] w3a--animate-pulse w3a--rounded-2xl w3a--bg-app-gray-200 dark:w3a--bg-app-gray-700"
+          />
         ))}
       </div>
     );
@@ -31,6 +45,7 @@ function ConnectWalletChainFilter(props: ConnectWalletChainFilterProps) {
           )}
           onClick={() => setSelectedChain(chain.id)}
         >
+          {chain.id === "all" && chain.name}
           {chain.icon && <img src={getIcons(isDark ? `${chain.icon}-dark` : `${chain.icon}-light`)} alt={chain.name} />}
         </button>
       ))}

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

@@ -1,3 +1,5 @@
+import type { ChainNamespaceType } from "@web3auth/no-modal";
+
 export interface Chain {
   id: string;
   name: string;
@@ -8,6 +10,6 @@ export interface ConnectWalletChainFilterProps {
   isDark: boolean;
   isLoading: boolean;
   selectedChain: string;
+  chainNamespace: ChainNamespaceType[];
   setSelectedChain: (chain: string) => void;
-  chains: Chain[];
 }

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

@@ -51,15 +51,15 @@ function WalletsFound(props: WalletsFoundProps) {
 }
 
 function MoreWalletsButton(props: MoreWalletsButtonProps) {
-  const { totalExternalWallets, initialWalletCount, handleMoreWallets, isLoading, isDark } = props;
+  const { totalExternalWalletsCount, initialWalletCount, handleMoreWallets, isLoading, isDark } = props;
 
   const onMoreWalletsClick = () => {
     if (handleMoreWallets) {
       handleMoreWallets();
     }
   };
 
-  if (isLoading && initialWalletCount < totalExternalWallets) {
+  if (isLoading && initialWalletCount < totalExternalWalletsCount) {
     return <div className="w3a--h-12 w3a--w-full w3a--animate-pulse w3a--rounded-full w3a--bg-app-gray-200 dark:w3a--bg-app-gray-700" />;
   }
 
@@ -75,7 +75,7 @@ function MoreWalletsButton(props: MoreWalletsButtonProps) {
         className="w3a--inline-flex w3a--items-center w3a--rounded-full w3a--bg-app-primary-100 w3a--px-2 w3a--py-1 w3a--text-xs w3a--font-medium w3a--text-app-primary-800 
         dark:w3a--border dark:w3a--border-app-primary-400 dark:w3a--bg-transparent dark:w3a--text-app-primary-400"
       >
-        {totalExternalWallets - initialWalletCount}
+        {totalExternalWalletsCount - initialWalletCount}
       </span>
     </button>
   );
@@ -85,7 +85,7 @@ function ConnectWalletList(props: ConnectWalletListProps) {
   const {
     externalButtons,
     isLoading,
-    totalExternalWallets,
+    totalExternalWalletsCount,
     initialWalletCount,
     handleWalletClick,
     handleMoreWallets,
@@ -109,9 +109,9 @@ function ConnectWalletList(props: ConnectWalletListProps) {
           />
         )}
       </ul>
-      {totalExternalWallets > 15 && !isLoading && initialWalletCount < totalExternalWallets && (
+      {totalExternalWalletsCount > 15 && !isLoading && initialWalletCount < totalExternalWalletsCount && (
         <MoreWalletsButton
-          totalExternalWallets={totalExternalWallets}
+          totalExternalWalletsCount={totalExternalWalletsCount}
           initialWalletCount={initialWalletCount}
           handleMoreWallets={handleMoreWallets}
           isLoading={isLoading}

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

@@ -3,13 +3,13 @@ import { browser, ExternalButton, os, platform } from "../../../interfaces";
 export interface ConnectWalletListProps {
   externalButtons: ExternalButton[];
   isLoading: boolean;
-  totalExternalWallets: number;
+  totalExternalWalletsCount: number;
   initialWalletCount: number;
-  handleWalletClick: (button: ExternalButton) => void;
-  handleMoreWallets: () => void;
   isDark: boolean;
   deviceDetails: { platform: platform; browser: browser; os: os };
   walletConnectUri: string;
+  handleWalletClick: (button: ExternalButton) => void;
+  handleMoreWallets: () => void;
 }
 
 export type WalletsFoundProps = Pick<
@@ -19,5 +19,5 @@ export type WalletsFoundProps = Pick<
 
 export type MoreWalletsButtonProps = Pick<
   ConnectWalletListProps,
-  "totalExternalWallets" | "initialWalletCount" | "handleMoreWallets" | "isLoading" | "isDark"
+  "totalExternalWalletsCount" | "initialWalletCount" | "handleMoreWallets" | "isLoading" | "isDark"
 >;

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

@@ -6,11 +6,69 @@ import { QRCode } from "react-qrcode-logo";
 import { WALLET_CONNECT_LOGO } from "../../../interfaces";
 import i18n from "../../../localeImport";
 import Image from "../../Image";
-import { ConnectWalletQrCodeProps } from "./ConnectWalletQrCode.type";
+import { ConnectWalletQrCodeProps, SelectWalletChainNamespaceProps } from "./ConnectWalletQrCode.type";
+
+const SelectWalletChainNamespace = (props: SelectWalletChainNamespaceProps) => {
+  const { handleExternalWalletClick, selectedButton } = props;
+  const [t] = useTranslation(undefined, { i18n });
+
+  const chainNamespaces = selectedButton.chainNamespaces!.map((chainNamespace) => {
+    const imageId = chainNamespace === "eip155" ? "evm" : chainNamespace;
+    const displayName = chainNamespace === "eip155" ? "EVM" : chainNamespace;
+    return {
+      chainNamespace,
+      displayName,
+      imageId: `chain-${imageId}`,
+    };
+  });
+
+  return (
+    <div>
+      {/* Wallet image */}
+      <div className="w3a--my-6 w3a--flex w3a--justify-center">
+        <Image
+          imageId={`login-${selectedButton.name}`}
+          hoverImageId={`login-${selectedButton.name}`}
+          fallbackImageId="wallet"
+          height="100"
+          width="100"
+          isButton
+          extension={selectedButton.imgExtension}
+        />
+      </div>
+
+      {/* Description */}
+      <p className="w3a--my-6 w3a--text-center w3a--text-sm w3a--text-app-gray-500">
+        {t("modal.external.select-chain-description", { wallet: selectedButton.displayName })}
+      </p>
+
+      {/* Chain namespace buttons */}
+      <ul className="w3a--flex w3a--flex-col w3a--gap-3">
+        {chainNamespaces.map(({ chainNamespace, displayName, imageId }) => (
+          <li key={chainNamespace}>
+            <button
+              type="button"
+              className="w3a--btn w3a--size-xl w3a--w-full w3a--items-center !w3a--justify-between w3a--rounded-full"
+              onClick={() => handleExternalWalletClick({ connector: selectedButton.name, chainNamespace })}
+            >
+              <div className="w3a--flex w3a--items-center">
+                <Image imageId={imageId} hoverImageId={imageId} fallbackImageId="wallet" height="24" width="24" isButton extension="svg" />
+                <p className="w3a--ml-2 w3a--text-left w3a--text-sm first-letter:w3a--capitalize">{displayName}</p>
+              </div>
+              <span className="w3a--inline-flex w3a--items-center w3a--rounded-lg w3a--bg-app-primary-100 w3a--px-2 w3a--py-1 w3a--text-xs w3a--font-medium w3a--text-app-primary-800">
+                {t("modal.external.installed")}
+              </span>
+            </button>
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+};
 
 function ConnectWalletQrCode(props: ConnectWalletQrCodeProps) {
   const [t] = useTranslation(undefined, { i18n });
-  const { walletConnectUri, isDark, selectedButton, setBodyState, bodyState, logoImage, primaryColor } = props;
+  const { walletConnectUri, isDark, selectedButton, setBodyState, bodyState, logoImage, primaryColor, handleExternalWalletClick } = props;
 
   const isDesktop = useMemo<boolean>(() => {
     const browser = Bowser.getParser(window.navigator.userAgent);
@@ -21,7 +79,11 @@ function ConnectWalletQrCode(props: ConnectWalletQrCodeProps) {
   const whiteColor = "#FFFFFF";
   const blackColor = "#000000";
   const modalColor = getComputedStyle(root)?.getPropertyValue("--app-gray-800")?.trim() || "#1f2a37";
-  const qrColor = primaryColor.toLowerCase() === "#ffffff" ? "#000000" : primaryColor;
+  const qrColor = primaryColor && primaryColor.toLowerCase() === "#ffffff" ? "#000000" : primaryColor;
+
+  if (selectedButton.hasInjectedWallet) {
+    return <SelectWalletChainNamespace handleExternalWalletClick={handleExternalWalletClick} selectedButton={selectedButton} />;
+  }
 
   return (
     <div className="w3a--contents">

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

@@ -1,3 +1,5 @@
+import { ChainNamespaceType } from "@web3auth/no-modal";
+
 import { RootContextType } from "../../../context/RootContext";
 import { ExternalButton } from "../../../interfaces";
 
@@ -7,4 +9,7 @@ export interface ConnectWalletQrCodeProps extends RootContextType {
   selectedButton: ExternalButton;
   logoImage?: string;
   primaryColor?: string;
+  handleExternalWalletClick: (params: { connector: string; chainNamespace?: ChainNamespaceType }) => void;
 }
+
+export type SelectWalletChainNamespaceProps = Pick<ConnectWalletQrCodeProps, "handleExternalWalletClick" | "selectedButton">;