feat: TransactionWidget

Author: gregfromstl

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/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.
@@ -60,7 +60,7 @@ function BuyMerch() {
         seller="0xEb0effdFB4dC5b3d5d3aC6ce29F3ED213E95d675"
         feePayer="seller"
         name="Black Hoodie"
-        description="Size L. Ships worldwide."
+        description="Size L | Ships worldwide."
       />
           );
         };`}

apps/playground-web/src/app/connect/pay/components/types.ts

@@ -1,44 +1,26 @@
-import type { Chain } from "thirdweb";
-import type { LocaleId, ThemeOverrides, TokenInfo } from "thirdweb/react";
-import type { WalletId } from "thirdweb/wallets";
+import type { Address, Chain } from "thirdweb";
+import type { ThemeOverrides } from "thirdweb/react";
 
-export type PayEmbedPlaygroundOptions = {
+export type BridgeComponentsPlaygroundOptions = {
   theme: {
     type: "dark" | "light";
     darkColorOverrides: ThemeOverrides["colors"];
     lightColorOverrides: ThemeOverrides["colors"];
   };
   payOptions: {
-    mode?: "fund_wallet" | "direct_payment" | "transaction";
+    widget?: "buy" | "checkout" | "transaction";
     title: string | undefined;
     image: string | undefined;
     description: string | undefined;
 
-    // fund_wallet mode options
-    buyTokenAddress: string | undefined;
-    buyTokenAmount: string | undefined;
-    buyTokenChain: Chain | undefined;
-    buyTokenInfo?: TokenInfo;
-    buyWithCrypto?: boolean;
-    buyWithFiat?: boolean;
+    buyTokenAddress: Address;
+    buyTokenAmount: string;
+    buyTokenChain: Chain;
 
     // direct_payment mode options
-    sellerAddress?: string;
+    sellerAddress: Address;
 
     // transaction mode options
     transactionData?: string; // Simplified for demo; could be more complex in real implementation
   };
-  connectOptions: {
-    walletIds: WalletId[];
-    modalTitle: string | undefined;
-    modalTitleIcon: string | undefined;
-    localeId: LocaleId;
-    enableAuth: boolean;
-    enableAccountAbstraction: boolean;
-    termsOfServiceLink: string | undefined;
-    privacyPolicyLink: string | undefined;
-    buttonLabel: string | undefined;
-    ShowThirdwebBranding: boolean;
-    requireApproval: boolean;
-  };
 };