feat(web): add multiple options to RollupFilter

.changeset/old-pianos-help.md

@@ -0,0 +1,5 @@
+---
+"@blobscan/web": minor
+---
+
+Added multiple options to RollupFilter

apps/web/package.json

@@ -55,6 +55,7 @@
     "react-loading-skeleton": "^3.3.1",
     "react-tailwindcss-datepicker": "^1.6.6",
     "superjson": "1.9.1",
+    "tailwind-gradient-mask-image": "^1.2.0",
     "tailwind-merge": "^2.4.0",
     "viem": "^2.17.4",
     "zod": "^3.21.4"

apps/web/src/components/Dropdown/Option.tsx

@@ -1,28 +1,33 @@
 import { ListboxOption } from "@headlessui/react";
+import { CheckIcon } from "@heroicons/react/24/outline";
 
-import type { Option as OptionProps } from ".";
+import type { Option as OptionType } from ".";
+
+interface OptionProps {
+  option: OptionType;
+}
 
 export const Option: React.FC<OptionProps> = function (props) {
-  const { prefix, label, value } = props;
+  const { prefix, label, value } = props.option;
   return (
     <ListboxOption
-      className={({ focus }) =>
-        `relative cursor-pointer select-none px-4 py-2 ${
-          focus
-            ? "bg-controlActive-light dark:bg-controlActive-dark dark:text-content-dark"
-            : "text-contentSecondary-light dark:text-contentSecondary-dark"
-        }`
-      }
-      value={props}
+      className={`relative cursor-pointer select-none px-4 py-2 text-contentSecondary-light data-[selected]:bg-controlActive-light dark:text-contentSecondary-dark data-[selected]:dark:bg-controlActive-dark data-[selected]:dark:text-content-dark`}
+      value={props.option}
     >
       {({ selected }) => (
-        <div className="flex items-center gap-3">
-          {prefix && prefix}
-          <span
-            className={`block truncate text-sm ${selected ? "font-bold" : ""}`}
-          >
-            {label ? label : value}
-          </span>
+        <div className="flex items-center justify-between gap-3">
+          <div className="flex flex-row items-center gap-2">
+            {prefix && prefix}
+            <span className="block truncate text-sm">
+              {label ? label : value}
+            </span>
+          </div>
+          {selected && (
+            <CheckIcon
+              className="group pointer-events-none absolute right-2.5 top-2.5 size-4"
+              aria-hidden="true"
+            />
+          )}
         </div>
       )}
     </ListboxOption>

apps/web/src/components/Dropdown/index.tsx

@@ -1,3 +1,4 @@
+import { Fragment, useRef } from "react";
 import type { ReactNode } from "react";
 import {
   Listbox,
@@ -6,57 +7,91 @@ import {
   Transition,
 } from "@headlessui/react";
 import { ChevronUpDownIcon, XMarkIcon } from "@heroicons/react/24/solid";
+import cn from "classnames";
 
+import useOverflow from "~/hooks/useOverflow";
 import { Option } from "./Option";
 
 export interface Option {
   value: string | number;
   label?: ReactNode;
   prefix?: ReactNode;
+  inputDisplay?: ReactNode;
 }
+
 export interface DropdownProps {
   options: Option[];
-  selected?: Option | null;
   width?: string;
   placeholder?: string;
   clearable?: boolean;
-  onChange(newOption: Option | null): void;
+  selected?: Option | Option[] | null;
+  multiple?: boolean;
+  onChange(newOption: Option | Option[] | null): void;
 }
 
 const DEFAULT_WIDTH = "w-32";
 
 export const Dropdown: React.FC<DropdownProps> = function ({
   options,
   selected,
+  multiple,
   width,
   onChange,
   clearable = false,
   placeholder = "Select an item",
 }) {
+  const hasValue = Array.isArray(selected) ? selected.length > 0 : selected;
+
+  const containerRef = useRef<HTMLDivElement | null>(null);
+  const innerRef = useRef<HTMLDivElement | null>(null);
+  const isOverflowing = useOverflow(containerRef, innerRef);
+
   return (
-    <Listbox value={selected} onChange={onChange}>
+    <Listbox value={selected} onChange={onChange} multiple={multiple}>
       <div className="relative">
         <ListboxButton
           className={`relative h-9 ${
             width ?? DEFAULT_WIDTH
           } flex cursor-pointer items-center justify-between rounded-lg border border-transparent bg-controlBackground-light pl-2 pr-8 text-left text-sm shadow-md hover:border hover:border-controlBorderHighlight-light focus:outline-none focus-visible:border-indigo-500 focus-visible:ring-2 focus-visible:ring-white active:border-controlBorderHighlight-dark ui-open:border-controlActive-light dark:bg-controlBackground-dark dark:hover:border-controlBorderHighlight-dark dark:ui-open:border-controlActive-dark`}
         >
-          <div className="truncate align-middle">
-            {selected ? (
-              selected.label ?? selected.value
+          <div
+            className={cn("truncate align-middle", {
+              "gradient-mask-r-90": isOverflowing,
+            })}
+            ref={containerRef}
+          >
+            {hasValue ? (
+              Array.isArray(selected) ? (
+                <div
+                  className="flex flex-row items-center gap-1"
+                  ref={innerRef}
+                >
+                  {selected.map((s) => {
+                    return (
+                      <Fragment key={s.value}>
+                        {s.inputDisplay ? s.inputDisplay : s.label}
+                      </Fragment>
+                    );
+                  })}
+                </div>
+              ) : selected?.label ? (
+                selected.label
+              ) : (
+                selected?.value
+              )
             ) : (
               <div className="text-hint-light dark:text-hint-dark">
                 {placeholder}
               </div>
             )}
           </div>
           <div className="absolute inset-y-0 right-0 flex items-center pr-2">
-            {clearable && selected ? (
+            {clearable && hasValue ? (
               <XMarkIcon
                 className="h-5 w-5 text-icon-light hover:text-iconHighlight-light dark:text-icon-dark dark:hover:text-iconHighlight-dark"
                 onClick={(e) => {
                   e.stopPropagation();
-                  onChange(null);
+                  multiple ? onChange([]) : onChange(null);
                 }}
               />
             ) : (
@@ -74,7 +109,7 @@ export const Dropdown: React.FC<DropdownProps> = function ({
         >
           <ListboxOptions className="absolute z-50 mt-1 max-h-60 w-full overflow-auto rounded-md bg-controlBackground-light py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none dark:bg-controlBackground-dark sm:text-sm">
             {options.map((option, id) => (
-              <Option {...option} key={id} />
+              <Option key={id} option={option} />
             ))}
           </ListboxOptions>
         </Transition>

apps/web/src/components/Filters/RollupFilter.tsx

@@ -1,16 +1,20 @@
+import { useRef } from "react";
 import type { FC } from "react";
 
 import { getChainRollups } from "@blobscan/rollups";
 
 import { Dropdown } from "~/components/Dropdown";
-import type { DropdownProps, Option } from "~/components/Dropdown";
+import type { Option } from "~/components/Dropdown";
 import { RollupIcon } from "~/components/RollupIcon";
 import { env } from "~/env.mjs";
 import type { Rollup } from "~/types";
 import { capitalize, getChainIdByName } from "~/utils";
+import { Badge } from "../Badges/Badge";
+import { RollupBadge } from "../Badges/RollupBadge";
 
-type RollupFilterProps = Pick<DropdownProps, "selected"> & {
-  onChange(newRollup: Option | null): void;
+type RollupFilterProps = {
+  onChange(newRollups: Option[]): void;
+  selected: Option[] | null;
 };
 
 const chainId = getChainIdByName(env.NEXT_PUBLIC_NETWORK_NAME);
@@ -19,31 +23,57 @@ const rollups = chainId ? getChainRollups(chainId) : [];
 export const ROLLUP_OPTIONS: Option[] = [
   {
     value: "null",
+    inputDisplay: <Badge size="sm">None</Badge>,
     label: "None",
   },
-  ...rollups.map(([rollupAddress, rollupName]) => ({
-    value: rollupAddress,
-    label: (
-      <div className="flex items-center gap-2">
-        <RollupIcon rollup={rollupName.toLowerCase() as Rollup} />
-        {capitalize(rollupName)}
-      </div>
-    ),
-  })),
+  ...rollups.map(([rollupAddress, rollupName]) => {
+    return {
+      value: rollupAddress,
+      inputDisplay: (
+        <RollupBadge rollup={rollupName.toLowerCase() as Rollup} size="sm" />
+      ),
+      prefix: <RollupIcon rollup={rollupName.toLowerCase() as Rollup} />,
+      label: capitalize(rollupName),
+    };
+  }),
 ];
 
 export const RollupFilter: FC<RollupFilterProps> = function ({
   onChange,
   selected,
 }) {
+  const noneIsSelected = useRef<boolean>(false);
+
+  const handleOnChange = (newRollups_: Option[]) => {
+    let newRollups = newRollups_;
+    const noneOptionIndex = newRollups.findIndex((r) => r.value === "null");
+
+    if (noneIsSelected.current && newRollups.length > 1) {
+      noneIsSelected.current = false;
+      newRollups = newRollups.filter((_, index) => index !== noneOptionIndex);
+    }
+
+    if (
+      !noneIsSelected.current &&
+      noneOptionIndex !== -1 &&
+      newRollups.length > 1
+    ) {
+      noneIsSelected.current = true;
+      newRollups = newRollups.filter((_, index) => index === noneOptionIndex);
+    }
+
+    onChange(newRollups);
+  };
+
   return (
     <Dropdown
       selected={selected}
       options={ROLLUP_OPTIONS}
-      onChange={onChange}
+      onChange={handleOnChange}
       placeholder="Rollup"
-      width="sm:w-[130px] w-full md:max-lg:w-full"
+      width="sm:w-[130px] w-full xl:w-[240px] md:max-lg:w-full"
       clearable
+      multiple
     />
   );
 };

apps/web/src/components/Filters/index.tsx

@@ -17,8 +17,10 @@ import { SlotFilter } from "./SlotFilter";
 import { SortToggle } from "./SortToggle";
 import { TimestampFilter } from "./TimestampFilter";
 
+const FROM_ADDRESSES_FORMAT_SEPARATOR = ",";
+
 type FiltersState = {
-  rollup: Option | null;
+  rollups: Option[] | null;
   timestampRange: DateRangeType | null;
   blockNumberRange: NumberRange | null;
   slotRange: NumberRange | null;
@@ -40,7 +42,7 @@ type FiltersAction<V extends keyof FiltersState> =
   | UpdateAction;
 
 const INIT_STATE: FiltersState = {
-  rollup: null,
+  rollups: [],
   timestampRange: {
     endDate: null,
     startDate: null,
@@ -75,7 +77,7 @@ export const Filters: FC = function () {
   const queryParams = useQueryParams();
   const [filters, dispatch] = useReducer(reducer, INIT_STATE);
   const disableClear =
-    !filters.rollup &&
+    !filters.rollups &&
     !filters.timestampRange?.endDate &&
     !filters.timestampRange?.startDate &&
     !filters.blockNumberRange &&
@@ -84,14 +86,16 @@ export const Filters: FC = function () {
 
   const handleFilter = () => {
     const query: UrlObject["query"] = {};
-    const { rollup, timestampRange, blockNumberRange, slotRange, sort } =
+    const { rollups, timestampRange, blockNumberRange, slotRange, sort } =
       filters;
 
-    if (rollup) {
-      if (rollup.value === "null") {
-        query.rollup = rollup.value;
+    if (rollups && rollups.length > 0) {
+      if (rollups.length === 1 && rollups[0]?.value === "null") {
+        query.rollup = rollups[0]?.value;
       } else {
-        query.from = rollup.value;
+        query.from = rollups
+          .map((r) => r.value)
+          .join(FROM_ADDRESSES_FORMAT_SEPARATOR);
       }
     }
 
@@ -156,12 +160,15 @@ export const Filters: FC = function () {
     const newFilters: Partial<FiltersState> = {};
 
     if (rollup || from) {
-      const rollupOption = ROLLUP_OPTIONS.find(
-        (opt) => opt.value === rollup || opt.value === from
-      );
+      const rollupOptions = ROLLUP_OPTIONS.filter((opt) => {
+        const fromAddresses = from?.split(FROM_ADDRESSES_FORMAT_SEPARATOR);
+        return (
+          opt.value === rollup || fromAddresses?.includes(opt.value as string)
+        );
+      });
 
-      if (rollupOption) {
-        newFilters.rollup = rollupOption;
+      if (rollupOptions) {
+        newFilters.rollups = rollupOptions;
       }
     }
 
@@ -204,11 +211,11 @@ export const Filters: FC = function () {
                 dispatch({ type: "UPDATE", payload: { sort: newSort } });
               }}
             />
-            <div className="w-full sm:w-[130px] md:max-lg:w-full">
+            <div className="w-full sm:w-[130px] md:max-lg:w-full xl:w-[240px]">
               <RollupFilter
-                selected={filters.rollup}
-                onChange={(newRollup) =>
-                  dispatch({ type: "UPDATE", payload: { rollup: newRollup } })
+                selected={filters.rollups}
+                onChange={(newRollups) =>
+                  dispatch({ type: "UPDATE", payload: { rollups: newRollups } })
                 }
               />
             </div>

apps/web/src/components/Layouts/PaginatedListLayout.tsx

@@ -5,7 +5,7 @@ import { useRouter } from "next/router";
 import { Header } from "~/components/Header";
 import { Card } from "../Cards/Card";
 import { Dropdown } from "../Dropdown";
-import type { DropdownProps } from "../Dropdown";
+import type { DropdownProps, Option } from "../Dropdown";
 import { Pagination } from "../Pagination";
 import type { PaginationProps } from "../Pagination";
 
@@ -47,7 +47,7 @@ export const PaginatedListLayout: FC<PaginatedListLayoutProps> = function ({
   const hasItems = !items || items.length;
 
   const handlePageSizeSelection = useCallback<DropdownProps["onChange"]>(
-    (option) => {
+    (option: Option) => {
       if (!option) {
         return;
       }
@@ -126,6 +126,7 @@ export const PaginatedListLayout: FC<PaginatedListLayoutProps> = function ({
               <div className="flex items-center justify-start gap-2">
                 Displayed items:
                 <Dropdown
+                  multiple={false}
                   options={PAGE_SIZES_OPTIONS}
                   selected={{ value: pageSize }}
                   width="w-full"