Update Nebula context selection UI

Author: MananTank

apps/dashboard/src/@/components/blocks/MultiNetworkSelector.stories.tsx

@@ -1,6 +1,9 @@
 import type { Meta, StoryObj } from "@storybook/react";
 import { useState } from "react";
-import { BadgeContainer } from "../../../stories/utils";
+import {
+  BadgeContainer,
+  storybookThirdwebClient,
+} from "../../../stories/utils";
 import { MultiNetworkSelector } from "./NetworkSelectors";
 
 const meta = {
@@ -41,6 +44,7 @@ function Variant(props: {
     <BadgeContainer label={props.label}>
       <MultiNetworkSelector
         selectedChainIds={chainIds}
+        client={storybookThirdwebClient}
         onChange={setChainIds}
       />
     </BadgeContainer>

apps/dashboard/src/@/components/blocks/NetworkSelectors.tsx

@@ -4,6 +4,7 @@ import { MultiSelect } from "@/components/blocks/multi-select";
 import { SelectWithSearch } from "@/components/blocks/select-with-search";
 import { Badge } from "@/components/ui/badge";
 import { useCallback, useMemo } from "react";
+import type { ThirdwebClient } from "thirdweb";
 import { ChainIconClient } from "../../../components/icons/ChainIcon";
 import { useAllChainsData } from "../../../hooks/chains/allChains";
 
@@ -20,6 +21,12 @@ export function MultiNetworkSelector(props: {
   className?: string;
   priorityChains?: number[];
   hideTestnets?: boolean;
+  popoverContentClassName?: string;
+  customTrigger?: React.ReactNode;
+  align?: "center" | "start" | "end";
+  side?: "left" | "right" | "top" | "bottom";
+  showSelectedValuesInModal?: boolean;
+  client: ThirdwebClient;
 }) {
   const { allChains, idToChain } = useAllChainsData();
 
@@ -84,8 +91,9 @@ export function MultiNetworkSelector(props: {
           <span className="flex grow gap-2 truncate text-left">
             <ChainIconClient
               className="size-5"
-              ipfsSrc={chain.icon?.url}
               loading="lazy"
+              src={chain.icon?.url}
+              client={props.client}
             />
             {cleanChainName(chain.name)}
           </span>
@@ -99,14 +107,19 @@ export function MultiNetworkSelector(props: {
         </div>
       );
     },
-    [idToChain, props.disableChainId],
+    [idToChain, props.disableChainId, props.client],
   );
 
   return (
     <MultiSelect
       searchPlaceholder="Search by Name or Chain Id"
       selectedValues={props.selectedChainIds.map(String)}
+      popoverContentClassName={props.popoverContentClassName}
+      customTrigger={props.customTrigger}
       options={options}
+      align={props.align}
+      side={props.side}
+      showSelectedValuesInModal={props.showSelectedValuesInModal}
       onSelectedValuesChange={(chainIds) => {
         props.onChange(chainIds.map(Number));
       }}
@@ -132,6 +145,7 @@ export function SingleNetworkSelector(props: {
   disableChainId?: boolean;
   align?: "center" | "start" | "end";
   placeholder?: string;
+  client: ThirdwebClient;
 }) {
   const { allChains, idToChain } = useAllChainsData();
 
@@ -179,7 +193,8 @@ export function SingleNetworkSelector(props: {
           <span className="flex grow gap-2 truncate text-left">
             <ChainIconClient
               className="size-5"
-              ipfsSrc={chain.icon?.url}
+              src={chain.icon?.url}
+              client={props.client}
               loading="lazy"
             />
             {cleanChainName(chain.name)}
@@ -194,7 +209,7 @@ export function SingleNetworkSelector(props: {
         </div>
       );
     },
-    [idToChain, props.disableChainId],
+    [idToChain, props.disableChainId, props.client],
   );
 
   const isLoadingChains = allChains.length === 0;

apps/dashboard/src/@/components/blocks/SingleNetworkSelector.stories.tsx

@@ -1,6 +1,9 @@
 import type { Meta, StoryObj } from "@storybook/react";
 import { useState } from "react";
-import { BadgeContainer } from "../../../stories/utils";
+import {
+  BadgeContainer,
+  storybookThirdwebClient,
+} from "../../../stories/utils";
 import { SingleNetworkSelector } from "./NetworkSelectors";
 
 const meta = {
@@ -43,6 +46,7 @@ function Variant(props: {
   return (
     <BadgeContainer label={props.label}>
       <SingleNetworkSelector
+        client={storybookThirdwebClient}
         chainId={chainId}
         onChange={setChainId}
         chainIds={props.chainIds}

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

@@ -47,7 +47,12 @@ interface MultiSelectProps
     searchTerm: string,
   ) => boolean;
 
+  popoverContentClassName?: string;
+  customTrigger?: React.ReactNode;
   renderOption?: (option: { value: string; label: string }) => React.ReactNode;
+  align?: "center" | "start" | "end";
+  side?: "left" | "right" | "top" | "bottom";
+  showSelectedValuesInModal?: boolean;
 }
 
 export const MultiSelect = forwardRef<HTMLButtonElement, MultiSelectProps>(
@@ -62,6 +67,8 @@ export const MultiSelect = forwardRef<HTMLButtonElement, MultiSelectProps>(
       overrideSearchFn,
       renderOption,
       searchPlaceholder,
+      popoverContentClassName,
+      showSelectedValuesInModal = false,
       ...props
     },
     ref,
@@ -155,111 +162,100 @@ export const MultiSelect = forwardRef<HTMLButtonElement, MultiSelectProps>(
     return (
       <Popover open={isPopoverOpen} onOpenChange={setIsPopoverOpen} modal>
         <PopoverTrigger asChild>
-          <Button
-            ref={ref}
-            {...props}
-            onClick={handleTogglePopover}
-            className={cn(
-              "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,
-            )}
-          >
-            {selectedValues.length > 0 ? (
-              <div className="flex w-full justify-between">
-                {/* badges */}
-                <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}
-                        onClose={() => toggleOption(value)}
-                      />
-                    );
-                  })}
+          {props.customTrigger || (
+            <Button
+              ref={ref}
+              {...props}
+              onClick={handleTogglePopover}
+              className={cn(
+                "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,
+              )}
+            >
+              {selectedValues.length > 0 ? (
+                <div className="flex w-full items-center justify-between">
+                  <SelectedChainsBadges
+                    selectedValues={selectedValues}
+                    options={options}
+                    maxCount={maxCount}
+                    onClose={handleClear}
+                    toggleOption={toggleOption}
+                    clearExtraOptions={clearExtraOptions}
+                  />
+                  <div className="flex items-center justify-between gap-2">
+                    {/* Clear All */}
+                    {/* biome-ignore lint/a11y/useKeyWithClickEvents: <explanation> */}
+                    {/* biome-ignore lint/a11y/useFocusableInteractive: <explanation> */}
+                    <div
+                      role="button"
+                      onClick={(event) => {
+                        event.stopPropagation();
+                        handleClear();
+                      }}
+                      className="rounded p-1 hover:bg-accent"
+                    >
+                      <XIcon className="h-4 cursor-pointer text-muted-foreground" />
+                    </div>
 
-                  {/* +X more */}
-                  {selectedValues.length > maxCount && (
-                    <ClosableBadge
-                      label={`+ ${selectedValues.length - maxCount} more`}
-                      onClose={clearExtraOptions}
+                    <Separator
+                      orientation="vertical"
+                      className="flex h-full min-h-6"
                     />
-                  )}
-                </div>
-
-                <div className="flex items-center justify-between gap-2">
-                  {/* Clear All */}
-                  {/* biome-ignore lint/a11y/useKeyWithClickEvents: <explanation> */}
-                  {/* biome-ignore lint/a11y/useFocusableInteractive: <explanation> */}
-                  <div
-                    role="button"
-                    onClick={(event) => {
-                      event.stopPropagation();
-                      handleClear();
-                    }}
-                    className="rounded p-1 hover:bg-accent"
-                  >
-                    <XIcon className="h-4 cursor-pointer text-muted-foreground" />
+                    <ChevronDown className="h-4 cursor-pointer text-muted-foreground" />
                   </div>
-
-                  <Separator
-                    orientation="vertical"
-                    className="flex h-full min-h-6"
-                  />
+                </div>
+              ) : (
+                <div className="flex w-full items-center justify-between">
+                  <span className="text-muted-foreground text-sm">
+                    {placeholder}
+                  </span>
                   <ChevronDown className="h-4 cursor-pointer text-muted-foreground" />
                 </div>
-              </div>
-            ) : (
-              <div className="flex w-full items-center justify-between">
-                <span className="text-muted-foreground text-sm">
-                  {placeholder}
-                </span>
-                <ChevronDown className="h-4 cursor-pointer text-muted-foreground" />
-              </div>
-            )}
-          </Button>
+              )}
+            </Button>
+          )}
         </PopoverTrigger>
         <PopoverContent
-          className="p-0"
-          align="center"
+          className={cn(
+            "flex max-h-[60vh] flex-col p-0",
+            popoverContentClassName,
+          )}
+          align={props.align}
+          side={props.side}
           sideOffset={10}
           onEscapeKeyDown={() => setIsPopoverOpen(false)}
           style={{
             width: "var(--radix-popover-trigger-width)",
-            maxHeight: "var(--radix-popover-content-available-height)",
+            height:
+              "calc(var(--radix-popover-content-available-height) - 40px)",
           }}
           ref={popoverElRef}
         >
-          <div>
-            {/* Search */}
-            <div className="relative">
-              <Input
-                placeholder={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"
-                onKeyDown={handleInputKeyDown}
-              />
-              <SearchIcon className="-translate-y-1/2 absolute top-1/2 left-4 size-4 text-muted-foreground" />
+          {/* Search */}
+          <div className="relative">
+            <Input
+              placeholder={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"
+              onKeyDown={handleInputKeyDown}
+            />
+            <SearchIcon className="-translate-y-1/2 absolute top-1/2 left-4 size-4 text-muted-foreground" />
+          </div>
+
+          {optionsToShow.length === 0 && (
+            <div className="flex flex-1 flex-col items-center justify-center py-10 text-sm">
+              No results found
             </div>
+          )}
 
+          {optionsToShow.length > 0 && (
             <ScrollShadow
-              scrollableClassName="max-h-[min(calc(var(--radix-popover-content-available-height)-60px),350px)] p-1"
-              className="rounded"
+              scrollableClassName="p-1 h-full"
+              className="flex-1 rounded"
             >
               {/* List */}
               <div>
-                {optionsToShow.length === 0 && (
-                  <div className="flex justify-center py-10">
-                    No results found
-                  </div>
-                )}
-
                 {optionsToShow.map((option, i) => {
                   const isSelected = selectedValues.includes(option.value);
                   return (
@@ -293,7 +289,20 @@ export const MultiSelect = forwardRef<HTMLButtonElement, MultiSelectProps>(
                 })}
               </div>
             </ScrollShadow>
-          </div>
+          )}
+
+          {showSelectedValuesInModal && selectedValues.length > 0 && (
+            <div className="border-t px-3 py-3">
+              <SelectedChainsBadges
+                selectedValues={selectedValues}
+                options={options}
+                maxCount={maxCount}
+                onClose={handleClear}
+                toggleOption={toggleOption}
+                clearExtraOptions={clearExtraOptions}
+              />
+            </div>
+          )}
         </PopoverContent>
       </Popover>
     );
@@ -319,3 +328,44 @@ function ClosableBadge(props: {
 }
 
 MultiSelect.displayName = "MultiSelect";
+
+function SelectedChainsBadges(props: {
+  selectedValues: string[];
+  options: {
+    label: string;
+    value: string;
+  }[];
+  maxCount: number;
+  onClose: () => void;
+  toggleOption: (value: string) => void;
+  clearExtraOptions: () => void;
+}) {
+  const { selectedValues, options, maxCount, toggleOption, clearExtraOptions } =
+    props;
+  return (
+    <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}
+            onClose={() => toggleOption(value)}
+          />
+        );
+      })}
+
+      {/* +X more */}
+      {selectedValues.length > maxCount && (
+        <ClosableBadge
+          label={`+ ${selectedValues.length - maxCount} more`}
+          onClose={clearExtraOptions}
+        />
+      )}
+    </div>
+  );
+}