[PE-6530] Conditionally show chat message artist coin header

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

@@ -0,0 +1,41 @@
+import { encodeHashId } from '@audius/sdk'
+import { useQuery } from '@tanstack/react-query'
+
+import { ID } from '~/models'
+
+import { QUERY_KEYS } from '../queryKeys'
+
+export type ArtistCoin = {
+ mint: string
+ owner_id: string
+}
+
+export type UseArtistCoinParams = {
+ mint?: string[]
+ owner_id?: ID[]
+}
+
+// TODO: PE-6542 Replace this with sdk call
+export const useArtistCoin = (params: UseArtistCoinParams = {}) => {
+ return useQuery({
+ queryKey: [QUERY_KEYS.artistCoins, params],
+ queryFn: async () => {
+ const searchParams = new URLSearchParams()
+ if (params.mint) {
+ params.mint.forEach((m) => searchParams.append('mint', m))
+ }
+ if (params.owner_id) {
+ params.owner_id.forEach((id) => {
+ const encodedId = encodeHashId(id)
+ if (encodedId) {
+ searchParams.append('owner_id', encodedId)
+ }
+ })
+ }
+ const res = await fetch(`https://api.audius.co/v1/coins?${searchParams}`)
+ if (!res.ok) throw new Error('Failed to fetch coins')
+ const data = await res.json()
+ return data.coins as ArtistCoin[]
+ }
+ })
+}

packages/common/src/api/tan-query/queryKeys.ts

@@ -104,5 +104,6 @@ export const QUERY_KEYS = {
  entityReaction: 'entityReaction',
  feelingLuckyTracks: 'feelingLuckyTracks',
  recentlyPlayedTracks: 'recentlyPlayedTracks',
- recentlyCommentedTracks: 'recentlyCommentedTracks'
+ recentlyCommentedTracks: 'recentlyCommentedTracks',
+ artistCoins: 'artistCoins'
 } as const

packages/common/src/hooks/index.ts

@@ -49,3 +49,4 @@ export * from './useIsArtist'
 export * from './useAnalytics'
 export * from './useBuySellAnalytics'
 export * from './useShareAction'
+export * from './useArtistCoinMessageHeader'

packages/common/src/hooks/useArtistCoinMessageHeader.ts

@@ -0,0 +1,44 @@
+import { ChatBlastAudience } from '@audius/sdk'
+
+import { useArtistCoin } from '~/api/tan-query/coins/useArtistCoin'
+import { ID } from '~/models'
+import { getTokenRegistry } from '~/services/tokens/TokenRegistry'
+
+import { FeatureFlags } from '../services'
+
+import { useFeatureFlag } from './useFeatureFlag'
+
+export const useArtistCoinMessageHeader = ({
+ userId,
+ audience
+}: {
+ userId: ID
+ audience?: ChatBlastAudience
+}) => {
+ const { isEnabled: isArtistCoinEnabled } = useFeatureFlag(
+ FeatureFlags.ARTIST_COINS
+ )
+
+ const { data: coins } = useArtistCoin({ owner_id: [userId] })
+
+ if (
+ !isArtistCoinEnabled ||
+ !audience ||
+ audience !== ChatBlastAudience.COIN_HOLDERS
+ ) {
+ return null
+ }
+
+ let artistCoinSymbol
+ let artistCoin
+ if (!!coins && coins.length > 0) {
+ artistCoin = coins[0]
+ if (artistCoin.mint) {
+ const tokenRegistry = getTokenRegistry()
+ const token = tokenRegistry.getTokenByAddress(artistCoin.mint)
+ artistCoinSymbol = token?.symbol
+ }
+ }
+
+ return artistCoinSymbol
+}

packages/mobile/src/screens/chat-screen/ArtistCoinHeader.tsx

@@ -0,0 +1,56 @@
+import { useArtistCoinMessageHeader } from '@audius/common/hooks'
+import { walletMessages } from '@audius/common/messages'
+import type { ID } from '@audius/common/models'
+import type { ChatBlastAudience } from '@audius/sdk'
+import { Platform } from 'react-native'
+
+import { Flex, IconTokenBonk, Text } from '@audius/harmony-native'
+
+const messages = {
+ membersOnly: 'Members Only'
+}
+
+export const ArtistCoinHeader = ({
+ userId,
+ audience
+}: {
+ userId: ID
+ audience?: ChatBlastAudience
+}) => {
+ const artistCoinSymbol = useArtistCoinMessageHeader({
+ userId,
+ audience
+ })
+
+ if (!artistCoinSymbol) return null
+
+ return (
+ <Flex
+ row
+ ph='l'
+ pv='xs'
+ gap='m'
+ alignItems='center'
+ justifyContent='space-between'
+ backgroundColor='surface1'
+ borderBottom='default'
+ >
+ <Flex row gap='xs' alignItems='center'>
+ {/* TODO: Lookup artist coin icon from TOKENS */}
+ <IconTokenBonk size='xs' />
+ {/* Alignment bug for label text variant on iOS */}
+ <Flex mt={Platform.OS === 'ios' ? '2xs' : 'none'}>
+ <Text variant='label' size='s'>
+ {walletMessages.dollarSign}
+ {artistCoinSymbol}
+ </Text>
+ </Flex>
+ </Flex>
+ <Flex mt={Platform.OS === 'ios' ? '2xs' : 'none'}>
+ <Text variant='label' size='s' color='accent'>
+ {messages.membersOnly}
+ </Text>
+ </Flex>
+ </Flex>
+ )
+}

packages/mobile/src/screens/chat-screen/ChatMessageListItem.tsx

@@ -1,9 +1,7 @@
 import { memo, useCallback, useState } from 'react'
 
 import { useCurrentUserId } from '@audius/common/api'
-import { useFeatureFlag } from '@audius/common/hooks'
 import { Status } from '@audius/common/models'
-import { FeatureFlags } from '@audius/common/services'
 import { chatSelectors } from '@audius/common/store'
 import {
  formatMessageDate,
@@ -15,10 +13,10 @@ import type { ReactionTypes, ChatMessageReaction } from '@audius/sdk'
 import { css } from '@emotion/native'
 import { find } from 'linkifyjs'
 import type { ViewStyle, StyleProp } from 'react-native'
-import { Dimensions, Keyboard, Platform } from 'react-native'
+import { Dimensions, Keyboard } from 'react-native'
 import { useSelector } from 'react-redux'
 
-import { Flex, IconTokenBonk, spacing, Text } from '@audius/harmony-native'
+import { Flex, spacing, Text } from '@audius/harmony-native'
 import ChatTail from 'app/assets/images/ChatTail.svg'
 import { Pressable, UserGeneratedText } from 'app/components/core'
 import { makeStyles } from 'app/styles'
@@ -27,6 +25,7 @@ import { zIndex } from 'app/utils/zIndex'
 
 import { reactionMap } from '../notifications-screen/Reaction'
 
+import { ArtistCoinHeader } from './ArtistCoinHeader'
 import { ChatMessagePlaylist } from './ChatMessagePlaylist'
 import { ChatMessageTrack } from './ChatMessageTrack'
 import { LinkPreview } from './LinkPreview'
@@ -37,10 +36,6 @@ const { isIdEqualToReactionsPopupMessageId, getChatMessageById } = chatSelectors
 
 const TAIL_HORIZONTAL_OFFSET = 7
 
-const messages = {
- membersOnly: 'Members Only'
-}
-
 const useStyles = makeStyles(({ spacing, palette, typography }) => ({
  bubble: {
  marginTop: spacing(2),
@@ -169,9 +164,6 @@ export const ChatMessageListItem = memo(function ChatMessageListItem(
  } = props
  const styles = useStyles()
  const { data: userId } = useCurrentUserId()
- const { isEnabled: isArtistCoinEnabled } = useFeatureFlag(
- FeatureFlags.ARTIST_COINS
- )
  const message = useSelector((state) =>
  getChatMessageById(state, chatId, messageId)
  )
@@ -263,32 +255,11 @@ export const ChatMessageListItem = memo(function ChatMessageListItem(
  itemsRef ? (el) => (itemsRef.current[messageId] = el) : null
  }
  >
- {isArtistCoinEnabled ? (
- <Flex
- row
- ph='l'
- pv='xs'
- gap='m'
- alignItems='center'
- justifyContent='space-between'
- backgroundColor='surface1'
- borderBottom='default'
- >
- <Flex row gap='xs' alignItems='center'>
- <IconTokenBonk size='xs' />
- {/* Alignment bug for label text variant on iOS */}
- <Flex mt={Platform.OS === 'ios' ? '2xs' : 'none'}>
- <Text variant='label' size='s'>
- $Bonk
- </Text>
- </Flex>
- </Flex>
- <Flex mt={Platform.OS === 'ios' ? '2xs' : 'none'}>
- <Text variant='label' size='s' color='accent'>
- {messages.membersOnly}
- </Text>
- </Flex>
- </Flex>
+ {senderUserId ? (
+ <ArtistCoinHeader
+ userId={senderUserId}
+ audience={message?.audience}
+ />
  ) : null}
  {isCollection ? (
  <ChatMessagePlaylist

packages/sdk/src/sdk/api/chats/ChatsApi.ts

@@ -800,7 +800,8 @@ export class ChatsApi
  sender_user_id: encodedSenderId,
  created_at: blast.created_at,
  reactions: [],
- is_plaintext: true
+ is_plaintext: true,
+ audience: blast.audience
  }
  })
  }
@@ -882,7 +883,8 @@ export class ChatsApi
  sender_user_id: data.metadata.senderUserId,
  created_at: data.metadata.timestamp,
  reactions: [],
- is_plaintext: !!data.rpc.params.is_plaintext
+ is_plaintext: !!data.rpc.params.is_plaintext,
+ audience: data.rpc.params.audience
  }
  })
  } else if (data.rpc.method === 'chat.react') {
@@ -908,7 +910,8 @@ export class ChatsApi
  sender_user_id: data.metadata.senderUserId,
  created_at: data.metadata.timestamp,
  reactions: [],
- is_plaintext: true
+ is_plaintext: true,
+ audience: data.rpc.params.audience
  }
  })
  }

packages/sdk/src/sdk/api/chats/serverTypes.ts

@@ -55,6 +55,7 @@ export type ChatMessageRPC = {
  message: string
  parent_message_id?: string
  is_plaintext?: boolean
+ audience?: ChatBlastAudience
  }
 }
 
@@ -159,6 +160,7 @@ export type ChatMessage = {
  created_at: string
  message: string
  is_plaintext: boolean
+ audience?: ChatBlastAudience
  reactions: ChatMessageReaction[]
 }
 

packages/web/src/pages/chat-page/components/ArtistCoinHeader.tsx

@@ -0,0 +1,51 @@
+import { useArtistCoinMessageHeader } from '@audius/common/hooks'
+import { walletMessages } from '@audius/common/messages'
+import { ID } from '@audius/common/models'
+import { Flex, Text } from '@audius/harmony'
+import { ChatBlastAudience } from '@audius/sdk'
+
+import { TOKENS } from 'components/buy-sell-modal/constants'
+
+const messages = {
+ membersOnly: 'Members Only'
+}
+
+export const ArtistCoinHeader = ({
+ userId,
+ audience
+}: {
+ userId: ID
+ audience?: ChatBlastAudience
+}) => {
+ const artistCoinSymbol = useArtistCoinMessageHeader({
+ userId,
+ audience
+ })
+
+ if (!artistCoinSymbol) return null
+
+ const ArtistCoinIcon = TOKENS[artistCoinSymbol]?.icon
+
+ return (
+ <Flex
+ ph='l'
+ pv='xs'
+ gap='m'
+ justifyContent='space-between'
+ alignItems='center'
+ backgroundColor='surface1'
+ borderBottom='default'
+ >
+ <Flex gap='xs' alignItems='center'>
+ {ArtistCoinIcon ? <ArtistCoinIcon size='xs' /> : null}
+ <Text variant='label' size='s'>
+ {walletMessages.dollarSign}
+ {artistCoinSymbol}
+ </Text>
+ </Flex>
+ <Text variant='label' size='s' color='accent'>
+ {messages.membersOnly}
+ </Text>
+ </Flex>
+ )
+}

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

