[MNY-342] Dashboard: Add Buy Widget iframe (#8613)

<!--

## 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 `BuyWidget` feature, allowing users to purchase crypto tokens using various payment methods. It adds necessary environment variables, updates configuration for security policies, and implements the layout and functionality for the `BuyWidgetEmbed` component.

### Detailed summary
- Added `NEXT_PUBLIC_BUY_IFRAME_CLIENT_ID` to `public-envs.ts`.
- Updated `next.config.ts` with new Content Security Policy headers for `/bridge/buy-widget`.
- Created `BuyWidgetLayout` component in `layout.tsx` for the buy widget page.
- Implemented `BuyWidgetEmbed` component in `BuyWidgetEmbed.client.tsx` for handling crypto purchases.
- Enhanced `page.tsx` to manage search parameters and integrate `BuyWidgetEmbed`.

> ✨ 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

## Release Notes

* **New Features**
  * Added a new buy widget enabling direct cryptocurrency purchases with configurable payment methods (crypto and card) and multi-currency support
  * Implemented personalization options including custom titles, descriptions, images, and button labels
  * Enhanced security infrastructure to support the new widget functionality

<sub>✏️ Tip: You can customize this high-level summary in your review settings.</sub>

<!-- end of auto-generated comment: release notes by coderabbit.ai -->

Author: MananTank

apps/dashboard/next.config.ts

@@ -197,6 +197,24 @@ const baseNextConfig: NextConfig = {
         ],
         source: "/bridge/swap-widget/:path*",
       },
+      {
+        headers: [
+          {
+            key: "Content-Security-Policy",
+            value: EmbedContentSecurityPolicy.replace(/\s{2,}/g, " ").trim(),
+          },
+        ],
+        source: "/bridge/buy-widget",
+      },
+      {
+        headers: [
+          {
+            key: "Content-Security-Policy",
+            value: EmbedContentSecurityPolicy.replace(/\s{2,}/g, " ").trim(),
+          },
+        ],
+        source: "/bridge/buy-widget/:path*",
+      },
     ];
   },
   images: {

apps/dashboard/src/@/constants/public-envs.ts

@@ -50,3 +50,6 @@ export const NEXT_PUBLIC_CHECKOUT_IFRAME_CLIENT_ID =
 
 export const NEXT_PUBLIC_SWAP_IFRAME_CLIENT_ID =
   process.env.NEXT_PUBLIC_SWAP_IFRAME_CLIENT_ID;
+
+export const NEXT_PUBLIC_BUY_IFRAME_CLIENT_ID =
+  process.env.NEXT_PUBLIC_BUY_IFRAME_CLIENT_ID;

apps/dashboard/src/app/bridge/buy-widget/BuyWidgetEmbed.client.tsx

@@ -0,0 +1,95 @@
+"use client";
+
+import { useMemo } from "react";
+import { type Address, defineChain } from "thirdweb";
+import { BuyWidget, type SupportedFiatCurrency } from "thirdweb/react";
+import { NEXT_PUBLIC_BUY_IFRAME_CLIENT_ID } from "@/constants/public-envs";
+import { getConfiguredThirdwebClient } from "@/constants/thirdweb.server";
+
+export function BuyWidgetEmbed({
+  chainId,
+  tokenAddress,
+  amount,
+  showThirdwebBranding,
+  theme,
+  currency,
+  title,
+  description,
+  image,
+  paymentMethods,
+  buttonLabel,
+  receiverAddress,
+  country,
+}: {
+  chainId?: number;
+  tokenAddress?: Address;
+  amount?: string;
+  showThirdwebBranding?: boolean;
+  theme: "light" | "dark";
+  currency?: SupportedFiatCurrency;
+  title?: string;
+  description?: string;
+  image?: string;
+  paymentMethods?: ("crypto" | "card")[];
+  buttonLabel?: string;
+  receiverAddress?: Address;
+  country?: string;
+}) {
+  const client = useMemo(
+    () =>
+      getConfiguredThirdwebClient({
+        clientId: NEXT_PUBLIC_BUY_IFRAME_CLIENT_ID,
+        secretKey: undefined,
+        teamId: undefined,
+      }),
+    [],
+  );
+
+  const chain = useMemo(() => {
+    if (!chainId) return undefined;
+    // eslint-disable-next-line no-restricted-syntax
+    return defineChain(chainId);
+  }, [chainId]);
+
+  return (
+    <BuyWidget
+      className="shadow-xl"
+      client={client}
+      chain={chain}
+      tokenAddress={tokenAddress}
+      amount={amount}
+      showThirdwebBranding={showThirdwebBranding}
+      theme={theme}
+      currency={currency}
+      title={title}
+      description={description}
+      image={image}
+      paymentMethods={paymentMethods}
+      buttonLabel={buttonLabel}
+      receiverAddress={receiverAddress}
+      country={country}
+      onSuccess={() => {
+        sendMessageToParent({
+          source: "buy-widget",
+          type: "success",
+        });
+      }}
+      onError={(error) => {
+        sendMessageToParent({
+          source: "buy-widget",
+          type: "error",
+          message: error.message,
+        });
+      }}
+    />
+  );
+}
+
+function sendMessageToParent(content: object) {
+  try {
+    window.parent.postMessage(content, "*");
+  } catch (error) {
+    console.error("Failed to send post message to parent window");
+    console.error(error);
+  }
+}

apps/dashboard/src/app/bridge/buy-widget/layout.tsx

@@ -0,0 +1,27 @@
+import { Inter } from "next/font/google";
+import { cn } from "@/lib/utils";
+
+const fontSans = Inter({
+  display: "swap",
+  subsets: ["latin"],
+  variable: "--font-sans",
+});
+
+export default function BuyWidgetLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <html lang="en" suppressHydrationWarning>
+      <body
+        className={cn(
+          "min-h-dvh bg-background font-sans antialiased flex flex-col",
+          fontSans.variable,
+        )}
+      >
+        {children}
+      </body>
+    </html>
+  );
+}

