From db145b562164f557e0091f74d9741a0ed8c5875b Mon Sep 17 00:00:00 2001
From: MananTank <manantankm@gmail.com>
Date: Tue, 23 Sep 2025 21:05:13 +0000
Subject: [PATCH] [BLD-330] Playground: Add missing payments overview page
 (#8107)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

<!--

## title your PR with this format: "[SDK/Dashboard/Portal] Feature/Fix: Concise title for the changes"

If you did not copy the branch name from Linear, paste the issue tag here (format is TEAM-0000):

## Notes for the reviewer

Anything important to call out? Be sure to also clarify these in your comments.

## How to test

Unit tests, playground, etc.

-->

<!-- start pr-codex -->

---

## PR-Codex overview
This PR introduces a new `OverviewPage` component for the payments section, updates the layout of the `OverviewPage`, and adds a new payment feature card for the x402 payment protocol.

### Detailed summary
- Updated `OverviewPage` to allow a maximum width of 80% for the description.
- Created a new `Page` component in `page.tsx` that utilizes `OverviewPage` with a title, description, and feature cards.
- Added a new feature card for the x402 payment protocol in `pages-metadata.ts`.

> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`

<!-- end pr-codex -->

<!-- This is an auto-generated comment: release notes by coderabbit.ai -->

## Summary by CodeRabbit

* **New Features**
  * Introduced a Payments page with a clear overview, icon, and quick links to payment options.
  * Added an x402 payment protocol card to the Payments overview, enabling API payments with any web3 wallet and direct navigation.

* **Style**
  * Refined overview layout by limiting description width for improved readability on wide screens.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---
 apps/playground-web/src/app/data/pages-metadata.ts |  8 ++++++++
 apps/playground-web/src/app/payments/page.tsx      | 14 ++++++++++++++
 .../src/components/blocks/OverviewPage.tsx         |  2 +-
 3 files changed, 23 insertions(+), 1 deletion(-)
 create mode 100644 apps/playground-web/src/app/payments/page.tsx

diff --git a/apps/playground-web/src/app/data/pages-metadata.ts b/apps/playground-web/src/app/data/pages-metadata.ts
index 70ab97af026..744c89365fe 100644
--- a/apps/playground-web/src/app/data/pages-metadata.ts
+++ b/apps/playground-web/src/app/data/pages-metadata.ts
@@ -4,6 +4,7 @@ import {
   BotIcon,
   BoxIcon,
   BringToFrontIcon,
+  CircleDollarSignIcon,
   CircleUserIcon,
   CreditCardIcon,
   DollarSignIcon,
@@ -186,6 +187,13 @@ export const paymentsFeatureCards: FeatureCardMetadata[] = [
     description:
       "Enable users to pay for onchain transactions with fiat or crypto",
   },
+  {
+    icon: CircleDollarSignIcon,
+    title: "x402",
+    link: "/payments/x402",
+    description:
+      "Use the x402 payment protocol to pay for API calls using any web3 wallet",
+  },
 ];
 
 export const accountAbstractionsFeatureCards: FeatureCardMetadata[] = [
diff --git a/apps/playground-web/src/app/payments/page.tsx b/apps/playground-web/src/app/payments/page.tsx
new file mode 100644
index 00000000000..ee256d1ee10
--- /dev/null
+++ b/apps/playground-web/src/app/payments/page.tsx
@@ -0,0 +1,14 @@
+import { OverviewPage } from "@/components/blocks/OverviewPage";
+import { PayIcon } from "@/icons/PayIcon";
+import { paymentsFeatureCards } from "../data/pages-metadata";
+
+export default function Page() {
+  return (
+    <OverviewPage
+      title="Payments"
+      description="thirdweb Payments allow developers to create advanced payment flows to monetize their apps through product sales, peer to peer payments, token sales, and more"
+      featureCards={paymentsFeatureCards}
+      icon={PayIcon}
+    />
+  );
+}
diff --git a/apps/playground-web/src/components/blocks/OverviewPage.tsx b/apps/playground-web/src/components/blocks/OverviewPage.tsx
index 9d7733e9591..b36a87793d5 100644
--- a/apps/playground-web/src/components/blocks/OverviewPage.tsx
+++ b/apps/playground-web/src/components/blocks/OverviewPage.tsx
@@ -19,7 +19,7 @@ export function OverviewPage(props: {
           <h1 className="mb-2 font-bold text-5xl tracking-tight">
             {props.title}
           </h1>
-          <p className="text-base text-muted-foreground leading-normal text-pretty">
+          <p className="text-base text-muted-foreground leading-normal text-pretty max-w-[80%]">
             {props.description}
           </p>
         </div>