✨ Collection Activity Tab

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
@@ -19,7 +22,7 @@
       </template>
     </NeoDropdown>
 
-    <div class="content">
+    <div :class="{ content: !chartHeight }" :style="heightStyle">
       <canvas id="priceChart" />
     </div>
   </div>
@@ -66,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(() => {

components/collection/activity/Activity.vue

@@ -0,0 +1,69 @@
+<template>
+  <div class="is-flex">
+    <SidebarFilter />
+    <div class="w-full mt-5">
+      <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 v-show="isFiltersActive" class="border-bottom pb-5 border-k-grey">
+        <BreadcrumbsFilter @filtersActive="toggleBreadcrumbsVisible" />
+      </div> -->
+      <Events :events="sortedEvents" />
+    </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 { 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, offers } = useCollectionActivity({
+  collectionId: collectionId.value,
+})
+
+const InteractionIncluded = [
+  Interaction.BUY,
+  Interaction.LIST,
+  Interaction.MINTNFT,
+  Interaction.SEND,
+]
+
+const filteredEvents = computed(() =>
+  events.value.filter((event) =>
+    InteractionIncluded.includes(event.interaction as Interaction)
+  )
+)
+const withOffers = computed(() => [...filteredEvents.value, ...offers.value])
+
+const sortedEvents = computed(() =>
+  withOffers.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>

components/collection/activity/Chart.vue

@@ -0,0 +1,11 @@
+<template>
+  <GalleryItemChart :nft-events="events" chart-height="350px" />
+</template>
+
+<script setup lang="ts">
+import { ActivityInteraction } from '@/components/rmrk/service/scheme'
+
+defineProps<{
+  events?: ActivityInteraction[]
+}>()
+</script>

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 '@/components/collection/utils/types'
+
+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>

components/collection/activity/events/EventRow.vue

@@ -0,0 +1,14 @@
+<template>
+  <div>
+    <EventRowDesktop :event="event" />
+    <!-- <EventRowTablet :event="event" class="is-hidden-desktop is-hidden-mobile" /> -->
+  </div>
+</template>
+
+<script setup lang="ts">
+import { InteractionWithNFT, Offer } from '@/components/collection/utils/types'
+import EventRowDesktop from './eventRow/EventRowDesktop.vue'
+import EventRowTablet from './eventRow/EventRowTablet.vue'
+
+defineProps<{ event: InteractionWithNFT | Offer }>()
+</script>

components/collection/activity/events/Events.vue

@@ -0,0 +1,85 @@
+<template>
+  <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>
+      </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>
+</template>
+
+<script setup lang="ts">
+import { InteractionWithNFT, Offer } from '@/components/collection/utils/types'
+import EventRow from './EventRow.vue'
+import { useIntersectionObserver } from '@vueuse/core'
+
+const props = withDefaults(
+  defineProps<{
+    events: (InteractionWithNFT | Offer)[]
+  }>(),
+  {
+    events: () => [],
+  }
+)
+
+const displayedEvents = ref<(InteractionWithNFT | Offer)[]>([])
+
+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>