[TASK] Standardize Number Formatting across the dApp

[monaiuu]

Description

Number formatting inconsistencies exist across different pages, affecting readability and user experience. We need to standardize how we display numerical values throughout the application.

Current Inconsistencies by Page

Dashboard Page

• Total Value Locked (TVL): raw numbers without separators
• APY: varying decimals (12.5%, 12.50%)
• Statistics: inconsistent thousand separators

Restaking Page

• Staking Information:
  • Available Balance: raw decimals (e.g., 1234.5678901)
  • Staked Amount: .toFixed(4) (e.g., 1234.5678)
  • Rewards: .toFixed(2) (e.g., 1234.56)

Liquid Staking Page

• Pool Statistics:
  • Pool TVL: mix of formatted/unformatted numbers
  • Token prices: inconsistent decimal places
  • APR percentages: varying decimal places

Nomination Page

• Validator Metrics:
  • Commission rates: inconsistent percentage formatting
  • Stake amounts: varying decimal places
  • Performance metrics: mix of formatted/raw numbers

Common Number Types to Standardize

1. Token Amounts

   • Current: Mix of raw values and different fixed decimals
   • Example locations:
     • Wallet balances
     • Staking inputs
     • Pool deposits

2. Percentages

   • Current: Inconsistent decimal places and symbol usage
   • Example locations:
     • APR/APY displays
     • Commission rates
     • Success rates

3. Large Numbers

   • Current: Lack of consistent thousand separators
   • Example locations:
     • TVL values
     • Total stakes
     • Validator counts

4. Currency Values (USD)

   • Current: Inconsistent prefix and decimal usage
   • Example locations:
     • TVL displays
     • Token prices
     • Total value stats

Proposed Solution

Create a standardized formatting utility with these rules:

1. Token Amounts:

   // Example implementation
   formatToken(1234.5678901) => "1,234.5678"

   • Standard 4 decimal places
   • Thousand separators
   • Trim trailing zeros

2. Percentages:

   formatPercent(12.345) => "12.35%"

   • Standard 2 decimal places
   • Always include % symbol

3. Large Numbers:

   formatNumber(1234567) => "1,234,567"
   formatNumber(1234567, {abbreviated: true}) => "1.23M"

   • Always use thousand separators
   • Optional abbreviation

4. Currency:

   formatCurrency(1234.56) => "$1,234.56"

   • Standard 2 decimal places
   • Always include $ prefix

Technical Considerations

• Ensure BigNumber compatibility
• Handle null/undefined values
• Consider internationalization
• Add tooltips for abbreviated values

Example Screenshot