@@ -0,0 +1,41 @@
+import { encodeHashId } from '@audius/sdk'
+import { useQuery } from '@tanstack/react-query'
+
+import { ID } from '~/models'
+
+import { QUERY_KEYS } from '../queryKeys'
+
+export type ArtistCoin = {
+ mint: string
+ owner_id: string
+}
+
+export type UseArtistCoinParams = {
+ mint?: string[]
+ owner_id?: ID[]
+}
+
+// TODO: PE-6542 Replace this with sdk call
+export const useArtistCoin = (params: UseArtistCoinParams = {}) => {
+ return useQuery({
+ queryKey: [QUERY_KEYS.artistCoins, params],
+ queryFn: async () => {
+ const searchParams = new URLSearchParams()
+ if (params.mint) {
+ params.mint.forEach((m) => searchParams.append('mint', m))
+ }
+ if (params.owner_id) {
+ params.owner_id.forEach((id) => {
+ const encodedId = encodeHashId(id)
+ if (encodedId) {
+ searchParams.append('owner_id', encodedId)
+ }
+ })
+ }
+ const res = await fetch(`https://api.audius.co/v1/coins?${searchParams}`)
+ if (!res.ok) throw new Error('Failed to fetch coins')
+ const data = await res.json()
+ return data.coins as ArtistCoin[]
+ }
+ })
+}

packages/common/src/api/tan-query/queryKeys.ts

@@ -104,5 +104,6 @@ export const QUERY_KEYS = {
  entityReaction: 'entityReaction',
  feelingLuckyTracks: 'feelingLuckyTracks',
  recentlyPlayedTracks: 'recentlyPlayedTracks',
- recentlyCommentedTracks: 'recentlyCommentedTracks'
+ recentlyCommentedTracks: 'recentlyCommentedTracks',
+ artistCoins: 'artistCoins'
 } as const

packages/common/src/hooks/index.ts

@@ -49,3 +49,4 @@ export * from './useIsArtist'
 export * from './useAnalytics'
 export * from './useBuySellAnalytics'
 export * from './useShareAction'
+export * from './useArtistCoinMessageHeader'

packages/common/src/hooks/useArtistCoinMessageHeader.ts

@@ -0,0 +1,44 @@
+import { ChatBlastAudience } from '@audius/sdk'
+
+import { useArtistCoin } from '~/api/tan-query/coins/useArtistCoin'
+import { ID } from '~/models'
+import { getTokenRegistry } from '~/services/tokens/TokenRegistry'
+
+import { FeatureFlags } from '../services'
+
+import { useFeatureFlag } from './useFeatureFlag'
+
+export const useArtistCoinMessageHeader = ({
+ userId,
+ audience
+}: {
+ userId: ID
+ audience?: ChatBlastAudience
+}) => {
+ const { isEnabled: isArtistCoinEnabled } = useFeatureFlag(
+ FeatureFlags.ARTIST_COINS
+ )
+
+ const { data: coins } = useArtistCoin({ owner_id: [userId] })
+
+ if (
+ !isArtistCoinEnabled ||
+ !audience ||
+ audience !== ChatBlastAudience.COIN_HOLDERS
+ ) {
+ return null
+ }
+
+ let artistCoinSymbol
+ let artistCoin
+ if (!!coins && coins.length > 0) {
+ artistCoin = coins[0]
+ if (artistCoin.mint) {
+ const tokenRegistry = getTokenRegistry()
+ const token = tokenRegistry.getTokenByAddress(artistCoin.mint)
+ artistCoinSymbol = token?.symbol
+ }
+ }
+
+ return artistCoinSymbol
+}

packages/mobile/src/screens/chat-screen/ArtistCoinHeader.tsx

@@ -0,0 +1,56 @@
+import { useArtistCoinMessageHeader } from '@audius/common/hooks'
+import { walletMessages } from '@audius/common/messages'
+import type { ID } from '@audius/common/models'
+import type { ChatBlastAudience } from '@audius/sdk'
+import { Platform } from 'react-native'
+
+import { Flex, IconTokenBonk, Text } from '@audius/harmony-native'
+
+const messages = {
+ membersOnly: 'Members Only'
+}
+
+export const ArtistCoinHeader = ({
+ userId,
+ audience
+}: {
+ userId: ID
+ audience?: ChatBlastAudience
+}) => {
+ const artistCoinSymbol = useArtistCoinMessageHeader({
+ userId,
+ audience
+ })
+
+ if (!artistCoinSymbol) return null
+
+ return (
+ <Flex
+ row
+ ph='l'
+ pv='xs'
+ gap='m'
+ alignItems='center'
+ justifyContent='space-between'
+ backgroundColor='surface1'
+ borderBottom='default'
+ >
+ <Flex row gap='xs' alignItems='center'>
+ {/* TODO: Lookup artist coin icon from TOKENS */}
+ <IconTokenBonk size='xs' />
+ {/* Alignment bug for label text variant on iOS */}
+ <Flex mt={Platform.OS === 'ios' ? '2xs' : 'none'}>
+ <Text variant='label' size='s'>
+ {walletMessages.dollarSign}
+ {artistCoinSymbol}
+ </Text>
+ </Flex>
+ </Flex>
+ <Flex mt={Platform.OS === 'ios' ? '2xs' : 'none'}>
+ <Text variant='label' size='s' color='accent'>
+ {messages.membersOnly}
+ </Text>
+ </Flex>
+ </Flex>
+ )
+}

packages/mobile/src/screens/chat-screen/ChatMessageListItem.tsx

@@ -1,9 +1,7 @@
 import { memo, useCallback, useState } from 'react'
 
 import { useCurrentUserId } from '@audius/common/api'
-import { useFeatureFlag } from '@audius/common/hooks'
 import { Status } from '@audius/common/models'
-import { FeatureFlags } from '@audius/common/services'
 import { chatSelectors } from '@audius/common/store'
 import {
  formatMessageDate,
@@ -15,10 +13,10 @@ import type { ReactionTypes, ChatMessageReaction } from '@audius/sdk'
 import { css } from '@emotion/native'
 import { find } from 'linkifyjs'
 import type { ViewStyle, StyleProp } from 'react-native'
-import { Dimensions, Keyboard, Platform } from 'react-native'
+import { Dimensions, Keyboard } from 'react-native'
 import { useSelector } from 'react-redux'
 
-import { Flex, IconTokenBonk, spacing, Text } from '@audius/harmony-native'
+import { Flex, spacing, Text } from '@audius/harmony-native'
 import ChatTail from 'app/assets/images/ChatTail.svg'
 import { Pressable, UserGeneratedText } from 'app/components/core'
 import { makeStyles } from 'app/styles'
@@ -27,6 +25,7 @@ import { zIndex } from 'app/utils/zIndex'
 
 import { reactionMap } from '../notifications-screen/Reaction'
 
+import { ArtistCoinHeader } from './ArtistCoinHeader'
 import { ChatMessagePlaylist } from './ChatMessagePlaylist'
 import { ChatMessageTrack } from './ChatMessageTrack'
 import { LinkPreview } from './LinkPreview'
@@ -37,10 +36,6 @@ const { isIdEqualToReactionsPopupMessageId, getChatMessageById } = chatSelectors
 
 const TAIL_HORIZONTAL_OFFSET = 7
 
-const messages = {
- membersOnly: 'Members Only'
-}
-
 const useStyles = makeStyles(({ spacing, palette, typography }) => ({
  bubble: {
  marginTop: spacing(2),
@@ -169,9 +164,6 @@ export const ChatMessageListItem = memo(function ChatMessageListItem(
  } = props
  const styles = useStyles()
  const { data: userId } = useCurrentUserId()
- const { isEnabled: isArtistCoinEnabled } = useFeatureFlag(
- FeatureFlags.ARTIST_COINS
- )
  const message = useSelector((state) =>
  getChatMessageById(state, chatId, messageId)
  )
@@ -263,32 +255,11 @@ export const ChatMessageListItem = memo(function ChatMessageListItem(
  itemsRef ? (el) => (itemsRef.current[messageId] = el) : null
  }
  >
- {isArtistCoinEnabled ? (
- <Flex
- row
- ph='l'
- pv='xs'
- gap='m'
- alignItems='center'
- justifyContent='space-between'
- backgroundColor='surface1'
- borderBottom='default'
- >
- <Flex row gap='xs' alignItems='center'>
- <IconTokenBonk size='xs' />
- {/* Alignment bug for label text variant on iOS */}
- <Flex mt={Platform.OS === 'ios' ? '2xs' : 'none'}>
- <Text variant='label' size='s'>
- $Bonk
- </Text>
- </Flex>
- </Flex>
- <Flex mt={Platform.OS === 'ios' ? '2xs' : 'none'}>
- <Text variant='label' size='s' color='accent'>
- {messages.membersOnly}
- </Text>
- </Flex>
- </Flex>
+ {senderUserId ? (
+ <ArtistCoinHeader
+ userId={senderUserId}
+ audience={message?.audience}
+ />
  ) : null}
  {isCollection ? (
  <ChatMessagePlaylist

packages/sdk/src/sdk/api/chats/ChatsApi.ts

@@ -800,7 +800,8 @@ export class ChatsApi
  sender_user_id: encodedSenderId,
  created_at: blast.created_at,
  reactions: [],
- is_plaintext: true
+ is_plaintext: true,
+ audience: blast.audience
  }
  })
  }
@@ -882,7 +883,8 @@ export class ChatsApi
  sender_user_id: data.metadata.senderUserId,
  created_at: data.metadata.timestamp,
  reactions: [],
- is_plaintext: !!data.rpc.params.is_plaintext
+ is_plaintext: !!data.rpc.params.is_plaintext,
+ audience: data.rpc.params.audience
  }
  })
  } else if (data.rpc.method === 'chat.react') {
@@ -908,7 +910,8 @@ export class ChatsApi
  sender_user_id: data.metadata.senderUserId,
  created_at: data.metadata.timestamp,
  reactions: [],
- is_plaintext: true
+ is_plaintext: true,
+ audience: data.rpc.params.audience
  }
  })
  }

packages/sdk/src/sdk/api/chats/serverTypes.ts

@@ -55,6 +55,7 @@ export type ChatMessageRPC = {
  message: string
  parent_message_id?: string
  is_plaintext?: boolean
+ audience?: ChatBlastAudience
  }
 }
 
@@ -159,6 +160,7 @@ export type ChatMessage = {
  created_at: string
  message: string
  is_plaintext: boolean
+ audience?: ChatBlastAudience
  reactions: ChatMessageReaction[]
 }
 

packages/web/src/pages/chat-page/components/ArtistCoinHeader.tsx

@@ -0,0 +1,51 @@
+import { useArtistCoinMessageHeader } from '@audius/common/hooks'
+import { walletMessages } from '@audius/common/messages'
+import { ID } from '@audius/common/models'
+import { Flex, Text } from '@audius/harmony'
+import { ChatBlastAudience } from '@audius/sdk'
+
+import { TOKENS } from 'components/buy-sell-modal/constants'
+
+const messages = {
+ membersOnly: 'Members Only'
+}
+
+export const ArtistCoinHeader = ({
+ userId,
+ audience
+}: {
+ userId: ID
+ audience?: ChatBlastAudience
+}) => {
+ const artistCoinSymbol = useArtistCoinMessageHeader({
+ userId,
+ audience
+ })
+
+ if (!artistCoinSymbol) return null
+
+ const ArtistCoinIcon = TOKENS[artistCoinSymbol]?.icon
+
+ return (
+ <Flex
+ ph='l'
+ pv='xs'
+ gap='m'
+ justifyContent='space-between'
+ alignItems='center'
+ backgroundColor='surface1'
+ borderBottom='default'
+ >
+ <Flex gap='xs' alignItems='center'>
+ {ArtistCoinIcon ? <ArtistCoinIcon size='xs' /> : null}
+ <Text variant='label' size='s'>
+ {walletMessages.dollarSign}
+ {artistCoinSymbol}
+ </Text>
+ </Flex>
+ <Text variant='label' size='s' color='accent'>
+ {messages.membersOnly}
+ </Text>
+ </Flex>
+ )
+}

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

