[MNY-328] Dashboard: Add Bridge iframe page (#8525)

<!--

## 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 primarily enhances the `bridge` functionality by introducing iframe support, updating component structures, and modifying environment variables. It also includes changes in layout and security policies related to the `bridge` feature.

### Detailed summary
- Added `NEXT_PUBLIC_BRIDGE_IFRAME_CLIENT_ID` to environment variables.
- Modified `BridgeProviders` to accept `clientId` and `forcedTheme`.
- Updated `UniversalBridgeEmbed` to use dynamic `pageType`.
- Created a new layout for `BridgeEmbedLayout`.
- Enhanced security headers for `/bridge/embed`.
- Refactored imports and paths for `data` and components.
- Added `bridge-iframe` to `pageType` types across multiple files.
- Implemented new parsing logic for search parameters in the iframe page.

> ✨ 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**
  * Added a new /bridge/embed page to support an embeddable bridge iframe and a "bridge-iframe" flow.

* **Security**
  * Updated content security headers and frame-ancestor rules to allow safe embedding of the bridge iframe.

* **Chores**
  * Added environment variable for the bridge iframe client ID.
  * Simplified theme behavior to rely on the default dark theme.

* **Analytics**
  * Added "bridge-iframe" page type to reporting to track iframe usage.

<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/.env.example

@@ -66,3 +66,6 @@ ANALYTICS_SERVICE_URL=""
 STRIPE_SECRET_KEY=""
 GROWTH_PLAN_SKU=""
 PAYMENT_METHOD_CONFIGURATION=""
+
+# required for bridge iframe (/bridge/embed) page
+NEXT_PUBLIC_BRIDGE_IFRAME_CLIENT_ID=""

apps/dashboard/next.config.ts

@@ -18,6 +18,11 @@ const ContentSecurityPolicy = `
   block-all-mixed-content;
 `;
 
+const EmbedContentSecurityPolicy = `
+  ${ContentSecurityPolicy}
+  frame-ancestors *;
+`;
+
 const securityHeaders = [
   {
     key: "X-DNS-Prefetch-Control",
@@ -138,6 +143,24 @@ const baseNextConfig: NextConfig = {
         // Apply these headers to all routes in your application.
         source: "/(.*)",
       },
+      {
+        headers: [
+          {
+            key: "Content-Security-Policy",
+            value: EmbedContentSecurityPolicy.replace(/\s{2,}/g, " ").trim(),
+          },
+        ],
+        source: "/bridge/embed",
+      },
+      {
+        headers: [
+          {
+            key: "Content-Security-Policy",
+            value: EmbedContentSecurityPolicy.replace(/\s{2,}/g, " ").trim(),
+          },
+        ],
+        source: "/bridge/embed/:path*",
+      },
     ];
   },
   images: {

apps/dashboard/src/@/analytics/report.ts

@@ -232,13 +232,13 @@ type TokenSwapParams = {
   buyTokenAddress: string;
   sellTokenChainId: number;
   sellTokenAddress: string;
-  pageType: "asset" | "bridge" | "chain";
+  pageType: "asset" | "bridge" | "chain" | "bridge-iframe";
 };
 
 type TokenBuyParams = {
   buyTokenChainId: number | undefined;
   buyTokenAddress: string | undefined;
-  pageType: "asset" | "bridge" | "chain";
+  pageType: "asset" | "bridge" | "chain" | "bridge-iframe";
 };
 
 /**
@@ -298,7 +298,7 @@ export function reportTokenSwapSuccessful(properties: TokenSwapParams) {
  * @MananTank
  */
 export function reportSwapWidgetShown(properties: {
-  pageType: "asset" | "bridge" | "chain";
+  pageType: "asset" | "bridge" | "chain" | "bridge-iframe";
 }) {
   posthog.capture("swap widget shown", properties);
 }

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

@@ -21,6 +21,7 @@ import {
 import { Button } from "@/components/ui/button";
 import {
   NEXT_PUBLIC_ASSET_PAGE_CLIENT_ID,
+  NEXT_PUBLIC_BRIDGE_IFRAME_CLIENT_ID,
   NEXT_PUBLIC_BRIDGE_PAGE_CLIENT_ID,
   NEXT_PUBLIC_CHAIN_PAGE_CLIENT_ID,
 } from "@/constants/public-envs";
@@ -30,7 +31,7 @@ import { getSDKTheme } from "@/utils/sdk-component-theme";
 import { appMetadata } from "../../constants/connect";
 import { getConfiguredThirdwebClient } from "../../constants/thirdweb.server";
 
-type PageType = "asset" | "bridge" | "chain";
+type PageType = "asset" | "bridge" | "chain" | "bridge-iframe";
 
 export type BuyAndSwapEmbedProps = {
   buyTab:
@@ -92,7 +93,9 @@ export function BuyAndSwapEmbed(props: BuyAndSwapEmbedProps) {
             ? NEXT_PUBLIC_BRIDGE_PAGE_CLIENT_ID
             : props.pageType === "chain"
               ? NEXT_PUBLIC_CHAIN_PAGE_CLIENT_ID
-              : undefined,
+              : props.pageType === "bridge-iframe"
+                ? NEXT_PUBLIC_BRIDGE_IFRAME_CLIENT_ID
+                : undefined,
       secretKey: undefined,
       teamId: undefined,
     });

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

@@ -41,3 +41,6 @@ export const NEXT_PUBLIC_CHAIN_PAGE_CLIENT_ID =
 
 export const NEXT_PUBLIC_ASSET_PAGE_CLIENT_ID =
   process.env.NEXT_PUBLIC_ASSET_PAGE_CLIENT_ID;
+
+export const NEXT_PUBLIC_BRIDGE_IFRAME_CLIENT_ID =
+  process.env.NEXT_PUBLIC_BRIDGE_IFRAME_CLIENT_ID;

apps/dashboard/src/app/(app)/(dashboard)/tokens/page.tsx

@@ -3,7 +3,7 @@ import type { Metadata } from "next";
 import { unstable_cache } from "next/cache";
 import { Bridge } from "thirdweb";
 import { serverThirdwebClient } from "@/constants/thirdweb-client.server";
-import { bridgeStats } from "../../../bridge/data";
+import { bridgeStats } from "../../../bridge/(general)/data";
 import { PageHeader } from "./components/header";
 import { TokenPage } from "./components/token-page";
 

apps/dashboard/src/app/(app)/providers.tsx

@@ -1,7 +1,6 @@
 "use client";
 
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
-import { usePathname } from "next/navigation";
 import { ThemeProvider } from "next-themes";
 import { NuqsAdapter } from "nuqs/adapters/next/app";
 import { useEffect, useMemo } from "react";
@@ -25,9 +24,6 @@ export function AppRouterProviders(props: {
   children: React.ReactNode;
   autoConnect: boolean;
 }) {
-  // get the current pathname
-  const pathname = usePathname();
-
   return (
     <NuqsAdapter>
       <QueryClientProvider client={queryClient}>
@@ -40,9 +36,6 @@ export function AppRouterProviders(props: {
             defaultTheme="dark"
             disableTransitionOnChange
             enableSystem={false}
-            forcedTheme={
-              pathname.startsWith("/get-started") ? "dark" : undefined
-            }
           >
             <Toaster richColors />
             <SanctionedAddressesChecker>