fix(web): set Rollup filter for multiple from addresses from query …

…params (#644) * fix(web): reset Rollup dropdown based on query parameters for multiple addresses * chore: add changeset
Blobscan · Nov 25, 2024 · cc62af6 · cc62af6
1 parent 67c6e2f
commit cc62af6
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 17 deletions.
diff --git a/.changeset/eighty-clouds-end.md b/.changeset/eighty-clouds-end.md
@@ -0,0 +1,5 @@
+---
+"@blobscan/web": patch
+---
+
+Fixed an issue where the Rollup filter was not being set correctly from query parameters
diff --git a/apps/web/src/components/Filters/RollupFilter.tsx b/apps/web/src/components/Filters/RollupFilter.tsx
@@ -20,27 +20,28 @@ type RollupFilterProps = {
 const chainId = getChainIdByName(env.NEXT_PUBLIC_NETWORK_NAME);
 const rollups = chainId ? getChainRollups(chainId) : [];
 
-export const ROLLUP_OPTIONS: Option[] = [
+export const ROLLUP_OPTIONS = [
   {
     value: "null",
     selectedLabel: <Badge size="sm">None</Badge>,
     label: "None",
   },
-  ...rollups.map<Option>(([name, addresses]) => {
-    return {
-      value: addresses,
-      selectedLabel: (
-        <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>
-      ),
-    };
-  }),
-];
+  ...rollups.map(
+    ([name, addresses]) =>
+      ({
+        value: addresses,
+        selectedLabel: (
+          <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>
+        ),
+      } satisfies Option)
+  ),
+] satisfies Option[];
 
 export const RollupFilter: FC<RollupFilterProps> = function ({
   onChange,

diff --git a/apps/web/src/components/Filters/index.tsx b/apps/web/src/components/Filters/index.tsx
@@ -162,11 +162,19 @@ export const Filters: FC = function () {
     if (rollup || from) {
       const rollupOptions = ROLLUP_OPTIONS.filter((opt) => {
         const fromAddresses = from?.split(FROM_ADDRESSES_FORMAT_SEPARATOR);
+        const rollupOptionAddresses = Array.isArray(opt.value)
+          ? opt.value
+          : [opt.value];
+
         return (
-          opt.value === rollup || fromAddresses?.includes(opt.value as string)
+          opt.value === rollup ||
+          rollupOptionAddresses.filter((rollupAddress) =>
+            fromAddresses?.includes(rollupAddress)
+          ).length > 0
         );
       });
 
+      console.log(rollupOptions);
       if (rollupOptions) {
         newFilters.rollups = rollupOptions;
       }