chore: format amounts

MetaMask · Oct 23, 2024 · 919ffee · 919ffee
1 parent ac41e22
commit 919ffee
Show file tree

Hide file tree

Showing 3 changed files with 44 additions and 9 deletions.
diff --git a/ui/pages/bridge/quotes/bridge-quote-card.tsx b/ui/pages/bridge/quotes/bridge-quote-card.tsx
@@ -8,7 +8,11 @@ import {
 } from '../../../components/component-library';
 import { getBridgeQuotes } from '../../../ducks/bridge/selectors';
 import { useI18nContext } from '../../../hooks/useI18nContext';
-import { formatEtaInMinutes } from '../utils/quote';
+import {
+  formatEtaInMinutes,
+  formatFiatAmount,
+  formatTokenAmount,
+} from '../utils/quote';
 import { useCountdownTimer } from '../../../hooks/bridge/useCountdownTimer';
 import MascotBackgroundAnimation from '../../swaps/mascot-background-animation/mascot-background-animation';
 import useBridgeQuotes from '../../../hooks/bridge/useBridgeQuotes';
@@ -66,15 +70,25 @@ export const BridgeQuoteCard = () => {
             label={t('quoteRate')}
             description={`1 ${
               recommendedQuote.quote.srcAsset.symbol
-            } = ${recommendedQuote.swapRate.toFixed(2)}`}
+            } = ${formatTokenAmount(
+              recommendedQuote.swapRate,
+              recommendedQuote.quote.destAsset.symbol,
+            )}`}
           />
         )}
         {totalNetworkFee && (
           <QuoteInfoRow
             label={t('totalFees')}
             tooltipText={t('bridgeTotalFeesTooltipText')}
-            description={totalNetworkFee?.fiat.toFixed(2)}
-            secondaryDescription={totalNetworkFee?.raw.toFixed(6)}
+            description={
+              formatFiatAmount(totalNetworkFee?.fiat, currency) ??
+              formatTokenAmount(totalNetworkFee?.raw, ticker, 6)
+            }
+            secondaryDescription={
+              totalNetworkFee?.fiat
+                ? formatTokenAmount(totalNetworkFee?.raw, ticker, 6)
+                : undefined
+            }
           />
         )}
       </Box>

diff --git a/ui/pages/bridge/quotes/bridge-quotes-modal.tsx b/ui/pages/bridge/quotes/bridge-quotes-modal.tsx
@@ -1,5 +1,6 @@
 import React, { useState } from 'react';
 import { IconName } from '@metamask/snaps-sdk/jsx';
+import { useSelector } from 'react-redux';
 import {
   Box,
   ButtonIcon,
@@ -14,9 +15,10 @@ import {
   TextAlign,
   TextVariant,
 } from '../../../helpers/constants/design-system';
-import { formatEtaInMinutes } from '../utils/quote';
+import { formatEtaInMinutes, formatFiatAmount } from '../utils/quote';
 import { useI18nContext } from '../../../hooks/useI18nContext';
 import useBridgeQuotes from '../../../hooks/bridge/useBridgeQuotes';
+import { getCurrentCurrency } from '../../../selectors';
 
 export const BridgeQuotesModal = ({
   onClose,
@@ -25,6 +27,8 @@ export const BridgeQuotesModal = ({
   const { sortedQuotes } = useBridgeQuotes();
   const t = useI18nContext();
 
+  const currency = useSelector(getCurrentCurrency);
+
   const [, setSortOrder] = useState(t('bridgeOverallCost'));
   return (
     <Modal className="quotes-modal" onClose={onClose} {...modalProps}>
@@ -55,14 +59,21 @@ export const BridgeQuotesModal = ({
           {sortedQuotes.map((quote, index) => {
             return (
               <Box key={index} className="quotes-modal__quotes__row">
-                <Text>{quote.totalNetworkFee.fiat?.toString()}</Text>
+                <Text>
+                  {formatFiatAmount(quote.adjustedReturn.fiat, currency)}
+                </Text>
+                <Text>
+                  {formatFiatAmount(quote.totalNetworkFee?.fiat, currency)}
+                </Text>
                 <Text>
                   {quote.adjustedReturn.fiat && quote.sentAmount.fiat
-                    ? quote.adjustedReturn.fiat
-                        .minus(quote.sentAmount.fiat)
-                        .toFixed(2)
+                    ? `-${formatFiatAmount(
+                        quote.sentAmount.fiat.minus(quote.adjustedReturn.fiat),
+                        currency,
+                      )}`
                     : ''}
                 </Text>
+                <Text>{quote.quote.bridges[0]}</Text>
                 <Text>
                   {t('bridgeTimingMinutes', [
                     formatEtaInMinutes(quote.estimatedProcessingTimeInSeconds),

diff --git a/ui/pages/bridge/utils/quote.ts b/ui/pages/bridge/utils/quote.ts
@@ -2,6 +2,7 @@ import { zeroAddress } from 'ethereumjs-util';
 import BigNumber from 'bignumber.js';
 import { calcTokenAmount } from '../../../../shared/lib/transactions-controller-utils';
 import { Quote, QuoteResponse } from '../types';
+import { formatCurrency } from '../../../helpers/utils/confirm-tx.util';
 
 export const calcToAmount = (
   { destTokenAmount, destAsset }: Quote,
@@ -136,3 +137,12 @@ export const calcSwapRate = (
 
 export const formatEtaInMinutes = (estimatedProcessingTimeInSeconds: number) =>
   (estimatedProcessingTimeInSeconds / 60).toFixed();
+
+export const formatTokenAmount = (
+  amount: BigNumber,
+  symbol: string,
+  precision: number = 2,
+) => `${amount.toFixed(precision)} ${symbol}`;
+
+export const formatFiatAmount = (amount: BigNumber | null, currency: string) =>
+  amount ? formatCurrency(amount.toString(), currency) : undefined;