[SDK] fix: Disable quote retries and show fiat values (#6210)

Author: joaquim-verges

.changeset/cool-pumpkins-punch.md

@@ -0,0 +1,5 @@
+---
+"thirdweb": patch
+---
+
+Dont retry on quote errors, show fiat value in every step

packages/thirdweb/src/react/core/hooks/pay/useBuyWithCryptoQuote.ts

@@ -17,15 +17,6 @@ export type BuyWithCryptoQuoteQueryOptions = Omit<
   "queryFn" | "queryKey" | "enabled"
 >;
 
-/**
- * @internal
- */
-type BuyWithCryptoQuoteError = {
-  status: string;
-  code: string;
-  statusCode: number;
-};
-
 /**
  * Hook to get a price quote for performing a "Buy with crypto" transaction that allows users to buy a token with another token - aka a swap.
  *
@@ -97,26 +88,6 @@ export function useBuyWithCryptoQuote(
       return getBuyWithCryptoQuote(params);
     },
     enabled: !!params,
-    retry(failureCount, error) {
-      if (failureCount > 3) {
-        return false;
-      }
-      try {
-        // biome-ignore lint/suspicious/noExplicitAny: <explanation>
-        const serverError = (error as any).error as BuyWithCryptoQuoteError;
-
-        if (serverError.code === "MINIMUM_PURCHASE_AMOUNT") {
-          return false;
-        }
-
-        if (serverError.statusCode === 404 || serverError.statusCode >= 500) {
-          return false;
-        }
-      } catch {
-        return true;
-      }
-
-      return true;
-    },
+    retry: false,
   });
 }

packages/thirdweb/src/react/core/hooks/pay/useBuyWithFiatQuote.ts

@@ -17,15 +17,6 @@ export type BuyWithFiatQuoteQueryOptions = Omit<
   "queryFn" | "queryKey" | "enabled"
 >;
 
-/**
- * @internal
- */
-type BuyWithFiatQuoteError = {
-  status: string;
-  code: string;
-  statusCode: number;
-};
-
 /**
  * Hook to get a price quote for performing a "Buy with Fiat" transaction that allows users to buy a token with fiat currency.
  *
@@ -85,26 +76,6 @@ export function useBuyWithFiatQuote(
       return getBuyWithFiatQuote(params);
     },
     enabled: !!params,
-    retry(failureCount, error) {
-      if (failureCount > 3) {
-        return false;
-      }
-      try {
-        // biome-ignore lint/suspicious/noExplicitAny: <explanation>
-        const serverError = (error as any).error as BuyWithFiatQuoteError;
-
-        if (serverError.code === "MINIMUM_PURCHASE_AMOUNT") {
-          return false;
-        }
-
-        if (serverError.statusCode === 404 || serverError.statusCode >= 500) {
-          return false;
-        }
-      } catch {
-        return true;
-      }
-
-      return true;
-    },
+    retry: false,
   });
 }

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

@@ -52,6 +52,7 @@ import {
   useToTokenSelectionStates,
 } from "./main/useUISelectionStates.js";
 import { BuyTokenInput } from "./swap/BuyTokenInput.js";
+import { FiatValue } from "./swap/FiatValue.js";
 import { PaymentSelectionScreen } from "./swap/PaymentSelectionScreen.js";
 import { SwapFlow } from "./swap/SwapFlow.js";
 import { SwapScreenContent } from "./swap/SwapScreenContent.js";
@@ -669,7 +670,7 @@ function SelectedTokenInfo(props: {
           justifyContent: "space-between",
         }}
       >
-        <Container flex="row" gap="xs" center="y">
+        <Container flex="row" gap="xxs" center="y">
           <Input
             variant="outline"
             pattern="^[0-9]*[.,]?[0-9]*$"
@@ -738,6 +739,14 @@ function SelectedTokenInfo(props: {
               token={props.selectedToken}
             />
           </Container>
+
+          <FiatValue
+            chain={props.selectedChain}
+            client={props.client}
+            tokenAmount={props.tokenAmount}
+            token={props.selectedToken}
+            size="sm"
+          />
         </Container>
 
         <ChainName

packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/fiat/FiatSteps.tsx

@@ -233,7 +233,7 @@ export function FiatSteps(props: {
 
   const toTokenInfo = partialSuccessToTokenInfo || (
     <Text color="primaryText" size="sm">
-      {formatNumber(Number(toTokenAmount), 6)}
+      {formatNumber(Number(toTokenAmount), 6)}{" "}
       <TokenSymbol token={toToken} chain={toChain} size="sm" inline />
     </Text>
   );