[TOOL-3337] Dashboard: Add Transactions pages in project layout

Author: MananTank

apps/dashboard/src/@/lib/time.ts

@@ -0,0 +1,55 @@
+import { differenceInCalendarDays } from "date-fns";
+import {
+  type DurationId,
+  type Range,
+  getLastNDaysRange,
+} from "../../components/analytics/date-range-selector";
+
+export function normalizeTime(date: Date) {
+  const newDate = new Date(date);
+  newDate.setHours(1, 0, 0, 0);
+  return newDate;
+}
+
+export function normalizeTimeISOString(date: Date) {
+  return normalizeTime(date).toISOString();
+}
+
+export function getFiltersFromSearchParams(params: {
+  from: string | undefined | string[];
+  to: string | undefined | string[];
+  interval: string | undefined | string[];
+  defaultRange: DurationId;
+}) {
+  const fromStr = params.from;
+  const toStr = params.to;
+  const defaultRange = getLastNDaysRange(params.defaultRange);
+
+  const range: Range =
+    fromStr && toStr && typeof fromStr === "string" && typeof toStr === "string"
+      ? {
+          from: normalizeTime(new Date(fromStr)),
+          to: normalizeTime(new Date(toStr)),
+          type: "custom",
+        }
+      : {
+          from: normalizeTime(defaultRange.from),
+          to: normalizeTime(defaultRange.to),
+          type: defaultRange.type,
+        };
+
+  const defaultInterval =
+    differenceInCalendarDays(range.to, range.from) > 30
+      ? "week"
+      : ("day" as const);
+
+  return {
+    range,
+    interval:
+      params.interval === "day"
+        ? ("day" as const)
+        : params.interval === "week"
+          ? ("week" as const)
+          : defaultInterval,
+  };
+}

apps/dashboard/src/app/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/overview/components/transactions-table.tsx

@@ -33,6 +33,7 @@ import {
   TableRow,
 } from "@/components/ui/table";
 import { ToolTipLabel } from "@/components/ui/tooltip";
