Revert "[Tenscan] personal transaction/contract deployment details page"

ten-protocol · Jul 17, 2024 · 0f3aedd · 0f3aedd
1 parent ec5315b
commit 0f3aedd
Show file tree

Hide file tree

Showing 16 changed files with 85 additions and 492 deletions.
diff --git a/tools/tenscan/frontend/api/transactions.ts b/tools/tenscan/frontend/api/transactions.ts
@@ -1,15 +1,13 @@
-import { jsonHexToObj } from "@/src/lib/utils";
 import { httpRequest } from ".";
-import { apiRoutes, ethMethods, tenCustomQueryMethods } from "@/src/routes";
+import { apiRoutes } from "@/src/routes";
 import { pathToUrl } from "@/src/routes/router";
-import { ResponseDataInterface, ToastType } from "@/src/types/interfaces";
+import { ResponseDataInterface } from "@/src/types/interfaces";
 import {
   TransactionCount,
   Price,
   TransactionResponse,
   Transaction,
 } from "@/src/types/interfaces/TransactionInterfaces";
-import { showToast } from "@/src/components/ui/use-toast";
 
 export const fetchTransactions = async (
   payload?: Record<string, any>
@@ -43,52 +41,3 @@ export const fetchTransactionByHash = async (
     url: pathToUrl(apiRoutes.getTransactionByHash, { hash }),
   });
 };
-
-export const personalTransactionsData = async (
-  provider: any,
-  walletAddress: string | null,
-  options: Record<string, any>
-) => {
-  try {
-    if (provider && walletAddress) {
-      const requestPayload = {
-        address: walletAddress,
-        pagination: {
-          ...options,
-        },
-      };
-      const personalTxResp = await provider.send(ethMethods.getStorageAt, [
-        tenCustomQueryMethods.listPersonalTransactions,
-        JSON.stringify(requestPayload),
-        null,
-      ]);
-      const personalTxData = jsonHexToObj(personalTxResp);
-      return personalTxData;
-    }
-
-    return null;
-  } catch (error) {
-    console.error("Error fetching personal transactions:", error);
-    showToast(ToastType.DESTRUCTIVE, "Error fetching personal transactions");
-    throw error;
-  }
-};
-
-export const fetchPersonalTxnByHash = async (
-  provider: any,
-  hash: string
-): Promise<any> => {
-  try {
-    if (provider) {
-      const personalTxnResp = await provider.send(
-        ethMethods.getTransactionReceipt,
-        [hash]
-      );
-      return personalTxnResp;
-    }
-  } catch (error) {
-    console.error("Error fetching personal transaction:", error);
-    showToast(ToastType.DESTRUCTIVE, "Error fetching personal transaction");
-    throw error;
-  }
-};
diff --git a/tools/tenscan/frontend/pages/tx/[hash].tsx b/tools/tenscan/frontend/pages/tx/[hash].tsx
@@ -1,3 +1,4 @@
+import { fetchBatchByHash } from "@/api/batches";
 import { fetchTransactionByHash } from "@/api/transactions";
 import Layout from "@/src/components/layouts/default-layout";
 import { TransactionDetailsComponent } from "@/src/components/modules/transactions/transaction-details";
@@ -8,6 +9,7 @@ import {
   CardHeader,
   CardTitle,
   CardContent,
+  CardDescription,
 } from "@/src/components/ui/card";
 import { Skeleton } from "@/src/components/ui/skeleton";
 import { useQuery } from "@tanstack/react-query";
@@ -26,40 +28,30 @@ export default function TransactionDetails() {
 
   return (
     <Layout>
-      <Card className="col-span-3">
-        {isLoading ? (
-          <>
-            <Skeleton className="h-10 w-100" />
-            <Skeleton className="h-10 w-100" />
-            <Skeleton className="h-10 w-100" />
-            <Skeleton className="h-10 w-100" />
-            <Skeleton className="h-10 w-100" />
-            <Skeleton className="h-10 w-100" />
-          </>
-        ) : transactionDetails ? (
-          <>
-            <CardHeader>
-              <CardTitle>Transaction Details</CardTitle>
-            </CardHeader>
-            <CardContent>
-              <TransactionDetailsComponent
-                transactionDetails={transactionDetails}
-              />
-            </CardContent>
-          </>
-        ) : (
-          <EmptyState
-            title="Transaction not found"
-            description="The transaction you are looking for does not exist."
-            action={
-              <Button onClick={() => router.push("/transactions")}>
-                Go back
-              </Button>
-            }
-            className="p-8"
-          />
-        )}
-      </Card>
+      {isLoading ? (
+        <Skeleton className="h-full w-full" />
+      ) : transactionDetails ? (
+        <Card className="col-span-3">
+          <CardHeader>
+            <CardTitle>Transaction Details</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <TransactionDetailsComponent
+              transactionDetails={transactionDetails}
+            />
+          </CardContent>
+        </Card>
+      ) : (
+        <EmptyState
+          title="Transaction not found"
+          description="The transaction you are looking for does not exist."
+          action={
+            <Button onClick={() => router.push("/transactions")}>
+              Go back
+            </Button>
+          }
+        />
+      )}
     </Layout>
   );
 }

