diff --git a/.changeset/nice-seas-march.md b/.changeset/nice-seas-march.md new file mode 100644 index 00000000000..b4a3431e865 --- /dev/null +++ b/.changeset/nice-seas-march.md @@ -0,0 +1,5 @@ +--- +"thirdweb": patch +--- + +Show fiat amount in PayEmbed main screen 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 6b4b6d10748..c7189a08378 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 @@ -52,7 +52,6 @@ import { useToTokenSelectionStates, } from "./main/useUISelectionStates.js"; import { BuyTokenInput } from "./swap/BuyTokenInput.js"; -import {} from "./swap/Fees.js"; import { PaymentSelectionScreen } from "./swap/PaymentSelectionScreen.js"; import { SwapFlow } from "./swap/SwapFlow.js"; import { SwapScreenContent } from "./swap/SwapScreenContent.js"; diff --git a/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/swap/BuyTokenInput.tsx b/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/swap/BuyTokenInput.tsx index 9d9ee56aaaf..ed6c6d9583d 100644 --- a/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/swap/BuyTokenInput.tsx +++ b/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/swap/BuyTokenInput.tsx @@ -19,6 +19,7 @@ import { Text } from "../../../../components/text.js"; import { TokenSymbol } from "../../../../components/token/TokenSymbol.js"; import type { ERC20OrNativeToken } from "../../nativeToken.js"; import { getBuyTokenAmountFontSize } from "../utils.js"; +import { FiatValue } from "./FiatValue.js"; /** * @internal @@ -35,7 +36,6 @@ export function BuyTokenInput(props: { freezeChainAndToken?: boolean; }) { const { name } = useChainName(props.chain); - const getWidth = () => { let chars = props.value.replace(".", "").length; const hasDot = props.value.includes("."); @@ -122,9 +122,19 @@ export function BuyTokenInput(props: { + + + + {!props.hideTokenSelector && ( <> - + {/* Token / Chain selector */} diff --git a/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/swap/FiatValue.tsx b/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/swap/FiatValue.tsx new file mode 100644 index 00000000000..a428304c073 --- /dev/null +++ b/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/swap/FiatValue.tsx @@ -0,0 +1,51 @@ +import { useQuery } from "@tanstack/react-query"; +import type { Chain } from "../../../../../../../chains/types.js"; +import type { ThirdwebClient } from "../../../../../../../client/client.js"; +import { convertCryptoToFiat } from "../../../../../../../pay/convert/cryptoToFiat.js"; +import { formatNumber } from "../../../../../../../utils/formatNumber.js"; +import { fontSize } from "../../../../../../core/design-system/index.js"; +import { Skeleton } from "../../../../components/Skeleton.js"; +import { Text } from "../../../../components/text.js"; +import type { TextProps } from "../../../../components/text.js"; +import { useDebouncedValue } from "../../../../hooks/useDebouncedValue.js"; +import type { ERC20OrNativeToken } from "../../nativeToken.js"; +import { getTokenAddress } from "../../nativeToken.js"; + +export function FiatValue( + props: { + tokenAmount: string; + token: ERC20OrNativeToken; + chain: Chain; + client: ThirdwebClient; + } & TextProps, +) { + const deferredTokenAmount = useDebouncedValue(props.tokenAmount, 500); + const cryptoToFiatQuery = useQuery({ + queryKey: [ + "cryptoToFiat", + props.chain.id, + getTokenAddress(props.token), + deferredTokenAmount, + ], + queryFn: () => + convertCryptoToFiat({ + client: props.client, + chain: props.chain, + fromTokenAddress: getTokenAddress(props.token), + fromAmount: Number(deferredTokenAmount), + to: "USD", + }), + }); + + if (cryptoToFiatQuery.isLoading) { + return ; + } + + return ( + + {cryptoToFiatQuery.data?.result + ? `$${formatNumber(cryptoToFiatQuery.data.result, 2)}` + : "$0.00"} + + ); +} diff --git a/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/nativeToken.ts b/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/nativeToken.ts index 30883e66362..087e5f86ea8 100644 --- a/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/nativeToken.ts +++ b/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/nativeToken.ts @@ -1,4 +1,5 @@ import { NATIVE_TOKEN_ADDRESS } from "../../../../../constants/addresses.js"; +import { type Address, getAddress } from "../../../../../utils/address.js"; import type { TokenInfo } from "../../../../core/utils/defaultTokens.js"; export type NativeToken = { nativeToken: true }; @@ -17,4 +18,11 @@ export function isNativeToken( ); } +export function getTokenAddress(token: TokenInfo | NativeToken): Address { + if (isNativeToken(token)) { + return NATIVE_TOKEN_ADDRESS; + } + return getAddress(token.address); +} + export type ERC20OrNativeToken = TokenInfo | NativeToken; diff --git a/packages/thirdweb/src/react/web/ui/components/text.tsx b/packages/thirdweb/src/react/web/ui/components/text.tsx index d20b72ef883..6fcd87395cc 100644 --- a/packages/thirdweb/src/react/web/ui/components/text.tsx +++ b/packages/thirdweb/src/react/web/ui/components/text.tsx @@ -3,7 +3,7 @@ import { useCustomTheme } from "../../../core/design-system/CustomThemeProvider. import { type Theme, fontSize } from "../../../core/design-system/index.js"; import { StyledAnchor, StyledSpan } from "../design-system/elements.js"; -type TextProps = { +export type TextProps = { theme?: Theme; color?: keyof Theme["colors"]; center?: boolean;