feat: Block status indicator badge (#347)

* new badge component for block details

* remove commends

* remove unused imports

Author: Mautjee

services/event-cannon/src/cannon/scenarios/utils/index.ts

@@ -25,7 +25,6 @@ import { deriveSigningKey } from "@aztec/circuits.js";
 import { FunctionType } from "@aztec/foundation/abi";
 import { ContractClassRegisteredEvent } from "@aztec/protocol-contracts/class-registerer";
 import {
-  VerifyInstanceDeploymentPayload,
   generateVerifyArtifactPayload,
   generateVerifyArtifactUrl,
   generateVerifyInstancePayload,
@@ -292,7 +291,7 @@ export const verifyContractInstanceDeployment = async ({
   const postData = JSON.stringify({
     verifiedDeploymentArguments: generateVerifyInstancePayload(
       verifyArgs,
-    ) as VerifyInstanceDeploymentPayload,
+    ),
     deployerMetadata,
   });
   await callExplorerApi({

services/explorer-ui/src/components/block-status-badge.tsx

@@ -0,0 +1,79 @@
+import { ChicmozL2BlockFinalizationStatus } from "@chicmoz-pkg/types";
+
+
+interface BlockStatusBadgeProps {
+  status: ChicmozL2BlockFinalizationStatus;
+  className?: string;
+}
+
+export const BlockStatusBadge: React.FC<BlockStatusBadgeProps> = ({ status, className = "" }) => {
+  let badgeText = "Unknown";
+  let badgeStyle = {};
+
+  switch (status) {
+    case ChicmozL2BlockFinalizationStatus.L2_NODE_SEEN_PROPOSED:
+      badgeText = "L2 Proposed";
+      badgeStyle = {
+        backgroundColor: "#FEE2E2",
+        color: "#991B1B",
+        borderColor: "#EF4444"
+      };
+      break;
+    case ChicmozL2BlockFinalizationStatus.L2_NODE_SEEN_PROVEN:
+      badgeText = "L2 Proven";
+      badgeStyle = {
+        backgroundColor: "#FFEDD5",
+        color: "#9A3412",
+        borderColor: "#F97316"
+      };
+      break;
+    case ChicmozL2BlockFinalizationStatus.L1_SEEN_PROPOSED:
+      badgeText = "L1 Proposed";
+      badgeStyle = {
+        backgroundColor: "#FEF3C7",
+        color: "#92400E",
+        borderColor: "#F59E0B"
+      };
+      break;
+    case ChicmozL2BlockFinalizationStatus.L1_SEEN_PROVEN:
+      badgeText = "L1 Proven";
+      badgeStyle = {
+        backgroundColor: "#FEF9C3",
+        color: "#854D0E",
+        borderColor: "#EAB308"
+      };
+      break;
+    case ChicmozL2BlockFinalizationStatus.L1_MINED_PROPOSED:
+      badgeText = "L1 Mined (Proposed)";
+      badgeStyle = {
+        backgroundColor: "#CCFBF1",
+        color: "#115E59",
+        borderColor: "#14B8A6"
+      };
+      break;
+    case ChicmozL2BlockFinalizationStatus.L1_MINED_PROVEN:
+      badgeText = "L1 Mined (Proven)";
+      badgeStyle = {
+        backgroundColor: "#DCFCE7",
+        color: "#166534",
+        borderColor: "#22C55E"
+      };
+      break;
+    default:
+      badgeStyle = {
+        backgroundColor: "#F3F4F6",
+        color: "#1F2937",
+        borderColor: "#6B7280"
+      };
+  }
+
+  return (
+    <span
+      className={`inline-block px-2.5 py-0.5 rounded-md text-xs font-medium border ${className}`}
+      style={badgeStyle}
+    >
+      {badgeText}
+    </span>
+  );
+};
+

services/explorer-ui/src/components/info-display/key-value-row.tsx

@@ -2,6 +2,7 @@ import { Link } from "@tanstack/react-router";
 import { type FC } from "react";
 import { truncateHashString } from "~/lib/create-hash-string";
 import { CopyableText } from "../copy-text";
+import { BlockStatusBadge } from "../block-status-badge";
 
 interface KeyValueRowProps {
   label: string;
@@ -17,6 +18,7 @@ enum DisplayType {
   LINK = "link",
   HEX = "hex",
   EXTERNAL_LINK = "external-link",
+  BADGE = "badge",
 }
 
 export const KeyValueRow: FC<KeyValueRowProps> = ({
@@ -27,18 +29,18 @@ export const KeyValueRow: FC<KeyValueRowProps> = ({
   extLink,
 }) => {
   let displayType = DisplayType.TEXT;
-  if (link) displayType = DisplayType.LINK;
-  else if (label === "data") displayType = DisplayType.TEXTAREA;
-  else if (value.startsWith("0x")) displayType = DisplayType.HEX;
-  else if (extLink) displayType = DisplayType.EXTERNAL_LINK;
+  if (link) { displayType = DisplayType.LINK; }
+  else if (label === "data") { displayType = DisplayType.TEXTAREA; }
+  else if (value.startsWith("0x")) { displayType = DisplayType.HEX; }
+  else if (extLink) { displayType = DisplayType.EXTERNAL_LINK; }
+  else if (label.includes("status")) { displayType = DisplayType.BADGE; }
 
   const commonTextClasses = "text-sm flex-grow text-end justify-end";
   return (
     <div
       key={label}
-      className={`flex items-center gap-2 py-3 ${
-        !isLast ? "border-b border-gray-200" : ""
-      }`}
+      className={`flex items-center gap-2 py-3 ${!isLast ? "border-b border-gray-200" : ""
+        }`}
     >
       <span className="text-gray-600 w-1/3">{label}</span>
       {displayType === DisplayType.TEXT && (
@@ -80,6 +82,11 @@ export const KeyValueRow: FC<KeyValueRowProps> = ({
       {displayType === DisplayType.TEXTAREA && (
         <CopyableText text={value} toCopy={value} textArea />
       )}
+      {displayType === DisplayType.BADGE && (
+        <div className={commonTextClasses}>
+          <BlockStatusBadge status={Number(value)} />
+        </div>
+      )}
     </div>
   );
 };

services/explorer-ui/src/pages/block-details/util.ts

@@ -66,6 +66,10 @@ export const getBlockDetails = (
       label: "feePerL2Gas",
       value: "" + latestBlock.header.globalVariables.gasFees.feePerL2Gas,
     },
+    {
+      label: " Block status",
+      value: "" + latestBlock.finalizationStatus,
+    },
     {
       label: "Proposed on L1",
       value: proposedOnL1Date
@@ -90,7 +94,7 @@ export const getTxEffects = (
   txEffects?: ChicmozL2Block["body"]["txEffects"],
   latestBlock?: ChicmozL2BlockLight
 ) => {
-  if (!txEffects) return undefined;
-  if (!latestBlock) return undefined;
+  if (!txEffects) { return undefined; }
+  if (!latestBlock) { return undefined; }
   return txEffects.map((tx) => getTxEffectTableObj(tx, latestBlock));
 };

services/explorer-ui/src/pages/contract-class-details/util.ts

@@ -78,29 +78,28 @@ export const getArtifactData = (
       artifact = JSON.parse(selectedVersion.artifactJson) as SimpleArtifactData;
 
       artifact.functions.forEach((func) => {
-        if (!func.abi?.parameters) return;
+        if (!func.abi?.parameters) { return; }
 
         // Use String() to ensure we have primitive string keys
         const funcNameStr = String(func.name);
 
         func.abi.parameters.forEach((param) => {
-          if (param.name === "inputs") return;
+          if (param.name === "inputs") { return; }
           const paramNameStr = String(param.name);
           const paramType = param.type?.kind || "unknown";
 
           if (func.is_unconstrained) {
-            if (!uncFunc.has(funcNameStr)) uncFunc.set(funcNameStr, new Map());
+            if (!uncFunc.has(funcNameStr)) { uncFunc.set(funcNameStr, new Map()); }
             uncFunc.get(funcNameStr)?.set(paramNameStr, paramType);
           }
 
           if (func.custom_attributes?.includes("public")) {
-            if (!pubFunc.has(funcNameStr)) pubFunc.set(funcNameStr, new Map());
+            if (!pubFunc.has(funcNameStr)) { pubFunc.set(funcNameStr, new Map()); }
             pubFunc.get(funcNameStr)?.set(paramNameStr, paramType);
           }
 
           if (func.custom_attributes?.includes("private")) {
-            if (!privFunc.has(funcNameStr))
-              privFunc.set(funcNameStr, new Map());
+            if (!privFunc.has(funcNameStr)) { privFunc.set(funcNameStr, new Map()); }
             privFunc.get(funcNameStr)?.set(paramNameStr, paramType);
           }
         });