Refactor Token Filtering and Display Logic for Artist Coins

packages/common/src/hooks/index.ts

@@ -48,6 +48,7 @@ export * from './useFormattedTokenBalance'
 export * from './useCurrentTrack'
 export * from './useDebounce'
 export * from './useIsArtist'
+export * from './useOwnedTokens'
 
 export * from './useAnalytics'
 export * from './useBuySellAnalytics'

packages/common/src/hooks/useFormattedTokenBalance.ts

@@ -6,7 +6,7 @@ import { useTokenBalance, useArtistCoins } from '../api'
 import { Status } from '../models/Status'
 import {
  getTokenDecimalPlaces,
-formatCurrency,
+formatCurrencyWithSubscript,
  isNullOrUndefined
 } from '../utils'
 
@@ -65,7 +65,7 @@ export const useFormattedTokenBalance = (
  if (!tokenPrice) return '$0.00'
 
  const priceNumber = Number(new FixedDecimal(tokenPrice).toString())
- return formatCurrency(priceNumber)
+ return formatCurrencyWithSubscript(priceNumber)
  }, [tokenPrice])
 
  return {

packages/common/src/hooks/useOwnedTokens.ts

@@ -0,0 +1,52 @@
+import { useMemo } from 'react'
+
+import {
+ useCurrentUserId,
+ useUserCoins,
+ useQueryContext,
+ UserCoin
+} from '~/api'
+import { useFeatureFlag } from '~/hooks'
+import { FeatureFlags } from '~/services'
+import type { TokenInfo } from '~/store'
+import { ownedCoinsFilter } from '~/utils'
+
+/**
+ * Hook to filter tokens based on user ownership and positive balance
+ * Respects the ARTIST_COINS feature flag - when disabled, only shows AUDIO tokens
+ */
+export const useOwnedTokens = (allTokens: TokenInfo[]) => {
+ const { data: currentUserId } = useCurrentUserId()
+ const { data: userCoins } = useUserCoins({ userId: currentUserId })
+ const { env } = useQueryContext()
+ const { isEnabled: isArtistCoinsEnabled } = useFeatureFlag(
+ FeatureFlags.ARTIST_COINS
+ )
+
+ const ownedTokens = useMemo(() => {
+ if (!userCoins || !allTokens.length) {
+ return []
+ }
+
+ const filteredUserCoins = userCoins.filter(
+ ownedCoinsFilter(!!isArtistCoinsEnabled, env.WAUDIO_MINT_ADDRESS)
+ )
+
+ // Create a map of user's owned tokens by mint address
+ const userOwnedMints = new Set(
+ filteredUserCoins.map((coin: UserCoin) => coin.mint)
+ )
+
+ // Filter available tokens to only include ones the user owns
+ const ownedTokensList = allTokens.filter((token) =>
+ userOwnedMints.has(token.address)
+ )
+
+ return ownedTokensList
+ }, [userCoins, allTokens, isArtistCoinsEnabled, env.WAUDIO_MINT_ADDRESS])
+
+ return {
+ ownedTokens,
+ isLoading: !userCoins
+ }
+}

packages/common/src/store/ui/buy-sell/index.ts

@@ -11,4 +11,3 @@ export * from './useTokenSwapForm'
 export * from './useAvailableTokens'
 export * from './useCurrentTokenPair'
 export * from './useTokenStates'
-export * from './useGroupCoinPairs'

packages/common/src/utils/coinUtils.ts

@@ -0,0 +1,24 @@
+import { UserCoin } from '~/api'
+
+/**
+ * Creates a predicate function for filtering user coins based on the ARTIST_COINS feature flag and balance requirements
+ *
+ * @param isArtistCoinsEnabled - Whether the ARTIST_COINS feature flag is enabled
+ * @param wAudioMintAddress - The WAUDIO mint address from environment
+ * @returns Predicate function that can be used with Array.filter()
+ */
+export const ownedCoinsFilter =
+ (isArtistCoinsEnabled: boolean, wAudioMintAddress: string) =>
+ (coin: UserCoin): boolean => {
+ if (!isArtistCoinsEnabled) {
+ // When artist coins disabled, only show AUDIO
+ return coin.mint === wAudioMintAddress
+ }
+
+ // When artist coins enabled, show all non-USDC tokens with balance > 0
+ // OR AUDIO regardless of balance
+ return (
+ coin.ticker !== 'USDC' &&
+ (coin.balance > 0 || coin.mint === wAudioMintAddress)
+ )
+ }

packages/common/src/utils/decimal.ts

@@ -164,6 +164,78 @@ export const formatCurrency = (
  }
 }
 
