Remove extra quote loading step

Author: MananTank

packages/thirdweb/src/react/web/ui/Bridge/swap-widget/SwapWidget.tsx

@@ -7,7 +7,6 @@ import type { TokenWithPrices } from "../../../../../bridge/types/Token.js";
 import type { ThirdwebClient } from "../../../../../client/client.js";
 import { NATIVE_TOKEN_ADDRESS } from "../../../../../constants/addresses.js";
 import type { SupportedFiatCurrency } from "../../../../../pay/convert/type.js";
-import { toTokens } from "../../../../../utils/units.js";
 import { CustomThemeProvider } from "../../../../core/design-system/CustomThemeProvider.js";
 import type { Theme } from "../../../../core/design-system/index.js";
 import type {
@@ -21,7 +20,6 @@ import { DynamicHeight } from "../../components/DynamicHeight.js";
 import { ErrorBanner } from "../ErrorBanner.js";
 import { PaymentDetails } from "../payment-details/PaymentDetails.js";
 import { SuccessScreen } from "../payment-success/SuccessScreen.js";
-import { QuoteLoader } from "../QuoteLoader.js";
 import { StepRunner } from "../StepRunner.js";
 import { useActiveWalletInfo } from "./hooks.js";
 import { getLastUsedTokens, setLastUsedTokens } from "./storage.js";
@@ -201,8 +199,8 @@ type SwapWidgetScreen =
       mode: "buy" | "sell";
     }
   | {
-      id: "3:preview";
-      preparedQuote: BridgePrepareResult;
+      id: "2:preview";
+      preparedQuote: Extract<BridgePrepareResult, { type: "buy" | "sell" }>;
       request: BridgePrepareRequest;
       quote: Buy.quote.Result | Sell.quote.Result;
       buyToken: TokenWithPrices;
@@ -211,19 +209,19 @@ type SwapWidgetScreen =
       mode: "buy" | "sell";
     }
   | {
-      id: "4:execute";
+      id: "3:execute";
       request: BridgePrepareRequest;
       quote: Buy.quote.Result | Sell.quote.Result;
-      preparedQuote: BridgePrepareResult;
+      preparedQuote: Extract<BridgePrepareResult, { type: "buy" | "sell" }>;
       buyToken: TokenWithPrices;
       sellToken: TokenWithPrices;
       sellTokenBalance: bigint;
       mode: "buy" | "sell";
     }
   | {
-      id: "5:success";
+      id: "4:success";
       completedStatuses: CompletedStatusResult[];
-      preparedQuote: BridgePrepareResult;
+      preparedQuote: Extract<BridgePrepareResult, { type: "buy" | "sell" }>;
       buyToken: TokenWithPrices;
       sellToken: TokenWithPrices;
     }
