fetch latest blocks from shovel api

Author: karooolis

packages/explorer/src/app/(explorer)/[chainName]/worlds/[worldAddress]/observe/TransactionsWatcher.tsx

@@ -3,6 +3,7 @@ import {
   Address,
   BaseError,
   Hash,
+  Hex,
   Transaction,
   TransactionReceipt,
   decodeFunctionData,
@@ -17,17 +18,21 @@ import { useStore } from "zustand";
 import { useCallback, useEffect } from "react";
 import { store as observerStore } from "../../../../../../observer/store";
 import { useChain } from "../../../../hooks/useChain";
+import { useBlocksQuery } from "../../../../queries/useBlocksQuery";
 import { useWorldAbiQuery } from "../../../../queries/useWorldAbiQuery";
+import { indexerForChainId } from "../../../../utils/indexerForChainId";
 import { store as worldStore } from "../store";
 import { userOperationEventAbi } from "./abis/userOperationEventAbi";
 import { getDecodedUserOperationCalls } from "./utils/getDecodedUserOperationCalls";
 
 export function TransactionsWatcher() {
   const { id: chainId } = useChain();
   const { worldAddress } = useParams<{ worldAddress: Address }>();
+  const indexer = indexerForChainId(chainId);
   const wagmiConfig = useConfig();
   const { data: worldAbiData } = useWorldAbiQuery();
   const abi = worldAbiData?.abi;
+  const { data: blocks } = useBlocksQuery();
   const { transactions, setTransaction, updateTransaction } = useStore(worldStore);
   const observerWrites = useStore(observerStore, (state) => state.writes);
 
@@ -217,6 +222,23 @@ export function TransactionsWatcher() {
     }
   }, [handleTransaction, observerWrites, transactions, worldAddress]);
 
+  useEffect(() => {
+    const handleBlock = async (blockHash: Hex, blockTime: bigint) => {
+      const block = await getBlock(wagmiConfig, { chainId, blockHash });
+      const blockTxs = block.transactions;
+      for (const hash of blockTxs) {
+        if (transactions.find((transaction) => transaction.hash === hash)) continue;
+        handleTransaction({ hash, timestamp: blockTime });
+      }
+    };
+
+    if (blocks) {
+      for (const { block_hash, block_time } of blocks) {
+        handleBlock(`0x${block_hash}`, BigInt(block_time));
+      }
+    }
+  }, [blocks, chainId, handleTransaction, transactions, wagmiConfig]);
+
   useWatchBlocks({
     chainId,
     async onBlock(block) {
@@ -229,6 +251,7 @@ export function TransactionsWatcher() {
         handleTransaction({ hash, timestamp: block.timestamp });
       }
     },
+    enabled: indexer.type === "sqlite",
   });
 
   return null;

…app/(explorer)/api/transactions/route.ts …r/src/app/(explorer)/api/blocks/route.tspackages/explorer/src/app/(explorer)/api/transactions/route.ts renamed to packages/explorer/src/app/(explorer)/api/blocks/route.ts packages/explorer/src/app/(explorer)/api/transactions/route.ts renamed to packages/explorer/src/app/(explorer)/api/blocks/route.ts

@@ -1,6 +1,8 @@
 import { Client } from "pg";
 import { Hex } from "viem";
 
+export const dynamic = "force-dynamic";
+
 const postgresConnectionUrl = process.env.DATABASE_URL;
 
 export async function GET(req: Request) {
@@ -9,23 +11,19 @@ export async function GET(req: Request) {
   const worldAddress = searchParams.get("worldAddress") as Hex;
   const offset = Number(searchParams.get("offset")) || 0;
   const limit = Number(searchParams.get("limit")) || 10;
-  const columns = searchParams.get("columns") || "*";
 
   if (!worldAddress) {
     return Response.json({ error: "Missing worldAddress" }, { status: 400 });
   }
 
   try {
     await client.connect();
-
-    const transactions = await client.query(
-      `SELECT ${columns} FROM transactions WHERE tx_to = decode($1, 'hex') ORDER BY block_num DESC OFFSET $2 LIMIT $3`,
-      [worldAddress, offset, limit],
+    const blocks = await client.query(
+      `SELECT DISTINCT encode(block_hash, 'hex') as block_hash, block_num, block_time FROM transactions WHERE tx_to = decode($1, 'hex') ORDER BY block_num DESC OFFSET $2 LIMIT $3`,
+      [worldAddress.replace("0x", ""), offset, limit],
     );
 
-    return Response.json({
-      transactions: transactions.rows,
-    });
+    return Response.json({ blocks: blocks.rows });
   } catch (error) {
     console.error("Database error:", error);
     return Response.json({ error: "Failed to fetch transactions" }, { status: 500 });

packages/explorer/src/app/(explorer)/queries/useBlocksQuery.ts

@@ -0,0 +1,37 @@
+import { useParams } from "next/navigation";
+import { Hex } from "viem";
+import { useQuery } from "@tanstack/react-query";
+import { useChain } from "../hooks/useChain";
+import { indexerForChainId } from "../utils/indexerForChainId";
+
+export function useBlocksQuery() {
+  const { worldAddress, chainName } = useParams();
+  const { id: chainId } = useChain();
+  const indexer = indexerForChainId(chainId);
+
+  return useQuery({
+    queryKey: ["blocks", worldAddress, chainName],
+    queryFn: async () => {
+      const offset = 0;
+      const limit = 10;
+      const response = await fetch(
+        `/api/blocks?${new URLSearchParams({
+          worldAddress: worldAddress as Hex,
+          offset: offset.toString(),
+          limit: limit.toString(),
+        })}`,
+        {
+          method: "GET",
+        },
+      );
+
+      return response.json();
+    },
+    select: (data) => {
+      return data.blocks;
+    },
+    retry: false,
+    enabled: !!worldAddress && indexer.type === "hosted",
+    refetchInterval: 2000,
+  });
+}