feat: Add context offchain profile to wallet connection

components/collection/activity/events/Events.vue

@@ -46,7 +46,6 @@
 <script setup lang="ts">
 import { useIntersectionObserver } from '@vueuse/core'
 import { Interaction } from '@kodadot1/minimark/v1'
-import { useQuery } from '@tanstack/vue-query'
 import { isAnyActivityFilterActive, isAnyEventTypeFilterActive } from '../utils'
 import EventRow from './EventRow.vue'
 import { blank, getFromAddress, getToAddress } from './eventRow/common'
@@ -58,8 +57,7 @@ import {
   OfferInteraction,
 } from '@/composables/collectionActivity/types'
 import ResponsiveTable from '@/components/shared/ResponsiveTable.vue'
-import { fetchProfilesByIds, toSubstrateAddress } from '@/services/profile'
-import type { Profile } from '@/services/profile'
+import { toSubstrateAddress } from '@/services/profile'
 
 const props = withDefaults(
   defineProps<{
@@ -124,18 +122,7 @@ const eventsAddresses = computed(() => {
   return [...new Set([...addresses])]
 })
 
-const { data: profiles } = useQuery<Profile[] | null>({
-  queryKey: [
-    'profiles',
-    // eslint-disable-next-line vue/no-side-effects-in-computed-properties
-    computed(() => `${eventsAddresses.value.sort().join(',')}`),
-  ],
-  queryFn: () =>
-    eventsAddresses.value.length
-      ? fetchProfilesByIds(eventsAddresses.value)
-      : null,
-  staleTime: 1000 * 60 * 5,
-})
+const { data: profiles } = useProfiles('profiles', eventsAddresses, { staleTime: 1000 * 60 * 5 })
 
 const displayedEvents = ref<(InteractionWithNFT | Offer)[]>([])
 

components/common/ConnectWallet/WalletMenuItem.vue

@@ -56,40 +56,62 @@
     </div>
 
     <div
-      v-if="walletAccounts.length && showAccountList"
+      v-if="walletAccountsWithProfile.length && showAccountList"
       class="account-list"
     >
       <div
-        v-for="option in walletAccounts"
+        v-for="option in walletAccountsWithProfile"
         :key="option.address"
         class="account-item"
       >
         <a
-          class="pl-5 flex items-center"
+          class="pl-5 flex items-center justify-between"
           :value="option.address"
           @click="emitAccountChange(option)"
         >
-          <Avatar
-            :size="33"
-            :value="option.address"
-            class="mr-2 image-outline"
-          />
-          <div class="flex flex-col">
-            <span class="text-k-grey text-xs account-name">{{
-              option.name
-            }}</span>
-            <div class="account-address">
-              {{ shortAddress(option.address, 6, -3) }}
+          <div class="flex items-center">
+            <Avatar
+              :size="33"
+              :value="option.address"
+              class="mr-2 image-outline"
+            />
+            <div class="flex flex-col">
+              <span class="text-k-grey text-xs account-name">{{
+                option.name
+              }}</span>
+              <div class="account-address">
+                {{ shortAddress(option.address, 6, -3) }}
+              </div>
             </div>
           </div>
+          <NeoSkeleton
+            v-if="isProfilesLoading"
+            class="!w-[73px] !h-[22px] mr-1 rounded-full overflow-hidden"
+            width="100%"
+            height="100%"
+            no-margin
+          />
+          <div
+            v-else-if="option.profile"
+            class="flex items-center rounded-full bg-neutral-3 dark:bg-neutral-11 px-[6px] py-[3px] h-[22px] gap-[0.375rem] mr-1"
+          >
+            <ProfileAvatar
+              :size="12.5"
+              :address="option.address"
+              :profile-image="option.profile?.image"
+            />
+            <span
+              class="text-sm max-w-[80px] text-ellipsis whitespace-nowrap overflow-hidden"
+            >{{ option.profile?.name }}</span>
+          </div>
         </a>
       </div>
     </div>
   </div>
 </template>
 
 <script lang="ts" setup>
-import { NeoIcon } from '@kodadot1/brick'
+import { NeoIcon, NeoSkeleton } from '@kodadot1/brick'
 import type { WalletAccount } from '@/utils/config/wallets'
 import type { BaseDotsamaWallet } from '@/utils/config/wallets/BaseDotsamaWallet'
 import shouldUpdate from '@/utils/shouldUpdate'
@@ -98,6 +120,7 @@ import shortAddress from '@/utils/shortAddress'
 import { useWalletStore } from '@/stores/wallet'
 import Avatar from '@/components/shared/Avatar.vue'
 import NeoTag from '@/components/shared/gallery/NeoTag.vue'
+import { toSubstrateAddress } from '@/services/profile'
 
 defineProps<{
   wallet: BaseDotsamaWallet
@@ -121,12 +144,25 @@ const emitAccountChange = (account): void => {
 
 const ss58Format = computed(() => chainProperties.value?.ss58Format)
 
+const walletAccountsWithProfile = computed(() => {
+  return walletAccounts.value.map((account) => {
+    return {
+      ...account,
+      profile: existingProfiles.value?.find(
+        p => p.address === toSubstrateAddress(account.address),
+      ),
+    }
+  })
+})
+
 watch(walletAccounts, (newValue) => {
   if (shouldUpdate(newValue, walletAccounts.value)) {
     walletAccounts.value = newValue
   }
 })
 
+const { data: existingProfiles, isLoading: isProfilesLoading } = useProfiles('account-profiles', computed(() => walletAccounts.value.map(a => a.address)))
+
 const formatAccount = (account: WalletAccount): WalletAccount => {
   return {
     ...account,

composables/useProfiles.ts

@@ -0,0 +1,20 @@
+import { useQuery } from '@tanstack/vue-query'
+import { fetchProfilesByIds } from '@/services/profile'
+import type { Profile } from '@/services/profile'
+
+export default function useProfiles(queryKey: string, addresses: ComputedRef<string[]>, queryOptions?: { staleTime?: number }) {
+  return useQuery<
+    Profile[]
+  >({
+    queryKey: [
+      queryKey,
+      computed(() => `${addresses.value.sort().join(',')}`),
+    ],
+    queryFn: () =>
+      addresses.value.length
+        ? fetchProfilesByIds(addresses.value)
+        : [],
+    ...queryOptions,
+
+  })
+}