diff --git a/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/TransactionModeScreen.tsx b/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/TransactionModeScreen.tsx
index c0a68cedaa2..89eaab69ac0 100644
--- a/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/TransactionModeScreen.tsx
+++ b/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 ;
+ }
+
+ if (transactionCostAndDataError || chainDataError) {
+ return (
+
+
+
+ );
+ }
+
if (!transactionCostAndData || !chainData) {
return ;
}
diff --git a/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/main/useBuyTxStates.ts b/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/main/useBuyTxStates.ts
index 1a1edd01677..919da47731f 100644
--- a/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/main/useBuyTxStates.ts
+++ b/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