use uniform Number formatting methods

Author: ckeshava

public/locales/en-US/translations.json

@@ -848,7 +848,7 @@
   "depositors": "Depositors",
   "percent_of_supply": "% of Supply",
   "value": "Value",
-  "currency_toggle_help": "Toggle to view values in Native-Currency or USD",
+  "currency_toggle_help": "Toggle to view values in native-currency or USD",
   "currency_toggle_loading": "Loading USD conversion rate...",
   "currency_toggle_unavailable": "USD conversion not available for this token"
 }

src/containers/Vault/VaultLoans/LoanRow.tsx

@@ -3,7 +3,7 @@ import { useTranslation } from 'react-i18next'
 import { Account } from '../../shared/components/Account'
 import { useLanguage } from '../../shared/hooks'
 import { useTokenToUSDRate } from '../../shared/hooks/useTokenToUSDRate'
-import { localizeNumber } from '../../shared/utils'
+import { parseAmount } from '../../shared/NumberFormattingUtils'
 import {
   formatRate,
   formatPaymentInterval,
@@ -78,10 +78,7 @@ export const LoanRow = ({
     }
 
     const prefix = displayCurrency === 'USD' ? '$' : ''
-    return `${prefix}${localizeNumber(displayNum, language, {
-      minimumFractionDigits: 2,
-      maximumFractionDigits: 2,
-    })} ${currency}`
+    return `${prefix}${parseAmount(displayNum, 1, language)} ${currency}`
   }
 
   const formatFee = (fee: string | number): string => {
@@ -100,10 +97,7 @@ export const LoanRow = ({
     }
 
     const prefix = displayCurrency === 'USD' ? '$' : ''
-    return `${prefix}${localizeNumber(displayNum, language, {
-      minimumFractionDigits: 0,
-      maximumFractionDigits: 2,
-    })} ${currency}`
+    return `${prefix}${parseAmount(displayNum, 1, language)} ${currency}`
   }
 
   const formatGracePeriod = (seconds: number): string => {

src/containers/Vault/VaultLoans/test/utils.test.ts

@@ -36,21 +36,21 @@ describe('VaultLoans Utils', () => {
   describe('formatRate', () => {
     it('converts 1/10th basis points to percentage', () => {
       // 500 / 1000 = 0.5%
-      expect(formatRate(500)).toBe('0.500%')
+      expect(formatRate(500)).toBe('0.50%')
     })
 
     it('handles zero rate', () => {
-      expect(formatRate(0)).toBe('0.000%')
+      expect(formatRate(0)).toBe('0.00%')
     })
 
     it('handles small rates (less than 1 basis point)', () => {
       // 1 / 1000 = 0.001%
-      expect(formatRate(1)).toBe('0.001%')
+      expect(formatRate(1)).toBe('0.00%')
     })
 
     it('handles large rates', () => {
       // 10000 / 1000 = 10%
-      expect(formatRate(10000)).toBe('10.000%')
+      expect(formatRate(10000)).toBe('10.00%')
     })
 
     it('returns default value for undefined rate', () => {
@@ -60,9 +60,9 @@ describe('VaultLoans Utils', () => {
 
     it('formats with exactly 3 decimal places', () => {
       // Ensures consistent formatting regardless of value
-      expect(formatRate(1000)).toBe('1.000%')
-      expect(formatRate(1500)).toBe('1.500%')
-      expect(formatRate(1234)).toBe('1.234%')
+      expect(formatRate(1000)).toBe('1.00%')
+      expect(formatRate(1500)).toBe('1.50%')
+      expect(formatRate(1234)).toBe('1.23%')
     })
   })
 

src/containers/Vault/VaultLoans/utils.ts

@@ -19,8 +19,8 @@ export const formatRate = (rate: number | undefined): string => {
   // 1 basis point = 0.01%, 1/10th basis point = 0.001%
   const percentage = rate / ONE_TENTH_BASIS_POINT
 
-  // The field must be able to display up to 3 decimal places
-  return `${percentage.toFixed(3)}%`
+  // The field must be able to display up to 2 decimal places
+  return `${percentage.toFixed(2)}%`
 }
 
 /**