basic tx detail UI

Author: joaquim-verges

apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/cloud/analytics/tx-table/types.ts

@@ -66,21 +66,50 @@ export type Transaction = {
   transactionHash: Hex | null;
   confirmedAt: Date | null;
   confirmedAtBlockNumber: string | null;
-  // enrichedData: EnrichedDataItem[];
+  enrichedData: unknown[];
   executionParams: ExecutionParamsSerialized;
   executionResult: ExecutionResultSerialized | null;
   createdAt: Date;
   errorMessage: string | null;
   cancelledAt: Date | null;
 };
 
-export type TransactionStatus = ExecutionResultSerialized["status"];
+export type TransactionStatus =
+  | "QUEUED"
+  | "SUBMITTED"
+  | "CONFIRMED"
+  | "REVERTED";
+
+export type TransactionParam = {
+  to: string;
+  data: string;
+  value: string;
+};
+
+export type ExecutionParams = {
+  type: string;
+  signerAddress: string;
+  entrypointAddress: string;
+  smartAccountAddress: string;
+};
+
+export type ExecutionResult = {
+  status: TransactionStatus;
+  nonce?: string;
+  userOpHash?: string;
+  actualGasCost?: string;
+  actualGasUsed?: string;
+  onchainStatus?: string;
+  transactionHash?: string;
+};
+
+export type Pagination = {
+  totalCount: string;
+  page: number;
+  limit: number;
+};
 
 export type TransactionsResponse = {
   transactions: Transaction[];
-  pagination: {
-    limit: number;
-    page: number;
-    totalCount: number;
-  };
+  pagination: Pagination;
 };

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

@@ -1,7 +1,7 @@
 import { getProject } from "@/api/projects";
-import { CodeServer } from "@/components/ui/code/code.server";
 import { notFound, redirect } from "next/navigation";
 import { getSingleTransaction } from "../../lib/analytics";
+import { TransactionDetailsUI } from "./transaction-details-ui";
 
 export default async function TransactionPage({
   params,
@@ -27,10 +27,12 @@ export default async function TransactionPage({
   }
 
   return (
-    <div className="p-4">
-      <h1 className="mb-4 font-bold text-2xl">Transaction Details</h1>
-      {/* TODO: add transaction details UI */}
-      <CodeServer lang="json" code={JSON.stringify(transactionData, null, 2)} />
+    <div className="space-y-6 p-2">
+      <TransactionDetailsUI
+        transaction={transactionData}
+        teamSlug={team_slug}
+        project={project}
+      />
     </div>
   );
 }