@@ -0,0 +1,41 @@
+import { encodeHashId } from '@audius/sdk'
+import { useQuery } from '@tanstack/react-query'
+
+import { ID } from '~/models'
+
+import { QUERY_KEYS } from '../queryKeys'
+
+export type ArtistCoin = {
+ mint: string
+ owner_id: string
+}
+
+export type UseArtistCoinParams = {
+ mint?: string[]
+ owner_id?: ID[]
+}
+
+// TODO: PE-6542 Replace this with sdk call
+export const useArtistCoin = (params: UseArtistCoinParams = {}) => {
+ return useQuery({
+ queryKey: [QUERY_KEYS.artistCoins, params],
+ queryFn: async () => {
+ const searchParams = new URLSearchParams()
+ if (params.mint) {
+ params.mint.forEach((m) => searchParams.append('mint', m))
+ }
+ if (params.owner_id) {
+ params.owner_id.forEach((id) => {
+ const encodedId = encodeHashId(id)
+ if (encodedId) {
+ searchParams.append('owner_id', encodedId)
+ }
+ })
+ }
+ const res = await fetch(`https://api.audius.co/v1/coins?${searchParams}`)
+ if (!res.ok) throw new Error('Failed to fetch coins')
+ const data = await res.json()
+ return data.coins as ArtistCoin[]
+ }
+ })
+}

packages/common/src/api/tan-query/queryKeys.ts

@@ -104,5 +104,6 @@ export const QUERY_KEYS = {
  entityReaction: 'entityReaction',
  feelingLuckyTracks: 'feelingLuckyTracks',
  recentlyPlayedTracks: 'recentlyPlayedTracks',
- recentlyCommentedTracks: 'recentlyCommentedTracks'
+ recentlyCommentedTracks: 'recentlyCommentedTracks',
+ artistCoins: 'artistCoins'
 } as const

packages/common/src/hooks/index.ts

@@ -49,3 +49,4 @@ export * from './useIsArtist'
 export * from './useAnalytics'
 export * from './useBuySellAnalytics'
 export * from './useShareAction'
+export * from './useArtistCoinMessageHeader'

packages/common/src/hooks/useArtistCoinMessageHeader.ts

@@ -0,0 +1,44 @@
+import { ChatBlastAudience } from '@audius/sdk'
+
+import { useArtistCoin } from '~/api/tan-query/coins/useArtistCoin'
+import { ID } from '~/models'
+import { getTokenRegistry } from '~/services/tokens/TokenRegistry'
+
+import { FeatureFlags } from '../services'
+
+import { useFeatureFlag } from './useFeatureFlag'
+
+export const useArtistCoinMessageHeader = ({
+ userId,
+ audience
+}: {
+ userId: ID
+ audience?: ChatBlastAudience
+}) => {
+ const { isEnabled: isArtistCoinEnabled } = useFeatureFlag(
+ FeatureFlags.ARTIST_COINS
+ )
+
+ const { data: coins } = useArtistCoin({ owner_id: [userId] })
+
+ if (
+ !isArtistCoinEnabled ||
+ !audience ||
+ audience !== ChatBlastAudience.COIN_HOLDERS
+ ) {
+ return null
+ }
+
+ let artistCoinSymbol
+ let artistCoin
+ if (!!coins && coins.length > 0) {
+ artistCoin = coins[0]
+ if (artistCoin.mint) {
+ const tokenRegistry = getTokenRegistry()
+ const token = tokenRegistry.getTokenByAddress(artistCoin.mint)
+ artistCoinSymbol = token?.symbol
+ }
+ }
+
+ return artistCoinSymbol
+}

packages/mobile/src/screens/chat-screen/ArtistCoinHeader.tsx

@@ -0,0 +1,56 @@
+import { useArtistCoinMessageHeader } from '@audius/common/hooks'
+import { walletMessages } from '@audius/common/messages'
+import type { ID } from '@audius/common/models'
+import type { ChatBlastAudience } from '@audius/sdk'
+import { Platform } from 'react-native'
+
+import { Flex, IconTokenBonk, Text } from '@audius/harmony-native'
+
+const messages = {
+ membersOnly: 'Members Only'
+}
+
+export const ArtistCoinHeader = ({
+ userId,
+ audience
+}: {
+ userId: ID
+ audience?: ChatBlastAudience
+}) => {
+ const artistCoinSymbol = useArtistCoinMessageHeader({
+ userId,
+ audience
+ })
+
+ if (!artistCoinSymbol) return null
+
+ return (
+ <Flex
+ row
+ ph='l'
+ pv='xs'
+ gap='m'
+ alignItems='center'
+ justifyContent='space-between'
+ backgroundColor='surface1'
+ borderBottom='default'
+ >
+ <Flex row gap='xs' alignItems='center'>
+ {/* TODO: Lookup artist coin icon from TOKENS */}
+ <IconTokenBonk size='xs' />
+ {/* Alignment bug for label text variant on iOS */}
+ <Flex mt={Platform.OS === 'ios' ? '2xs' : 'none'}>
+ <Text variant='label' size='s'>
+ {walletMessages.dollarSign}
+ {artistCoinSymbol}
+ </Text>
+ </Flex>
+ </Flex>
+ <Flex mt={Platform.OS === 'ios' ? '2xs' : 'none'}>
+ <Text variant='label' size='s' color='accent'>
+ {messages.membersOnly}
+ </Text>
+ </Flex>
+ </Flex>
+ )
+}

packages/mobile/src/screens/chat-screen/ChatMessageListItem.tsx

@@ -1,9 +1,7 @@
 import { memo, useCallback, useState } from 'react'
 
 import { useCurrentUserId } from '@audius/common/api'
-import { useFeatureFlag } from '@audius/common/hooks'
 import { Status } from '@audius/common/models'
-import { FeatureFlags } from '@audius/common/services'
 import { chatSelectors } from '@audius/common/store'
 import {
  formatMessageDate,
@@ -15,10 +13,10 @@ import type { ReactionTypes, ChatMessageReaction } from '@audius/sdk'
 import { css } from '@emotion/native'
 import { find } from 'linkifyjs'
 import type { ViewStyle, StyleProp } from 'react-native'
-import { Dimensions, Keyboard, Platform } from 'react-native'
+import { Dimensions, Keyboard } from 'react-native'
 import { useSelector } from 'react-redux'
 
-import { Flex, IconTokenBonk, spacing, Text } from '@audius/harmony-native'
+import { Flex, spacing, Text } from '@audius/harmony-native'
 import ChatTail from 'app/assets/images/ChatTail.svg'
 import { Pressable, UserGeneratedText } from 'app/components/core'
 import { makeStyles } from 'app/styles'
@@ -27,6 +25,7 @@ import { zIndex } from 'app/utils/zIndex'
 
 import { reactionMap } from '../notifications-screen/Reaction'
 
+import { ArtistCoinHeader } from './ArtistCoinHeader'
 import { ChatMessagePlaylist } from './ChatMessagePlaylist'
 import { ChatMessageTrack } from './ChatMessageTrack'
 import { LinkPreview } from './LinkPreview'
@@ -37,10 +36,6 @@ const { isIdEqualToReactionsPopupMessageId, getChatMessageById } = chatSelectors
 
 const TAIL_HORIZONTAL_OFFSET = 7
 
-const messages = {
- membersOnly: 'Members Only'
-}
-
 const useStyles = makeStyles(({ spacing, palette, typography }) => ({
  bubble: {
  marginTop: spacing(2),
@@ -169,9 +164,6 @@ export const ChatMessageListItem = memo(function ChatMessageListItem(
  } = props
  const styles = useStyles()
  const { data: userId } = useCurrentUserId()
- const { isEnabled: isArtistCoinEnabled } = useFeatureFlag(
- FeatureFlags.ARTIST_COINS
- )
  const message = useSelector((state) =>
  getChatMessageById(state, chatId, messageId)
  )
@@ -263,32 +255,11 @@ export const ChatMessageListItem = memo(function ChatMessageListItem(
  itemsRef ? (el) => (itemsRef.current[messageId] = el) : null
  }
  >
- {isArtistCoinEnabled ? (
- <Flex
- row
- ph='l'
- pv='xs'
- gap='m'
- alignItems='center'
- justifyContent='space-between'
- backgroundColor='surface1'
- borderBottom='default'
- >
- <Flex row gap='xs' alignItems='center'>
- <IconTokenBonk size='xs' />
- {/* Alignment bug for label text variant on iOS */}
- <Flex mt={Platform.OS === 'ios' ? '2xs' : 'none'}>
- <Text variant='label' size='s'>
- $Bonk
- </Text>
- </Flex>
- </Flex>
- <Flex mt={Platform.OS === 'ios' ? '2xs' : 'none'}>
- <Text variant='label' size='s' color='accent'>
- {messages.membersOnly}
- </Text>
- </Flex>
- </Flex>
+ {senderUserId ? (
+ <ArtistCoinHeader
+ userId={senderUserId}
+ audience={message?.audience}
+ />
  ) : null}
  {isCollection ? (
  <ChatMessagePlaylist

packages/sdk/src/sdk/api/chats/ChatsApi.ts

@@ -800,7 +800,8 @@ export class ChatsApi
  sender_user_id: encodedSenderId,
  created_at: blast.created_at,
  reactions: [],
- is_plaintext: true
+ is_plaintext: true,
+ audience: blast.audience
  }
  })
  }
@@ -882,7 +883,8 @@ export class ChatsApi
  sender_user_id: data.metadata.senderUserId,
  created_at: data.metadata.timestamp,
  reactions: [],
- is_plaintext: !!data.rpc.params.is_plaintext
+ is_plaintext: !!data.rpc.params.is_plaintext,
+ audience: data.rpc.params.audience
  }
  })
  } else if (data.rpc.method === 'chat.react') {
@@ -908,7 +910,8 @@ export class ChatsApi
  sender_user_id: data.metadata.senderUserId,
  created_at: data.metadata.timestamp,
  reactions: [],
- is_plaintext: true
+ is_plaintext: true,
+ audience: data.rpc.params.audience
  }
  })
  }

packages/sdk/src/sdk/api/chats/serverTypes.ts

@@ -55,6 +55,7 @@ export type ChatMessageRPC = {
  message: string
  parent_message_id?: string
  is_plaintext?: boolean
+ audience?: ChatBlastAudience
  }
 }
 
@@ -159,6 +160,7 @@ export type ChatMessage = {
  created_at: string
  message: string
  is_plaintext: boolean
+ audience?: ChatBlastAudience
  reactions: ChatMessageReaction[]
 }
 

packages/web/src/pages/chat-page/components/ArtistCoinHeader.tsx

@@ -0,0 +1,51 @@
+import { useArtistCoinMessageHeader } from '@audius/common/hooks'
+import { walletMessages } from '@audius/common/messages'
+import { ID } from '@audius/common/models'
+import { Flex, Text } from '@audius/harmony'
+import { ChatBlastAudience } from '@audius/sdk'
+
+import { TOKENS } from 'components/buy-sell-modal/constants'
+
+const messages = {
+ membersOnly: 'Members Only'
+}
+
+export const ArtistCoinHeader = ({
+ userId,
+ audience
+}: {
+ userId: ID
+ audience?: ChatBlastAudience
+}) => {
+ const artistCoinSymbol = useArtistCoinMessageHeader({
+ userId,
+ audience
+ })
+
+ if (!artistCoinSymbol) return null
+
+ const ArtistCoinIcon = TOKENS[artistCoinSymbol]?.icon
+
+ return (
+ <Flex
+ ph='l'
+ pv='xs'
+ gap='m'
+ justifyContent='space-between'
+ alignItems='center'
+ backgroundColor='surface1'
+ borderBottom='default'
+ >
+ <Flex gap='xs' alignItems='center'>
+ {ArtistCoinIcon ? <ArtistCoinIcon size='xs' /> : null}
+ <Text variant='label' size='s'>
+ {walletMessages.dollarSign}
+ {artistCoinSymbol}
+ </Text>
+ </Flex>
+ <Text variant='label' size='s' color='accent'>
+ {messages.membersOnly}
+ </Text>
+ </Flex>
+ )
+}

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

