[MNY-226] Add Bridge Widget playgrounds (script, iframe, react) (#8571)

<!--

## 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 `BridgeWidget` component within the playground by introducing new features, improving styling, and refining existing functionalities. It also includes updates to metadata and the handling of token selections and amounts.

### Detailed summary
- Removed `PayIcon` and replaced with `BringToFrontIcon`.
- Added `showThirdwebBranding` option to `UniversalBridgeEmbed`.
- Updated `BridgeWidget` to support token amounts and selections.
- Enhanced sorting of bridge chains in `chains.ts`.
- Improved styling for various components, including `FeatureCard` and `ChatPageContent`.
- Updated documentation for widget parameters.
- Refactored code for better readability and maintainability in multiple components.

> ✨ 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**
  * Bridge Widget playground: interactive preview, code generation (script/component/iframe), theme, token/amount prefills, and preview modes.
  * Unified buy/swap experience under a single Bridge widget and a new branding toggle (hide/show branding).
  * Expanded connection options for wallet/connect flows.

* **Documentation**
  * Added docs for token amounts, branding, and iframe examples.

* **Style**
  * Minor typography and spacing refinements.

* **Chores**
  * Navigation and feature card updates; small test adjustment (one image test skipped).

<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/src/@/components/blocks/BuyAndSwapEmbed.tsx

@@ -283,7 +283,7 @@ function TokenInfoSection(props: {
         <dt className="text-xs font-medium text-muted-foreground tracking-wider uppercase">
           {props.label}
         </dt>
-        <dd className="text-3xl font-bold text-foreground tracking-tight">
+        <dd className="text-3xl font-semibold text-foreground tracking-tight">
           {props.value}
         </dd>
       </dl>

apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/erc20/erc20.tsx

@@ -25,6 +25,7 @@ export function UniversalBridgeEmbed(props: {
   swapTab: BuyAndSwapEmbedProps["swapTab"];
   pageType: "bridge" | "bridge-iframe";
   currency?: SupportedFiatCurrency;
+  showThirdwebBranding?: boolean;
 }) {
   return (
     <BuyAndSwapEmbed
@@ -34,6 +35,7 @@ export function UniversalBridgeEmbed(props: {
       swapTab={props.swapTab}
       pageType={props.pageType}
       wallets={bridgeWallets}
+      showThirdwebBranding={props.showThirdwebBranding}
     />
   );
 }

apps/dashboard/src/app/bridge/(general)/components/client/UniversalBridgeEmbed.tsx

@@ -35,9 +35,16 @@ export default async function Page(props: {
   // output is buy, input is sell
   const sellChain = parse(searchParams.inputChain, onlyNumber);
   const sellCurrency = parse(searchParams.inputCurrency, onlyAddress);
+  const sellAmount = parse(searchParams.inputCurrencyAmount, onlyNumber);
 
   const buyChain = parse(searchParams.outputChain, onlyNumber);
   const buyCurrency = parse(searchParams.outputCurrency, onlyAddress);
+  const buyAmount = parse(searchParams.outputCurrencyAmount, onlyNumber);
+
+  const showThirdwebBranding = parse(
+    searchParams.showThirdwebBranding,
+    (v) => v !== "false",
+  );
 
   const persistTokenSelections =
     parse(searchParams.persistTokenSelections, (v) =>
@@ -61,11 +68,14 @@ export default async function Page(props: {
           persistTokenSelections={persistTokenSelections === "true"}
           pageType="bridge-iframe"
           currency={currency}
+          showThirdwebBranding={showThirdwebBranding}
           buyTab={{
             buyToken: buyChain
               ? {
                   chainId: buyChain,
                   tokenAddress: buyCurrency || NATIVE_TOKEN_ADDRESS,
+                  amount:
+                    buyAmount === undefined ? undefined : buyAmount.toString(),
                 }
               : undefined,
           }}
@@ -74,12 +84,18 @@ export default async function Page(props: {
               ? {
                   chainId: sellChain,
                   tokenAddress: sellCurrency || NATIVE_TOKEN_ADDRESS,
+                  amount:
+                    sellAmount === undefined
+                      ? undefined
+                      : sellAmount.toString(),
                 }
               : undefined,
             buyToken: buyChain
               ? {
                   chainId: buyChain,
                   tokenAddress: buyCurrency || NATIVE_TOKEN_ADDRESS,
+                  amount:
+                    buyAmount === undefined ? undefined : buyAmount.toString(),
                 }
               : undefined,
           }}

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

@@ -84,7 +84,7 @@ export function ChatPageContent(props: {
     const userChainIdArray = userChainIds
       .split(",")
       .map((id) => id.trim())
-      .filter((id) => id !== "" && !isNaN(Number(id)));
+      .filter((id) => id !== "" && !Number.isNaN(Number(id)));
 
     return {
       chainIds:

apps/playground-web/src/app/ai/components/ChatPageContent.tsx

@@ -0,0 +1,74 @@
+"use client";
+
+import { useTheme } from "next-themes";
+import { useEffect, useState } from "react";
+import { TabButtons } from "../../../../components/ui/tab-buttons";
+import { LeftSection } from "./left-section";
+import { RightSection } from "./right-section";
+import type { BridgeWidgetPlaygroundOptions } from "./types";
+
+const defaultOptions: BridgeWidgetPlaygroundOptions = {
+  integrationType: "iframe",
+  prefill: undefined,
+  currency: "USD",
+  showThirdwebBranding: true,
+  theme: {
+    darkColorOverrides: {},
+    lightColorOverrides: {},
+    type: "dark",
+  },
+};
+
+export function BridgeWidgetPlayground() {
+  const { theme } = useTheme();
+
+  const [options, setOptions] =
+    useState<BridgeWidgetPlaygroundOptions>(defaultOptions);
+
+  // change theme on global theme change
+  useEffect(() => {
+    setOptions((prev) => ({
+      ...prev,
+      theme: {
+        ...prev.theme,
+        type: theme === "dark" ? "dark" : "light",
+      },
+    }));
+  }, [theme]);
+
+  return (
+    <div>
+      <TabButtons
+        tabs={[
+          {
+            name: "Iframe",
+            onClick: () =>
+              setOptions({ ...options, integrationType: "iframe" }),
+            isActive: options.integrationType === "iframe",
+          },
+          {
+            name: "Script",
+            onClick: () =>
+              setOptions({ ...options, integrationType: "script" }),
+            isActive: options.integrationType === "script",
+          },
+          {
+            name: "React",
+            onClick: () =>
+              setOptions({ ...options, integrationType: "component" }),
+            isActive: options.integrationType === "component",
+          },
+        ]}
+      />
+
+      <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 options={options} setOptions={setOptions} />
+        </div>
+        <RightSection options={options} />
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,72 @@
+import type { BridgeWidgetPlaygroundOptions } from "./types";
+
+const BRIDGE_WIDGET_IFRAME_BASE_URL = "https://thirdweb.com/bridge/widget";
+
+export function buildIframeUrl(
+  options: BridgeWidgetPlaygroundOptions,
+  type: "code" | "preview",
+) {
+  const url = new URL(BRIDGE_WIDGET_IFRAME_BASE_URL);
+
+  if (type === "preview") {
+    // always set it to false so playground doesn't show last used tokens
+    url.searchParams.set("persistTokenSelections", "false");
+  }
+
+  // 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.currency && options.currency !== "USD") {
+    url.searchParams.set("currency", options.currency);
+  }
+
+  // Branding
+  if (options.showThirdwebBranding === false) {
+    url.searchParams.set("showThirdwebBranding", "false");
+  }
+
+  // Sell token (input)
+  if (options.prefill?.sellToken) {
+    url.searchParams.set(
+      "inputChain",
+      String(options.prefill.sellToken.chainId),
+    );
+    if (options.prefill.sellToken.tokenAddress) {
+      url.searchParams.set(
+        "inputCurrency",
+        options.prefill.sellToken.tokenAddress,
+      );
+    }
+    if (options.prefill.sellToken.amount) {
+      url.searchParams.set(
+        "inputCurrencyAmount",
+        options.prefill.sellToken.amount,
+      );
+    }
+  }
+
+  // Buy token (output)
+  if (options.prefill?.buyToken) {
+    url.searchParams.set(
+      "outputChain",
+      String(options.prefill.buyToken.chainId),
+    );
+    if (options.prefill.buyToken.tokenAddress) {
+      url.searchParams.set(
+        "outputCurrency",
+        options.prefill.buyToken.tokenAddress,
+      );
+    }
+    if (options.prefill.buyToken.amount) {
+      url.searchParams.set(
+        "outputCurrencyAmount",
+        options.prefill.buyToken.amount,
+      );
+    }
+  }
+
+  return url.toString();
+}