Update airdrop copy and add X icon (#11306)

Author: isaacsolo

.changeset/rich-peaches-rhyme.md

@@ -0,0 +1,5 @@
+---
+"@audius/harmony": minor
+---
+
+Add X icon

packages/common/src/utils/challenges.ts

@@ -11,6 +11,7 @@ import { formatNumberCommas } from './formatUtil'
 
 export type ChallengeRewardsInfo = {
   id: ChallengeRewardID
+  shortTitle?: string
   title: string
   description: (amount: OptimisticUserChallenge | undefined) => string
   fullDescription?: (amount: OptimisticUserChallenge | undefined) => string
@@ -307,9 +308,13 @@ export const challengeRewardsConfig: Record<
     id: 'trending-underground'
   },
   o: {
-    title: 'Airdrop - Februrary 2025',
-    description: () => 'Claim your $AUDIO before it expires!',
-    fullDescription: () => 'Claim your $AUDIO before it expires!',
+    shortTitle: 'Airdrop 2: Artists',
+    title: 'Airdrop 2: Artist Appreciationdfa',
+    description: () =>
+      `We're thrilled to reward our talented artist community for driving Audius' growth and success!`,
+    fullDescription: () =>
+      `We're thrilled to reward our talented artist community for driving Audius' growth and success! \n\nClaim your tokens before they expire on 05/13/25!`,
+
     panelButtonText: '',
     id: ChallengeName.OneShot,
     remainingLabel: 'Ineligible',

packages/discovery-provider/plugins/notifications/src/processNotifications/mappers/challengeReward.ts

@@ -68,7 +68,7 @@ export class ChallengeReward extends BaseNotification<ChallengeRewardRow> {
       amount: 2
     },
     o: {
-      title: 'Airdrop - February 2025'
+      title: 'Airdrop 2: Artist Appreciation'
     }
   }
 

packages/harmony/src/assets/icons/X.svg

@@ -73,6 +73,7 @@ Logos are used as a visual representation of our brand and other businesses we p
   <IconFacebook />
   <IconInstagram />
   <IconTwitter />
+  <IconX />
   <IconTelegram />
   <IconSnapChat />
   <IconTikTok />

packages/harmony/src/icons/Logos.stories.mdx

@@ -29,6 +29,7 @@ import IconSnapChatSVG from '../assets/icons/SnapChat.svg'
 import IconTelegramSVG from '../assets/icons/Telegram.svg'
 import IconTikTokSVG from '../assets/icons/TikTok.svg'
 import IconTwitterSVG from '../assets/icons/Twitter.svg'
+import IconXSVG from '../assets/icons/X.svg'
 import { createImageIcon } from '../utils/createImageIcon'
 
 export const IconAudiusLogo = IconAudiusLogoSVG as IconComponent
@@ -64,3 +65,4 @@ export const IconSnapChat = IconSnapChatSVG as IconComponent
 export const IconTelegram = IconTelegramSVG as IconComponent
 export const IconTikTok = IconTikTokSVG as IconComponent
 export const IconTwitter = IconTwitterSVG as IconComponent
+export const IconX = IconXSVG as IconComponent

packages/harmony/src/icons/logos.ts

@@ -208,7 +208,7 @@ export const ChallengeRewardsDrawerProvider = () => {
       onClose={handleClose}
       isFullscreen
       isGestureSupported={false}
-      title={config.title}
+      title={config.shortTitle ?? config.title}
     >
       {isAudioMatchingChallenge(modalType) ? (
         <AudioMatchingChallengeDrawerContent
@@ -232,7 +232,11 @@ export const ChallengeRewardsDrawerProvider = () => {
         />
       ) : (
         <ChallengeRewardsDrawerContent
-          description={config.description(challenge)}
+          description={
+            config.fullDescription
+              ? config.fullDescription(challenge)
+              : config.description(challenge)
+          }
           progressLabel={config.progressLabel ?? 'Completed'}
           completedLabel={config.completedLabel}
           amount={progressRewardAmount}

packages/mobile/src/components/challenge-rewards-drawer/ChallengeRewardsDrawerProvider.tsx

@@ -33,6 +33,7 @@ type PanelProps = {
 export const Panel = ({
   id,
   onPress,
+  shortTitle,
   title,
   shortDescription,
   description,
@@ -94,7 +95,7 @@ export const Panel = ({
         </Flex>
         <Flex ph='unit5' gap='s'>
           <Text variant='heading' size='s'>
-            {title}
+            {shortTitle ?? title}
           </Text>
           <Text numberOfLines={2}>
             {shortDescription || description(challenge)}

packages/mobile/src/screens/rewards-screen/Panel.tsx

@@ -60,6 +60,7 @@ export type ChallengesParamList = {
 
 export type MobileChallengeConfig = {
   icon?: ImageSourcePropType
+  shortTitle?: string
   title?: string
   description?: (amount?: OptimisticUserChallenge) => string
   shortDescription?: string

packages/mobile/src/utils/challenges.tsx

@@ -340,7 +340,9 @@ const ChallengeRewardsBody = ({ dismissModal }: BodyProps) => {
           {messages.verifiedChallenge}
         </div>
       ) : null}
-      <Text variant='body'>{fullDescription?.(challenge)}</Text>
+      <Text variant='body' style={{ whiteSpace: 'pre-line' }}>
+        {fullDescription?.(challenge)}
+      </Text>
       {isCooldownChallenge ? (
         <Text variant='body' color='subdued'>
           {messages.cooldownDescription}