@@ -0,0 +1,41 @@
+import { encodeHashId } from '@audius/sdk'
+import { useQuery } from '@tanstack/react-query'
+
+import { ID } from '~/models'
+
+import { QUERY_KEYS } from '../queryKeys'
+
+export type ArtistCoin = {
+ mint: string
+ owner_id: string
+}
+
+export type UseArtistCoinParams = {
+ mint?: string[]
+ owner_id?: ID[]
+}
+
+// TODO: PE-6542 Replace this with sdk call
+export const useArtistCoin = (params: UseArtistCoinParams = {}) => {
+ return useQuery({
+ queryKey: [QUERY_KEYS.artistCoins, params],
+ queryFn: async () => {
+ const searchParams = new URLSearchParams()
+ if (params.mint) {
+ params.mint.forEach((m) => searchParams.append('mint', m))
+ }
+ if (params.owner_id) {
+ params.owner_id.forEach((id) => {
+ const encodedId = encodeHashId(id)
+ if (encodedId) {
+ searchParams.append('owner_id', encodedId)
+ }
+ })
+ }
+ const res = await fetch(`https://api.audius.co/v1/coins?${searchParams}`)
+ if (!res.ok) throw new Error('Failed to fetch coins')
+ const data = await res.json()
+ return data.coins as ArtistCoin[]
+ }
+ })
+}

packages/common/src/api/tan-query/queryKeys.ts

@@ -104,5 +104,6 @@ export const QUERY_KEYS = {
  entityReaction: 'entityReaction',
  feelingLuckyTracks: 'feelingLuckyTracks',
  recentlyPlayedTracks: 'recentlyPlayedTracks',
- recentlyCommentedTracks: 'recentlyCommentedTracks'
+ recentlyCommentedTracks: 'recentlyCommentedTracks',
+ artistCoins: 'artistCoins'
 } as const

packages/common/src/hooks/index.ts

@@ -49,3 +49,4 @@ export * from './useIsArtist'
 export * from './useAnalytics'
 export * from './useBuySellAnalytics'
 export * from './useShareAction'
+export * from './useArtistCoinMessageHeader'

packages/common/src/hooks/useArtistCoinMessageHeader.ts

@@ -0,0 +1,44 @@
+import { ChatBlastAudience } from '@audius/sdk'
+
+import { useArtistCoin } from '~/api/tan-query/coins/useArtistCoin'
+import { ID } from '~/models'
+import { getTokenRegistry } from '~/services/tokens/TokenRegistry'
+
+import { FeatureFlags } from '../services'
+
+import { useFeatureFlag } from './useFeatureFlag'
+
+export const useArtistCoinMessageHeader = ({
+ userId,
+ audience
+}: {
+ userId: ID
+ audience?: ChatBlastAudience
+}) => {
+ const { isEnabled: isArtistCoinEnabled } = useFeatureFlag(
+ FeatureFlags.ARTIST_COINS
+ )
+
+ const { data: coins } = useArtistCoin({ owner_id: [userId] })
+
+ if (
+ !isArtistCoinEnabled ||
+ !audience ||
+ audience !== ChatBlastAudience.COIN_HOLDERS
+ ) {
+ return null
+ }
+
+ let artistCoinSymbol
+ let artistCoin
+ if (!!coins && coins.length > 0) {
+ artistCoin = coins[0]
+ if (artistCoin.mint) {
+ const tokenRegistry = getTokenRegistry()
+ const token = tokenRegistry.getTokenByAddress(artistCoin.mint)
+ artistCoinSymbol = token?.symbol
+ }
+ }
+
+ return artistCoinSymbol
+}

packages/mobile/src/screens/chat-screen/ArtistCoinHeader.tsx

@@ -0,0 +1,56 @@
+import { useArtistCoinMessageHeader } from '@audius/common/hooks'
+import { walletMessages } from '@audius/common/messages'
+import type { ID } from '@audius/common/models'
+import type { ChatBlastAudience } from '@audius/sdk'
+import { Platform } from 'react-native'
+
+import { Flex, IconTokenBonk, Text } from '@audius/harmony-native'
+
+const messages = {
+ membersOnly: 'Members Only'
+}
+
+export const ArtistCoinHeader = ({
+ userId,
+ audience
+}: {
+ userId: ID
+ audience?: ChatBlastAudience
+}) => {
+ const artistCoinSymbol = useArtistCoinMessageHeader({
+ userId,
+ audience
+ })
+
+ if (!artistCoinSymbol) return null
+
+ return (
+ <Flex
+ row
+ ph='l'
+ pv='xs'
+ gap='m'
+ alignItems='center'
+ justifyContent='space-between'
+ backgroundColor='surface1'
+ borderBottom='default'
+ >
+ <Flex row gap='xs' alignItems='center'>
+ {/* TODO: Lookup artist coin icon from TOKENS */}
+ <IconTokenBonk size='xs' />
+ {/* Alignment bug for label text variant on iOS */}
+ <Flex mt={Platform.OS === 'ios' ? '2xs' : 'none'}>
+ <Text variant='label' size='s'>
+ {walletMessages.dollarSign}
+ {artistCoinSymbol}
+ </Text>
+ </Flex>
+ </Flex>
+ <Flex mt={Platform.OS === 'ios' ? '2xs' : 'none'}>
+ <Text variant='label' size='s' color='accent'>
+ {messages.membersOnly}
+ </Text>
+ </Flex>
+ </Flex>
+ )
+}

packages/mobile/src/screens/chat-screen/ChatMessageListItem.tsx

@@ -1,9 +1,7 @@
 import { memo, useCallback, useState } from 'react'
 
 import { useCurrentUserId } from '@audius/common/api'
-import { useFeatureFlag } from '@audius/common/hooks'
 import { Status } from '@audius/common/models'
-import { FeatureFlags } from '@audius/common/services'
 import { chatSelectors } from '@audius/common/store'
 import {
  formatMessageDate,
@@ -15,10 +13,10 @@ import type { ReactionTypes, ChatMessageReaction } from '@audius/sdk'
 import { css } from '@emotion/native'
 import { find } from 'linkifyjs'
 import type { ViewStyle, StyleProp } from 'react-native'
-import { Dimensions, Keyboard, Platform } from 'react-native'
+import { Dimensions, Keyboard } from 'react-native'
 import { useSelector } from 'react-redux'
 
-import { Flex, IconTokenBonk, spacing, Text } from '@audius/harmony-native'
+import { Flex, spacing, Text } from '@audius/harmony-native'
 import ChatTail from 'app/assets/images/ChatTail.svg'
 import { Pressable, UserGeneratedText } from 'app/components/core'
 import { makeStyles } from 'app/styles'
@@ -27,6 +25,7 @@ import { zIndex } from 'app/utils/zIndex'
 
 import { reactionMap } from '../notifications-screen/Reaction'
 
+import { ArtistCoinHeader } from './ArtistCoinHeader'
 import { ChatMessagePlaylist } from './ChatMessagePlaylist'
 import { ChatMessageTrack } from './ChatMessageTrack'
 import { LinkPreview } from './LinkPreview'
@@ -37,10 +36,6 @@ const { isIdEqualToReactionsPopupMessageId, getChatMessageById } = chatSelectors
 
 const TAIL_HORIZONTAL_OFFSET = 7
 
-const messages = {
- membersOnly: 'Members Only'
-}
-
 const useStyles = makeStyles(({ spacing, palette, typography }) => ({
  bubble: {
  marginTop: spacing(2),
@@ -169,9 +164,6 @@ export const ChatMessageListItem = memo(function ChatMessageListItem(
  } = props
  const styles = useStyles()
  const { data: userId } = useCurrentUserId()
- const { isEnabled: isArtistCoinEnabled } = useFeatureFlag(
- FeatureFlags.ARTIST_COINS
- )
  const message = useSelector((state) =>
  getChatMessageById(state, chatId, messageId)
  )
@@ -263,32 +255,11 @@ export const ChatMessageListItem = memo(function ChatMessageListItem(
  itemsRef ? (el) => (itemsRef.current[messageId] = el) : null
  }
  >
- {isArtistCoinEnabled ? (
- <Flex
- row
- ph='l'
- pv='xs'
- gap='m'
- alignItems='center'
- justifyContent='space-between'
- backgroundColor='surface1'
- borderBottom='default'
- >
- <Flex row gap='xs' alignItems='center'>
- <IconTokenBonk size='xs' />
- {/* Alignment bug for label text variant on iOS */}
- <Flex mt={Platform.OS === 'ios' ? '2xs' : 'none'}>
- <Text variant='label' size='s'>
- $Bonk
- </Text>
- </Flex>
- </Flex>
- <Flex mt={Platform.OS === 'ios' ? '2xs' : 'none'}>
- <Text variant='label' size='s' color='accent'>
- {messages.membersOnly}
- </Text>
- </Flex>
- </Flex>
+ {senderUserId ? (
+ <ArtistCoinHeader
+ userId={senderUserId}
+ audience={message?.audience}
+ />
  ) : null}
  {isCollection ? (
  <ChatMessagePlaylist

packages/sdk/src/sdk/api/chats/ChatsApi.ts

@@ -800,7 +800,8 @@ export class ChatsApi
  sender_user_id: encodedSenderId,
  created_at: blast.created_at,
  reactions: [],
- is_plaintext: true
+ is_plaintext: true,
+ audience: blast.audience
  }
  })
  }
@@ -882,7 +883,8 @@ export class ChatsApi
  sender_user_id: data.metadata.senderUserId,
  created_at: data.metadata.timestamp,
  reactions: [],
- is_plaintext: !!data.rpc.params.is_plaintext
+ is_plaintext: !!data.rpc.params.is_plaintext,
+ audience: data.rpc.params.audience
  }
  })
  } else if (data.rpc.method === 'chat.react') {
@@ -908,7 +910,8 @@ export class ChatsApi
  sender_user_id: data.metadata.senderUserId,
  created_at: data.metadata.timestamp,
  reactions: [],
- is_plaintext: true
+ is_plaintext: true,
+ audience: data.rpc.params.audience
  }
  })
  }

packages/sdk/src/sdk/api/chats/serverTypes.ts

@@ -55,6 +55,7 @@ export type ChatMessageRPC = {
  message: string
  parent_message_id?: string
  is_plaintext?: boolean
+ audience?: ChatBlastAudience
  }
 }
 
@@ -159,6 +160,7 @@ export type ChatMessage = {
  created_at: string
  message: string
  is_plaintext: boolean
+ audience?: ChatBlastAudience
  reactions: ChatMessageReaction[]
 }
 

packages/web/src/pages/chat-page/components/ArtistCoinHeader.tsx

@@ -0,0 +1,51 @@
+import { useArtistCoinMessageHeader } from '@audius/common/hooks'
+import { walletMessages } from '@audius/common/messages'
+import { ID } from '@audius/common/models'
+import { Flex, Text } from '@audius/harmony'
+import { ChatBlastAudience } from '@audius/sdk'
+
+import { TOKENS } from 'components/buy-sell-modal/constants'
+
+const messages = {
+ membersOnly: 'Members Only'
+}
+
+export const ArtistCoinHeader = ({
+ userId,
+ audience
+}: {
+ userId: ID
+ audience?: ChatBlastAudience
+}) => {
+ const artistCoinSymbol = useArtistCoinMessageHeader({
+ userId,
+ audience
+ })
+
+ if (!artistCoinSymbol) return null
+
+ const ArtistCoinIcon = TOKENS[artistCoinSymbol]?.icon
+
+ return (
+ <Flex
+ ph='l'
+ pv='xs'
+ gap='m'
+ justifyContent='space-between'
+ alignItems='center'
+ backgroundColor='surface1'
+ borderBottom='default'
+ >
+ <Flex gap='xs' alignItems='center'>
+ {ArtistCoinIcon ? <ArtistCoinIcon size='xs' /> : null}
+ <Text variant='label' size='s'>
+ {walletMessages.dollarSign}
+ {artistCoinSymbol}
+ </Text>
+ </Flex>
+ <Text variant='label' size='s' color='accent'>
+ {messages.membersOnly}
+ </Text>
+ </Flex>
+ )
+}

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

