Feat: tokenAddress and amount bridge params (#7176)

Signed-off-by: greg <gregfromstl@gmail.com>
Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>

Author: gregfromstl

apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/connect/universal-bridge/webhooks/components/webhooks.client.tsx

@@ -111,8 +111,8 @@ export function PayWebhooksPage(props: PayWebhooksPageProps) {
               <TableHead>Label</TableHead>
               <TableHead>Url</TableHead>
               <TableHead>Created</TableHead>
-              <TableHead>Version</TableHead>
-              <TableHead>Delete</TableHead>
+              <TableHead className="text-center">Version</TableHead>
+              <TableHead className="text-center">Delete</TableHead>
             </TableRow>
           </TableHeader>
           <TableBody>
@@ -123,8 +123,10 @@ export function PayWebhooksPage(props: PayWebhooksPageProps) {
                 <TableCell>
                   {formatDistanceToNow(webhook.createdAt, { addSuffix: true })}
                 </TableCell>
-                <TableCell>{webhook.version || "v1"}</TableCell>
-                <TableCell className="text-right">
+                <TableCell className="text-center">
+                  {webhook.version || "1"}
+                </TableCell>
+                <TableCell className="text-center">
                   <DeleteWebhookButton
                     clientId={props.clientId}
                     teamId={props.teamId}

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,45 @@ 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;
+
+  let symbol: string | undefined;
+  let decimals: number | undefined;
+  let tokenName: string | undefined;
+
+  if (chainId && tokenAddress) {
+    try {
+      const metadata = await getCurrencyMetadata({
+        contract: getContract({
+          client: bridgeAppThirdwebClient,
+          // eslint-disable-next-line no-restricted-syntax
+          chain: defineChain(Number(chainId)),
+          address: tokenAddress as Address,
+        }),
+      });
+      ({ symbol, decimals, name: tokenName } = metadata);
+    } catch (error) {
+      console.warn("Failed to fetch token metadata:", error);
+      // Continue with undefined values; the component should handle gracefully
+    }
+  }
+
   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 */}