fix: Profile: If follower doesnt have profile picture leave that Polk…

…adot wallet picture
kodadot · Jul 4, 2024 · 2a13ea5 · 2a13ea5
1 parent d9109e9
commit 2a13ea5
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 10 deletions.
diff --git a/components/profile/ProfileDetail.vue b/components/profile/ProfileDetail.vue
@@ -211,13 +211,13 @@
                 <div
                   v-for="(follower, index) in followers?.followers"
                   :key="index"
-                  :style="{ zIndex: 3 - index }"
-                  class="w-8 h-8 flex-shrink-0 rounded-full border">
-                  <BasicImage
-                    :src="follower.image"
-                    custom-class="object-cover"
-                    alt="follower avatar"
-                    rounded />
+                  class="flex"
+                  :style="{ zIndex: 3 - index }">
+                  <ProfileAvatar
+                    class="border"
+                    :profile-image="follower.image"
+                    :address="follower.address"
+                    :size="30" />
                 </div>
               </div>
             </NeoButton>

diff --git a/components/shared/ProfileAvatar.vue b/components/shared/ProfileAvatar.vue
@@ -1,14 +1,14 @@
 <template>
   <div
-    v-if="profile?.image"
+    v-if="profileImageUrl"
     class="rounded-full overflow-hidden bg-background-color border"
     :style="{
       width: `${size}px`,
       height: `${size}px`,
       padding: `${Math.round(size / 16)}px`,
     }">
     <BaseMediaItem
-      :src="profile?.image"
+      :src="profileImageUrl"
       :image-component="NuxtImg"
       title="User Avatar"
       class="object-cover overflow-hidden rounded-full h-full w-full !shadow-none" />
@@ -22,13 +22,21 @@ const NuxtImg = resolveComponent('NuxtImg')
 const props = withDefaults(
   defineProps<{
     address: string
+    profileImage?: string
     size?: number
   }>(),
   {
     value: '',
+    profileImage: undefined,
     size: 64,
   },
 )
 
-const { profile } = useFetchProfile(props.address)
+const { profile: profileFromAddress } = useFetchProfile(
+  props.profileImage ? undefined : props.address,
+)
+
+const profileImageUrl = computed(
+  () => props.profileImage || profileFromAddress.value?.image,
+)
 </script>