[SDK] feat: Add fiat value display to buy token input (#6193)

Author: joaquim-verges

.changeset/nice-seas-march.md

@@ -0,0 +1,5 @@
+---
+"thirdweb": patch
+---
+
+Show fiat amount in PayEmbed main screen

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";

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: {
         </Container>
       </div>
 
+      <Container flex="row" center="both">
+        <FiatValue
+          tokenAmount={props.value}
+          token={props.token}
+          chain={props.chain}
+          client={props.client}
+          size="md"
+        />
+      </Container>
+
       {!props.hideTokenSelector && (
         <>
-          <Spacer y="sm" />
+          <Spacer y="md" />
 
           {/* Token / Chain selector */}
           <Container flex="row" center="x">

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 <Skeleton width={"50px"} height={fontSize.lg} />;
+  }
+
+  return (
+    <Text {...props}>
+      {cryptoToFiatQuery.data?.result
+        ? `$${formatNumber(cryptoToFiatQuery.data.result, 2)}`
+        : "$0.00"}
+    </Text>
+  );
+}

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;

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;