- switch recent blocks to rollup

- update column headers
ten-protocol · May 31, 2024 · 36ebc13 · 36ebc13
1 parent 483fe09
commit 36ebc13
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 19 deletions.
diff --git a/tools/tenscan/frontend/src/components/modules/dashboard/index.tsx b/tools/tenscan/frontend/src/components/modules/dashboard/index.tsx
@@ -21,19 +21,19 @@ import { useBatchesService } from "@/src/services/useBatchesService";
 import TruncatedAddress from "../common/truncated-address";
 import { useContractsService } from "@/src/services/useContractsService";
 import { Skeleton } from "@/src/components/ui/skeleton";
-import { RecentBlocks } from "./recent-blocks";
-import { useBlocksService } from "@/src/services/useBlocksService";
 import AnalyticsCard from "./analytics-card";
 import Link from "next/link";
 import { cn, formatNumber } from "@/src/lib/utils";
 import { Badge } from "../../ui/badge";
 import { BlocksIcon } from "lucide-react";
+import { useRollupsService } from "@/src/services/useRollupsService";
+import { RecentRollups } from "./recent-rollups";
 
 export default function Dashboard() {
   const { price, transactions, transactionCount } = useTransactionsService();
   const { contractCount } = useContractsService();
   const { batches, latestBatch } = useBatchesService();
-  const { blocks } = useBlocksService();
+  const { rollups } = useRollupsService();
 
   const DASHBOARD_DATA = [
     {
@@ -94,10 +94,10 @@ export default function Dashboard() {
 
   const RECENT_DATA = [
     {
-      title: "Recent Blocks",
-      data: blocks,
-      component: <RecentBlocks blocks={blocks} />,
-      goTo: "/blocks",
+      title: "Recent Rollups",
+      data: rollups,
+      component: <RecentRollups rollups={rollups} />,
+      goTo: "/rollups",
       className: "col-span-1 md:col-span-2 lg:col-span-3",
     },
     {

diff --git a/...nents/modules/dashboard/recent-blocks.tsx → ...ents/modules/dashboard/recent-rollups.tsx b/...nents/modules/dashboard/recent-blocks.tsx → ...ents/modules/dashboard/recent-rollups.tsx
@@ -1,26 +1,32 @@
 import TruncatedAddress from "../common/truncated-address";
 import { formatTimeAgo } from "@/src/lib/utils";
 import { Avatar, AvatarFallback } from "@/src/components/ui/avatar";
-import { Block } from "@/src/types/interfaces/BlockInterfaces";
+import {
+  Rollup,
+  RollupsResponse,
+} from "@/src/types/interfaces/RollupInterfaces";
+import Link from "next/link";
 
-export function RecentBlocks({ blocks }: { blocks: any }) {
+export function RecentRollups({ rollups }: { rollups: any }) {
   return (
     <div className="space-y-8">
-      {blocks?.result?.BlocksData.map((block: Block, i: number) => (
+      {rollups?.result?.RollupsData?.map((rollup: Rollup, i: number) => (
         <div className="flex items-center" key={i}>
           <Avatar className="h-9 w-9">
-            <AvatarFallback>BK</AvatarFallback>
+            <AvatarFallback>RP</AvatarFallback>
           </Avatar>
           <div className="ml-4 space-y-1">
             <p className="text-sm font-medium leading-none">
-              #{Number(block?.blockHeader?.number)}
+              #{Number(rollup?.ID)}
             </p>
             <p className="text-sm text-muted-foreground word-break-all">
-              {formatTimeAgo(block?.blockHeader?.timestamp)}
+              {formatTimeAgo(rollup?.Timestamp)}
             </p>
           </div>
           <div className="ml-auto font-medium min-w-[140px]">
-            <TruncatedAddress address={block?.blockHeader?.hash} />
+            <Link href={`/rollup/${rollup?.Hash}`} className="text-primary">
+              <TruncatedAddress address={rollup?.Hash} />
+            </Link>
           </div>
         </div>
       ))}

diff --git a/tools/tenscan/frontend/src/components/modules/rollups/columns.tsx b/tools/tenscan/frontend/src/components/modules/rollups/columns.tsx
@@ -3,7 +3,7 @@
 import { ColumnDef } from "@tanstack/react-table";
 import { DataTableColumnHeader } from "../common/data-table/data-table-column-header";
 import TruncatedAddress from "../common/truncated-address";
-import { formatNumber, formatTimeAgo } from "@/src/lib/utils";
+import { formatTimeAgo } from "@/src/lib/utils";
 import Link from "next/link";
 import { EyeOpenIcon } from "@radix-ui/react-icons";
 import { Rollup } from "@/src/types/interfaces/RollupInterfaces";
@@ -76,7 +76,7 @@ export const columns: ColumnDef<Rollup>[] = [
   {
     accessorKey: "FirstSeq",
     header: ({ column }) => (
-      <DataTableColumnHeader column={column} title="First Sequencer" />
+      <DataTableColumnHeader column={column} title="First Batch Seq. No." />
     ),
     cell: ({ row }) => {
       return (
@@ -98,7 +98,7 @@ export const columns: ColumnDef<Rollup>[] = [
   {
     accessorKey: "LastSeq",
     header: ({ column }) => (
-      <DataTableColumnHeader column={column} title="Last Sequencer" />
+      <DataTableColumnHeader column={column} title="Last Batch Seq. No." />
     ),
     cell: ({ row }) => {
       return (

diff --git a/tools/tenscan/frontend/src/components/modules/rollups/rollup-details.tsx b/tools/tenscan/frontend/src/components/modules/rollups/rollup-details.tsx
@@ -44,7 +44,7 @@ export function RollupDetailsComponent({
           value={<TruncatedAddress address={rollupDetails?.L1Hash} />}
         />
         <KeyValueItem
-          label="First Seq No."
+          label="First Batch Seq No."
           value={
             <Link
               href={`/rollup/batch/sequence/${rollupDetails?.FirstSeq}`}
@@ -55,7 +55,7 @@ export function RollupDetailsComponent({
           }
         />
         <KeyValueItem
-          label="Last Seq No."
+          label="Last Batch Seq No."
           value={
             <Link
               href={`/rollup/batch/sequence/${rollupDetails?.LastSeq}`}