SDK: Show error in BuyWidget and SwapWidget UI if fetching token details fails (#8215)

<!--

## title your PR with this format: "[SDK/Dashboard/Portal] Feature/Fix: Concise title for the changes"

If you did not copy the branch name from Linear, paste the issue tag here (format is TEAM-0000):

## Notes for the reviewer

Anything important to call out? Be sure to also clarify these in your comments.

## How to test

Unit tests, playground, etc.

-->

<!-- start pr-codex -->

---

## PR-Codex overview
This PR introduces error handling in the `BuyWidget` and `SwapWidget` UIs, displaying appropriate error messages when fetching token details fails.

### Detailed summary
- Added `isError` state to handle errors in token fetching.
- Updated `SelectedTokenButton` to check for errors before rendering.
- Enhanced `SwapUI` to show error messages based on different query states.
- Implemented error display in `FundWallet` for unsupported tokens.
- Modified balance display logic to accommodate new error handling.

> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`

<!-- end pr-codex -->

<!-- This is an auto-generated comment: release notes by coderabbit.ai -->
## Summary by CodeRabbit

- New Features
  - Inline error banners in Buy and Swap widgets when token details fail to load.
  - Clear, specific messages for quote, buy-token, and sell-token fetch failures.
- Improvements
  - Selected token UI now falls back gracefully on errors instead of showing partial data.
  - Balance display uses richer token info (value, decimals, symbol, name) for accuracy.
  - More consistent handling of unsupported tokens across the flow.
- Bug Fixes
  - Prevents stale token icons/details from appearing during error states.
  - Disables auto-retry on token price fetches to reduce UI flicker.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

Author: MananTank

.changeset/rare-buckets-fly.md

@@ -0,0 +1,5 @@
+---
+"thirdweb": patch
+---
+
+Show error in BuyWidget and SwapWidget UI if fetching token details fails

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

@@ -251,11 +251,14 @@ export function FundWallet(props: FundWalletProps) {
                       ? tokenQuery.data.token
                       : undefined,
                   isFetching: tokenQuery.isFetching,
+                  isError:
+                    tokenQuery.isError ||
+                    tokenQuery.data?.type === "unsupported_token",
                 }
               : undefined
           }
           balance={{
-            data: tokenBalanceQuery.data?.value,
+            data: tokenBalanceQuery.data,
             isFetching: tokenBalanceQuery.isFetching,
           }}
           client={props.client}
@@ -279,6 +282,22 @@ export function FundWallet(props: FundWalletProps) {
 
       <Spacer y="md" />
 
+      {(tokenQuery.isError ||
+        tokenQuery.data?.type === "unsupported_token") && (
+        <div
+          style={{
+            border: `1px solid ${theme.colors.borderColor}`,
+            borderRadius: radius.full,
+            padding: spacing.xs,
+            marginBottom: spacing.md,
+          }}
+        >
+          <Text size="sm" color="danger" center>
+            Failed to fetch token details
+          </Text>
+        </div>
+      )}
+
       {/* Continue Button */}
       {activeWalletInfo ? (
         <Button
@@ -373,6 +392,7 @@ function TokenSection(props: {
     | {
         data: TokenWithPrices | undefined;
         isFetching: boolean;
+        isError: boolean;
       }
     | undefined;
   currency: SupportedFiatCurrency;
@@ -381,7 +401,14 @@ function TokenSection(props: {
   title: string;
   isConnected: boolean;
   balance: {
-    data: bigint | undefined;
+    data:
+      | {
+          value: bigint;
+          decimals: number;
+          symbol: string;
+          name: string;
+        }
+      | undefined;
     isFetching: boolean;
   };
   onWalletClick: () => void;
@@ -565,17 +592,16 @@ function TokenSection(props: {
             <Text size="xs" color="secondaryText">
               Current Balance
             </Text>
-            {props.balance.data === undefined ||
-            props.selectedToken.data === undefined ? (
+            {props.balance.data === undefined ? (
               <Skeleton height={fontSize.xs} width="100px" />
             ) : (
               <Text size="xs" color="primaryText">
                 {formatTokenAmount(
-                  props.balance.data,
-                  props.selectedToken.data.decimals,
+                  props.balance.data.value,
+                  props.balance.data.decimals,
                   5,
                 )}{" "}
-                {props.selectedToken.data.symbol}
+                {props.balance.data.symbol}
               </Text>
             )}
           </div>

packages/thirdweb/src/react/web/ui/Bridge/common/selected-token-button.tsx

@@ -21,6 +21,7 @@ export function SelectedTokenButton(props: {
     | {
         data: TokenWithPrices | undefined;
         isFetching: boolean;
+        isError: boolean;
       }
     | undefined;
   client: ThirdwebClient;
@@ -47,7 +48,7 @@ export function SelectedTokenButton(props: {
         {/* icons */}
         <Container relative color="secondaryText">
           {/* token icon */}
-          {props.selectedToken ? (
+          {props.selectedToken && !props.selectedToken.isError ? (
             <Img
               key={props.selectedToken?.data?.iconUri}
               src={
@@ -112,7 +113,7 @@ export function SelectedTokenButton(props: {
         </Container>
 
         {/* token symbol and chain name */}
-        {props.selectedToken ? (
+        {props.selectedToken && !props.selectedToken.isError ? (
           <Container flex="column" style={{ gap: "3px" }}>
             {props.selectedToken?.isFetching ? (
               <Skeleton width="60px" height={fontSize.md} />

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

@@ -96,6 +96,7 @@ function useTokenPrice(options: {
       );
     },
     refetchOnMount: false,
+    retry: false,
     refetchOnWindowFocus: false,
   });
 }
@@ -320,6 +321,7 @@ export function SwapUI(props: SwapUIProps) {
             ? {
                 data: sellTokenQuery.data,
                 isFetching: sellTokenQuery.isFetching,
+                isError: sellTokenQuery.isError,
               }
             : undefined
         }
@@ -372,6 +374,7 @@ export function SwapUI(props: SwapUIProps) {
             ? {
                 data: buyTokenQuery.data,
                 isFetching: buyTokenQuery.isFetching,
+                isError: buyTokenQuery.isError,
               }
             : undefined
         }
@@ -389,7 +392,9 @@ export function SwapUI(props: SwapUIProps) {
       />
 
       {/* error message */}
-      {preparedResultQuery.error ? (
+      {preparedResultQuery.error ||
+      buyTokenQuery.isError ||
+      sellTokenQuery.isError ? (
         <Text
           size="sm"
           color="danger"
@@ -398,7 +403,13 @@ export function SwapUI(props: SwapUIProps) {
             paddingBlock: spacing.md,
           }}
         >
-          Failed to get a quote
+          {preparedResultQuery.error
+            ? "Failed to get a quote"
+            : buyTokenQuery.isError
+              ? "Failed to fetch buy token details"
+              : sellTokenQuery.isError
+                ? "Failed to fetch sell token details"
+                : "Failed to get a quote"}
         </Text>
       ) : (
         <Spacer y="md" />
@@ -626,6 +637,7 @@ function TokenSection(props: {
     | {
         data: TokenWithPrices | undefined;
         isFetching: boolean;
+        isError: boolean;
       }
     | undefined;
   currency: SupportedFiatCurrency;