feat: live data in blocks list (#74)

aztlan-labs · Oct 2, 2024 · 5f1f3f8 · 5f1f3f8
1 parent 6fbb222
commit 5f1f3f8
Show file tree

Hide file tree

Showing 9 changed files with 108 additions and 774 deletions.
diff --git a/services/explorer-ui/src/api/block.ts b/services/explorer-ui/src/api/block.ts
@@ -15,28 +15,28 @@ export const BlockAPI = {
   },
   getBlockByHeight: async (height: string): Promise<ChicmozL2Block> => {
     const response = await client.get(
-      `${aztecExplorer.getL2BlockByHeight}${height}`,
+      `${aztecExplorer.getL2BlockByHeight}${height}`
     );
     return validateResponse(chicmozL2BlockSchema, response.data);
   },
   getBlocksByHeightRange: async (
-    start: number,
-    end: number,
+    start?: number,
+    end?: number,
   ): Promise<ChicmozL2Block[]> => {
+    const params: { start?: number; end?: number } = {};
+    if (start) params.start = start;
+    if (end) params.end = end;
     const response = await client.get(
       `${aztecExplorer.getL2BlocksByHeightRange}`,
       {
-        params: {
-          start,
-          end,
-        },
-      },
+        params,
+      }
     );
     return validateResponse(z.array(chicmozL2BlockSchema), response.data);
   },
   getBlockByHash: async (hash: string): Promise<ChicmozL2Block> => {
     const response = await client.get(
-      `${aztecExplorer.getL2BlockByHash}${hash}`,
+      `${aztecExplorer.getL2BlockByHash}${hash}`
     );
     return validateResponse(chicmozL2BlockSchema, response.data);
   },

diff --git a/services/explorer-ui/src/components/blocks/block-table-columns.tsx b/services/explorer-ui/src/components/blocks/block-table-columns.tsx
@@ -1,55 +1,77 @@
 import { type ColumnDef } from "@tanstack/react-table";
-import type { BlockTableSchema } from "~/components/blocks/blocks-schema";
+import { Link } from "@tanstack/react-router";
+import {routes} from "~/routes/__root";
 import { DataTableColumnHeader } from "~/components/data-table";
+import type { BlockTableSchema } from "./blocks-schema";
+import {formatTimeSince} from "~/lib/utils";
 
 const text = {
-  blockNumber: "BLOCK NUMBER",
+  height: "BLOCK HEIGHT",
   blockHash: "BLOCK HASH",
-  status: "STATUS",
-  timestamp: "TIMESTAMP",
-  transactions: "TRANSACTIONS",
+  numberOfTransactions: "TRANSACTIONS",
+  txEffectsLength: "TX EFFECTS",
+  totalFees: "TOTAL FEES",
+  timeSince: "TIME SINCE",
 };
 
