[NO CHANGELOG] [Add Funds Widget] Get token to calculate USD amount (#…

…2278)
immutable · Oct 11, 2024 · ffd8678 · ffd8678
1 parent 244530c
commit ffd8678
Show file tree

Hide file tree

Showing 2 changed files with 39 additions and 6 deletions.
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
@@ -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
@@ -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"
               />
-              <HeroFormControl.Caption>USD $0.00</HeroFormControl.Caption>
+              {amountInUsd > 0 && (
+                <HeroFormControl.Caption>
+                  USD $
+                  {amountInUsd.toFixed(2)}
+                </HeroFormControl.Caption>
+              )}
             </HeroFormControl>
           )}
         </Stack>