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)}
+
+ )}
)}