[Dashboard] Add x402 payments section and disallow robots

Author: joaquim-verges

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/configuration/page.tsx

@@ -0,0 +1,33 @@
+import { redirect } from "next/navigation";
+import { getAuthToken } from "@/api/auth-token";
+import { getProject } from "@/api/project/projects";
+import { loginRedirect } from "@/utils/redirects";
+
+export default async function Page(props: {
+  params: Promise<{ team_slug: string; project_slug: string }>;
+}) {
+  const params = await props.params;
+
+  const authToken = await getAuthToken();
+  if (!authToken) {
+    loginRedirect(
+      `/team/${params.team_slug}/${params.project_slug}/x402/configuration`,
+    );
+  }
+
+  const project = await getProject(params.team_slug, params.project_slug);
+  if (!project) {
+    redirect(`/team/${params.team_slug}`);
+  }
+
+  return (
+    <div className="flex flex-col gap-6">
+      <div className="rounded-lg border border-border bg-card p-8 text-center">
+        <h2 className="text-2xl font-semibold">Coming Soon</h2>
+        <p className="mt-2 text-muted-foreground">
+          x402 payments configuration will be available soon.
+        </p>
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,64 @@
+import { redirect } from "next/navigation";
+import { getAuthToken } from "@/api/auth-token";
+import { getProject } from "@/api/project/projects";
+import { ProjectPage } from "@/components/blocks/project-page/project-page";
+import { getClientThirdwebClient } from "@/constants/thirdweb-client.client";
+import { PayIcon } from "@/icons/PayIcon";
+import { loginRedirect } from "@/utils/redirects";
+
+export default async function Layout(props: {
+  children: React.ReactNode;
+  params: Promise<{ team_slug: string; project_slug: string }>;
+}) {
+  const params = await props.params;
+  const basePath = `/team/${params.team_slug}/${params.project_slug}/x402`;
+
+  const [authToken, project] = await Promise.all([
+    getAuthToken(),
+    getProject(params.team_slug, params.project_slug),
+  ]);
+
+  if (!authToken) {
+    loginRedirect(basePath);
+  }
+
+  if (!project) {
+    redirect(`/team/${params.team_slug}`);
+  }
+
+  const client = getClientThirdwebClient({
+    jwt: authToken,
+    teamId: project.teamId,
+  });
+
+  return (
+    <ProjectPage
+      header={{
+        icon: PayIcon,
+        title: "x402 payments",
+        description: "Instant payments for your APIs, apps and agents",
+        actions: null,
+        client,
+        links: [
+          {
+            type: "docs",
+            href: "https://portal.thirdweb.com/x402",
+          },
+        ],
+      }}
+      tabs={[
+        {
+          name: "Overview",
+          path: `${basePath}`,
+          exactMatch: true,
+        },
+        {
+          name: "Configuration",
+          path: `${basePath}/configuration`,
+        },
+      ]}
+    >
+      {props.children}
+    </ProjectPage>
+  );
+}

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

@@ -0,0 +1,33 @@
+import { redirect } from "next/navigation";
+import { getAuthToken } from "@/api/auth-token";
+import { getProject } from "@/api/project/projects";
+import { loginRedirect } from "@/utils/redirects";
+
+export const dynamic = "force-dynamic";
+
+export default async function Page(props: {
+  params: Promise<{ team_slug: string; project_slug: string }>;
+}) {
+  const params = await props.params;
+
+  const authToken = await getAuthToken();
+  if (!authToken) {
+    loginRedirect(`/team/${params.team_slug}/${params.project_slug}/x402`);
+  }
+
+  const project = await getProject(params.team_slug, params.project_slug);
+  if (!project) {
+    redirect(`/team/${params.team_slug}`);
+  }
+
+  return (
+    <div className="flex flex-col gap-4 md:gap-6">
+      <div className="rounded-lg border border-border bg-card p-8 text-center">
+        <h2 className="text-2xl font-semibold">Coming Soon</h2>
+        <p className="mt-2 text-muted-foreground">
+          x402 payments analytics and overview will be available soon.
+        </p>
+      </div>
+    </div>
+  );
+}