diff --git a/src/hooks/useSafeStats.ts b/src/hooks/useSafeStats.ts index cf078c991..aa46e7e39 100644 --- a/src/hooks/useSafeStats.ts +++ b/src/hooks/useSafeStats.ts @@ -33,7 +33,7 @@ export const fetchTotalSafesDeployed = async (): Promise => { } export const useSafeStats = (): Array => { - const { totalAssets, totalSafesDeployed, totalTransactions } = useContext(SafeStatsContext) + const { totalTransactions, totalAssets, totalSafesDeployed } = useContext(SafeStatsContext) const formattedTotalTransactions = totalTransactions ? formatValue(totalTransactions) : null const formattedTotalAssets = totalAssets ? '$' + formatValue(totalAssets) : null diff --git a/src/lib/__test__/formatValue.test.ts b/src/lib/__test__/formatValue.test.ts index 39bfea707..5767b4122 100644 --- a/src/lib/__test__/formatValue.test.ts +++ b/src/lib/__test__/formatValue.test.ts @@ -2,10 +2,10 @@ import { formatValue } from '@/lib/formatValue' describe('formatValue', () => { it('formats value in trillions', () => { - expect(formatValue(2308.73e12)).toBe('2309T') - expect(formatValue(508.73e12)).toBe('509T') + expect(formatValue(2308.73e12)).toBe('2308T') + expect(formatValue(508.73e12)).toBe('508T') expect(formatValue(234.23e12)).toBe('234T') - expect(formatValue(9.99e12)).toBe('10T') + expect(formatValue(9.99e12)).toBe('9.9T') expect(formatValue(2e12)).toBe('2T') expect(formatValue(1.23e12)).toBe('1.2T') expect(formatValue(0.75e12)).toBe('750B') @@ -13,9 +13,9 @@ describe('formatValue', () => { it('formats value in billions', () => { expect(formatValue(2318.73e9)).toBe('2.3T') - expect(formatValue(508.73e9)).toBe('509B') + expect(formatValue(508.73e9)).toBe('508B') expect(formatValue(234.23e9)).toBe('234B') - expect(formatValue(9.99e9)).toBe('10B') + expect(formatValue(9.99e9)).toBe('9.9B') expect(formatValue(2e9)).toBe('2B') expect(formatValue(1.23e9)).toBe('1.2B') expect(formatValue(0.75e9)).toBe('750M') @@ -23,9 +23,10 @@ describe('formatValue', () => { it('formats value in millions', () => { expect(formatValue(2318.73e6)).toBe('2.3B') - expect(formatValue(508.73e6)).toBe('509M') + expect(formatValue(508.73e6)).toBe('508M') expect(formatValue(234.23e6)).toBe('234M') - expect(formatValue(9.99e6)).toBe('10M') + expect(formatValue(9.99e6)).toBe('9.9M') + expect(formatValue(4.35e6)).toBe('4.3M') expect(formatValue(2e6)).toBe('2M') expect(formatValue(1.23e6)).toBe('1.2M') expect(formatValue(0.75e6)).toBe('750K') @@ -33,16 +34,16 @@ describe('formatValue', () => { it('formats value in thousands', () => { expect(formatValue(2318.73e3)).toBe('2.3M') - expect(formatValue(508.73e3)).toBe('509K') + expect(formatValue(508.73e3)).toBe('508K') expect(formatValue(234.23e3)).toBe('234K') - expect(formatValue(9.99e3)).toBe('10K') + expect(formatValue(9.99e3)).toBe('9.9K') expect(formatValue(2e3)).toBe('2K') expect(formatValue(1.23e3)).toBe('1.2K') expect(formatValue(0.75e3)).toBe('750') }) it('formats value below 1e3', () => { - expect(formatValue(21599)).toBe('22K') + expect(formatValue(21599)).toBe('21K') expect(formatValue(2999)).toBe('3K') expect(formatValue(123)).toBe('123') }) diff --git a/src/lib/formatValue.ts b/src/lib/formatValue.ts index 50371c35c..8627077b0 100644 --- a/src/lib/formatValue.ts +++ b/src/lib/formatValue.ts @@ -1,7 +1,36 @@ +/** + * Formats the given number in thousands order of magnitude and truncates the decimal part to 1 digit. + * + * @param {number} value - The number to be formatted. + * @returns {string} The formatted string representation of the number. + */ export function formatValue(value: number): string { const numberFormat = new Intl.NumberFormat(undefined, { notation: 'compact', + maximumFractionDigits: 2, }) - return `${numberFormat.format(value)}` + const parts = numberFormat.formatToParts(value) + let integer = '0' + let decimalPart = '' + let compact = '' + + for (const part of parts) { + if (part.type === 'integer') { + integer = part.value + } else if (part.type === 'decimal') { + if (integer.length === 1) { + decimalPart = part.value + } + } else if (part.type === 'fraction') { + if (integer.length === 1) { + // Truncates the fraction part to 1 decimal place if the value has a single integer digit + decimalPart = `${decimalPart}${part.value[0]}` + } + } else if (part.type === 'compact') { + compact = part.value + } + } + + return `${integer}${decimalPart}${compact}` }