Improved Multi Network Selector component (#4953)

Fixes: DASH-298

Its _blazingly fast_

![image.png](https://graphite-user-uploaded-assets-prod.s3.amazonaws.com/yNOf1svJ8o3zjO7zQouZ/bf448bb9-716e-4c47-8930-0e75e5d32905.png)

<!-- start pr-codex -->

---

## PR-Codex overview
This PR focuses on refactoring the `NetworkDropdown` component into a new `MultiNetworkSelector` component, enhancing the multi-selection capabilities for network options while improving the overall code structure and functionality.

### Detailed summary
- Renamed `NetworkDropdown` to `MultiNetworkSelector` for multi-selection functionality.
- Updated `NetworksFieldset` and `AccountAbstractionSettingsPage` to utilize `MultiNetworkSelector`.
- Enhanced `MultiSelect` component with a `searchPlaceholder` prop and improved search functionality.
- Added `overrideSearchFn` and `renderOption` props to `MultiSelect` for customizable option rendering.
- Introduced `data-scrollable` attribute in `ScrollShadow` for better scrolling behavior.
- Improved styling and layout adjustments in various components.

> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`

<!-- end pr-codex -->

Author: MananTank

apps/dashboard/src/@/components/blocks/multi-select.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable no-restricted-syntax */
 "use client";
 
 import { Button } from "@/components/ui/button";
@@ -9,7 +10,14 @@ import {
 import { Separator } from "@/components/ui/separator";
 import { cn } from "@/lib/utils";
 import { CheckIcon, ChevronDown, SearchIcon, XIcon } from "lucide-react";
-import * as React from "react";
+import {
+  forwardRef,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
 import { useShowMore } from "../../lib/useShowMore";
 import { ScrollShadow } from "../ui/ScrollShadow/ScrollShadow";
 import { Input } from "../ui/input";
@@ -24,6 +32,7 @@ interface MultiSelectProps
   selectedValues: string[];
   onSelectedValuesChange: (value: string[]) => void;
   placeholder: string;
+  searchPlaceholder?: string;
 
   /**
    * Maximum number of items to display. Extra selected items will be summarized.
@@ -32,12 +41,16 @@ interface MultiSelectProps
   maxCount?: number;
 
   className?: string;
+
+  overrideSearchFn?: (
+    option: { value: string; label: string },
+    searchTerm: string,
+  ) => boolean;
+
+  renderOption?: (option: { value: string; label: string }) => React.ReactNode;
 }
 
-export const MultiSelect = React.forwardRef<
-  HTMLButtonElement,
-  MultiSelectProps
->(
+export const MultiSelect = forwardRef<HTMLButtonElement, MultiSelectProps>(
   (
     {
       options,
@@ -50,10 +63,10 @@ export const MultiSelect = React.forwardRef<
     },
     ref,
   ) => {
-    const [isPopoverOpen, setIsPopoverOpen] = React.useState(false);
-    const [searchValue, setSearchValue] = React.useState("");
+    const [isPopoverOpen, setIsPopoverOpen] = useState(false);
+    const [searchValue, setSearchValue] = useState("");
 
-    const handleInputKeyDown = React.useCallback(
+    const handleInputKeyDown = useCallback(
       (event: React.KeyboardEvent<HTMLInputElement>) => {
         if (event.key === "Enter") {
           setIsPopoverOpen(true);
@@ -66,7 +79,7 @@ export const MultiSelect = React.forwardRef<
       [selectedValues, onSelectedValuesChange],
     );
 
-    const toggleOption = React.useCallback(
+    const toggleOption = useCallback(
       (option: string) => {
         const newSelectedValues = selectedValues.includes(option)
           ? selectedValues.filter((value) => value !== option)
@@ -76,30 +89,62 @@ export const MultiSelect = React.forwardRef<
       [selectedValues, onSelectedValuesChange],
     );
 
-    const handleClear = React.useCallback(() => {
+    const handleClear = useCallback(() => {
       onSelectedValuesChange([]);
     }, [onSelectedValuesChange]);
 
     const handleTogglePopover = () => {
       setIsPopoverOpen((prev) => !prev);
     };
 
-    const clearExtraOptions = React.useCallback(() => {
+    const clearExtraOptions = useCallback(() => {
       const newSelectedValues = selectedValues.slice(0, maxCount);
       onSelectedValuesChange(newSelectedValues);
     }, [selectedValues, onSelectedValuesChange, maxCount]);
 
     // show 50 initially and then 20 more when reaching the end
     const { itemsToShow, lastItemRef } = useShowMore<HTMLButtonElement>(50, 20);
 
-    const optionsToShow = React.useMemo(() => {
+    const { overrideSearchFn } = props;
+
+    const optionsToShow = useMemo(() => {
+      const filteredOptions: {
+        label: string;
+        value: string;
+      }[] = [];
+
       const searchValLowercase = searchValue.toLowerCase();
-      const filteredOptions = options.filter((option) => {
-        return option.label.toLowerCase().includes(searchValLowercase);
-      });
 
-      return filteredOptions.slice(0, itemsToShow);
-    }, [options, searchValue, itemsToShow]);
+      for (let i = 0; i <= options.length - 1; i++) {
+        if (filteredOptions.length >= itemsToShow) {
+          break;
+        }
+        if (overrideSearchFn) {
+          if (overrideSearchFn(options[i], searchValLowercase)) {
+            filteredOptions.push(options[i]);
+          }
+        } else {
+          if (options[i].label.toLowerCase().includes(searchValLowercase)) {
+            filteredOptions.push(options[i]);
+          }
+        }
+      }
+
+      return filteredOptions;
+    }, [options, searchValue, itemsToShow, overrideSearchFn]);
+
+    // scroll to top when options change
+    const popoverElRef = useRef<HTMLDivElement>(null);
+    // biome-ignore lint/correctness/useExhaustiveDependencies: <explanation>
+    useEffect(() => {
+      const scrollContainer =
+        popoverElRef.current?.querySelector("[data-scrollable]");
+      if (scrollContainer) {
+        scrollContainer.scrollTo({
+          top: 0,
+        });
+      }
+    }, [searchValue]);
 
     return (
       <Popover open={isPopoverOpen} onOpenChange={setIsPopoverOpen}>
@@ -109,7 +154,7 @@ export const MultiSelect = React.forwardRef<
             {...props}
             onClick={handleTogglePopover}
             className={cn(
-              "flex h-auto min-h-10 w-full items-center justify-between rounded-md border bg-inherit p-3 hover:bg-inherit",
+              "flex h-auto min-h-10 w-full items-center justify-between rounded-md border border-border bg-inherit p-3 hover:bg-inherit",
               className,
             )}
           >
@@ -119,10 +164,14 @@ export const MultiSelect = React.forwardRef<
                 <div className="flex flex-wrap items-center gap-1.5">
                   {selectedValues.slice(0, maxCount).map((value) => {
                     const option = options.find((o) => o.value === value);
+                    if (!option) {
+                      return null;
+                    }
+
                     return (
                       <ClosableBadge
                         key={value}
-                        label={option?.label || ""}
+                        label={option.label}
                         onClose={() => toggleOption(value)}
                       />
                     );
@@ -170,20 +219,21 @@ export const MultiSelect = React.forwardRef<
           </Button>
         </PopoverTrigger>
         <PopoverContent
-          className="p-0"
+          className="z-[10001] p-0"
           align="center"
           sideOffset={10}
           onEscapeKeyDown={() => setIsPopoverOpen(false)}
           style={{
             width: "var(--radix-popover-trigger-width)",
             maxHeight: "var(--radix-popover-content-available-height)",
           }}
+          ref={popoverElRef}
         >
           <div>
             {/* Search */}
             <div className="relative">
               <Input
-                placeholder="Search"
+                placeholder={props.searchPlaceholder || "Search"}
                 value={searchValue}
                 onChange={(e) => setSearchValue(e.target.value)}
                 className="!h-auto rounded-b-none border-0 border-border border-b py-4 pl-10 focus-visible:ring-0 focus-visible:ring-offset-0"
@@ -193,7 +243,7 @@ export const MultiSelect = React.forwardRef<
             </div>
 
             <ScrollShadow
-              scrollableClassName="max-h-[350px] p-1"
+              scrollableClassName="max-h-[min(calc(var(--radix-popover-content-available-height)-60px),350px)] p-1"
               className="rounded"
             >
               {/* List */}
@@ -213,7 +263,7 @@ export const MultiSelect = React.forwardRef<
                       aria-selected={isSelected}
                       onClick={() => toggleOption(option.value)}
                       variant="ghost"
-                      className="flex w-full cursor-pointer justify-start gap-3 rounded-sm px-3 py-2"
+                      className="flex w-full cursor-pointer justify-start gap-3 rounded-sm px-3 py-2 text-left"
                       ref={
                         i === optionsToShow.length - 1 ? lastItemRef : undefined
                       }
@@ -229,7 +279,11 @@ export const MultiSelect = React.forwardRef<
                         <CheckIcon className="size-4" />
                       </div>
 
-                      <span>{option.label}</span>
+                      <div className="min-w-0 grow">
+                        {props.renderOption
+                          ? props.renderOption(option)
+                          : option.label}
+                      </div>
                     </Button>
                   );
                 })}

apps/dashboard/src/@/components/ui/ScrollShadow/ScrollShadow.tsx

@@ -125,6 +125,7 @@ export function ScrollShadow(props: {
       <div
         className={cn("no-scrollbar overflow-auto", props.scrollableClassName)}
         ref={scrollableEl}
+        data-scrollable
       >
         {props.children}
       </div>

apps/dashboard/src/components/contract-components/contract-publish-form/NetworkDropdown.tsx

@@ -1,16 +1,16 @@
+import { MultiSelect } from "@/components/blocks/multi-select";
+import { Badge } from "@/components/ui/badge";
 import { Select } from "chakra-react-select";
 import type { SizeProp } from "chakra-react-select";
-import { useMemo } from "react";
+import { useCallback, useMemo } from "react";
 import { useFormContext } from "react-hook-form";
 import { useAllChainsData } from "../../../hooks/chains/allChains";
 
 interface NetworkDropdownProps {
   useCleanChainName?: boolean;
   isDisabled?: boolean;
-  onMultiChange?: (networksEnabled: number[]) => void;
-  onSingleChange?: (networksEnabled: number) => void;
-  // biome-ignore lint/suspicious/noExplicitAny: FIXME
-  value: any;
+  onSingleChange: (networksEnabled: number) => void;
+  value: number | undefined;
   size?: SizeProp;
 }
 
@@ -20,7 +20,6 @@ function cleanChainName(chainName: string) {
 
 export const NetworkDropdown: React.FC<NetworkDropdownProps> = ({
   useCleanChainName = true,
-  onMultiChange,
   onSingleChange,
   value,
   size = "md",
@@ -56,27 +55,15 @@ export const NetworkDropdown: React.FC<NetworkDropdownProps> = ({
     <div className="flex w-full flex-row items-center gap-2">
       <Select
         size={size}
-        placeholder={`${
-          onSingleChange ? "Select a network" : "Select Networks"
-        }`}
-        isMulti={onMultiChange !== undefined}
+        placeholder={"Select a network"}
         selectedOptionStyle="check"
         hideSelectedOptions={false}
         options={options}
         defaultValue={defaultValues}
-        onChange={(selectedNetworks) => {
-          if (selectedNetworks) {
-            if (onMultiChange) {
-              onMultiChange(
-                // biome-ignore lint/suspicious/noExplicitAny: FIXME
-                (selectedNetworks as any).map(
-                  ({ value: val }: { value: string }) => val,
-                ),
-              );
-            } else if (onSingleChange) {
-              onSingleChange(
-                (selectedNetworks as { label: string; value: number }).value,
-              );
+        onChange={(selectedChain) => {
+          if (selectedChain) {
+            if (onSingleChange) {
+              onSingleChange(selectedChain.value);
             }
           }
         }}
@@ -99,12 +86,77 @@ export const NetworkDropdown: React.FC<NetworkDropdownProps> = ({
             minWidth: "178px",
           }),
         }}
-        value={
-          onMultiChange
-            ? options.filter(({ value: val }) => value?.includes(val))
-            : options.find(({ value: val }) => val === value)
-        }
+        value={options.find(({ value: val }) => val === value)}
       />
     </div>
   );
 };
+
+type Option = { label: string; value: string };
+
+export function MultiNetworkSelector(props: {
+  selectedChainIds: number[];
+  onChange: (chainIds: number[]) => void;
+}) {
+  const { allChains, idToChain } = useAllChainsData();
+
+  const options = useMemo(() => {
+    return allChains.map((chain) => {
+      return {
+        label: cleanChainName(chain.name),
+        value: String(chain.chainId),
+      };
+    });
+  }, [allChains]);
+
+  const searchFn = useCallback(
+    (option: Option, searchValue: string) => {
+      const chain = idToChain.get(Number(option.value));
+      if (!chain) {
+        return false;
+      }
+
+      if (Number.isInteger(Number.parseInt(searchValue))) {
+        return String(chain.chainId).startsWith(searchValue);
+      }
+      return chain.name.toLowerCase().includes(searchValue.toLowerCase());
+    },
+    [idToChain],
+  );
+
+  const renderOption = useCallback(
+    (option: Option) => {
+      const chain = idToChain.get(Number(option.value));
+      if (!chain) {
+        return option.label;
+      }
+
+      return (
+        <div className="flex justify-between gap-4">
+          <span className="grow truncate text-left">
+            {cleanChainName(chain.name)}
+          </span>
+          <Badge variant="outline" className="gap-2">
+            <span className="text-muted-foreground">Chain ID</span>
+            {chain.chainId}
+          </Badge>
+        </div>
+      );
+    },
+    [idToChain],
+  );
+
+  return (
+    <MultiSelect
+      searchPlaceholder="Search by Name or Chain Id"
+      selectedValues={props.selectedChainIds.map(String)}
+      options={options}
+      onSelectedValuesChange={(chainIds) => {
+        props.onChange(chainIds.map(Number));
+      }}
+      placeholder="Select Chains"
+      overrideSearchFn={searchFn}
+      renderOption={renderOption}
+    />
+  );
+}