chore(frontend): state optimizations (#92)

* remove useless events 25k array from useEvent and event context

* reduce block state tracker max amount of data to 5k instead of 15k

Author: Camillebzd

frontend/contexts/events-context.tsx

@@ -30,7 +30,6 @@ interface ServerMessage {
 interface EventsContextValue {
   accountAccesses: AccessEntry<string>[]
   storageAccesses: AccessEntry<[string, string]>[]
-  events: SerializableEventData[]
   isConnected: boolean
   subscribe: (callback: (event: SerializableEventData) => void) => () => void
   subscribeToTps: (callback: (tps: number) => void) => () => void
@@ -43,7 +42,6 @@ interface EventsProviderProps {
 const EventsContext = createContext<EventsContextValue | null>(null)
 
 const RECONNECT_DELAY = 3000
-const MAX_EVENTS_STORED = 25000
 
 /**
  * A context provider for the events context.
@@ -57,7 +55,6 @@ export function EventsProvider({ children }: EventsProviderProps) {
   const [storageAccesses, setStorageAccesses] = useState<
     AccessEntry<[string, string]>[]
   >([])
-  const [events, setEvents] = useState<SerializableEventData[]>([])
   const [isConnected, setIsConnected] = useState(false)
   const wsRef = useRef<WebSocket | null>(null)
   const subscribersRef = useRef<
@@ -104,9 +101,6 @@ export function EventsProvider({ children }: EventsProviderProps) {
 
             if (message.Events && message.Events.length > 0) {
               const newEvents = message.Events
-              setEvents((prevEvents) =>
-                [...prevEvents, ...newEvents].slice(-MAX_EVENTS_STORED),
-              )
 
               // Notify all subscribers
               newEvents.forEach((evt) => {
@@ -177,7 +171,6 @@ export function EventsProvider({ children }: EventsProviderProps) {
   const value: EventsContextValue = {
     accountAccesses,
     storageAccesses,
-    events,
     isConnected,
     subscribe,
     subscribeToTps,

frontend/hooks/use-block-state-tracker.ts

@@ -7,7 +7,7 @@ import { formatTimestamp } from '@/lib/timestamp'
 import type { Block, BlockState } from '@/types/block'
 import type { SerializableEventData } from '@/types/events'
 
-const MAX_BLOCKS = 15000
+const MAX_BLOCKS = 5000
 
 interface UseBlockStateTrackerReturn {
   blocks: Block[]

frontend/hooks/use-events.ts

@@ -13,19 +13,19 @@ interface UseEventsOptions {
  *
  * @example Basic usage
  * ```tsx
- * const { events, isConnected } = useEvents()
+ * const { isConnected } = useEvents()
  * ```
  *
  * @example With event callback
  * ```tsx
- * const { events, isConnected } = useEvents({
+ * const { isConnected } = useEvents({
  *   onEvent: (event) => console.log('New event:', event)
  * })
  * ```
  */
 export function useEvents(options: UseEventsOptions = {}) {
   const { onEvent } = options
-  const { accountAccesses, storageAccesses, events, isConnected, subscribe } =
+  const { accountAccesses, storageAccesses, isConnected, subscribe } =
     useEventsContext()
   const onEventRef = useRef(onEvent)
 
@@ -45,5 +45,5 @@ export function useEvents(options: UseEventsOptions = {}) {
     return unsubscribe
   }, [onEvent, subscribe])
 
-  return { accountAccesses, storageAccesses, events, isConnected }
+  return { accountAccesses, storageAccesses, isConnected }
 }