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;