[Tenscan] Frontend Updates

tools/tenscan/frontend/api/batches.ts

@@ -6,6 +6,7 @@ import {
   Batch,
   BatchDetails,
   BatchResponse,
+  LatestBatch,
 } from "@/src/types/interfaces/BatchInterfaces";
 
 export const fetchBatches = async (
@@ -20,8 +21,8 @@ export const fetchBatches = async (
 
 export const fetchLatestBatch = async (
   payload?: Record<string, any>
-): Promise<ResponseDataInterface<Batch>> => {
-  return await httpRequest<ResponseDataInterface<Batch>>({
+): Promise<ResponseDataInterface<LatestBatch>> => {
+  return await httpRequest<ResponseDataInterface<LatestBatch>>({
     method: "get",
     url: pathToUrl(apiRoutes.getLatestBatch),
     searchParams: payload,
@@ -36,3 +37,23 @@ export const fetchBatchByHash = async (
     url: pathToUrl(apiRoutes.getBatchByHash, { hash }),
   });
 };
+
+export const fetchBatchByHeight = async (
+  height: string
+): Promise<ResponseDataInterface<Batch>> => {
+  return await httpRequest<ResponseDataInterface<Batch>>({
+    method: "get",
+    url: pathToUrl(apiRoutes.getBatchByHeight, { height }),
+  });
+};
+
+export const fetchBatchTransactions = async (
+  fullHash: string,
+  options?: Record<string, any>
+): Promise<ResponseDataInterface<any>> => {
+  return await httpRequest<ResponseDataInterface<any>>({
+    method: "get",
+    url: pathToUrl(apiRoutes.getBatchTransactions, { fullHash }),
+    searchParams: options,
+  });
+};

tools/tenscan/frontend/api/rollups.ts

@@ -2,8 +2,13 @@ import { httpRequest } from ".";
 import { apiRoutes } from "@/src/routes";
 import { pathToUrl } from "@/src/routes/router";
 import { ResponseDataInterface } from "@/src/types/interfaces";
+import { Batch, BatchResponse } from "@/src/types/interfaces/BatchInterfaces";
+import {
+  Rollup,
+  RollupsResponse,
+} from "@/src/types/interfaces/RollupInterfaces";
 
-export const fetchRollups = async (
+export const fetchLatestRollups = async (
   payload?: Record<string, any>
 ): Promise<ResponseDataInterface<any>> => {
   return await httpRequest<ResponseDataInterface<any>>({
@@ -13,6 +18,15 @@ export const fetchRollups = async (
   });
 };
 
+export const fetchRollups = async (): Promise<
+  ResponseDataInterface<RollupsResponse>
+> => {
+  return await httpRequest<ResponseDataInterface<RollupsResponse>>({
+    method: "get",
+    url: pathToUrl(apiRoutes.getRollups),
+  });
+};
+
 export const decryptEncryptedRollup = async ({
   StrData,
 }: {
@@ -24,3 +38,34 @@ export const decryptEncryptedRollup = async ({
     data: { StrData },
   });
 };
+
+export const fetchRollupByHash = async (
+  hash: string
+): Promise<ResponseDataInterface<Rollup>> => {
+  return await httpRequest<ResponseDataInterface<Rollup>>({
+    method: "get",
+    url: pathToUrl(apiRoutes.getRollupByHash, { hash }),
+  });
+};
+
+export const fetchRollupByBatchSequence = async (
+  seq: string
+): Promise<ResponseDataInterface<Rollup>> => {
+  const res = await httpRequest<ResponseDataInterface<Rollup>>({
+    method: "get",
+    url: pathToUrl(apiRoutes.getRollupByBatchSequence, { seq }),
+  });
+  console.log(res);
+  return res;
+};
+
+export const fetchBatchesInRollups = async (
+  hash: string,
+  options: Record<string, any>
+): Promise<ResponseDataInterface<BatchResponse>> => {
+  return await httpRequest<ResponseDataInterface<BatchResponse>>({
+    method: "get",
+    url: pathToUrl(apiRoutes.getBatchesInRollup, { hash }),
+    searchParams: options,
+  });
+};

tools/tenscan/frontend/api/transactions.ts

@@ -6,6 +6,7 @@ import {
   TransactionCount,
   Price,
   TransactionResponse,
+  Transaction,
 } from "@/src/types/interfaces/TransactionInterfaces";
 
 export const fetchTransactions = async (
@@ -31,3 +32,12 @@ export const fetchEtherPrice = async (): Promise<Price> => {
     url: apiRoutes.getEtherPrice,
   });
 };
+
+export const fetchTransactionByHash = async (
+  hash: string
+): Promise<ResponseDataInterface<Transaction>> => {
+  return await httpRequest<ResponseDataInterface<Transaction>>({
+    method: "get",
+    url: pathToUrl(apiRoutes.getTransactionByHash, { hash }),
+  });
+};

tools/tenscan/frontend/pages/address/[address].tsx

@@ -21,3 +21,9 @@ const AddressDetails = () => {
 };
 
 export default AddressDetails;
+
+export async function getServerSideProps(context: any) {
+  return {
+    props: {},
+  };
+}

tools/tenscan/frontend/pages/batches/[hash].tsx → tools/tenscan/frontend/pages/batch/[hash].tsx

@@ -1,6 +1,6 @@
 import { fetchBatchByHash } from "@/api/batches";
 import Layout from "@/src/components/layouts/default-layout";
-import { BatchDetailsComponent } from "@/src/components/modules/batches/batch-details";
+import { BatchHashDetailsComponent } from "@/src/components/modules/batches/batch-hash-details";
 import {
   Card,
   CardHeader,
@@ -36,7 +36,7 @@ export default function Batch() {
             </CardDescription>
           </CardHeader>
           <CardContent>
-            <BatchDetailsComponent batchDetails={batchDetails} />
+            <BatchHashDetailsComponent batchDetails={batchDetails} />
           </CardContent>
         </Card>
       ) : (
@@ -45,3 +45,9 @@ export default function Batch() {
     </Layout>
   );
 }
+
+export async function getServerSideProps(context: any) {
+  return {
+    props: {},
+  };
+}

tools/tenscan/frontend/pages/batch/height/[height].tsx

@@ -0,0 +1,53 @@
+import { fetchBatchByHeight } from "@/api/batches";
+import Layout from "@/src/components/layouts/default-layout";
+import { BatchHeightDetailsComponent } from "@/src/components/modules/batches/batch-height-details";
+import {
+  Card,
+  CardHeader,
+  CardTitle,
+  CardContent,
+  CardDescription,
+} from "@/src/components/ui/card";
+import { Skeleton } from "@/src/components/ui/skeleton";
+import { useQuery } from "@tanstack/react-query";
+import { useRouter } from "next/router";
+
+export default function Batch() {
+  const router = useRouter();
+  const { height } = router.query;
+
+  const { data, isLoading } = useQuery({
+    queryKey: ["batchHeight", height],
+    queryFn: () => fetchBatchByHeight(height as string),
+  });
+
+  const batchDetails = data?.item;
+
+  return (
+    <Layout>
+      {isLoading ? (
+        <Skeleton className="h-6 w-24" />
+      ) : batchDetails ? (
+        <Card className="col-span-3">
+          <CardHeader>
+            <CardTitle>Batch #{Number(batchDetails?.header?.number)}</CardTitle>
+            <CardDescription>
+              Overview of the batch #{Number(batchDetails?.header?.number)}
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <BatchHeightDetailsComponent batchDetails={batchDetails} />
+          </CardContent>
+        </Card>
+      ) : (
+        <div>Batch not found</div>
+      )}
+    </Layout>
+  );
+}
+
+export async function getServerSideProps(context: any) {
+  return {
+    props: {},
+  };
+}

tools/tenscan/frontend/pages/batch/txs/[fullHash].tsx

@@ -0,0 +1,67 @@
+import { fetchBatchTransactions } from "@/api/batches";
+import Layout from "@/src/components/layouts/default-layout";
+import { DataTable } from "@/src/components/modules/common/data-table/data-table";
+import EmptyState from "@/src/components/modules/common/empty-state";
+import { columns } from "@/src/components/modules/batches/transaction-columns";
+import {
+  Card,
+  CardHeader,
+  CardTitle,
+  CardContent,
+  CardDescription,
+} from "@/src/components/ui/card";
+import { useQuery } from "@tanstack/react-query";
+import { useRouter } from "next/router";
+import { getOptions } from "@/src/lib/constants";
+
+export default function BatchTransactions() {
+  const router = useRouter();
+  const { fullHash } = router.query;
+  const options = getOptions(router.query);
+
+  const { data, isLoading, refetch } = useQuery({
+    queryKey: ["batchTransactions", { fullHash, options }],
+    queryFn: () => fetchBatchTransactions(fullHash as string, options),
+  });
+
+  const { TransactionsData, Total } = data?.result || {
+    TransactionsData: [],
+    Total: 0,
+  };
+
+  return (
+    <Layout>
+      {TransactionsData ? (
+        <Card className="col-span-3">
+          <CardHeader>
+            <CardTitle>Transactions</CardTitle>
+            <CardDescription>
+              Overview of transactions at batch{" "}
+              {"#" + TransactionsData[0]?.BatchHeight}
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <DataTable
+              columns={columns}
+              data={TransactionsData}
+              refetch={refetch}
+              total={+Total}
+              isLoading={isLoading}
+            />
+          </CardContent>
+        </Card>
+      ) : (
+        <EmptyState
+          title="No transactions found"
+          description="There are no transactions in this batch."
+        />
+      )}
+    </Layout>
+  );
+}
+
+export async function getServerSideProps(context: any) {
+  return {
+    props: {},
+  };
+}

tools/tenscan/frontend/pages/batches/index.tsx

@@ -20,6 +20,10 @@ export default function Batches() {
 
   React.useEffect(() => {
     setNoPolling(true);
+
+    return () => {
+      setNoPolling(false);
+    };
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
@@ -30,7 +34,7 @@ export default function Batches() {
           <div>
             <h2 className="text-2xl font-bold tracking-tight">Batches</h2>
             <p className="text-sm text-muted-foreground">
-              {formatNumber(Total)} Batches found.
+              {formatNumber(Total)} Batch(es) found.
             </p>
           </div>
         </div>

tools/tenscan/frontend/pages/blocks/index.tsx

@@ -12,7 +12,8 @@ export const metadata: Metadata = {
 };
 
 export default function Blocks() {
-  const { blocks, setNoPolling, refetchBlocks } = useBlocksService();
+  const { blocks, setNoPolling, refetchBlocks, isBlocksLoading } =
+    useBlocksService();
   const { BlocksData, Total } = blocks?.result || {
     BlocksData: [],
     Total: 0,
@@ -41,6 +42,7 @@ export default function Blocks() {
             data={BlocksData}
             total={+Total}
             refetch={refetchBlocks}
+            isLoading={isBlocksLoading}
           />
         ) : (
           <p>Loading...</p>

tools/tenscan/frontend/pages/docs/[id].tsx

@@ -100,3 +100,9 @@ const Document = () => {
 };
 
 export default Document;
+
+export async function getServerSideProps(context: any) {
+  return {
+    props: {},
+  };
+}

tools/tenscan/frontend/pages/rollup/[hash]/batches.tsx

@@ -0,0 +1,54 @@
+import React from "react";
+import { columns } from "@/src/components/modules/batches/columns";
+import { DataTable } from "@/src/components/modules/common/data-table/data-table";
+import Layout from "@/src/components/layouts/default-layout";
+import { Metadata } from "next";
+import { formatNumber } from "@/src/lib/utils";
+import { useRollupsService } from "@/src/services/useRollupsService";
+
+export const metadata: Metadata = {
+  title: "Batches",
+  description: "A table of Batches.",
+};
+
+export default function RollupBatches() {
+  const { rollupBatches, isRollupBatchesLoading, refetchRollupBatches } =
+    useRollupsService();
+
+  const { BatchesData, Total } = rollupBatches?.result || {
+    BatchesData: [],
+    Total: 0,
+  };
+
+  return (
+    <Layout>
+      <div className="h-full flex-1 flex-col space-y-8 md:flex">
+        <div className="flex items-center justify-between space-y-2">
+          <div>
+            <h2 className="text-2xl font-bold tracking-tight">Batches</h2>
+            <p className="text-sm text-muted-foreground">
+              {formatNumber(Total)} Batch(es) found in this rollup.
+            </p>
+          </div>
+        </div>
+        {BatchesData ? (
+          <DataTable
+            columns={columns}
+            data={BatchesData}
+            refetch={refetchRollupBatches}
+            total={+Total}
+            isLoading={isRollupBatchesLoading}
+          />
+        ) : (
+          <p>Loading...</p>
+        )}
+      </div>
+    </Layout>
+  );
+}
+
+export async function getServerSideProps(context: any) {
+  return {
+    props: {},
+  };
+}