Use sockets to update latest block/batch on home page#3353
Use sockets to update latest block/batch on home page#3353
Conversation
|
Important Review skippedAuto reviews are disabled on this repository. To trigger a review, include ⚙️ Run configurationConfiguration used: Repository UI Review profile: CHILL Plan: Pro Run ID: You can disable this status message by setting the Use the checkbox below for a quick retry:
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![cursor[bot]](https://avatars.githubusercontent.com/in/1210556?s=60&v=4){kind=small}
There was a problem hiding this comment.
Cursor Bugbot has reviewed your changes and found 2 potential issues.
❌ Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, enable autofix in the Cursor dashboard.
Reviewed by Cursor Bugbot for commit 2338b24. Configure here.
| channel: blocksChannel, | ||
| event: 'new_block', | ||
| handler: handleNewBlockMessage, | ||
| }); |
There was a problem hiding this comment.
Duplicate socket handler updates same query cache
Low Severity
handleNewBlockMessage in Stats.tsx nearly duplicates the same handler in LatestBlocks.tsx (lines 62–73). Both components fetch general:homepage_blocks, subscribe to the same blocks:new_block socket channel, and call setQueryData on the same React Query cache key. Since both are always rendered together on the home page (confirmed in Home.tsx), every new block message triggers two redundant cache updates. This increases maintenance burden and risks divergent behavior if one handler is updated but not the other.
Additional Locations (1)
Triggered by project rule: Bugbot PR Review Rules
Reviewed by Cursor Bugbot for commit 2338b24. Configure here.
| label: statsData?.total_blocks?.title || 'Total blocks', | ||
| value: Number(statsData?.total_blocks?.value || apiData?.total_blocks).toLocaleString(), | ||
| label: 'Latest block', | ||
| value: Number(blocksQuery.data?.[0]?.height || statsData?.total_blocks?.value || apiData?.total_blocks).toLocaleString(), |
There was a problem hiding this comment.
Fallback value semantically mismatches "Latest block" label
Low Severity
When blocksQuery.data is an empty array (no blocks returned by API), the value falls back to statsData?.total_blocks?.value or apiData?.total_blocks, which represent the total block count, not the latest block height. The label reads "Latest block" but the displayed number would be total blocks (off by one from the actual latest height). The falsy check on height also means block height 0 would incorrectly trigger this fallback path.
Reviewed by Cursor Bugbot for commit 2338b24. Configure here.
|
You have used all of your free Bugbot PR reviews. To receive reviews on all of your PRs, visit the Cursor dashboard to activate Pro and start your 14-day free trial. |
|
|
||
| const isPlaceholderData = statsQuery.isPlaceholderData || apiQuery.isPlaceholderData; | ||
| const latestBlockQueryKey = React.useMemo(() => [ ...getResourceKey('general:homepage_blocks'), 'stats_latest_block' ], []); | ||
| const latestBlockQuery = useApiQuery('general:homepage_blocks', { |
There was a problem hiding this comment.
We already fetch the latest blocks on this page. Since the query key is different here, will there be two requests on the initial load?
Will the data be fetched on rollup instances where we don't display block information?
There was a problem hiding this comment.
I think we need to restructure this component.
Since updates to the latest block number can occur very frequently, the entire component will re-render, which is inefficient. It would be better to move the LatestBlock widget to a separate component and encapsulate all the necessary logic there. This way, the re-render will only affect that specific part of the tree.
2 participants
Description and Related Issue(s)
Resolves #3245
Checklist for PR author
Note
Medium Risk
Introduces live socket-driven cache updates for homepage stats, which can cause stale/incorrect UI if event payloads or query keys don’t match expectations, but changes are localized to the homepage widgets.
Overview
Homepage stats now derive the Latest block value from the
general:homepage_blocksendpoint (with a stub placeholder) instead of treating it as a "total blocks" metric, and the widget label is updated accordingly (including degraded/fallback UI and mocks).Adds websocket subscriptions on the homepage stats panel to push real-time updates into the React Query cache for
blocks:new_blockand (for Arbitrum/zkEVM) latest batch events, with guardrails to disable sockets during placeholder/error states and to de-duplicate/sort incoming items.Reviewed by Cursor Bugbot for commit 2338b24. Bugbot is set up for automated code reviews on this repo. Configure here.