@@ -0,0 +1,41 @@
+import { encodeHashId } from '@audius/sdk'
+import { useQuery } from '@tanstack/react-query'
+
+import { ID } from '~/models'
+
+import { QUERY_KEYS } from '../queryKeys'
+
+export type ArtistCoin = {
+ mint: string
+ owner_id: string
+}
+
+export type UseArtistCoinParams = {
+ mint?: string[]
+ owner_id?: ID[]
+}
+
+// TODO: PE-6542 Replace this with sdk call
+export const useArtistCoin = (params: UseArtistCoinParams = {}) => {
+ return useQuery({
+ queryKey: [QUERY_KEYS.artistCoins, params],
+ queryFn: async () => {
+ const searchParams = new URLSearchParams()
+ if (params.mint) {
+ params.mint.forEach((m) => searchParams.append('mint', m))
+ }
+ if (params.owner_id) {
+ params.owner_id.forEach((id) => {
+ const encodedId = encodeHashId(id)
+ if (encodedId) {
+ searchParams.append('owner_id', encodedId)
+ }
+ })
+ }
+ const res = await fetch(`https://api.audius.co/v1/coins?${searchParams}`)
+ if (!res.ok) throw new Error('Failed to fetch coins')
+ const data = await res.json()
+ return data.coins as ArtistCoin[]
+ }
+ })
+}

packages/common/src/api/tan-query/queryKeys.ts

@@ -104,5 +104,6 @@ export const QUERY_KEYS = {
  entityReaction: 'entityReaction',
  feelingLuckyTracks: 'feelingLuckyTracks',
  recentlyPlayedTracks: 'recentlyPlayedTracks',
- recentlyCommentedTracks: 'recentlyCommentedTracks'
+ recentlyCommentedTracks: 'recentlyCommentedTracks',
+ artistCoins: 'artistCoins'
 } as const

packages/common/src/hooks/index.ts

@@ -49,3 +49,4 @@ export * from './useIsArtist'
 export * from './useAnalytics'
 export * from './useBuySellAnalytics'
 export * from './useShareAction'
+export * from './useArtistCoinMessageHeader'

packages/common/src/hooks/useArtistCoinMessageHeader.ts

@@ -0,0 +1,44 @@
+import { ChatBlastAudience } from '@audius/sdk'
+
+import { useArtistCoin } from '~/api/tan-query/coins/useArtistCoin'
+import { ID } from '~/models'
+import { getTokenRegistry } from '~/services/tokens/TokenRegistry'
+
+import { FeatureFlags } from '../services'
+
+import { useFeatureFlag } from './useFeatureFlag'
+
+export const useArtistCoinMessageHeader = ({
+ userId,
+ audience
+}: {
+ userId: ID
+ audience?: ChatBlastAudience
+}) => {
+ const { isEnabled: isArtistCoinEnabled } = useFeatureFlag(
+ FeatureFlags.ARTIST_COINS
+ )
+
+ const { data: coins } = useArtistCoin({ owner_id: [userId] })
+
+ if (
+ !isArtistCoinEnabled ||
+ !audience ||
+ audience !== ChatBlastAudience.COIN_HOLDERS
+ ) {
+ return null
+ }
+
+ let artistCoinSymbol
+ let artistCoin
+ if (!!coins && coins.length > 0) {
+ artistCoin = coins[0]
+ if (artistCoin.mint) {
+ const tokenRegistry = getTokenRegistry()
+ const token = tokenRegistry.getTokenByAddress(artistCoin.mint)
+ artistCoinSymbol = token?.symbol
+ }
+ }
+
+ return artistCoinSymbol
+}

packages/mobile/src/screens/chat-screen/ArtistCoinHeader.tsx

@@ -0,0 +1,56 @@
+import { useArtistCoinMessageHeader } from '@audius/common/hooks'
+import { walletMessages } from '@audius/common/messages'
+import type { ID } from '@audius/common/models'
+import type { ChatBlastAudience } from '@audius/sdk'
+import { Platform } from 'react-native'
+
+import { Flex, IconTokenBonk, Text } from '@audius/harmony-native'
+
+const messages = {
+ membersOnly: 'Members Only'
+}
+
+export const ArtistCoinHeader = ({
+ userId,
+ audience
+}: {
+ userId: ID
+ audience?: ChatBlastAudience
+}) => {
+ const artistCoinSymbol = useArtistCoinMessageHeader({
+ userId,
+ audience
+ })
+
+ if (!artistCoinSymbol) return null
+
+ return (
+ <Flex
+ row
+ ph='l'
+ pv='xs'
+ gap='m'
+ alignItems='center'
+ justifyContent='space-between'
+ backgroundColor='surface1'
+ borderBottom='default'
+ >
+ <Flex row gap='xs' alignItems='center'>
+ {/* TODO: Lookup artist coin icon from TOKENS */}
+ <IconTokenBonk size='xs' />
+ {/* Alignment bug for label text variant on iOS */}
+ <Flex mt={Platform.OS === 'ios' ? '2xs' : 'none'}>
+ <Text variant='label' size='s'>
+ {walletMessages.dollarSign}
+ {artistCoinSymbol}
+ </Text>
+ </Flex>
+ </Flex>
+ <Flex mt={Platform.OS === 'ios' ? '2xs' : 'none'}>
+ <Text variant='label' size='s' color='accent'>
+ {messages.membersOnly}
+ </Text>
+ </Flex>
+ </Flex>
+ )
+}

packages/mobile/src/screens/chat-screen/ChatMessageListItem.tsx

@@ -1,9 +1,7 @@
 import { memo, useCallback, useState } from 'react'
 
 import { useCurrentUserId } from '@audius/common/api'
-import { useFeatureFlag } from '@audius/common/hooks'
 import { Status } from '@audius/common/models'
-import { FeatureFlags } from '@audius/common/services'
 import { chatSelectors } from '@audius/common/store'
 import {
  formatMessageDate,
@@ -15,10 +13,10 @@ import type { ReactionTypes, ChatMessageReaction } from '@audius/sdk'
 import { css } from '@emotion/native'
 import { find } from 'linkifyjs'
 import type { ViewStyle, StyleProp } from 'react-native'
-import { Dimensions, Keyboard, Platform } from 'react-native'
+import { Dimensions, Keyboard } from 'react-native'
 import { useSelector } from 'react-redux'
 
-import { Flex, IconTokenBonk, spacing, Text } from '@audius/harmony-native'
+import { Flex, spacing, Text } from '@audius/harmony-native'
 import ChatTail from 'app/assets/images/ChatTail.svg'
 import { Pressable, UserGeneratedText } from 'app/components/core'
 import { makeStyles } from 'app/styles'
@@ -27,6 +25,7 @@ import { zIndex } from 'app/utils/zIndex'
 
 import { reactionMap } from '../notifications-screen/Reaction'
 
+import { ArtistCoinHeader } from './ArtistCoinHeader'
 import { ChatMessagePlaylist } from './ChatMessagePlaylist'
 import { ChatMessageTrack } from './ChatMessageTrack'
 import { LinkPreview } from './LinkPreview'
@@ -37,10 +36,6 @@ const { isIdEqualToReactionsPopupMessageId, getChatMessageById } = chatSelectors
 
 const TAIL_HORIZONTAL_OFFSET = 7
 
-const messages = {
- membersOnly: 'Members Only'
-}
-
 const useStyles = makeStyles(({ spacing, palette, typography }) => ({
  bubble: {
  marginTop: spacing(2),
@@ -169,9 +164,6 @@ export const ChatMessageListItem = memo(function ChatMessageListItem(
  } = props
  const styles = useStyles()
  const { data: userId } = useCurrentUserId()
- const { isEnabled: isArtistCoinEnabled } = useFeatureFlag(
- FeatureFlags.ARTIST_COINS
- )
  const message = useSelector((state) =>
  getChatMessageById(state, chatId, messageId)
  )
@@ -263,32 +255,11 @@ export const ChatMessageListItem = memo(function ChatMessageListItem(
  itemsRef ? (el) => (itemsRef.current[messageId] = el) : null
  }
  >
- {isArtistCoinEnabled ? (
- <Flex
- row
- ph='l'
- pv='xs'
- gap='m'
- alignItems='center'
- justifyContent='space-between'
- backgroundColor='surface1'
- borderBottom='default'
- >
- <Flex row gap='xs' alignItems='center'>
- <IconTokenBonk size='xs' />
- {/* Alignment bug for label text variant on iOS */}
- <Flex mt={Platform.OS === 'ios' ? '2xs' : 'none'}>
- <Text variant='label' size='s'>
- $Bonk
- </Text>
- </Flex>
- </Flex>
- <Flex mt={Platform.OS === 'ios' ? '2xs' : 'none'}>
- <Text variant='label' size='s' color='accent'>
- {messages.membersOnly}
- </Text>
- </Flex>
- </Flex>
+ {senderUserId ? (
+ <ArtistCoinHeader
+ userId={senderUserId}
+ audience={message?.audience}
+ />
  ) : null}
  {isCollection ? (
  <ChatMessagePlaylist

packages/sdk/src/sdk/api/chats/ChatsApi.ts

@@ -800,7 +800,8 @@ export class ChatsApi
  sender_user_id: encodedSenderId,
  created_at: blast.created_at,
  reactions: [],
- is_plaintext: true
+ is_plaintext: true,
+ audience: blast.audience
  }
  })
  }
@@ -882,7 +883,8 @@ export class ChatsApi
  sender_user_id: data.metadata.senderUserId,
  created_at: data.metadata.timestamp,
  reactions: [],
- is_plaintext: !!data.rpc.params.is_plaintext
+ is_plaintext: !!data.rpc.params.is_plaintext,
+ audience: data.rpc.params.audience
  }
  })
  } else if (data.rpc.method === 'chat.react') {
@@ -908,7 +910,8 @@ export class ChatsApi
  sender_user_id: data.metadata.senderUserId,
  created_at: data.metadata.timestamp,
  reactions: [],
- is_plaintext: true
+ is_plaintext: true,
+ audience: data.rpc.params.audience
  }
  })
  }

packages/sdk/src/sdk/api/chats/serverTypes.ts

@@ -55,6 +55,7 @@ export type ChatMessageRPC = {
  message: string
  parent_message_id?: string
  is_plaintext?: boolean
+ audience?: ChatBlastAudience
  }
 }
 
@@ -159,6 +160,7 @@ export type ChatMessage = {
  created_at: string
  message: string
  is_plaintext: boolean
+ audience?: ChatBlastAudience
  reactions: ChatMessageReaction[]
 }
 

packages/web/src/pages/chat-page/components/ArtistCoinHeader.tsx

@@ -0,0 +1,51 @@
+import { useArtistCoinMessageHeader } from '@audius/common/hooks'
+import { walletMessages } from '@audius/common/messages'
+import { ID } from '@audius/common/models'
+import { Flex, Text } from '@audius/harmony'
+import { ChatBlastAudience } from '@audius/sdk'
+
+import { TOKENS } from 'components/buy-sell-modal/constants'
+
+const messages = {
+ membersOnly: 'Members Only'
+}
+
+export const ArtistCoinHeader = ({
+ userId,
+ audience
+}: {
+ userId: ID
+ audience?: ChatBlastAudience
+}) => {
+ const artistCoinSymbol = useArtistCoinMessageHeader({
+ userId,
+ audience
+ })
+
+ if (!artistCoinSymbol) return null
+
+ const ArtistCoinIcon = TOKENS[artistCoinSymbol]?.icon
+
+ return (
+ <Flex
+ ph='l'
+ pv='xs'
+ gap='m'
+ justifyContent='space-between'
+ alignItems='center'
+ backgroundColor='surface1'
+ borderBottom='default'
+ >
+ <Flex gap='xs' alignItems='center'>
+ {ArtistCoinIcon ? <ArtistCoinIcon size='xs' /> : null}
+ <Text variant='label' size='s'>
+ {walletMessages.dollarSign}
+ {artistCoinSymbol}
+ </Text>
+ </Flex>
+ <Text variant='label' size='s' color='accent'>
+ {messages.membersOnly}
+ </Text>
+ </Flex>
+ )
+}

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

