[SDK] Fix fiat payments with no wallet connected (#8048)

Author: joaquim-verges

.changeset/fuzzy-suits-wear.md

@@ -0,0 +1,5 @@
+---
+"thirdweb": patch
+---
+
+Fix fiat payments with no wallets connected

packages/thirdweb/src/react/core/hooks/useStepExecutor.ts

@@ -38,7 +38,7 @@ interface StepExecutorOptions {
   /** Prepared quote returned by Bridge.prepare */
   request: BridgePrepareRequest;
   /** Wallet instance providing getAccount() & sendTransaction */
-  wallet: Wallet;
+  wallet?: Wallet;
   /** Window adapter for opening on-ramp URLs (web / RN) */
   windowAdapter: WindowAdapter;
   /** Thirdweb client for API calls */
@@ -417,89 +417,98 @@ export function useStepExecutor(
         );
       }
 
-      // Then execute transactions
-      const account = wallet.getAccount();
-      if (!account) {
-        throw new ApiError({
-          code: "INVALID_INPUT",
-          message: "Wallet not connected",
-          statusCode: 400,
-        });
-      }
-
-      // Start from where we left off, or from the beginning
-      const startIndex = currentTxIndex ?? 0;
-
-      for (let i = startIndex; i < flatTxs.length; i++) {
-        if (abortController.signal.aborted) {
-          break;
+      if (flatTxs.length > 0) {
+        // Then execute transactions
+        if (!wallet) {
+          throw new ApiError({
+            code: "INVALID_INPUT",
+            message: "No wallet provided to execute transactions",
+            statusCode: 400,
+          });
         }
-
-        const currentTx = flatTxs[i];
-        if (!currentTx) {
-          continue; // Skip invalid index
+        const account = wallet.getAccount();
+        if (!account) {
+          throw new ApiError({
+            code: "INVALID_INPUT",
+            message: "Wallet not connected",
+            statusCode: 400,
+          });
         }
 
-        setCurrentTxIndex(i);
-        const currentStepData = preparedQuote.steps[currentTx._stepIndex];
-        if (!currentStepData) {
-          throw new Error(`Invalid step index: ${currentTx._stepIndex}`);
-        }
+        // Start from where we left off, or from the beginning
+        const startIndex = currentTxIndex ?? 0;
 
-        // switch chain if needed
-        if (currentTx.chainId !== wallet.getChain()?.id) {
-          await wallet.switchChain(getCachedChain(currentTx.chainId));
-        }
+        for (let i = startIndex; i < flatTxs.length; i++) {
+          if (abortController.signal.aborted) {
+            break;
+          }
 
-        // Check if we can batch transactions
-        const canBatch =
-          account.sendBatchTransaction !== undefined && i < flatTxs.length - 1; // Not the last transaction
-
-        if (canBatch) {
-          // Find consecutive transactions on the same chain
-          const batchTxs: FlattenedTx[] = [currentTx];
-          let j = i + 1;
-          while (j < flatTxs.length) {
-            const nextTx = flatTxs[j];
-            if (!nextTx || nextTx.chainId !== currentTx.chainId) {
-              break;
-            }
-            batchTxs.push(nextTx);
-            j++;
+          const currentTx = flatTxs[i];
+          if (!currentTx) {
+            continue; // Skip invalid index
           }
 
-          // Execute batch if we have multiple transactions
-          if (batchTxs.length > 1) {
-            await executeBatch(
-              batchTxs,
-              account,
-              completedStatusResults,
-              abortController.signal,
-            );
-
-            // Mark all batched transactions as completed
-            for (const tx of batchTxs) {
-              setCompletedTxs((prev) => new Set(prev).add(tx._index));
+          setCurrentTxIndex(i);
+          const currentStepData = preparedQuote.steps[currentTx._stepIndex];
+          if (!currentStepData) {
+            throw new Error(`Invalid step index: ${currentTx._stepIndex}`);
+          }
+
+          // switch chain if needed
+          if (currentTx.chainId !== wallet.getChain()?.id) {
+            await wallet.switchChain(getCachedChain(currentTx.chainId));
+          }
+
+          // Check if we can batch transactions
+          const canBatch =
+            account.sendBatchTransaction !== undefined &&
+            i < flatTxs.length - 1; // Not the last transaction
+
+          if (canBatch) {
+            // Find consecutive transactions on the same chain
+            const batchTxs: FlattenedTx[] = [currentTx];
+            let j = i + 1;
+            while (j < flatTxs.length) {
+              const nextTx = flatTxs[j];
+              if (!nextTx || nextTx.chainId !== currentTx.chainId) {
+                break;
+              }
+              batchTxs.push(nextTx);
+              j++;
             }
 
-            // Skip ahead
-            i = j - 1;
-            continue;
+            // Execute batch if we have multiple transactions
+            if (batchTxs.length > 1) {
+              await executeBatch(
+                batchTxs,
+                account,
+                completedStatusResults,
+                abortController.signal,
+              );
+
+              // Mark all batched transactions as completed
+              for (const tx of batchTxs) {
+                setCompletedTxs((prev) => new Set(prev).add(tx._index));
+              }
+
+              // Skip ahead
+              i = j - 1;
+              continue;
+            }
           }
-        }
 
-        // Execute single transaction
-        await executeSingleTx(
-          currentTx,
-          account,
-          completedStatusResults,
-          abortController.signal,
-        );
+          // Execute single transaction
+          await executeSingleTx(
+            currentTx,
+            account,
+            completedStatusResults,
+            abortController.signal,
+          );
 
-        // Mark transaction as completed
-        setCompletedTxs((prev) => new Set(prev).add(currentTx._index));
+          // Mark transaction as completed
+          setCompletedTxs((prev) => new Set(prev).add(currentTx._index));
+        }
       }
-
       // All done - check if we actually completed everything
       if (!abortController.signal.aborted) {
         setCurrentTxIndex(undefined);

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

@@ -29,7 +29,7 @@ export type PaymentMethod =
     }
   | {
       type: "fiat";
-      payerWallet: Wallet;
+      payerWallet?: Wallet;
       currency: string;
       onramp: "stripe" | "coinbase" | "transak";
     };

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

@@ -369,8 +369,7 @@ export function BridgeOrchestrator({
 
       {state.value === "execute" &&
         state.context.quote &&
-        state.context.request &&
-        state.context.selectedPaymentMethod?.payerWallet && (
+        state.context.request && (
           <StepRunner
             autoStart={true}
             client={client}

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

@@ -193,6 +193,11 @@ export type BuyWidgetProps = {
    * Custom label for the main action button.
    */
   buttonLabel?: string;
+
+  /**
+   * The receiver address for the purchased funds.
+   */
+  receiverAddress?: Address;
 };
 
 // Enhanced UIOptions to handle unsupported token state
@@ -455,7 +460,7 @@ export function BuyWidget(props: BuyWidgetProps) {
         paymentMethods={props.paymentMethods}
         presetOptions={props.presetOptions}
         purchaseData={props.purchaseData}
-        receiverAddress={undefined}
+        receiverAddress={props.receiverAddress}
         uiOptions={bridgeDataQuery.data.data}
         showThirdwebBranding={props.showThirdwebBranding}
       />

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

@@ -133,6 +133,7 @@ export function QuoteLoader({
         toChainId: destinationToken.chainId,
         toToken: destinationToken.address,
       });
+      return true;
     },
     queryKey: ["loading_quote", paymentMethod.type],
   });

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

@@ -30,7 +30,7 @@ interface StepRunnerProps {
   /**
    * Wallet instance for executing transactions
    */
-  wallet: Wallet;
+  wallet?: Wallet;
 
   /**
    * Thirdweb client for API calls

packages/thirdweb/src/react/web/ui/Bridge/payment-details/PaymentDetails.tsx

@@ -101,6 +101,7 @@ export function PaymentDetails({
               : preparedQuote.intent.destinationTokenAddress,
         });
       }
+      return true;
     },
     queryKey: ["payment_details", preparedQuote.type],
   });
@@ -239,7 +240,7 @@ export function PaymentDetails({
               receiver={preparedQuote.intent.receiver}
               sender={
                 preparedQuote.intent.sender ||
-                paymentMethod.payerWallet.getAccount()?.address
+                paymentMethod.payerWallet?.getAccount()?.address
               }
               toAmount={displayData.destinationAmount}
               toToken={displayData.destinationToken}

packages/thirdweb/src/react/web/ui/Bridge/payment-selection/PaymentSelection.tsx

@@ -196,15 +196,17 @@ export function PaymentSelection({
   const handleOnrampProviderSelected = (
     provider: "coinbase" | "stripe" | "transak",
   ) => {
-    if (!payerWallet) {
-      onError(new Error("No wallet available for fiat payment"));
+    const recipientAddress =
+      receiverAddress || payerWallet?.getAccount()?.address;
+    if (!recipientAddress) {
+      onError(new Error("No recipient address available for fiat payment"));
       return;
     }
 
     const fiatPaymentMethod: PaymentMethod = {
-      currency: "USD",
+      currency: currency || "USD",
       onramp: provider,
-      payerWallet, // Default to USD for now
+      payerWallet,
       type: "fiat",
     };
     handlePaymentMethodSelected(fiatPaymentMethod);
@@ -307,7 +309,9 @@ export function PaymentSelection({
             country={country}
             client={client}
             onProviderSelected={handleOnrampProviderSelected}
-            toAddress={receiverAddress || ""}
+            toAddress={
+              receiverAddress || payerWallet?.getAccount()?.address || ""
+            }
             toAmount={destinationAmount}
             toChainId={destinationToken.chainId}
             toTokenAddress={destinationToken.address}

packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/swap/FiatValue.tsx

@@ -36,6 +36,7 @@ export function FiatValue(
       props.chain.id,
       getTokenAddress(props.token),
       deferredTokenAmount,
+      props.currency,
     ],
   });