From cc62af6bcd59917136c27ce02d2d659c43d42f5e Mon Sep 17 00:00:00 2001
From: "0xelessar.eth" <paulo.colombo@pm.me>
Date: Mon, 25 Nov 2024 15:19:12 +0700
Subject: [PATCH] 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
---
 .changeset/eighty-clouds-end.md               |  5 +++
 .../src/components/Filters/RollupFilter.tsx   | 33 ++++++++++---------
 apps/web/src/components/Filters/index.tsx     | 10 +++++-
 3 files changed, 31 insertions(+), 17 deletions(-)
 create mode 100644 .changeset/eighty-clouds-end.md

diff --git a/.changeset/eighty-clouds-end.md b/.changeset/eighty-clouds-end.md
new file mode 100644
index 000000000..8b42ae6a1
--- /dev/null
+++ 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
index 414f0ccd4..cfe06dfc2 100644
--- 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
index 7b98f82b0..f3493c18b 100644
--- 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;
       }