add timestamp to objects and views

package.json

@@ -29,6 +29,7 @@
     "react": "^18",
     "react-dom": "^18",
     "react-hook-form": "^7.52.0",
+    "react-timeago": "^8.3.0",
     "react-truncate-inside": "^1.0.3",
     "tailwind-merge": "^2.3.0",
     "tailwindcss-animate": "^1.0.7",

src/app/batches/[height]/page.tsx

@@ -4,6 +4,7 @@
 
 import { useParams } from "next/navigation";
 import { useCallback, useEffect, useState } from "react";
+import TimeAgo from "react-timeago";
 
 import { DetailsLayout } from "@/components/details/layout";
 import DataTable from "@/components/ui/DataTable";
@@ -19,6 +20,7 @@ export interface GetBatchQueryResponse {
           blocks: {
             height: string;
             hash: string;
+            createdAt: string;
             result: {
               stateRoot: string;
             };
@@ -28,6 +30,7 @@ export interface GetBatchQueryResponse {
           }[];
           settlementTransactionHash: string;
           height: string;
+          createdAt: string;
         }
       | undefined;
   };
@@ -44,9 +47,11 @@ export default function BatchDetail() {
       batch(where: { height: $height }) {
         height
         settlementTransactionHash
+        createdAt
         blocks {
           height
           hash
+          createdAt
           result { stateRoot }
           _count { transactions }
         }
@@ -95,13 +100,20 @@ export default function BatchDetail() {
       label: "Blocks",
       value: `${data?.batch?.blocks?.length ?? "—"}`,
     },
+    {
+      label: "Created",
+      value: data?.batch?.createdAt
+        ? <TimeAgo date={data.batch.createdAt} minPeriod={30} />
+        : "—",
+    },
   ];
 
   const blocks: TableItem[] = (data?.batch?.blocks || []).map((item) => ({
     height: item.height,
     hash: item.hash,
     transactions: item._count?.transactions?.toString(),
     stateRoot: item.result?.stateRoot,
+    createdAt: item.createdAt,
   }));
 
   return (
@@ -123,6 +135,7 @@ export default function BatchDetail() {
         loading={loading}
         navigationPath="/blocks/{hash}"
         copyKeys={["hash", "stateRoot"]}
+        columnRenderers={{ createdAt: (item) => <TimeAgo date={item.createdAt} minPeriod={30} /> }}
       />
     </DetailsLayout>
   );

src/app/blocks/[hash]/page.tsx

@@ -2,6 +2,8 @@
 
 import { useParams } from "next/navigation";
 import { useCallback, useEffect, useState } from "react";
+import TimeAgo from "react-timeago";
+import { CircleCheck, CircleX } from "lucide-react";
 
 import { DetailsLayout } from "@/components/details/layout";
 import DataTable from "@/components/ui/DataTable";
@@ -19,6 +21,7 @@ export interface GetBlockQueryResponse {
       | {
           hash: string;
           height: string;
+          createdAt: string;
           result: {
             stateRoot: string;
           };
@@ -49,6 +52,7 @@ export default function BlockDetail() {
       block(where: { hash: $hash }) {
         height
         hash
+        createdAt
         result { stateRoot }
         transactions {
           tx { hash, methodId, sender, nonce }
@@ -100,18 +104,48 @@ export default function BlockDetail() {
       label: "StateRoot",
       value: data?.block?.result.stateRoot ?? "—",
     },
+    {
+      label: "Created",
+      value: data?.block?.createdAt ? (
+        <TimeAgo date={data.block.createdAt} minPeriod={30} />
+      ) : (
+        "—"
+      ),
+    },
   ];
 
   const transactions: TableItem[] = (data?.block?.transactions || []).map(
     (tx) => ({
       ...tx.tx,
+      createdAt: data?.block?.createdAt || "",
       status: {
         isSuccess: tx.status === true,
         message: tx.statusMessage,
       },
     }),
   );
 
+  const statusRenderer = (item: TableItem) => {
+    const { isSuccess, message } = item.status;
+
+    return (
+      <div className="flex flex-col items-center justify-center w-full gap-1">
+        {isSuccess === true ? (
+          <CircleCheck className="w-4 h-4 text-green-500" />
+        ) : (
+          <>
+            <CircleX className="w-4 h-4 text-red-500" />
+            {message !== undefined && (
+              <span className="text-xs text-red-600 text-center">
+                {message}
+              </span>
+            )}
+          </>
+        )}
+      </div>
+    );
+  };
+
   return (
     <DetailsLayout
       title={
@@ -131,7 +165,10 @@ export default function BlockDetail() {
         loading={loading}
         navigationPath="/transactions/{hash}"
         copyKeys={["hash", "methodId", "sender"]}
-        columnRenderers={{ status: statusRenderer }}
+        columnRenderers={{
+          createdAt: (item) => <TimeAgo date={item.createdAt} minPeriod={30} />,
+          status: statusRenderer,
+        }}
       />
     </DetailsLayout>
   );

src/app/settlements/[transactionHash]/page.tsx

@@ -4,6 +4,7 @@
 
 import { useParams } from "next/navigation";
 import { useCallback, useEffect, useState } from "react";
+import TimeAgo from "react-timeago";
 import Truncate from "react-truncate-inside/es";
 
 import { DetailsLayout } from "@/components/details/layout";
@@ -20,12 +21,14 @@ export interface GetSettlementQueryResponse {
           batches: {
             height: string;
             settlementTransactionHash: string;
+            createdAt: string;
             _count: {
               blocks: number;
             };
           }[];
           transactionHash: string;
           promisedMessagesHash: string;
+          createdAt: string;
         }
       | undefined;
   };
@@ -43,10 +46,12 @@ export default function SettlementDetail() {
         batches {
           height
           settlementTransactionHash
+          createdAt
           _count { blocks }
         }
         transactionHash
         promisedMessagesHash
+        createdAt
       }
     }`;
 
@@ -92,13 +97,22 @@ export default function SettlementDetail() {
       label: "Batches",
       value: `${data?.settlement?.batches?.length ?? "—"}`,
     },
+    {
+      label: "Created",
+      value: data?.settlement?.createdAt ? (
+        <TimeAgo date={data.settlement.createdAt} minPeriod={30} />
+      ) : (
+        "—"
+      ),
+    },
   ];
 
   const batches: TableItem[] = (data?.settlement?.batches || []).map(
     (item) => ({
       height: item.height,
       settlementTransactionHash: item.settlementTransactionHash,
       blocks: item._count?.blocks?.toString(),
+      createdAt: item.createdAt,
     }),
   );
 
@@ -128,6 +142,7 @@ export default function SettlementDetail() {
         navigationPath="/batches/{height}"
         copyKeys={["settlementTransactionHash"]}
         columnRenderers={{
+          createdAt: (item) => <TimeAgo date={item.createdAt} minPeriod={30} />,
           settlementTransactionHash: (item) => (
             <TransactionHash
               transactionHash={String(item.settlementTransactionHash ?? "")}

src/app/transactions/[hash]/page.tsx

@@ -3,6 +3,7 @@
 import { CircleCheck, CircleX } from "lucide-react";
 import { useCallback, useEffect, useState } from "react";
 import { useParams } from "next/navigation";
+import TimeAgo from "react-timeago";
 import Truncate from "react-truncate-inside/es";
 
 import { DetailsLayout } from "@/components/details/layout";
@@ -17,6 +18,7 @@ interface Transaction {
     status: boolean;
     statusMessage?: string;
     block: {
+      createdAt: string;
       batch: {
         proof: string | null;
         settlementTransactionHash: string | null;
@@ -32,7 +34,7 @@ export interface GetTransactionQueryResponse {
   };
 }
 
-export default function BlockDetail() {
+export default function TransactionDetail() {
   const params = useParams<{ hash: string }>();
   const [data, setData] = useState<GetTransactionQueryResponse["data"]>();
   const [loading, setLoading] = useState(true);
@@ -47,7 +49,7 @@ export default function BlockDetail() {
         executionResult {
           status
           statusMessage
-          block { batch { proof settlementTransactionHash } }
+          block { createdAt batch { proof settlementTransactionHash } }
         }
       }
     }`;
@@ -131,6 +133,12 @@ export default function BlockDetail() {
       label: "Sender",
       value: data?.transaction?.sender ?? "—",
     },
+    {
+      label: "Created",
+      value: data?.transaction?.executionResult?.block?.createdAt
+        ? <TimeAgo date={data.transaction.executionResult.block.createdAt} minPeriod={30} />
+        : "—",
+    },
   ];
 
   return (

src/components/batches/BatchesPageClient.tsx

@@ -3,6 +3,7 @@
 /* eslint-disable no-underscore-dangle */
 
 import { useCallback, useEffect, useState } from "react";
+import TimeAgo from "react-timeago";
 import { z } from "zod";
 
 import useQueryParams from "@/hooks/use-query-params";
@@ -17,13 +18,15 @@ export interface TableItem {
   height: string;
   blocks: string;
   settlementTransactionHash: string;
+  createdAt: string;
 }
 
 export interface GetBatchesQueryResponse {
   data: {
     batches: {
       height: string;
       settlementTransactionHash: string;
+      createdAt: string;
       _count: {
         blocks: number;
       };
@@ -40,6 +43,7 @@ export const columns: Record<keyof TableItem, string> = {
   height: "Height",
   blocks: "Blocks",
   settlementTransactionHash: "Settlement Transaction Hash",
+  createdAt: "Created",
 };
 
 const formSchema = z.object({
@@ -71,6 +75,7 @@ const graphqlQuery = `query GetBatches($take: Int!, $skip: Int!, $where: BatchWh
   batches(take: $take, skip: $skip, orderBy: {height: desc}, where: $where) {
     settlementTransactionHash
     height
+    createdAt
     _count { blocks }
   }
   aggregateBatch(where: $where) { _count { _all } }
@@ -111,6 +116,7 @@ export default function BatchesPageClient() {
         height: item.height,
         settlementTransactionHash: item.settlementTransactionHash,
         blocks: item._count?.blocks?.toString() || "0",
+        createdAt: item.createdAt,
       }));
 
       setData(mappedItems);
@@ -148,6 +154,7 @@ export default function BatchesPageClient() {
       navigationPath="/batches/{height}"
       copyKeys={["settlementTransactionHash"]}
       columnRenderers={{
+        createdAt: (item) => <TimeAgo date={item.createdAt} minPeriod={30} />,
         settlementTransactionHash: (item) => (
           <TransactionHash
             transactionHash={String(item.settlementTransactionHash ?? "")}