#2775 Adding popular collections to landing

components/base/CarouselCardList.vue

@@ -28,7 +28,7 @@
           <div class="media">
             <div class="media-content">
               <div class="title is-5 is-ellipsis">
-                <nuxt-link :to="`/rmrk/gallery/${list.id}`">
+                <nuxt-link :to="`/${url}/${list.id}`">
                   {{ list.name }}
                 </nuxt-link>
               </div>
@@ -63,7 +63,7 @@
                     class="force-clip is-ellipsis" />
                 </div>
               </nuxt-link>
-              <time class="is-size-7 icon-text">
+              <time class="is-size-7 icon-text" v-if="list.timestamp">
                 <b-icon icon="clock" />
                 <span>{{ list.timestamp }}</span>
               </time>
@@ -98,7 +98,7 @@ const components = {
 export default class CarouselList extends mixins(AuthMixin) {
   @Prop({ type: Array, required: true }) nfts!: CarouselNFT[]
   @Prop({ type: Number, default: 1 }) page!: number
-
+  @Prop({ type: String, default: 'rmrk/gallery' }) url!: string
   get current() {
     return this.page - 1 // 0-indexed
   }

components/landing/Landing.vue

@@ -42,6 +42,7 @@
       </div>
       <div v-if="prefix === 'rmrk'">
         <LazyGalleryLatestSales :passionList="passionList" class="my-5" />
+        <LazyGalleryPopularCollections class="my-5" />
         <LazyGalleryNewestList :passionList="passionList" class="my-5" />
       </div>
     </div>

components/rmrk/Gallery/PopularCollections.vue

@@ -0,0 +1,83 @@
+<template>
+  <div>
+    <Loader v-model="isLoading" />
+
+    <div class="columns is-vcentered">
+      <div class="column is-four-fifths">
+        <h1 class="title is-2">{{ $t('Popular Collections') }}</h1>
+        <p class="subtitle is-size-5">
+          Discover the most popular collections on rmrk
+        </p>
+      </div>
+      <div class="column has-text-right">
+        <Pagination
+          simple
+          preserveScroll
+          v-model="currentValue"
+          :total="total"
+          :perPage="1" />
+      </div>
+    </div>
+
+    <CarouselCardList
+      :nfts="nfts"
+      :page="currentValue"
+      :url="`${urlPrefix}/collection`" />
+  </div>
+</template>
+
+<script lang="ts">
+import { Component, mixins } from 'nuxt-property-decorator'
+import PrefixMixin from '~/utils/mixins/prefixMixin'
+import popularCollectionList from '@/queries/rmrk/subsquid/popularCollectionList.graphql'
+import { RowSeries } from '~/components/series/types'
+import { sanitizeIpfsUrl } from '../utils'
+
+const components = {
+  CarouselCardList: () => import('@/components/base/CarouselCardList.vue'),
+  Pagination: () => import('@/components/rmrk/Gallery/Pagination.vue'),
+  Loader: () => import('@/components/shared/Loader.vue'),
+}
+
+@Component<PopularCollections>({
+  components,
+})
+export default class PopularCollections extends mixins(PrefixMixin) {
+  private nfts: any[] = []
+  private total = 0
+  private currentValue = 1
+
+  get isLoading(): boolean {
+    return false
+  }
+
+  async created() {
+    this.handleResult()
+  }
+
+  protected async handleResult() {
+    const collections = await this.$apollo.query({
+      query: popularCollectionList,
+      client: 'subsquid',
+      variables: {
+        orderDirection: 'ASC',
+        limit: 10,
+        dateRange: '7 DAY',
+        orderBy: 'volume',
+      },
+    })
+
+    const {
+      data: { seriesInsightTable },
+    } = collections
+
+    this.nfts = seriesInsightTable.map(
+      (e: RowSeries): RowSeries => ({
+        ...e,
+        image: sanitizeIpfsUrl(e.image),
+      })
+    )
+    this.total = this.nfts.length
+  }
+}
+</script>

queries/rmrk/subsquid/popularCollectionList.graphql

@@ -0,0 +1,22 @@
+query popularCollectionList(
+  $limit: Float
+  $orderBy: String
+  $dateRange: String
+  $orderDirection: String
+) {
+  seriesInsightTable(
+    limit: $limit
+    orderBy: $orderBy
+    orderDirection: $orderDirection
+    dateRange: $dateRange
+  ) {
+    id
+    image
+    metadata
+    sold
+    name
+    issuer
+    total
+    buys
+  }
+}