[NO CHANGELOG] [Add Tokens Widget] Fix add funds price formatting (#2365

)
immutable · Nov 4, 2024 · 856426e · 856426e
1 parent fe5f852
commit 856426e
Show file tree

Hide file tree

Showing 7 changed files with 36 additions and 19 deletions.
diff --git a/packages/checkout/widgets-lib/src/components/FeesBreakdown/FeesBreakdown.tsx b/packages/checkout/widgets-lib/src/components/FeesBreakdown/FeesBreakdown.tsx
@@ -30,6 +30,7 @@ export function FeesBreakdown({
   loading = false,
 }: FeesBreakdownProps) {
   const { t } = useTranslation();
+
   return (
     <Drawer
       headerBarTitle={t('drawers.feesBreakdown.heading')}

diff --git a/packages/checkout/widgets-lib/src/locales/en.json b/packages/checkout/widgets-lib/src/locales/en.json
@@ -685,6 +685,9 @@
       "geoBlockError": {
         "buyTokenButton": "Buy tokens",
         "bridgeTokenButton": "Bridge tokens"
+      },
+      "fees": {
+        "fiatPricePrefix": "≈ USD"
       }
     }
   },

diff --git a/packages/checkout/widgets-lib/src/widgets/add-tokens/components/RouteFees.tsx b/packages/checkout/widgets-lib/src/widgets/add-tokens/components/RouteFees.tsx
@@ -1,6 +1,7 @@
 import { RouteResponse } from '@0xsquid/squid-types';
 
 import { useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
 import { FeesBreakdown } from '../../../components/FeesBreakdown/FeesBreakdown';
 import { FormattedFee } from '../../swap/functions/swapFees';
 import {
@@ -23,11 +24,13 @@ export function RouteFees({
   totalAmount,
   totalFiatAmount,
 }: RouteFeesProps) {
+  const { t } = useTranslation();
+
   const feeCosts = useMemo<FormattedFee[]>(
     () => routeData?.route.estimate.feeCosts.map((fee) => ({
       label: fee.name,
       amount: getFormattedNumber(fee.amount, fee.token.decimals),
-      fiatAmount: `USD ≈ ${getFormattedAmounts(fee.amountUsd)}`,
+      fiatAmount: `${t('views.ADD_TOKENS.fees.fiatPricePrefix')}${getFormattedAmounts(fee.amountUsd)}`,
       token: {
         name: fee.token.name,
         symbol: fee.token.symbol,
@@ -44,7 +47,7 @@ export function RouteFees({
     () => routeData?.route.estimate.gasCosts.map((fee) => ({
       label: 'Gas (transaction)',
       amount: getFormattedNumber(fee.amount, fee.token.decimals),
-      fiatAmount: `USD ≈ ${getFormattedAmounts(fee.amountUsd)}`,
+      fiatAmount: `${t('views.ADD_TOKENS.fees.fiatPricePrefix')}${getFormattedAmounts(fee.amountUsd)}`,
       token: {
         name: fee.token.name,
         symbol: fee.token.symbol,

diff --git a/packages/checkout/widgets-lib/src/widgets/add-tokens/components/RouteOption.tsx b/packages/checkout/widgets-lib/src/widgets/add-tokens/components/RouteOption.tsx
@@ -10,6 +10,7 @@ import {
   Sticker,
 } from '@biom3/react';
 import { ReactElement, useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
 import { Chain, RouteData } from '../types';
 import { getDurationFormatted } from '../functions/getDurationFormatted';
 import { getTotalRouteFees } from '../functions/getTotalRouteFees';
@@ -39,6 +40,8 @@ export function RouteOption<RC extends ReactElement | undefined = undefined>({
   rc = <span />,
   selected = false,
 }: RouteOptionProps<RC>) {
+  const { t } = useTranslation();
+
   const { fromToken } = routeData.amountData;
   const { estimate } = routeData.route.route;
 
@@ -89,11 +92,11 @@ export function RouteOption<RC extends ReactElement | undefined = undefined>({
         </Sticker>
       )}
 
-      <MenuItem.Caption>{`Balance: USD ${routeBalanceUsd}`}</MenuItem.Caption>
+      <MenuItem.Caption>{`Balance ${t('views.ADD_TOKENS.fees.fiatPricePrefix')} $${routeBalanceUsd}`}</MenuItem.Caption>
 
       <MenuItem.PriceDisplay price={fromAmount}>
         <MenuItem.PriceDisplay.Caption>
-          {`USD $${fromAmountUsd}`}
+          {`${t('views.ADD_TOKENS.fees.fiatPricePrefix')} $${fromAmountUsd}`}
         </MenuItem.PriceDisplay.Caption>
       </MenuItem.PriceDisplay>
 
@@ -135,7 +138,7 @@ export function RouteOption<RC extends ReactElement | undefined = undefined>({
                 sx={{ mr: 'base.spacing.x2' }}
               />
             )}
-            {`Fee ~ USD $${getFormattedAmounts(totalFeesUsd)}`}
+            {`Fee ${t('views.ADD_TOKENS.fees.fiatPricePrefix')} $${getFormattedAmounts(totalFeesUsd)}`}
           </Body>
         </Stack>
       </MenuItem.BottomSlot>

diff --git a/packages/checkout/widgets-lib/src/widgets/add-tokens/components/SelectedRouteOption.tsx b/packages/checkout/widgets-lib/src/widgets/add-tokens/components/SelectedRouteOption.tsx
@@ -10,6 +10,7 @@ import {
 } from 'react';
 
 import { Checkout } from '@imtbl/checkout-sdk';
+import { useTranslation } from 'react-i18next';
 import { Chain, RouteData } from '../types';
 import { getRouteAndTokenBalances } from '../functions/getRouteAndTokenBalances';
 import { getRemoteVideo } from '../../../lib/utils';
@@ -68,6 +69,8 @@ export function SelectedRouteOption({
   showOnrampOption = false,
   onClick,
 }: SelectedRouteOptionProps) {
+  const { t } = useTranslation();
+
   const { fromToken } = routeData?.amountData ?? {};
   const chain = chains?.find((c) => c.id === fromToken?.chainId);
 
@@ -181,11 +184,13 @@ export function SelectedRouteOption({
       >
         <Stack gap="0px">
           <MenuItem.Label>{fromToken?.name}</MenuItem.Label>
-          <MenuItem.Caption>{`Balance USD $${routeBalanceUsd}`}</MenuItem.Caption>
+          <MenuItem.Caption>
+            {`Balance ${t('views.ADD_TOKENS.fees.fiatPricePrefix')} $${routeBalanceUsd}`}
+          </MenuItem.Caption>
         </Stack>
         <MenuItem.PriceDisplay price={fromAmount}>
           <MenuItem.PriceDisplay.Caption>
-            {`USD $${fromAmountUsd}`}
+            {`${t('views.ADD_TOKENS.fees.fiatPricePrefix')} $${fromAmountUsd}`}
           </MenuItem.PriceDisplay.Caption>
         </MenuItem.PriceDisplay>
       </Stack>

diff --git a/packages/checkout/widgets-lib/src/widgets/add-tokens/views/AddTokens.tsx b/packages/checkout/widgets-lib/src/widgets/add-tokens/views/AddTokens.tsx
@@ -30,6 +30,7 @@ import {
 } from 'react';
 import { Web3Provider } from '@ethersproject/providers';
 import { Environment } from '@imtbl/config';
+import { useTranslation } from 'react-i18next';
 import { SimpleLayout } from '../../../components/SimpleLayout/SimpleLayout';
 import { EventTargetContext } from '../../../context/event-target-context/EventTargetContext';
 import {
@@ -113,6 +114,7 @@ export function AddTokens({
 
   const { viewDispatch } = useContext(ViewContext);
   const { track, page } = useAnalytics();
+  const { t } = useTranslation();
 
   const {
     eventTargetState: { eventTarget },
@@ -338,12 +340,12 @@ export function AddTokens({
           setAllowedTokens(updatedTokens);
 
           if (toTokenAddress) {
-            const token = updatedTokens.find(
-              (t) => t.address?.toLowerCase() === toTokenAddress.toLowerCase(),
+            const preselectedToken = updatedTokens.find(
+              (token) => token.address?.toLowerCase() === toTokenAddress.toLowerCase(),
             );
 
-            if (token) {
-              setSelectedToken(token);
+            if (preselectedToken) {
+              setSelectedToken(preselectedToken);
             }
           }
 
@@ -458,10 +460,10 @@ export function AddTokens({
 
   const shouldShowOnRampOption = useMemo(() => {
     if (showOnrampOption && selectedToken) {
-      const token = onRampAllowedTokens.find(
-        (t) => t.address?.toLowerCase() === selectedToken.address?.toLowerCase(),
+      const isAllowedToken = onRampAllowedTokens.find(
+        (token) => token.address?.toLowerCase() === selectedToken.address?.toLowerCase(),
       );
-      return !!token;
+      return !!isAllowedToken;
     }
     return false;
   }, [selectedToken, onRampAllowedTokens, showOnrampOption]);
@@ -639,8 +641,8 @@ export function AddTokens({
               />
 
               <HeroFormControl.Caption>
-                USD $
-                {getFormattedNumberWithDecimalPlaces(selectedAmountUsd)}
+                {`${t('views.ADD_TOKENS.fees.fiatPricePrefix')} 
+                $${getFormattedNumberWithDecimalPlaces(selectedAmountUsd)}`}
               </HeroFormControl.Caption>
             </HeroFormControl>
           )}

diff --git a/packages/checkout/widgets-lib/src/widgets/add-tokens/views/Review.tsx b/packages/checkout/widgets-lib/src/widgets/add-tokens/views/Review.tsx
@@ -193,7 +193,7 @@ export function Review({
           }}
         >
           Included fees
-          {` USD $${getFormattedAmounts(totalFeesUsd)}`}
+          {` ${t('views.ADD_TOKENS.fees.fiatPricePrefix')} $${getFormattedAmounts(totalFeesUsd)}`}
           <Icon
             icon="ChevronExpand"
             sx={{ ml: 'base.spacing.x2', w: 'base.icon.size.200' }}
@@ -485,7 +485,7 @@ export function Review({
                   sx={{ flexShrink: 0, alignSelf: 'flex-start' }}
                 >
                   <PriceDisplay.Caption size="small">
-                    {`USD $${route?.route.estimate.fromAmountUSD ?? ''}`}
+                    {`${t('views.ADD_TOKENS.fees.fiatPricePrefix')} $${route?.route.estimate.fromAmountUSD ?? ''}`}
                   </PriceDisplay.Caption>
                 </PriceDisplay>
               </Stack>
@@ -626,7 +626,7 @@ export function Review({
                   sx={{ flexShrink: 0, alignSelf: 'flex-start' }}
                 >
                   <PriceDisplay.Caption size="small">
-                    {`USD $${route?.route.estimate.toAmountUSD ?? ''}`}
+                    {`${t('views.ADD_TOKENS.fees.fiatPricePrefix')} $${route?.route.estimate.toAmountUSD ?? ''}`}
                   </PriceDisplay.Caption>
                 </PriceDisplay>
               </Stack>