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}