feat: /blocks UI tweaks

apps/explorer/src/comps/DataGrid.tsx

@@ -176,7 +176,9 @@ export function DataGrid(props: DataGrid.Props) {
 			{/* Hide pagination when no items and not loading */}
 			{(totalItems > 0 || loading) && (
 				<div className="mt-auto">
-					{pagination === 'simple' ? (
+					{pagination !== 'default' && pagination !== 'simple' ? (
+						pagination
+					) : pagination === 'simple' ? (
 						<div className="flex flex-col items-center sm:flex-row sm:justify-between gap-[12px] border-t border-dashed border-card-border px-[16px] py-[12px] text-[12px] text-tertiary">
 							<Pagination.Simple
 								page={page}
@@ -252,7 +254,7 @@ export namespace DataGrid {
 		disableLastPage?: boolean
 		itemsLabel?: string
 		itemsPerPage?: number
-		pagination?: 'default' | 'simple'
+		pagination?: 'default' | 'simple' | React.ReactNode
 		emptyState?: React.ReactNode
 		flexible?: boolean
 	}

apps/explorer/src/comps/Pagination.tsx

@@ -99,10 +99,7 @@ export function Pagination(props: Pagination.Props) {
 						to="."
 						type="button"
 						resetScroll={false}
-						search={(previous) => ({
-							...previous,
-							page: totalPages,
-						})}
+						search={(previous) => ({ ...previous, page: totalPages })}
 						disabled={page >= totalPages || isPending}
 						className={cx(
 							'rounded-full! border border-base-border hover:bg-alt flex items-center justify-center cursor-pointer press-down aria-disabled:cursor-default aria-disabled:opacity-50 size-[24px] text-primary',
@@ -242,7 +239,7 @@ export namespace Pagination {
 				<Link
 					to="."
 					resetScroll={false}
-					search={(prev) => ({ ...prev, page: 1, live: true })}
+					search={(prev) => ({ ...prev, page: 1 })}
 					disabled={page <= 1}
 					className={cx(
 						'rounded-full border border-base-border hover:bg-alt flex items-center justify-center cursor-pointer active:translate-y-[0.5px] aria-disabled:cursor-not-allowed aria-disabled:opacity-50 size-[24px] text-primary',
@@ -254,10 +251,10 @@ export namespace Pagination {
 				<Link
 					to="."
 					resetScroll={false}
-					search={(prev) => {
-						const newPage = (prev?.page ?? 1) - 1
-						return { ...prev, page: newPage, live: newPage === 1 }
-					}}
+					search={(prev) => ({
+						...prev,
+						page: (prev?.page ?? 1) - 1,
+					})}
 					disabled={page <= 1}
 					className={cx(
 						'rounded-full border border-base-border hover:bg-alt flex items-center justify-center cursor-pointer active:translate-y-[0.5px] aria-disabled:cursor-not-allowed aria-disabled:opacity-50 size-[24px] text-primary',
@@ -283,7 +280,6 @@ export namespace Pagination {
 					search={(prev) => ({
 						...prev,
 						page: (prev?.page ?? 1) + 1,
-						live: false,
 					})}
 					disabled={page >= totalPages}
 					className={cx(
@@ -296,7 +292,7 @@ export namespace Pagination {
 				<Link
 					to="."
 					resetScroll={false}
-					search={(prev) => ({ ...prev, page: totalPages, live: false })}
+					search={(prev) => ({ ...prev, page: totalPages })}
 					disabled={page >= totalPages || disableLastPage}
 					className={cx(
 						'rounded-full border border-base-border hover:bg-alt flex items-center justify-center cursor-pointer active:translate-y-[0.5px] aria-disabled:cursor-not-allowed aria-disabled:opacity-50 size-[24px] text-primary',

apps/explorer/src/lib/queries/blocks.ts

@@ -17,16 +17,15 @@ export type BlockIdentifier =
 export type BlockWithTransactions = Block<bigint, true>
 export type BlockTransaction = BlockWithTransactions['transactions'][number]
 
-export function blocksQueryOptions(page: number) {
+export function blocksQueryOptions(start?: number) {
 	return queryOptions({
-		queryKey: ['blocks-loader', page],
+		queryKey: ['blocks-loader', start],
 		queryFn: async () => {
 			const config = getWagmiConfig()
 			const latestBlock = await getBlock(config)
 			const latestBlockNumber = latestBlock.number
 
-			const startBlock =
-				latestBlockNumber - BigInt((page - 1) * BLOCKS_PER_PAGE)
+			const startBlock = start != null ? BigInt(start) : latestBlockNumber
 
 			const blockNumbers: bigint[] = []
 			for (let i = 0n; i < BigInt(BLOCKS_PER_PAGE); i++) {

apps/explorer/src/routes/_layout.tsx

@@ -41,7 +41,8 @@ export function Layout(props: Layout.Props) {
 				<TriangleAlert className="size-4 inline mr-[4px] relative top-[-1px]" />
 				<span className="">
 					<strong>Testnet migration:</strong> Tempo launched a new testnet
-					(Moderato) on January 8th. The old testnet (Andantino) will be deprecated on{' '}
+					(Moderato) on January 8th. The old testnet (Andantino) will be
+					deprecated on{' '}
 					<time dateTime="2026-03-08" title="March 8th, 2026">
 						March 8th
 					</time>