refactor: refresh quote on step runner

Author: gregfromstl

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

@@ -4,16 +4,20 @@ import * as Buy from "../../../bridge/Buy.js";
 import * as Transfer from "../../../bridge/Transfer.js";
 import type { Token } from "../../../bridge/types/Token.js";
 import type { ThirdwebClient } from "../../../client/client.js";
-import { toUnits } from "../../../utils/units.js";
+import { checksumAddress } from "../../../utils/address.js";
 
 export interface UseBridgeQuoteParams {
   originToken: Token;
   destinationToken: Token;
-  destinationAmount: string;
+  destinationAmount: bigint;
   client: ThirdwebClient;
   enabled?: boolean;
 }
 
+export type BridgeQuoteResult = NonNullable<
+  ReturnType<typeof useBridgeQuote>["data"]
+>;
+
 export function useBridgeQuote({
   originToken,
   destinationToken,
@@ -28,18 +32,13 @@ export function useBridgeQuote({
       originToken.address,
       destinationToken.chainId,
       destinationToken.address,
-      destinationAmount,
+      destinationAmount.toString(),
     ],
     queryFn: async () => {
-      const destinationAmountWei = toUnits(
-        destinationAmount,
-        destinationToken.decimals,
-      );
-
       // if ssame token and chain, use transfer
       if (
-        originToken.address.toLowerCase() ===
-          destinationToken.address.toLowerCase() &&
+        checksumAddress(originToken.address) ===
+        checksumAddress(destinationToken.address) &&
         originToken.chainId === destinationToken.chainId
       ) {
         const transfer = await Transfer.prepare({
@@ -48,17 +47,18 @@ export function useBridgeQuote({
           tokenAddress: originToken.address,
           sender: originToken.address,
           receiver: destinationToken.address,
-          amount: destinationAmountWei,
+          amount: destinationAmount,
         });
         return transfer;
       }
 
+      console.log("AMOUNT", destinationAmount);
       const quote = await Buy.quote({
         originChainId: originToken.chainId,
         originTokenAddress: originToken.address,
         destinationChainId: destinationToken.chainId,
         destinationTokenAddress: destinationToken.address,
-        amount: destinationAmountWei,
+        amount: destinationAmount,
         client,
       });
 

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

@@ -11,7 +11,13 @@ import type { ThirdwebClient } from "../../../client/client.js";
 import { waitForReceipt } from "../../../transaction/actions/wait-for-tx-receipt.js";
 import type { Account, Wallet } from "../../../wallets/interfaces/wallet.js";
 import type { WindowAdapter } from "../adapters/WindowAdapter.js";
-import type { BridgePrepareResult } from "./useBridgePrepare.js";
+import {
+  useBridgePrepare,
+  type BridgePrepareRequest,
+  type BridgePrepareResult,
+} from "./useBridgePrepare.js";
+import { useQuery } from "@tanstack/react-query";
+import { stringify } from "../../../utils/json.js";
 
 /**
  * Type for completed status results from Bridge.status and Onramp.status
@@ -21,16 +27,16 @@ export type CompletedStatusResult =
   | ({ type: "sell" } & Extract<Status, { status: "COMPLETED" }>)
   | ({ type: "transfer" } & Extract<Status, { status: "COMPLETED" }>)
   | ({ type: "onramp" } & Extract<
-      OnrampStatus.Result,
-      { status: "COMPLETED" }
-    >);
+    OnrampStatus.Result,
+    { status: "COMPLETED" }
+  >);
 
 /**
  * Options for the step executor hook
  */
 export interface StepExecutorOptions {
   /** Prepared quote returned by Bridge.prepare */
-  preparedQuote: BridgePrepareResult;
+  request: BridgePrepareRequest;
   /** Wallet instance providing getAccount() & sendTransaction */
   wallet: Wallet;
   /** Window adapter for opening on-ramp URLs (web / RN) */
@@ -61,7 +67,8 @@ export interface StepExecutorResult {
   currentTxIndex?: number;
   progress: number; // 0–100
   onrampStatus?: "pending" | "executing" | "completed" | "failed";
-  executionState: "idle" | "executing" | "auto-starting";
+  executionState: "fetching" | "idle" | "executing" | "auto-starting";
+  steps?: RouteStep[];
   error?: ApiError;
   start: () => void;
   cancel: () => void;
@@ -93,47 +100,67 @@ export function useStepExecutor(
   options: StepExecutorOptions,
 ): StepExecutorResult {
   const {
-    preparedQuote,
+    request,
     wallet,
     windowAdapter,
     client,
     autoStart = false,
     onComplete,
   } = options;
 
+  const { data: preparedQuote, isLoading } = useBridgePrepare(request);
+
   // Flatten all transactions upfront
   const flatTxs = useMemo(
-    () => flattenRouteSteps(preparedQuote.steps),
-    [preparedQuote.steps],
+    () => (preparedQuote?.steps ? flattenRouteSteps(preparedQuote.steps) : []),
+    [preparedQuote?.steps],
   );
 
   // State management
   const [currentTxIndex, setCurrentTxIndex] = useState<number | undefined>(
     undefined,
   );
   const [executionState, setExecutionState] = useState<
-    "idle" | "executing" | "auto-starting"
+    "fetching" | "idle" | "executing" | "auto-starting"
   >("idle");
   const [error, setError] = useState<ApiError | undefined>(undefined);
   const [completedTxs, setCompletedTxs] = useState<Set<number>>(new Set());
   const [onrampStatus, setOnrampStatus] = useState<
     "pending" | "executing" | "completed" | "failed" | undefined
-  >(preparedQuote.type === "onramp" ? "pending" : undefined);
+  >(preparedQuote?.type === "onramp" ? "pending" : undefined);
+
+  useQuery({
+    queryKey: [
+      "bridge-quote-execution-state",
+      stringify(preparedQuote?.steps),
+      isLoading,
+    ],
+    queryFn: async () => {
+      if (!isLoading) {
+        setExecutionState("idle");
+      } else {
+        setExecutionState("fetching");
+      }
+      return executionState;
+    },
+  });
 
   // Cancellation tracking
   const abortControllerRef = useRef<AbortController | null>(null);
 
   // Get current step based on current tx index
   const currentStep = useMemo(() => {
+    if (typeof preparedQuote?.steps === "undefined") return undefined;
     if (currentTxIndex === undefined) {
       return undefined;
     }
     const tx = flatTxs[currentTxIndex];
     return tx ? preparedQuote.steps[tx._stepIndex] : undefined;
-  }, [currentTxIndex, flatTxs, preparedQuote.steps]);
+  }, [currentTxIndex, flatTxs, preparedQuote?.steps]);
 
   // Calculate progress including onramp step
   const progress = useMemo(() => {
+    if (typeof preparedQuote?.type === "undefined") return 0;
     const totalSteps =
       flatTxs.length + (preparedQuote.type === "onramp" ? 1 : 0);
     if (totalSteps === 0) {
@@ -142,7 +169,7 @@ export function useStepExecutor(
     const completedSteps =
       completedTxs.size + (onrampStatus === "completed" ? 1 : 0);
     return Math.round((completedSteps / totalSteps) * 100);
-  }, [completedTxs.size, flatTxs.length, preparedQuote.type, onrampStatus]);
+  }, [completedTxs.size, flatTxs.length, preparedQuote?.type, onrampStatus]);
 
   // Exponential backoff polling utility
   const poller = useCallback(
@@ -181,6 +208,9 @@ export function useStepExecutor(
       completedStatusResults: CompletedStatusResult[],
       abortSignal: AbortSignal,
     ) => {
+      if (typeof preparedQuote?.type === "undefined") {
+        throw new Error("No quote generated. This is unexpected.");
+      }
       const { prepareTransaction } = await import(
         "../../../transaction/prepare-transaction.js"
       );
@@ -229,10 +259,14 @@ export function useStepExecutor(
           return { completed: true };
         }
 
+        if (statusResult.status === "FAILED") {
+          throw new Error("Payment failed");
+        }
+
         return { completed: false };
       }, abortSignal);
     },
-    [poller, preparedQuote.type],
+    [poller, preparedQuote?.type],
   );
 
   // Execute batch transactions
@@ -243,6 +277,9 @@ export function useStepExecutor(
       completedStatusResults: CompletedStatusResult[],
       abortSignal: AbortSignal,
     ) => {
+      if (typeof preparedQuote?.type === "undefined") {
+        throw new Error("No quote generated. This is unexpected.");
+      }
       if (!account.sendBatchTransaction) {
         throw new Error("Account does not support batch transactions");
       }
@@ -303,10 +340,14 @@ export function useStepExecutor(
           return { completed: true };
         }
 
+        if (statusResult.status === "FAILED") {
+          throw new Error("Payment failed");
+        }
+
         return { completed: false };
       }, abortSignal);
     },
-    [poller, preparedQuote.type],
+    [poller, preparedQuote?.type],
   );
 
   // Execute onramp step
@@ -350,6 +391,9 @@ export function useStepExecutor(
 
   // Main execution function
   const execute = useCallback(async () => {
+    if (typeof preparedQuote?.type === "undefined") {
+      throw new Error("No quote generated. This is unexpected.");
+    }
     if (executionState !== "idle") {
       return;
     }
@@ -552,6 +596,7 @@ export function useStepExecutor(
     currentTxIndex,
     progress,
     executionState,
+    steps: preparedQuote?.steps,
     onrampStatus,
     error,
     start,

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

@@ -4,8 +4,11 @@ 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 { BridgePrepareResult } from "../hooks/useBridgePrepare.js";
 import type { CompletedStatusResult } from "../hooks/useStepExecutor.js";
+import type {
+  BridgePrepareRequest,
+  BridgePrepareResult,
+} from "../hooks/useBridgePrepare.js";
 
 /**
  * Payment modes supported by BridgeEmbed
@@ -17,17 +20,17 @@ export type PaymentMode = "fund_wallet" | "direct_payment" | "transaction";
  */
 export type PaymentMethod =
   | {
-      type: "wallet";
-      payerWallet: Wallet;
-      originToken: Token;
-      balance: bigint;
-    }
+    type: "wallet";
+    payerWallet: Wallet;
+    originToken: Token;
+    balance: bigint;
+  }
   | {
-      type: "fiat";
-      payerWallet: Wallet;
-      currency: string;
-      onramp: "stripe" | "coinbase" | "transak";
-    };
+    type: "fiat";
+    payerWallet: Wallet;
+    currency: string;
+    onramp: "stripe" | "coinbase" | "transak";
+  };
 
 /**
  * Payment machine context - holds all flow state data
@@ -45,7 +48,8 @@ export interface PaymentMachineContext {
   selectedPaymentMethod?: PaymentMethod;
 
   // Prepared quote data (set in quote state)
-  preparedQuote?: BridgePrepareResult;
+  quote?: BridgePrepareResult;
+  request?: BridgePrepareRequest;
 
   // Execution results (set in execute state on completion)
   completedStatuses?: CompletedStatusResult[];
@@ -66,13 +70,17 @@ export interface PaymentMachineContext {
  */
 export type PaymentMachineEvent =
   | {
-      type: "DESTINATION_CONFIRMED";
-      destinationToken: Token;
-      destinationAmount: string;
-      receiverAddress: Address;
-    }
+    type: "DESTINATION_CONFIRMED";
+    destinationToken: Token;
+    destinationAmount: string;
+    receiverAddress: Address;
+  }
   | { type: "PAYMENT_METHOD_SELECTED"; paymentMethod: PaymentMethod }
-  | { type: "QUOTE_RECEIVED"; preparedQuote: BridgePrepareResult }
+  | {
+    type: "QUOTE_RECEIVED";
+    quote: BridgePrepareResult;
+    request: BridgePrepareRequest;
+  }
   | { type: "ROUTE_CONFIRMED" }
   | { type: "EXECUTION_COMPLETE"; completedStatuses: CompletedStatusResult[] }
   | { type: "ERROR_OCCURRED"; error: Error }
@@ -130,7 +138,7 @@ export function usePaymentMachine(
               if (event.type === "PAYMENT_METHOD_SELECTED") {
                 return {
                   ...ctx,
-                  preparedQuote: undefined, // reset quote when method changes
+                  quote: undefined, // reset quote when method changes
                   selectedPaymentMethod: event.paymentMethod,
                 };
               } else if (event.type === "ERROR_OCCURRED") {
@@ -146,7 +154,8 @@ export function usePaymentMachine(
               if (event.type === "QUOTE_RECEIVED") {
                 return {
                   ...ctx,
-                  preparedQuote: event.preparedQuote,
+                  quote: event.quote,
+                  request: event.request,
                 };
               } else if (event.type === "ERROR_OCCURRED") {
                 return {

packages/thirdweb/src/react/core/utils/persist.ts

@@ -37,14 +37,15 @@ export async function saveSnapshot(
         destinationToken: context.destinationToken,
         destinationAmount: context.destinationAmount,
         selectedPaymentMethod: context.selectedPaymentMethod,
-        preparedQuote: context.preparedQuote,
+        quote: context.quote,
+        request: context.request,
         completedStatuses: context.completedStatuses,
         currentError: context.currentError
           ? {
-              name: context.currentError.name,
-              message: context.currentError.message,
-              stack: context.currentError.stack,
-            }
+            name: context.currentError.name,
+            message: context.currentError.message,
+            stack: context.currentError.stack,
+          }
           : undefined,
         retryState: context.retryState,
       },