Merge branch 'main' into feature/refresh/ui

components/bsx/Gallery/Item/GalleryItem.vue

@@ -133,6 +133,11 @@
       </div>
     </template>
     <template v-slot:footer>
+      <GalleryItemCarousel
+        v-if="showRelatedCarousel"
+        type="related"
+        :collectionId="nft.collection.id" />
+      <GalleryItemCarousel type="visited" />
       <OfferList
         :current-owner-id="nft.currentOwner"
         :nftId="id"
@@ -283,6 +288,12 @@ export default class GalleryItem extends mixins(
     )
   }
 
+  get showRelatedCarousel(): boolean {
+    return (
+      Boolean(this.nft.collection?.id) && this.nftsFromSameCollection.length > 0
+    )
+  }
+
   public offersUpdate({ offers }) {
     this.isMakeOffersAllowed = !offers.find(({ caller }) => {
       return caller === this.accountId

components/rmrk/Gallery/GalleryItem.vue

@@ -120,7 +120,7 @@
       <GalleryItemCarousel
         v-if="showRelatedCarousel"
         type="related"
-        :collectionId="nft.collectionId" />
+        :collectionId="nft.collection.id" />
       <GalleryItemCarousel type="visited" />
 
       <div class="columns">
@@ -415,7 +415,7 @@ export default class GalleryItem extends mixins(PrefixMixin) {
 
   get showRelatedCarousel(): boolean {
     return (
-      Boolean(this.nft.collectionId) && this.nftsFromSameCollection.length > 0
+      Boolean(this.nft.collection?.id) && this.nftsFromSameCollection.length > 0
     )
   }
 

components/rmrk/Gallery/GalleryItemCarousel.vue

@@ -8,10 +8,11 @@
 </template>
 
 <script lang="ts">
-import { Component, Vue, Prop } from 'nuxt-property-decorator'
+import { Component, mixins, Prop } from 'nuxt-property-decorator'
 import { formatNFT } from '~/utils/carousel'
 import { visitedNFT } from '~/utils/localStorage'
 import { MIN_CAROUSEL_NFT } from '~/utils/constants'
+import PrefixMixin from '@/utils/mixins/prefixMixin'
 
 import collectionEntityById from '@/queries/rmrk/subsquid/collectionEntityById.graphql'
 import nftEntitiesByIDs from '@/queries/rmrk/subsquid/nftEntitiesByIDs.graphql'
@@ -26,7 +27,7 @@ import { CarouselNFT } from '@/components/base/types'
 /**
  * class name
  */
-export default class GalleryItemCarousel extends Vue {
+export default class GalleryItemCarousel extends mixins(PrefixMixin) {
   @Prop({ type: String, required: true }) type!: 'related' | 'visited'
   @Prop({ default: '' }) readonly collectionId!: string
 
@@ -40,7 +41,7 @@ export default class GalleryItemCarousel extends Vue {
     if (this.type === 'related' && this.collectionId) {
       const { data } = await this.$apollo.query({
         query: collectionEntityById,
-        client: 'subsquid',
+        client: this.client,
         variables: {
           id: this.collectionId,
           nftId: this.$route.params.id,
@@ -55,7 +56,7 @@ export default class GalleryItemCarousel extends Vue {
 
       const { data } = await this.$apollo.query({
         query: nftEntitiesByIDs,
-        client: 'subsquid',
+        client: this.client,
         variables: {
           ids,
         },

queries/rmrk/subsquid/collectionEntityById.graphql

@@ -8,8 +8,8 @@ query collectionEntityById($id: ID!, $nftId: ID!) {
     name
     nfts(
       limit: 20
-      orderBy: [price_ASC, updatedAt_DESC]
-      where: { burned_eq: false, price_gt: "0", id_not_eq: $nftId }
+      orderBy: [updatedAt_DESC]
+      where: { burned_eq: false, id_not_eq: $nftId }
     ) {
       ...nftSubsquid
       ...nftDetails

utils/carousel.ts

@@ -12,11 +12,12 @@ import { LastEvent } from '~/utils/types/types'
  * Get cloudflare images
  * Update timestamp
  */
-export const formatNFT = async (data): Promise<CarouselNFT[]> => {
-  if (!data) {
+export const formatNFT = async (nfts): Promise<CarouselNFT[]> => {
+  if (!nfts) {
     return []
   }
 
+  const data = nfts.filter((nft) => Boolean(nft.meta))
   const images = await getCloudflareImageLinks(data.map((nft) => nft.meta.id))
   const imageOf = getProperImageLink(images)