✨ 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,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

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/holdersFlippersTabs/FlipperTab.vue

@@ -0,0 +1,123 @@
+<template>
+  <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">{{ $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>
+          <Money :value="totalBought" />
+        </div>
+        <div class="is-flex is-justify-content-space-between">
+          <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">{{ $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">{{
+            $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)">
+            {{ $t('activity.nftDetails') }}
+            <NeoIcon
+              :icon="
+                isNFTDetailsOpen[flipperId] ? 'chevron-down' : 'chevron-right'
+              " />
+          </div>
+
+          <div v-if="isNFTDetailsOpen[flipperId]">
+            <MoreNFTS :flips="flips" variant="Flippers" />
+          </div>
+        </div>
+      </div>
+      <hr class="my-3" />
+    </div>
+  </div>
+</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'
+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 flipper id to bolean, is the NFT details section of that flipper open or nor
+// {id0: false, id1: true, id3: false, ...}
+const isFlipperMoreNFTSectionOpen = flippers.value.reduce(
+  (accumelator, [holderId, _]) => ({
+    ...accumelator,
+    [holderId]: false,
+  }),
+  {}
+)
+const isNFTDetailsOpen = ref(isFlipperMoreNFTSectionOpen)
+
+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>

components/collection/activity/holdersFlippersTabs/HolderTab.vue

@@ -0,0 +1,104 @@
+<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">{{ $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>
+          <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>
+          <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>{{ timeAgo(holdings.lastActivityTimestamp) }}</span>
+        </div>
+        <div>
+          <div
+            class="is-size-7 k-blue is-clickable"
+            @click="toggleNFTDetails(holderId)">
+            {{ $t('activity.nftDetails') }}
+            <NeoIcon
+              :icon="
+                isNFTDetailsOpen[holderId] ? 'chevron-down' : 'chevron-right'
+              " />
+          </div>
+
+          <div v-if="isNFTDetailsOpen[holderId]">
+            <MoreNFTS :holder-nfts="holdings.nfts" variant="Holders" />
+          </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/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 '../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>

components/collection/activity/holdersFlippersTabs/moreNFTS.vue

@@ -0,0 +1,24 @@
+<template>
+  <div>
+    <Holder v-if="variant === 'Holders'" :nfts="holderNfts" />
+    <Flipper v-else :flips="flips" />
+  </div>
+</template>
+
+<script setup lang="ts">
+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>