diff --git a/packages/thirdweb/src/react/core/hooks/usePaymentMethods.ts b/packages/thirdweb/src/react/core/hooks/usePaymentMethods.ts index d51a8427616..6d303f9f9d2 100644 --- a/packages/thirdweb/src/react/core/hooks/usePaymentMethods.ts +++ b/packages/thirdweb/src/react/core/hooks/usePaymentMethods.ts @@ -1,7 +1,7 @@ import { useQuery } from "@tanstack/react-query"; import type { Quote } from "../../../bridge/index.js"; import { ApiError } from "../../../bridge/types/Errors.js"; -import type { Token, TokenWithPrices } from "../../../bridge/types/Token.js"; +import type { TokenWithPrices } from "../../../bridge/types/Token.js"; import type { ThirdwebClient } from "../../../client/client.js"; import { getThirdwebBaseUrl } from "../../../utils/domains.js"; import { getClientFetch } from "../../../utils/fetch.js"; @@ -29,7 +29,7 @@ import { useActiveWallet } from "./wallets/useActiveWallet.js"; * ``` */ export function usePaymentMethods(options: { - destinationToken: Token; + destinationToken: TokenWithPrices; destinationAmount: string; client: ThirdwebClient; payerWallet?: Wallet; @@ -65,6 +65,8 @@ export function usePaymentMethods(options: { "amount", toUnits(destinationAmount, destinationToken.decimals).toString(), ); + // dont include quotes to speed up the query + url.searchParams.set("includeQuotes", "false"); const clientFetch = getClientFetch(client); const response = await clientFetch(url.toString()); @@ -80,8 +82,9 @@ export function usePaymentMethods(options: { const { data: allValidOriginTokens, - }: { data: { quote: Quote; balance: string; token: TokenWithPrices }[] } = - await response.json(); + }: { + data: { quote?: Quote; balance: string; token: TokenWithPrices }[]; + } = await response.json(); // Sort by enough balance to pay THEN gross balance const validTokenQuotes = allValidOriginTokens.map((s) => ({ @@ -92,7 +95,7 @@ export function usePaymentMethods(options: { quote: s.quote, })); - const sufficientBalanceQuotes = validTokenQuotes + const sortedValidTokenQuotes = validTokenQuotes .filter((s) => !!s.originToken.prices.USD) .sort((a, b) => { return ( @@ -114,18 +117,29 @@ export function usePaymentMethods(options: { ) : []; const finalQuotes = supportedTokens - ? sufficientBalanceQuotes.filter((q) => + ? sortedValidTokenQuotes.filter((q) => tokensToInclude.find( (t) => t.chainId === q.originToken.chainId && t.address.toLowerCase() === q.originToken.address.toLowerCase(), ), ) - : sufficientBalanceQuotes; - return finalQuotes.map((x) => ({ - ...x, - action: "buy", - })); + : sortedValidTokenQuotes; + + const requiredUsdValue = + (destinationToken.prices?.["USD"] ?? 0) * Number(destinationAmount); + + return finalQuotes.map((x) => { + const tokenUsdValue = + (x.originToken.prices?.["USD"] ?? 0) * + Number(toTokens(x.balance, x.originToken.decimals)); + const hasEnoughBalance = tokenUsdValue >= requiredUsdValue; + return { + ...x, + action: "buy", + hasEnoughBalance, + }; + }); }, queryKey: [ "payment-methods", diff --git a/packages/thirdweb/src/react/web/ui/Bridge/payment-selection/PaymentSelection.tsx b/packages/thirdweb/src/react/web/ui/Bridge/payment-selection/PaymentSelection.tsx index 0f70b20ee44..6f85d72654f 100644 --- a/packages/thirdweb/src/react/web/ui/Bridge/payment-selection/PaymentSelection.tsx +++ b/packages/thirdweb/src/react/web/ui/Bridge/payment-selection/PaymentSelection.tsx @@ -1,7 +1,7 @@ "use client"; import { useEffect, useState } from "react"; import { trackPayEvent } from "../../../../../analytics/track/pay.js"; -import type { Token } from "../../../../../bridge/types/Token.js"; +import type { TokenWithPrices } from "../../../../../bridge/types/Token.js"; import { defineChain } from "../../../../../chains/utils.js"; import type { ThirdwebClient } from "../../../../../client/client.js"; import type { SupportedFiatCurrency } from "../../../../../pay/convert/type.js"; @@ -26,7 +26,7 @@ type PaymentSelectionProps = { /** * The destination token to bridge to */ - destinationToken: Token; + destinationToken: TokenWithPrices; /** * The destination amount to bridge diff --git a/packages/thirdweb/src/react/web/ui/Bridge/payment-selection/TokenSelection.tsx b/packages/thirdweb/src/react/web/ui/Bridge/payment-selection/TokenSelection.tsx index e50ef3f9165..10d3b2ba135 100644 --- a/packages/thirdweb/src/react/web/ui/Bridge/payment-selection/TokenSelection.tsx +++ b/packages/thirdweb/src/react/web/ui/Bridge/payment-selection/TokenSelection.tsx @@ -47,10 +47,7 @@ function PaymentMethodTokenRow({ }: PaymentMethodTokenRowProps) { const theme = useCustomTheme(); - const displayOriginAmount = paymentMethod.quote.originAmount; - const hasEnoughBalance = displayOriginAmount - ? paymentMethod.balance >= displayOriginAmount - : false; + const hasEnoughBalance = paymentMethod.hasEnoughBalance; const currencyPrice = paymentMethod.originToken.prices[currency || "USD"]; return ( diff --git a/packages/thirdweb/src/react/web/ui/Bridge/swap-widget/SwapWidget.tsx b/packages/thirdweb/src/react/web/ui/Bridge/swap-widget/SwapWidget.tsx index c542ab6b475..b4f990ab377 100644 --- a/packages/thirdweb/src/react/web/ui/Bridge/swap-widget/SwapWidget.tsx +++ b/packages/thirdweb/src/react/web/ui/Bridge/swap-widget/SwapWidget.tsx @@ -451,6 +451,7 @@ function SwapWidgetContent( balance: screen.sellTokenBalance, originToken: screen.sellToken, action: screen.mode, + hasEnoughBalance: true, }} preparedQuote={screen.preparedQuote} currency={props.currency} diff --git a/packages/thirdweb/src/react/web/ui/Bridge/types.ts b/packages/thirdweb/src/react/web/ui/Bridge/types.ts index 587a7acb326..442e0126b14 100644 --- a/packages/thirdweb/src/react/web/ui/Bridge/types.ts +++ b/packages/thirdweb/src/react/web/ui/Bridge/types.ts @@ -37,7 +37,8 @@ export type PaymentMethod = payerWallet: Wallet; originToken: TokenWithPrices; balance: bigint; - quote: Quote; + quote?: Quote; + hasEnoughBalance: boolean; } | { type: "fiat";