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} ) }