thirdweb 5.102.7-nightly-3f747601135809eedf86a150752f4b5f12c99776-20250617000426 → 5.103.0

package/src/react/core/machines/paymentMachine.ts

@@ -0,0 +1,290 @@
+import { useCallback, useState } from "react";
+import type { Token } from "../../../bridge/types/Token.js";
+import type { Address } from "../../../utils/address.js";
+import type { AsyncStorage } from "../../../utils/storage/AsyncStorage.js";
+import type { Wallet } from "../../../wallets/interfaces/wallet.js";
+import type { WindowAdapter } from "../adapters/WindowAdapter.js";
+import type {
+  BridgePrepareRequest,
+  BridgePrepareResult,
+} from "../hooks/useBridgePrepare.js";
+import type { CompletedStatusResult } from "../hooks/useStepExecutor.js";
+
+/**
+ * Payment modes supported by BridgeEmbed
+ */
+type PaymentMode = "fund_wallet" | "direct_payment" | "transaction";
+
+/**
+ * Payment method types with their required data
+ */
+export type PaymentMethod =
+  | {
+      type: "wallet";
+      payerWallet: Wallet;
+      originToken: Token;
+      balance: bigint;
+    }
+  | {
+      type: "fiat";
+      payerWallet: Wallet;
+      currency: string;
+      onramp: "stripe" | "coinbase" | "transak";
+    };
+
+/**
+ * Payment machine context - holds all flow state data
+ */
+export interface PaymentMachineContext {
+  // Flow configuration
+  mode: PaymentMode;
+
+  // Target requirements (resolved in init state)
+  destinationAmount?: string;
+  destinationToken?: Token;
+  receiverAddress?: Address;
+
+  // User selections (set in methodSelection state)
+  selectedPaymentMethod?: PaymentMethod;
+
+  // Prepared quote data (set in quote state)
+  quote?: BridgePrepareResult;
+  request?: BridgePrepareRequest;
+
+  // Execution results (set in execute state on completion)
+  completedStatuses?: CompletedStatusResult[];
+
+  // Error handling
+  currentError?: Error;
+  retryState?: PaymentMachineState; // State to retry from
+
+  // Dependency injection
+  adapters: {
+    window: WindowAdapter;
+    storage: AsyncStorage;
+  };
+}
+
+/**
+ * Events that can be sent to the payment machine
+ */
+type PaymentMachineEvent =
+  | {
+      type: "DESTINATION_CONFIRMED";
+      destinationToken: Token;
+      destinationAmount: string;
+      receiverAddress: Address;
+    }
+  | { type: "PAYMENT_METHOD_SELECTED"; paymentMethod: PaymentMethod }
+  | {
+      type: "QUOTE_RECEIVED";
+      quote: BridgePrepareResult;
+      request: BridgePrepareRequest;
+    }
+  | { type: "ROUTE_CONFIRMED" }
+  | { type: "EXECUTION_COMPLETE"; completedStatuses: CompletedStatusResult[] }
+  | { type: "ERROR_OCCURRED"; error: Error }
+  | { type: "CONTINUE_TO_TRANSACTION" }
+  | { type: "RETRY" }
+  | { type: "RESET" }
+  | { type: "BACK" };
+
+type PaymentMachineState =
+  | "init"
+  | "methodSelection"
+  | "quote"
+  | "preview"
+  | "execute"
+  | "success"
+  | "post-buy-transaction"
+  | "error";
+
+/**
+ * Hook to create and use the payment machine
+ */
+export function usePaymentMachine(
+  adapters: PaymentMachineContext["adapters"],
+  mode: PaymentMode = "fund_wallet",
+) {
+  const [currentState, setCurrentState] = useState<PaymentMachineState>("init");
+  const [context, setContext] = useState<PaymentMachineContext>({
+    mode,
+    adapters,
+  });
+
+  const send = useCallback(
+    (event: PaymentMachineEvent) => {
+      setCurrentState((state) => {
+        setContext((ctx) => {
+          switch (state) {
+            case "init":
+              if (event.type === "DESTINATION_CONFIRMED") {
+                return {
+                  ...ctx,
+                  destinationToken: event.destinationToken,
+                  destinationAmount: event.destinationAmount,
+                  receiverAddress: event.receiverAddress,
+                };
+              } else if (event.type === "ERROR_OCCURRED") {
+                return {
+                  ...ctx,
+                  currentError: event.error,
+                  retryState: "init",
+                };
+              }
+              break;
+
+            case "methodSelection":
+              if (event.type === "PAYMENT_METHOD_SELECTED") {
+                return {
+                  ...ctx,
+                  quote: undefined, // reset quote when method changes
+                  selectedPaymentMethod: event.paymentMethod,
+                };
+              } else if (event.type === "ERROR_OCCURRED") {
+                return {
+                  ...ctx,
+                  currentError: event.error,
+                  retryState: "methodSelection",
+                };
+              }
+              break;
+
+            case "quote":
+              if (event.type === "QUOTE_RECEIVED") {
+                return {
+                  ...ctx,
+                  quote: event.quote,
+                  request: event.request,
+                };
+              } else if (event.type === "ERROR_OCCURRED") {
+                return {
+                  ...ctx,
+                  currentError: event.error,
+                  retryState: "quote",
+                };
+              }
+              break;
+
+            case "preview":
+              if (event.type === "ERROR_OCCURRED") {
+                return {
+                  ...ctx,
+                  currentError: event.error,
+                  retryState: "preview",
+                };
+              }
+              break;
+
+            case "execute":
+              if (event.type === "EXECUTION_COMPLETE") {
+                return {
+                  ...ctx,
+                  completedStatuses: event.completedStatuses,
+                };
+              } else if (event.type === "ERROR_OCCURRED") {
+                return {
+                  ...ctx,
+                  currentError: event.error,
+                  retryState: "execute",
+                };
+              }
+              break;
+
+            case "error":
+              if (event.type === "RETRY" || event.type === "RESET") {
+                return {
+                  ...ctx,
+                  currentError: undefined,
+                  retryState: undefined,
+                };
+              }
+              break;
+
+            case "success":
+              if (event.type === "RESET") {
+                return {
+                  mode: ctx.mode,
+                  adapters: ctx.adapters,
+                };
+              }
+              break;
+
+            case "post-buy-transaction":
+              if (event.type === "RESET") {
+                return {
+                  mode: ctx.mode,
+                  adapters: ctx.adapters,
+                };
+              }
+              break;
+          }
+          return ctx;
+        });
+
+        // State transitions
+        switch (state) {
+          case "init":
+            if (event.type === "DESTINATION_CONFIRMED")
+              return "methodSelection";
+            if (event.type === "ERROR_OCCURRED") return "error";
+            break;
+
+          case "methodSelection":
+            if (event.type === "PAYMENT_METHOD_SELECTED") return "quote";
+            if (event.type === "BACK") return "init";
+            if (event.type === "ERROR_OCCURRED") return "error";
+            break;
+
+          case "quote":
+            if (event.type === "QUOTE_RECEIVED") return "preview";
+            if (event.type === "BACK") return "methodSelection";
+            if (event.type === "ERROR_OCCURRED") return "error";
+            break;
+
+          case "preview":
+            if (event.type === "ROUTE_CONFIRMED") return "execute";
+            if (event.type === "BACK") return "methodSelection";
+            if (event.type === "ERROR_OCCURRED") return "error";
+            break;
+
+          case "execute":
+            if (event.type === "EXECUTION_COMPLETE") return "success";
+            if (event.type === "BACK") return "preview";
+            if (event.type === "ERROR_OCCURRED") return "error";
+            break;
+
+          case "success":
+            if (event.type === "CONTINUE_TO_TRANSACTION")
+              return "post-buy-transaction";
+            if (event.type === "RESET") return "init";
+            break;
+
+          case "post-buy-transaction":
+            if (event.type === "RESET") return "init";
+            break;
+
+          case "error":
+            if (event.type === "RETRY") {
+              return context.retryState ?? "init";
+            }
+            if (event.type === "RESET") {
+              return "init";
+            }
+            break;
+        }
+
+        return state;
+      });
+    },
+    [context.retryState],
+  );
+
+  return [
+    {
+      value: currentState,
+      context,
+    },
+    send,
+  ] as const;
+}

