From f65b1214061810e4e284cb919755aeb8709cea6a Mon Sep 17 00:00:00 2001
From: Jarsen <31397967+Jarsen136@users.noreply.github.com>
Date: Fri, 19 Jul 2024 15:47:06 +0200
Subject: [PATCH 1/5] feat: Add context offchain profile to wallet connection

---
 .../common/ConnectWallet/WalletMenuItem.vue   | 67 +++++++++++++++----
 1 file changed, 54 insertions(+), 13 deletions(-)

diff --git a/components/common/ConnectWallet/WalletMenuItem.vue b/components/common/ConnectWallet/WalletMenuItem.vue
index aab5999bd5..223750ed8d 100644
--- a/components/common/ConnectWallet/WalletMenuItem.vue
+++ b/components/common/ConnectWallet/WalletMenuItem.vue
@@ -44,27 +44,43 @@
       </span>
     </div>
 
-    <div v-if="walletAccounts.length && showAccountList" class="account-list">
+    <div
+      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>
+          <div
+            v-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>
@@ -81,6 +97,9 @@ import { useWalletStore } from '@/stores/wallet'
 import { NeoIcon } from '@kodadot1/brick'
 import Avatar from '@/components/shared/Avatar.vue'
 import NeoTag from '@/components/shared/gallery/NeoTag.vue'
