[PE-6519] Send artist coin holder blast UI

packages/mobile/src/screens/create-chat-blast-screen/ChatBlastSelectAudienceFields.tsx

@@ -2,9 +2,11 @@ import { useCallback } from 'react'
 
 import { useCurrentAccountUser } from '@audius/common/api'
 import {
+  useFeatureFlag,
   usePurchasersAudience,
   useRemixersAudience
 } from '@audius/common/hooks'
+import { FeatureFlags } from '@audius/common/services'
 import { formatNumberCommas } from '@audius/common/utils'
 import { ChatBlastAudience } from '@audius/sdk'
 import { useField } from 'formik'
@@ -41,6 +43,12 @@ const messages = {
     placeholder: 'Tracks with Remixes',
     filterBy: 'Filter by Tracks With Remixes',
     search: 'Search for tracks with remixes'
+  },
+  coinHolders: {
+    label: 'Coin Holders',
+    description:
+      'Send a bulk message to users who have Bonk coins in their wallet.',
+    placeholder: 'Coin Holders'
   }
 }
 
@@ -52,6 +60,7 @@ export const ChatBlastSelectAudienceFields = () => {
       <TipSupportersMessageField />
       <PastPurchasersMessageField />
       <RemixCreatorsMessageField />
+      <CoinHoldersMessageField />
     </ExpandableRadioGroup>
   )
 }
@@ -232,3 +241,31 @@ const RemixCreatorsMessageField = () => {
     />
   )
 }
+
+const CoinHoldersMessageField = () => {
+  const { isEnabled: isArtistCoinEnabled } = useFeatureFlag(
+    FeatureFlags.ARTIST_COINS
+  )
+  const [{ value: targetAudience }] = useField(TARGET_AUDIENCE_FIELD)
+  const isSelected = targetAudience === ChatBlastAudience.COIN_HOLDERS
+  const isDisabled = !isArtistCoinEnabled
+  const coinHoldersCount = 0
+  if (!isArtistCoinEnabled) {
+    return null
+  }
+
+  return (
+    <ExpandableRadio
+      value={ChatBlastAudience.COIN_HOLDERS}
+      disabled={isDisabled}
+      label={
+        <LabelWithCount
+          label={messages.coinHolders.label}
+          count={coinHoldersCount}
+          isSelected={isSelected}
+        />
+      }
+      description={messages.coinHolders.description}
+    />
+  )
+}

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

@@ -1,9 +1,11 @@
 import { useCurrentAccountUser } from '@audius/common/api'
 import {
+  useFeatureFlag,
   useFirstAvailableBlastAudience,
   usePurchasersAudience,
   useRemixersAudience
 } from '@audius/common/hooks'
+import { FeatureFlags } from '@audius/common/services'
 import {
   useChatBlastModal,
   chatActions,
@@ -54,6 +56,12 @@ const messages = {
     description:
       'Send a bulk message to creators who have remixed your tracks.',
     placeholder: 'Tracks with Remixes'
+  },
+  coinHolders: {
+    label: 'Coin Holders',
+    description:
+      'Send a bulk message to users who have Bonk coins in their wallet.',
+    placeholder: 'Coin Holders'
   }
 }
 
@@ -164,6 +172,7 @@ const ChatBlastsFields = () => {
         <TipSupportersMessageField />
         <PastPurchasersMessageField />
         <RemixCreatorsMessageField />
+        <CoinHoldersMessageField />
       </Flex>
     </RadioGroup>
   )
@@ -339,3 +348,42 @@ const RemixCreatorsMessageField = () => {
     </Flex>
   )
 }
+
+const CoinHoldersMessageField = () => {
+  const [{ value: targetAudience }] = useField(TARGET_AUDIENCE_FIELD)
+
+  const { isEnabled: isArtistCoinEnabled } = useFeatureFlag(
+    FeatureFlags.ARTIST_COINS
+  )
+
+  const isSelected = targetAudience === ChatBlastAudience.COIN_HOLDERS
+  const coinHoldersCount = 0
+  const isDisabled = !isArtistCoinEnabled
+  if (!isArtistCoinEnabled) {
+    return null
+  }
+
+  return (
+    <Flex
+      as='label'
+      gap='l'
+      css={{
+        opacity: isDisabled ? 0.5 : 1
+      }}
+    >
+      <Radio value={ChatBlastAudience.COIN_HOLDERS} disabled={isDisabled} />
+      <Flex direction='column' gap='xs' css={{ cursor: 'pointer' }}>
+        <LabelWithCount
+          label={messages.coinHolders.label}
+          count={coinHoldersCount}
+          isSelected={isSelected}
+        />
+        {isSelected ? (
+          <Flex direction='column' gap='l'>
+            <Text size='s'>{messages.coinHolders.description}</Text>
+          </Flex>
+        ) : null}
+      </Flex>
+    </Flex>
+  )
+}