Add bridge widget iframe docs, update path, link to docs (#8528)

<!--

## 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 `Bridge` and `Bridge Widget` functionalities, improving UI elements, adding new features, and updating documentation. It includes modifications to components, styling adjustments, and expanded capabilities for currency selection.

### Detailed summary
- Updated `Sidebar.tsx` to remove padding.
- Changed `page.mdx` headers from "Key Features" to "Features".
- Enhanced `reportBridgePageLinkClick` to include "integrate-bridge-widget".
- Modified `page.tsx` to include client ID instructions.
- Adjusted header font sizes in `header.tsx`.
- Improved `bridgeRedirects` to include new paths.
- Updated `bridge-widget` links in `sidebar.tsx`.
- Added `persistTokenSelections` and `currency` props to `UniversalBridgeEmbed`.
- Created `IframeCodePreview` component for iframe integration documentation.
- Added a new `BadgeLink` component for better user interaction.
- Expanded `BuyAndSwapEmbed` props to support currency and token selections.
- Updated documentation for `BridgeWidget` and `Iframe` integrations with examples.
- Enhanced `BridgePageUI` to include the new `AddBridgeWidgetLink`.
- Introduced multiple currency options for fiat values in widget interfaces.

> ✨ 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 available via Iframe, Script, and React component
  * Fiat currency selection for buy/swap widgets
  * Token selection persistence option
  * "Add Bridge widget" integration link added to Bridge page

* **Documentation**
  * New detailed guides and examples for Iframe, Script, and React integration
  * Code preview and embedding examples added

* **Style**
  * Typography, spacing, and layout refinements across Bridge pages
  * Navigation reorganized into a Bridge Widget group

* **Chores**
  * Added redirects for Bridge widget paths

<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/@/analytics/report.ts

@@ -683,7 +683,7 @@ export function reportProductFeedback(properties: {
  *
  */
 export function reportBridgePageLinkClick(params: {
-  linkType: "bridge-docs" | "trending-tokens";
+  linkType: "bridge-docs" | "trending-tokens" | "integrate-bridge-widget";
 }) {
   posthog.capture("bridge page link clicked", params);
 }

apps/dashboard/src/@/components/blocks/BuyAndSwapEmbed.tsx

@@ -4,7 +4,11 @@
 import { useTheme } from "next-themes";
 import { useEffect, useMemo, useRef, useState } from "react";
 import { defineChain } from "thirdweb";
-import { BuyWidget, SwapWidget } from "thirdweb/react";
+import {
+  BuyWidget,
+  type SupportedFiatCurrency,
+  SwapWidget,
+} from "thirdweb/react";
 import type { Wallet } from "thirdweb/wallets";
 import {
   reportAssetBuyCancelled,
@@ -34,6 +38,7 @@ import { getConfiguredThirdwebClient } from "../../constants/thirdweb.server";
 type PageType = "asset" | "bridge" | "chain" | "bridge-iframe";
 
 export type BuyAndSwapEmbedProps = {
+  persistTokenSelections?: boolean;
   buyTab:
     | {
         buyToken:
@@ -65,6 +70,7 @@ export type BuyAndSwapEmbedProps = {
     | undefined;
   pageType: PageType;
   wallets?: Wallet[];
+  currency?: SupportedFiatCurrency;
 };
 
 export function BuyAndSwapEmbed(props: BuyAndSwapEmbedProps) {
@@ -118,6 +124,7 @@ export function BuyAndSwapEmbed(props: BuyAndSwapEmbedProps) {
 
       {tab === "buy" && (
         <BuyWidget
+          currency={props.currency || "USD"}
           amount={props.buyTab?.buyToken?.amount || "1"}
           chain={
             props.buyTab?.buyToken?.chainId
@@ -241,6 +248,8 @@ export function BuyAndSwapEmbed(props: BuyAndSwapEmbedProps) {
 
       {tab === "swap" && (
         <SwapWidget
+          currency={props.currency || "USD"}
+          persistTokenSelections={props.persistTokenSelections}
           client={client}
           theme={themeObj}
           className="!rounded-2xl !border-none"

apps/dashboard/src/app/bridge/(general)/components/bridge-page.tsx

@@ -8,6 +8,7 @@ import RoutesImage from "../assets/routes.png";
 import TokensImage from "../assets/tokens.png";
 import { bridgeStats, bridgeStatsNumbers } from "../data";
 import { AnimatedNumbers } from "./client/animated-numbers";
+import { AddBridgeWidgetLink } from "./client/badge-link";
 import { UniversalBridgeEmbed } from "./client/UniversalBridgeEmbed";
 import { BridgePageHeader } from "./header";
 
@@ -29,6 +30,12 @@ export function BridgePageUI(props: {
         />
       </div>
 
+      <div className="container max-w-2xl flex justify-center">
+        <AddBridgeWidgetLink />
+      </div>
+
+      <div className="h-10" />
+
       <HeadingSection title={props.title} />
 
       <div className="h-20 lg:h-40" />
@@ -43,7 +50,7 @@ export function BridgePageUI(props: {
 function HeadingSection(props: { title: React.ReactNode }) {
   return (
     <div className="container">
-      <div className="mb-3 lg:mb-6">{props.title}</div>
+      <div className="mb-3 lg:mb-5">{props.title}</div>
 
       <p className="text-muted-foreground text-sm text-pretty text-center lg:text-lg mb-6 lg:mb-8">
         Seamlessly move your assets across {bridgeStats.supportedChains} chains
@@ -81,9 +88,9 @@ function DataSquare(props: {
   imageClassName?: string;
 }) {
   return (
-    <div className="py-2 lg:py-0 size-full lg:size-[220px] rounded-xl border hover:bg-card bg-card/50 relative shrink-0 overflow-hidden">
+    <div className="py-2 lg:py-0 size-full lg:size-[200px] rounded-2xl border hover:bg-card bg-card/50 relative shrink-0 overflow-hidden">
       <div className="p-4">
-        <div className="flex items-center gap-1 text-3xl lg:text-5xl font-medium tracking-tight font-mono mb-1 h-[45px] lg:h-[56px]">
+        <div className="flex items-center gap-1 text-3xl lg:text-4xl font-semibold tracking-tight mb-1 h-[45px]">
           <AnimatedNumbers
             value={props.data}
             format={props.format}

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

@@ -1,5 +1,6 @@
 "use client";
 
+import type { SupportedFiatCurrency } from "thirdweb/react";
 import { createWallet } from "thirdweb/wallets";
 import {
   BuyAndSwapEmbed,
@@ -19,12 +20,16 @@ export const bridgeWallets = [
 ];
 
 export function UniversalBridgeEmbed(props: {
+  persistTokenSelections?: boolean;
   buyTab: BuyAndSwapEmbedProps["buyTab"];
   swapTab: BuyAndSwapEmbedProps["swapTab"];
   pageType: "bridge" | "bridge-iframe";
+  currency?: SupportedFiatCurrency;
 }) {
   return (
     <BuyAndSwapEmbed
+      persistTokenSelections={props.persistTokenSelections}
+      currency={props.currency}
       buyTab={props.buyTab}
       swapTab={props.swapTab}
       pageType={props.pageType}

apps/dashboard/src/app/bridge/(general)/components/client/badge-link.tsx

@@ -0,0 +1,34 @@
+"use client";
+import { ArrowUpRightIcon } from "lucide-react";
+import Link from "next/link";
+import { reportBridgePageLinkClick } from "@/analytics/report";
+
+export function AddBridgeWidgetLink() {
+  return (
+    <BadgeLink
+      href="https://portal.thirdweb.com/bridge/bridge-widget"
+      label="Add Bridge widget in your app"
+      onClick={() => {
+        reportBridgePageLinkClick({ linkType: "integrate-bridge-widget" });
+      }}
+    />
+  );
+}
+
+function BadgeLink(props: {
+  href: string;
+  label: string;
+  onClick?: () => void;
+}) {
+  return (
+    <Link
+      href={props.href}
+      className="text-sm text-foreground bg-accent/50 rounded-full px-4 py-2 border hover:bg-accent flex items-center gap-2"
+      target="_blank"
+      onClick={props.onClick}
+    >
+      {props.label}
+      <ArrowUpRightIcon className="size-4 text-foreground" />
+    </Link>
+  );
+}

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

@@ -13,10 +13,10 @@ import { bridgeWallets } from "./client/UniversalBridgeEmbed";
 
 export function BridgePageHeader(props: { containerClassName?: string }) {
   return (
-    <div className="border-b border-border/70">
+    <div>
       <header
         className={cn(
-          "container flex max-w-7xl justify-between py-3 lg:py-4",
+          "container flex max-w-5xl justify-between py-3 lg:py-5",
           props.containerClassName,
         )}
       >

apps/dashboard/src/app/bridge/(general)/page.tsx

@@ -60,7 +60,7 @@ export default async function Page(props: {
           : undefined,
       }}
       title={
-        <h1 className="text-3xl md:text-6xl font-semibold tracking-tighter text-balance text-center">
+        <h1 className="text-3xl md:text-5xl font-semibold tracking-tighter text-balance text-center">
           Bridge and Swap tokens <br className="max-sm:hidden" /> across any
           chain, instantly
         </h1>

…ashboard/src/app/bridge/embed/layout.tsx …shboard/src/app/bridge/widget/layout.tsxapps/dashboard/src/app/bridge/embed/layout.tsx renamed to apps/dashboard/src/app/bridge/widget/layout.tsx apps/dashboard/src/app/bridge/embed/layout.tsx renamed to apps/dashboard/src/app/bridge/widget/layout.tsx

@@ -3,6 +3,7 @@ import { isAddress, NATIVE_TOKEN_ADDRESS } from "thirdweb";
 import { UniversalBridgeEmbed } from "../(general)/components/client/UniversalBridgeEmbed";
 import { bridgeStats } from "../(general)/data";
 import "@workspace/ui/global.css";
+import type { SupportedFiatCurrency } from "thirdweb/react";
 import { NEXT_PUBLIC_BRIDGE_IFRAME_CLIENT_ID } from "@/constants/public-envs";
 import { BridgeProviders } from "../(general)/components/client/Providers.client";
 
@@ -38,15 +39,28 @@ export default async function Page(props: {
   const buyChain = parse(searchParams.outputChain, onlyNumber);
   const buyCurrency = parse(searchParams.outputCurrency, onlyAddress);
 
+  const persistTokenSelections =
+    parse(searchParams.persistTokenSelections, (v) =>
+      v === "false" ? "false" : "true",
+    ) || "true";
+
   const theme =
     parse(searchParams.theme, (v) => (v === "light" ? "light" : "dark")) ||
     "dark";
 
+  const currency = parse(searchParams.currency, (v) =>
+    VALID_CURRENCIES.includes(v as SupportedFiatCurrency)
+      ? (v as SupportedFiatCurrency)
+      : undefined,
+  );
+
   return (
     <Providers theme={theme}>
       <div className="flex items-center justify-center min-h-screen py-6 bg-background">
         <UniversalBridgeEmbed
+          persistTokenSelections={persistTokenSelections === "true"}
           pageType="bridge-iframe"
+          currency={currency}
           buyTab={{
             buyToken: buyChain
               ? {
@@ -75,6 +89,32 @@ export default async function Page(props: {
   );
 }
 
+const VALID_CURRENCIES: SupportedFiatCurrency[] = [
+  "USD",
+  "EUR",
+  "GBP",
+  "JPY",
+  "KRW",
+  "CNY",
+  "INR",
+  "NOK",
+  "SEK",
+  "CHF",
+  "AUD",
+  "CAD",
+  "NZD",
+  "MXN",
+  "BRL",
+  "CLP",
+  "CZK",
+  "DKK",
+  "HKD",
+  "HUF",
+  "IDR",
+  "ILS",
+  "ISK",
+];
+
 function parse<T>(
   value: string | string[] | undefined,
   fn: (value: string) => T | undefined,