feat: create Rollup filter & FilterPanel

.changeset/odd-pumpkins-wait.md

@@ -0,0 +1,5 @@
+---
+"@blobscan/rollups": minor
+---
+
+Added support for retrieving rollups by their addresses

.changeset/perfect-mirrors-exist.md

@@ -0,0 +1,5 @@
+---
+"@blobscan/web": patch
+---
+
+Refactored Dropdown options using a new type to allow add new elements to the Option display

.changeset/quiet-experts-lie.md

@@ -0,0 +1,5 @@
+---
+"@blobscan/rollups": minor
+---
+
+Added support for retrieving all chain's available rollups

.changeset/sixty-parrots-kneel.md

@@ -0,0 +1,5 @@
+---
+"@blobscan/db": minor
+---
+
+Exposed Prisma enums from a separated file

.changeset/smooth-trains-fly.md

@@ -0,0 +1,5 @@
+---
+"@blobscan/web": minor
+---
+
+Added rollup filter to blobs, blocks and transactions views

.gitignore

@@ -12,6 +12,9 @@ coverage
 **/prisma/db.sqlite
 **/prisma/db.sqlite-journal
 
+# Prisma generated files
+packages/db/prisma/enums
+
 # next.js
 .next/
 out/

apps/docs/src/app/docs/codebase-overview/page.md

@@ -60,6 +60,7 @@ Here you can find all the shared packages used by the apps:
 | [`@blobscan/test`](https://github.com/Blobscan/blobscan/tree/next/packages/test)                                 |  Shared test utilities and fixtures.                                                                                                                                                                                         |
 |  [`@blobscan/zod`](https://github.com/Blobscan/blobscan/tree/next/packages/zod)                                  |  Shared [Zod](https://zod.dev) schemas and utilities.                                                                                                                                                                        |
 |  [`@blobscan/eth-format`](https://github.com/Blobscan/blobscan/tree/next/packages/eth-format)                    |  Provides utility functions for handling Ethereum value conversions and formatting.                                                                                                                                          |
+|  [`@blobscan/rollups`](https://github.com/Blobscan/blobscan/tree/next/packages/rollups)                          |  A utility that provides a comprehensive list of all rollups and their associated addresses supported by Blobscan, along with functions to retrieve them easily.                                                             |
 
 ### Tooling
 

apps/web/package.json

@@ -21,6 +21,7 @@
     "@blobscan/env": "workspace:^0.0.1",
     "@blobscan/eth-units": "workspace:^0.0.1",
     "@blobscan/open-telemetry": "workspace:^0.0.8",
+    "@blobscan/rollups": "workspace:^0.2.1",
     "@fontsource/inter": "^4.5.15",
     "@fontsource/public-sans": "^4.5.12",
     "@headlessui/react": "^2.1.0",

apps/web/src/components/Cards/SurfaceCards/BlobCard.tsx

@@ -45,9 +45,9 @@ const BlobCard: FC<BlobCardProps> = ({
             </div>
             {transactions
               ?.filter((tx) => !!tx.rollup)
-              .map(({ rollup }) => (
-                <RollupIcon key={rollup} rollup={rollup as Rollup} />
-              ))}
+              .map(({ rollup }) =>
+                rollup ? <RollupIcon key={rollup} rollup={rollup} /> : null
+              )}
           </div>
         ) : (
           <Skeleton width={isCompact ? undefined : 630} />

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

@@ -0,0 +1,30 @@
+import { ListboxOption } from "@headlessui/react";
+
+import type { Option as OptionProps } from ".";
+
+export const Option: React.FC<OptionProps> = function (props) {
+  const { prefix, label, value } = props;
+  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}
+    >
+      {({ selected }) => (
+        <div className="flex items-center gap-3">
+          {prefix && prefix}
+          <span
+            className={`block truncate text-sm ${selected ? "font-bold" : ""}`}
+          >
+            {label ? label : value}
+          </span>
+        </div>
+      )}
+    </ListboxOption>
+  );
+};

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

@@ -0,0 +1,71 @@
+import type { ReactNode } from "react";
+import {
+  Listbox,
+  ListboxButton,
+  ListboxOptions,
+  Transition,
+} from "@headlessui/react";
+import { ChevronUpDownIcon } from "@heroicons/react/24/outline";
+
+import { Option } from "./Option";
+
+export interface Option {
+  value: string | number;
+  label?: ReactNode;
+  prefix?: React.ReactNode;
+}
+
+export interface DropdownProps {
+  options: Option[];
+  selected: Option | null;
+  width?: string;
+  placeholder?: string;
+  onChange(newOption: Option): void;
+}
+
+const DEFAULT_WIDTH = "w-32";
+
+export const Dropdown: React.FC<DropdownProps> = function ({
+  options,
+  selected,
+  width,
+  onChange,
+  placeholder = "Select",
+}) {
+  return (
+    <Listbox value={selected} onChange={onChange}>
+      <div className="relative">
+        <ListboxButton
+          className={`relative h-9 ${
+            width ?? DEFAULT_WIDTH
+          } cursor-pointer rounded-lg border border-transparent bg-controlBackground-light pl-2 pr-8 text-left text-sm shadow-md hover:border hover:border-controlBackground-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`}
+        >
+          <span className="block truncate align-middle font-normal">
+            {selected
+              ? selected.label
+                ? selected.label
+                : selected.value
+              : placeholder}
+          </span>
+          <span className="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2">
+            <ChevronUpDownIcon
+              className="h-5 w-5 text-icon-light dark:text-icon-dark"
+              aria-hidden="true"
+            />
+          </span>
+        </ListboxButton>
+        <Transition
+          leave="transition ease-in duration-100"
+          leaveFrom="opacity-100"
+          leaveTo="opacity-0"
+        >
+          <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} />
+            ))}
+          </ListboxOptions>
+        </Transition>
+      </div>
+    </Listbox>
+  );
+};

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

