[MNY-355] Playground: Add Buy Widget iframe playground (#8615)

<!--

## 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 focuses on enhancing the `buy` widget functionality by introducing iframe support and improving the handling of integration types. It also adds new components for rendering iframe previews and updates the URL management for better integration experience.

### Detailed summary
- Updated `LeftSection.tsx` to allow both `checkout` and `buy` widgets for iframe integration.
- Modified `Page` component in `page.tsx` to handle async `searchParams` and pass `defaultTab` to `BuyPlayground`.
- Enhanced `CodeGen` to support widget type in iframe code generation.
- Added `CheckoutIframePreview` and `BuyWidgetIframePreview` components in `RightSection.tsx` for rendering respective iframes.
- Created `buildBuyIframeUrl` function in `buildBuyIframeUrl.ts` for generating URLs for the buy widget.
- Updated `BuyPlayground` to manage state and URL for integration type selection using tabs.

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

<!-- end pr-codex -->

Author: MananTank

apps/playground-web/src/app/bridge/buy-widget/BuyPlayground.tsx

@@ -1,12 +1,15 @@
 "use client";
 
-import { useState } from "react";
+import { useTheme } from "next-themes";
+import { useEffect, useState } from "react";
 import { arbitrum } from "thirdweb/chains";
+import { TabButtons } from "@/components/ui/tab-buttons";
 import { LeftSection } from "../components/LeftSection";
 import { RightSection } from "../components/RightSection";
 import type { BridgeComponentsPlaygroundOptions } from "../components/types";
 
 const defaultOptions: BridgeComponentsPlaygroundOptions = {
+  integrationType: "react",
   payOptions: {
     buyTokenAddress: undefined,
     buyTokenAmount: "0.002",
@@ -29,16 +32,70 @@ const defaultOptions: BridgeComponentsPlaygroundOptions = {
   },
 };
 
-export function BuyPlayground() {
-  const [options, setOptions] =
-    useState<BridgeComponentsPlaygroundOptions>(defaultOptions);
+function updatePageUrl(
+  tab: BridgeComponentsPlaygroundOptions["integrationType"],
+) {
+  const url = new URL(window.location.href);
+  if (tab === defaultOptions.integrationType) {
+    url.searchParams.delete("tab");
+  } else {
+    url.searchParams.set("tab", tab || "");
+  }
+
+  window.history.replaceState({}, "", url.toString());
+}
+
+export function BuyPlayground(props: { defaultTab?: "iframe" | "react" }) {
+  const { theme } = useTheme();
+
+  const [options, setOptions] = useState<BridgeComponentsPlaygroundOptions>(
+    () => ({
+      ...defaultOptions,
+      integrationType: props.defaultTab || defaultOptions.integrationType,
+    }),
+  );
+
+  // Change theme on global theme change
+  useEffect(() => {
+    setOptions((prev) => ({
+      ...prev,
+      theme: {
+        ...prev.theme,
+        type: theme === "dark" ? "dark" : "light",
+      },
+    }));
+  }, [theme]);
+
+  useEffect(() => {
+    updatePageUrl(options.integrationType);
+  }, [options.integrationType]);
 
   return (
-    <div className="relative flex flex-col-reverse gap-6 xl:min-h-[900px] xl:flex-row xl:gap-6">
-      <div className="grow border-b pb-10 xl:mb-0 xl:border-r xl:border-b-0 xl:pr-6">
-        <LeftSection widget="buy" options={options} setOptions={setOptions} />
+    <div>
+      <TabButtons
+        tabs={[
+          {
+            name: "React",
+            onClick: () => setOptions({ ...options, integrationType: "react" }),
+            isActive: options.integrationType === "react",
+          },
+          {
+            name: "Iframe",
+            onClick: () =>
+              setOptions({ ...options, integrationType: "iframe" }),
+            isActive: options.integrationType === "iframe",
+          },
+        ]}
+      />
+
+      <div className="h-6" />
+
+      <div className="relative flex flex-col-reverse gap-6 xl:min-h-[900px] xl:flex-row xl:gap-6">
+        <div className="grow border-b pb-10 xl:mb-0 xl:border-r xl:border-b-0 xl:pr-6">
+          <LeftSection widget="buy" options={options} setOptions={setOptions} />
+        </div>
+        <RightSection widget="buy" options={options} />
       </div>
-      <RightSection widget="buy" options={options} />
     </div>
   );
 }

apps/playground-web/src/app/bridge/buy-widget/page.tsx

@@ -19,7 +19,15 @@ export const metadata = createMetadata({
   },
 });
 
-export default function Page() {
+export default async function Page(props: {
+  searchParams: Promise<{ tab?: string }>;
+}) {
+  const searchParams = await props.searchParams;
+  const defaultTab =
+    searchParams.tab === "iframe" || searchParams.tab === "react"
+      ? searchParams.tab
+      : undefined;
+
   return (
     <ThirdwebProvider>
       <PageLayout
@@ -28,7 +36,7 @@ export default function Page() {
         description={description}
         docsLink="https://portal.thirdweb.com/references/typescript/v5/BuyWidget?utm_source=playground"
       >
-        <BuyPlayground />
+        <BuyPlayground defaultTab={defaultTab} />
       </PageLayout>
     </ThirdwebProvider>
   );

apps/playground-web/src/app/bridge/components/CodeGen.tsx

@@ -5,6 +5,7 @@ import {
   stringifyImports,
   stringifyProps,
 } from "../../../lib/code-gen";
+import { buildBuyIframeUrl } from "./buildBuyIframeUrl";
 import { buildCheckoutIframeUrl } from "./buildCheckoutIframeUrl";
 import type { BridgeComponentsPlaygroundOptions } from "./types";
 
@@ -27,7 +28,8 @@ export function CodeGen(props: {
   options: BridgeComponentsPlaygroundOptions;
 }) {
   const isIframe =
-    props.widget === "checkout" && props.options.integrationType === "iframe";
+    (props.widget === "checkout" || props.widget === "buy") &&
+    props.options.integrationType === "iframe";
 
   return (
     <div className="flex w-full grow flex-col">
@@ -36,7 +38,7 @@ export function CodeGen(props: {
           className="grow"
           code={
             isIframe
-              ? getIframeCode(props.options)
+              ? getIframeCode(props.widget as "buy" | "checkout", props.options)
               : getCode(props.widget, props.options)
           }
           lang={isIframe ? "html" : "tsx"}
@@ -46,13 +48,22 @@ export function CodeGen(props: {
   );
 }
 
-function getIframeCode(options: BridgeComponentsPlaygroundOptions) {
-  const src = buildCheckoutIframeUrl(options);
+function getIframeCode(
+  widget: "buy" | "checkout",
+  options: BridgeComponentsPlaygroundOptions,
+) {
+  const src =
+    widget === "buy"
+      ? buildBuyIframeUrl(options)
+      : buildCheckoutIframeUrl(options);
+
+  const hasImage = src.includes("image=");
+  const height = hasImage ? "850px" : "700px";
 
   return `\
 <iframe
   src="${src}"
-  height="700px"
+  height="${height}"
   width="100%"
   style="border: 0;"
 />`;

apps/playground-web/src/app/bridge/components/LeftSection.tsx

@@ -486,7 +486,8 @@ export function LeftSection(props: {
 
         {/* Colors - disabled for iframe */}
         {!(
-          props.widget === "checkout" && options.integrationType === "iframe"
+          (props.widget === "checkout" || props.widget === "buy") &&
+          options.integrationType === "iframe"
         ) && (
           <ColorFormGroup
             onChange={(newTheme) => {

apps/playground-web/src/app/bridge/components/RightSection.tsx

@@ -15,6 +15,7 @@ import {
 import { Button } from "../../../components/ui/button";
 import { THIRDWEB_CLIENT } from "../../../lib/client";
 import { cn } from "../../../lib/utils";
+import { buildBuyIframeUrl } from "./buildBuyIframeUrl";
 import { buildCheckoutIframeUrl } from "./buildCheckoutIframeUrl";
 import { CodeGen } from "./CodeGen";
 import type { BridgeComponentsPlaygroundOptions } from "./types";
@@ -155,21 +156,15 @@ export function RightSection(props: {
           previewTab !== "code" && "items-center",
         )}
       >
-        <BackgroundPattern />
-
         {previewTab === "ui" &&
-          (props.widget === "checkout" &&
-          props.options.integrationType === "iframe" ? (
-            <iframe
-              src={buildCheckoutIframeUrl(props.options)}
-              height="700px"
-              width="100%"
-              title="Checkout Widget"
-              className="fade-in-0 animate-in rounded-xl duration-500"
-              style={{
-                border: "0",
-              }}
-            />
+          (props.options.integrationType === "iframe" ? (
+            props.widget === "checkout" ? (
+              <CheckoutIframePreview options={props.options} />
+            ) : props.widget === "buy" ? (
+              <BuyWidgetIframePreview options={props.options} />
+            ) : (
+              embed
+            )
           ) : (
             embed
           ))}
@@ -182,7 +177,46 @@ export function RightSection(props: {
   );
 }
 
-function BackgroundPattern() {
+function CheckoutIframePreview(props: {
+  options: BridgeComponentsPlaygroundOptions;
+}) {
+  const src = buildCheckoutIframeUrl(props.options);
+  return (
+    <iframe
+      src={src}
+      height="700px"
+      width="100%"
+      title="Checkout Widget"
+      className="fade-in-0 animate-in rounded-xl duration-500"
+      style={{
+        border: "0",
+      }}
+    />
+  );
+}
+
+function BuyWidgetIframePreview(props: {
+  options: BridgeComponentsPlaygroundOptions;
+}) {
+  const src = buildBuyIframeUrl(props.options);
+
+  const hasImage = src.includes("image=");
+  const height = hasImage ? "850px" : "700px";
+  return (
+    <iframe
+      src={src}
+      height={height}
+      width="100%"
+      title="Buy Widget"
+      className="fade-in-0 animate-in rounded-xl duration-500"
+      style={{
+        border: "0",
+      }}
+    />
+  );
+}
+
+function _BackgroundPattern() {
   const color = "hsl(var(--foreground)/15%)";
   return (
     <div

apps/playground-web/src/app/bridge/components/buildBuyIframeUrl.ts

@@ -0,0 +1,72 @@
+import type { BridgeComponentsPlaygroundOptions } from "./types";
+
+const BUY_WIDGET_IFRAME_BASE_URL = "https://thirdweb.com/bridge/buy-widget";
+
+export function buildBuyIframeUrl(options: BridgeComponentsPlaygroundOptions) {
+  const url = new URL(BUY_WIDGET_IFRAME_BASE_URL);
+
+  // Chain (optional)
+  if (options.payOptions.buyTokenChain?.id) {
+    url.searchParams.set("chain", String(options.payOptions.buyTokenChain.id));
+  }
+
+  // Token address (optional - if not set, native token is used)
+  if (options.payOptions.buyTokenAddress) {
+    url.searchParams.set("tokenAddress", options.payOptions.buyTokenAddress);
+  }
+
+  // Amount (optional)
+  if (options.payOptions.buyTokenAmount) {
+    url.searchParams.set("amount", options.payOptions.buyTokenAmount);
+  }
+
+  // Receiver address (optional)
+  if (options.payOptions.receiverAddress) {
+    url.searchParams.set("receiver", options.payOptions.receiverAddress);
+  }
+
+  // Theme (only add if light, dark is default)
+  if (options.theme.type === "light") {
+    url.searchParams.set("theme", "light");
+  }
+
+  // Currency (only add if not USD, USD is default)
+  if (options.payOptions.currency && options.payOptions.currency !== "USD") {
+    url.searchParams.set("currency", options.payOptions.currency);
+  }
+
+  // Branding
+  if (options.payOptions.showThirdwebBranding === false) {
+    url.searchParams.set("showThirdwebBranding", "false");
+  }
+
+  // Product info
+  if (options.payOptions.title) {
+    url.searchParams.set("title", options.payOptions.title);
+  }
+
+  if (options.payOptions.description) {
+    url.searchParams.set("description", options.payOptions.description);
+  }
+
+  if (options.payOptions.image) {
+    url.searchParams.set("image", options.payOptions.image);
+  }
+
+  if (options.payOptions.buttonLabel) {
+    url.searchParams.set("buttonLabel", options.payOptions.buttonLabel);
+  }
+
+  // Payment methods
+  if (
+    options.payOptions.paymentMethods &&
+    options.payOptions.paymentMethods.length === 1
+  ) {
+    url.searchParams.set(
+      "paymentMethods",
+      options.payOptions.paymentMethods[0],
+    );
+  }
+
+  return url.toString();
+}