@@ -0,0 +1,41 @@
+import { encodeHashId } from '@audius/sdk'
+import { useQuery } from '@tanstack/react-query'
+
+import { ID } from '~/models'
+
+import { QUERY_KEYS } from '../queryKeys'
+
+export type ArtistCoin = {
+ mint: string
+ owner_id: string
+}
+
+export type UseArtistCoinParams = {
+ mint?: string[]
+ owner_id?: ID[]
+}
+
+// TODO: PE-6542 Replace this with sdk call
+export const useArtistCoin = (params: UseArtistCoinParams = {}) => {
+ return useQuery({
+ queryKey: [QUERY_KEYS.artistCoins, params],
+ queryFn: async () => {
+ const searchParams = new URLSearchParams()
+ if (params.mint) {
+ params.mint.forEach((m) => searchParams.append('mint', m))
+ }
+ if (params.owner_id) {
+ params.owner_id.forEach((id) => {
+ const encodedId = encodeHashId(id)
+ if (encodedId) {
+ searchParams.append('owner_id', encodedId)
+ }
+ })
+ }
+ const res = await fetch(`https://api.audius.co/v1/coins?${searchParams}`)
+ if (!res.ok) throw new Error('Failed to fetch coins')
+ const data = await res.json()
+ return data.coins as ArtistCoin[]
+ }
+ })
+}

packages/common/src/api/tan-query/queryKeys.ts

@@ -104,5 +104,6 @@ export const QUERY_KEYS = {
  entityReaction: 'entityReaction',
  feelingLuckyTracks: 'feelingLuckyTracks',
  recentlyPlayedTracks: 'recentlyPlayedTracks',
- recentlyCommentedTracks: 'recentlyCommentedTracks'
+ recentlyCommentedTracks: 'recentlyCommentedTracks',
+ artistCoins: 'artistCoins'
 } as const

packages/common/src/hooks/index.ts

@@ -49,3 +49,4 @@ export * from './useIsArtist'
 export * from './useAnalytics'
 export * from './useBuySellAnalytics'
 export * from './useShareAction'
+export * from './useArtistCoinMessageHeader'

packages/common/src/hooks/useArtistCoinMessageHeader.ts

@@ -0,0 +1,44 @@
+import { ChatBlastAudience } from '@audius/sdk'
+
+import { useArtistCoin } from '~/api/tan-query/coins/useArtistCoin'
+import { ID } from '~/models'
+import { getTokenRegistry } from '~/services/tokens/TokenRegistry'
+
+import { FeatureFlags } from '../services'
+
+import { useFeatureFlag } from './useFeatureFlag'
+
+export const useArtistCoinMessageHeader = ({
+ userId,
+ audience
+}: {
+ userId: ID
+ audience?: ChatBlastAudience
+}) => {
+ const { isEnabled: isArtistCoinEnabled } = useFeatureFlag(
+ FeatureFlags.ARTIST_COINS
+ )
+
+ const { data: coins } = useArtistCoin({ owner_id: [userId] })
+
+ if (
+ !isArtistCoinEnabled ||
+ !audience ||
+ audience !== ChatBlastAudience.COIN_HOLDERS
+ ) {
+ return null
+ }
+
+ let artistCoinSymbol
+ let artistCoin
+ if (!!coins && coins.length > 0) {
+ artistCoin = coins[0]
+ if (artistCoin.mint) {
+ const tokenRegistry = getTokenRegistry()
+ const token = tokenRegistry.getTokenByAddress(artistCoin.mint)
+ artistCoinSymbol = token?.symbol
+ }
+ }
+
+ return artistCoinSymbol
+}

packages/mobile/src/screens/chat-screen/ArtistCoinHeader.tsx

@@ -0,0 +1,56 @@
+import { useArtistCoinMessageHeader } from '@audius/common/hooks'
+import { walletMessages } from '@audius/common/messages'
+import type { ID } from '@audius/common/models'
+import type { ChatBlastAudience } from '@audius/sdk'
+import { Platform } from 'react-native'
+
+import { Flex, IconTokenBonk, Text } from '@audius/harmony-native'
+
+const messages = {
+ membersOnly: 'Members Only'
+}
+
+export const ArtistCoinHeader = ({
+ userId,
+ audience
+}: {
+ userId: ID
+ audience?: ChatBlastAudience
+}) => {
+ const artistCoinSymbol = useArtistCoinMessageHeader({
+ userId,
+ audience
+ })
+
+ if (!artistCoinSymbol) return null
+
+ return (
+ <Flex
+ row
+ ph='l'
+ pv='xs'
+ gap='m'
+ alignItems='center'
+ justifyContent='space-between'
+ backgroundColor='surface1'
+ borderBottom='default'
+ >
+ <Flex row gap='xs' alignItems='center'>
+ {/* TODO: Lookup artist coin icon from TOKENS */}
+ <IconTokenBonk size='xs' />
+ {/* Alignment bug for label text variant on iOS */}
+ <Flex mt={Platform.OS === 'ios' ? '2xs' : 'none'}>
+ <Text variant='label' size='s'>
+ {walletMessages.dollarSign}
+ {artistCoinSymbol}
+ </Text>
+ </Flex>
+ </Flex>
+ <Flex mt={Platform.OS === 'ios' ? '2xs' : 'none'}>
+ <Text variant='label' size='s' color='accent'>
+ {messages.membersOnly}
+ </Text>
+ </Flex>
+ </Flex>
+ )
+}

packages/mobile/src/screens/chat-screen/ChatMessageListItem.tsx

@@ -1,9 +1,7 @@
 import { memo, useCallback, useState } from 'react'
 
 import { useCurrentUserId } from '@audius/common/api'
-import { useFeatureFlag } from '@audius/common/hooks'
 import { Status } from '@audius/common/models'
-import { FeatureFlags } from '@audius/common/services'
 import { chatSelectors } from '@audius/common/store'
 import {
  formatMessageDate,
@@ -15,10 +13,10 @@ import type { ReactionTypes, ChatMessageReaction } from '@audius/sdk'
 import { css } from '@emotion/native'
 import { find } from 'linkifyjs'
 import type { ViewStyle, StyleProp } from 'react-native'
-import { Dimensions, Keyboard, Platform } from 'react-native'
+import { Dimensions, Keyboard } from 'react-native'
 import { useSelector } from 'react-redux'
 
-import { Flex, IconTokenBonk, spacing, Text } from '@audius/harmony-native'
+import { Flex, spacing, Text } from '@audius/harmony-native'
 import ChatTail from 'app/assets/images/ChatTail.svg'
 import { Pressable, UserGeneratedText } from 'app/components/core'
 import { makeStyles } from 'app/styles'
@@ -27,6 +25,7 @@ import { zIndex } from 'app/utils/zIndex'
 
 import { reactionMap } from '../notifications-screen/Reaction'
 
+import { ArtistCoinHeader } from './ArtistCoinHeader'
 import { ChatMessagePlaylist } from './ChatMessagePlaylist'
 import { ChatMessageTrack } from './ChatMessageTrack'
 import { LinkPreview } from './LinkPreview'
@@ -37,10 +36,6 @@ const { isIdEqualToReactionsPopupMessageId, getChatMessageById } = chatSelectors
 
 const TAIL_HORIZONTAL_OFFSET = 7
 
-const messages = {
- membersOnly: 'Members Only'
-}
-
 const useStyles = makeStyles(({ spacing, palette, typography }) => ({
  bubble: {
  marginTop: spacing(2),
@@ -169,9 +164,6 @@ export const ChatMessageListItem = memo(function ChatMessageListItem(
  } = props
  const styles = useStyles()
  const { data: userId } = useCurrentUserId()
- const { isEnabled: isArtistCoinEnabled } = useFeatureFlag(
- FeatureFlags.ARTIST_COINS
- )
  const message = useSelector((state) =>
  getChatMessageById(state, chatId, messageId)
  )
@@ -263,32 +255,11 @@ export const ChatMessageListItem = memo(function ChatMessageListItem(
  itemsRef ? (el) => (itemsRef.current[messageId] = el) : null
  }
  >
- {isArtistCoinEnabled ? (
- <Flex
- row
- ph='l'
- pv='xs'
- gap='m'
- alignItems='center'
- justifyContent='space-between'
- backgroundColor='surface1'
- borderBottom='default'
- >
- <Flex row gap='xs' alignItems='center'>
- <IconTokenBonk size='xs' />
- {/* Alignment bug for label text variant on iOS */}
- <Flex mt={Platform.OS === 'ios' ? '2xs' : 'none'}>
- <Text variant='label' size='s'>
- $Bonk
- </Text>
- </Flex>
- </Flex>
- <Flex mt={Platform.OS === 'ios' ? '2xs' : 'none'}>
- <Text variant='label' size='s' color='accent'>
- {messages.membersOnly}
- </Text>
- </Flex>
- </Flex>
+ {senderUserId ? (
+ <ArtistCoinHeader
+ userId={senderUserId}
+ audience={message?.audience}
+ />
  ) : null}
  {isCollection ? (
  <ChatMessagePlaylist

packages/sdk/src/sdk/api/chats/ChatsApi.ts

@@ -800,7 +800,8 @@ export class ChatsApi
  sender_user_id: encodedSenderId,
  created_at: blast.created_at,
  reactions: [],
- is_plaintext: true
+ is_plaintext: true,
+ audience: blast.audience
  }
  })
  }
@@ -882,7 +883,8 @@ export class ChatsApi
  sender_user_id: data.metadata.senderUserId,
  created_at: data.metadata.timestamp,
  reactions: [],
- is_plaintext: !!data.rpc.params.is_plaintext
+ is_plaintext: !!data.rpc.params.is_plaintext,
+ audience: data.rpc.params.audience
  }
  })
  } else if (data.rpc.method === 'chat.react') {
@@ -908,7 +910,8 @@ export class ChatsApi
  sender_user_id: data.metadata.senderUserId,
  created_at: data.metadata.timestamp,
  reactions: [],
- is_plaintext: true
+ is_plaintext: true,
+ audience: data.rpc.params.audience
  }
  })
  }

packages/sdk/src/sdk/api/chats/serverTypes.ts

@@ -55,6 +55,7 @@ export type ChatMessageRPC = {
  message: string
  parent_message_id?: string
  is_plaintext?: boolean
+ audience?: ChatBlastAudience
  }
 }
 
@@ -159,6 +160,7 @@ export type ChatMessage = {
  created_at: string
  message: string
  is_plaintext: boolean
+ audience?: ChatBlastAudience
  reactions: ChatMessageReaction[]
 }
 

packages/web/src/pages/chat-page/components/ArtistCoinHeader.tsx

@@ -0,0 +1,51 @@
+import { useArtistCoinMessageHeader } from '@audius/common/hooks'
+import { walletMessages } from '@audius/common/messages'
+import { ID } from '@audius/common/models'
+import { Flex, Text } from '@audius/harmony'
+import { ChatBlastAudience } from '@audius/sdk'
+
+import { TOKENS } from 'components/buy-sell-modal/constants'
+
+const messages = {
+ membersOnly: 'Members Only'
+}
+
+export const ArtistCoinHeader = ({
+ userId,
+ audience
+}: {
+ userId: ID
+ audience?: ChatBlastAudience
+}) => {
+ const artistCoinSymbol = useArtistCoinMessageHeader({
+ userId,
+ audience
+ })
+
+ if (!artistCoinSymbol) return null
+
+ const ArtistCoinIcon = TOKENS[artistCoinSymbol]?.icon
+
+ return (
+ <Flex
+ ph='l'
+ pv='xs'
+ gap='m'
+ justifyContent='space-between'
+ alignItems='center'
+ backgroundColor='surface1'
+ borderBottom='default'
+ >
+ <Flex gap='xs' alignItems='center'>
+ {ArtistCoinIcon ? <ArtistCoinIcon size='xs' /> : null}
+ <Text variant='label' size='s'>
+ {walletMessages.dollarSign}
+ {artistCoinSymbol}
+ </Text>
+ </Flex>
+ <Text variant='label' size='s' color='accent'>
+ {messages.membersOnly}
+ </Text>
+ </Flex>
+ )
+}

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