apps/dashboard/src/app/bridge/buy-widget/page.tsx

@@ -0,0 +1,97 @@
+import type { Metadata } from "next";
+import "@workspace/ui/global.css";
+import type { SupportedFiatCurrency } from "thirdweb/react";
+import { isValidCurrency } from "../_common/isValidCurrency";
+import {
+  onlyAddress,
+  onlyNumber,
+  parseQueryParams,
+} from "../_common/parseQueryParams";
+import { BridgeProvidersLite } from "../(general)/components/client/Providers.client";
+import { BuyWidgetEmbed } from "./BuyWidgetEmbed.client";
+
+const title = "thirdweb Buy: Purchase Crypto with Ease";
+const description =
+  "Buy crypto tokens with credit card or other payment methods. Simple and secure purchases with thirdweb.";
+
+export const metadata: Metadata = {
+  description,
+  openGraph: {
+    description,
+    title,
+  },
+  title,
+};
+
+type SearchParams = {
+  [key: string]: string | string[] | undefined;
+};
+
+export default async function Page(props: {
+  searchParams: Promise<SearchParams>;
+}) {
+  const searchParams = await props.searchParams;
+
+  // Token params
+  const chainId = parseQueryParams(searchParams.chain, onlyNumber);
+  const tokenAddress = parseQueryParams(searchParams.tokenAddress, onlyAddress);
+  const amount = parseQueryParams(searchParams.amount, (v) => v);
+
+  // Optional params
+  const showThirdwebBranding = parseQueryParams(
+    searchParams.showThirdwebBranding,
+    // biome-ignore lint/complexity/noUselessTernary: this is easier to understand
+    (v) => (v === "false" ? false : true),
+  );
+
+  const theme =
+    parseQueryParams(searchParams.theme, (v) =>
+      v === "light" ? "light" : "dark",
+    ) || "dark";
+
+  const currency = parseQueryParams(searchParams.currency, (v) =>
+    isValidCurrency(v) ? (v as SupportedFiatCurrency) : undefined,
+  );
+
+  // Metadata params
+  const widgetTitle = parseQueryParams(searchParams.title, (v) => v);
+  const widgetDescription = parseQueryParams(
+    searchParams.description,
+    (v) => v,
+  );
+  const image = parseQueryParams(searchParams.image, (v) => v);
+
+  // Payment params
+  const paymentMethods = parseQueryParams(searchParams.paymentMethods, (v) => {
+    if (v === "crypto" || v === "card") {
+      return [v] as ("crypto" | "card")[];
+    }
+    return undefined;
+  });
+
+  const buttonLabel = parseQueryParams(searchParams.buttonLabel, (v) => v);
+  const receiverAddress = parseQueryParams(searchParams.receiver, onlyAddress);
+  const country = parseQueryParams(searchParams.country, (v) => v);
+
+  return (
+    <BridgeProvidersLite forcedTheme={theme}>
+      <div className="flex min-h-screen items-center justify-center bg-background px-4 py-8">
+        <BuyWidgetEmbed
+          chainId={chainId}
+          tokenAddress={tokenAddress}
+          amount={amount}
+          showThirdwebBranding={showThirdwebBranding}
+          theme={theme}
+          currency={currency}
+          title={widgetTitle}
+          description={widgetDescription}
+          image={image}
+          paymentMethods={paymentMethods}
+          buttonLabel={buttonLabel}
+          receiverAddress={receiverAddress}
+          country={country}
+        />
+      </div>
+    </BridgeProvidersLite>
+  );
+}