Merge branch 'main' into follow-up-notifications

components/collection/activity/OwnerInsights.vue

@@ -4,17 +4,17 @@
       <div
         class="mr-4 is-clickable"
         :class="{ 'has-text-weight-bold': activeTab === Tabs.holders }"
-        @click="activeTab = Tabs.holders">
+        @click="changeTab(Tabs.holders)">
         {{ $t('holders') }}
       </div>
       <div
         class="is-clickable"
         :class="{ 'has-text-weight-bold': activeTab === Tabs.flippers }"
-        @click="activeTab = Tabs.flippers">
+        @click="changeTab(Tabs.flippers)">
         {{ $t('flippers') }}
       </div>
     </div>
-    <div class="py-4 limit-height is-scrollable">
+    <div ref="container" class="py-4 limit-height is-scrollable">
       <HoldersTab v-if="activeTab === Tabs.holders" :owners="owners" />
       <FlippersTab v-if="activeTab === Tabs.flippers" :flippers="flippers" />
     </div>
@@ -36,6 +36,26 @@ defineProps<{
   flippers?: Flippers
 }>()
 const activeTab = ref(Tabs.holders)
+const container = ref<HTMLDivElement | null>(null)
+
+const scrollPositions = {
+  [Tabs.holders]: 0,
+  [Tabs.flippers]: 0,
+}
+
+const changeTab = (tab: Tabs) => {
+  // Store the current scroll position
+  if (container.value) {
+    scrollPositions[activeTab.value] = container.value.scrollTop
+  }
+  // Set the new active tab and restore the previous scroll position
+  // this is done in order to optimize performance and prevent unnecessary loading
+  // since HolderTab and FlippersTab are lazy loaded
+  activeTab.value = tab
+  if (container.value) {
+    container.value.scrollTop = scrollPositions[tab]
+  }
+}
 </script>
 
 <style lang="scss" scoped>

components/collection/activity/ownerInsightsTabs/FlipperTab.vue

@@ -4,7 +4,7 @@
       v-for="[
         flipperId,
         { bestFlip, owned, totalBought, totalsold, latestflipTimestamp, flips },
-      ] in flippers"
+      ] in displayedFlippers"
       :key="flipperId"
       class="hide-last-hr">
       <div class="is-flex is-flex-direction-column gap">
@@ -67,6 +67,7 @@
       </div>
       <hr class="my-3 mx-5" />
     </div>
+    <div ref="target" />
   </div>
 </template>
 
@@ -78,6 +79,13 @@ import { format } from '@/components/collection/activity/utils'
 import NFTsDetaislDropdown from './NFTsDetaislDropdown.vue'
 import { timeAgo } from '@/components/collection/utils/timeAgo'
 import { Flippers } from '@/composables/collectionActivity/types'
+const props = defineProps<{
+  flippers?: Flippers
+}>()
+const target = ref<HTMLElement | null>(null)
+const offset = ref(4)
+
+const flippers = computed(() => Object.entries(props.flippers || {}))
 
 const toggleNFTDetails = (flipperId: string) => {
   const isOpen = isNFTDetailsOpen.value[flipperId]
@@ -86,22 +94,24 @@ const toggleNFTDetails = (flipperId: string) => {
     [flipperId]: !isOpen,
   }
 }
-const flippers = computed(() => Object.entries(props.flippers || {}))
 
