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 { StyledBuyEmbedPreview } from "@/components/universal-bridge/buy";
 import { metadataBase } from "@/lib/constants";
 import type { Metadata } from "next";
 
@@ -35,7 +35,7 @@ function StyledPayEmbed() {
   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={<StyledBuyEmbedPreview />}
       code={`\
-import { PayEmbed } from "thirdweb/react";
+import { BuyEmbed } 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.
-      }}
-    />
+      <BuyEmbed
+        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 { BuyEmbed } from "thirdweb/react";
+
+export function StyledBuyEmbedPreview() {
+  const { theme } = useTheme();
+
+  return (
+    <div className="flex flex-col items-center justify-center">
+      <div className="h-10" />
+      <BuyEmbed
+        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 {
+  BuyEmbed,
+  type BuyEmbedProps,
+} from "../react/web/ui/BuyEmbed.js";
 export {
   PayEmbed,
   type PayEmbedProps,