fix(explorer): prevent block skipping in live view

The live block view could skip blocks when multiple blocks arrived faster
than they could be fetched. The issue was that useBlock hook only fetches
the latest blockNumber value - if blocks N and N+1 arrive while N is still
being fetched, the hook switches to fetching N+1 and block N is never added.

Fixed by maintaining a queue of pending block numbers and processing them
sequentially. Each block that arrives is added to the queue and fetched
in order, ensuring no blocks are skipped.

Author: Zygimantass

apps/explorer/src/lib/og-params.ts

@@ -162,7 +162,11 @@ export function buildAddressOgUrl(
 	}
 	if (params.accountType) {
 		search.set('accountType', params.accountType)
-		if (params.accountType === 'contract' && params.methods && params.methods.length > 0) {
+		if (
+			params.accountType === 'contract' &&
+			params.methods &&
+			params.methods.length > 0
+		) {
 			search.set(
 				'methods',
 				params.methods

apps/explorer/src/lib/og.ts

@@ -984,7 +984,10 @@ export async function buildAddressOgData(address: string): Promise<{
 		}
 		if (addressData.accountType) {
 			params.set('accountType', addressData.accountType)
-			if (addressData.accountType === 'contract' && addressData.methods.length > 0) {
+			if (
+				addressData.accountType === 'contract' &&
+				addressData.methods.length > 0
+			) {
 				const truncatedMethods = addressData.methods.map((m) =>
 					truncateOgText(m, 14),
 				)

apps/explorer/src/routes/_layout/address/$address.tsx

@@ -45,6 +45,7 @@ import {
 	useTransactionDataFromBatch,
 } from '#comps/TxTransactionRow'
 import { cx } from '#cva.config'
+import { type AccountType, getAccountType } from '#lib/account'
 import {
 	type ContractSource,
 	contractSourceQueryOptions,
@@ -58,7 +59,6 @@ import {
 	getContractInfo,
 } from '#lib/domain/contracts'
 import { parseKnownEvents } from '#lib/domain/known-events'
-import { type AccountType, getAccountType } from '#lib/account'
 import * as Tip20 from '#lib/domain/tip20'
 import { DateFormatter, HexFormatter, PriceFormatter } from '#lib/formatting'
 import { useIsMounted, useMediaQuery } from '#lib/hooks'

apps/explorer/src/routes/_layout/blocks.tsx

@@ -2,7 +2,7 @@ import { keepPreviousData, useQuery } from '@tanstack/react-query'
 import { createFileRoute, Link } from '@tanstack/react-router'
 import * as React from 'react'
 import type { Block } from 'viem'
-import { useBlock, useWatchBlockNumber } from 'wagmi'
+import { useWatchBlockNumber } from 'wagmi'
 import { getBlock } from 'wagmi/actions'
 import * as z from 'zod/mini'
 import { Midcut } from '#comps/Midcut'
@@ -48,11 +48,41 @@ function RouteComponent() {
 	const [liveBlocks, setLiveBlocks] = React.useState<Block[]>(() =>
 		queryData.blocks.slice(0, BLOCKS_PER_PAGE),
 	)
+	// Queue of block numbers waiting to be fetched
+	const pendingBlocksRef = React.useRef<bigint[]>([])
+	const isFetchingRef = React.useRef(false)
 	const { timeFormat, cycleTimeFormat, formatLabel } = useTimeFormat()
 
 	// Use loader data for initial render, then live updates
 	const currentLatest = latestBlockNumber ?? queryData.latestBlockNumber
 
+	// Process pending blocks queue sequentially
+	const processPendingBlocks = React.useCallback(async () => {
+		if (isFetchingRef.current || pendingBlocksRef.current.length === 0) return
+
+		isFetchingRef.current = true
+
+		while (pendingBlocksRef.current.length > 0) {
+			const blockNumber = pendingBlocksRef.current.shift()
+			if (blockNumber === undefined) continue
+			try {
+				const block = await getBlock(config, { blockNumber })
+				if (block) {
+					setLiveBlocks((prev) => {
+						// Don't add if already exists
+						if (prev.some((b) => b.number === block.number)) return prev
+						// Prepend new block and keep only BLOCKS_PER_PAGE
+						return [block, ...prev].slice(0, BLOCKS_PER_PAGE)
+					})
+				}
+			} catch {
+				// Block fetch failed, skip it
+			}
+		}
+
+		isFetchingRef.current = false
+	}, [])
+
 	// Watch for new blocks (only on page 1 when live)
 	useWatchBlockNumber({
 		pollingInterval: 500, // Fast polling for snappy updates
@@ -68,32 +98,15 @@ function RouteComponent() {
 					setTimeout(() => {
 						recentlyAddedBlocks.delete(blockNumber.toString())
 					}, 400)
+
+					// Add to pending queue and start processing
+					pendingBlocksRef.current.push(blockNumber)
+					processPendingBlocks()
 				}
 			}
 		},
 	})
 
-	// Fetch the latest block when block number changes (for live updates on page 1)
-	const { data: latestBlock } = useBlock({
-		blockNumber: latestBlockNumber,
-		query: {
-			enabled: live && page === 1 && latestBlockNumber !== undefined,
-			staleTime: Number.POSITIVE_INFINITY, // Block data never changes
-		},
-	})
-
-	// Add new blocks as they arrive
-	React.useEffect(() => {
-		if (!live || page !== 1 || !latestBlock) return
-
-		setLiveBlocks((prev) => {
-			// Don't add if already exists
-			if (prev.some((b) => b.number === latestBlock.number)) return prev
-			// Prepend new block and keep only BLOCKS_PER_PAGE
-			return [latestBlock, ...prev].slice(0, BLOCKS_PER_PAGE)
-		})
-	}, [latestBlock, live, page])
-
 	// Re-initialize when navigating back to page 1 with live mode
 	React.useEffect(() => {
 		if (page === 1 && live && queryData.blocks) {

apps/explorer/src/routes/_layout/tx/$hash.tsx

@@ -31,9 +31,9 @@ import { cx } from '#cva.config.ts'
 import { autoloadAbiQueryOptions, lookupSignatureQueryOptions } from '#lib/abi'
 import { apostrophe } from '#lib/chars'
 import type { KnownEvent } from '#lib/domain/known-events'
+import type { FeeBreakdownItem } from '#lib/domain/receipt'
 import { isTip20Address } from '#lib/domain/tip20'
 import { PriceFormatter } from '#lib/formatting'
-import type { FeeBreakdownItem } from '#lib/domain/receipt'
 import { useCopy, useMediaQuery } from '#lib/hooks'
 import { buildOgImageUrl, buildTxDescription } from '#lib/og'
 import { LIMIT, type TxData, txQueryOptions } from '#lib/queries'