From 56b7c67fe9673b400b88d6ec66c679efca5a3a97 Mon Sep 17 00:00:00 2001
From: Sebastian <115311276+Roaring30s@users.noreply.github.com>
Date: Mon, 30 Mar 2026 08:47:56 -0500
Subject: [PATCH 1/5] Add History Filter Feature (Fixes Issue #511) (#513)

* feat: add history filter to user account

* fix: apply linter and prettier

* fix: add margin on popover from window

* fix: add UI changes to filter

* fix: remove auto scroll

* fix: remove lint error

---------

Co-authored-by: ECWireless <40322776+ECWireless@users.noreply.github.com>
---
 components/HistoryView/HistoryFilter.tsx | 237 +++++++++++++++++++++++
 components/HistoryView/index.tsx         |  39 +++-
 components/Icons/FilterIcon.tsx          |  28 +++
 hooks/filter/useHistoryFilter.ts         | 104 ++++++++++
 hooks/index.tsx                          |   1 +
 5 files changed, 408 insertions(+), 1 deletion(-)
 create mode 100644 components/HistoryView/HistoryFilter.tsx
 create mode 100644 components/Icons/FilterIcon.tsx
 create mode 100644 hooks/filter/useHistoryFilter.ts

diff --git a/components/HistoryView/HistoryFilter.tsx b/components/HistoryView/HistoryFilter.tsx
new file mode 100644
index 00000000..b36d1b06
--- /dev/null
+++ b/components/HistoryView/HistoryFilter.tsx
@@ -0,0 +1,237 @@
+import FilterIcon from "@components/Icons/FilterIcon";
+import {
+  Badge,
+  Box,
+  Button,
+  Flex,
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+  Text,
+} from "@livepeer/design-system";
+
+interface HistoryFilterProps {
+  selectedEventTypes: string[];
+  isOpen: boolean;
+  onOpenChange: (open: boolean) => void;
+  onToggleEventType: (eventType: string) => void;
+  onClearFilters: () => void;
+  allEventTypes: string[];
+  eventTypeLabels: Record<string, string>;
+}
+
+const HistoryFilter = ({
+  selectedEventTypes,
+  isOpen,
+  onOpenChange,
+  onToggleEventType,
+  onClearFilters,
+  allEventTypes,
+  eventTypeLabels,
+}: HistoryFilterProps) => {
+  return (
+    <Popover open={isOpen} onOpenChange={onOpenChange}>
+      <PopoverTrigger asChild>
+        <Button
+          role="button"
+          css={{
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            backgroundColor: "$neutral4",
+            color: "$hiContrast",
+            minHeight: "44px",
+            width: "120px",
+            padding: "$2 $3",
+            "&:hover": {
+              backgroundColor: "$neutral5",
+            },
+          }}
+        >
+          <FilterIcon size={16} css={{ marginRight: "$1" }} />
+          <Text css={{ marginRight: "$2" }}>Filter</Text>
+          {selectedEventTypes.length > 0 && (
+            <Badge
+              css={{
+                backgroundColor: "$primary9",
+                color: "white",
+                borderRadius: "50%",
+                width: "20px",
+                height: "20px",
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+                fontSize: "$1",
+                fontWeight: 600,
+                padding: 0,
+              }}
+            >
+              {selectedEventTypes.length}
+            </Badge>
+          )}
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent
+        data-history-filter-popover
+        css={{
+          width: "280px",
+          backgroundColor: "$neutral4",
+          borderRadius: "$3",
+          padding: 0,
+          boxShadow:
+            "0px 5px 14px rgba(0, 0, 0, 0.22), 0px 0px 2px rgba(0, 0, 0, 0.2)",
+          border: "1px solid $neutral6",
+          zIndex: 9,
+          display: "flex",
+          flexDirection: "column",
+          maxHeight: "400px",
+          marginRight: "$3",
+          overflow: "hidden",
+        }}
+        onPointerEnterCapture={undefined}
+        onPointerLeaveCapture={undefined}
+        placeholder={undefined}
+      >
+        {/* Header - Sticky */}
+        <Flex
+          css={{
+            padding: "$3",
+            borderBottom: "1px solid $neutral6",
+            borderTopLeftRadius: "$3",
+            borderTopRightRadius: "$3",
+            alignItems: "center",
+            justifyContent: "space-between",
+            flexShrink: 0,
+            backgroundColor: "$neutral4",
+            position: "sticky",
+            top: 0,
+            zIndex: 1,
+          }}
+        >
+          <Button
+            onClick={onClearFilters}
+            css={{
+              color: "$neutral11",
+              fontSize: "$2",
+              padding: "$1",
+              backgroundColor: "transparent",
+              "&:hover": {
+                color: "$hiContrast",
+                backgroundColor: "transparent",
+              },
+            }}
+          >
+            Clear
+          </Button>
+          <Text css={{ fontWeight: 600, fontSize: "$3" }}>Filters</Text>
+          <Button
+            onClick={() => onOpenChange(false)}
+            css={{
+              color: "$primary11",
+              fontSize: "$2",
+              padding: "$1",
+              backgroundColor: "transparent",
+              "&:hover": {
+                backgroundColor: "transparent",
+              },
+            }}
+          >
+            Done
+          </Button>
+        </Flex>
+
+        {/* Event type section - Scrollable */}
+        <Flex
+          data-history-filter-scrollable
+          css={{
+            flexDirection: "column",
+            overflowY: "auto",
+            flex: 1,
+            borderBottomLeftRadius: "$3",
+            borderBottomRightRadius: "$3",
+          }}
+        >
+          <Box css={{ padding: "$3" }}>
+            <Text
+              css={{
+                fontWeight: 500,
+                fontSize: "$2",
+                marginBottom: "$2",
+                color: "$hiContrast",
+              }}
+            >
+              Event Type
+            </Text>
+            <Flex css={{ flexDirection: "column", gap: "$2" }}>
+              {allEventTypes.map((eventType) => {
+                const isChecked = selectedEventTypes.includes(eventType);
+                return (
+                  <Flex
+                    key={eventType}
+                    css={{
+                      alignItems: "center",
+                      cursor: "pointer",
+                      padding: "$1",
+                      borderRadius: "$1",
+                      "&:hover": {
+                        backgroundColor: "$neutral5",
+                      },
+                    }}
+                    onClick={() => onToggleEventType(eventType)}
+                  >
+                    <Box
+                      css={{
+                        width: "18px",
+                        height: "18px",
+                        border: "2px solid",
+                        borderColor: isChecked ? "$primary11" : "$neutral8",
+                        backgroundColor: isChecked
+                          ? "$primary11"
+                          : "transparent",
+                        borderRadius: "$1",
+                        marginRight: "$2",
+                        display: "flex",
+                        alignItems: "center",
+                        justifyContent: "center",
+                        transition: "all 0.2s",
+                      }}
+                    >
+                      {isChecked && (
+                        <Box
+                          as="svg"
+                          width="12"
+                          height="12"
+                          viewBox="0 0 12 12"
+                          fill="none"
+                        >
+                          <path
+                            d="M2 6L4.5 8.5L10 3"
+                            stroke="white"
+                            strokeWidth="2"
+                            strokeLinecap="round"
+                            strokeLinejoin="round"
+                          />
+                        </Box>
+                      )}
+                    </Box>
+                    <Text
+                      css={{
+                        fontSize: "$2",
+                        color: "$hiContrast",
+                        userSelect: "none",
+                      }}
+                    >
+                      {eventTypeLabels[eventType]}
+                    </Text>
+                  </Flex>
+                );
+              })}
+            </Flex>
+          </Box>
+        </Flex>
+      </PopoverContent>
+    </Popover>
+  );
+};
+
+export default HistoryFilter;
diff --git a/components/HistoryView/index.tsx b/components/HistoryView/index.tsx
index e409aa64..b4ea0aba 100644
--- a/components/HistoryView/index.tsx
+++ b/components/HistoryView/index.tsx
@@ -1,3 +1,4 @@
+import HistoryFilter from "@components/HistoryView/HistoryFilter";
 import Spinner from "@components/Spinner";
 import TransactionBadge from "@components/TransactionBadge";
 import { Fm, parsePollIpfs } from "@lib/api/polls";
@@ -20,6 +21,7 @@ import {
   useTransactionsQuery,
   VoteEvent,
 } from "apollo";
+import { useHistoryFilter } from "hooks";
 import { CHAIN_INFO, DEFAULT_CHAIN_ID } from "lib/chains";
 import { useRouter } from "next/router";
 import numbro from "numbro";
@@ -188,6 +190,18 @@ const Index = () => {
     ]
   );
 
