Update swap flows for artist coins

packages/common/src/adapters/coin.ts

@@ -6,11 +6,8 @@ import { removeNullable } from '~/utils/typeUtils'
 export type CoinMetadata = {
  mint: string
  ticker: string | null
- tokenInfo: {
- name: string | null
- decimals: number | null
- logoURI: string | null
- } | null
+ logoUri: string | null
+ decimals: number | null
 }
 
 /**
@@ -19,13 +16,8 @@ export type CoinMetadata = {
 export const coinFromSDK = (input: Coin): CoinMetadata => ({
  mint: input.mint,
  ticker: input.ticker ?? null,
- tokenInfo: input.tokenInfo
- ? {
- name: input.tokenInfo.name ?? null,
- decimals: input.tokenInfo.decimals ?? null,
- logoURI: input.tokenInfo.logoURI ?? null
- }
- : null
+ logoUri: input.logoUri ?? null,
+ decimals: input.decimals ?? null
 })
 
 /**

packages/common/src/api/tan-query/coins/tokenUtils.ts

@@ -8,11 +8,11 @@ import { TokenInfo } from '~/store/ui/buy-sell/types'
  */
 const coinMetadataToTokenInfo = (coin: CoinMetadata): TokenInfo => ({
  symbol: coin.ticker ?? '',
- name: coin.tokenInfo?.name ?? coin.ticker ?? '',
- decimals: coin.tokenInfo?.decimals ?? 8,
+ name: coin.ticker ?? '',
+ decimals: coin.decimals ?? 8,
  balance: null, // This would come from user's wallet state
  address: coin.mint,
- logoURI: coin.tokenInfo?.logoURI ?? '',
+ logoURI: coin.logoUri ?? '',
  isStablecoin: false // API tokens are never stablecoins, only USDC is (which is frontend-only)
 })
 

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

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

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

@@ -0,0 +1,49 @@
+import { useMemo } from 'react'
+
+import { UserCoin } from '~/api'
+import { useFeatureFlag } from '~/hooks'
+import { FeatureFlags } from '~/services'
+
+export type CoinPairItem = UserCoin | 'find-more'
+
+/**
+ * Groups coins into pairs for 2-column layout rendering.
+ * Filters out USDC coins and optionally pairs remaining coins with FindMoreCoins component
+ * based on the ARTIST_COINS feature flag.
+ *
+ * @param coins Array of user coins
+ * @returns Array of coin pairs, where each pair contains 1-2 items
+ */
+export const useGroupCoinPairs = (coins?: UserCoin[]) => {
+ const { isEnabled: isArtistCoinsEnabled } = useFeatureFlag(
+ FeatureFlags.ARTIST_COINS
+ )
+
+ return useMemo(() => {
+ if (!coins) return []
+
+ // Filter out USDC coins
+ const filteredCoins = coins.filter((coin) => coin.ticker !== 'USDC')
+
+ // Group coins into pairs for row rendering
+ const coinPairs: CoinPairItem[][] = []
+
+ for (let i = 0; i < filteredCoins.length; i += 2) {
+ const pair: CoinPairItem[] = [filteredCoins[i]]
+ if (i + 1 < filteredCoins.length) {
+ pair.push(filteredCoins[i + 1])
+ } else if (isArtistCoinsEnabled) {
+ // If odd number of coins and artist coins enabled, pair the last one with FindMoreCoins
+ pair.push('find-more')
+ }
+ coinPairs.push(pair)
+ }
+
+ // If even number of coins and artist coins enabled, FindMoreCoins gets its own row
+ if (filteredCoins.length % 2 === 0 && isArtistCoinsEnabled) {
+ coinPairs.push(['find-more'])
+ }
+
+ return coinPairs
+ }, [coins, isArtistCoinsEnabled])
+}

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

@@ -1,18 +1,21 @@
 import { useCallback, useMemo } from 'react'
 
-import { AUDIO } from '@audius/fixed-decimal'
+import { FixedDecimal } from '@audius/fixed-decimal'
 
 import { formatUSDCValue } from '~/api'
 import { getTokenDecimalPlaces, getCurrencyDecimalPlaces } from '~/utils'
 
 export type UseTokenAmountFormattingProps = {
  amount?: string | number
- availableBalance: number
+ availableBalance?: number | null
  exchangeRate?: number | null
  isStablecoin: boolean
+ decimals?: number
  placeholder?: string
 }
 
+export const DEFAULT_TOKEN_AMOUNT_PLACEHOLDER = '0.00'
+
 const defaultDecimalPlaces = 2
 
 // Maximum safe amount for calculations to prevent overflow errors
