From 651c228d72bfb984759e68d7607ccd94b7261422 Mon Sep 17 00:00:00 2001 From: Farid Salau Date: Tue, 6 May 2025 14:13:57 -0500 Subject: [PATCH 1/2] Fix decimal places on balance --- .../src/hooks/useFormattedAudioBalance.ts | 19 +++++++++++++------ packages/common/src/utils/decimal.ts | 7 +++++++ .../components/YourCoins.tsx | 6 +++++- 3 files changed, 25 insertions(+), 7 deletions(-) diff --git a/packages/common/src/hooks/useFormattedAudioBalance.ts b/packages/common/src/hooks/useFormattedAudioBalance.ts index 9c131ed66a4..f2bfba0cc47 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 { getDecimalPlaces, 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 getDecimalPlaces(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..9a5bdd68d49 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 getDecimalPlaces = (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} From 6d44954ecff148bddc043646bf51adb8b32ceb80 Mon Sep 17 00:00:00 2001 From: Farid Salau Date: Tue, 6 May 2025 14:28:48 -0500 Subject: [PATCH 2/2] Address comment --- packages/common/src/hooks/useFormattedAudioBalance.ts | 4 ++-- packages/common/src/utils/decimal.ts | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/common/src/hooks/useFormattedAudioBalance.ts b/packages/common/src/hooks/useFormattedAudioBalance.ts index f2bfba0cc47..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 { getDecimalPlaces, isNullOrUndefined } from '../utils' +import { getCurrencyDecimalPlaces, isNullOrUndefined } from '../utils' import { useTotalBalanceWithFallback } from './useAudioBalance' @@ -29,7 +29,7 @@ export const useFormattedAudioBalance = (): UseFormattedAudioBalanceReturn => { const decimalPlaces = useMemo(() => { if (!audioPrice) return 2 - return getDecimalPlaces(parseFloat(audioPrice)) + return getCurrencyDecimalPlaces(parseFloat(audioPrice)) }, [audioPrice]) const audioBalanceFormatted = audioBalance diff --git a/packages/common/src/utils/decimal.ts b/packages/common/src/utils/decimal.ts index 9a5bdd68d49..e96e6dcb080 100644 --- a/packages/common/src/utils/decimal.ts +++ b/packages/common/src/utils/decimal.ts @@ -55,7 +55,7 @@ export const decimalIntegerFromHumanReadable = ( return parseFloat(value) * 10 ** precision } -export const getDecimalPlaces = (priceUSD: number) => { +export const getCurrencyDecimalPlaces = (priceUSD: number) => { if (priceUSD >= 1) return 2 if (priceUSD >= 0.01) return 4 if (priceUSD >= 0.0001) return 6