fix(web): add support for filtering rollups with multiple blob submit…

…ter addresses (#635) * feat(web): add support for dropdown to hold multiple values by option * fix(web): display rollups with more than one address properly in the rollup filter * fix(web): simplify dropdown options by including prefix within label props
Blobscan · Nov 25, 2024 · 9b74688 · 9b74688
1 parent aab707b
commit 9b74688
Show file tree

Hide file tree

Showing 6 changed files with 60 additions and 36 deletions.
diff --git a/apps/web/src/components/Dropdown/Option.tsx b/apps/web/src/components/Dropdown/Option.tsx
@@ -7,20 +7,19 @@ interface OptionProps {
   option: OptionType;
 }
 
-export const Option: React.FC<OptionProps> = function (props) {
-  const { prefix, label, value } = props.option;
+export const Option: React.FC<OptionProps> = function ({ option }) {
+  const { label, value } = option;
+  const formattedValue = Array.isArray(value) ? value.join(", ") : value;
+
   return (
     <ListboxOption
       className={`relative cursor-pointer select-none px-4 py-2 text-contentSecondary-light hover:bg-controlActive-light data-[selected]:font-semibold data-[selected]:text-content-light dark:text-contentSecondary-dark  hover:dark:bg-controlActive-dark data-[selected]:dark:font-semibold data-[selected]:dark:text-content-dark`}
-      value={props.option}
+      value={option}
     >
       {({ selected }) => (
         <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 className="truncate text-sm">
+            {label ? label : formattedValue}
           </div>
           {selected && (
             <CheckIcon

diff --git a/apps/web/src/components/Dropdown/index.tsx b/apps/web/src/components/Dropdown/index.tsx
@@ -13,9 +13,8 @@ import useOverflow from "~/hooks/useOverflow";
 import { Option } from "./Option";
 
 export interface Option {
-  value: string | number;
+  value: string | number | string[] | number[];
   label?: ReactNode;
-  prefix?: ReactNode;
   selectedLabel?: ReactNode;
 }
 
@@ -69,10 +68,12 @@ export const Dropdown: React.FC<DropdownProps> = function ({
               {hasSelectedValue ? (
                 Array.isArray(selected) ? (
                   <div className="flex flex-row items-center gap-1">
-                    {selected.map((s) => {
+                    {selected.map(({ selectedLabel, label, value }) => {
                       return (
-                        <Fragment key={s.value}>
-                          {s.selectedLabel ? s.selectedLabel : s.label}
+                        <Fragment
+                          key={Array.isArray(value) ? value.join("-") : value}
+                        >
+                          {selectedLabel ? selectedLabel : label}
                         </Fragment>
                       );
                     })}

diff --git a/apps/web/src/components/Filters/RollupFilter.tsx b/apps/web/src/components/Filters/RollupFilter.tsx
@@ -26,14 +26,18 @@ export const ROLLUP_OPTIONS: Option[] = [
     selectedLabel: <Badge size="sm">None</Badge>,
     label: "None",
   },
-  ...rollups.map(([rollupAddress, rollupName]) => {
+  ...rollups.map<Option>(([name, addresses]) => {
     return {
-      value: rollupAddress,
+      value: addresses,
       selectedLabel: (
-        <RollupBadge rollup={rollupName.toLowerCase() as Rollup} size="sm" />
+        <RollupBadge rollup={name.toLowerCase() as Rollup} size="sm" />
+      ),
+      label: (
+        <div className="flex flex-row items-center gap-2">
+          <RollupIcon rollup={name.toLowerCase() as Rollup} />
+          <div>{capitalize(name)}</div>
+        </div>
       ),
-      prefix: <RollupIcon rollup={rollupName.toLowerCase() as Rollup} />,
-      label: capitalize(rollupName),
     };
   }),
 ];

diff --git a/apps/web/src/components/Filters/index.tsx b/apps/web/src/components/Filters/index.tsx
@@ -94,7 +94,7 @@ export const Filters: FC = function () {
         query.rollup = rollups[0]?.value;
       } else {
         query.from = rollups
-          .map((r) => r.value)
+          .flatMap((r) => r.value)
           .join(FROM_ADDRESSES_FORMAT_SEPARATOR);
       }
     }

diff --git a/packages/rollups/src/index.ts b/packages/rollups/src/index.ts
@@ -77,8 +77,8 @@ export const ROLLUP_TO_ADDRESSES_MAPPINGS = new Map(
   )
 );
 
-export function getChainRollups(chainId: number): [string, Rollup][] {
-  const addressToRollupMapping = ADDRESS_TO_ROLLUP_MAPPINGS.get(chainId);
+export function getChainRollups(chainId: number): [Rollup, string[]][] {
+  const addressToRollupMapping = ROLLUP_TO_ADDRESSES_MAPPINGS.get(chainId);
 
   if (!addressToRollupMapping) {
     return [];

diff --git a/packages/rollups/test/rollups.test.ts b/packages/rollups/test/rollups.test.ts
@@ -54,21 +54,41 @@ describe("Rollups", () => {
   it("should get all chain's rollups correctly", () => {
     const chainId = 11155111;
     const expectedRollups = [
-      ["0xb2248390842d3c4acf1d8a893954afc0eac586e5", Rollup.ARBITRUM],
-      ["0x1fb1494f5135bb01a698fb3e863dd12f876bb085", Rollup.ARBITRUM],
-      ["0x07f0e1ec1ce152b075fda4a827a9f17851086b25", Rollup.ARBITRUM],
-      ["0xfc56e7272eebbba5bc6c544e159483c4a38f8ba3", Rollup.BASE],
-      ["0x6cdebe940bc0f26850285caca097c11c33103e47", Rollup.BASE],
-      ["0xf15dc770221b99c98d4aaed568f2ab04b9d16e42", Rollup.KROMA],
-      ["0x47c63d1e391fcb3dcdc40c4d7fa58adb172f8c38", Rollup.LINEA],
-      ["0x88584cf948cd51267f220edd9e21e67ccf3fcfa8", Rollup.LINEA],
-      ["0x8f23bb38f531600e5d8fddaaec41f13fab46e98c", Rollup.OPTIMISM],
-      ["0xdf50ccaa4467b61b51d8ed86320d8ca67a56265e", Rollup.OPTIMISM],
-      ["0xe14b3f075ad9377689daf659e04a2a99a4acede4", Rollup.OPTIMISM],
-      ["0x2d567ece699eabe5afcd141edb7a4f2d0d6ce8a0", Rollup.SCROLL],
-      ["0x5b98b836969a60fec50fa925905dd1d382a7db43", Rollup.STARKNET],
-      ["0x4e6bd53883107b063c502ddd49f9600dc51b3ddc", Rollup.MODE],
-      ["0x3cd868e221a3be64b161d596a7482257a99d857f", Rollup.ZORA],
+      [
+        Rollup.ARBITRUM,
+        [
+          "0xb2248390842d3c4acf1d8a893954afc0eac586e5",
+          "0x1fb1494f5135bb01a698fb3e863dd12f876bb085",
+          "0x07f0e1ec1ce152b075fda4a827a9f17851086b25",
+        ],
+      ],
+      [
+        Rollup.BASE,
+        [
+          "0xfc56e7272eebbba5bc6c544e159483c4a38f8ba3",
+          "0x6cdebe940bc0f26850285caca097c11c33103e47",
+        ],
+      ],
+      [Rollup.KROMA, ["0xf15dc770221b99c98d4aaed568f2ab04b9d16e42"]],
+      [
+        Rollup.LINEA,
+        [
+          "0x47c63d1e391fcb3dcdc40c4d7fa58adb172f8c38",
+          "0x88584cf948cd51267f220edd9e21e67ccf3fcfa8",
+        ],
+      ],
+      [
+        Rollup.OPTIMISM,
+        [
+          "0x8f23bb38f531600e5d8fddaaec41f13fab46e98c",
+          "0xdf50ccaa4467b61b51d8ed86320d8ca67a56265e",
+          "0xe14b3f075ad9377689daf659e04a2a99a4acede4",
+        ],
+      ],
+      [Rollup.SCROLL, ["0x2d567ece699eabe5afcd141edb7a4f2d0d6ce8a0"]],
+      [Rollup.STARKNET, ["0x5b98b836969a60fec50fa925905dd1d382a7db43"]],
+      [Rollup.MODE, ["0x4e6bd53883107b063c502ddd49f9600dc51b3ddc"]],
+      [Rollup.ZORA, ["0x3cd868e221a3be64b161d596a7482257a99d857f"]],
     ];
 
     expect(getChainRollups(chainId)).toEqual(expectedRollups);