diff --git a/.changeset/plenty-dragons-carry.md b/.changeset/plenty-dragons-carry.md new file mode 100644 index 00000000000..d57dabd390d --- /dev/null +++ b/.changeset/plenty-dragons-carry.md @@ -0,0 +1,5 @@ +--- +"thirdweb": patch +--- + +Fixes PayEmbed error state appearing on certain errors diff --git a/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/BuyScreen.tsx b/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/BuyScreen.tsx index d19fdeadf78..8e1c6ae4a12 100644 --- a/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/BuyScreen.tsx +++ b/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 ( + + + + ); + } + if (!supportedDestinationsQuery.data) { return ; } @@ -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({ id: "main", @@ -477,6 +498,8 @@ function BuyScreenContent(props: BuyScreenContentProps) { ); } + console.log("SCREEN", screen.id); + return (
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