Add slot filters for addresses' transactions

app/components/account/history/__tests__/HistoryFilterBar.spec.tsx

@@ -0,0 +1,174 @@
+/* eslint-disable no-restricted-syntax -- test assertions use RegExp for pattern matching */
+import { fireEvent, render, renderHook, screen } from '@testing-library/react';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+
+const replaceMock = vi.fn();
+let mockSearchString = '';
+
+vi.mock('next/navigation', () => ({
+    usePathname: () => '/address/testAddress',
+    useRouter: () => ({ replace: replaceMock }),
+    useSearchParams: () => new URLSearchParams(mockSearchString),
+}));
+
+// Must import after mocks
+import { HistoryFilterBar, useHistoryFilters } from '../HistoryFilterBar';
+
+function setSearch(search: string) {
+    mockSearchString = search;
+}
+
+beforeEach(() => {
+    replaceMock.mockClear();
+    setSearch('');
+});
+
+describe('useHistoryFilters', () => {
+    it('should return all-undefined when no params are set', () => {
+        setSearch('');
+        const { result } = renderHook(() => useHistoryFilters());
+        expect(result.current).toEqual({
+            blockTime: undefined,
+            slot: undefined,
+            status: undefined,
+        });
+    });
+
+    it('should parse both slot bounds from the gTFA filter paths', () => {
+        setSearch('slot.gte=100&slot.lte=200');
+        const { result } = renderHook(() => useHistoryFilters());
+        expect(result.current.slot).toEqual({ gte: 100, lte: 200 });
+    });
+
+    it('should ignore negative and non-numeric values', () => {
+        setSearch('slot.gte=-5&slot.lte=abc');
+        const { result } = renderHook(() => useHistoryFilters());
+        expect(result.current.slot).toBeUndefined();
+    });
+
+    it('should floor fractional values', () => {
+        setSearch('slot.gte=100.9');
+        const { result } = renderHook(() => useHistoryFilters());
+        expect(result.current.slot).toEqual({ gte: 100, lte: undefined });
+    });
+
+    it('should parse the status enum, rejecting unknown values', () => {
+        setSearch('status=failed');
+        const { result } = renderHook(() => useHistoryFilters());
+        expect(result.current).toMatchObject({ status: 'failed' });
+
+        setSearch('status=bogus');
+        const { result: rejected } = renderHook(() => useHistoryFilters());
+        expect(rejected.current).toMatchObject({ status: undefined });
+    });
+
+    it('should parse block-time bounds from the gTFA filter paths', () => {
+        setSearch('blockTime.gte=1700000000&blockTime.lte=1700100000');
+        const { result } = renderHook(() => useHistoryFilters());
+        expect(result.current.blockTime).toEqual({ gte: 1_700_000_000, lte: 1_700_100_000 });
+    });
+});
+
+describe('HistoryFilterBar', () => {
+    it('should show a single Filters button when no filter is active', () => {
+        render(<HistoryFilterBar />);
+        expect(screen.getByRole('button', { name: /^Filters$/ })).toBeInTheDocument();
+        expect(screen.queryByText(/Slot ≥:/)).not.toBeInTheDocument();
+        expect(screen.queryByText(/Slot ≤:/)).not.toBeInTheDocument();
+    });
+
+    it('should render a chip per active slot bound', () => {
+        render(<HistoryFilterBar slot={{ gte: 100, lte: 2_000_000 }} />);
+        expect(screen.getByText(/Slot ≥:\s*100/)).toBeInTheDocument();
+        // Use a regex since jsdom's toLocaleString thousand separator varies by ICU build.
+        expect(screen.getByText(/Slot ≤:\s*2[,.\s  ]?000[,.\s  ]?000/)).toBeInTheDocument();
+        expect(screen.getByRole('button', { name: /Edit filters/ })).toBeInTheDocument();
+    });
+
+    it('should clear a single slot bound when its chip × is clicked', () => {
+        setSearch('slot.gte=100&slot.lte=200');
+        render(<HistoryFilterBar slot={{ gte: 100, lte: 200 }} />);
+
+        fireEvent.click(screen.getByRole('button', { name: /Clear slot ≥ filter/ }));
+
+        expect(replaceMock).toHaveBeenCalledTimes(1);
+        const [href] = replaceMock.mock.calls[0];
+        expect(href).toBe('/address/testAddress?slot.lte=200');
+    });
+
+    it('should apply both slot bounds from the popover', () => {
+        render(<HistoryFilterBar />);
+
+        fireEvent.click(screen.getByRole('button', { name: /^Filters$/ }));
+        fireEvent.change(screen.getByPlaceholderText(/lower bound/), { target: { value: '100' } });
+        fireEvent.change(screen.getByPlaceholderText(/upper bound/), { target: { value: '500' } });
+        fireEvent.click(screen.getByRole('button', { name: /^Apply$/ }));
+
+        expect(replaceMock).toHaveBeenCalledTimes(1);
+        const [href] = replaceMock.mock.calls[0];
+        expect(href).toMatch(/slot\.gte=100/);
+        expect(href).toMatch(/slot\.lte=500/);
+    });
+
+    it('should preserve unrelated query params when updating the URL', () => {
+        setSearch('cluster=devnet&slot.gte=100');
+        render(<HistoryFilterBar slot={{ gte: 100 }} />);
+
+        fireEvent.click(screen.getByRole('button', { name: /Clear slot ≥ filter/ }));
+
+        const [href] = replaceMock.mock.calls[0];
+        expect(href).toBe('/address/testAddress?cluster=devnet');
+    });
+
+    it('should disable Apply and show an error when slot ≥ exceeds slot ≤', () => {
+        render(<HistoryFilterBar />);
+
+        fireEvent.click(screen.getByRole('button', { name: /^Filters$/ }));
+        fireEvent.change(screen.getByPlaceholderText(/lower bound/), { target: { value: '500' } });
+        fireEvent.change(screen.getByPlaceholderText(/upper bound/), { target: { value: '100' } });
+
+        const apply = screen.getByRole('button', { name: /^Apply$/ });
+        expect(apply).toBeDisabled();
+        expect(screen.getByText(/Slot ≥ must be/)).toBeInTheDocument();
+
+        fireEvent.click(apply);
+        expect(replaceMock).not.toHaveBeenCalled();
+    });
+
+    it('should apply the status select', () => {
+        render(<HistoryFilterBar />);
+
+        fireEvent.click(screen.getByRole('button', { name: /^Filters$/ }));
+        fireEvent.change(screen.getByLabelText('Status'), { target: { value: 'succeeded' } });
+        fireEvent.click(screen.getByRole('button', { name: /^Apply$/ }));
+
+        const [href] = replaceMock.mock.calls[0];
+        expect(href).toMatch(/status=succeeded/);
+    });
+
+    it('should render a chip for the status filter', () => {
+        render(<HistoryFilterBar status="failed" />);
+        expect(screen.getByText(/Status:\s*Failed/)).toBeInTheDocument();
+    });
+
+    it('should clear a single non-slot filter via its chip', () => {
+        setSearch('status=failed&slot.lte=200');
+        render(<HistoryFilterBar slot={{ lte: 200 }} status="failed" />);
+
+        fireEvent.click(screen.getByRole('button', { name: /Clear status filter/ }));
+
+        const [href] = replaceMock.mock.calls[0];
+        expect(href).toBe('/address/testAddress?slot.lte=200');
+    });
+
+    it('should clear all filters via Clear all', () => {
+        setSearch('slot.gte=100&slot.lte=500');
+        render(<HistoryFilterBar slot={{ gte: 100, lte: 500 }} />);
+
+        fireEvent.click(screen.getByRole('button', { name: /Edit filters/ }));
+        fireEvent.click(screen.getByRole('button', { name: /Clear all/ }));
+
+        const [href] = replaceMock.mock.calls[0];
+        expect(href).toBe('/address/testAddress');
+    });
+});

