[Dashboard] Add x402 payments section

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,62 @@ export interface AnalyticsQueryParams {
   period?: "day" | "week" | "month" | "year" | "all";
   limit?: number;
 }
+
+export interface X402SettlementsOverall {
+  date: string;
+  totalRequests: number;
+  totalValue: number;
+  totalValueUSD: number;
+}
+
+interface X402SettlementsByChainId {
+  date: string;
+  chainId: string;
+  totalRequests: number;
+  totalValue: number;
+  totalValueUSD: number;
+}
+
+export interface X402SettlementsByPayer {
+  date: string;
+  payer: string;
+  totalRequests: number;
+  totalValue: number;
+  totalValueUSD: number;
+}
+
+interface X402SettlementsByReceiver {
+  date: string;
+  receiver: string;
+  totalRequests: number;
+  totalValue: number;
+  totalValueUSD: number;
+}
+
+export interface X402SettlementsByResource {
+  date: string;
+  resource: string;
+  totalRequests: number;
+  totalValue: number;
+  totalValueUSD: number;
+}
+
+interface X402SettlementsByAsset {
+  date: string;
+  asset: string;
+  totalRequests: number;
+  totalValue: number;
+  totalValueUSD: number;
+}
+
+export type X402SettlementStats =
+  | X402SettlementsOverall
+  | X402SettlementsByChainId
+  | X402SettlementsByPayer
+  | X402SettlementsByReceiver
+  | X402SettlementsByResource
+  | X402SettlementsByAsset;
+
+export interface X402QueryParams extends AnalyticsQueryParams {
+  groupBy?: "overall" | "chainId" | "payer" | "resource" | "asset";
+}

apps/dashboard/src/@/utils/number.ts

@@ -1,6 +1,6 @@
 const usdCurrencyFormatter = new Intl.NumberFormat("en-US", {
   currency: "USD",
-  maximumFractionDigits: 2, // prefix with $
+  maximumFractionDigits: 6, // prefix with $
   minimumFractionDigits: 0, // don't show decimal places if value is a whole number
   notation: "compact", // at max 2 decimal places
   roundingMode: "halfEven", // round to nearest even number, standard practice for financial calculations

apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/bridge/page.tsx

@@ -69,6 +69,9 @@ export default async function Page(props: {
             icon: <WebhookIcon className="size-3.5 text-muted-foreground" />,
           },
         },
+        settings: {
+          href: `/team/${params.team_slug}/${params.project_slug}/settings/payments`,
+        },
         links: [
           {
             type: "docs",

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

@@ -1,4 +1,5 @@
 "use client";
+import { Badge } from "@workspace/ui/components/badge";
 import {
   BookTextIcon,
   BoxIcon,
@@ -76,9 +77,13 @@ export function ProjectSidebarLayout(props: {
       group: "Monetize",
       links: [
         {
-          href: `${props.layoutPath}/payments`,
+          href: `${props.layoutPath}/x402`,
           icon: PayIcon,
-          label: "Payments",
+          label: (
+            <span className="flex items-center gap-2">
+              x402 <Badge>New</Badge>
+            </span>
+          ),
         },
         {
           href: `${props.layoutPath}/bridge`,

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

@@ -0,0 +1,69 @@
+"use client";
+
+import { BotIcon, ServerIcon, WalletIcon } from "lucide-react";
+import { FeatureCard } from "../payments/components/FeatureCard.client";
+
+export function QuickStartSection() {
+  return (
+    <section>
+      <div className="mb-4">
+        <h2 className="font-semibold text-xl tracking-tight">Quick Start</h2>
+        <p className="text-muted-foreground text-sm">
+          Choose how to integrate x402 payments into your project.
+        </p>
+      </div>
+      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
+        <FeatureCard
+          title="Payment gate your API"
+          description="Make your endpoints payable with a single line of code"
+          icon={ServerIcon}
+          id="x402_server"
+          setupTime={2}
+          features={[
+            "Supports 170+ chains",
+            "Supports 6.7k+ tokens",
+            "Dynamic pricing logic",
+          ]}
+          link={{
+            href: "https://portal.thirdweb.com/x402/server",
+            label: "Get Started",
+          }}
+        />
+
+        <FeatureCard
+          title="Let your users pay for x402 resources"
+          description="Handle x402 payments from any user wallet in your apps"
+          icon={WalletIcon}
+          id="x402_client"
+          setupTime={2}
+          features={[
+            "Works with any wallet",
+            "No gas required",
+            "One line of code",
+          ]}
+          link={{
+            href: "https://portal.thirdweb.com/x402/client",
+            label: "Get Started",
+          }}
+        />
+
+        <FeatureCard
+          title="Equip your agents with x402 tools"
+          description="Give your AI agents a wallet and the ability to pay for any x402 resource"
+          icon={BotIcon}
+          id="x402_agents"
+          setupTime={2}
+          features={[
+            "Remote MCP server",
+            "Low level APIs",
+            "Works with any AI framework",
+          ]}
+          link={{
+            href: "https://portal.thirdweb.com/x402/agents",
+            label: "Get Started",
+          }}
+        />
+      </div>
+    </section>
+  );
+}

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

@@ -0,0 +1,30 @@
+"use client";
+
+import { usePathname, useSearchParams } from "next/navigation";
+import { useCallback } from "react";
+import { useDashboardRouter } from "@/lib/DashboardRouter";
+import type { Metric } from "./MetricSwitcher";
+import { MetricSwitcher } from "./MetricSwitcher";
+
+export function ChartMetricSwitcher() {
+  const router = useDashboardRouter();
+  const pathname = usePathname();
+  const searchParams = useSearchParams();
+
+  const metric = (searchParams.get("metric") as Metric) || "volume";
+
+  const handleMetricChange = useCallback(
+    (newMetric: Metric) => {
+      const params = new URLSearchParams(searchParams.toString());
+      params.set("metric", newMetric);
+      router.replace(`${pathname}?${params.toString()}`, { scroll: false });
+    },
+    [pathname, router, searchParams],
+  );
+
+  return (
+    <div className="flex justify-end">
+      <MetricSwitcher value={metric} onChange={handleMetricChange} />
+    </div>
+  );
+}

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

@@ -0,0 +1,31 @@
+"use client";
+
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+
+export type Metric = "payments" | "volume";
+
+export function MetricSwitcher(props: {
+  value: Metric;
+  onChange: (value: Metric) => void;
+}) {
+  return (
+    <div className="flex items-center gap-2">
+      <span className="text-muted-foreground text-sm font-medium">Show:</span>
+      <Select value={props.value} onValueChange={props.onChange}>
+        <SelectTrigger className="w-[180px] rounded-full">
+          <SelectValue />
+        </SelectTrigger>
+        <SelectContent>
+          <SelectItem value="payments">Payments</SelectItem>
+          <SelectItem value="volume">Volume (USD)</SelectItem>
+        </SelectContent>
+      </Select>
+    </div>
+  );
+}