[SDK] Fix: Adds onExecuteTransaction to TransactionPayment (#7816)

Author: gregfromstl

packages/thirdweb/src/react/core/machines/paymentMachine.ts

@@ -70,7 +70,7 @@ export interface PaymentMachineContext {
 /**
  * Events that can be sent to the payment machine
  */
-export type PaymentMachineEvent =
+type PaymentMachineEvent =
   | {
       type: "DESTINATION_CONFIRMED";
       destinationToken: Token;

packages/thirdweb/src/react/web/ui/Bridge/BridgeOrchestrator.tsx

@@ -288,7 +288,7 @@ export function BridgeOrchestrator({
           client={client}
           connectOptions={modifiedConnectOptions}
           onContinue={handleRequirementsResolved}
-          sendEvent={send}
+          onExecuteTransaction={() => send({ type: "CONTINUE_TO_TRANSACTION" })}
           showThirdwebBranding={showThirdwebBranding}
           uiOptions={uiOptions}
         />

packages/thirdweb/src/react/web/ui/Bridge/TransactionPayment.tsx

@@ -20,7 +20,6 @@ import { useChainMetadata } from "../../../core/hooks/others/useChainQuery.js";
 import { useTransactionDetails } from "../../../core/hooks/useTransactionDetails.js";
 import { useActiveAccount } from "../../../core/hooks/wallets/useActiveAccount.js";
 import { useActiveWallet } from "../../../core/hooks/wallets/useActiveWallet.js";
-import type { PaymentMachineEvent } from "../../../core/machines/paymentMachine.js";
 import { ConnectButton } from "../ConnectWallet/ConnectButton.js";
 import { PoweredByThirdweb } from "../ConnectWallet/PoweredByTW.js";
 import { Container, Line } from "../components/basic.js";
@@ -50,9 +49,9 @@ export interface TransactionPaymentProps {
   onContinue: (amount: string, token: Token, receiverAddress: Address) => void;
 
   /**
-   * Send arbitrary payment events for UI flow control
+   * Request to execute the transaction immediately (skips funding flow)
    */
-  sendEvent: (event: PaymentMachineEvent) => void;
+  onExecuteTransaction: () => void;
 
   /**
    * Connect options for wallet connection
@@ -70,7 +69,7 @@ export function TransactionPayment({
   uiOptions,
   client,
   onContinue,
-  sendEvent,
+  onExecuteTransaction,
   connectOptions,
   showThirdwebBranding = true,
 }: TransactionPaymentProps) {
@@ -391,9 +390,7 @@ export function TransactionPayment({
                 Number(userBalance) >=
                   Number(transactionDataQuery.data.totalCost)
               ) {
-                sendEvent({
-                  type: "CONTINUE_TO_TRANSACTION",
-                });
+                onExecuteTransaction();
                 return;
               }
 

packages/thirdweb/src/stories/Bridge/TransactionPayment.stories.tsx

@@ -29,7 +29,7 @@ const TransactionPaymentWithTheme = (
 const meta = {
   args: {
     client: storyClient,
-    sendEvent: (_event) => {},
+    onExecuteTransaction: () => {},
     onContinue: (_amount, _token, _receiverAddress) => {},
     theme: "dark",
     uiOptions: TRANSACTION_UI_OPTIONS.ethTransfer,