diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/transactions/analytics/tx-table/tx-table-ui.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/transactions/analytics/tx-table/tx-table-ui.tsx index 0a73f93a9d9..92f2e1c2056 100644 --- a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/transactions/analytics/tx-table/tx-table-ui.tsx +++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/transactions/analytics/tx-table/tx-table-ui.tsx @@ -13,6 +13,7 @@ import { Badge } from "@/components/ui/badge"; import { Button } from "@/components/ui/button"; import { CopyAddressButton } from "@/components/ui/CopyAddressButton"; import { CopyTextButton } from "@/components/ui/CopyTextButton"; +import { Input } from "@/components/ui/input"; import { Label } from "@/components/ui/label"; import { Select, @@ -49,6 +50,8 @@ export function TransactionsTableUI(props: { getData: (params: { page: number; status: TransactionStatus | undefined; + id: string | undefined; + from: string | undefined; }) => Promise; project: Project; teamSlug: string; @@ -60,13 +63,15 @@ export function TransactionsTableUI(props: { const [status, setStatus] = useState( undefined, ); + const [id, setId] = useState(undefined); + const [from, setFrom] = useState(undefined); const [page, setPage] = useState(1); const pageSize = 10; const transactionsQuery = useQuery({ placeholderData: keepPreviousData, - queryFn: () => props.getData({ page, status }), - queryKey: ["transactions", props.project.id, page, status], + queryFn: () => props.getData({ page, status, id, from }), + queryKey: ["transactions", props.project.id, page, status, id, from], refetchInterval: autoUpdate ? 4_000 : false, }); @@ -84,18 +89,18 @@ export function TransactionsTableUI(props: { return (
-
-
-

- Transaction History -

-

- Transactions sent from server wallets -

-
+
+
+
+

+ Transaction History +

+

+ Transactions sent from server wallets +

+
-
-
+
setAutoUpdate(!!v)} />
- { - setStatus(v); - // reset page +
+ +
+ { + const value = e.target.value.trim(); + setId(value || undefined); setPage(1); }} - status={status} + placeholder="Filter by Queue ID" + value={id || ""} /> + { + const value = e.target.value.trim(); + setFrom(value || undefined); + setPage(1); + }} + placeholder="Filter by wallet address" + value={from || ""} + /> +
+ { + setStatus(v); + // reset page + setPage(1); + }} + status={status} + /> +
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/transactions/analytics/tx-table/tx-table.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/transactions/analytics/tx-table/tx-table.tsx index 89efeb4c5a5..5a9366f8b90 100644 --- a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/transactions/analytics/tx-table/tx-table.tsx +++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/transactions/analytics/tx-table/tx-table.tsx @@ -16,11 +16,13 @@ export function TransactionsTable(props: { return ( { + getData={async ({ page, status, id, from }) => { return await getTransactions({ page, project: props.project, status, + id, + from, }); }} project={props.project} @@ -34,10 +36,14 @@ async function getTransactions({ project, page, status, + id, + from, }: { project: Project; page: number; status: TransactionStatus | undefined; + id: string | undefined; + from: string | undefined; }) { const transactions = await engineCloudProxy<{ result: TransactionsResponse }>( { @@ -52,6 +58,8 @@ async function getTransactions({ limit: "20", page: page.toString(), status: status ?? undefined, + id: id ?? undefined, + from: from ?? undefined, }, }, );