more refactors

Author: joaquim-verges

apps/dashboard/src/app/team/[team_slug]/[project_slug]/engine/analytics/analytics-page.tsx

@@ -1,3 +1,4 @@
+import type { Project } from "@/api/projects";
 import { ResponsiveSearchParamsProvider } from "responsive-rsc";
 import type { Wallet } from "../server-wallets/wallet-table/types";
 import { TransactionAnalyticsFilter } from "./filter";
@@ -11,10 +12,7 @@ export function TransactionsAnalyticsPageContent(props: {
     to?: string | undefined | string[];
     interval?: string | undefined | string[];
   };
-  teamId: string;
-  clientId: string;
-  project_slug: string;
-  team_slug: string;
+  project: Project;
   wallets?: Wallet[];
   expandTestTx?: boolean;
 }) {
@@ -28,22 +26,15 @@ export function TransactionsAnalyticsPageContent(props: {
         <div className="flex grow flex-col gap-6">
           <TransactionsChartCard
             searchParams={props.searchParams}
-            teamId={props.teamId}
-            clientId={props.clientId}
-            project_slug={props.project_slug}
-            team_slug={props.team_slug}
+            project={props.project}
             wallets={props.wallets ?? []}
           />
           <SendTestTransaction
             wallets={props.wallets}
-            clientId={props.clientId}
+            project={props.project}
             expanded={props.expandTestTx}
           />
-          <TransactionsTable
-            teamId={props.teamId}
-            clientId={props.clientId}
-            wallets={props.wallets}
-          />
+          <TransactionsTable project={props.project} wallets={props.wallets} />
         </div>
       </div>
     </ResponsiveSearchParamsProvider>

apps/dashboard/src/app/team/[team_slug]/[project_slug]/engine/analytics/send-test-tx.client.tsx

@@ -1,5 +1,8 @@
 "use client";
+import type { Project } from "@/api/projects";
+import { SingleNetworkSelector } from "@/components/blocks/NetworkSelectors";
 import { WalletAvatar } from "@/components/blocks/wallet-address";
+import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import {
   Select,
@@ -18,8 +21,6 @@ import { useForm } from "react-hook-form";
 import { toast } from "sonner";
 import { shortenAddress } from "thirdweb/utils";
 import * as z from "zod";
-import { SingleNetworkSelector } from "../../../../../../@/components/blocks/NetworkSelectors";
-import { Button } from "../../../../../../@/components/ui/button";
 import type { Wallet } from "../server-wallets/wallet-table/types";
 
 const formSchema = z.object({
@@ -33,7 +34,7 @@ type FormValues = z.infer<typeof formSchema>;
 
 export function SendTestTransaction(props: {
   wallets?: Wallet[];
-  clientId: string;
+  project: Project;
   expanded?: boolean;
 }) {
   const [isOpen, setIsOpen] = useState(props.expanded ?? false);
@@ -112,7 +113,7 @@ export function SendTestTransaction(props: {
       chainId: data.chainId,
     });
     queryClient.invalidateQueries({
-      queryKey: ["transactions", props.clientId],
+      queryKey: ["transactions", props.project.id],
     });
   };
 

apps/dashboard/src/app/team/[team_slug]/[project_slug]/engine/analytics/summary.tsx

@@ -2,7 +2,10 @@ import { StatCard } from "components/analytics/stat"; // Assuming correct path
 import { ActivityIcon, CoinsIcon } from "lucide-react";
 import { Suspense } from "react";
 import { toEther } from "thirdweb/utils";
-import type { TransactionSummaryData } from "../lib/analytics";
+import {
+  type TransactionSummaryData,
+  getTransactionAnalyticsSummary,
+} from "../lib/analytics";
 
 // Renders the UI based on fetched data or pending state
 function TransactionAnalyticsSummaryUI(props: {

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

@@ -1,5 +1,6 @@
 "use client";
 
+import type { Project } from "@/api/projects";
 import { ExportToCSVButton } from "@/components/blocks/ExportToCSVButton";
 import { ThirdwebBarChart } from "@/components/blocks/charts/bar-chart";
 import { Button } from "@/components/ui/button";
@@ -20,8 +21,7 @@ type ChartData = Record<string, number> & {
 export function TransactionsChartCardUI(props: {
   userOpStats: TransactionStats[];
   isPending: boolean;
-  project_slug: string;
-  team_slug: string;
+  project: Project;
   wallets: Wallet[];
 }) {
   const { userOpStats } = props;
@@ -145,20 +145,15 @@ export function TransactionsChartCardUI(props: {
       }}
       toolTipValueFormatter={(value) => formatTickerNumber(Number(value))}
       emptyChartState={
-        <EmptyChartContent
-          project_slug={props.project_slug}
-          team_slug={props.team_slug}
-          wallets={props.wallets}
-        />
+        <EmptyChartContent project={props.project} wallets={props.wallets} />
       }
     />
   );
 }
 
 // TODO - update the title and doc links
 function EmptyChartContent(props: {
-  project_slug: string;
-  team_slug: string;
+  project: Project;
   wallets: Wallet[];
 }) {
   const router = useDashboardRouter();
@@ -175,7 +170,7 @@ function EmptyChartContent(props: {
               variant="primary"
               onClick={() => {
                 router.push(
-                  `/team/${props.team_slug}/${props.project_slug}/engine/server-wallets`,
+                  `/team/${props.project.teamId}/${props.project.id}/engine/server-wallets`,
                 );
               }}
             >

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

@@ -1,3 +1,4 @@
+import type { Project } from "@/api/projects";
 import { ResponsiveSuspense } from "responsive-rsc";
 import { getTransactionsChart } from "../../lib/analytics";
 import { getTxAnalyticsFiltersFromSearchParams } from "../../lib/utils";
@@ -8,15 +9,12 @@ async function AsyncTransactionsChartCard(props: {
   from: string;
   to: string;
   interval: "day" | "week";
-  teamId: string;
-  clientId: string;
-  project_slug: string;
-  team_slug: string;
+  project: Project;
   wallets: Wallet[];
 }) {
   const data = await getTransactionsChart({
-    teamId: props.teamId,
-    clientId: props.clientId,
+    clientId: props.project.publishableKey,
+    teamId: props.project.teamId,
     from: props.from,
     to: props.to,
     interval: props.interval,
@@ -26,8 +24,7 @@ async function AsyncTransactionsChartCard(props: {
     <TransactionsChartCardUI
       isPending={false}
       userOpStats={data}
-      project_slug={props.project_slug}
-      team_slug={props.team_slug}
+      project={props.project}
       wallets={props.wallets}
     />
   );
@@ -39,10 +36,7 @@ export function TransactionsChartCard(props: {
     to?: string | undefined | string[];
     interval?: string | undefined | string[];
   };
-  teamId: string;
-  clientId: string;
-  project_slug: string;
-  team_slug: string;
+  project: Project;
   wallets: Wallet[];
 }) {
   const { range, interval } = getTxAnalyticsFiltersFromSearchParams(
@@ -57,8 +51,7 @@ export function TransactionsChartCard(props: {
         <TransactionsChartCardUI
           isPending={true}
           userOpStats={[]}
-          project_slug={props.project_slug}
-          team_slug={props.team_slug}
+          project={props.project}
           wallets={[]}
         />
       }
@@ -67,10 +60,7 @@ export function TransactionsChartCard(props: {
         from={range.from.toISOString()}
         to={range.to.toISOString()}
         interval={interval}
-        teamId={props.teamId}
-        clientId={props.clientId}
-        project_slug={props.project_slug}
-        team_slug={props.team_slug}
+        project={props.project}
         wallets={props.wallets}
       />
     </ResponsiveSuspense>

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

@@ -1,5 +1,6 @@
 "use client";
 
+import type { Project } from "@/api/projects";
 import { WalletAddress } from "@/components/blocks/wallet-address";
 import { PaginationButtons } from "@/components/pagination-buttons";
 import { CopyAddressButton } from "@/components/ui/CopyAddressButton";
@@ -27,14 +28,15 @@ import {
   TableRow,
 } from "@/components/ui/table";
 import { ToolTipLabel } from "@/components/ui/tooltip";
+import { useThirdwebClient } from "@/constants/thirdweb.client";
+import { useDashboardRouter } from "@/lib/DashboardRouter";
 import { keepPreviousData, useQuery } from "@tanstack/react-query";
 import { formatDistanceToNowStrict } from "date-fns";
 import { format } from "date-fns/format";
 import { useAllChainsData } from "hooks/chains/allChains";
 import { ExternalLinkIcon, InfoIcon } from "lucide-react";
 import Link from "next/link";
 import { useState } from "react";
-import { useThirdwebClient } from "../../../../../../../@/constants/thirdweb.client";
 import { ChainIconClient } from "../../../../../../../components/icons/ChainIcon";
 import type { Wallet } from "../../server-wallets/wallet-table/types";
 import type {
@@ -46,9 +48,10 @@ import type {
 // TODO - add Status selector dropdown here
 export function TransactionsTableUI(props: {
   getData: (params: { page: number }) => Promise<TransactionsResponse>;
-  clientId: string;
+  project: Project;
   wallets?: Wallet[];
 }) {
+  const router = useDashboardRouter();
   const [autoUpdate, setAutoUpdate] = useState(true);
   const [status, setStatus] = useState<TransactionStatus | undefined>(
     undefined,
@@ -57,7 +60,7 @@ export function TransactionsTableUI(props: {
 
   const pageSize = 10;
   const transactionsQuery = useQuery({
-    queryKey: ["transactions", props.clientId, page],
+    queryKey: ["transactions", props.project.id, page],
     queryFn: () => props.getData({ page }),
     refetchInterval: autoUpdate ? 4_000 : false,
     placeholderData: keepPreviousData,
@@ -132,6 +135,11 @@ export function TransactionsTableUI(props: {
                   <TableRow
                     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}`,
+                      );
+                    }}
                   >
                     {/* Queue ID */}
                     <TableCell className="font-medium">

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

@@ -1,36 +1,34 @@
 "use client";
 
 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";
 
 export function TransactionsTable(props: {
-  teamId: string;
-  clientId: string;
+  project: Project;
   wallets?: Wallet[];
 }) {
   return (
     <TransactionsTableUI
       getData={async ({ page }) => {
         return await getTransactions({
-          teamId: props.teamId,
-          clientId: props.clientId,
+          project: props.project,
           page,
         });
       }}
-      clientId={props.clientId}
+      project={props.project}
       wallets={props.wallets}
     />
   );
 }
 
 async function getTransactions({
-  teamId,
-  clientId,
+  project,
+  page,
 }: {
-  teamId: string;
-  clientId: string;
+  project: Project;
   page: number;
 }) {
   const transactions = await engineCloudProxy<{ result: TransactionsResponse }>(
@@ -39,10 +37,13 @@ async function getTransactions({
       method: "POST",
       headers: {
         "Content-Type": "application/json",
-        "x-team-id": teamId,
-        "x-client-id": clientId,
+        "x-team-id": project.teamId,
+        "x-client-id": project.publishableKey,
       },
-      body: JSON.stringify({}),
+      body: JSON.stringify({
+        page,
+        limit: 20,
+      }),
     },
   );