feat: Block status indicator badge

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

@@ -0,0 +1,80 @@
+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 = {};
+
+  // Set styling based on status
+  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/data-table/data-table.tsx

@@ -15,7 +15,7 @@ import {
   useReactTable,
   type VisibilityState,
 } from "@tanstack/react-table";
-import { Fragment, useEffect, useMemo, useRef, useState } from "react";
+import { Fragment, useMemo, useState } from "react";
 import { DataTablePagination } from "~/components/data-table/data-table-pagination.tsx";
 import {
   Table,

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 && (
@@ -76,6 +78,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

@@ -1,4 +1,5 @@
 import {
+  ChicmozL2BlockFinalizationStatus,
   type ChicmozL2Block,
   type ChicmozL2BlockLight,
 } from "@chicmoz-pkg/types";
@@ -66,6 +67,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 +95,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,20 +78,20 @@ export const getArtifactData = (
       artifact = JSON.parse(selectedVersion.artifactJson) as SimpleArtifactData;
 
       artifact.functions.forEach((func) => {
-        if (!func.abi?.parameters) return;
+        if (!func.abi?.parameters) { return; }
         func.abi.parameters.forEach((param) => {
-          if (param.name === "inputs") return;
+          if (param.name === "inputs") { return; }
           const paramType = param.type?.kind || "unknown";
           if (func.is_unconstrained) {
-            if (!uncFunc[func.name]) uncFunc[func.name] = {};
+            if (!uncFunc[func.name]) { uncFunc[func.name] = {}; }
             uncFunc[func.name][param.name] = paramType;
           }
           if (func.custom_attributes?.includes("public")) {
-            if (!pubFunc[func.name]) pubFunc[func.name] = {};
+            if (!pubFunc[func.name]) { pubFunc[func.name] = {}; }
             pubFunc[func.name][param.name] = paramType;
           }
           if (func.custom_attributes?.includes("private")) {
-            if (!privFunc[func.name]) privFunc[func.name] = {};
+            if (!privFunc[func.name]) { privFunc[func.name] = {}; }
             privFunc[func.name][param.name] = paramType;
           }
         });