@@ -337,59 +335,23 @@ function SwapWidgetContent(props: SwapWidgetProps) {
         setSellToken={setSellToken}
         amountSelection={amountSelection}
         setAmountSelection={setAmountSelection}
-        onSwap={(quote, selection) => {
+        onSwap={(data) => {
           setScreen({
-            quote,
-            id: "2:loading-quote",
-            ...selection,
+            id: "2:preview",
+            buyToken: data.buyToken,
+            sellToken: data.sellToken,
+            sellTokenBalance: data.sellTokenBalance,
+            mode: data.mode,
+            preparedQuote: data.result,
+            request: data.request,
+            quote: data.result,
           });
         }}
       />
     );
   }
 
-  if (screen.id === "2:loading-quote") {
-    console.log("screen", screen);
-    return (
-      <QuoteLoader
-        amount={
-          // if buy mode, set destination amount
-          // if sell mode, set origin amount
-          screen.mode === "buy"
-            ? toTokens(screen.quote.destinationAmount, screen.buyToken.decimals)
-            : toTokens(screen.quote.originAmount, screen.sellToken.decimals)
-        }
-        onError={handleError}
-        onQuoteReceived={(preparedQuote, request) => {
-          setScreen({
-            ...screen,
-            id: "3:preview",
-            preparedQuote,
-            request,
-          });
-        }}
-        receiver={activeWalletInfo.activeAccount.address}
-        onBack={() => setScreen({ id: "1:swap-ui" })}
-        uiOptions={{
-          destinationToken: screen.buyToken,
-          mode: "fund_wallet",
-          currency: props.currency,
-        }}
-        client={props.client}
-        destinationToken={screen.buyToken}
-        paymentMethod={{
-          quote: screen.quote,
-          type: "wallet",
-          payerWallet: activeWalletInfo.activeWallet,
-          balance: screen.sellTokenBalance,
-          originToken: screen.sellToken,
-          action: screen.mode,
-        }}
-      />
-    );
-  }
-
-  if (screen.id === "3:preview") {
+  if (screen.id === "2:preview") {
     return (
       <PaymentDetails
         client={props.client}
@@ -399,7 +361,7 @@ function SwapWidgetContent(props: SwapWidgetProps) {
         onConfirm={() => {
           setScreen({
             ...screen,
-            id: "4:execute",
+            id: "3:execute",
           });
         }}
         onError={handleError}
@@ -421,15 +383,15 @@ function SwapWidgetContent(props: SwapWidgetProps) {
     );
   }
 
-  if (screen.id === "4:execute") {
+  if (screen.id === "3:execute") {
     return (
       <StepRunner
         autoStart={true}
         client={props.client}
         onBack={() => {
           setScreen({
             ...screen,
-            id: "3:preview",
+            id: "2:preview",
             sellTokenBalance: screen.sellTokenBalance,
           });
         }}
@@ -438,7 +400,7 @@ function SwapWidgetContent(props: SwapWidgetProps) {
           props.onSuccess?.();
           setScreen({
             ...screen,
-            id: "5:success",
+            id: "4:success",
             completedStatuses,
           });
         }}
@@ -449,7 +411,7 @@ function SwapWidgetContent(props: SwapWidgetProps) {
     );
   }
 
-  if (screen.id === "5:success") {
+  if (screen.id === "4:success") {
     return (
       <SuccessScreen
         client={props.client}

packages/thirdweb/src/react/web/ui/Bridge/swap-widget/swap-ui.tsx

@@ -6,7 +6,9 @@ import {
 } from "@radix-ui/react-icons";
 import { useQuery } from "@tanstack/react-query";
 import { useState } from "react";
+import type { prepare as BuyPrepare } from "../../../../../bridge/Buy.js";
 import { Buy, Sell } from "../../../../../bridge/index.js";
+import type { prepare as SellPrepare } from "../../../../../bridge/Sell.js";
 import type { BridgeChain } from "../../../../../bridge/types/Chain.js";
 import type { TokenWithPrices } from "../../../../../bridge/types/Token.js";
 import { defineChain } from "../../../../../chains/utils.js";
@@ -28,6 +30,10 @@ import {
   type Theme,
 } from "../../../../core/design-system/index.js";
 import { useWalletBalance } from "../../../../core/hooks/others/useWalletBalance.js";
+import type {
+  BridgePrepareRequest,
+  BridgePrepareResult,
+} from "../../../../core/hooks/useBridgePrepare.js";
 import { ConnectButton } from "../../ConnectWallet/ConnectButton.js";
 import { ArrowUpDownIcon } from "../../ConnectWallet/icons/ArrowUpDownIcon.js";
 import { WalletDotIcon } from "../../ConnectWallet/icons/WalletDotIcon.js";
@@ -57,15 +63,14 @@ type SwapUIProps = {
   connectOptions: SwapWidgetConnectOptions | undefined;
   currency: SupportedFiatCurrency;
   showThirdwebBranding: boolean;
-  onSwap: (
-    quote: Buy.quote.Result | Sell.quote.Result,
-    selection: {
-      buyToken: TokenWithPrices;
-      sellTokenBalance: bigint;
-      sellToken: TokenWithPrices;
-      mode: "buy" | "sell";
-    },
-  ) => void;
+  onSwap: (data: {
+    result: Extract<BridgePrepareResult, { type: "buy" | "sell" }>;
+    request: Extract<BridgePrepareRequest, { type: "buy" | "sell" }>;
+    buyToken: TokenWithPrices;
+    sellTokenBalance: bigint;
+    sellToken: TokenWithPrices;
+    mode: "buy" | "sell";
+  }) => void;
   buyToken: TokenSelection | undefined;
   sellToken: TokenSelection | undefined;
   setBuyToken: (token: TokenSelection | undefined) => void;
@@ -191,7 +196,10 @@ function SwapUIBase(
       !!buyTokenWithPrices &&
       !!sellTokenWithPrices &&
       !!props.amountSelection.amount,
-    queryFn: async () => {
+    queryFn: async (): Promise<{
+      result: Extract<BridgePrepareResult, { type: "buy" | "sell" }>;
+      request: Extract<BridgePrepareRequest, { type: "buy" | "sell" }>;
+    }> => {
       if (
         !buyTokenWithPrices ||
         !sellTokenWithPrices ||
@@ -202,8 +210,8 @@ function SwapUIBase(
       }
 
       if (props.amountSelection.type === "buy") {
-        const res = await Buy.quote({
-          buyAmountWei: toUnits(
+        const buyRequestOptions: BuyPrepare.Options = {
+          amount: toUnits(
             props.amountSelection.amount,
             buyTokenWithPrices.decimals,
           ),
@@ -214,11 +222,23 @@ function SwapUIBase(
           destinationChainId: buyTokenWithPrices.chainId,
           destinationTokenAddress: buyTokenWithPrices.address,
           client: props.client,
-        });
+          receiver: props.activeWalletInfo.activeAccount.address,
+          sender: props.activeWalletInfo.activeAccount.address,
+        };
+
+        const buyRequest: BridgePrepareRequest = {
+          type: "buy",
+          ...buyRequestOptions,
+        };
+
+        const res = await Buy.prepare(buyRequest);
 
-        return res;
+        return {
+          result: { type: "buy", ...res },
+          request: buyRequest,
+        };
       } else if (props.amountSelection.type === "sell") {
-        const res = await Sell.prepare({
+        const sellRequestOptions: SellPrepare.Options = {
           amount: toUnits(
             props.amountSelection.amount,
             sellTokenWithPrices.decimals,
@@ -232,12 +252,22 @@ function SwapUIBase(
           client: props.client,
           receiver: props.activeWalletInfo.activeAccount.address,
           sender: props.activeWalletInfo.activeAccount.address,
-        });
+        };
+
+        const res = await Sell.prepare(sellRequestOptions);
+
+        const sellRequest: BridgePrepareRequest = {
+          type: "sell",
+          ...sellRequestOptions,
+        };
 
-        return res;
+        return {
+          result: { type: "sell", ...res },
+          request: sellRequest,
+        };
       }
 
-      return null;
+      throw new Error("Invalid amount selection type");
     },
     refetchInterval: 20000,
   });
@@ -249,7 +279,7 @@ function SwapUIBase(
           props.amountSelection.type === "buy" &&
           sellTokenWithPrices
         ? toTokens(
-            preparedResultQuery.data.originAmount,
+            preparedResultQuery.data.result.originAmount,
             sellTokenWithPrices.decimals,
           )
         : "";
@@ -261,7 +291,7 @@ function SwapUIBase(
           props.amountSelection.type === "sell" &&
           buyTokenWithPrices
         ? toTokens(
-            preparedResultQuery.data.destinationAmount,
+            preparedResultQuery.data.result.destinationAmount,
             buyTokenWithPrices.decimals,
           )
         : "";
@@ -396,7 +426,9 @@ function SwapUIBase(
               sellTokenWithPrices &&
               sellTokenBalanceQuery.data
             ) {
-              props.onSwap(preparedResultQuery.data, {
+              props.onSwap({
+                result: preparedResultQuery.data.result,
+                request: preparedResultQuery.data.request,
                 buyToken: buyTokenWithPrices,
                 sellToken: sellTokenWithPrices,
                 sellTokenBalance: sellTokenBalanceQuery.data.value,