From 2a13ea5bee71bb402b13aaa6c45b416ebc9ab2d8 Mon Sep 17 00:00:00 2001
From: Jarsen <31397967+Jarsen136@users.noreply.github.com>
Date: Thu, 4 Jul 2024 18:36:07 +0200
Subject: [PATCH] fix: Profile: If follower doesnt have profile picture leave
 that Polkadot wallet picture

---
 components/profile/ProfileDetail.vue | 14 +++++++-------
 components/shared/ProfileAvatar.vue  | 14 +++++++++++---
 2 files changed, 18 insertions(+), 10 deletions(-)

diff --git a/components/profile/ProfileDetail.vue b/components/profile/ProfileDetail.vue
index a153beac27..6ef82a8962 100644
--- 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
index bf851ac9e2..cdc73ede97 100644
--- a/components/shared/ProfileAvatar.vue
+++ b/components/shared/ProfileAvatar.vue
@@ -1,6 +1,6 @@
 <template>
   <div
-    v-if="profile?.image"
+    v-if="profileImageUrl"
     class="rounded-full overflow-hidden bg-background-color border"
     :style="{
       width: `${size}px`,
@@ -8,7 +8,7 @@
       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>