Problem
Three issues in ContractEventFeed affect usability, filtering, and event detail display.
1. ContractEventFeed has no event type filter
All event types (transfer, mint, burn, approve, and unknown types) are shown together with no way to filter. A project monitoring only transfer events must scroll through all event types. A simple type filter (checkboxes or a multi-select) would make the feed much more useful.
2. Event value is rendered as raw JSON without any formatting hints
JSON.stringify(event.value, null, 2) is rendered in a <pre> block. For large or deeply nested contract return values, this is unreadable. A collapsible JSON tree viewer or at minimum a "Show more / Show less" toggle for large values would improve readability.
3. ContractEventFeed does not indicate when the last successful poll occurred
When polling is active, users have no way to know if the feed is up to date or stalled. A "Last updated: 12s ago" timestamp that updates every second would give confidence that the live feed is working.
Solution
- Add a
filterTypes?: string[] prop that defaults to all types; render a set of toggle buttons above the list to filter by event type.
- Add a
maxValueLength prop (default 200 chars) — values longer than this get a "Show more" toggle.
- Track
lastUpdatedAt in state and render a relative time string ("Updated just now", "Updated 12s ago") in the card header.
Acceptance Criteria
Note for Contributors: Write a clear PR description. Include a screenshot of the filter toggles and the "last updated" timestamp in the card header.
Problem
Three issues in
ContractEventFeedaffect usability, filtering, and event detail display.1.
ContractEventFeedhas no event type filterAll event types (
transfer,mint,burn,approve, and unknown types) are shown together with no way to filter. A project monitoring onlytransferevents must scroll through all event types. A simple type filter (checkboxes or a multi-select) would make the feed much more useful.2. Event
valueis rendered as raw JSON without any formatting hintsJSON.stringify(event.value, null, 2)is rendered in a<pre>block. For large or deeply nested contract return values, this is unreadable. A collapsible JSON tree viewer or at minimum a "Show more / Show less" toggle for large values would improve readability.3.
ContractEventFeeddoes not indicate when the last successful poll occurredWhen polling is active, users have no way to know if the feed is up to date or stalled. A "Last updated: 12s ago" timestamp that updates every second would give confidence that the live feed is working.
Solution
filterTypes?: string[]prop that defaults to all types; render a set of toggle buttons above the list to filter by event type.maxValueLengthprop (default 200 chars) — values longer than this get a "Show more" toggle.lastUpdatedAtin state and render a relative time string ("Updated just now", "Updated 12s ago") in the card header.Acceptance Criteria
npm run buildpasses