Merge pull request #1932 from ten-protocol/jennifer/2751-tenscan-ui-u…

…pdates

[Tenscan] Frontend Updates

contracts/src/bridge/frontend/src/lib/constants.ts

@@ -1,6 +1,6 @@
 export const socialLinks = {
   github: "https://github.com/ten-protocol",
-  discord: "https://discord.gg/QJZ39Den7d",
+  discord: "https://discord.gg/tenprotocol",
   twitter: "https://twitter.com/tenprotocol",
   twitterHandle: "@tenprotocol",
 };

tools/tenscan/frontend/.nvmrc

@@ -0,0 +1 @@
+v20.11.0

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,16 @@ export const fetchRollups = async (
   });
 };
 
+export const fetchRollups = async (
+  payload?: Record<string, any>
+): Promise<ResponseDataInterface<RollupsResponse>> => {
+  return await httpRequest<ResponseDataInterface<RollupsResponse>>({
+    method: "get",
+    url: pathToUrl(apiRoutes.getRollups),
+    searchParams: payload,
+  });
+};
+
 export const decryptEncryptedRollup = async ({
   StrData,
 }: {
@@ -24,3 +39,32 @@ 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>> => {
+  return await httpRequest<ResponseDataInterface<Rollup>>({
+    method: "get",
+    url: pathToUrl(apiRoutes.getRollupByBatchSequence, { seq }),
+  });
+};
+
+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/package.json

@@ -37,9 +37,9 @@
     "next": "14.0.1",
     "next-themes": "^0.2.1",
     "path-to-regexp": "^6.2.1",
-    "react": "^18",
+    "react": "^18.2.0",
     "react-day-picker": "^8.9.1",
-    "react-dom": "^18",
+    "react-dom": "^18.2.0",
     "react-json-pretty": "^2.2.0",
     "recharts": "^2.9.3",
     "tailwind-merge": "^2.0.0",

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,66 @@
+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 { 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";
+import TruncatedAddress from "@/src/components/modules/common/truncated-address";
+
+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>
+      <Card className="col-span-3">
+        <CardHeader>
+          <CardTitle>Transactions</CardTitle>
+          <CardDescription className="flex items-center space-x-2">
+            <p>Overview of all transactions in this batch:</p>
+            <TruncatedAddress
+              address={fullHash as string}
+              showCopy={false}
+              link={"/batch/" + fullHash}
+            />
+          </CardDescription>
+        </CardHeader>
+        <CardContent>
+          <DataTable
+            columns={columns}
+            data={TransactionsData}
+            refetch={refetch}
+            total={+Total}
+            isLoading={isLoading}
+            noResultsMessage="No transactions found in this batch."
+            noPagination={true}
+          />
+        </CardContent>
+      </Card>
+    </Layout>
+  );
+}
+
+export async function getServerSideProps(context: any) {
+  return {
+    props: {},
+  };
+}

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

@@ -4,46 +4,61 @@ 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";
+import { getItem } from "@/src/lib/utils";
+import { ItemPosition } from "@/src/types/interfaces";
 
 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,
   };
 
   React.useEffect(() => {
     setNoPolling(true);
+
+    return () => {
+      setNoPolling(false);
+    };
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
+  const firstBatchHeight = Number(getItem(BatchesData, "height"));
+  const lastBatchHeight = Number(
+    getItem(BatchesData, "height", ItemPosition.LAST)
+  );
+
   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)} Batches found.
-            </p>
+            {BatchesData?.length > 0 && (
+              <p className="text-sm text-muted-foreground">
+                Showing batches #{firstBatchHeight}{" "}
+                {lastBatchHeight !== firstBatchHeight &&
+                  "to #" + lastBatchHeight}
+                {/* uncomment the following line when total count feature is implemented */}
+                {/* of {formatNumber(Total)} batches. */}
+              </p>
+            )}
           </div>
         </div>
-        {BatchesData ? (
-          <DataTable
-            columns={columns}
-            data={BatchesData}
-            refetch={refetchBatches}
-            total={+Total}
-          />
-        ) : (
-          <p>Loading...</p>
-        )}
+        <DataTable
+          columns={columns}
+          data={BatchesData}
+          refetch={refetchBatches}
+          total={+Total}
+          isLoading={isBatchesLoading}
+          noResultsText="batches"
+        />
       </div>
     </Layout>
   );