From 829f7b5630887935bb36ca458f9f661ffc1963c0 Mon Sep 17 00:00:00 2001
From: daiagi <daiagi@gmail.com>
Date: Wed, 22 Mar 2023 14:00:12 +0700
Subject: [PATCH 01/55] feat: collection activity chart

---
 components/collection/activity/activity.vue   | 22 ++++++
 .../collection/utils/useCollectionDetails.ts  | 25 +++++-
 components/rmrk/service/scheme.ts             | 10 ++-
 pages/_prefix/collection/_id/activity.vue     | 76 ++++++++++++++++++-
 pages/_prefix/collection/_id/index.vue        |  2 +-
 .../general/collectionActivityEvents.graphql  | 18 +++++
 styles/global.scss                            |  3 +
 7 files changed, 146 insertions(+), 10 deletions(-)
 create mode 100644 components/collection/activity/activity.vue
 create mode 100644 queries/subsquid/general/collectionActivityEvents.graphql

diff --git a/components/collection/activity/activity.vue b/components/collection/activity/activity.vue
new file mode 100644
index 0000000000..bddfebec80
--- /dev/null
+++ b/components/collection/activity/activity.vue
@@ -0,0 +1,22 @@
+<template>
+  <div class="is-flex is-align-self-flex-start">
+    <SidebarFilter />
+    <div class="w-full">
+      <div class="columns">
+        <div class="column is-two-thirds">
+          <GalleryItemChart :nft-events="events" />
+        </div>
+        <div class="column">Auto</div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import SidebarFilter from '@/components/explore/SidebarFilter.vue'
+import { useCollectionActivity } from '@/components/collection/utils/useCollectionDetails'
+const route = useRoute()
+
+const collectionId = computed(() => route.params.id)
+const events = useCollectionActivity({ collectionId: collectionId.value })
+</script>
diff --git a/components/collection/utils/useCollectionDetails.ts b/components/collection/utils/useCollectionDetails.ts
index 7f95a79ced..8e48b48903 100644
--- a/components/collection/utils/useCollectionDetails.ts
+++ b/components/collection/utils/useCollectionDetails.ts
@@ -1,5 +1,9 @@
 import { getVolume } from '@/utils/math'
-import { CollectionMetadata, NFT } from '@/components/rmrk/service/scheme'
+import {
+  ActivityInteraction,
+  CollectionMetadata,
+  NFT,
+} from '@/components/rmrk/service/scheme'
 import { NFTListSold } from '@/components/identity/utils/useIdentity'
 import { chainsSupportingOffers } from './useCollectionDetails.config'
 
@@ -149,3 +153,22 @@ export const useCollectionMinimal = ({ collectionId }) => {
   })
   return { collection }
 }
+
+export const useCollectionActivity = ({ collectionId }) => {
+  const events = ref<ActivityInteraction[]>()
+
+  const { data } = useGraphql({
+    queryPrefix: 'subsquid',
+    queryName: 'collectionActivityEvents',
+    variables: {
+      id: collectionId,
+    },
+  })
+
+  watch(data, (result) => {
+    if (result?.collection) {
+      events.value = result.collection.nfts.map((nft) => nft.events).flat()
+    }
+  })
+  return events
+}
diff --git a/components/rmrk/service/scheme.ts b/components/rmrk/service/scheme.ts
index ff4d4bb84d..9fb57b34d5 100644
--- a/components/rmrk/service/scheme.ts
+++ b/components/rmrk/service/scheme.ts
@@ -176,15 +176,17 @@ export type EntityWithId = {
   name: string
 }
 
-export interface Interaction {
-  blockNumber: string | number
-  caller: string
-  currentOwner: string
+export interface ActivityInteraction {
   id: string
   interaction: string
   meta: string
   timestamp: string
 }
+export interface Interaction extends ActivityInteraction {
+  blockNumber: string | number
+  caller: string
+  currentOwner: string
+}
 
 export interface BasePack {
   _id: string
diff --git a/pages/_prefix/collection/_id/activity.vue b/pages/_prefix/collection/_id/activity.vue
index b3c7314ded..64dec956c7 100644
--- a/pages/_prefix/collection/_id/activity.vue
+++ b/pages/_prefix/collection/_id/activity.vue
@@ -1,11 +1,79 @@
 <template>
-  <div>activity menu</div>
+  <div
+    class="container is-fluid"
+    :class="{ 'sidebar-padding-left': isSidebarOpen }">
+    <Activity />
+  </div>
 </template>
 
 <script lang="ts">
-export default {
-  layout: 'explore-layout',
+import Activity from '@/components/collection/activity/activity.vue'
+import ExperimentMixin from '@/utils/mixins/experimentMixin'
+import { Component, mixins } from 'nuxt-property-decorator'
+import { useHistoryStore } from '@/stores/history'
+import { generateCollectionImage } from '@/utils/seoImageGenerator'
+import { CurrentCollection } from './index.vue'
+import { usePreferencesStore } from '@/stores/preferences'
+
+@Component<CollectionActivityPage>({
+  name: 'CollectionActivityPage',
+  components: {
+    Activity,
+  },
+  layout() {
+    return 'explore-layout'
+  },
+  head() {
+    const title = this.currentlyViewedCollection.name
+    const metaData = {
+      title,
+      type: 'profile',
+      description: this.currentlyViewedCollection.description,
+      url: this.$route.path,
+      image: this.image,
+    }
+    return {
+      title,
+      meta: [...this.$seoMeta(metaData)],
+    }
+  },
+})
+export default class CollectionActivityPage extends mixins(ExperimentMixin) {
+  private historyStore = useHistoryStore()
+  get preferencesStore() {
+    return usePreferencesStore()
+  }
+  get isSidebarOpen() {
+    return this.preferencesStore.getsidebarFilterCollapse
+  }
+
+  get currentlyViewedCollection(): CurrentCollection {
+    return this.historyStore.getCurrentlyViewedCollection
+  }
+
+  get image(): string {
+    return generateCollectionImage(
+      this.currentlyViewedCollection.name,
+      this.currentlyViewedCollection.numberOfItems,
+      this.currentlyViewedCollection.image
+    )
+  }
 }
 </script>
 
-<style scoped></style>
+<style lang="scss" scoped>
+@import '@/styles/abstracts/variables';
+
+.sidebar-padding-left {
+  padding-left: 0;
+}
+
+// this cover the edge case where sidebar is open and then screen size changes to mobile
+// for exmpale on rotation of tablet device
+// in that case the padding need to match that of the fluid container
+@include mobile {
+  .sidebar-padding-left {
+    padding-left: $fluid-container-padding-mobile;
+  }
+}
+</style>
diff --git a/pages/_prefix/collection/_id/index.vue b/pages/_prefix/collection/_id/index.vue
index fdbb48eeed..abda2e9bda 100644
--- a/pages/_prefix/collection/_id/index.vue
+++ b/pages/_prefix/collection/_id/index.vue
@@ -17,7 +17,7 @@ import Items from '@/components/items/Items.vue'
 import { useHistoryStore } from '@/stores/history'
 import { usePreferencesStore } from '@/stores/preferences'
 
-type CurrentCollection = {
+export type CurrentCollection = {
   name: string
   numberOfItems: number
   image: string
diff --git a/queries/subsquid/general/collectionActivityEvents.graphql b/queries/subsquid/general/collectionActivityEvents.graphql
new file mode 100644
index 0000000000..e96208e09b
--- /dev/null
+++ b/queries/subsquid/general/collectionActivityEvents.graphql
@@ -0,0 +1,18 @@
+query collectionActivityEvents($id: String!) {
+  collection: collectionEntityById(id: $id) {
+    id
+    nfts {
+      events(
+        where: {
+          interaction_eq: MINT
+          OR: { interaction_eq: LIST, OR: { interaction_eq: BUY } }
+        }
+      ) {
+        timestamp
+        meta
+        interaction
+        id
+      }
+    }
+  }
+}
diff --git a/styles/global.scss b/styles/global.scss
index 093cef6a36..e64d646084 100644
--- a/styles/global.scss
+++ b/styles/global.scss
@@ -220,6 +220,9 @@ body {
   height: 100%;
 }
 
+.w-full {
+  width: 100%;
+}
 hr {
   height: 1px;
   @include ktheme() {

From b030b79ddc46e1a550c6452a1f9a915bf945fc86 Mon Sep 17 00:00:00 2001
From: daiagi <daiagi@gmail.com>
Date: Wed, 22 Mar 2023 14:00:47 +0700
Subject: [PATCH 02/55] remove controls on activity tab

---
 components/explore/Controls.vue        | 8 ++++----
 components/explore/DesktopControls.vue | 5 ++++-
 components/explore/MobileControls.vue  | 8 ++++++--
 3 files changed, 14 insertions(+), 7 deletions(-)

diff --git a/components/explore/Controls.vue b/components/explore/Controls.vue
index c5387d9017..e7cdefe0e3 100644
--- a/components/explore/Controls.vue
+++ b/components/explore/Controls.vue
@@ -1,11 +1,11 @@
 <template>
   <div>
-    <MobileIndex class="is-hidden-tablet" />
-    <DesktopIndex class="is-hidden-mobile" />
+    <MobileControls class="is-hidden-tablet" />
+    <DesktopControls class="is-hidden-mobile" />
   </div>
 </template>
 
 <script setup lang="ts">
-import DesktopIndex from './DesktopControls.vue'
-import MobileIndex from './MobileControls.vue'
+import DesktopControls from './DesktopControls.vue'
+import MobileControls from './MobileControls.vue'
 </script>
diff --git a/components/explore/DesktopControls.vue b/components/explore/DesktopControls.vue
index 8893105e95..8872ea91f9 100644
--- a/components/explore/DesktopControls.vue
+++ b/components/explore/DesktopControls.vue
@@ -2,7 +2,7 @@
   <div class="explore is-flex is-flex-wrap-wrap">
     <FilterMenuButton />
     <ExploreTabs />
-    <div class="explore-menu is-flex">
+    <div v-if="!isActivityTab" class="explore-menu is-flex">
       <ExploreSort />
       <ExploreOffer class="is-flex-grow-1" />
       <ExploreChain v-if="!route.name?.includes('prefix-collection-id')" />
@@ -24,6 +24,9 @@ const route = useRoute()
 const isCollection = computed(() =>
   route.name?.includes('prefix-explore-collectibles')
 )
+const isActivityTab = computed(() =>
+  route.name?.includes('prefix-collection-id-activity')
+)
 </script>
 
 <style lang="scss" scoped>
diff --git a/components/explore/MobileControls.vue b/components/explore/MobileControls.vue
index b737f81a97..cac533b6ec 100644
--- a/components/explore/MobileControls.vue
+++ b/components/explore/MobileControls.vue
@@ -3,11 +3,11 @@
     <ExploreTabs />
     <div class="explore-menu is-flex">
       <FilterMenuButton />
-      <ExploreOffer class="is-flex-grow-1" />
+      <ExploreOffer v-if="!isActivityTab" class="is-flex-grow-1" />
       <ExploreChain
         v-if="!route.name?.includes('prefix-collection-id')"
         class="flex-grow-1" />
-      <ExploreSort />
+      <ExploreSort v-if="!isActivityTab" />
     </div>
   </div>
 </template>
@@ -20,6 +20,10 @@ import ExploreOffer from './ExploreOffer.vue'
 import FilterMenuButton from './FilterMenuButton.vue'
 
 const route = useRoute()
+
+const isActivityTab = computed(() =>
+  route.name?.includes('prefix-collection-id-activity')
+)
 </script>
 
 <style lang="scss" scoped>

From 66b19b814e880e3085911e977b2e3b09a88e6bf5 Mon Sep 17 00:00:00 2001
From: daiagi <daiagi@gmail.com>
Date: Thu, 23 Mar 2023 21:40:04 +0700
Subject: [PATCH 03/55] feat: holders tab

---
 components/chart/PriceChart.vue               |   5 +-
 components/collection/activity/Activity.vue   |  38 ++++
 components/collection/activity/Chart.vue      |  11 +
 .../collection/activity/OwnerInsights.vue     |  53 +++++
 components/collection/activity/activity.vue   |  22 --
 .../holdersFlippersTabs/FlipperTab.vue        |  15 ++
 .../holdersFlippersTabs/HolderTab.vue         | 103 +++++++++
 .../activity/holdersFlippersTabs/moreNFTS.vue |  87 ++++++++
 components/collection/activity/utils.ts       |  17 ++
 .../collection/utils/useCollectionDetails.ts  | 198 +++++++++++++++++-
 locales/en.json                               |   1 +
 pages/_prefix/collection/_id/activity.vue     |   2 +-
 .../general/collectionActivityEvents.graphql  |  19 +-
 styles/global.scss                            |   5 +
 14 files changed, 542 insertions(+), 34 deletions(-)
 create mode 100644 components/collection/activity/Activity.vue
 create mode 100644 components/collection/activity/Chart.vue
 create mode 100644 components/collection/activity/OwnerInsights.vue
 delete mode 100644 components/collection/activity/activity.vue
 create mode 100644 components/collection/activity/holdersFlippersTabs/FlipperTab.vue
 create mode 100644 components/collection/activity/holdersFlippersTabs/HolderTab.vue
 create mode 100644 components/collection/activity/holdersFlippersTabs/moreNFTS.vue
 create mode 100644 components/collection/activity/utils.ts

diff --git a/components/chart/PriceChart.vue b/components/chart/PriceChart.vue
index c414dce898..feda2979f1 100644
--- a/components/chart/PriceChart.vue
+++ b/components/chart/PriceChart.vue
@@ -4,7 +4,10 @@
       >Price ({{ chainSymbol }})
     </span>
     <NeoDropdown class="py-0">
-      <NeoButton :label="selectedTimeRange.label" class="time-range-button" />
+      <NeoButton
+        :label="selectedTimeRange.label"
+        class="time-range-button"
+        no-shadow />
 
       <template #items>
         <NeoDropdownItem
diff --git a/components/collection/activity/Activity.vue b/components/collection/activity/Activity.vue
new file mode 100644
index 0000000000..9fb9657b00
--- /dev/null
+++ b/components/collection/activity/Activity.vue
@@ -0,0 +1,38 @@
+<template>
+  <div class="is-flex is-align-self-flex-start">
+    <SidebarFilter />
+    <div class="w-full mt-5">
+      <div class="columns">
+        <div class="column is-two-thirds">
+          <ActivityChart :events="events" />
+        </div>
+        <div class="column">
+          <OwnerInsights :owners="owners" :flippers="flippers" />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import SidebarFilter from '@/components/explore/SidebarFilter.vue'
+import ActivityChart from './Chart.vue'
+import OwnerInsights from './OwnerInsights.vue'
+
+import { useCollectionActivity } from '@/components/collection/utils/useCollectionDetails'
+const route = useRoute()
+
+const collectionId = computed(() => route.params.id)
+const { events, flippers, owners } = useCollectionActivity({
+  collectionId: collectionId.value,
+})
+</script>
+
+<style lang="scss" scoped>
+@import '@/styles/abstracts/variables';
+
+.fixed-height {
+  height: 350px;
+}
+</style>
+a
diff --git a/components/collection/activity/Chart.vue b/components/collection/activity/Chart.vue
new file mode 100644
index 0000000000..13ebe07be8
--- /dev/null
+++ b/components/collection/activity/Chart.vue
@@ -0,0 +1,11 @@
+<template>
+  <GalleryItemChart :nft-events="events" />
+</template>
+
+<script setup lang="ts">
+import { ActivityInteraction } from '@/components/rmrk/service/scheme'
+
+defineProps<{
+  events?: ActivityInteraction[]
+}>()
+</script>
diff --git a/components/collection/activity/OwnerInsights.vue b/components/collection/activity/OwnerInsights.vue
new file mode 100644
index 0000000000..521f5ca698
--- /dev/null
+++ b/components/collection/activity/OwnerInsights.vue
@@ -0,0 +1,53 @@
+<template>
+  <div class="fixed-height border">
+    <div class="py-4 px-5 is-flex border-bottom" aria-label="controls">
+      <div
+        class="mr-4 is-clickable"
+        :class="{ 'has-text-weight-bold': activeTab === Tabs.Holders }"
+        @click="activeTab = Tabs.Holders">
+        {{ $t('holders') }}
+      </div>
+      <div
+        class="is-clickable"
+        :class="{ 'has-text-weight-bold': activeTab === Tabs.Flippers }"
+        @click="activeTab = Tabs.Flippers">
+        {{ $t('flippers') }}
+      </div>
+    </div>
+    <div class="py-4 px-5 limit-height is-scrollable">
+      <HoldersTab v-if="activeTab === Tabs.Holders" :owners="owners" />
+      <FlippersTab v-if="activeTab === Tabs.Flippers" :flippers="flippers" />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import HoldersTab from './holdersFlippersTabs/HolderTab.vue'
+import FlippersTab from './holdersFlippersTabs/FlipperTab.vue'
+import { Flippers, Owners } from '../utils/useCollectionDetails'
+
+enum Tabs {
+  Holders,
+  Flippers,
+}
+
+defineProps<{
+  owners?: Owners
+  flippers?: Flippers
+}>()
+const activeTab = ref(Tabs.Holders)
+</script>
+
+<style lang="scss" scoped>
+@import '@/styles/abstracts/variables';
+
+.fixed-height {
+  height: 350px;
+}
+.limit-height {
+  max-height: 290px;
+}
+.is-scrollable {
+  overflow-y: auto;
+}
+</style>
diff --git a/components/collection/activity/activity.vue b/components/collection/activity/activity.vue
deleted file mode 100644
index bddfebec80..0000000000
--- a/components/collection/activity/activity.vue
+++ /dev/null
@@ -1,22 +0,0 @@
-<template>
-  <div class="is-flex is-align-self-flex-start">
-    <SidebarFilter />
-    <div class="w-full">
-      <div class="columns">
-        <div class="column is-two-thirds">
-          <GalleryItemChart :nft-events="events" />
-        </div>
-        <div class="column">Auto</div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import SidebarFilter from '@/components/explore/SidebarFilter.vue'
-import { useCollectionActivity } from '@/components/collection/utils/useCollectionDetails'
-const route = useRoute()
-
-const collectionId = computed(() => route.params.id)
-const events = useCollectionActivity({ collectionId: collectionId.value })
-</script>
diff --git a/components/collection/activity/holdersFlippersTabs/FlipperTab.vue b/components/collection/activity/holdersFlippersTabs/FlipperTab.vue
new file mode 100644
index 0000000000..8d75e07086
--- /dev/null
+++ b/components/collection/activity/holdersFlippersTabs/FlipperTab.vue
@@ -0,0 +1,15 @@
+<template>
+  <div>Flippers</div>
+</template>
+
+<script setup lang="ts">
+import { Flippers } from '@/components/collection/utils/useCollectionDetails'
+
+defineProps<{
+  flippers?: Flippers
+}>()
+</script>
+
+<style lang="scss" scoped>
+@import '@/styles/abstracts/variables';
+</style>
diff --git a/components/collection/activity/holdersFlippersTabs/HolderTab.vue b/components/collection/activity/holdersFlippersTabs/HolderTab.vue
new file mode 100644
index 0000000000..dad2851124
--- /dev/null
+++ b/components/collection/activity/holdersFlippersTabs/HolderTab.vue
@@ -0,0 +1,103 @@
+<template>
+  <div>
+    <div
+      v-for="[holderId, holdings] in holders"
+      :key="holderId"
+      class="hide-last-hr">
+      <div class="is-flex is-flex-direction-column gap">
+        <ProfileLink :address="holderId" />
+        <div class="is-flex is-justify-content-space-between">
+          <span class="is-size-7 k-grey">Owned</span>
+          <span>{{ holdings.nftCount }}</span>
+        </div>
+        <div class="is-flex is-justify-content-space-between">
+          <span class="is-size-7 k-grey">Total Bought</span>
+          <Money :value="holdings.totalBought" />
+        </div>
+        <div class="is-flex is-justify-content-space-between">
+          <span class="is-size-7 k-grey">Total Sold</span>
+          <span>??</span>
+        </div>
+        <div class="is-flex is-justify-content-space-between">
+          <span class="is-size-7 k-grey">Date</span>
+          <span>{{ timeAgo(holdings.lastActivityTimestamp) }}</span>
+        </div>
+        <div>
+          <div
+            class="is-size-7 k-blue is-clickable"
+            @click="toggleNFTDetails(holderId)">
+            NFT details
+            <NeoIcon
+              :icon="
+                isNFTDetailsOpen[holderId] ? 'chevron-down' : 'chevron-right'
+              " />
+          </div>
+
+          <div v-if="isNFTDetailsOpen[holderId]">
+            <MoreNFTS :nfts="holdings.nfts" />
+          </div>
+        </div>
+      </div>
+      <hr class="my-3" />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import ProfileLink from '@/components/rmrk/Profile/ProfileLink.vue'
+import { Owners } from '@/components/collection/utils/useCollectionDetails'
+import Money from '@/components/shared/format/ChainMoney.vue'
+import { NeoIcon } from '@kodadot1/brick'
+import { set } from 'vue'
+
+import MoreNFTS from './moreNFTS.vue'
+import { timeAgo } from '../utils'
+
+const toggleNFTDetails = (holderId: string) => {
+  const isOpen = isNFTDetailsOpen.value[holderId]
+  set(isNFTDetailsOpen.value, holderId, !isOpen)
+}
+
+const holders = computed(() => Object.entries(props.owners || {}))
+
+// 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(
+  holders.value.reduce(
+    (isOpen, [holderId, _]) => ({
+      ...isOpen,
+      [holderId]: false,
+    }),
+    {}
+  )
+)
+
+const props = defineProps<{
+  owners?: Owners
+}>()
+</script>
+
+<style lang="scss" scoped>
+@import '@/styles/abstracts/variables';
+.gap {
+  gap: 0.5rem;
+}
+.hide-last-hr:last-child > hr {
+  display: none;
+}
+.k-blue {
+  @include ktheme() {
+    color: theme('k-blue');
+  }
+  &:hover {
+    @include ktheme() {
+      color: theme('k-blue-hover');
+    }
+  }
+}
+.k-grey {
+  @include ktheme() {
+    color: theme('k-grey');
+  }
+}
+</style>
diff --git a/components/collection/activity/holdersFlippersTabs/moreNFTS.vue b/components/collection/activity/holdersFlippersTabs/moreNFTS.vue
new file mode 100644
index 0000000000..5d82351e8b
--- /dev/null
+++ b/components/collection/activity/holdersFlippersTabs/moreNFTS.vue
@@ -0,0 +1,87 @@
+<template>
+  <div v-if="ready" class="-mx-5">
+    <div
+      v-for="{ avatar, id, name, updatedAt } in nfts"
+      :key="id"
+      class="is-flex pt-2 px-5 is-justify-content-start is-hoverable">
+      <div class="mr-2rem">
+        <img
+          v-if="avatar"
+          :src="avatar"
+          :alt="name"
+          width="40"
+          height="40"
+          class="border" />
+        <img v-else src="/placeholder.webp" class="border" />
+      </div>
+      <div class="is-flex is-flex-direction-column">
+        {{ name }}
+        <span class="is-size-7 k-grey">{{
+          timeAgo(new Date(updatedAt).getTime())
+        }}</span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { sanitizeIpfsUrl } from '~~/utils/ipfs'
+import { processSingleMetadata } from '~~/utils/cachingStrategy'
+import { NFTMetadata } from '~~/components/rmrk/service/scheme'
+import { NFTExcludingEvents } from '@/components/collection/utils/useCollectionDetails'
+import { timeAgo } from '../utils'
+
+const props = defineProps<{
+  nfts: (NFTExcludingEvents & { avatar?: string })[]
+}>()
+
+const nfts = ref(props.nfts)
+const ready = ref(false)
+
+onMounted(() => {
+  processNFTImages()
+})
+
+const processNFTImages = async () => {
+  if (props.nfts) {
+    const promises = props.nfts.map(async (nft) => {
+      let avatar
+      if (nft?.meta?.image) {
+        avatar = sanitizeIpfsUrl(nft.meta.image)
+      } else {
+        const meta = (await processSingleMetadata(nft.metadata)) as NFTMetadata
+        avatar = sanitizeIpfsUrl(meta?.image)
+      }
+      const nftIndex = nfts.value?.findIndex(({ id }) => id === nft.id)
+      nfts.value[nftIndex].avatar = avatar
+    })
+
+    await Promise.all(promises)
+
+    ready.value = true
+  }
+}
+</script>
+
+<style scoped lang="scss">
+@import '@/styles/abstracts/variables';
+
+.mr-2rem {
+  margin-right: 2rem;
+}
+.k-grey {
+  @include ktheme() {
+    color: theme('k-grey');
+  }
+}
+.-mx-5 {
+  margin: 0 -1.5rem !important;
+}
+.is-hoverable {
+  @include ktheme() {
+    &:hover {
+      background-color: theme('k-accentlight2');
+    }
+  }
+}
+</style>
diff --git a/components/collection/activity/utils.ts b/components/collection/activity/utils.ts
new file mode 100644
index 0000000000..6ad6e219f7
--- /dev/null
+++ b/components/collection/activity/utils.ts
@@ -0,0 +1,17 @@
+export const timeAgo = (timestamp: number): string => {
+  const now = new Date().getTime()
+  const secondsSince = Math.floor((now - timestamp) / 1000)
+  if (secondsSince < 60) {
+    return `${secondsSince} Second${secondsSince !== 1 ? 's' : ''} Ago`
+  }
+  const minutesSince = Math.floor(secondsSince / 60)
+  if (minutesSince < 60) {
+    return `${minutesSince} Minute${minutesSince !== 1 ? 's' : ''} Ago`
+  }
+  const hoursSince = Math.floor(minutesSince / 60)
+  if (hoursSince < 24) {
+    return `${hoursSince} Hour${hoursSince !== 1 ? 's' : ''} Ago`
+  }
+  const daysSince = Math.floor(hoursSince / 24)
+  return `${daysSince} Day${daysSince !== 1 ? 's' : ''} Ago`
+}
diff --git a/components/collection/utils/useCollectionDetails.ts b/components/collection/utils/useCollectionDetails.ts
index 8e48b48903..1c2313a2bd 100644
--- a/components/collection/utils/useCollectionDetails.ts
+++ b/components/collection/utils/useCollectionDetails.ts
@@ -1,11 +1,13 @@
 import { getVolume } from '@/utils/math'
 import {
-  ActivityInteraction,
   CollectionMetadata,
+  Interaction as InteractionType,
   NFT,
+  NFTMetadata,
 } from '@/components/rmrk/service/scheme'
 import { NFTListSold } from '@/components/identity/utils/useIdentity'
 import { chainsSupportingOffers } from './useCollectionDetails.config'
+import { Interaction } from '@kodadot1/minimark'
 
 type Stats = {
   listedCount?: number
@@ -153,9 +155,48 @@ export const useCollectionMinimal = ({ collectionId }) => {
   })
   return { collection }
 }
+export type NFTExcludingEvents = {
+  currentOwner: string
+  name: string
+  price?: string
+  metadata: string
+  meta: NFTMetadata
+  updatedAt: string
+  id: string
+}
+type InteractionWithNFT = InteractionType & {
+  nft: NFTExcludingEvents
+}
+type NFTMap = {
+  [nftId: string]: {
+    owner: string
+    nft: NFTExcludingEvents
+    latestInteraction: Interaction
+    latestPrice: number
+  }
+}
+export type Flippers = {
+  [identity: string]: {
+    nftId: string
+    soldPrice: number
+    soldTo: string
+    sellTimeStamp: number
+    boughtPrice: number
+  }[]
+}
+export type Owners = {
+  [identity: string]: {
+    nftCount: number
+    totalBought: number
+    nfts: NFTExcludingEvents[]
+    lastActivityTimestamp: number
+  }
+}
 
 export const useCollectionActivity = ({ collectionId }) => {
-  const events = ref<ActivityInteraction[]>()
+  const events = ref<InteractionWithNFT[]>()
+  const owners = ref<Owners>()
+  const flippers = ref<Flippers>()
 
   const { data } = useGraphql({
     queryPrefix: 'subsquid',
@@ -167,8 +208,157 @@ export const useCollectionActivity = ({ collectionId }) => {
 
   watch(data, (result) => {
     if (result?.collection) {
-      events.value = result.collection.nfts.map((nft) => nft.events).flat()
+      // flat events for chart
+      const interactions: InteractionWithNFT[] = result.collection.nfts
+        .map((nft) =>
+          nft.events.map((e) => ({ ...e, nft: { ...nft, events: undefined } }))
+        )
+        .flat()
+      events.value = interactions
+      owners.value = getOwners(result.collection.nfts)
+      flippers.value = getFlippers(interactions)
+    }
+  })
+  return {
+    events,
+    owners,
+    flippers,
+  }
+}
+
+const getOwners = (nfts) => {
+  const owners: Owners = {}
+
+  nfts.forEach((nft) => {
+    const interactions = nft.events.map((e) => e.interaction)
+    const { events, ...nftExcludingEvents } = nft
+
+    if (interactions.includes(Interaction.CONSUME)) {
+      // no owner
+      return
+    }
+    if (
+      interactions.includes(Interaction.BUY) ||
+      interactions.includes(Interaction.SEND)
+    ) {
+      // NFT changed hands
+      const latestInteraction = events[events.length - 1]
+      const lastestTimeStamp = new Date(latestInteraction.timestamp).getTime()
+
+      const owner = owners[nft.currentOwner]
+      if (owner) {
+        // update entry
+        owner.nftCount++
+        owner.totalBought += parseInt(latestInteraction.meta)
+        owner.lastActivityTimestamp =
+          lastestTimeStamp > owner.lastActivityTimestamp
+            ? lastestTimeStamp
+            : owner.lastActivityTimestamp
+        owner.nfts = [...owner.nfts, nftExcludingEvents]
+        return
+      }
+      // new owner entry
+      owners[nft.currentOwner] = {
+        nftCount: 1,
+        totalBought: parseInt(latestInteraction.meta),
+        lastActivityTimestamp: lastestTimeStamp,
+        nfts: [nftExcludingEvents],
+      }
+      return
+    }
+
+    // nft isn't consumed and it hasn't change hands => it is owned by it's creator
+    const mintInteraction = events[0]
+    const mintTimeStamp = new Date(mintInteraction.timestamp).getTime()
+    const owner = owners[nft.currentOwner]
+
+    if (owner) {
+      // update entry
+      owner.nftCount++
+      owner.lastActivityTimestamp =
+        mintTimeStamp > owner.lastActivityTimestamp
+          ? mintTimeStamp
+          : owner.lastActivityTimestamp
+      owner.nfts = [...owner.nfts, nftExcludingEvents]
+      return
+    }
+    // new owner entry
+    owners[nft.currentOwner] = {
+      nftCount: 1,
+      totalBought: 0,
+      lastActivityTimestamp: mintTimeStamp,
+      nfts: [nftExcludingEvents],
+    }
+  })
+  return owners
+}
+
+const preProccessForFindingFlippers = (interactions: InteractionWithNFT[]) => {
+  const changeHandsInteractions: InteractionWithNFT[] = []
+  const NFTS: NFTMap = {}
+
+  interactions.forEach((event) => {
+    if (event.interaction === Interaction.MINTNFT) {
+      // mintInteractions.push(event)
+      NFTS[event.nft.id] = {
+        owner: event.caller,
+        nft: event.nft,
+        latestInteraction: Interaction.MINTNFT,
+        latestPrice: 0,
+      }
+    }
+
+    if (
+      event.interaction === Interaction.SEND ||
+      event.interaction === Interaction.BUY
+    ) {
+      changeHandsInteractions.push(event)
+    }
+  })
+
+  return { NFTS, changeHandsInteractions }
+}
+
+const getFlippers = (interactions: InteractionWithNFT[]) => {
+  const { NFTS, changeHandsInteractions } =
+    preProccessForFindingFlippers(interactions)
+
+  const flippers: Flippers = {}
+  changeHandsInteractions.forEach((interaction) => {
+    if (interaction.interaction === Interaction.SEND) {
+      NFTS[interaction.nft.id].owner = interaction.meta
+      NFTS[interaction.nft.id].latestInteraction = Interaction.SEND
+    }
+    if (interaction.interaction === Interaction.BUY) {
+      //it's a Flip!
+      const nftId = interaction.nft.id
+      const PreviousNFTState = NFTS[nftId]
+      const baseInfo = {
+        nftId,
+        soldPrice: parseInt(interaction.meta),
+        soldTo: interaction.caller,
+        sellTimeStamp: new Date(interaction.timestamp).getTime(),
+      }
+
+      //nft has been bought from previous owner -> previous owner is the flipper
+      const flipperHistory = flippers[PreviousNFTState.owner] || []
+      const thisFlip = {
+        ...baseInfo,
+        boughtPrice:
+          PreviousNFTState.latestInteraction === Interaction.BUY
+            ? PreviousNFTState.latestPrice
+            : 0,
+      }
+      flippers[PreviousNFTState.owner] = [...flipperHistory, thisFlip]
+
+      // update last state of NFT
+      NFTS[nftId] = {
+        ...PreviousNFTState,
+        owner: interaction.caller,
+        latestInteraction: interaction.interaction,
+        latestPrice: parseInt(interaction.meta),
+      }
     }
   })
-  return events
+  return flippers
 }
diff --git a/locales/en.json b/locales/en.json
index 7617d8085d..2de7873101 100644
--- a/locales/en.json
+++ b/locales/en.json
@@ -18,6 +18,7 @@
   "transfer": "Transfer",
   "chart": "Chart",
   "holders": "Holders",
+  "flippers": "Flippers",
   "assets": "Assets",
   "incomingOffers": "Incoming Offers",
   "transform": "Transform",
diff --git a/pages/_prefix/collection/_id/activity.vue b/pages/_prefix/collection/_id/activity.vue
index 64dec956c7..c105b890cb 100644
--- a/pages/_prefix/collection/_id/activity.vue
+++ b/pages/_prefix/collection/_id/activity.vue
@@ -7,7 +7,7 @@
 </template>
 
 <script lang="ts">
-import Activity from '@/components/collection/activity/activity.vue'
+import Activity from '@/components/collection/activity/Activity.vue'
 import ExperimentMixin from '@/utils/mixins/experimentMixin'
 import { Component, mixins } from 'nuxt-property-decorator'
 import { useHistoryStore } from '@/stores/history'
diff --git a/queries/subsquid/general/collectionActivityEvents.graphql b/queries/subsquid/general/collectionActivityEvents.graphql
index e96208e09b..350096edce 100644
--- a/queries/subsquid/general/collectionActivityEvents.graphql
+++ b/queries/subsquid/general/collectionActivityEvents.graphql
@@ -2,17 +2,24 @@ query collectionActivityEvents($id: String!) {
   collection: collectionEntityById(id: $id) {
     id
     nfts {
-      events(
-        where: {
-          interaction_eq: MINT
-          OR: { interaction_eq: LIST, OR: { interaction_eq: BUY } }
-        }
-      ) {
+      events(orderBy: timestamp_ASC) {
         timestamp
         meta
         interaction
         id
+        caller
+        currentOwner
       }
+      currentOwner
+      name
+      price
+      metadata
+      meta {
+        id
+        image
+      }
+      updatedAt
+      id
     }
   }
 }
diff --git a/styles/global.scss b/styles/global.scss
index e64d646084..a0fe28291a 100644
--- a/styles/global.scss
+++ b/styles/global.scss
@@ -296,3 +296,8 @@ hr {
     border-top: 1px solid theme('border-color');
   }
 }
+.border {
+  @include ktheme() {
+    border: 1px solid theme('border-color')
+  }
+}

From ef606dd795ceacaeb72e6b4caa47e191b86a99d8 Mon Sep 17 00:00:00 2001
From: daiagi <daiagi@gmail.com>
Date: Thu, 23 Mar 2023 23:00:26 +0700
Subject: [PATCH 04/55] feat: flippers tab

---
 .../holdersFlippersTabs/FlipperTab.vue        | 111 +++++++++++++++++-
 .../collection/utils/useCollectionDetails.ts  |  65 ++++++++--
 2 files changed, 165 insertions(+), 11 deletions(-)

diff --git a/components/collection/activity/holdersFlippersTabs/FlipperTab.vue b/components/collection/activity/holdersFlippersTabs/FlipperTab.vue
index 8d75e07086..95d035e8fe 100644
--- a/components/collection/activity/holdersFlippersTabs/FlipperTab.vue
+++ b/components/collection/activity/holdersFlippersTabs/FlipperTab.vue
@@ -1,15 +1,122 @@
 <template>
-  <div>Flippers</div>
+  <div>
+    <div
+      v-for="[
+        flipperId,
+        { bestFlip, owned, totalBought, totalsold, latestflipTimestamp, flips },
+      ] in flippers"
+      :key="flipperId"
+      class="hide-last-hr">
+      <div class="is-flex is-flex-direction-column gap">
+        <ProfileLink :address="flipperId" />
+        <div class="is-flex is-justify-content-space-between">
+          <span class="is-size-7 k-grey">Owned</span>
+          <span>{{ owned }}</span>
+        </div>
+        <div class="is-flex is-justify-content-space-between">
+          <span class="is-size-7 k-grey">Total Bought</span>
+          <Money :value="totalBought" />
+        </div>
+        <div class="is-flex is-justify-content-space-between">
+          <span class="is-size-7 k-grey">Total Sold</span>
+          <Money :value="totalsold" />
+        </div>
+        <div class="is-flex is-justify-content-space-between">
+          <span class="is-size-7 k-grey">Best Flip</span>
+          <span :class="{ 'k-green': bestFlip > 0, 'k-red': bestFlip < 0 }">{{
+            bestFlip === 0 ? '--' : `${bestFlip}%`
+          }}</span>
+        </div>
+        <div class="is-flex is-justify-content-space-between">
+          <span class="is-size-7 k-grey">Latest Activity</span>
+          <span>{{ timeAgo(latestflipTimestamp) }}</span>
+        </div>
+        <div>
+          <div
+            class="is-size-7 k-blue is-clickable"
+            @click="toggleNFTDetails(flipperId)">
+            NFT details
+            <NeoIcon
+              :icon="
+                isNFTDetailsOpen[flipperId] ? 'chevron-down' : 'chevron-right'
+              " />
+          </div>
+
+          <div v-if="isNFTDetailsOpen[flipperId]">
+            <MoreNFTS :nfts="flips.map((flip) => flip.nft)" />
+          </div>
+        </div>
+      </div>
+      <hr class="my-3" />
+    </div>
+  </div>
 </template>
 
 <script setup lang="ts">
 import { Flippers } from '@/components/collection/utils/useCollectionDetails'
+import ProfileLink from '@/components/rmrk/Profile/ProfileLink.vue'
+import Money from '@/components/shared/format/ChainMoney.vue'
+import { NeoIcon } from '@kodadot1/brick'
+import { set } from 'vue'
+
+import MoreNFTS from './moreNFTS.vue'
+import { timeAgo } from '../utils'
+
+const toggleNFTDetails = (flipperId: string) => {
+  const isOpen = isNFTDetailsOpen.value[flipperId]
+  set(isNFTDetailsOpen.value, flipperId, !isOpen)
+}
+
+const flippers = computed(() => Object.entries(props.flippers || {}))
+
+// 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(
+  flippers.value.reduce(
+    (isOpen, [flipperId, _]) => ({
+      ...isOpen,
+      [flipperId]: false,
+    }),
+    {}
+  )
+)
 
-defineProps<{
+const props = defineProps<{
   flippers?: Flippers
 }>()
 </script>
 
 <style lang="scss" scoped>
 @import '@/styles/abstracts/variables';
+.gap {
+  gap: 0.5rem;
+}
+.hide-last-hr:last-child > hr {
+  display: none;
+}
+.k-blue {
+  @include ktheme() {
+    color: theme('k-blue');
+  }
+  &:hover {
+    @include ktheme() {
+      color: theme('k-blue-hover');
+    }
+  }
+}
+.k-grey {
+  @include ktheme() {
+    color: theme('k-grey');
+  }
+}
+.k-green {
+  @include ktheme() {
+    color: theme('k-green');
+  }
+}
+.k-red {
+  @include ktheme() {
+    color: theme('k-red');
+  }
+}
 </style>
diff --git a/components/collection/utils/useCollectionDetails.ts b/components/collection/utils/useCollectionDetails.ts
index 1c2313a2bd..a5185194c3 100644
--- a/components/collection/utils/useCollectionDetails.ts
+++ b/components/collection/utils/useCollectionDetails.ts
@@ -175,14 +175,23 @@ type NFTMap = {
     latestPrice: number
   }
 }
+type FlipEvent = {
+  nft: NFTExcludingEvents
+  soldPrice: number
+  soldTo: string
+  sellTimeStamp: number
+  boughtPrice: number
+}
+
 export type Flippers = {
   [identity: string]: {
-    nftId: string
-    soldPrice: number
-    soldTo: string
-    sellTimeStamp: number
-    boughtPrice: number
-  }[]
+    flips: FlipEvent[]
+    owned: number
+    totalBought: number
+    totalsold: number
+    bestFlip: number
+    latestflipTimestamp: number
+  }
 }
 export type Owners = {
   [identity: string]: {
@@ -324,6 +333,7 @@ const getFlippers = (interactions: InteractionWithNFT[]) => {
     preProccessForFindingFlippers(interactions)
 
   const flippers: Flippers = {}
+
   changeHandsInteractions.forEach((interaction) => {
     if (interaction.interaction === Interaction.SEND) {
       NFTS[interaction.nft.id].owner = interaction.meta
@@ -331,17 +341,29 @@ const getFlippers = (interactions: InteractionWithNFT[]) => {
     }
     if (interaction.interaction === Interaction.BUY) {
       //it's a Flip!
+
       const nftId = interaction.nft.id
       const PreviousNFTState = NFTS[nftId]
       const baseInfo = {
-        nftId,
+        nft: NFTS[nftId].nft,
         soldPrice: parseInt(interaction.meta),
         soldTo: interaction.caller,
         sellTimeStamp: new Date(interaction.timestamp).getTime(),
       }
+      if (flippers[PreviousNFTState.owner] === undefined) {
+        flippers[PreviousNFTState.owner] = {
+          flips: [],
+          bestFlip: 0,
+          latestflipTimestamp: 0,
+          owned: 0,
+          totalBought: 0,
+          totalsold: 0,
+        }
+      }
 
       //nft has been bought from previous owner -> previous owner is the flipper
-      const flipperHistory = flippers[PreviousNFTState.owner] || []
+
+      const flipperHistory = flippers[PreviousNFTState.owner].flips
       const thisFlip = {
         ...baseInfo,
         boughtPrice:
@@ -349,7 +371,8 @@ const getFlippers = (interactions: InteractionWithNFT[]) => {
             ? PreviousNFTState.latestPrice
             : 0,
       }
-      flippers[PreviousNFTState.owner] = [...flipperHistory, thisFlip]
+
+      flippers[PreviousNFTState.owner].flips = [...flipperHistory, thisFlip]
 
       // update last state of NFT
       NFTS[nftId] = {
@@ -360,5 +383,29 @@ const getFlippers = (interactions: InteractionWithNFT[]) => {
       }
     }
   })
+  for (const flipper in flippers) {
+    flippers[flipper].owned = flippers[flipper].flips.length
+
+    flippers[flipper].totalBought = sum(
+      flippers[flipper].flips.map((flip) => flip.boughtPrice)
+    )
+    flippers[flipper].totalsold = sum(
+      flippers[flipper].flips.map((flip) => flip.soldPrice)
+    )
+    const flipsPercentages = flippers[flipper].flips
+      .map((flip) =>
+        flip.boughtPrice > 0 ? flip.soldPrice / flip.boughtPrice : 0
+      )
+      .filter(Boolean)
+    flippers[flipper].bestFlip =
+      flipsPercentages.length > 0 ? Math.max(...flipsPercentages) * 100 : 0 //to percents
+
+    flippers[flipper].latestflipTimestamp = Math.max(
+      ...flippers[flipper].flips.map((flip) => flip.sellTimeStamp)
+    )
+  }
   return flippers
 }
+
+const sum = (array: number[]): number =>
+  array.reduce((accumulator, currentValue) => accumulator + currentValue, 0)

From a0f5b6fa824294bcaabf07a3d35a99d96e718031 Mon Sep 17 00:00:00 2001
From: daiagi <daiagi@gmail.com>
Date: Fri, 24 Mar 2023 00:03:29 +0700
Subject: [PATCH 05/55] control chart height

---
 components/chart/PriceChart.vue                            | 7 ++++++-
 components/collection/activity/Chart.vue                   | 2 +-
 .../gallery/GalleryItemTabsPanel/GalleryItemChart.vue      | 6 +++++-
 3 files changed, 12 insertions(+), 3 deletions(-)

diff --git a/components/chart/PriceChart.vue b/components/chart/PriceChart.vue
index feda2979f1..842565491f 100644
--- a/components/chart/PriceChart.vue
+++ b/components/chart/PriceChart.vue
@@ -22,7 +22,7 @@
       </template>
     </NeoDropdown>
 
-    <div class="content">
+    <div :class="{ content: !chartHeight }" :style="heightStyle">
       <canvas id="priceChart" />
     </div>
   </div>
@@ -69,7 +69,12 @@ const setTimeRange = (value: { value: number; label: string }) => {
 
 const props = defineProps<{
   priceChartData?: [Date, number][][]
+  chartHeight?: string
 }>()
+
+const heightStyle = computed(() =>
+  props.chartHeight ? `height: ${props.chartHeight}` : ''
+)
 let Chart: ChartJS<'line', any, unknown>
 
 onMounted(() => {
diff --git a/components/collection/activity/Chart.vue b/components/collection/activity/Chart.vue
index 13ebe07be8..65c9a63637 100644
--- a/components/collection/activity/Chart.vue
+++ b/components/collection/activity/Chart.vue
@@ -1,5 +1,5 @@
 <template>
-  <GalleryItemChart :nft-events="events" />
+  <GalleryItemChart :nft-events="events" chart-height="350px" />
 </template>
 
 <script setup lang="ts">
diff --git a/components/gallery/GalleryItemTabsPanel/GalleryItemChart.vue b/components/gallery/GalleryItemTabsPanel/GalleryItemChart.vue
index a7de0d6bd8..373b278cfa 100644
--- a/components/gallery/GalleryItemTabsPanel/GalleryItemChart.vue
+++ b/components/gallery/GalleryItemTabsPanel/GalleryItemChart.vue
@@ -1,6 +1,9 @@
 <template>
   <div>
-    <PriceChart class="mt-4" :price-chart-data="priceChartData" />
+    <PriceChart
+      class="mt-4"
+      :price-chart-data="priceChartData"
+      :chart-height="chartHeight" />
     <LazyGalleryHistory
       class="is-hidden"
       :events="nftEvents"
@@ -14,6 +17,7 @@ import PriceChart from '@/components/chart/PriceChart.vue'
 
 defineProps<{
   nftEvents?: Interaction[]
+  chartHeight?: string
 }>()
 const priceChartData = ref<[Date, number][][]>([])
 

From 71dd9506f0bef088880eac46f0bfd2e77583a70f Mon Sep 17 00:00:00 2001
From: daiagi <daiagi@gmail.com>
Date: Fri, 24 Mar 2023 13:10:08 +0700
Subject: [PATCH 06/55] finish owners insights

---
 .../collection/activity/OwnerInsights.vue     |   2 +-
 .../holdersFlippersTabs/FlipperTab.vue        |  37 ++---
 .../holdersFlippersTabs/HolderTab.vue         |  17 ++-
 .../activity/holdersFlippersTabs/moreNFTS.vue |  97 +++---------
 .../holdersFlippersTabs/moreNFTs/Flipper.vue  | 109 +++++++++++++
 .../holdersFlippersTabs/moreNFTs/Holder.vue   |  87 +++++++++++
 components/collection/activity/utils.ts       |  20 ++-
 components/collection/utils/types.ts          |  76 ++++++++++
 .../collection/utils/useCollectionDetails.ts  | 143 +++++-------------
 locales/en.json                               |  23 ++-
 utils/math.ts                                 |   3 +
 11 files changed, 398 insertions(+), 216 deletions(-)
 create mode 100644 components/collection/activity/holdersFlippersTabs/moreNFTs/Flipper.vue
 create mode 100644 components/collection/activity/holdersFlippersTabs/moreNFTs/Holder.vue
 create mode 100644 components/collection/utils/types.ts

diff --git a/components/collection/activity/OwnerInsights.vue b/components/collection/activity/OwnerInsights.vue
index 521f5ca698..5460cfa4ba 100644
--- a/components/collection/activity/OwnerInsights.vue
+++ b/components/collection/activity/OwnerInsights.vue
@@ -24,7 +24,7 @@
 <script setup lang="ts">
 import HoldersTab from './holdersFlippersTabs/HolderTab.vue'
 import FlippersTab from './holdersFlippersTabs/FlipperTab.vue'
-import { Flippers, Owners } from '../utils/useCollectionDetails'
+import { Flippers, Owners } from '@/components/collection/utils/types'
 
 enum Tabs {
   Holders,
diff --git a/components/collection/activity/holdersFlippersTabs/FlipperTab.vue b/components/collection/activity/holdersFlippersTabs/FlipperTab.vue
index 95d035e8fe..b24ba9ef39 100644
--- a/components/collection/activity/holdersFlippersTabs/FlipperTab.vue
+++ b/components/collection/activity/holdersFlippersTabs/FlipperTab.vue
@@ -10,32 +10,34 @@
       <div class="is-flex is-flex-direction-column gap">
         <ProfileLink :address="flipperId" />
         <div class="is-flex is-justify-content-space-between">
-          <span class="is-size-7 k-grey">Owned</span>
+          <span class="is-size-7 k-grey">{{ $t('activity.owned') }}</span>
           <span>{{ owned }}</span>
         </div>
         <div class="is-flex is-justify-content-space-between">
-          <span class="is-size-7 k-grey">Total Bought</span>
+          <span class="is-size-7 k-grey">{{ $t('activity.totalBought') }}</span>
           <Money :value="totalBought" />
         </div>
         <div class="is-flex is-justify-content-space-between">
-          <span class="is-size-7 k-grey">Total Sold</span>
+          <span class="is-size-7 k-grey">{{ $t('activity.totalSold') }}</span>
           <Money :value="totalsold" />
         </div>
         <div class="is-flex is-justify-content-space-between">
-          <span class="is-size-7 k-grey">Best Flip</span>
+          <span class="is-size-7 k-grey">{{ $t('activity.bestFlip') }}</span>
           <span :class="{ 'k-green': bestFlip > 0, 'k-red': bestFlip < 0 }">{{
             bestFlip === 0 ? '--' : `${bestFlip}%`
           }}</span>
         </div>
         <div class="is-flex is-justify-content-space-between">
-          <span class="is-size-7 k-grey">Latest Activity</span>
-          <span>{{ timeAgo(latestflipTimestamp) }}</span>
+          <span class="is-size-7 k-grey">{{
+            $t('activity.latestActivity')
+          }}</span>
+          <span class="no-wrap">{{ timeAgo(latestflipTimestamp) }}</span>
         </div>
         <div>
           <div
             class="is-size-7 k-blue is-clickable"
             @click="toggleNFTDetails(flipperId)">
-            NFT details
+            {{ $t('activity.nftDetails') }}
             <NeoIcon
               :icon="
                 isNFTDetailsOpen[flipperId] ? 'chevron-down' : 'chevron-right'
@@ -43,7 +45,7 @@
           </div>
 
           <div v-if="isNFTDetailsOpen[flipperId]">
-            <MoreNFTS :nfts="flips.map((flip) => flip.nft)" />
+            <MoreNFTS :flips="flips" variant="Flippers" />
           </div>
         </div>
       </div>
@@ -53,7 +55,7 @@
 </template>
 
 <script setup lang="ts">
-import { Flippers } from '@/components/collection/utils/useCollectionDetails'
+import { Flippers } from '@/components/collection/utils/types'
 import ProfileLink from '@/components/rmrk/Profile/ProfileLink.vue'
 import Money from '@/components/shared/format/ChainMoney.vue'
 import { NeoIcon } from '@kodadot1/brick'
@@ -69,17 +71,16 @@ const toggleNFTDetails = (flipperId: string) => {
 
 const flippers = computed(() => Object.entries(props.flippers || {}))
 
-// map of owner id to bolean, is the NFT details section of that owner open or nor
+// map of flipper id to bolean, is the NFT details section of that flipper open or nor
 // {id0: false, id1: true, id3: false, ...}
-const isNFTDetailsOpen = ref(
-  flippers.value.reduce(
-    (isOpen, [flipperId, _]) => ({
-      ...isOpen,
-      [flipperId]: false,
-    }),
-    {}
-  )
+const isFlipperMoreNFTSectionOpen = flippers.value.reduce(
+  (accumelator, [holderId, _]) => ({
+    ...accumelator,
+    [holderId]: false,
+  }),
+  {}
 )
+const isNFTDetailsOpen = ref(isFlipperMoreNFTSectionOpen)
 
 const props = defineProps<{
   flippers?: Flippers
diff --git a/components/collection/activity/holdersFlippersTabs/HolderTab.vue b/components/collection/activity/holdersFlippersTabs/HolderTab.vue
index dad2851124..1df102f1f9 100644
--- a/components/collection/activity/holdersFlippersTabs/HolderTab.vue
+++ b/components/collection/activity/holdersFlippersTabs/HolderTab.vue
@@ -7,26 +7,27 @@
       <div class="is-flex is-flex-direction-column gap">
         <ProfileLink :address="holderId" />
         <div class="is-flex is-justify-content-space-between">
-          <span class="is-size-7 k-grey">Owned</span>
+          <span class="is-size-7 k-grey">{{ $t('activity.owned') }}</span>
           <span>{{ holdings.nftCount }}</span>
         </div>
         <div class="is-flex is-justify-content-space-between">
-          <span class="is-size-7 k-grey">Total Bought</span>
+          <span class="is-size-7 k-grey">{{ $t('activity.totalBought') }}</span>
           <Money :value="holdings.totalBought" />
         </div>
         <div class="is-flex is-justify-content-space-between">
-          <span class="is-size-7 k-grey">Total Sold</span>
-          <span>??</span>
+          <span class="is-size-7 k-grey">{{ $t('activity.totalSold') }}</span>
+          <Money v-if="holdings.totalSold > 0" :value="holdings.totalSold" />
+          <span v-else>--</span>
         </div>
         <div class="is-flex is-justify-content-space-between">
-          <span class="is-size-7 k-grey">Date</span>
+          <span class="is-size-7 k-grey">{{ $t('activity.date') }}</span>
           <span>{{ timeAgo(holdings.lastActivityTimestamp) }}</span>
         </div>
         <div>
           <div
             class="is-size-7 k-blue is-clickable"
             @click="toggleNFTDetails(holderId)">
-            NFT details
+            {{ $t('activity.nftDetails') }}
             <NeoIcon
               :icon="
                 isNFTDetailsOpen[holderId] ? 'chevron-down' : 'chevron-right'
@@ -34,7 +35,7 @@
           </div>
 
           <div v-if="isNFTDetailsOpen[holderId]">
-            <MoreNFTS :nfts="holdings.nfts" />
+            <MoreNFTS :holder-nfts="holdings.nfts" variant="Holders" />
           </div>
         </div>
       </div>
@@ -45,7 +46,7 @@
 
 <script setup lang="ts">
 import ProfileLink from '@/components/rmrk/Profile/ProfileLink.vue'
-import { Owners } from '@/components/collection/utils/useCollectionDetails'
+import { Owners } from '@/components/collection/utils/types'
 import Money from '@/components/shared/format/ChainMoney.vue'
 import { NeoIcon } from '@kodadot1/brick'
 import { set } from 'vue'
diff --git a/components/collection/activity/holdersFlippersTabs/moreNFTS.vue b/components/collection/activity/holdersFlippersTabs/moreNFTS.vue
index 5d82351e8b..7b8556f57f 100644
--- a/components/collection/activity/holdersFlippersTabs/moreNFTS.vue
+++ b/components/collection/activity/holdersFlippersTabs/moreNFTS.vue
@@ -1,87 +1,24 @@
 <template>
-  <div v-if="ready" class="-mx-5">
-    <div
-      v-for="{ avatar, id, name, updatedAt } in nfts"
-      :key="id"
-      class="is-flex pt-2 px-5 is-justify-content-start is-hoverable">
-      <div class="mr-2rem">
-        <img
-          v-if="avatar"
-          :src="avatar"
-          :alt="name"
-          width="40"
-          height="40"
-          class="border" />
-        <img v-else src="/placeholder.webp" class="border" />
-      </div>
-      <div class="is-flex is-flex-direction-column">
-        {{ name }}
-        <span class="is-size-7 k-grey">{{
-          timeAgo(new Date(updatedAt).getTime())
-        }}</span>
-      </div>
-    </div>
+  <div>
+    <Holder v-if="variant === 'Holders'" :nfts="holderNfts" />
+    <Flipper v-else :flips="flips" />
   </div>
 </template>
 
 <script setup lang="ts">
-import { sanitizeIpfsUrl } from '~~/utils/ipfs'
-import { processSingleMetadata } from '~~/utils/cachingStrategy'
-import { NFTMetadata } from '~~/components/rmrk/service/scheme'
-import { NFTExcludingEvents } from '@/components/collection/utils/useCollectionDetails'
-import { timeAgo } from '../utils'
-
-const props = defineProps<{
-  nfts: (NFTExcludingEvents & { avatar?: string })[]
-}>()
-
-const nfts = ref(props.nfts)
-const ready = ref(false)
-
-onMounted(() => {
-  processNFTImages()
-})
-
-const processNFTImages = async () => {
-  if (props.nfts) {
-    const promises = props.nfts.map(async (nft) => {
-      let avatar
-      if (nft?.meta?.image) {
-        avatar = sanitizeIpfsUrl(nft.meta.image)
-      } else {
-        const meta = (await processSingleMetadata(nft.metadata)) as NFTMetadata
-        avatar = sanitizeIpfsUrl(meta?.image)
-      }
-      const nftIndex = nfts.value?.findIndex(({ id }) => id === nft.id)
-      nfts.value[nftIndex].avatar = avatar
-    })
-
-    await Promise.all(promises)
-
-    ready.value = true
+import { FlipEvent, NFTExcludingEvents } from '../../utils/types'
+import Flipper from './moreNFTs/Flipper.vue'
+import Holder from './moreNFTs/Holder.vue'
+
+withDefaults(
+  defineProps<{
+    variant: 'Holders' | 'Flippers'
+    holderNfts?: NFTExcludingEvents[]
+    flips?: FlipEvent[]
+  }>(),
+  {
+    holderNfts: () => [],
+    flips: () => [],
   }
-}
+)
 </script>
-
-<style scoped lang="scss">
-@import '@/styles/abstracts/variables';
-
-.mr-2rem {
-  margin-right: 2rem;
-}
-.k-grey {
-  @include ktheme() {
-    color: theme('k-grey');
-  }
-}
-.-mx-5 {
-  margin: 0 -1.5rem !important;
-}
-.is-hoverable {
-  @include ktheme() {
-    &:hover {
-      background-color: theme('k-accentlight2');
-    }
-  }
-}
-</style>
diff --git a/components/collection/activity/holdersFlippersTabs/moreNFTs/Flipper.vue b/components/collection/activity/holdersFlippersTabs/moreNFTs/Flipper.vue
new file mode 100644
index 0000000000..854e9c6314
--- /dev/null
+++ b/components/collection/activity/holdersFlippersTabs/moreNFTs/Flipper.vue
@@ -0,0 +1,109 @@
+<template>
+  <div v-if="ready" class="-mx-5">
+    <div
+      v-for="{ avatar, boughtPrice, soldPrice, profit, nft } in flips"
+      :key="nft.id"
+      class="is-flex py-2 px-5 is-justify-content-start is-hoverable is-flex-direction-column">
+      <div class="is-flex">
+        <img
+          v-if="avatar"
+          :src="avatar"
+          :alt="nft.name"
+          width="40"
+          height="40"
+          class="border mr-2rem" />
+        <img v-else src="/placeholder.webp" class="border" />
+        <span>{{ nft.name }}</span>
+      </div>
+      <div
+        class="is-flex is-flex-direction-column is-justify-content-space-between mt-3">
+        <div class="is-flex is-justify-content-space-between no-wrap">
+          <span class="is-size-7 k-grey">{{ $t('activity.profit') }}</span>
+          <span :class="{ 'k-green': profit > 0, 'k-red': profit < 0 }">{{
+            profit === 0 ? '--' : `${profit}%`
+          }}</span>
+        </div>
+        <div class="is-flex is-justify-content-space-between no-wrap">
+          <span class="is-size-7 k-grey">{{ $t('activity.bought') }}</span>
+          <Money :value="boughtPrice" />
+        </div>
+        <div class="is-flex is-justify-content-space-between no-wrap">
+          <span class="is-size-7 k-grey">{{ $t('activity.sold') }}</span>
+          <Money :value="soldPrice" />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { sanitizeIpfsUrl } from '@/utils/ipfs'
+import { processSingleMetadata } from '@/utils/cachingStrategy'
+import { NFTMetadata } from '@/components/rmrk/service/scheme'
+import { FlipEvent } from '@/components/collection/utils/types'
+import Money from '@/components/shared/format/ChainMoney.vue'
+
+const props = defineProps<{
+  flips: (FlipEvent & { avatar?: string })[]
+}>()
+
+const flips = ref(props.flips)
+const ready = ref(false)
+
+onMounted(() => {
+  processNFTImages()
+})
+
+const processNFTImages = async () => {
+  if (props.flips) {
+    const promises = props.flips.map(async ({ nft }, i) => {
+      let avatar
+      if (nft?.meta?.image) {
+        avatar = sanitizeIpfsUrl(nft.meta.image)
+      } else {
+        const meta = (await processSingleMetadata(nft.metadata)) as NFTMetadata
+        avatar = sanitizeIpfsUrl(meta?.image)
+      }
+
+      flips.value[i].avatar = avatar
+    })
+
+    await Promise.all(promises)
+
+    ready.value = true
+  }
+}
+</script>
+
+<style scoped lang="scss">
+@import '@/styles/abstracts/variables';
+
+.mr-2rem {
+  margin-right: 1.5rem;
+}
+.k-grey {
+  @include ktheme() {
+    color: theme('k-grey');
+  }
+}
+.-mx-5 {
+  margin: 0 -1.5rem !important;
+}
+.k-green {
+  @include ktheme() {
+    color: theme('k-green');
+  }
+}
+.k-red {
+  @include ktheme() {
+    color: theme('k-red');
+  }
+}
+.is-hoverable {
+  @include ktheme() {
+    &:hover {
+      background-color: theme('k-accentlight2');
+    }
+  }
+}
+</style>
diff --git a/components/collection/activity/holdersFlippersTabs/moreNFTs/Holder.vue b/components/collection/activity/holdersFlippersTabs/moreNFTs/Holder.vue
new file mode 100644
index 0000000000..1eb7c13397
--- /dev/null
+++ b/components/collection/activity/holdersFlippersTabs/moreNFTs/Holder.vue
@@ -0,0 +1,87 @@
+<template>
+  <div v-if="ready" class="-mx-5">
+    <div
+      v-for="{ avatar, id, name, updatedAt } in nfts"
+      :key="id"
+      class="is-flex pt-2 px-5 is-justify-content-start is-hoverable">
+      <div class="mr-2rem">
+        <img
+          v-if="avatar"
+          :src="avatar"
+          :alt="name"
+          width="40"
+          height="40"
+          class="border" />
+        <img v-else src="/placeholder.webp" class="border" />
+      </div>
+      <div class="is-flex is-flex-direction-column">
+        {{ name }}
+        <span class="is-size-7 k-grey">{{
+          timeAgo(new Date(updatedAt).getTime())
+        }}</span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { sanitizeIpfsUrl } from '@/utils/ipfs'
+import { processSingleMetadata } from '@/utils/cachingStrategy'
+import { NFTMetadata } from '@/components/rmrk/service/scheme'
+import { NFTExcludingEvents } from '@/components/collection/utils/types'
+import { timeAgo } from '@/components/collection/activity/utils'
+
+const props = defineProps<{
+  nfts: (NFTExcludingEvents & { avatar?: string })[]
+}>()
+
+const nfts = ref(props.nfts)
+const ready = ref(false)
+
+onMounted(() => {
+  processNFTImages()
+})
+
+const processNFTImages = async () => {
+  if (props.nfts) {
+    const promises = props.nfts.map(async (nft, i) => {
+      let avatar
+      if (nft?.meta?.image) {
+        avatar = sanitizeIpfsUrl(nft.meta.image)
+      } else {
+        const meta = (await processSingleMetadata(nft.metadata)) as NFTMetadata
+        avatar = sanitizeIpfsUrl(meta?.image)
+      }
+
+      nfts.value[i].avatar = avatar
+    })
+
+    await Promise.all(promises)
+
+    ready.value = true
+  }
+}
+</script>
+
+<style scoped lang="scss">
+@import '@/styles/abstracts/variables';
+
+.mr-2rem {
+  margin-right: 2rem;
+}
+.k-grey {
+  @include ktheme() {
+    color: theme('k-grey');
+  }
+}
+.-mx-5 {
+  margin: 0 -1.5rem !important;
+}
+.is-hoverable {
+  @include ktheme() {
+    &:hover {
+      background-color: theme('k-accentlight2');
+    }
+  }
+}
+</style>
diff --git a/components/collection/activity/utils.ts b/components/collection/activity/utils.ts
index 6ad6e219f7..3b1682a7b4 100644
--- a/components/collection/activity/utils.ts
+++ b/components/collection/activity/utils.ts
@@ -1,17 +1,29 @@
 export const timeAgo = (timestamp: number): string => {
+  const { $i18n } = useNuxtApp()
+  const { ago, second, seconds, minute, minutes, hour, hours, day, days } = {
+    ago: $i18n.t('time.ago'),
+    second: $i18n.t('time.second'),
+    seconds: $i18n.t('time.seconds'),
+    minute: $i18n.t('time.minute'),
+    minutes: $i18n.t('time.minutes'),
+    hour: $i18n.t('time.hour'),
+    hours: $i18n.t('time.hours'),
+    day: $i18n.t('time.day'),
+    days: $i18n.t('time.days'),
+  }
   const now = new Date().getTime()
   const secondsSince = Math.floor((now - timestamp) / 1000)
   if (secondsSince < 60) {
-    return `${secondsSince} Second${secondsSince !== 1 ? 's' : ''} Ago`
+    return `${secondsSince} ${secondsSince !== 1 ? seconds : second} ${ago}`
   }
   const minutesSince = Math.floor(secondsSince / 60)
   if (minutesSince < 60) {
-    return `${minutesSince} Minute${minutesSince !== 1 ? 's' : ''} Ago`
+    return `${minutesSince} ${minutesSince !== 1 ? minutes : minute} ${ago}`
   }
   const hoursSince = Math.floor(minutesSince / 60)
   if (hoursSince < 24) {
-    return `${hoursSince} Hour${hoursSince !== 1 ? 's' : ''} Ago`
+    return `${hoursSince} ${hoursSince !== 1 ? hours : hour} ${ago}`
   }
   const daysSince = Math.floor(hoursSince / 24)
-  return `${daysSince} Day${daysSince !== 1 ? 's' : ''} Ago`
+  return `${daysSince} ${daysSince !== 1 ? days : day} ${ago}`
 }
diff --git a/components/collection/utils/types.ts b/components/collection/utils/types.ts
new file mode 100644
index 0000000000..35ef3ce5fb
--- /dev/null
+++ b/components/collection/utils/types.ts
@@ -0,0 +1,76 @@
+import {
+  CollectionMetadata,
+  Interaction as InteractionType,
+  NFTMetadata,
+} from '@/components/rmrk/service/scheme'
+
+import { Interaction } from '@kodadot1/minimark'
+
+export type Stats = {
+  listedCount?: number
+  collectionLength?: number
+  collectionFloorPrice?: number
+  bestOffer?: number
+  uniqueOwners?: number
+  uniqueOwnersPercent?: string
+  collectionTradedVolumeNumber?: bigint
+}
+
+export type CollectionEntityMinimal = {
+  id: string
+  issuer: string
+  meta: CollectionMetadata
+  metadata: string
+  name: string
+  currentOwner: string
+  type: string
+}
+
+export type NFTExcludingEvents = {
+  currentOwner: string
+  name: string
+  price?: string
+  metadata: string
+  meta: NFTMetadata
+  updatedAt: string
+  id: string
+}
+export type InteractionWithNFT = InteractionType & {
+  nft: NFTExcludingEvents
+}
+export type NFTMap = {
+  [nftId: string]: {
+    owner: string
+    nft: NFTExcludingEvents
+    latestInteraction: Interaction
+    latestPrice: number
+  }
+}
+export type FlipEvent = {
+  nft: NFTExcludingEvents
+  soldPrice: number
+  soldTo: string
+  sellTimeStamp: number
+  boughtPrice: number
+  profit: number
+}
+
+export type Flippers = {
+  [identity: string]: {
+    flips: FlipEvent[]
+    owned: number
+    totalBought: number
+    totalsold: number
+    bestFlip: number
+    latestflipTimestamp: number
+  }
+}
+export type Owners = {
+  [identity: string]: {
+    nftCount: number
+    totalBought: number
+    totalSold: number
+    nfts: NFTExcludingEvents[]
+    lastActivityTimestamp: number
+  }
+}
diff --git a/components/collection/utils/useCollectionDetails.ts b/components/collection/utils/useCollectionDetails.ts
index a5185194c3..c33b068bb4 100644
--- a/components/collection/utils/useCollectionDetails.ts
+++ b/components/collection/utils/useCollectionDetails.ts
@@ -1,33 +1,9 @@
-import { getVolume } from '@/utils/math'
-import {
-  CollectionMetadata,
-  Interaction as InteractionType,
-  NFT,
-  NFTMetadata,
-} from '@/components/rmrk/service/scheme'
+import { getVolume, sum } from '@/utils/math'
+import { NFT } from '@/components/rmrk/service/scheme'
 import { NFTListSold } from '@/components/identity/utils/useIdentity'
 import { chainsSupportingOffers } from './useCollectionDetails.config'
 import { Interaction } from '@kodadot1/minimark'
-
-type Stats = {
-  listedCount?: number
-  collectionLength?: number
-  collectionFloorPrice?: number
-  bestOffer?: number
-  uniqueOwners?: number
-  uniqueOwnersPercent?: string
-  collectionTradedVolumeNumber?: bigint
-}
-
-export type CollectionEntityMinimal = {
-  id: string
-  issuer: string
-  meta: CollectionMetadata
-  metadata: string
-  name: string
-  currentOwner: string
-  type: string
-}
+import { Flippers, InteractionWithNFT, NFTMap, Owners, Stats } from './types'
 
 const differentOwner = (nft: {
   issuer: string
@@ -155,52 +131,6 @@ export const useCollectionMinimal = ({ collectionId }) => {
   })
   return { collection }
 }
-export type NFTExcludingEvents = {
-  currentOwner: string
-  name: string
-  price?: string
-  metadata: string
-  meta: NFTMetadata
-  updatedAt: string
-  id: string
-}
-type InteractionWithNFT = InteractionType & {
-  nft: NFTExcludingEvents
-}
-type NFTMap = {
-  [nftId: string]: {
-    owner: string
-    nft: NFTExcludingEvents
-    latestInteraction: Interaction
-    latestPrice: number
-  }
-}
-type FlipEvent = {
-  nft: NFTExcludingEvents
-  soldPrice: number
-  soldTo: string
-  sellTimeStamp: number
-  boughtPrice: number
-}
-
-export type Flippers = {
-  [identity: string]: {
-    flips: FlipEvent[]
-    owned: number
-    totalBought: number
-    totalsold: number
-    bestFlip: number
-    latestflipTimestamp: number
-  }
-}
-export type Owners = {
-  [identity: string]: {
-    nftCount: number
-    totalBought: number
-    nfts: NFTExcludingEvents[]
-    lastActivityTimestamp: number
-  }
-}
 
 export const useCollectionActivity = ({ collectionId }) => {
   const events = ref<InteractionWithNFT[]>()
@@ -224,8 +154,22 @@ export const useCollectionActivity = ({ collectionId }) => {
         )
         .flat()
       events.value = interactions
-      owners.value = getOwners(result.collection.nfts)
-      flippers.value = getFlippers(interactions)
+
+      // not to repeat ref names
+      const ownersTemp = getOwners(result.collection.nfts)
+      const flippersTemp = getFlippers(interactions)
+
+      const flipperdIds = Object.keys(flippersTemp)
+      const OwnersIds = Object.keys(ownersTemp)
+
+      flipperdIds.forEach((id) => {
+        if (OwnersIds.includes(id)) {
+          ownersTemp[id].totalSold = flippersTemp[id].totalsold
+        }
+      })
+
+      owners.value = ownersTemp
+      flippers.value = flippersTemp
     }
   })
   return {
@@ -328,7 +272,7 @@ const preProccessForFindingFlippers = (interactions: InteractionWithNFT[]) => {
   return { NFTS, changeHandsInteractions }
 }
 
-const getFlippers = (interactions: InteractionWithNFT[]) => {
+const getFlippers = (interactions: InteractionWithNFT[]): Flippers => {
   const { NFTS, changeHandsInteractions } =
     preProccessForFindingFlippers(interactions)
 
@@ -364,12 +308,16 @@ const getFlippers = (interactions: InteractionWithNFT[]) => {
       //nft has been bought from previous owner -> previous owner is the flipper
 
       const flipperHistory = flippers[PreviousNFTState.owner].flips
+      const boughtPrice =
+        PreviousNFTState.latestInteraction === Interaction.BUY
+          ? PreviousNFTState.latestPrice
+          : 0
+      const profit =
+        boughtPrice > 0 ? (baseInfo.soldPrice / boughtPrice) * 100 : 0
       const thisFlip = {
         ...baseInfo,
-        boughtPrice:
-          PreviousNFTState.latestInteraction === Interaction.BUY
-            ? PreviousNFTState.latestPrice
-            : 0,
+        boughtPrice,
+        profit,
       }
 
       flippers[PreviousNFTState.owner].flips = [...flipperHistory, thisFlip]
@@ -383,29 +331,16 @@ const getFlippers = (interactions: InteractionWithNFT[]) => {
       }
     }
   })
-  for (const flipper in flippers) {
-    flippers[flipper].owned = flippers[flipper].flips.length
-
-    flippers[flipper].totalBought = sum(
-      flippers[flipper].flips.map((flip) => flip.boughtPrice)
-    )
-    flippers[flipper].totalsold = sum(
-      flippers[flipper].flips.map((flip) => flip.soldPrice)
-    )
-    const flipsPercentages = flippers[flipper].flips
-      .map((flip) =>
-        flip.boughtPrice > 0 ? flip.soldPrice / flip.boughtPrice : 0
-      )
-      .filter(Boolean)
-    flippers[flipper].bestFlip =
-      flipsPercentages.length > 0 ? Math.max(...flipsPercentages) * 100 : 0 //to percents
-
-    flippers[flipper].latestflipTimestamp = Math.max(
-      ...flippers[flipper].flips.map((flip) => flip.sellTimeStamp)
-    )
-  }
+
+  Object.entries(flippers).forEach(([flipperId, { flips }]) => {
+    flippers[flipperId] = {
+      owned: flips.length,
+      totalBought: sum(flips.map((flip) => flip.boughtPrice)),
+      totalsold: sum(flips.map((flip) => flip.soldPrice)),
+      bestFlip: Math.max(...flips.map((flip) => flip.profit)),
+      latestflipTimestamp: Math.max(...flips.map((flip) => flip.sellTimeStamp)),
+      flips,
+    }
+  })
   return flippers
 }
-
-const sum = (array: number[]): number =>
-  array.reduce((accumulator, currentValue) => accumulator + currentValue, 0)
diff --git a/locales/en.json b/locales/en.json
index 2de7873101..0fdb282683 100644
--- a/locales/en.json
+++ b/locales/en.json
@@ -884,6 +884,17 @@
     "history": "History",
     "chart": "Chart"
   },
+  "time": {
+    "ago": "Ago",
+    "second": "Second",
+    "seconds": "Seconds",
+    "minute": "Minute",
+    "minutes": "Minutes",
+    "hour": "Hour",
+    "hours": "Hours",
+    "day": "Day",
+    "days": "Days"
+  },
   "activity": {
     "listed": "Listed",
     "totalItems": "Σ Items",
@@ -899,7 +910,17 @@
     "bestOffer": "Best Offer",
     "volume": "Volume",
     "network": "Network",
-    "creator": "Creator"
+    "creator": "Creator",
+    "owned": "Owned",
+    "totalBought": "Total Bought",
+    "totalSold": "Total Sold",
+    "date": "Date",
+    "bestFlip": "Best Flip",
+    "latestActivity": "LatestActivity",
+    "nftDetails": "NFT Details",
+    "profit": "Profit",
+    "bought": "Bought",
+    "sold": "Sold"
   },
   "profileStats": {
     "listed": "Listed",
diff --git a/utils/math.ts b/utils/math.ts
index bbff5e33cc..407998de96 100644
--- a/utils/math.ts
+++ b/utils/math.ts
@@ -21,6 +21,9 @@ export function pairListBuyEvent(events: Interaction[]): Interaction[] {
   }
 }
 
+export const sum = (array: number[]): number =>
+  array.reduce((accumulator, currentValue) => accumulator + currentValue, 0)
+
 export function getSum(list: Array<number | number>): bigint | number {
   return list
     .map((x) => x)

From 6693f984a685f3f900cc69b3b83dd090d8cf1a9f Mon Sep 17 00:00:00 2001
From: daiagi <daiagi@gmail.com>
Date: Fri, 24 Mar 2023 13:34:19 +0700
Subject: [PATCH 07/55] reponsivity

---
 components/collection/activity/Activity.vue | 7 +------
 1 file changed, 1 insertion(+), 6 deletions(-)

diff --git a/components/collection/activity/Activity.vue b/components/collection/activity/Activity.vue
index 9fb9657b00..7ac384653c 100644
--- a/components/collection/activity/Activity.vue
+++ b/components/collection/activity/Activity.vue
@@ -3,7 +3,7 @@
     <SidebarFilter />
     <div class="w-full mt-5">
       <div class="columns">
-        <div class="column is-two-thirds">
+        <div class="column is-two-thirds-desktop is-half-tablet">
           <ActivityChart :events="events" />
         </div>
         <div class="column">
@@ -30,9 +30,4 @@ const { events, flippers, owners } = useCollectionActivity({
 
 <style lang="scss" scoped>
 @import '@/styles/abstracts/variables';
-
-.fixed-height {
-  height: 350px;
-}
 </style>
-a

From 7b6de3b00b226ab8dfcfd25d8fc8c1bab2926d09 Mon Sep 17 00:00:00 2001
From: daiagi <daiagi@gmail.com>
Date: Fri, 24 Mar 2023 22:05:07 +0700
Subject: [PATCH 08/55] feat: events table

---
 components/collection/activity/Activity.vue   |  41 ++++-
 .../collection/activity/OwnerInsights.vue     |  18 +-
 .../collection/activity/events/EventRow.vue   | 173 ++++++++++++++++++
 .../collection/activity/events/Events.vue     |  87 +++++++++
 .../holdersFlippersTabs/moreNFTs/Flipper.vue  |   2 +-
 components/collection/utils/types.ts          |   1 +
 .../collection/utils/useCollectionDetails.ts  |   6 +-
 styles/abstracts/_theme.scss                  |   8 +
 8 files changed, 323 insertions(+), 13 deletions(-)
 create mode 100644 components/collection/activity/events/EventRow.vue
 create mode 100644 components/collection/activity/events/Events.vue

diff --git a/components/collection/activity/Activity.vue b/components/collection/activity/Activity.vue
index 7ac384653c..b58c4bacb1 100644
--- a/components/collection/activity/Activity.vue
+++ b/components/collection/activity/Activity.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="is-flex is-align-self-flex-start">
+  <div class="is-flex">
     <SidebarFilter />
     <div class="w-full mt-5">
       <div class="columns">
@@ -10,6 +10,10 @@
           <OwnerInsights :owners="owners" :flippers="flippers" />
         </div>
       </div>
+      <!-- <div v-show="isFiltersActive" class="border-bottom pb-5 border-k-grey">
+        <BreadcrumbsFilter @filtersActive="toggleBreadcrumbsVisible" />
+      </div> -->
+      <Events :events="sortedEvents" />
     </div>
   </div>
 </template>
@@ -18,16 +22,49 @@
 import SidebarFilter from '@/components/explore/SidebarFilter.vue'
 import ActivityChart from './Chart.vue'
 import OwnerInsights from './OwnerInsights.vue'
-
+import Events from './events/Events.vue'
+import BreadcrumbsFilter from '@/components/shared/BreadcrumbsFilter.vue'
 import { useCollectionActivity } from '@/components/collection/utils/useCollectionDetails'
+import { Interaction } from '@kodadot1/minimark'
 const route = useRoute()
 
+const isFiltersActive = ref(false)
+
+const toggleBreadcrumbsVisible = (active: boolean) => {
+  isFiltersActive.value = active
+}
+
 const collectionId = computed(() => route.params.id)
 const { events, flippers, owners } = useCollectionActivity({
   collectionId: collectionId.value,
 })
+
+const InteractionIncluded = [
+  Interaction.BUY,
+  Interaction.LIST,
+  Interaction.MINTNFT,
+  Interaction.SEND,
+]
+
+const filteredEvents = computed(() =>
+  events.value
+    ? events.value.filter((event) =>
+        InteractionIncluded.includes(event.interaction as Interaction)
+      )
+    : []
+)
+
+const sortedEvents = computed(() =>
+  filteredEvents.value.sort((a, b) => b.timestamp - a.timestamp)
+)
 </script>
 
 <style lang="scss" scoped>
 @import '@/styles/abstracts/variables';
+
+.border-k-grey {
+  @include ktheme() {
+    border-color: theme('k-grey');
+  }
+}
 </style>
diff --git a/components/collection/activity/OwnerInsights.vue b/components/collection/activity/OwnerInsights.vue
index 5460cfa4ba..62e4e8718c 100644
--- a/components/collection/activity/OwnerInsights.vue
+++ b/components/collection/activity/OwnerInsights.vue
@@ -3,20 +3,20 @@
     <div class="py-4 px-5 is-flex border-bottom" aria-label="controls">
       <div
         class="mr-4 is-clickable"
-        :class="{ 'has-text-weight-bold': activeTab === Tabs.Holders }"
-        @click="activeTab = Tabs.Holders">
+        :class="{ 'has-text-weight-bold': activeTab === Tabs.holders }"
+        @click="activeTab = Tabs.holders">
         {{ $t('holders') }}
       </div>
       <div
         class="is-clickable"
-        :class="{ 'has-text-weight-bold': activeTab === Tabs.Flippers }"
-        @click="activeTab = Tabs.Flippers">
+        :class="{ 'has-text-weight-bold': activeTab === Tabs.flippers }"
+        @click="activeTab = Tabs.flippers">
         {{ $t('flippers') }}
       </div>
     </div>
     <div class="py-4 px-5 limit-height is-scrollable">
-      <HoldersTab v-if="activeTab === Tabs.Holders" :owners="owners" />
-      <FlippersTab v-if="activeTab === Tabs.Flippers" :flippers="flippers" />
+      <HoldersTab v-if="activeTab === Tabs.holders" :owners="owners" />
+      <FlippersTab v-if="activeTab === Tabs.flippers" :flippers="flippers" />
     </div>
   </div>
 </template>
@@ -27,15 +27,15 @@ import FlippersTab from './holdersFlippersTabs/FlipperTab.vue'
 import { Flippers, Owners } from '@/components/collection/utils/types'
 
 enum Tabs {
-  Holders,
-  Flippers,
+  holders,
+  flippers,
 }
 
 defineProps<{
   owners?: Owners
   flippers?: Flippers
 }>()
-const activeTab = ref(Tabs.Holders)
+const activeTab = ref(Tabs.holders)
 </script>
 
 <style lang="scss" scoped>
diff --git a/components/collection/activity/events/EventRow.vue b/components/collection/activity/events/EventRow.vue
new file mode 100644
index 0000000000..7c5b94fe5d
--- /dev/null
+++ b/components/collection/activity/events/EventRow.vue
@@ -0,0 +1,173 @@
+<template>
+  <div class="columns">
+    <div class="column">
+      <img
+        v-if="avatar"
+        :src="avatar"
+        :alt="event.nft.name"
+        width="40"
+        height="40"
+        class="border" />
+      <img v-else src="/placeholder.webp" class="border" />
+    </div>
+
+    <div class="column">
+      <div
+        class="border is-size-7 px-4 py-1 is-flex is-align-items-center fixed-width fixed-height"
+        :class="interactionClass[event.interaction]">
+        <span>{{ interactionName }}</span>
+      </div>
+    </div>
+
+    <div class="column">
+      <div v-if="amount === blank">
+        {{ blank }}
+      </div>
+      <Money v-else :value="amount" />
+    </div>
+
+    <div class="column">
+      <nuxt-link
+        v-if="fromAddress !== blank"
+        :to="`/${urlPrefix}/u/${fromAddress}`"
+        class="has-text-link">
+        <IdentityIndex ref="identity" :address="fromAddress" show-clipboard />
+      </nuxt-link>
+      <div v-else>
+        {{ blank }}
+      </div>
+    </div>
+    <div class="column">
+      <nuxt-link
+        v-if="toAddress !== blank"
+        :to="`/${urlPrefix}/u/${toAddress}`"
+        class="has-text-link">
+        <IdentityIndex ref="identity" :address="toAddress" show-clipboard />
+      </nuxt-link>
+      <div v-else>
+        {{ blank }}
+      </div>
+    </div>
+    <div class="column">
+      {{ timeAgo(event.timestamp) }}
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { InteractionWithNFT } from '@/components/collection/utils/types'
+import { NFTMetadata } from '@/components/rmrk/service/scheme'
+import { processSingleMetadata } from '@/utils/cachingStrategy'
+import { sanitizeIpfsUrl } from '@/utils/ipfs'
+import { Interaction } from '@kodadot1/minimark'
+import Money from '@/components/shared/format/ChainMoney.vue'
+import IdentityIndex from '@/components/identity/IdentityIndex.vue'
+import { timeAgo } from '../utils'
+
+const { urlPrefix } = usePrefix()
+const props = defineProps<{
+  event: InteractionWithNFT
+}>()
+
+const avatar = ref<string>()
+const ineteractionNameMap = {
+  BUY: 'Sale',
+  LIST: 'List',
+  MINTNFT: 'Mint',
+  SEND: 'Transfer',
+}
+const blank = '--'
+
+const interactionName = computed(
+  () => ineteractionNameMap[props.event.interaction] || props.event.interaction
+)
+const amount = computed(() => {
+  switch (props.event.interaction) {
+    case Interaction.MINT:
+      return blank
+    case Interaction.LIST:
+    case Interaction.BUY:
+      return props.event.meta
+    default:
+      return blank
+  }
+})
+
+const fromAddress = computed(() => {
+  const interaction = props.event.interaction
+  if (interaction === Interaction.MINTNFT || interaction === Interaction.LIST) {
+    return blank
+  }
+  if (interaction === Interaction.BUY || interaction === Interaction.SEND) {
+    return props.event.currentOwner
+  }
+})
+
+const toAddress = computed(() => {
+  const interaction = props.event.interaction
+  if (interaction === Interaction.MINTNFT || interaction === Interaction.LIST) {
+    return props.event.caller
+  }
+  if (interaction === Interaction.BUY || interaction === Interaction.SEND) {
+    return props.event.caller
+  }
+})
+
+const interactionClass = {
+  [Interaction.MINTNFT]: 'k-yellow',
+  [Interaction.LIST]: 'k-blueaccent',
+  [Interaction.BUY]: 'k-pink',
+  [Interaction.SEND]: 'background-color',
+}
+
+onMounted(() => {
+  getAvatar()
+})
+
+const getAvatar = async () => {
+  if (props.event) {
+    if (props.event.nft?.meta?.image) {
+      avatar.value = sanitizeIpfsUrl(props.event.nft.meta.image)
+    } else {
+      const meta = (await processSingleMetadata(
+        props.event.nft.metadata
+      )) as NFTMetadata
+      avatar.value = sanitizeIpfsUrl(meta?.image)
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+@import '@/styles/abstracts/variables';
+
+.fixed-width {
+  width: 60px;
+}
+.fixed-height {
+  height: 22px;
+}
+.k-pink {
+  @include ktheme() {
+    background-color: theme('k-pink');
+  }
+}
+
+.k-yellow {
+  @include ktheme() {
+    background-color: theme('k-yellow');
+  }
+}
+
+.background-color {
+  @include ktheme() {
+    background-color: theme('background-color');
+  }
+}
+
+.k-blueaccent {
+  @include ktheme() {
+    background-color: theme('k-blueaccent');
+  }
+}
+</style>
diff --git a/components/collection/activity/events/Events.vue b/components/collection/activity/events/Events.vue
new file mode 100644
index 0000000000..d9568d9733
--- /dev/null
+++ b/components/collection/activity/events/Events.vue
@@ -0,0 +1,87 @@
+<template>
+  <div v-if="events.length > 0">
+    <div id="desktop and up">
+      <div class="columns is-size-7 k-grey py-3">
+        <div class="column">
+          <span>item</span>
+        </div>
+        <div class="column">
+          <span>event</span>
+        </div>
+        <div class="column">
+          <span>amount</span>
+        </div>
+        <div class="column">
+          <span>from</span>
+        </div>
+        <div class="column">
+          <span>to</span>
+        </div>
+        <div class="column">
+          <span>time</span>
+        </div>
+      </div>
+      <div>
+        <EventRow
+          v-for="event in displayedEvents"
+          :key="event.id"
+          :event="event"
+          class="my-2 event-row-transition" />
+        <div ref="sentinel" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { InteractionWithNFT } from '@/components/collection/utils/types'
+import EventRow from './EventRow.vue'
+import { useIntersectionObserver } from '@vueuse/core'
+
+const props = withDefaults(
+  defineProps<{
+    events: InteractionWithNFT[]
+  }>(),
+  {
+    events: () => [],
+  }
+)
+
+const displayedEvents = ref<InteractionWithNFT[]>([])
+
+watch(
+  () => props.events,
+  () => (displayedEvents.value = props.events.slice(0, 10)),
+  { immediate: true }
+)
+
+let offset = 10
+
+const displayMoreEvents = () => {
+  displayedEvents.value = [
+    ...displayedEvents.value,
+    ...props.events.slice(offset, offset + 10),
+  ]
+  offset += 10
+}
+
+const handleIntersection = (entries: IntersectionObserverEntry[]) => {
+  const target = entries[0]
+  if (target.isIntersecting) {
+    displayMoreEvents()
+  }
+}
+
+const sentinel = ref<HTMLDivElement | null>(null)
+useIntersectionObserver(sentinel, handleIntersection, { threshold: 0.66 })
+</script>
+
+<style scoped lang="scss">
+@import '@/styles/abstracts/variables';
+
+.k-grey {
+  @include ktheme() {
+    color: theme('k-grey');
+  }
+}
+</style>
diff --git a/components/collection/activity/holdersFlippersTabs/moreNFTs/Flipper.vue b/components/collection/activity/holdersFlippersTabs/moreNFTs/Flipper.vue
index 854e9c6314..e9081f2574 100644
--- a/components/collection/activity/holdersFlippersTabs/moreNFTs/Flipper.vue
+++ b/components/collection/activity/holdersFlippersTabs/moreNFTs/Flipper.vue
@@ -12,7 +12,7 @@
           width="40"
           height="40"
           class="border mr-2rem" />
-        <img v-else src="/placeholder.webp" class="border" />
+        <img v-else src="/placeholder.webp" class="border mr-2rem" />
         <span>{{ nft.name }}</span>
       </div>
       <div
diff --git a/components/collection/utils/types.ts b/components/collection/utils/types.ts
index 35ef3ce5fb..9be6546b7b 100644
--- a/components/collection/utils/types.ts
+++ b/components/collection/utils/types.ts
@@ -37,6 +37,7 @@ export type NFTExcludingEvents = {
 }
 export type InteractionWithNFT = InteractionType & {
   nft: NFTExcludingEvents
+  timestamp: number
 }
 export type NFTMap = {
   [nftId: string]: {
diff --git a/components/collection/utils/useCollectionDetails.ts b/components/collection/utils/useCollectionDetails.ts
index c33b068bb4..7a89fc1a1e 100644
--- a/components/collection/utils/useCollectionDetails.ts
+++ b/components/collection/utils/useCollectionDetails.ts
@@ -150,7 +150,11 @@ export const useCollectionActivity = ({ collectionId }) => {
       // flat events for chart
       const interactions: InteractionWithNFT[] = result.collection.nfts
         .map((nft) =>
-          nft.events.map((e) => ({ ...e, nft: { ...nft, events: undefined } }))
+          nft.events.map((e) => ({
+            ...e,
+            timestamp: new Date(e.timestamp).getTime(),
+            nft: { ...nft, events: undefined },
+          }))
         )
         .flat()
       events.value = interactions
diff --git a/styles/abstracts/_theme.scss b/styles/abstracts/_theme.scss
index afd6667aae..f8c01badbc 100644
--- a/styles/abstracts/_theme.scss
+++ b/styles/abstracts/_theme.scss
@@ -15,6 +15,10 @@ $themes: (
     'k-green': #04af00,
     'k-red': #ff5757,
     'k-grey': #999999,
+    'k-pink': #FFB6EF,
+    'k-yellow': #FEFFB6,
+    'k-blueaccent': #B6CBFF,
+    'k-greenaccent': #C2FFAC,
     'k-hovergrey': #6b6b6b,
     'k-blue': #6188e7,
     'k-blue-hover': #3567e0,
@@ -42,6 +46,10 @@ $themes: (
     'k-green': #04af00,
     'k-red': #ff5757,
     'k-grey': #cccccc,
+    'k-pink': #7A2A68,
+    'k-yellow': #363234,
+    'k-blueaccent': #2E50A2,
+    'k-greenaccent': #056A02,
     'k-hovergrey': #6b6b6b,
     'k-blue': #6188e7,
     'k-blue-hover': #3567e0,

From 76b7fa0a4d7f46a0bf5daae2934b0288d1f467c9 Mon Sep 17 00:00:00 2001
From: daiagi <daiagi@gmail.com>
Date: Fri, 24 Mar 2023 22:52:43 +0700
Subject: [PATCH 09/55] touch up events table

---
 .../collection/activity/events/EventRow.vue   | 173 +----------------
 .../collection/activity/events/Events.vue     |  52 +++--
 .../events/eventRow/EventRowDesktop.vue       | 181 ++++++++++++++++++
 .../events/eventRow/EventRowTablet.vue        | 174 +++++++++++++++++
 4 files changed, 387 insertions(+), 193 deletions(-)
 create mode 100644 components/collection/activity/events/eventRow/EventRowDesktop.vue
 create mode 100644 components/collection/activity/events/eventRow/EventRowTablet.vue

diff --git a/components/collection/activity/events/EventRow.vue b/components/collection/activity/events/EventRow.vue
index 7c5b94fe5d..b8c94ea8da 100644
--- a/components/collection/activity/events/EventRow.vue
+++ b/components/collection/activity/events/EventRow.vue
@@ -1,173 +1,14 @@
 <template>
-  <div class="columns">
-    <div class="column">
-      <img
-        v-if="avatar"
-        :src="avatar"
-        :alt="event.nft.name"
-        width="40"
-        height="40"
-        class="border" />
-      <img v-else src="/placeholder.webp" class="border" />
-    </div>
-
-    <div class="column">
-      <div
-        class="border is-size-7 px-4 py-1 is-flex is-align-items-center fixed-width fixed-height"
-        :class="interactionClass[event.interaction]">
-        <span>{{ interactionName }}</span>
-      </div>
-    </div>
-
-    <div class="column">
-      <div v-if="amount === blank">
-        {{ blank }}
-      </div>
-      <Money v-else :value="amount" />
-    </div>
-
-    <div class="column">
-      <nuxt-link
-        v-if="fromAddress !== blank"
-        :to="`/${urlPrefix}/u/${fromAddress}`"
-        class="has-text-link">
-        <IdentityIndex ref="identity" :address="fromAddress" show-clipboard />
-      </nuxt-link>
-      <div v-else>
-        {{ blank }}
-      </div>
-    </div>
-    <div class="column">
-      <nuxt-link
-        v-if="toAddress !== blank"
-        :to="`/${urlPrefix}/u/${toAddress}`"
-        class="has-text-link">
-        <IdentityIndex ref="identity" :address="toAddress" show-clipboard />
-      </nuxt-link>
-      <div v-else>
-        {{ blank }}
-      </div>
-    </div>
-    <div class="column">
-      {{ timeAgo(event.timestamp) }}
-    </div>
+  <div>
+    <EventRowDesktop :event="event" />
+    <!-- <EventRowTablet :event="event" class="is-hidden-desktop is-hidden-mobile" /> -->
   </div>
 </template>
 
 <script setup lang="ts">
-import { InteractionWithNFT } from '@/components/collection/utils/types'
-import { NFTMetadata } from '@/components/rmrk/service/scheme'
-import { processSingleMetadata } from '@/utils/cachingStrategy'
-import { sanitizeIpfsUrl } from '@/utils/ipfs'
-import { Interaction } from '@kodadot1/minimark'
-import Money from '@/components/shared/format/ChainMoney.vue'
-import IdentityIndex from '@/components/identity/IdentityIndex.vue'
-import { timeAgo } from '../utils'
-
-const { urlPrefix } = usePrefix()
-const props = defineProps<{
-  event: InteractionWithNFT
-}>()
-
-const avatar = ref<string>()
-const ineteractionNameMap = {
-  BUY: 'Sale',
-  LIST: 'List',
-  MINTNFT: 'Mint',
-  SEND: 'Transfer',
-}
-const blank = '--'
-
-const interactionName = computed(
-  () => ineteractionNameMap[props.event.interaction] || props.event.interaction
-)
-const amount = computed(() => {
-  switch (props.event.interaction) {
-    case Interaction.MINT:
-      return blank
-    case Interaction.LIST:
-    case Interaction.BUY:
-      return props.event.meta
-    default:
-      return blank
-  }
-})
-
-const fromAddress = computed(() => {
-  const interaction = props.event.interaction
-  if (interaction === Interaction.MINTNFT || interaction === Interaction.LIST) {
-    return blank
-  }
-  if (interaction === Interaction.BUY || interaction === Interaction.SEND) {
-    return props.event.currentOwner
-  }
-})
-
-const toAddress = computed(() => {
-  const interaction = props.event.interaction
-  if (interaction === Interaction.MINTNFT || interaction === Interaction.LIST) {
-    return props.event.caller
-  }
-  if (interaction === Interaction.BUY || interaction === Interaction.SEND) {
-    return props.event.caller
-  }
-})
+import { InteractionWithNFT } from '../../utils/types'
+import EventRowDesktop from './eventRow/EventRowDesktop.vue'
+import EventRowTablet from './eventRow/EventRowTablet.vue'
 
-const interactionClass = {
-  [Interaction.MINTNFT]: 'k-yellow',
-  [Interaction.LIST]: 'k-blueaccent',
-  [Interaction.BUY]: 'k-pink',
-  [Interaction.SEND]: 'background-color',
-}
-
-onMounted(() => {
-  getAvatar()
-})
-
-const getAvatar = async () => {
-  if (props.event) {
-    if (props.event.nft?.meta?.image) {
-      avatar.value = sanitizeIpfsUrl(props.event.nft.meta.image)
-    } else {
-      const meta = (await processSingleMetadata(
-        props.event.nft.metadata
-      )) as NFTMetadata
-      avatar.value = sanitizeIpfsUrl(meta?.image)
-    }
-  }
-}
+defineProps<{ event: InteractionWithNFT }>()
 </script>
-
-<style scoped lang="scss">
-@import '@/styles/abstracts/variables';
-
-.fixed-width {
-  width: 60px;
-}
-.fixed-height {
-  height: 22px;
-}
-.k-pink {
-  @include ktheme() {
-    background-color: theme('k-pink');
-  }
-}
-
-.k-yellow {
-  @include ktheme() {
-    background-color: theme('k-yellow');
-  }
-}
-
-.background-color {
-  @include ktheme() {
-    background-color: theme('background-color');
-  }
-}
-
-.k-blueaccent {
-  @include ktheme() {
-    background-color: theme('k-blueaccent');
-  }
-}
-</style>
diff --git a/components/collection/activity/events/Events.vue b/components/collection/activity/events/Events.vue
index d9568d9733..a7212d72b4 100644
--- a/components/collection/activity/events/Events.vue
+++ b/components/collection/activity/events/Events.vue
@@ -1,34 +1,32 @@
 <template>
   <div v-if="events.length > 0">
-    <div id="desktop and up">
-      <div class="columns is-size-7 k-grey py-3">
-        <div class="column">
-          <span>item</span>
-        </div>
-        <div class="column">
-          <span>event</span>
-        </div>
-        <div class="column">
-          <span>amount</span>
-        </div>
-        <div class="column">
-          <span>from</span>
-        </div>
-        <div class="column">
-          <span>to</span>
-        </div>
-        <div class="column">
-          <span>time</span>
-        </div>
+    <div class="is-hidden-touch columns is-size-7 k-grey py-3">
+      <div class="column">
+        <span>item</span>
       </div>
-      <div>
-        <EventRow
-          v-for="event in displayedEvents"
-          :key="event.id"
-          :event="event"
-          class="my-2 event-row-transition" />
-        <div ref="sentinel" />
+      <div class="column">
+        <span>event</span>
       </div>
+      <div class="column">
+        <span>amount</span>
+      </div>
+      <div class="column">
+        <span>from</span>
+      </div>
+      <div class="column">
+        <span>to</span>
+      </div>
+      <div class="column">
+        <span>time</span>
+      </div>
+    </div>
+    <div>
+      <EventRow
+        v-for="event in displayedEvents"
+        :key="event.id"
+        :event="event"
+        class="my-2 event-row-transition" />
+      <div ref="sentinel" />
     </div>
   </div>
 </template>
diff --git a/components/collection/activity/events/eventRow/EventRowDesktop.vue b/components/collection/activity/events/eventRow/EventRowDesktop.vue
new file mode 100644
index 0000000000..995132997e
--- /dev/null
+++ b/components/collection/activity/events/eventRow/EventRowDesktop.vue
@@ -0,0 +1,181 @@
+<template>
+  <div class="columns">
+    <div class="column">
+      <div class="is-flex is-align-items-center">
+        <img
+          v-if="avatar"
+          :src="avatar"
+          :alt="event.nft.name"
+          width="40"
+          height="40"
+          class="border" />
+        <img v-else src="/placeholder.webp" class="border" />
+        <div class="ml-5 has-text-weight-bold is-clipped elipsis">
+          {{ event.nft.name }}
+        </div>
+      </div>
+    </div>
+
+    <div class="column">
+      <div
+        class="border is-size-7 px-4 py-1 my-2 is-flex is-align-items-center fixed-width fixed-height"
+        :class="interactionClass[event.interaction]">
+        <span>{{ interactionName }}</span>
+      </div>
+    </div>
+
+    <div class="column">
+      <div v-if="amount === blank">
+        {{ blank }}
+      </div>
+      <Money v-else :value="amount" />
+    </div>
+
+    <div class="column">
+      <nuxt-link
+        v-if="fromAddress !== blank"
+        :to="`/${urlPrefix}/u/${fromAddress}`"
+        class="has-text-link">
+        <IdentityIndex ref="identity" :address="fromAddress" show-clipboard />
+      </nuxt-link>
+      <div v-else>
+        {{ blank }}
+      </div>
+    </div>
+    <div class="column">
+      <nuxt-link
+        v-if="toAddress !== blank"
+        :to="`/${urlPrefix}/u/${toAddress}`"
+        class="has-text-link">
+        <IdentityIndex ref="identity" :address="toAddress" show-clipboard />
+      </nuxt-link>
+      <div v-else>
+        {{ blank }}
+      </div>
+    </div>
+    <div class="column">
+      {{ timeAgo(event.timestamp) }}
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { InteractionWithNFT } from '@/components/collection/utils/types'
+import { NFTMetadata } from '@/components/rmrk/service/scheme'
+import { processSingleMetadata } from '@/utils/cachingStrategy'
+import { sanitizeIpfsUrl } from '@/utils/ipfs'
+import { Interaction } from '@kodadot1/minimark'
+import Money from '@/components/shared/format/ChainMoney.vue'
+import IdentityIndex from '@/components/identity/IdentityIndex.vue'
+import { timeAgo } from '../../utils'
+
+const { urlPrefix } = usePrefix()
+const props = defineProps<{
+  event: InteractionWithNFT
+}>()
+
+const avatar = ref<string>()
+const ineteractionNameMap = {
+  BUY: 'Sale',
+  LIST: 'List',
+  MINTNFT: 'Mint',
+  SEND: 'Transfer',
+}
+const blank = '--'
+
+const interactionName = computed(
+  () => ineteractionNameMap[props.event.interaction] || props.event.interaction
+)
+const amount = computed(() => {
+  switch (props.event.interaction) {
+    case Interaction.MINT:
+      return blank
+    case Interaction.LIST:
+    case Interaction.BUY:
+      return props.event.meta
+    default:
+      return blank
+  }
+})
+
+const fromAddress = computed(() => {
+  const interaction = props.event.interaction
+  if (interaction === Interaction.MINTNFT || interaction === Interaction.LIST) {
+    return blank
+  }
+  if (interaction === Interaction.BUY || interaction === Interaction.SEND) {
+    return props.event.currentOwner
+  }
+})
+
+const toAddress = computed(() => {
+  const interaction = props.event.interaction
+  if (interaction === Interaction.MINTNFT || interaction === Interaction.LIST) {
+    return props.event.caller
+  }
+  if (interaction === Interaction.BUY || interaction === Interaction.SEND) {
+    return props.event.caller
+  }
+})
+
+const interactionClass = {
+  [Interaction.MINTNFT]: 'k-yellow',
+  [Interaction.LIST]: 'k-blueaccent',
+  [Interaction.BUY]: 'k-pink',
+  [Interaction.SEND]: 'background-color',
+}
+
+onMounted(() => {
+  getAvatar()
+})
+
+const getAvatar = async () => {
+  if (props.event) {
+    if (props.event.nft?.meta?.image) {
+      avatar.value = sanitizeIpfsUrl(props.event.nft.meta.image)
+    } else {
+      const meta = (await processSingleMetadata(
+        props.event.nft.metadata
+      )) as NFTMetadata
+      avatar.value = sanitizeIpfsUrl(meta?.image)
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+@import '@/styles/abstracts/variables';
+
+.fixed-width {
+  width: 60px;
+}
+.fixed-height {
+  height: 22px;
+}
+.k-pink {
+  @include ktheme() {
+    background-color: theme('k-pink');
+  }
+}
+
+.k-yellow {
+  @include ktheme() {
+    background-color: theme('k-yellow');
+  }
+}
+
+.background-color {
+  @include ktheme() {
+    background-color: theme('background-color');
+  }
+}
+
+.k-blueaccent {
+  @include ktheme() {
+    background-color: theme('k-blueaccent');
+  }
+}
+.elipsis {
+  text-overflow: ellipsis;
+}
+</style>
diff --git a/components/collection/activity/events/eventRow/EventRowTablet.vue b/components/collection/activity/events/eventRow/EventRowTablet.vue
new file mode 100644
index 0000000000..29531ec541
--- /dev/null
+++ b/components/collection/activity/events/eventRow/EventRowTablet.vue
@@ -0,0 +1,174 @@
+<template>
+  <div>
+    <div class="mr-5">
+      <img
+        v-if="avatar"
+        :src="avatar"
+        :alt="event.nft.name"
+        width="40"
+        height="40"
+        class="border" />
+      <img v-else src="/placeholder.webp" class="border" />
+    </div>
+    <div class="is-flex is-justify-content-space-between"></div>
+
+    <div class="column">
+      <div
+        class="border is-size-7 px-4 py-1 is-flex is-align-items-center fixed-width fixed-height"
+        :class="interactionClass[event.interaction]">
+        <span>{{ interactionName }}</span>
+      </div>
+    </div>
+
+    <div class="column">
+      <div v-if="amount === blank">
+        {{ blank }}
+      </div>
+      <Money v-else :value="amount" />
+    </div>
+
+    <div class="column">
+      <nuxt-link
+        v-if="fromAddress !== blank"
+        :to="`/${urlPrefix}/u/${fromAddress}`"
+        class="has-text-link">
+        <IdentityIndex ref="identity" :address="fromAddress" show-clipboard />
+      </nuxt-link>
+      <div v-else>
+        {{ blank }}
+      </div>
+    </div>
+    <div class="column">
+      <nuxt-link
+        v-if="toAddress !== blank"
+        :to="`/${urlPrefix}/u/${toAddress}`"
+        class="has-text-link">
+        <IdentityIndex ref="identity" :address="toAddress" show-clipboard />
+      </nuxt-link>
+      <div v-else>
+        {{ blank }}
+      </div>
+    </div>
+    <div class="column">
+      {{ timeAgo(event.timestamp) }}
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { InteractionWithNFT } from '@/components/collection/utils/types'
+import { NFTMetadata } from '@/components/rmrk/service/scheme'
+import { processSingleMetadata } from '@/utils/cachingStrategy'
+import { sanitizeIpfsUrl } from '@/utils/ipfs'
+import { Interaction } from '@kodadot1/minimark'
+import Money from '@/components/shared/format/ChainMoney.vue'
+import IdentityIndex from '@/components/identity/IdentityIndex.vue'
+import { timeAgo } from '../../utils'
+
+const { urlPrefix } = usePrefix()
+const props = defineProps<{
+  event: InteractionWithNFT
+}>()
+
+const avatar = ref<string>()
+const ineteractionNameMap = {
+  BUY: 'Sale',
+  LIST: 'List',
+  MINTNFT: 'Mint',
+  SEND: 'Transfer',
+}
+const blank = '--'
+
+const interactionName = computed(
+  () => ineteractionNameMap[props.event.interaction] || props.event.interaction
+)
+const amount = computed(() => {
+  switch (props.event.interaction) {
+    case Interaction.MINT:
+      return blank
+    case Interaction.LIST:
+    case Interaction.BUY:
+      return props.event.meta
+    default:
+      return blank
+  }
+})
+
+const fromAddress = computed(() => {
+  const interaction = props.event.interaction
+  if (interaction === Interaction.MINTNFT || interaction === Interaction.LIST) {
+    return blank
+  }
+  if (interaction === Interaction.BUY || interaction === Interaction.SEND) {
+    return props.event.currentOwner
+  }
+})
+
+const toAddress = computed(() => {
+  const interaction = props.event.interaction
+  if (interaction === Interaction.MINTNFT || interaction === Interaction.LIST) {
+    return props.event.caller
+  }
+  if (interaction === Interaction.BUY || interaction === Interaction.SEND) {
+    return props.event.caller
+  }
+})
+
+const interactionClass = {
+  [Interaction.MINTNFT]: 'k-yellow',
+  [Interaction.LIST]: 'k-blueaccent',
+  [Interaction.BUY]: 'k-pink',
+  [Interaction.SEND]: 'background-color',
+}
+
+onMounted(() => {
+  getAvatar()
+})
+
+const getAvatar = async () => {
+  if (props.event) {
+    if (props.event.nft?.meta?.image) {
+      avatar.value = sanitizeIpfsUrl(props.event.nft.meta.image)
+    } else {
+      const meta = (await processSingleMetadata(
+        props.event.nft.metadata
+      )) as NFTMetadata
+      avatar.value = sanitizeIpfsUrl(meta?.image)
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+@import '@/styles/abstracts/variables';
+
+.fixed-width {
+  width: 60px;
+}
+.fixed-height {
+  height: 22px;
+}
+.k-pink {
+  @include ktheme() {
+    background-color: theme('k-pink');
+  }
+}
+
+.k-yellow {
+  @include ktheme() {
+    background-color: theme('k-yellow');
+  }
+}
+
+.background-color {
+  @include ktheme() {
+    background-color: theme('background-color');
+  }
+}
+
+.k-blueaccent {
+  @include ktheme() {
+    background-color: theme('k-blueaccent');
+  }
+}
+</style>

From 3557ecd0dc52cd4b953d16e6958530d9a6048dda Mon Sep 17 00:00:00 2001
From: daiagi <daiagi@gmail.com>
Date: Sat, 25 Mar 2023 11:01:05 +0700
Subject: [PATCH 10/55] feat: add offers to event table

---
 components/collection/activity/Activity.vue   |  15 +-
 .../collection/activity/events/EventRow.vue   |   4 +-
 .../collection/activity/events/Events.vue     |   6 +-
 .../events/eventRow/EventRowDesktop.vue       |  27 +-
 .../events/eventRow/EventRowTablet.vue        |   2 +-
 .../holdersFlippersTabs/FlipperTab.vue        |   2 +-
 .../holdersFlippersTabs/HolderTab.vue         |   2 +-
 .../activity/holdersFlippersTabs/moreNFTS.vue |   5 +-
 .../holdersFlippersTabs/moreNFTs/Holder.vue   |   2 +-
 .../{activity/utils.ts => utils/timeAgo.ts}   |   0
 components/collection/utils/types.ts          |  11 +
 .../collection/utils/useCollectionActivity.ts | 252 ++++++++++++++++++
 .../collection/utils/useCollectionDetails.ts  | 217 ---------------
 .../bsx/collectionActivityEvents.graphql      |  32 +++
 14 files changed, 337 insertions(+), 240 deletions(-)
 rename components/collection/{activity/utils.ts => utils/timeAgo.ts} (100%)
 create mode 100644 components/collection/utils/useCollectionActivity.ts
 create mode 100644 queries/subsquid/bsx/collectionActivityEvents.graphql

diff --git a/components/collection/activity/Activity.vue b/components/collection/activity/Activity.vue
index b58c4bacb1..8b584bd640 100644
--- a/components/collection/activity/Activity.vue
+++ b/components/collection/activity/Activity.vue
@@ -24,7 +24,7 @@ import ActivityChart from './Chart.vue'
 import OwnerInsights from './OwnerInsights.vue'
 import Events from './events/Events.vue'
 import BreadcrumbsFilter from '@/components/shared/BreadcrumbsFilter.vue'
-import { useCollectionActivity } from '@/components/collection/utils/useCollectionDetails'
+import { useCollectionActivity } from '~~/components/collection/utils/useCollectionActivity'
 import { Interaction } from '@kodadot1/minimark'
 const route = useRoute()
 
@@ -35,7 +35,7 @@ const toggleBreadcrumbsVisible = (active: boolean) => {
 }
 
 const collectionId = computed(() => route.params.id)
-const { events, flippers, owners } = useCollectionActivity({
+const { events, flippers, owners, offers } = useCollectionActivity({
   collectionId: collectionId.value,
 })
 
@@ -47,15 +47,14 @@ const InteractionIncluded = [
 ]
 
 const filteredEvents = computed(() =>
-  events.value
-    ? events.value.filter((event) =>
-        InteractionIncluded.includes(event.interaction as Interaction)
-      )
-    : []
+  events.value.filter((event) =>
+    InteractionIncluded.includes(event.interaction as Interaction)
+  )
 )
+const withOffers = computed(() => [...filteredEvents.value, ...offers.value])
 
 const sortedEvents = computed(() =>
-  filteredEvents.value.sort((a, b) => b.timestamp - a.timestamp)
+  withOffers.value.sort((a, b) => b.timestamp - a.timestamp)
 )
 </script>
 
diff --git a/components/collection/activity/events/EventRow.vue b/components/collection/activity/events/EventRow.vue
index b8c94ea8da..e0664c29d3 100644
--- a/components/collection/activity/events/EventRow.vue
+++ b/components/collection/activity/events/EventRow.vue
@@ -6,9 +6,9 @@
 </template>
 
 <script setup lang="ts">
-import { InteractionWithNFT } from '../../utils/types'
+import { InteractionWithNFT, Offer } from '@/components/collection/utils/types'
 import EventRowDesktop from './eventRow/EventRowDesktop.vue'
 import EventRowTablet from './eventRow/EventRowTablet.vue'
 
-defineProps<{ event: InteractionWithNFT }>()
+defineProps<{ event: InteractionWithNFT | Offer }>()
 </script>
diff --git a/components/collection/activity/events/Events.vue b/components/collection/activity/events/Events.vue
index a7212d72b4..c655e3077a 100644
--- a/components/collection/activity/events/Events.vue
+++ b/components/collection/activity/events/Events.vue
@@ -32,20 +32,20 @@
 </template>
 
 <script setup lang="ts">
-import { InteractionWithNFT } from '@/components/collection/utils/types'
+import { InteractionWithNFT, Offer } from '@/components/collection/utils/types'
 import EventRow from './EventRow.vue'
 import { useIntersectionObserver } from '@vueuse/core'
 
 const props = withDefaults(
   defineProps<{
-    events: InteractionWithNFT[]
+    events: (InteractionWithNFT | Offer)[]
   }>(),
   {
     events: () => [],
   }
 )
 
-const displayedEvents = ref<InteractionWithNFT[]>([])
+const displayedEvents = ref<(InteractionWithNFT | Offer)[]>([])
 
 watch(
   () => props.events,
diff --git a/components/collection/activity/events/eventRow/EventRowDesktop.vue b/components/collection/activity/events/eventRow/EventRowDesktop.vue
index 995132997e..6dd7e221d1 100644
--- a/components/collection/activity/events/eventRow/EventRowDesktop.vue
+++ b/components/collection/activity/events/eventRow/EventRowDesktop.vue
@@ -60,18 +60,22 @@
 </template>
 
 <script setup lang="ts">
-import { InteractionWithNFT } from '@/components/collection/utils/types'
+import {
+  InteractionWithNFT,
+  Offer,
+  OfferInteraction,
+} from '@/components/collection/utils/types'
 import { NFTMetadata } from '@/components/rmrk/service/scheme'
 import { processSingleMetadata } from '@/utils/cachingStrategy'
 import { sanitizeIpfsUrl } from '@/utils/ipfs'
 import { Interaction } from '@kodadot1/minimark'
 import Money from '@/components/shared/format/ChainMoney.vue'
 import IdentityIndex from '@/components/identity/IdentityIndex.vue'
-import { timeAgo } from '../../utils'
+import { timeAgo } from '@/components/collection/utils/timeAgo'
 
 const { urlPrefix } = usePrefix()
 const props = defineProps<{
-  event: InteractionWithNFT
+  event: InteractionWithNFT | Offer
 }>()
 
 const avatar = ref<string>()
@@ -80,6 +84,7 @@ const ineteractionNameMap = {
   LIST: 'List',
   MINTNFT: 'Mint',
   SEND: 'Transfer',
+  Offer: 'Offer',
 }
 const blank = '--'
 
@@ -92,7 +97,9 @@ const amount = computed(() => {
       return blank
     case Interaction.LIST:
     case Interaction.BUY:
-      return props.event.meta
+      return (props.event as InteractionWithNFT).meta
+    case OfferInteraction:
+      return (props.event as Offer).price
     default:
       return blank
   }
@@ -104,7 +111,10 @@ const fromAddress = computed(() => {
     return blank
   }
   if (interaction === Interaction.BUY || interaction === Interaction.SEND) {
-    return props.event.currentOwner
+    return (props.event as InteractionWithNFT).currentOwner
+  }
+  if (interaction === OfferInteraction) {
+    return (props.event as Offer).caller
   }
 })
 
@@ -116,12 +126,14 @@ const toAddress = computed(() => {
   if (interaction === Interaction.BUY || interaction === Interaction.SEND) {
     return props.event.caller
   }
+  return blank
 })
 
 const interactionClass = {
   [Interaction.MINTNFT]: 'k-yellow',
   [Interaction.LIST]: 'k-blueaccent',
   [Interaction.BUY]: 'k-pink',
+  [OfferInteraction]: 'k-greenaccent',
   [Interaction.SEND]: 'background-color',
 }
 
@@ -157,6 +169,11 @@ const getAvatar = async () => {
     background-color: theme('k-pink');
   }
 }
+.k-greenaccent {
+  @include ktheme() {
+    background-color: theme('k-greenaccent');
+  }
+}
 
 .k-yellow {
   @include ktheme() {
diff --git a/components/collection/activity/events/eventRow/EventRowTablet.vue b/components/collection/activity/events/eventRow/EventRowTablet.vue
index 29531ec541..6642a13731 100644
--- a/components/collection/activity/events/eventRow/EventRowTablet.vue
+++ b/components/collection/activity/events/eventRow/EventRowTablet.vue
@@ -63,7 +63,7 @@ import { sanitizeIpfsUrl } from '@/utils/ipfs'
 import { Interaction } from '@kodadot1/minimark'
 import Money from '@/components/shared/format/ChainMoney.vue'
 import IdentityIndex from '@/components/identity/IdentityIndex.vue'
-import { timeAgo } from '../../utils'
+import { timeAgo } from '@/components/collection/utils/timeAgo'
 
 const { urlPrefix } = usePrefix()
 const props = defineProps<{
diff --git a/components/collection/activity/holdersFlippersTabs/FlipperTab.vue b/components/collection/activity/holdersFlippersTabs/FlipperTab.vue
index b24ba9ef39..1c22f9ee3a 100644
--- a/components/collection/activity/holdersFlippersTabs/FlipperTab.vue
+++ b/components/collection/activity/holdersFlippersTabs/FlipperTab.vue
@@ -62,7 +62,7 @@ import { NeoIcon } from '@kodadot1/brick'
 import { set } from 'vue'
 
 import MoreNFTS from './moreNFTS.vue'
-import { timeAgo } from '../utils'
+import { timeAgo } from '@/components/collection/utils/timeAgo'
 
 const toggleNFTDetails = (flipperId: string) => {
   const isOpen = isNFTDetailsOpen.value[flipperId]
diff --git a/components/collection/activity/holdersFlippersTabs/HolderTab.vue b/components/collection/activity/holdersFlippersTabs/HolderTab.vue
index 1df102f1f9..ecc2dd28fb 100644
--- a/components/collection/activity/holdersFlippersTabs/HolderTab.vue
+++ b/components/collection/activity/holdersFlippersTabs/HolderTab.vue
@@ -52,7 +52,7 @@ import { NeoIcon } from '@kodadot1/brick'
 import { set } from 'vue'
 
 import MoreNFTS from './moreNFTS.vue'
-import { timeAgo } from '../utils'
+import { timeAgo } from '@/components/collection/utils/timeAgo'
 
 const toggleNFTDetails = (holderId: string) => {
   const isOpen = isNFTDetailsOpen.value[holderId]
diff --git a/components/collection/activity/holdersFlippersTabs/moreNFTS.vue b/components/collection/activity/holdersFlippersTabs/moreNFTS.vue
index 7b8556f57f..82522cf62a 100644
--- a/components/collection/activity/holdersFlippersTabs/moreNFTS.vue
+++ b/components/collection/activity/holdersFlippersTabs/moreNFTS.vue
@@ -6,7 +6,10 @@
 </template>
 
 <script setup lang="ts">
-import { FlipEvent, NFTExcludingEvents } from '../../utils/types'
+import {
+  FlipEvent,
+  NFTExcludingEvents,
+} from '@/components/collection/utils/types'
 import Flipper from './moreNFTs/Flipper.vue'
 import Holder from './moreNFTs/Holder.vue'
 
diff --git a/components/collection/activity/holdersFlippersTabs/moreNFTs/Holder.vue b/components/collection/activity/holdersFlippersTabs/moreNFTs/Holder.vue
index 1eb7c13397..8dada670b9 100644
--- a/components/collection/activity/holdersFlippersTabs/moreNFTs/Holder.vue
+++ b/components/collection/activity/holdersFlippersTabs/moreNFTs/Holder.vue
@@ -29,7 +29,7 @@ import { sanitizeIpfsUrl } from '@/utils/ipfs'
 import { processSingleMetadata } from '@/utils/cachingStrategy'
 import { NFTMetadata } from '@/components/rmrk/service/scheme'
 import { NFTExcludingEvents } from '@/components/collection/utils/types'
-import { timeAgo } from '@/components/collection/activity/utils'
+import { timeAgo } from '@/components/collection/utils/timeAgo'
 
 const props = defineProps<{
   nfts: (NFTExcludingEvents & { avatar?: string })[]
diff --git a/components/collection/activity/utils.ts b/components/collection/utils/timeAgo.ts
similarity index 100%
rename from components/collection/activity/utils.ts
rename to components/collection/utils/timeAgo.ts
diff --git a/components/collection/utils/types.ts b/components/collection/utils/types.ts
index 9be6546b7b..239eabd1e3 100644
--- a/components/collection/utils/types.ts
+++ b/components/collection/utils/types.ts
@@ -39,6 +39,17 @@ export type InteractionWithNFT = InteractionType & {
   nft: NFTExcludingEvents
   timestamp: number
 }
+
+export const OfferInteraction = 'Offer'
+export type Offer = {
+  caller: string
+  expiration: string
+  status: string
+  price: number
+  timestamp: number
+  interaction: string
+  nft: NFTExcludingEvents
+}
 export type NFTMap = {
   [nftId: string]: {
     owner: string
diff --git a/components/collection/utils/useCollectionActivity.ts b/components/collection/utils/useCollectionActivity.ts
new file mode 100644
index 0000000000..3e19b5c717
--- /dev/null
+++ b/components/collection/utils/useCollectionActivity.ts
@@ -0,0 +1,252 @@
+import { sum } from '@/utils/math'
+import { Interaction } from '@kodadot1/minimark'
+import {
+  Flippers,
+  InteractionWithNFT,
+  NFTMap,
+  Offer,
+  OfferInteraction,
+  Owners,
+} from './types'
+
+export const useCollectionActivity = ({ collectionId }) => {
+  const { urlPrefix } = usePrefix()
+  const events = ref<InteractionWithNFT[]>([])
+  const owners = ref<Owners>()
+  const flippers = ref<Flippers>()
+  const offers = ref<Offer[]>([])
+
+  const queryPrefix = urlPrefix.value === 'bsx' ? 'chain-bsx' : 'subsquid'
+
+  const { data } = useGraphql({
+    queryPrefix: queryPrefix,
+    queryName: 'collectionActivityEvents',
+    variables: {
+      id: collectionId,
+    },
+  })
+
+  watch(data, (result) => {
+    if (result?.collection) {
+      // flat events for chart
+      const interactions: InteractionWithNFT[] = result.collection.nfts
+        .map((nft) =>
+          nft.events.map((e) => ({
+            ...e,
+            timestamp: new Date(e.timestamp).getTime(),
+            nft: { ...nft, events: undefined },
+          }))
+        )
+        .flat()
+      events.value = interactions
+
+      if (urlPrefix.value === 'bsx') {
+        offers.value = getOffers(result.collection.nfts)
+      }
+
+      // not to repeat ref names
+      const ownersTemp = getOwners(result.collection.nfts)
+      const flippersTemp = getFlippers(interactions)
+
+      const flipperdIds = Object.keys(flippersTemp)
+      const OwnersIds = Object.keys(ownersTemp)
+
+      flipperdIds.forEach((id) => {
+        if (OwnersIds.includes(id)) {
+          ownersTemp[id].totalSold = flippersTemp[id].totalsold
+        }
+      })
+
+      owners.value = ownersTemp
+      flippers.value = flippersTemp
+    }
+  })
+  return {
+    events,
+    owners,
+    flippers,
+    offers,
+  }
+}
+
+const getOffers = (nfts): Offer[] => {
+  return nfts
+    .map((nft) =>
+      nft.offers.map((offer) => ({
+        ...offer,
+        price: parseInt(offer.price),
+        timestamp: new Date(offer.updatedAt).getTime(),
+        interaction: OfferInteraction,
+        nft: { ...nft, events: undefined, offers: undefined },
+      }))
+    )
+    .flat()
+}
+
+const getOwners = (nfts) => {
+  const owners: Owners = {}
+
+  nfts.forEach((nft) => {
+    const interactions = nft.events.map((e) => e.interaction)
+    const { events, ...nftExcludingEvents } = nft
+
+    if (interactions.includes(Interaction.CONSUME)) {
+      // no owner
+      return
+    }
+    if (
+      interactions.includes(Interaction.BUY) ||
+      interactions.includes(Interaction.SEND)
+    ) {
+      // NFT changed hands
+      const latestInteraction = events[events.length - 1]
+      const lastestTimeStamp = new Date(latestInteraction.timestamp).getTime()
+
+      const owner = owners[nft.currentOwner]
+      if (owner) {
+        // update entry
+        owner.nftCount++
+        owner.totalBought += parseInt(latestInteraction.meta)
+        owner.lastActivityTimestamp =
+          lastestTimeStamp > owner.lastActivityTimestamp
+            ? lastestTimeStamp
+            : owner.lastActivityTimestamp
+        owner.nfts = [...owner.nfts, nftExcludingEvents]
+        return
+      }
+      // new owner entry
+      owners[nft.currentOwner] = {
+        nftCount: 1,
+        totalBought: parseInt(latestInteraction.meta),
+        totalSold: 0,
+        lastActivityTimestamp: lastestTimeStamp,
+        nfts: [nftExcludingEvents],
+      }
+      return
+    }
+
+    // nft isn't consumed and it hasn't change hands => it is owned by it's creator
+    const mintInteraction = events[0]
+    const mintTimeStamp = new Date(mintInteraction.timestamp).getTime()
+    const owner = owners[nft.currentOwner]
+
+    if (owner) {
+      // update entry
+      owner.nftCount++
+      owner.lastActivityTimestamp =
+        mintTimeStamp > owner.lastActivityTimestamp
+          ? mintTimeStamp
+          : owner.lastActivityTimestamp
+      owner.nfts = [...owner.nfts, nftExcludingEvents]
+      return
+    }
+    // new owner entry
+    owners[nft.currentOwner] = {
+      nftCount: 1,
+      totalBought: 0,
+      totalSold: 0,
+      lastActivityTimestamp: mintTimeStamp,
+      nfts: [nftExcludingEvents],
+    }
+  })
+  return owners
+}
+
+const preProccessForFindingFlippers = (interactions: InteractionWithNFT[]) => {
+  const changeHandsInteractions: InteractionWithNFT[] = []
+  const NFTS: NFTMap = {}
+
+  interactions.forEach((event) => {
+    if (event.interaction === Interaction.MINTNFT) {
+      // mintInteractions.push(event)
+      NFTS[event.nft.id] = {
+        owner: event.caller,
+        nft: event.nft,
+        latestInteraction: Interaction.MINTNFT,
+        latestPrice: 0,
+      }
+    }
+
+    if (
+      event.interaction === Interaction.SEND ||
+      event.interaction === Interaction.BUY
+    ) {
+      changeHandsInteractions.push(event)
+    }
+  })
+
+  return { NFTS, changeHandsInteractions }
+}
+
+const getFlippers = (interactions: InteractionWithNFT[]): Flippers => {
+  const { NFTS, changeHandsInteractions } =
+    preProccessForFindingFlippers(interactions)
+
+  const flippers: Flippers = {}
+
+  changeHandsInteractions.forEach((interaction) => {
+    if (interaction.interaction === Interaction.SEND) {
+      NFTS[interaction.nft.id].owner = interaction.meta
+      NFTS[interaction.nft.id].latestInteraction = Interaction.SEND
+    }
+    if (interaction.interaction === Interaction.BUY) {
+      //it's a Flip!
+
+      const nftId = interaction.nft.id
+      const PreviousNFTState = NFTS[nftId]
+      const baseInfo = {
+        nft: NFTS[nftId].nft,
+        soldPrice: parseInt(interaction.meta),
+        soldTo: interaction.caller,
+        sellTimeStamp: new Date(interaction.timestamp).getTime(),
+      }
+      if (flippers[PreviousNFTState.owner] === undefined) {
+        flippers[PreviousNFTState.owner] = {
+          flips: [],
+          bestFlip: 0,
+          latestflipTimestamp: 0,
+          owned: 0,
+          totalBought: 0,
+          totalsold: 0,
+        }
+      }
+
+      //nft has been bought from previous owner -> previous owner is the flipper
+
+      const flipperHistory = flippers[PreviousNFTState.owner].flips
+      const boughtPrice =
+        PreviousNFTState.latestInteraction === Interaction.BUY
+          ? PreviousNFTState.latestPrice
+          : 0
+      const profit =
+        boughtPrice > 0 ? (baseInfo.soldPrice / boughtPrice) * 100 : 0
+      const thisFlip = {
+        ...baseInfo,
+        boughtPrice,
+        profit,
+      }
+
+      flippers[PreviousNFTState.owner].flips = [...flipperHistory, thisFlip]
+
+      // update last state of NFT
+      NFTS[nftId] = {
+        ...PreviousNFTState,
+        owner: interaction.caller,
+        latestInteraction: interaction.interaction,
+        latestPrice: parseInt(interaction.meta),
+      }
+    }
+  })
+
+  Object.entries(flippers).forEach(([flipperId, { flips }]) => {
+    flippers[flipperId] = {
+      owned: flips.length,
+      totalBought: sum(flips.map((flip) => flip.boughtPrice)),
+      totalsold: sum(flips.map((flip) => flip.soldPrice)),
+      bestFlip: Math.max(...flips.map((flip) => flip.profit)),
+      latestflipTimestamp: Math.max(...flips.map((flip) => flip.sellTimeStamp)),
+      flips,
+    }
+  })
+  return flippers
+}
diff --git a/components/collection/utils/useCollectionDetails.ts b/components/collection/utils/useCollectionDetails.ts
index 7a89fc1a1e..b33f4a99a4 100644
--- a/components/collection/utils/useCollectionDetails.ts
+++ b/components/collection/utils/useCollectionDetails.ts
@@ -131,220 +131,3 @@ export const useCollectionMinimal = ({ collectionId }) => {
   })
   return { collection }
 }
-
-export const useCollectionActivity = ({ collectionId }) => {
-  const events = ref<InteractionWithNFT[]>()
-  const owners = ref<Owners>()
-  const flippers = ref<Flippers>()
-
-  const { data } = useGraphql({
-    queryPrefix: 'subsquid',
-    queryName: 'collectionActivityEvents',
-    variables: {
-      id: collectionId,
-    },
-  })
-
-  watch(data, (result) => {
-    if (result?.collection) {
-      // flat events for chart
-      const interactions: InteractionWithNFT[] = result.collection.nfts
-        .map((nft) =>
-          nft.events.map((e) => ({
-            ...e,
-            timestamp: new Date(e.timestamp).getTime(),
-            nft: { ...nft, events: undefined },
-          }))
-        )
-        .flat()
-      events.value = interactions
-
-      // not to repeat ref names
-      const ownersTemp = getOwners(result.collection.nfts)
-      const flippersTemp = getFlippers(interactions)
-
-      const flipperdIds = Object.keys(flippersTemp)
-      const OwnersIds = Object.keys(ownersTemp)
-
-      flipperdIds.forEach((id) => {
-        if (OwnersIds.includes(id)) {
-          ownersTemp[id].totalSold = flippersTemp[id].totalsold
-        }
-      })
-
-      owners.value = ownersTemp
-      flippers.value = flippersTemp
-    }
-  })
-  return {
-    events,
-    owners,
-    flippers,
-  }
-}
-
-const getOwners = (nfts) => {
-  const owners: Owners = {}
-
-  nfts.forEach((nft) => {
-    const interactions = nft.events.map((e) => e.interaction)
-    const { events, ...nftExcludingEvents } = nft
-
-    if (interactions.includes(Interaction.CONSUME)) {
-      // no owner
-      return
-    }
-    if (
-      interactions.includes(Interaction.BUY) ||
-      interactions.includes(Interaction.SEND)
-    ) {
-      // NFT changed hands
-      const latestInteraction = events[events.length - 1]
-      const lastestTimeStamp = new Date(latestInteraction.timestamp).getTime()
-
-      const owner = owners[nft.currentOwner]
-      if (owner) {
-        // update entry
-        owner.nftCount++
-        owner.totalBought += parseInt(latestInteraction.meta)
-        owner.lastActivityTimestamp =
-          lastestTimeStamp > owner.lastActivityTimestamp
-            ? lastestTimeStamp
-            : owner.lastActivityTimestamp
-        owner.nfts = [...owner.nfts, nftExcludingEvents]
-        return
-      }
-      // new owner entry
-      owners[nft.currentOwner] = {
-        nftCount: 1,
-        totalBought: parseInt(latestInteraction.meta),
-        lastActivityTimestamp: lastestTimeStamp,
-        nfts: [nftExcludingEvents],
-      }
-      return
-    }
-
-    // nft isn't consumed and it hasn't change hands => it is owned by it's creator
-    const mintInteraction = events[0]
-    const mintTimeStamp = new Date(mintInteraction.timestamp).getTime()
-    const owner = owners[nft.currentOwner]
-
-    if (owner) {
-      // update entry
-      owner.nftCount++
-      owner.lastActivityTimestamp =
-        mintTimeStamp > owner.lastActivityTimestamp
-          ? mintTimeStamp
-          : owner.lastActivityTimestamp
-      owner.nfts = [...owner.nfts, nftExcludingEvents]
-      return
-    }
-    // new owner entry
-    owners[nft.currentOwner] = {
-      nftCount: 1,
-      totalBought: 0,
-      lastActivityTimestamp: mintTimeStamp,
-      nfts: [nftExcludingEvents],
-    }
-  })
-  return owners
-}
-
-const preProccessForFindingFlippers = (interactions: InteractionWithNFT[]) => {
-  const changeHandsInteractions: InteractionWithNFT[] = []
-  const NFTS: NFTMap = {}
-
-  interactions.forEach((event) => {
-    if (event.interaction === Interaction.MINTNFT) {
-      // mintInteractions.push(event)
-      NFTS[event.nft.id] = {
-        owner: event.caller,
-        nft: event.nft,
-        latestInteraction: Interaction.MINTNFT,
-        latestPrice: 0,
-      }
-    }
-
-    if (
-      event.interaction === Interaction.SEND ||
-      event.interaction === Interaction.BUY
-    ) {
-      changeHandsInteractions.push(event)
-    }
-  })
-
-  return { NFTS, changeHandsInteractions }
-}
-
-const getFlippers = (interactions: InteractionWithNFT[]): Flippers => {
-  const { NFTS, changeHandsInteractions } =
-    preProccessForFindingFlippers(interactions)
-
-  const flippers: Flippers = {}
-
-  changeHandsInteractions.forEach((interaction) => {
-    if (interaction.interaction === Interaction.SEND) {
-      NFTS[interaction.nft.id].owner = interaction.meta
-      NFTS[interaction.nft.id].latestInteraction = Interaction.SEND
-    }
-    if (interaction.interaction === Interaction.BUY) {
-      //it's a Flip!
-
-      const nftId = interaction.nft.id
-      const PreviousNFTState = NFTS[nftId]
-      const baseInfo = {
-        nft: NFTS[nftId].nft,
-        soldPrice: parseInt(interaction.meta),
-        soldTo: interaction.caller,
-        sellTimeStamp: new Date(interaction.timestamp).getTime(),
-      }
-      if (flippers[PreviousNFTState.owner] === undefined) {
-        flippers[PreviousNFTState.owner] = {
-          flips: [],
-          bestFlip: 0,
-          latestflipTimestamp: 0,
-          owned: 0,
-          totalBought: 0,
-          totalsold: 0,
-        }
-      }
-
-      //nft has been bought from previous owner -> previous owner is the flipper
-
-      const flipperHistory = flippers[PreviousNFTState.owner].flips
-      const boughtPrice =
-        PreviousNFTState.latestInteraction === Interaction.BUY
-          ? PreviousNFTState.latestPrice
-          : 0
-      const profit =
-        boughtPrice > 0 ? (baseInfo.soldPrice / boughtPrice) * 100 : 0
-      const thisFlip = {
-        ...baseInfo,
-        boughtPrice,
-        profit,
-      }
-
-      flippers[PreviousNFTState.owner].flips = [...flipperHistory, thisFlip]
-
-      // update last state of NFT
-      NFTS[nftId] = {
-        ...PreviousNFTState,
-        owner: interaction.caller,
-        latestInteraction: interaction.interaction,
-        latestPrice: parseInt(interaction.meta),
-      }
-    }
-  })
-
-  Object.entries(flippers).forEach(([flipperId, { flips }]) => {
-    flippers[flipperId] = {
-      owned: flips.length,
-      totalBought: sum(flips.map((flip) => flip.boughtPrice)),
-      totalsold: sum(flips.map((flip) => flip.soldPrice)),
-      bestFlip: Math.max(...flips.map((flip) => flip.profit)),
-      latestflipTimestamp: Math.max(...flips.map((flip) => flip.sellTimeStamp)),
-      flips,
-    }
-  })
-  return flippers
-}
diff --git a/queries/subsquid/bsx/collectionActivityEvents.graphql b/queries/subsquid/bsx/collectionActivityEvents.graphql
new file mode 100644
index 0000000000..a189e7f7e6
--- /dev/null
+++ b/queries/subsquid/bsx/collectionActivityEvents.graphql
@@ -0,0 +1,32 @@
+query collectionActivityEvents($id: String!) {
+  collection: collectionEntityById(id: $id) {
+    id
+    nfts {
+      events(orderBy: timestamp_ASC) {
+        timestamp
+        meta
+        interaction
+        id
+        caller
+        currentOwner
+      }
+      offers {
+        caller
+        expiration
+        status
+        price
+        updatedAt
+      }
+      currentOwner
+      name
+      price
+      metadata
+      meta {
+        id
+        image
+      }
+      updatedAt
+      id
+    }
+  }
+}

From dfd86b1f734ea3b859ea48f7d3efd89b3e42e7b3 Mon Sep 17 00:00:00 2001
From: daiagi <daiagi@gmail.com>
Date: Sat, 25 Mar 2023 11:46:24 +0700
Subject: [PATCH 11/55] implement design review

---
 .../collection/activity/events/Events.vue     | 14 ++++-----
 .../events/eventRow/EventRowDesktop.vue       | 31 ++++++++++++-------
 .../holdersFlippersTabs/FlipperTab.vue        |  2 +-
 .../holdersFlippersTabs/HolderTab.vue         |  2 +-
 components/explore/SidebarFilter.vue          |  2 +-
 components/identity/module/IdentityChain.vue  |  2 +-
 components/rmrk/Profile/ProfileLink.vue       |  3 +-
 locales/en.json                               | 10 +++++-
 8 files changed, 42 insertions(+), 24 deletions(-)

diff --git a/components/collection/activity/events/Events.vue b/components/collection/activity/events/Events.vue
index c655e3077a..7af3e5d34e 100644
--- a/components/collection/activity/events/Events.vue
+++ b/components/collection/activity/events/Events.vue
@@ -2,28 +2,28 @@
   <div v-if="events.length > 0">
     <div class="is-hidden-touch columns is-size-7 k-grey py-3">
       <div class="column">
-        <span>item</span>
+        <span>{{ $t('activity.event.item') }}</span>
       </div>
       <div class="column">
-        <span>event</span>
+        <span>{{ $t('activity.event.event') }}</span>
       </div>
       <div class="column">
-        <span>amount</span>
+        <span>{{ $t('activity.event.amount') }}</span>
       </div>
       <div class="column">
-        <span>from</span>
+        <span>{{ $t('activity.event.from') }}</span>
       </div>
       <div class="column">
-        <span>to</span>
+        <span>{{ $t('activity.event.to') }}</span>
       </div>
       <div class="column">
-        <span>time</span>
+        <span>{{ $t('activity.event.time') }}</span>
       </div>
     </div>
     <div>
       <EventRow
         v-for="event in displayedEvents"
-        :key="event.id"
+        :key="event.timestamp"
         :event="event"
         class="my-2 event-row-transition" />
       <div ref="sentinel" />
diff --git a/components/collection/activity/events/eventRow/EventRowDesktop.vue b/components/collection/activity/events/eventRow/EventRowDesktop.vue
index 6dd7e221d1..72e01c79e0 100644
--- a/components/collection/activity/events/eventRow/EventRowDesktop.vue
+++ b/components/collection/activity/events/eventRow/EventRowDesktop.vue
@@ -2,17 +2,26 @@
   <div class="columns">
     <div class="column">
       <div class="is-flex is-align-items-center">
-        <img
-          v-if="avatar"
-          :src="avatar"
-          :alt="event.nft.name"
-          width="40"
-          height="40"
-          class="border" />
-        <img v-else src="/placeholder.webp" class="border" />
-        <div class="ml-5 has-text-weight-bold is-clipped elipsis">
-          {{ event.nft.name }}
-        </div>
+        <nuxt-link :to="`/${urlPrefix}/gallery/${event.nft.id}`">
+          <img
+            v-if="avatar"
+            :src="avatar"
+            :alt="event.nft.name"
+            width="50"
+            height="50"
+            class="border" />
+          <img
+            v-else
+            src="/placeholder.webp"
+            class="border"
+            width="50"
+            height="50" />
+        </nuxt-link>
+        <nuxt-link :to="`/${urlPrefix}/gallery/${event.nft.id}`">
+          <div class="ml-5 has-text-weight-bold is-clipped elipsis">
+            {{ event.nft.name }}
+          </div>
+        </nuxt-link>
       </div>
     </div>
 
diff --git a/components/collection/activity/holdersFlippersTabs/FlipperTab.vue b/components/collection/activity/holdersFlippersTabs/FlipperTab.vue
index 1c22f9ee3a..64204e5750 100644
--- a/components/collection/activity/holdersFlippersTabs/FlipperTab.vue
+++ b/components/collection/activity/holdersFlippersTabs/FlipperTab.vue
@@ -8,7 +8,7 @@
       :key="flipperId"
       class="hide-last-hr">
       <div class="is-flex is-flex-direction-column gap">
-        <ProfileLink :address="flipperId" />
+        <ProfileLink :address="flipperId" :avatar-size="35" />
         <div class="is-flex is-justify-content-space-between">
           <span class="is-size-7 k-grey">{{ $t('activity.owned') }}</span>
           <span>{{ owned }}</span>
diff --git a/components/collection/activity/holdersFlippersTabs/HolderTab.vue b/components/collection/activity/holdersFlippersTabs/HolderTab.vue
index ecc2dd28fb..fd0ff89945 100644
--- a/components/collection/activity/holdersFlippersTabs/HolderTab.vue
+++ b/components/collection/activity/holdersFlippersTabs/HolderTab.vue
@@ -5,7 +5,7 @@
       :key="holderId"
       class="hide-last-hr">
       <div class="is-flex is-flex-direction-column gap">
-        <ProfileLink :address="holderId" />
+        <ProfileLink :address="holderId" :avatar-size="35" />
         <div class="is-flex is-justify-content-space-between">
           <span class="is-size-7 k-grey">{{ $t('activity.owned') }}</span>
           <span>{{ holdings.nftCount }}</span>
diff --git a/components/explore/SidebarFilter.vue b/components/explore/SidebarFilter.vue
index e5eaa24e3f..93f11fdccc 100644
--- a/components/explore/SidebarFilter.vue
+++ b/components/explore/SidebarFilter.vue
@@ -28,7 +28,7 @@ const open = computed(() => preferencesStore.getsidebarFilterCollapse)
   position: sticky;
   top: 84px;
   height: calc(100vh - 84px);
-  margin-right: 32px;
+  margin-right: $fluid-container-padding;
 }
 
 .o-side {
diff --git a/components/identity/module/IdentityChain.vue b/components/identity/module/IdentityChain.vue
index d1440a3800..f4e1be179f 100644
--- a/components/identity/module/IdentityChain.vue
+++ b/components/identity/module/IdentityChain.vue
@@ -17,7 +17,7 @@
     <template v-else-if="!hideIdentityPopover && !isMobileDevice">
       <IdentityPopover v-if="address">
         <template #trigger>
-          {{ name }}
+          <span class="has-text-weight-bold">{{ name }}</span>
         </template>
       </IdentityPopover>
     </template>
diff --git a/components/rmrk/Profile/ProfileLink.vue b/components/rmrk/Profile/ProfileLink.vue
index d0fd43d605..5e94f9df55 100644
--- a/components/rmrk/Profile/ProfileLink.vue
+++ b/components/rmrk/Profile/ProfileLink.vue
@@ -7,7 +7,7 @@
       link="u">
       <Identity v-if="address" :address="address" />
       <template #extra>
-        <Avatar :size="24" :value="address" class="mr-2" />
+        <Avatar :size="avatarSize || 24" :value="address" class="mr-2" />
       </template>
     </LinkResolver>
     <template v-if="showTwitter">
@@ -48,6 +48,7 @@ export default class ProfileLink extends mixins(PrefixMixin) {
   @Prop(Boolean) public showTwitter!: boolean
   @Prop(Boolean) public showDiscord!: boolean
   @Prop(Boolean) public showDotscanner!: boolean
+  @Prop() public avatarSize!: number
   get shortendId(): string {
     return shortAddress(this.address)
   }
diff --git a/locales/en.json b/locales/en.json
index 6d9bd152c6..4f73dec04f 100644
--- a/locales/en.json
+++ b/locales/en.json
@@ -921,7 +921,15 @@
     "nftDetails": "NFT Details",
     "profit": "Profit",
     "bought": "Bought",
-    "sold": "Sold"
+    "sold": "Sold",
+    "event": {
+      "item": "Item",
+      "event": "Event",
+      "amount": "Amount",
+      "from": "From",
+      "to": "To",
+      "time": "Time"
+    }
   },
   "profileStats": {
     "listed": "Listed",

From d350989d6c2ea981e12b30f5702041035c7d6047 Mon Sep 17 00:00:00 2001
From: daiagi <daiagi@gmail.com>
Date: Sat, 25 Mar 2023 13:14:53 +0700
Subject: [PATCH 12/55] responsivity

---
 components/collection/activity/Activity.vue   |  53 ++++++--
 .../collection/activity/events/EventRow.vue   |   4 +-
 .../events/eventRow/EventRowTablet.vue        | 119 +++++++++++-------
 3 files changed, 114 insertions(+), 62 deletions(-)

diff --git a/components/collection/activity/Activity.vue b/components/collection/activity/Activity.vue
index 8b584bd640..ea7015b895 100644
--- a/components/collection/activity/Activity.vue
+++ b/components/collection/activity/Activity.vue
@@ -1,19 +1,31 @@
 <template>
-  <div class="is-flex">
+  <div
+    ref="wrapper"
+    class="is-flex"
+    :class="{ 'is-justify-content-center': mobile }">
     <SidebarFilter />
     <div class="w-full mt-5">
-      <div class="columns">
-        <div class="column is-two-thirds-desktop is-half-tablet">
-          <ActivityChart :events="events" />
+      <div v-if="tablet">
+        <div class="columns">
+          <div class="column is-two-thirds-desktop is-half-tablet">
+            <ActivityChart :events="events" />
+          </div>
+          <div class="column">
+            <OwnerInsights :owners="owners" :flippers="flippers" />
+          </div>
         </div>
-        <div class="column">
+        <Events :events="sortedEvents" />
+      </div>
+      <div v-if="mobile">
+        <div class="is-flex is-flex-direction-column gap">
           <OwnerInsights :owners="owners" :flippers="flippers" />
+          <ActivityChart :events="events" />
+          <Events :events="sortedEvents" />
         </div>
       </div>
       <!-- <div v-show="isFiltersActive" class="border-bottom pb-5 border-k-grey">
         <BreadcrumbsFilter @filtersActive="toggleBreadcrumbsVisible" />
       </div> -->
-      <Events :events="sortedEvents" />
     </div>
   </div>
 </template>
@@ -26,7 +38,14 @@ import Events from './events/Events.vue'
 import BreadcrumbsFilter from '@/components/shared/BreadcrumbsFilter.vue'
 import { useCollectionActivity } from '~~/components/collection/utils/useCollectionActivity'
 import { Interaction } from '@kodadot1/minimark'
+import { useResizeObserver, useWindowSize } from '@vueuse/core'
+const sidebarwidth = 55
+const mobileBreakpoint = 768 + sidebarwidth
+const windowWidth = useWindowSize().width.value
 const route = useRoute()
+const tablet = ref(windowWidth > mobileBreakpoint)
+const mobile = ref(windowWidth <= mobileBreakpoint)
+const wrapper = ref<HTMLDivElement | null>(null)
 
 const isFiltersActive = ref(false)
 
@@ -56,14 +75,24 @@ const withOffers = computed(() => [...filteredEvents.value, ...offers.value])
 const sortedEvents = computed(() =>
   withOffers.value.sort((a, b) => b.timestamp - a.timestamp)
 )
+
+useResizeObserver(
+  wrapper,
+  (entry) => {
+    if (entry[0].contentRect.width >= mobileBreakpoint) {
+      tablet.value = true
+      mobile.value = false
+    } else {
+      tablet.value = false
+      mobile.value = true
+    }
+  },
+  {}
+)
 </script>
 
 <style lang="scss" scoped>
-@import '@/styles/abstracts/variables';
-
-.border-k-grey {
-  @include ktheme() {
-    border-color: theme('k-grey');
-  }
+.gap {
+  gap: 2.5rem;
 }
 </style>
diff --git a/components/collection/activity/events/EventRow.vue b/components/collection/activity/events/EventRow.vue
index e0664c29d3..909c6c17da 100644
--- a/components/collection/activity/events/EventRow.vue
+++ b/components/collection/activity/events/EventRow.vue
@@ -1,7 +1,7 @@
 <template>
   <div>
-    <EventRowDesktop :event="event" />
-    <!-- <EventRowTablet :event="event" class="is-hidden-desktop is-hidden-mobile" /> -->
+    <EventRowDesktop :event="event" class="is-hidden-touch" />
+    <EventRowTablet :event="event" class="is-hidden-desktop" />
   </div>
 </template>
 
diff --git a/components/collection/activity/events/eventRow/EventRowTablet.vue b/components/collection/activity/events/eventRow/EventRowTablet.vue
index 6642a13731..bb9c089541 100644
--- a/components/collection/activity/events/eventRow/EventRowTablet.vue
+++ b/components/collection/activity/events/eventRow/EventRowTablet.vue
@@ -1,62 +1,76 @@
 <template>
   <div>
-    <div class="mr-5">
-      <img
-        v-if="avatar"
-        :src="avatar"
-        :alt="event.nft.name"
-        width="40"
-        height="40"
-        class="border" />
-      <img v-else src="/placeholder.webp" class="border" />
-    </div>
-    <div class="is-flex is-justify-content-space-between"></div>
-
-    <div class="column">
-      <div
-        class="border is-size-7 px-4 py-1 is-flex is-align-items-center fixed-width fixed-height"
-        :class="interactionClass[event.interaction]">
-        <span>{{ interactionName }}</span>
+    <div class="is-flex">
+      <div class="mr-5">
+        <img
+          v-if="avatar"
+          :src="avatar"
+          :alt="event.nft.name"
+          width="40"
+          height="40"
+          class="border" />
+        <img v-else src="/placeholder.webp" class="border" />
       </div>
-    </div>
-
-    <div class="column">
-      <div v-if="amount === blank">
-        {{ blank }}
+      <div class="is-flex is-flex-direction-column is-flex-grow-1">
+        <div class="is-flex is-justify-content-space-between mb-2">
+          <nuxt-link :to="`/${urlPrefix}/gallery/${event.nft.id}`">
+            <div class="has-text-weight-bold is-clipped elipsis">
+              {{ event.nft.name }}
+            </div>
+          </nuxt-link>
+          <div v-if="amount === blank">
+            {{ blank }}
+          </div>
+          <Money v-else :value="amount" />
+        </div>
+        <div class="is-flex is-justify-content-space-between">
+          <div
+            class="border is-size-7 px-4 py-1 is-flex is-align-items-center fixed-width fixed-height"
+            :class="interactionClass[event.interaction]">
+            <span>{{ interactionName }}</span>
+          </div>
+          <div>
+            {{ timeAgo(event.timestamp) }}
+          </div>
+        </div>
       </div>
-      <Money v-else :value="amount" />
     </div>
-
-    <div class="column">
-      <nuxt-link
-        v-if="fromAddress !== blank"
-        :to="`/${urlPrefix}/u/${fromAddress}`"
-        class="has-text-link">
-        <IdentityIndex ref="identity" :address="fromAddress" show-clipboard />
-      </nuxt-link>
-      <div v-else>
-        {{ blank }}
+    <div class="is-flex mt-4 gap">
+      <div class="is-flex is-align-items-center">
+        <span class="is-size-7 k-grey mr-3"
+          >{{ $t('activity.event.from') }}:</span
+        >
+        <nuxt-link
+          v-if="fromAddress !== blank"
+          :to="`/${urlPrefix}/u/${fromAddress}`"
+          class="has-text-link">
+          <IdentityIndex ref="identity" :address="fromAddress" show-clipboard />
+        </nuxt-link>
+        <div v-else>
+          {{ blank }}
+        </div>
       </div>
-    </div>
-    <div class="column">
-      <nuxt-link
-        v-if="toAddress !== blank"
-        :to="`/${urlPrefix}/u/${toAddress}`"
-        class="has-text-link">
-        <IdentityIndex ref="identity" :address="toAddress" show-clipboard />
-      </nuxt-link>
-      <div v-else>
-        {{ blank }}
+
+      <div class="is-flex is-align-items-center">
+        <span class="is-size-7 k-grey mr-3"
+          >{{ $t('activity.event.to') }}:</span
+        >
+        <nuxt-link
+          v-if="toAddress !== blank"
+          :to="`/${urlPrefix}/u/${toAddress}`"
+          class="has-text-link">
+          <IdentityIndex ref="identity" :address="toAddress" show-clipboard />
+        </nuxt-link>
+        <div v-else>
+          {{ blank }}
+        </div>
       </div>
     </div>
-    <div class="column">
-      {{ timeAgo(event.timestamp) }}
-    </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import { InteractionWithNFT } from '@/components/collection/utils/types'
+import { InteractionWithNFT, Offer } from '@/components/collection/utils/types'
 import { NFTMetadata } from '@/components/rmrk/service/scheme'
 import { processSingleMetadata } from '@/utils/cachingStrategy'
 import { sanitizeIpfsUrl } from '@/utils/ipfs'
@@ -67,7 +81,7 @@ import { timeAgo } from '@/components/collection/utils/timeAgo'
 
 const { urlPrefix } = usePrefix()
 const props = defineProps<{
-  event: InteractionWithNFT
+  event: InteractionWithNFT | Offer
 }>()
 
 const avatar = ref<string>()
@@ -148,11 +162,20 @@ const getAvatar = async () => {
 .fixed-height {
   height: 22px;
 }
+
+.gap {
+  gap: 1rem;
+}
 .k-pink {
   @include ktheme() {
     background-color: theme('k-pink');
   }
 }
+.k-grey {
+  @include ktheme() {
+    color: theme('k-grey');
+  }
+}
 
 .k-yellow {
   @include ktheme() {

From e1381e7de39bc9c6aaf3d12716b32f9e966398db Mon Sep 17 00:00:00 2001
From: daiagi <daiagi@gmail.com>
Date: Sat, 25 Mar 2023 13:26:54 +0700
Subject: [PATCH 13/55] clear deepScan deepSource issues

---
 components/collection/activity/Activity.vue   |   8 +-
 .../events/eventRow/EventRowDesktop.vue       |   2 +-
 .../events/eventRow/EventRowTablet.vue        |   2 +-
 .../holdersFlippersTabs/moreNFTs/Flipper.vue  |   2 +-
 .../holdersFlippersTabs/moreNFTs/Holder.vue   |   2 +-
 .../collection/utils/useCollectionActivity.ts | 120 +++++++++---------
 .../collection/utils/useCollectionDetails.ts  |   5 +-
 7 files changed, 70 insertions(+), 71 deletions(-)

diff --git a/components/collection/activity/Activity.vue b/components/collection/activity/Activity.vue
index ea7015b895..0dc046c07d 100644
--- a/components/collection/activity/Activity.vue
+++ b/components/collection/activity/Activity.vue
@@ -35,7 +35,7 @@ import SidebarFilter from '@/components/explore/SidebarFilter.vue'
 import ActivityChart from './Chart.vue'
 import OwnerInsights from './OwnerInsights.vue'
 import Events from './events/Events.vue'
-import BreadcrumbsFilter from '@/components/shared/BreadcrumbsFilter.vue'
+// import BreadcrumbsFilter from '@/components/shared/BreadcrumbsFilter.vue'
 import { useCollectionActivity } from '~~/components/collection/utils/useCollectionActivity'
 import { Interaction } from '@kodadot1/minimark'
 import { useResizeObserver, useWindowSize } from '@vueuse/core'
@@ -49,9 +49,9 @@ const wrapper = ref<HTMLDivElement | null>(null)
 
 const isFiltersActive = ref(false)
 
-const toggleBreadcrumbsVisible = (active: boolean) => {
-  isFiltersActive.value = active
-}
+// const toggleBreadcrumbsVisible = (active: boolean) => {
+//   isFiltersActive.value = active
+// }
 
 const collectionId = computed(() => route.params.id)
 const { events, flippers, owners, offers } = useCollectionActivity({
diff --git a/components/collection/activity/events/eventRow/EventRowDesktop.vue b/components/collection/activity/events/eventRow/EventRowDesktop.vue
index 72e01c79e0..abba21d1e6 100644
--- a/components/collection/activity/events/eventRow/EventRowDesktop.vue
+++ b/components/collection/activity/events/eventRow/EventRowDesktop.vue
@@ -152,7 +152,7 @@ onMounted(() => {
 
 const getAvatar = async () => {
   if (props.event) {
-    if (props.event.nft?.meta?.image) {
+    if (props.event.nft.meta?.image) {
       avatar.value = sanitizeIpfsUrl(props.event.nft.meta.image)
     } else {
       const meta = (await processSingleMetadata(
diff --git a/components/collection/activity/events/eventRow/EventRowTablet.vue b/components/collection/activity/events/eventRow/EventRowTablet.vue
index bb9c089541..f6a48a4fbd 100644
--- a/components/collection/activity/events/eventRow/EventRowTablet.vue
+++ b/components/collection/activity/events/eventRow/EventRowTablet.vue
@@ -141,7 +141,7 @@ onMounted(() => {
 
 const getAvatar = async () => {
   if (props.event) {
-    if (props.event.nft?.meta?.image) {
+    if (props.event.nft.meta?.image) {
       avatar.value = sanitizeIpfsUrl(props.event.nft.meta.image)
     } else {
       const meta = (await processSingleMetadata(
diff --git a/components/collection/activity/holdersFlippersTabs/moreNFTs/Flipper.vue b/components/collection/activity/holdersFlippersTabs/moreNFTs/Flipper.vue
index e9081f2574..b0a27d8824 100644
--- a/components/collection/activity/holdersFlippersTabs/moreNFTs/Flipper.vue
+++ b/components/collection/activity/holdersFlippersTabs/moreNFTs/Flipper.vue
@@ -58,7 +58,7 @@ const processNFTImages = async () => {
   if (props.flips) {
     const promises = props.flips.map(async ({ nft }, i) => {
       let avatar
-      if (nft?.meta?.image) {
+      if (nft.meta?.image) {
         avatar = sanitizeIpfsUrl(nft.meta.image)
       } else {
         const meta = (await processSingleMetadata(nft.metadata)) as NFTMetadata
diff --git a/components/collection/activity/holdersFlippersTabs/moreNFTs/Holder.vue b/components/collection/activity/holdersFlippersTabs/moreNFTs/Holder.vue
index 8dada670b9..13d07c2306 100644
--- a/components/collection/activity/holdersFlippersTabs/moreNFTs/Holder.vue
+++ b/components/collection/activity/holdersFlippersTabs/moreNFTs/Holder.vue
@@ -46,7 +46,7 @@ const processNFTImages = async () => {
   if (props.nfts) {
     const promises = props.nfts.map(async (nft, i) => {
       let avatar
-      if (nft?.meta?.image) {
+      if (nft.meta?.image) {
         avatar = sanitizeIpfsUrl(nft.meta.image)
       } else {
         const meta = (await processSingleMetadata(nft.metadata)) as NFTMetadata
diff --git a/components/collection/utils/useCollectionActivity.ts b/components/collection/utils/useCollectionActivity.ts
index 3e19b5c717..7919300feb 100644
--- a/components/collection/utils/useCollectionActivity.ts
+++ b/components/collection/utils/useCollectionActivity.ts
@@ -9,66 +9,6 @@ import {
   Owners,
 } from './types'
 
-export const useCollectionActivity = ({ collectionId }) => {
-  const { urlPrefix } = usePrefix()
-  const events = ref<InteractionWithNFT[]>([])
-  const owners = ref<Owners>()
-  const flippers = ref<Flippers>()
-  const offers = ref<Offer[]>([])
-
-  const queryPrefix = urlPrefix.value === 'bsx' ? 'chain-bsx' : 'subsquid'
-
-  const { data } = useGraphql({
-    queryPrefix: queryPrefix,
-    queryName: 'collectionActivityEvents',
-    variables: {
-      id: collectionId,
-    },
-  })
-
-  watch(data, (result) => {
-    if (result?.collection) {
-      // flat events for chart
-      const interactions: InteractionWithNFT[] = result.collection.nfts
-        .map((nft) =>
-          nft.events.map((e) => ({
-            ...e,
-            timestamp: new Date(e.timestamp).getTime(),
-            nft: { ...nft, events: undefined },
-          }))
-        )
-        .flat()
-      events.value = interactions
-
-      if (urlPrefix.value === 'bsx') {
-        offers.value = getOffers(result.collection.nfts)
-      }
-
-      // not to repeat ref names
-      const ownersTemp = getOwners(result.collection.nfts)
-      const flippersTemp = getFlippers(interactions)
-
-      const flipperdIds = Object.keys(flippersTemp)
-      const OwnersIds = Object.keys(ownersTemp)
-
-      flipperdIds.forEach((id) => {
-        if (OwnersIds.includes(id)) {
-          ownersTemp[id].totalSold = flippersTemp[id].totalsold
-        }
-      })
-
-      owners.value = ownersTemp
-      flippers.value = flippersTemp
-    }
-  })
-  return {
-    events,
-    owners,
-    flippers,
-    offers,
-  }
-}
-
 const getOffers = (nfts): Offer[] => {
   return nfts
     .map((nft) =>
@@ -250,3 +190,63 @@ const getFlippers = (interactions: InteractionWithNFT[]): Flippers => {
   })
   return flippers
 }
+
+export const useCollectionActivity = ({ collectionId }) => {
+  const { urlPrefix } = usePrefix()
+  const events = ref<InteractionWithNFT[]>([])
+  const owners = ref<Owners>()
+  const flippers = ref<Flippers>()
+  const offers = ref<Offer[]>([])
+
+  const queryPrefix = urlPrefix.value === 'bsx' ? 'chain-bsx' : 'subsquid'
+
+  const { data } = useGraphql({
+    queryPrefix,
+    queryName: 'collectionActivityEvents',
+    variables: {
+      id: collectionId,
+    },
+  })
+
+  watch(data, (result) => {
+    if (result?.collection) {
+      // flat events for chart
+      const interactions: InteractionWithNFT[] = result.collection.nfts
+        .map((nft) =>
+          nft.events.map((e) => ({
+            ...e,
+            timestamp: new Date(e.timestamp).getTime(),
+            nft: { ...nft, events: undefined },
+          }))
+        )
+        .flat()
+      events.value = interactions
+
+      if (urlPrefix.value === 'bsx') {
+        offers.value = getOffers(result.collection.nfts)
+      }
+
+      // not to repeat ref names
+      const ownersTemp = getOwners(result.collection.nfts)
+      const flippersTemp = getFlippers(interactions)
+
+      const flipperdIds = Object.keys(flippersTemp)
+      const OwnersIds = Object.keys(ownersTemp)
+
+      flipperdIds.forEach((id) => {
+        if (OwnersIds.includes(id)) {
+          ownersTemp[id].totalSold = flippersTemp[id].totalsold
+        }
+      })
+
+      owners.value = ownersTemp
+      flippers.value = flippersTemp
+    }
+  })
+  return {
+    events,
+    owners,
+    flippers,
+    offers,
+  }
+}
diff --git a/components/collection/utils/useCollectionDetails.ts b/components/collection/utils/useCollectionDetails.ts
index b33f4a99a4..2507f817ca 100644
--- a/components/collection/utils/useCollectionDetails.ts
+++ b/components/collection/utils/useCollectionDetails.ts
@@ -1,9 +1,8 @@
-import { getVolume, sum } from '@/utils/math'
+import { getVolume } from '@/utils/math'
 import { NFT } from '@/components/rmrk/service/scheme'
 import { NFTListSold } from '@/components/identity/utils/useIdentity'
 import { chainsSupportingOffers } from './useCollectionDetails.config'
-import { Interaction } from '@kodadot1/minimark'
-import { Flippers, InteractionWithNFT, NFTMap, Owners, Stats } from './types'
+import { Stats } from './types'
 
 const differentOwner = (nft: {
   issuer: string

From 733cd167ddfe4718d7459a46baea3d224638a2f2 Mon Sep 17 00:00:00 2001
From: daiagi <daiagi@gmail.com>
Date: Sat, 25 Mar 2023 13:29:04 +0700
Subject: [PATCH 14/55] link on nft avatar in mobile

---
 .../events/eventRow/EventRowTablet.vue        | 22 ++++++++++---------
 1 file changed, 12 insertions(+), 10 deletions(-)

diff --git a/components/collection/activity/events/eventRow/EventRowTablet.vue b/components/collection/activity/events/eventRow/EventRowTablet.vue
index f6a48a4fbd..f9bfd3234c 100644
--- a/components/collection/activity/events/eventRow/EventRowTablet.vue
+++ b/components/collection/activity/events/eventRow/EventRowTablet.vue
@@ -1,16 +1,18 @@
 <template>
   <div>
     <div class="is-flex">
-      <div class="mr-5">
-        <img
-          v-if="avatar"
-          :src="avatar"
-          :alt="event.nft.name"
-          width="40"
-          height="40"
-          class="border" />
-        <img v-else src="/placeholder.webp" class="border" />
-      </div>
+      <nuxt-link :to="`/${urlPrefix}/gallery/${event.nft.id}`">
+        <div class="mr-5">
+          <img
+            v-if="avatar"
+            :src="avatar"
+            :alt="event.nft.name"
+            width="40"
+            height="40"
+            class="border" />
+          <img v-else src="/placeholder.webp" class="border" />
+        </div>
+      </nuxt-link>
       <div class="is-flex is-flex-direction-column is-flex-grow-1">
         <div class="is-flex is-justify-content-space-between mb-2">
           <nuxt-link :to="`/${urlPrefix}/gallery/${event.nft.id}`">

From c9b06614d88a0ab9d432d1dbebc5143702f2fc54 Mon Sep 17 00:00:00 2001
From: daiagi <daiagi@gmail.com>
Date: Sat, 25 Mar 2023 17:53:00 +0700
Subject: [PATCH 15/55] feat: filters

---
 components/collection/activity/Activity.vue   |  31 +++--
 .../collection/activity/events/Events.vue     |  56 ++++++--
 .../events/eventRow/EventRowTablet.vue        |  11 +-
 components/explore/FilterMenuButton.vue       |   6 +-
 components/explore/MobileFilter.vue           | 107 +++++++++++++---
 components/explore/SidebarFilter.vue          |   8 +-
 .../explore/filters/EventTypeFilter.vue       | 120 ++++++++++++++++++
 components/explore/filters/useReplaceUrl.ts   |  32 ++++-
 components/shared/BreadcrumbsFilter.vue       |   5 +
 stores/activityFilters.ts                     |  62 +++++++++
 10 files changed, 383 insertions(+), 55 deletions(-)
 create mode 100644 components/explore/filters/EventTypeFilter.vue
 create mode 100644 stores/activityFilters.ts

diff --git a/components/collection/activity/Activity.vue b/components/collection/activity/Activity.vue
index 0dc046c07d..178e7bb5d9 100644
--- a/components/collection/activity/Activity.vue
+++ b/components/collection/activity/Activity.vue
@@ -14,6 +14,9 @@
             <OwnerInsights :owners="owners" :flippers="flippers" />
           </div>
         </div>
+        <BreadcrumbsFilter />
+        <hr class="my-0" />
+
         <Events :events="sortedEvents" />
       </div>
       <div v-if="mobile">
@@ -23,22 +26,20 @@
           <Events :events="sortedEvents" />
         </div>
       </div>
-      <!-- <div v-show="isFiltersActive" class="border-bottom pb-5 border-k-grey">
-        <BreadcrumbsFilter @filtersActive="toggleBreadcrumbsVisible" />
-      </div> -->
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import SidebarFilter from '@/components/explore/SidebarFilter.vue'
 import ActivityChart from './Chart.vue'
 import OwnerInsights from './OwnerInsights.vue'
 import Events from './events/Events.vue'
-// import BreadcrumbsFilter from '@/components/shared/BreadcrumbsFilter.vue'
-import { useCollectionActivity } from '~~/components/collection/utils/useCollectionActivity'
+import BreadcrumbsFilter from '@/components/shared/BreadcrumbsFilter.vue'
+import { useCollectionActivity } from '@/components/collection/utils/useCollectionActivity'
 import { Interaction } from '@kodadot1/minimark'
 import { useResizeObserver, useWindowSize } from '@vueuse/core'
+import SidebarFilter from '@/components/explore/SidebarFilter.vue'
+import useReplaceUrl from '@/components/explore/filters/useReplaceUrl'
 const sidebarwidth = 55
 const mobileBreakpoint = 768 + sidebarwidth
 const windowWidth = useWindowSize().width.value
@@ -46,12 +47,7 @@ const route = useRoute()
 const tablet = ref(windowWidth > mobileBreakpoint)
 const mobile = ref(windowWidth <= mobileBreakpoint)
 const wrapper = ref<HTMLDivElement | null>(null)
-
-const isFiltersActive = ref(false)
-
-// const toggleBreadcrumbsVisible = (active: boolean) => {
-//   isFiltersActive.value = active
-// }
+const { replaceUrl } = useReplaceUrl({ resetPage: false })
 
 const collectionId = computed(() => route.params.id)
 const { events, flippers, owners, offers } = useCollectionActivity({
@@ -89,6 +85,17 @@ useResizeObserver(
   },
   {}
 )
+
+onMounted(() => {
+  const statusDefaults = {
+    sale: true,
+    offer: true,
+    listing: true,
+    mint: true,
+    transfer: true,
+  }
+  replaceUrl(statusDefaults)
+})
 </script>
 
 <style lang="scss" scoped>
diff --git a/components/collection/activity/events/Events.vue b/components/collection/activity/events/Events.vue
index 7af3e5d34e..3b18794a7a 100644
--- a/components/collection/activity/events/Events.vue
+++ b/components/collection/activity/events/Events.vue
@@ -21,6 +21,7 @@
       </div>
     </div>
     <div>
+      {{ displayedEvents.length }}
       <EventRow
         v-for="event in displayedEvents"
         :key="event.timestamp"
@@ -32,9 +33,14 @@
 </template>
 
 <script setup lang="ts">
-import { InteractionWithNFT, Offer } from '@/components/collection/utils/types'
+import {
+  InteractionWithNFT,
+  Offer,
+  OfferInteraction,
+} from '@/components/collection/utils/types'
 import EventRow from './EventRow.vue'
 import { useIntersectionObserver } from '@vueuse/core'
+import { Interaction } from '@kodadot1/minimark'
 
 const props = withDefaults(
   defineProps<{
@@ -44,26 +50,50 @@ const props = withDefaults(
     events: () => [],
   }
 )
+const offset = ref(10)
+const toKeep = (queryParam: string | undefined) => {
+  if (queryParam === undefined) {
+    return true
+  }
+  if (queryParam === 'true') {
+    return true
+  }
+  return false
+}
 
-const displayedEvents = ref<(InteractionWithNFT | Offer)[]>([])
+const filteredEvents = computed(() => {
+  const route = useRoute()
 
-watch(
-  () => props.events,
-  () => (displayedEvents.value = props.events.slice(0, 10)),
-  { immediate: true }
-)
+  const InteractionToKeep = {
+    [Interaction.BUY]: toKeep(route.query?.sale as string),
+    [Interaction.MINTNFT]: toKeep(route.query?.mint as string),
+    [Interaction.LIST]: toKeep(route.query?.listing as string),
+    [Interaction.SEND]: toKeep(route.query?.transfer as string),
+    [OfferInteraction]: toKeep(route.query?.offer as string),
+  }
+
+  return props.events.filter((event) => {
+    return InteractionToKeep[event.interaction]
+  })
+})
 
-let offset = 10
+const displayedEvents = ref<(InteractionWithNFT | Offer)[]>([])
 
 const displayMoreEvents = () => {
-  displayedEvents.value = [
-    ...displayedEvents.value,
-    ...props.events.slice(offset, offset + 10),
-  ]
-  offset += 10
+  offset.value += 10
+  console.log('offset', offset.value)
 }
 
+watch(
+  [filteredEvents, offset],
+  () => {
+    displayedEvents.value = filteredEvents.value.slice(0, offset.value)
+  },
+  { immediate: true }
+)
+
 const handleIntersection = (entries: IntersectionObserverEntry[]) => {
+  console.log('handleIntersection')
   const target = entries[0]
   if (target.isIntersecting) {
     displayMoreEvents()
diff --git a/components/collection/activity/events/eventRow/EventRowTablet.vue b/components/collection/activity/events/eventRow/EventRowTablet.vue
index f9bfd3234c..bcff1db39e 100644
--- a/components/collection/activity/events/eventRow/EventRowTablet.vue
+++ b/components/collection/activity/events/eventRow/EventRowTablet.vue
@@ -7,10 +7,15 @@
             v-if="avatar"
             :src="avatar"
             :alt="event.nft.name"
-            width="40"
-            height="40"
+            width="50"
+            height="50"
             class="border" />
-          <img v-else src="/placeholder.webp" class="border" />
+          <img
+            v-else
+            src="/placeholder.webp"
+            class="border"
+            width="50"
+            height="50" />
         </div>
       </nuxt-link>
       <div class="is-flex is-flex-direction-column is-flex-grow-1">
diff --git a/components/explore/FilterMenuButton.vue b/components/explore/FilterMenuButton.vue
index 7ef026b8e2..20460632f5 100644
--- a/components/explore/FilterMenuButton.vue
+++ b/components/explore/FilterMenuButton.vue
@@ -29,7 +29,11 @@ const route = useRoute()
 const preferencesStore = usePreferencesStore()
 
 const disabled = computed(() => {
-  const allowedList = ['prefix-explore-items', 'prefix-collection-id']
+  const allowedList = [
+    'prefix-explore-items',
+    'prefix-collection-id',
+    'prefix-collection-id-activity',
+  ]
 
   return !allowedList.includes(route.name || '')
 })
diff --git a/components/explore/MobileFilter.vue b/components/explore/MobileFilter.vue
index f54870f40b..959ab568de 100644
--- a/components/explore/MobileFilter.vue
+++ b/components/explore/MobileFilter.vue
@@ -18,7 +18,11 @@
             <b-icon icon="x" @click.native="onClose" />
           </a>
         </div>
-        <StatusFilter data-model="store" expanded />
+        <EventTypeFilter
+          v-if="isCollectionActivityTab"
+          data-model="store"
+          expanded />
+        <StatusFilter v-else data-model="store" expanded />
         <PriceFilter data-model="store" expanded />
       </div>
 
@@ -47,12 +51,21 @@ import PriceFilter from './filters/PriceFilter.vue'
 import StatusFilter from './filters/StatusFilter.vue'
 import useReplaceUrl from './filters/useReplaceUrl'
 import { useExploreFiltersStore } from '@/stores/exploreFilters'
+import { useAcivityFiltersStore } from '@/stores/activityFilters'
 import { usePreferencesStore } from '@/stores/preferences'
+import EventTypeFilter from './filters/EventTypeFilter.vue'
 
 const route = useRoute()
 const preferencesStore = usePreferencesStore()
 const exploreFiltersStore = useExploreFiltersStore()
-const { replaceUrl } = useReplaceUrl()
+const activityFiltersStore = useAcivityFiltersStore()
+
+const isCollectionActivityTab = computed(
+  () => route.name === 'prefix-collection-id-activity'
+)
+const { replaceUrl } = useReplaceUrl({
+  resetPage: !isCollectionActivityTab.value,
+})
 
 const emit = defineEmits(['resetPage'])
 
@@ -65,37 +78,90 @@ const onClose = () => {
 
 const closeFilterModal = () => preferencesStore.setMobileFilterCollapse(false)
 
-const syncFromUrl = () => {
+const syncFromUrlOnActivityTab = () => {
+  const sale = route.query?.sale?.toString() === 'true',
+    offer = route.query?.offer?.toString() === 'true',
+    listing = route.query?.listing?.toString() === 'true',
+    mint = route.query?.mint?.toString() === 'true',
+    transfer = route.query?.transfer?.toString() === 'true'
+
+  activityFiltersStore.setSale(sale)
+  activityFiltersStore.setOffer(offer)
+  activityFiltersStore.setListing(listing)
+  activityFiltersStore.setMint(mint)
+  activityFiltersStore.setTransfer(transfer)
+}
+const syncFromUrlOnGrid = () => {
   const listed = route.query?.listed?.toString() === 'true',
-    owned = route.query?.owned?.toString() === 'true',
-    min = Number(route.query?.min) || undefined,
-    max = Number(route.query?.max) || undefined
+    owned = route.query?.owned?.toString() === 'true'
 
   exploreFiltersStore.setListed(listed)
   exploreFiltersStore.setOwned(owned)
-  exploreFiltersStore.setPriceRange({ min, max })
 }
 
-// TODO: move this to pinia
-const resetFilters = () => {
-  // set store to defaults
+const syncFromUrl = () => {
+  const min = Number(route.query?.min) || undefined,
+    max = Number(route.query?.max) || undefined
+
+  if (isCollectionActivityTab.value) {
+    syncFromUrlOnActivityTab()
+    activityFiltersStore.setPriceRange({ min, max })
+  } else {
+    syncFromUrlOnGrid
+    exploreFiltersStore.setPriceRange({ min, max })
+  }
+}
+
+const resetFilterOnAcivityTab = () => {
   const statusDefaults = {
-    listed: false,
-    owned: false,
+    sale: false,
+    offer: false,
+    listing: false,
+    mint: false,
+    transfer: false,
   }
-  exploreFiltersStore.setListed(statusDefaults.listed)
-  exploreFiltersStore.setOwned(statusDefaults.owned)
-  // price
+
   const priceDefaults = {
     min: undefined,
     max: undefined,
   }
-  exploreFiltersStore.setPriceRange(priceDefaults)
+  activityFiltersStore.setSale(statusDefaults.sale)
+  activityFiltersStore.setOffer(statusDefaults.offer)
+  activityFiltersStore.setListing(statusDefaults.listing)
+  activityFiltersStore.setMint(statusDefaults.mint)
+  activityFiltersStore.setTransfer(statusDefaults.transfer)
 
+  activityFiltersStore.setPriceRange(priceDefaults)
   replaceUrl({
     ...statusDefaults,
     ...priceDefaults,
   })
+}
+const resetFilters = () => {
+  if (isCollectionActivityTab) {
+    resetFilterOnAcivityTab
+  } else {
+    const statusDefaults = {
+      listed: false,
+      owned: false,
+    }
+
+    exploreFiltersStore.setListed(statusDefaults.listed)
+    exploreFiltersStore.setOwned(statusDefaults.owned)
+
+    // price
+    const priceDefaults = {
+      min: undefined,
+      max: undefined,
+    }
+    exploreFiltersStore.setPriceRange(priceDefaults)
+
+    replaceUrl({
+      ...statusDefaults,
+      ...priceDefaults,
+    })
+  }
+
   emit('resetPage')
   closeFilterModal()
 }
@@ -104,14 +170,19 @@ const applyFilters = () => {
   // status filters
   const statusFilters = exploreFiltersStore.getStatusFilters
   const priceRangeFilter = exploreFiltersStore.getPriceRange
+  const eventTypeFilter = activityFiltersStore.getEventTypeFilters
 
   // apply to URL
-  replaceUrl({ ...statusFilters, ...priceRangeFilter })
+  if (isCollectionActivityTab.value) {
+    replaceUrl({ ...eventTypeFilter, ...priceRangeFilter })
+  } else {
+    replaceUrl({ ...statusFilters, ...priceRangeFilter })
+  }
   emit('resetPage')
   closeFilterModal()
 }
 
-watch(() => route.query, syncFromUrl)
+watch(() => route.query, syncFromUrl, { immediate: true })
 </script>
 
 <style lang="scss" scoped>
diff --git a/components/explore/SidebarFilter.vue b/components/explore/SidebarFilter.vue
index 93f11fdccc..01ca2d2dda 100644
--- a/components/explore/SidebarFilter.vue
+++ b/components/explore/SidebarFilter.vue
@@ -1,7 +1,8 @@
 <template>
   <div :class="{ 'bordered sticky': open }" class="is-hidden-mobile">
     <NeoSidebar :reduce="false" :open="open" fullheight>
-      <StatusFilter expanded fluid-padding />
+      <EventTypeFilter v-if="isCollectionActivityTab" expanded fluid-padding />
+      <StatusFilter v-else expanded fluid-padding />
       <PriceFilter fluid-padding />
     </NeoSidebar>
   </div>
@@ -11,10 +12,15 @@
 import { NeoSidebar } from '@kodadot1/brick'
 import PriceFilter from './filters/PriceFilter.vue'
 import StatusFilter from './filters/StatusFilter.vue'
+import EventTypeFilter from './filters/EventTypeFilter.vue'
 import { usePreferencesStore } from '@/stores/preferences'
+const route = useRoute()
 
 const preferencesStore = usePreferencesStore()
 const open = computed(() => preferencesStore.getsidebarFilterCollapse)
+const isCollectionActivityTab = computed(
+  () => route.name === 'prefix-collection-id-activity'
+)
 </script>
 
 <style lang="scss" scoped>
diff --git a/components/explore/filters/EventTypeFilter.vue b/components/explore/filters/EventTypeFilter.vue
new file mode 100644
index 0000000000..d14ea4f4dd
--- /dev/null
+++ b/components/explore/filters/EventTypeFilter.vue
@@ -0,0 +1,120 @@
+<template>
+  <b-collapse
+    :open="expanded"
+    animation="slide"
+    class="border-bottom"
+    :class="{ 'fluid-padding-left': fluidPadding }">
+    <template #trigger="{ open }">
+      <div class="is-flex" role="button" :aria-expanded="open">
+        <p class="card-header-title has-text-weight-normal">Event Type</p>
+        <a class="card-header-icon">
+          <b-icon :icon="open ? 'minus' : 'plus'" />
+        </a>
+      </div>
+    </template>
+    <div class="p-4">
+      <b-field>
+        <NeoCheckbox v-model="sale">Sale</NeoCheckbox>
+      </b-field>
+      <b-field>
+        <NeoCheckbox v-model="offer">Offer</NeoCheckbox>
+      </b-field>
+      <b-field>
+        <NeoCheckbox v-model="listing">Listing</NeoCheckbox>
+      </b-field>
+      <b-field>
+        <NeoCheckbox v-model="mint">Mint</NeoCheckbox>
+      </b-field>
+      <b-field>
+        <NeoCheckbox v-model="transfer">Transfer</NeoCheckbox>
+      </b-field>
+    </div>
+  </b-collapse>
+</template>
+
+<script lang="ts" setup>
+import useReplaceUrl from './useReplaceUrl'
+import { NeoCheckbox } from '@kodadot1/brick'
+import { useAcivityFiltersStore } from '@/stores/activityFilters'
+
+const activityFiltersStore = useAcivityFiltersStore()
+const route = useRoute()
+const { replaceUrl: replaceURL } = useReplaceUrl({ resetPage: false })
+
+type DataModel = 'query' | 'store'
+
+const props = withDefaults(
+  defineProps<{
+    expanded?: boolean
+    dataModel?: DataModel
+    fluidPadding?: boolean
+  }>(),
+  {
+    expanded: false,
+    dataModel: 'query',
+    fluidPadding: false,
+  }
+)
+
+const emit = defineEmits(['resetPage'])
+
+const sale =
+  props.dataModel === 'query'
+    ? computed({
+        get: () => route.query?.sale?.toString() === 'true',
+        set: (value) => applyToUrl({ sale: String(value) }),
+      })
+    : computed({
+        get: () => activityFiltersStore.getEventTypeFilters.sale,
+        set: (value) => activityFiltersStore.setSale(value),
+      })
+
+const offer =
+  props.dataModel === 'query'
+    ? computed({
+        get: () => route.query?.offer?.toString() === 'true',
+        set: (value) => applyToUrl({ offer: String(value) }),
+      })
+    : computed({
+        get: () => activityFiltersStore.getEventTypeFilters.offer,
+        set: (value) => activityFiltersStore.setOffer(value),
+      })
+
+const listing =
+  props.dataModel === 'query'
+    ? computed({
+        get: () => route.query?.listing?.toString() === 'true',
+        set: (value) => applyToUrl({ listing: String(value) }),
+      })
+    : computed({
+        get: () => activityFiltersStore.getEventTypeFilters.listing,
+        set: (value) => activityFiltersStore.setListing(value),
+      })
+
+const mint =
+  props.dataModel === 'query'
+    ? computed({
+        get: () => route.query?.mint?.toString() === 'true',
+        set: (value) => applyToUrl({ mint: String(value) }),
+      })
+    : computed({
+        get: () => activityFiltersStore.getEventTypeFilters.mint,
+        set: (value) => activityFiltersStore.setMint(value),
+      })
+
+const transfer =
+  props.dataModel === 'query'
+    ? computed({
+        get: () => route.query?.transfer?.toString() === 'true',
+        set: (value) => applyToUrl({ transfer: String(value) }),
+      })
+    : computed({
+        get: () => activityFiltersStore.getEventTypeFilters.transfer,
+        set: (value) => activityFiltersStore.setTransfer(value),
+      })
+
+const applyToUrl = (queryCondition: { [key: string]: any }) => {
+  replaceURL(queryCondition)
+  emit('resetPage')
+}
+</script>
diff --git a/components/explore/filters/useReplaceUrl.ts b/components/explore/filters/useReplaceUrl.ts
index 13bd043f62..50a9268961 100644
--- a/components/explore/filters/useReplaceUrl.ts
+++ b/components/explore/filters/useReplaceUrl.ts
@@ -1,16 +1,22 @@
-export default function () {
+type Args = { resetPage?: boolean }
+export default function ({ resetPage }: Args = { resetPage: true }) {
   const { $consola } = useNuxtApp()
   const route = useRoute()
   const router = useRouter()
-  const replaceUrl = (queryCondition: { [key: string]: unknown }) => {
+  const replaceUrl = (queryCondition: {
+    [key: string]: string | null | boolean | undefined | number
+  }) => {
+    const query = {
+      ...route.query,
+      ...replaceBooleanWithStrings(queryCondition),
+    }
+    if (resetPage) {
+      query.page = '1'
+    }
     router
       .replace({
         path: String(route.path),
-        query: {
-          ...route.query,
-          ...queryCondition,
-          page: '1',
-        },
+        query,
       })
       .catch($consola.warn)
   }
@@ -19,3 +25,15 @@ export default function () {
     replaceUrl,
   }
 }
+
+function replaceBooleanWithStrings(
+  obj: Record<string, string | null | boolean | undefined | number>
+): Record<string, string | null | undefined> {
+  return Object.entries(obj).reduce((result, [key, value]) => {
+    result[key] =
+      typeof value === 'boolean' || typeof value === 'number'
+        ? String(value)
+        : value
+    return result
+  }, {})
+}
diff --git a/components/shared/BreadcrumbsFilter.vue b/components/shared/BreadcrumbsFilter.vue
index 62f39f25e0..572ccfc25c 100644
--- a/components/shared/BreadcrumbsFilter.vue
+++ b/components/shared/BreadcrumbsFilter.vue
@@ -57,6 +57,11 @@ const clearAllFilters = () => {
 const queryMapTranslation = {
   listed: $i18n.t('sort.listed'),
   owned: $i18n.t('sort.own'),
+  sale: 'Sale',
+  offer: 'Offer',
+  listing: 'Listing',
+  mint: 'Mint',
+  transfer: 'Transfer',
 }
 
 onMounted(() => {
diff --git a/stores/activityFilters.ts b/stores/activityFilters.ts
new file mode 100644
index 0000000000..b535b5bb26
--- /dev/null
+++ b/stores/activityFilters.ts
@@ -0,0 +1,62 @@
+import { defineStore } from 'pinia'
+
+interface State {
+  // event type
+  sale: boolean
+  offer: boolean
+  listing: boolean
+  mint: boolean
+  transfer: boolean
+  // price
+  min: number | undefined
+  max: number | undefined
+}
+
+export const useAcivityFiltersStore = defineStore('activityFilters', {
+  state: (): State => ({
+    sale: false,
+    offer: false,
+    listing: false,
+    mint: false,
+    transfer: false,
+    min: undefined,
+    max: undefined,
+  }),
+  getters: {
+    getEventTypeFilters: ({ sale, offer, listing, mint, transfer }) => ({
+      sale,
+      offer,
+      listing,
+      mint,
+      transfer,
+    }),
+    getPriceRange: (state) => ({ min: state.min, max: state.max }),
+  },
+  actions: {
+    setSale(payload) {
+      this.sale = payload
+    },
+    setOffer(payload) {
+      this.offer = payload
+    },
+    setListing(payload) {
+      this.listing = payload
+    },
+    setMint(payload) {
+      this.mint = payload
+    },
+    setTransfer(payload) {
+      this.transfer = payload
+    },
+    setMin(payload) {
+      this.min = payload
+    },
+    setMax(payload) {
+      this.max = payload
+    },
+    setPriceRange(payload) {
+      this.min = payload.min
+      this.max = payload.max
+    },
+  },
+})

From 3cfec0f914274ff8170415d289b725ad4df67061 Mon Sep 17 00:00:00 2001
From: daiagi <daiagi@gmail.com>
Date: Sun, 26 Mar 2023 09:28:13 +0700
Subject: [PATCH 16/55] cleanups, touchups

---
 components/collection/activity/Activity.vue   | 15 +---
 .../collection/activity/events/Events.vue     | 35 ++++----
 .../events/eventRow/EventRowDesktop.vue       | 84 ++++---------------
 .../events/eventRow/EventRowTablet.vue        | 70 ++++------------
 .../activity/events/eventRow/common.ts        | 79 +++++++++++++++++
 components/items/Items.vue                    |  2 +-
 components/shared/BreadcrumbsFilter.vue       | 21 +++--
 .../filters}/MobileFilter.vue                 | 46 +++++-----
 .../filters}/SidebarFilter.vue                |  6 +-
 .../filters/filterUtils.ts}                   | 17 ++++
 .../filters/modules}/EventTypeFilter.vue      | 14 ++--
 .../filters/modules}/PriceFilter.vue          |  2 +-
 .../filters/modules}/StatusFilter.vue         |  2 +-
 layouts/explore-layout.vue                    |  2 +-
 locales/en.json                               |  8 ++
 stores/activityFilters.ts                     |  7 ++
 16 files changed, 205 insertions(+), 205 deletions(-)
 create mode 100644 components/collection/activity/events/eventRow/common.ts
 rename components/{explore => shared/filters}/MobileFilter.vue (81%)
 rename components/{explore => shared/filters}/SidebarFilter.vue (80%)
 rename components/{explore/filters/useReplaceUrl.ts => shared/filters/filterUtils.ts} (73%)
 rename components/{explore/filters => shared/filters/modules}/EventTypeFilter.vue (87%)
 rename components/{explore/filters => shared/filters/modules}/PriceFilter.vue (99%)
 rename components/{explore/filters => shared/filters/modules}/StatusFilter.vue (98%)

diff --git a/components/collection/activity/Activity.vue b/components/collection/activity/Activity.vue
index 178e7bb5d9..b53265d56f 100644
--- a/components/collection/activity/Activity.vue
+++ b/components/collection/activity/Activity.vue
@@ -38,8 +38,7 @@ import BreadcrumbsFilter from '@/components/shared/BreadcrumbsFilter.vue'
 import { useCollectionActivity } from '@/components/collection/utils/useCollectionActivity'
 import { Interaction } from '@kodadot1/minimark'
 import { useResizeObserver, useWindowSize } from '@vueuse/core'
-import SidebarFilter from '@/components/explore/SidebarFilter.vue'
-import useReplaceUrl from '@/components/explore/filters/useReplaceUrl'
+import SidebarFilter from '@/components/shared/filters/SidebarFilter.vue'
 const sidebarwidth = 55
 const mobileBreakpoint = 768 + sidebarwidth
 const windowWidth = useWindowSize().width.value
@@ -47,7 +46,6 @@ const route = useRoute()
 const tablet = ref(windowWidth > mobileBreakpoint)
 const mobile = ref(windowWidth <= mobileBreakpoint)
 const wrapper = ref<HTMLDivElement | null>(null)
-const { replaceUrl } = useReplaceUrl({ resetPage: false })
 
 const collectionId = computed(() => route.params.id)
 const { events, flippers, owners, offers } = useCollectionActivity({
@@ -85,17 +83,6 @@ useResizeObserver(
   },
   {}
 )
-
-onMounted(() => {
-  const statusDefaults = {
-    sale: true,
-    offer: true,
-    listing: true,
-    mint: true,
-    transfer: true,
-  }
-  replaceUrl(statusDefaults)
-})
 </script>
 
 <style lang="scss" scoped>
diff --git a/components/collection/activity/events/Events.vue b/components/collection/activity/events/Events.vue
index 3b18794a7a..52bee70327 100644
--- a/components/collection/activity/events/Events.vue
+++ b/components/collection/activity/events/Events.vue
@@ -21,7 +21,6 @@
       </div>
     </div>
     <div>
-      {{ displayedEvents.length }}
       <EventRow
         v-for="event in displayedEvents"
         :key="event.timestamp"
@@ -41,6 +40,7 @@ import {
 import EventRow from './EventRow.vue'
 import { useIntersectionObserver } from '@vueuse/core'
 import { Interaction } from '@kodadot1/minimark'
+import { is, readParam } from '@/components/shared/filters/filterUtils'
 
 const props = withDefaults(
   defineProps<{
@@ -51,25 +51,26 @@ const props = withDefaults(
   }
 )
 const offset = ref(10)
-const toKeep = (queryParam: string | undefined) => {
-  if (queryParam === undefined) {
-    return true
-  }
-  if (queryParam === 'true') {
-    return true
-  }
-  return false
-}
 
 const filteredEvents = computed(() => {
-  const route = useRoute()
+  const query = useRoute().query
+  const isAnyFilterActive =
+    readParam(query.sale) ||
+    readParam(query.listing) ||
+    readParam(query.mint) ||
+    readParam(query.transfer) ||
+    readParam(query.offer)
+  // don't filter events if no filter is applied
+  if (!isAnyFilterActive) {
+    return props.events
+  }
 
   const InteractionToKeep = {
-    [Interaction.BUY]: toKeep(route.query?.sale as string),
-    [Interaction.MINTNFT]: toKeep(route.query?.mint as string),
-    [Interaction.LIST]: toKeep(route.query?.listing as string),
-    [Interaction.SEND]: toKeep(route.query?.transfer as string),
-    [OfferInteraction]: toKeep(route.query?.offer as string),
+    [Interaction.BUY]: is(query?.sale as string),
+    [Interaction.MINTNFT]: is(query?.mint as string),
+    [Interaction.LIST]: is(query?.listing as string),
+    [Interaction.SEND]: is(query?.transfer as string),
+    [OfferInteraction]: is(query?.offer as string),
   }
 
   return props.events.filter((event) => {
@@ -81,7 +82,6 @@ const displayedEvents = ref<(InteractionWithNFT | Offer)[]>([])
 
 const displayMoreEvents = () => {
   offset.value += 10
-  console.log('offset', offset.value)
 }
 
 watch(
@@ -93,7 +93,6 @@ watch(
 )
 
 const handleIntersection = (entries: IntersectionObserverEntry[]) => {
-  console.log('handleIntersection')
   const target = entries[0]
   if (target.isIntersecting) {
     displayMoreEvents()
diff --git a/components/collection/activity/events/eventRow/EventRowDesktop.vue b/components/collection/activity/events/eventRow/EventRowDesktop.vue
index abba21d1e6..04d2a92f1d 100644
--- a/components/collection/activity/events/eventRow/EventRowDesktop.vue
+++ b/components/collection/activity/events/eventRow/EventRowDesktop.vue
@@ -28,7 +28,7 @@
     <div class="column">
       <div
         class="border is-size-7 px-4 py-1 my-2 is-flex is-align-items-center fixed-width fixed-height"
-        :class="interactionClass[event.interaction]">
+        :class="interactionColor[event.interaction]">
         <span>{{ interactionName }}</span>
       </div>
     </div>
@@ -69,18 +69,19 @@
 </template>
 
 <script setup lang="ts">
-import {
-  InteractionWithNFT,
-  Offer,
-  OfferInteraction,
-} from '@/components/collection/utils/types'
-import { NFTMetadata } from '@/components/rmrk/service/scheme'
-import { processSingleMetadata } from '@/utils/cachingStrategy'
-import { sanitizeIpfsUrl } from '@/utils/ipfs'
-import { Interaction } from '@kodadot1/minimark'
+import { InteractionWithNFT, Offer } from '@/components/collection/utils/types'
 import Money from '@/components/shared/format/ChainMoney.vue'
 import IdentityIndex from '@/components/identity/IdentityIndex.vue'
 import { timeAgo } from '@/components/collection/utils/timeAgo'
+import {
+  blank,
+  getAmount,
+  getFromAddress,
+  getNFTAvatar,
+  getToAddress,
+  ineteractionNameMap,
+  interactionColor,
+} from './common'
 
 const { urlPrefix } = usePrefix()
 const props = defineProps<{
@@ -88,63 +89,15 @@ const props = defineProps<{
 }>()
 
 const avatar = ref<string>()
-const ineteractionNameMap = {
-  BUY: 'Sale',
-  LIST: 'List',
-  MINTNFT: 'Mint',
-  SEND: 'Transfer',
-  Offer: 'Offer',
-}
-const blank = '--'
 
 const interactionName = computed(
   () => ineteractionNameMap[props.event.interaction] || props.event.interaction
 )
-const amount = computed(() => {
-  switch (props.event.interaction) {
-    case Interaction.MINT:
-      return blank
-    case Interaction.LIST:
-    case Interaction.BUY:
-      return (props.event as InteractionWithNFT).meta
-    case OfferInteraction:
-      return (props.event as Offer).price
-    default:
-      return blank
-  }
-})
-
-const fromAddress = computed(() => {
-  const interaction = props.event.interaction
-  if (interaction === Interaction.MINTNFT || interaction === Interaction.LIST) {
-    return blank
-  }
-  if (interaction === Interaction.BUY || interaction === Interaction.SEND) {
-    return (props.event as InteractionWithNFT).currentOwner
-  }
-  if (interaction === OfferInteraction) {
-    return (props.event as Offer).caller
-  }
-})
+const amount = computed(() => getAmount(props.event))
 
-const toAddress = computed(() => {
-  const interaction = props.event.interaction
-  if (interaction === Interaction.MINTNFT || interaction === Interaction.LIST) {
-    return props.event.caller
-  }
-  if (interaction === Interaction.BUY || interaction === Interaction.SEND) {
-    return props.event.caller
-  }
-  return blank
-})
+const fromAddress = computed(() => getFromAddress(props.event))
 
-const interactionClass = {
-  [Interaction.MINTNFT]: 'k-yellow',
-  [Interaction.LIST]: 'k-blueaccent',
-  [Interaction.BUY]: 'k-pink',
-  [OfferInteraction]: 'k-greenaccent',
-  [Interaction.SEND]: 'background-color',
-}
+const toAddress = computed(() => getToAddress(props.event))
 
 onMounted(() => {
   getAvatar()
@@ -152,14 +105,7 @@ onMounted(() => {
 
 const getAvatar = async () => {
   if (props.event) {
-    if (props.event.nft.meta?.image) {
-      avatar.value = sanitizeIpfsUrl(props.event.nft.meta.image)
-    } else {
-      const meta = (await processSingleMetadata(
-        props.event.nft.metadata
-      )) as NFTMetadata
-      avatar.value = sanitizeIpfsUrl(meta?.image)
-    }
+    avatar.value = await getNFTAvatar(props.event)
   }
 }
 </script>
diff --git a/components/collection/activity/events/eventRow/EventRowTablet.vue b/components/collection/activity/events/eventRow/EventRowTablet.vue
index bcff1db39e..547b93fe97 100644
--- a/components/collection/activity/events/eventRow/EventRowTablet.vue
+++ b/components/collection/activity/events/eventRow/EventRowTablet.vue
@@ -33,7 +33,7 @@
         <div class="is-flex is-justify-content-space-between">
           <div
             class="border is-size-7 px-4 py-1 is-flex is-align-items-center fixed-width fixed-height"
-            :class="interactionClass[event.interaction]">
+            :class="interactionColor[event.interaction]">
             <span>{{ interactionName }}</span>
           </div>
           <div>
@@ -78,13 +78,18 @@
 
 <script setup lang="ts">
 import { InteractionWithNFT, Offer } from '@/components/collection/utils/types'
-import { NFTMetadata } from '@/components/rmrk/service/scheme'
-import { processSingleMetadata } from '@/utils/cachingStrategy'
-import { sanitizeIpfsUrl } from '@/utils/ipfs'
-import { Interaction } from '@kodadot1/minimark'
 import Money from '@/components/shared/format/ChainMoney.vue'
 import IdentityIndex from '@/components/identity/IdentityIndex.vue'
 import { timeAgo } from '@/components/collection/utils/timeAgo'
+import {
+  blank,
+  getAmount,
+  getFromAddress,
+  getNFTAvatar,
+  getToAddress,
+  ineteractionNameMap,
+  interactionColor,
+} from './common'
 
 const { urlPrefix } = usePrefix()
 const props = defineProps<{
@@ -92,55 +97,15 @@ const props = defineProps<{
 }>()
 
 const avatar = ref<string>()
-const ineteractionNameMap = {
-  BUY: 'Sale',
-  LIST: 'List',
-  MINTNFT: 'Mint',
-  SEND: 'Transfer',
-}
-const blank = '--'
 
 const interactionName = computed(
   () => ineteractionNameMap[props.event.interaction] || props.event.interaction
 )
-const amount = computed(() => {
-  switch (props.event.interaction) {
-    case Interaction.MINT:
-      return blank
-    case Interaction.LIST:
-    case Interaction.BUY:
-      return props.event.meta
-    default:
-      return blank
-  }
-})
+const amount = computed(() => getAmount(props.event))
 
-const fromAddress = computed(() => {
-  const interaction = props.event.interaction
-  if (interaction === Interaction.MINTNFT || interaction === Interaction.LIST) {
-    return blank
-  }
-  if (interaction === Interaction.BUY || interaction === Interaction.SEND) {
-    return props.event.currentOwner
-  }
-})
+const fromAddress = computed(() => getFromAddress(props.event))
 
-const toAddress = computed(() => {
-  const interaction = props.event.interaction
-  if (interaction === Interaction.MINTNFT || interaction === Interaction.LIST) {
-    return props.event.caller
-  }
-  if (interaction === Interaction.BUY || interaction === Interaction.SEND) {
-    return props.event.caller
-  }
-})
-
-const interactionClass = {
-  [Interaction.MINTNFT]: 'k-yellow',
-  [Interaction.LIST]: 'k-blueaccent',
-  [Interaction.BUY]: 'k-pink',
-  [Interaction.SEND]: 'background-color',
-}
+const toAddress = computed(() => getToAddress(props.event))
 
 onMounted(() => {
   getAvatar()
@@ -148,14 +113,7 @@ onMounted(() => {
 
 const getAvatar = async () => {
   if (props.event) {
-    if (props.event.nft.meta?.image) {
-      avatar.value = sanitizeIpfsUrl(props.event.nft.meta.image)
-    } else {
-      const meta = (await processSingleMetadata(
-        props.event.nft.metadata
-      )) as NFTMetadata
-      avatar.value = sanitizeIpfsUrl(meta?.image)
-    }
+    avatar.value = await getNFTAvatar(props.event)
   }
 }
 </script>
diff --git a/components/collection/activity/events/eventRow/common.ts b/components/collection/activity/events/eventRow/common.ts
new file mode 100644
index 0000000000..faab6e1cff
--- /dev/null
+++ b/components/collection/activity/events/eventRow/common.ts
@@ -0,0 +1,79 @@
+import { Interaction } from '@kodadot1/minimark'
+import {
+  InteractionWithNFT,
+  Offer,
+  OfferInteraction,
+} from '@/components/collection/utils/types'
+import { sanitizeIpfsUrl } from '~~/utils/ipfs'
+import { processSingleMetadata } from '~~/utils/cachingStrategy'
+import { NFTMetadata } from '~~/components/rmrk/service/scheme'
+
+export const ineteractionNameMap = {
+  BUY: 'Sale',
+  LIST: 'List',
+  MINTNFT: 'Mint',
+  SEND: 'Transfer',
+  Offer: 'Offer',
+}
+export const blank = '--'
+
+export const interactionColor = {
+  [Interaction.MINTNFT]: 'k-yellow',
+  [Interaction.LIST]: 'k-blueaccent',
+  [Interaction.BUY]: 'k-pink',
+  [OfferInteraction]: 'k-greenaccent',
+  [Interaction.SEND]: 'background-color',
+}
+
+export const getAmount = (
+  event: InteractionWithNFT | Offer
+): string | number => {
+  switch (event.interaction) {
+    case Interaction.MINT:
+      return blank
+    case Interaction.LIST:
+    case Interaction.BUY:
+      return (event as InteractionWithNFT).meta
+    case OfferInteraction:
+      return (event as Offer).price
+    default:
+      return blank
+  }
+}
+
+export const getFromAddress = (event: InteractionWithNFT | Offer): string => {
+  const interaction = event.interaction
+  if (interaction === Interaction.MINTNFT || interaction === Interaction.LIST) {
+    return blank
+  }
+  if (interaction === Interaction.BUY || interaction === Interaction.SEND) {
+    return (event as InteractionWithNFT).currentOwner
+  }
+  if (interaction === OfferInteraction) {
+    return (event as Offer).caller
+  }
+  return blank
+}
+
+export const getToAddress = (event: InteractionWithNFT | Offer): string => {
+  const interaction = event.interaction
+  if (interaction === Interaction.MINTNFT || interaction === Interaction.LIST) {
+    return event.caller
+  }
+  if (interaction === Interaction.BUY || interaction === Interaction.SEND) {
+    return event.caller
+  }
+  return blank
+}
+export const getNFTAvatar = async (
+  event: InteractionWithNFT | Offer
+): Promise<string> => {
+  if (event.nft.meta?.image) {
+    return sanitizeIpfsUrl(event.nft.meta.image)
+  } else {
+    const meta = (await processSingleMetadata(
+      event.nft.metadata
+    )) as NFTMetadata
+    return sanitizeIpfsUrl(meta?.image)
+  }
+}
diff --git a/components/items/Items.vue b/components/items/Items.vue
index 1d0acc14ca..755f9e7257 100644
--- a/components/items/Items.vue
+++ b/components/items/Items.vue
@@ -6,6 +6,6 @@
 </template>
 
 <script setup lang="ts">
-import SidebarFilter from '@/components/explore/SidebarFilter.vue'
+import SidebarFilter from '@/components/shared/filters/SidebarFilter.vue'
 import ItemsGrid from './ItemsGrid/ItemsGrid.vue'
 </script>
diff --git a/components/shared/BreadcrumbsFilter.vue b/components/shared/BreadcrumbsFilter.vue
index 572ccfc25c..578a0cf934 100644
--- a/components/shared/BreadcrumbsFilter.vue
+++ b/components/shared/BreadcrumbsFilter.vue
@@ -22,11 +22,16 @@
 </template>
 
 <script lang="ts" setup>
-import useReplaceUrl from '@/components/explore/filters/useReplaceUrl'
+import useReplaceUrl from '@/components/shared/filters/filterUtils'
 import NeoTag from '@/components/shared/gallery/NeoTag.vue'
 
 const route = useRoute()
-const { replaceUrl } = useReplaceUrl()
+const isCollectionActivityTab = computed(
+  () => route.name === 'prefix-collection-id-activity'
+)
+const { replaceUrl } = useReplaceUrl({
+  resetPage: !isCollectionActivityTab.value,
+})
 const { $i18n } = useNuxtApp()
 const isItemsExplore = computed(() => route.path.includes('/explore/items'))
 
@@ -48,7 +53,7 @@ const clearAllFilters = () => {
     if (key === 'search') {
       return { ...filters, [key]: undefined }
     }
-    return { ...filters, [key]: 'false' }
+    return { ...filters, [key]: isCollectionActivityTab ? undefined : 'false' }
   }, {})
 
   replaceUrl(clearedFilters)
@@ -57,11 +62,11 @@ const clearAllFilters = () => {
 const queryMapTranslation = {
   listed: $i18n.t('sort.listed'),
   owned: $i18n.t('sort.own'),
-  sale: 'Sale',
-  offer: 'Offer',
-  listing: 'Listing',
-  mint: 'Mint',
-  transfer: 'Transfer',
+  sale: $i18n.t('filters.sale'),
+  offer: $i18n.t('filters.offer'),
+  listing: $i18n.t('filters.listing'),
+  mint: $i18n.t('filters.mint'),
+  transfer: $i18n.t('filters.transfer'),
 }
 
 onMounted(() => {
diff --git a/components/explore/MobileFilter.vue b/components/shared/filters/MobileFilter.vue
similarity index 81%
rename from components/explore/MobileFilter.vue
rename to components/shared/filters/MobileFilter.vue
index 959ab568de..d9cc851b83 100644
--- a/components/explore/MobileFilter.vue
+++ b/components/shared/filters/MobileFilter.vue
@@ -47,13 +47,13 @@
 
 <script lang="ts" setup>
 import { NeoButton, NeoSidebar } from '@kodadot1/brick'
-import PriceFilter from './filters/PriceFilter.vue'
-import StatusFilter from './filters/StatusFilter.vue'
-import useReplaceUrl from './filters/useReplaceUrl'
+import useReplaceUrl, { is } from '@/components/shared/filters/filterUtils'
 import { useExploreFiltersStore } from '@/stores/exploreFilters'
 import { useAcivityFiltersStore } from '@/stores/activityFilters'
 import { usePreferencesStore } from '@/stores/preferences'
-import EventTypeFilter from './filters/EventTypeFilter.vue'
+import StatusFilter from '@/components/shared/filters/modules/StatusFilter.vue'
+import EventTypeFilter from '@/components/shared/filters/modules/EventTypeFilter.vue'
+import PriceFilter from '@/components/shared/filters/modules/PriceFilter.vue'
 
 const route = useRoute()
 const preferencesStore = usePreferencesStore()
@@ -79,17 +79,13 @@ const onClose = () => {
 const closeFilterModal = () => preferencesStore.setMobileFilterCollapse(false)
 
 const syncFromUrlOnActivityTab = () => {
-  const sale = route.query?.sale?.toString() === 'true',
-    offer = route.query?.offer?.toString() === 'true',
-    listing = route.query?.listing?.toString() === 'true',
-    mint = route.query?.mint?.toString() === 'true',
-    transfer = route.query?.transfer?.toString() === 'true'
-
-  activityFiltersStore.setSale(sale)
-  activityFiltersStore.setOffer(offer)
-  activityFiltersStore.setListing(listing)
-  activityFiltersStore.setMint(mint)
-  activityFiltersStore.setTransfer(transfer)
+  const sale = is(route.query?.sale?.toString()),
+    offer = is(route.query?.offer?.toString()),
+    listing = is(route.query?.listing?.toString()),
+    mint = is(route.query?.mint?.toString()),
+    transfer = is(route.query?.transfer?.toString())
+
+  activityFiltersStore.setFilters({ sale, offer, listing, mint, transfer })
 }
 const syncFromUrlOnGrid = () => {
   const listed = route.query?.listed?.toString() === 'true',
@@ -114,22 +110,18 @@ const syncFromUrl = () => {
 
 const resetFilterOnAcivityTab = () => {
   const statusDefaults = {
-    sale: false,
-    offer: false,
-    listing: false,
-    mint: false,
-    transfer: false,
+    sale: undefined,
+    offer: undefined,
+    listing: undefined,
+    mint: undefined,
+    transfer: undefined,
   }
 
   const priceDefaults = {
     min: undefined,
     max: undefined,
   }
-  activityFiltersStore.setSale(statusDefaults.sale)
-  activityFiltersStore.setOffer(statusDefaults.offer)
-  activityFiltersStore.setListing(statusDefaults.listing)
-  activityFiltersStore.setMint(statusDefaults.mint)
-  activityFiltersStore.setTransfer(statusDefaults.transfer)
+  activityFiltersStore.setFilters(statusDefaults)
 
   activityFiltersStore.setPriceRange(priceDefaults)
   replaceUrl({
@@ -138,8 +130,8 @@ const resetFilterOnAcivityTab = () => {
   })
 }
 const resetFilters = () => {
-  if (isCollectionActivityTab) {
-    resetFilterOnAcivityTab
+  if (isCollectionActivityTab.value) {
+    resetFilterOnAcivityTab()
   } else {
     const statusDefaults = {
       listed: false,
diff --git a/components/explore/SidebarFilter.vue b/components/shared/filters/SidebarFilter.vue
similarity index 80%
rename from components/explore/SidebarFilter.vue
rename to components/shared/filters/SidebarFilter.vue
index 01ca2d2dda..dbe6ce6d9d 100644
--- a/components/explore/SidebarFilter.vue
+++ b/components/shared/filters/SidebarFilter.vue
@@ -10,9 +10,9 @@
 
 <script lang="ts" setup>
 import { NeoSidebar } from '@kodadot1/brick'
-import PriceFilter from './filters/PriceFilter.vue'
-import StatusFilter from './filters/StatusFilter.vue'
-import EventTypeFilter from './filters/EventTypeFilter.vue'
+import StatusFilter from '@/components/shared/filters/modules/StatusFilter.vue'
+import EventTypeFilter from '@/components/shared/filters/modules/EventTypeFilter.vue'
+import PriceFilter from '@/components/shared/filters/modules/PriceFilter.vue'
 import { usePreferencesStore } from '@/stores/preferences'
 const route = useRoute()
 
diff --git a/components/explore/filters/useReplaceUrl.ts b/components/shared/filters/filterUtils.ts
similarity index 73%
rename from components/explore/filters/useReplaceUrl.ts
rename to components/shared/filters/filterUtils.ts
index 50a9268961..5a65b5c70c 100644
--- a/components/explore/filters/useReplaceUrl.ts
+++ b/components/shared/filters/filterUtils.ts
@@ -37,3 +37,20 @@ function replaceBooleanWithStrings(
     return result
   }, {})
 }
+
+export const readParam = (param) => {
+  if (param === 'undefined' || param === null || param === undefined) {
+    return undefined
+  }
+  if (param === 'true') {
+    return true
+  }
+  if (param === 'false') {
+    return false
+  }
+  return param
+}
+
+export const is = (queryParam: string | undefined) => {
+  return Boolean(readParam(queryParam))
+}
diff --git a/components/explore/filters/EventTypeFilter.vue b/components/shared/filters/modules/EventTypeFilter.vue
similarity index 87%
rename from components/explore/filters/EventTypeFilter.vue
rename to components/shared/filters/modules/EventTypeFilter.vue
index d14ea4f4dd..f4d284cdba 100644
--- a/components/explore/filters/EventTypeFilter.vue
+++ b/components/shared/filters/modules/EventTypeFilter.vue
@@ -14,26 +14,28 @@
     </template>
     <div class="p-4">
       <b-field>
-        <NeoCheckbox v-model="sale">Sale</NeoCheckbox>
+        <NeoCheckbox v-model="sale">{{ $t('filters.sale') }}</NeoCheckbox>
       </b-field>
       <b-field>
-        <NeoCheckbox v-model="offer">Offer</NeoCheckbox>
+        <NeoCheckbox v-model="offer">{{ $t('filters.offer') }}</NeoCheckbox>
       </b-field>
       <b-field>
-        <NeoCheckbox v-model="listing">Listing</NeoCheckbox>
+        <NeoCheckbox v-model="listing">{{ $t('filters.listing') }}</NeoCheckbox>
       </b-field>
       <b-field>
-        <NeoCheckbox v-model="mint">Mint</NeoCheckbox>
+        <NeoCheckbox v-model="mint">{{ $t('filters.mint') }}</NeoCheckbox>
       </b-field>
       <b-field>
-        <NeoCheckbox v-model="transfer">Transfer</NeoCheckbox>
+        <NeoCheckbox v-model="transfer">{{
+          $t('filters.transfer')
+        }}</NeoCheckbox>
       </b-field>
     </div>
   </b-collapse>
 </template>
 
 <script lang="ts" setup>
-import useReplaceUrl from './useReplaceUrl'
+import useReplaceUrl from '../filterUtils'
 import { NeoCheckbox } from '@kodadot1/brick'
 import { useAcivityFiltersStore } from '@/stores/activityFilters'
 
diff --git a/components/explore/filters/PriceFilter.vue b/components/shared/filters/modules/PriceFilter.vue
similarity index 99%
rename from components/explore/filters/PriceFilter.vue
rename to components/shared/filters/modules/PriceFilter.vue
index 8a62cf17c7..5d3a9247ef 100644
--- a/components/explore/filters/PriceFilter.vue
+++ b/components/shared/filters/modules/PriceFilter.vue
@@ -67,7 +67,7 @@
 <script lang="ts" setup>
 import { NeoButton } from '@kodadot1/brick'
 import { fromDecimals, toDecimals } from '@/utils/math'
-import useReplaceUrl from './useReplaceUrl'
+import useReplaceUrl from '../filterUtils'
 import { useExploreFiltersStore } from '@/stores/exploreFilters'
 
 const exploreFiltersStore = useExploreFiltersStore()
diff --git a/components/explore/filters/StatusFilter.vue b/components/shared/filters/modules/StatusFilter.vue
similarity index 98%
rename from components/explore/filters/StatusFilter.vue
rename to components/shared/filters/modules/StatusFilter.vue
index 14eaa419ee..77fc6af952 100644
--- a/components/explore/filters/StatusFilter.vue
+++ b/components/shared/filters/modules/StatusFilter.vue
@@ -28,7 +28,7 @@
 </template>
 
 <script lang="ts" setup>
-import useReplaceUrl from './useReplaceUrl'
+import useReplaceUrl from '../filterUtils'
 import { NeoCheckbox } from '@kodadot1/brick'
 import { useExploreFiltersStore } from '@/stores/exploreFilters'
 
diff --git a/layouts/explore-layout.vue b/layouts/explore-layout.vue
index cdcaa6a8ef..a8ec6162b5 100644
--- a/layouts/explore-layout.vue
+++ b/layouts/explore-layout.vue
@@ -36,7 +36,7 @@
 
 <script lang="ts" setup>
 import ExploreTabsFilterSort from '@/components/explore/Controls.vue'
-import MobileFilter from '@/components/explore/MobileFilter.vue'
+import MobileFilter from '@/components/shared/filters/MobileFilter.vue'
 import CollectionBanner from '@/components/collection/CollectionHeader/CollectionBanner.vue'
 import CollectionInfo from '@/components/collection/CollectionInfo.vue'
 
diff --git a/locales/en.json b/locales/en.json
index 4f73dec04f..3ace97162b 100644
--- a/locales/en.json
+++ b/locales/en.json
@@ -1286,5 +1286,13 @@
         }
       }
     }
+  },
+  "filters": {
+    "sale": "Sale",
+    "offer": "Offer",
+    "listing": "Listing",
+    "mint": "Mint",
+    "transfer": "Transfer"
+
   }
 }
diff --git a/stores/activityFilters.ts b/stores/activityFilters.ts
index b535b5bb26..612a408c06 100644
--- a/stores/activityFilters.ts
+++ b/stores/activityFilters.ts
@@ -54,6 +54,13 @@ export const useAcivityFiltersStore = defineStore('activityFilters', {
     setMax(payload) {
       this.max = payload
     },
+    setFilters(payload) {
+      this.sale = Boolean(payload.sale)
+      this.offer = Boolean(payload.offer)
+      this.listing = Boolean(payload.listing)
+      this.mint = Boolean(payload.mint)
+      this.transfer = Boolean(payload.transfer)
+    },
     setPriceRange(payload) {
       this.min = payload.min
       this.max = payload.max

From 27b6e3b54d57baadbf52a71db29e84ce86242921 Mon Sep 17 00:00:00 2001
From: daiagi <daiagi@gmail.com>
Date: Sun, 26 Mar 2023 13:21:31 +0700
Subject: [PATCH 17/55] attempt1 to fix chart responsivity

---
 components/chart/PriceChart.vue             |  4 ++
 components/collection/activity/Activity.vue | 60 +++++++++++----------
 2 files changed, 36 insertions(+), 28 deletions(-)

diff --git a/components/chart/PriceChart.vue b/components/chart/PriceChart.vue
index 842565491f..81e461d903 100644
--- a/components/chart/PriceChart.vue
+++ b/components/chart/PriceChart.vue
@@ -165,6 +165,10 @@ const getPriceChartData = () => {
         },
         options: {
           maintainAspectRatio: false,
+          responsive: true,
+          animation: {
+            duration: 1000,
+          },
           plugins: {
             customCanvasBackgroundColor: {
               color: isDarkMode.value ? '#181717' : 'white',
diff --git a/components/collection/activity/Activity.vue b/components/collection/activity/Activity.vue
index b53265d56f..1a0d5c6a73 100644
--- a/components/collection/activity/Activity.vue
+++ b/components/collection/activity/Activity.vue
@@ -1,13 +1,10 @@
 <template>
-  <div
-    ref="wrapper"
-    class="is-flex"
-    :class="{ 'is-justify-content-center': mobile }">
+  <div class="is-flex">
     <SidebarFilter />
-    <div class="w-full mt-5">
+    <div ref="wrapper" class="w-full mt-5">
       <div v-if="tablet">
         <div class="columns">
-          <div class="column is-two-thirds-desktop is-half-tablet">
+          <div class="column is-two-thirds">
             <ActivityChart :events="events" />
           </div>
           <div class="column">
@@ -16,16 +13,16 @@
         </div>
         <BreadcrumbsFilter />
         <hr class="my-0" />
-
-        <Events :events="sortedEvents" />
       </div>
       <div v-if="mobile">
         <div class="is-flex is-flex-direction-column gap">
           <OwnerInsights :owners="owners" :flippers="flippers" />
-          <ActivityChart :events="events" />
-          <Events :events="sortedEvents" />
+          <div class="max-width">
+            <ActivityChart :events="events" />
+          </div>
         </div>
       </div>
+      <Events :events="sortedEvents" />
     </div>
   </div>
 </template>
@@ -39,12 +36,12 @@ import { useCollectionActivity } from '@/components/collection/utils/useCollecti
 import { Interaction } from '@kodadot1/minimark'
 import { useResizeObserver, useWindowSize } from '@vueuse/core'
 import SidebarFilter from '@/components/shared/filters/SidebarFilter.vue'
-const sidebarwidth = 55
-const mobileBreakpoint = 768 + sidebarwidth
-const windowWidth = useWindowSize().width.value
+// const sidebarwidth = 55
+const mobileBreakpoint = 800
+// const windowWidth = useWindowSize().width.value
 const route = useRoute()
-const tablet = ref(windowWidth > mobileBreakpoint)
-const mobile = ref(windowWidth <= mobileBreakpoint)
+const tablet = ref(true)
+const mobile = ref(false)
 const wrapper = ref<HTMLDivElement | null>(null)
 
 const collectionId = computed(() => route.params.id)
@@ -70,23 +67,30 @@ const sortedEvents = computed(() =>
   withOffers.value.sort((a, b) => b.timestamp - a.timestamp)
 )
 
-useResizeObserver(
-  wrapper,
-  (entry) => {
-    if (entry[0].contentRect.width >= mobileBreakpoint) {
-      tablet.value = true
-      mobile.value = false
-    } else {
-      tablet.value = false
-      mobile.value = true
-    }
-  },
-  {}
-)
+useResizeObserver(wrapper, (entry) => {
+  if (entry[0].contentRect.width >= mobileBreakpoint) {
+    tablet.value = true
+    mobile.value = false
+  } else {
+    tablet.value = false
+    mobile.value = true
+  }
+})
 </script>
 
 <style lang="scss" scoped>
 .gap {
   gap: 2.5rem;
 }
+.is-flex-basis-two-thirds {
+  flex-basis: 66.6%;
+}
+.is-flex-basis-auto {
+  flex-basis: auto;
+}
+
+//hack to make the chart responsive
+.max-width {
+  max-width: calc(100% - 1px);
+}
 </style>

From 8caac9197568641677463b7815df34c4cb84149c Mon Sep 17 00:00:00 2001
From: daiagi <daiagi@gmail.com>
Date: Sun, 26 Mar 2023 14:27:20 +0700
Subject: [PATCH 18/55] visual touchups

---
 components/collection/activity/Activity.vue   |  6 +-
 .../collection/activity/events/Events.vue     |  5 +-
 .../events/eventRow/EventRowDesktop.vue       | 78 ++++++++++++-------
 .../events/eventRow/EventRowTablet.vue        | 16 ++--
 .../holdersFlippersTabs/FlipperTab.vue        |  5 +-
 components/identity/module/IdentityChain.vue  |  2 +-
 6 files changed, 68 insertions(+), 44 deletions(-)

diff --git a/components/collection/activity/Activity.vue b/components/collection/activity/Activity.vue
index 1a0d5c6a73..2d529c5bed 100644
--- a/components/collection/activity/Activity.vue
+++ b/components/collection/activity/Activity.vue
@@ -12,7 +12,6 @@
           </div>
         </div>
         <BreadcrumbsFilter />
-        <hr class="my-0" />
       </div>
       <div v-if="mobile">
         <div class="is-flex is-flex-direction-column gap">
@@ -22,6 +21,7 @@
           </div>
         </div>
       </div>
+      <hr class="my-5" />
       <Events :events="sortedEvents" />
     </div>
   </div>
@@ -34,11 +34,9 @@ import Events from './events/Events.vue'
 import BreadcrumbsFilter from '@/components/shared/BreadcrumbsFilter.vue'
 import { useCollectionActivity } from '@/components/collection/utils/useCollectionActivity'
 import { Interaction } from '@kodadot1/minimark'
-import { useResizeObserver, useWindowSize } from '@vueuse/core'
+import { useResizeObserver } from '@vueuse/core'
 import SidebarFilter from '@/components/shared/filters/SidebarFilter.vue'
-// const sidebarwidth = 55
 const mobileBreakpoint = 800
-// const windowWidth = useWindowSize().width.value
 const route = useRoute()
 const tablet = ref(true)
 const mobile = ref(false)
diff --git a/components/collection/activity/events/Events.vue b/components/collection/activity/events/Events.vue
index 52bee70327..4e9a3ad025 100644
--- a/components/collection/activity/events/Events.vue
+++ b/components/collection/activity/events/Events.vue
@@ -1,6 +1,6 @@
 <template>
   <div v-if="events.length > 0">
-    <div class="is-hidden-touch columns is-size-7 k-grey py-3">
+    <div class="is-hidden-touch columns is-size-7 k-grey">
       <div class="column">
         <span>{{ $t('activity.event.item') }}</span>
       </div>
@@ -24,8 +24,7 @@
       <EventRow
         v-for="event in displayedEvents"
         :key="event.timestamp"
-        :event="event"
-        class="my-2 event-row-transition" />
+        :event="event" />
       <div ref="sentinel" />
     </div>
   </div>
diff --git a/components/collection/activity/events/eventRow/EventRowDesktop.vue b/components/collection/activity/events/eventRow/EventRowDesktop.vue
index 04d2a92f1d..02b8c78cf0 100644
--- a/components/collection/activity/events/eventRow/EventRowDesktop.vue
+++ b/components/collection/activity/events/eventRow/EventRowDesktop.vue
@@ -1,19 +1,21 @@
 <template>
-  <div class="columns">
+  <div class="columns mb-2">
     <div class="column">
       <div class="is-flex is-align-items-center">
-        <nuxt-link :to="`/${urlPrefix}/gallery/${event.nft.id}`">
+        <nuxt-link
+          :to="`/${urlPrefix}/gallery/${event.nft.id}`"
+          class="height-50px">
           <img
             v-if="avatar"
             :src="avatar"
             :alt="event.nft.name"
             width="50"
             height="50"
-            class="border" />
+            class="border image-size" />
           <img
             v-else
             src="/placeholder.webp"
-            class="border"
+            class="border image-size"
             width="50"
             height="50" />
         </nuxt-link>
@@ -26,44 +28,54 @@
     </div>
 
     <div class="column">
-      <div
-        class="border is-size-7 px-4 py-1 my-2 is-flex is-align-items-center fixed-width fixed-height"
-        :class="interactionColor[event.interaction]">
-        <span>{{ interactionName }}</span>
+      <div class="height-50px is-flex is-align-items-center">
+        <div
+          class="border is-size-7 is-justify-content-center py-1 my-2 is-flex is-align-items-center fixed-width fixed-height"
+          :class="interactionColor[event.interaction]">
+          {{ interactionName }}
+        </div>
       </div>
     </div>
 
     <div class="column">
-      <div v-if="amount === blank">
-        {{ blank }}
+      <div class="height-50px is-flex is-align-items-center">
+        <div v-if="amount === blank">
+          {{ blank }}
+        </div>
+        <Money v-else :value="amount" />
       </div>
-      <Money v-else :value="amount" />
     </div>
 
     <div class="column">
-      <nuxt-link
-        v-if="fromAddress !== blank"
-        :to="`/${urlPrefix}/u/${fromAddress}`"
-        class="has-text-link">
-        <IdentityIndex ref="identity" :address="fromAddress" show-clipboard />
-      </nuxt-link>
-      <div v-else>
-        {{ blank }}
+      <div class="height-50px is-flex is-align-items-center">
+        <nuxt-link
+          v-if="fromAddress !== blank"
+          :to="`/${urlPrefix}/u/${fromAddress}`"
+          class="has-text-link">
+          <IdentityIndex ref="identity" :address="fromAddress" show-clipboard />
+        </nuxt-link>
+        <div v-else>
+          {{ blank }}
+        </div>
       </div>
     </div>
     <div class="column">
-      <nuxt-link
-        v-if="toAddress !== blank"
-        :to="`/${urlPrefix}/u/${toAddress}`"
-        class="has-text-link">
-        <IdentityIndex ref="identity" :address="toAddress" show-clipboard />
-      </nuxt-link>
-      <div v-else>
-        {{ blank }}
+      <div class="height-50px is-flex is-align-items-center">
+        <nuxt-link
+          v-if="toAddress !== blank"
+          :to="`/${urlPrefix}/u/${toAddress}`"
+          class="has-text-link">
+          <IdentityIndex ref="identity" :address="toAddress" show-clipboard />
+        </nuxt-link>
+        <div v-else>
+          {{ blank }}
+        </div>
       </div>
     </div>
     <div class="column">
-      {{ timeAgo(event.timestamp) }}
+      <div class="height-50px is-flex is-align-items-center">
+        {{ timeAgo(event.timestamp) }}
+      </div>
     </div>
   </div>
 </template>
@@ -114,11 +126,19 @@ const getAvatar = async () => {
 @import '@/styles/abstracts/variables';
 
 .fixed-width {
-  width: 60px;
+  width: 84px;
 }
 .fixed-height {
   height: 22px;
 }
+.height-50px {
+  height: 50px;
+}
+.image-size {
+  width: 50px !important;
+  height: 50px !important;
+  max-width: none !important;
+}
 .k-pink {
   @include ktheme() {
     background-color: theme('k-pink');
diff --git a/components/collection/activity/events/eventRow/EventRowTablet.vue b/components/collection/activity/events/eventRow/EventRowTablet.vue
index 547b93fe97..55560a5b66 100644
--- a/components/collection/activity/events/eventRow/EventRowTablet.vue
+++ b/components/collection/activity/events/eventRow/EventRowTablet.vue
@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="mb-5">
     <div class="is-flex">
       <nuxt-link :to="`/${urlPrefix}/gallery/${event.nft.id}`">
         <div class="mr-5">
@@ -9,11 +9,11 @@
             :alt="event.nft.name"
             width="50"
             height="50"
-            class="border" />
+            class="border image-size" />
           <img
             v-else
             src="/placeholder.webp"
-            class="border"
+            class="border image-size"
             width="50"
             height="50" />
         </div>
@@ -32,9 +32,9 @@
         </div>
         <div class="is-flex is-justify-content-space-between">
           <div
-            class="border is-size-7 px-4 py-1 is-flex is-align-items-center fixed-width fixed-height"
+            class="border is-size-7 is-justify-content-center py-1 is-flex is-align-items-center fixed-width fixed-height"
             :class="interactionColor[event.interaction]">
-            <span>{{ interactionName }}</span>
+            {{ interactionName }}
           </div>
           <div>
             {{ timeAgo(event.timestamp) }}
@@ -122,11 +122,15 @@ const getAvatar = async () => {
 @import '@/styles/abstracts/variables';
 
 .fixed-width {
-  width: 60px;
+  width: 84px;
 }
 .fixed-height {
   height: 22px;
 }
+.image-size {
+  width: 50px !important;
+  height: 50px !important;
+}
 
 .gap {
   gap: 1rem;
diff --git a/components/collection/activity/holdersFlippersTabs/FlipperTab.vue b/components/collection/activity/holdersFlippersTabs/FlipperTab.vue
index 64204e5750..3194804069 100644
--- a/components/collection/activity/holdersFlippersTabs/FlipperTab.vue
+++ b/components/collection/activity/holdersFlippersTabs/FlipperTab.vue
@@ -8,7 +8,10 @@
       :key="flipperId"
       class="hide-last-hr">
       <div class="is-flex is-flex-direction-column gap">
-        <ProfileLink :address="flipperId" :avatar-size="35" />
+        <ProfileLink
+          :address="flipperId"
+          :avatar-size="35"
+          class="has-text-weight-bold" />
         <div class="is-flex is-justify-content-space-between">
           <span class="is-size-7 k-grey">{{ $t('activity.owned') }}</span>
           <span>{{ owned }}</span>
diff --git a/components/identity/module/IdentityChain.vue b/components/identity/module/IdentityChain.vue
index f4e1be179f..dbc317f47b 100644
--- a/components/identity/module/IdentityChain.vue
+++ b/components/identity/module/IdentityChain.vue
@@ -17,7 +17,7 @@
     <template v-else-if="!hideIdentityPopover && !isMobileDevice">
       <IdentityPopover v-if="address">
         <template #trigger>
-          <span class="has-text-weight-bold">{{ name }}</span>
+          <span>{{ name }}</span>
         </template>
       </IdentityPopover>
     </template>

From 630059730609bcf380e52f51575f66df5d0ff369 Mon Sep 17 00:00:00 2001
From: daiagi <daiagi@gmail.com>
Date: Sun, 26 Mar 2023 14:38:12 +0700
Subject: [PATCH 19/55] attempt to fix / improve chart resize issue

---
 components/chart/PriceChart.vue | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/components/chart/PriceChart.vue b/components/chart/PriceChart.vue
index 81e461d903..cda6fa0f87 100644
--- a/components/chart/PriceChart.vue
+++ b/components/chart/PriceChart.vue
@@ -166,9 +166,15 @@ const getPriceChartData = () => {
         options: {
           maintainAspectRatio: false,
           responsive: true,
-          animation: {
-            duration: 1000,
+          responsiveAnimationDuration: 0,
+          transitions: {
+            resize: {
+              animation: {
+                duration: 0,
+              },
+            },
           },
+
           plugins: {
             customCanvasBackgroundColor: {
               color: isDarkMode.value ? '#181717' : 'white',

From 6f579f21ecf1db95f1d93f0cd4404468427aa5a1 Mon Sep 17 00:00:00 2001
From: daiagi <daiagi@gmail.com>
Date: Sun, 26 Mar 2023 14:43:06 +0700
Subject: [PATCH 20/55] fix deepSource issues

---
 components/collection/activity/events/Events.vue | 10 +++++-----
 components/shared/filters/MobileFilter.vue       |  2 +-
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/components/collection/activity/events/Events.vue b/components/collection/activity/events/Events.vue
index 4e9a3ad025..7f18c31038 100644
--- a/components/collection/activity/events/Events.vue
+++ b/components/collection/activity/events/Events.vue
@@ -54,11 +54,11 @@ const offset = ref(10)
 const filteredEvents = computed(() => {
   const query = useRoute().query
   const isAnyFilterActive =
-    readParam(query.sale) ||
-    readParam(query.listing) ||
-    readParam(query.mint) ||
-    readParam(query.transfer) ||
-    readParam(query.offer)
+    readParam(query?.sale) ||
+    readParam(query?.listing) ||
+    readParam(query?.mint) ||
+    readParam(query?.transfer) ||
+    readParam(query?.offer)
   // don't filter events if no filter is applied
   if (!isAnyFilterActive) {
     return props.events
diff --git a/components/shared/filters/MobileFilter.vue b/components/shared/filters/MobileFilter.vue
index d9cc851b83..2ad2dfe492 100644
--- a/components/shared/filters/MobileFilter.vue
+++ b/components/shared/filters/MobileFilter.vue
@@ -103,7 +103,7 @@ const syncFromUrl = () => {
     syncFromUrlOnActivityTab()
     activityFiltersStore.setPriceRange({ min, max })
   } else {
-    syncFromUrlOnGrid
+    syncFromUrlOnGrid()
     exploreFiltersStore.setPriceRange({ min, max })
   }
 }

From bd27a341896845827e53548916cf5665e0b83e04 Mon Sep 17 00:00:00 2001
From: daiagi <daiagi@gmail.com>
Date: Sun, 26 Mar 2023 15:43:29 +0700
Subject: [PATCH 21/55] fix wrong to addres for send interaction

---
 components/collection/activity/events/eventRow/common.ts | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/components/collection/activity/events/eventRow/common.ts b/components/collection/activity/events/eventRow/common.ts
index faab6e1cff..803592e6c8 100644
--- a/components/collection/activity/events/eventRow/common.ts
+++ b/components/collection/activity/events/eventRow/common.ts
@@ -63,6 +63,9 @@ export const getToAddress = (event: InteractionWithNFT | Offer): string => {
   if (interaction === Interaction.BUY || interaction === Interaction.SEND) {
     return event.caller
   }
+  if (interaction === Interaction.SEND) {
+    return (event as InteractionWithNFT).meta
+  }
   return blank
 }
 export const getNFTAvatar = async (

From ba37fd5bb4982318274e3be196bbce8e0e7a259c Mon Sep 17 00:00:00 2001
From: daiagi <daiagi@gmail.com>
Date: Sun, 26 Mar 2023 15:43:58 +0700
Subject: [PATCH 22/55] fix

---
 components/collection/activity/events/eventRow/common.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/collection/activity/events/eventRow/common.ts b/components/collection/activity/events/eventRow/common.ts
index 803592e6c8..f2afef43bb 100644
--- a/components/collection/activity/events/eventRow/common.ts
+++ b/components/collection/activity/events/eventRow/common.ts
@@ -60,7 +60,7 @@ export const getToAddress = (event: InteractionWithNFT | Offer): string => {
   if (interaction === Interaction.MINTNFT || interaction === Interaction.LIST) {
     return event.caller
   }
-  if (interaction === Interaction.BUY || interaction === Interaction.SEND) {
+  if (interaction === Interaction.BUY) {
     return event.caller
   }
   if (interaction === Interaction.SEND) {

From 4e28e8888d7a837bb504498cf16d89f5c9080951 Mon Sep 17 00:00:00 2001
From: Luke Fishman <daiagi@gmail.com>
Date: Sun, 26 Mar 2023 15:44:53 +0700
Subject: [PATCH 23/55] Update
 components/collection/utils/useCollectionActivity.ts

Co-authored-by: Jarsen <31397967+Jarsen136@users.noreply.github.com>
---
 components/collection/utils/useCollectionActivity.ts | 1 -
 1 file changed, 1 deletion(-)

diff --git a/components/collection/utils/useCollectionActivity.ts b/components/collection/utils/useCollectionActivity.ts
index 7919300feb..adc411d9ff 100644
--- a/components/collection/utils/useCollectionActivity.ts
+++ b/components/collection/utils/useCollectionActivity.ts
@@ -98,7 +98,6 @@ const preProccessForFindingFlippers = (interactions: InteractionWithNFT[]) => {
 
   interactions.forEach((event) => {
     if (event.interaction === Interaction.MINTNFT) {
-      // mintInteractions.push(event)
       NFTS[event.nft.id] = {
         owner: event.caller,
         nft: event.nft,

From 5d6eee6c2769ad63cf2f4a31921630dd19f2f35e Mon Sep 17 00:00:00 2001
From: daiagi <daiagi@gmail.com>
Date: Sun, 26 Mar 2023 15:48:11 +0700
Subject: [PATCH 24/55] use one ref for toggling vue

---
 components/collection/activity/Activity.vue | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/components/collection/activity/Activity.vue b/components/collection/activity/Activity.vue
index 2d529c5bed..0c6683ae93 100644
--- a/components/collection/activity/Activity.vue
+++ b/components/collection/activity/Activity.vue
@@ -13,7 +13,7 @@
         </div>
         <BreadcrumbsFilter />
       </div>
-      <div v-if="mobile">
+      <div v-else>
         <div class="is-flex is-flex-direction-column gap">
           <OwnerInsights :owners="owners" :flippers="flippers" />
           <div class="max-width">
@@ -39,7 +39,6 @@ import SidebarFilter from '@/components/shared/filters/SidebarFilter.vue'
 const mobileBreakpoint = 800
 const route = useRoute()
 const tablet = ref(true)
-const mobile = ref(false)
 const wrapper = ref<HTMLDivElement | null>(null)
 
 const collectionId = computed(() => route.params.id)
@@ -68,10 +67,8 @@ const sortedEvents = computed(() =>
 useResizeObserver(wrapper, (entry) => {
   if (entry[0].contentRect.width >= mobileBreakpoint) {
     tablet.value = true
-    mobile.value = false
   } else {
     tablet.value = false
-    mobile.value = true
   }
 })
 </script>

From be3393849f60fc1db0cd157911b49cb601de184e Mon Sep 17 00:00:00 2001
From: daiagi <daiagi@gmail.com>
Date: Sun, 26 Mar 2023 17:05:51 +0700
Subject: [PATCH 25/55] fix visual issues

---
 components/collection/activity/Activity.vue       |  5 ++++-
 .../activity/events/eventRow/EventRowDesktop.vue  |  2 +-
 .../activity/events/eventRow/EventRowTablet.vue   | 15 +++------------
 .../activity/holdersFlippersTabs/HolderTab.vue    |  5 ++++-
 components/explore/DesktopControls.vue            | 10 ++++++++--
 components/explore/FilterMenuButton.vue           |  2 +-
 6 files changed, 21 insertions(+), 18 deletions(-)

diff --git a/components/collection/activity/Activity.vue b/components/collection/activity/Activity.vue
index 0c6683ae93..332d6ab41f 100644
--- a/components/collection/activity/Activity.vue
+++ b/components/collection/activity/Activity.vue
@@ -21,7 +21,7 @@
           </div>
         </div>
       </div>
-      <hr class="my-5" />
+      <hr class="my-40" />
       <Events :events="sortedEvents" />
     </div>
   </div>
@@ -77,6 +77,9 @@ useResizeObserver(wrapper, (entry) => {
 .gap {
   gap: 2.5rem;
 }
+.my-40 {
+  margin: 2.5rem 0;
+}
 .is-flex-basis-two-thirds {
   flex-basis: 66.6%;
 }
diff --git a/components/collection/activity/events/eventRow/EventRowDesktop.vue b/components/collection/activity/events/eventRow/EventRowDesktop.vue
index 02b8c78cf0..98de99afb3 100644
--- a/components/collection/activity/events/eventRow/EventRowDesktop.vue
+++ b/components/collection/activity/events/eventRow/EventRowDesktop.vue
@@ -126,7 +126,7 @@ const getAvatar = async () => {
 @import '@/styles/abstracts/variables';
 
 .fixed-width {
-  width: 84px;
+  width: 66px;
 }
 .fixed-height {
   height: 22px;
diff --git a/components/collection/activity/events/eventRow/EventRowTablet.vue b/components/collection/activity/events/eventRow/EventRowTablet.vue
index 55560a5b66..fe0f9b5000 100644
--- a/components/collection/activity/events/eventRow/EventRowTablet.vue
+++ b/components/collection/activity/events/eventRow/EventRowTablet.vue
@@ -44,9 +44,7 @@
     </div>
     <div class="is-flex mt-4 gap">
       <div class="is-flex is-align-items-center">
-        <span class="is-size-7 k-grey mr-3"
-          >{{ $t('activity.event.from') }}:</span
-        >
+        <span class="is-size-7 mr-3">{{ $t('activity.event.from') }}:</span>
         <nuxt-link
           v-if="fromAddress !== blank"
           :to="`/${urlPrefix}/u/${fromAddress}`"
@@ -59,9 +57,7 @@
       </div>
 
       <div class="is-flex is-align-items-center">
-        <span class="is-size-7 k-grey mr-3"
-          >{{ $t('activity.event.to') }}:</span
-        >
+        <span class="is-size-7 mr-3">{{ $t('activity.event.to') }}:</span>
         <nuxt-link
           v-if="toAddress !== blank"
           :to="`/${urlPrefix}/u/${toAddress}`"
@@ -122,7 +118,7 @@ const getAvatar = async () => {
 @import '@/styles/abstracts/variables';
 
 .fixed-width {
-  width: 84px;
+  width: 66px;
 }
 .fixed-height {
   height: 22px;
@@ -140,11 +136,6 @@ const getAvatar = async () => {
     background-color: theme('k-pink');
   }
 }
-.k-grey {
-  @include ktheme() {
-    color: theme('k-grey');
-  }
-}
 
 .k-yellow {
   @include ktheme() {
diff --git a/components/collection/activity/holdersFlippersTabs/HolderTab.vue b/components/collection/activity/holdersFlippersTabs/HolderTab.vue
index fd0ff89945..5128e63acb 100644
--- a/components/collection/activity/holdersFlippersTabs/HolderTab.vue
+++ b/components/collection/activity/holdersFlippersTabs/HolderTab.vue
@@ -5,7 +5,10 @@
       :key="holderId"
       class="hide-last-hr">
       <div class="is-flex is-flex-direction-column gap">
-        <ProfileLink :address="holderId" :avatar-size="35" />
+        <ProfileLink
+          :address="holderId"
+          :avatar-size="35"
+          class="has-text-weight-bold" />
         <div class="is-flex is-justify-content-space-between">
           <span class="is-size-7 k-grey">{{ $t('activity.owned') }}</span>
           <span>{{ holdings.nftCount }}</span>
diff --git a/components/explore/DesktopControls.vue b/components/explore/DesktopControls.vue
index 8872ea91f9..7e5a355473 100644
--- a/components/explore/DesktopControls.vue
+++ b/components/explore/DesktopControls.vue
@@ -1,7 +1,10 @@
 <template>
   <div class="explore is-flex is-flex-wrap-wrap">
-    <FilterMenuButton />
-    <ExploreTabs />
+    <div class="is-flex is-align-content-center gap">
+      <FilterMenuButton />
+      <ExploreTabs />
+    </div>
+
     <div v-if="!isActivityTab" class="explore-menu is-flex">
       <ExploreSort />
       <ExploreOffer class="is-flex-grow-1" />
@@ -32,6 +35,9 @@ const isActivityTab = computed(() =>
 <style lang="scss" scoped>
 @import '@/styles/abstracts/variables';
 
+.gap {
+  gap: 1.5rem;
+}
 .explore {
   gap: 1.5rem;
 
diff --git a/components/explore/FilterMenuButton.vue b/components/explore/FilterMenuButton.vue
index 20460632f5..d942cbe30d 100644
--- a/components/explore/FilterMenuButton.vue
+++ b/components/explore/FilterMenuButton.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="field has-addons is-flex is-align-items-center" data-cy="tabs">
+  <div class="has-addons is-flex is-align-items-center" data-cy="tabs">
     <div>
       <a
         class="is-hidden-mobile"

From ee0bf800d7cc473d5fbafb39f0ad2e5d3836507b Mon Sep 17 00:00:00 2001
From: daiagi <daiagi@gmail.com>
Date: Sun, 26 Mar 2023 17:08:05 +0700
Subject: [PATCH 26/55] remove price filter on collection activity

---
 components/shared/filters/MobileFilter.vue  | 5 ++++-
 components/shared/filters/SidebarFilter.vue | 2 +-
 2 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/components/shared/filters/MobileFilter.vue b/components/shared/filters/MobileFilter.vue
index 2ad2dfe492..48faa48380 100644
--- a/components/shared/filters/MobileFilter.vue
+++ b/components/shared/filters/MobileFilter.vue
@@ -23,7 +23,10 @@
           data-model="store"
           expanded />
         <StatusFilter v-else data-model="store" expanded />
-        <PriceFilter data-model="store" expanded />
+        <PriceFilter
+          v-if="!isCollectionActivityTab"
+          data-model="store"
+          expanded />
       </div>
 
       <div class="buttons-container px-4 py-3 border-top">
diff --git a/components/shared/filters/SidebarFilter.vue b/components/shared/filters/SidebarFilter.vue
index dbe6ce6d9d..5453deb9a0 100644
--- a/components/shared/filters/SidebarFilter.vue
+++ b/components/shared/filters/SidebarFilter.vue
@@ -3,7 +3,7 @@
     <NeoSidebar :reduce="false" :open="open" fullheight>
       <EventTypeFilter v-if="isCollectionActivityTab" expanded fluid-padding />
       <StatusFilter v-else expanded fluid-padding />
-      <PriceFilter fluid-padding />
+      <PriceFilter v-if="!isCollectionActivityTab" fluid-padding />
     </NeoSidebar>
   </div>
 </template>

From c1dcf38f07a64244bc4228b85b9c6c0e4aabe994 Mon Sep 17 00:00:00 2001
From: daiagi <daiagi@gmail.com>
Date: Sun, 26 Mar 2023 18:05:22 +0700
Subject: [PATCH 27/55] fixed breadcrumbs margin

---
 components/collection/activity/Activity.vue      | 10 +++++++++-
 components/collection/activity/events/Events.vue | 12 ++++--------
 components/collection/activity/utils.ts          | 13 +++++++++++++
 3 files changed, 26 insertions(+), 9 deletions(-)
 create mode 100644 components/collection/activity/utils.ts

diff --git a/components/collection/activity/Activity.vue b/components/collection/activity/Activity.vue
index 332d6ab41f..7ca8c61518 100644
--- a/components/collection/activity/Activity.vue
+++ b/components/collection/activity/Activity.vue
@@ -21,7 +21,7 @@
           </div>
         </div>
       </div>
-      <hr class="my-40" />
+      <hr class="mb-40" :class="{ 'my-40': !isBreadCrumbsShowing }" />
       <Events :events="sortedEvents" />
     </div>
   </div>
@@ -36,11 +36,16 @@ import { useCollectionActivity } from '@/components/collection/utils/useCollecti
 import { Interaction } from '@kodadot1/minimark'
 import { useResizeObserver } from '@vueuse/core'
 import SidebarFilter from '@/components/shared/filters/SidebarFilter.vue'
+import { isAnyActivityFilterActive } from './utils'
 const mobileBreakpoint = 800
 const route = useRoute()
 const tablet = ref(true)
 const wrapper = ref<HTMLDivElement | null>(null)
 
+const isBreadCrumbsShowing = computed(
+  () => isAnyActivityFilterActive() && tablet.value
+)
+
 const collectionId = computed(() => route.params.id)
 const { events, flippers, owners, offers } = useCollectionActivity({
   collectionId: collectionId.value,
@@ -80,6 +85,9 @@ useResizeObserver(wrapper, (entry) => {
 .my-40 {
   margin: 2.5rem 0;
 }
+.mb-40 {
+  margin-bottom: 2.5rem;
+}
 .is-flex-basis-two-thirds {
   flex-basis: 66.6%;
 }
diff --git a/components/collection/activity/events/Events.vue b/components/collection/activity/events/Events.vue
index 7f18c31038..953291174f 100644
--- a/components/collection/activity/events/Events.vue
+++ b/components/collection/activity/events/Events.vue
@@ -39,7 +39,8 @@ import {
 import EventRow from './EventRow.vue'
 import { useIntersectionObserver } from '@vueuse/core'
 import { Interaction } from '@kodadot1/minimark'
-import { is, readParam } from '@/components/shared/filters/filterUtils'
+import { is } from '@/components/shared/filters/filterUtils'
+import { isAnyActivityFilterActive } from '../utils'
 
 const props = withDefaults(
   defineProps<{
@@ -53,14 +54,9 @@ const offset = ref(10)
 
 const filteredEvents = computed(() => {
   const query = useRoute().query
-  const isAnyFilterActive =
-    readParam(query?.sale) ||
-    readParam(query?.listing) ||
-    readParam(query?.mint) ||
-    readParam(query?.transfer) ||
-    readParam(query?.offer)
+  const noFilterisActive = !isAnyActivityFilterActive()
   // don't filter events if no filter is applied
-  if (!isAnyFilterActive) {
+  if (noFilterisActive) {
     return props.events
   }
 
diff --git a/components/collection/activity/utils.ts b/components/collection/activity/utils.ts
new file mode 100644
index 0000000000..b97004dcaf
--- /dev/null
+++ b/components/collection/activity/utils.ts
@@ -0,0 +1,13 @@
+import { readParam } from '@/components/shared/filters/filterUtils'
+
+export const isAnyActivityFilterActive = (): boolean => {
+  const query = useRoute().query
+
+  return (
+    readParam(query?.sale) ||
+    readParam(query?.listing) ||
+    readParam(query?.mint) ||
+    readParam(query?.transfer) ||
+    readParam(query?.offer)
+  )
+}

From 6c9e08c64581d2261bba882ad9c4195e3828c26f Mon Sep 17 00:00:00 2001
From: daiagi <daiagi@gmail.com>
Date: Sun, 26 Mar 2023 18:08:33 +0700
Subject: [PATCH 28/55] code styling issue

---
 components/collection/activity/events/eventRow/common.ts | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/components/collection/activity/events/eventRow/common.ts b/components/collection/activity/events/eventRow/common.ts
index f2afef43bb..058d635640 100644
--- a/components/collection/activity/events/eventRow/common.ts
+++ b/components/collection/activity/events/eventRow/common.ts
@@ -57,10 +57,11 @@ export const getFromAddress = (event: InteractionWithNFT | Offer): string => {
 
 export const getToAddress = (event: InteractionWithNFT | Offer): string => {
   const interaction = event.interaction
-  if (interaction === Interaction.MINTNFT || interaction === Interaction.LIST) {
-    return event.caller
-  }
-  if (interaction === Interaction.BUY) {
+  if (
+    interaction === Interaction.MINTNFT ||
+    interaction === Interaction.LIST ||
+    interaction === Interaction.BUY
+  ) {
     return event.caller
   }
   if (interaction === Interaction.SEND) {

From 293b09bcf5b4939f6aad00105f4062fe962a59f6 Mon Sep 17 00:00:00 2001
From: daiagi <daiagi@gmail.com>
Date: Sun, 26 Mar 2023 20:48:18 +0700
Subject: [PATCH 29/55] toggle event row with resizeObserver

---
 .../collection/activity/events/EventRow.vue   |  9 ++-
 .../collection/activity/events/Events.vue     | 59 ++++++++++++-------
 2 files changed, 44 insertions(+), 24 deletions(-)

diff --git a/components/collection/activity/events/EventRow.vue b/components/collection/activity/events/EventRow.vue
index 909c6c17da..646fb020e1 100644
--- a/components/collection/activity/events/EventRow.vue
+++ b/components/collection/activity/events/EventRow.vue
@@ -1,7 +1,7 @@
 <template>
   <div>
-    <EventRowDesktop :event="event" class="is-hidden-touch" />
-    <EventRowTablet :event="event" class="is-hidden-desktop" />
+    <EventRowDesktop v-if="variant === 'Desktop'" :event="event" />
+    <EventRowTablet v-else :event="event" />
   </div>
 </template>
 
@@ -10,5 +10,8 @@ import { InteractionWithNFT, Offer } from '@/components/collection/utils/types'
 import EventRowDesktop from './eventRow/EventRowDesktop.vue'
 import EventRowTablet from './eventRow/EventRowTablet.vue'
 
-defineProps<{ event: InteractionWithNFT | Offer }>()
+defineProps<{
+  event: InteractionWithNFT | Offer
+  variant: 'Touch' | 'Desktop'
+}>()
 </script>
diff --git a/components/collection/activity/events/Events.vue b/components/collection/activity/events/Events.vue
index 953291174f..db07e233d6 100644
--- a/components/collection/activity/events/Events.vue
+++ b/components/collection/activity/events/Events.vue
@@ -1,29 +1,30 @@
 <template>
-  <div v-if="events.length > 0">
-    <div class="is-hidden-touch columns is-size-7 k-grey">
-      <div class="column">
-        <span>{{ $t('activity.event.item') }}</span>
+  <div ref="eventsContainer">
+    <div v-if="events.length > 0">
+      <div v-if="desktop" class="columns is-size-7 k-grey">
+        <div class="column">
+          <span>{{ $t('activity.event.item') }}</span>
+        </div>
+        <div class="column">
+          <span>{{ $t('activity.event.event') }}</span>
+        </div>
+        <div class="column">
+          <span>{{ $t('activity.event.amount') }}</span>
+        </div>
+        <div class="column">
+          <span>{{ $t('activity.event.from') }}</span>
+        </div>
+        <div class="column">
+          <span>{{ $t('activity.event.to') }}</span>
+        </div>
+        <div class="column">
+          <span>{{ $t('activity.event.time') }}</span>
+        </div>
       </div>
-      <div class="column">
-        <span>{{ $t('activity.event.event') }}</span>
-      </div>
-      <div class="column">
-        <span>{{ $t('activity.event.amount') }}</span>
-      </div>
-      <div class="column">
-        <span>{{ $t('activity.event.from') }}</span>
-      </div>
-      <div class="column">
-        <span>{{ $t('activity.event.to') }}</span>
-      </div>
-      <div class="column">
-        <span>{{ $t('activity.event.time') }}</span>
-      </div>
-    </div>
-    <div>
       <EventRow
         v-for="event in displayedEvents"
         :key="event.timestamp"
+        :variant="variant"
         :event="event" />
       <div ref="sentinel" />
     </div>
@@ -41,6 +42,12 @@ import { useIntersectionObserver } from '@vueuse/core'
 import { Interaction } from '@kodadot1/minimark'
 import { is } from '@/components/shared/filters/filterUtils'
 import { isAnyActivityFilterActive } from '../utils'
+import { useResizeObserver } from '@vueuse/core'
+
+const desktop = ref(true)
+const desktopBreakPoint = 1024
+const eventsContainer = ref<HTMLDivElement | null>(null)
+const variant = computed(() => (desktop.value ? 'Desktop' : 'Touch'))
 
 const props = withDefaults(
   defineProps<{
@@ -50,6 +57,16 @@ const props = withDefaults(
     events: () => [],
   }
 )
+
+useResizeObserver(eventsContainer, (entry) => {
+  console.log('width:', entry[0].contentRect.width)
+  if (entry[0].contentRect.width >= desktopBreakPoint) {
+    desktop.value = true
+  } else {
+    desktop.value = false
+  }
+})
+
 const offset = ref(10)
 
 const filteredEvents = computed(() => {

From 991e12a608595e4be1a4a67a9a32a8d93586d297 Mon Sep 17 00:00:00 2001
From: daiagi <daiagi@gmail.com>
Date: Sun, 26 Mar 2023 21:23:39 +0700
Subject: [PATCH 30/55] remove a console log

---
 components/collection/activity/events/Events.vue | 1 -
 1 file changed, 1 deletion(-)

diff --git a/components/collection/activity/events/Events.vue b/components/collection/activity/events/Events.vue
index db07e233d6..c165d9a760 100644
--- a/components/collection/activity/events/Events.vue
+++ b/components/collection/activity/events/Events.vue
@@ -59,7 +59,6 @@ const props = withDefaults(
 )
 
 useResizeObserver(eventsContainer, (entry) => {
-  console.log('width:', entry[0].contentRect.width)
   if (entry[0].contentRect.width >= desktopBreakPoint) {
     desktop.value = true
   } else {

From 8bcb8c3e08917a27c9796e25739114a68b13c80f Mon Sep 17 00:00:00 2001
From: daiagi <daiagi@gmail.com>
Date: Sun, 26 Mar 2023 21:32:16 +0700
Subject: [PATCH 31/55] clip flip profit to 4 digits

---
 .../collection/activity/holdersFlippersTabs/FlipperTab.vue      | 2 +-
 .../activity/holdersFlippersTabs/moreNFTs/Flipper.vue           | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/components/collection/activity/holdersFlippersTabs/FlipperTab.vue b/components/collection/activity/holdersFlippersTabs/FlipperTab.vue
index 3194804069..d9c98a77a1 100644
--- a/components/collection/activity/holdersFlippersTabs/FlipperTab.vue
+++ b/components/collection/activity/holdersFlippersTabs/FlipperTab.vue
@@ -27,7 +27,7 @@
         <div class="is-flex is-justify-content-space-between">
           <span class="is-size-7 k-grey">{{ $t('activity.bestFlip') }}</span>
           <span :class="{ 'k-green': bestFlip > 0, 'k-red': bestFlip < 0 }">{{
-            bestFlip === 0 ? '--' : `${bestFlip}%`
+            bestFlip === 0 ? '--' : `${bestFlip.toFixed(4)}%`
           }}</span>
         </div>
         <div class="is-flex is-justify-content-space-between">
diff --git a/components/collection/activity/holdersFlippersTabs/moreNFTs/Flipper.vue b/components/collection/activity/holdersFlippersTabs/moreNFTs/Flipper.vue
index b0a27d8824..dfdaf9040e 100644
--- a/components/collection/activity/holdersFlippersTabs/moreNFTs/Flipper.vue
+++ b/components/collection/activity/holdersFlippersTabs/moreNFTs/Flipper.vue
@@ -20,7 +20,7 @@
         <div class="is-flex is-justify-content-space-between no-wrap">
           <span class="is-size-7 k-grey">{{ $t('activity.profit') }}</span>
           <span :class="{ 'k-green': profit > 0, 'k-red': profit < 0 }">{{
-            profit === 0 ? '--' : `${profit}%`
+            profit === 0 ? '--' : `${profit.toFixed(4)}%`
           }}</span>
         </div>
         <div class="is-flex is-justify-content-space-between no-wrap">

From d2a9b1293d8c0287b5eeeb31bbb734e4b6d6d48d Mon Sep 17 00:00:00 2001
From: daiagi <daiagi@gmail.com>
Date: Mon, 27 Mar 2023 13:55:01 +0700
Subject: [PATCH 32/55] sensible chart (rolling avg of a day)

---
 components/chart/PriceChart.vue             |  6 +--
 components/collection/activity/Activity.vue |  5 +-
 components/collection/activity/Chart.vue    | 60 +++++++++++++++++++--
 components/collection/activity/utils.ts     | 55 +++++++++++++++++++
 components/rmrk/service/scheme.ts           |  9 ++--
 5 files changed, 123 insertions(+), 12 deletions(-)

diff --git a/components/chart/PriceChart.vue b/components/chart/PriceChart.vue
index cda6fa0f87..4e23c71331 100644
--- a/components/chart/PriceChart.vue
+++ b/components/chart/PriceChart.vue
@@ -132,11 +132,11 @@ const getPriceChartData = () => {
     )?.getContext('2d')
     if (ctx) {
       const commonStyle = {
-        tension: 0,
+        tension: 0.2,
         pointRadius: 6,
         pointHoverRadius: 6,
         pointHoverBackgroundColor: isDarkMode.value ? '#181717' : 'white',
-        borderJoinStyle: 'miter' as const,
+        borderJoinStyle: 'round' as const,
         radius: 0,
         pointStyle: 'rect',
         borderWidth: 1,
@@ -243,7 +243,7 @@ const getPriceChartData = () => {
                 callback: (value) => {
                   return `${Number(value).toFixed(2)}  `
                 },
-                maxTicksLimit: 7,
+                stepSize: 1,
                 color: lineColor.value,
               },
               grid: {
diff --git a/components/collection/activity/Activity.vue b/components/collection/activity/Activity.vue
index 7ca8c61518..cd2aba733e 100644
--- a/components/collection/activity/Activity.vue
+++ b/components/collection/activity/Activity.vue
@@ -22,7 +22,7 @@
         </div>
       </div>
       <hr class="mb-40" :class="{ 'my-40': !isBreadCrumbsShowing }" />
-      <Events :events="sortedEvents" />
+      <Events :events="sortedEventsWithOffersDesc" />
     </div>
   </div>
 </template>
@@ -65,7 +65,8 @@ const filteredEvents = computed(() =>
 )
 const withOffers = computed(() => [...filteredEvents.value, ...offers.value])
 
-const sortedEvents = computed(() =>
+// newest events first (bigger timestamp first)
+const sortedEventsWithOffersDesc = computed(() =>
   withOffers.value.sort((a, b) => b.timestamp - a.timestamp)
 )
 
diff --git a/components/collection/activity/Chart.vue b/components/collection/activity/Chart.vue
index 65c9a63637..91d9bf1517 100644
--- a/components/collection/activity/Chart.vue
+++ b/components/collection/activity/Chart.vue
@@ -1,11 +1,63 @@
 <template>
-  <GalleryItemChart :nft-events="events" chart-height="350px" />
+  <PriceChart
+    v-if="events.length > 0"
+    :price-chart-data="chartData"
+    chart-height="350px" />
 </template>
 
 <script setup lang="ts">
 import { ActivityInteraction } from '@/components/rmrk/service/scheme'
+import { Interaction } from '@kodadot1/minimark'
+import PriceChart from '@/components/chart/PriceChart.vue'
+import { DataPoint, bin } from './utils'
 
-defineProps<{
-  events?: ActivityInteraction[]
-}>()
+const props = withDefaults(
+  defineProps<{
+    events: ActivityInteraction[]
+  }>(),
+  {
+    events: () => [],
+  }
+)
+
+const toDataPoint = (e: ActivityInteraction): DataPoint => ({
+  timestamp: e.timestamp,
+  value: parseInt(e.meta),
+})
+
+const sortAsc = (events: DataPoint[]) =>
+  events.sort((a, b) => a.timestamp - b.timestamp)
+
+const displayValue = (val: number) => val * Math.pow(10, -12)
+
+const buyEvents = computed(() =>
+  sortAsc(
+    props.events
+      .filter((e) => e.interaction === Interaction.BUY)
+      .map(toDataPoint)
+  )
+)
+const listEvents = computed(() =>
+  sortAsc(
+    props.events
+      .filter((e) => e.interaction === Interaction.LIST)
+      .map(toDataPoint)
+  )
+)
+
+const chartData = computed(() => {
+  const buyBins = bin(buyEvents.value, { days: 1 })
+  const listBins = bin(listEvents.value, { days: 1 })
+
+  const binnedBuyEvents = buyBins.map(({ timestamp, value }) => [
+    new Date(timestamp),
+    displayValue(value),
+  ]) as [Date, number][]
+  const binnedListEvents = listBins.map(({ timestamp, value }) => [
+    new Date(timestamp),
+    displayValue(value),
+  ]) as [Date, number][]
+
+  return [binnedBuyEvents, binnedListEvents]
+})
 </script>
diff --git a/components/collection/activity/utils.ts b/components/collection/activity/utils.ts
index b97004dcaf..d32860abce 100644
--- a/components/collection/activity/utils.ts
+++ b/components/collection/activity/utils.ts
@@ -11,3 +11,58 @@ export const isAnyActivityFilterActive = (): boolean => {
     readParam(query?.offer)
   )
 }
+
+export type DataPoint = {
+  timestamp: number
+  value: number
+}
+
+export interface BinSize {
+  weeks?: number
+  days?: number
+  hours?: number
+  minutes?: number
+}
+
+export const bin = (data: DataPoint[], binSize: BinSize): DataPoint[] => {
+  const binSizeMillis = binSizeToMillis(binSize)
+  console.log('binSizeMillis', binSizeMillis)
+
+  const firstTimestamp = data[0].timestamp
+  const lastTimestamp = data[data.length - 1].timestamp
+
+  const numBins = Math.ceil((lastTimestamp - firstTimestamp) / binSizeMillis)
+  console.log('numBins', numBins)
+
+  const bins = new Array(numBins).fill(null).map((_, index) => {
+    const binStart = firstTimestamp + index * binSizeMillis
+    const binEnd = binStart + binSizeMillis
+    const binData = data.filter(
+      (dataPoint) =>
+        dataPoint.timestamp >= binStart && dataPoint.timestamp < binEnd
+    )
+    return { timestamp: binStart + binSizeMillis / 2, value: mean(binData) }
+  })
+
+  return bins.filter((bin) => !isNaN(bin.value))
+}
+
+export const binSizeToMillis = (binSize: BinSize): number => {
+  const millisInMinute = 60 * 1000
+  const millisInHour = 60 * millisInMinute
+  const millisInDay = 24 * millisInHour
+  const millisInWeek = 7 * millisInDay
+
+  const millis =
+    (binSize.weeks ?? 0) * millisInWeek +
+    (binSize.days ?? 0) * millisInDay +
+    (binSize.hours ?? 0) * millisInHour +
+    (binSize.minutes ?? 0) * millisInMinute
+
+  return millis || millisInDay // Default bin size is one day
+}
+
+const mean = (arr: DataPoint[]): number => {
+  const sum = arr.reduce((total, { value }) => total + value, 0)
+  return sum / arr.length
+}
diff --git a/components/rmrk/service/scheme.ts b/components/rmrk/service/scheme.ts
index 9fb57b34d5..a9bec198ba 100644
--- a/components/rmrk/service/scheme.ts
+++ b/components/rmrk/service/scheme.ts
@@ -176,16 +176,19 @@ export type EntityWithId = {
   name: string
 }
 
-export interface ActivityInteraction {
+interface BaseInteraction {
   id: string
   interaction: string
   meta: string
-  timestamp: string
 }
-export interface Interaction extends ActivityInteraction {
+export interface ActivityInteraction extends BaseInteraction {
+  timestamp: number
+}
+export interface Interaction extends BaseInteraction {
   blockNumber: string | number
   caller: string
   currentOwner: string
+  timestamp: string
 }
 
 export interface BasePack {

From a96e36518fad0438016becd499de7c440a9810bb Mon Sep 17 00:00:00 2001
From: daiagi <daiagi@gmail.com>
Date: Mon, 27 Mar 2023 13:58:40 +0700
Subject: [PATCH 33/55] deepSource fix

---
 components/collection/activity/utils.ts | 66 ++++++++++++-------------
 1 file changed, 32 insertions(+), 34 deletions(-)

diff --git a/components/collection/activity/utils.ts b/components/collection/activity/utils.ts
index d32860abce..844c90682f 100644
--- a/components/collection/activity/utils.ts
+++ b/components/collection/activity/utils.ts
@@ -1,17 +1,5 @@
 import { readParam } from '@/components/shared/filters/filterUtils'
 
-export const isAnyActivityFilterActive = (): boolean => {
-  const query = useRoute().query
-
-  return (
-    readParam(query?.sale) ||
-    readParam(query?.listing) ||
-    readParam(query?.mint) ||
-    readParam(query?.transfer) ||
-    readParam(query?.offer)
-  )
-}
-
 export type DataPoint = {
   timestamp: number
   value: number
@@ -24,15 +12,45 @@ export interface BinSize {
   minutes?: number
 }
 
+const binSizeToMillis = (binSize: BinSize): number => {
+  const millisInMinute = 60 * 1000
+  const millisInHour = 60 * millisInMinute
+  const millisInDay = 24 * millisInHour
+  const millisInWeek = 7 * millisInDay
+
+  const millis =
+    (binSize.weeks ?? 0) * millisInWeek +
+    (binSize.days ?? 0) * millisInDay +
+    (binSize.hours ?? 0) * millisInHour +
+    (binSize.minutes ?? 0) * millisInMinute
+
+  return millis || millisInDay // Default bin size is one day
+}
+
+const mean = (arr: DataPoint[]): number => {
+  const sum = arr.reduce((total, { value }) => total + value, 0)
+  return sum / arr.length
+}
+
+export const isAnyActivityFilterActive = (): boolean => {
+  const query = useRoute().query
+
+  return (
+    readParam(query?.sale) ||
+    readParam(query?.listing) ||
+    readParam(query?.mint) ||
+    readParam(query?.transfer) ||
+    readParam(query?.offer)
+  )
+}
+
 export const bin = (data: DataPoint[], binSize: BinSize): DataPoint[] => {
   const binSizeMillis = binSizeToMillis(binSize)
-  console.log('binSizeMillis', binSizeMillis)
 
   const firstTimestamp = data[0].timestamp
   const lastTimestamp = data[data.length - 1].timestamp
 
   const numBins = Math.ceil((lastTimestamp - firstTimestamp) / binSizeMillis)
-  console.log('numBins', numBins)
 
   const bins = new Array(numBins).fill(null).map((_, index) => {
     const binStart = firstTimestamp + index * binSizeMillis
@@ -46,23 +64,3 @@ export const bin = (data: DataPoint[], binSize: BinSize): DataPoint[] => {
 
   return bins.filter((bin) => !isNaN(bin.value))
 }
-
-export const binSizeToMillis = (binSize: BinSize): number => {
-  const millisInMinute = 60 * 1000
-  const millisInHour = 60 * millisInMinute
-  const millisInDay = 24 * millisInHour
-  const millisInWeek = 7 * millisInDay
-
-  const millis =
-    (binSize.weeks ?? 0) * millisInWeek +
-    (binSize.days ?? 0) * millisInDay +
-    (binSize.hours ?? 0) * millisInHour +
-    (binSize.minutes ?? 0) * millisInMinute
-
-  return millis || millisInDay // Default bin size is one day
-}
-
-const mean = (arr: DataPoint[]): number => {
-  const sum = arr.reduce((total, { value }) => total + value, 0)
-  return sum / arr.length
-}

From 90dd650e954a303789bb2f43d9a33140c9bdf41c Mon Sep 17 00:00:00 2001
From: daiagi <daiagi@gmail.com>
Date: Mon, 27 Mar 2023 14:09:49 +0700
Subject: [PATCH 34/55] trim price digits in chart

---
 components/collection/activity/Chart.vue | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/components/collection/activity/Chart.vue b/components/collection/activity/Chart.vue
index 91d9bf1517..d1355872b7 100644
--- a/components/collection/activity/Chart.vue
+++ b/components/collection/activity/Chart.vue
@@ -28,7 +28,8 @@ const toDataPoint = (e: ActivityInteraction): DataPoint => ({
 const sortAsc = (events: DataPoint[]) =>
   events.sort((a, b) => a.timestamp - b.timestamp)
 
-const displayValue = (val: number) => val * Math.pow(10, -12)
+const displayValue = (val: number) =>
+  Number((val * Math.pow(10, -12)).toFixed(4))
 
 const buyEvents = computed(() =>
   sortAsc(

From afdbcf05f5ed625483c30e5b54fd44f6af00b161 Mon Sep 17 00:00:00 2001
From: daiagi <daiagi@gmail.com>
Date: Mon, 27 Mar 2023 17:51:01 +0700
Subject: [PATCH 35/55] rmrk2 fix

---
 components/collection/activity/Activity.vue   |  7 +++--
 .../collection/activity/events/Events.vue     |  3 +-
 .../events/eventRow/EventRowDesktop.vue       |  8 ++---
 .../events/eventRow/EventRowTablet.vue        |  8 ++---
 .../activity/events/eventRow/common.ts        | 31 ++++++++++---------
 .../collection/utils/useCollectionActivity.ts |  9 ++++--
 6 files changed, 39 insertions(+), 27 deletions(-)

diff --git a/components/collection/activity/Activity.vue b/components/collection/activity/Activity.vue
index cd2aba733e..93b3cc80d2 100644
--- a/components/collection/activity/Activity.vue
+++ b/components/collection/activity/Activity.vue
@@ -32,7 +32,10 @@ import ActivityChart from './Chart.vue'
 import OwnerInsights from './OwnerInsights.vue'
 import Events from './events/Events.vue'
 import BreadcrumbsFilter from '@/components/shared/BreadcrumbsFilter.vue'
-import { useCollectionActivity } from '@/components/collection/utils/useCollectionActivity'
+import {
+  mintInteraction,
+  useCollectionActivity,
+} from '@/components/collection/utils/useCollectionActivity'
 import { Interaction } from '@kodadot1/minimark'
 import { useResizeObserver } from '@vueuse/core'
 import SidebarFilter from '@/components/shared/filters/SidebarFilter.vue'
@@ -54,7 +57,7 @@ const { events, flippers, owners, offers } = useCollectionActivity({
 const InteractionIncluded = [
   Interaction.BUY,
   Interaction.LIST,
-  Interaction.MINTNFT,
+  mintInteraction(),
   Interaction.SEND,
 ]
 
diff --git a/components/collection/activity/events/Events.vue b/components/collection/activity/events/Events.vue
index c165d9a760..d8e95d8852 100644
--- a/components/collection/activity/events/Events.vue
+++ b/components/collection/activity/events/Events.vue
@@ -43,6 +43,7 @@ import { Interaction } from '@kodadot1/minimark'
 import { is } from '@/components/shared/filters/filterUtils'
 import { isAnyActivityFilterActive } from '../utils'
 import { useResizeObserver } from '@vueuse/core'
+import { mintInteraction } from '@/components/collection/utils/useCollectionActivity'
 
 const desktop = ref(true)
 const desktopBreakPoint = 1024
@@ -78,7 +79,7 @@ const filteredEvents = computed(() => {
 
   const InteractionToKeep = {
     [Interaction.BUY]: is(query?.sale as string),
-    [Interaction.MINTNFT]: is(query?.mint as string),
+    [mintInteraction()]: is(query?.mint as string),
     [Interaction.LIST]: is(query?.listing as string),
     [Interaction.SEND]: is(query?.transfer as string),
     [OfferInteraction]: is(query?.offer as string),
diff --git a/components/collection/activity/events/eventRow/EventRowDesktop.vue b/components/collection/activity/events/eventRow/EventRowDesktop.vue
index 98de99afb3..f75482f2a7 100644
--- a/components/collection/activity/events/eventRow/EventRowDesktop.vue
+++ b/components/collection/activity/events/eventRow/EventRowDesktop.vue
@@ -31,7 +31,7 @@
       <div class="height-50px is-flex is-align-items-center">
         <div
           class="border is-size-7 is-justify-content-center py-1 my-2 is-flex is-align-items-center fixed-width fixed-height"
-          :class="interactionColor[event.interaction]">
+          :class="getInteractionColor(event.interaction)">
           {{ interactionName }}
         </div>
       </div>
@@ -89,10 +89,10 @@ import {
   blank,
   getAmount,
   getFromAddress,
+  getInteractionColor,
   getNFTAvatar,
   getToAddress,
-  ineteractionNameMap,
-  interactionColor,
+  interactionNameMap,
 } from './common'
 
 const { urlPrefix } = usePrefix()
@@ -103,7 +103,7 @@ const props = defineProps<{
 const avatar = ref<string>()
 
 const interactionName = computed(
-  () => ineteractionNameMap[props.event.interaction] || props.event.interaction
+  () => interactionNameMap[props.event.interaction] || props.event.interaction
 )
 const amount = computed(() => getAmount(props.event))
 
diff --git a/components/collection/activity/events/eventRow/EventRowTablet.vue b/components/collection/activity/events/eventRow/EventRowTablet.vue
index fe0f9b5000..c079673a9c 100644
--- a/components/collection/activity/events/eventRow/EventRowTablet.vue
+++ b/components/collection/activity/events/eventRow/EventRowTablet.vue
@@ -33,7 +33,7 @@
         <div class="is-flex is-justify-content-space-between">
           <div
             class="border is-size-7 is-justify-content-center py-1 is-flex is-align-items-center fixed-width fixed-height"
-            :class="interactionColor[event.interaction]">
+            :class="getInteractionColor(event.interaction)">
             {{ interactionName }}
           </div>
           <div>
@@ -81,10 +81,10 @@ import {
   blank,
   getAmount,
   getFromAddress,
+  getInteractionColor,
   getNFTAvatar,
   getToAddress,
-  ineteractionNameMap,
-  interactionColor,
+  interactionNameMap,
 } from './common'
 
 const { urlPrefix } = usePrefix()
@@ -95,7 +95,7 @@ const props = defineProps<{
 const avatar = ref<string>()
 
 const interactionName = computed(
-  () => ineteractionNameMap[props.event.interaction] || props.event.interaction
+  () => interactionNameMap[props.event.interaction] || props.event.interaction
 )
 const amount = computed(() => getAmount(props.event))
 
diff --git a/components/collection/activity/events/eventRow/common.ts b/components/collection/activity/events/eventRow/common.ts
index 058d635640..bfc376c15c 100644
--- a/components/collection/activity/events/eventRow/common.ts
+++ b/components/collection/activity/events/eventRow/common.ts
@@ -4,32 +4,35 @@ import {
   Offer,
   OfferInteraction,
 } from '@/components/collection/utils/types'
-import { sanitizeIpfsUrl } from '~~/utils/ipfs'
-import { processSingleMetadata } from '~~/utils/cachingStrategy'
-import { NFTMetadata } from '~~/components/rmrk/service/scheme'
+import { sanitizeIpfsUrl } from '@/utils/ipfs'
+import { processSingleMetadata } from '@/utils/cachingStrategy'
+import { NFTMetadata } from '@/components/rmrk/service/scheme'
+import { mintInteraction } from '@/components/collection/utils/useCollectionActivity'
 
-export const ineteractionNameMap = {
+export const interactionNameMap = {
   BUY: 'Sale',
   LIST: 'List',
   MINTNFT: 'Mint',
+  MINT: 'Mint',
   SEND: 'Transfer',
   Offer: 'Offer',
 }
 export const blank = '--'
 
-export const interactionColor = {
-  [Interaction.MINTNFT]: 'k-yellow',
-  [Interaction.LIST]: 'k-blueaccent',
-  [Interaction.BUY]: 'k-pink',
-  [OfferInteraction]: 'k-greenaccent',
-  [Interaction.SEND]: 'background-color',
-}
+export const getInteractionColor = (interaction: string) =>
+  ({
+    [mintInteraction()]: 'k-yellow',
+    [Interaction.LIST]: 'k-blueaccent',
+    [Interaction.BUY]: 'k-pink',
+    [OfferInteraction]: 'k-greenaccent',
+    [Interaction.SEND]: 'background-color',
+  }[interaction])
 
 export const getAmount = (
   event: InteractionWithNFT | Offer
 ): string | number => {
   switch (event.interaction) {
-    case Interaction.MINT:
+    case mintInteraction():
       return blank
     case Interaction.LIST:
     case Interaction.BUY:
@@ -43,7 +46,7 @@ export const getAmount = (
 
 export const getFromAddress = (event: InteractionWithNFT | Offer): string => {
   const interaction = event.interaction
-  if (interaction === Interaction.MINTNFT || interaction === Interaction.LIST) {
+  if (interaction === mintInteraction() || interaction === Interaction.LIST) {
     return blank
   }
   if (interaction === Interaction.BUY || interaction === Interaction.SEND) {
@@ -58,7 +61,7 @@ export const getFromAddress = (event: InteractionWithNFT | Offer): string => {
 export const getToAddress = (event: InteractionWithNFT | Offer): string => {
   const interaction = event.interaction
   if (
-    interaction === Interaction.MINTNFT ||
+    interaction === mintInteraction() ||
     interaction === Interaction.LIST ||
     interaction === Interaction.BUY
   ) {
diff --git a/components/collection/utils/useCollectionActivity.ts b/components/collection/utils/useCollectionActivity.ts
index adc411d9ff..8430aed0ae 100644
--- a/components/collection/utils/useCollectionActivity.ts
+++ b/components/collection/utils/useCollectionActivity.ts
@@ -9,6 +9,11 @@ import {
   Owners,
 } from './types'
 
+export const mintInteraction = () => {
+  const { urlPrefix } = usePrefix()
+  return urlPrefix.value === 'rmrk2' ? Interaction.MINT : Interaction.MINTNFT
+}
+
 const getOffers = (nfts): Offer[] => {
   return nfts
     .map((nft) =>
@@ -97,11 +102,11 @@ const preProccessForFindingFlippers = (interactions: InteractionWithNFT[]) => {
   const NFTS: NFTMap = {}
 
   interactions.forEach((event) => {
-    if (event.interaction === Interaction.MINTNFT) {
+    if (event.interaction === mintInteraction()) {
       NFTS[event.nft.id] = {
         owner: event.caller,
         nft: event.nft,
-        latestInteraction: Interaction.MINTNFT,
+        latestInteraction: mintInteraction(),
         latestPrice: 0,
       }
     }

From e6be07b7e67774a1e32de9ed057131edfa2d6c16 Mon Sep 17 00:00:00 2001
From: daiagi <daiagi@gmail.com>
Date: Tue, 28 Mar 2023 00:40:13 +0700
Subject: [PATCH 36/55] touch up flippers profit display

---
 .../collection/activity/holdersFlippersTabs/FlipperTab.vue | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/components/collection/activity/holdersFlippersTabs/FlipperTab.vue b/components/collection/activity/holdersFlippersTabs/FlipperTab.vue
index d9c98a77a1..284d19d118 100644
--- a/components/collection/activity/holdersFlippersTabs/FlipperTab.vue
+++ b/components/collection/activity/holdersFlippersTabs/FlipperTab.vue
@@ -27,7 +27,7 @@
         <div class="is-flex is-justify-content-space-between">
           <span class="is-size-7 k-grey">{{ $t('activity.bestFlip') }}</span>
           <span :class="{ 'k-green': bestFlip > 0, 'k-red': bestFlip < 0 }">{{
-            bestFlip === 0 ? '--' : `${bestFlip.toFixed(4)}%`
+            bestFlip === 0 ? '--' : `${format(bestFlip)}%`
           }}</span>
         </div>
         <div class="is-flex is-justify-content-space-between">
@@ -74,6 +74,11 @@ const toggleNFTDetails = (flipperId: string) => {
 
 const flippers = computed(() => Object.entries(props.flippers || {}))
 
+const format = (number: number) => {
+  const isInteger = Number.isInteger(number)
+  return isInteger ? number.toString() : number.toFixed(4)
+}
+
 // 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(

From 433df89883b1ca29bc17aa26b14a8819ad36e824 Mon Sep 17 00:00:00 2001
From: daiagi <daiagi@gmail.com>
Date: Tue, 28 Mar 2023 12:43:24 +0700
Subject: [PATCH 37/55] simplify timeAgo function using date-fns

---
 components/collection/utils/timeAgo.ts | 37 ++++++++------------------
 locales/en.json                        | 10 +------
 2 files changed, 12 insertions(+), 35 deletions(-)

diff --git a/components/collection/utils/timeAgo.ts b/components/collection/utils/timeAgo.ts
index 3b1682a7b4..f55a5c881f 100644
--- a/components/collection/utils/timeAgo.ts
+++ b/components/collection/utils/timeAgo.ts
@@ -1,29 +1,14 @@
+import { formatDistanceToNow } from 'date-fns'
+
+const capitalizeFirstLetter = (str: string): string => {
+  return str.charAt(0).toUpperCase() + str.slice(1)
+}
+
 export const timeAgo = (timestamp: number): string => {
   const { $i18n } = useNuxtApp()
-  const { ago, second, seconds, minute, minutes, hour, hours, day, days } = {
-    ago: $i18n.t('time.ago'),
-    second: $i18n.t('time.second'),
-    seconds: $i18n.t('time.seconds'),
-    minute: $i18n.t('time.minute'),
-    minutes: $i18n.t('time.minutes'),
-    hour: $i18n.t('time.hour'),
-    hours: $i18n.t('time.hours'),
-    day: $i18n.t('time.day'),
-    days: $i18n.t('time.days'),
-  }
-  const now = new Date().getTime()
-  const secondsSince = Math.floor((now - timestamp) / 1000)
-  if (secondsSince < 60) {
-    return `${secondsSince} ${secondsSince !== 1 ? seconds : second} ${ago}`
-  }
-  const minutesSince = Math.floor(secondsSince / 60)
-  if (minutesSince < 60) {
-    return `${minutesSince} ${minutesSince !== 1 ? minutes : minute} ${ago}`
-  }
-  const hoursSince = Math.floor(minutesSince / 60)
-  if (hoursSince < 24) {
-    return `${hoursSince} ${hoursSince !== 1 ? hours : hour} ${ago}`
-  }
-  const daysSince = Math.floor(hoursSince / 24)
-  return `${daysSince} ${daysSince !== 1 ? days : day} ${ago}`
+  const timeSince = formatDistanceToNow(timestamp, {
+    addSuffix: true,
+    includeSeconds: true,
+  })
+  return `${capitalizeFirstLetter(timeSince)} ${$i18n.t('time.ago')}`
 }
diff --git a/locales/en.json b/locales/en.json
index 3ace97162b..16df8768f6 100644
--- a/locales/en.json
+++ b/locales/en.json
@@ -886,15 +886,7 @@
     "chart": "Chart"
   },
   "time": {
-    "ago": "Ago",
-    "second": "Second",
-    "seconds": "Seconds",
-    "minute": "Minute",
-    "minutes": "Minutes",
-    "hour": "Hour",
-    "hours": "Hours",
-    "day": "Day",
-    "days": "Days"
+    "ago": "Ago"
   },
   "activity": {
     "listed": "Listed",

From 5e97419088e810ca6561603f159aa094e86171b7 Mon Sep 17 00:00:00 2001
From: daiagi <daiagi@gmail.com>
Date: Tue, 28 Mar 2023 12:47:33 +0700
Subject: [PATCH 38/55] remove 'set'

---
 .../activity/holdersFlippersTabs/FlipperTab.vue        |  7 ++++---
 .../activity/holdersFlippersTabs/HolderTab.vue         | 10 ++++++----
 2 files changed, 10 insertions(+), 7 deletions(-)

diff --git a/components/collection/activity/holdersFlippersTabs/FlipperTab.vue b/components/collection/activity/holdersFlippersTabs/FlipperTab.vue
index 284d19d118..717698eb1d 100644
--- a/components/collection/activity/holdersFlippersTabs/FlipperTab.vue
+++ b/components/collection/activity/holdersFlippersTabs/FlipperTab.vue
@@ -62,16 +62,17 @@ import { Flippers } from '@/components/collection/utils/types'
 import ProfileLink from '@/components/rmrk/Profile/ProfileLink.vue'
 import Money from '@/components/shared/format/ChainMoney.vue'
 import { NeoIcon } from '@kodadot1/brick'
-import { set } from 'vue'
 
 import MoreNFTS from './moreNFTS.vue'
 import { timeAgo } from '@/components/collection/utils/timeAgo'
 
 const toggleNFTDetails = (flipperId: string) => {
   const isOpen = isNFTDetailsOpen.value[flipperId]
-  set(isNFTDetailsOpen.value, flipperId, !isOpen)
+  isNFTDetailsOpen.value = {
+    ...isNFTDetailsOpen.value,
+    [flipperId]: !isOpen,
+  }
 }
-
 const flippers = computed(() => Object.entries(props.flippers || {}))
 
 const format = (number: number) => {
diff --git a/components/collection/activity/holdersFlippersTabs/HolderTab.vue b/components/collection/activity/holdersFlippersTabs/HolderTab.vue
index 5128e63acb..6f1455d09d 100644
--- a/components/collection/activity/holdersFlippersTabs/HolderTab.vue
+++ b/components/collection/activity/holdersFlippersTabs/HolderTab.vue
@@ -52,14 +52,16 @@ import ProfileLink from '@/components/rmrk/Profile/ProfileLink.vue'
 import { Owners } from '@/components/collection/utils/types'
 import Money from '@/components/shared/format/ChainMoney.vue'
 import { NeoIcon } from '@kodadot1/brick'
-import { set } from 'vue'
 
 import MoreNFTS from './moreNFTS.vue'
 import { timeAgo } from '@/components/collection/utils/timeAgo'
 
-const toggleNFTDetails = (holderId: string) => {
-  const isOpen = isNFTDetailsOpen.value[holderId]
-  set(isNFTDetailsOpen.value, holderId, !isOpen)
+const toggleNFTDetails = (flipperId: string) => {
+  const isOpen = isNFTDetailsOpen.value[flipperId]
+  isNFTDetailsOpen.value = {
+    ...isNFTDetailsOpen.value,
+    [flipperId]: !isOpen,
+  }
 }
 
 const holders = computed(() => Object.entries(props.owners || {}))

From a424df15320d4c42c50da04cbbb1b46943e262d7 Mon Sep 17 00:00:00 2001
From: daiagi <daiagi@gmail.com>
Date: Tue, 28 Mar 2023 13:13:43 +0700
Subject: [PATCH 39/55] fix timeAgo

---
 components/collection/utils/timeAgo.ts | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/components/collection/utils/timeAgo.ts b/components/collection/utils/timeAgo.ts
index f55a5c881f..a4e1af1310 100644
--- a/components/collection/utils/timeAgo.ts
+++ b/components/collection/utils/timeAgo.ts
@@ -5,10 +5,16 @@ const capitalizeFirstLetter = (str: string): string => {
 }
 
 export const timeAgo = (timestamp: number): string => {
-  const { $i18n } = useNuxtApp()
   const timeSince = formatDistanceToNow(timestamp, {
     addSuffix: true,
     includeSeconds: true,
   })
-  return `${capitalizeFirstLetter(timeSince)} ${$i18n.t('time.ago')}`
+
+  // Split the string into words, capitalize the first letter of each word, and join the words back together
+  const capitalizedTimeSince = timeSince
+    .split(' ')
+    .map(capitalizeFirstLetter)
+    .join(' ')
+
+  return capitalizedTimeSince
 }

From 40bceba6a1e61a3316bedf992d0a4c2a401ace83 Mon Sep 17 00:00:00 2001
From: daiagi <daiagi@gmail.com>
Date: Tue, 28 Mar 2023 13:43:39 +0700
Subject: [PATCH 40/55] use 'has-text-grey'

---
 .../collection/activity/events/Events.vue     |  8 +----
 .../holdersFlippersTabs/FlipperTab.vue        | 29 ++++++++++---------
 .../holdersFlippersTabs/HolderTab.vue         | 19 ++++++------
 .../holdersFlippersTabs/moreNFTs/Flipper.vue  | 16 +++++-----
 .../holdersFlippersTabs/moreNFTs/Holder.vue   |  8 ++---
 5 files changed, 36 insertions(+), 44 deletions(-)

diff --git a/components/collection/activity/events/Events.vue b/components/collection/activity/events/Events.vue
index d8e95d8852..45054e8ac6 100644
--- a/components/collection/activity/events/Events.vue
+++ b/components/collection/activity/events/Events.vue
@@ -1,7 +1,7 @@
 <template>
   <div ref="eventsContainer">
     <div v-if="events.length > 0">
-      <div v-if="desktop" class="columns is-size-7 k-grey">
+      <div v-if="desktop" class="columns is-size-7 has-text-grey">
         <div class="column">
           <span>{{ $t('activity.event.item') }}</span>
         </div>
@@ -117,10 +117,4 @@ useIntersectionObserver(sentinel, handleIntersection, { threshold: 0.66 })
 
 <style scoped lang="scss">
 @import '@/styles/abstracts/variables';
-
-.k-grey {
-  @include ktheme() {
-    color: theme('k-grey');
-  }
-}
 </style>
diff --git a/components/collection/activity/holdersFlippersTabs/FlipperTab.vue b/components/collection/activity/holdersFlippersTabs/FlipperTab.vue
index 717698eb1d..16860fac0e 100644
--- a/components/collection/activity/holdersFlippersTabs/FlipperTab.vue
+++ b/components/collection/activity/holdersFlippersTabs/FlipperTab.vue
@@ -13,25 +13,33 @@
           :avatar-size="35"
           class="has-text-weight-bold" />
         <div class="is-flex is-justify-content-space-between">
-          <span class="is-size-7 k-grey">{{ $t('activity.owned') }}</span>
+          <span class="is-size-7 has-text-grey">{{
+            $t('activity.owned')
+          }}</span>
           <span>{{ owned }}</span>
         </div>
         <div class="is-flex is-justify-content-space-between">
-          <span class="is-size-7 k-grey">{{ $t('activity.totalBought') }}</span>
+          <span class="is-size-7 has-text-grey">{{
+            $t('activity.totalBought')
+          }}</span>
           <Money :value="totalBought" />
         </div>
         <div class="is-flex is-justify-content-space-between">
-          <span class="is-size-7 k-grey">{{ $t('activity.totalSold') }}</span>
+          <span class="is-size-7 has-text-grey">{{
+            $t('activity.totalSold')
+          }}</span>
           <Money :value="totalsold" />
         </div>
         <div class="is-flex is-justify-content-space-between">
-          <span class="is-size-7 k-grey">{{ $t('activity.bestFlip') }}</span>
+          <span class="is-size-7 has-text-grey">{{
+            $t('activity.bestFlip')
+          }}</span>
           <span :class="{ 'k-green': bestFlip > 0, 'k-red': bestFlip < 0 }">{{
             bestFlip === 0 ? '--' : `${format(bestFlip)}%`
           }}</span>
         </div>
         <div class="is-flex is-justify-content-space-between">
-          <span class="is-size-7 k-grey">{{
+          <span class="is-size-7 has-text-grey">{{
             $t('activity.latestActivity')
           }}</span>
           <span class="no-wrap">{{ timeAgo(latestflipTimestamp) }}</span>
@@ -104,21 +112,14 @@ const props = defineProps<{
 .hide-last-hr:last-child > hr {
   display: none;
 }
-.k-blue {
-  @include ktheme() {
-    color: theme('k-blue');
-  }
+.is-blue {
   &:hover {
     @include ktheme() {
       color: theme('k-blue-hover');
     }
   }
 }
-.k-grey {
-  @include ktheme() {
-    color: theme('k-grey');
-  }
-}
+
 .k-green {
   @include ktheme() {
     color: theme('k-green');
diff --git a/components/collection/activity/holdersFlippersTabs/HolderTab.vue b/components/collection/activity/holdersFlippersTabs/HolderTab.vue
index 6f1455d09d..651ea4c01a 100644
--- a/components/collection/activity/holdersFlippersTabs/HolderTab.vue
+++ b/components/collection/activity/holdersFlippersTabs/HolderTab.vue
@@ -10,20 +10,26 @@
           :avatar-size="35"
           class="has-text-weight-bold" />
         <div class="is-flex is-justify-content-space-between">
-          <span class="is-size-7 k-grey">{{ $t('activity.owned') }}</span>
+          <span class="is-size-7 has-text-grey">{{
+            $t('activity.owned')
+          }}</span>
           <span>{{ holdings.nftCount }}</span>
         </div>
         <div class="is-flex is-justify-content-space-between">
-          <span class="is-size-7 k-grey">{{ $t('activity.totalBought') }}</span>
+          <span class="is-size-7 has-text-grey">{{
+            $t('activity.totalBought')
+          }}</span>
           <Money :value="holdings.totalBought" />
         </div>
         <div class="is-flex is-justify-content-space-between">
-          <span class="is-size-7 k-grey">{{ $t('activity.totalSold') }}</span>
+          <span class="is-size-7 has-text-grey">{{
+            $t('activity.totalSold')
+          }}</span>
           <Money v-if="holdings.totalSold > 0" :value="holdings.totalSold" />
           <span v-else>--</span>
         </div>
         <div class="is-flex is-justify-content-space-between">
-          <span class="is-size-7 k-grey">{{ $t('activity.date') }}</span>
+          <span class="is-size-7 has-text-grey">{{ $t('activity.date') }}</span>
           <span>{{ timeAgo(holdings.lastActivityTimestamp) }}</span>
         </div>
         <div>
@@ -101,9 +107,4 @@ const props = defineProps<{
     }
   }
 }
-.k-grey {
-  @include ktheme() {
-    color: theme('k-grey');
-  }
-}
 </style>
diff --git a/components/collection/activity/holdersFlippersTabs/moreNFTs/Flipper.vue b/components/collection/activity/holdersFlippersTabs/moreNFTs/Flipper.vue
index dfdaf9040e..78f1dffcf0 100644
--- a/components/collection/activity/holdersFlippersTabs/moreNFTs/Flipper.vue
+++ b/components/collection/activity/holdersFlippersTabs/moreNFTs/Flipper.vue
@@ -18,17 +18,21 @@
       <div
         class="is-flex is-flex-direction-column is-justify-content-space-between mt-3">
         <div class="is-flex is-justify-content-space-between no-wrap">
-          <span class="is-size-7 k-grey">{{ $t('activity.profit') }}</span>
+          <span class="is-size-7 has-text-grey">{{
+            $t('activity.profit')
+          }}</span>
           <span :class="{ 'k-green': profit > 0, 'k-red': profit < 0 }">{{
             profit === 0 ? '--' : `${profit.toFixed(4)}%`
           }}</span>
         </div>
         <div class="is-flex is-justify-content-space-between no-wrap">
-          <span class="is-size-7 k-grey">{{ $t('activity.bought') }}</span>
+          <span class="is-size-7 has-text-grey">{{
+            $t('activity.bought')
+          }}</span>
           <Money :value="boughtPrice" />
         </div>
         <div class="is-flex is-justify-content-space-between no-wrap">
-          <span class="is-size-7 k-grey">{{ $t('activity.sold') }}</span>
+          <span class="is-size-7 has-text-grey">{{ $t('activity.sold') }}</span>
           <Money :value="soldPrice" />
         </div>
       </div>
@@ -81,11 +85,7 @@ const processNFTImages = async () => {
 .mr-2rem {
   margin-right: 1.5rem;
 }
-.k-grey {
-  @include ktheme() {
-    color: theme('k-grey');
-  }
-}
+
 .-mx-5 {
   margin: 0 -1.5rem !important;
 }
diff --git a/components/collection/activity/holdersFlippersTabs/moreNFTs/Holder.vue b/components/collection/activity/holdersFlippersTabs/moreNFTs/Holder.vue
index 13d07c2306..6ffafab7b1 100644
--- a/components/collection/activity/holdersFlippersTabs/moreNFTs/Holder.vue
+++ b/components/collection/activity/holdersFlippersTabs/moreNFTs/Holder.vue
@@ -16,7 +16,7 @@
       </div>
       <div class="is-flex is-flex-direction-column">
         {{ name }}
-        <span class="is-size-7 k-grey">{{
+        <span class="is-size-7 has-text-grey">{{
           timeAgo(new Date(updatedAt).getTime())
         }}</span>
       </div>
@@ -69,11 +69,7 @@ const processNFTImages = async () => {
 .mr-2rem {
   margin-right: 2rem;
 }
-.k-grey {
-  @include ktheme() {
-    color: theme('k-grey');
-  }
-}
+
 .-mx-5 {
   margin: 0 -1.5rem !important;
 }

From b6a53de433bc2a5bc1f74078af2d5b3b9abbf334 Mon Sep 17 00:00:00 2001
From: daiagi <daiagi@gmail.com>
Date: Tue, 28 Mar 2023 13:49:58 +0700
Subject: [PATCH 41/55] move useREplaceUrl to composables

---
 components/shared/BreadcrumbsFilter.vue       |  2 +-
 components/shared/filters/MobileFilter.vue    |  2 +-
 components/shared/filters/filterUtils.ts      | 56 ------------------
 .../filters/modules/EventTypeFilter.vue       |  2 +-
 .../shared/filters/modules/PriceFilter.vue    |  2 +-
 .../shared/filters/modules/StatusFilter.vue   |  2 +-
 composables/useReplaceUrl.ts                  | 57 +++++++++++++++++++
 7 files changed, 62 insertions(+), 61 deletions(-)
 create mode 100644 composables/useReplaceUrl.ts

diff --git a/components/shared/BreadcrumbsFilter.vue b/components/shared/BreadcrumbsFilter.vue
index 578a0cf934..80d142e1ed 100644
--- a/components/shared/BreadcrumbsFilter.vue
+++ b/components/shared/BreadcrumbsFilter.vue
@@ -22,7 +22,7 @@
 </template>
 
 <script lang="ts" setup>
-import useReplaceUrl from '@/components/shared/filters/filterUtils'
+import useReplaceUrl from '@/composables/useReplaceUrl'
 import NeoTag from '@/components/shared/gallery/NeoTag.vue'
 
 const route = useRoute()
diff --git a/components/shared/filters/MobileFilter.vue b/components/shared/filters/MobileFilter.vue
index 48faa48380..1ddad027bc 100644
--- a/components/shared/filters/MobileFilter.vue
+++ b/components/shared/filters/MobileFilter.vue
@@ -50,7 +50,7 @@
 
 <script lang="ts" setup>
 import { NeoButton, NeoSidebar } from '@kodadot1/brick'
-import useReplaceUrl, { is } from '@/components/shared/filters/filterUtils'
+import useReplaceUrl, { is } from '@/composables/useReplaceUrl'
 import { useExploreFiltersStore } from '@/stores/exploreFilters'
 import { useAcivityFiltersStore } from '@/stores/activityFilters'
 import { usePreferencesStore } from '@/stores/preferences'
diff --git a/components/shared/filters/filterUtils.ts b/components/shared/filters/filterUtils.ts
index 5a65b5c70c..e69de29bb2 100644
--- a/components/shared/filters/filterUtils.ts
+++ b/components/shared/filters/filterUtils.ts
@@ -1,56 +0,0 @@
-type Args = { resetPage?: boolean }
-export default function ({ resetPage }: Args = { resetPage: true }) {
-  const { $consola } = useNuxtApp()
-  const route = useRoute()
-  const router = useRouter()
-  const replaceUrl = (queryCondition: {
-    [key: string]: string | null | boolean | undefined | number
-  }) => {
-    const query = {
-      ...route.query,
-      ...replaceBooleanWithStrings(queryCondition),
-    }
-    if (resetPage) {
-      query.page = '1'
-    }
-    router
-      .replace({
-        path: String(route.path),
-        query,
-      })
-      .catch($consola.warn)
-  }
-
-  return {
-    replaceUrl,
-  }
-}
-
-function replaceBooleanWithStrings(
-  obj: Record<string, string | null | boolean | undefined | number>
-): Record<string, string | null | undefined> {
-  return Object.entries(obj).reduce((result, [key, value]) => {
-    result[key] =
-      typeof value === 'boolean' || typeof value === 'number'
-        ? String(value)
-        : value
-    return result
-  }, {})
-}
-
-export const readParam = (param) => {
-  if (param === 'undefined' || param === null || param === undefined) {
-    return undefined
-  }
-  if (param === 'true') {
-    return true
-  }
-  if (param === 'false') {
-    return false
-  }
-  return param
-}
-
-export const is = (queryParam: string | undefined) => {
-  return Boolean(readParam(queryParam))
-}
diff --git a/components/shared/filters/modules/EventTypeFilter.vue b/components/shared/filters/modules/EventTypeFilter.vue
index f4d284cdba..de63c31fe8 100644
--- a/components/shared/filters/modules/EventTypeFilter.vue
+++ b/components/shared/filters/modules/EventTypeFilter.vue
@@ -35,7 +35,7 @@
 </template>
 
 <script lang="ts" setup>
-import useReplaceUrl from '../filterUtils'
+import useReplaceUrl from '@/composables/useReplaceUrl'
 import { NeoCheckbox } from '@kodadot1/brick'
 import { useAcivityFiltersStore } from '@/stores/activityFilters'
 
diff --git a/components/shared/filters/modules/PriceFilter.vue b/components/shared/filters/modules/PriceFilter.vue
index 5d3a9247ef..02620bf11f 100644
--- a/components/shared/filters/modules/PriceFilter.vue
+++ b/components/shared/filters/modules/PriceFilter.vue
@@ -67,7 +67,7 @@
 <script lang="ts" setup>
 import { NeoButton } from '@kodadot1/brick'
 import { fromDecimals, toDecimals } from '@/utils/math'
-import useReplaceUrl from '../filterUtils'
+import useReplaceUrl from '@/composables/useReplaceUrl'
 import { useExploreFiltersStore } from '@/stores/exploreFilters'
 
 const exploreFiltersStore = useExploreFiltersStore()
diff --git a/components/shared/filters/modules/StatusFilter.vue b/components/shared/filters/modules/StatusFilter.vue
index 77fc6af952..88a3117cde 100644
--- a/components/shared/filters/modules/StatusFilter.vue
+++ b/components/shared/filters/modules/StatusFilter.vue
@@ -28,7 +28,7 @@
 </template>
 
 <script lang="ts" setup>
-import useReplaceUrl from '../filterUtils'
+import useReplaceUrl from '@/composables/useReplaceUrl'
 import { NeoCheckbox } from '@kodadot1/brick'
 import { useExploreFiltersStore } from '@/stores/exploreFilters'
 
diff --git a/composables/useReplaceUrl.ts b/composables/useReplaceUrl.ts
new file mode 100644
index 0000000000..f43d7ad4d8
--- /dev/null
+++ b/composables/useReplaceUrl.ts
@@ -0,0 +1,57 @@
+export const replaceBooleanWithStrings = (
+  obj: Record<string, string | null | boolean | undefined | number>
+): Record<string, string | null | undefined> => {
+  return Object.entries(obj).reduce((result, [key, value]) => {
+    result[key] =
+      typeof value === 'boolean' || typeof value === 'number'
+        ? String(value)
+        : value
+    return result
+  }, {})
+}
+
+export const readParam = (param) => {
+  if (param === 'undefined' || param === null || param === undefined) {
+    return undefined
+  }
+  if (param === 'true') {
+    return true
+  }
+  if (param === 'false') {
+    return false
+  }
+  return param
+}
+
+export const is = (queryParam: string | undefined) => {
+  return Boolean(readParam(queryParam))
+}
+
+export default function (
+  { resetPage }: { resetPage?: boolean } = { resetPage: true }
+) {
+  const { $consola } = useNuxtApp()
+  const route = useRoute()
+  const router = useRouter()
+  const replaceUrl = (queryCondition: {
+    [key: string]: string | null | boolean | undefined | number
+  }) => {
+    const query = {
+      ...route.query,
+      ...replaceBooleanWithStrings(queryCondition),
+    }
+    if (resetPage) {
+      query.page = '1'
+    }
+    router
+      .replace({
+        path: String(route.path),
+        query,
+      })
+      .catch($consola.warn)
+  }
+
+  return {
+    replaceUrl,
+  }
+}

From 5489b24982ae94aa482da45a2bde63ffaab40c14 Mon Sep 17 00:00:00 2001
From: daiagi <daiagi@gmail.com>
Date: Tue, 28 Mar 2023 14:35:29 +0700
Subject: [PATCH 42/55] remove duplicate css, renaming

---
 .../collection/activity/OwnerInsights.vue     |  6 +-
 .../collection/activity/events/Events.vue     |  6 +-
 .../events/eventRow/EventRowDesktop.vue       | 29 ---------
 .../events/eventRow/EventRowTablet.vue        | 25 --------
 .../activity/events/eventRow/common.ts        |  2 +-
 .../FlipperTab.vue                            | 39 +++--------
 .../HolderTab.vue                             | 15 +----
 .../NFTSDetailsDropdown}/Flipper.vue          | 30 +++------
 .../NFTSDetailsDropdown}/Holder.vue           |  9 ---
 .../NFTsDetaislDropdown.vue}                  |  4 +-
 .../activity/ownerInsightsTabs/format.ts      |  4 ++
 components/collection/activity/utils.ts       |  2 +-
 styles/global.scss                            | 64 +++++++++++++++++++
 13 files changed, 95 insertions(+), 140 deletions(-)
 rename components/collection/activity/{holdersFlippersTabs => ownerInsightsTabs}/FlipperTab.vue (82%)
 rename components/collection/activity/{holdersFlippersTabs => ownerInsightsTabs}/HolderTab.vue (91%)
 rename components/collection/activity/{holdersFlippersTabs/moreNFTs => ownerInsightsTabs/NFTSDetailsDropdown}/Flipper.vue (84%)
 rename components/collection/activity/{holdersFlippersTabs/moreNFTs => ownerInsightsTabs/NFTSDetailsDropdown}/Holder.vue (92%)
 rename components/collection/activity/{holdersFlippersTabs/moreNFTS.vue => ownerInsightsTabs/NFTsDetaislDropdown.vue} (80%)
 create mode 100644 components/collection/activity/ownerInsightsTabs/format.ts

diff --git a/components/collection/activity/OwnerInsights.vue b/components/collection/activity/OwnerInsights.vue
index 62e4e8718c..803d3e9be4 100644
--- a/components/collection/activity/OwnerInsights.vue
+++ b/components/collection/activity/OwnerInsights.vue
@@ -22,8 +22,8 @@
 </template>
 
 <script setup lang="ts">
-import HoldersTab from './holdersFlippersTabs/HolderTab.vue'
-import FlippersTab from './holdersFlippersTabs/FlipperTab.vue'
+import HoldersTab from './ownerInsightsTabs/HolderTab.vue'
+import FlippersTab from './ownerInsightsTabs/FlipperTab.vue'
 import { Flippers, Owners } from '@/components/collection/utils/types'
 
 enum Tabs {
@@ -39,8 +39,6 @@ const activeTab = ref(Tabs.holders)
 </script>
 
 <style lang="scss" scoped>
-@import '@/styles/abstracts/variables';
-
 .fixed-height {
   height: 350px;
 }
diff --git a/components/collection/activity/events/Events.vue b/components/collection/activity/events/Events.vue
index 45054e8ac6..a7e1a42cb1 100644
--- a/components/collection/activity/events/Events.vue
+++ b/components/collection/activity/events/Events.vue
@@ -40,7 +40,7 @@ import {
 import EventRow from './EventRow.vue'
 import { useIntersectionObserver } from '@vueuse/core'
 import { Interaction } from '@kodadot1/minimark'
-import { is } from '@/components/shared/filters/filterUtils'
+import { is } from '@/composables/useReplaceUrl'
 import { isAnyActivityFilterActive } from '../utils'
 import { useResizeObserver } from '@vueuse/core'
 import { mintInteraction } from '@/components/collection/utils/useCollectionActivity'
@@ -114,7 +114,3 @@ const handleIntersection = (entries: IntersectionObserverEntry[]) => {
 const sentinel = ref<HTMLDivElement | null>(null)
 useIntersectionObserver(sentinel, handleIntersection, { threshold: 0.66 })
 </script>
-
-<style scoped lang="scss">
-@import '@/styles/abstracts/variables';
-</style>
diff --git a/components/collection/activity/events/eventRow/EventRowDesktop.vue b/components/collection/activity/events/eventRow/EventRowDesktop.vue
index f75482f2a7..15982677ab 100644
--- a/components/collection/activity/events/eventRow/EventRowDesktop.vue
+++ b/components/collection/activity/events/eventRow/EventRowDesktop.vue
@@ -123,8 +123,6 @@ const getAvatar = async () => {
 </script>
 
 <style scoped lang="scss">
-@import '@/styles/abstracts/variables';
-
 .fixed-width {
   width: 66px;
 }
@@ -139,34 +137,7 @@ const getAvatar = async () => {
   height: 50px !important;
   max-width: none !important;
 }
-.k-pink {
-  @include ktheme() {
-    background-color: theme('k-pink');
-  }
-}
-.k-greenaccent {
-  @include ktheme() {
-    background-color: theme('k-greenaccent');
-  }
-}
 
-.k-yellow {
-  @include ktheme() {
-    background-color: theme('k-yellow');
-  }
-}
-
-.background-color {
-  @include ktheme() {
-    background-color: theme('background-color');
-  }
-}
-
-.k-blueaccent {
-  @include ktheme() {
-    background-color: theme('k-blueaccent');
-  }
-}
 .elipsis {
   text-overflow: ellipsis;
 }
diff --git a/components/collection/activity/events/eventRow/EventRowTablet.vue b/components/collection/activity/events/eventRow/EventRowTablet.vue
index c079673a9c..7eac2a715c 100644
--- a/components/collection/activity/events/eventRow/EventRowTablet.vue
+++ b/components/collection/activity/events/eventRow/EventRowTablet.vue
@@ -115,8 +115,6 @@ const getAvatar = async () => {
 </script>
 
 <style scoped lang="scss">
-@import '@/styles/abstracts/variables';
-
 .fixed-width {
   width: 66px;
 }
@@ -131,27 +129,4 @@ const getAvatar = async () => {
 .gap {
   gap: 1rem;
 }
-.k-pink {
-  @include ktheme() {
-    background-color: theme('k-pink');
-  }
-}
-
-.k-yellow {
-  @include ktheme() {
-    background-color: theme('k-yellow');
-  }
-}
-
-.background-color {
-  @include ktheme() {
-    background-color: theme('background-color');
-  }
-}
-
-.k-blueaccent {
-  @include ktheme() {
-    background-color: theme('k-blueaccent');
-  }
-}
 </style>
diff --git a/components/collection/activity/events/eventRow/common.ts b/components/collection/activity/events/eventRow/common.ts
index bfc376c15c..f35fcf7be7 100644
--- a/components/collection/activity/events/eventRow/common.ts
+++ b/components/collection/activity/events/eventRow/common.ts
@@ -25,7 +25,7 @@ export const getInteractionColor = (interaction: string) =>
     [Interaction.LIST]: 'k-blueaccent',
     [Interaction.BUY]: 'k-pink',
     [OfferInteraction]: 'k-greenaccent',
-    [Interaction.SEND]: 'background-color',
+    [Interaction.SEND]: 'theme-background-color',
   }[interaction])
 
 export const getAmount = (
diff --git a/components/collection/activity/holdersFlippersTabs/FlipperTab.vue b/components/collection/activity/ownerInsightsTabs/FlipperTab.vue
similarity index 82%
rename from components/collection/activity/holdersFlippersTabs/FlipperTab.vue
rename to components/collection/activity/ownerInsightsTabs/FlipperTab.vue
index 16860fac0e..5093c16703 100644
--- a/components/collection/activity/holdersFlippersTabs/FlipperTab.vue
+++ b/components/collection/activity/ownerInsightsTabs/FlipperTab.vue
@@ -34,9 +34,13 @@
           <span class="is-size-7 has-text-grey">{{
             $t('activity.bestFlip')
           }}</span>
-          <span :class="{ 'k-green': bestFlip > 0, 'k-red': bestFlip < 0 }">{{
-            bestFlip === 0 ? '--' : `${format(bestFlip)}%`
-          }}</span>
+          <span
+            :class="{
+              'has-text-k-green': bestFlip > 0,
+              'has-text-k-red': bestFlip < 0,
+            }"
+            >{{ bestFlip === 0 ? '--' : `${format(bestFlip)}%` }}</span
+          >
         </div>
         <div class="is-flex is-justify-content-space-between">
           <span class="is-size-7 has-text-grey">{{
@@ -46,7 +50,7 @@
         </div>
         <div>
           <div
-            class="is-size-7 k-blue is-clickable"
+            class="is-size-7 has-text-k-blue is-clickable"
             @click="toggleNFTDetails(flipperId)">
             {{ $t('activity.nftDetails') }}
             <NeoIcon
@@ -70,8 +74,9 @@ import { Flippers } from '@/components/collection/utils/types'
 import ProfileLink from '@/components/rmrk/Profile/ProfileLink.vue'
 import Money from '@/components/shared/format/ChainMoney.vue'
 import { NeoIcon } from '@kodadot1/brick'
+import format from './format'
 
-import MoreNFTS from './moreNFTS.vue'
+import MoreNFTS from './NFTsDetaislDropdown.vue'
 import { timeAgo } from '@/components/collection/utils/timeAgo'
 
 const toggleNFTDetails = (flipperId: string) => {
@@ -83,11 +88,6 @@ const toggleNFTDetails = (flipperId: string) => {
 }
 const flippers = computed(() => Object.entries(props.flippers || {}))
 
-const format = (number: number) => {
-  const isInteger = Number.isInteger(number)
-  return isInteger ? number.toString() : number.toFixed(4)
-}
-
 // 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(
@@ -105,29 +105,10 @@ const props = defineProps<{
 </script>
 
 <style lang="scss" scoped>
-@import '@/styles/abstracts/variables';
 .gap {
   gap: 0.5rem;
 }
 .hide-last-hr:last-child > hr {
   display: none;
 }
-.is-blue {
-  &:hover {
-    @include ktheme() {
-      color: theme('k-blue-hover');
-    }
-  }
-}
-
-.k-green {
-  @include ktheme() {
-    color: theme('k-green');
-  }
-}
-.k-red {
-  @include ktheme() {
-    color: theme('k-red');
-  }
-}
 </style>
diff --git a/components/collection/activity/holdersFlippersTabs/HolderTab.vue b/components/collection/activity/ownerInsightsTabs/HolderTab.vue
similarity index 91%
rename from components/collection/activity/holdersFlippersTabs/HolderTab.vue
rename to components/collection/activity/ownerInsightsTabs/HolderTab.vue
index 651ea4c01a..26dd38da3b 100644
--- a/components/collection/activity/holdersFlippersTabs/HolderTab.vue
+++ b/components/collection/activity/ownerInsightsTabs/HolderTab.vue
@@ -34,7 +34,7 @@
         </div>
         <div>
           <div
-            class="is-size-7 k-blue is-clickable"
+            class="is-size-7 has-text-k-blue is-clickable"
             @click="toggleNFTDetails(holderId)">
             {{ $t('activity.nftDetails') }}
             <NeoIcon
@@ -59,7 +59,7 @@ import { Owners } from '@/components/collection/utils/types'
 import Money from '@/components/shared/format/ChainMoney.vue'
 import { NeoIcon } from '@kodadot1/brick'
 
-import MoreNFTS from './moreNFTS.vue'
+import MoreNFTS from './NFTsDetaislDropdown.vue'
 import { timeAgo } from '@/components/collection/utils/timeAgo'
 
 const toggleNFTDetails = (flipperId: string) => {
@@ -90,21 +90,10 @@ const props = defineProps<{
 </script>
 
 <style lang="scss" scoped>
-@import '@/styles/abstracts/variables';
 .gap {
   gap: 0.5rem;
 }
 .hide-last-hr:last-child > hr {
   display: none;
 }
-.k-blue {
-  @include ktheme() {
-    color: theme('k-blue');
-  }
-  &:hover {
-    @include ktheme() {
-      color: theme('k-blue-hover');
-    }
-  }
-}
 </style>
diff --git a/components/collection/activity/holdersFlippersTabs/moreNFTs/Flipper.vue b/components/collection/activity/ownerInsightsTabs/NFTSDetailsDropdown/Flipper.vue
similarity index 84%
rename from components/collection/activity/holdersFlippersTabs/moreNFTs/Flipper.vue
rename to components/collection/activity/ownerInsightsTabs/NFTSDetailsDropdown/Flipper.vue
index 78f1dffcf0..ae2d2425d0 100644
--- a/components/collection/activity/holdersFlippersTabs/moreNFTs/Flipper.vue
+++ b/components/collection/activity/ownerInsightsTabs/NFTSDetailsDropdown/Flipper.vue
@@ -21,9 +21,13 @@
           <span class="is-size-7 has-text-grey">{{
             $t('activity.profit')
           }}</span>
-          <span :class="{ 'k-green': profit > 0, 'k-red': profit < 0 }">{{
-            profit === 0 ? '--' : `${profit.toFixed(4)}%`
-          }}</span>
+          <span
+            :class="{
+              'has-text-k-green': profit > 0,
+              'has-text-k-red': profit < 0,
+            }"
+            >{{ profit === 0 ? '--' : `${format(profit)}%` }}</span
+          >
         </div>
         <div class="is-flex is-justify-content-space-between no-wrap">
           <span class="is-size-7 has-text-grey">{{
@@ -46,6 +50,7 @@ import { processSingleMetadata } from '@/utils/cachingStrategy'
 import { NFTMetadata } from '@/components/rmrk/service/scheme'
 import { FlipEvent } from '@/components/collection/utils/types'
 import Money from '@/components/shared/format/ChainMoney.vue'
+import format from '../format'
 
 const props = defineProps<{
   flips: (FlipEvent & { avatar?: string })[]
@@ -80,8 +85,6 @@ const processNFTImages = async () => {
 </script>
 
 <style scoped lang="scss">
-@import '@/styles/abstracts/variables';
-
 .mr-2rem {
   margin-right: 1.5rem;
 }
@@ -89,21 +92,4 @@ const processNFTImages = async () => {
 .-mx-5 {
   margin: 0 -1.5rem !important;
 }
-.k-green {
-  @include ktheme() {
-    color: theme('k-green');
-  }
-}
-.k-red {
-  @include ktheme() {
-    color: theme('k-red');
-  }
-}
-.is-hoverable {
-  @include ktheme() {
-    &:hover {
-      background-color: theme('k-accentlight2');
-    }
-  }
-}
 </style>
diff --git a/components/collection/activity/holdersFlippersTabs/moreNFTs/Holder.vue b/components/collection/activity/ownerInsightsTabs/NFTSDetailsDropdown/Holder.vue
similarity index 92%
rename from components/collection/activity/holdersFlippersTabs/moreNFTs/Holder.vue
rename to components/collection/activity/ownerInsightsTabs/NFTSDetailsDropdown/Holder.vue
index 6ffafab7b1..ad57930481 100644
--- a/components/collection/activity/holdersFlippersTabs/moreNFTs/Holder.vue
+++ b/components/collection/activity/ownerInsightsTabs/NFTSDetailsDropdown/Holder.vue
@@ -64,8 +64,6 @@ const processNFTImages = async () => {
 </script>
 
 <style scoped lang="scss">
-@import '@/styles/abstracts/variables';
-
 .mr-2rem {
   margin-right: 2rem;
 }
@@ -73,11 +71,4 @@ const processNFTImages = async () => {
 .-mx-5 {
   margin: 0 -1.5rem !important;
 }
-.is-hoverable {
-  @include ktheme() {
-    &:hover {
-      background-color: theme('k-accentlight2');
-    }
-  }
-}
 </style>
diff --git a/components/collection/activity/holdersFlippersTabs/moreNFTS.vue b/components/collection/activity/ownerInsightsTabs/NFTsDetaislDropdown.vue
similarity index 80%
rename from components/collection/activity/holdersFlippersTabs/moreNFTS.vue
rename to components/collection/activity/ownerInsightsTabs/NFTsDetaislDropdown.vue
index 82522cf62a..d46c927ecd 100644
--- a/components/collection/activity/holdersFlippersTabs/moreNFTS.vue
+++ b/components/collection/activity/ownerInsightsTabs/NFTsDetaislDropdown.vue
@@ -10,8 +10,8 @@ import {
   FlipEvent,
   NFTExcludingEvents,
 } from '@/components/collection/utils/types'
-import Flipper from './moreNFTs/Flipper.vue'
-import Holder from './moreNFTs/Holder.vue'
+import Flipper from './NFTSDetailsDropdown/Flipper.vue'
+import Holder from './NFTSDetailsDropdown/Holder.vue'
 
 withDefaults(
   defineProps<{
diff --git a/components/collection/activity/ownerInsightsTabs/format.ts b/components/collection/activity/ownerInsightsTabs/format.ts
new file mode 100644
index 0000000000..72899c976e
--- /dev/null
+++ b/components/collection/activity/ownerInsightsTabs/format.ts
@@ -0,0 +1,4 @@
+export default function (number: number) {
+  const isInteger = Number.isInteger(number)
+  return isInteger ? number.toString() : number.toFixed(4)
+}
diff --git a/components/collection/activity/utils.ts b/components/collection/activity/utils.ts
index 844c90682f..06b39bba72 100644
--- a/components/collection/activity/utils.ts
+++ b/components/collection/activity/utils.ts
@@ -1,4 +1,4 @@
-import { readParam } from '@/components/shared/filters/filterUtils'
+import { readParam } from '@/composables/useReplaceUrl'
 
 export type DataPoint = {
   timestamp: number
diff --git a/styles/global.scss b/styles/global.scss
index 0588759815..3e877f51da 100644
--- a/styles/global.scss
+++ b/styles/global.scss
@@ -302,3 +302,67 @@ hr {
     border: 1px solid theme('border-color')
   }
 }
+
+
+//colors
+
+.has-text-k-green {
+  @include ktheme() {
+    color: theme('k-green');
+  }
+}
+.has-text-k-red {
+  @include ktheme() {
+    color: theme('k-red');
+  }
+}
+
+.has-text-k-blue {
+  @include ktheme() {
+    color: theme('k-blue');
+  }
+  &:hover {
+    @include ktheme() {
+      color: theme('k-blue-hover');
+    }
+  }
+}
+
+.k-pink {
+  @include ktheme() {
+    background-color: theme('k-pink');
+  }
+}
+.k-greenaccent {
+  @include ktheme() {
+    background-color: theme('k-greenaccent');
+  }
+}
+
+.k-yellow {
+  @include ktheme() {
+    background-color: theme('k-yellow');
+  }
+}
+.theme-background-color {
+  @include ktheme() {
+    background-color: theme('background-color');
+  }
+}
+
+.k-blueaccent {
+  @include ktheme() {
+    background-color: theme('k-blueaccent');
+  }
+}
+
+//hover
+
+.is-hoverable {
+  @include ktheme() {
+    &:hover {
+      background-color: theme('k-accentlight2');
+    }
+  }
+}
+

From e87fc368bd3fb834f87c8471d3e2fd73dfaefbe8 Mon Sep 17 00:00:00 2001
From: daiagi <daiagi@gmail.com>
Date: Tue, 28 Mar 2023 14:42:36 +0700
Subject: [PATCH 43/55] move function to utils, rename Chart to ActivityChart

---
 components/collection/activity/Activity.vue        |  2 +-
 .../activity/{Chart.vue => ActivityChart.vue}      | 13 +------------
 components/collection/activity/utils.ts            | 14 ++++++++++++++
 3 files changed, 16 insertions(+), 13 deletions(-)
 rename components/collection/activity/{Chart.vue => ActivityChart.vue} (78%)

diff --git a/components/collection/activity/Activity.vue b/components/collection/activity/Activity.vue
index 93b3cc80d2..fbf5c7918c 100644
--- a/components/collection/activity/Activity.vue
+++ b/components/collection/activity/Activity.vue
@@ -28,7 +28,7 @@
 </template>
 
 <script setup lang="ts">
-import ActivityChart from './Chart.vue'
+import ActivityChart from './ActivityChart.vue'
 import OwnerInsights from './OwnerInsights.vue'
 import Events from './events/Events.vue'
 import BreadcrumbsFilter from '@/components/shared/BreadcrumbsFilter.vue'
diff --git a/components/collection/activity/Chart.vue b/components/collection/activity/ActivityChart.vue
similarity index 78%
rename from components/collection/activity/Chart.vue
rename to components/collection/activity/ActivityChart.vue
index d1355872b7..cb84a30a99 100644
--- a/components/collection/activity/Chart.vue
+++ b/components/collection/activity/ActivityChart.vue
@@ -9,7 +9,7 @@
 import { ActivityInteraction } from '@/components/rmrk/service/scheme'
 import { Interaction } from '@kodadot1/minimark'
 import PriceChart from '@/components/chart/PriceChart.vue'
-import { DataPoint, bin } from './utils'
+import { bin, displayValue, sortAsc, toDataPoint } from './utils'
 
 const props = withDefaults(
   defineProps<{
@@ -20,17 +20,6 @@ const props = withDefaults(
   }
 )
 
-const toDataPoint = (e: ActivityInteraction): DataPoint => ({
-  timestamp: e.timestamp,
-  value: parseInt(e.meta),
-})
-
-const sortAsc = (events: DataPoint[]) =>
-  events.sort((a, b) => a.timestamp - b.timestamp)
-
-const displayValue = (val: number) =>
-  Number((val * Math.pow(10, -12)).toFixed(4))
-
 const buyEvents = computed(() =>
   sortAsc(
     props.events
diff --git a/components/collection/activity/utils.ts b/components/collection/activity/utils.ts
index 06b39bba72..a19f428742 100644
--- a/components/collection/activity/utils.ts
+++ b/components/collection/activity/utils.ts
@@ -12,6 +12,20 @@ export interface BinSize {
   minutes?: number
 }
 
+export const toDataPoint = (e: {
+  timestamp: number
+  meta: string
+}): DataPoint => ({
+  timestamp: e.timestamp,
+  value: parseInt(e.meta),
+})
+
+export const sortAsc = (events: DataPoint[]) =>
+  events.sort((a, b) => a.timestamp - b.timestamp)
+
+export const displayValue = (val: number) =>
+  Number((val * Math.pow(10, -12)).toFixed(4))
+
 const binSizeToMillis = (binSize: BinSize): number => {
   const millisInMinute = 60 * 1000
   const millisInHour = 60 * millisInMinute

From 3216601be7cdb3cc66a47e73a01db0aca20238f8 Mon Sep 17 00:00:00 2001
From: daiagi <daiagi@gmail.com>
Date: Tue, 28 Mar 2023 15:06:27 +0700
Subject: [PATCH 44/55] extract some function out of getOwners, getFlippers

---
 .../collection/utils/useCollectionActivity.ts | 106 +++++++++++-------
 1 file changed, 63 insertions(+), 43 deletions(-)

diff --git a/components/collection/utils/useCollectionActivity.ts b/components/collection/utils/useCollectionActivity.ts
index 8430aed0ae..92630ea4f5 100644
--- a/components/collection/utils/useCollectionActivity.ts
+++ b/components/collection/utils/useCollectionActivity.ts
@@ -9,11 +9,54 @@ import {
   Owners,
 } from './types'
 
+const flipperInitialValue = {
+  flips: [],
+  bestFlip: 0,
+  latestflipTimestamp: 0,
+  owned: 0,
+  totalBought: 0,
+  totalsold: 0,
+}
+
 export const mintInteraction = () => {
   const { urlPrefix } = usePrefix()
   return urlPrefix.value === 'rmrk2' ? Interaction.MINT : Interaction.MINTNFT
 }
 
+const newOwnerEntry = (lastActivityTimestamp, nft) => ({
+  nftCount: 1,
+  totalBought: 0,
+  totalSold: 0,
+  lastActivityTimestamp,
+  nfts: [nft],
+})
+const updateOwnerWithNewNft = ({
+  owner,
+  latestInteraction,
+  lastestTimeStamp,
+  nft,
+}) => {
+  owner.nftCount++
+  owner.totalBought += parseInt(latestInteraction.meta)
+  owner.lastActivityTimestamp =
+    lastestTimeStamp > owner.lastActivityTimestamp
+      ? lastestTimeStamp
+      : owner.lastActivityTimestamp
+  owner.nfts = [...owner.nfts, nft]
+  return owner
+}
+
+const summerizeFlips = (flips) => {
+  return {
+    owned: flips.length,
+    totalBought: sum(flips.map((flip) => flip.boughtPrice)),
+    totalsold: sum(flips.map((flip) => flip.soldPrice)),
+    bestFlip: Math.max(...flips.map((flip) => flip.profit)),
+    latestflipTimestamp: Math.max(...flips.map((flip) => flip.sellTimeStamp)),
+    flips,
+  }
+}
+
 const getOffers = (nfts): Offer[] => {
   return nfts
     .map((nft) =>
@@ -50,23 +93,19 @@ const getOwners = (nfts) => {
       const owner = owners[nft.currentOwner]
       if (owner) {
         // update entry
-        owner.nftCount++
-        owner.totalBought += parseInt(latestInteraction.meta)
-        owner.lastActivityTimestamp =
-          lastestTimeStamp > owner.lastActivityTimestamp
-            ? lastestTimeStamp
-            : owner.lastActivityTimestamp
-        owner.nfts = [...owner.nfts, nftExcludingEvents]
+        owners[nft.currentOwner] = updateOwnerWithNewNft({
+          owner,
+          latestInteraction,
+          lastestTimeStamp,
+          nft,
+        })
         return
       }
       // new owner entry
-      owners[nft.currentOwner] = {
-        nftCount: 1,
-        totalBought: parseInt(latestInteraction.meta),
-        totalSold: 0,
-        lastActivityTimestamp: lastestTimeStamp,
-        nfts: [nftExcludingEvents],
-      }
+      owners[nft.currentOwner] = newOwnerEntry(
+        lastestTimeStamp,
+        nftExcludingEvents
+      )
       return
     }
 
@@ -77,22 +116,17 @@ const getOwners = (nfts) => {
 
     if (owner) {
       // update entry
-      owner.nftCount++
-      owner.lastActivityTimestamp =
-        mintTimeStamp > owner.lastActivityTimestamp
-          ? mintTimeStamp
-          : owner.lastActivityTimestamp
-      owner.nfts = [...owner.nfts, nftExcludingEvents]
+
+      owners[nft.currentOwner] = updateOwnerWithNewNft({
+        owner,
+        latestInteraction: mintInteraction,
+        lastestTimeStamp: mintTimeStamp,
+        nft,
+      })
       return
     }
     // new owner entry
-    owners[nft.currentOwner] = {
-      nftCount: 1,
-      totalBought: 0,
-      totalSold: 0,
-      lastActivityTimestamp: mintTimeStamp,
-      nfts: [nftExcludingEvents],
-    }
+    owners[nft.currentOwner] = newOwnerEntry(mintTimeStamp, nftExcludingEvents)
   })
   return owners
 }
@@ -145,14 +179,7 @@ const getFlippers = (interactions: InteractionWithNFT[]): Flippers => {
         sellTimeStamp: new Date(interaction.timestamp).getTime(),
       }
       if (flippers[PreviousNFTState.owner] === undefined) {
-        flippers[PreviousNFTState.owner] = {
-          flips: [],
-          bestFlip: 0,
-          latestflipTimestamp: 0,
-          owned: 0,
-          totalBought: 0,
-          totalsold: 0,
-        }
+        flippers[PreviousNFTState.owner] = flipperInitialValue
       }
 
       //nft has been bought from previous owner -> previous owner is the flipper
@@ -183,14 +210,7 @@ const getFlippers = (interactions: InteractionWithNFT[]): Flippers => {
   })
 
   Object.entries(flippers).forEach(([flipperId, { flips }]) => {
-    flippers[flipperId] = {
-      owned: flips.length,
-      totalBought: sum(flips.map((flip) => flip.boughtPrice)),
-      totalsold: sum(flips.map((flip) => flip.soldPrice)),
-      bestFlip: Math.max(...flips.map((flip) => flip.profit)),
-      latestflipTimestamp: Math.max(...flips.map((flip) => flip.sellTimeStamp)),
-      flips,
-    }
+    flippers[flipperId] = summerizeFlips(flips)
   })
   return flippers
 }

From 7e22d7fec1bb7eb2c5bb3d5a1bd6b9d2c67f4f1e Mon Sep 17 00:00:00 2001
From: daiagi <daiagi@gmail.com>
Date: Tue, 28 Mar 2023 15:20:03 +0700
Subject: [PATCH 45/55] remove few lines from getFlippers

---
 components/collection/utils/types.ts          | 14 ++++++++------
 .../collection/utils/useCollectionActivity.ts | 19 ++++++++++++-------
 2 files changed, 20 insertions(+), 13 deletions(-)

diff --git a/components/collection/utils/types.ts b/components/collection/utils/types.ts
index 239eabd1e3..369fed46bb 100644
--- a/components/collection/utils/types.ts
+++ b/components/collection/utils/types.ts
@@ -50,13 +50,15 @@ export type Offer = {
   interaction: string
   nft: NFTExcludingEvents
 }
+
+export type NFTHistoryState = {
+  owner: string
+  nft: NFTExcludingEvents
+  latestInteraction: Interaction
+  latestPrice: number
+}
 export type NFTMap = {
-  [nftId: string]: {
-    owner: string
-    nft: NFTExcludingEvents
-    latestInteraction: Interaction
-    latestPrice: number
-  }
+  [nftId: string]: NFTHistoryState
 }
 export type FlipEvent = {
   nft: NFTExcludingEvents
diff --git a/components/collection/utils/useCollectionActivity.ts b/components/collection/utils/useCollectionActivity.ts
index 92630ea4f5..ac9671d61d 100644
--- a/components/collection/utils/useCollectionActivity.ts
+++ b/components/collection/utils/useCollectionActivity.ts
@@ -3,6 +3,7 @@ import { Interaction } from '@kodadot1/minimark'
 import {
   Flippers,
   InteractionWithNFT,
+  NFTHistoryState,
   NFTMap,
   Offer,
   OfferInteraction,
@@ -57,6 +58,11 @@ const summerizeFlips = (flips) => {
   }
 }
 
+const getLatestPrice = (previousNFTState: NFTHistoryState) =>
+  previousNFTState.latestInteraction === Interaction.BUY
+    ? previousNFTState.latestPrice
+    : 0
+
 const getOffers = (nfts): Offer[] => {
   return nfts
     .map((nft) =>
@@ -184,11 +190,7 @@ const getFlippers = (interactions: InteractionWithNFT[]): Flippers => {
 
       //nft has been bought from previous owner -> previous owner is the flipper
 
-      const flipperHistory = flippers[PreviousNFTState.owner].flips
-      const boughtPrice =
-        PreviousNFTState.latestInteraction === Interaction.BUY
-          ? PreviousNFTState.latestPrice
-          : 0
+      const boughtPrice = getLatestPrice(PreviousNFTState)
       const profit =
         boughtPrice > 0 ? (baseInfo.soldPrice / boughtPrice) * 100 : 0
       const thisFlip = {
@@ -197,13 +199,16 @@ const getFlippers = (interactions: InteractionWithNFT[]): Flippers => {
         profit,
       }
 
-      flippers[PreviousNFTState.owner].flips = [...flipperHistory, thisFlip]
+      flippers[PreviousNFTState.owner].flips = [
+        ...flippers[PreviousNFTState.owner].flips,
+        thisFlip,
+      ]
 
       // update last state of NFT
       NFTS[nftId] = {
         ...PreviousNFTState,
         owner: interaction.caller,
-        latestInteraction: interaction.interaction,
+        latestInteraction: Interaction.BUY,
         latestPrice: parseInt(interaction.meta),
       }
     }

From ccd9b10019db451c223e7ee8abacd42e54651c6b Mon Sep 17 00:00:00 2001
From: daiagi <daiagi@gmail.com>
Date: Tue, 28 Mar 2023 15:33:39 +0700
Subject: [PATCH 46/55] remove some more lines from getOwners

---
 .../collection/utils/useCollectionActivity.ts | 49 +++++++------------
 1 file changed, 19 insertions(+), 30 deletions(-)

diff --git a/components/collection/utils/useCollectionActivity.ts b/components/collection/utils/useCollectionActivity.ts
index ac9671d61d..932d54d35d 100644
--- a/components/collection/utils/useCollectionActivity.ts
+++ b/components/collection/utils/useCollectionActivity.ts
@@ -83,6 +83,7 @@ const getOwners = (nfts) => {
   nfts.forEach((nft) => {
     const interactions = nft.events.map((e) => e.interaction)
     const { events, ...nftExcludingEvents } = nft
+    const owner = owners[nft.currentOwner]
 
     if (interactions.includes(Interaction.CONSUME)) {
       // no owner
@@ -96,43 +97,31 @@ const getOwners = (nfts) => {
       const latestInteraction = events[events.length - 1]
       const lastestTimeStamp = new Date(latestInteraction.timestamp).getTime()
 
-      const owner = owners[nft.currentOwner]
-      if (owner) {
-        // update entry
-        owners[nft.currentOwner] = updateOwnerWithNewNft({
-          owner,
-          latestInteraction,
-          lastestTimeStamp,
-          nft,
-        })
-        return
-      }
-      // new owner entry
-      owners[nft.currentOwner] = newOwnerEntry(
-        lastestTimeStamp,
-        nftExcludingEvents
-      )
+      owners[nft.currentOwner] =
+        owner === undefined
+          ? newOwnerEntry(lastestTimeStamp, nftExcludingEvents)
+          : updateOwnerWithNewNft({
+              owner,
+              latestInteraction,
+              lastestTimeStamp,
+              nft,
+            })
       return
     }
 
     // nft isn't consumed and it hasn't change hands => it is owned by it's creator
     const mintInteraction = events[0]
     const mintTimeStamp = new Date(mintInteraction.timestamp).getTime()
-    const owner = owners[nft.currentOwner]
-
-    if (owner) {
-      // update entry
 
-      owners[nft.currentOwner] = updateOwnerWithNewNft({
-        owner,
-        latestInteraction: mintInteraction,
-        lastestTimeStamp: mintTimeStamp,
-        nft,
-      })
-      return
-    }
-    // new owner entry
-    owners[nft.currentOwner] = newOwnerEntry(mintTimeStamp, nftExcludingEvents)
+    owners[nft.currentOwner] =
+      owner === undefined
+        ? newOwnerEntry(mintTimeStamp, nftExcludingEvents)
+        : updateOwnerWithNewNft({
+            owner,
+            latestInteraction: mintInteraction,
+            lastestTimeStamp: mintTimeStamp,
+            nft,
+          })
   })
   return owners
 }

From 5ad06c4dc6e32be82bd7492453ecc4a85077aa3d Mon Sep 17 00:00:00 2001
From: daiagi <daiagi@gmail.com>
Date: Tue, 28 Mar 2023 16:08:28 +0700
Subject: [PATCH 47/55] @vikiival update pnpm veriosn to 8 in package.json

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index e90ca7cf6f..81c9da6d1f 100644
--- a/package.json
+++ b/package.json
@@ -51,7 +51,7 @@
   },
   "engines": {
     "npm": "please-use-pnpm",
-    "pnpm": "7",
+    "pnpm": "8",
     "node": "^v16.19.1"
   },
   "prettier": {

From 09ca4b56b1ac31febf2f71fb93b81f1bdc094ed2 Mon Sep 17 00:00:00 2001
From: daiagi <daiagi@gmail.com>
Date: Tue, 28 Mar 2023 16:10:20 +0700
Subject: [PATCH 48/55] undo update pnpm veriosn to 8 in package.json

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index e90ca7cf6f..81c9da6d1f 100644
--- a/package.json
+++ b/package.json
@@ -51,7 +51,7 @@
   },
   "engines": {
     "npm": "please-use-pnpm",
-    "pnpm": "7",
+    "pnpm": "8",
     "node": "^v16.19.1"
   },
   "prettier": {

From b6603c89aa7f0ee87a928f4c6c63467c7bc9ece3 Mon Sep 17 00:00:00 2001
From: daiagi <daiagi@gmail.com>
Date: Tue, 28 Mar 2023 16:13:25 +0700
Subject: [PATCH 49/55] undo pnpm version update

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 81c9da6d1f..e90ca7cf6f 100644
--- a/package.json
+++ b/package.json
@@ -51,7 +51,7 @@
   },
   "engines": {
     "npm": "please-use-pnpm",
-    "pnpm": "8",
+    "pnpm": "7",
     "node": "^v16.19.1"
   },
   "prettier": {

From f6133cba3706c9a8c6911f02819907e85f70cb5d Mon Sep 17 00:00:00 2001
From: daiagi <daiagi@gmail.com>
Date: Tue, 28 Mar 2023 19:29:27 +0700
Subject: [PATCH 50/55] better organize useCollectionActivityCode

---
 components/collection/activity/Activity.vue   |   6 +-
 .../collection/activity/events/Events.vue     |   2 +-
 .../activity/events/eventRow/common.ts        |   2 +-
 .../helpers.ts}                               | 200 +++++++-----------
 .../useCollectionActivity.ts                  |  62 ++++++
 5 files changed, 138 insertions(+), 134 deletions(-)
 rename components/collection/utils/{useCollectionActivity.ts => useCollectionActivity/helpers.ts} (70%)
 create mode 100644 components/collection/utils/useCollectionActivity/useCollectionActivity.ts

diff --git a/components/collection/activity/Activity.vue b/components/collection/activity/Activity.vue
index fbf5c7918c..1f7f511c52 100644
--- a/components/collection/activity/Activity.vue
+++ b/components/collection/activity/Activity.vue
@@ -32,14 +32,12 @@ import ActivityChart from './ActivityChart.vue'
 import OwnerInsights from './OwnerInsights.vue'
 import Events from './events/Events.vue'
 import BreadcrumbsFilter from '@/components/shared/BreadcrumbsFilter.vue'
-import {
-  mintInteraction,
-  useCollectionActivity,
-} from '@/components/collection/utils/useCollectionActivity'
+import { useCollectionActivity } from '@/components/collection/utils/useCollectionActivity/useCollectionActivity'
 import { Interaction } from '@kodadot1/minimark'
 import { useResizeObserver } from '@vueuse/core'
 import SidebarFilter from '@/components/shared/filters/SidebarFilter.vue'
 import { isAnyActivityFilterActive } from './utils'
+import { mintInteraction } from '@/components/collection/utils/useCollectionActivity/helpers'
 const mobileBreakpoint = 800
 const route = useRoute()
 const tablet = ref(true)
diff --git a/components/collection/activity/events/Events.vue b/components/collection/activity/events/Events.vue
index a7e1a42cb1..a0b9ad3506 100644
--- a/components/collection/activity/events/Events.vue
+++ b/components/collection/activity/events/Events.vue
@@ -43,7 +43,7 @@ import { Interaction } from '@kodadot1/minimark'
 import { is } from '@/composables/useReplaceUrl'
 import { isAnyActivityFilterActive } from '../utils'
 import { useResizeObserver } from '@vueuse/core'
-import { mintInteraction } from '@/components/collection/utils/useCollectionActivity'
+import { mintInteraction } from '@/components/collection/utils/useCollectionActivity/helpers'
 
 const desktop = ref(true)
 const desktopBreakPoint = 1024
diff --git a/components/collection/activity/events/eventRow/common.ts b/components/collection/activity/events/eventRow/common.ts
index f35fcf7be7..ca255628b0 100644
--- a/components/collection/activity/events/eventRow/common.ts
+++ b/components/collection/activity/events/eventRow/common.ts
@@ -7,7 +7,7 @@ import {
 import { sanitizeIpfsUrl } from '@/utils/ipfs'
 import { processSingleMetadata } from '@/utils/cachingStrategy'
 import { NFTMetadata } from '@/components/rmrk/service/scheme'
-import { mintInteraction } from '@/components/collection/utils/useCollectionActivity'
+import { mintInteraction } from '@/components/collection/utils/useCollectionActivity/helpers'
 
 export const interactionNameMap = {
   BUY: 'Sale',
diff --git a/components/collection/utils/useCollectionActivity.ts b/components/collection/utils/useCollectionActivity/helpers.ts
similarity index 70%
rename from components/collection/utils/useCollectionActivity.ts
rename to components/collection/utils/useCollectionActivity/helpers.ts
index 932d54d35d..fe9c4c6925 100644
--- a/components/collection/utils/useCollectionActivity.ts
+++ b/components/collection/utils/useCollectionActivity/helpers.ts
@@ -1,5 +1,5 @@
-import { sum } from '@/utils/math'
 import { Interaction } from '@kodadot1/minimark'
+import { sum } from '@/utils/math'
 import {
   Flippers,
   InteractionWithNFT,
@@ -8,8 +8,9 @@ import {
   Offer,
   OfferInteraction,
   Owners,
-} from './types'
+} from '../types'
 
+// Internal functions
 const flipperInitialValue = {
   flips: [],
   bestFlip: 0,
@@ -19,11 +20,6 @@ const flipperInitialValue = {
   totalsold: 0,
 }
 
-export const mintInteraction = () => {
-  const { urlPrefix } = usePrefix()
-  return urlPrefix.value === 'rmrk2' ? Interaction.MINT : Interaction.MINTNFT
-}
-
 const newOwnerEntry = (lastActivityTimestamp, nft) => ({
   nftCount: 1,
   totalBought: 0,
@@ -31,20 +27,30 @@ const newOwnerEntry = (lastActivityTimestamp, nft) => ({
   lastActivityTimestamp,
   nfts: [nft],
 })
-const updateOwnerWithNewNft = ({
-  owner,
-  latestInteraction,
-  lastestTimeStamp,
-  nft,
-}) => {
-  owner.nftCount++
-  owner.totalBought += parseInt(latestInteraction.meta)
-  owner.lastActivityTimestamp =
-    lastestTimeStamp > owner.lastActivityTimestamp
-      ? lastestTimeStamp
-      : owner.lastActivityTimestamp
-  owner.nfts = [...owner.nfts, nft]
-  return owner
+
+const preProccessForFindingFlippers = (interactions: InteractionWithNFT[]) => {
+  const changeHandsInteractions: InteractionWithNFT[] = []
+  const NFTS: NFTMap = {}
+
+  interactions.forEach((event) => {
+    if (event.interaction === mintInteraction()) {
+      NFTS[event.nft.id] = {
+        owner: event.caller,
+        nft: event.nft,
+        latestInteraction: mintInteraction(),
+        latestPrice: 0,
+      }
+    }
+
+    if (
+      event.interaction === Interaction.SEND ||
+      event.interaction === Interaction.BUY
+    ) {
+      changeHandsInteractions.push(event)
+    }
+  })
+
+  return { NFTS, changeHandsInteractions }
 }
 
 const summerizeFlips = (flips) => {
@@ -63,7 +69,30 @@ const getLatestPrice = (previousNFTState: NFTHistoryState) =>
     ? previousNFTState.latestPrice
     : 0
 
-const getOffers = (nfts): Offer[] => {
+const updateOwnerWithNewNft = ({
+  owner,
+  latestInteraction,
+  lastestTimeStamp,
+  nft,
+}) => {
+  owner.nftCount++
+  owner.totalBought += parseInt(latestInteraction.meta)
+  owner.lastActivityTimestamp =
+    lastestTimeStamp > owner.lastActivityTimestamp
+      ? lastestTimeStamp
+      : owner.lastActivityTimestamp
+  owner.nfts = [...owner.nfts, nft]
+  return owner
+}
+
+// Exported functions
+
+export const mintInteraction = () => {
+  const { urlPrefix } = usePrefix()
+  return urlPrefix.value === 'rmrk2' ? Interaction.MINT : Interaction.MINTNFT
+}
+
+export const getOffers = (nfts): Offer[] => {
   return nfts
     .map((nft) =>
       nft.offers.map((offer) => ({
@@ -77,7 +106,7 @@ const getOffers = (nfts): Offer[] => {
     .flat()
 }
 
-const getOwners = (nfts) => {
+export const getOwners = (nfts) => {
   const owners: Owners = {}
 
   nfts.forEach((nft) => {
@@ -126,74 +155,49 @@ const getOwners = (nfts) => {
   return owners
 }
 
-const preProccessForFindingFlippers = (interactions: InteractionWithNFT[]) => {
-  const changeHandsInteractions: InteractionWithNFT[] = []
-  const NFTS: NFTMap = {}
-
-  interactions.forEach((event) => {
-    if (event.interaction === mintInteraction()) {
-      NFTS[event.nft.id] = {
-        owner: event.caller,
-        nft: event.nft,
-        latestInteraction: mintInteraction(),
-        latestPrice: 0,
-      }
-    }
-
-    if (
-      event.interaction === Interaction.SEND ||
-      event.interaction === Interaction.BUY
-    ) {
-      changeHandsInteractions.push(event)
-    }
-  })
-
-  return { NFTS, changeHandsInteractions }
-}
-
-const getFlippers = (interactions: InteractionWithNFT[]): Flippers => {
+export const getFlippers = (interactions: InteractionWithNFT[]): Flippers => {
   const { NFTS, changeHandsInteractions } =
     preProccessForFindingFlippers(interactions)
 
+  // Create an object that will hold all the flipper data
   const flippers: Flippers = {}
 
+  // Loop through all the change hands interactions
   changeHandsInteractions.forEach((interaction) => {
     if (interaction.interaction === Interaction.SEND) {
+      // NFT has been sent from one address to another
       NFTS[interaction.nft.id].owner = interaction.meta
       NFTS[interaction.nft.id].latestInteraction = Interaction.SEND
     }
     if (interaction.interaction === Interaction.BUY) {
-      //it's a Flip!
+      // NFT has been bought, it's a Flip!
 
       const nftId = interaction.nft.id
       const PreviousNFTState = NFTS[nftId]
-      const baseInfo = {
-        nft: NFTS[nftId].nft,
+      const boughtPrice = getLatestPrice(PreviousNFTState)
+      // Calculate profit
+      const profit =
+        boughtPrice > 0 ? (parseInt(interaction.meta) / boughtPrice) * 100 : 0
+
+      // Create the new FlipEvent object
+      const thisFlip = {
+        nft: PreviousNFTState.nft,
         soldPrice: parseInt(interaction.meta),
         soldTo: interaction.caller,
         sellTimeStamp: new Date(interaction.timestamp).getTime(),
+        boughtPrice,
+        profit,
       }
+
+      // Check if the previous owner is already a flipper, if not initialize them
       if (flippers[PreviousNFTState.owner] === undefined) {
         flippers[PreviousNFTState.owner] = flipperInitialValue
       }
 
-      //nft has been bought from previous owner -> previous owner is the flipper
-
-      const boughtPrice = getLatestPrice(PreviousNFTState)
-      const profit =
-        boughtPrice > 0 ? (baseInfo.soldPrice / boughtPrice) * 100 : 0
-      const thisFlip = {
-        ...baseInfo,
-        boughtPrice,
-        profit,
-      }
-
-      flippers[PreviousNFTState.owner].flips = [
-        ...flippers[PreviousNFTState.owner].flips,
-        thisFlip,
-      ]
+      // Add the new FlipEvent to the previous owner's flips array
+      flippers[PreviousNFTState.owner].flips.push(thisFlip)
 
-      // update last state of NFT
+      // Update the NFT state
       NFTS[nftId] = {
         ...PreviousNFTState,
         owner: interaction.caller,
@@ -208,63 +212,3 @@ const getFlippers = (interactions: InteractionWithNFT[]): Flippers => {
   })
   return flippers
 }
-
-export const useCollectionActivity = ({ collectionId }) => {
-  const { urlPrefix } = usePrefix()
-  const events = ref<InteractionWithNFT[]>([])
-  const owners = ref<Owners>()
-  const flippers = ref<Flippers>()
-  const offers = ref<Offer[]>([])
-
-  const queryPrefix = urlPrefix.value === 'bsx' ? 'chain-bsx' : 'subsquid'
-
-  const { data } = useGraphql({
-    queryPrefix,
-    queryName: 'collectionActivityEvents',
-    variables: {
-      id: collectionId,
-    },
-  })
-
-  watch(data, (result) => {
-    if (result?.collection) {
-      // flat events for chart
-      const interactions: InteractionWithNFT[] = result.collection.nfts
-        .map((nft) =>
-          nft.events.map((e) => ({
-            ...e,
-            timestamp: new Date(e.timestamp).getTime(),
-            nft: { ...nft, events: undefined },
-          }))
-        )
-        .flat()
-      events.value = interactions
-
-      if (urlPrefix.value === 'bsx') {
-        offers.value = getOffers(result.collection.nfts)
-      }
-
-      // not to repeat ref names
-      const ownersTemp = getOwners(result.collection.nfts)
-      const flippersTemp = getFlippers(interactions)
-
-      const flipperdIds = Object.keys(flippersTemp)
-      const OwnersIds = Object.keys(ownersTemp)
-
-      flipperdIds.forEach((id) => {
-        if (OwnersIds.includes(id)) {
-          ownersTemp[id].totalSold = flippersTemp[id].totalsold
-        }
-      })
-
-      owners.value = ownersTemp
-      flippers.value = flippersTemp
-    }
-  })
-  return {
-    events,
-    owners,
-    flippers,
-    offers,
-  }
-}
diff --git a/components/collection/utils/useCollectionActivity/useCollectionActivity.ts b/components/collection/utils/useCollectionActivity/useCollectionActivity.ts
new file mode 100644
index 0000000000..b50aecee16
--- /dev/null
+++ b/components/collection/utils/useCollectionActivity/useCollectionActivity.ts
@@ -0,0 +1,62 @@
+import { Flippers, InteractionWithNFT, Offer, Owners } from '../types'
+import { getFlippers, getOffers, getOwners } from './helpers'
+
+export const useCollectionActivity = ({ collectionId }) => {
+  const { urlPrefix } = usePrefix()
+  const events = ref<InteractionWithNFT[]>([])
+  const owners = ref<Owners>()
+  const flippers = ref<Flippers>()
+  const offers = ref<Offer[]>([])
+
+  const queryPrefix = urlPrefix.value === 'bsx' ? 'chain-bsx' : 'subsquid'
+
+  const { data } = useGraphql({
+    queryPrefix,
+    queryName: 'collectionActivityEvents',
+    variables: {
+      id: collectionId,
+    },
+  })
+
+  watch(data, (result) => {
+    if (result?.collection) {
+      // flat events for chart
+      const interactions: InteractionWithNFT[] = result.collection.nfts
+        .map((nft) =>
+          nft.events.map((e) => ({
+            ...e,
+            timestamp: new Date(e.timestamp).getTime(),
+            nft: { ...nft, events: undefined },
+          }))
+        )
+        .flat()
+      events.value = interactions
+
+      if (urlPrefix.value === 'bsx') {
+        offers.value = getOffers(result.collection.nfts)
+      }
+
+      // not to repeat ref names
+      const ownersTemp = getOwners(result.collection.nfts)
+      const flippersTemp = getFlippers(interactions)
+
+      const flipperdIds = Object.keys(flippersTemp)
+      const OwnersIds = Object.keys(ownersTemp)
+
+      flipperdIds.forEach((id) => {
+        if (OwnersIds.includes(id)) {
+          ownersTemp[id].totalSold = flippersTemp[id].totalsold
+        }
+      })
+
+      owners.value = ownersTemp
+      flippers.value = flippersTemp
+    }
+  })
+  return {
+    events,
+    owners,
+    flippers,
+    offers,
+  }
+}

From 0d04e7a768bc9b586dd9416a8aef709fdebb16f1 Mon Sep 17 00:00:00 2001
From: daiagi <daiagi@gmail.com>
Date: Tue, 28 Mar 2023 20:15:47 +0700
Subject: [PATCH 51/55] clear deepSource

---
 .../utils/useCollectionActivity/helpers.ts          | 13 +++++--------
 1 file changed, 5 insertions(+), 8 deletions(-)

diff --git a/components/collection/utils/useCollectionActivity/helpers.ts b/components/collection/utils/useCollectionActivity/helpers.ts
index fe9c4c6925..407946ab17 100644
--- a/components/collection/utils/useCollectionActivity/helpers.ts
+++ b/components/collection/utils/useCollectionActivity/helpers.ts
@@ -10,7 +10,11 @@ import {
   Owners,
 } from '../types'
 
-// Internal functions
+export const mintInteraction = () => {
+  const { urlPrefix } = usePrefix()
+  return urlPrefix.value === 'rmrk2' ? Interaction.MINT : Interaction.MINTNFT
+}
+
 const flipperInitialValue = {
   flips: [],
   bestFlip: 0,
@@ -85,13 +89,6 @@ const updateOwnerWithNewNft = ({
   return owner
 }
 
-// Exported functions
-
-export const mintInteraction = () => {
-  const { urlPrefix } = usePrefix()
-  return urlPrefix.value === 'rmrk2' ? Interaction.MINT : Interaction.MINTNFT
-}
-
 export const getOffers = (nfts): Offer[] => {
   return nfts
     .map((nft) =>

From 80786645fba8e32a9b5faed43d2d8339a60e5480 Mon Sep 17 00:00:00 2001
From: daiagi <daiagi@gmail.com>
Date: Tue, 28 Mar 2023 20:49:02 +0700
Subject: [PATCH 52/55] move useCollectionActivity to composables

---
 components/collection/activity/Activity.vue   |  4 +-
 .../collection/activity/OwnerInsights.vue     |  2 +-
 .../collection/activity/events/EventRow.vue   |  5 +-
 .../collection/activity/events/Events.vue     | 12 ++--
 .../events/eventRow/EventRowDesktop.vue       |  5 +-
 .../events/eventRow/EventRowTablet.vue        |  5 +-
 .../activity/events/eventRow/common.ts        |  4 +-
 .../activity/ownerInsightsTabs/FlipperTab.vue |  2 +-
 .../activity/ownerInsightsTabs/HolderTab.vue  |  2 +-
 .../ownerInsightsTabs/NFTsDetaislDropdown.vue |  2 +-
 components/collection/utils/types.ts          | 71 +------------------
 .../collectionActivity}/helpers.ts            |  2 +-
 composables/collectionActivity/types.ts       | 69 ++++++++++++++++++
 .../useCollectionActivity.ts                  |  7 +-
 14 files changed, 103 insertions(+), 89 deletions(-)
 rename {components/collection/utils/useCollectionActivity => composables/collectionActivity}/helpers.ts (99%)
 create mode 100644 composables/collectionActivity/types.ts
 rename {components/collection/utils/useCollectionActivity => composables/collectionActivity}/useCollectionActivity.ts (93%)

diff --git a/components/collection/activity/Activity.vue b/components/collection/activity/Activity.vue
index 1f7f511c52..d1dc44be15 100644
--- a/components/collection/activity/Activity.vue
+++ b/components/collection/activity/Activity.vue
@@ -32,12 +32,12 @@ import ActivityChart from './ActivityChart.vue'
 import OwnerInsights from './OwnerInsights.vue'
 import Events from './events/Events.vue'
 import BreadcrumbsFilter from '@/components/shared/BreadcrumbsFilter.vue'
-import { useCollectionActivity } from '@/components/collection/utils/useCollectionActivity/useCollectionActivity'
+import { useCollectionActivity } from '~~/composables/collectionActivity/useCollectionActivity'
 import { Interaction } from '@kodadot1/minimark'
 import { useResizeObserver } from '@vueuse/core'
 import SidebarFilter from '@/components/shared/filters/SidebarFilter.vue'
 import { isAnyActivityFilterActive } from './utils'
-import { mintInteraction } from '@/components/collection/utils/useCollectionActivity/helpers'
+import { mintInteraction } from '~~/composables/collectionActivity/helpers'
 const mobileBreakpoint = 800
 const route = useRoute()
 const tablet = ref(true)
diff --git a/components/collection/activity/OwnerInsights.vue b/components/collection/activity/OwnerInsights.vue
index 803d3e9be4..99158bd8de 100644
--- a/components/collection/activity/OwnerInsights.vue
+++ b/components/collection/activity/OwnerInsights.vue
@@ -24,7 +24,7 @@
 <script setup lang="ts">
 import HoldersTab from './ownerInsightsTabs/HolderTab.vue'
 import FlippersTab from './ownerInsightsTabs/FlipperTab.vue'
-import { Flippers, Owners } from '@/components/collection/utils/types'
+import { Flippers, Owners } from '@/composables/collectionActivity/types'
 
 enum Tabs {
   holders,
diff --git a/components/collection/activity/events/EventRow.vue b/components/collection/activity/events/EventRow.vue
index 646fb020e1..fbe7b6ef34 100644
--- a/components/collection/activity/events/EventRow.vue
+++ b/components/collection/activity/events/EventRow.vue
@@ -6,7 +6,10 @@
 </template>
 
 <script setup lang="ts">
-import { InteractionWithNFT, Offer } from '@/components/collection/utils/types'
+import {
+  InteractionWithNFT,
+  Offer,
+} from '@/composables/collectionActivity/types'
 import EventRowDesktop from './eventRow/EventRowDesktop.vue'
 import EventRowTablet from './eventRow/EventRowTablet.vue'
 
diff --git a/components/collection/activity/events/Events.vue b/components/collection/activity/events/Events.vue
index a0b9ad3506..4cae1082bd 100644
--- a/components/collection/activity/events/Events.vue
+++ b/components/collection/activity/events/Events.vue
@@ -32,18 +32,18 @@
 </template>
 
 <script setup lang="ts">
-import {
-  InteractionWithNFT,
-  Offer,
-  OfferInteraction,
-} from '@/components/collection/utils/types'
 import EventRow from './EventRow.vue'
 import { useIntersectionObserver } from '@vueuse/core'
 import { Interaction } from '@kodadot1/minimark'
 import { is } from '@/composables/useReplaceUrl'
 import { isAnyActivityFilterActive } from '../utils'
 import { useResizeObserver } from '@vueuse/core'
-import { mintInteraction } from '@/components/collection/utils/useCollectionActivity/helpers'
+import { mintInteraction } from '@/composables/collectionActivity/helpers'
+import {
+  InteractionWithNFT,
+  Offer,
+  OfferInteraction,
+} from '@/composables/collectionActivity/types'
 
 const desktop = ref(true)
 const desktopBreakPoint = 1024
diff --git a/components/collection/activity/events/eventRow/EventRowDesktop.vue b/components/collection/activity/events/eventRow/EventRowDesktop.vue
index 15982677ab..597a8ce659 100644
--- a/components/collection/activity/events/eventRow/EventRowDesktop.vue
+++ b/components/collection/activity/events/eventRow/EventRowDesktop.vue
@@ -81,7 +81,10 @@
 </template>
 
 <script setup lang="ts">
-import { InteractionWithNFT, Offer } from '@/components/collection/utils/types'
+import {
+  InteractionWithNFT,
+  Offer,
+} from '@/composables/collectionActivity/types'
 import Money from '@/components/shared/format/ChainMoney.vue'
 import IdentityIndex from '@/components/identity/IdentityIndex.vue'
 import { timeAgo } from '@/components/collection/utils/timeAgo'
diff --git a/components/collection/activity/events/eventRow/EventRowTablet.vue b/components/collection/activity/events/eventRow/EventRowTablet.vue
index 7eac2a715c..04b2d97179 100644
--- a/components/collection/activity/events/eventRow/EventRowTablet.vue
+++ b/components/collection/activity/events/eventRow/EventRowTablet.vue
@@ -73,7 +73,10 @@
 </template>
 
 <script setup lang="ts">
-import { InteractionWithNFT, Offer } from '@/components/collection/utils/types'
+import {
+  InteractionWithNFT,
+  Offer,
+} from '@/composables/collectionActivity/types'
 import Money from '@/components/shared/format/ChainMoney.vue'
 import IdentityIndex from '@/components/identity/IdentityIndex.vue'
 import { timeAgo } from '@/components/collection/utils/timeAgo'
diff --git a/components/collection/activity/events/eventRow/common.ts b/components/collection/activity/events/eventRow/common.ts
index ca255628b0..fb527fea26 100644
--- a/components/collection/activity/events/eventRow/common.ts
+++ b/components/collection/activity/events/eventRow/common.ts
@@ -3,11 +3,11 @@ import {
   InteractionWithNFT,
   Offer,
   OfferInteraction,
-} from '@/components/collection/utils/types'
+} from '@/composables/collectionActivity/types'
 import { sanitizeIpfsUrl } from '@/utils/ipfs'
 import { processSingleMetadata } from '@/utils/cachingStrategy'
 import { NFTMetadata } from '@/components/rmrk/service/scheme'
-import { mintInteraction } from '@/components/collection/utils/useCollectionActivity/helpers'
+import { mintInteraction } from '~~/composables/collectionActivity/helpers'
 
 export const interactionNameMap = {
   BUY: 'Sale',
diff --git a/components/collection/activity/ownerInsightsTabs/FlipperTab.vue b/components/collection/activity/ownerInsightsTabs/FlipperTab.vue
index 5093c16703..1037c256ce 100644
--- a/components/collection/activity/ownerInsightsTabs/FlipperTab.vue
+++ b/components/collection/activity/ownerInsightsTabs/FlipperTab.vue
@@ -70,7 +70,6 @@
 </template>
 
 <script setup lang="ts">
-import { Flippers } from '@/components/collection/utils/types'
 import ProfileLink from '@/components/rmrk/Profile/ProfileLink.vue'
 import Money from '@/components/shared/format/ChainMoney.vue'
 import { NeoIcon } from '@kodadot1/brick'
@@ -78,6 +77,7 @@ import format from './format'
 
 import MoreNFTS from './NFTsDetaislDropdown.vue'
 import { timeAgo } from '@/components/collection/utils/timeAgo'
+import { Flippers } from '@/composables/collectionActivity/types'
 
 const toggleNFTDetails = (flipperId: string) => {
   const isOpen = isNFTDetailsOpen.value[flipperId]
diff --git a/components/collection/activity/ownerInsightsTabs/HolderTab.vue b/components/collection/activity/ownerInsightsTabs/HolderTab.vue
index 26dd38da3b..a6fbf7590d 100644
--- a/components/collection/activity/ownerInsightsTabs/HolderTab.vue
+++ b/components/collection/activity/ownerInsightsTabs/HolderTab.vue
@@ -55,7 +55,7 @@
 
 <script setup lang="ts">
 import ProfileLink from '@/components/rmrk/Profile/ProfileLink.vue'
-import { Owners } from '@/components/collection/utils/types'
+import { Owners } from '@/composables/collectionActivity/types'
 import Money from '@/components/shared/format/ChainMoney.vue'
 import { NeoIcon } from '@kodadot1/brick'
 
diff --git a/components/collection/activity/ownerInsightsTabs/NFTsDetaislDropdown.vue b/components/collection/activity/ownerInsightsTabs/NFTsDetaislDropdown.vue
index d46c927ecd..3ebc9e3452 100644
--- a/components/collection/activity/ownerInsightsTabs/NFTsDetaislDropdown.vue
+++ b/components/collection/activity/ownerInsightsTabs/NFTsDetaislDropdown.vue
@@ -9,7 +9,7 @@
 import {
   FlipEvent,
   NFTExcludingEvents,
-} from '@/components/collection/utils/types'
+} from '@/composables/collectionActivity/types'
 import Flipper from './NFTSDetailsDropdown/Flipper.vue'
 import Holder from './NFTSDetailsDropdown/Holder.vue'
 
diff --git a/components/collection/utils/types.ts b/components/collection/utils/types.ts
index 369fed46bb..8fcbff2399 100644
--- a/components/collection/utils/types.ts
+++ b/components/collection/utils/types.ts
@@ -1,10 +1,4 @@
-import {
-  CollectionMetadata,
-  Interaction as InteractionType,
-  NFTMetadata,
-} from '@/components/rmrk/service/scheme'
-
-import { Interaction } from '@kodadot1/minimark'
+import { CollectionMetadata } from '@/components/rmrk/service/scheme'
 
 export type Stats = {
   listedCount?: number
@@ -25,66 +19,3 @@ export type CollectionEntityMinimal = {
   currentOwner: string
   type: string
 }
-
-export type NFTExcludingEvents = {
-  currentOwner: string
-  name: string
-  price?: string
-  metadata: string
-  meta: NFTMetadata
-  updatedAt: string
-  id: string
-}
-export type InteractionWithNFT = InteractionType & {
-  nft: NFTExcludingEvents
-  timestamp: number
-}
-
-export const OfferInteraction = 'Offer'
-export type Offer = {
-  caller: string
-  expiration: string
-  status: string
-  price: number
-  timestamp: number
-  interaction: string
-  nft: NFTExcludingEvents
-}
-
-export type NFTHistoryState = {
-  owner: string
-  nft: NFTExcludingEvents
-  latestInteraction: Interaction
-  latestPrice: number
-}
-export type NFTMap = {
-  [nftId: string]: NFTHistoryState
-}
-export type FlipEvent = {
-  nft: NFTExcludingEvents
-  soldPrice: number
-  soldTo: string
-  sellTimeStamp: number
-  boughtPrice: number
-  profit: number
-}
-
-export type Flippers = {
-  [identity: string]: {
-    flips: FlipEvent[]
-    owned: number
-    totalBought: number
-    totalsold: number
-    bestFlip: number
-    latestflipTimestamp: number
-  }
-}
-export type Owners = {
-  [identity: string]: {
-    nftCount: number
-    totalBought: number
-    totalSold: number
-    nfts: NFTExcludingEvents[]
-    lastActivityTimestamp: number
-  }
-}
diff --git a/components/collection/utils/useCollectionActivity/helpers.ts b/composables/collectionActivity/helpers.ts
similarity index 99%
rename from components/collection/utils/useCollectionActivity/helpers.ts
rename to composables/collectionActivity/helpers.ts
index 407946ab17..f3d3df0875 100644
--- a/components/collection/utils/useCollectionActivity/helpers.ts
+++ b/composables/collectionActivity/helpers.ts
@@ -8,7 +8,7 @@ import {
   Offer,
   OfferInteraction,
   Owners,
-} from '../types'
+} from '../../components/collection/utils/types'
 
 export const mintInteraction = () => {
   const { urlPrefix } = usePrefix()
diff --git a/composables/collectionActivity/types.ts b/composables/collectionActivity/types.ts
new file mode 100644
index 0000000000..c76efe7f84
--- /dev/null
+++ b/composables/collectionActivity/types.ts
@@ -0,0 +1,69 @@
+import {
+  Interaction as InteractionType,
+  NFTMetadata,
+} from '@/components/rmrk/service/scheme'
+import { Interaction } from '@kodadot1/minimark'
+
+export type NFTExcludingEvents = {
+  currentOwner: string
+  name: string
+  price?: string
+  metadata: string
+  meta: NFTMetadata
+  updatedAt: string
+  id: string
+}
+
+export type InteractionWithNFT = InteractionType & {
+  nft: NFTExcludingEvents
+  timestamp: number
+}
+
+export const OfferInteraction = 'Offer'
+export type Offer = {
+  caller: string
+  expiration: string
+  status: string
+  price: number
+  timestamp: number
+  interaction: string
+  nft: NFTExcludingEvents
+}
+
+export type NFTHistoryState = {
+  owner: string
+  nft: NFTExcludingEvents
+  latestInteraction: Interaction
+  latestPrice: number
+}
+export type NFTMap = {
+  [nftId: string]: NFTHistoryState
+}
+export type FlipEvent = {
+  nft: NFTExcludingEvents
+  soldPrice: number
+  soldTo: string
+  sellTimeStamp: number
+  boughtPrice: number
+  profit: number
+}
+
+export type Flippers = {
+  [identity: string]: {
+    flips: FlipEvent[]
+    owned: number
+    totalBought: number
+    totalsold: number
+    bestFlip: number
+    latestflipTimestamp: number
+  }
+}
+export type Owners = {
+  [identity: string]: {
+    nftCount: number
+    totalBought: number
+    totalSold: number
+    nfts: NFTExcludingEvents[]
+    lastActivityTimestamp: number
+  }
+}
diff --git a/components/collection/utils/useCollectionActivity/useCollectionActivity.ts b/composables/collectionActivity/useCollectionActivity.ts
similarity index 93%
rename from components/collection/utils/useCollectionActivity/useCollectionActivity.ts
rename to composables/collectionActivity/useCollectionActivity.ts
index b50aecee16..7c0474a8e9 100644
--- a/components/collection/utils/useCollectionActivity/useCollectionActivity.ts
+++ b/composables/collectionActivity/useCollectionActivity.ts
@@ -1,4 +1,9 @@
-import { Flippers, InteractionWithNFT, Offer, Owners } from '../types'
+import {
+  Flippers,
+  InteractionWithNFT,
+  Offer,
+  Owners,
+} from '../../components/collection/utils/types'
 import { getFlippers, getOffers, getOwners } from './helpers'
 
 export const useCollectionActivity = ({ collectionId }) => {

From 158db8a245ece80e7f0706c42ce7c06ea27b47ed Mon Sep 17 00:00:00 2001
From: daiagi <daiagi@gmail.com>
Date: Tue, 28 Mar 2023 21:16:34 +0700
Subject: [PATCH 53/55] resolve some code review

---
 components/collection/activity/Activity.vue          |  4 ++--
 components/collection/activity/events/Events.vue     |  1 -
 .../activity/ownerInsightsTabs/FlipperTab.vue        |  2 +-
 .../NFTSDetailsDropdown/Flipper.vue                  | 12 ++++--------
 .../collection/activity/ownerInsightsTabs/format.ts  |  4 ----
 components/collection/activity/utils.ts              |  5 +++++
 components/shared/BreadcrumbsFilter.vue              |  1 -
 components/shared/filters/MobileFilter.vue           |  1 -
 .../shared/filters/modules/EventTypeFilter.vue       |  1 -
 components/shared/filters/modules/PriceFilter.vue    |  1 -
 components/shared/filters/modules/StatusFilter.vue   |  1 -
 composables/collectionActivity/helpers.ts            |  2 +-
 .../collectionActivity/useCollectionActivity.ts      |  7 +------
 13 files changed, 14 insertions(+), 28 deletions(-)

diff --git a/components/collection/activity/Activity.vue b/components/collection/activity/Activity.vue
index d1dc44be15..14fcfd303b 100644
--- a/components/collection/activity/Activity.vue
+++ b/components/collection/activity/Activity.vue
@@ -32,12 +32,12 @@ import ActivityChart from './ActivityChart.vue'
 import OwnerInsights from './OwnerInsights.vue'
 import Events from './events/Events.vue'
 import BreadcrumbsFilter from '@/components/shared/BreadcrumbsFilter.vue'
-import { useCollectionActivity } from '~~/composables/collectionActivity/useCollectionActivity'
 import { Interaction } from '@kodadot1/minimark'
 import { useResizeObserver } from '@vueuse/core'
 import SidebarFilter from '@/components/shared/filters/SidebarFilter.vue'
 import { isAnyActivityFilterActive } from './utils'
-import { mintInteraction } from '~~/composables/collectionActivity/helpers'
+import { mintInteraction } from '@/composables/collectionActivity/helpers'
+import { useCollectionActivity } from '@/composables/collectionActivity/useCollectionActivity'
 const mobileBreakpoint = 800
 const route = useRoute()
 const tablet = ref(true)
diff --git a/components/collection/activity/events/Events.vue b/components/collection/activity/events/Events.vue
index 4cae1082bd..9cf0241c15 100644
--- a/components/collection/activity/events/Events.vue
+++ b/components/collection/activity/events/Events.vue
@@ -35,7 +35,6 @@
 import EventRow from './EventRow.vue'
 import { useIntersectionObserver } from '@vueuse/core'
 import { Interaction } from '@kodadot1/minimark'
-import { is } from '@/composables/useReplaceUrl'
 import { isAnyActivityFilterActive } from '../utils'
 import { useResizeObserver } from '@vueuse/core'
 import { mintInteraction } from '@/composables/collectionActivity/helpers'
diff --git a/components/collection/activity/ownerInsightsTabs/FlipperTab.vue b/components/collection/activity/ownerInsightsTabs/FlipperTab.vue
index 1037c256ce..18f338a175 100644
--- a/components/collection/activity/ownerInsightsTabs/FlipperTab.vue
+++ b/components/collection/activity/ownerInsightsTabs/FlipperTab.vue
@@ -73,7 +73,7 @@
 import ProfileLink from '@/components/rmrk/Profile/ProfileLink.vue'
 import Money from '@/components/shared/format/ChainMoney.vue'
 import { NeoIcon } from '@kodadot1/brick'
-import format from './format'
+import { format } from '@/components/collection/activity/utils'
 
 import MoreNFTS from './NFTsDetaislDropdown.vue'
 import { timeAgo } from '@/components/collection/utils/timeAgo'
diff --git a/components/collection/activity/ownerInsightsTabs/NFTSDetailsDropdown/Flipper.vue b/components/collection/activity/ownerInsightsTabs/NFTSDetailsDropdown/Flipper.vue
index ae2d2425d0..a3cf323cf8 100644
--- a/components/collection/activity/ownerInsightsTabs/NFTSDetailsDropdown/Flipper.vue
+++ b/components/collection/activity/ownerInsightsTabs/NFTSDetailsDropdown/Flipper.vue
@@ -11,8 +11,8 @@
           :alt="nft.name"
           width="40"
           height="40"
-          class="border mr-2rem" />
-        <img v-else src="/placeholder.webp" class="border mr-2rem" />
+          class="border mr-4" />
+        <img v-else src="/placeholder.webp" class="border mr-5" />
         <span>{{ nft.name }}</span>
       </div>
       <div
@@ -48,9 +48,9 @@
 import { sanitizeIpfsUrl } from '@/utils/ipfs'
 import { processSingleMetadata } from '@/utils/cachingStrategy'
 import { NFTMetadata } from '@/components/rmrk/service/scheme'
-import { FlipEvent } from '@/components/collection/utils/types'
 import Money from '@/components/shared/format/ChainMoney.vue'
-import format from '../format'
+import { FlipEvent } from '@/composables/collectionActivity/types'
+import { format } from '@/components/collection/activity/utils'
 
 const props = defineProps<{
   flips: (FlipEvent & { avatar?: string })[]
@@ -85,10 +85,6 @@ const processNFTImages = async () => {
 </script>
 
 <style scoped lang="scss">
-.mr-2rem {
-  margin-right: 1.5rem;
-}
-
 .-mx-5 {
   margin: 0 -1.5rem !important;
 }
diff --git a/components/collection/activity/ownerInsightsTabs/format.ts b/components/collection/activity/ownerInsightsTabs/format.ts
index 72899c976e..e69de29bb2 100644
--- a/components/collection/activity/ownerInsightsTabs/format.ts
+++ b/components/collection/activity/ownerInsightsTabs/format.ts
@@ -1,4 +0,0 @@
-export default function (number: number) {
-  const isInteger = Number.isInteger(number)
-  return isInteger ? number.toString() : number.toFixed(4)
-}
diff --git a/components/collection/activity/utils.ts b/components/collection/activity/utils.ts
index a19f428742..05e5793718 100644
--- a/components/collection/activity/utils.ts
+++ b/components/collection/activity/utils.ts
@@ -78,3 +78,8 @@ export const bin = (data: DataPoint[], binSize: BinSize): DataPoint[] => {
 
   return bins.filter((bin) => !isNaN(bin.value))
 }
+
+export const format = (number: number) => {
+  const isInteger = Number.isInteger(number)
+  return isInteger ? number.toString() : number.toFixed(4)
+}
diff --git a/components/shared/BreadcrumbsFilter.vue b/components/shared/BreadcrumbsFilter.vue
index 80d142e1ed..b1653bb05f 100644
--- a/components/shared/BreadcrumbsFilter.vue
+++ b/components/shared/BreadcrumbsFilter.vue
@@ -22,7 +22,6 @@
 </template>
 
 <script lang="ts" setup>
-import useReplaceUrl from '@/composables/useReplaceUrl'
 import NeoTag from '@/components/shared/gallery/NeoTag.vue'
 
 const route = useRoute()
diff --git a/components/shared/filters/MobileFilter.vue b/components/shared/filters/MobileFilter.vue
index 1ddad027bc..b33a58a10d 100644
--- a/components/shared/filters/MobileFilter.vue
+++ b/components/shared/filters/MobileFilter.vue
@@ -50,7 +50,6 @@
 
 <script lang="ts" setup>
 import { NeoButton, NeoSidebar } from '@kodadot1/brick'
-import useReplaceUrl, { is } from '@/composables/useReplaceUrl'
 import { useExploreFiltersStore } from '@/stores/exploreFilters'
 import { useAcivityFiltersStore } from '@/stores/activityFilters'
 import { usePreferencesStore } from '@/stores/preferences'
diff --git a/components/shared/filters/modules/EventTypeFilter.vue b/components/shared/filters/modules/EventTypeFilter.vue
index de63c31fe8..c61b395b9f 100644
--- a/components/shared/filters/modules/EventTypeFilter.vue
+++ b/components/shared/filters/modules/EventTypeFilter.vue
@@ -35,7 +35,6 @@
 </template>
 
 <script lang="ts" setup>
-import useReplaceUrl from '@/composables/useReplaceUrl'
 import { NeoCheckbox } from '@kodadot1/brick'
 import { useAcivityFiltersStore } from '@/stores/activityFilters'
 
diff --git a/components/shared/filters/modules/PriceFilter.vue b/components/shared/filters/modules/PriceFilter.vue
index 02620bf11f..f869889acf 100644
--- a/components/shared/filters/modules/PriceFilter.vue
+++ b/components/shared/filters/modules/PriceFilter.vue
@@ -67,7 +67,6 @@
 <script lang="ts" setup>
 import { NeoButton } from '@kodadot1/brick'
 import { fromDecimals, toDecimals } from '@/utils/math'
-import useReplaceUrl from '@/composables/useReplaceUrl'
 import { useExploreFiltersStore } from '@/stores/exploreFilters'
 
 const exploreFiltersStore = useExploreFiltersStore()
diff --git a/components/shared/filters/modules/StatusFilter.vue b/components/shared/filters/modules/StatusFilter.vue
index 88a3117cde..04de3032c9 100644
--- a/components/shared/filters/modules/StatusFilter.vue
+++ b/components/shared/filters/modules/StatusFilter.vue
@@ -28,7 +28,6 @@
 </template>
 
 <script lang="ts" setup>
-import useReplaceUrl from '@/composables/useReplaceUrl'
 import { NeoCheckbox } from '@kodadot1/brick'
 import { useExploreFiltersStore } from '@/stores/exploreFilters'
 
diff --git a/composables/collectionActivity/helpers.ts b/composables/collectionActivity/helpers.ts
index f3d3df0875..0048530117 100644
--- a/composables/collectionActivity/helpers.ts
+++ b/composables/collectionActivity/helpers.ts
@@ -8,7 +8,7 @@ import {
   Offer,
   OfferInteraction,
   Owners,
-} from '../../components/collection/utils/types'
+} from './types'
 
 export const mintInteraction = () => {
   const { urlPrefix } = usePrefix()
diff --git a/composables/collectionActivity/useCollectionActivity.ts b/composables/collectionActivity/useCollectionActivity.ts
index 7c0474a8e9..a3e8a3c074 100644
--- a/composables/collectionActivity/useCollectionActivity.ts
+++ b/composables/collectionActivity/useCollectionActivity.ts
@@ -1,9 +1,4 @@
-import {
-  Flippers,
-  InteractionWithNFT,
-  Offer,
-  Owners,
-} from '../../components/collection/utils/types'
+import { Flippers, InteractionWithNFT, Offer, Owners } from './types'
 import { getFlippers, getOffers, getOwners } from './helpers'
 
 export const useCollectionActivity = ({ collectionId }) => {

From 2c9caa6dbec3ae6143483c0cae4b648dcab41c9c Mon Sep 17 00:00:00 2001
From: daiagi <daiagi@gmail.com>
Date: Tue, 28 Mar 2023 21:17:06 +0700
Subject: [PATCH 54/55] delete format file

---
 components/collection/activity/ownerInsightsTabs/format.ts | 0
 1 file changed, 0 insertions(+), 0 deletions(-)
 delete mode 100644 components/collection/activity/ownerInsightsTabs/format.ts

diff --git a/components/collection/activity/ownerInsightsTabs/format.ts b/components/collection/activity/ownerInsightsTabs/format.ts
deleted file mode 100644
index e69de29bb2..0000000000

From 9f4865d1cf68c95bd657a7b58299fa6209a7bdc1 Mon Sep 17 00:00:00 2001
From: daiagi <daiagi@gmail.com>
Date: Tue, 28 Mar 2023 21:46:35 +0700
Subject: [PATCH 55/55] removed negative margin

---
 .../collection/activity/OwnerInsights.vue     |   2 +-
 .../activity/events/eventRow/common.ts        |   2 +-
 .../activity/ownerInsightsTabs/FlipperTab.vue | 107 +++++++++---------
 .../activity/ownerInsightsTabs/HolderTab.vue  |  89 ++++++++-------
 .../NFTSDetailsDropdown/Flipper.vue           |  10 +-
 .../NFTSDetailsDropdown/Holder.vue            |  18 +--
 6 files changed, 107 insertions(+), 121 deletions(-)

diff --git a/components/collection/activity/OwnerInsights.vue b/components/collection/activity/OwnerInsights.vue
index 99158bd8de..49d0ced1cc 100644
--- a/components/collection/activity/OwnerInsights.vue
+++ b/components/collection/activity/OwnerInsights.vue
@@ -14,7 +14,7 @@
         {{ $t('flippers') }}
       </div>
     </div>
-    <div class="py-4 px-5 limit-height is-scrollable">
+    <div class="py-4 limit-height is-scrollable">
       <HoldersTab v-if="activeTab === Tabs.holders" :owners="owners" />
       <FlippersTab v-if="activeTab === Tabs.flippers" :flippers="flippers" />
     </div>
diff --git a/components/collection/activity/events/eventRow/common.ts b/components/collection/activity/events/eventRow/common.ts
index fb527fea26..e4dd6d8142 100644
--- a/components/collection/activity/events/eventRow/common.ts
+++ b/components/collection/activity/events/eventRow/common.ts
@@ -7,7 +7,7 @@ import {
 import { sanitizeIpfsUrl } from '@/utils/ipfs'
 import { processSingleMetadata } from '@/utils/cachingStrategy'
 import { NFTMetadata } from '@/components/rmrk/service/scheme'
-import { mintInteraction } from '~~/composables/collectionActivity/helpers'
+import { mintInteraction } from '@/composables/collectionActivity/helpers'
 
 export const interactionNameMap = {
   BUY: 'Sale',
diff --git a/components/collection/activity/ownerInsightsTabs/FlipperTab.vue b/components/collection/activity/ownerInsightsTabs/FlipperTab.vue
index 18f338a175..dc69576625 100644
--- a/components/collection/activity/ownerInsightsTabs/FlipperTab.vue
+++ b/components/collection/activity/ownerInsightsTabs/FlipperTab.vue
@@ -8,60 +8,61 @@
       :key="flipperId"
       class="hide-last-hr">
       <div class="is-flex is-flex-direction-column gap">
-        <ProfileLink
-          :address="flipperId"
-          :avatar-size="35"
-          class="has-text-weight-bold" />
-        <div class="is-flex is-justify-content-space-between">
-          <span class="is-size-7 has-text-grey">{{
-            $t('activity.owned')
-          }}</span>
-          <span>{{ owned }}</span>
-        </div>
-        <div class="is-flex is-justify-content-space-between">
-          <span class="is-size-7 has-text-grey">{{
-            $t('activity.totalBought')
-          }}</span>
-          <Money :value="totalBought" />
-        </div>
-        <div class="is-flex is-justify-content-space-between">
-          <span class="is-size-7 has-text-grey">{{
-            $t('activity.totalSold')
-          }}</span>
-          <Money :value="totalsold" />
-        </div>
-        <div class="is-flex is-justify-content-space-between">
-          <span class="is-size-7 has-text-grey">{{
-            $t('activity.bestFlip')
-          }}</span>
-          <span
-            :class="{
-              'has-text-k-green': bestFlip > 0,
-              'has-text-k-red': bestFlip < 0,
-            }"
-            >{{ bestFlip === 0 ? '--' : `${format(bestFlip)}%` }}</span
-          >
-        </div>
-        <div class="is-flex is-justify-content-space-between">
-          <span class="is-size-7 has-text-grey">{{
-            $t('activity.latestActivity')
-          }}</span>
-          <span class="no-wrap">{{ timeAgo(latestflipTimestamp) }}</span>
-        </div>
-        <div>
-          <div
-            class="is-size-7 has-text-k-blue is-clickable"
-            @click="toggleNFTDetails(flipperId)">
-            {{ $t('activity.nftDetails') }}
-            <NeoIcon
-              :icon="
-                isNFTDetailsOpen[flipperId] ? 'chevron-down' : 'chevron-right'
-              " />
+        <div class="px-5">
+          <ProfileLink
+            :address="flipperId"
+            :avatar-size="35"
+            class="has-text-weight-bold" />
+          <div class="is-flex is-justify-content-space-between">
+            <span class="is-size-7 has-text-grey">{{
+              $t('activity.owned')
+            }}</span>
+            <span>{{ owned }}</span>
           </div>
-
-          <div v-if="isNFTDetailsOpen[flipperId]">
-            <MoreNFTS :flips="flips" variant="Flippers" />
+          <div class="is-flex is-justify-content-space-between">
+            <span class="is-size-7 has-text-grey">{{
+              $t('activity.totalBought')
+            }}</span>
+            <Money :value="totalBought" />
           </div>
+          <div class="is-flex is-justify-content-space-between">
+            <span class="is-size-7 has-text-grey">{{
+              $t('activity.totalSold')
+            }}</span>
+            <Money :value="totalsold" />
+          </div>
+          <div class="is-flex is-justify-content-space-between">
+            <span class="is-size-7 has-text-grey">{{
+              $t('activity.bestFlip')
+            }}</span>
+            <span
+              :class="{
+                'has-text-k-green': bestFlip > 0,
+                'has-text-k-red': bestFlip < 0,
+              }"
+              >{{ bestFlip === 0 ? '--' : `${format(bestFlip)}%` }}</span
+            >
+          </div>
+          <div class="is-flex is-justify-content-space-between">
+            <span class="is-size-7 has-text-grey">{{
+              $t('activity.latestActivity')
+            }}</span>
+            <span class="no-wrap">{{ timeAgo(latestflipTimestamp) }}</span>
+          </div>
+          <div>
+            <div
+              class="is-size-7 has-text-k-blue is-clickable"
+              @click="toggleNFTDetails(flipperId)">
+              {{ $t('activity.nftDetails') }}
+              <NeoIcon
+                :icon="
+                  isNFTDetailsOpen[flipperId] ? 'chevron-down' : 'chevron-right'
+                " />
+            </div>
+          </div>
+        </div>
+        <div v-if="isNFTDetailsOpen[flipperId]">
+          <NFTsDetaislDropdown :flips="flips" variant="Flippers" />
         </div>
       </div>
       <hr class="my-3" />
@@ -75,7 +76,7 @@ import Money from '@/components/shared/format/ChainMoney.vue'
 import { NeoIcon } from '@kodadot1/brick'
 import { format } from '@/components/collection/activity/utils'
 
-import MoreNFTS from './NFTsDetaislDropdown.vue'
+import NFTsDetaislDropdown from './NFTsDetaislDropdown.vue'
 import { timeAgo } from '@/components/collection/utils/timeAgo'
 import { Flippers } from '@/composables/collectionActivity/types'
 
diff --git a/components/collection/activity/ownerInsightsTabs/HolderTab.vue b/components/collection/activity/ownerInsightsTabs/HolderTab.vue
index a6fbf7590d..80398eda75 100644
--- a/components/collection/activity/ownerInsightsTabs/HolderTab.vue
+++ b/components/collection/activity/ownerInsightsTabs/HolderTab.vue
@@ -1,51 +1,52 @@
 <template>
   <div>
-    <div
-      v-for="[holderId, holdings] in holders"
-      :key="holderId"
-      class="hide-last-hr">
+    <div v-for="[holderId, holdings] in holders" :key="holderId" class="">
       <div class="is-flex is-flex-direction-column gap">
-        <ProfileLink
-          :address="holderId"
-          :avatar-size="35"
-          class="has-text-weight-bold" />
-        <div class="is-flex is-justify-content-space-between">
-          <span class="is-size-7 has-text-grey">{{
-            $t('activity.owned')
-          }}</span>
-          <span>{{ holdings.nftCount }}</span>
-        </div>
-        <div class="is-flex is-justify-content-space-between">
-          <span class="is-size-7 has-text-grey">{{
-            $t('activity.totalBought')
-          }}</span>
-          <Money :value="holdings.totalBought" />
-        </div>
-        <div class="is-flex is-justify-content-space-between">
-          <span class="is-size-7 has-text-grey">{{
-            $t('activity.totalSold')
-          }}</span>
-          <Money v-if="holdings.totalSold > 0" :value="holdings.totalSold" />
-          <span v-else>--</span>
-        </div>
-        <div class="is-flex is-justify-content-space-between">
-          <span class="is-size-7 has-text-grey">{{ $t('activity.date') }}</span>
-          <span>{{ timeAgo(holdings.lastActivityTimestamp) }}</span>
-        </div>
-        <div>
-          <div
-            class="is-size-7 has-text-k-blue is-clickable"
-            @click="toggleNFTDetails(holderId)">
-            {{ $t('activity.nftDetails') }}
-            <NeoIcon
-              :icon="
-                isNFTDetailsOpen[holderId] ? 'chevron-down' : 'chevron-right'
-              " />
+        <div class="px-5">
+          <ProfileLink
+            :address="holderId"
+            :avatar-size="35"
+            class="has-text-weight-bold" />
+          <div class="is-flex is-justify-content-space-between">
+            <span class="is-size-7 has-text-grey">{{
+              $t('activity.owned')
+            }}</span>
+            <span>{{ holdings.nftCount }}</span>
           </div>
-
-          <div v-if="isNFTDetailsOpen[holderId]">
-            <MoreNFTS :holder-nfts="holdings.nfts" variant="Holders" />
+          <div class="is-flex is-justify-content-space-between">
+            <span class="is-size-7 has-text-grey">{{
+              $t('activity.totalBought')
+            }}</span>
+            <Money :value="holdings.totalBought" />
           </div>
+          <div class="is-flex is-justify-content-space-between">
+            <span class="is-size-7 has-text-grey">{{
+              $t('activity.totalSold')
+            }}</span>
+            <Money v-if="holdings.totalSold > 0" :value="holdings.totalSold" />
+            <span v-else>--</span>
+          </div>
+          <div class="is-flex is-justify-content-space-between">
+            <span class="is-size-7 has-text-grey">{{
+              $t('activity.date')
+            }}</span>
+            <span>{{ timeAgo(holdings.lastActivityTimestamp) }}</span>
+          </div>
+          <div>
+            <div
+              class="is-size-7 has-text-k-blue is-clickable"
+              @click="toggleNFTDetails(holderId)">
+              {{ $t('activity.nftDetails') }}
+              <NeoIcon
+                :icon="
+                  isNFTDetailsOpen[holderId] ? 'chevron-down' : 'chevron-right'
+                " />
+            </div>
+          </div>
+        </div>
+
+        <div v-if="isNFTDetailsOpen[holderId]">
+          <NFTsDetaislDropdown :holder-nfts="holdings.nfts" variant="Holders" />
         </div>
       </div>
       <hr class="my-3" />
@@ -59,7 +60,7 @@ import { Owners } from '@/composables/collectionActivity/types'
 import Money from '@/components/shared/format/ChainMoney.vue'
 import { NeoIcon } from '@kodadot1/brick'
 
-import MoreNFTS from './NFTsDetaislDropdown.vue'
+import NFTsDetaislDropdown from './NFTsDetaislDropdown.vue'
 import { timeAgo } from '@/components/collection/utils/timeAgo'
 
 const toggleNFTDetails = (flipperId: string) => {
diff --git a/components/collection/activity/ownerInsightsTabs/NFTSDetailsDropdown/Flipper.vue b/components/collection/activity/ownerInsightsTabs/NFTSDetailsDropdown/Flipper.vue
index a3cf323cf8..83aefdf097 100644
--- a/components/collection/activity/ownerInsightsTabs/NFTSDetailsDropdown/Flipper.vue
+++ b/components/collection/activity/ownerInsightsTabs/NFTSDetailsDropdown/Flipper.vue
@@ -1,5 +1,5 @@
 <template>
-  <div v-if="ready" class="-mx-5">
+  <div v-if="ready" class="">
     <div
       v-for="{ avatar, boughtPrice, soldPrice, profit, nft } in flips"
       :key="nft.id"
@@ -11,7 +11,7 @@
           :alt="nft.name"
           width="40"
           height="40"
-          class="border mr-4" />
+          class="border mr-5" />
         <img v-else src="/placeholder.webp" class="border mr-5" />
         <span>{{ nft.name }}</span>
       </div>
@@ -83,9 +83,3 @@ const processNFTImages = async () => {
   }
 }
 </script>
-
-<style scoped lang="scss">
-.-mx-5 {
-  margin: 0 -1.5rem !important;
-}
-</style>
diff --git a/components/collection/activity/ownerInsightsTabs/NFTSDetailsDropdown/Holder.vue b/components/collection/activity/ownerInsightsTabs/NFTSDetailsDropdown/Holder.vue
index ad57930481..51555c293d 100644
--- a/components/collection/activity/ownerInsightsTabs/NFTSDetailsDropdown/Holder.vue
+++ b/components/collection/activity/ownerInsightsTabs/NFTSDetailsDropdown/Holder.vue
@@ -1,10 +1,10 @@
 <template>
-  <div v-if="ready" class="-mx-5">
+  <div v-if="ready" class="">
     <div
       v-for="{ avatar, id, name, updatedAt } in nfts"
       :key="id"
       class="is-flex pt-2 px-5 is-justify-content-start is-hoverable">
-      <div class="mr-2rem">
+      <div class="mr-5">
         <img
           v-if="avatar"
           :src="avatar"
@@ -12,7 +12,7 @@
           width="40"
           height="40"
           class="border" />
-        <img v-else src="/placeholder.webp" class="border" />
+        <img v-else src="/placeholder.webp" class="border mr-5" />
       </div>
       <div class="is-flex is-flex-direction-column">
         {{ name }}
@@ -28,7 +28,7 @@
 import { sanitizeIpfsUrl } from '@/utils/ipfs'
 import { processSingleMetadata } from '@/utils/cachingStrategy'
 import { NFTMetadata } from '@/components/rmrk/service/scheme'
-import { NFTExcludingEvents } from '@/components/collection/utils/types'
+import { NFTExcludingEvents } from '@/composables/collectionActivity/types'
 import { timeAgo } from '@/components/collection/utils/timeAgo'
 
 const props = defineProps<{
@@ -62,13 +62,3 @@ const processNFTImages = async () => {
   }
 }
 </script>
-
-<style scoped lang="scss">
-.mr-2rem {
-  margin-right: 2rem;
-}
-
-.-mx-5 {
-  margin: 0 -1.5rem !important;
-}
-</style>