Aggressive optimisation and protection

[Camillebzd]

• Reduce MAX_BLOCKS to 200 in both trackers. The UI is virtualized and only shows what's visible — 5,000 blocks of history is far more than needed.
• Use in-place mutation inside setBlocks for the common case of updating only the last block. Instead of [...prev.slice(0, -1), newLastBlock], you can mutate prev[prev.length - 1] and return a new array reference via [...prev] — this avoids copying every transaction array on each event.
• Cap the slow motion queue in use-blockchain-slow-motion.ts with a MAX_QUEUE_SIZE — drop the newest events when exceeded.
• Emptying the contract labels data when data goes to big on FE side.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
monode	Ready	Preview, Comment	Apr 14, 2026 2:29pm

[greptile-apps]

Greptile Summary

This PR applies several frontend performance optimisations: MAX_BLOCKS is cut from 5 000 to 200 in both trackers, prev.map() / spread copies are replaced with slice()-based targeted updates in the block-state and block-execution hooks, a stale-closure bug in the requestAnimationFrame scroll path is fixed via a length ref, a 10 000-event cap is added to the slow-motion queue, and the contract-labels cache is bounded at 500 entries.

Two concerns raised in prior review threads remain open: the queue cap silently drops the newest events (leaving block-state transitions permanently missing after overflow), and the label-cache guard nukes the entire cache rather than evicting selectively (causing a visible label flash on re-fetch).

Confidence Score: 4/5

• Safe to merge after the two open P1 concerns (queue drop direction and label-cache flash) are addressed.
• The optimisation work is solid — targeted slice() updates, MAX_BLOCKS trim, and the rAF stale-closure fix are all correct. Two P1 issues from prior review threads remain unresolved: the slow-motion queue silently drops newest events on overflow (leaving block states permanently missing) and the contract-labels cache wipe causes a visible label flash. The new comments in this review are both P2 style suggestions that do not block merge.
• frontend/hooks/use-blockchain-slow-motion.ts and frontend/hooks/use-contract-labels.ts — both have open P1 issues from prior review threads.

Important Files Changed

Filename	Overview
frontend/hooks/use-block-execution-tracker.ts	MAX_BLOCKS cut to 200; spread-copies replaced with slice()-based targeted updates via replaceLastBlock/replaceBlockAt. Helper functions are pure but defined inside the component, so each render recreates them even though the memoised handleEvent only ever uses the first copies.
frontend/hooks/use-block-state-tracker.ts	MAX_BLOCKS cut to 200; BlockQC/BlockFinalized/BlockVerified handlers replaced with findIndex + slice() in-place update — clean and correct.
frontend/hooks/use-blockchain-scroll.ts	Adds sortedBlocksLengthRef to fix the stale-closure bug in rAF callbacks; visibility-change handler correctly switches to the ref. The sortedBlocks.length dependency on the visibility useEffect is now redundant and causes the listener to re-register on every block addition.
frontend/hooks/use-blockchain-slow-motion.ts	Adds MAX_QUEUE_SIZE guard; however, as noted in a prior review thread, overflow silently drops newest events rather than oldest, permanently losing block-state transitions during a capped slow-motion session.
frontend/hooks/use-contract-labels.ts	Adds MAX_CACHED_LABELS guard; however the implementation nukes the entire cache rather than evicting only old entries, causing a visible label-flash while the async re-fetch completes (noted in a prior review thread).

Sequence Diagram

sequenceDiagram
    participant BE as Backend Events
    participant QE as queueEvent
    participant Q as eventQueueRef
    participant SI as setInterval
    participant ST as setBlocks
    participant UI as React UI

    BE->>QE: event arrives
    alt slow motion active
        QE->>Q: "push if length < MAX_QUEUE_SIZE"
        note over Q: overflow silently drops newest events
        SI->>Q: shift chunk up to N BlockStart events
        SI->>ST: onFlushEvents(chunk)
    else normal mode
        QE->>ST: onProcessEvent(event)
    end
    ST->>ST: findIndex + slice() targeted update
    ST->>UI: new blocks array shallow copy
    note over UI: trimmed to 200 blocks max

Loading

_{Reviews (2): Last reviewed commit: "lint" | Re-trigger Greptile}

[Copilot]

Pull request overview

This PR focuses on reducing memory/CPU overhead in the blockchain trackers and related hooks by limiting retained history, avoiding heavier array operations in hot paths, and preventing unbounded buffering.

Changes:

• Reduced retained block history size in both block trackers.
• Added a maximum bound to the slow-motion event queue.
• Adjusted scroll-to-end behavior to avoid stale sortedBlocks.length in rAF callbacks.
• Added a cache-size cap mechanism for contract labels.

Reviewed changes

Copilot reviewed 5 out of 5 changed files in this pull request and generated 4 comments.

Show a summary per file

File	Description
frontend/hooks/use-contract-labels.ts	Adds a cache cap for resolved contract labels/addresses.
frontend/hooks/use-blockchain-slow-motion.ts	Adds a max size limit to the slow-motion event queue.
frontend/hooks/use-blockchain-scroll.ts	Uses a ref to avoid rAF closures reading stale block list lengths.
frontend/hooks/use-block-state-tracker.ts	Reduces max tracked blocks and optimizes state updates to avoid full map().
frontend/hooks/use-block-execution-tracker.ts	Reduces max tracked blocks and optimizes updates to avoid rebuilding large arrays.

Comments suppressed due to low confidence (1)

frontend/hooks/use-block-execution-tracker.ts:53

• handleEvent is memoized with an empty dependency list but closes over replaceLastBlock / replaceBlockAt, which are re-created each render. With eslint-config-next this typically triggers react-hooks/exhaustive-deps, and it also makes the callback’s captured helpers implicitly “frozen” to the initial render. Consider moving these helpers to module scope (pure functions) or memoizing them and including them in the dependency array.

  // Handle real-time events from the backend
  const handleEvent = useCallback((event: SerializableEventData) => {
    switch (event.payload.type) {
      case 'BlockStart': {
        const payload = event.payload
        const blockNumber = event.block_number || payload.block_number

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[Camillebzd]

@greptile-apps, I updated the description rereview