@@ -0,0 +1,32 @@
+import type { FC } from "react";
+
+import { Rollup as Rollups } from "@blobscan/api/enums";
+
+import { Dropdown } from "~/components/Dropdown";
+import type { DropdownProps } from "~/components/Dropdown";
+import { RollupIcon } from "~/components/RollupIcon";
+import type { Rollup } from "~/types";
+import { capitalize } from "~/utils";
+
+type RollupFilterProps = Pick<DropdownProps, "onChange" | "selected">;
+
+export const RollupFilter: FC<RollupFilterProps> = function ({
+  onChange,
+  selected,
+}) {
+  return (
+    <>
+      <Dropdown
+        selected={selected}
+        options={Object.values(Rollups).map((rollup) => ({
+          value: rollup.toLowerCase(),
+          label: capitalize(rollup),
+          prefix: <RollupIcon rollup={rollup.toLowerCase() as Rollup} />,
+        }))}
+        onChange={onChange}
+        placeholder="Rollup"
+        width="w-40"
+      />
+    </>
+  );
+};

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

@@ -0,0 +1,66 @@
+import { useState } from "react";
+import type { FC } from "react";
+import { useRouter } from "next/router";
+
+import { Button } from "~/components/Button";
+import type { Option } from "../Dropdown";
+import { RollupFilter } from "./RollupFilter";
+
+interface FiltersState {
+  rollup: Option | null;
+}
+
+export const Filters: FC = function () {
+  const [formData, setFormData] = useState<FiltersState>({
+    rollup: null,
+  });
+  const router = useRouter();
+
+  const allowToFilter = !!formData.rollup;
+
+  const handleSubmit = () => {
+    if (formData.rollup) {
+      router.push({
+        pathname: router.pathname,
+        query: {
+          ...router.query,
+          rollup: formData.rollup.value,
+        },
+      });
+    }
+  };
+
+  const handleClear = () => {
+    router.push({ pathname: router.pathname, query: undefined });
+    setFormData({ rollup: null });
+  };
+
+  const handleRollupFilterChange = (newRollup: Option) => {
+    setFormData((prevState) => ({ ...prevState, rollup: newRollup }));
+  };
+
+  return (
+    <form
+      className="flex flex-col justify-between gap-2 rounded-lg bg-slate-50 p-2 dark:bg-primary-900 sm:flex-row"
+      onSubmit={handleSubmit}
+    >
+      <RollupFilter
+        selected={formData.rollup}
+        onChange={handleRollupFilterChange}
+      />
+      <div className="flex flex-row gap-2">
+        <Button
+          label="Clear"
+          variant="outline"
+          onClick={handleClear}
+          disabled={!allowToFilter}
+        />
+        <Button
+          label="Filter"
+          onClick={handleSubmit}
+          disabled={!allowToFilter}
+        />
+      </div>
+    </form>
+  );
+};

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

@@ -20,7 +20,12 @@ export type PaginatedListLayoutProps = {
   emptyState?: ReactNode;
 };
 
-const PAGE_SIZES = [10, 25, 50, 100];
+const PAGE_SIZES_OPTIONS: DropdownProps["options"] = [
+  { value: 10 },
+  { value: 25 },
+  { value: 50 },
+  { value: 100 },
+];
 
 export const PaginatedListLayout: FC<PaginatedListLayoutProps> = function ({
   header,
@@ -42,7 +47,7 @@ export const PaginatedListLayout: FC<PaginatedListLayoutProps> = function ({
   const hasItems = !items || items.length;
 
   const handlePageSizeSelection = useCallback<DropdownProps["onChange"]>(
-    (newPageSize: number) =>
+    ({ value: newPageSize }) =>
       void router.push({
         pathname: router.pathname,
         query: {
@@ -51,7 +56,10 @@ export const PaginatedListLayout: FC<PaginatedListLayoutProps> = function ({
            * Update the selected page to a lower value if we require less pages to show the
            * new amount of elements per page.
            */
-          p: Math.min(Math.ceil(totalItems ?? 0 / newPageSize), page),
+          p: Math.min(
+            Math.ceil(totalItems ?? 0 / (newPageSize as number)),
+            page
+          ),
           ps: newPageSize,
         },
       }),
@@ -110,8 +118,8 @@ export const PaginatedListLayout: FC<PaginatedListLayoutProps> = function ({
               <div className="flex items-center justify-start gap-2">
                 Displayed items:
                 <Dropdown
-                  items={PAGE_SIZES}
-                  selected={pageSize}
+                  options={PAGE_SIZES_OPTIONS}
+                  selected={{ value: pageSize, label: pageSize.toString() }}
                   width="w-full"
                   onChange={handlePageSizeSelection}
                 />