diff --git a/packages/checkout/widgets-lib/src/widgets/add-funds/functions/convertToUsd.ts b/packages/checkout/widgets-lib/src/widgets/add-funds/functions/convertToUsd.ts new file mode 100644 index 0000000000..34111506d0 --- /dev/null +++ b/packages/checkout/widgets-lib/src/widgets/add-funds/functions/convertToUsd.ts @@ -0,0 +1,26 @@ +import { ChainId, type TokenInfo } from '@imtbl/checkout-sdk'; +import { Token } from '../types'; +import { SQUID_NATIVE_TOKEN } from '../utils/config'; + +export function convertToUsd( + tokens: Token[] | null, + amount: string, + token: TokenInfo | undefined, +): number { + if (!tokens || !amount || !token?.address) { + return 0; + } + + const address = token.address === 'native' ? SQUID_NATIVE_TOKEN : token.address; + + const toToken = tokens.find( + (value) => value.address.toLowerCase() === address.toLowerCase() + && value.chainId === ChainId.IMTBL_ZKEVM_MAINNET.toString(), + ); + + if (!toToken) { + return 0; + } + + return Number(amount) * toToken.usdPrice; +} diff --git a/packages/checkout/widgets-lib/src/widgets/add-funds/views/AddFunds.tsx b/packages/checkout/widgets-lib/src/widgets/add-funds/views/AddFunds.tsx index 14f74e8d14..14838272a6 100644 --- a/packages/checkout/widgets-lib/src/widgets/add-funds/views/AddFunds.tsx +++ b/packages/checkout/widgets-lib/src/widgets/add-funds/views/AddFunds.tsx @@ -1,15 +1,12 @@ import { + Body, ButtCon, - // Button, - // FramedIcon, FramedImage, HeroFormControl, HeroTextInput, + MenuItem, OverflowDrawerMenu, Stack, - Body, - // Box, - MenuItem, } from '@biom3/react'; import debounce from 'lodash.debounce'; import { @@ -45,6 +42,7 @@ import { useRoutes } from '../hooks/useRoutes'; import { SQUID_NATIVE_TOKEN } from '../utils/config'; import { AddFundsWidgetViews } from '../../../context/view-context/AddFundsViewContextTypes'; import type { RouteData } from '../types'; +import { convertToUsd } from '../functions/convertToUsd'; import { validateToAmount } from '../functions/amountValidation'; interface AddFundsProps { @@ -94,6 +92,10 @@ export function AddFunds({ const [currentToTokenAddress, setCurrentToTokenAddress] = useState< TokenInfo | undefined >(); + const amountInUsd = useMemo( + () => convertToUsd(tokens, inputValue, currentToTokenAddress), + [tokens, inputValue, currentToTokenAddress], + ); const debouncedUpdateAmount = debounce((value: string) => { setDebouncedToAmount(value); @@ -402,7 +404,12 @@ export function AddFunds({ placeholder="0" maxTextSize="xLarge" /> - USD $0.00 + {amountInUsd > 0 && ( + + USD $ + {amountInUsd.toFixed(2)} + + )} )}