feat: adds BuyEmbed

Author: gregfromstl

apps/playground-web/src/app/connect/pay/fund-wallet/page.tsx

@@ -1,7 +1,7 @@
 import { PageLayout } from "@/components/blocks/APIHeader";
 import { CodeExample } from "@/components/code/code-example";
-import { StyledPayEmbedPreview } from "@/components/pay/embed";
 import ThirdwebProvider from "@/components/thirdweb-provider";
+import { StyledBuyWidgetPreview } from "@/components/universal-bridge/buy";
 import { metadataBase } from "@/lib/constants";
 import type { Metadata } from "next";
 
@@ -25,17 +25,17 @@ export default function Page() {
         }
         docsLink="https://portal.thirdweb.com/connect/pay/get-started?utm_source=playground"
       >
-        <StyledPayEmbed />
+        <StyledPayWidget />
       </PageLayout>
     </ThirdwebProvider>
   );
 }
 
-function StyledPayEmbed() {
+function StyledPayWidget() {
   return (
     <CodeExample
       header={{
-        title: " Buy Crypto",
+        title: "Buy Crypto",
         description: (
           <>
             Inline component that allows users to buy any currency.
@@ -44,26 +44,19 @@ function StyledPayEmbed() {
           </>
         ),
       }}
-      preview={<StyledPayEmbedPreview />}
+      preview={<StyledBuyWidgetPreview />}
       code={`\
-import { PayEmbed } from "thirdweb/react";
+import { BuyWidget } from "thirdweb/react";
 
 function App() {
   return (
-    <PayEmbed
-      client={client}
-      payOptions={{
-        mode: "fund_wallet",
-        metadata: {
-          name: "Get funds",
-        },
-        prefillBuy: {
-          chain: base,
-          amount: "0.01",
-        },
-        // ... theme, currency, amounts, payment methods, etc.
-      }}
-    />
+      <BuyWidget
+        client={THIRDWEB_CLIENT}
+        title="Get Funds"
+        tokenAddress={NATIVE_TOKEN_ADDRESS}
+        chain={arbitrum}
+        amount={toWei("0.002")}
+      />
   );
 }`}
       lang="tsx"

apps/playground-web/src/components/universal-bridge/buy.tsx

@@ -0,0 +1,25 @@
+"use client";
+
+import { THIRDWEB_CLIENT } from "@/lib/client";
+import { useTheme } from "next-themes";
+import { NATIVE_TOKEN_ADDRESS, toWei } from "thirdweb";
+import { arbitrum } from "thirdweb/chains";
+import { BuyWidget } from "thirdweb/react";
+
+export function StyledBuyWidgetPreview() {
+  const { theme } = useTheme();
+
+  return (
+    <div className="flex flex-col items-center justify-center">
+      <div className="h-10" />
+      <BuyWidget
+        client={THIRDWEB_CLIENT}
+        theme={theme === "light" ? "light" : "dark"}
+        title="Get Funds"
+        tokenAddress={NATIVE_TOKEN_ADDRESS}
+        chain={arbitrum}
+        amount={toWei("0.002")}
+      />
+    </div>
+  );
+}

packages/thirdweb/src/exports/react.ts

@@ -130,6 +130,10 @@ export type { AutoConnectProps } from "../wallets/connection/types.js";
 // auth
 export type { SiweAuthOptions } from "../react/core/hooks/auth/useSiweAuth.js";
 
+export {
+  BuyWidget,
+  type BuyWidgetProps,
+} from "../react/web/ui/Bridge/BuyWidget.js";
 export {
   PayEmbed,
   type PayEmbedProps,

packages/thirdweb/src/react/web/ui/Bridge/BridgeOrchestrator.tsx

@@ -40,20 +40,20 @@ export type UIOptions = Prettify<
     };
   } & (
     | {
-      mode: "fund_wallet";
-      destinationToken: Token;
-      initialAmount?: string;
-      presetOptions?: [number, number, number];
-    }
+        mode: "fund_wallet";
+        destinationToken: Token;
+        initialAmount?: string;
+        presetOptions?: [number, number, number];
+      }
     | {
-      mode: "direct_payment";
-      paymentInfo: {
-        sellerAddress: Address;
-        token: Token;
-        amount: string;
-        feePayer?: "sender" | "receiver";
-      };
-    }
+        mode: "direct_payment";
+        paymentInfo: {
+          sellerAddress: Address;
+          token: Token;
+          amount: string;
+          feePayer?: "sender" | "receiver";
+        };
+      }
     | { mode: "transaction"; transaction: PreparedTransaction }
   )
 >;
@@ -67,7 +67,7 @@ export interface BridgeOrchestratorProps {
   /**
    * The receiver address, defaults to the connected wallet address
    */
-  receiverAddress?: Address;
+  receiverAddress: Address | undefined;
 
   /**
    * ThirdwebClient for blockchain interactions
@@ -77,42 +77,42 @@ export interface BridgeOrchestratorProps {
   /**
    * Called when the flow is completed successfully
    */
-  onComplete?: () => void;
+  onComplete: () => void;
 
   /**
    * Called when the flow encounters an error
    */
-  onError?: (error: Error) => void;
+  onError: (error: Error) => void;
 
   /**
    * Called when the user cancels the flow
    */
-  onCancel?: () => void;
+  onCancel: () => void;
 
   /**
    * Connect options for wallet connection
    */
-  connectOptions?: PayEmbedConnectOptions;
+  connectOptions: PayEmbedConnectOptions | undefined;
 
   /**
    * Locale for connect UI
    */
-  connectLocale?: ConnectLocale;
+  connectLocale: ConnectLocale | undefined;
 
   /**
    * Optional purchase data for the payment
    */
-  purchaseData?: object;
+  purchaseData: object | undefined;
 
   /**
    * Optional payment link ID for the payment
    */
-  paymentLinkId?: string;
+  paymentLinkId: string | undefined;
 
   /**
    * Quick buy amounts
    */
-  presetOptions?: [number, number, number];
+  presetOptions: [number, number, number] | undefined;
 }
 
 export function BridgeOrchestrator({