@@ -0,0 +1,41 @@
+import { encodeHashId } from '@audius/sdk'
+import { useQuery } from '@tanstack/react-query'
+
+import { ID } from '~/models'
+
+import { QUERY_KEYS } from '../queryKeys'
+
+export type ArtistCoin = {
+ mint: string
+ owner_id: string
+}
+
+export type UseArtistCoinParams = {
+ mint?: string[]
+ owner_id?: ID[]
+}
+
+// TODO: PE-6542 Replace this with sdk call
+export const useArtistCoin = (params: UseArtistCoinParams = {}) => {
+ return useQuery({
+ queryKey: [QUERY_KEYS.artistCoins, params],
+ queryFn: async () => {
+ const searchParams = new URLSearchParams()
+ if (params.mint) {
+ params.mint.forEach((m) => searchParams.append('mint', m))
+ }
+ if (params.owner_id) {
+ params.owner_id.forEach((id) => {
+ const encodedId = encodeHashId(id)
+ if (encodedId) {
+ searchParams.append('owner_id', encodedId)
+ }
+ })
+ }
+ const res = await fetch(`https://api.audius.co/v1/coins?${searchParams}`)
+ if (!res.ok) throw new Error('Failed to fetch coins')
+ const data = await res.json()
+ return data.coins as ArtistCoin[]
+ }
+ })
+}

packages/common/src/api/tan-query/queryKeys.ts

@@ -104,5 +104,6 @@ export const QUERY_KEYS = {
  entityReaction: 'entityReaction',
  feelingLuckyTracks: 'feelingLuckyTracks',
  recentlyPlayedTracks: 'recentlyPlayedTracks',
- recentlyCommentedTracks: 'recentlyCommentedTracks'
+ recentlyCommentedTracks: 'recentlyCommentedTracks',
+ artistCoins: 'artistCoins'
 } as const

packages/common/src/hooks/index.ts

@@ -49,3 +49,4 @@ export * from './useIsArtist'
 export * from './useAnalytics'
 export * from './useBuySellAnalytics'
 export * from './useShareAction'
+export * from './useArtistCoinMessageHeader'

packages/common/src/hooks/useArtistCoinMessageHeader.ts

@@ -0,0 +1,44 @@
+import { ChatBlastAudience } from '@audius/sdk'
+
+import { useArtistCoin } from '~/api/tan-query/coins/useArtistCoin'
+import { ID } from '~/models'
+import { getTokenRegistry } from '~/services/tokens/TokenRegistry'
+
+import { FeatureFlags } from '../services'
+
+import { useFeatureFlag } from './useFeatureFlag'
+
+export const useArtistCoinMessageHeader = ({
+ userId,
+ audience
+}: {
+ userId: ID
+ audience?: ChatBlastAudience
+}) => {
+ const { isEnabled: isArtistCoinEnabled } = useFeatureFlag(
+ FeatureFlags.ARTIST_COINS
+ )
+
+ const { data: coins } = useArtistCoin({ owner_id: [userId] })
+
+ if (
+ !isArtistCoinEnabled ||
+ !audience ||
+ audience !== ChatBlastAudience.COIN_HOLDERS
+ ) {
+ return null
+ }
+
+ let artistCoinSymbol
+ let artistCoin
+ if (!!coins && coins.length > 0) {
+ artistCoin = coins[0]
+ if (artistCoin.mint) {
+ const tokenRegistry = getTokenRegistry()
+ const token = tokenRegistry.getTokenByAddress(artistCoin.mint)
+ artistCoinSymbol = token?.symbol
+ }
+ }
+
+ return artistCoinSymbol
+}

packages/mobile/src/screens/chat-screen/ArtistCoinHeader.tsx

@@ -0,0 +1,56 @@
+import { useArtistCoinMessageHeader } from '@audius/common/hooks'
+import { walletMessages } from '@audius/common/messages'
+import type { ID } from '@audius/common/models'
+import type { ChatBlastAudience } from '@audius/sdk'
+import { Platform } from 'react-native'
+
+import { Flex, IconTokenBonk, Text } from '@audius/harmony-native'
+
+const messages = {
+ membersOnly: 'Members Only'
+}
+
+export const ArtistCoinHeader = ({
+ userId,
+ audience
+}: {
+ userId: ID
+ audience?: ChatBlastAudience
+}) => {
+ const artistCoinSymbol = useArtistCoinMessageHeader({
+ userId,
+ audience
+ })
+
+ if (!artistCoinSymbol) return null
+
+ return (
+ <Flex
+ row
+ ph='l'
+ pv='xs'
+ gap='m'
+ alignItems='center'
+ justifyContent='space-between'
+ backgroundColor='surface1'
+ borderBottom='default'
+ >
+ <Flex row gap='xs' alignItems='center'>
+ {/* TODO: Lookup artist coin icon from TOKENS */}
+ <IconTokenBonk size='xs' />
+ {/* Alignment bug for label text variant on iOS */}
+ <Flex mt={Platform.OS === 'ios' ? '2xs' : 'none'}>
+ <Text variant='label' size='s'>
+ {walletMessages.dollarSign}
+ {artistCoinSymbol}
+ </Text>
+ </Flex>
+ </Flex>
+ <Flex mt={Platform.OS === 'ios' ? '2xs' : 'none'}>
+ <Text variant='label' size='s' color='accent'>
+ {messages.membersOnly}
+ </Text>
+ </Flex>
+ </Flex>
+ )
+}

packages/mobile/src/screens/chat-screen/ChatMessageListItem.tsx

@@ -1,9 +1,7 @@
 import { memo, useCallback, useState } from 'react'
 
 import { useCurrentUserId } from '@audius/common/api'
-import { useFeatureFlag } from '@audius/common/hooks'
 import { Status } from '@audius/common/models'
-import { FeatureFlags } from '@audius/common/services'
 import { chatSelectors } from '@audius/common/store'
 import {
  formatMessageDate,
@@ -15,10 +13,10 @@ import type { ReactionTypes, ChatMessageReaction } from '@audius/sdk'
 import { css } from '@emotion/native'
 import { find } from 'linkifyjs'
 import type { ViewStyle, StyleProp } from 'react-native'
-import { Dimensions, Keyboard, Platform } from 'react-native'
+import { Dimensions, Keyboard } from 'react-native'
 import { useSelector } from 'react-redux'
 
-import { Flex, IconTokenBonk, spacing, Text } from '@audius/harmony-native'
+import { Flex, spacing, Text } from '@audius/harmony-native'
 import ChatTail from 'app/assets/images/ChatTail.svg'
 import { Pressable, UserGeneratedText } from 'app/components/core'
 import { makeStyles } from 'app/styles'
@@ -27,6 +25,7 @@ import { zIndex } from 'app/utils/zIndex'
 
 import { reactionMap } from '../notifications-screen/Reaction'
 
+import { ArtistCoinHeader } from './ArtistCoinHeader'
 import { ChatMessagePlaylist } from './ChatMessagePlaylist'
 import { ChatMessageTrack } from './ChatMessageTrack'
 import { LinkPreview } from './LinkPreview'
@@ -37,10 +36,6 @@ const { isIdEqualToReactionsPopupMessageId, getChatMessageById } = chatSelectors
 
 const TAIL_HORIZONTAL_OFFSET = 7
 
-const messages = {
- membersOnly: 'Members Only'
-}
-
 const useStyles = makeStyles(({ spacing, palette, typography }) => ({
  bubble: {
  marginTop: spacing(2),
@@ -169,9 +164,6 @@ export const ChatMessageListItem = memo(function ChatMessageListItem(
  } = props
  const styles = useStyles()
  const { data: userId } = useCurrentUserId()
- const { isEnabled: isArtistCoinEnabled } = useFeatureFlag(
- FeatureFlags.ARTIST_COINS
- )
  const message = useSelector((state) =>
  getChatMessageById(state, chatId, messageId)
  )
@@ -263,32 +255,11 @@ export const ChatMessageListItem = memo(function ChatMessageListItem(
  itemsRef ? (el) => (itemsRef.current[messageId] = el) : null
  }
  >
- {isArtistCoinEnabled ? (
- <Flex
- row
- ph='l'
- pv='xs'
- gap='m'
- alignItems='center'
- justifyContent='space-between'
- backgroundColor='surface1'
- borderBottom='default'
- >
- <Flex row gap='xs' alignItems='center'>
- <IconTokenBonk size='xs' />
- {/* Alignment bug for label text variant on iOS */}
- <Flex mt={Platform.OS === 'ios' ? '2xs' : 'none'}>
- <Text variant='label' size='s'>
- $Bonk
- </Text>
- </Flex>
- </Flex>
- <Flex mt={Platform.OS === 'ios' ? '2xs' : 'none'}>
- <Text variant='label' size='s' color='accent'>
- {messages.membersOnly}
- </Text>
- </Flex>
- </Flex>
+ {senderUserId ? (
+ <ArtistCoinHeader
+ userId={senderUserId}
+ audience={message?.audience}
+ />
  ) : null}
  {isCollection ? (
  <ChatMessagePlaylist

packages/sdk/src/sdk/api/chats/ChatsApi.ts

@@ -800,7 +800,8 @@ export class ChatsApi
  sender_user_id: encodedSenderId,
  created_at: blast.created_at,
  reactions: [],
- is_plaintext: true
+ is_plaintext: true,
+ audience: blast.audience
  }
  })
  }
@@ -882,7 +883,8 @@ export class ChatsApi
  sender_user_id: data.metadata.senderUserId,
  created_at: data.metadata.timestamp,
  reactions: [],
- is_plaintext: !!data.rpc.params.is_plaintext
+ is_plaintext: !!data.rpc.params.is_plaintext,
+ audience: data.rpc.params.audience
  }
  })
  } else if (data.rpc.method === 'chat.react') {
@@ -908,7 +910,8 @@ export class ChatsApi
  sender_user_id: data.metadata.senderUserId,
  created_at: data.metadata.timestamp,
  reactions: [],
- is_plaintext: true
+ is_plaintext: true,
+ audience: data.rpc.params.audience
  }
  })
  }

packages/sdk/src/sdk/api/chats/serverTypes.ts

@@ -55,6 +55,7 @@ export type ChatMessageRPC = {
  message: string
  parent_message_id?: string
  is_plaintext?: boolean
+ audience?: ChatBlastAudience
  }
 }
 
@@ -159,6 +160,7 @@ export type ChatMessage = {
  created_at: string
  message: string
  is_plaintext: boolean
+ audience?: ChatBlastAudience
  reactions: ChatMessageReaction[]
 }
 

packages/web/src/pages/chat-page/components/ArtistCoinHeader.tsx

@@ -0,0 +1,51 @@
+import { useArtistCoinMessageHeader } from '@audius/common/hooks'
+import { walletMessages } from '@audius/common/messages'
+import { ID } from '@audius/common/models'
+import { Flex, Text } from '@audius/harmony'
+import { ChatBlastAudience } from '@audius/sdk'
+
+import { TOKENS } from 'components/buy-sell-modal/constants'
+
+const messages = {
+ membersOnly: 'Members Only'
+}
+
+export const ArtistCoinHeader = ({
+ userId,
+ audience
+}: {
+ userId: ID
+ audience?: ChatBlastAudience
+}) => {
+ const artistCoinSymbol = useArtistCoinMessageHeader({
+ userId,
+ audience
+ })
+
+ if (!artistCoinSymbol) return null
+
+ const ArtistCoinIcon = TOKENS[artistCoinSymbol]?.icon
+
+ return (
+ <Flex
+ ph='l'
+ pv='xs'
+ gap='m'
+ justifyContent='space-between'
+ alignItems='center'
+ backgroundColor='surface1'
+ borderBottom='default'
+ >
+ <Flex gap='xs' alignItems='center'>
+ {ArtistCoinIcon ? <ArtistCoinIcon size='xs' /> : null}
+ <Text variant='label' size='s'>
+ {walletMessages.dollarSign}
+ {artistCoinSymbol}
+ </Text>
+ </Flex>
+ <Text variant='label' size='s' color='accent'>
+ {messages.membersOnly}
+ </Text>
+ </Flex>
+ )
+}

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

