From ca89bb73e3b5f5eb516b314d2fea365061056438 Mon Sep 17 00:00:00 2001
From: gregfromstl <gregfromstl@gmail.com>
Date: Mon, 14 Apr 2025 15:27:43 -0700
Subject: [PATCH] feat: bridge UI

---
 .../client/UniversalBridgeEmbed.tsx           | 25 +++++++++++++
 .../app/(dashboard)/(bridge)/bridge/page.tsx  | 35 +++++++++++++++++++
 2 files changed, 60 insertions(+)
 create mode 100644 apps/dashboard/src/app/(dashboard)/(bridge)/bridge/components/client/UniversalBridgeEmbed.tsx
 create mode 100644 apps/dashboard/src/app/(dashboard)/(bridge)/bridge/page.tsx

diff --git a/apps/dashboard/src/app/(dashboard)/(bridge)/bridge/components/client/UniversalBridgeEmbed.tsx b/apps/dashboard/src/app/(dashboard)/(bridge)/bridge/components/client/UniversalBridgeEmbed.tsx
new file mode 100644
index 00000000000..ccc20d1cc5f
--- /dev/null
+++ b/apps/dashboard/src/app/(dashboard)/(bridge)/bridge/components/client/UniversalBridgeEmbed.tsx
@@ -0,0 +1,25 @@
+"use client";
+import { getThirdwebClient } from "@/constants/thirdweb.server";
+import { getSDKTheme } from "app/components/sdk-component-theme";
+import { useV5DashboardChain } from "lib/v5-adapter";
+import { useTheme } from "next-themes";
+import { PayEmbed } from "thirdweb/react";
+
+export function UniversalBridgeEmbed({ chainId }: { chainId?: number }) {
+  const { theme } = useTheme();
+  const chain = useV5DashboardChain(chainId || 1);
+
+  return (
+    <PayEmbed
+      client={getThirdwebClient()}
+      payOptions={{
+        mode: "fund_wallet",
+        prefillBuy: {
+          chain,
+          amount: "0.01",
+        },
+      }}
+      theme={getSDKTheme(theme === "light" ? "light" : "dark")}
+    />
+  );
+}
diff --git a/apps/dashboard/src/app/(dashboard)/(bridge)/bridge/page.tsx b/apps/dashboard/src/app/(dashboard)/(bridge)/bridge/page.tsx
new file mode 100644
index 00000000000..59854a87f13
--- /dev/null
+++ b/apps/dashboard/src/app/(dashboard)/(bridge)/bridge/page.tsx
@@ -0,0 +1,35 @@
+import type { Metadata } from "next";
+import { UniversalBridgeEmbed } from "./components/client/UniversalBridgeEmbed";
+
+const title = "Universal Bridge: Swap, Bridge, and On-Ramp";
+const description =
+  "Swap, bridge, and on-ramp to any EVM chain with thirdweb's Universal Bridge.";
+
+export const metadata: Metadata = {
+  title,
+  description,
+  openGraph: {
+    title,
+    description,
+  },
+};
+
+export default async function RoutesPage({
+  searchParams,
+}: { searchParams: Record<string, string | string[]> }) {
+  const { chainId } = searchParams;
+  return (
+    <div className="relative mx-auto flex h-screen w-full flex-col items-center justify-center overflow-hidden border py-10">
+      <main className="container z-10 flex justify-center">
+        <UniversalBridgeEmbed chainId={chainId ? Number(chainId) : undefined} />
+      </main>
+
+      {/* eslint-disable-next-line @next/next/no-img-element */}
+      <img
+        alt=""
+        src="/assets/login/background.svg"
+        className="-bottom-12 -right-12 pointer-events-none absolute lg:right-0 lg:bottom-0"
+      />
+    </div>
+  );
+}