diff --git a/ui/helpers/utils/util.js b/ui/helpers/utils/util.js
index 921643b9e83b..825fcd384e76 100644
--- a/ui/helpers/utils/util.js
+++ b/ui/helpers/utils/util.js
@@ -247,24 +247,30 @@ export function getRandomFileName() {
* @param {number} options.truncatedCharLimit - The maximum length of the string.
* @param {number} options.truncatedStartChars - The number of characters to preserve at the beginning.
* @param {number} options.truncatedEndChars - The number of characters to preserve at the end.
+ * @param {boolean} options.skipCharacterInEnd - Skip the character at the end.
* @returns {string} The shortened string.
*/
export function shortenString(
stringToShorten = '',
- { truncatedCharLimit, truncatedStartChars, truncatedEndChars } = {
+ {
+ truncatedCharLimit,
+ truncatedStartChars,
+ truncatedEndChars,
+ skipCharacterInEnd,
+ } = {
truncatedCharLimit: TRUNCATED_NAME_CHAR_LIMIT,
truncatedStartChars: TRUNCATED_ADDRESS_START_CHARS,
truncatedEndChars: TRUNCATED_ADDRESS_END_CHARS,
+ skipCharacterInEnd: false,
},
) {
if (stringToShorten.length < truncatedCharLimit) {
return stringToShorten;
}
- return `${stringToShorten.slice(
- 0,
- truncatedStartChars,
- )}...${stringToShorten.slice(-truncatedEndChars)}`;
+ return `${stringToShorten.slice(0, truncatedStartChars)}...${
+ skipCharacterInEnd ? '' : stringToShorten.slice(-truncatedEndChars)
+ }`;
}
/**
diff --git a/ui/helpers/utils/util.test.js b/ui/helpers/utils/util.test.js
index 76811f432f81..2ad0db6e50a0 100644
--- a/ui/helpers/utils/util.test.js
+++ b/ui/helpers/utils/util.test.js
@@ -1081,5 +1081,16 @@ describe('util', () => {
}),
).toStrictEqual('0x12...7890');
});
+
+ it('should shorten the string and remove all characters from the end if skipCharacterInEnd is true', () => {
+ expect(
+ util.shortenString('0x1234567890123456789012345678901234567890', {
+ truncatedCharLimit: 10,
+ truncatedStartChars: 4,
+ truncatedEndChars: 4,
+ skipCharacterInEnd: true,
+ }),
+ ).toStrictEqual('0x12...');
+ });
});
});
diff --git a/ui/hooks/useFiatFormatter.test.ts b/ui/hooks/useFiatFormatter.test.ts
index bf7fc670b5ed..7ab5c4b22a8e 100644
--- a/ui/hooks/useFiatFormatter.test.ts
+++ b/ui/hooks/useFiatFormatter.test.ts
@@ -35,6 +35,40 @@ describe('useFiatFormatter', () => {
expect(formatFiat(0)).toBe('$0.00');
});
+ describe('shorten the fiat', () => {
+ it('when currency symbol on the left for given locale', () => {
+ mockGetIntlLocale.mockReturnValue('en-US');
+ mockGetCurrentCurrency.mockReturnValue('USD');
+
+ const { result } = renderHook(() => useFiatFormatter(true));
+ const formatFiat = result.current;
+
+ expect(formatFiat(100000000000000000)).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 formatFiat = result.current;
+
+ expect(formatFiat(100000000000000000)).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 formatFiat = result.current;
+
+ expect(formatFiat(100000)).toBe('100,000 storj');
+ expect(formatFiat(500.5)).toBe('500.5 storj');
+ expect(formatFiat(0)).toBe('0 storj');
+ });
+ });
+
it('should use the current locale and currency from the mocked functions', () => {
mockGetIntlLocale.mockReturnValue('fr-FR');
mockGetCurrentCurrency.mockReturnValue('EUR');
@@ -47,12 +81,13 @@ describe('useFiatFormatter', () => {
it('should gracefully handle unknown currencies by returning amount followed by currency code', () => {
mockGetCurrentCurrency.mockReturnValue('storj');
+ mockGetIntlLocale.mockReturnValue('en-US');
const { result } = renderHook(() => useFiatFormatter());
const formatFiat = result.current;
// Testing the fallback formatting for an unknown currency
- expect(formatFiat(1000)).toBe('1000 storj');
+ expect(formatFiat(100000)).toBe('100,000 storj');
expect(formatFiat(500.5)).toBe('500.5 storj');
expect(formatFiat(0)).toBe('0 storj');
});
diff --git a/ui/hooks/useFiatFormatter.ts b/ui/hooks/useFiatFormatter.ts
index 0f5e37151670..66b01abb8841 100644
--- a/ui/hooks/useFiatFormatter.ts
+++ b/ui/hooks/useFiatFormatter.ts
@@ -1,6 +1,7 @@
import { useSelector } from 'react-redux';
import { getIntlLocale } from '../ducks/locale/locale';
import { getCurrentCurrency } from '../selectors';
+import { shortenString } from '../helpers/utils/util';
/**
* Returns a function that formats a fiat amount as a localized string.
@@ -17,19 +18,65 @@ import { getCurrentCurrency } from '../selectors';
type FiatFormatter = (fiatAmount: number) => string;
-export const useFiatFormatter = (): FiatFormatter => {
+export const useFiatFormatter = (shortenFiatValue?: boolean): FiatFormatter => {
const locale = useSelector(getIntlLocale);
const fiatCurrency = useSelector(getCurrentCurrency);
return (fiatAmount: number) => {
try {
- return new Intl.NumberFormat(locale, {
+ const formatter = new Intl.NumberFormat(locale, {
style: 'currency',
currency: fiatCurrency,
- }).format(fiatAmount);
+ });
+
+ if (!shortenFiatValue) {
+ return formatter.format(fiatAmount);
+ }
+
+ const parts = formatter.formatToParts(fiatAmount);
+
+ let currencySymbol = '';
+ let numberString = '';
+
+ parts.forEach((part) => {
+ if (part.type === 'currency') {
+ currencySymbol += part.value;
+ } else {
+ numberString += part.value;
+ }
+ });
+
+ // Shorten the number part while preserving commas
+ const shortenedNumberString = shortenString(numberString, {
+ truncatedCharLimit: 15,
+ truncatedStartChars: 12,
+ truncatedEndChars: 0,
+ skipCharacterInEnd: true,
+ });
+
+ // Determine the position of the currency symbol
+ const currencyBeforeNumber =
+ parts.findIndex((part) => part.type === 'currency') <
+ parts.findIndex((part) => part.type === 'integer');
+
+ // Reassemble the formatted string
+ return currencyBeforeNumber
+ ? `${currencySymbol}${shortenedNumberString}`
+ : `${shortenedNumberString}${currencySymbol}`;
} catch (error) {
// Fallback for unknown or unsupported currencies
- return `${fiatAmount} ${fiatCurrency}`;
+ const formattedNumber = new Intl.NumberFormat(locale).format(fiatAmount);
+ const shortenedNumberString = shortenString(formattedNumber, {
+ truncatedCharLimit: 15,
+ truncatedStartChars: 12,
+ truncatedEndChars: 0,
+ skipCharacterInEnd: true,
+ });
+
+ if (shortenFiatValue) {
+ return `${shortenedNumberString} ${fiatCurrency}`;
+ }
+ return `${formattedNumber} ${fiatCurrency}`;
}
};
};
diff --git a/ui/pages/confirmations/components/confirm/info/typed-sign/permit-simulation/permit-simulation.tsx b/ui/pages/confirmations/components/confirm/info/typed-sign/permit-simulation/permit-simulation.tsx
index e4cbed8c83a3..154cbdb041be 100644
--- a/ui/pages/confirmations/components/confirm/info/typed-sign/permit-simulation/permit-simulation.tsx
+++ b/ui/pages/confirmations/components/confirm/info/typed-sign/permit-simulation/permit-simulation.tsx
@@ -102,7 +102,9 @@ const PermitSimulation: React.FC<{
- {fiatValue && }
+ {fiatValue && (
+
+ )}
diff --git a/ui/pages/confirmations/components/simulation-details/fiat-display.tsx b/ui/pages/confirmations/components/simulation-details/fiat-display.tsx
index 5143cd5ed06b..142e57a8c2e1 100644
--- a/ui/pages/confirmations/components/simulation-details/fiat-display.tsx
+++ b/ui/pages/confirmations/components/simulation-details/fiat-display.tsx
@@ -35,11 +35,12 @@ export function calculateTotalFiat(fiatAmounts: FiatAmount[]): number {
* @param props
* @param props.fiatAmount
*/
-export const IndividualFiatDisplay: React.FC<{ fiatAmount: FiatAmount }> = ({
- fiatAmount,
-}) => {
+export const IndividualFiatDisplay: React.FC<{
+ fiatAmount: FiatAmount;
+ shortenFiatValue?: boolean;
+}> = ({ fiatAmount, shortenFiatValue = false }) => {
const hideFiatForTestnet = useHideFiatForTestnet();
- const fiatFormatter = useFiatFormatter();
+ const fiatFormatter = useFiatFormatter(shortenFiatValue);
if (hideFiatForTestnet) {
return null;