+/**
+ * Formats a number with subscript notation for many leading zeros after decimal.
+ * For example: 0.000068352 → 0.0₄68352
+ *
+ * @param num - The number to format
+ * @param locale - Locale for number formatting (defaults to 'en-US')
+ * @returns Formatted string with subscript notation for leading zeros
+ */
+export const formatCurrencyWithSubscript = (
+ num: number,
+ locale: string = 'en-US'
+): string => {
+ if (num === 0) return '$0.00'
+
+ try {
+ const decimalPlaces = getCurrencyDecimalPlaces(num)
+ const formatted = new Intl.NumberFormat(locale, {
+ style: 'currency',
+ currency: 'USD',
+ minimumFractionDigits: Math.min(decimalPlaces, 2),
+ maximumFractionDigits: decimalPlaces
+ }).format(num)
+
+ // Extract the number part (remove currency symbol and commas)
+ const numberPart = formatted.replace(/[^0-9.-]/g, '').replace(/,/g, '')
+
+ // Check if there are leading zeros after decimal that should be subscripted
+ const parts = numberPart.split('.')
+ if (parts.length === 2 && parts[0] === '0') {
+ const decimalPart = parts[1]
+
+ // Find consecutive zeros after the decimal
+ const zeroMatch = decimalPart.match(/^0+/)
+ if (zeroMatch) {
+ const zeroCount = zeroMatch[0].length
+ const remainingDigits = decimalPart.substring(zeroCount)
+
+ // Only apply subscript if there are 3 or more leading zeros
+ if (zeroCount >= 3 && remainingDigits.length > 0) {
+ // Create subscript number (Unicode subscript digits)
+ const subscriptDigits = zeroCount
+ .toString()
+ .split('')
+ .map((digit) => {
+ const subscripts = [
+ '₀',
+ '₁',
+ '₂',
+ '₃',
+ '₄',
+ '₅',
+ '₆',
+ '₇',
+ '₈',
+ '₉'
+ ]
+ return subscripts[parseInt(digit)]
+ })
+ .join('')
+
+ // Format as $0.0[subscript][remaining digits]
+ return `$0.0${subscriptDigits}${remainingDigits}`
+ }
+ }
+ }
+
+ return formatted
+ } catch {
+ return `$${num.toFixed(2)}`
+ }
+}
+
 export const formatCurrencyWithMax = (
  num: number,
  max: number,

packages/common/src/utils/index.ts

@@ -49,3 +49,4 @@ export * from './handle'
 export * from './comments'
 export * from './quickSearch'
 export * from './coinMetrics'
+export * from './coinUtils'

packages/mobile/src/screens/buy-sell-screen/BuySellFlow.tsx

@@ -1,7 +1,7 @@
 import React, { useState, useEffect, useMemo, useCallback } from 'react'
 
 import { useTokenPair, useTokens } from '@audius/common/api'
-import { useBuySellAnalytics } from '@audius/common/hooks'
+import { useBuySellAnalytics, useOwnedTokens } from '@audius/common/hooks'
 import { buySellMessages as messages } from '@audius/common/messages'
 import type { BuySellTab, TokenInfo } from '@audius/common/store'
 import {
@@ -76,12 +76,42 @@ export const BuySellFlow = ({
  })
 
  const { tokens } = useTokens()
- const availableBaseTokens: TokenInfo[] = useMemo(() => {
+
+ // Get all available tokens and owned tokens
+ const allAvailableTokens: TokenInfo[] = useMemo(() => {
  return Object.values(tokens).filter(
  (token) => token.symbol !== selectedQuoteToken
  )
  }, [tokens, selectedQuoteToken])
 
+ const { ownedTokens } = useOwnedTokens(allAvailableTokens)
+
+ const {
+ transactionData,
+ hasSufficientBalance,
+ handleTransactionDataChange,
+ resetTransactionData
+ } = useBuySellTransactionData()
+
+ const { activeTab, handleActiveTabChange } = useBuySellTabs({
+ setCurrentScreen,
+ resetTransactionData,
+ initialTab
+ })
+
+ // Determine which tokens to show based on current tab
+ // For buy tab: "You Receive" section should show all tokens
+ // For sell tab: "You Sell" section should show only owned tokens
+ const availableBaseTokens: TokenInfo[] = useMemo(() => {
+ if (activeTab === 'sell') {
+ // In sell tab, the input section should only show owned tokens
+ return ownedTokens
+ } else {
+ // In buy tab, the output section should show all tokens
+ return allAvailableTokens
+ }
+ }, [activeTab, ownedTokens, allAvailableTokens])
+
  const baseTokenOptions = useMemo(
  () =>
  availableBaseTokens.map((token) => ({
@@ -103,19 +133,6 @@ export const BuySellFlow = ({
  [availableBaseTokens]
  )
 
- const {
- transactionData,
- hasSufficientBalance,
- handleTransactionDataChange,
- resetTransactionData
- } = useBuySellTransactionData()
-
- const { activeTab, handleActiveTabChange } = useBuySellTabs({
- setCurrentScreen,
- resetTransactionData,
- initialTab
- })
-
  // Reset screen state to 'input' when this screen comes into focus
  // This handles the case where we navigate back from ConfirmSwapScreen
  useFocusEffect(

packages/mobile/src/screens/buy-sell-screen/components/SellScreen.tsx

@@ -5,10 +5,11 @@ import {
  useArtistCoin,
  useArtistCoins
 } from '@audius/common/api'
+import { useOwnedTokens } from '@audius/common/hooks'
 import type { TokenInfo, TokenPair } from '@audius/common/store'
 import { useTokenSwapForm } from '@audius/common/store'
 
-import { Box, Flex, Skeleton, Text } from '@audius/harmony-native'
+import { Box, Flex, Skeleton } from '@audius/harmony-native'
 import { InputTokenSection } from 'app/components/buy-sell/InputTokenSection'
 import { OutputTokenSection } from 'app/components/buy-sell/OutputTokenSection'
 
@@ -107,10 +108,18 @@ export const SellScreen = ({
  }
 
  const { data: coins } = useArtistCoins()
- const availableInputTokens: TokenInfo[] = useMemo(() => {
+ const allAvailableTokens: TokenInfo[] = useMemo(() => {
  return Object.values(transformArtistCoinsToTokenInfoMap(coins ?? []))
  }, [coins])
 
+ // Use the owned tokens hook to get filtered tokens
+ const { ownedTokens } = useOwnedTokens(allAvailableTokens)
+
+ // For sell screen:
+ // - "You Sell" section (input): Should show only tokens the user owns
+ // - "You Receive" section (output): Should show all available tokens (but only USDC in practice)
+ const availableInputTokens = ownedTokens
+
  if (!tokenPair) return null
 
  // Extract the tokens from the pair
@@ -151,10 +160,6 @@ export const SellScreen = ({
  />
  </>
  )}
- <Flex row gap='xs'>
- <Text color='subdued'>Rate</Text>
- <Text>{`1 ${baseToken.symbol} ≈ ${Number(tokenPrice).toFixed(8)} ${quoteToken.symbol}`}</Text>
- </Flex>
  </Flex>
  )
 }

packages/common/src/hooks/index.ts

@@ -48,6 +48,7 @@ export * from './useFormattedTokenBalance'
 export * from './useCurrentTrack'
 export * from './useDebounce'
 export * from './useIsArtist'
+export * from './useOwnedTokens'
 
 export * from './useAnalytics'
 export * from './useBuySellAnalytics'

packages/common/src/hooks/useFormattedTokenBalance.ts

@@ -6,7 +6,7 @@ import { useTokenBalance, useArtistCoins } from '../api'
 import { Status } from '../models/Status'
 import {
  getTokenDecimalPlaces,
-formatCurrency,
+formatCurrencyWithSubscript,
  isNullOrUndefined
 } from '../utils'
 
@@ -65,7 +65,7 @@ export const useFormattedTokenBalance = (
  if (!tokenPrice) return '$0.00'
 
  const priceNumber = Number(new FixedDecimal(tokenPrice).toString())
- return formatCurrency(priceNumber)
+ return formatCurrencyWithSubscript(priceNumber)
  }, [tokenPrice])
 
  return {

packages/common/src/hooks/useOwnedTokens.ts

@@ -0,0 +1,52 @@
+import { useMemo } from 'react'
+
+import {
+ useCurrentUserId,
+ useUserCoins,
+ useQueryContext,
+ UserCoin
+} from '~/api'
+import { useFeatureFlag } from '~/hooks'
+import { FeatureFlags } from '~/services'
+import type { TokenInfo } from '~/store'
+import { ownedCoinsFilter } from '~/utils'
+
+/**
+ * Hook to filter tokens based on user ownership and positive balance
+ * Respects the ARTIST_COINS feature flag - when disabled, only shows AUDIO tokens
+ */
+export const useOwnedTokens = (allTokens: TokenInfo[]) => {
+ const { data: currentUserId } = useCurrentUserId()
+ const { data: userCoins } = useUserCoins({ userId: currentUserId })
+ const { env } = useQueryContext()
+ const { isEnabled: isArtistCoinsEnabled } = useFeatureFlag(
+ FeatureFlags.ARTIST_COINS
+ )
+
+ const ownedTokens = useMemo(() => {
+ if (!userCoins || !allTokens.length) {
+ return []
+ }
+
+ const filteredUserCoins = userCoins.filter(
+ ownedCoinsFilter(!!isArtistCoinsEnabled, env.WAUDIO_MINT_ADDRESS)
+ )
+
+ // Create a map of user's owned tokens by mint address
+ const userOwnedMints = new Set(
+ filteredUserCoins.map((coin: UserCoin) => coin.mint)
+ )
+
+ // Filter available tokens to only include ones the user owns
+ const ownedTokensList = allTokens.filter((token) =>
+ userOwnedMints.has(token.address)
+ )
+
+ return ownedTokensList
+ }, [userCoins, allTokens, isArtistCoinsEnabled, env.WAUDIO_MINT_ADDRESS])
+
+ return {
+ ownedTokens,
+ isLoading: !userCoins
+ }
+}

packages/common/src/store/ui/buy-sell/index.ts

@@ -11,4 +11,3 @@ export * from './useTokenSwapForm'
 export * from './useAvailableTokens'
 export * from './useCurrentTokenPair'
 export * from './useTokenStates'
-export * from './useGroupCoinPairs'

packages/common/src/utils/coinUtils.ts

@@ -0,0 +1,24 @@
+import { UserCoin } from '~/api'
+
+/**
+ * Creates a predicate function for filtering user coins based on the ARTIST_COINS feature flag and balance requirements
+ *
+ * @param isArtistCoinsEnabled - Whether the ARTIST_COINS feature flag is enabled
+ * @param wAudioMintAddress - The WAUDIO mint address from environment
+ * @returns Predicate function that can be used with Array.filter()
+ */
+export const ownedCoinsFilter =
+ (isArtistCoinsEnabled: boolean, wAudioMintAddress: string) =>
+ (coin: UserCoin): boolean => {
+ if (!isArtistCoinsEnabled) {
+ // When artist coins disabled, only show AUDIO
+ return coin.mint === wAudioMintAddress
+ }
+
+ // When artist coins enabled, show all non-USDC tokens with balance > 0
+ // OR AUDIO regardless of balance
+ return (
+ coin.ticker !== 'USDC' &&
+ (coin.balance > 0 || coin.mint === wAudioMintAddress)
+ )
+ }

packages/common/src/utils/decimal.ts

@@ -164,6 +164,78 @@ export const formatCurrency = (
  }
 }
 
+/**
+ * Formats a number with subscript notation for many leading zeros after decimal.
+ * For example: 0.000068352 → 0.0₄68352
+ *
+ * @param num - The number to format
+ * @param locale - Locale for number formatting (defaults to 'en-US')
+ * @returns Formatted string with subscript notation for leading zeros
+ */
+export const formatCurrencyWithSubscript = (
+ num: number,
+ locale: string = 'en-US'
+): string => {
+ if (num === 0) return '$0.00'
+
+ try {
+ const decimalPlaces = getCurrencyDecimalPlaces(num)
+ const formatted = new Intl.NumberFormat(locale, {
+ style: 'currency',
+ currency: 'USD',
+ minimumFractionDigits: Math.min(decimalPlaces, 2),
+ maximumFractionDigits: decimalPlaces
+ }).format(num)
+
+ // Extract the number part (remove currency symbol and commas)
+ const numberPart = formatted.replace(/[^0-9.-]/g, '').replace(/,/g, '')
+
+ // Check if there are leading zeros after decimal that should be subscripted
+ const parts = numberPart.split('.')
+ if (parts.length === 2 && parts[0] === '0') {
+ const decimalPart = parts[1]
+
+ // Find consecutive zeros after the decimal
+ const zeroMatch = decimalPart.match(/^0+/)
+ if (zeroMatch) {
+ const zeroCount = zeroMatch[0].length
+ const remainingDigits = decimalPart.substring(zeroCount)
+
+ // Only apply subscript if there are 3 or more leading zeros
+ if (zeroCount >= 3 && remainingDigits.length > 0) {
+ // Create subscript number (Unicode subscript digits)
+ const subscriptDigits = zeroCount
+ .toString()
+ .split('')
+ .map((digit) => {
+ const subscripts = [
+ '₀',
+ '₁',
+ '₂',
+ '₃',
+ '₄',
+ '₅',
+ '₆',
+ '₇',
+ '₈',
+ '₉'
+ ]
+ return subscripts[parseInt(digit)]
+ })
+ .join('')
+
+ // Format as $0.0[subscript][remaining digits]
+ return `$0.0${subscriptDigits}${remainingDigits}`
+ }
+ }
+ }
+
+ return formatted
+ } catch {
+ return `$${num.toFixed(2)}`
+ }
+}
+
 export const formatCurrencyWithMax = (
  num: number,
  max: number,

packages/common/src/utils/index.ts

@@ -49,3 +49,4 @@ export * from './handle'
 export * from './comments'
 export * from './quickSearch'
 export * from './coinMetrics'
+export * from './coinUtils'

packages/mobile/src/screens/buy-sell-screen/BuySellFlow.tsx

@@ -1,7 +1,7 @@
 import React, { useState, useEffect, useMemo, useCallback } from 'react'
 
 import { useTokenPair, useTokens } from '@audius/common/api'
-import { useBuySellAnalytics } from '@audius/common/hooks'
+import { useBuySellAnalytics, useOwnedTokens } from '@audius/common/hooks'
 import { buySellMessages as messages } from '@audius/common/messages'
 import type { BuySellTab, TokenInfo } from '@audius/common/store'
 import {
@@ -76,12 +76,42 @@ export const BuySellFlow = ({
  })
 
  const { tokens } = useTokens()
- const availableBaseTokens: TokenInfo[] = useMemo(() => {
+
+ // Get all available tokens and owned tokens
+ const allAvailableTokens: TokenInfo[] = useMemo(() => {
  return Object.values(tokens).filter(
  (token) => token.symbol !== selectedQuoteToken
  )
  }, [tokens, selectedQuoteToken])
 
+ const { ownedTokens } = useOwnedTokens(allAvailableTokens)
+
+ const {
+ transactionData,
+ hasSufficientBalance,
+ handleTransactionDataChange,
+ resetTransactionData
+ } = useBuySellTransactionData()
+
+ const { activeTab, handleActiveTabChange } = useBuySellTabs({
+ setCurrentScreen,
+ resetTransactionData,
+ initialTab
+ })
+
+ // Determine which tokens to show based on current tab
+ // For buy tab: "You Receive" section should show all tokens
+ // For sell tab: "You Sell" section should show only owned tokens
+ const availableBaseTokens: TokenInfo[] = useMemo(() => {
+ if (activeTab === 'sell') {
+ // In sell tab, the input section should only show owned tokens
+ return ownedTokens
+ } else {
+ // In buy tab, the output section should show all tokens
+ return allAvailableTokens
+ }
+ }, [activeTab, ownedTokens, allAvailableTokens])
+
  const baseTokenOptions = useMemo(
  () =>
  availableBaseTokens.map((token) => ({
@@ -103,19 +133,6 @@ export const BuySellFlow = ({
  [availableBaseTokens]
  )
 
- const {
- transactionData,
- hasSufficientBalance,
- handleTransactionDataChange,
- resetTransactionData
- } = useBuySellTransactionData()
-
- const { activeTab, handleActiveTabChange } = useBuySellTabs({
- setCurrentScreen,
- resetTransactionData,
- initialTab
- })
-
  // Reset screen state to 'input' when this screen comes into focus
  // This handles the case where we navigate back from ConfirmSwapScreen
  useFocusEffect(

packages/mobile/src/screens/buy-sell-screen/components/SellScreen.tsx

@@ -5,10 +5,11 @@ import {
  useArtistCoin,
  useArtistCoins
 } from '@audius/common/api'
+import { useOwnedTokens } from '@audius/common/hooks'
 import type { TokenInfo, TokenPair } from '@audius/common/store'
 import { useTokenSwapForm } from '@audius/common/store'
 
-import { Box, Flex, Skeleton, Text } from '@audius/harmony-native'
+import { Box, Flex, Skeleton } from '@audius/harmony-native'
 import { InputTokenSection } from 'app/components/buy-sell/InputTokenSection'
 import { OutputTokenSection } from 'app/components/buy-sell/OutputTokenSection'
 
@@ -107,10 +108,18 @@ export const SellScreen = ({
  }
 
  const { data: coins } = useArtistCoins()
- const availableInputTokens: TokenInfo[] = useMemo(() => {
+ const allAvailableTokens: TokenInfo[] = useMemo(() => {
  return Object.values(transformArtistCoinsToTokenInfoMap(coins ?? []))
  }, [coins])
 
+ // Use the owned tokens hook to get filtered tokens
+ const { ownedTokens } = useOwnedTokens(allAvailableTokens)
+
+ // For sell screen:
+ // - "You Sell" section (input): Should show only tokens the user owns
+ // - "You Receive" section (output): Should show all available tokens (but only USDC in practice)
+ const availableInputTokens = ownedTokens
+
  if (!tokenPair) return null
 
  // Extract the tokens from the pair
@@ -151,10 +160,6 @@ export const SellScreen = ({
  />
  </>
  )}
- <Flex row gap='xs'>
- <Text color='subdued'>Rate</Text>
- <Text>{`1 ${baseToken.symbol} ≈ ${Number(tokenPrice).toFixed(8)} ${quoteToken.symbol}`}</Text>
- </Flex>
  </Flex>
  )
 }

packages/common/src/hooks/index.ts

@@ -48,6 +48,7 @@ export * from './useFormattedTokenBalance'
 export * from './useCurrentTrack'
 export * from './useDebounce'
 export * from './useIsArtist'
+export * from './useOwnedTokens'
 
 export * from './useAnalytics'
 export * from './useBuySellAnalytics'

packages/common/src/hooks/useFormattedTokenBalance.ts

@@ -6,7 +6,7 @@ import { useTokenBalance, useArtistCoins } from '../api'
 import { Status } from '../models/Status'
 import {
  getTokenDecimalPlaces,
-formatCurrency,
+formatCurrencyWithSubscript,
  isNullOrUndefined
 } from '../utils'
 
@@ -65,7 +65,7 @@ export const useFormattedTokenBalance = (
  if (!tokenPrice) return '$0.00'
 
  const priceNumber = Number(new FixedDecimal(tokenPrice).toString())
- return formatCurrency(priceNumber)
+ return formatCurrencyWithSubscript(priceNumber)
  }, [tokenPrice])
 
  return {

packages/common/src/hooks/useOwnedTokens.ts

@@ -0,0 +1,52 @@
+import { useMemo } from 'react'
+
+import {
+ useCurrentUserId,
+ useUserCoins,
+ useQueryContext,
+ UserCoin
+} from '~/api'
+import { useFeatureFlag } from '~/hooks'
+import { FeatureFlags } from '~/services'
+import type { TokenInfo } from '~/store'
+import { ownedCoinsFilter } from '~/utils'
+
+/**
+ * Hook to filter tokens based on user ownership and positive balance
+ * Respects the ARTIST_COINS feature flag - when disabled, only shows AUDIO tokens
+ */
+export const useOwnedTokens = (allTokens: TokenInfo[]) => {
+ const { data: currentUserId } = useCurrentUserId()
+ const { data: userCoins } = useUserCoins({ userId: currentUserId })
+ const { env } = useQueryContext()
+ const { isEnabled: isArtistCoinsEnabled } = useFeatureFlag(
+ FeatureFlags.ARTIST_COINS
+ )
+
+ const ownedTokens = useMemo(() => {
+ if (!userCoins || !allTokens.length) {
+ return []
+ }
+
+ const filteredUserCoins = userCoins.filter(
+ ownedCoinsFilter(!!isArtistCoinsEnabled, env.WAUDIO_MINT_ADDRESS)
+ )
+
+ // Create a map of user's owned tokens by mint address
+ const userOwnedMints = new Set(
+ filteredUserCoins.map((coin: UserCoin) => coin.mint)
+ )
+
+ // Filter available tokens to only include ones the user owns
+ const ownedTokensList = allTokens.filter((token) =>
+ userOwnedMints.has(token.address)
+ )
+
+ return ownedTokensList
+ }, [userCoins, allTokens, isArtistCoinsEnabled, env.WAUDIO_MINT_ADDRESS])
+
+ return {
+ ownedTokens,
+ isLoading: !userCoins
+ }
+}

packages/common/src/store/ui/buy-sell/index.ts

@@ -11,4 +11,3 @@ export * from './useTokenSwapForm'
 export * from './useAvailableTokens'
 export * from './useCurrentTokenPair'
 export * from './useTokenStates'
-export * from './useGroupCoinPairs'

packages/common/src/utils/coinUtils.ts

@@ -0,0 +1,24 @@
+import { UserCoin } from '~/api'
+
+/**
+ * Creates a predicate function for filtering user coins based on the ARTIST_COINS feature flag and balance requirements
+ *
+ * @param isArtistCoinsEnabled - Whether the ARTIST_COINS feature flag is enabled
+ * @param wAudioMintAddress - The WAUDIO mint address from environment
+ * @returns Predicate function that can be used with Array.filter()
+ */
+export const ownedCoinsFilter =
+ (isArtistCoinsEnabled: boolean, wAudioMintAddress: string) =>
+ (coin: UserCoin): boolean => {
+ if (!isArtistCoinsEnabled) {
+ // When artist coins disabled, only show AUDIO
+ return coin.mint === wAudioMintAddress
+ }
+
+ // When artist coins enabled, show all non-USDC tokens with balance > 0
+ // OR AUDIO regardless of balance
+ return (
+ coin.ticker !== 'USDC' &&
+ (coin.balance > 0 || coin.mint === wAudioMintAddress)
+ )
+ }

packages/common/src/utils/decimal.ts

@@ -164,6 +164,78 @@ export const formatCurrency = (
  }
 }
 
+/**
+ * Formats a number with subscript notation for many leading zeros after decimal.
+ * For example: 0.000068352 → 0.0₄68352
+ *
+ * @param num - The number to format
+ * @param locale - Locale for number formatting (defaults to 'en-US')
+ * @returns Formatted string with subscript notation for leading zeros
+ */
+export const formatCurrencyWithSubscript = (
+ num: number,
+ locale: string = 'en-US'
+): string => {
+ if (num === 0) return '$0.00'
+
+ try {
+ const decimalPlaces = getCurrencyDecimalPlaces(num)
+ const formatted = new Intl.NumberFormat(locale, {
+ style: 'currency',
+ currency: 'USD',
+ minimumFractionDigits: Math.min(decimalPlaces, 2),
+ maximumFractionDigits: decimalPlaces
+ }).format(num)
+
+ // Extract the number part (remove currency symbol and commas)
+ const numberPart = formatted.replace(/[^0-9.-]/g, '').replace(/,/g, '')
+
+ // Check if there are leading zeros after decimal that should be subscripted
+ const parts = numberPart.split('.')
+ if (parts.length === 2 && parts[0] === '0') {
+ const decimalPart = parts[1]
+
+ // Find consecutive zeros after the decimal
+ const zeroMatch = decimalPart.match(/^0+/)
+ if (zeroMatch) {
+ const zeroCount = zeroMatch[0].length
+ const remainingDigits = decimalPart.substring(zeroCount)
+
+ // Only apply subscript if there are 3 or more leading zeros
+ if (zeroCount >= 3 && remainingDigits.length > 0) {
+ // Create subscript number (Unicode subscript digits)
+ const subscriptDigits = zeroCount
+ .toString()
+ .split('')
+ .map((digit) => {
+ const subscripts = [
+ '₀',
+ '₁',
+ '₂',
+ '₃',
+ '₄',
+ '₅',
+ '₆',
+ '₇',
+ '₈',
+ '₉'
+ ]
+ return subscripts[parseInt(digit)]
+ })
+ .join('')
+
+ // Format as $0.0[subscript][remaining digits]
+ return `$0.0${subscriptDigits}${remainingDigits}`
+ }
+ }
+ }
+
+ return formatted
+ } catch {
+ return `$${num.toFixed(2)}`
+ }
+}
+
 export const formatCurrencyWithMax = (
  num: number,
  max: number,

packages/common/src/utils/index.ts

@@ -49,3 +49,4 @@ export * from './handle'
 export * from './comments'
 export * from './quickSearch'
 export * from './coinMetrics'
+export * from './coinUtils'

packages/mobile/src/screens/buy-sell-screen/BuySellFlow.tsx

@@ -1,7 +1,7 @@
 import React, { useState, useEffect, useMemo, useCallback } from 'react'
 
 import { useTokenPair, useTokens } from '@audius/common/api'
-import { useBuySellAnalytics } from '@audius/common/hooks'
+import { useBuySellAnalytics, useOwnedTokens } from '@audius/common/hooks'
 import { buySellMessages as messages } from '@audius/common/messages'
 import type { BuySellTab, TokenInfo } from '@audius/common/store'
 import {
@@ -76,12 +76,42 @@ export const BuySellFlow = ({
  })
 
  const { tokens } = useTokens()
- const availableBaseTokens: TokenInfo[] = useMemo(() => {
+
+ // Get all available tokens and owned tokens
+ const allAvailableTokens: TokenInfo[] = useMemo(() => {
  return Object.values(tokens).filter(
  (token) => token.symbol !== selectedQuoteToken
  )
  }, [tokens, selectedQuoteToken])
 
+ const { ownedTokens } = useOwnedTokens(allAvailableTokens)
+
+ const {
+ transactionData,
+ hasSufficientBalance,
+ handleTransactionDataChange,
+ resetTransactionData
+ } = useBuySellTransactionData()
+
+ const { activeTab, handleActiveTabChange } = useBuySellTabs({
+ setCurrentScreen,
+ resetTransactionData,
+ initialTab
+ })
+
+ // Determine which tokens to show based on current tab
+ // For buy tab: "You Receive" section should show all tokens
+ // For sell tab: "You Sell" section should show only owned tokens
+ const availableBaseTokens: TokenInfo[] = useMemo(() => {
+ if (activeTab === 'sell') {
+ // In sell tab, the input section should only show owned tokens
+ return ownedTokens
+ } else {
+ // In buy tab, the output section should show all tokens
+ return allAvailableTokens
+ }
+ }, [activeTab, ownedTokens, allAvailableTokens])
+
  const baseTokenOptions = useMemo(
  () =>
  availableBaseTokens.map((token) => ({
@@ -103,19 +133,6 @@ export const BuySellFlow = ({
  [availableBaseTokens]
  )
 
- const {
- transactionData,
- hasSufficientBalance,
- handleTransactionDataChange,
- resetTransactionData
- } = useBuySellTransactionData()
-
- const { activeTab, handleActiveTabChange } = useBuySellTabs({
- setCurrentScreen,
- resetTransactionData,
- initialTab
- })
-
  // Reset screen state to 'input' when this screen comes into focus
  // This handles the case where we navigate back from ConfirmSwapScreen
  useFocusEffect(

packages/mobile/src/screens/buy-sell-screen/components/SellScreen.tsx

@@ -5,10 +5,11 @@ import {
  useArtistCoin,
  useArtistCoins
 } from '@audius/common/api'
+import { useOwnedTokens } from '@audius/common/hooks'
 import type { TokenInfo, TokenPair } from '@audius/common/store'
 import { useTokenSwapForm } from '@audius/common/store'
 
-import { Box, Flex, Skeleton, Text } from '@audius/harmony-native'
+import { Box, Flex, Skeleton } from '@audius/harmony-native'
 import { InputTokenSection } from 'app/components/buy-sell/InputTokenSection'
 import { OutputTokenSection } from 'app/components/buy-sell/OutputTokenSection'
 
@@ -107,10 +108,18 @@ export const SellScreen = ({
  }
 
  const { data: coins } = useArtistCoins()
- const availableInputTokens: TokenInfo[] = useMemo(() => {
+ const allAvailableTokens: TokenInfo[] = useMemo(() => {
  return Object.values(transformArtistCoinsToTokenInfoMap(coins ?? []))
  }, [coins])
 
+ // Use the owned tokens hook to get filtered tokens
+ const { ownedTokens } = useOwnedTokens(allAvailableTokens)
+
+ // For sell screen:
+ // - "You Sell" section (input): Should show only tokens the user owns
+ // - "You Receive" section (output): Should show all available tokens (but only USDC in practice)
+ const availableInputTokens = ownedTokens
+
  if (!tokenPair) return null
 
  // Extract the tokens from the pair
@@ -151,10 +160,6 @@ export const SellScreen = ({
  />
  </>
  )}
- <Flex row gap='xs'>
- <Text color='subdued'>Rate</Text>
- <Text>{`1 ${baseToken.symbol} ≈ ${Number(tokenPrice).toFixed(8)} ${quoteToken.symbol}`}</Text>
- </Flex>
  </Flex>
  )
 }

packages/common/src/hooks/index.ts

@@ -48,6 +48,7 @@ export * from './useFormattedTokenBalance'
 export * from './useCurrentTrack'
 export * from './useDebounce'
 export * from './useIsArtist'
+export * from './useOwnedTokens'
 
 export * from './useAnalytics'
 export * from './useBuySellAnalytics'

packages/common/src/hooks/useFormattedTokenBalance.ts

@@ -6,7 +6,7 @@ import { useTokenBalance, useArtistCoins } from '../api'
 import { Status } from '../models/Status'
 import {
  getTokenDecimalPlaces,
-formatCurrency,
+formatCurrencyWithSubscript,
  isNullOrUndefined
 } from '../utils'
 
@@ -65,7 +65,7 @@ export const useFormattedTokenBalance = (
  if (!tokenPrice) return '$0.00'
 
  const priceNumber = Number(new FixedDecimal(tokenPrice).toString())
- return formatCurrency(priceNumber)
+ return formatCurrencyWithSubscript(priceNumber)
  }, [tokenPrice])
 
  return {

packages/common/src/hooks/useOwnedTokens.ts

@@ -0,0 +1,52 @@
+import { useMemo } from 'react'
+
+import {
+ useCurrentUserId,
+ useUserCoins,
+ useQueryContext,
+ UserCoin
+} from '~/api'
+import { useFeatureFlag } from '~/hooks'
+import { FeatureFlags } from '~/services'
+import type { TokenInfo } from '~/store'
+import { ownedCoinsFilter } from '~/utils'
+
+/**
+ * Hook to filter tokens based on user ownership and positive balance
+ * Respects the ARTIST_COINS feature flag - when disabled, only shows AUDIO tokens
+ */
+export const useOwnedTokens = (allTokens: TokenInfo[]) => {
+ const { data: currentUserId } = useCurrentUserId()
+ const { data: userCoins } = useUserCoins({ userId: currentUserId })
+ const { env } = useQueryContext()
+ const { isEnabled: isArtistCoinsEnabled } = useFeatureFlag(
+ FeatureFlags.ARTIST_COINS
+ )
+
+ const ownedTokens = useMemo(() => {
+ if (!userCoins || !allTokens.length) {
+ return []
+ }
+
+ const filteredUserCoins = userCoins.filter(
+ ownedCoinsFilter(!!isArtistCoinsEnabled, env.WAUDIO_MINT_ADDRESS)
+ )
+
+ // Create a map of user's owned tokens by mint address
+ const userOwnedMints = new Set(
+ filteredUserCoins.map((coin: UserCoin) => coin.mint)
+ )
+
+ // Filter available tokens to only include ones the user owns
+ const ownedTokensList = allTokens.filter((token) =>
+ userOwnedMints.has(token.address)
+ )
+
+ return ownedTokensList
+ }, [userCoins, allTokens, isArtistCoinsEnabled, env.WAUDIO_MINT_ADDRESS])
+
+ return {
+ ownedTokens,
+ isLoading: !userCoins
+ }
+}

packages/common/src/store/ui/buy-sell/index.ts

@@ -11,4 +11,3 @@ export * from './useTokenSwapForm'
 export * from './useAvailableTokens'
 export * from './useCurrentTokenPair'
 export * from './useTokenStates'
-export * from './useGroupCoinPairs'

packages/common/src/utils/coinUtils.ts

@@ -0,0 +1,24 @@
+import { UserCoin } from '~/api'
+
+/**
+ * Creates a predicate function for filtering user coins based on the ARTIST_COINS feature flag and balance requirements
+ *
+ * @param isArtistCoinsEnabled - Whether the ARTIST_COINS feature flag is enabled
+ * @param wAudioMintAddress - The WAUDIO mint address from environment
+ * @returns Predicate function that can be used with Array.filter()
+ */
+export const ownedCoinsFilter =
+ (isArtistCoinsEnabled: boolean, wAudioMintAddress: string) =>
+ (coin: UserCoin): boolean => {
+ if (!isArtistCoinsEnabled) {
+ // When artist coins disabled, only show AUDIO
+ return coin.mint === wAudioMintAddress
+ }
+
+ // When artist coins enabled, show all non-USDC tokens with balance > 0
+ // OR AUDIO regardless of balance
+ return (
+ coin.ticker !== 'USDC' &&
+ (coin.balance > 0 || coin.mint === wAudioMintAddress)
+ )
+ }

packages/common/src/utils/decimal.ts

@@ -164,6 +164,78 @@ export const formatCurrency = (
  }
 }
 
+/**
+ * Formats a number with subscript notation for many leading zeros after decimal.
+ * For example: 0.000068352 → 0.0₄68352
+ *
+ * @param num - The number to format
+ * @param locale - Locale for number formatting (defaults to 'en-US')
+ * @returns Formatted string with subscript notation for leading zeros
+ */
+export const formatCurrencyWithSubscript = (
+ num: number,
+ locale: string = 'en-US'
+): string => {
+ if (num === 0) return '$0.00'
+
+ try {
+ const decimalPlaces = getCurrencyDecimalPlaces(num)
+ const formatted = new Intl.NumberFormat(locale, {
+ style: 'currency',
+ currency: 'USD',
+ minimumFractionDigits: Math.min(decimalPlaces, 2),
+ maximumFractionDigits: decimalPlaces
+ }).format(num)
+
+ // Extract the number part (remove currency symbol and commas)
+ const numberPart = formatted.replace(/[^0-9.-]/g, '').replace(/,/g, '')
+
+ // Check if there are leading zeros after decimal that should be subscripted
+ const parts = numberPart.split('.')
+ if (parts.length === 2 && parts[0] === '0') {
+ const decimalPart = parts[1]
+
+ // Find consecutive zeros after the decimal
+ const zeroMatch = decimalPart.match(/^0+/)
+ if (zeroMatch) {
+ const zeroCount = zeroMatch[0].length
+ const remainingDigits = decimalPart.substring(zeroCount)
+
+ // Only apply subscript if there are 3 or more leading zeros
+ if (zeroCount >= 3 && remainingDigits.length > 0) {
+ // Create subscript number (Unicode subscript digits)
+ const subscriptDigits = zeroCount
+ .toString()
+ .split('')
+ .map((digit) => {
+ const subscripts = [
+ '₀',
+ '₁',
+ '₂',
+ '₃',
+ '₄',
+ '₅',
+ '₆',
+ '₇',
+ '₈',
+ '₉'
+ ]
+ return subscripts[parseInt(digit)]
+ })
+ .join('')
+
+ // Format as $0.0[subscript][remaining digits]
+ return `$0.0${subscriptDigits}${remainingDigits}`
+ }
+ }
+ }
+
+ return formatted
+ } catch {
+ return `$${num.toFixed(2)}`
+ }
+}
+
 export const formatCurrencyWithMax = (
  num: number,
  max: number,

packages/common/src/utils/index.ts

@@ -49,3 +49,4 @@ export * from './handle'
 export * from './comments'
 export * from './quickSearch'
 export * from './coinMetrics'
+export * from './coinUtils'

packages/mobile/src/screens/buy-sell-screen/BuySellFlow.tsx

@@ -1,7 +1,7 @@
 import React, { useState, useEffect, useMemo, useCallback } from 'react'
 
 import { useTokenPair, useTokens } from '@audius/common/api'
-import { useBuySellAnalytics } from '@audius/common/hooks'
+import { useBuySellAnalytics, useOwnedTokens } from '@audius/common/hooks'
 import { buySellMessages as messages } from '@audius/common/messages'
 import type { BuySellTab, TokenInfo } from '@audius/common/store'
 import {
@@ -76,12 +76,42 @@ export const BuySellFlow = ({
  })
 
  const { tokens } = useTokens()
- const availableBaseTokens: TokenInfo[] = useMemo(() => {
+
+ // Get all available tokens and owned tokens
+ const allAvailableTokens: TokenInfo[] = useMemo(() => {
  return Object.values(tokens).filter(
  (token) => token.symbol !== selectedQuoteToken
  )
  }, [tokens, selectedQuoteToken])
 
+ const { ownedTokens } = useOwnedTokens(allAvailableTokens)
+
+ const {
+ transactionData,
+ hasSufficientBalance,
+ handleTransactionDataChange,
+ resetTransactionData
+ } = useBuySellTransactionData()
+
+ const { activeTab, handleActiveTabChange } = useBuySellTabs({
+ setCurrentScreen,
+ resetTransactionData,
+ initialTab
+ })
+
+ // Determine which tokens to show based on current tab
+ // For buy tab: "You Receive" section should show all tokens
+ // For sell tab: "You Sell" section should show only owned tokens
+ const availableBaseTokens: TokenInfo[] = useMemo(() => {
+ if (activeTab === 'sell') {
+ // In sell tab, the input section should only show owned tokens
+ return ownedTokens
+ } else {
+ // In buy tab, the output section should show all tokens
+ return allAvailableTokens
+ }
+ }, [activeTab, ownedTokens, allAvailableTokens])
+
  const baseTokenOptions = useMemo(
  () =>
  availableBaseTokens.map((token) => ({
@@ -103,19 +133,6 @@ export const BuySellFlow = ({
  [availableBaseTokens]
  )
 
- const {
- transactionData,
- hasSufficientBalance,
- handleTransactionDataChange,
- resetTransactionData
- } = useBuySellTransactionData()
-
- const { activeTab, handleActiveTabChange } = useBuySellTabs({
- setCurrentScreen,
- resetTransactionData,
- initialTab
- })
-
  // Reset screen state to 'input' when this screen comes into focus
  // This handles the case where we navigate back from ConfirmSwapScreen
  useFocusEffect(

packages/mobile/src/screens/buy-sell-screen/components/SellScreen.tsx

@@ -5,10 +5,11 @@ import {
  useArtistCoin,
  useArtistCoins
 } from '@audius/common/api'
+import { useOwnedTokens } from '@audius/common/hooks'
 import type { TokenInfo, TokenPair } from '@audius/common/store'
 import { useTokenSwapForm } from '@audius/common/store'
 
-import { Box, Flex, Skeleton, Text } from '@audius/harmony-native'
+import { Box, Flex, Skeleton } from '@audius/harmony-native'
 import { InputTokenSection } from 'app/components/buy-sell/InputTokenSection'
 import { OutputTokenSection } from 'app/components/buy-sell/OutputTokenSection'
 
@@ -107,10 +108,18 @@ export const SellScreen = ({
  }
 
  const { data: coins } = useArtistCoins()
- const availableInputTokens: TokenInfo[] = useMemo(() => {
+ const allAvailableTokens: TokenInfo[] = useMemo(() => {
  return Object.values(transformArtistCoinsToTokenInfoMap(coins ?? []))
  }, [coins])
 
+ // Use the owned tokens hook to get filtered tokens
+ const { ownedTokens } = useOwnedTokens(allAvailableTokens)
+
+ // For sell screen:
+ // - "You Sell" section (input): Should show only tokens the user owns
+ // - "You Receive" section (output): Should show all available tokens (but only USDC in practice)
+ const availableInputTokens = ownedTokens
+
  if (!tokenPair) return null
 
  // Extract the tokens from the pair
@@ -151,10 +160,6 @@ export const SellScreen = ({
  />
  </>
  )}
- <Flex row gap='xs'>
- <Text color='subdued'>Rate</Text>
- <Text>{`1 ${baseToken.symbol} ≈ ${Number(tokenPrice).toFixed(8)} ${quoteToken.symbol}`}</Text>
- </Flex>
  </Flex>
  )
 }

packages/common/src/hooks/index.ts

@@ -48,6 +48,7 @@ export * from './useFormattedTokenBalance'
 export * from './useCurrentTrack'
 export * from './useDebounce'
 export * from './useIsArtist'
+export * from './useOwnedTokens'
 
 export * from './useAnalytics'
 export * from './useBuySellAnalytics'

packages/common/src/hooks/useFormattedTokenBalance.ts

@@ -6,7 +6,7 @@ import { useTokenBalance, useArtistCoins } from '../api'
 import { Status } from '../models/Status'
 import {
  getTokenDecimalPlaces,
-formatCurrency,
+formatCurrencyWithSubscript,
  isNullOrUndefined
 } from '../utils'
 
@@ -65,7 +65,7 @@ export const useFormattedTokenBalance = (
  if (!tokenPrice) return '$0.00'
 
  const priceNumber = Number(new FixedDecimal(tokenPrice).toString())
- return formatCurrency(priceNumber)
+ return formatCurrencyWithSubscript(priceNumber)
  }, [tokenPrice])
 
  return {

packages/common/src/hooks/useOwnedTokens.ts

@@ -0,0 +1,52 @@
+import { useMemo } from 'react'
+
+import {
+ useCurrentUserId,
+ useUserCoins,
+ useQueryContext,
+ UserCoin
+} from '~/api'
+import { useFeatureFlag } from '~/hooks'
+import { FeatureFlags } from '~/services'
+import type { TokenInfo } from '~/store'
+import { ownedCoinsFilter } from '~/utils'
+
+/**
+ * Hook to filter tokens based on user ownership and positive balance
+ * Respects the ARTIST_COINS feature flag - when disabled, only shows AUDIO tokens
+ */
+export const useOwnedTokens = (allTokens: TokenInfo[]) => {
+ const { data: currentUserId } = useCurrentUserId()
+ const { data: userCoins } = useUserCoins({ userId: currentUserId })
+ const { env } = useQueryContext()
+ const { isEnabled: isArtistCoinsEnabled } = useFeatureFlag(
+ FeatureFlags.ARTIST_COINS
+ )
+
+ const ownedTokens = useMemo(() => {
+ if (!userCoins || !allTokens.length) {
+ return []
+ }
+
+ const filteredUserCoins = userCoins.filter(
+ ownedCoinsFilter(!!isArtistCoinsEnabled, env.WAUDIO_MINT_ADDRESS)
+ )
+
+ // Create a map of user's owned tokens by mint address
+ const userOwnedMints = new Set(
+ filteredUserCoins.map((coin: UserCoin) => coin.mint)
+ )
+
+ // Filter available tokens to only include ones the user owns
+ const ownedTokensList = allTokens.filter((token) =>
+ userOwnedMints.has(token.address)
+ )
+
+ return ownedTokensList
+ }, [userCoins, allTokens, isArtistCoinsEnabled, env.WAUDIO_MINT_ADDRESS])
+
+ return {
+ ownedTokens,
+ isLoading: !userCoins
+ }
+}

packages/common/src/store/ui/buy-sell/index.ts

@@ -11,4 +11,3 @@ export * from './useTokenSwapForm'
 export * from './useAvailableTokens'
 export * from './useCurrentTokenPair'
 export * from './useTokenStates'
-export * from './useGroupCoinPairs'

packages/common/src/utils/coinUtils.ts

@@ -0,0 +1,24 @@
+import { UserCoin } from '~/api'
+
+/**
+ * Creates a predicate function for filtering user coins based on the ARTIST_COINS feature flag and balance requirements
+ *
+ * @param isArtistCoinsEnabled - Whether the ARTIST_COINS feature flag is enabled
+ * @param wAudioMintAddress - The WAUDIO mint address from environment
+ * @returns Predicate function that can be used with Array.filter()
+ */
+export const ownedCoinsFilter =
+ (isArtistCoinsEnabled: boolean, wAudioMintAddress: string) =>
+ (coin: UserCoin): boolean => {
+ if (!isArtistCoinsEnabled) {
+ // When artist coins disabled, only show AUDIO
+ return coin.mint === wAudioMintAddress
+ }
+
+ // When artist coins enabled, show all non-USDC tokens with balance > 0
+ // OR AUDIO regardless of balance
+ return (
+ coin.ticker !== 'USDC' &&
+ (coin.balance > 0 || coin.mint === wAudioMintAddress)
+ )
+ }

packages/common/src/utils/decimal.ts

@@ -164,6 +164,78 @@ export const formatCurrency = (
  }
 }
 
+/**
+ * Formats a number with subscript notation for many leading zeros after decimal.
+ * For example: 0.000068352 → 0.0₄68352
+ *
+ * @param num - The number to format
+ * @param locale - Locale for number formatting (defaults to 'en-US')
+ * @returns Formatted string with subscript notation for leading zeros
+ */
+export const formatCurrencyWithSubscript = (
+ num: number,
+ locale: string = 'en-US'
+): string => {
+ if (num === 0) return '$0.00'
+
+ try {
+ const decimalPlaces = getCurrencyDecimalPlaces(num)
+ const formatted = new Intl.NumberFormat(locale, {
+ style: 'currency',
+ currency: 'USD',
+ minimumFractionDigits: Math.min(decimalPlaces, 2),
+ maximumFractionDigits: decimalPlaces
+ }).format(num)
+
+ // Extract the number part (remove currency symbol and commas)
+ const numberPart = formatted.replace(/[^0-9.-]/g, '').replace(/,/g, '')
+
+ // Check if there are leading zeros after decimal that should be subscripted
+ const parts = numberPart.split('.')
+ if (parts.length === 2 && parts[0] === '0') {
+ const decimalPart = parts[1]
+
+ // Find consecutive zeros after the decimal
+ const zeroMatch = decimalPart.match(/^0+/)
+ if (zeroMatch) {
+ const zeroCount = zeroMatch[0].length
+ const remainingDigits = decimalPart.substring(zeroCount)
+
+ // Only apply subscript if there are 3 or more leading zeros
+ if (zeroCount >= 3 && remainingDigits.length > 0) {
+ // Create subscript number (Unicode subscript digits)
+ const subscriptDigits = zeroCount
+ .toString()
+ .split('')
+ .map((digit) => {
+ const subscripts = [
+ '₀',
+ '₁',
+ '₂',
+ '₃',
+ '₄',
+ '₅',
+ '₆',
+ '₇',
+ '₈',
+ '₉'
+ ]
+ return subscripts[parseInt(digit)]
+ })
+ .join('')
+
+ // Format as $0.0[subscript][remaining digits]
+ return `$0.0${subscriptDigits}${remainingDigits}`
+ }
+ }
+ }
+
+ return formatted
+ } catch {
+ return `$${num.toFixed(2)}`
+ }
+}
+
 export const formatCurrencyWithMax = (
  num: number,
  max: number,

packages/common/src/utils/index.ts

@@ -49,3 +49,4 @@ export * from './handle'
 export * from './comments'
 export * from './quickSearch'
 export * from './coinMetrics'
+export * from './coinUtils'

packages/mobile/src/screens/buy-sell-screen/BuySellFlow.tsx

@@ -1,7 +1,7 @@
 import React, { useState, useEffect, useMemo, useCallback } from 'react'
 
 import { useTokenPair, useTokens } from '@audius/common/api'
-import { useBuySellAnalytics } from '@audius/common/hooks'
+import { useBuySellAnalytics, useOwnedTokens } from '@audius/common/hooks'
 import { buySellMessages as messages } from '@audius/common/messages'
 import type { BuySellTab, TokenInfo } from '@audius/common/store'
 import {
@@ -76,12 +76,42 @@ export const BuySellFlow = ({
  })
 
  const { tokens } = useTokens()
- const availableBaseTokens: TokenInfo[] = useMemo(() => {
+
+ // Get all available tokens and owned tokens
+ const allAvailableTokens: TokenInfo[] = useMemo(() => {
  return Object.values(tokens).filter(
  (token) => token.symbol !== selectedQuoteToken
  )
  }, [tokens, selectedQuoteToken])
 
+ const { ownedTokens } = useOwnedTokens(allAvailableTokens)
+
+ const {
+ transactionData,
+ hasSufficientBalance,
+ handleTransactionDataChange,
+ resetTransactionData
+ } = useBuySellTransactionData()
+
+ const { activeTab, handleActiveTabChange } = useBuySellTabs({
+ setCurrentScreen,
+ resetTransactionData,
+ initialTab
+ })
+
+ // Determine which tokens to show based on current tab
+ // For buy tab: "You Receive" section should show all tokens
+ // For sell tab: "You Sell" section should show only owned tokens
+ const availableBaseTokens: TokenInfo[] = useMemo(() => {
+ if (activeTab === 'sell') {
+ // In sell tab, the input section should only show owned tokens
+ return ownedTokens
+ } else {
+ // In buy tab, the output section should show all tokens
+ return allAvailableTokens
+ }
+ }, [activeTab, ownedTokens, allAvailableTokens])
+
  const baseTokenOptions = useMemo(
  () =>
  availableBaseTokens.map((token) => ({
@@ -103,19 +133,6 @@ export const BuySellFlow = ({
  [availableBaseTokens]
  )
 
- const {
- transactionData,
- hasSufficientBalance,
- handleTransactionDataChange,
- resetTransactionData
- } = useBuySellTransactionData()
-
- const { activeTab, handleActiveTabChange } = useBuySellTabs({
- setCurrentScreen,
- resetTransactionData,
- initialTab
- })
-
  // Reset screen state to 'input' when this screen comes into focus
  // This handles the case where we navigate back from ConfirmSwapScreen
  useFocusEffect(

packages/mobile/src/screens/buy-sell-screen/components/SellScreen.tsx

@@ -5,10 +5,11 @@ import {
  useArtistCoin,
  useArtistCoins
 } from '@audius/common/api'
+import { useOwnedTokens } from '@audius/common/hooks'
 import type { TokenInfo, TokenPair } from '@audius/common/store'
 import { useTokenSwapForm } from '@audius/common/store'
 
-import { Box, Flex, Skeleton, Text } from '@audius/harmony-native'
+import { Box, Flex, Skeleton } from '@audius/harmony-native'
 import { InputTokenSection } from 'app/components/buy-sell/InputTokenSection'
 import { OutputTokenSection } from 'app/components/buy-sell/OutputTokenSection'
 
@@ -107,10 +108,18 @@ export const SellScreen = ({
  }
 
  const { data: coins } = useArtistCoins()
- const availableInputTokens: TokenInfo[] = useMemo(() => {
+ const allAvailableTokens: TokenInfo[] = useMemo(() => {
  return Object.values(transformArtistCoinsToTokenInfoMap(coins ?? []))
  }, [coins])
 
+ // Use the owned tokens hook to get filtered tokens
+ const { ownedTokens } = useOwnedTokens(allAvailableTokens)
+
+ // For sell screen:
+ // - "You Sell" section (input): Should show only tokens the user owns
+ // - "You Receive" section (output): Should show all available tokens (but only USDC in practice)
+ const availableInputTokens = ownedTokens
+
  if (!tokenPair) return null
 
  // Extract the tokens from the pair
@@ -151,10 +160,6 @@ export const SellScreen = ({
  />
  </>
  )}
- <Flex row gap='xs'>
- <Text color='subdued'>Rate</Text>
- <Text>{`1 ${baseToken.symbol} ≈ ${Number(tokenPrice).toFixed(8)} ${quoteToken.symbol}`}</Text>
- </Flex>
  </Flex>
  )
 }

packages/common/src/hooks/index.ts

@@ -48,6 +48,7 @@ export * from './useFormattedTokenBalance'
 export * from './useCurrentTrack'
 export * from './useDebounce'
 export * from './useIsArtist'
+export * from './useOwnedTokens'
 
 export * from './useAnalytics'
 export * from './useBuySellAnalytics'

packages/common/src/hooks/useFormattedTokenBalance.ts

@@ -6,7 +6,7 @@ import { useTokenBalance, useArtistCoins } from '../api'
 import { Status } from '../models/Status'
 import {
  getTokenDecimalPlaces,
-formatCurrency,
+formatCurrencyWithSubscript,
  isNullOrUndefined
 } from '../utils'
 
@@ -65,7 +65,7 @@ export const useFormattedTokenBalance = (
  if (!tokenPrice) return '$0.00'
 
  const priceNumber = Number(new FixedDecimal(tokenPrice).toString())
- return formatCurrency(priceNumber)
+ return formatCurrencyWithSubscript(priceNumber)
  }, [tokenPrice])
 
  return {

packages/common/src/hooks/useOwnedTokens.ts

@@ -0,0 +1,52 @@
+import { useMemo } from 'react'
+
+import {
+ useCurrentUserId,
+ useUserCoins,
+ useQueryContext,
+ UserCoin
+} from '~/api'
+import { useFeatureFlag } from '~/hooks'
+import { FeatureFlags } from '~/services'
+import type { TokenInfo } from '~/store'
+import { ownedCoinsFilter } from '~/utils'
+
+/**
+ * Hook to filter tokens based on user ownership and positive balance
+ * Respects the ARTIST_COINS feature flag - when disabled, only shows AUDIO tokens
+ */
+export const useOwnedTokens = (allTokens: TokenInfo[]) => {
+ const { data: currentUserId } = useCurrentUserId()
+ const { data: userCoins } = useUserCoins({ userId: currentUserId })
+ const { env } = useQueryContext()
+ const { isEnabled: isArtistCoinsEnabled } = useFeatureFlag(
+ FeatureFlags.ARTIST_COINS
+ )
+
+ const ownedTokens = useMemo(() => {
+ if (!userCoins || !allTokens.length) {
+ return []
+ }
+
+ const filteredUserCoins = userCoins.filter(
+ ownedCoinsFilter(!!isArtistCoinsEnabled, env.WAUDIO_MINT_ADDRESS)
+ )
+
+ // Create a map of user's owned tokens by mint address
+ const userOwnedMints = new Set(
+ filteredUserCoins.map((coin: UserCoin) => coin.mint)
+ )
+
+ // Filter available tokens to only include ones the user owns
+ const ownedTokensList = allTokens.filter((token) =>
+ userOwnedMints.has(token.address)
+ )
+
+ return ownedTokensList
+ }, [userCoins, allTokens, isArtistCoinsEnabled, env.WAUDIO_MINT_ADDRESS])
+
+ return {
+ ownedTokens,
+ isLoading: !userCoins
+ }
+}

packages/common/src/store/ui/buy-sell/index.ts

@@ -11,4 +11,3 @@ export * from './useTokenSwapForm'
 export * from './useAvailableTokens'
 export * from './useCurrentTokenPair'
 export * from './useTokenStates'
-export * from './useGroupCoinPairs'

packages/common/src/utils/coinUtils.ts

@@ -0,0 +1,24 @@
+import { UserCoin } from '~/api'
+
+/**
+ * Creates a predicate function for filtering user coins based on the ARTIST_COINS feature flag and balance requirements
+ *
+ * @param isArtistCoinsEnabled - Whether the ARTIST_COINS feature flag is enabled
+ * @param wAudioMintAddress - The WAUDIO mint address from environment
+ * @returns Predicate function that can be used with Array.filter()
+ */
+export const ownedCoinsFilter =
+ (isArtistCoinsEnabled: boolean, wAudioMintAddress: string) =>
+ (coin: UserCoin): boolean => {
+ if (!isArtistCoinsEnabled) {
+ // When artist coins disabled, only show AUDIO
+ return coin.mint === wAudioMintAddress
+ }
+
+ // When artist coins enabled, show all non-USDC tokens with balance > 0
+ // OR AUDIO regardless of balance
+ return (
+ coin.ticker !== 'USDC' &&
+ (coin.balance > 0 || coin.mint === wAudioMintAddress)
+ )
+ }

packages/common/src/utils/decimal.ts

@@ -164,6 +164,78 @@ export const formatCurrency = (
  }
 }
 
+/**
+ * Formats a number with subscript notation for many leading zeros after decimal.
+ * For example: 0.000068352 → 0.0₄68352
+ *
+ * @param num - The number to format
+ * @param locale - Locale for number formatting (defaults to 'en-US')
+ * @returns Formatted string with subscript notation for leading zeros
+ */
+export const formatCurrencyWithSubscript = (
+ num: number,
+ locale: string = 'en-US'
+): string => {
+ if (num === 0) return '$0.00'
+
+ try {
+ const decimalPlaces = getCurrencyDecimalPlaces(num)
+ const formatted = new Intl.NumberFormat(locale, {
+ style: 'currency',
+ currency: 'USD',
+ minimumFractionDigits: Math.min(decimalPlaces, 2),
+ maximumFractionDigits: decimalPlaces
+ }).format(num)
+
+ // Extract the number part (remove currency symbol and commas)
+ const numberPart = formatted.replace(/[^0-9.-]/g, '').replace(/,/g, '')
+
+ // Check if there are leading zeros after decimal that should be subscripted
+ const parts = numberPart.split('.')
+ if (parts.length === 2 && parts[0] === '0') {
+ const decimalPart = parts[1]
+
+ // Find consecutive zeros after the decimal
+ const zeroMatch = decimalPart.match(/^0+/)
+ if (zeroMatch) {
+ const zeroCount = zeroMatch[0].length
+ const remainingDigits = decimalPart.substring(zeroCount)
+
+ // Only apply subscript if there are 3 or more leading zeros
+ if (zeroCount >= 3 && remainingDigits.length > 0) {
+ // Create subscript number (Unicode subscript digits)
+ const subscriptDigits = zeroCount
+ .toString()
+ .split('')
+ .map((digit) => {
+ const subscripts = [
+ '₀',
+ '₁',
+ '₂',
+ '₃',
+ '₄',
+ '₅',
+ '₆',
+ '₇',
+ '₈',
+ '₉'
+ ]
+ return subscripts[parseInt(digit)]
+ })
+ .join('')
+
+ // Format as $0.0[subscript][remaining digits]
+ return `$0.0${subscriptDigits}${remainingDigits}`
+ }
+ }
+ }
+
+ return formatted
+ } catch {
+ return `$${num.toFixed(2)}`
+ }
+}
+
 export const formatCurrencyWithMax = (
  num: number,
  max: number,

packages/common/src/utils/index.ts

@@ -49,3 +49,4 @@ export * from './handle'
 export * from './comments'
 export * from './quickSearch'
 export * from './coinMetrics'
+export * from './coinUtils'

packages/mobile/src/screens/buy-sell-screen/BuySellFlow.tsx

@@ -1,7 +1,7 @@
 import React, { useState, useEffect, useMemo, useCallback } from 'react'
 
 import { useTokenPair, useTokens } from '@audius/common/api'
-import { useBuySellAnalytics } from '@audius/common/hooks'
+import { useBuySellAnalytics, useOwnedTokens } from '@audius/common/hooks'
 import { buySellMessages as messages } from '@audius/common/messages'
 import type { BuySellTab, TokenInfo } from '@audius/common/store'
 import {
@@ -76,12 +76,42 @@ export const BuySellFlow = ({
  })
 
  const { tokens } = useTokens()
- const availableBaseTokens: TokenInfo[] = useMemo(() => {
+
+ // Get all available tokens and owned tokens
+ const allAvailableTokens: TokenInfo[] = useMemo(() => {
  return Object.values(tokens).filter(
  (token) => token.symbol !== selectedQuoteToken
  )
  }, [tokens, selectedQuoteToken])
 
+ const { ownedTokens } = useOwnedTokens(allAvailableTokens)
+
+ const {
+ transactionData,
+ hasSufficientBalance,
+ handleTransactionDataChange,
+ resetTransactionData
+ } = useBuySellTransactionData()
+
+ const { activeTab, handleActiveTabChange } = useBuySellTabs({
+ setCurrentScreen,
+ resetTransactionData,
+ initialTab
+ })
+
+ // Determine which tokens to show based on current tab
+ // For buy tab: "You Receive" section should show all tokens
+ // For sell tab: "You Sell" section should show only owned tokens
+ const availableBaseTokens: TokenInfo[] = useMemo(() => {
+ if (activeTab === 'sell') {
+ // In sell tab, the input section should only show owned tokens
+ return ownedTokens
+ } else {
+ // In buy tab, the output section should show all tokens
+ return allAvailableTokens
+ }
+ }, [activeTab, ownedTokens, allAvailableTokens])
+
  const baseTokenOptions = useMemo(
  () =>
  availableBaseTokens.map((token) => ({
@@ -103,19 +133,6 @@ export const BuySellFlow = ({
  [availableBaseTokens]
  )
 
- const {
- transactionData,
- hasSufficientBalance,
- handleTransactionDataChange,
- resetTransactionData
- } = useBuySellTransactionData()
-
- const { activeTab, handleActiveTabChange } = useBuySellTabs({
- setCurrentScreen,
- resetTransactionData,
- initialTab
- })
-
  // Reset screen state to 'input' when this screen comes into focus
  // This handles the case where we navigate back from ConfirmSwapScreen
  useFocusEffect(

packages/mobile/src/screens/buy-sell-screen/components/SellScreen.tsx

@@ -5,10 +5,11 @@ import {
  useArtistCoin,
  useArtistCoins
 } from '@audius/common/api'
+import { useOwnedTokens } from '@audius/common/hooks'
 import type { TokenInfo, TokenPair } from '@audius/common/store'
 import { useTokenSwapForm } from '@audius/common/store'
 
-import { Box, Flex, Skeleton, Text } from '@audius/harmony-native'
+import { Box, Flex, Skeleton } from '@audius/harmony-native'
 import { InputTokenSection } from 'app/components/buy-sell/InputTokenSection'
 import { OutputTokenSection } from 'app/components/buy-sell/OutputTokenSection'
 
@@ -107,10 +108,18 @@ export const SellScreen = ({
  }
 
  const { data: coins } = useArtistCoins()
- const availableInputTokens: TokenInfo[] = useMemo(() => {
+ const allAvailableTokens: TokenInfo[] = useMemo(() => {
  return Object.values(transformArtistCoinsToTokenInfoMap(coins ?? []))
  }, [coins])
 
+ // Use the owned tokens hook to get filtered tokens
+ const { ownedTokens } = useOwnedTokens(allAvailableTokens)
+
+ // For sell screen:
+ // - "You Sell" section (input): Should show only tokens the user owns
+ // - "You Receive" section (output): Should show all available tokens (but only USDC in practice)
+ const availableInputTokens = ownedTokens
+
  if (!tokenPair) return null
 
  // Extract the tokens from the pair
@@ -151,10 +160,6 @@ export const SellScreen = ({
  />
  </>
  )}
- <Flex row gap='xs'>
- <Text color='subdued'>Rate</Text>
- <Text>{`1 ${baseToken.symbol} ≈ ${Number(tokenPrice).toFixed(8)} ${quoteToken.symbol}`}</Text>
- </Flex>
  </Flex>
  )
 }

packages/common/src/hooks/index.ts

@@ -48,6 +48,7 @@ export * from './useFormattedTokenBalance'
 export * from './useCurrentTrack'
 export * from './useDebounce'
 export * from './useIsArtist'
+export * from './useOwnedTokens'
 
 export * from './useAnalytics'
 export * from './useBuySellAnalytics'

packages/common/src/hooks/useFormattedTokenBalance.ts

@@ -6,7 +6,7 @@ import { useTokenBalance, useArtistCoins } from '../api'
 import { Status } from '../models/Status'
 import {
  getTokenDecimalPlaces,
-formatCurrency,
+formatCurrencyWithSubscript,
  isNullOrUndefined
 } from '../utils'
 
@@ -65,7 +65,7 @@ export const useFormattedTokenBalance = (
  if (!tokenPrice) return '$0.00'
 
  const priceNumber = Number(new FixedDecimal(tokenPrice).toString())
- return formatCurrency(priceNumber)
+ return formatCurrencyWithSubscript(priceNumber)
  }, [tokenPrice])
 
  return {

packages/common/src/hooks/useOwnedTokens.ts

@@ -0,0 +1,52 @@
+import { useMemo } from 'react'
+
+import {
+ useCurrentUserId,
+ useUserCoins,
+ useQueryContext,
+ UserCoin
+} from '~/api'
+import { useFeatureFlag } from '~/hooks'
+import { FeatureFlags } from '~/services'
+import type { TokenInfo } from '~/store'
+import { ownedCoinsFilter } from '~/utils'
+
+/**
+ * Hook to filter tokens based on user ownership and positive balance
+ * Respects the ARTIST_COINS feature flag - when disabled, only shows AUDIO tokens
+ */
+export const useOwnedTokens = (allTokens: TokenInfo[]) => {
+ const { data: currentUserId } = useCurrentUserId()
+ const { data: userCoins } = useUserCoins({ userId: currentUserId })
+ const { env } = useQueryContext()
+ const { isEnabled: isArtistCoinsEnabled } = useFeatureFlag(
+ FeatureFlags.ARTIST_COINS
+ )
+
+ const ownedTokens = useMemo(() => {
+ if (!userCoins || !allTokens.length) {
+ return []
+ }
+
+ const filteredUserCoins = userCoins.filter(
+ ownedCoinsFilter(!!isArtistCoinsEnabled, env.WAUDIO_MINT_ADDRESS)
+ )
+
+ // Create a map of user's owned tokens by mint address
+ const userOwnedMints = new Set(
+ filteredUserCoins.map((coin: UserCoin) => coin.mint)
+ )
+
+ // Filter available tokens to only include ones the user owns
+ const ownedTokensList = allTokens.filter((token) =>
+ userOwnedMints.has(token.address)
+ )
+
+ return ownedTokensList
+ }, [userCoins, allTokens, isArtistCoinsEnabled, env.WAUDIO_MINT_ADDRESS])
+
+ return {
+ ownedTokens,
+ isLoading: !userCoins
+ }
+}

packages/common/src/store/ui/buy-sell/index.ts

@@ -11,4 +11,3 @@ export * from './useTokenSwapForm'
 export * from './useAvailableTokens'
 export * from './useCurrentTokenPair'
 export * from './useTokenStates'
-export * from './useGroupCoinPairs'

packages/common/src/utils/coinUtils.ts

@@ -0,0 +1,24 @@
+import { UserCoin } from '~/api'
+
+/**
+ * Creates a predicate function for filtering user coins based on the ARTIST_COINS feature flag and balance requirements
+ *
+ * @param isArtistCoinsEnabled - Whether the ARTIST_COINS feature flag is enabled
+ * @param wAudioMintAddress - The WAUDIO mint address from environment
+ * @returns Predicate function that can be used with Array.filter()
+ */
+export const ownedCoinsFilter =
+ (isArtistCoinsEnabled: boolean, wAudioMintAddress: string) =>
+ (coin: UserCoin): boolean => {
+ if (!isArtistCoinsEnabled) {
+ // When artist coins disabled, only show AUDIO
+ return coin.mint === wAudioMintAddress
+ }
+
+ // When artist coins enabled, show all non-USDC tokens with balance > 0
+ // OR AUDIO regardless of balance
+ return (
+ coin.ticker !== 'USDC' &&
+ (coin.balance > 0 || coin.mint === wAudioMintAddress)
+ )
+ }

packages/common/src/utils/decimal.ts

@@ -164,6 +164,78 @@ export const formatCurrency = (
  }
 }
 
+/**
+ * Formats a number with subscript notation for many leading zeros after decimal.
+ * For example: 0.000068352 → 0.0₄68352
+ *
+ * @param num - The number to format
+ * @param locale - Locale for number formatting (defaults to 'en-US')
+ * @returns Formatted string with subscript notation for leading zeros
+ */
+export const formatCurrencyWithSubscript = (
+ num: number,
+ locale: string = 'en-US'
+): string => {
+ if (num === 0) return '$0.00'
+
+ try {
+ const decimalPlaces = getCurrencyDecimalPlaces(num)
+ const formatted = new Intl.NumberFormat(locale, {
+ style: 'currency',
+ currency: 'USD',
+ minimumFractionDigits: Math.min(decimalPlaces, 2),
+ maximumFractionDigits: decimalPlaces
+ }).format(num)
+
+ // Extract the number part (remove currency symbol and commas)
+ const numberPart = formatted.replace(/[^0-9.-]/g, '').replace(/,/g, '')
+
+ // Check if there are leading zeros after decimal that should be subscripted
+ const parts = numberPart.split('.')
+ if (parts.length === 2 && parts[0] === '0') {
+ const decimalPart = parts[1]
+
+ // Find consecutive zeros after the decimal
+ const zeroMatch = decimalPart.match(/^0+/)
+ if (zeroMatch) {
+ const zeroCount = zeroMatch[0].length
+ const remainingDigits = decimalPart.substring(zeroCount)
+
+ // Only apply subscript if there are 3 or more leading zeros
+ if (zeroCount >= 3 && remainingDigits.length > 0) {
+ // Create subscript number (Unicode subscript digits)
+ const subscriptDigits = zeroCount
+ .toString()
+ .split('')
+ .map((digit) => {
+ const subscripts = [
+ '₀',
+ '₁',
+ '₂',
+ '₃',
+ '₄',
+ '₅',
+ '₆',
+ '₇',
+ '₈',
+ '₉'
+ ]
+ return subscripts[parseInt(digit)]
+ })
+ .join('')
+
+ // Format as $0.0[subscript][remaining digits]
+ return `$0.0${subscriptDigits}${remainingDigits}`
+ }
+ }
+ }
+
+ return formatted
+ } catch {
+ return `$${num.toFixed(2)}`
+ }
+}
+
 export const formatCurrencyWithMax = (
  num: number,
  max: number,

packages/common/src/utils/index.ts

@@ -49,3 +49,4 @@ export * from './handle'
 export * from './comments'
 export * from './quickSearch'
 export * from './coinMetrics'
+export * from './coinUtils'

packages/mobile/src/screens/buy-sell-screen/BuySellFlow.tsx

@@ -1,7 +1,7 @@
 import React, { useState, useEffect, useMemo, useCallback } from 'react'
 
 import { useTokenPair, useTokens } from '@audius/common/api'
-import { useBuySellAnalytics } from '@audius/common/hooks'
+import { useBuySellAnalytics, useOwnedTokens } from '@audius/common/hooks'
 import { buySellMessages as messages } from '@audius/common/messages'
 import type { BuySellTab, TokenInfo } from '@audius/common/store'
 import {
@@ -76,12 +76,42 @@ export const BuySellFlow = ({
  })
 
  const { tokens } = useTokens()
- const availableBaseTokens: TokenInfo[] = useMemo(() => {
+
+ // Get all available tokens and owned tokens
+ const allAvailableTokens: TokenInfo[] = useMemo(() => {
  return Object.values(tokens).filter(
  (token) => token.symbol !== selectedQuoteToken
  )
  }, [tokens, selectedQuoteToken])
 
+ const { ownedTokens } = useOwnedTokens(allAvailableTokens)
+
+ const {
+ transactionData,
+ hasSufficientBalance,
+ handleTransactionDataChange,
+ resetTransactionData
+ } = useBuySellTransactionData()
+
+ const { activeTab, handleActiveTabChange } = useBuySellTabs({
+ setCurrentScreen,
+ resetTransactionData,
+ initialTab
+ })
+
+ // Determine which tokens to show based on current tab
+ // For buy tab: "You Receive" section should show all tokens
+ // For sell tab: "You Sell" section should show only owned tokens
+ const availableBaseTokens: TokenInfo[] = useMemo(() => {
+ if (activeTab === 'sell') {
+ // In sell tab, the input section should only show owned tokens
+ return ownedTokens
+ } else {
+ // In buy tab, the output section should show all tokens
+ return allAvailableTokens
+ }
+ }, [activeTab, ownedTokens, allAvailableTokens])
+
  const baseTokenOptions = useMemo(
  () =>
  availableBaseTokens.map((token) => ({
@@ -103,19 +133,6 @@ export const BuySellFlow = ({
  [availableBaseTokens]
  )
 
- const {
- transactionData,
- hasSufficientBalance,
- handleTransactionDataChange,
- resetTransactionData
- } = useBuySellTransactionData()
-
- const { activeTab, handleActiveTabChange } = useBuySellTabs({
- setCurrentScreen,
- resetTransactionData,
- initialTab
- })
-
  // Reset screen state to 'input' when this screen comes into focus
  // This handles the case where we navigate back from ConfirmSwapScreen
  useFocusEffect(

packages/mobile/src/screens/buy-sell-screen/components/SellScreen.tsx

@@ -5,10 +5,11 @@ import {
  useArtistCoin,
  useArtistCoins
 } from '@audius/common/api'
+import { useOwnedTokens } from '@audius/common/hooks'
 import type { TokenInfo, TokenPair } from '@audius/common/store'
 import { useTokenSwapForm } from '@audius/common/store'
 
-import { Box, Flex, Skeleton, Text } from '@audius/harmony-native'
+import { Box, Flex, Skeleton } from '@audius/harmony-native'
 import { InputTokenSection } from 'app/components/buy-sell/InputTokenSection'
 import { OutputTokenSection } from 'app/components/buy-sell/OutputTokenSection'
 
@@ -107,10 +108,18 @@ export const SellScreen = ({
  }
 
  const { data: coins } = useArtistCoins()
- const availableInputTokens: TokenInfo[] = useMemo(() => {
+ const allAvailableTokens: TokenInfo[] = useMemo(() => {
  return Object.values(transformArtistCoinsToTokenInfoMap(coins ?? []))
  }, [coins])
 
+ // Use the owned tokens hook to get filtered tokens
+ const { ownedTokens } = useOwnedTokens(allAvailableTokens)
+
+ // For sell screen:
+ // - "You Sell" section (input): Should show only tokens the user owns
+ // - "You Receive" section (output): Should show all available tokens (but only USDC in practice)
+ const availableInputTokens = ownedTokens
+
  if (!tokenPair) return null
 
  // Extract the tokens from the pair
@@ -151,10 +160,6 @@ export const SellScreen = ({
  />
  </>
  )}
- <Flex row gap='xs'>
- <Text color='subdued'>Rate</Text>
- <Text>{`1 ${baseToken.symbol} ≈ ${Number(tokenPrice).toFixed(8)} ${quoteToken.symbol}`}</Text>
- </Flex>
  </Flex>
  )
 }

packages/common/src/hooks/index.ts

@@ -48,6 +48,7 @@ export * from './useFormattedTokenBalance'
 export * from './useCurrentTrack'
 export * from './useDebounce'
 export * from './useIsArtist'
+export * from './useOwnedTokens'
 
 export * from './useAnalytics'
 export * from './useBuySellAnalytics'

packages/common/src/hooks/useFormattedTokenBalance.ts

@@ -6,7 +6,7 @@ import { useTokenBalance, useArtistCoins } from '../api'
 import { Status } from '../models/Status'
 import {
  getTokenDecimalPlaces,
-formatCurrency,
+formatCurrencyWithSubscript,
  isNullOrUndefined
 } from '../utils'
 
@@ -65,7 +65,7 @@ export const useFormattedTokenBalance = (
  if (!tokenPrice) return '$0.00'
 
  const priceNumber = Number(new FixedDecimal(tokenPrice).toString())
- return formatCurrency(priceNumber)
+ return formatCurrencyWithSubscript(priceNumber)
  }, [tokenPrice])
 
  return {

packages/common/src/hooks/useOwnedTokens.ts

@@ -0,0 +1,52 @@
+import { useMemo } from 'react'
+
+import {
+ useCurrentUserId,
+ useUserCoins,
+ useQueryContext,
+ UserCoin
+} from '~/api'
+import { useFeatureFlag } from '~/hooks'
+import { FeatureFlags } from '~/services'
+import type { TokenInfo } from '~/store'
+import { ownedCoinsFilter } from '~/utils'
+
+/**
+ * Hook to filter tokens based on user ownership and positive balance
+ * Respects the ARTIST_COINS feature flag - when disabled, only shows AUDIO tokens
+ */
+export const useOwnedTokens = (allTokens: TokenInfo[]) => {
+ const { data: currentUserId } = useCurrentUserId()
+ const { data: userCoins } = useUserCoins({ userId: currentUserId })
+ const { env } = useQueryContext()
+ const { isEnabled: isArtistCoinsEnabled } = useFeatureFlag(
+ FeatureFlags.ARTIST_COINS
+ )
+
+ const ownedTokens = useMemo(() => {
+ if (!userCoins || !allTokens.length) {
+ return []
+ }
+
+ const filteredUserCoins = userCoins.filter(
+ ownedCoinsFilter(!!isArtistCoinsEnabled, env.WAUDIO_MINT_ADDRESS)
+ )
+
+ // Create a map of user's owned tokens by mint address
+ const userOwnedMints = new Set(
+ filteredUserCoins.map((coin: UserCoin) => coin.mint)
+ )
+
+ // Filter available tokens to only include ones the user owns
+ const ownedTokensList = allTokens.filter((token) =>
+ userOwnedMints.has(token.address)
+ )
+
+ return ownedTokensList
+ }, [userCoins, allTokens, isArtistCoinsEnabled, env.WAUDIO_MINT_ADDRESS])
+
+ return {
+ ownedTokens,
+ isLoading: !userCoins
+ }
+}

packages/common/src/store/ui/buy-sell/index.ts

@@ -11,4 +11,3 @@ export * from './useTokenSwapForm'
 export * from './useAvailableTokens'
 export * from './useCurrentTokenPair'
 export * from './useTokenStates'
-export * from './useGroupCoinPairs'

packages/common/src/utils/coinUtils.ts

@@ -0,0 +1,24 @@
+import { UserCoin } from '~/api'
+
+/**
+ * Creates a predicate function for filtering user coins based on the ARTIST_COINS feature flag and balance requirements
+ *
+ * @param isArtistCoinsEnabled - Whether the ARTIST_COINS feature flag is enabled
+ * @param wAudioMintAddress - The WAUDIO mint address from environment
+ * @returns Predicate function that can be used with Array.filter()
+ */
+export const ownedCoinsFilter =
+ (isArtistCoinsEnabled: boolean, wAudioMintAddress: string) =>
+ (coin: UserCoin): boolean => {
+ if (!isArtistCoinsEnabled) {
+ // When artist coins disabled, only show AUDIO
+ return coin.mint === wAudioMintAddress
+ }
+
+ // When artist coins enabled, show all non-USDC tokens with balance > 0
+ // OR AUDIO regardless of balance
+ return (
+ coin.ticker !== 'USDC' &&
+ (coin.balance > 0 || coin.mint === wAudioMintAddress)
+ )
+ }

packages/common/src/utils/decimal.ts

@@ -164,6 +164,78 @@ export const formatCurrency = (
  }
 }
 
+/**
+ * Formats a number with subscript notation for many leading zeros after decimal.
+ * For example: 0.000068352 → 0.0₄68352
+ *
+ * @param num - The number to format
+ * @param locale - Locale for number formatting (defaults to 'en-US')
+ * @returns Formatted string with subscript notation for leading zeros
+ */
+export const formatCurrencyWithSubscript = (
+ num: number,
+ locale: string = 'en-US'
+): string => {
+ if (num === 0) return '$0.00'
+
+ try {
+ const decimalPlaces = getCurrencyDecimalPlaces(num)
+ const formatted = new Intl.NumberFormat(locale, {
+ style: 'currency',
+ currency: 'USD',
+ minimumFractionDigits: Math.min(decimalPlaces, 2),
+ maximumFractionDigits: decimalPlaces
+ }).format(num)
+
+ // Extract the number part (remove currency symbol and commas)
+ const numberPart = formatted.replace(/[^0-9.-]/g, '').replace(/,/g, '')
+
+ // Check if there are leading zeros after decimal that should be subscripted
+ const parts = numberPart.split('.')
+ if (parts.length === 2 && parts[0] === '0') {
+ const decimalPart = parts[1]
+
+ // Find consecutive zeros after the decimal
+ const zeroMatch = decimalPart.match(/^0+/)
+ if (zeroMatch) {
+ const zeroCount = zeroMatch[0].length
+ const remainingDigits = decimalPart.substring(zeroCount)
+
+ // Only apply subscript if there are 3 or more leading zeros
+ if (zeroCount >= 3 && remainingDigits.length > 0) {
+ // Create subscript number (Unicode subscript digits)
+ const subscriptDigits = zeroCount
+ .toString()
+ .split('')
+ .map((digit) => {
+ const subscripts = [
+ '₀',
+ '₁',
+ '₂',
+ '₃',
+ '₄',
+ '₅',
+ '₆',
+ '₇',
+ '₈',
+ '₉'
+ ]
+ return subscripts[parseInt(digit)]
+ })
+ .join('')
+
+ // Format as $0.0[subscript][remaining digits]
+ return `$0.0${subscriptDigits}${remainingDigits}`
+ }
+ }
+ }
+
+ return formatted
+ } catch {
+ return `$${num.toFixed(2)}`
+ }
+}
+
 export const formatCurrencyWithMax = (
  num: number,
  max: number,

packages/common/src/utils/index.ts

@@ -49,3 +49,4 @@ export * from './handle'
 export * from './comments'
 export * from './quickSearch'
 export * from './coinMetrics'
+export * from './coinUtils'

packages/mobile/src/screens/buy-sell-screen/BuySellFlow.tsx

@@ -1,7 +1,7 @@
 import React, { useState, useEffect, useMemo, useCallback } from 'react'
 
 import { useTokenPair, useTokens } from '@audius/common/api'
-import { useBuySellAnalytics } from '@audius/common/hooks'
+import { useBuySellAnalytics, useOwnedTokens } from '@audius/common/hooks'
 import { buySellMessages as messages } from '@audius/common/messages'
 import type { BuySellTab, TokenInfo } from '@audius/common/store'
 import {
@@ -76,12 +76,42 @@ export const BuySellFlow = ({
  })
 
  const { tokens } = useTokens()
- const availableBaseTokens: TokenInfo[] = useMemo(() => {
+
+ // Get all available tokens and owned tokens
+ const allAvailableTokens: TokenInfo[] = useMemo(() => {
  return Object.values(tokens).filter(
  (token) => token.symbol !== selectedQuoteToken
  )
  }, [tokens, selectedQuoteToken])
 
+ const { ownedTokens } = useOwnedTokens(allAvailableTokens)
+
+ const {
+ transactionData,
+ hasSufficientBalance,
+ handleTransactionDataChange,
+ resetTransactionData
+ } = useBuySellTransactionData()
+
+ const { activeTab, handleActiveTabChange } = useBuySellTabs({
+ setCurrentScreen,
+ resetTransactionData,
+ initialTab
+ })
+
+ // Determine which tokens to show based on current tab
+ // For buy tab: "You Receive" section should show all tokens
+ // For sell tab: "You Sell" section should show only owned tokens
+ const availableBaseTokens: TokenInfo[] = useMemo(() => {
+ if (activeTab === 'sell') {
+ // In sell tab, the input section should only show owned tokens
+ return ownedTokens
+ } else {
+ // In buy tab, the output section should show all tokens
+ return allAvailableTokens
+ }
+ }, [activeTab, ownedTokens, allAvailableTokens])
+
  const baseTokenOptions = useMemo(
  () =>
  availableBaseTokens.map((token) => ({
@@ -103,19 +133,6 @@ export const BuySellFlow = ({
  [availableBaseTokens]
  )
 
- const {
- transactionData,
- hasSufficientBalance,
- handleTransactionDataChange,
- resetTransactionData
- } = useBuySellTransactionData()
-
- const { activeTab, handleActiveTabChange } = useBuySellTabs({
- setCurrentScreen,
- resetTransactionData,
- initialTab
- })
-
  // Reset screen state to 'input' when this screen comes into focus
  // This handles the case where we navigate back from ConfirmSwapScreen
  useFocusEffect(

packages/mobile/src/screens/buy-sell-screen/components/SellScreen.tsx

@@ -5,10 +5,11 @@ import {
  useArtistCoin,
  useArtistCoins
 } from '@audius/common/api'
+import { useOwnedTokens } from '@audius/common/hooks'
 import type { TokenInfo, TokenPair } from '@audius/common/store'
 import { useTokenSwapForm } from '@audius/common/store'
 
-import { Box, Flex, Skeleton, Text } from '@audius/harmony-native'
+import { Box, Flex, Skeleton } from '@audius/harmony-native'
 import { InputTokenSection } from 'app/components/buy-sell/InputTokenSection'
 import { OutputTokenSection } from 'app/components/buy-sell/OutputTokenSection'
 
@@ -107,10 +108,18 @@ export const SellScreen = ({
  }
 
  const { data: coins } = useArtistCoins()
- const availableInputTokens: TokenInfo[] = useMemo(() => {
+ const allAvailableTokens: TokenInfo[] = useMemo(() => {
  return Object.values(transformArtistCoinsToTokenInfoMap(coins ?? []))
  }, [coins])
 
+ // Use the owned tokens hook to get filtered tokens
+ const { ownedTokens } = useOwnedTokens(allAvailableTokens)
+
+ // For sell screen:
+ // - "You Sell" section (input): Should show only tokens the user owns
+ // - "You Receive" section (output): Should show all available tokens (but only USDC in practice)
+ const availableInputTokens = ownedTokens
+
  if (!tokenPair) return null
 
  // Extract the tokens from the pair
@@ -151,10 +160,6 @@ export const SellScreen = ({
  />
  </>
  )}
- <Flex row gap='xs'>
- <Text color='subdued'>Rate</Text>
- <Text>{`1 ${baseToken.symbol} ≈ ${Number(tokenPrice).toFixed(8)} ${quoteToken.symbol}`}</Text>
- </Flex>
  </Flex>
  )
 }