+import { fetchProfilesByIds, toSubstrateAddress } from '@/services/profile'
+import { useQuery } from '@tanstack/vue-query'
+import type { Profile } from '@/services/profile'
 
 defineProps<{
   wallet: BaseDotsamaWallet
@@ -104,12 +123,34 @@ 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 } = useQuery<Profile[]>({
+  queryKey: [
+    'account-profiles',
+    computed(() => `${walletAccounts.value.sort().join(',')}`),
+  ],
+  queryFn: () =>
+    walletAccounts.value.length
+      ? fetchProfilesByIds(walletAccounts.value.map((a) => a.address))
+      : [],
+})
+
 const formatAccount = (account: WalletAccount): WalletAccount => {
   return {
     ...account,

From 055d3e6ca58797c2a75cd6590fab2a27499406ad Mon Sep 17 00:00:00 2001
From: Jarsen <31397967+Jarsen136@users.noreply.github.com>
Date: Mon, 22 Jul 2024 18:55:06 +0200
Subject: [PATCH 2/5] feat: profile skeleton loader

---
 components/common/ConnectWallet/WalletMenuItem.vue | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/components/common/ConnectWallet/WalletMenuItem.vue b/components/common/ConnectWallet/WalletMenuItem.vue
index 223750ed8d..afc1b4532c 100644
--- a/components/common/ConnectWallet/WalletMenuItem.vue
+++ b/components/common/ConnectWallet/WalletMenuItem.vue
@@ -70,7 +70,10 @@
             </div>
           </div>
           <div
-            v-if="option.profile"
+            v-if="isProfilesLoading"
+            class="w-[75px] rounded-full bg-neutral-3 dark:bg-neutral-11 h-[22px] mr-1"></div>
+          <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"
@@ -140,7 +143,9 @@ watch(walletAccounts, (newValue) => {
   }
 })
 
-const { data: existingProfiles } = useQuery<Profile[]>({
+const { data: existingProfiles, isLoading: isProfilesLoading } = useQuery<
+  Profile[]
+>({
   queryKey: [
     'account-profiles',
     computed(() => `${walletAccounts.value.sort().join(',')}`),

From 8b6d55e063cd9f8592e521391a60adcf8f5e9297 Mon Sep 17 00:00:00 2001
From: Jarsen <31397967+Jarsen136@users.noreply.github.com>
Date: Mon, 22 Jul 2024 22:54:46 +0200
Subject: [PATCH 3/5] chore: NeoSkeleton

---
 components/common/ConnectWallet/WalletMenuItem.vue | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/components/common/ConnectWallet/WalletMenuItem.vue b/components/common/ConnectWallet/WalletMenuItem.vue
index afc1b4532c..9e731e75b1 100644
--- a/components/common/ConnectWallet/WalletMenuItem.vue
+++ b/components/common/ConnectWallet/WalletMenuItem.vue
@@ -69,9 +69,12 @@
               </div>
             </div>
           </div>
-          <div
+          <NeoSkeleton
             v-if="isProfilesLoading"
-            class="w-[75px] rounded-full bg-neutral-3 dark:bg-neutral-11 h-[22px] mr-1"></div>
+            class="!w-[73px] !h-[22px] mr-1"
+            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">
@@ -97,7 +100,7 @@ import shouldUpdate from '@/utils/shouldUpdate'
 import { formatAddress } from '@/utils/account'
 import shortAddress from '@/utils/shortAddress'
 import { useWalletStore } from '@/stores/wallet'
-import { NeoIcon } from '@kodadot1/brick'
+import { NeoIcon, NeoSkeleton } from '@kodadot1/brick'
 import Avatar from '@/components/shared/Avatar.vue'
 import NeoTag from '@/components/shared/gallery/NeoTag.vue'
 import { fetchProfilesByIds, toSubstrateAddress } from '@/services/profile'

From 4cfdcf620043a0a377bd89b38ac1b59b980779e9 Mon Sep 17 00:00:00 2001
From: Jarsen <31397967+Jarsen136@users.noreply.github.com>
Date: Tue, 23 Jul 2024 17:53:02 +0200
Subject: [PATCH 4/5] refactor: useProfiles

---
 .../collection/activity/events/Events.vue     | 44 +++++-----
 .../common/ConnectWallet/WalletMenuItem.vue   | 80 ++++++++++---------
 composables/useProfiles.ts                    | 20 +++++
 3 files changed, 83 insertions(+), 61 deletions(-)
 create mode 100644 composables/useProfiles.ts

diff --git a/components/collection/activity/events/Events.vue b/components/collection/activity/events/Events.vue
index 45e3119a92..4d278bb404 100644
--- a/components/collection/activity/events/Events.vue
+++ b/components/collection/activity/events/Events.vue
@@ -4,7 +4,8 @@
     :no-results-main="$t('activity.noResults')"
     :no-results-sub="$t('activity.noResultsSub')"
     :show-no-results="events.length > 0 && !displayedEvents.length"
-    data-testid="nfts-event-table">
+    data-testid="nfts-event-table"
+  >
     <template #columns>
       <div class="flex-1 mb-2">
         <span>{{ $t('activity.event.item') }}</span>
@@ -31,30 +32,33 @@
         v-for="event in displayedEvents.slice(0, displayedEvents.length - 1)"
         :key="event.id"
         :variant="variant"
-        :event="event" />
+        :event="event"
+      />
       <div ref="sentinel" />
       <EventRow
         :variant="variant"
-        :event="displayedEvents[displayedEvents.length - 1]" />
+        :event="displayedEvents[displayedEvents.length - 1]"
+      />
     </template>
   </ResponsiveTable>
 </template>
 
 <script setup lang="ts">
-import EventRow from './EventRow.vue'
 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'
 import { mintInteraction } from '@/composables/collectionActivity/helpers'
-import {
+import type {
   InteractionWithNFT,
-  Offer,
+  Offer } from '@/composables/collectionActivity/types'
+import {
   OfferInteraction,
 } from '@/composables/collectionActivity/types'
 import ResponsiveTable from '@/components/shared/ResponsiveTable.vue'
-import { blank, getFromAddress, getToAddress } from './eventRow/common'
 import { fetchProfilesByIds, toSubstrateAddress } from '@/services/profile'
-import { useQuery } from '@tanstack/vue-query'
 import type { Profile } from '@/services/profile'
 
 const props = withDefaults(
@@ -90,15 +94,15 @@ const filteredEvents = computed(() => {
     [OfferInteraction]: is(query?.offer as string),
   }
 
-  const identityIds = profiles.value?.map((profile) => profile?.address) || []
+  const identityIds = profiles.value?.map(profile => profile?.address) || []
 
   const filterByVerifiedIdentity = isOnlyVerifiedUsersFilterActive.value
 
   return props.events.filter((event) => {
     const isActiveEvent = filterByVerifiedIdentity
       ? getEventAddresses(event)
-          .map(toSubstrateAddress)
-          .some((x) => identityIds.includes(x))
+        .map(toSubstrateAddress)
+        .some(x => identityIds.includes(x))
       : true
 
     if (!isAnyEventTypeFilterActive()) {
@@ -111,7 +115,7 @@ const filteredEvents = computed(() => {
 
 const getEventAddresses = (event): string[] => {
   return [getFromAddress(event), getToAddress(event)].filter(
-    (address) => address !== blank,
+    address => address !== blank,
   )
 }
 
@@ -120,17 +124,7 @@ const eventsAddresses = computed(() => {
   return [...new Set([...addresses])]
 })
 
-const { data: profiles } = useQuery<Profile[] | null>({
-  queryKey: [
-    'profiles',
-    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)[]>([])
 
@@ -149,8 +143,8 @@ watch(
 const handleIntersection = (entries: IntersectionObserverEntry[]) => {
   const target = entries[0]
   if (
-    target.isIntersecting &&
-    displayedEvents.value.length < filteredEvents.value.length
+    target.isIntersecting
+    && displayedEvents.value.length < filteredEvents.value.length
   ) {
     displayMoreEvents()
   }
diff --git a/components/common/ConnectWallet/WalletMenuItem.vue b/components/common/ConnectWallet/WalletMenuItem.vue
index 9e731e75b1..48cdd7c46d 100644
--- a/components/common/ConnectWallet/WalletMenuItem.vue
+++ b/components/common/ConnectWallet/WalletMenuItem.vue
@@ -2,7 +2,8 @@
   <div class="wallet-menu-item">
     <button
       class="button my-0 !px-8 py-2.5 flex justify-between items-center"
-      @click="onClickWallet(wallet)">
+      @click="onClickWallet(wallet)"
+    >
       <span>
         <div class="flex justify-between items-center">
           <span class="flex items-center">
@@ -10,34 +11,44 @@
               :src="wallet.img"
               :alt="wallet.extensionName"
               width="32"
-              style="vertical-align: middle" />
+              style="vertical-align: middle"
+            >
             <span class="text-base ml-2 capitalize">{{ wallet.name }}</span>
 
             <NeoTag
               v-if="isRecent(wallet)"
               class="capitalize ml-2"
               variant="transparent"
-              size="small">
+              size="small"
+            >
               {{ $t('recent') }}
             </NeoTag>
           </span>
 
           <div
             v-if="!wallet.installed"
-            class="text-xs capitalize text-neutral-7">
+            class="text-xs capitalize text-neutral-7"
+          >
             {{ $t('moreActions.download') }}
             <NeoIcon icon="download" />
           </div>
 
-          <NeoIcon v-else-if="showAccountList" icon="chevron-down" />
+          <NeoIcon
+            v-else-if="showAccountList"
+            icon="chevron-down"
+          />
 
-          <NeoIcon v-else icon="chevron-right" />
+          <NeoIcon
+            v-else
+            icon="chevron-right"
+          />
         </div>
       </span>
     </button>
     <div
       v-if="isAuth && walletAccounts.length === 0"
-      class="pl-5 pt-2 pb-2 flex items-center auth-tip">
+      class="pl-5 pt-2 pb-2 flex items-center auth-tip"
+    >
       <NeoIcon icon="spinner-third" />
       <span class="text-k-grey text-xs pl-4">
         {{ $t('walletConnect.authTip') }}
@@ -46,20 +57,24 @@
 
     <div
       v-if="walletAccountsWithProfile.length && showAccountList"
-      class="account-list">
+      class="account-list"
+    >
       <div
         v-for="option in walletAccountsWithProfile"
         :key="option.address"
-        class="account-item">
+        class="account-item"
+      >
         <a
           class="pl-5 flex items-center justify-between"
           :value="option.address"
-          @click="emitAccountChange(option)">
+          @click="emitAccountChange(option)"
+        >
           <div class="flex items-center">
             <Avatar
               :size="33"
               :value="option.address"
-              class="mr-2 image-outline" />
+              class="mr-2 image-outline"
+            />
             <div class="flex flex-col">
               <span class="text-k-grey text-xs account-name">{{
                 option.name
@@ -71,21 +86,23 @@
           </div>
           <NeoSkeleton
             v-if="isProfilesLoading"
-            class="!w-[73px] !h-[22px] mr-1"
+            class="!w-[73px] !h-[22px] mr-1 rounded-full overflow-hidden"
             width="100%"
             height="100%"
-            no-margin />
+            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">
+            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" />
+              :profile-image="option.profile?.image"
+            />
             <span
               class="text-sm max-w-[80px] text-ellipsis whitespace-nowrap overflow-hidden"
-              >{{ option.profile?.name }}</span
-            >
+            >{{ option.profile?.name }}</span>
           </div>
         </a>
       </div>
@@ -94,17 +111,17 @@
 </template>
 
 <script lang="ts" setup>
-import { WalletAccount } from '@/utils/config/wallets'
-import { BaseDotsamaWallet } from '@/utils/config/wallets/BaseDotsamaWallet'
+import { NeoIcon, NeoSkeleton } from '@kodadot1/brick'
+import { useQuery } from '@tanstack/vue-query'
+import type { WalletAccount } from '@/utils/config/wallets'
+import type { BaseDotsamaWallet } from '@/utils/config/wallets/BaseDotsamaWallet'
 import shouldUpdate from '@/utils/shouldUpdate'
 import { formatAddress } from '@/utils/account'
 import shortAddress from '@/utils/shortAddress'
 import { useWalletStore } from '@/stores/wallet'
-import { NeoIcon, NeoSkeleton } from '@kodadot1/brick'
 import Avatar from '@/components/shared/Avatar.vue'
 import NeoTag from '@/components/shared/gallery/NeoTag.vue'
 import { fetchProfilesByIds, toSubstrateAddress } from '@/services/profile'
-import { useQuery } from '@tanstack/vue-query'
 import type { Profile } from '@/services/profile'
 
 defineProps<{
@@ -134,7 +151,7 @@ const walletAccountsWithProfile = computed(() => {
     return {
       ...account,
       profile: existingProfiles.value?.find(
-        (p) => p.address === toSubstrateAddress(account.address),
+        p => p.address === toSubstrateAddress(account.address),
       ),
     }
   })
@@ -146,18 +163,7 @@ watch(walletAccounts, (newValue) => {
   }
 })
 
-const { data: existingProfiles, isLoading: isProfilesLoading } = useQuery<
-  Profile[]
->({
-  queryKey: [
-    'account-profiles',
-    computed(() => `${walletAccounts.value.sort().join(',')}`),
-  ],
-  queryFn: () =>
-    walletAccounts.value.length
-      ? fetchProfilesByIds(walletAccounts.value.map((a) => a.address))
-      : [],
-})
+const { data: existingProfiles, isLoading: isProfilesLoading } = useProfiles('account-profiles', computed(() => walletAccounts.value.map(a => a.address)))
 
 const formatAccount = (account: WalletAccount): WalletAccount => {
   return {
@@ -170,7 +176,8 @@ const onClickWallet = (wallet: BaseDotsamaWallet): void => {
   if (wallet.installed) {
     setWallet(wallet)
     showAccountList.value = !showAccountList.value
-  } else {
+  }
+  else {
     window.open(wallet.walletUrl, '_blank')
   }
 }
@@ -185,7 +192,8 @@ const setWallet = async (wallet: BaseDotsamaWallet) => {
   try {
     const data = await wallet.getAccounts()
     walletAccounts.value = data ? data.map(formatAccount) : []
-  } catch (e) {
+  }
+  catch (e) {
     isAuth.value = false
     $consola.error('init account error', e)
   }
diff --git a/composables/useProfiles.ts b/composables/useProfiles.ts
new file mode 100644
index 0000000000..2070e47823
--- /dev/null
+++ b/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,
+
+  })
+}

From 636ffface5cd09638d2716ae43b35079b232e455 Mon Sep 17 00:00:00 2001
From: Jarsen <31397967+Jarsen136@users.noreply.github.com>
Date: Tue, 23 Jul 2024 17:57:02 +0200
Subject: [PATCH 5/5] chore: remove import

---
 components/collection/activity/events/Events.vue   | 4 +---
 components/common/ConnectWallet/WalletMenuItem.vue | 4 +---
 2 files changed, 2 insertions(+), 6 deletions(-)

diff --git a/components/collection/activity/events/Events.vue b/components/collection/activity/events/Events.vue
index 4d278bb404..e8095604ed 100644
--- a/components/collection/activity/events/Events.vue
+++ b/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<{
diff --git a/components/common/ConnectWallet/WalletMenuItem.vue b/components/common/ConnectWallet/WalletMenuItem.vue
index 48cdd7c46d..e04274432b 100644
--- a/components/common/ConnectWallet/WalletMenuItem.vue
+++ b/components/common/ConnectWallet/WalletMenuItem.vue
@@ -112,7 +112,6 @@
 
 <script lang="ts" setup>
 import { NeoIcon, NeoSkeleton } from '@kodadot1/brick'
-import { useQuery } from '@tanstack/vue-query'
 import type { WalletAccount } from '@/utils/config/wallets'
 import type { BaseDotsamaWallet } from '@/utils/config/wallets/BaseDotsamaWallet'
 import shouldUpdate from '@/utils/shouldUpdate'
@@ -121,8 +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 { fetchProfilesByIds, toSubstrateAddress } from '@/services/profile'
-import type { Profile } from '@/services/profile'
+import { toSubstrateAddress } from '@/services/profile'
 
 defineProps<{
   wallet: BaseDotsamaWallet