Several UI updates for Artist Coins

packages/common/src/messages/walletMessages.ts

@@ -90,7 +90,7 @@ export const walletMessages = {
  buy: 'Buy',
  send: 'Send',
  receive: 'Receive',
- buySellNotSupported: 'Buy/Sell is not yet supported in your region',
+ buySellNotSupported: 'This is not supported in your region',
 
  // ReceiveTokensModal messages
  receiveTokensTitle: 'receive',

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

@@ -1,34 +1,27 @@
 import { useMemo } from 'react'
 
 import { useQueryContext, UserCoin } from '~/api'
-import { useFeatureFlag } from '~/hooks'
-import { FeatureFlags } from '~/services'
 
-export type CoinPairItem = UserCoin | 'find-more' | 'audio-coin'
+export type CoinPairItem = UserCoin | 'audio-coin'
 
 /**
  * Groups coins into pairs for responsive layout rendering.
- * Filters out USDC coins and optionally pairs remaining coins with FindMoreCoins component
- * based on the ARTIST_COINS feature flag.
+ * Filters out USDC coins for responsive layout.
  *
  * @param coins Array of user coins
  * @param singleColumn Whether to force single column layout (1 item per row)
  * @returns Array of coin pairs, where each pair contains 1-2 items
  */
 export const useGroupCoinPairs = (coins?: UserCoin[], singleColumn = false) => {
  const { env } = useQueryContext()
- const { isEnabled: isArtistCoinsEnabled } = useFeatureFlag(
- FeatureFlags.ARTIST_COINS
- )
 
  return useMemo(() => {
  if (!coins) {
- return isArtistCoinsEnabled ? [['find-more']] : []
+ return []
  }
 
  // Filter out USDC coins
  const filteredCoins = coins.filter((coin) => {
- if (!isArtistCoinsEnabled) return coin.mint === env.WAUDIO_MINT_ADDRESS
  return (
  coin.ticker !== 'USDC' &&
  (coin.balance > 0 || coin.mint === env.WAUDIO_MINT_ADDRESS)
@@ -40,46 +33,25 @@ export const useGroupCoinPairs = (coins?: UserCoin[], singleColumn = false) => {
 
  // If no coins after filtering, show audio coin card
  if (filteredCoins.length === 0) {
- const basePairs: CoinPairItem[][] = [['audio-coin']]
-
- if (singleColumn && isArtistCoinsEnabled) {
- basePairs.push(['find-more'])
- } else if (!singleColumn && isArtistCoinsEnabled) {
- basePairs[0].push('find-more')
- }
-
- return basePairs
+ return [['audio-coin']]
  }
 
  if (singleColumn) {
  // Single column layout - each coin gets its own row
  filteredCoins.forEach((coin) => {
  coinPairs.push([coin])
  })
-
- // Add FindMoreCoins in its own row if artist coins enabled
- if (isArtistCoinsEnabled) {
- coinPairs.push(['find-more'])
- }
  } else {
  // Two column layout - group coins into pairs
  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, env.WAUDIO_MINT_ADDRESS, isArtistCoinsEnabled, singleColumn])
+ }, [coins, env.WAUDIO_MINT_ADDRESS, singleColumn])
 }

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

@@ -1,51 +1,54 @@
-import { useState, useEffect } from 'react'
+import { useMemo, useState } from 'react'
 
 import { BuySellTab, TokenPair } from '~/store'
 
 export const useTokenStates = (selectedPair: TokenPair | null) => {
- // State for dynamic token selection - separate states for each tab
- // Initialize with default values, will be updated when token pairs load
- const [buyTabTokens, setBuyTabTokens] = useState<{
- baseToken: string
- quoteToken: string
- }>({
- baseToken: 'AUDIO', // AUDIO by default
- quoteToken: 'USDC' // USDC by default
- })
+ // State for user-initiated token changes - only track overrides
+ const [userOverrides, setUserOverrides] = useState<{
+ buy?: { baseToken?: string; quoteToken?: string }
+ sell?: { baseToken?: string; quoteToken?: string }
+ convert?: { baseToken?: string; quoteToken?: string }
+ }>({})
 
- const [sellTabTokens, setSellTabTokens] = useState<{
- baseToken: string
- quoteToken: string
- }>({
- baseToken: 'AUDIO', // AUDIO by default
- quoteToken: 'USDC' // USDC by default
- })
+ // Compute default tokens from selectedPair or fallback defaults
+ const defaultTokens = useMemo(() => {
+ const baseSymbol = selectedPair?.baseToken?.symbol ?? 'AUDIO'
+ const quoteSymbol = selectedPair?.quoteToken?.symbol ?? 'USDC'
 
- const [convertTabTokens, setConvertTabTokens] = useState<{
- baseToken: string
- quoteToken: string
- }>({
- baseToken: 'AUDIO', // AUDIO by default
- quoteToken: 'USDC' // USDC by default for convert tab
- })
-
- // Update token states when selected pair becomes available
- useEffect(() => {
- if (selectedPair && selectedPair.baseToken && selectedPair.quoteToken) {
- setBuyTabTokens({
- baseToken: selectedPair.baseToken.symbol,
- quoteToken: selectedPair.quoteToken.symbol
- })
- setSellTabTokens({
- baseToken: selectedPair.baseToken.symbol,
- quoteToken: selectedPair.quoteToken.symbol
- })
- setConvertTabTokens((prev) => ({
- baseToken: selectedPair.baseToken.symbol,
- quoteToken: prev.quoteToken // Keep USDC for convert tab
- }))
+ return {
+ buy: { baseToken: baseSymbol, quoteToken: quoteSymbol },
+ sell: { baseToken: baseSymbol, quoteToken: quoteSymbol },
+ convert: { baseToken: baseSymbol, quoteToken: 'USDC' } // Always USDC for convert
  }
- }, [selectedPair])
+ }, [selectedPair?.baseToken?.symbol, selectedPair?.quoteToken?.symbol])
+
+ // Merge defaults with user overrides
+ const buyTabTokens = useMemo(
+ () => ({
+ baseToken: userOverrides.buy?.baseToken ?? defaultTokens.buy.baseToken,
+ quoteToken: userOverrides.buy?.quoteToken ?? defaultTokens.buy.quoteToken
+ }),
+ [userOverrides.buy, defaultTokens.buy]
+ )
+
+ const sellTabTokens = useMemo(
+ () => ({
+ baseToken: userOverrides.sell?.baseToken ?? defaultTokens.sell.baseToken,
+ quoteToken:
+ userOverrides.sell?.quoteToken ?? defaultTokens.sell.quoteToken
+ }),
+ [userOverrides.sell, defaultTokens.sell]
+ )
+
+ const convertTabTokens = useMemo(
+ () => ({
+ baseToken:
+ userOverrides.convert?.baseToken ?? defaultTokens.convert.baseToken,
+ quoteToken:
+ userOverrides.convert?.quoteToken ?? defaultTokens.convert.quoteToken
+ }),
+ [userOverrides.convert, defaultTokens.convert]
+ )
 
  // Get current tab's token symbols
  const getCurrentTabTokens = (activeTab: BuySellTab) => {
@@ -58,29 +61,41 @@ export const useTokenStates = (selectedPair: TokenPair | null) => {
 
  // Handle token changes
  const handleInputTokenChange = (symbol: string, activeTab: BuySellTab) => {
- if (activeTab === 'sell') {
- // On sell tab, input token change means base token change
- setSellTabTokens((prev) => ({ ...prev, baseToken: symbol }))
- } else if (activeTab === 'buy') {
- // On buy tab, input token change means quote token change
- setBuyTabTokens((prev) => ({ ...prev, quoteToken: symbol }))
- } else {
- // On convert tab, input token change means base token change
- setConvertTabTokens((prev) => ({ ...prev, baseToken: symbol }))
- }
+ setUserOverrides((prev) => {
+ const newOverrides = { ...prev }
+
+ if (activeTab === 'sell') {
+ // On sell tab, input token change means base token change
+ newOverrides.sell = { ...prev.sell, baseToken: symbol }
+ } else if (activeTab === 'buy') {
+ // On buy tab, input token change means quote token change
+ newOverrides.buy = { ...prev.buy, quoteToken: symbol }
+ } else {
+ // On convert tab, input token change means base token change
+ newOverrides.convert = { ...prev.convert, baseToken: symbol }
+ }
+
+ return newOverrides
+ })
  }
 
  const handleOutputTokenChange = (symbol: string, activeTab: BuySellTab) => {
- if (activeTab === 'buy') {
- // On buy tab, output token change means base token change
- setBuyTabTokens((prev) => ({ ...prev, baseToken: symbol }))
- } else if (activeTab === 'sell') {
- // On sell tab, output token change means quote token change
- setSellTabTokens((prev) => ({ ...prev, quoteToken: symbol }))
- } else {
- // On convert tab, output token change means quote token change
- setConvertTabTokens((prev) => ({ ...prev, quoteToken: symbol }))
- }
+ setUserOverrides((prev) => {
+ const newOverrides = { ...prev }
+
+ if (activeTab === 'buy') {
+ // On buy tab, output token change means base token change
+ newOverrides.buy = { ...prev.buy, baseToken: symbol }
+ } else if (activeTab === 'sell') {
+ // On sell tab, output token change means quote token change
+ newOverrides.sell = { ...prev.sell, quoteToken: symbol }
+ } else {
+ // On convert tab, output token change means quote token change
+ newOverrides.convert = { ...prev.convert, quoteToken: symbol }
+ }
+
+ return newOverrides
+ })
  }
 
  return {

packages/common/src/store/ui/shared/tokenConstants.ts

@@ -7,7 +7,7 @@ const BASE_TOKEN_METADATA = {
  AUDIO: {
  chainId: 101,
  symbol: 'AUDIO',
- name: 'Audius (Portal)',
+ name: 'Audius Coin',
  decimals: 8,
  logoURI:
  'https://raw.githubusercontent.com/solana-labs/token-list/main/assets/mainnet/9LzCMqDgTKYz9Drzqnpgee3SGa89up3a247ypMj2xrqM/logo.png'

packages/common/src/utils/route.ts

@@ -69,12 +69,11 @@ export const PURCHASES_PAGE = '/payments/purchases'
 export const SALES_PAGE = '/payments/sales'
 export const WITHDRAWALS_PAGE = '/payments/withdrawals'
 export const TRANSACTION_HISTORY_PAGE = '/wallet/transaction-history'
-export const ASSET_DETAIL_PAGE = '/wallet/:ticker'
+export const ASSET_DETAIL_PAGE = '/coins/:ticker'
 export const WALLET_PAGE = '/wallet'
 export const WALLET_GUIDE_PAGE = '/wallet/guide'
-export const ALL_COINS_PAGE = '/wallet/coins'
 export const COINS_CREATE_PAGE = '/coins/create'
-export const COINS_EXPLORE_PAGE = '/coins/explore'
+export const COINS_EXPLORE_PAGE = '/coins'
 export const PRIVATE_KEY_EXPORTER_SETTINGS_PAGE = '/settings/export-private-key'
 export const DEV_TOOLS_PAGE = '/dev-tools'
 export const SOLANA_TOOLS_PAGE = '/dev-tools/solana'
@@ -238,9 +237,7 @@ export const authenticatedRoutes = [
  SALES_PAGE,
  PAYMENTS_PAGE,
  WITHDRAWALS_PAGE,
- ALL_COINS_PAGE,
  COINS_CREATE_PAGE,
- COINS_EXPLORE_PAGE,
  WALLET_GUIDE_PAGE
 ]
 
@@ -293,7 +290,7 @@ export const orderedRoutes = [
  WALLET_AUDIO_PAGE,
  ASSET_DETAIL_PAGE,
  WALLET_PAGE,
-ALL_COINS_PAGE,
+COINS_EXPLORE_PAGE,
  COINS_CREATE_PAGE,
  WALLET_GUIDE_PAGE,
  REWARDS_PAGE,
@@ -347,7 +344,7 @@ export const staticRoutes = new Set([
  AUDIO_PAGE,
  WALLET_PAGE,
  WALLET_GUIDE_PAGE,
-ALL_COINS_PAGE,
+COINS_EXPLORE_PAGE,
  COINS_CREATE_PAGE,
  WALLET_AUDIO_PAGE,
  REWARDS_PAGE,

packages/mobile/src/components/user-badges/UserBadges.tsx

@@ -4,15 +4,13 @@ import { useUser } from '@audius/common/api'
 import { useFeatureFlag } from '@audius/common/hooks'
 import type { ID } from '@audius/common/models'
 import { FeatureFlags } from '@audius/common/services'
-import {
- TOKEN_LISTING_MAP,
- useTierAndVerifiedForUser
-} from '@audius/common/store'
+import { useTierAndVerifiedForUser } from '@audius/common/store'
 
 import type { IconSize } from '@audius/harmony-native'
 import { Flex, IconVerified } from '@audius/harmony-native'
 import { IconAudioBadge } from 'app/components/audio-rewards'
 import { TokenIcon } from 'app/components/core'
+import { env } from 'app/services/env'
 
 type UserBadgesProps = {
  userId: ID
@@ -46,7 +44,7 @@ export const UserBadges = (props: UserBadgesProps) => {
  const shouldShowArtistCoinBadge =
  isArtistCoinEnabled &&
  !!displayMint &&
- displayMint !== TOKEN_LISTING_MAP.AUDIO.address
+ displayMint !== env.WAUDIO_MINT_ADDRESS
 
  return (
  <Flex row gap='xs' alignItems='center'>