Feature: New UB Components (#7354)

Co-authored-by: Joaquim Verges <[email protected]>

Author: gregfromstl

.changeset/calm-suits-stare.md

@@ -0,0 +1,78 @@
+---
+"thirdweb": minor
+---
+
+Adds new components BuyWidget, CheckoutWidget, and TransactionWidget
+
+## BuyWidget
+A component that allows users to purchase tokens or NFTs directly within your application.
+
+### Example:
+```tsx
+import { BuyWidget } from "thirdweb/react";
+
+function App() {
+  return (
+    <BuyWidget
+      client={client}
+      chain={chain}
+      tokenAddress="0x..." // Token or NFT contract address
+      recipient="0x..." // Optional: recipient address
+      theme="light" // Optional: "light" or "dark"
+    />
+  );
+}
+```
+
+## CheckoutWidget
+A comprehensive checkout experience for purchasing digital assets with multiple payment options.
+
+### Example:
+```tsx
+import { CheckoutWidget } from "thirdweb/react";
+
+function App() {
+  return (
+    <CheckoutWidget
+      client={client}
+      chain={chain}
+      items={[
+        {
+          tokenAddress: "0x...",
+          tokenId: "1", // For NFTs
+          quantity: "1"
+        }
+      ]}
+      onSuccess={(result) => console.log("Purchase successful:", result)}
+      theme="dark" // Optional: "light" or "dark"
+    />
+  );
+}
+```
+
+## TransactionWidget
+A widget for executing arbitrary blockchain transactions with a user-friendly interface.
+
+### Example:
+```tsx
+import { TransactionWidget } from "thirdweb/react";
+import { prepareContractCall } from "thirdweb";
+
+function App() {
+  const transaction = prepareContractCall({
+    contract: myContract,
+    method: "transfer",
+    params: [recipientAddress, amount]
+  });
+
+  return (
+    <TransactionWidget
+      client={client}
+      transaction={transaction}
+      onSuccess={(result) => console.log("Transaction successful:", result)}
+      onError={(error) => console.error("Transaction failed:", error)}
+      theme="light" // Optional: "light" or "dark"
+    />
+  );
+}
+```

AGENTS.md

@@ -20,6 +20,7 @@ Welcome, AI copilots! This guide captures the coding standards, architectural de
 - Biome governs formatting and linting; its rules live in biome.json.
 - Run pnpm biome check --apply before committing.
 - Avoid editor‑specific configs; rely on the shared settings.
+- make sure everything builds after each file change by running `pnpm build`
 
 ⸻
 
@@ -39,7 +40,8 @@ Welcome, AI copilots! This guide captures the coding standards, architectural de
 - Co‑locate tests: foo.ts ↔ foo.test.ts.
 - Use real function invocations with stub data; avoid brittle mocks.
 - For network interactions, use Mock Service Worker (MSW) to intercept fetch/HTTP calls, mocking only scenarios that are hard to reproduce.
-- Keep tests deterministic and side‑effect free; Jest is pre‑configured.
+- Keep tests deterministic and side‑effect free; Vitest is pre‑configured.
+- to run the tests: `cd packages thirdweb & pnpm test:dev <filename>`
 
 ⸻
 

apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/(chainPage)/components/client/PayModal.tsx

@@ -42,7 +42,8 @@ export function PayModalButton(props: {
           theme={getSDKTheme(theme === "dark" ? "dark" : "light")}
           className="!w-auto"
           payOptions={{
-            onPurchaseSuccess(info) {
+            // biome-ignore lint/suspicious/noExplicitAny: false positive
+            onPurchaseSuccess(info: any) {
               if (
                 info.type === "crypto" &&
                 info.status.status !== "NOT_FOUND"

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

@@ -123,7 +123,7 @@ function UBFooter() {
             href: "https://playground.thirdweb.com/connect/pay/fund-wallet",
           },
           {
-            label: "Commerce",
+            label: "Checkout",
             href: "https://playground.thirdweb.com/connect/pay/commerce",
           },
           {

apps/dashboard/src/app/pay/components/client/PayPageEmbed.client.tsx

@@ -63,7 +63,7 @@ export function PayPageEmbed({
           onPurchaseSuccess: (result) => {
             if (!redirectUri) return;
             const url = new URL(redirectUri);
-            switch (result.type) {
+            switch (result?.type) {
               case "crypto": {
                 url.searchParams.set("status", result.status.status);
                 if (

apps/dashboard/src/components/buttons/MismatchButton.tsx

@@ -293,7 +293,7 @@ export const MismatchButton = forwardRef<
                 payOptions={{
                   onPurchaseSuccess(info) {
                     if (
-                      info.type === "crypto" &&
+                      info?.type === "crypto" &&
                       info.status.status !== "NOT_FOUND"
                     ) {
                       trackEvent({
@@ -308,7 +308,7 @@ export const MismatchButton = forwardRef<
                     }
 
                     if (
-                      info.type === "fiat" &&
+                      info?.type === "fiat" &&
                       info.status.status !== "NOT_FOUND"
                     ) {
                       trackEvent({

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

@@ -7,7 +7,7 @@ import type { Metadata } from "next";
 
 export const metadata: Metadata = {
   metadataBase,
-  title: "Integrate Fiat & Cross-Chain Crypto Payments | thirdweb Pay",
+  title: "Integrate Fiat & Cross-Chain Crypto Payments | Universal Bridge",
   description:
     "The easiest way for users to transact in your app. Onramp users in clicks and generate revenue for each user transaction. Integrate for free.",
 };
@@ -34,7 +34,7 @@ function BuyMerch() {
   return (
     <CodeExample
       header={{
-        title: "Commerce",
+        title: "Checkout",
         description: (
           <>
             Take payments from Fiat or Crypto directly to your seller wallet.
@@ -46,28 +46,22 @@ function BuyMerch() {
         ),
       }}
       preview={<BuyMerchPreview />}
-      code={`import { PayEmbed, getDefaultToken } from "thirdweb/react";
+      code={`import { CheckoutWidget, getDefaultToken } from "thirdweb/react";
           import { base } from "thirdweb/chains";
 
         function App() {
           return (
-            <PayEmbed
-              client={client}
-              theme={"light"}
-              payOptions={{
-                mode: "direct_payment",
-                paymentInfo: {
-                  amount: "35",
-                  chain: base,
-                  token: getDefaultToken(base, "USDC"),
-                  sellerAddress: "0xEb0effdFB4dC5b3d5d3aC6ce29F3ED213E95d675",
-                },
-                metadata: {
-                  name: "Black Hoodie (Size L)",
-                  image: "/drip-hoodie.png",
-                },
-              }}
-            />
+      <CheckoutWidget
+        client={THIRDWEB_CLIENT}
+        theme="light"
+        chain={base}
+        amount={toUnits("2", 6)}
+        tokenAddress="0x833589fCD6eDb6E08f4c7C32D4f71b54bdA02913"
+        seller="0xEb0effdFB4dC5b3d5d3aC6ce29F3ED213E95d675"
+        feePayer="seller"
+        name="Black Hoodie"
+        description="Size L | Ships worldwide."
+      />
           );
         };`}
       lang="tsx"