Add artist coin badge to profile picture

packages/harmony/src/components/artwork/Artwork.tsx

@@ -16,6 +16,7 @@ export type ArtworkProps = {
   noLoading?: boolean
   onError?: (event: React.SyntheticEvent<HTMLImageElement, Event>) => void
   hex?: boolean
+  borderColor?: string
 } & Pick<ComponentProps<'img'>, 'src' | 'onError'> &
   BoxProps
 
@@ -37,6 +38,7 @@ export const Artwork = (props: ArtworkProps) => {
     'data-testid': testId,
     onError,
     hex = false,
+    borderColor,
     ...other
   } = props
   const imgRef = useRef<HTMLImageElement | null>(null)
@@ -164,9 +166,9 @@ export const Artwork = (props: ArtworkProps) => {
               // Occurs in the upload flow when selecting coin gating audience option
               css={{ fill: 'none !important' }}
               fill='none'
-              opacity={0.3}
-              stroke={color.neutral.n950}
-              strokeWidth='0.005'
+              opacity={borderColor ? 1 : 0.3}
+              stroke={borderColor || color.neutral.n950}
+              strokeWidth={borderColor ? '0.02' : '0.005'}
             />
           </g>
         </svg>

packages/web/src/components/profile-picture/ProfilePicture.jsx

@@ -1,14 +1,20 @@
-import { memo, useState, useEffect } from 'react'
+import { memo, useState, useEffect, useMemo } from 'react'
 
+import { useUser, useUserCreatedCoins } from '@audius/common/api'
+import { useFeatureFlag } from '@audius/common/hooks'
 import { SquareSizes } from '@audius/common/models'
+import { FeatureFlags } from '@audius/common/services'
+import { useTheme } from '@audius/harmony'
 import cn from 'classnames'
 import Lottie from 'lottie-react'
 import PropTypes from 'prop-types'
 
 import loadingSpinner from 'assets/animations/loadingSpinner.json'
+import { TokenIcon } from 'components/buy-sell-modal/TokenIcon'
 import DynamicImage from 'components/dynamic-image/DynamicImage'
 import ImageSelectionButton from 'components/image-selection/ImageSelectionButton'
 import { useProfilePicture } from 'hooks/useProfilePicture'
+import { env } from 'services/env'
 
 import styles from './ProfilePicture.module.css'
 
@@ -38,6 +44,27 @@ const ProfilePicture = ({
   const [processing, setProcessing] = useState(false)
   const [modalOpen, setModalOpen] = useState(false)
 
+  const { isEnabled: isArtistCoinEnabled } = useFeatureFlag(
+    FeatureFlags.ARTIST_COINS
+  )
+
+  const { data: ownedCoins } = useUserCreatedCoins({ userId, limit: 1 })
+  const ownedCoin = ownedCoins?.[0]
+  console.log('ownedCoin', ownedCoin)
+
+  const shouldShowArtistCoinBadge = useMemo(() => {
+    if (!isArtistCoinEnabled || !ownedCoin?.mint || !ownedCoin?.logoUri) {
+      return false
+    }
+
+    // Don't show for wAUDIO
+    if (ownedCoin.mint === env.WAUDIO_MINT_ADDRESS) {
+      return false
+    }
+
+    return true
+  }, [isArtistCoinEnabled, ownedCoin?.mint, ownedCoin?.logoUri])
+
   useEffect(() => {
     if (editMode) {
       setHasChanged(false)
@@ -60,6 +87,8 @@ const ProfilePicture = ({
     setModalOpen(false)
   }
 
+  const { color } = useTheme()
+
   return (
     <div
       className={cn(styles.profilePictureWrapper, {
@@ -100,6 +129,16 @@ const ProfilePicture = ({
             source='ProfilePicture'
           />
         ) : null}
+        {shouldShowArtistCoinBadge && (
+          <TokenIcon
+            logoURI={ownedCoin?.logoUri}
+            css={{ position: 'absolute', bottom: 0, right: 0, zIndex: 10 }}
+            hex
+            w={64}
+            h={64}
+            borderColor={color.static.white}
+          />
+        )}
       </div>
     </div>
   )