[BLD-330] Playground: Add missing payments overview page (#8107)

MananTank · MananTank · commit db145b562164 · 2025-09-23T21:05:13.000Z
&lt;!--

## 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.

--&gt;

&lt;!-- start pr-codex --&gt;

---

## 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`.

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

&lt;!-- end pr-codex --&gt;

&lt;!-- This is an auto-generated comment: release notes by coderabbit.ai --&gt;

## 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.

&lt;!-- end of auto-generated comment: release notes by coderabbit.ai --&gt;
diff --git 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
@@ -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
@@ -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>
