- fix pagination bug

- update default size constant to 20 per page

tools/tenscan/frontend/api/rollups.ts

@@ -18,12 +18,13 @@ export const fetchLatestRollups = async (
   });
 };
 
-export const fetchRollups = async (): Promise<
-  ResponseDataInterface<RollupsResponse>
-> => {
+export const fetchRollups = async (
+  payload?: Record<string, any>
+): Promise<ResponseDataInterface<RollupsResponse>> => {
   return await httpRequest<ResponseDataInterface<RollupsResponse>>({
     method: "get",
     url: pathToUrl(apiRoutes.getRollups),
+    searchParams: payload,
   });
 };
 

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

@@ -4,15 +4,15 @@ import { DataTable } from "@/src/components/modules/common/data-table/data-table
 import Layout from "@/src/components/layouts/default-layout";
 import { Metadata } from "next";
 import { useBatchesService } from "@/src/services/useBatchesService";
-import { formatNumber } from "@/src/lib/utils";
 
 export const metadata: Metadata = {
   title: "Batches",
   description: "A table of Batches.",
 };
 
 export default function Batches() {
-  const { batches, refetchBatches, setNoPolling } = useBatchesService();
+  const { batches, refetchBatches, isBatchesLoading, setNoPolling } =
+    useBatchesService();
   const { BatchesData, Total } = batches?.result || {
     BatchesData: [],
     Total: 0,
@@ -33,10 +33,14 @@ export default function Batches() {
         <div className="flex items-center justify-between space-y-2">
           <div>
             <h2 className="text-2xl font-bold tracking-tight">Batches</h2>
-            {/* uncomment the following line when total count feature is implemented */}
-            {/* <p className="text-sm text-muted-foreground">
-              {formatNumber(Total)} Batch(es) found.
-            </p> */}
+            {BatchesData.length > 0 && (
+              <p className="text-sm text-muted-foreground">
+                Showing batches #{BatchesData[0]?.height} to #
+                {BatchesData[BatchesData.length - 1]?.height}
+                {/* uncomment the following line when total count feature is implemented */}
+                {/* of {formatNumber(Total)} batches. */}
+              </p>
+            )}
           </div>
         </div>
         {BatchesData ? (
@@ -45,6 +49,7 @@ export default function Batches() {
             data={BatchesData}
             refetch={refetchBatches}
             total={+Total}
+            isLoading={isBatchesLoading}
           />
         ) : (
           <p>Loading...</p>

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

@@ -4,7 +4,6 @@ import { DataTable } from "@/src/components/modules/common/data-table/data-table
 import Layout from "@/src/components/layouts/default-layout";
 import { Metadata } from "next";
 import { useBlocksService } from "@/src/services/useBlocksService";
-import { formatNumber } from "@/src/lib/utils";
 
 export const metadata: Metadata = {
   title: "Blocks",
@@ -31,10 +30,14 @@ export default function Blocks() {
         <div className="flex items-center justify-between space-y-2">
           <div>
             <h2 className="text-2xl font-bold tracking-tight">Blocks</h2>
-            {/* uncomment the following line when total count feature is implemented */}
-            {/* <p className="text-sm text-muted-foreground">
-              {formatNumber(Total)} Blocks found.
-            </p> */}
+            {BlocksData.length > 0 && (
+              <p className="text-sm text-muted-foreground">
+                Showing blocks #{BlocksData[0]?.height} to #
+                {BlocksData[BlocksData.length - 1]?.height}
+                {/* uncomment the following line when total count feature is implemented */}
+                {/* of {formatNumber(Total)} blocks. */}
+              </p>
+            )}
           </div>
         </div>
         {BlocksData ? (

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

@@ -3,7 +3,6 @@ import { DataTable } from "@/src/components/modules/common/data-table/data-table
 import Layout from "@/src/components/layouts/default-layout";
 import { useRollupsService } from "@/src/services/useRollupsService";
 import { Metadata } from "next";
-import { formatNumber } from "@/src/lib/utils";
 import { columns } from "@/src/components/modules/rollups/columns";
 
 export const metadata: Metadata = {
@@ -34,10 +33,14 @@ export default function Rollups() {
         <div className="flex items-center justify-between space-y-2">
           <div>
             <h2 className="text-2xl font-bold tracking-tight">Rollups</h2>
-            {/* uncomment the following line when total count feature is implemented */}
-            {/* <p className="text-sm text-muted-foreground">
-              {formatNumber(Total)} Rollups found.
-            </p> */}
+            {RollupsData.length > 0 && (
+              <p className="text-sm text-muted-foreground">
+                Showing rollups #{RollupsData[0]?.ID} to #
+                {RollupsData[RollupsData.length - 1]?.ID}
+                {/* uncomment the following line when total count feature is implemented */}
+                {/* of {formatNumber(Total)} rollups. */}
+              </p>
+            )}
           </div>
         </div>
         {RollupsData ? (

tools/tenscan/frontend/src/lib/constants.ts

@@ -23,7 +23,7 @@ export const getOptions = (query: {
   const options = {
     offset: Number.isNaN(offset) ? 0 : offset,
     size: Number.isNaN(parseInt(query.size as string, 10))
-      ? 10
+      ? 20
       : parseInt(query.size as string, 10),
     // sort: query.sort ? (query.sort as string) : "blockNumber",
     // order: query.order ? (query.order as string) : "desc",

tools/tenscan/frontend/src/services/useRollupsService.ts

@@ -29,7 +29,7 @@ export const useRollupsService = () => {
     refetch: refetchRollups,
   } = useQuery({
     queryKey: ["rollups"],
-    queryFn: () => fetchRollups(),
+    queryFn: () => fetchRollups(options),
     refetchInterval: noPolling ? false : pollingInterval,
   });