-export const blockTableColumns: ColumnDef<BlockTableSchema>[] = [
+export const BlockTableColumns: ColumnDef<BlockTableSchema>[] = [
   {
-    accessorKey: "id",
-    header: ({ column }) => <DataTableColumnHeader className="text-purple-dark text-sm " column={column} title={text.blockNumber} />,
-    cell: ({ row }) => (
-      <div className="text-purple-light">{row.getValue("id")}</div>
-    ),
-    enableSorting: false,
+    accessorKey: "height",
+    header: ({ column }) => <DataTableColumnHeader className="text-purple-dark text-sm" column={column} title={text.height} />,
+    cell: ({ row }) => {
+      const height = row.getValue("height");
+      // eslint-disable-next-line @typescript-eslint/restrict-plus-operands
+      const r = routes.blocks.route + "/" + height;
+      return (<div className="text-purple-light">
+        <Link to={r}>{row.getValue("height")}</Link>
+      </div>);
+    },
+    enableSorting: true,
     enableHiding: false,
   },
   {
     accessorKey: "blockHash",
-    header: ({ column }) => <DataTableColumnHeader className="text-purple-dark text-sm  text-wrap" column={column} title={text.blockHash} />,
-    cell: ({ row }) => (
-      <div className="text-purple-light" style={{ lineBreak: "anywhere" }}>
-        {row.getValue("blockHash")}
-      </div>
-    ),
+    header: ({ column }) => <DataTableColumnHeader className="text-purple-dark text-sm text-wrap" column={column} title={text.blockHash} />,
+    cell: ({ row }) => {
+      const blockHash = row.getValue("blockHash");
+      // eslint-disable-next-line @typescript-eslint/restrict-plus-operands
+      const r = routes.blocks.route + "/" + blockHash;
+      return (<div className="text-purple-light">
+        <Link to={r}>{row.getValue("blockHash")}</Link>
+      </div>);
+    },
     enableSorting: false,
     enableHiding: false,
   },
   {
-    accessorKey: "status",
-    header: ({ column }) => <DataTableColumnHeader className="text-purple-dark text-sm " column={column} title={text.status}  />,
-    cell: ({ row }) => <div className="uppercase">{row.getValue("status")}</div>,
+    accessorKey: "numberOfTransactions",
+    header: ({ column }) => <DataTableColumnHeader className="text-purple-dark text-sm" column={column} title={text.numberOfTransactions} />,
+    cell: ({ row }) => <div className="text-purple-dark">{row.getValue("numberOfTransactions")}</div>,
     enableSorting: true,
     enableHiding: false,
   },
   {
-    accessorKey: "timestamp",
-    header: ({ column }) => <DataTableColumnHeader className="text-purple-dark text-sm " column={column} title={text.timestamp} />,
-    cell: ({ row }) => <div className="text-purple-dark">{row.getValue("timestamp")}</div>,
-    filterFn: (row, id, value: string) => {
-      return value.includes(row.getValue(id));
-    },
+    accessorKey: "txEffectsLength",
+    header: ({ column }) => <DataTableColumnHeader className="text-purple-dark text-sm" column={column} title={text.txEffectsLength} />,
+    cell: ({ row }) => <div className="text-purple-dark">{row.getValue("txEffectsLength")}</div>,
+    enableSorting: true,
+    enableHiding: false,
   },
   {
-    accessorKey: "transactions",
-    header: ({ column }) => <DataTableColumnHeader className="text-purple-dark text-sm " column={column} title={text.transactions}  />,
-    cell: ({ row }) => <div className="text-purple-dark">{row.getValue("transactions")}</div>,
+    accessorKey: "totalFees",
+    header: ({ column }) => <DataTableColumnHeader className="text-purple-dark text-sm" column={column} title={text.totalFees} />,
+    cell: ({ row }) => <div className="text-purple-dark">{row.getValue("totalFees")}</div>,
+    enableSorting: true,
+    enableHiding: false,
+  },
+  {
+    accessorKey: "timestamp",
+    header: ({ column }) => <DataTableColumnHeader className="text-purple-dark text-sm" column={column} title={text.timeSince} />,
+    cell: ({ row }) => {
+      // eslint-disable-next-line @typescript-eslint/no-unnecessary-type-assertion
+      const formattedTime = formatTimeSince(row.getValue("timestamp") as unknown as number * 1000);
+      return (<div className="text-purple-dark">{formattedTime}</div>);
+    },
     enableSorting: true,
     enableHiding: false,
   },

diff --git a/services/explorer-ui/src/components/blocks/blocks-schema.ts b/services/explorer-ui/src/components/blocks/blocks-schema.ts
@@ -2,24 +2,16 @@ import { z } from "zod";
 
 export type BlockTableSchema = z.infer<typeof blockSchema>;
 
-const blockSchema = z.object({
-  id: z.string(),
+const frNumberSchema = z.preprocess((val) => {
+  if (typeof val === "string") return parseInt(val, 16);
+  return val;
+}, z.coerce.number());
+
+export const blockSchema = z.object({
+  height: z.number(),
   blockHash: z.string(),
-  status: z.string(),
-  timestamp: z.number(),
-  transactions: z.number(),
+  numberOfTransactions: frNumberSchema,
+  txEffectsLength: z.number(),
+  totalFees: frNumberSchema,
+  timestamp: frNumberSchema,
 });
-
-// TODO: update to use correct schema
-// export const blockSchema = z.object({
-//   id: z.number(),
-//   hash: z.string(),
-//   dataRoot: z.string(),
-//   txs: z.array(txSchema),
-//   proofData: z.optional(z.string()),
-//   nullifierRoot: z.optional(z.string()),
-//   ethTxHash: z.optional(z.string()),
-//   mined: z.date(),
-//   day: z.number(),
-//   batched_height: z.number(),
-// });
diff --git a/services/explorer-ui/src/components/blocks/blocks-table.tsx b/services/explorer-ui/src/components/blocks/blocks-table.tsx
@@ -1,18 +1,17 @@
-import { blockTableColumns } from "~/components/blocks/block-table-columns";
-import { allBlocks } from "~/components/blocks/blocks";
+import { FC } from "react";
 import { DataTable } from "~/components/data-table";
+import { BlockTableColumns } from "./block-table-columns";
+import { type BlockTableSchema } from "./blocks-schema";
 
-export const BlocksTable = () => {
-  const blocks = getBlocks();
+interface Props {
+  blocks: BlockTableSchema[];
+}
 
+export const BlocksTable: FC<Props> = ({ blocks }) => {
   return (
     <section className="relative mx-auto w-full transition-all">
-      <DataTable data={blocks} columns={blockTableColumns} />
+      <DataTable data={blocks} columns={BlockTableColumns} />
     </section>
   );
 };
 
-
-const getBlocks =  () => {
-  return allBlocks.blocks;
-}