feat: adds token and amount query params to bridge page

Author: gregfromstl

apps/dashboard/src/app/bridge/components/client/UniversalBridgeEmbed.tsx

@@ -1,12 +1,16 @@
 "use client";
 
 import { useTheme } from "next-themes";
-import { PayEmbed } from "thirdweb/react";
+import { PayEmbed, type TokenInfo } from "thirdweb/react";
 import { getSDKTheme } from "../../../(app)/components/sdk-component-theme";
 import { useV5DashboardChain } from "../../../../lib/v5-adapter";
 import { bridgeAppThirdwebClient } from "../../constants";
 
-export function UniversalBridgeEmbed({ chainId }: { chainId?: number }) {
+export function UniversalBridgeEmbed({
+  chainId,
+  token,
+  amount,
+}: { chainId?: number; token: TokenInfo | undefined; amount: string }) {
   const { theme } = useTheme();
   const chain = useV5DashboardChain(chainId || 1);
 
@@ -17,7 +21,8 @@ export function UniversalBridgeEmbed({ chainId }: { chainId?: number }) {
         mode: "fund_wallet",
         prefillBuy: {
           chain,
-          amount: "0.01",
+          token,
+          amount,
         },
       }}
       theme={getSDKTheme(theme === "light" ? "light" : "dark")}

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

@@ -1,6 +1,11 @@
 import { ArrowUpRightIcon } from "lucide-react";
 import type { Metadata } from "next";
+import type { Address } from "thirdweb";
+import { defineChain } from "thirdweb/chains";
+import { getContract } from "thirdweb/contract";
+import { getCurrencyMetadata } from "thirdweb/extensions/erc20";
 import { UniversalBridgeEmbed } from "./components/client/UniversalBridgeEmbed";
+import { bridgeAppThirdwebClient } from "./constants";
 
 const title = "Universal Bridge: Swap, Bridge, and Onramp";
 const description =
@@ -18,11 +23,39 @@ export const metadata: Metadata = {
 export default async function BridgePage({
   searchParams,
 }: { searchParams: Promise<Record<string, string | string[]>> }) {
-  const { chainId } = await searchParams;
+  const { chainId, tokenAddress, amount } = await searchParams;
+
+  const {
+    symbol,
+    decimals,
+    name: tokenName,
+  } = chainId && tokenAddress
+    ? await getCurrencyMetadata({
+        contract: getContract({
+          client: bridgeAppThirdwebClient,
+          // eslint-disable-next-line no-restricted-syntax
+          chain: defineChain(Number(chainId)),
+          address: tokenAddress as Address,
+        }),
+      })
+    : {};
+
   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} />
+        <UniversalBridgeEmbed
+          chainId={chainId ? Number(chainId) : undefined}
+          token={
+            symbol && decimals && tokenName
+              ? {
+                  address: tokenAddress as Address,
+                  name: tokenName,
+                  symbol,
+                }
+              : undefined
+          }
+          amount={(amount || "0.01") as string}
+        />
       </main>
 
       {/* eslint-disable-next-line @next/next/no-img-element */}