+  // Filter events using history hook
+  const {
+    filteredEvents,
+    selectedEventTypes,
+    toggleEventType,
+    clearFilters,
+    isFilterOpen,
+    setIsFilterOpen,
+    allEventTypes,
+    eventTypeLabels,
+  } = useHistoryFilter(mergedEvents);
+
   if (error) {
     console.error(error);
   }
@@ -268,8 +282,31 @@ const Index = () => {
           position: "relative",
         }}
       >
+        <Flex
+          css={{
+            justifyContent: "flex-end",
+            marginBottom: "$3",
+            alignItems: "center",
+          }}
+        >
+          <HistoryFilter
+            selectedEventTypes={selectedEventTypes}
+            isOpen={isFilterOpen}
+            onOpenChange={setIsFilterOpen}
+            onToggleEventType={toggleEventType}
+            onClearFilters={clearFilters}
+            allEventTypes={allEventTypes}
+            eventTypeLabels={eventTypeLabels}
+          />
+        </Flex>
         <Box css={{ paddingBottom: "$3" }}>
-          {mergedEvents.map((event, i: number) => renderSwitch(event, i))}
+          {filteredEvents.length > 0 ? (
+            filteredEvents.map((event, i: number) => renderSwitch(event, i))
+          ) : (
+            <Box css={{ paddingTop: "$3", color: "$neutral11" }}>
+              No events match the selected filters
+            </Box>
+          )}
         </Box>
         {loading && totalLoaded >= 10 && (
           <Flex
diff --git a/components/Icons/FilterIcon.tsx b/components/Icons/FilterIcon.tsx
new file mode 100644
index 00000000..ccd75210
--- /dev/null
+++ b/components/Icons/FilterIcon.tsx
@@ -0,0 +1,28 @@
+import { Box } from "@livepeer/design-system";
+import { CSS } from "@stitches/react";
+
+interface FilterIconProps {
+  size?: number;
+  css?: CSS;
+}
+
+const FilterIcon = ({ size = 16, css }: FilterIconProps) => (
+  <Box
+    as="svg"
+    width={size}
+    height={size}
+    viewBox="0 0 16 16"
+    fill="none"
+    css={css}
+    aria-hidden="true"
+  >
+    <path
+      d="M2 4h12M4 8h8M6 12h4"
+      stroke="currentColor"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+    />
+  </Box>
+);
+
+export default FilterIcon;
diff --git a/hooks/filter/useHistoryFilter.ts b/hooks/filter/useHistoryFilter.ts
new file mode 100644
index 00000000..1498c312
--- /dev/null
+++ b/hooks/filter/useHistoryFilter.ts
@@ -0,0 +1,104 @@
+import { useEffect, useMemo, useState } from "react";
+
+type Event = {
+  __typename: string;
+  transaction?: {
+    timestamp?: number;
+  };
+};
+
+// Event type labels mapping
+export const EVENT_TYPE_LABELS: Record<string, string> = {
+  BondEvent: "Bonded",
+  DepositFundedEvent: "Deposit Funded",
+  NewRoundEvent: "Initialize Round",
+  RebondEvent: "Rebond",
+  UnbondEvent: "Unbond",
+  RewardEvent: "Reward",
+  TranscoderUpdateEvent: "Transcoder Update",
+  WithdrawStakeEvent: "Withdraw Stake",
+  WithdrawFeesEvent: "Withdraw Fees",
+  WinningTicketRedeemedEvent: "Winning Ticket Redeemed",
+  ReserveFundedEvent: "Reserve Funded",
+};
+
+// All available event types
+export const ALL_EVENT_TYPES = Object.keys(EVENT_TYPE_LABELS);
+
+export const useHistoryFilter = (mergedEvents: Event[]) => {
+  const [selectedEventTypes, setSelectedEventTypes] = useState<string[]>([]);
+  const [isFilterOpen, setIsFilterOpen] = useState(false);
+
+  const filteredEvents = useMemo(() => {
+    if (selectedEventTypes.length === 0) {
+      return mergedEvents;
+    }
+    return mergedEvents.filter((event) =>
+      selectedEventTypes.includes(event?.__typename)
+    );
+  }, [mergedEvents, selectedEventTypes]);
+
+  const toggleEventType = (eventType: string) => {
+    setSelectedEventTypes((prev) =>
+      prev.includes(eventType)
+        ? prev.filter((type) => type !== eventType)
+        : [...prev, eventType]
+    );
+  };
+
+  const clearFilters = () => {
+    setSelectedEventTypes([]);
+  };
+
+  // Close filter when scrolling outside the filter area (page scroll)
+  useEffect(() => {
+    if (!isFilterOpen) return;
+
+    const handleScroll = (event: globalThis.Event) => {
+      // Find the popover element by data attribute
+      const popoverElement = document.querySelector(
+        "[data-history-filter-popover]"
+      );
+
+      if (!popoverElement) {
+        // Popover not found, close it
+        setIsFilterOpen(false);
+        return;
+      }
+
+      // Use composedPath to check if the scroll event originated from within the popover
+      const path = event.composedPath();
+      const isScrollingInsidePopover = path.some(
+        (el) =>
+          el === popoverElement ||
+          (el instanceof Node && popoverElement.contains(el))
+      );
+
+      if (isScrollingInsidePopover) {
+        // Scrolling inside popover, don't close
+        return;
+      }
+
+      // Scrolling outside popover, close it
+      setIsFilterOpen(false);
+    };
+
+    // Listen to scroll events on document (captures all scroll events)
+    document.addEventListener("scroll", handleScroll, true);
+
+    return () => {
+      document.removeEventListener("scroll", handleScroll, true);
+    };
+  }, [isFilterOpen]);
+
+  return {
+    filteredEvents,
+    selectedEventTypes,
+    toggleEventType,
+    clearFilters,
+    isFilterOpen,
+    setIsFilterOpen,
+    allEventTypes: ALL_EVENT_TYPES,
+    eventTypeLabels: EVENT_TYPE_LABELS,
+  };
+};
diff --git a/hooks/index.tsx b/hooks/index.tsx
index 9d37f82c..ec78339f 100644
--- a/hooks/index.tsx
+++ b/hooks/index.tsx
@@ -1,6 +1,7 @@
 import { useEffect } from "react";
 
 // DO NOT IMPORT useHandleTransaction due to @rainbow-me/rainbowkit issues with SSR
+export * from "./filter/useHistoryFilter";
 export * from "./useExplorerStore";
 export * from "./useSwr";
 export * from "./wallet";

From 49ef77c0b64c108656248ad5c1ddfc586078a844 Mon Sep 17 00:00:00 2001
From: ECWireless <elliott@coopallc.com>
Date: Mon, 30 Mar 2026 08:50:38 -0600
Subject: [PATCH 2/5] fix: tweak HistoryFilter to match existing styles

---
 components/HistoryView/HistoryFilter.tsx | 190 ++++++++++++-----------
 1 file changed, 103 insertions(+), 87 deletions(-)

diff --git a/components/HistoryView/HistoryFilter.tsx b/components/HistoryView/HistoryFilter.tsx
index b36d1b06..a47a1d91 100644
--- a/components/HistoryView/HistoryFilter.tsx
+++ b/components/HistoryView/HistoryFilter.tsx
@@ -9,6 +9,7 @@ import {
   PopoverTrigger,
   Text,
 } from "@livepeer/design-system";
+import { CheckIcon } from "@modulz/radix-icons";
 
 interface HistoryFilterProps {
   selectedEventTypes: string[];
@@ -29,62 +30,66 @@ const HistoryFilter = ({
   allEventTypes,
   eventTypeLabels,
 }: HistoryFilterProps) => {
+  const hasActiveFilters = selectedEventTypes.length > 0;
+
   return (
     <Popover open={isOpen} onOpenChange={onOpenChange}>
       <PopoverTrigger asChild>
         <Button
           role="button"
+          size="2"
+          variant="neutral"
           css={{
-            display: "flex",
-            alignItems: "center",
-            justifyContent: "center",
-            backgroundColor: "$neutral4",
-            color: "$hiContrast",
+            minWidth: "unset",
             minHeight: "44px",
-            width: "120px",
-            padding: "$2 $3",
-            "&:hover": {
-              backgroundColor: "$neutral5",
-            },
+            display: "inline-flex",
+            alignItems: "center",
+            gap: "$2",
           }}
         >
-          <FilterIcon size={16} css={{ marginRight: "$1" }} />
-          <Text css={{ marginRight: "$2" }}>Filter</Text>
-          {selectedEventTypes.length > 0 && (
-            <Badge
+          <Flex css={{ alignItems: "center", gap: "$2" }}>
+            <FilterIcon
+              size={16}
+              css={{
+                color: hasActiveFilters ? "$primary11" : "$neutral11",
+              }}
+            />
+            <Text
+              size="2"
               css={{
-                backgroundColor: "$primary9",
-                color: "white",
-                borderRadius: "50%",
-                width: "20px",
-                height: "20px",
-                display: "flex",
-                alignItems: "center",
-                justifyContent: "center",
-                fontSize: "$1",
+                color: "$hiContrast",
                 fontWeight: 600,
-                padding: 0,
               }}
             >
-              {selectedEventTypes.length}
-            </Badge>
-          )}
+              Filter
+            </Text>
+          </Flex>
+          <Badge
+            size="1"
+            variant={hasActiveFilters ? "primary" : "neutral"}
+            css={{
+              width: 22,
+              justifyContent: "center",
+              flexShrink: 0,
+            }}
+          >
+            {selectedEventTypes.length}
+          </Badge>
         </Button>
       </PopoverTrigger>
       <PopoverContent
         data-history-filter-popover
         css={{
-          width: "280px",
-          backgroundColor: "$neutral4",
-          borderRadius: "$3",
+          width: 280,
+          borderRadius: "$4",
+          bc: "$neutral4",
           padding: 0,
           boxShadow:
             "0px 5px 14px rgba(0, 0, 0, 0.22), 0px 0px 2px rgba(0, 0, 0, 0.2)",
-          border: "1px solid $neutral6",
           zIndex: 9,
           display: "flex",
           flexDirection: "column",
-          maxHeight: "400px",
+          maxHeight: 400,
           marginRight: "$3",
           overflow: "hidden",
         }}
@@ -92,13 +97,13 @@ const HistoryFilter = ({
         onPointerLeaveCapture={undefined}
         placeholder={undefined}
       >
-        {/* Header - Sticky */}
         <Flex
           css={{
-            padding: "$3",
+            paddingLeft: "$3",
+            paddingRight: "$3",
+            paddingTop: "$2",
+            paddingBottom: "$2",
             borderBottom: "1px solid $neutral6",
-            borderTopLeftRadius: "$3",
-            borderTopRightRadius: "$3",
             alignItems: "center",
             justifyContent: "space-between",
             flexShrink: 0,
@@ -109,115 +114,126 @@ const HistoryFilter = ({
           }}
         >
           <Button
+            type="button"
+            size="1"
+            variant="neutral"
+            ghost
+            disabled={!hasActiveFilters}
             onClick={onClearFilters}
-            css={{
-              color: "$neutral11",
-              fontSize: "$2",
-              padding: "$1",
-              backgroundColor: "transparent",
-              "&:hover": {
-                color: "$hiContrast",
-                backgroundColor: "transparent",
-              },
-            }}
+            css={{ minWidth: "unset" }}
           >
             Clear
           </Button>
-          <Text css={{ fontWeight: 600, fontSize: "$3" }}>Filters</Text>
-          <Button
-            onClick={() => onOpenChange(false)}
+          <Text
+            variant="neutral"
+            size="1"
             css={{
-              color: "$primary11",
-              fontSize: "$2",
-              padding: "$1",
-              backgroundColor: "transparent",
-              "&:hover": {
-                backgroundColor: "transparent",
-              },
+              fontWeight: 600,
+              textTransform: "uppercase",
+              letterSpacing: "0.04em",
             }}
+          >
+            Filters
+          </Text>
+          <Button
+            type="button"
+            size="1"
+            variant="neutral"
+            ghost
+            onClick={() => onOpenChange(false)}
+            css={{ minWidth: "unset" }}
           >
             Done
           </Button>
         </Flex>
 
-        {/* Event type section - Scrollable */}
         <Flex
           data-history-filter-scrollable
           css={{
             flexDirection: "column",
             overflowY: "auto",
             flex: 1,
-            borderBottomLeftRadius: "$3",
-            borderBottomRightRadius: "$3",
           }}
         >
           <Box css={{ padding: "$3" }}>
             <Text
+              variant="neutral"
+              size="1"
               css={{
-                fontWeight: 500,
-                fontSize: "$2",
+                display: "block",
+                fontWeight: 600,
+                textTransform: "uppercase",
+                letterSpacing: "0.04em",
                 marginBottom: "$2",
-                color: "$hiContrast",
               }}
             >
               Event Type
             </Text>
-            <Flex css={{ flexDirection: "column", gap: "$2" }}>
+            <Flex css={{ flexDirection: "column", gap: "$1" }}>
               {allEventTypes.map((eventType) => {
                 const isChecked = selectedEventTypes.includes(eventType);
+
                 return (
                   <Flex
+                    as="button"
+                    type="button"
                     key={eventType}
                     css={{
+                      width: "100%",
                       alignItems: "center",
                       cursor: "pointer",
-                      padding: "$1",
-                      borderRadius: "$1",
+                      border: 0,
+                      backgroundColor: isChecked ? "$neutral3" : "transparent",
+                      boxShadow: isChecked
+                        ? "$colors$neutral5 0px 0px 0px 1px inset"
+                        : "none",
+                      padding: "$2",
+                      borderRadius: "$2",
+                      textAlign: "left",
+                      transition: "background-color 0.2s ease",
                       "&:hover": {
-                        backgroundColor: "$neutral5",
+                        backgroundColor: isChecked ? "$neutral4" : "$neutral6",
+                      },
+                      "&:focus-visible": {
+                        outline: "none",
+                        boxShadow: "inset 0 0 0 1px $colors$primary8",
                       },
                     }}
                     onClick={() => onToggleEventType(eventType)}
                   >
                     <Box
                       css={{
-                        width: "18px",
-                        height: "18px",
-                        border: "2px solid",
-                        borderColor: isChecked ? "$primary11" : "$neutral8",
+                        width: 18,
+                        height: 18,
+                        border: "1px solid",
+                        borderColor: isChecked ? "$primary8" : "$neutral7",
                         backgroundColor: isChecked
-                          ? "$primary11"
+                          ? "$primary9"
                           : "transparent",
                         borderRadius: "$1",
                         marginRight: "$2",
                         display: "flex",
                         alignItems: "center",
                         justifyContent: "center",
-                        transition: "all 0.2s",
+                        flexShrink: 0,
                       }}
                     >
                       {isChecked && (
                         <Box
-                          as="svg"
-                          width="12"
-                          height="12"
-                          viewBox="0 0 12 12"
-                          fill="none"
-                        >
-                          <path
-                            d="M2 6L4.5 8.5L10 3"
-                            stroke="white"
-                            strokeWidth="2"
-                            strokeLinecap="round"
-                            strokeLinejoin="round"
-                          />
-                        </Box>
+                          as={CheckIcon}
+                          css={{
+                            width: 12,
+                            height: 12,
+                            color: "white",
+                          }}
+                        />
                       )}
                     </Box>
                     <Text
+                      size="2"
                       css={{
-                        fontSize: "$2",
                         color: "$hiContrast",
+                        fontWeight: isChecked ? 600 : 400,
                         userSelect: "none",
                       }}
                     >

From 3db8418280ddb476b19415ef3228c5abf788ce15 Mon Sep 17 00:00:00 2001
From: ECWireless <elliott@coopallc.com>
Date: Mon, 30 Mar 2026 09:01:46 -0600
Subject: [PATCH 3/5] feat: add poll and proposal event filters

---
 hooks/filter/useHistoryFilter.ts | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/hooks/filter/useHistoryFilter.ts b/hooks/filter/useHistoryFilter.ts
index 1498c312..792faba8 100644
--- a/hooks/filter/useHistoryFilter.ts
+++ b/hooks/filter/useHistoryFilter.ts
@@ -20,6 +20,8 @@ export const EVENT_TYPE_LABELS: Record<string, string> = {
   WithdrawFeesEvent: "Withdraw Fees",
   WinningTicketRedeemedEvent: "Winning Ticket Redeemed",
   ReserveFundedEvent: "Reserve Funded",
+  VoteEvent: "Poll Vote",
+  TreasuryVoteEvent: "Treasury Vote",
 };
 
 // All available event types

From 522ee0c2fd474b34de0428ca95a5b4f27684bda1 Mon Sep 17 00:00:00 2001
From: ECWireless <elliott@coopallc.com>
Date: Mon, 30 Mar 2026 10:05:36 -0600
Subject: [PATCH 4/5] fix: address copilot comments

---
 components/HistoryView/HistoryFilter.tsx |  1 +
 hooks/filter/useHistoryFilter.ts         | 16 ++++++++++------
 2 files changed, 11 insertions(+), 6 deletions(-)

diff --git a/components/HistoryView/HistoryFilter.tsx b/components/HistoryView/HistoryFilter.tsx
index a47a1d91..5f65fe45 100644
--- a/components/HistoryView/HistoryFilter.tsx
+++ b/components/HistoryView/HistoryFilter.tsx
@@ -178,6 +178,7 @@ const HistoryFilter = ({
                     as="button"
                     type="button"
                     key={eventType}
+                    aria-pressed={isChecked}
                     css={{
                       width: "100%",
                       alignItems: "center",
diff --git a/hooks/filter/useHistoryFilter.ts b/hooks/filter/useHistoryFilter.ts
index 792faba8..71d33939 100644
--- a/hooks/filter/useHistoryFilter.ts
+++ b/hooks/filter/useHistoryFilter.ts
@@ -56,11 +56,13 @@ export const useHistoryFilter = (mergedEvents: Event[]) => {
   useEffect(() => {
     if (!isFilterOpen) return;
 
+    const popoverSelector = "[data-history-filter-popover]";
+    let popoverElement = document.querySelector(popoverSelector);
+
     const handleScroll = (event: globalThis.Event) => {
-      // Find the popover element by data attribute
-      const popoverElement = document.querySelector(
-        "[data-history-filter-popover]"
-      );
+      if (!popoverElement || !popoverElement.isConnected) {
+        popoverElement = document.querySelector(popoverSelector);
+      }
 
       if (!popoverElement) {
         // Popover not found, close it
@@ -68,12 +70,14 @@ export const useHistoryFilter = (mergedEvents: Event[]) => {
         return;
       }
 
+      const currentPopoverElement = popoverElement;
+
       // Use composedPath to check if the scroll event originated from within the popover
       const path = event.composedPath();
       const isScrollingInsidePopover = path.some(
         (el) =>
-          el === popoverElement ||
-          (el instanceof Node && popoverElement.contains(el))
+          el === currentPopoverElement ||
+          (el instanceof Node && currentPopoverElement.contains(el))
       );
 
       if (isScrollingInsidePopover) {

From 998d2392a2b65e39b285dffa72d3e1388835fe3d Mon Sep 17 00:00:00 2001
From: ECWireless <elliott@coopallc.com>
Date: Mon, 30 Mar 2026 11:45:20 -0600
Subject: [PATCH 5/5] fix: render no history when no events

---
 components/HistoryView/index.tsx | 49 +++++++++++++++++++++++++++++++-
 1 file changed, 48 insertions(+), 1 deletion(-)

diff --git a/components/HistoryView/index.tsx b/components/HistoryView/index.tsx
index b4ea0aba..f10a44d8 100644
--- a/components/HistoryView/index.tsx
+++ b/components/HistoryView/index.tsx
@@ -201,6 +201,40 @@ const Index = () => {
     allEventTypes,
     eventTypeLabels,
   } = useHistoryFilter(mergedEvents);
+  const hasActiveFilters = selectedEventTypes.length > 0;
+
+  const isHydratingFilteredEvents = useMemo(() => {
+    const extendedVoteEventIds = new Set(
+      extendedVoteEventsData.map((event) => event.id)
+    );
+    const extendedTreasuryVoteEventIds = new Set(
+      extendedTreasuryVoteEventsData.map((event) => event.id)
+    );
+
+    return events.some((event) => {
+      if (hasActiveFilters && !selectedEventTypes.includes(event.__typename)) {
+        return false;
+      }
+
+      if (isVoteEvent(event)) {
+        return !extendedVoteEventIds.has(event.id);
+      }
+
+      if (isTreasuryVoteEvent(event)) {
+        return !extendedTreasuryVoteEventIds.has(event.id);
+      }
+
+      return false;
+    });
+  }, [
+    events,
+    extendedTreasuryVoteEventsData,
+    extendedVoteEventsData,
+    hasActiveFilters,
+    isTreasuryVoteEvent,
+    isVoteEvent,
+    selectedEventTypes,
+  ]);
 
   if (error) {
     console.error(error);
@@ -302,9 +336,22 @@ const Index = () => {
         <Box css={{ paddingBottom: "$3" }}>
           {filteredEvents.length > 0 ? (
             filteredEvents.map((event, i: number) => renderSwitch(event, i))
+          ) : isHydratingFilteredEvents ? (
+            <Flex
+              css={{
+                paddingTop: "$3",
+                width: "100%",
+                justifyContent: "center",
+                alignItems: "center",
+              }}
+            >
+              <Spinner />
+            </Flex>
           ) : (
             <Box css={{ paddingTop: "$3", color: "$neutral11" }}>
-              No events match the selected filters
+              {hasActiveFilters
+                ? "No events match the selected filters"
+                : "No history"}
             </Box>
           )}
         </Box>