diff --git a/packages/common/src/hooks/useFormattedAudioBalance.ts b/packages/common/src/hooks/useFormattedAudioBalance.ts index 9c131ed66a4..58070aecab3 100644 --- a/packages/common/src/hooks/useFormattedAudioBalance.ts +++ b/packages/common/src/hooks/useFormattedAudioBalance.ts @@ -4,7 +4,7 @@ import { AUDIO } from '@audius/fixed-decimal' import { useTokenPrice } from '../api' import { TOKEN_LISTING_MAP } from '../store' -import { isNullOrUndefined } from '../utils' +import { getCurrencyDecimalPlaces, isNullOrUndefined } from '../utils' import { useTotalBalanceWithFallback } from './useAudioBalance' @@ -22,14 +22,21 @@ type UseFormattedAudioBalanceReturn = { export const useFormattedAudioBalance = (): UseFormattedAudioBalanceReturn => { const audioBalance = useTotalBalanceWithFallback() - const audioBalanceFormatted = audioBalance - ? AUDIO(audioBalance).toLocaleString() - : null - const isAudioBalanceLoading = isNullOrUndefined(audioBalance) - const { data: audioPriceData, isPending: isAudioPriceLoading } = useTokenPrice(AUDIO_TOKEN_ID) const audioPrice = audioPriceData?.price || null + const isAudioBalanceLoading = isNullOrUndefined(audioBalance) + + const decimalPlaces = useMemo(() => { + if (!audioPrice) return 2 + return getCurrencyDecimalPlaces(parseFloat(audioPrice)) + }, [audioPrice]) + + const audioBalanceFormatted = audioBalance + ? AUDIO(audioBalance).toLocaleString('en-US', { + maximumFractionDigits: decimalPlaces + }) + : null // Calculate dollar value of user's AUDIO balance const audioDollarValue = useMemo(() => { diff --git a/packages/common/src/utils/decimal.ts b/packages/common/src/utils/decimal.ts index 2c00d2105d2..e96e6dcb080 100644 --- a/packages/common/src/utils/decimal.ts +++ b/packages/common/src/utils/decimal.ts @@ -54,3 +54,10 @@ export const decimalIntegerFromHumanReadable = ( ) => { return parseFloat(value) * 10 ** precision } + +export const getCurrencyDecimalPlaces = (priceUSD: number) => { + if (priceUSD >= 1) return 2 + if (priceUSD >= 0.01) return 4 + if (priceUSD >= 0.0001) return 6 + return 8 +} diff --git a/packages/web/src/pages/pay-and-earn-page/components/YourCoins.tsx b/packages/web/src/pages/pay-and-earn-page/components/YourCoins.tsx index 566fab6ad66..12252b81350 100644 --- a/packages/web/src/pages/pay-and-earn-page/components/YourCoins.tsx +++ b/packages/web/src/pages/pay-and-earn-page/components/YourCoins.tsx @@ -17,6 +17,10 @@ import { push } from 'redux-first-history' const DIMENSIONS = 64 const { WALLET_AUDIO_PAGE } = route +const messages = { + audio: '$AUDIO' +} + export const YourCoins = () => { const dispatch = useDispatch() const { color, spacing, cornerRadius } = useTheme() @@ -76,7 +80,7 @@ export const YourCoins = () => { {audioBalanceFormatted} - $AUDIO + {messages.audio}