frontend: refactor, fixes bugs, add test cases for formatNumber

there was previously a bug where it formats negative 3 digits
negative number (e.g -100) to become -'100. This PR fixes this
as well as adding tests and moved the function to `utils/rates.ts`

frontends/web/src/components/rates/rates.tsx

@@ -47,16 +47,6 @@ export const currenciesWithDisplayName: FiatWithDisplayName[] = [
   { currency: 'BTC', displayName: 'Bitcoin' }
 ];
 
-export function formatNumber(amount: number, maxDigits: number): string {
-  let formatted = amount.toFixed(maxDigits);
-  let position = formatted.indexOf('.') - 3;
-  while (position > 0) {
-    formatted = formatted.slice(0, position) + '\'' + formatted.slice(position);
-    position = position - 3;
-  }
-  return formatted;
-}
-
 type TProvidedProps = {
     amount?: IAmount;
     tableRow?: boolean;

frontends/web/src/routes/account/summary/chart.tsx

@@ -19,12 +19,12 @@ import { Component, createRef, ReactChild } from 'react';
 import { ISummary } from '../../../api/account';
 import { translate, TranslateProps } from '../../../decorators/translate';
 import { Skeleton } from '../../../components/skeleton/skeleton';
-import { formatNumber } from '../../../components/rates/rates';
+import { formatNumber } from '../../../utils/rates';
 import { Amount } from '../../../components/amount/amount';
-import styles from './chart.module.css';
 import Filters from './filters';
 import { getDarkmode } from '../../../components/darkmode/darkmode';
 import { TChartDisplay, TChartFiltersProps } from './types';
+import styles from './chart.module.css';
 
 export interface FormattedLineData extends LineData {
   formattedValue: string;

frontends/web/src/utils/rates.test.tsx

@@ -0,0 +1,43 @@
+import { describe, expect, it } from 'vitest';
+import { formatNumber } from './rates';
+
+describe('rates utils', () => {
+  describe('formatNumber', () => {
+    it('formats positive number without thousand separator', () => {
+      expect(formatNumber(532.12, 2)).toBe('532.12');
+    });
+
+    it('formats positive number with thousand separator', () => {
+      expect(formatNumber(1532.12, 2)).toBe('1\'532.12');
+    });
+
+    it('formats negative number without thousand separator', () => {
+      expect(formatNumber(-532.12, 2)).toBe('-532.12');
+    });
+
+    it('formats negative number with thousand separator', () => {
+      expect(formatNumber(-1532.12, 2)).toBe('-1\'532.12');
+    });
+
+    it('handles zero correctly', () => {
+      expect(formatNumber(0, 2)).toBe('0.00');
+    });
+
+    it('formats number with multiple thousand separators', () => {
+      expect(formatNumber(1234567.89, 2)).toBe('1\'234\'567.89');
+    });
+
+    it('rounds decimal places correctly', () => {
+      expect(formatNumber(1234.5678, 2)).toBe('1\'234.57');
+    });
+
+    it('formats negative number close to zero without separator', () => {
+      expect(formatNumber(-100, 2)).toBe('-100.00');
+    });
+
+    it('formats large negative number with separators', () => {
+      expect(formatNumber(-123456.789, 3)).toBe('-123\'456.789');
+    });
+
+  });
+});

frontends/web/src/utils/rates.ts

@@ -0,0 +1,11 @@
+export function formatNumber(amount: number, maxDigits: number): string {
+  let formatted = amount.toFixed(maxDigits);
+  let position = formatted.indexOf('.') - 3;
+  const start = formatted[0] === '-' ? 1 : 0;
+
+  while (position > start) {
+    formatted = formatted.slice(0, position) + '\'' + formatted.slice(position);
+    position -= 3;
+  }
+  return formatted;
+}