app/components/shared/ui/input.tsx

@@ -10,6 +10,9 @@ const inputVariants = cva(
         'font-normal font-mono',
         'flex h-9 w-full rounded border',
         'px-4 py-2.5 text-xs',
+        // Native date/time pickers render a dark calendar glyph that's invisible on
+        // our dark input backgrounds; invert it so it matches the light input text.
+        '[&::-webkit-calendar-picker-indicator]:invert',
         'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-offset-neutral-900',
         'disabled:cursor-not-allowed disabled:opacity-50',
         'aria-[invalid="true"]:!border-destructive aria-[invalid="true"]:focus-visible:ring-destructive',

app/features/transaction-history/ui/BaseTransactionHistoryCard.tsx

@@ -28,6 +28,8 @@ export type BaseTransactionHistoryCardProps = {
     foundOldest: boolean;
     onRefresh: () => void;
     onLoadMore: () => void;
+    headerActions?: ReactNode;
+    headerSubRow?: ReactNode;
 };
 
 export function BaseTransactionHistoryCard({
@@ -36,6 +38,8 @@ export function BaseTransactionHistoryCard({
     foundOldest,
     onRefresh,
     onLoadMore,
+    headerActions,
+    headerSubRow,
 }: BaseTransactionHistoryCardProps) {
     const hasTimestamps = rows.some(row => row.blockTime);
 
@@ -46,6 +50,8 @@ export function BaseTransactionHistoryCard({
                 analyticsSection="transaction_history_header"
                 refresh={onRefresh}
                 fetching={fetching}
+                actions={headerActions}
+                subHeader={headerSubRow}
             />
             <BaseTable ui="dashkit" variant="card" nowrap>
                 <BaseTable.Head>

app/features/transaction-history/ui/TransactionHistoryCard.tsx

@@ -1,25 +1,42 @@
 'use client';
 
+import {
+    HistoryFilterChips,
+    HistoryFilterTrigger,
+    useClearHistoryFilters,
+    useHistoryFilters,
+} from '@components/account/history/HistoryFilterBar';
 import { getTransactionRows } from '@components/account/HistoryCardComponents';
 import { ErrorCard } from '@components/common/ErrorCard';
 import { LoadingCard } from '@components/common/LoadingCard';
-import { useAccountHistory, useFetchAccountHistory } from '@providers/accounts/history';
+import {
+    useAccountHistory,
+    useFetchAccountHistory,
+    useHistoryFiltersSupported,
+    useResetAccountHistory,
+} from '@providers/accounts/history';
 import { FetchStatus } from '@providers/cache';
 import { PublicKey } from '@solana/web3.js';
-import { useEffect, useMemo } from 'react';
+import { useCallback, useEffect, useMemo, useRef } from 'react';
 
 import { BaseTransactionHistoryCard, type TransactionHistoryRowView } from './BaseTransactionHistoryCard';
 import { InstructionsCell } from './InstructionsCell';
 import { TransactionRawDataCell } from './TransactionRawDataCell';
 
 export function TransactionHistoryCard({ address }: { address: string }) {
     const pubkey = useMemo(() => new PublicKey(address), [address]);
+    const filters = useHistoryFilters();
+    const hasActiveFilters = Object.values(filters).some(value => value !== undefined);
+    const filtersKey = JSON.stringify(filters);
     const history = useAccountHistory(address);
-    const fetchAccountHistory = useFetchAccountHistory();
+    const fetchAccountHistory = useFetchAccountHistory(25, filters);
+    const resetHistory = useResetAccountHistory();
+    const filtersSupported = useHistoryFiltersSupported();
+    const clearFilters = useClearHistoryFilters();
 
     // Signatures only — the parsed transactions for instruction names are fetched lazily per row, one at a
     // time (see InstructionsCell), so the page never batch-hammers the RPC into 429s.
-    const refresh = () => fetchAccountHistory(pubkey, false, true);
+    const refresh = useCallback(() => fetchAccountHistory(pubkey, false, true), [fetchAccountHistory, pubkey]);
     const loadMore = () => fetchAccountHistory(pubkey, false);
 
     const rows: TransactionHistoryRowView[] = history?.data?.fetched
@@ -39,6 +56,27 @@ export function TransactionHistoryCard({ address }: { address: string }) {
         }
     }, [address]); // eslint-disable-line react-hooks/exhaustive-deps
 
+    // Refetch from scratch when any filter changes. The cache is keyed by address
+    // only, so we reset this address's entry (which also supersedes any in-flight
+    // request for it) before refetching to avoid mixing pre- and post-filter results
+    // in combineFetched.
+    const previousFiltersKey = useRef(filtersKey);
+    useEffect(() => {
+        if (previousFiltersKey.current !== filtersKey) {
+            previousFiltersKey.current = filtersKey;
+            resetHistory(address);
+            refresh();
+        }
+    }, [filtersKey, address, resetHistory, refresh]);
+
+    // If the endpoint turns out not to support filtering, drop any active filters so the
+    // (unfiltered) results aren't shown alongside misleading filter chips.
+    useEffect(() => {
+        if (!filtersSupported && hasActiveFilters) {
+            clearFilters();
+        }
+    }, [filtersSupported, hasActiveFilters, clearFilters]);
+
     if (!history?.data) {
         return !history || history.status === FetchStatus.Fetching ? (
             <LoadingCard message="Loading history" />
@@ -54,6 +92,8 @@ export function TransactionHistoryCard({ address }: { address: string }) {
             foundOldest={history.data.foundOldest}
             onRefresh={refresh}
             onLoadMore={loadMore}
+            headerActions={<HistoryFilterTrigger {...filters} />}
+            headerSubRow={hasActiveFilters ? <HistoryFilterChips {...filters} /> : undefined}
         />
     );
 }

app/providers/accounts/__tests__/history.spec.ts

@@ -9,13 +9,13 @@ describe('reconcile', () => {
     it('should ignore an empty refresh so a flaky RPC response cannot wipe loaded history or flip foundOldest', () => {
         const history = { fetched: [sig('a'), sig('b')], foundOldest: false };
 
-        const result = reconcile(history, { before: undefined, history: { fetched: [], foundOldest: true } });
+        const result = reconcile(history, { append: false, history: { fetched: [], foundOldest: true } });
 
         expect(result).toBe(history);
     });
 
     it('should still record an empty result on the first load (a genuinely empty account)', () => {
-        const result = reconcile(undefined, { before: undefined, history: { fetched: [], foundOldest: true } });
+        const result = reconcile(undefined, { append: false, history: { fetched: [], foundOldest: true } });
 
         expect(result?.fetched).toEqual([]);
         expect(result?.foundOldest).toBe(true);
@@ -25,17 +25,17 @@ describe('reconcile', () => {
         const history = { fetched: [sig('a')], foundOldest: false };
 
         const result = reconcile(history, {
-            before: undefined,
+            append: false,
             history: { fetched: [sig('b'), sig('a')], foundOldest: false },
         });
 
         expect(result?.fetched.map(s => s.signature)).toEqual(['b', 'a']);
     });
 
-    it('should keep the end-of-history signal when load-more (before set) returns empty', () => {
+    it('should keep the end-of-history signal when load-more (append) returns empty', () => {
         const history = { fetched: [sig('a')], foundOldest: false };
 
-        const result = reconcile(history, { before: 'a', history: { fetched: [], foundOldest: true } });
+        const result = reconcile(history, { append: true, history: { fetched: [], foundOldest: true } });
 
         expect(result?.fetched.map(s => s.signature)).toEqual(['a']);
         expect(result?.foundOldest).toBe(true);