@@ -0,0 +1,41 @@
+import { encodeHashId } from '@audius/sdk'
+import { useQuery } from '@tanstack/react-query'
+
+import { ID } from '~/models'
+
+import { QUERY_KEYS } from '../queryKeys'
+
+export type ArtistCoin = {
+ mint: string
+ owner_id: string
+}
+
+export type UseArtistCoinParams = {
+ mint?: string[]
+ owner_id?: ID[]
+}
+
+// TODO: PE-6542 Replace this with sdk call
+export const useArtistCoin = (params: UseArtistCoinParams = {}) => {
+ return useQuery({
+ queryKey: [QUERY_KEYS.artistCoins, params],
+ queryFn: async () => {
+ const searchParams = new URLSearchParams()
+ if (params.mint) {
+ params.mint.forEach((m) => searchParams.append('mint', m))
+ }
+ if (params.owner_id) {
+ params.owner_id.forEach((id) => {
+ const encodedId = encodeHashId(id)
+ if (encodedId) {
+ searchParams.append('owner_id', encodedId)
+ }
+ })
+ }
+ const res = await fetch(`https://api.audius.co/v1/coins?${searchParams}`)
+ if (!res.ok) throw new Error('Failed to fetch coins')
+ const data = await res.json()
+ return data.coins as ArtistCoin[]
+ }
+ })
+}

packages/common/src/api/tan-query/queryKeys.ts

@@ -104,5 +104,6 @@ export const QUERY_KEYS = {
  entityReaction: 'entityReaction',
  feelingLuckyTracks: 'feelingLuckyTracks',
  recentlyPlayedTracks: 'recentlyPlayedTracks',
- recentlyCommentedTracks: 'recentlyCommentedTracks'
+ recentlyCommentedTracks: 'recentlyCommentedTracks',
+ artistCoins: 'artistCoins'
 } as const

packages/common/src/hooks/index.ts

@@ -49,3 +49,4 @@ export * from './useIsArtist'
 export * from './useAnalytics'
 export * from './useBuySellAnalytics'
 export * from './useShareAction'
+export * from './useArtistCoinMessageHeader'

packages/common/src/hooks/useArtistCoinMessageHeader.ts

@@ -0,0 +1,44 @@
+import { ChatBlastAudience } from '@audius/sdk'
+
+import { useArtistCoin } from '~/api/tan-query/coins/useArtistCoin'
+import { ID } from '~/models'
+import { getTokenRegistry } from '~/services/tokens/TokenRegistry'
+
+import { FeatureFlags } from '../services'
+
+import { useFeatureFlag } from './useFeatureFlag'
+
+export const useArtistCoinMessageHeader = ({
+ userId,
+ audience
+}: {
+ userId: ID
+ audience?: ChatBlastAudience
+}) => {
+ const { isEnabled: isArtistCoinEnabled } = useFeatureFlag(
+ FeatureFlags.ARTIST_COINS
+ )
+
+ const { data: coins } = useArtistCoin({ owner_id: [userId] })
+
+ if (
+ !isArtistCoinEnabled ||
+ !audience ||
+ audience !== ChatBlastAudience.COIN_HOLDERS
+ ) {
+ return null
+ }
+
+ let artistCoinSymbol
+ let artistCoin
+ if (!!coins && coins.length > 0) {
+ artistCoin = coins[0]
+ if (artistCoin.mint) {
+ const tokenRegistry = getTokenRegistry()
+ const token = tokenRegistry.getTokenByAddress(artistCoin.mint)
+ artistCoinSymbol = token?.symbol
+ }
+ }
+
+ return artistCoinSymbol
+}

packages/mobile/src/screens/chat-screen/ArtistCoinHeader.tsx

@@ -0,0 +1,56 @@
+import { useArtistCoinMessageHeader } from '@audius/common/hooks'
+import { walletMessages } from '@audius/common/messages'
+import type { ID } from '@audius/common/models'
+import type { ChatBlastAudience } from '@audius/sdk'
+import { Platform } from 'react-native'
+
+import { Flex, IconTokenBonk, Text } from '@audius/harmony-native'
+
+const messages = {
+ membersOnly: 'Members Only'
+}
+
+export const ArtistCoinHeader = ({
+ userId,
+ audience
+}: {
+ userId: ID
+ audience?: ChatBlastAudience
+}) => {
+ const artistCoinSymbol = useArtistCoinMessageHeader({
+ userId,
+ audience
+ })
+
+ if (!artistCoinSymbol) return null
+
+ return (
+ <Flex
+ row
+ ph='l'
+ pv='xs'
+ gap='m'
+ alignItems='center'
+ justifyContent='space-between'
+ backgroundColor='surface1'
+ borderBottom='default'
+ >
+ <Flex row gap='xs' alignItems='center'>
+ {/* TODO: Lookup artist coin icon from TOKENS */}
+ <IconTokenBonk size='xs' />
+ {/* Alignment bug for label text variant on iOS */}
+ <Flex mt={Platform.OS === 'ios' ? '2xs' : 'none'}>
+ <Text variant='label' size='s'>
+ {walletMessages.dollarSign}
+ {artistCoinSymbol}
+ </Text>
+ </Flex>
+ </Flex>
+ <Flex mt={Platform.OS === 'ios' ? '2xs' : 'none'}>
+ <Text variant='label' size='s' color='accent'>
+ {messages.membersOnly}
+ </Text>
+ </Flex>
+ </Flex>
+ )
+}

packages/mobile/src/screens/chat-screen/ChatMessageListItem.tsx

@@ -1,9 +1,7 @@
 import { memo, useCallback, useState } from 'react'
 
 import { useCurrentUserId } from '@audius/common/api'
-import { useFeatureFlag } from '@audius/common/hooks'
 import { Status } from '@audius/common/models'
-import { FeatureFlags } from '@audius/common/services'
 import { chatSelectors } from '@audius/common/store'
 import {
  formatMessageDate,
@@ -15,10 +13,10 @@ import type { ReactionTypes, ChatMessageReaction } from '@audius/sdk'
 import { css } from '@emotion/native'
 import { find } from 'linkifyjs'
 import type { ViewStyle, StyleProp } from 'react-native'
-import { Dimensions, Keyboard, Platform } from 'react-native'
+import { Dimensions, Keyboard } from 'react-native'
 import { useSelector } from 'react-redux'
 
-import { Flex, IconTokenBonk, spacing, Text } from '@audius/harmony-native'
+import { Flex, spacing, Text } from '@audius/harmony-native'
 import ChatTail from 'app/assets/images/ChatTail.svg'
 import { Pressable, UserGeneratedText } from 'app/components/core'
 import { makeStyles } from 'app/styles'
@@ -27,6 +25,7 @@ import { zIndex } from 'app/utils/zIndex'
 
 import { reactionMap } from '../notifications-screen/Reaction'
 
+import { ArtistCoinHeader } from './ArtistCoinHeader'
 import { ChatMessagePlaylist } from './ChatMessagePlaylist'
 import { ChatMessageTrack } from './ChatMessageTrack'
 import { LinkPreview } from './LinkPreview'
@@ -37,10 +36,6 @@ const { isIdEqualToReactionsPopupMessageId, getChatMessageById } = chatSelectors
 
 const TAIL_HORIZONTAL_OFFSET = 7
 
-const messages = {
- membersOnly: 'Members Only'
-}
-
 const useStyles = makeStyles(({ spacing, palette, typography }) => ({
  bubble: {
  marginTop: spacing(2),
@@ -169,9 +164,6 @@ export const ChatMessageListItem = memo(function ChatMessageListItem(
  } = props
  const styles = useStyles()
  const { data: userId } = useCurrentUserId()
- const { isEnabled: isArtistCoinEnabled } = useFeatureFlag(
- FeatureFlags.ARTIST_COINS
- )
  const message = useSelector((state) =>
  getChatMessageById(state, chatId, messageId)
  )
@@ -263,32 +255,11 @@ export const ChatMessageListItem = memo(function ChatMessageListItem(
  itemsRef ? (el) => (itemsRef.current[messageId] = el) : null
  }
  >
- {isArtistCoinEnabled ? (
- <Flex
- row
- ph='l'
- pv='xs'
- gap='m'
- alignItems='center'
- justifyContent='space-between'
- backgroundColor='surface1'
- borderBottom='default'
- >
- <Flex row gap='xs' alignItems='center'>
- <IconTokenBonk size='xs' />
- {/* Alignment bug for label text variant on iOS */}
- <Flex mt={Platform.OS === 'ios' ? '2xs' : 'none'}>
- <Text variant='label' size='s'>
- $Bonk
- </Text>
- </Flex>
- </Flex>
- <Flex mt={Platform.OS === 'ios' ? '2xs' : 'none'}>
- <Text variant='label' size='s' color='accent'>
- {messages.membersOnly}
- </Text>
- </Flex>
- </Flex>
+ {senderUserId ? (
+ <ArtistCoinHeader
+ userId={senderUserId}
+ audience={message?.audience}
+ />
  ) : null}
  {isCollection ? (
  <ChatMessagePlaylist

packages/sdk/src/sdk/api/chats/ChatsApi.ts

@@ -800,7 +800,8 @@ export class ChatsApi
  sender_user_id: encodedSenderId,
  created_at: blast.created_at,
  reactions: [],
- is_plaintext: true
+ is_plaintext: true,
+ audience: blast.audience
  }
  })
  }
@@ -882,7 +883,8 @@ export class ChatsApi
  sender_user_id: data.metadata.senderUserId,
  created_at: data.metadata.timestamp,
  reactions: [],
- is_plaintext: !!data.rpc.params.is_plaintext
+ is_plaintext: !!data.rpc.params.is_plaintext,
+ audience: data.rpc.params.audience
  }
  })
  } else if (data.rpc.method === 'chat.react') {
@@ -908,7 +910,8 @@ export class ChatsApi
  sender_user_id: data.metadata.senderUserId,
  created_at: data.metadata.timestamp,
  reactions: [],
- is_plaintext: true
+ is_plaintext: true,
+ audience: data.rpc.params.audience
  }
  })
  }

packages/sdk/src/sdk/api/chats/serverTypes.ts

@@ -55,6 +55,7 @@ export type ChatMessageRPC = {
  message: string
  parent_message_id?: string
  is_plaintext?: boolean
+ audience?: ChatBlastAudience
  }
 }
 
@@ -159,6 +160,7 @@ export type ChatMessage = {
  created_at: string
  message: string
  is_plaintext: boolean
+ audience?: ChatBlastAudience
  reactions: ChatMessageReaction[]
 }
 

packages/web/src/pages/chat-page/components/ArtistCoinHeader.tsx

@@ -0,0 +1,51 @@
+import { useArtistCoinMessageHeader } from '@audius/common/hooks'
+import { walletMessages } from '@audius/common/messages'
+import { ID } from '@audius/common/models'
+import { Flex, Text } from '@audius/harmony'
+import { ChatBlastAudience } from '@audius/sdk'
+
+import { TOKENS } from 'components/buy-sell-modal/constants'
+
+const messages = {
+ membersOnly: 'Members Only'
+}
+
+export const ArtistCoinHeader = ({
+ userId,
+ audience
+}: {
+ userId: ID
+ audience?: ChatBlastAudience
+}) => {
+ const artistCoinSymbol = useArtistCoinMessageHeader({
+ userId,
+ audience
+ })
+
+ if (!artistCoinSymbol) return null
+
+ const ArtistCoinIcon = TOKENS[artistCoinSymbol]?.icon
+
+ return (
+ <Flex
+ ph='l'
+ pv='xs'
+ gap='m'
+ justifyContent='space-between'
+ alignItems='center'
+ backgroundColor='surface1'
+ borderBottom='default'
+ >
+ <Flex gap='xs' alignItems='center'>
+ {ArtistCoinIcon ? <ArtistCoinIcon size='xs' /> : null}
+ <Text variant='label' size='s'>
+ {walletMessages.dollarSign}
+ {artistCoinSymbol}
+ </Text>
+ </Flex>
+ <Text variant='label' size='s' color='accent'>
+ {messages.membersOnly}
+ </Text>
+ </Flex>
+ )
+}