transaction chart

Author: joaquim-verges

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

@@ -20,7 +20,11 @@ export function TransactionsAnalyticsPageContent(props: {
         </div>
         <div className="h-6" />
         <div className="flex grow flex-col gap-6">
-          <TransactionsChartCard searchParams={props.searchParams} />
+          <TransactionsChartCard
+            searchParams={props.searchParams}
+            teamId={props.teamId}
+            clientId={props.clientId}
+          />
           <TransactionsTable teamId={props.teamId} clientId={props.clientId} />
         </div>
       </div>

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

@@ -12,7 +12,7 @@ import { DocLink } from "components/shared/DocLink";
 import { formatDate } from "date-fns";
 import { useAllChainsData } from "hooks/chains/allChains";
 import { useMemo } from "react";
-import type { UserOpStats } from "types/analytics";
+import type { TransactionStats } from "types/analytics";
 import { formatTickerNumber } from "../../../../../../../lib/format-utils";
 
 type ChartData = Record<string, number> & {
@@ -25,7 +25,7 @@ type ChartData = Record<string, number> & {
 // TODO - update the name of the component to something more relevant
 export function TransactionsChartCardUI(props: {
   // TODO - update this
-  userOpStats: UserOpStats[];
+  userOpStats: TransactionStats[];
   isPending: boolean;
 }) {
   const { userOpStats } = props;
@@ -43,20 +43,20 @@ export function TransactionsChartCardUI(props: {
       const { chainId } = stat;
       const chain = chainsStore.idToChain.get(Number(chainId));
 
-      const chainName = chain?.name || chainId || "Unknown";
+      const chainName = chain?.name || chainId.toString() || "Unknown";
       // if no data for current day - create new entry
       if (!chartData) {
         _chartDataMap.set(stat.date, {
           time: stat.date,
-          [chainName]: stat.successful,
+          [chainName]: stat.count,
         } as ChartData);
       } else {
-        chartData[chainName] = (chartData[chainName] || 0) + stat.successful;
+        chartData[chainName] = (chartData[chainName] || 0) + stat.count;
       }
 
       chainIdToVolumeMap.set(
         chainName,
-        stat.successful + (chainIdToVolumeMap.get(chainName) || 0),
+        stat.count + (chainIdToVolumeMap.get(chainName) || 0),
       );
     }
 
@@ -108,10 +108,10 @@ export function TransactionsChartCardUI(props: {
       customHeader={
         <div className="relative px-6 pt-6">
           <h3 className="mb-0.5 font-semibold text-xl tracking-tight">
-            Lorem Ipsum
+            Daily Transactions
           </h3>
           <p className="text-muted-foreground text-sm">
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+            Amount of daily transactions by chain.
           </p>
 
           <div className="top-6 right-6 mb-8 grid grid-cols-2 items-center gap-2 md:absolute md:mb-0 md:flex">

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

@@ -1,17 +1,28 @@
 import { differenceInDays } from "date-fns";
 import { ResponsiveSuspense } from "responsive-rsc";
-import type { UserOpStats } from "../../../../../../../types/analytics";
+import { THIRDWEB_ENGINE_CLOUD_URL } from "../../../../../../../@/constants/env";
+import type {
+  TransactionStats,
+  UserOpStats,
+} from "../../../../../../../types/analytics";
+import { getAuthToken } from "../../../../../../api/lib/getAuthToken";
 import { getTxAnalyticsFiltersFromSearchParams } from "../getTransactionAnalyticsFilter";
 import { TransactionsChartCardUI } from "./tx-chart-ui";
 
 async function AsyncTransactionsChartCard(props: {
   from: string;
   to: string;
   interval: "day" | "week";
+  teamId: string;
+  clientId: string;
 }) {
-  // TODO - remove stub, implement it
-  await new Promise((resolve) => setTimeout(resolve, 1000));
-  const data = getTransactionChartStub(props.from, props.to, props.interval);
+  const data = await getTransactionsChart({
+    teamId: props.teamId,
+    clientId: props.clientId,
+    from: props.from,
+    to: props.to,
+    interval: props.interval,
+  });
 
   return <TransactionsChartCardUI isPending={false} userOpStats={data} />;
 }
@@ -22,6 +33,8 @@ export function TransactionsChartCard(props: {
     to?: string | undefined | string[];
     interval?: string | undefined | string[];
   };
+  teamId: string;
+  clientId: string;
 }) {
   const { range, interval } = getTxAnalyticsFiltersFromSearchParams(
     props.searchParams,
@@ -37,6 +50,8 @@ export function TransactionsChartCard(props: {
         from={range.from.toISOString()}
         to={range.to.toISOString()}
         interval={interval}
+        teamId={props.teamId}
+        clientId={props.clientId}
       />
     </ResponsiveSuspense>
   );
@@ -76,3 +91,68 @@ function getTransactionChartStub(
 
   return stub;
 }
+
+async function getTransactionsChart({
+  teamId,
+  clientId,
+  from,
+  to,
+  interval,
+}: {
+  teamId: string;
+  clientId: string;
+  from: string;
+  to: string;
+  interval: "day" | "week";
+}): Promise<TransactionStats[]> {
+  const authToken = await getAuthToken();
+
+  const filters = {
+    startDate: from,
+    endDate: to,
+    resolution: interval,
+  };
+
+  const response = await fetch(
+    `${THIRDWEB_ENGINE_CLOUD_URL}/project/transactions/analytics`,
+    {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+        "x-team-id": teamId,
+        "x-client-id": clientId,
+        Authorization: `Bearer ${authToken}`,
+      },
+      body: JSON.stringify(filters),
+    },
+  );
+
+  if (!response.ok) {
+    throw new Error(
+      `Error fetching transactions chart data: ${response.status} ${response.statusText}`,
+    );
+  }
+
+  type TransactionsChartResponse = {
+    result: {
+      analytics: Array<{
+        timeBucket: string;
+        chainId: string;
+        count: number;
+      }>;
+      metadata: {
+        resolution: string;
+        startDate: string;
+        endDate: string;
+      };
+    };
+  };
+
+  const data = (await response.json()) as TransactionsChartResponse;
+
+  return data.result.analytics.map((stat) => ({
+    date: stat.timeBucket,
+    chainId: Number(stat.chainId),
+    count: stat.count,
+  }));
+}

apps/dashboard/src/components/analytics/date-range-selector.tsx

@@ -83,7 +83,7 @@ export function getLastNDaysRange(id: DurationId) {
     throw new Error("Invalid duration id");
   }
 
-  const todayDate = new Date();
+  const todayDate = new Date(Date.now() + 1000 * 60 * 60 * 24); // add 1 day to avoid timezone issues
 
   const value: Range = {
     type: id,