@@ -31,7 +34,8 @@ export const useTokenAmountFormatting = ({
  amount,
  availableBalance,
  isStablecoin,
- placeholder = '0.00'
+ decimals,
+ placeholder = DEFAULT_TOKEN_AMOUNT_PLACEHOLDER
 }: UseTokenAmountFormattingProps) => {
  const getDisplayDecimalPlaces = useCallback(
  (currentExchangeRate: number | null | undefined) => {
@@ -45,24 +49,22 @@ export const useTokenAmountFormatting = ({
  )
 
  const formattedAvailableBalance = useMemo(() => {
- if (isNaN(availableBalance)) return placeholder
+ if (availableBalance == null || isNaN(availableBalance)) return null
 
  if (isStablecoin) {
  return formatUSDCValue(availableBalance)
  }
 
- // Use AUDIO for non-stablecoins for now, when we expand to other tokens
- // we will need to use FixedDecimal itself
- const audioAmount = AUDIO(availableBalance)
- const decimals = getTokenDecimalPlaces(availableBalance)
+ const tokenAmount = new FixedDecimal(availableBalance, decimals)
+ const displayDecimals = getTokenDecimalPlaces(availableBalance)
 
- return audioAmount.toLocaleString('en-US', {
- maximumFractionDigits: decimals
+ return tokenAmount.toLocaleString('en-US', {
+ maximumFractionDigits: displayDecimals
  })
- }, [availableBalance, placeholder, isStablecoin])
+ }, [availableBalance, isStablecoin, decimals])
 
  const formattedAmount = useMemo(() => {
- if (!amount && amount !== 0) return placeholder
+ if (!amount && amount !== 0) return null
 
  // Use safe value for calculations while preserving original for display logic
  const safeNumericAmount = getSafeNumericValue(amount)
@@ -72,13 +74,13 @@ export const useTokenAmountFormatting = ({
  return formatUSDCValue(safeNumericAmount)
  }
 
- const audioAmount = AUDIO(safeNumericAmount)
- const decimals = getTokenDecimalPlaces(safeNumericAmount)
+ const tokenAmount = new FixedDecimal(safeNumericAmount, decimals)
+ const displayDecimals = getTokenDecimalPlaces(safeNumericAmount)
 
- return audioAmount.toLocaleString('en-US', {
- maximumFractionDigits: decimals
+ return tokenAmount.toLocaleString('en-US', {
+ maximumFractionDigits: displayDecimals
  })
- }, [amount, placeholder, isStablecoin])
+ }, [amount, placeholder, isStablecoin, decimals])
 
  return {
  formattedAvailableBalance,

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

@@ -189,6 +189,13 @@ export const useTokenSwapForm = ({
  inputAmount: safeExchangeRateAmount > 0 ? safeExchangeRateAmount : 1
  })
 
+ // Get a static display rate using base amount of 1 for consistent display
+ const { data: displayExchangeRateData } = useTokenExchangeRate({
+ inputMint,
+ outputMint,
+ inputAmount: 1
+ })
+
  // Update output amount when exchange rate or input amount changes
  useEffect(() => {
  if (numericInputAmount <= 0) {
@@ -215,6 +222,9 @@ export const useTokenSwapForm = ({
  }, [values.outputAmount])
 
  const currentExchangeRate = exchangeRateData ? exchangeRateData.rate : null
+ const displayExchangeRate = displayExchangeRateData
+ ? displayExchangeRateData.rate
+ : null
 
  // Only show error if field has been touched, has a value, and has an error
  // This prevents showing "Required" error when field is empty during typing
@@ -294,6 +304,7 @@ export const useTokenSwapForm = ({
  isBalanceLoading,
  availableBalance,
  currentExchangeRate,
+ displayExchangeRate,
  handleInputAmountChange,
  handleMaxClick,
  formik,

packages/web/src/components/buy-sell-modal/ConfirmSwapScreen.tsx

@@ -3,11 +3,15 @@ import { useMemo } from 'react'
 import { formatUSDCValue, SLIPPAGE_BPS } from '@audius/common/api'
 import { useBuySellAnalytics } from '@audius/common/hooks'
 import { buySellMessages as baseMessages } from '@audius/common/messages'
-import { TokenInfo, getSwapTokens, TokenPair } from '@audius/common/store'
+import {
+ TokenInfo,
+ getSwapTokens,
+ TokenPair,
+ useTokenAmountFormatting
+} from '@audius/common/store'
 import { Button, Flex, Text } from '@audius/harmony'
 
 import { SwapBalanceSection } from './SwapBalanceSection'
-import { useTokenAmountFormatting } from './hooks/useTokenAmountFormatting'
 
 const messages = {
  ...baseMessages,
@@ -58,14 +62,14 @@ export const ConfirmSwapScreen = (props: ConfirmSwapScreenProps) => {
  // balance isn't needed so we pass 0
  const { formattedAmount: formattedPayAmount } = useTokenAmountFormatting({
  amount: payAmount,
-availableBalance: 0,
-isStablecoin: !!payTokenInfo.isStablecoin
+isStablecoin: !!payTokenInfo.isStablecoin,
+decimals: payTokenInfo.decimals
  })
 
  const { formattedAmount: formattedReceiveAmount } = useTokenAmountFormatting({
  amount: receiveAmount,
-availableBalance: 0,
-isStablecoin: !!receiveTokenInfo.isStablecoin
+isStablecoin: !!receiveTokenInfo.isStablecoin,
+decimals: receiveTokenInfo.decimals
  })
 
  const isReceivingBaseToken = receiveTokenInfo.symbol === baseTokenSymbol

packages/web/src/components/buy-sell-modal/CryptoBalanceSection.tsx

@@ -4,7 +4,7 @@ import { Divider, Flex, Text } from '@audius/harmony'
 import { TokenIcon } from './TokenIcon'
 
 const messages = {
- symbol: (symbol: string) => `$${symbol}`
+ symbol: (symbol: string) => `${symbol}`
 }
 
 type CryptoBalanceSectionProps = {

packages/web/src/components/buy-sell-modal/SwapTab.tsx

@@ -70,7 +70,7 @@ export const SwapTab = ({
  availableOutputTokens,
  onInputTokenChange,
  onOutputTokenChange,
- showExchangeRate = false
+ showExchangeRate = true
 }: SwapTabProps) => {
  const {
  formik,
@@ -80,6 +80,7 @@ export const SwapTab = ({
  isBalanceLoading,
  availableBalance,
  currentExchangeRate,
+ displayExchangeRate,
  handleInputAmountChange,
  handleMaxClick
  } = useTokenSwapForm({
@@ -95,10 +96,16 @@ export const SwapTab = ({
 
  // Track if an exchange rate has ever been successfully fetched
  const hasRateEverBeenFetched = useRef(false)
+ const hasDisplayRateEverBeenFetched = useRef(false)
+
  if (currentExchangeRate !== null) {
  hasRateEverBeenFetched.current = true
  }
 
+ if (displayExchangeRate !== null) {
+ hasDisplayRateEverBeenFetched.current = true
+ }
+
  // Show initial loading state if balance is loading,
  // OR if exchange rate is loading AND we've never fetched a rate before.
  const isInitialLoading =
@@ -161,20 +168,22 @@ export const SwapTab = ({
  />
 
  {/* Show exchange rate for convert flow */}
- {showExchangeRate && currentExchangeRate && (
- <Flex p='l' justifyContent='flex-start'>
- <Text variant='body' size='s' color='subdued'>
- {messages.exchangeRateLabel}&nbsp;
- </Text>
- <Text variant='body' size='s' color='default'>
- {messages.exchangeRateValue(
- inputToken.symbol,
- outputToken.symbol,
- currentExchangeRate
- )}
- </Text>
- </Flex>
- )}
+ {showExchangeRate &&
+ currentExchangeRate &&
+ displayExchangeRate && (
+ <Flex p='l' justifyContent='flex-start'>
+ <Text variant='body' size='s' color='subdued'>
+ {messages.exchangeRateLabel}&nbsp;
+ </Text>
+ <Text variant='body' size='s' color='default'>
+ {messages.exchangeRateValue(
+ inputToken.symbol,
+ outputToken.symbol,
+ displayExchangeRate
+ )}
+ </Text>
+ </Flex>
+ )}
  </>
  )}
  </Flex>

packages/common/src/adapters/coin.ts

@@ -6,11 +6,8 @@ import { removeNullable } from '~/utils/typeUtils'
 export type CoinMetadata = {
  mint: string
  ticker: string | null
- tokenInfo: {
- name: string | null
- decimals: number | null
- logoURI: string | null
- } | null
+ logoUri: string | null
+ decimals: number | null
 }
 
 /**
@@ -19,13 +16,8 @@ export type CoinMetadata = {
 export const coinFromSDK = (input: Coin): CoinMetadata => ({
  mint: input.mint,
  ticker: input.ticker ?? null,
- tokenInfo: input.tokenInfo
- ? {
- name: input.tokenInfo.name ?? null,
- decimals: input.tokenInfo.decimals ?? null,
- logoURI: input.tokenInfo.logoURI ?? null
- }
- : null
+ logoUri: input.logoUri ?? null,
+ decimals: input.decimals ?? null
 })
 
 /**

packages/common/src/api/tan-query/coins/tokenUtils.ts

@@ -8,11 +8,11 @@ import { TokenInfo } from '~/store/ui/buy-sell/types'
  */
 const coinMetadataToTokenInfo = (coin: CoinMetadata): TokenInfo => ({
  symbol: coin.ticker ?? '',
- name: coin.tokenInfo?.name ?? coin.ticker ?? '',
- decimals: coin.tokenInfo?.decimals ?? 8,
+ name: coin.ticker ?? '',
+ decimals: coin.decimals ?? 8,
  balance: null, // This would come from user's wallet state
  address: coin.mint,
- logoURI: coin.tokenInfo?.logoURI ?? '',
+ logoURI: coin.logoUri ?? '',
  isStablecoin: false // API tokens are never stablecoins, only USDC is (which is frontend-only)
 })
 

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

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

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

@@ -0,0 +1,49 @@
+import { useMemo } from 'react'
+
+import { UserCoin } from '~/api'
+import { useFeatureFlag } from '~/hooks'
+import { FeatureFlags } from '~/services'
+
+export type CoinPairItem = UserCoin | 'find-more'
+
+/**
+ * Groups coins into pairs for 2-column layout rendering.
+ * Filters out USDC coins and optionally pairs remaining coins with FindMoreCoins component
+ * based on the ARTIST_COINS feature flag.
+ *
+ * @param coins Array of user coins
+ * @returns Array of coin pairs, where each pair contains 1-2 items
+ */
+export const useGroupCoinPairs = (coins?: UserCoin[]) => {
+ const { isEnabled: isArtistCoinsEnabled } = useFeatureFlag(
+ FeatureFlags.ARTIST_COINS
+ )
+
+ return useMemo(() => {
+ if (!coins) return []
+
+ // Filter out USDC coins
+ const filteredCoins = coins.filter((coin) => coin.ticker !== 'USDC')
+
+ // Group coins into pairs for row rendering
+ const coinPairs: CoinPairItem[][] = []
+
+ for (let i = 0; i < filteredCoins.length; i += 2) {
+ const pair: CoinPairItem[] = [filteredCoins[i]]
+ if (i + 1 < filteredCoins.length) {
+ pair.push(filteredCoins[i + 1])
+ } else if (isArtistCoinsEnabled) {
+ // If odd number of coins and artist coins enabled, pair the last one with FindMoreCoins
+ pair.push('find-more')
+ }
+ coinPairs.push(pair)
+ }
+
+ // If even number of coins and artist coins enabled, FindMoreCoins gets its own row
+ if (filteredCoins.length % 2 === 0 && isArtistCoinsEnabled) {
+ coinPairs.push(['find-more'])
+ }
+
+ return coinPairs
+ }, [coins, isArtistCoinsEnabled])
+}

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

@@ -1,18 +1,21 @@
 import { useCallback, useMemo } from 'react'
 
-import { AUDIO } from '@audius/fixed-decimal'
+import { FixedDecimal } from '@audius/fixed-decimal'
 
 import { formatUSDCValue } from '~/api'
 import { getTokenDecimalPlaces, getCurrencyDecimalPlaces } from '~/utils'
 
 export type UseTokenAmountFormattingProps = {
  amount?: string | number
- availableBalance: number
+ availableBalance?: number | null
  exchangeRate?: number | null
  isStablecoin: boolean
+ decimals?: number
  placeholder?: string
 }
 
+export const DEFAULT_TOKEN_AMOUNT_PLACEHOLDER = '0.00'
+
 const defaultDecimalPlaces = 2
 
 // Maximum safe amount for calculations to prevent overflow errors
@@ -31,7 +34,8 @@ export const useTokenAmountFormatting = ({
  amount,
  availableBalance,
  isStablecoin,
- placeholder = '0.00'
+ decimals,
+ placeholder = DEFAULT_TOKEN_AMOUNT_PLACEHOLDER
 }: UseTokenAmountFormattingProps) => {
  const getDisplayDecimalPlaces = useCallback(
  (currentExchangeRate: number | null | undefined) => {
@@ -45,24 +49,22 @@ export const useTokenAmountFormatting = ({
  )
 
  const formattedAvailableBalance = useMemo(() => {
- if (isNaN(availableBalance)) return placeholder
+ if (availableBalance == null || isNaN(availableBalance)) return null
 
  if (isStablecoin) {
  return formatUSDCValue(availableBalance)
  }
 
- // Use AUDIO for non-stablecoins for now, when we expand to other tokens
- // we will need to use FixedDecimal itself
- const audioAmount = AUDIO(availableBalance)
- const decimals = getTokenDecimalPlaces(availableBalance)
+ const tokenAmount = new FixedDecimal(availableBalance, decimals)
+ const displayDecimals = getTokenDecimalPlaces(availableBalance)
 
- return audioAmount.toLocaleString('en-US', {
- maximumFractionDigits: decimals
+ return tokenAmount.toLocaleString('en-US', {
+ maximumFractionDigits: displayDecimals
  })
- }, [availableBalance, placeholder, isStablecoin])
+ }, [availableBalance, isStablecoin, decimals])
 
  const formattedAmount = useMemo(() => {
- if (!amount && amount !== 0) return placeholder
+ if (!amount && amount !== 0) return null
 
  // Use safe value for calculations while preserving original for display logic
  const safeNumericAmount = getSafeNumericValue(amount)
@@ -72,13 +74,13 @@ export const useTokenAmountFormatting = ({
  return formatUSDCValue(safeNumericAmount)
  }
 
- const audioAmount = AUDIO(safeNumericAmount)
- const decimals = getTokenDecimalPlaces(safeNumericAmount)
+ const tokenAmount = new FixedDecimal(safeNumericAmount, decimals)
+ const displayDecimals = getTokenDecimalPlaces(safeNumericAmount)
 
- return audioAmount.toLocaleString('en-US', {
- maximumFractionDigits: decimals
+ return tokenAmount.toLocaleString('en-US', {
+ maximumFractionDigits: displayDecimals
  })
- }, [amount, placeholder, isStablecoin])
+ }, [amount, placeholder, isStablecoin, decimals])
 
  return {
  formattedAvailableBalance,

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

@@ -189,6 +189,13 @@ export const useTokenSwapForm = ({
  inputAmount: safeExchangeRateAmount > 0 ? safeExchangeRateAmount : 1
  })
 
+ // Get a static display rate using base amount of 1 for consistent display
+ const { data: displayExchangeRateData } = useTokenExchangeRate({
+ inputMint,
+ outputMint,
+ inputAmount: 1
+ })
+
  // Update output amount when exchange rate or input amount changes
  useEffect(() => {
  if (numericInputAmount <= 0) {
@@ -215,6 +222,9 @@ export const useTokenSwapForm = ({
  }, [values.outputAmount])
 
  const currentExchangeRate = exchangeRateData ? exchangeRateData.rate : null
+ const displayExchangeRate = displayExchangeRateData
+ ? displayExchangeRateData.rate
+ : null
 
  // Only show error if field has been touched, has a value, and has an error
  // This prevents showing "Required" error when field is empty during typing
@@ -294,6 +304,7 @@ export const useTokenSwapForm = ({
  isBalanceLoading,
  availableBalance,
  currentExchangeRate,
+ displayExchangeRate,
  handleInputAmountChange,
  handleMaxClick,
  formik,

packages/web/src/components/buy-sell-modal/ConfirmSwapScreen.tsx

@@ -3,11 +3,15 @@ import { useMemo } from 'react'
 import { formatUSDCValue, SLIPPAGE_BPS } from '@audius/common/api'
 import { useBuySellAnalytics } from '@audius/common/hooks'
 import { buySellMessages as baseMessages } from '@audius/common/messages'
-import { TokenInfo, getSwapTokens, TokenPair } from '@audius/common/store'
+import {
+ TokenInfo,
+ getSwapTokens,
+ TokenPair,
+ useTokenAmountFormatting
+} from '@audius/common/store'
 import { Button, Flex, Text } from '@audius/harmony'
 
 import { SwapBalanceSection } from './SwapBalanceSection'
-import { useTokenAmountFormatting } from './hooks/useTokenAmountFormatting'
 
 const messages = {
  ...baseMessages,
@@ -58,14 +62,14 @@ export const ConfirmSwapScreen = (props: ConfirmSwapScreenProps) => {
  // balance isn't needed so we pass 0
  const { formattedAmount: formattedPayAmount } = useTokenAmountFormatting({
  amount: payAmount,
-availableBalance: 0,
-isStablecoin: !!payTokenInfo.isStablecoin
+isStablecoin: !!payTokenInfo.isStablecoin,
+decimals: payTokenInfo.decimals
  })
 
  const { formattedAmount: formattedReceiveAmount } = useTokenAmountFormatting({
  amount: receiveAmount,
-availableBalance: 0,
-isStablecoin: !!receiveTokenInfo.isStablecoin
+isStablecoin: !!receiveTokenInfo.isStablecoin,
+decimals: receiveTokenInfo.decimals
  })
 
  const isReceivingBaseToken = receiveTokenInfo.symbol === baseTokenSymbol

packages/web/src/components/buy-sell-modal/CryptoBalanceSection.tsx

@@ -4,7 +4,7 @@ import { Divider, Flex, Text } from '@audius/harmony'
 import { TokenIcon } from './TokenIcon'
 
 const messages = {
- symbol: (symbol: string) => `$${symbol}`
+ symbol: (symbol: string) => `${symbol}`
 }
 
 type CryptoBalanceSectionProps = {

packages/web/src/components/buy-sell-modal/SwapTab.tsx

@@ -70,7 +70,7 @@ export const SwapTab = ({
  availableOutputTokens,
  onInputTokenChange,
  onOutputTokenChange,
- showExchangeRate = false
+ showExchangeRate = true
 }: SwapTabProps) => {
  const {
  formik,
@@ -80,6 +80,7 @@ export const SwapTab = ({
  isBalanceLoading,
  availableBalance,
  currentExchangeRate,
+ displayExchangeRate,
  handleInputAmountChange,
  handleMaxClick
  } = useTokenSwapForm({
@@ -95,10 +96,16 @@ export const SwapTab = ({
 
  // Track if an exchange rate has ever been successfully fetched
  const hasRateEverBeenFetched = useRef(false)
+ const hasDisplayRateEverBeenFetched = useRef(false)
+
  if (currentExchangeRate !== null) {
  hasRateEverBeenFetched.current = true
  }
 
+ if (displayExchangeRate !== null) {
+ hasDisplayRateEverBeenFetched.current = true
+ }
+
  // Show initial loading state if balance is loading,
  // OR if exchange rate is loading AND we've never fetched a rate before.
  const isInitialLoading =
@@ -161,20 +168,22 @@ export const SwapTab = ({
  />
 
  {/* Show exchange rate for convert flow */}
- {showExchangeRate && currentExchangeRate && (
- <Flex p='l' justifyContent='flex-start'>
- <Text variant='body' size='s' color='subdued'>
- {messages.exchangeRateLabel}&nbsp;
- </Text>
- <Text variant='body' size='s' color='default'>
- {messages.exchangeRateValue(
- inputToken.symbol,
- outputToken.symbol,
- currentExchangeRate
- )}
- </Text>
- </Flex>
- )}
+ {showExchangeRate &&
+ currentExchangeRate &&
+ displayExchangeRate && (
+ <Flex p='l' justifyContent='flex-start'>
+ <Text variant='body' size='s' color='subdued'>
+ {messages.exchangeRateLabel}&nbsp;
+ </Text>
+ <Text variant='body' size='s' color='default'>
+ {messages.exchangeRateValue(
+ inputToken.symbol,
+ outputToken.symbol,
+ displayExchangeRate
+ )}
+ </Text>
+ </Flex>
+ )}
  </>
  )}
  </Flex>

packages/common/src/adapters/coin.ts

@@ -6,11 +6,8 @@ import { removeNullable } from '~/utils/typeUtils'
 export type CoinMetadata = {
  mint: string
  ticker: string | null
- tokenInfo: {
- name: string | null
- decimals: number | null
- logoURI: string | null
- } | null
+ logoUri: string | null
+ decimals: number | null
 }
 
 /**
@@ -19,13 +16,8 @@ export type CoinMetadata = {
 export const coinFromSDK = (input: Coin): CoinMetadata => ({
  mint: input.mint,
  ticker: input.ticker ?? null,
- tokenInfo: input.tokenInfo
- ? {
- name: input.tokenInfo.name ?? null,
- decimals: input.tokenInfo.decimals ?? null,
- logoURI: input.tokenInfo.logoURI ?? null
- }
- : null
+ logoUri: input.logoUri ?? null,
+ decimals: input.decimals ?? null
 })
 
 /**

packages/common/src/api/tan-query/coins/tokenUtils.ts

@@ -8,11 +8,11 @@ import { TokenInfo } from '~/store/ui/buy-sell/types'
  */
 const coinMetadataToTokenInfo = (coin: CoinMetadata): TokenInfo => ({
  symbol: coin.ticker ?? '',
- name: coin.tokenInfo?.name ?? coin.ticker ?? '',
- decimals: coin.tokenInfo?.decimals ?? 8,
+ name: coin.ticker ?? '',
+ decimals: coin.decimals ?? 8,
  balance: null, // This would come from user's wallet state
  address: coin.mint,
- logoURI: coin.tokenInfo?.logoURI ?? '',
+ logoURI: coin.logoUri ?? '',
  isStablecoin: false // API tokens are never stablecoins, only USDC is (which is frontend-only)
 })
 

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

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

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

@@ -0,0 +1,49 @@
+import { useMemo } from 'react'
+
+import { UserCoin } from '~/api'
+import { useFeatureFlag } from '~/hooks'
+import { FeatureFlags } from '~/services'
+
+export type CoinPairItem = UserCoin | 'find-more'
+
+/**
+ * Groups coins into pairs for 2-column layout rendering.
+ * Filters out USDC coins and optionally pairs remaining coins with FindMoreCoins component
+ * based on the ARTIST_COINS feature flag.
+ *
+ * @param coins Array of user coins
+ * @returns Array of coin pairs, where each pair contains 1-2 items
+ */
+export const useGroupCoinPairs = (coins?: UserCoin[]) => {
+ const { isEnabled: isArtistCoinsEnabled } = useFeatureFlag(
+ FeatureFlags.ARTIST_COINS
+ )
+
+ return useMemo(() => {
+ if (!coins) return []
+
+ // Filter out USDC coins
+ const filteredCoins = coins.filter((coin) => coin.ticker !== 'USDC')
+
+ // Group coins into pairs for row rendering
+ const coinPairs: CoinPairItem[][] = []
+
+ for (let i = 0; i < filteredCoins.length; i += 2) {
+ const pair: CoinPairItem[] = [filteredCoins[i]]
+ if (i + 1 < filteredCoins.length) {
+ pair.push(filteredCoins[i + 1])
+ } else if (isArtistCoinsEnabled) {
+ // If odd number of coins and artist coins enabled, pair the last one with FindMoreCoins
+ pair.push('find-more')
+ }
+ coinPairs.push(pair)
+ }
+
+ // If even number of coins and artist coins enabled, FindMoreCoins gets its own row
+ if (filteredCoins.length % 2 === 0 && isArtistCoinsEnabled) {
+ coinPairs.push(['find-more'])
+ }
+
+ return coinPairs
+ }, [coins, isArtistCoinsEnabled])
+}

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

@@ -1,18 +1,21 @@
 import { useCallback, useMemo } from 'react'
 
-import { AUDIO } from '@audius/fixed-decimal'
+import { FixedDecimal } from '@audius/fixed-decimal'
 
 import { formatUSDCValue } from '~/api'
 import { getTokenDecimalPlaces, getCurrencyDecimalPlaces } from '~/utils'
 
 export type UseTokenAmountFormattingProps = {
  amount?: string | number
- availableBalance: number
+ availableBalance?: number | null
  exchangeRate?: number | null
  isStablecoin: boolean
+ decimals?: number
  placeholder?: string
 }
 
+export const DEFAULT_TOKEN_AMOUNT_PLACEHOLDER = '0.00'
+
 const defaultDecimalPlaces = 2
 
 // Maximum safe amount for calculations to prevent overflow errors
@@ -31,7 +34,8 @@ export const useTokenAmountFormatting = ({
  amount,
  availableBalance,
  isStablecoin,
- placeholder = '0.00'
+ decimals,
+ placeholder = DEFAULT_TOKEN_AMOUNT_PLACEHOLDER
 }: UseTokenAmountFormattingProps) => {
  const getDisplayDecimalPlaces = useCallback(
  (currentExchangeRate: number | null | undefined) => {
@@ -45,24 +49,22 @@ export const useTokenAmountFormatting = ({
  )
 
  const formattedAvailableBalance = useMemo(() => {
- if (isNaN(availableBalance)) return placeholder
+ if (availableBalance == null || isNaN(availableBalance)) return null
 
  if (isStablecoin) {
  return formatUSDCValue(availableBalance)
  }
 
- // Use AUDIO for non-stablecoins for now, when we expand to other tokens
- // we will need to use FixedDecimal itself
- const audioAmount = AUDIO(availableBalance)
- const decimals = getTokenDecimalPlaces(availableBalance)
+ const tokenAmount = new FixedDecimal(availableBalance, decimals)
+ const displayDecimals = getTokenDecimalPlaces(availableBalance)
 
- return audioAmount.toLocaleString('en-US', {
- maximumFractionDigits: decimals
+ return tokenAmount.toLocaleString('en-US', {
+ maximumFractionDigits: displayDecimals
  })
- }, [availableBalance, placeholder, isStablecoin])
+ }, [availableBalance, isStablecoin, decimals])
 
  const formattedAmount = useMemo(() => {
- if (!amount && amount !== 0) return placeholder
+ if (!amount && amount !== 0) return null
 
  // Use safe value for calculations while preserving original for display logic
  const safeNumericAmount = getSafeNumericValue(amount)
@@ -72,13 +74,13 @@ export const useTokenAmountFormatting = ({
  return formatUSDCValue(safeNumericAmount)
  }
 
- const audioAmount = AUDIO(safeNumericAmount)
- const decimals = getTokenDecimalPlaces(safeNumericAmount)
+ const tokenAmount = new FixedDecimal(safeNumericAmount, decimals)
+ const displayDecimals = getTokenDecimalPlaces(safeNumericAmount)
 
- return audioAmount.toLocaleString('en-US', {
- maximumFractionDigits: decimals
+ return tokenAmount.toLocaleString('en-US', {
+ maximumFractionDigits: displayDecimals
  })
- }, [amount, placeholder, isStablecoin])
+ }, [amount, placeholder, isStablecoin, decimals])
 
  return {
  formattedAvailableBalance,

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

@@ -189,6 +189,13 @@ export const useTokenSwapForm = ({
  inputAmount: safeExchangeRateAmount > 0 ? safeExchangeRateAmount : 1
  })
 
+ // Get a static display rate using base amount of 1 for consistent display
+ const { data: displayExchangeRateData } = useTokenExchangeRate({
+ inputMint,
+ outputMint,
+ inputAmount: 1
+ })
+
  // Update output amount when exchange rate or input amount changes
  useEffect(() => {
  if (numericInputAmount <= 0) {
@@ -215,6 +222,9 @@ export const useTokenSwapForm = ({
  }, [values.outputAmount])
 
  const currentExchangeRate = exchangeRateData ? exchangeRateData.rate : null
+ const displayExchangeRate = displayExchangeRateData
+ ? displayExchangeRateData.rate
+ : null
 
  // Only show error if field has been touched, has a value, and has an error
  // This prevents showing "Required" error when field is empty during typing
@@ -294,6 +304,7 @@ export const useTokenSwapForm = ({
  isBalanceLoading,
  availableBalance,
  currentExchangeRate,
+ displayExchangeRate,
  handleInputAmountChange,
  handleMaxClick,
  formik,

packages/web/src/components/buy-sell-modal/ConfirmSwapScreen.tsx

@@ -3,11 +3,15 @@ import { useMemo } from 'react'
 import { formatUSDCValue, SLIPPAGE_BPS } from '@audius/common/api'
 import { useBuySellAnalytics } from '@audius/common/hooks'
 import { buySellMessages as baseMessages } from '@audius/common/messages'
-import { TokenInfo, getSwapTokens, TokenPair } from '@audius/common/store'
+import {
+ TokenInfo,
+ getSwapTokens,
+ TokenPair,
+ useTokenAmountFormatting
+} from '@audius/common/store'
 import { Button, Flex, Text } from '@audius/harmony'
 
 import { SwapBalanceSection } from './SwapBalanceSection'
-import { useTokenAmountFormatting } from './hooks/useTokenAmountFormatting'
 
 const messages = {
  ...baseMessages,
@@ -58,14 +62,14 @@ export const ConfirmSwapScreen = (props: ConfirmSwapScreenProps) => {
  // balance isn't needed so we pass 0
  const { formattedAmount: formattedPayAmount } = useTokenAmountFormatting({
  amount: payAmount,
-availableBalance: 0,
-isStablecoin: !!payTokenInfo.isStablecoin
+isStablecoin: !!payTokenInfo.isStablecoin,
+decimals: payTokenInfo.decimals
  })
 
  const { formattedAmount: formattedReceiveAmount } = useTokenAmountFormatting({
  amount: receiveAmount,
-availableBalance: 0,
-isStablecoin: !!receiveTokenInfo.isStablecoin
+isStablecoin: !!receiveTokenInfo.isStablecoin,
+decimals: receiveTokenInfo.decimals
  })
 
  const isReceivingBaseToken = receiveTokenInfo.symbol === baseTokenSymbol

packages/web/src/components/buy-sell-modal/CryptoBalanceSection.tsx

@@ -4,7 +4,7 @@ import { Divider, Flex, Text } from '@audius/harmony'
 import { TokenIcon } from './TokenIcon'
 
 const messages = {
- symbol: (symbol: string) => `$${symbol}`
+ symbol: (symbol: string) => `${symbol}`
 }
 
 type CryptoBalanceSectionProps = {

packages/web/src/components/buy-sell-modal/SwapTab.tsx

@@ -70,7 +70,7 @@ export const SwapTab = ({
  availableOutputTokens,
  onInputTokenChange,
  onOutputTokenChange,
- showExchangeRate = false
+ showExchangeRate = true
 }: SwapTabProps) => {
  const {
  formik,
@@ -80,6 +80,7 @@ export const SwapTab = ({
  isBalanceLoading,
  availableBalance,
  currentExchangeRate,
+ displayExchangeRate,
  handleInputAmountChange,
  handleMaxClick
  } = useTokenSwapForm({
@@ -95,10 +96,16 @@ export const SwapTab = ({
 
  // Track if an exchange rate has ever been successfully fetched
  const hasRateEverBeenFetched = useRef(false)
+ const hasDisplayRateEverBeenFetched = useRef(false)
+
  if (currentExchangeRate !== null) {
  hasRateEverBeenFetched.current = true
  }
 
+ if (displayExchangeRate !== null) {
+ hasDisplayRateEverBeenFetched.current = true
+ }
+
  // Show initial loading state if balance is loading,
  // OR if exchange rate is loading AND we've never fetched a rate before.
  const isInitialLoading =
@@ -161,20 +168,22 @@ export const SwapTab = ({
  />
 
  {/* Show exchange rate for convert flow */}
- {showExchangeRate && currentExchangeRate && (
- <Flex p='l' justifyContent='flex-start'>
- <Text variant='body' size='s' color='subdued'>
- {messages.exchangeRateLabel}&nbsp;
- </Text>
- <Text variant='body' size='s' color='default'>
- {messages.exchangeRateValue(
- inputToken.symbol,
- outputToken.symbol,
- currentExchangeRate
- )}
- </Text>
- </Flex>
- )}
+ {showExchangeRate &&
+ currentExchangeRate &&
+ displayExchangeRate && (
+ <Flex p='l' justifyContent='flex-start'>
+ <Text variant='body' size='s' color='subdued'>
+ {messages.exchangeRateLabel}&nbsp;
+ </Text>
+ <Text variant='body' size='s' color='default'>
+ {messages.exchangeRateValue(
+ inputToken.symbol,
+ outputToken.symbol,
+ displayExchangeRate
+ )}
+ </Text>
+ </Flex>
+ )}
  </>
  )}
  </Flex>

packages/common/src/adapters/coin.ts

@@ -6,11 +6,8 @@ import { removeNullable } from '~/utils/typeUtils'
 export type CoinMetadata = {
  mint: string
  ticker: string | null
- tokenInfo: {
- name: string | null
- decimals: number | null
- logoURI: string | null
- } | null
+ logoUri: string | null
+ decimals: number | null
 }
 
 /**
@@ -19,13 +16,8 @@ export type CoinMetadata = {
 export const coinFromSDK = (input: Coin): CoinMetadata => ({
  mint: input.mint,
  ticker: input.ticker ?? null,
- tokenInfo: input.tokenInfo
- ? {
- name: input.tokenInfo.name ?? null,
- decimals: input.tokenInfo.decimals ?? null,
- logoURI: input.tokenInfo.logoURI ?? null
- }
- : null
+ logoUri: input.logoUri ?? null,
+ decimals: input.decimals ?? null
 })
 
 /**

packages/common/src/api/tan-query/coins/tokenUtils.ts

@@ -8,11 +8,11 @@ import { TokenInfo } from '~/store/ui/buy-sell/types'
  */
 const coinMetadataToTokenInfo = (coin: CoinMetadata): TokenInfo => ({
  symbol: coin.ticker ?? '',
- name: coin.tokenInfo?.name ?? coin.ticker ?? '',
- decimals: coin.tokenInfo?.decimals ?? 8,
+ name: coin.ticker ?? '',
+ decimals: coin.decimals ?? 8,
  balance: null, // This would come from user's wallet state
  address: coin.mint,
- logoURI: coin.tokenInfo?.logoURI ?? '',
+ logoURI: coin.logoUri ?? '',
  isStablecoin: false // API tokens are never stablecoins, only USDC is (which is frontend-only)
 })
 

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

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

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

@@ -0,0 +1,49 @@
+import { useMemo } from 'react'
+
+import { UserCoin } from '~/api'
+import { useFeatureFlag } from '~/hooks'
+import { FeatureFlags } from '~/services'
+
+export type CoinPairItem = UserCoin | 'find-more'
+
+/**
+ * Groups coins into pairs for 2-column layout rendering.
+ * Filters out USDC coins and optionally pairs remaining coins with FindMoreCoins component
+ * based on the ARTIST_COINS feature flag.
+ *
+ * @param coins Array of user coins
+ * @returns Array of coin pairs, where each pair contains 1-2 items
+ */
+export const useGroupCoinPairs = (coins?: UserCoin[]) => {
+ const { isEnabled: isArtistCoinsEnabled } = useFeatureFlag(
+ FeatureFlags.ARTIST_COINS
+ )
+
+ return useMemo(() => {
+ if (!coins) return []
+
+ // Filter out USDC coins
+ const filteredCoins = coins.filter((coin) => coin.ticker !== 'USDC')
+
+ // Group coins into pairs for row rendering
+ const coinPairs: CoinPairItem[][] = []
+
+ for (let i = 0; i < filteredCoins.length; i += 2) {
+ const pair: CoinPairItem[] = [filteredCoins[i]]
+ if (i + 1 < filteredCoins.length) {
+ pair.push(filteredCoins[i + 1])
+ } else if (isArtistCoinsEnabled) {
+ // If odd number of coins and artist coins enabled, pair the last one with FindMoreCoins
+ pair.push('find-more')
+ }
+ coinPairs.push(pair)
+ }
+
+ // If even number of coins and artist coins enabled, FindMoreCoins gets its own row
+ if (filteredCoins.length % 2 === 0 && isArtistCoinsEnabled) {
+ coinPairs.push(['find-more'])
+ }
+
+ return coinPairs
+ }, [coins, isArtistCoinsEnabled])
+}

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

@@ -1,18 +1,21 @@
 import { useCallback, useMemo } from 'react'
 
-import { AUDIO } from '@audius/fixed-decimal'
+import { FixedDecimal } from '@audius/fixed-decimal'
 
 import { formatUSDCValue } from '~/api'
 import { getTokenDecimalPlaces, getCurrencyDecimalPlaces } from '~/utils'
 
 export type UseTokenAmountFormattingProps = {
  amount?: string | number
- availableBalance: number
+ availableBalance?: number | null
  exchangeRate?: number | null
  isStablecoin: boolean
+ decimals?: number
  placeholder?: string
 }
 
+export const DEFAULT_TOKEN_AMOUNT_PLACEHOLDER = '0.00'
+
 const defaultDecimalPlaces = 2
 
 // Maximum safe amount for calculations to prevent overflow errors
@@ -31,7 +34,8 @@ export const useTokenAmountFormatting = ({
  amount,
  availableBalance,
  isStablecoin,
- placeholder = '0.00'
+ decimals,
+ placeholder = DEFAULT_TOKEN_AMOUNT_PLACEHOLDER
 }: UseTokenAmountFormattingProps) => {
  const getDisplayDecimalPlaces = useCallback(
  (currentExchangeRate: number | null | undefined) => {
@@ -45,24 +49,22 @@ export const useTokenAmountFormatting = ({
  )
 
  const formattedAvailableBalance = useMemo(() => {
- if (isNaN(availableBalance)) return placeholder
+ if (availableBalance == null || isNaN(availableBalance)) return null
 
  if (isStablecoin) {
  return formatUSDCValue(availableBalance)
  }
 
- // Use AUDIO for non-stablecoins for now, when we expand to other tokens
- // we will need to use FixedDecimal itself
- const audioAmount = AUDIO(availableBalance)
- const decimals = getTokenDecimalPlaces(availableBalance)
+ const tokenAmount = new FixedDecimal(availableBalance, decimals)
+ const displayDecimals = getTokenDecimalPlaces(availableBalance)
 
- return audioAmount.toLocaleString('en-US', {
- maximumFractionDigits: decimals
+ return tokenAmount.toLocaleString('en-US', {
+ maximumFractionDigits: displayDecimals
  })
- }, [availableBalance, placeholder, isStablecoin])
+ }, [availableBalance, isStablecoin, decimals])
 
  const formattedAmount = useMemo(() => {
- if (!amount && amount !== 0) return placeholder
+ if (!amount && amount !== 0) return null
 
  // Use safe value for calculations while preserving original for display logic
  const safeNumericAmount = getSafeNumericValue(amount)
@@ -72,13 +74,13 @@ export const useTokenAmountFormatting = ({
  return formatUSDCValue(safeNumericAmount)
  }
 
- const audioAmount = AUDIO(safeNumericAmount)
- const decimals = getTokenDecimalPlaces(safeNumericAmount)
+ const tokenAmount = new FixedDecimal(safeNumericAmount, decimals)
+ const displayDecimals = getTokenDecimalPlaces(safeNumericAmount)
 
- return audioAmount.toLocaleString('en-US', {
- maximumFractionDigits: decimals
+ return tokenAmount.toLocaleString('en-US', {
+ maximumFractionDigits: displayDecimals
  })
- }, [amount, placeholder, isStablecoin])
+ }, [amount, placeholder, isStablecoin, decimals])
 
  return {
  formattedAvailableBalance,

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

@@ -189,6 +189,13 @@ export const useTokenSwapForm = ({
  inputAmount: safeExchangeRateAmount > 0 ? safeExchangeRateAmount : 1
  })
 
+ // Get a static display rate using base amount of 1 for consistent display
+ const { data: displayExchangeRateData } = useTokenExchangeRate({
+ inputMint,
+ outputMint,
+ inputAmount: 1
+ })
+
  // Update output amount when exchange rate or input amount changes
  useEffect(() => {
  if (numericInputAmount <= 0) {
@@ -215,6 +222,9 @@ export const useTokenSwapForm = ({
  }, [values.outputAmount])
 
  const currentExchangeRate = exchangeRateData ? exchangeRateData.rate : null
+ const displayExchangeRate = displayExchangeRateData
+ ? displayExchangeRateData.rate
+ : null
 
  // Only show error if field has been touched, has a value, and has an error
  // This prevents showing "Required" error when field is empty during typing
@@ -294,6 +304,7 @@ export const useTokenSwapForm = ({
  isBalanceLoading,
  availableBalance,
  currentExchangeRate,
+ displayExchangeRate,
  handleInputAmountChange,
  handleMaxClick,
  formik,

packages/web/src/components/buy-sell-modal/ConfirmSwapScreen.tsx

@@ -3,11 +3,15 @@ import { useMemo } from 'react'
 import { formatUSDCValue, SLIPPAGE_BPS } from '@audius/common/api'
 import { useBuySellAnalytics } from '@audius/common/hooks'
 import { buySellMessages as baseMessages } from '@audius/common/messages'
-import { TokenInfo, getSwapTokens, TokenPair } from '@audius/common/store'
+import {
+ TokenInfo,
+ getSwapTokens,
+ TokenPair,
+ useTokenAmountFormatting
+} from '@audius/common/store'
 import { Button, Flex, Text } from '@audius/harmony'
 
 import { SwapBalanceSection } from './SwapBalanceSection'
-import { useTokenAmountFormatting } from './hooks/useTokenAmountFormatting'
 
 const messages = {
  ...baseMessages,
@@ -58,14 +62,14 @@ export const ConfirmSwapScreen = (props: ConfirmSwapScreenProps) => {
  // balance isn't needed so we pass 0
  const { formattedAmount: formattedPayAmount } = useTokenAmountFormatting({
  amount: payAmount,
-availableBalance: 0,
-isStablecoin: !!payTokenInfo.isStablecoin
+isStablecoin: !!payTokenInfo.isStablecoin,
+decimals: payTokenInfo.decimals
  })
 
  const { formattedAmount: formattedReceiveAmount } = useTokenAmountFormatting({
  amount: receiveAmount,
-availableBalance: 0,
-isStablecoin: !!receiveTokenInfo.isStablecoin
+isStablecoin: !!receiveTokenInfo.isStablecoin,
+decimals: receiveTokenInfo.decimals
  })
 
  const isReceivingBaseToken = receiveTokenInfo.symbol === baseTokenSymbol

packages/web/src/components/buy-sell-modal/CryptoBalanceSection.tsx

@@ -4,7 +4,7 @@ import { Divider, Flex, Text } from '@audius/harmony'
 import { TokenIcon } from './TokenIcon'
 
 const messages = {
- symbol: (symbol: string) => `$${symbol}`
+ symbol: (symbol: string) => `${symbol}`
 }
 
 type CryptoBalanceSectionProps = {

packages/web/src/components/buy-sell-modal/SwapTab.tsx

@@ -70,7 +70,7 @@ export const SwapTab = ({
  availableOutputTokens,
  onInputTokenChange,
  onOutputTokenChange,
- showExchangeRate = false
+ showExchangeRate = true
 }: SwapTabProps) => {
  const {
  formik,
@@ -80,6 +80,7 @@ export const SwapTab = ({
  isBalanceLoading,
  availableBalance,
  currentExchangeRate,
+ displayExchangeRate,
  handleInputAmountChange,
  handleMaxClick
  } = useTokenSwapForm({
@@ -95,10 +96,16 @@ export const SwapTab = ({
 
  // Track if an exchange rate has ever been successfully fetched
  const hasRateEverBeenFetched = useRef(false)
+ const hasDisplayRateEverBeenFetched = useRef(false)
+
  if (currentExchangeRate !== null) {
  hasRateEverBeenFetched.current = true
  }
 
+ if (displayExchangeRate !== null) {
+ hasDisplayRateEverBeenFetched.current = true
+ }
+
  // Show initial loading state if balance is loading,
  // OR if exchange rate is loading AND we've never fetched a rate before.
  const isInitialLoading =
@@ -161,20 +168,22 @@ export const SwapTab = ({
  />
 
  {/* Show exchange rate for convert flow */}
- {showExchangeRate && currentExchangeRate && (
- <Flex p='l' justifyContent='flex-start'>
- <Text variant='body' size='s' color='subdued'>
- {messages.exchangeRateLabel}&nbsp;
- </Text>
- <Text variant='body' size='s' color='default'>
- {messages.exchangeRateValue(
- inputToken.symbol,
- outputToken.symbol,
- currentExchangeRate
- )}
- </Text>
- </Flex>
- )}
+ {showExchangeRate &&
+ currentExchangeRate &&
+ displayExchangeRate && (
+ <Flex p='l' justifyContent='flex-start'>
+ <Text variant='body' size='s' color='subdued'>
+ {messages.exchangeRateLabel}&nbsp;
+ </Text>
+ <Text variant='body' size='s' color='default'>
+ {messages.exchangeRateValue(
+ inputToken.symbol,
+ outputToken.symbol,
+ displayExchangeRate
+ )}
+ </Text>
+ </Flex>
+ )}
  </>
  )}
  </Flex>

packages/common/src/adapters/coin.ts

@@ -6,11 +6,8 @@ import { removeNullable } from '~/utils/typeUtils'
 export type CoinMetadata = {
  mint: string
  ticker: string | null
- tokenInfo: {
- name: string | null
- decimals: number | null
- logoURI: string | null
- } | null
+ logoUri: string | null
+ decimals: number | null
 }
 
 /**
@@ -19,13 +16,8 @@ export type CoinMetadata = {
 export const coinFromSDK = (input: Coin): CoinMetadata => ({
  mint: input.mint,
  ticker: input.ticker ?? null,
- tokenInfo: input.tokenInfo
- ? {
- name: input.tokenInfo.name ?? null,
- decimals: input.tokenInfo.decimals ?? null,
- logoURI: input.tokenInfo.logoURI ?? null
- }
- : null
+ logoUri: input.logoUri ?? null,
+ decimals: input.decimals ?? null
 })
 
 /**

packages/common/src/api/tan-query/coins/tokenUtils.ts

@@ -8,11 +8,11 @@ import { TokenInfo } from '~/store/ui/buy-sell/types'
  */
 const coinMetadataToTokenInfo = (coin: CoinMetadata): TokenInfo => ({
  symbol: coin.ticker ?? '',
- name: coin.tokenInfo?.name ?? coin.ticker ?? '',
- decimals: coin.tokenInfo?.decimals ?? 8,
+ name: coin.ticker ?? '',
+ decimals: coin.decimals ?? 8,
  balance: null, // This would come from user's wallet state
  address: coin.mint,
- logoURI: coin.tokenInfo?.logoURI ?? '',
+ logoURI: coin.logoUri ?? '',
  isStablecoin: false // API tokens are never stablecoins, only USDC is (which is frontend-only)
 })
 

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

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

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

@@ -0,0 +1,49 @@
+import { useMemo } from 'react'
+
+import { UserCoin } from '~/api'
+import { useFeatureFlag } from '~/hooks'
+import { FeatureFlags } from '~/services'
+
+export type CoinPairItem = UserCoin | 'find-more'
+
+/**
+ * Groups coins into pairs for 2-column layout rendering.
+ * Filters out USDC coins and optionally pairs remaining coins with FindMoreCoins component
+ * based on the ARTIST_COINS feature flag.
+ *
+ * @param coins Array of user coins
+ * @returns Array of coin pairs, where each pair contains 1-2 items
+ */
+export const useGroupCoinPairs = (coins?: UserCoin[]) => {
+ const { isEnabled: isArtistCoinsEnabled } = useFeatureFlag(
+ FeatureFlags.ARTIST_COINS
+ )
+
+ return useMemo(() => {
+ if (!coins) return []
+
+ // Filter out USDC coins
+ const filteredCoins = coins.filter((coin) => coin.ticker !== 'USDC')
+
+ // Group coins into pairs for row rendering
+ const coinPairs: CoinPairItem[][] = []
+
+ for (let i = 0; i < filteredCoins.length; i += 2) {
+ const pair: CoinPairItem[] = [filteredCoins[i]]
+ if (i + 1 < filteredCoins.length) {
+ pair.push(filteredCoins[i + 1])
+ } else if (isArtistCoinsEnabled) {
+ // If odd number of coins and artist coins enabled, pair the last one with FindMoreCoins
+ pair.push('find-more')
+ }
+ coinPairs.push(pair)
+ }
+
+ // If even number of coins and artist coins enabled, FindMoreCoins gets its own row
+ if (filteredCoins.length % 2 === 0 && isArtistCoinsEnabled) {
+ coinPairs.push(['find-more'])
+ }
+
+ return coinPairs
+ }, [coins, isArtistCoinsEnabled])
+}

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

@@ -1,18 +1,21 @@
 import { useCallback, useMemo } from 'react'
 
-import { AUDIO } from '@audius/fixed-decimal'
+import { FixedDecimal } from '@audius/fixed-decimal'
 
 import { formatUSDCValue } from '~/api'
 import { getTokenDecimalPlaces, getCurrencyDecimalPlaces } from '~/utils'
 
 export type UseTokenAmountFormattingProps = {
  amount?: string | number
- availableBalance: number
+ availableBalance?: number | null
  exchangeRate?: number | null
  isStablecoin: boolean
+ decimals?: number
  placeholder?: string
 }
 
+export const DEFAULT_TOKEN_AMOUNT_PLACEHOLDER = '0.00'
+
 const defaultDecimalPlaces = 2
 
 // Maximum safe amount for calculations to prevent overflow errors
@@ -31,7 +34,8 @@ export const useTokenAmountFormatting = ({
  amount,
  availableBalance,
  isStablecoin,
- placeholder = '0.00'
+ decimals,
+ placeholder = DEFAULT_TOKEN_AMOUNT_PLACEHOLDER
 }: UseTokenAmountFormattingProps) => {
  const getDisplayDecimalPlaces = useCallback(
  (currentExchangeRate: number | null | undefined) => {
@@ -45,24 +49,22 @@ export const useTokenAmountFormatting = ({
  )
 
  const formattedAvailableBalance = useMemo(() => {
- if (isNaN(availableBalance)) return placeholder
+ if (availableBalance == null || isNaN(availableBalance)) return null
 
  if (isStablecoin) {
  return formatUSDCValue(availableBalance)
  }
 
- // Use AUDIO for non-stablecoins for now, when we expand to other tokens
- // we will need to use FixedDecimal itself
- const audioAmount = AUDIO(availableBalance)
- const decimals = getTokenDecimalPlaces(availableBalance)
+ const tokenAmount = new FixedDecimal(availableBalance, decimals)
+ const displayDecimals = getTokenDecimalPlaces(availableBalance)
 
- return audioAmount.toLocaleString('en-US', {
- maximumFractionDigits: decimals
+ return tokenAmount.toLocaleString('en-US', {
+ maximumFractionDigits: displayDecimals
  })
- }, [availableBalance, placeholder, isStablecoin])
+ }, [availableBalance, isStablecoin, decimals])
 
  const formattedAmount = useMemo(() => {
- if (!amount && amount !== 0) return placeholder
+ if (!amount && amount !== 0) return null
 
  // Use safe value for calculations while preserving original for display logic
  const safeNumericAmount = getSafeNumericValue(amount)
@@ -72,13 +74,13 @@ export const useTokenAmountFormatting = ({
  return formatUSDCValue(safeNumericAmount)
  }
 
- const audioAmount = AUDIO(safeNumericAmount)
- const decimals = getTokenDecimalPlaces(safeNumericAmount)
+ const tokenAmount = new FixedDecimal(safeNumericAmount, decimals)
+ const displayDecimals = getTokenDecimalPlaces(safeNumericAmount)
 
- return audioAmount.toLocaleString('en-US', {
- maximumFractionDigits: decimals
+ return tokenAmount.toLocaleString('en-US', {
+ maximumFractionDigits: displayDecimals
  })
- }, [amount, placeholder, isStablecoin])
+ }, [amount, placeholder, isStablecoin, decimals])
 
  return {
  formattedAvailableBalance,

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

@@ -189,6 +189,13 @@ export const useTokenSwapForm = ({
  inputAmount: safeExchangeRateAmount > 0 ? safeExchangeRateAmount : 1
  })
 
+ // Get a static display rate using base amount of 1 for consistent display
+ const { data: displayExchangeRateData } = useTokenExchangeRate({
+ inputMint,
+ outputMint,
+ inputAmount: 1
+ })
+
  // Update output amount when exchange rate or input amount changes
  useEffect(() => {
  if (numericInputAmount <= 0) {
@@ -215,6 +222,9 @@ export const useTokenSwapForm = ({
  }, [values.outputAmount])
 
  const currentExchangeRate = exchangeRateData ? exchangeRateData.rate : null
+ const displayExchangeRate = displayExchangeRateData
+ ? displayExchangeRateData.rate
+ : null
 
  // Only show error if field has been touched, has a value, and has an error
  // This prevents showing "Required" error when field is empty during typing
@@ -294,6 +304,7 @@ export const useTokenSwapForm = ({
  isBalanceLoading,
  availableBalance,
  currentExchangeRate,
+ displayExchangeRate,
  handleInputAmountChange,
  handleMaxClick,
  formik,

packages/web/src/components/buy-sell-modal/ConfirmSwapScreen.tsx

@@ -3,11 +3,15 @@ import { useMemo } from 'react'
 import { formatUSDCValue, SLIPPAGE_BPS } from '@audius/common/api'
 import { useBuySellAnalytics } from '@audius/common/hooks'
 import { buySellMessages as baseMessages } from '@audius/common/messages'
-import { TokenInfo, getSwapTokens, TokenPair } from '@audius/common/store'
+import {
+ TokenInfo,
+ getSwapTokens,
+ TokenPair,
+ useTokenAmountFormatting
+} from '@audius/common/store'
 import { Button, Flex, Text } from '@audius/harmony'
 
 import { SwapBalanceSection } from './SwapBalanceSection'
-import { useTokenAmountFormatting } from './hooks/useTokenAmountFormatting'
 
 const messages = {
  ...baseMessages,
@@ -58,14 +62,14 @@ export const ConfirmSwapScreen = (props: ConfirmSwapScreenProps) => {
  // balance isn't needed so we pass 0
  const { formattedAmount: formattedPayAmount } = useTokenAmountFormatting({
  amount: payAmount,
-availableBalance: 0,
-isStablecoin: !!payTokenInfo.isStablecoin
+isStablecoin: !!payTokenInfo.isStablecoin,
+decimals: payTokenInfo.decimals
  })
 
  const { formattedAmount: formattedReceiveAmount } = useTokenAmountFormatting({
  amount: receiveAmount,
-availableBalance: 0,
-isStablecoin: !!receiveTokenInfo.isStablecoin
+isStablecoin: !!receiveTokenInfo.isStablecoin,
+decimals: receiveTokenInfo.decimals
  })
 
  const isReceivingBaseToken = receiveTokenInfo.symbol === baseTokenSymbol

packages/web/src/components/buy-sell-modal/CryptoBalanceSection.tsx

@@ -4,7 +4,7 @@ import { Divider, Flex, Text } from '@audius/harmony'
 import { TokenIcon } from './TokenIcon'
 
 const messages = {
- symbol: (symbol: string) => `$${symbol}`
+ symbol: (symbol: string) => `${symbol}`
 }
 
 type CryptoBalanceSectionProps = {

packages/web/src/components/buy-sell-modal/SwapTab.tsx

@@ -70,7 +70,7 @@ export const SwapTab = ({
  availableOutputTokens,
  onInputTokenChange,
  onOutputTokenChange,
- showExchangeRate = false
+ showExchangeRate = true
 }: SwapTabProps) => {
  const {
  formik,
@@ -80,6 +80,7 @@ export const SwapTab = ({
  isBalanceLoading,
  availableBalance,
  currentExchangeRate,
+ displayExchangeRate,
  handleInputAmountChange,
  handleMaxClick
  } = useTokenSwapForm({
@@ -95,10 +96,16 @@ export const SwapTab = ({
 
  // Track if an exchange rate has ever been successfully fetched
  const hasRateEverBeenFetched = useRef(false)
+ const hasDisplayRateEverBeenFetched = useRef(false)
+
  if (currentExchangeRate !== null) {
  hasRateEverBeenFetched.current = true
  }
 
+ if (displayExchangeRate !== null) {
+ hasDisplayRateEverBeenFetched.current = true
+ }
+
  // Show initial loading state if balance is loading,
  // OR if exchange rate is loading AND we've never fetched a rate before.
  const isInitialLoading =
@@ -161,20 +168,22 @@ export const SwapTab = ({
  />
 
  {/* Show exchange rate for convert flow */}
- {showExchangeRate && currentExchangeRate && (
- <Flex p='l' justifyContent='flex-start'>
- <Text variant='body' size='s' color='subdued'>
- {messages.exchangeRateLabel}&nbsp;
- </Text>
- <Text variant='body' size='s' color='default'>
- {messages.exchangeRateValue(
- inputToken.symbol,
- outputToken.symbol,
- currentExchangeRate
- )}
- </Text>
- </Flex>
- )}
+ {showExchangeRate &&
+ currentExchangeRate &&
+ displayExchangeRate && (
+ <Flex p='l' justifyContent='flex-start'>
+ <Text variant='body' size='s' color='subdued'>
+ {messages.exchangeRateLabel}&nbsp;
+ </Text>
+ <Text variant='body' size='s' color='default'>
+ {messages.exchangeRateValue(
+ inputToken.symbol,
+ outputToken.symbol,
+ displayExchangeRate
+ )}
+ </Text>
+ </Flex>
+ )}
  </>
  )}
  </Flex>

packages/common/src/adapters/coin.ts

@@ -6,11 +6,8 @@ import { removeNullable } from '~/utils/typeUtils'
 export type CoinMetadata = {
  mint: string
  ticker: string | null
- tokenInfo: {
- name: string | null
- decimals: number | null
- logoURI: string | null
- } | null
+ logoUri: string | null
+ decimals: number | null
 }
 
 /**
@@ -19,13 +16,8 @@ export type CoinMetadata = {
 export const coinFromSDK = (input: Coin): CoinMetadata => ({
  mint: input.mint,
  ticker: input.ticker ?? null,
- tokenInfo: input.tokenInfo
- ? {
- name: input.tokenInfo.name ?? null,
- decimals: input.tokenInfo.decimals ?? null,
- logoURI: input.tokenInfo.logoURI ?? null
- }
- : null
+ logoUri: input.logoUri ?? null,
+ decimals: input.decimals ?? null
 })
 
 /**

packages/common/src/api/tan-query/coins/tokenUtils.ts

@@ -8,11 +8,11 @@ import { TokenInfo } from '~/store/ui/buy-sell/types'
  */
 const coinMetadataToTokenInfo = (coin: CoinMetadata): TokenInfo => ({
  symbol: coin.ticker ?? '',
- name: coin.tokenInfo?.name ?? coin.ticker ?? '',
- decimals: coin.tokenInfo?.decimals ?? 8,
+ name: coin.ticker ?? '',
+ decimals: coin.decimals ?? 8,
  balance: null, // This would come from user's wallet state
  address: coin.mint,
- logoURI: coin.tokenInfo?.logoURI ?? '',
+ logoURI: coin.logoUri ?? '',
  isStablecoin: false // API tokens are never stablecoins, only USDC is (which is frontend-only)
 })
 

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

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

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

@@ -0,0 +1,49 @@
+import { useMemo } from 'react'
+
+import { UserCoin } from '~/api'
+import { useFeatureFlag } from '~/hooks'
+import { FeatureFlags } from '~/services'
+
+export type CoinPairItem = UserCoin | 'find-more'
+
+/**
+ * Groups coins into pairs for 2-column layout rendering.
+ * Filters out USDC coins and optionally pairs remaining coins with FindMoreCoins component
+ * based on the ARTIST_COINS feature flag.
+ *
+ * @param coins Array of user coins
+ * @returns Array of coin pairs, where each pair contains 1-2 items
+ */
+export const useGroupCoinPairs = (coins?: UserCoin[]) => {
+ const { isEnabled: isArtistCoinsEnabled } = useFeatureFlag(
+ FeatureFlags.ARTIST_COINS
+ )
+
+ return useMemo(() => {
+ if (!coins) return []
+
+ // Filter out USDC coins
+ const filteredCoins = coins.filter((coin) => coin.ticker !== 'USDC')
+
+ // Group coins into pairs for row rendering
+ const coinPairs: CoinPairItem[][] = []
+
+ for (let i = 0; i < filteredCoins.length; i += 2) {
+ const pair: CoinPairItem[] = [filteredCoins[i]]
+ if (i + 1 < filteredCoins.length) {
+ pair.push(filteredCoins[i + 1])
+ } else if (isArtistCoinsEnabled) {
+ // If odd number of coins and artist coins enabled, pair the last one with FindMoreCoins
+ pair.push('find-more')
+ }
+ coinPairs.push(pair)
+ }
+
+ // If even number of coins and artist coins enabled, FindMoreCoins gets its own row
+ if (filteredCoins.length % 2 === 0 && isArtistCoinsEnabled) {
+ coinPairs.push(['find-more'])
+ }
+
+ return coinPairs
+ }, [coins, isArtistCoinsEnabled])
+}

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

@@ -1,18 +1,21 @@
 import { useCallback, useMemo } from 'react'
 
-import { AUDIO } from '@audius/fixed-decimal'
+import { FixedDecimal } from '@audius/fixed-decimal'
 
 import { formatUSDCValue } from '~/api'
 import { getTokenDecimalPlaces, getCurrencyDecimalPlaces } from '~/utils'
 
 export type UseTokenAmountFormattingProps = {
  amount?: string | number
- availableBalance: number
+ availableBalance?: number | null
  exchangeRate?: number | null
  isStablecoin: boolean
+ decimals?: number
  placeholder?: string
 }
 
+export const DEFAULT_TOKEN_AMOUNT_PLACEHOLDER = '0.00'
+
 const defaultDecimalPlaces = 2
 
 // Maximum safe amount for calculations to prevent overflow errors
@@ -31,7 +34,8 @@ export const useTokenAmountFormatting = ({
  amount,
  availableBalance,
  isStablecoin,
- placeholder = '0.00'
+ decimals,
+ placeholder = DEFAULT_TOKEN_AMOUNT_PLACEHOLDER
 }: UseTokenAmountFormattingProps) => {
  const getDisplayDecimalPlaces = useCallback(
  (currentExchangeRate: number | null | undefined) => {
@@ -45,24 +49,22 @@ export const useTokenAmountFormatting = ({
  )
 
  const formattedAvailableBalance = useMemo(() => {
- if (isNaN(availableBalance)) return placeholder
+ if (availableBalance == null || isNaN(availableBalance)) return null
 
  if (isStablecoin) {
  return formatUSDCValue(availableBalance)
  }
 
- // Use AUDIO for non-stablecoins for now, when we expand to other tokens
- // we will need to use FixedDecimal itself
- const audioAmount = AUDIO(availableBalance)
- const decimals = getTokenDecimalPlaces(availableBalance)
+ const tokenAmount = new FixedDecimal(availableBalance, decimals)
+ const displayDecimals = getTokenDecimalPlaces(availableBalance)
 
- return audioAmount.toLocaleString('en-US', {
- maximumFractionDigits: decimals
+ return tokenAmount.toLocaleString('en-US', {
+ maximumFractionDigits: displayDecimals
  })
- }, [availableBalance, placeholder, isStablecoin])
+ }, [availableBalance, isStablecoin, decimals])
 
  const formattedAmount = useMemo(() => {
- if (!amount && amount !== 0) return placeholder
+ if (!amount && amount !== 0) return null
 
  // Use safe value for calculations while preserving original for display logic
  const safeNumericAmount = getSafeNumericValue(amount)
@@ -72,13 +74,13 @@ export const useTokenAmountFormatting = ({
  return formatUSDCValue(safeNumericAmount)
  }
 
- const audioAmount = AUDIO(safeNumericAmount)
- const decimals = getTokenDecimalPlaces(safeNumericAmount)
+ const tokenAmount = new FixedDecimal(safeNumericAmount, decimals)
+ const displayDecimals = getTokenDecimalPlaces(safeNumericAmount)
 
- return audioAmount.toLocaleString('en-US', {
- maximumFractionDigits: decimals
+ return tokenAmount.toLocaleString('en-US', {
+ maximumFractionDigits: displayDecimals
  })
- }, [amount, placeholder, isStablecoin])
+ }, [amount, placeholder, isStablecoin, decimals])
 
  return {
  formattedAvailableBalance,

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

@@ -189,6 +189,13 @@ export const useTokenSwapForm = ({
  inputAmount: safeExchangeRateAmount > 0 ? safeExchangeRateAmount : 1
  })
 
+ // Get a static display rate using base amount of 1 for consistent display
+ const { data: displayExchangeRateData } = useTokenExchangeRate({
+ inputMint,
+ outputMint,
+ inputAmount: 1
+ })
+
  // Update output amount when exchange rate or input amount changes
  useEffect(() => {
  if (numericInputAmount <= 0) {
@@ -215,6 +222,9 @@ export const useTokenSwapForm = ({
  }, [values.outputAmount])
 
  const currentExchangeRate = exchangeRateData ? exchangeRateData.rate : null
+ const displayExchangeRate = displayExchangeRateData
+ ? displayExchangeRateData.rate
+ : null
 
  // Only show error if field has been touched, has a value, and has an error
  // This prevents showing "Required" error when field is empty during typing
@@ -294,6 +304,7 @@ export const useTokenSwapForm = ({
  isBalanceLoading,
  availableBalance,
  currentExchangeRate,
+ displayExchangeRate,
  handleInputAmountChange,
  handleMaxClick,
  formik,

packages/web/src/components/buy-sell-modal/ConfirmSwapScreen.tsx

@@ -3,11 +3,15 @@ import { useMemo } from 'react'
 import { formatUSDCValue, SLIPPAGE_BPS } from '@audius/common/api'
 import { useBuySellAnalytics } from '@audius/common/hooks'
 import { buySellMessages as baseMessages } from '@audius/common/messages'
-import { TokenInfo, getSwapTokens, TokenPair } from '@audius/common/store'
+import {
+ TokenInfo,
+ getSwapTokens,
+ TokenPair,
+ useTokenAmountFormatting
+} from '@audius/common/store'
 import { Button, Flex, Text } from '@audius/harmony'
 
 import { SwapBalanceSection } from './SwapBalanceSection'
-import { useTokenAmountFormatting } from './hooks/useTokenAmountFormatting'
 
 const messages = {
  ...baseMessages,
@@ -58,14 +62,14 @@ export const ConfirmSwapScreen = (props: ConfirmSwapScreenProps) => {
  // balance isn't needed so we pass 0
  const { formattedAmount: formattedPayAmount } = useTokenAmountFormatting({
  amount: payAmount,
-availableBalance: 0,
-isStablecoin: !!payTokenInfo.isStablecoin
+isStablecoin: !!payTokenInfo.isStablecoin,
+decimals: payTokenInfo.decimals
  })
 
  const { formattedAmount: formattedReceiveAmount } = useTokenAmountFormatting({
  amount: receiveAmount,
-availableBalance: 0,
-isStablecoin: !!receiveTokenInfo.isStablecoin
+isStablecoin: !!receiveTokenInfo.isStablecoin,
+decimals: receiveTokenInfo.decimals
  })
 
  const isReceivingBaseToken = receiveTokenInfo.symbol === baseTokenSymbol

packages/web/src/components/buy-sell-modal/CryptoBalanceSection.tsx

@@ -4,7 +4,7 @@ import { Divider, Flex, Text } from '@audius/harmony'
 import { TokenIcon } from './TokenIcon'
 
 const messages = {
- symbol: (symbol: string) => `$${symbol}`
+ symbol: (symbol: string) => `${symbol}`
 }
 
 type CryptoBalanceSectionProps = {

packages/web/src/components/buy-sell-modal/SwapTab.tsx

@@ -70,7 +70,7 @@ export const SwapTab = ({
  availableOutputTokens,
  onInputTokenChange,
  onOutputTokenChange,
- showExchangeRate = false
+ showExchangeRate = true
 }: SwapTabProps) => {
  const {
  formik,
@@ -80,6 +80,7 @@ export const SwapTab = ({
  isBalanceLoading,
  availableBalance,
  currentExchangeRate,
+ displayExchangeRate,
  handleInputAmountChange,
  handleMaxClick
  } = useTokenSwapForm({
@@ -95,10 +96,16 @@ export const SwapTab = ({
 
  // Track if an exchange rate has ever been successfully fetched
  const hasRateEverBeenFetched = useRef(false)
+ const hasDisplayRateEverBeenFetched = useRef(false)
+
  if (currentExchangeRate !== null) {
  hasRateEverBeenFetched.current = true
  }
 
+ if (displayExchangeRate !== null) {
+ hasDisplayRateEverBeenFetched.current = true
+ }
+
  // Show initial loading state if balance is loading,
  // OR if exchange rate is loading AND we've never fetched a rate before.
  const isInitialLoading =
@@ -161,20 +168,22 @@ export const SwapTab = ({
  />
 
  {/* Show exchange rate for convert flow */}
- {showExchangeRate && currentExchangeRate && (
- <Flex p='l' justifyContent='flex-start'>
- <Text variant='body' size='s' color='subdued'>
- {messages.exchangeRateLabel}&nbsp;
- </Text>
- <Text variant='body' size='s' color='default'>
- {messages.exchangeRateValue(
- inputToken.symbol,
- outputToken.symbol,
- currentExchangeRate
- )}
- </Text>
- </Flex>
- )}
+ {showExchangeRate &&
+ currentExchangeRate &&
+ displayExchangeRate && (
+ <Flex p='l' justifyContent='flex-start'>
+ <Text variant='body' size='s' color='subdued'>
+ {messages.exchangeRateLabel}&nbsp;
+ </Text>
+ <Text variant='body' size='s' color='default'>
+ {messages.exchangeRateValue(
+ inputToken.symbol,
+ outputToken.symbol,
+ displayExchangeRate
+ )}
+ </Text>
+ </Flex>
+ )}
  </>
  )}
  </Flex>

packages/common/src/adapters/coin.ts

@@ -6,11 +6,8 @@ import { removeNullable } from '~/utils/typeUtils'
 export type CoinMetadata = {
  mint: string
  ticker: string | null
- tokenInfo: {
- name: string | null
- decimals: number | null
- logoURI: string | null
- } | null
+ logoUri: string | null
+ decimals: number | null
 }
 
 /**
@@ -19,13 +16,8 @@ export type CoinMetadata = {
 export const coinFromSDK = (input: Coin): CoinMetadata => ({
  mint: input.mint,
  ticker: input.ticker ?? null,
- tokenInfo: input.tokenInfo
- ? {
- name: input.tokenInfo.name ?? null,
- decimals: input.tokenInfo.decimals ?? null,
- logoURI: input.tokenInfo.logoURI ?? null
- }
- : null
+ logoUri: input.logoUri ?? null,
+ decimals: input.decimals ?? null
 })
 
 /**

packages/common/src/api/tan-query/coins/tokenUtils.ts

@@ -8,11 +8,11 @@ import { TokenInfo } from '~/store/ui/buy-sell/types'
  */
 const coinMetadataToTokenInfo = (coin: CoinMetadata): TokenInfo => ({
  symbol: coin.ticker ?? '',
- name: coin.tokenInfo?.name ?? coin.ticker ?? '',
- decimals: coin.tokenInfo?.decimals ?? 8,
+ name: coin.ticker ?? '',
+ decimals: coin.decimals ?? 8,
  balance: null, // This would come from user's wallet state
  address: coin.mint,
- logoURI: coin.tokenInfo?.logoURI ?? '',
+ logoURI: coin.logoUri ?? '',
  isStablecoin: false // API tokens are never stablecoins, only USDC is (which is frontend-only)
 })
 

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

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

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

@@ -0,0 +1,49 @@
+import { useMemo } from 'react'
+
+import { UserCoin } from '~/api'
+import { useFeatureFlag } from '~/hooks'
+import { FeatureFlags } from '~/services'
+
+export type CoinPairItem = UserCoin | 'find-more'
+
+/**
+ * Groups coins into pairs for 2-column layout rendering.
+ * Filters out USDC coins and optionally pairs remaining coins with FindMoreCoins component
+ * based on the ARTIST_COINS feature flag.
+ *
+ * @param coins Array of user coins
+ * @returns Array of coin pairs, where each pair contains 1-2 items
+ */
+export const useGroupCoinPairs = (coins?: UserCoin[]) => {
+ const { isEnabled: isArtistCoinsEnabled } = useFeatureFlag(
+ FeatureFlags.ARTIST_COINS
+ )
+
+ return useMemo(() => {
+ if (!coins) return []
+
+ // Filter out USDC coins
+ const filteredCoins = coins.filter((coin) => coin.ticker !== 'USDC')
+
+ // Group coins into pairs for row rendering
+ const coinPairs: CoinPairItem[][] = []
+
+ for (let i = 0; i < filteredCoins.length; i += 2) {
+ const pair: CoinPairItem[] = [filteredCoins[i]]
+ if (i + 1 < filteredCoins.length) {
+ pair.push(filteredCoins[i + 1])
+ } else if (isArtistCoinsEnabled) {
+ // If odd number of coins and artist coins enabled, pair the last one with FindMoreCoins
+ pair.push('find-more')
+ }
+ coinPairs.push(pair)
+ }
+
+ // If even number of coins and artist coins enabled, FindMoreCoins gets its own row
+ if (filteredCoins.length % 2 === 0 && isArtistCoinsEnabled) {
+ coinPairs.push(['find-more'])
+ }
+
+ return coinPairs
+ }, [coins, isArtistCoinsEnabled])
+}

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

@@ -1,18 +1,21 @@
 import { useCallback, useMemo } from 'react'
 
-import { AUDIO } from '@audius/fixed-decimal'
+import { FixedDecimal } from '@audius/fixed-decimal'
 
 import { formatUSDCValue } from '~/api'
 import { getTokenDecimalPlaces, getCurrencyDecimalPlaces } from '~/utils'
 
 export type UseTokenAmountFormattingProps = {
  amount?: string | number
- availableBalance: number
+ availableBalance?: number | null
  exchangeRate?: number | null
  isStablecoin: boolean
+ decimals?: number
  placeholder?: string
 }
 
+export const DEFAULT_TOKEN_AMOUNT_PLACEHOLDER = '0.00'
+
 const defaultDecimalPlaces = 2
 
 // Maximum safe amount for calculations to prevent overflow errors
@@ -31,7 +34,8 @@ export const useTokenAmountFormatting = ({
  amount,
  availableBalance,
  isStablecoin,
- placeholder = '0.00'
+ decimals,
+ placeholder = DEFAULT_TOKEN_AMOUNT_PLACEHOLDER
 }: UseTokenAmountFormattingProps) => {
  const getDisplayDecimalPlaces = useCallback(
  (currentExchangeRate: number | null | undefined) => {
@@ -45,24 +49,22 @@ export const useTokenAmountFormatting = ({
  )
 
  const formattedAvailableBalance = useMemo(() => {
- if (isNaN(availableBalance)) return placeholder
+ if (availableBalance == null || isNaN(availableBalance)) return null
 
  if (isStablecoin) {
  return formatUSDCValue(availableBalance)
  }
 
- // Use AUDIO for non-stablecoins for now, when we expand to other tokens
- // we will need to use FixedDecimal itself
- const audioAmount = AUDIO(availableBalance)
- const decimals = getTokenDecimalPlaces(availableBalance)
+ const tokenAmount = new FixedDecimal(availableBalance, decimals)
+ const displayDecimals = getTokenDecimalPlaces(availableBalance)
 
- return audioAmount.toLocaleString('en-US', {
- maximumFractionDigits: decimals
+ return tokenAmount.toLocaleString('en-US', {
+ maximumFractionDigits: displayDecimals
  })
- }, [availableBalance, placeholder, isStablecoin])
+ }, [availableBalance, isStablecoin, decimals])
 
  const formattedAmount = useMemo(() => {
- if (!amount && amount !== 0) return placeholder
+ if (!amount && amount !== 0) return null
 
  // Use safe value for calculations while preserving original for display logic
  const safeNumericAmount = getSafeNumericValue(amount)
@@ -72,13 +74,13 @@ export const useTokenAmountFormatting = ({
  return formatUSDCValue(safeNumericAmount)
  }
 
- const audioAmount = AUDIO(safeNumericAmount)
- const decimals = getTokenDecimalPlaces(safeNumericAmount)
+ const tokenAmount = new FixedDecimal(safeNumericAmount, decimals)
+ const displayDecimals = getTokenDecimalPlaces(safeNumericAmount)
 
- return audioAmount.toLocaleString('en-US', {
- maximumFractionDigits: decimals
+ return tokenAmount.toLocaleString('en-US', {
+ maximumFractionDigits: displayDecimals
  })
- }, [amount, placeholder, isStablecoin])
+ }, [amount, placeholder, isStablecoin, decimals])
 
  return {
  formattedAvailableBalance,

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

@@ -189,6 +189,13 @@ export const useTokenSwapForm = ({
  inputAmount: safeExchangeRateAmount > 0 ? safeExchangeRateAmount : 1
  })
 
+ // Get a static display rate using base amount of 1 for consistent display
+ const { data: displayExchangeRateData } = useTokenExchangeRate({
+ inputMint,
+ outputMint,
+ inputAmount: 1
+ })
+
  // Update output amount when exchange rate or input amount changes
  useEffect(() => {
  if (numericInputAmount <= 0) {
@@ -215,6 +222,9 @@ export const useTokenSwapForm = ({
  }, [values.outputAmount])
 
  const currentExchangeRate = exchangeRateData ? exchangeRateData.rate : null
+ const displayExchangeRate = displayExchangeRateData
+ ? displayExchangeRateData.rate
+ : null
 
  // Only show error if field has been touched, has a value, and has an error
  // This prevents showing "Required" error when field is empty during typing
@@ -294,6 +304,7 @@ export const useTokenSwapForm = ({
  isBalanceLoading,
  availableBalance,
  currentExchangeRate,
+ displayExchangeRate,
  handleInputAmountChange,
  handleMaxClick,
  formik,

packages/web/src/components/buy-sell-modal/ConfirmSwapScreen.tsx

@@ -3,11 +3,15 @@ import { useMemo } from 'react'
 import { formatUSDCValue, SLIPPAGE_BPS } from '@audius/common/api'
 import { useBuySellAnalytics } from '@audius/common/hooks'
 import { buySellMessages as baseMessages } from '@audius/common/messages'
-import { TokenInfo, getSwapTokens, TokenPair } from '@audius/common/store'
+import {
+ TokenInfo,
+ getSwapTokens,
+ TokenPair,
+ useTokenAmountFormatting
+} from '@audius/common/store'
 import { Button, Flex, Text } from '@audius/harmony'
 
 import { SwapBalanceSection } from './SwapBalanceSection'
-import { useTokenAmountFormatting } from './hooks/useTokenAmountFormatting'
 
 const messages = {
  ...baseMessages,
@@ -58,14 +62,14 @@ export const ConfirmSwapScreen = (props: ConfirmSwapScreenProps) => {
  // balance isn't needed so we pass 0
  const { formattedAmount: formattedPayAmount } = useTokenAmountFormatting({
  amount: payAmount,
-availableBalance: 0,
-isStablecoin: !!payTokenInfo.isStablecoin
+isStablecoin: !!payTokenInfo.isStablecoin,
+decimals: payTokenInfo.decimals
  })
 
  const { formattedAmount: formattedReceiveAmount } = useTokenAmountFormatting({
  amount: receiveAmount,
-availableBalance: 0,
-isStablecoin: !!receiveTokenInfo.isStablecoin
+isStablecoin: !!receiveTokenInfo.isStablecoin,
+decimals: receiveTokenInfo.decimals
  })
 
  const isReceivingBaseToken = receiveTokenInfo.symbol === baseTokenSymbol

packages/web/src/components/buy-sell-modal/CryptoBalanceSection.tsx

@@ -4,7 +4,7 @@ import { Divider, Flex, Text } from '@audius/harmony'
 import { TokenIcon } from './TokenIcon'
 
 const messages = {
- symbol: (symbol: string) => `$${symbol}`
+ symbol: (symbol: string) => `${symbol}`
 }
 
 type CryptoBalanceSectionProps = {

packages/web/src/components/buy-sell-modal/SwapTab.tsx

@@ -70,7 +70,7 @@ export const SwapTab = ({
  availableOutputTokens,
  onInputTokenChange,
  onOutputTokenChange,
- showExchangeRate = false
+ showExchangeRate = true
 }: SwapTabProps) => {
  const {
  formik,
@@ -80,6 +80,7 @@ export const SwapTab = ({
  isBalanceLoading,
  availableBalance,
  currentExchangeRate,
+ displayExchangeRate,
  handleInputAmountChange,
  handleMaxClick
  } = useTokenSwapForm({
@@ -95,10 +96,16 @@ export const SwapTab = ({
 
  // Track if an exchange rate has ever been successfully fetched
  const hasRateEverBeenFetched = useRef(false)
+ const hasDisplayRateEverBeenFetched = useRef(false)
+
  if (currentExchangeRate !== null) {
  hasRateEverBeenFetched.current = true
  }
 
+ if (displayExchangeRate !== null) {
+ hasDisplayRateEverBeenFetched.current = true
+ }
+
  // Show initial loading state if balance is loading,
  // OR if exchange rate is loading AND we've never fetched a rate before.
  const isInitialLoading =
@@ -161,20 +168,22 @@ export const SwapTab = ({
  />
 
  {/* Show exchange rate for convert flow */}
- {showExchangeRate && currentExchangeRate && (
- <Flex p='l' justifyContent='flex-start'>
- <Text variant='body' size='s' color='subdued'>
- {messages.exchangeRateLabel}&nbsp;
- </Text>
- <Text variant='body' size='s' color='default'>
- {messages.exchangeRateValue(
- inputToken.symbol,
- outputToken.symbol,
- currentExchangeRate
- )}
- </Text>
- </Flex>
- )}
+ {showExchangeRate &&
+ currentExchangeRate &&
+ displayExchangeRate && (
+ <Flex p='l' justifyContent='flex-start'>
+ <Text variant='body' size='s' color='subdued'>
+ {messages.exchangeRateLabel}&nbsp;
+ </Text>
+ <Text variant='body' size='s' color='default'>
+ {messages.exchangeRateValue(
+ inputToken.symbol,
+ outputToken.symbol,
+ displayExchangeRate
+ )}
+ </Text>
+ </Flex>
+ )}
  </>
  )}
  </Flex>

packages/common/src/adapters/coin.ts

@@ -6,11 +6,8 @@ import { removeNullable } from '~/utils/typeUtils'
 export type CoinMetadata = {
  mint: string
  ticker: string | null
- tokenInfo: {
- name: string | null
- decimals: number | null
- logoURI: string | null
- } | null
+ logoUri: string | null
+ decimals: number | null
 }
 
 /**
@@ -19,13 +16,8 @@ export type CoinMetadata = {
 export const coinFromSDK = (input: Coin): CoinMetadata => ({
  mint: input.mint,
  ticker: input.ticker ?? null,
- tokenInfo: input.tokenInfo
- ? {
- name: input.tokenInfo.name ?? null,
- decimals: input.tokenInfo.decimals ?? null,
- logoURI: input.tokenInfo.logoURI ?? null
- }
- : null
+ logoUri: input.logoUri ?? null,
+ decimals: input.decimals ?? null
 })
 
 /**

packages/common/src/api/tan-query/coins/tokenUtils.ts

@@ -8,11 +8,11 @@ import { TokenInfo } from '~/store/ui/buy-sell/types'
  */
 const coinMetadataToTokenInfo = (coin: CoinMetadata): TokenInfo => ({
  symbol: coin.ticker ?? '',
- name: coin.tokenInfo?.name ?? coin.ticker ?? '',
- decimals: coin.tokenInfo?.decimals ?? 8,
+ name: coin.ticker ?? '',
+ decimals: coin.decimals ?? 8,
  balance: null, // This would come from user's wallet state
  address: coin.mint,
- logoURI: coin.tokenInfo?.logoURI ?? '',
+ logoURI: coin.logoUri ?? '',
  isStablecoin: false // API tokens are never stablecoins, only USDC is (which is frontend-only)
 })
 

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

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

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

@@ -0,0 +1,49 @@
+import { useMemo } from 'react'
+
+import { UserCoin } from '~/api'
+import { useFeatureFlag } from '~/hooks'
+import { FeatureFlags } from '~/services'
+
+export type CoinPairItem = UserCoin | 'find-more'
+
+/**
+ * Groups coins into pairs for 2-column layout rendering.
+ * Filters out USDC coins and optionally pairs remaining coins with FindMoreCoins component
+ * based on the ARTIST_COINS feature flag.
+ *
+ * @param coins Array of user coins
+ * @returns Array of coin pairs, where each pair contains 1-2 items
+ */
+export const useGroupCoinPairs = (coins?: UserCoin[]) => {
+ const { isEnabled: isArtistCoinsEnabled } = useFeatureFlag(
+ FeatureFlags.ARTIST_COINS
+ )
+
+ return useMemo(() => {
+ if (!coins) return []
+
+ // Filter out USDC coins
+ const filteredCoins = coins.filter((coin) => coin.ticker !== 'USDC')
+
+ // Group coins into pairs for row rendering
+ const coinPairs: CoinPairItem[][] = []
+
+ for (let i = 0; i < filteredCoins.length; i += 2) {
+ const pair: CoinPairItem[] = [filteredCoins[i]]
+ if (i + 1 < filteredCoins.length) {
+ pair.push(filteredCoins[i + 1])
+ } else if (isArtistCoinsEnabled) {
+ // If odd number of coins and artist coins enabled, pair the last one with FindMoreCoins
+ pair.push('find-more')
+ }
+ coinPairs.push(pair)
+ }
+
+ // If even number of coins and artist coins enabled, FindMoreCoins gets its own row
+ if (filteredCoins.length % 2 === 0 && isArtistCoinsEnabled) {
+ coinPairs.push(['find-more'])
+ }
+
+ return coinPairs
+ }, [coins, isArtistCoinsEnabled])
+}

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

@@ -1,18 +1,21 @@
 import { useCallback, useMemo } from 'react'
 
-import { AUDIO } from '@audius/fixed-decimal'
+import { FixedDecimal } from '@audius/fixed-decimal'
 
 import { formatUSDCValue } from '~/api'
 import { getTokenDecimalPlaces, getCurrencyDecimalPlaces } from '~/utils'
 
 export type UseTokenAmountFormattingProps = {
  amount?: string | number
- availableBalance: number
+ availableBalance?: number | null
  exchangeRate?: number | null
  isStablecoin: boolean
+ decimals?: number
  placeholder?: string
 }
 
+export const DEFAULT_TOKEN_AMOUNT_PLACEHOLDER = '0.00'
+
 const defaultDecimalPlaces = 2
 
 // Maximum safe amount for calculations to prevent overflow errors
@@ -31,7 +34,8 @@ export const useTokenAmountFormatting = ({
  amount,
  availableBalance,
  isStablecoin,
- placeholder = '0.00'
+ decimals,
+ placeholder = DEFAULT_TOKEN_AMOUNT_PLACEHOLDER
 }: UseTokenAmountFormattingProps) => {
  const getDisplayDecimalPlaces = useCallback(
  (currentExchangeRate: number | null | undefined) => {
@@ -45,24 +49,22 @@ export const useTokenAmountFormatting = ({
  )
 
  const formattedAvailableBalance = useMemo(() => {
- if (isNaN(availableBalance)) return placeholder
+ if (availableBalance == null || isNaN(availableBalance)) return null
 
  if (isStablecoin) {
  return formatUSDCValue(availableBalance)
  }
 
- // Use AUDIO for non-stablecoins for now, when we expand to other tokens
- // we will need to use FixedDecimal itself
- const audioAmount = AUDIO(availableBalance)
- const decimals = getTokenDecimalPlaces(availableBalance)
+ const tokenAmount = new FixedDecimal(availableBalance, decimals)
+ const displayDecimals = getTokenDecimalPlaces(availableBalance)
 
- return audioAmount.toLocaleString('en-US', {
- maximumFractionDigits: decimals
+ return tokenAmount.toLocaleString('en-US', {
+ maximumFractionDigits: displayDecimals
  })
- }, [availableBalance, placeholder, isStablecoin])
+ }, [availableBalance, isStablecoin, decimals])
 
  const formattedAmount = useMemo(() => {
- if (!amount && amount !== 0) return placeholder
+ if (!amount && amount !== 0) return null
 
  // Use safe value for calculations while preserving original for display logic
  const safeNumericAmount = getSafeNumericValue(amount)
@@ -72,13 +74,13 @@ export const useTokenAmountFormatting = ({
  return formatUSDCValue(safeNumericAmount)
  }
 
- const audioAmount = AUDIO(safeNumericAmount)
- const decimals = getTokenDecimalPlaces(safeNumericAmount)
+ const tokenAmount = new FixedDecimal(safeNumericAmount, decimals)
+ const displayDecimals = getTokenDecimalPlaces(safeNumericAmount)
 
- return audioAmount.toLocaleString('en-US', {
- maximumFractionDigits: decimals
+ return tokenAmount.toLocaleString('en-US', {
+ maximumFractionDigits: displayDecimals
  })
- }, [amount, placeholder, isStablecoin])
+ }, [amount, placeholder, isStablecoin, decimals])
 
  return {
  formattedAvailableBalance,

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

@@ -189,6 +189,13 @@ export const useTokenSwapForm = ({
  inputAmount: safeExchangeRateAmount > 0 ? safeExchangeRateAmount : 1
  })
 
+ // Get a static display rate using base amount of 1 for consistent display
+ const { data: displayExchangeRateData } = useTokenExchangeRate({
+ inputMint,
+ outputMint,
+ inputAmount: 1
+ })
+
  // Update output amount when exchange rate or input amount changes
  useEffect(() => {
  if (numericInputAmount <= 0) {
@@ -215,6 +222,9 @@ export const useTokenSwapForm = ({
  }, [values.outputAmount])
 
  const currentExchangeRate = exchangeRateData ? exchangeRateData.rate : null
+ const displayExchangeRate = displayExchangeRateData
+ ? displayExchangeRateData.rate
+ : null
 
  // Only show error if field has been touched, has a value, and has an error
  // This prevents showing "Required" error when field is empty during typing
@@ -294,6 +304,7 @@ export const useTokenSwapForm = ({
  isBalanceLoading,
  availableBalance,
  currentExchangeRate,
+ displayExchangeRate,
  handleInputAmountChange,
  handleMaxClick,
  formik,

packages/web/src/components/buy-sell-modal/ConfirmSwapScreen.tsx

@@ -3,11 +3,15 @@ import { useMemo } from 'react'
 import { formatUSDCValue, SLIPPAGE_BPS } from '@audius/common/api'
 import { useBuySellAnalytics } from '@audius/common/hooks'
 import { buySellMessages as baseMessages } from '@audius/common/messages'
-import { TokenInfo, getSwapTokens, TokenPair } from '@audius/common/store'
+import {
+ TokenInfo,
+ getSwapTokens,
+ TokenPair,
+ useTokenAmountFormatting
+} from '@audius/common/store'
 import { Button, Flex, Text } from '@audius/harmony'
 
 import { SwapBalanceSection } from './SwapBalanceSection'
-import { useTokenAmountFormatting } from './hooks/useTokenAmountFormatting'
 
 const messages = {
  ...baseMessages,
@@ -58,14 +62,14 @@ export const ConfirmSwapScreen = (props: ConfirmSwapScreenProps) => {
  // balance isn't needed so we pass 0
  const { formattedAmount: formattedPayAmount } = useTokenAmountFormatting({
  amount: payAmount,
-availableBalance: 0,
-isStablecoin: !!payTokenInfo.isStablecoin
+isStablecoin: !!payTokenInfo.isStablecoin,
+decimals: payTokenInfo.decimals
  })
 
  const { formattedAmount: formattedReceiveAmount } = useTokenAmountFormatting({
  amount: receiveAmount,
-availableBalance: 0,
-isStablecoin: !!receiveTokenInfo.isStablecoin
+isStablecoin: !!receiveTokenInfo.isStablecoin,
+decimals: receiveTokenInfo.decimals
  })
 
  const isReceivingBaseToken = receiveTokenInfo.symbol === baseTokenSymbol

packages/web/src/components/buy-sell-modal/CryptoBalanceSection.tsx

@@ -4,7 +4,7 @@ import { Divider, Flex, Text } from '@audius/harmony'
 import { TokenIcon } from './TokenIcon'
 
 const messages = {
- symbol: (symbol: string) => `$${symbol}`
+ symbol: (symbol: string) => `${symbol}`
 }
 
 type CryptoBalanceSectionProps = {

packages/web/src/components/buy-sell-modal/SwapTab.tsx

@@ -70,7 +70,7 @@ export const SwapTab = ({
  availableOutputTokens,
  onInputTokenChange,
  onOutputTokenChange,
- showExchangeRate = false
+ showExchangeRate = true
 }: SwapTabProps) => {
  const {
  formik,
@@ -80,6 +80,7 @@ export const SwapTab = ({
  isBalanceLoading,
  availableBalance,
  currentExchangeRate,
+ displayExchangeRate,
  handleInputAmountChange,
  handleMaxClick
  } = useTokenSwapForm({
@@ -95,10 +96,16 @@ export const SwapTab = ({
 
  // Track if an exchange rate has ever been successfully fetched
  const hasRateEverBeenFetched = useRef(false)
+ const hasDisplayRateEverBeenFetched = useRef(false)
+
  if (currentExchangeRate !== null) {
  hasRateEverBeenFetched.current = true
  }
 
+ if (displayExchangeRate !== null) {
+ hasDisplayRateEverBeenFetched.current = true
+ }
+
  // Show initial loading state if balance is loading,
  // OR if exchange rate is loading AND we've never fetched a rate before.
  const isInitialLoading =
@@ -161,20 +168,22 @@ export const SwapTab = ({
  />
 
  {/* Show exchange rate for convert flow */}
- {showExchangeRate && currentExchangeRate && (
- <Flex p='l' justifyContent='flex-start'>
- <Text variant='body' size='s' color='subdued'>
- {messages.exchangeRateLabel}&nbsp;
- </Text>
- <Text variant='body' size='s' color='default'>
- {messages.exchangeRateValue(
- inputToken.symbol,
- outputToken.symbol,
- currentExchangeRate
- )}
- </Text>
- </Flex>
- )}
+ {showExchangeRate &&
+ currentExchangeRate &&
+ displayExchangeRate && (
+ <Flex p='l' justifyContent='flex-start'>
+ <Text variant='body' size='s' color='subdued'>
+ {messages.exchangeRateLabel}&nbsp;
+ </Text>
+ <Text variant='body' size='s' color='default'>
+ {messages.exchangeRateValue(
+ inputToken.symbol,
+ outputToken.symbol,
+ displayExchangeRate
+ )}
+ </Text>
+ </Flex>
+ )}
  </>
  )}
  </Flex>