diff --git a/.changeset/warm-ways-decide.md b/.changeset/warm-ways-decide.md new file mode 100644 index 00000000000..a534560c8b7 --- /dev/null +++ b/.changeset/warm-ways-decide.md @@ -0,0 +1,5 @@ +--- +"thirdweb": patch +--- + +Hide quote value in payment widgets diff --git a/packages/thirdweb/src/react/web/ui/Bridge/payment-selection/FiatProviderSelection.tsx b/packages/thirdweb/src/react/web/ui/Bridge/payment-selection/FiatProviderSelection.tsx index b002c97a7db..681b07f67f3 100644 --- a/packages/thirdweb/src/react/web/ui/Bridge/payment-selection/FiatProviderSelection.tsx +++ b/packages/thirdweb/src/react/web/ui/Bridge/payment-selection/FiatProviderSelection.tsx @@ -12,6 +12,7 @@ import { spacing, } from "../../../../core/design-system/index.js"; import { useBuyWithFiatQuotesForProviders } from "../../../../core/hooks/pay/useBuyWithFiatQuotesForProviders.js"; +import { formatCurrencyAmount } from "../../ConnectWallet/screens/formatTokenBalance.js"; import { Container } from "../../components/basic.js"; import { Button } from "../../components/buttons.js"; import { Img } from "../../components/Img.js"; @@ -164,12 +165,10 @@ export function FiatProviderSelection({ size="sm" style={{ fontWeight: 500 }} > - $ - {quote.currencyAmount.toLocaleString(undefined, { - maximumFractionDigits: 2, - minimumFractionDigits: 2, - })}{" "} - {quote.currency} + {formatCurrencyAmount( + currency || "US", + quote.currencyAmount, + )} {formatNumber( 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 be7940ce646..7b6d54c4492 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 @@ -292,6 +292,7 @@ export function PaymentSelection({ onPaymentMethodSelected={handlePaymentMethodSelected} paymentMethods={suitableTokenPaymentMethods} paymentMethodsLoading={paymentMethodsLoading} + currency={currency} /> )} 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 e889fed9cc5..61ed2566f6c 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 @@ -1,10 +1,14 @@ "use client"; import type { Token } from "../../../../../bridge/types/Token.js"; import type { ThirdwebClient } from "../../../../../client/client.js"; +import type { SupportedFiatCurrency } from "../../../../../pay/convert/type.js"; import { useCustomTheme } from "../../../../core/design-system/CustomThemeProvider.js"; import { radius, spacing } from "../../../../core/design-system/index.js"; import type { PaymentMethod } from "../../../../core/machines/paymentMachine.js"; -import { formatTokenAmount } from "../../ConnectWallet/screens/formatTokenBalance.js"; +import { + formatCurrencyAmount, + formatTokenAmount, +} from "../../ConnectWallet/screens/formatTokenBalance.js"; import { Container } from "../../components/basic.js"; import { Button } from "../../components/buttons.js"; import { Skeleton } from "../../components/Skeleton.js"; @@ -21,6 +25,7 @@ interface TokenSelectionProps { destinationToken: Token; destinationAmount: bigint; feePayer?: "sender" | "receiver"; + currency?: SupportedFiatCurrency; } // Individual payment method token row component @@ -31,12 +36,14 @@ interface PaymentMethodTokenRowProps { client: ThirdwebClient; onPaymentMethodSelected: (paymentMethod: PaymentMethod) => void; feePayer?: "sender" | "receiver"; + currency?: SupportedFiatCurrency; } function PaymentMethodTokenRow({ paymentMethod, client, onPaymentMethodSelected, + currency, }: PaymentMethodTokenRowProps) { const theme = useCustomTheme(); @@ -44,6 +51,7 @@ function PaymentMethodTokenRow({ const hasEnoughBalance = displayOriginAmount ? paymentMethod.balance >= displayOriginAmount : false; + const currencyPrice = paymentMethod.originToken.prices[currency || "USD"]; return (