hotfix: tx-effects working in UI and l2_proven is stored in DB

Author: FilipHarald

services/aztec-listener/src/events/emitted/index.ts

@@ -17,13 +17,15 @@ import { onL2RpcNodeAlive } from "./on-node-alive.js";
 
 export const onBlock = async (
   block: L2Block,
-  finalizationStatus: ChicmozL2BlockFinalizationStatus
+  finalizationStatus: ChicmozL2BlockFinalizationStatus,
 ) => {
   const height = Number(block.header.globalVariables.blockNumber);
+  const finalizationStatusStr =
+    ChicmozL2BlockFinalizationStatus[finalizationStatus];
   logger.info(
-    `🦊 publishing block ${height} (hash: ${(
+    `🦊 publishing (${finalizationStatusStr}) block ${height} (hash: ${(
       await block.hash()
-    ).toString()})...`
+    ).toString()})...`,
   );
   const blockStr = block.toString();
   await publishMessage("NEW_BLOCK_EVENT", {
@@ -35,7 +37,7 @@ export const onBlock = async (
 
 export const onCatchupBlock = async (
   block: L2Block,
-  finalizationStatus: ChicmozL2BlockFinalizationStatus
+  finalizationStatus: ChicmozL2BlockFinalizationStatus,
 ) => {
   const blockStr = block.toString();
   await publishMessage("CATCHUP_BLOCK_EVENT", {
@@ -47,7 +49,7 @@ export const onCatchupBlock = async (
 // TODO: onCatchupRequestFromExplorerApi
 
 export const onPendingTxs = async (txs: TxHash[]) => {
-  if (!txs || txs.length === 0) return;
+  if (!txs || txs.length === 0) {return;}
 
   await publishMessage("PENDING_TXS_EVENT", {
     txs: txs.map((tx) => {
@@ -75,7 +77,7 @@ export const onL2RpcNodeError = (
   rpcNodeError: Omit<
     ChicmozL2RpcNodeError,
     "rpcUrl" | "count" | "createdAt" | "lastSeenAt"
-  >
+  >,
 ) => {
   let event;
   try {

services/explorer-api/src/events/received/on-block/index.ts

@@ -11,6 +11,7 @@ import { SERVICE_NAME } from "../../../constants.js";
 import { L2_NETWORK_ID } from "../../../environment.js";
 import { logger } from "../../../logger.js";
 import { deleteL2BlockByHeight } from "../../../svcs/database/controllers/l2block/delete.js";
+import { ensureFinalizationStatusStored } from "../../../svcs/database/controllers/l2block/store.js";
 import { controllers } from "../../../svcs/database/index.js";
 import { emit } from "../../index.js";
 import { handleDuplicateBlockError } from "../utils.js";
@@ -27,7 +28,7 @@ const hackyLogBlock = (b: L2Block) => {
   const logString = blockString
     .split(":")
     .map((v) => {
-      if (v.length > 200 && v.includes(",")) return truncateString(v);
+      if (v.length > 200 && v.includes(",")) {return truncateString(v);}
 
       return v;
     })
@@ -59,7 +60,7 @@ const onBlock = async ({
   } catch (e) {
     logger.error(
       // eslint-disable-next-line @typescript-eslint/restrict-template-expressions
-      `Failed to parse block ${blockNumber}: ${(e as Error)?.stack ?? e}`
+      `Failed to parse block ${blockNumber}: ${(e as Error)?.stack ?? e}`,
     );
     hackyLogBlock(b);
     return;
@@ -71,27 +72,35 @@ const onBlock = async ({
 
 const storeBlock = async (parsedBlock: ChicmozL2Block, haveRetried = false) => {
   logger.info(
-    `🧢 Storing block ${parsedBlock.height} (hash: ${parsedBlock.hash})`
+    `🧢 Storing block ${parsedBlock.height} (hash: ${parsedBlock.hash})`,
   );
   const storeRes = await controllers.l2Block
     .store(parsedBlock)
     .catch(async (e) => {
       if (haveRetried) {
         throw new Error(
-          `Failed to store block ${parsedBlock.height} after retry: ${e}`
+          `Failed to store block ${parsedBlock.height} after retry: ${e}`,
         );
       }
       const shouldRetry = await handleDuplicateBlockError(
         e as Error,
         `block ${parsedBlock.height}`,
         async () => {
           logger.warn(
-            `Deleting block ${parsedBlock.height} (hash: ${parsedBlock.hash})`
+            `Deleting block ${parsedBlock.height} (hash: ${parsedBlock.hash})`,
           );
           await deleteL2BlockByHeight(parsedBlock.height);
-        }
+        },
       );
-      if (shouldRetry) return storeBlock(parsedBlock, true);
+      if (shouldRetry) {
+        return storeBlock(parsedBlock, true);
+      } else {
+        await ensureFinalizationStatusStored( // NOTE: this is currently assuming that the error is a duplicate error
+          parsedBlock.hash,
+          parsedBlock.height,
+          parsedBlock.finalizationStatus,
+        );
+      }
     });
   await emit.l2BlockFinalizationUpdate(storeRes?.finalizationUpdate ?? null);
 };

services/explorer-api/src/svcs/database/controllers/l2block/add_l1_data.ts

@@ -66,7 +66,7 @@ export const addL1L2BlockProposed = async (
   };
 };
 
-export const ensureFinalizationStatusStored = async (
+export const ensureL1FinalizationIsStored = async (
   l2BlockHash: ChicmozL2Block["hash"],
   l2BlockNumber: ChicmozL2Block["height"],
   archiveRoot: string,

services/explorer-api/src/svcs/database/controllers/l2block/store.ts

@@ -1,6 +1,10 @@
 import { ChicmozL2BlockFinalizationUpdateEvent } from "@chicmoz-pkg/message-registry";
 import { getDb as db } from "@chicmoz-pkg/postgres-helper";
-import { HexString, type ChicmozL2Block } from "@chicmoz-pkg/types";
+import {
+  ChicmozL2BlockFinalizationStatus,
+  HexString,
+  type ChicmozL2Block,
+} from "@chicmoz-pkg/types";
 import { v4 as uuidv4 } from "uuid";
 import {
   archive,
@@ -21,10 +25,10 @@ import {
   txEffect,
 } from "../../../database/schema/l2block/index.js";
 import { l2BlockFinalizationStatusTable } from "../../schema/l2block/finalization-status.js";
-import { ensureFinalizationStatusStored } from "./add_l1_data.js";
+import { ensureL1FinalizationIsStored } from "./add_l1_data.js";
 
 export const store = async (
-  block: ChicmozL2Block
+  block: ChicmozL2Block,
 ): Promise<{
   finalizationUpdate: ChicmozL2BlockFinalizationUpdateEvent | null;
 }> => {
@@ -155,7 +159,7 @@ export const store = async (
 
     // Insert txEffects and create junction entries
     for (const [i, txEff] of Object.entries(block.body.txEffects)) {
-      if (isNaN(Number(i))) throw new Error("Invalid txEffect index");
+      if (isNaN(Number(i))) {throw new Error("Invalid txEffect index");}
       await dbTx.insert(txEffect).values({
         txHash: txEff.txHash,
         bodyId,
@@ -182,22 +186,34 @@ export const store = async (
           value: pdw.value,
         });
       }
-      if (block.finalizationStatus.valueOf() >= 0) {
-        await db() // NOTE: purposly not using dbTx, it should always be stored
-          .insert(l2BlockFinalizationStatusTable)
-          .values({
-            l2BlockHash: block.hash,
-            l2BlockNumber: block.height,
-            status: block.finalizationStatus,
-          })
-          .onConflictDoNothing();
-      }
+      await ensureFinalizationStatusStored(
+        block.hash,
+        block.height,
+        block.finalizationStatus,
+      );
     }
-    const finalizationUpdate = await ensureFinalizationStatusStored(
+    const finalizationUpdate = await ensureL1FinalizationIsStored(
       block.hash,
       block.height,
-      block.archive.root
+      block.archive.root,
     );
     return { finalizationUpdate };
   });
 };
+
+export const ensureFinalizationStatusStored = async (
+  l2BlockHash: HexString,
+  l2BlockNumber: bigint,
+  status: ChicmozL2BlockFinalizationStatus,
+): Promise<void> => {
+  if (status.valueOf() >= 0) {
+    await db()
+      .insert(l2BlockFinalizationStatusTable)
+      .values({
+        l2BlockHash,
+        l2BlockNumber,
+        status,
+      })
+      .onConflictDoNothing();
+  }
+};

services/explorer-ui/src/hooks/api/tx-effect.ts

@@ -2,6 +2,7 @@ import { type ChicmozL2TxEffectDeluxe } from "@chicmoz-pkg/types";
 import {
   useQueries,
   useQuery,
+  useQueryClient,
   type UseQueryResult,
 } from "@tanstack/react-query";
 import { TxEffectsAPI } from "~/api";
@@ -50,8 +51,27 @@ export const useGetLatestTxEffects = (): UseQueryResult<
   ChicmozL2TxEffectDeluxe[] | undefined,
   Error
 > => {
+  const queryClient = useQueryClient();
   return useQuery<ChicmozL2TxEffectDeluxe[] | undefined, Error>({
     queryKey: queryKeyGenerator.latestTxEffects,
-    queryFn: () => TxEffectsAPI.getLatestTxEffects(),
+    queryFn: async () => {
+      const latestTxEffects = await TxEffectsAPI.getLatestTxEffects();
+      if (!latestTxEffects) return [];
+      if (latestTxEffects.length === 0) return [];
+      let blockTxEffects: ChicmozL2TxEffectDeluxe[] = [];
+      let currentBlockHeight = latestTxEffects[0].blockHeight;
+      latestTxEffects.forEach((txEffect) => {
+        if (txEffect.blockHeight !== currentBlockHeight) {
+          queryClient.setQueryData(
+            queryKeyGenerator.txEffectsByBlockHeight(currentBlockHeight),
+            blockTxEffects,
+          );
+          blockTxEffects = [];
+          currentBlockHeight = txEffect.blockHeight;
+        }
+        blockTxEffects.push(txEffect);
+      });
+      return latestTxEffects;
+    },
   });
 };

services/explorer-ui/src/hooks/websocket.ts

@@ -39,6 +39,7 @@ const updateTxEffects = (
       blockHeight: block.height,
       timestamp: block.header.globalVariables.timestamp,
     });
+    return effect;
   });
   queryClient.setQueryData(
     queryKeyGenerator.txEffectsByBlockHeight(block.height),