package/src/react/core/types/.keep

@@ -0,0 +1,2 @@
+# Placeholder file to maintain directory structure
+# This directory will contain shared type definitions and interfaces 

package/src/react/core/utils/wallet.test.ts

@@ -0,0 +1,77 @@
+import { describe, expect, it } from "vitest";
+import type { Wallet } from "../../../wallets/interfaces/wallet.js";
+import { hasSponsoredTransactionsEnabled } from "../../../wallets/smart/is-smart-wallet.js";
+
+describe("hasSponsoredTransactionsEnabled", () => {
+  it("should return false for undefined wallet", () => {
+    expect(hasSponsoredTransactionsEnabled(undefined)).toBe(false);
+  });
+
+  it("should handle smart wallet with sponsorGas config", () => {
+    const mockSmartWallet = {
+      id: "smart",
+      getConfig: () => ({ sponsorGas: true }),
+    } as Wallet;
+    expect(hasSponsoredTransactionsEnabled(mockSmartWallet)).toBe(true);
+
+    const mockSmartWalletDisabled = {
+      id: "smart",
+      getConfig: () => ({ sponsorGas: false }),
+    } as Wallet;
+    expect(hasSponsoredTransactionsEnabled(mockSmartWalletDisabled)).toBe(
+      false,
+    );
+  });
+
+  it("should handle smart wallet with gasless config", () => {
+    const mockSmartWallet = {
+      id: "smart",
+      getConfig: () => ({ gasless: true }),
+    } as Wallet;
+    expect(hasSponsoredTransactionsEnabled(mockSmartWallet)).toBe(true);
+  });
+
+  it("should handle inApp wallet with smartAccount config", () => {
+    const mockInAppWallet = {
+      id: "inApp",
+      getConfig: () => ({
+        smartAccount: {
+          sponsorGas: true,
+        },
+      }),
+    } as Wallet;
+    expect(hasSponsoredTransactionsEnabled(mockInAppWallet)).toBe(true);
+
+    const mockInAppWalletDisabled = {
+      id: "inApp",
+      getConfig: () => ({
+        smartAccount: {
+          sponsorGas: false,
+        },
+      }),
+    } as Wallet;
+    expect(hasSponsoredTransactionsEnabled(mockInAppWalletDisabled)).toBe(
+      false,
+    );
+  });
+
+  it("should handle inApp wallet with gasless config", () => {
+    const mockInAppWallet = {
+      id: "inApp",
+      getConfig: () => ({
+        smartAccount: {
+          gasless: true,
+        },
+      }),
+    } as Wallet;
+    expect(hasSponsoredTransactionsEnabled(mockInAppWallet)).toBe(true);
+  });
+
+  it("should return false for regular wallet without smart account config", () => {
+    const mockRegularWallet = {
+      id: "inApp",
+      getConfig: () => ({}),
+    } as Wallet;
+    expect(hasSponsoredTransactionsEnabled(mockRegularWallet)).toBe(false);
+  });
+});