diff --git a/tools/tenscan/frontend/pages/tx/personal/[hash].tsx b/tools/tenscan/frontend/pages/tx/personal/[hash].tsx
diff --git a/tools/tenscan/frontend/src/components/modules/common/data-table/data-table-pagination.tsx b/tools/tenscan/frontend/src/components/modules/common/data-table/data-table-pagination.tsx
@@ -117,10 +117,6 @@ export function DataTablePagination<TData>({
               setPage(table.getState().pagination.pageIndex + 1);
               table.nextPage();
             }}
-            disabled={
-              table.getState().pagination.pageSize >
-              table?.getFilteredRowModel()?.rows?.length
-            }
             // uncomment the following line when total count feature is implemented
             // disabled={!table.getCanNextPage()}
           >

diff --git a/tools/tenscan/frontend/src/components/modules/common/empty-state.tsx b/tools/tenscan/frontend/src/components/modules/common/empty-state.tsx
@@ -1,4 +1,3 @@
-import { cn } from "@/src/lib/utils";
 import Image from "next/image";
 import React from "react";
 
@@ -9,32 +8,23 @@ const EmptyState = ({
   imageSrc,
   imageAlt,
   action,
-  className,
 }: {
   title?: string;
   description?: string;
   icon?: React.ReactNode;
   imageSrc?: string;
   imageAlt?: string;
   action?: React.ReactNode;
-  className?: string;
 }) => {
   return (
-    <div
-      className={cn(
-        "flex flex-col items-center justify-center space-y-4",
-        className
-      )}
-    >
+    <div className="flex flex-col items-center justify-center h-full">
       <div className="flex flex-col items-center justify-center space-y-4">
         {icon && <div className="w-24 h-24">{icon}</div>}
         {imageSrc && (
           <Image
             src={imageSrc}
             alt={imageAlt || "Empty state"}
             className="w-24 h-24 rounded-full"
-            width={96}
-            height={96}
           />
         )}
         {title && (

diff --git a/tools/tenscan/frontend/src/components/modules/dashboard/analytics-card.tsx b/tools/tenscan/frontend/src/components/modules/dashboard/analytics-card.tsx
@@ -21,10 +21,10 @@ export default function AnalyticsCard({
       </CardHeader>
       <CardContent>
         <div className="text-2xl font-bold truncate mb-1">
-          {item.loading ? (
-            <Skeleton className="w-[100px] h-[20px] rounded-full" />
-          ) : (
+          {item.value ? (
             item.value
+          ) : (
+            <Skeleton className="w-[100px] h-[20px] rounded-full" />
           )}
         </div>
         {item?.change && (

diff --git a/tools/tenscan/frontend/src/components/modules/dashboard/index.tsx b/tools/tenscan/frontend/src/components/modules/dashboard/index.tsx
@@ -39,15 +39,9 @@ interface RecentData {
 }
 
 export default function Dashboard() {
-  const {
-    price,
-    isPriceLoading,
-    transactions,
-    transactionCount,
-    isTransactionCountLoading,
-  } = useTransactionsService();
-  const { contractCount, isContractCountLoading } = useContractsService();
-  const { batches, latestBatch, isLatestBatchLoading } = useBatchesService();
+  const { price, transactions, transactionCount } = useTransactionsService();
+  const { contractCount } = useContractsService();
+  const { batches, latestBatch } = useBatchesService();
   const { rollups } = useRollupsService();
 
   const DASHBOARD_DATA = [
@@ -59,7 +53,6 @@ export default function Dashboard() {
       // TODO: add change
       // change: "+20.1%",
       icon: RocketIcon,
-      loading: isPriceLoading,
     },
     {
       title: "Latest L2 Batch",
@@ -69,7 +62,6 @@ export default function Dashboard() {
       // TODO: add change
       // change: "+20.1%",
       icon: LayersIcon,
-      loading: isLatestBatchLoading,
     },
     {
       title: "Latest L1 Rollup",
@@ -85,7 +77,6 @@ export default function Dashboard() {
       // TODO: add change
       // change: "+20.1%",
       icon: CubeIcon,
-      loading: isLatestBatchLoading,
     },
     {
       title: "Transactions",
@@ -95,15 +86,13 @@ export default function Dashboard() {
       // TODO: add change
       // change: "+20.1%",
       icon: ReaderIcon,
-      loading: isTransactionCountLoading,
     },
     {
       title: "Contracts",
       value: contractCount?.count ? formatNumber(contractCount.count) : "N/A",
       // TODO: add change
       // change: "+20.1%",
       icon: FileTextIcon,
-      loading: isContractCountLoading,
     },
     {
       title: "Nodes",

diff --git a/tools/tenscan/frontend/src/components/modules/personal/columns.tsx b/tools/tenscan/frontend/src/components/modules/personal/columns.tsx
@@ -129,7 +129,7 @@ export const columns: ColumnDef<PersonalTransactions>[] = [
     id: "actions",
     cell: ({ row }) => {
       return (
-        <Link href={`/tx/personal/${row.original.transactionHash}`}>
+        <Link href={`/tx/${row.original.transactionHash}`}>
           <EyeOpenIcon className="h-5 w-5 text-muted-foreground hover:text-primary transition-colors cursor-pointer" />
         </Link>
       );