WIP brige embed (#7222)

Co-authored-by: gregfromstl <[email protected]>

Author: joaquim-verges

.changeset/icy-eyes-show.md

@@ -0,0 +1,5 @@
+---
+"thirdweb": minor
+---
+
+Updates PayEmbed with refreshed UI and multi-step support

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

@@ -44,8 +44,8 @@ export function PayModalButton(props: {
           payOptions={{
             onPurchaseSuccess(info) {
               if (
-                info.type === "crypto" &&
-                info.status.status !== "NOT_FOUND"
+                info?.type === "crypto" &&
+                info?.status.status !== "NOT_FOUND"
               ) {
                 trackEvent({
                   category: "pay",
@@ -58,7 +58,7 @@ export function PayModalButton(props: {
                 });
               }
 
-              if (info.type === "fiat" && info.status.status !== "NOT_FOUND") {
+              if (info?.type === "fiat" && info.status.status !== "NOT_FOUND") {
                 trackEvent({
                   category: "pay",
                   action: "buy",

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

@@ -63,7 +63,8 @@ function BuyMerch() {
                   sellerAddress: "0xEb0effdFB4dC5b3d5d3aC6ce29F3ED213E95d675",
                 },
                 metadata: {
-                  name: "Black Hoodie (Size L)",
+                  name: "Black Hoodie",
+                  description: "Size L. Ships worldwide.",
                   image: "/drip-hoodie.png",
                 },
               }}

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

@@ -12,6 +12,7 @@ export type PayEmbedPlaygroundOptions = {
     mode?: "fund_wallet" | "direct_payment" | "transaction";
     title: string | undefined;
     image: string | undefined;
+    description: string | undefined;
 
     // fund_wallet mode options
     buyTokenAddress: string | undefined;

apps/playground-web/src/app/connect/pay/embed/LeftSection.tsx

@@ -496,6 +496,26 @@ export function LeftSection(props: {
               />
             </div>
           </div>
+
+          {/* Modal description */}
+          <div className="flex flex-col gap-2">
+            <Label htmlFor="modal-description">Image</Label>
+            <Input
+              id="modal-description"
+              placeholder="Your own description here"
+              className="bg-card"
+              value={options.payOptions.description}
+              onChange={(e) =>
+                setOptions((v) => ({
+                  ...v,
+                  payOptions: {
+                    ...payOptions,
+                    description: e.target.value,
+                  },
+                }))
+              }
+            />
+          </div>
         </div>
       </CollapsibleSection>
 

apps/playground-web/src/app/connect/pay/embed/RightSection.tsx

@@ -70,15 +70,19 @@ export function RightSection(props: {
             (props.options.payOptions.mode === "transaction"
               ? "Transaction"
               : props.options.payOptions.mode === "direct_payment"
-                ? "Purchase"
+                ? "Product Name"
                 : "Buy Crypto"),
+          description:
+            props.options.payOptions.description || "Your own description here",
           image:
             props.options.payOptions.image ||
-            `https://placehold.co/600x400/${
-              props.options.theme.type === "dark"
-                ? "1d1d23/7c7a85"
-                : "f2eff3/6f6d78"
-            }?text=Your%20Product%20Here&font=roboto`,
+            props.options.payOptions.mode === "direct_payment"
+              ? `https://placehold.co/600x400/${
+                  props.options.theme.type === "dark"
+                    ? "1d1d23/7c7a85"
+                    : "f2eff3/6f6d78"
+                }?text=Your%20Product%20Here&font=roboto`
+              : undefined,
         },
 
         // Mode-specific options

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

@@ -17,6 +17,7 @@ const defaultConnectOptions: PayEmbedPlaygroundOptions = {
     mode: "fund_wallet",
     title: "",
     image: "",
+    description: "",
     buyTokenAddress: NATIVE_TOKEN_ADDRESS,
     buyTokenAmount: "0.01",
     buyTokenChain: base,