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
- Create
src/components/transaction/TransactionFilters.tsx.
- 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.
- Render a group of toggle buttons for
types and a <select> for asset. Use Radix UI ToggleGroup for the type buttons.
- All interactive elements must have visible labels and keyboard support.
- Export from
src/index.ts.
- Export the
TransactionFilters value type as TransactionFilterState from src/types/index.ts.
- Write tests: toggling a type calls
onChange with updated array; selecting an asset calls onChange.
Definition of Done
Summary
TransactionHistoryrenders a flat list with no filtering. A companionTransactionFilterscomponent should provide controlled filter state that consumers can wire up.Implementation Steps
src/components/transaction/TransactionFilters.tsx.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.typesand a<select>forasset. Use Radix UIToggleGroupfor the type buttons.src/index.ts.TransactionFiltersvalue type asTransactionFilterStatefromsrc/types/index.ts.onChangewith updated array; selecting an asset callsonChange.Definition of Done
ToggleGroupused for type filters.TransactionFilterStatetype exported.