[Dashboard] Add status filter to transactions table

Author: joaquim-verges

apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/transactions/analytics/tx-table/tx-table-ui.tsx

@@ -46,7 +46,10 @@ import type {
 
 // TODO - add Status selector dropdown here
 export function TransactionsTableUI(props: {
-  getData: (params: { page: number }) => Promise<TransactionsResponse>;
+  getData: (params: {
+    page: number;
+    status: TransactionStatus | undefined;
+  }) => Promise<TransactionsResponse>;
   project: Project;
   teamSlug: string;
   wallets?: Wallet[];
@@ -63,8 +66,8 @@ export function TransactionsTableUI(props: {
   const transactionsQuery = useQuery({
     enabled: !!props.wallets && props.wallets.length > 0,
     placeholderData: keepPreviousData,
-    queryFn: () => props.getData({ page }),
-    queryKey: ["transactions", props.project.id, page],
+    queryFn: () => props.getData({ page, status }),
+    queryKey: ["transactions", props.project.id, page, status],
     refetchInterval: autoUpdate ? 4_000 : false,
   });
 
@@ -222,10 +225,6 @@ export const statusDetails = {
     name: "Queued",
     type: "warning",
   },
-  REVERTED: {
-    name: "Reverted",
-    type: "destructive",
-  },
   SUBMITTED: {
     name: "Submitted",
     type: "warning",

apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/transactions/analytics/tx-table/tx-table.tsx

@@ -5,7 +5,7 @@ import { engineCloudProxy } from "@/actions/proxies";
 import type { Project } from "@/api/projects";
 import type { Wallet } from "../../server-wallets/wallet-table/types";
 import { TransactionsTableUI } from "./tx-table-ui";
-import type { TransactionsResponse } from "./types";
+import type { TransactionStatus, TransactionsResponse } from "./types";
 
 export function TransactionsTable(props: {
   project: Project;
@@ -16,10 +16,11 @@ export function TransactionsTable(props: {
   return (
     <TransactionsTableUI
       client={props.client}
-      getData={async ({ page }) => {
+      getData={async ({ page, status }) => {
         return await getTransactions({
           page,
           project: props.project,
+          status,
         });
       }}
       project={props.project}
@@ -32,23 +33,26 @@ export function TransactionsTable(props: {
 async function getTransactions({
   project,
   page,
+  status,
 }: {
   project: Project;
   page: number;
+  status: TransactionStatus | undefined;
 }) {
   const transactions = await engineCloudProxy<{ result: TransactionsResponse }>(
     {
-      body: JSON.stringify({
-        limit: 20,
-        page,
-      }),
       headers: {
         "Content-Type": "application/json",
         "x-client-id": project.publishableKey,
         "x-team-id": project.teamId,
       },
-      method: "POST",
-      pathname: "/v1/transactions/search",
+      method: "GET",
+      pathname: `/v1/transactions`,
+      searchParams: {
+        limit: "20",
+        page: page.toString(),
+        status: status ?? undefined,
+      },
     },
   );
 

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

@@ -85,12 +85,7 @@ export type Transaction = {
   cancelledAt: Date | null;
 };
 
-export type TransactionStatus =
-  | "QUEUED"
-  | "SUBMITTED"
-  | "CONFIRMED"
-  | "REVERTED"
-  | "FAILED";
+export type TransactionStatus = "QUEUED" | "SUBMITTED" | "CONFIRMED" | "FAILED";
 
 type Pagination = {
   totalCount: number;