Add History Filter Feature (Fixes Issue #511)

[Roaring30s]

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:

1. Additional Features Needed:

   • Are there other filter criteria users would find useful? (there was mention of orchestrator viewing votes)

2. 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]

@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]

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.

[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.

[ECWireless]

@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.

Addressed in 49ef77c. See #610 for screenshot.