Fix(mobile): Create a new fiat formatter and implement its usage #5205
Conversation
Branch preview✅ Deploy successful! Storybook: |
| let formattedValue: string | ||
| if (numericValue >= 1_000_000_000) { | ||
| // Billions | ||
| formattedValue = `${(numericValue / 1_000_000_000).toFixed(decimalPlaces)}B` | ||
| } else if (numericValue >= 1_000_000) { | ||
| // Millions | ||
| formattedValue = `${(numericValue / 1_000_000).toFixed(decimalPlaces)}M` | ||
| } else if (numericValue >= threshold) { | ||
| // Thousands | ||
| formattedValue = `${(numericValue / 1_000).toFixed(decimalPlaces)}k` | ||
| } else { | ||
| // Regular numbers | ||
| formattedValue = numericValue.toFixed(decimalPlaces) | ||
| } |
There was a problem hiding this comment.
Any chance we can use Intl.NumberFormat like the web app instead of custom logic? The compact option does exactly the same.
There was a problem hiding this comment.
Looking at the web code provided, that does seem to be way more verbose than this implementation. Although with room for leveraging Intl.NumberFormat, I think this would be more easy to follow specially because we're not dealing with different currencies, locales YET. WDYT?
There was a problem hiding this comment.
The fiat/token amount formatting should be consistent across clients. I'm not suggesting here to make it a shared package (although this would be ideal) as it's out of scope, but we should re-use the code as much as possible.
There was a problem hiding this comment.
Apart from that, this should be covered by unit tests. The web code is already covered.
katspaugh
changed the title
| {amount[1] && ( | ||
| <H1 fontWeight={600} color="$textSecondaryDark"> | ||
| .{amount[1].slice(0, 2)} | ||
| {formattedAmount.includes('k') ? ( |
There was a problem hiding this comment.
Why is it checking specifically for k?
What it solves
This PR resolves an issue in formatting fiat balance above 1000.
Resolves #
How this PR fixes it
It implements a new format util to handle all possible scenarios.
How to test it
Load the app and check if balance is shown correctly.
This wallet can be imported and used to see a different amount.
Screenshots
Screen.Recording.2025-03-06.at.21.29.19.mov
Checklist