Add History Filter Feature (Fixes Issue #511) by Roaring30s · Pull Request #513 · livepeer/explorer

Roaring30s · 2026-01-28T02:18:57Z

Overview

This PR adds a filtering system to the account history view, allowing users to filter transaction events by event type. The implementation includes a new HistoryFilter component and a useHistoryFilter hook that manages filter state and behavior.

Fixes: #511

What Was Added

New Files

hooks/filter/useHistoryFilter.ts - Custom hook for managing filter state and logic
components/HistoryView/HistoryFilter.tsx - Filter popover component

Modified Files

components/HistoryView/index.tsx - Integrated the filter component into the history view

Component Walkthrough

`HistoryFilter` Component

The HistoryFilter component renders a filter button and popover interface:

Filter Button (PopoverTrigger)

Displays a "Filter" button with a filter icon
Shows a badge with the count of active filters when filters are selected
Styled with neutral background and hover states

Popover Content

Sticky Header: Contains three action buttons:
- Clear - Removes all selected filters
- Filters - Title text
- Done - Closes the popover
The header uses position: sticky to remain visible while scrolling through filter options
Rounded top corners to match the popover container

Scrollable Filter List

Scrollable container (max height: 400px) with rounded bottom corners
Lists all available event types as checkboxes
Each filter option:
- Custom checkbox with checkmark icon when selected
- Hover states for better UX
- Clickable row to toggle selection
- Displays human-readable event type labels

Styling Details

Popover has proper spacing (marginRight: "$3") on all screen sizes to prevent edge touching
Overflow hidden on container to clip scrollbar within rounded corners
Responsive design that works on mobile and desktop

Hook Walkthrough

`useHistoryFilter` Hook

The hook manages all filter-related state and logic:

State Management

selectedEventTypes - Array of currently selected event type strings
isFilterOpen - Boolean controlling popover visibility

Event Type Configuration

EVENT_TYPE_LABELS - Maps GraphQL event type names to human-readable labels:
- 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_EVENT_TYPES - Array of all available event types

Filtering Logic

filteredEvents - Memoized filtered array of events
- Returns all events when no filters are selected
- Filters by __typename when filters are active
toggleEventType - Adds/removes event types from selection
clearFilters - Resets all selected filters

UX Behavior

Auto-close on page scroll: When the popover is open and the user scrolls the main page (outside the popover), it automatically closes. This prevents the popover from blocking the navbar when users are scrolling down the page.
Uses composedPath() to detect if scroll originated from within the popover
Only closes when scrolling outside the popover area

Features

✅ Filter events by event type
✅ Visual indicator (badge) showing number of active filters
✅ Clear all filters button
✅ Sticky header that remains visible while scrolling filter options
✅ Auto-close popover when scrolling the main page
✅ Responsive design with proper spacing on all screen sizes

Integration

The filter is integrated into the HistoryView component:

Filter button positioned at the top-right of the history list
Filtered events are displayed in the existing infinite scroll list
Shows "No events match the selected filters" when no results match

Note: First Pass Implementation

This is the first pass of the history filter feature, implemented to gather feedback on:

Additional Features Needed:
- Are there other filter criteria users would find useful? (there was mention of orchestrator viewing votes)
Filter Button Location:
- Currently positioned at the top-right of the history list
- Open to feedback on whether this placement works well or if another location would be better

Let me know and I can add the changes.

vercel · 2026-01-28T02:19:01Z

@Roaring30s is attempting to deploy a commit to the Livepeer Foundation Team on Vercel.

A member of the Team first needs to authorize it.

vercel · 2026-01-28T02:45:30Z

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
explorer-arbitrum-one	Ready	Preview, Comment	Feb 20, 2026 0:14am

rickstaa

@Roaring30s this is amazing! I do wonder if we can improve the styling a bit to make it fit more into the original explorer styling and make it more modern. Let's see if @thebeyondr can help. I also did notice the governance events are not shown.

vercel · 2026-02-20T00:16:18Z

hooks/filter/useHistoryFilter.ts

+};
+
+// Event type labels mapping
+export const EVENT_TYPE_LABELS: Record<string, string> = {


VoteEvent and TreasuryVoteEvent types are missing from EVENT_TYPE_LABELS and ALL_EVENT_TYPES, preventing users from filtering these governance events despite them being displayed in the history.

Copilot

Pull request overview

Adds an event-type filtering UI to the Account History view so users can narrow displayed history items by transaction/event kind (Issue #511).

Changes:

Introduces a useHistoryFilter hook to manage selected event types, filtered results, and popover open/close behavior.
Adds a HistoryFilter popover component (with badge count, clear/done actions, and a scroll-close behavior).
Integrates filtering into components/HistoryView/index.tsx by rendering filteredEvents instead of the full merged history.

Reviewed changes

Copilot reviewed 5 out of 5 changed files in this pull request and generated 3 comments.

Show a summary per file

File	Description
hooks/index.tsx	Re-exports the new `useHistoryFilter` hook for consumption via `"hooks"`.
hooks/filter/useHistoryFilter.ts	Implements filter state + filtered list derivation + scroll-to-close behavior.
components/Icons/FilterIcon.tsx	Adds a small filter SVG icon used by the filter button.
components/HistoryView/index.tsx	Wires the filter UI into the history view and switches rendering to `filteredEvents`.
components/HistoryView/HistoryFilter.tsx	Implements the popover UI for selecting event types to filter.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Copilot · 2026-02-20T00:37:03Z

hooks/filter/useHistoryFilter.ts

+    const handleScroll = (event: globalThis.Event) => {
+      // Find the popover element by data attribute
+      const popoverElement = document.querySelector(
+        "[data-history-filter-popover]"
+      );
+


The scroll handler does a document.querySelector('[data-history-filter-popover]') on every scroll event while the popover is open. Scroll events can fire very frequently, so this can become a hot path. Consider caching the element once when opening (or passing a ref from HistoryFilter into the hook) and reusing it inside handleScroll.

Suggested change

const handleScroll = (event: globalThis.Event) => {

// Find the popover element by data attribute

const popoverElement = document.querySelector(

"[data-history-filter-popover]"

);

// Cache the popover element once while the filter is open

const popoverElement = document.querySelector(

"[data-history-filter-popover]"

);

const handleScroll = (event: globalThis.Event) => {

Copilot · 2026-02-20T00:37:04Z

components/HistoryView/HistoryFilter.tsx

+                  <Flex
+                    key={eventType}
+                    css={{
+                      alignItems: "center",
+                      cursor: "pointer",
+                      padding: "$1",
+                      borderRadius: "$1",
+                      "&:hover": {
+                        backgroundColor: "$neutral5",
+                      },
+                    }}
+                    onClick={() => onToggleEventType(eventType)}
+                  >


The filter options are implemented as clickable Flex rows with a custom checkbox UI, but they don’t expose checkbox semantics (no role="checkbox", aria-checked, keyboard toggle with Space/Enter, or focus styling). This makes the filter list hard/impossible to use with keyboard and assistive tech. Use a semantic checkbox/input (or add proper ARIA roles + keyboard handlers) for each option.

Copilot · 2026-02-20T00:37:04Z

hooks/filter/useHistoryFilter.ts

+  WithdrawStakeEvent: "Withdraw Stake",
+  WithdrawFeesEvent: "Withdraw Fees",
+  WinningTicketRedeemedEvent: "Winning Ticket Redeemed",
+  ReserveFundedEvent: "Reserve Funded",


EVENT_TYPE_LABELS / ALL_EVENT_TYPES omits event types that are actually rendered in the history (e.g. VoteEvent and TreasuryVoteEvent in renderSwitch). As a result, users can’t filter for votes (one of the use-cases mentioned in #511). Add missing typenames to the label map (and consider a fallback label for unknown types to avoid rendering undefined).

Suggested change

ReserveFundedEvent: "Reserve Funded",

ReserveFundedEvent: "Reserve Funded",

VoteEvent: "Vote",

TreasuryVoteEvent: "Treasury Vote",

Roaring30s added 5 commits January 27, 2026 19:24

feat: add history filter to user account

bcb62d4

fix: apply linter and prettier

413be2f

fix: add margin on popover from window

ad8be21

fix: add UI changes to filter

1eafa8d

fix: remove auto scroll

f236eca

Roaring30s requested a review from ECWireless as a code owner January 28, 2026 02:18

vercel bot deployed to Preview January 28, 2026 02:47 View deployment

ECWireless added this to Explorer - Data Exposure Feb 2, 2026

github-project-automation bot moved this to Todo in Explorer - Data Exposure Feb 2, 2026

ECWireless added this to the Explorer Maintenance - Milestone 5 milestone Feb 2, 2026

ECWireless moved this from Todo to In Review in Explorer - Data Exposure Feb 2, 2026

Roaring30s and others added 2 commits February 5, 2026 18:40

Merge branch 'main' into history-filter

80f76d7

fix: remove lint error

2c8ea17

vercel bot deployed to Preview February 11, 2026 00:44 View deployment

rickstaa requested changes Feb 11, 2026

View reviewed changes

Merge branch 'main' into history-filter

866bea3

vercel bot deployed to Preview February 20, 2026 00:14 View deployment

vercel bot reviewed Feb 20, 2026

View reviewed changes

ECWireless requested a review from Copilot February 20, 2026 00:33

Copilot started reviewing on behalf of ECWireless February 20, 2026 00:33 View session

Copilot AI reviewed Feb 20, 2026

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Comments

Add History Filter Feature (Fixes Issue #511)#513

Add History Filter Feature (Fixes Issue #511)#513
Roaring30s wants to merge 8 commits intolivepeer:mainfrom
Roaring30s:history-filter

Roaring30s commented Jan 28, 2026 •

edited

Loading

Uh oh!

vercel bot commented Jan 28, 2026

Uh oh!

vercel bot commented Jan 28, 2026 •

edited

Loading

Uh oh!

rickstaa left a comment

Uh oh!

vercel bot Feb 20, 2026

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI Feb 20, 2026

Uh oh!

Copilot AI Feb 20, 2026

Uh oh!

Copilot AI Feb 20, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Comments

Conversation

Roaring30s commented Jan 28, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Overview

What Was Added

New Files

Modified Files

Component Walkthrough

HistoryFilter Component

Hook Walkthrough

useHistoryFilter Hook

Features

Integration

Note: First Pass Implementation

Uh oh!

vercel bot commented Jan 28, 2026

Uh oh!

vercel bot commented Jan 28, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

rickstaa left a comment

Choose a reason for hiding this comment

Uh oh!

vercel bot Feb 20, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Copilot AI Feb 20, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 20, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 20, 2026

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Roaring30s commented Jan 28, 2026 •

edited

Loading

`HistoryFilter` Component

`useHistoryFilter` Hook

vercel bot commented Jan 28, 2026 •

edited

Loading