diff --git a/packages/mobile/src/screens/profile-screen/BuyArtistCoinButton.tsx b/packages/mobile/src/screens/profile-screen/BuyArtistCoinButton.tsx
index d3e551f703f..43856fc8516 100644
--- a/packages/mobile/src/screens/profile-screen/BuyArtistCoinButton.tsx
+++ b/packages/mobile/src/screens/profile-screen/BuyArtistCoinButton.tsx
@@ -1,13 +1,12 @@
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 }) => {
@@ -15,16 +14,14 @@ export const BuyArtistCoinButton = ({ userId }: { userId: number }) => {
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}
)
}
diff --git a/packages/web/src/pages/profile-page/ProfilePage.test.tsx b/packages/web/src/pages/profile-page/ProfilePage.test.tsx
index 306aaf1d805..17b0d795c08 100644
--- a/packages/web/src/pages/profile-page/ProfilePage.test.tsx
+++ b/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()
})
diff --git a/packages/web/src/pages/profile-page/components/desktop/BuyArtistCoinCard.tsx b/packages/web/src/pages/profile-page/components/desktop/BuyArtistCoinCard.tsx
index 8cd3ef31f56..da17b7cb497 100644
--- a/packages/web/src/pages/profile-page/components/desktop/BuyArtistCoinCard.tsx
+++ b/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 (
-
-
-
-
-
- {artistCoin.name}
-
-
- {`$${artistCoin.ticker}`}
-
-
-
-
-
+
+
+
+
+ {artistCoin.name}
+
+
+ {`$${artistCoin.ticker}`}
+
+
+
+
+
+
)
}
diff --git a/packages/web/src/pages/profile-page/components/mobile/BuyArtistCoinButton.tsx b/packages/web/src/pages/profile-page/components/mobile/BuyArtistCoinButton.tsx
index 594118bc20c..30d63c73dc1 100644
--- a/packages/web/src/pages/profile-page/components/mobile/BuyArtistCoinButton.tsx
+++ b/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}
)
}