[Docs] Add metadata to x402 documentation pages (#8190)

Author: joaquim-verges

apps/portal/src/app/payments/x402/agents/page.mdx

@@ -1,7 +1,16 @@
 import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs";
-import { OpenApiEndpoint } from "@doc";
+import { OpenApiEndpoint, createMetadata } from "@doc";
+
+export const metadata = createMetadata({
+  image: {
+    title: "x402 Agents",
+    icon: "payments",
+  },
+  title: "x402 Agents",
+  description: "Easily create AI agents that can pay for any x402-compatible API calls.",
+});
 
-# Agents
+# x402 Agents
 
 Easily create AI agents that can pay for any x402-compatible API calls.
 

apps/portal/src/app/payments/x402/client/page.mdx

@@ -1,9 +1,18 @@
-import { Tabs, TabsList, TabsTrigger, TabsContent, OpenApiEndpoint } from "@doc";
+import { Tabs, TabsList, TabsTrigger, TabsContent, OpenApiEndpoint, createMetadata } from "@doc";
 import { TypeScriptIcon, EngineIcon } from "@/icons";
 
+export const metadata = createMetadata({
+  image: {
+    title: "x402 Client",
+    icon: "payments",
+  },
+  title: "x402 Client",
+  description: "Make requests to any x402-compatible backend and automatically handle payment flows when APIs return a `402 Payment Required` response.",
+});
+
 # Client Side
 
-Make requests to any x402-compatible backend by automatically handling payment flows when APIs return a `402 Payment Required` response.
+Make requests to any x402-compatible backend and automatically handle payment flows when APIs return a `402 Payment Required` response.
 
 The client library wraps the native `fetch` API and handles:
 1. Initial request to the API

apps/portal/src/app/payments/x402/facilitator/page.mdx

@@ -1,6 +1,15 @@
-import { Tabs, TabsList, TabsTrigger, TabsContent, OpenApiEndpoint, Callout } from "@doc";
+import { Tabs, TabsList, TabsTrigger, TabsContent, OpenApiEndpoint, Callout, createMetadata } from "@doc";
 import { TypeScriptIcon, EngineIcon } from "@/icons";
 
+export const metadata = createMetadata({
+  image: {
+    title: "x402 Facilitator",
+    icon: "payments",
+  },
+  title: "x402 Facilitator",
+  description: "Verify and submit x402 payments using your own server wallet.",
+});
+
 # Facilitator
 
 The facilitator is a service that handles verifying and submitting x402 payments. It uses your own [server wallet](/wallets/server) and leverages EIP-7702 to submit transactions gaslessly.

apps/portal/src/app/payments/x402/page.mdx

@@ -1,6 +1,15 @@
-import { ArticleIconCard } from "@doc";
+import { ArticleIconCard, createMetadata } from "@doc";
 import { ReactIcon, TypeScriptIcon, EngineIcon } from "@/icons";
 
+export const metadata = createMetadata({
+  image: {
+    title: "x402 Payments",
+    icon: "payments",
+  },
+  title: "x402 Payments",
+  description: "Instant payments for your APIs, websites, and autonomous agents.",
+});
+
 # x402 Payments
 
 x402 is an open-source protocol that turns the dormant HTTP 402 Payment Required status code into a fully-featured, on-chain payment layer for APIs, websites, and autonomous agents.

apps/portal/src/app/payments/x402/server/page.mdx

@@ -1,7 +1,16 @@
-import { Tabs, TabsList, TabsTrigger, TabsContent, DocImage } from "@doc";
+import { Tabs, TabsList, TabsTrigger, TabsContent, DocImage, createMetadata } from "@doc";
 import { Steps, Step } from "@doc";
 import PaymentFlow from "./x402-protocol-flow.png";
 
+export const metadata = createMetadata({
+  image: {
+    title: "x402 Server",
+    icon: "payments",
+  },
+  title: "x402 Server",
+  description: "Accept x402 payments in your APIs from any x402-compatible client.",
+});
+
 # Server Side
 
 Accept x402 payments in your APIs using any x402-compatible client. Your server can verify and settle payments using thirdweb's facilitator service or any custom facilitator.