[SDK] Fix: PayEmbed Error State (#5463)

CNCT-2385

<!-- start pr-codex -->

---

## PR-Codex overview
This PR focuses on improving error handling and user experience in the `BuyScreen` and `TransactionModeScreen` components of the `thirdweb` package. It adds error states for loading issues and modifies error messages for better clarity.

### Detailed summary
- Updated error message for missing account in `useBuyTxStates.ts`.
- Introduced an error state in `BuyScreen` for `supportedDestinationsQuery` failures.
- Added loading and error handling in `TransactionModeScreen` for transaction cost and chain data.
- Enhanced user feedback with `ErrorState` and `LoadingScreen` components.

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

<!-- end pr-codex -->

Author: gregfromstl

.changeset/plenty-dragons-carry.md

@@ -0,0 +1,5 @@
+---
+"thirdweb": patch
+---
+
+Fixes PayEmbed error state appearing on certain errors

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

@@ -24,6 +24,7 @@ import { useBuyWithFiatQuote } from "../../../../../core/hooks/pay/useBuyWithFia
 import { useActiveAccount } from "../../../../../core/hooks/wallets/useActiveAccount.js";
 import { invalidateWalletBalance } from "../../../../../core/providers/invalidateWalletBalance.js";
 import type { SupportedTokens } from "../../../../../core/utils/defaultTokens.js";
+import { ErrorState } from "../../../../wallets/shared/ErrorState.js";
 import { LoadingScreen } from "../../../../wallets/shared/LoadingScreen.js";
 import type { PayEmbedConnectOptions } from "../../../PayEmbed.js";
 import { ChainName } from "../../../components/ChainName.js";
@@ -105,6 +106,24 @@ export default function BuyScreen(props: BuyScreenProps) {
     isTestMode,
   );
 
+  if (supportedDestinationsQuery.isError) {
+    return (
+      <Container
+        style={{
+          minHeight: "350px",
+        }}
+        fullHeight
+        flex="row"
+        center="both"
+      >
+        <ErrorState
+          title="Something went wrong"
+          onTryAgain={supportedDestinationsQuery.refetch}
+        />
+      </Container>
+    );
+  }
+
   if (!supportedDestinationsQuery.data) {
     return <LoadingScreen />;
   }
@@ -137,9 +156,11 @@ type BuyScreenContentProps = {
  */
 function BuyScreenContent(props: BuyScreenContentProps) {
   const { client, supportedDestinations, connectLocale, payOptions } = props;
+  console.log("BuyScreenContent");
 
   const activeAccount = useActiveAccount();
   const { payer, setPayer } = usePayerSetup();
+  console.log("payer", payer);
 
   const [screen, setScreen] = useState<SelectedScreen>({
     id: "main",
@@ -477,6 +498,8 @@ function BuyScreenContent(props: BuyScreenContentProps) {
     );
   }
 
+  console.log("SCREEN", screen.id);
+
   return (
     <Container animate="fadein">
       <div>

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

@@ -13,6 +13,7 @@ import { useWalletBalance } from "../../../../../core/hooks/others/useWalletBala
 import { useActiveAccount } from "../../../../../core/hooks/wallets/useActiveAccount.js";
 import { useActiveWallet } from "../../../../../core/hooks/wallets/useActiveWallet.js";
 import { hasSponsoredTransactionsEnabled } from "../../../../../core/utils/wallet.js";
+import { ErrorState } from "../../../../wallets/shared/ErrorState.js";
 import { LoadingScreen } from "../../../../wallets/shared/LoadingScreen.js";
 import type { PayEmbedConnectOptions } from "../../../PayEmbed.js";
 import { ChainIcon } from "../../../components/ChainIcon.js";
@@ -54,9 +55,19 @@ export function TransactionModeScreen(props: {
     supportedDestinations,
     onContinue,
   } = props;
-  const { data: chainData } = useChainMetadata(payUiOptions.transaction.chain);
+  const {
+    data: chainData,
+    error: chainDataError,
+    isLoading: chainDataLoading,
+    refetch: chainDataRefetch,
+  } = useChainMetadata(payUiOptions.transaction.chain);
   const metadata = payUiOptions.metadata;
-  const { data: transactionCostAndData } = useTransactionCostAndData({
+  const {
+    data: transactionCostAndData,
+    error: transactionCostAndDataError,
+    isLoading: transactionCostAndDataLoading,
+    refetch: transactionCostAndDataRefetch,
+  } = useTransactionCostAndData({
     transaction: payUiOptions.transaction,
     account: payerAccount,
     supportedDestinations,
@@ -80,6 +91,36 @@ export function TransactionModeScreen(props: {
     },
   );
 
+  if (transactionCostAndDataLoading || chainDataLoading) {
+    return <LoadingScreen />;
+  }
+
+  if (transactionCostAndDataError || chainDataError) {
+    return (
+      <Container
+        style={{
+          minHeight: "350px",
+        }}
+        fullHeight
+        flex="row"
+        center="both"
+      >
+        <ErrorState
+          title={
+            transactionCostAndDataError?.message ||
+            chainDataError?.message ||
+            "Something went wrong"
+          }
+          onTryAgain={
+            transactionCostAndDataError
+              ? transactionCostAndDataRefetch
+              : chainDataRefetch
+          }
+        />
+      </Container>
+    );
+  }
+
   if (!transactionCostAndData || !chainData) {
     return <LoadingScreen />;
   }

packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/main/useBuyTxStates.ts

@@ -58,7 +58,7 @@ export function useTransactionCostAndData(args: {
     ],
     queryFn: async () => {
       if (!account) {
-        throw new Error("No account");
+        throw new Error("No payer account found");
       }
 
       const erc20Value = await resolvePromisedValue(transaction.erc20Value);
@@ -112,7 +112,6 @@ export function useTransactionCostAndData(args: {
           getChainMetadata(transaction.chain),
           getTransactionGasCost(transaction, account?.address),
         ]);
-
       const walletBalance = nativeWalletBalance;
       const transactionValueWei =
         (await resolvePromisedValue(transaction.value)) || 0n;
@@ -129,7 +128,7 @@ export function useTransactionCostAndData(args: {
         transactionValueWei,
       } satisfies TransactionCostAndData;
     },
-    enabled: !!transaction && !!account && !!txQueryKey,
+    enabled: !!transaction && !!txQueryKey,
     refetchInterval: () => {
       if (transaction.erc20Value) {
         // if erc20 value is set, we don't need to poll