Skip to content

feat: add a unified formatting standard#545

Open
Roaring30s wants to merge 10 commits intolivepeer:mainfrom
Roaring30s:unified-formatting
Open

feat: add a unified formatting standard#545
Roaring30s wants to merge 10 commits intolivepeer:mainfrom
Roaring30s:unified-formatting

Conversation

@Roaring30s
Copy link
Contributor

@Roaring30s Roaring30s commented Feb 5, 2026

Description

This PR standardizes the number and currency formatting across the Explorer, specifically targeting the Root, Treasury, Orchestrator, Account and Voting pages. It replaces ad-hoc manual formatting (e.g., hardcoded division / 10000, manual " LPT" string concatenation) with our centralized utility functions in @utils/numberFormatters.ts

Type of Change

  • feat: New feature
  • fix: Bug fix
  • docs: Documentation update
  • style: Code style/formatting changes (no logic changes)
  • refactor: Code refactoring (no behavior change)
  • perf: Performance improvement
  • test: Adding or updating tests
  • build: Build system or dependency changes
  • ci: CI/CD changes
  • chore: Other changes

Related Issue(s)

Fixes: #442

Changes Made

🏛 Treasury & Proposals

  • Standardized "Total Support" and "Total Participation" calculations. Replaced manual LPT string building with [formatLPT]
  • Updated vote count display to use [formatNumber] instead of formatVotingPower (since headcount is not LPT).
  • TreasuryVoteTable:
    • Vote Weights: Now use formatWeight which relies on formatLPT.
    • Tooltips: Added clear explanations for "Total Support" vs "Total Participation".

🗳 Voting

  • pages/voting/[poll].tsx:
    • Refactored vote stake and percentages to use formatLPT and formatPercent.
    • Removed duplicate/redundant logic for calculating poll quotas.

🎻 Orchestrators

  • Tables: Updated OrchestratorList to use standardized column formatting for generic metrics.
  • Performance: Ensured performance metrics leverage the new percentage formatters for consistent decimal places.

👤 Accounts

  • Layout: Verified layouts/account.tsx acts as a clean container, delegating specific metric formatting to child components.
  • Delegation: Standardized how delegated amounts and pending stakes are displayed across profile views.

We have established the following "Big Rules" for how numbers are displayed:

1. LPT Amounts (formatLPT)

  • Abbreviation: Amounts ≥ 10,000 LPT are abbreviated (e.g., 15K LPT, 2.5M LPT) by default, unless specified otherwise (e.g., in detailed tables).
  • Small Values:
    • Values smaller than the precision threshold are explicitly marked.
    • Default precision is 2 decimals, so values < 0.01 show as < 0.01 LPT.
    • For higher precision (used in some tooltips/tables), e.g., 4 decimals, values < 0.0001 show as < 0.0001 LPT.
  • Zero: Explicitly formats as 0 LPT (never 0.00 LPT).

2. Voting Power (formatVotingPower)

  • Enforces consistency for voting weights.
  • Rules: Always uses 2 decimal places and abbreviates large numbers (e.g., 12.50K LPT).

3. Percentages (formatPercent)

  • Precision: Defaults to 2 decimal places (e.g., 12.34%).
  • Whole Numbers: Automatically drops decimals for whole numbers (e.g., 50% instead of 50.00%) for cleaner UI strings, unless a fixed precision is forced.
  • Constants: Replaced hardcoded divisors (like 10000 or 1000000) with named constants PERCENTAGE_PRECISION_TEN_THOUSAND and PERCENTAGE_PRECISION_MILLION from @utils/web3.

4. ETH Amounts (formatETH)

  • Precision: Higher precision by default (4 decimal places) to account for smaller transaction fees and values.
  • Small Values: Values < 0.0001 are explicitly shown as < 0.0001 ETH.
  • Abbreviation: Does not abbreviate by default (e.g., shows 1,234.5678 ETH instead of 1.23K ETH), as precise ETH values are often critical.

5. USD Currency (formatUSD)

  • Style: Standard currency formatting with a $ prefix.
  • Rules: Inherits formatNumber rules, defaulting to 2 decimal places and standard thousand separators (e.g., $1,234.56).

Testing

  • Tested locally
  • Added/updated tests
  • All tests passing

How to test (optional unless test is not trivial)

Youre going to need to make a coffee and sit down and just inspect all the numbers on the pages to ensure formatting meets the standard.

Impact / Risk

Risk level: Low

Impacted areas: UI

User impact: Better number visual

Rollback plan: PR revert

Screenshots / Recordings (if applicable)

None

Additional Notes

Warning to Reviewer

I don't have the livepeer com key so I couldn't visually test the charts found on root page. If you could eyeball that part thoroughly, that should give us 100% coverage.

I am also slowly ridding of excessive useMemo's that may get in the way of my PR's throughout the project. We are currently using them to memoize simple arithmetic. The overhead introduced by the memos are heavier than re-rendering simple arithmetic unless it causing a render cascade elsewhere which I am checking for.

@vercel
Copy link

vercel bot commented Feb 5, 2026

@Roaring30s is attempting to deploy a commit to the Livepeer Foundation Team on Vercel.

A member of the Team first needs to authorize it.

@Roaring30s
Copy link
Contributor Author

@ECWireless Out of all the PRs I have, I recommend checking this one first since this touches everywhere and the likelihood of annoying conflicts emerging throughout time are very high here.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

0 is rendered as 0.000

1 participant