Change profile page coin CTAs to navigate to fan club page

packages/mobile/src/screens/profile-screen/BuyArtistCoinButton.tsx

@@ -1,30 +1,27 @@
 import { useCallback } from 'react'
 
 import { useArtistCreatedCoin } from '@audius/common/api'
-import { useBuySellInitialTab } from '@audius/common/hooks'
 
 import { Button, useTheme } from '@audius/harmony-native'
 import { useNavigation } from 'app/hooks/useNavigation'
 
 const messages = {
-  title: 'Buy Fan Club Token'
+  viewFanClub: 'View Fan Club'
 }
 
 export const BuyArtistCoinButton = ({ userId }: { userId: number }) => {
   const { color } = useTheme()
   const navigation = useNavigation()
 
   const { data: artistCoin } = useArtistCreatedCoin(userId)
-  const initialTab = useBuySellInitialTab()
 
   const handlePress = useCallback(() => {
     if (artistCoin?.ticker) {
-      navigation.navigate('BuySell', {
-        initialTab,
-        coinTicker: artistCoin.ticker
+      navigation.navigate('CoinDetailsScreen', {
+        ticker: artistCoin.ticker
       })
     }
-  }, [navigation, artistCoin?.ticker, initialTab])
+  }, [navigation, artistCoin?.ticker])
 
   // Don't render if user doesn't own a coin
   if (!artistCoin?.mint) {
@@ -38,7 +35,7 @@ export const BuyArtistCoinButton = ({ userId }: { userId: number }) => {
       fullWidth
       onPress={handlePress}
     >
-      {messages.title}
+      {messages.viewFanClub}
     </Button>
   )
 }

packages/web/src/pages/profile-page/ProfilePage.test.tsx

@@ -224,7 +224,7 @@ describe('ProfilePage', () => {
     // TODO
   })
 
-  it('shows buy coin UI when the profile belongs to an artist with an owned coin', async () => {
+  it('shows fan club UI when the profile belongs to an artist with an owned coin', async () => {
     mswServer.use(mockUserCreatedCoin(artistUser.id, mockArtistCoin))
 
     // Mock a different current user to simulate viewing another user's profile
@@ -247,10 +247,10 @@ describe('ProfilePage', () => {
     ).toBeInTheDocument()
 
     // Verify that coin-related elements are present when user has coins
-    const buyButton = await screen.findByRole('button', {
-      name: 'Buy Coins'
+    const viewFanClubButton = await screen.findByRole('button', {
+      name: 'View Fan Club'
     })
-    expect(buyButton).toBeInTheDocument()
+    expect(viewFanClubButton).toBeInTheDocument()
     expect(await screen.findByText('$MOCK')).toBeInTheDocument()
     expect(screen.queryByText('Tip $AUDIO')).not.toBeInTheDocument()
   })

packages/web/src/pages/profile-page/components/desktop/BuyArtistCoinCard.tsx

@@ -1,46 +1,22 @@
-import { useArtistCoin, useExternalWalletBalance } from '@audius/common/api'
-import { useBuySellInitialTab } from '@audius/common/hooks'
-import { useBuySellModal } from '@audius/common/store'
+import { useArtistCoin } from '@audius/common/api'
 import { route } from '@audius/common/utils'
-import { Button, Flex, Paper, Text } from '@audius/harmony'
+import { Button, Flex, IconArtistCoin, Paper, Text } from '@audius/harmony'
 import { useNavigate } from 'react-router'
 
 import { TokenIcon } from 'components/buy-sell-modal/TokenIcon'
-import { useExternalWalletAddress } from 'hooks/useExternalWalletAddress'
-import { env } from 'services/env'
+
+import { ProfilePageNavSectionTitle } from './ProfilePageNavSectionTitle'
 
 const messages = {
-  buyCoins: 'Buy Coins'
+  fanClub: 'Fan Club',
+  viewFanClub: 'View Fan Club'
 }
 
 export const BuyArtistCoinCard = ({ mint }: { mint: string }) => {
   const { data: artistCoin, isLoading } = useArtistCoin(mint)
-  const { onOpen: openBuySellModal } = useBuySellModal()
   const navigate = useNavigate()
-  const externalWalletAddress = useExternalWalletAddress()
-  const { data: externalUsdcBalance } = useExternalWalletBalance({
-    mint: env.USDC_MINT_ADDRESS,
-    walletAddress: externalWalletAddress
-  })
-  const { data: externalAudioBalance } = useExternalWalletBalance({
-    mint: env.WAUDIO_MINT_ADDRESS,
-    walletAddress: externalWalletAddress
-  })
-  const initialTab = useBuySellInitialTab({
-    externalUsdcBalance,
-    externalAudioBalance
-  })
-
-  const handleBuyCoins = (e: React.MouseEvent) => {
-    e.stopPropagation() // Prevent triggering Paper's onClick
-    openBuySellModal({
-      ticker: artistCoin?.ticker ?? undefined,
-      initialTab,
-      isOpen: true
-    })
-  }
 
-  const handleCardClick = () => {
+  const handleViewFanClub = () => {
     if (artistCoin?.ticker) {
       navigate(route.coinPage(artistCoin.ticker))
     }
@@ -50,34 +26,40 @@ export const BuyArtistCoinCard = ({ mint }: { mint: string }) => {
     return null
   }
   return (
-    <Paper
-      column
-      gap='s'
-      ph='m'
-      pv='s'
-      onClick={handleCardClick}
-      css={{ cursor: 'pointer' }}
-      border='default'
-    >
-      <Flex gap='s' alignItems='center'>
-        <TokenIcon logoURI={artistCoin.logoUri} size='xl' hex />
-        <Flex column gap='2xs'>
-          <Text variant='title' size='l'>
-            {artistCoin.name}
-          </Text>
-          <Text variant='title' size='s' color='subdued'>
-            {`$${artistCoin.ticker}`}
-          </Text>
-        </Flex>
-      </Flex>
-      <Button
-        size='small'
-        onClick={handleBuyCoins}
-        color='coinGradient'
-        fullWidth
+    <Flex column gap='s'>
+      <ProfilePageNavSectionTitle
+        title={messages.fanClub}
+        Icon={IconArtistCoin}
+      />
+      <Paper
+        column
+        gap='s'
+        ph='m'
+        pv='s'
+        onClick={handleViewFanClub}
+        css={{ cursor: 'pointer' }}
+        border='default'
       >
-        {messages.buyCoins}
-      </Button>
-    </Paper>
+        <Flex gap='s' alignItems='center'>
+          <TokenIcon logoURI={artistCoin.logoUri} size='xl' hex />
+          <Flex column gap='2xs'>
+            <Text variant='title' size='l'>
+              {artistCoin.name}
+            </Text>
+            <Text variant='title' size='s' color='subdued'>
+              {`$${artistCoin.ticker}`}
+            </Text>
+          </Flex>
+        </Flex>
+        <Button
+          size='small'
+          onClick={handleViewFanClub}
+          color='coinGradient'
+          fullWidth
+        >
+          {messages.viewFanClub}
+        </Button>
+      </Paper>
+    </Flex>
   )
 }

packages/web/src/pages/profile-page/components/mobile/BuyArtistCoinButton.tsx

@@ -1,9 +1,10 @@
 import { useArtistCreatedCoin } from '@audius/common/api'
-import { useBuySellModal } from '@audius/common/store'
+import { route } from '@audius/common/utils'
 import { Button } from '@audius/harmony'
+import { useNavigate } from 'react-router'
 
 const messages = {
-  buyArtistCoin: 'Buy Artist Coin'
+  viewFanClub: 'View Fan Club'
 }
 
 type BuyArtistCoinButtonProps = {
@@ -13,11 +14,11 @@ type BuyArtistCoinButtonProps = {
 export const BuyArtistCoinButton = ({ userId }: BuyArtistCoinButtonProps) => {
   const { data: artistCoin, isPending: isArtistCoinLoading } =
     useArtistCreatedCoin(userId)
-  const { onOpen: openBuySellModal } = useBuySellModal()
+  const navigate = useNavigate()
 
-  const handleBuyCoins = () => {
+  const handleViewFanClub = () => {
     if (artistCoin?.ticker) {
-      openBuySellModal({ ticker: artistCoin.ticker, isOpen: true })
+      navigate(route.coinPage(artistCoin.ticker))
     }
   }
 
@@ -31,9 +32,9 @@ export const BuyArtistCoinButton = ({ userId }: BuyArtistCoinButtonProps) => {
       fullWidth
       size='small'
       color='coinGradient'
-      onClick={handleBuyCoins}
+      onClick={handleViewFanClub}
     >
-      {messages.buyArtistCoin}
+      {messages.viewFanClub}
     </Button>
   )
 }