Fix suggestions

ui/hooks/useFiatFormatter.test.ts

@@ -40,32 +40,36 @@ describe('useFiatFormatter', () => {
       mockGetIntlLocale.mockReturnValue('en-US');
       mockGetCurrentCurrency.mockReturnValue('USD');
 
-      const { result } = renderHook(() => useFiatFormatter(true));
+      const { result } = renderHook(() => useFiatFormatter());
       const formatFiat = result.current;
 
-      expect(formatFiat(100000000000000000)).toBe('$100,000,000,...');
+      expect(formatFiat(100000000000000000, { shorten: true })).toBe(
+        '$100,000,000,...',
+      );
     });
 
     it('when currency symbol on the right for given locale', () => {
       mockGetIntlLocale.mockReturnValue('es-ES');
       mockGetCurrentCurrency.mockReturnValue('EUR');
 
-      const { result } = renderHook(() => useFiatFormatter(true));
+      const { result } = renderHook(() => useFiatFormatter());
       const formatFiat = result.current;
 
-      expect(formatFiat(100000000000000000)).toBe('100.000.000....€');
+      expect(formatFiat(100000000000000000, { shorten: true })).toBe(
+        '100.000.000....€',
+      );
     });
 
     it('handle unknown currencies by returning amount followed by currency code', () => {
       mockGetCurrentCurrency.mockReturnValue('storj');
       mockGetIntlLocale.mockReturnValue('en-US');
 
-      const { result } = renderHook(() => useFiatFormatter(true));
+      const { result } = renderHook(() => useFiatFormatter());
       const formatFiat = result.current;
 
-      expect(formatFiat(100000)).toBe('100,000 storj');
-      expect(formatFiat(500.5)).toBe('500.5 storj');
-      expect(formatFiat(0)).toBe('0 storj');
+      expect(formatFiat(100000, { shorten: true })).toBe('100,000 storj');
+      expect(formatFiat(500.5, { shorten: true })).toBe('500.5 storj');
+      expect(formatFiat(0, { shorten: true })).toBe('0 storj');
     });
   });
 

ui/hooks/useFiatFormatter.ts

@@ -5,16 +5,16 @@ import { shortenString } from '../helpers/utils/util';
 
 /**
  * Returns a function that formats a fiat amount as a localized string.
- * The hook takes an optional boolean parameter to shorten the fiat value.
+ * The hook takes an optional options object to configure the formatting.
  *
  * Example usage:
  *
  * ```
  * const formatFiat = useFiatFormatter();
  * const formattedAmount = formatFiat(1000);
  *
- * const shorteningFiatFormatter = useFiatFormatter(true);
- * const shortenedAmount = shorteningFiatFormatter(100000000000000000);
+ * const shorteningFiatFormatter = useFiatFormatter();
+ * const shortenedAmount = shorteningFiatFormatter(100000000000000000, { shorten: true });
  * ```
  *
  * @returns A function that takes a fiat amount as a number and returns a formatted string.
@@ -23,20 +23,29 @@ import { shortenString } from '../helpers/utils/util';
 const TRUNCATED_CHAR_LIMIT_FOR_SHORTENED_FIAT = 15;
 const TRUNCATED_START_CHARS_FOR_SHORTENED_FIAT = 12;
 
-type FiatFormatter = (fiatAmount: number) => string;
+type FiatFormatterOptions = {
+  shorten?: boolean;
+};
+
+type FiatFormatter = (
+  fiatAmount: number,
+  options?: FiatFormatterOptions,
+) => string;
 
-export const useFiatFormatter = (shortenFiatValue?: boolean): FiatFormatter => {
+export const useFiatFormatter = (): FiatFormatter => {
   const locale = useSelector(getIntlLocale);
   const fiatCurrency = useSelector(getCurrentCurrency);
 
-  return (fiatAmount: number) => {
+  return (fiatAmount: number, options: FiatFormatterOptions = {}) => {
+    const { shorten } = options;
+
     try {
       const formatter = new Intl.NumberFormat(locale, {
         style: 'currency',
         currency: fiatCurrency,
       });
 
-      if (!shortenFiatValue) {
+      if (!shorten) {
         return formatter.format(fiatAmount);
       }
 
@@ -80,7 +89,7 @@ export const useFiatFormatter = (shortenFiatValue?: boolean): FiatFormatter => {
         skipCharacterInEnd: true,
       });
 
-      if (shortenFiatValue) {
+      if (shorten) {
         return `${shortenedNumberString} ${fiatCurrency}`;
       }
       return `${formattedNumber} ${fiatCurrency}`;

ui/pages/confirmations/components/confirm/info/typed-sign/permit-simulation/permit-simulation.tsx

@@ -103,7 +103,7 @@ const PermitSimulation: React.FC<{
           </Box>
           <Box>
             {fiatValue && (
-              <IndividualFiatDisplay fiatAmount={fiatValue} shortenFiatValue />
+              <IndividualFiatDisplay fiatAmount={fiatValue} shorten />
             )}
           </Box>
         </Box>

ui/pages/confirmations/components/simulation-details/fiat-display.tsx

@@ -32,15 +32,16 @@ export function calculateTotalFiat(fiatAmounts: FiatAmount[]): number {
 /**
  * Displays the fiat value of a single balance change.
  *
- * @param props
- * @param props.fiatAmount
+ * @param props - The props object.
+ * @param props.fiatAmount - The fiat amount to display.
+ * @param props.shorten - Whether to shorten the fiat amount.
  */
 export const IndividualFiatDisplay: React.FC<{
   fiatAmount: FiatAmount;
-  shortenFiatValue?: boolean;
-}> = ({ fiatAmount, shortenFiatValue = false }) => {
+  shorten?: boolean;
+}> = ({ fiatAmount, shorten = false }) => {
   const hideFiatForTestnet = useHideFiatForTestnet();
-  const fiatFormatter = useFiatFormatter(shortenFiatValue);
+  const fiatFormatter = useFiatFormatter();
 
   if (hideFiatForTestnet) {
     return null;
@@ -51,7 +52,7 @@ export const IndividualFiatDisplay: React.FC<{
   }
   const absFiat = Math.abs(fiatAmount);
 
-  return <Text {...textStyle}>{fiatFormatter(absFiat)}</Text>;
+  return <Text {...textStyle}>{fiatFormatter(absFiat, { shorten })}</Text>;
 };
 
 /**