[Dashboard] Add x402 payments section and disallow robots

Author: joaquim-verges

apps/dashboard/src/@/api/analytics.ts

@@ -16,6 +16,8 @@ import type {
   WalletStats,
   WebhookLatencyStats,
   WebhookSummaryStats,
+  X402QueryParams,
+  X402SettlementStats,
 } from "@/types/analytics";
 import { getChains } from "./chain";
 
@@ -906,3 +908,43 @@ export function getInsightUsage(
 ) {
   return cached_getInsightUsage(normalizedParams(params), authToken);
 }
+
+const cached_getX402Settlements = unstable_cache(
+  async (
+    params: X402QueryParams,
+    authToken: string,
+  ): Promise<X402SettlementStats[]> => {
+    const searchParams = buildSearchParams(params);
+
+    if (params.groupBy) {
+      searchParams.append("groupBy", params.groupBy);
+    }
+
+    const res = await fetchAnalytics({
+      authToken,
+      url: `v2/x402/settlements?${searchParams.toString()}`,
+      init: {
+        method: "GET",
+      },
+    });
+
+    if (res?.status !== 200) {
+      const reason = await res?.text();
+      console.error(
+        `Failed to fetch x402 settlements: ${res?.status} - ${res.statusText} - ${reason}`,
+      );
+      return [];
+    }
+
+    const json = await res.json();
+    return json.data as X402SettlementStats[];
+  },
+  ["getX402Settlements"],
+  {
+    revalidate: 60 * 60, // 1 hour
+  },
+);
+
+export function getX402Settlements(params: X402QueryParams, authToken: string) {
+  return cached_getX402Settlements(normalizedParams(params), authToken);
+}

apps/dashboard/src/@/types/analytics.ts

@@ -94,3 +94,48 @@ export interface AnalyticsQueryParams {
   period?: "day" | "week" | "month" | "year" | "all";
   limit?: number;
 }
+
+export interface X402SettlementsOverall {
+  date: string;
+  totalRequests: number;
+  totalValue: number;
+}
+
+export interface X402SettlementsByChainId {
+  date: string;
+  chainId: string;
+  totalRequests: number;
+  totalValue: number;
+}
+
+export interface X402SettlementsByPayer {
+  date: string;
+  payer: string;
+  totalRequests: number;
+  totalValue: number;
+}
+
+export interface X402SettlementsByResource {
+  date: string;
+  resource: string;
+  totalRequests: number;
+  totalValue: number;
+}
+
+export interface X402SettlementsByAsset {
+  date: string;
+  asset: string;
+  totalRequests: number;
+  totalValue: number;
+}
+
+export type X402SettlementStats =
+  | X402SettlementsOverall
+  | X402SettlementsByChainId
+  | X402SettlementsByPayer
+  | X402SettlementsByResource
+  | X402SettlementsByAsset;
+
+export interface X402QueryParams extends AnalyticsQueryParams {
+  groupBy?: "overall" | "chainId" | "payer" | "resource" | "asset";
+}

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

@@ -80,6 +80,11 @@ export function ProjectSidebarLayout(props: {
           icon: PayIcon,
           label: "Payments",
         },
+        {
+          href: `${props.layoutPath}/x402`,
+          icon: PayIcon,
+          label: "x402",
+        },
         {
           href: `${props.layoutPath}/bridge`,
           icon: BridgeIcon,

apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/x402/analytics/Summary.tsx

@@ -0,0 +1,111 @@
+import { CreditCardIcon, UsersIcon } from "lucide-react";
+import { Suspense } from "react";
+import { getX402Settlements } from "@/api/analytics";
+import type { Range } from "@/components/analytics/date-range-selector";
+import { StatCard } from "@/components/analytics/stat";
+import type {
+  X402SettlementsByPayer,
+  X402SettlementsOverall,
+} from "@/types/analytics";
+
+function X402SummaryInner(props: {
+  totalPayments: number | undefined;
+  totalBuyers: number | undefined;
+  isPending: boolean;
+}) {
+  return (
+    <div className="grid grid-cols-2 gap-4">
+      <StatCard
+        icon={CreditCardIcon}
+        isPending={props.isPending}
+        label="Total Payments"
+        value={props.totalPayments || 0}
+      />
+      <StatCard
+        icon={UsersIcon}
+        isPending={props.isPending}
+        label="Total Buyers"
+        value={props.totalBuyers || 0}
+      />
+    </div>
+  );
+}
+
+async function AsyncX402Summary(props: {
+  teamId: string;
+  projectId: string;
+  authToken: string;
+  range: Range;
+}) {
+  const { teamId, projectId, authToken, range } = props;
+
+  const [overallStats, payerStats] = await Promise.all([
+    getX402Settlements(
+      {
+        from: range.from,
+        period: "all",
+        projectId,
+        teamId,
+        to: range.to,
+        groupBy: "overall",
+      },
+      authToken,
+    ).catch(() => []),
+    getX402Settlements(
+      {
+        from: range.from,
+        period: "all",
+        projectId,
+        teamId,
+        to: range.to,
+        groupBy: "payer",
+      },
+      authToken,
+    ).catch(() => []),
+  ]);
+
+  const totalPayments = (overallStats as X402SettlementsOverall[]).reduce(
+    (acc, curr) => acc + curr.totalRequests,
+    0,
+  );
+
+  // Count unique payers
+  const uniquePayers = new Set(
+    (payerStats as X402SettlementsByPayer[]).map((stat) => stat.payer),
+  );
+  const totalBuyers = uniquePayers.size;
+
+  return (
+    <X402SummaryInner
+      totalBuyers={totalBuyers}
+      totalPayments={totalPayments}
+      isPending={false}
+    />
+  );
+}
+
+export function X402Summary(props: {
+  teamId: string;
+  projectId: string;
+  authToken: string;
+  range: Range;
+}) {
+  return (
+    <Suspense
+      fallback={
+        <X402SummaryInner
+          totalBuyers={undefined}
+          totalPayments={undefined}
+          isPending={true}
+        />
+      }
+    >
+      <AsyncX402Summary
+        authToken={props.authToken}
+        projectId={props.projectId}
+        range={props.range}
+        teamId={props.teamId}
+      />
+    </Suspense>
+  );
+}