fix(slashing): implement deduplication for real-time slashing event feed

[Mona-i]

Real-Time Slashing Event Feed Duplicate Display Under WebSocket Reconnection

Closes #39

Summary

This PR implements comprehensive deduplication logic to prevent duplicate slashing events in the real-time feed when the WebSocket reconnects and the server sends a catch-up burst of events.

Changes

1. New Types (src/types/slashing.ts)

• SlashingEvent: Core event type with id, nodeId, timestamp, amount, slot, epoch, seq fields
• UseSlashingStreamOptions and UseSlashingStreamResult: Hook configuration and return types

2. WebSocket Reconnect Hook (src/hooks/useWebSocketReconnect.ts)

• Automatic WebSocket reconnection with exponential backoff
• Tracks last event ID for server-side catch-up logic
• Sends x-last-event-id header on reconnect
• Parses x-catchup-from header from server
• Handles connection lifecycle (open, message, close, error)

3. Slashing Stream Hook (src/hooks/useSlashingStream.ts)

• Layer 1 Dedup: Map<eventId, timestamp> with 5-minute TTL
• Layer 2 Dedup: Array filter in setEvents callback to prevent duplicates
• Layer 3 Dedup: React key reconciliation using event.id
• Periodic cleanup of expired event IDs (every 60 seconds)
• Validates incoming events before processing
• Maintains up to 1000 events in memory

4. Slashing Event Feed Component (src/components/slashing/SlashingEventFeed.tsx)

• Component-level dedup using useRef<Set> for displayed event IDs
• Displays events in chronological order (newest first)
• Shows connection status indicator
• Error handling and display
• Limits displayed events to 50 while tracking up to 1000 in memory

5. Comprehensive Test Suite (src/hooks/tests/useSlashingStream.test.ts)

• Test for WebSocket reconnection with catch-up (3-event scenario)
• Test for rapid duplicate arrivals
• Test for dedup across multiple reconnections
• Test for TTL expiration behavior

Deduplication Invariant

The implementation ensures: ∀ event_id: count(feed_events[event_id]) ≤ 1

Testing

All tests pass. The implementation handles:

• Network disconnections (50ms-5s)
• Catch-up bursts of up to 5 events
• Partial overlap between client-received and catch-up events
• Multiple reconnection cycles
• TTL-based cleanup

Architecture

• Triple-layer deduplication prevents duplicates at hook, component, and React levels
• Server can send x-last-event-id header for server-side filtering
• Client sends x-last-event-id on reconnect for catch-up optimization
• WebSocket headers enable intelligent catch-up without duplicate filtering burden