package/src/react/native/flows/.keep

@@ -0,0 +1,2 @@
+# Placeholder file to maintain directory structure
+# This directory will contain React Native composite and flow components 

package/src/react/web/adapters/WindowAdapter.ts

@@ -0,0 +1,23 @@
+import type { WindowAdapter } from "../../core/adapters/WindowAdapter.js";
+
+/**
+ * Web implementation of WindowAdapter using the browser's window.open API.
+ * Opens URLs in a new tab/window.
+ */
+export class WebWindowAdapter implements WindowAdapter {
+  /**
+   * Opens a URL in a new browser tab/window.
+   *
+   * @param url - The URL to open
+   * @returns Promise that resolves when the operation is initiated
+   */
+  async open(url: string): Promise<void> {
+    // Use window.open to open URL in new tab
+    window.open(url, "_blank", "noopener,noreferrer");
+  }
+}
+
+/**
+ * Default instance of the Web WindowAdapter.
+ */
+export const webWindowAdapter = new WebWindowAdapter();

package/src/react/web/adapters/adapters.test.ts

@@ -0,0 +1,38 @@
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import { WebWindowAdapter } from "./WindowAdapter.js";
+
+describe("WebWindowAdapter", () => {
+  let windowAdapter: WebWindowAdapter;
+  let mockOpen: ReturnType<typeof vi.fn>;
+
+  beforeEach(() => {
+    windowAdapter = new WebWindowAdapter();
+
+    // Mock window.open using vi.stubGlobal
+    mockOpen = vi.fn();
+    vi.stubGlobal("window", {
+      open: mockOpen,
+    });
+  });
+
+  it("should open URL in new tab with correct parameters", async () => {
+    const mockWindow = {} as Partial<Window>;
+    mockOpen.mockReturnValue(mockWindow);
+
+    await windowAdapter.open("https://example.com");
+
+    expect(mockOpen).toHaveBeenCalledWith(
+      "https://example.com",
+      "_blank",
+      "noopener,noreferrer",
+    );
+  });
+
+  it("should throw error when popup is blocked", async () => {
+    mockOpen.mockReturnValue(null);
+
+    await expect(windowAdapter.open("https://example.com")).rejects.toThrow(
+      "Failed to open URL - popup may be blocked",
+    );
+  });
+});

package/src/react/web/flows/.keep

@@ -0,0 +1,2 @@
+# Placeholder file to maintain directory structure
+# This directory will contain web-specific composite and flow components 

package/src/react/web/hooks/transaction/useSendTransaction.tsx

@@ -83,6 +83,11 @@ import { TransactionModal } from "../../ui/TransactionButton/TransactionModal.js
  *     value: toWei("0.1"),
  *     chain: sepolia,
  *     client: thirdwebClient,
+ *     // Specify a token required for the transaction
+ *     erc20Value: {
+ *       amountWei: toWei("0.1"),
+ *       tokenAddress: "0x...",
+ *     },
  *   });
  *   sendTx(transaction);
  * };