+useIntersectionObserver(target, ([{ isIntersecting }]) => {
+  if (isIntersecting) {
+    offset.value += 4
+  }
+})
+
+const displayedFlippers = computed(() => flippers.value.slice(0, offset.value))
 // map of flipper id to bolean, is the NFT details section of that flipper open or nor
 // {id0: false, id1: true, id3: false, ...}
 const isFlipperMoreNFTSectionOpen = flippers.value.reduce(
-  (accumelator, [holderId, _]) => ({
+  (accumelator, [flipperId, _]) => ({
     ...accumelator,
-    [holderId]: false,
+    [flipperId]: false,
   }),
   {}
 )
 const isNFTDetailsOpen = ref(isFlipperMoreNFTSectionOpen)
-
-const props = defineProps<{
-  flippers?: Flippers
-}>()
 </script>
 
 <style lang="scss" scoped>

components/collection/activity/ownerInsightsTabs/HolderTab.vue

@@ -1,6 +1,9 @@
 <template>
   <div>
-    <div v-for="[holderId, holdings] in holders" :key="holderId" class="">
+    <div
+      v-for="[holderId, holdings] in displayedHolders"
+      :key="holderId"
+      class="">
       <div class="is-flex is-flex-direction-column gap">
         <div class="px-5">
           <ProfileLink
@@ -53,6 +56,7 @@
       </div>
       <hr class="my-3 mx-5" />
     </div>
+    <div ref="target" />
   </div>
 </template>
 
@@ -64,13 +68,15 @@ import { NeoIcon } from '@kodadot1/brick'
 import NFTsDetaislDropdown from './NFTsDetaislDropdown.vue'
 import { timeAgo } from '@/components/collection/utils/timeAgo'
 
-const toggleNFTDetails = (flipperId: string) => {
-  const isOpen = isNFTDetailsOpen.value[flipperId]
+const toggleNFTDetails = (holderId: string) => {
+  const isOpen = isNFTDetailsOpen.value[holderId]
   isNFTDetailsOpen.value = {
     ...isNFTDetailsOpen.value,
-    [flipperId]: !isOpen,
+    [holderId]: !isOpen,
   }
 }
+const target = ref<HTMLElement | null>(null)
+const offset = ref(4)
 
 const holders = computed(() =>
   Object.entries(props.owners || {}).sort(
@@ -79,6 +85,14 @@ const holders = computed(() =>
   )
 )
 
+useIntersectionObserver(target, ([{ isIntersecting }]) => {
+  if (isIntersecting) {
+    offset.value += 4
+  }
+})
+
+const displayedHolders = computed(() => holders.value.slice(0, offset.value))
+
 // map of owner id to bolean, is the NFT details section of that owner open or nor
 // {id0: false, id1: true, id3: false, ...}
 const isNFTDetailsOpen = ref(

components/collection/activity/ownerInsightsTabs/NFTSDetailsDropdown/Flipper.vue

@@ -1,7 +1,7 @@
 <template>
   <div v-if="ready" class="">
     <div
-      v-for="{ avatar, boughtPrice, soldPrice, profit, nft } in flips"
+      v-for="{ avatar, boughtPrice, soldPrice, profit, nft } in displayedFlips"
       :key="nft.id"
       class="is-flex py-2 px-5 is-justify-content-start is-hoverable-item is-flex-direction-column">
       <div class="is-flex">
@@ -11,8 +11,13 @@
           :alt="nft.name"
           width="40"
           height="40"
-          class="border mr-5" />
-        <img v-else src="/placeholder.webp" class="border mr-5" />
+          class="border mr-5 image-size" />
+        <img
+          v-else
+          src="/placeholder.webp"
+          class="border mr-5 image-size"
+          width="40"
+          height="40" />
         <span>{{ nft.name }}</span>
       </div>
       <div
@@ -41,6 +46,7 @@
         </div>
       </div>
     </div>
+    <div ref="target" />
   </div>
 </template>
 
@@ -59,13 +65,20 @@ const props = defineProps<{
 const flips = ref(props.flips)
 const ready = ref(false)
 
-onMounted(() => {
-  processNFTImages()
+const target = ref<HTMLElement | null>(null)
+const offset = ref(4)
+
+useIntersectionObserver(target, ([{ isIntersecting }]) => {
+  if (isIntersecting) {
+    offset.value += 4
+  }
 })
 
+const displayedFlips = computed(() => flips.value.slice(0, offset.value))
+
 const processNFTImages = async () => {
   if (props.flips) {
-    const promises = props.flips.map(async ({ nft }, i) => {
+    const promises = displayedFlips.value.map(async ({ nft }, i) => {
       let avatar
       if (nft.meta?.image) {
         avatar = sanitizeIpfsUrl(nft.meta.image)
@@ -82,4 +95,19 @@ const processNFTImages = async () => {
     ready.value = true
   }
 }
+
+watch(
+  offset,
+  () => {
+    processNFTImages()
+  },
+  { immediate: true }
+)
 </script>
+
+<style lang="scss" scoped>
+.image-size {
+  width: 40px !important;
+  height: 40px !important;
+}
+</style>

components/collection/activity/ownerInsightsTabs/NFTSDetailsDropdown/Holder.vue

@@ -1,7 +1,7 @@
 <template>
   <div v-if="ready" class="">
     <div
-      v-for="{ avatar, id, name, updatedAt } in nfts"
+      v-for="{ avatar, id, name, updatedAt } in displayedNFTs"
       :key="id"
       class="is-flex pt-2 px-5 is-justify-content-start is-hoverable-item">
       <div class="mr-5">
@@ -11,8 +11,13 @@
           :alt="name"
           width="40"
           height="40"
-          class="border" />
-        <img v-else src="/placeholder.webp" class="border mr-5" />
+          class="border image-size" />
+        <img
+          v-else
+          src="/placeholder.webp"
+          class="border mr-5 image-size"
+          width="40"
+          height="40" />
       </div>
       <div class="is-flex is-flex-direction-column">
         {{ name }}
@@ -21,6 +26,7 @@
         }}</span>
       </div>
     </div>
+    <div ref="target" />
   </div>
 </template>
 
@@ -38,13 +44,20 @@ const props = defineProps<{
 const nfts = ref(props.nfts)
 const ready = ref(false)
 
-onMounted(() => {
-  processNFTImages()
+const target = ref<HTMLElement | null>(null)
+const offset = ref(4)
+
+useIntersectionObserver(target, ([{ isIntersecting }]) => {
+  if (isIntersecting) {
+    offset.value += 4
+  }
 })
 
+const displayedNFTs = computed(() => nfts.value.slice(0, offset.value))
+
 const processNFTImages = async () => {
   if (props.nfts) {
-    const promises = props.nfts.map(async (nft, i) => {
+    const promises = displayedNFTs.value.map(async (nft, i) => {
       let avatar
       if (nft.meta?.image) {
         avatar = sanitizeIpfsUrl(nft.meta.image)
@@ -53,12 +66,27 @@ const processNFTImages = async () => {
         avatar = sanitizeIpfsUrl(meta?.image)
       }
 
-      nfts.value[i].avatar = avatar
+      displayedNFTs.value[i].avatar = avatar
     })
 
     await Promise.all(promises)
 
     ready.value = true
   }
 }
+
+watch(
+  offset,
+  () => {
+    processNFTImages()
+  },
+  { immediate: true }
+)
 </script>
+
+<style lang="scss" scoped>
+.image-size {
+  width: 40px !important;
+  height: 40px !important;
+}
+</style>

components/common/IdentityForm.vue

@@ -107,7 +107,6 @@ type IdentityFields = Record<string, string>
 
 const { $store, $i18n } = useNuxtApp()
 const { apiUrl, apiInstance } = useApi()
-const { urlPrefix } = usePrefix()
 const { accountId } = useAuth()
 const { howAboutToExecute, isLoading, initTransactionLoader, status } =
   useMetaTransaction()
@@ -121,13 +120,7 @@ const identity = ref<Record<string, string>>({
   legal: '',
 })
 const deposit = ref('0')
-
-const inputLengthLimit = computed(() => {
-  if (urlPrefix.value === 'bsx' || urlPrefix.value === 'snek') {
-    return 32
-  }
-  return undefined
-})
+const inputLengthLimit = ref(32)
 
 onBeforeMount(async () => {
   onApiConnect(apiUrl.value, async (api) => {