[QA-2220] Fix mobile user-links with badge-v2

packages/mobile/src/components/track-list/TrackListItem.tsx

@@ -46,10 +46,10 @@ import {
   IconRemove,
   IconVisibilityHidden
 } from '@audius/harmony-native'
-import { UserBadges } from 'app/components/user-badges'
 import { flexRowCentered, font, makeStyles } from 'app/styles'
 
 import { TrackDownloadStatusIndicator } from '../offline-downloads/TrackDownloadStatusIndicator'
+import { UserLink } from '../user-link'
 
 import { TrackArtwork } from './TrackArtwork'
 const { open: openOverflowMenu } = mobileOverflowMenuUIActions
@@ -105,11 +105,6 @@ const useStyles = makeStyles(({ palette, spacing, typography }) => ({
   downloadIndicator: {
     marginLeft: spacing(1)
   },
-  artistName: {
-    ...font('medium'),
-    color: palette.neutralLight2,
-    alignItems: 'center'
-  },
   iconContainer: {
     marginLeft: spacing(2)
   },
@@ -200,7 +195,12 @@ const TrackListItemComponent = (props: TrackListItemComponentProps) => {
   const { data: contextPlaylist } = useCollection(contextPlaylistId)
   const trackId = id ?? (uid ? getNumericIdFromUid(uid) : undefined)
   const { data: track } = useTrack(trackId)
-  const { data: user } = useUser(track?.owner_id)
+  const { data: user } = useUser(track?.owner_id, {
+    select: (user) => ({
+      user_id: user?.user_id,
+      is_deactivated: user?.is_deactivated
+    })
+  })
 
   const {
     has_current_user_saved,
@@ -214,7 +214,7 @@ const TrackListItemComponent = (props: TrackListItemComponentProps) => {
     stream_conditions: streamConditions,
     album_backlink
   } = track ?? {}
-  const { is_deactivated, name } = user ?? {}
+  const { is_deactivated, user_id } = user ?? {}
 
   const isDeleted = is_delete || !!is_deactivated
 
@@ -410,12 +410,7 @@ const TrackListItemComponent = (props: TrackListItemComponentProps) => {
                 </View>
               )}
             </View>
-            <Text numberOfLines={1} style={styles.artistName}>
-              {name}
-              {user ? (
-                <UserBadges userId={user.user_id} badgeSize='xs' />
-              ) : null}
-            </Text>
+            {user_id && <UserLink userId={user_id} size='s' />}
           </View>
           {isUnlisted ? (
             <IconVisibilityHidden

packages/mobile/src/screens/app-drawer-screen/left-nav-drawer/AccountDetails.tsx

@@ -5,7 +5,7 @@ import { TouchableOpacity } from 'react-native'
 
 import { Flex, Text } from '@audius/harmony-native'
 import { ProfilePicture } from 'app/components/core'
-import { UserBadges } from 'app/components/user-badges'
+import { UserLink } from 'app/components/user-link'
 
 import { AppDrawerContext } from '../AppDrawerContext'
 import { useAppDrawerNavigation } from '../useAppDrawerNavigation'
@@ -15,12 +15,10 @@ export const AccountDetails = () => {
   const { data: accountUser } = useCurrentAccountUser({
     select: (user) => ({
       user_id: user?.user_id,
-      name: user?.name,
-      handle: user?.handle,
-      is_verified: user?.is_verified
+      handle: user?.handle
     })
   })
-  const { name, handle, user_id } = accountUser ?? {}
+  const { handle, user_id } = accountUser ?? {}
 
   const navigation = useAppDrawerNavigation()
 
@@ -41,12 +39,9 @@ export const AccountDetails = () => {
           borderWidth='thin'
         />
         <Flex gap='unitHalf'>
-          <Flex row justifyContent='space-around'>
-            <Text numberOfLines={1} variant='body' size='l' strength='strong'>
-              {name}
-            </Text>
-            {user_id ? <UserBadges userId={user_id} badgeSize='xs' /> : null}
-          </Flex>
+          {user_id ? (
+            <UserLink userId={user_id} size='l' strength='strong' />
+          ) : null}
           <Text numberOfLines={1} variant='body' size='s'>
             @{handle}
           </Text>