Skip to content

feat: add TransactionFilters component for filtering history by type and asset #5

Description

@rayeberechi

Summary

TransactionHistory renders a flat list with no filtering. A companion TransactionFilters component should provide controlled filter state that consumers can wire up.

Implementation Steps

  1. Create src/components/transaction/TransactionFilters.tsx.
  2. Props:
    • types: TransactionRecord['type'][] — available type options.
    • assets: string[] — available asset codes.
    • value: { types: TransactionRecord['type'][]; asset: string | null } — controlled value.
    • onChange: (filters: typeof value) => void.
    • className?: string.
  3. Render a group of toggle buttons for types and a <select> for asset. Use Radix UI ToggleGroup for the type buttons.
  4. All interactive elements must have visible labels and keyboard support.
  5. Export from src/index.ts.
  6. Export the TransactionFilters value type as TransactionFilterState from src/types/index.ts.
  7. Write tests: toggling a type calls onChange with updated array; selecting an asset calls onChange.

Definition of Done

  • Fully controlled component (no internal state).
  • Radix UI ToggleGroup used for type filters.
  • TransactionFilterState type exported.
  • Keyboard accessible.
  • Tests pass.

Metadata

Metadata

Assignees

No one assigned

    Labels

    enhancementNew feature or requesthelp wantedExtra attention is needed

    Type

    No type

    Fields

    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions