basic tx detail view

Author: joaquim-verges

apps/dashboard/src/app/team/[team_slug]/[project_slug]/engine/analytics/tx-table/tx-table-ui.tsx

@@ -136,9 +136,7 @@ export function TransactionsTableUI(props: {
                     key={`${tx.id}${tx.chainId}`}
                     className="cursor-pointer hover:bg-accent/50"
                     onClick={() => {
-                      router.push(
-                        `/team/${props.project.teamId}/project/${props.project.id}/engine/tx/${tx.id}`,
-                      );
+                      router.push(`engine/tx/${tx.id}`);
                     }}
                   >
                     {/* Queue ID */}

apps/dashboard/src/app/team/[team_slug]/[project_slug]/engine/lib/analytics.ts

@@ -1,3 +1,4 @@
+import type { Transaction } from "thirdweb/dist/types/insight/get-transactions";
 import { THIRDWEB_ENGINE_CLOUD_URL } from "../../../../../../@/constants/env";
 import type { TransactionStats } from "../../../../../../types/analytics";
 import { getAuthToken } from "../../../../../api/lib/getAuthToken";
@@ -154,7 +155,7 @@ export async function getSingleTransaction({
   teamId: string;
   clientId: string;
   transactionId: string;
-}): Promise<TransactionStats[]> {
+}): Promise<Transaction | undefined> {
   const authToken = await getAuthToken();
 
   const filters = {
@@ -168,7 +169,7 @@ export async function getSingleTransaction({
   };
 
   const response = await fetch(
-    `${THIRDWEB_ENGINE_CLOUD_URL}/project/transactions/analytics`,
+    `${THIRDWEB_ENGINE_CLOUD_URL}/project/transactions/search`,
     {
       method: "POST",
       headers: {
@@ -183,7 +184,7 @@ export async function getSingleTransaction({
 
   if (!response.ok) {
     if (response.status === 401) {
-      return [];
+      return undefined;
     }
 
     // TODO - need to handle this error state, like we do with the connect charts
@@ -192,26 +193,54 @@ export async function getSingleTransaction({
     );
   }
 
-  type TransactionsChartResponse = {
+  type TransactionParam = {
+    to: string;
+    data: string;
+    value: string;
+  };
+
+  type ExecutionParams = {
+    type: string;
+    signerAddress: string;
+    entrypointAddress: string;
+    smartAccountAddress: string;
+  };
+
+  type ExecutionResult = {
+    status: string;
+  };
+
+  type Transaction = {
+    id: string;
+    batchIndex: number;
+    chainId: string;
+    from: string;
+    transactionParams: TransactionParam[];
+    transactionHash: string | null;
+    confirmedAt: string | null;
+    confirmedAtBlockNumber: number | null;
+    enrichedData: unknown[];
+    executionParams: ExecutionParams;
+    executionResult: ExecutionResult;
+    createdAt: string;
+    errorMessage: string | null;
+    cancelledAt: string | null;
+  };
+
+  type Pagination = {
+    totalCount: string;
+    page: number;
+    limit: number;
+  };
+
+  type TransactionsSearchResponse = {
     result: {
-      analytics: Array<{
-        timeBucket: string;
-        chainId: string;
-        count: number;
-      }>;
-      metadata: {
-        resolution: string;
-        startDate: string;
-        endDate: string;
-      };
+      transactions: Transaction[];
+      pagination: Pagination;
     };
   };
 
-  const data = (await response.json()) as TransactionsChartResponse;
+  const data = (await response.json()) as TransactionsSearchResponse;
 
-  return data.result.analytics.map((stat) => ({
-    date: stat.timeBucket,
-    chainId: Number(stat.chainId),
-    count: stat.count,
-  }));
+  return data.result.transactions[0];
 }

apps/dashboard/src/app/team/[team_slug]/[project_slug]/engine/tx/[id]/layout.tsx

@@ -0,0 +1,25 @@
+import { ChevronLeft } from "lucide-react";
+import Link from "next/link";
+
+export default function TransactionLayout({
+  children,
+  params,
+}: {
+  children: React.ReactNode;
+  params: { team_slug: string; project_slug: string };
+}) {
+  return (
+    <div className="flex flex-col gap-4">
+      <div className="flex items-center gap-2">
+        <Link
+          href={`/team/${params.team_slug}/${params.project_slug}/engine`}
+          className="flex items-center gap-1 text-muted-foreground text-sm hover:text-foreground"
+        >
+          <ChevronLeft className="h-4 w-4" />
+          Back to Transactions
+        </Link>
+      </div>
+      <div className="flex-1">{children}</div>
+    </div>
+  );
+}

apps/dashboard/src/app/team/[team_slug]/[project_slug]/engine/tx/[id]/page.tsx

@@ -1,22 +1,36 @@
+import { notFound, redirect } from "next/navigation";
+import { getProject } from "../../../../../../../@/api/projects";
+import { CodeServer } from "../../../../../../../@/components/ui/code/code.server";
 import { getSingleTransaction } from "../../lib/analytics";
 
 export default async function TransactionPage({
   params,
 }: {
-  params: { team_slug: string; project_slug: string; id: string };
+  params: Promise<{ team_slug: string; project_slug: string; id: string }>;
 }) {
+  const { team_slug, project_slug, id } = await params;
+
+  const project = await getProject(team_slug, project_slug);
+
+  if (!project) {
+    redirect(`/team/${team_slug}`);
+  }
+
   const transactionData = await getSingleTransaction({
-    teamId: params.team_slug,
-    clientId: params.project_slug,
-    transactionId: params.id,
+    teamId: project.teamId,
+    clientId: project.publishableKey,
+    transactionId: id,
   });
 
+  if (!transactionData) {
+    notFound();
+  }
+
   return (
     <div className="p-4">
       <h1 className="mb-4 font-bold text-2xl">Transaction Details</h1>
-      <pre className="overflow-auto rounded-lg bg-gray-100 p-4">
-        {JSON.stringify(transactionData, null, 2)}
-      </pre>
+      {/* TODO: add transaction details UI */}
+      <CodeServer lang="json" code={JSON.stringify(transactionData, null, 2)} />
     </div>
   );
 }