feat: use BuyWidget in bridge page

Author: gregfromstl

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

@@ -1,19 +1,31 @@
 "use client";
 
 import { useTheme } from "next-themes";
-import { PayEmbed, type TokenInfo } from "thirdweb/react";
+import { BuyWidget, PayEmbed, type TokenInfo } from "thirdweb/react";
 import { getSDKTheme } from "../../../(app)/components/sdk-component-theme";
 import { useV5DashboardChain } from "../../../../lib/v5-adapter";
 import { bridgeAppThirdwebClient } from "../../constants";
+import type { Address } from "thirdweb";
 
 export function UniversalBridgeEmbed({
   chainId,
   token,
   amount,
-}: { chainId?: number; token: TokenInfo | undefined; amount: string }) {
+}: { chainId?: number; token: TokenInfo | undefined; amount?: string }) {
   const { theme } = useTheme();
   const chain = useV5DashboardChain(chainId || 1);
 
+  if (chainId && token) {
+    return (
+      <BuyWidget
+        client={bridgeAppThirdwebClient}
+        chain={chain}
+        tokenAddress={token.address as Address}
+        amount={amount ?? "1"}
+      />
+    );
+  }
+
   return (
     <PayEmbed
       client={bridgeAppThirdwebClient}

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

@@ -54,13 +54,13 @@ export default async function BridgePage({
           token={
             symbol && decimals && tokenName
               ? {
-                  address: tokenAddress as Address,
-                  name: tokenName,
-                  symbol,
-                }
+                address: tokenAddress as Address,
+                name: tokenName,
+                symbol,
+              }
               : undefined
           }
-          amount={(amount || "0.01") as string}
+          amount={amount as string}
         />
       </main>
 

apps/playground-web/src/app/connect/sign-in/button/RightSection.tsx

@@ -5,6 +5,7 @@ import { useEffect, useState } from "react";
 import {
   arbitrumSepolia,
   baseSepolia,
+  defineChain,
   optimismSepolia,
   sepolia,
 } from "thirdweb/chains";
@@ -89,11 +90,11 @@ export function RightSection(props: {
   const themeObj =
     connectOptions.theme.type === "dark"
       ? darkTheme({
-          colors: connectOptions.theme.darkColorOverrides,
-        })
+        colors: connectOptions.theme.darkColorOverrides,
+      })
       : lightTheme({
-          colors: connectOptions.theme.lightColorOverrides,
-        });
+        colors: connectOptions.theme.lightColorOverrides,
+      });
 
   useEffect(() => {
     if (!connectOptions.enableAuth) {
@@ -119,15 +120,21 @@ export function RightSection(props: {
         showThirdwebBranding: connectOptions.ShowThirdwebBranding,
         requireApproval: connectOptions.requireApproval,
       }}
-      chains={[sepolia, baseSepolia, optimismSepolia, arbitrumSepolia]}
+      chains={[
+        defineChain(578),
+        sepolia,
+        baseSepolia,
+        optimismSepolia,
+        arbitrumSepolia,
+      ]}
       wallets={wallets}
       auth={connectOptions.enableAuth ? playgroundAuth : undefined}
       accountAbstraction={
         connectOptions.enableAccountAbstraction
           ? {
-              chain: sepolia,
-              sponsorGas: true,
-            }
+            chain: sepolia,
+            sponsorGas: true,
+          }
           : undefined
       }
     />
@@ -185,9 +192,9 @@ export function RightSection(props: {
                 accountAbstraction={
                   connectOptions.enableAccountAbstraction
                     ? {
-                        chain: sepolia,
-                        sponsorGas: true,
-                      }
+                      chain: sepolia,
+                      sponsorGas: true,
+                    }
                     : undefined
                 }
                 termsOfServiceUrl={connectOptions.termsOfServiceLink}