Skip to content

Commit 1f6bb7c

Browse files
[SDK] feat: Add fiat value display to buy token input (#6193)
1 parent 30e13e6 commit 1f6bb7c

File tree

6 files changed

+77
-4
lines changed

6 files changed

+77
-4
lines changed

.changeset/nice-seas-march.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"thirdweb": patch
3+
---
4+
5+
Show fiat amount in PayEmbed main screen

packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/BuyScreen.tsx

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -52,7 +52,6 @@ import {
5252
useToTokenSelectionStates,
5353
} from "./main/useUISelectionStates.js";
5454
import { BuyTokenInput } from "./swap/BuyTokenInput.js";
55-
import {} from "./swap/Fees.js";
5655
import { PaymentSelectionScreen } from "./swap/PaymentSelectionScreen.js";
5756
import { SwapFlow } from "./swap/SwapFlow.js";
5857
import { SwapScreenContent } from "./swap/SwapScreenContent.js";

packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/swap/BuyTokenInput.tsx

Lines changed: 12 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@ import { Text } from "../../../../components/text.js";
1919
import { TokenSymbol } from "../../../../components/token/TokenSymbol.js";
2020
import type { ERC20OrNativeToken } from "../../nativeToken.js";
2121
import { getBuyTokenAmountFontSize } from "../utils.js";
22+
import { FiatValue } from "./FiatValue.js";
2223

2324
/**
2425
* @internal
@@ -35,7 +36,6 @@ export function BuyTokenInput(props: {
3536
freezeChainAndToken?: boolean;
3637
}) {
3738
const { name } = useChainName(props.chain);
38-
3939
const getWidth = () => {
4040
let chars = props.value.replace(".", "").length;
4141
const hasDot = props.value.includes(".");
@@ -122,9 +122,19 @@ export function BuyTokenInput(props: {
122122
</Container>
123123
</div>
124124

125+
<Container flex="row" center="both">
126+
<FiatValue
127+
tokenAmount={props.value}
128+
token={props.token}
129+
chain={props.chain}
130+
client={props.client}
131+
size="md"
132+
/>
133+
</Container>
134+
125135
{!props.hideTokenSelector && (
126136
<>
127-
<Spacer y="sm" />
137+
<Spacer y="md" />
128138

129139
{/* Token / Chain selector */}
130140
<Container flex="row" center="x">
Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
import { useQuery } from "@tanstack/react-query";
2+
import type { Chain } from "../../../../../../../chains/types.js";
3+
import type { ThirdwebClient } from "../../../../../../../client/client.js";
4+
import { convertCryptoToFiat } from "../../../../../../../pay/convert/cryptoToFiat.js";
5+
import { formatNumber } from "../../../../../../../utils/formatNumber.js";
6+
import { fontSize } from "../../../../../../core/design-system/index.js";
7+
import { Skeleton } from "../../../../components/Skeleton.js";
8+
import { Text } from "../../../../components/text.js";
9+
import type { TextProps } from "../../../../components/text.js";
10+
import { useDebouncedValue } from "../../../../hooks/useDebouncedValue.js";
11+
import type { ERC20OrNativeToken } from "../../nativeToken.js";
12+
import { getTokenAddress } from "../../nativeToken.js";
13+
14+
export function FiatValue(
15+
props: {
16+
tokenAmount: string;
17+
token: ERC20OrNativeToken;
18+
chain: Chain;
19+
client: ThirdwebClient;
20+
} & TextProps,
21+
) {
22+
const deferredTokenAmount = useDebouncedValue(props.tokenAmount, 500);
23+
const cryptoToFiatQuery = useQuery({
24+
queryKey: [
25+
"cryptoToFiat",
26+
props.chain.id,
27+
getTokenAddress(props.token),
28+
deferredTokenAmount,
29+
],
30+
queryFn: () =>
31+
convertCryptoToFiat({
32+
client: props.client,
33+
chain: props.chain,
34+
fromTokenAddress: getTokenAddress(props.token),
35+
fromAmount: Number(deferredTokenAmount),
36+
to: "USD",
37+
}),
38+
});
39+
40+
if (cryptoToFiatQuery.isLoading) {
41+
return <Skeleton width={"50px"} height={fontSize.lg} />;
42+
}
43+
44+
return (
45+
<Text {...props}>
46+
{cryptoToFiatQuery.data?.result
47+
? `$${formatNumber(cryptoToFiatQuery.data.result, 2)}`
48+
: "$0.00"}
49+
</Text>
50+
);
51+
}

packages/thirdweb/src/react/web/ui/ConnectWallet/screens/nativeToken.ts

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import { NATIVE_TOKEN_ADDRESS } from "../../../../../constants/addresses.js";
2+
import { type Address, getAddress } from "../../../../../utils/address.js";
23
import type { TokenInfo } from "../../../../core/utils/defaultTokens.js";
34

45
export type NativeToken = { nativeToken: true };
@@ -17,4 +18,11 @@ export function isNativeToken(
1718
);
1819
}
1920

21+
export function getTokenAddress(token: TokenInfo | NativeToken): Address {
22+
if (isNativeToken(token)) {
23+
return NATIVE_TOKEN_ADDRESS;
24+
}
25+
return getAddress(token.address);
26+
}
27+
2028
export type ERC20OrNativeToken = TokenInfo | NativeToken;

packages/thirdweb/src/react/web/ui/components/text.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { useCustomTheme } from "../../../core/design-system/CustomThemeProvider.
33
import { type Theme, fontSize } from "../../../core/design-system/index.js";
44
import { StyledAnchor, StyledSpan } from "../design-system/elements.js";
55

6-
type TextProps = {
6+
export type TextProps = {
77
theme?: Theme;
88
color?: keyof Theme["colors"];
99
center?: boolean;

0 commit comments

Comments
 (0)