+import { normalizeTime } from "@/lib/time";
 import {
   type Transaction,
   useEngineTransactions,
@@ -52,7 +53,6 @@ import Link from "next/link";
 import { type Dispatch, type SetStateAction, useMemo, useState } from "react";
 import { toTokens } from "thirdweb";
 import { FormLabel, LinkButton, Text } from "tw-components";
-import { normalizeTime } from "../../../../../../../../../../lib/time";
 import { TransactionTimeline } from "./transaction-timeline";
 
 export type EngineStatus =

apps/dashboard/src/app/team/[team_slug]/[project_slug]/components/ProjectSidebarLayout.tsx

@@ -1,6 +1,7 @@
 "use client";
 import { FullWidthSidebarLayout } from "@/components/blocks/SidebarLayout";
 import {
+  ArrowRightLeftIcon,
   BookTextIcon,
   BoxIcon,
   HomeIcon,
@@ -76,6 +77,12 @@ export function ProjectSidebarLayout(props: {
           icon: InsightIcon,
           tracking: tracking("insight"),
         },
+        {
+          href: `${layoutPath}/transactions`,
+          label: "Transactions",
+          icon: ArrowRightLeftIcon,
+          tracking: tracking("transactions"),
+        },
       ]}
       footerSidebarLinks={[
         {

apps/dashboard/src/app/team/[team_slug]/[project_slug]/connect/account-abstraction/page.tsx

@@ -70,7 +70,7 @@ export default async function Page(props: {
   });
 
   return (
-    <div>
+    <div className="flex grow flex-col">
       <AccountAbstractionSummary
         teamId={project.teamId}
         projectId={project.id}

apps/dashboard/src/app/team/[team_slug]/[project_slug]/nebula/components/analytics/nebula-analytics-filter.tsx

@@ -1,15 +1,13 @@
 "use client";
 
+import { normalizeTimeISOString } from "@/lib/time";
 import {
   useResponsiveSearchParams,
   useSetResponsiveSearchParams,
 } from "responsive-rsc";
 import { DateRangeSelector } from "../../../../../../../components/analytics/date-range-selector";
 import { IntervalSelector } from "../../../../../../../components/analytics/interval-selector";
-import {
-  getNebulaFiltersFromSearchParams,
-  normalizeTimeISOString,
-} from "../../../../../../../lib/time";
+import { getNebulaFiltersFromSearchParams } from "../../../../../../../lib/time";
 
 export function NebulaAnalyticsFilter() {
   const responsiveSearchParams = useResponsiveSearchParams();
@@ -22,7 +20,7 @@ export function NebulaAnalyticsFilter() {
   });
 
   return (
-    <div className="no-scrollbar flex items-center gap-3 overflow-auto">
+    <div className="no-scrollbar flex items-center gap-3 max-sm:overflow-auto">
       <DateRangeSelector
         range={range}
         popoverAlign="end"

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

@@ -1,11 +1,11 @@
 import { Button } from "@/components/ui/button";
+import { normalizeTimeISOString } from "@/lib/time";
 import { FileCode2Icon, MessageSquareQuoteIcon } from "lucide-react";
 import Link from "next/link";
 import {
   ResponsiveSearchParamsProvider,
   ResponsiveSuspense,
 } from "responsive-rsc";
-import { normalizeTimeISOString } from "../../../../../../../lib/time";
 import { fetchNebulaAnalytics } from "./fetch-nebula-analytics";
 import { NebulaAnalyticsFilter } from "./nebula-analytics-filter";
 import { NebulaAnalyticsDashboardUI } from "./nebula-analytics-ui";

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

@@ -0,0 +1,27 @@
+import { ResponsiveSearchParamsProvider } from "responsive-rsc";
+import { TransactionAnalyticsFilter } from "./filter";
+import { TransactionsChartCard } from "./tx-chart/tx-chart";
+import { TransactionsTable } from "./tx-table/tx-table";
+
+export function TransactionsAnalyticsPageContent(props: {
+  searchParams: {
+    from?: string | undefined | string[];
+    to?: string | undefined | string[];
+    interval?: string | undefined | string[];
+  };
+}) {
+  return (
+    <ResponsiveSearchParamsProvider value={props.searchParams}>
+      <div className="flex grow flex-col">
+        <div className="flex justify-end">
+          <TransactionAnalyticsFilter />
+        </div>
+        <div className="h-6" />
+        <div className="flex grow flex-col gap-6">
+          <TransactionsChartCard searchParams={props.searchParams} />
+          <TransactionsTable />
+        </div>
+      </div>
+    </ResponsiveSearchParamsProvider>
+  );
+}

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

@@ -0,0 +1,51 @@
+"use client";
+
+import { normalizeTimeISOString } from "@/lib/time";
+import {
+  useResponsiveSearchParams,
+  useSetResponsiveSearchParams,
+} from "responsive-rsc";
+import { DateRangeSelector } from "../../../../../../components/analytics/date-range-selector";
+import { IntervalSelector } from "../../../../../../components/analytics/interval-selector";
+import { getTxAnalyticsFiltersFromSearchParams } from "./getTransactionAnalyticsFilter";
+
+export function TransactionAnalyticsFilter() {
+  const responsiveSearchParams = useResponsiveSearchParams();
+  const setResponsiveSearchParams = useSetResponsiveSearchParams();
+
+  const { range, interval } = getTxAnalyticsFiltersFromSearchParams({
+    from: responsiveSearchParams.from,
+    to: responsiveSearchParams.to,
+    interval: responsiveSearchParams.interval,
+  });
+
+  return (
+    <div className="no-scrollbar flex items-center gap-3 max-sm:overflow-auto">
+      <DateRangeSelector
+        range={range}
+        popoverAlign="end"
+        setRange={(newRange) => {
+          setResponsiveSearchParams((v) => {
+            return {
+              ...v,
+              from: normalizeTimeISOString(newRange.from),
+              to: normalizeTimeISOString(newRange.to),
+            };
+          });
+        }}
+      />
+
+      <IntervalSelector
+        intervalType={interval}
+        setIntervalType={(newInterval) => {
+          setResponsiveSearchParams((v) => {
+            return {
+              ...v,
+              interval: newInterval,
+            };
+          });
+        }}
+      />
+    </div>
+  );
+}

apps/dashboard/src/app/team/[team_slug]/[project_slug]/transactions/analytics/getTransactionAnalyticsFilter.ts

@@ -0,0 +1,14 @@
+import { getFiltersFromSearchParams } from "@/lib/time";
+
+export function getTxAnalyticsFiltersFromSearchParams(params: {
+  from?: string | undefined | string[];
+  to?: string | undefined | string[];
+  interval?: string | undefined | string[];
+}) {
+  return getFiltersFromSearchParams({
+    from: params.from,
+    to: params.to,
+    interval: params.interval,
+    defaultRange: "last-30",
+  });
+}

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

@@ -0,0 +1,83 @@
+import { StatCard } from "components/analytics/stat";
+import { ActivityIcon, CoinsIcon } from "lucide-react";
+import { Suspense } from "react";
+
+// TODO: implement this
+async function getTransactionAnalyticsSummary(props: {
+  teamId: string;
+  projectId: string;
+}) {
+  console.log("getTransactionAnalyticsSummary called with", props);
+  await new Promise((resolve) => setTimeout(resolve, 1000));
+
+  return {
+    foo: 100,
+    bar: 200,
+  };
+}
+
+// TODO: rename props, change labels and icons
+function TransactionAnalyticsSummaryUI(props: {
+  data:
+    | {
+        foo: number;
+        bar: number;
+      }
+    | undefined;
+  isPending: boolean;
+}) {
+  return (
+    <div className="grid grid-cols-2 gap-4">
+      <StatCard
+        label="Foo"
+        value={props.data?.foo}
+        icon={ActivityIcon}
+        isPending={props.isPending}
+      />
+      <StatCard
+        label="Bar"
+        value={props.data?.bar}
+        icon={CoinsIcon}
+        formatter={(value: number) =>
+          new Intl.NumberFormat("en-US", {
+            style: "currency",
+            currency: "USD",
+          }).format(value)
+        }
+        isPending={props.isPending}
+      />
+    </div>
+  );
+}
+
+// fetches data and renders the UI
+async function AsyncTransactionsAnalyticsSummary(props: {
+  teamId: string;
+  projectId: string;
+}) {
+  const data = await getTransactionAnalyticsSummary({
+    teamId: props.teamId,
+    projectId: props.projectId,
+  });
+
+  return <TransactionAnalyticsSummaryUI data={data} isPending={false} />;
+}
+
+// shows loading state while fetching data
+export function TransactionAnalyticsSummary(props: {
+  teamId: string;
+  projectId: string;
+}) {
+  return (
+    <Suspense
+      fallback={
+        <TransactionAnalyticsSummaryUI data={undefined} isPending={true} />
+      }
+    >
+      <AsyncTransactionsAnalyticsSummary
+        teamId={props.teamId}
+        projectId={props.projectId}
+      />
+    </Suspense>
+  );
+}