WIP brige embed

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)/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.
@@ -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"

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

@@ -1,43 +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;
-  };
 };