Merge remote-tracking branch 'origin/2911-cypress-init' into 2911-cyp…

…ress-init

components/base/CarouselCardList.vue

@@ -11,7 +11,7 @@
     <template #item="list">
       <div class="card mx-4">
         <div class="card-image">
-          <nuxt-link :to="`/${urlPrefix}/gallery/${list.id}`">
+          <nuxt-link :to="urlOf(list.id)">
             <PreviewMediaResolver
               v-if="list.animationUrl"
               :src="list.animationUrl"
@@ -28,7 +28,7 @@
           <div class="media">
             <div class="media-content">
               <div class="title is-5 is-ellipsis">
-                <nuxt-link :to="`/${url}/${list.id}`">
+                <nuxt-link :to="urlOf(list.id)">
                   {{ list.name }}
                 </nuxt-link>
               </div>
@@ -99,7 +99,7 @@ const components = {
 export default class CarouselList extends mixins(AuthMixin, PrefixMixin) {
   @Prop({ type: Array, required: true }) nfts!: CarouselNFT[]
   @Prop({ type: Number, default: 1 }) page!: number
-  @Prop({ type: String, default: 'rmrk/gallery' }) url!: string
+  @Prop({ type: String, default: 'gallery' }) url!: string
   get current() {
     return this.page - 1 // 0-indexed
   }
@@ -108,6 +108,10 @@ export default class CarouselList extends mixins(AuthMixin, PrefixMixin) {
     return `${this.urlPrefix}-u-id`
   }
 
+  public urlOf(id: string): string {
+    return `${this.urlPrefix}/${this.url}/${id}`
+  }
+
   get options() {
     return {
       itemsToShow: 2,

components/bsx/Gallery/Item/GalleryItem.vue

@@ -6,7 +6,9 @@
     :mimeType="mimeType"
     :description="meta.description"
     :imageVisible="imageVisible"
-    :isLoading="isLoading">
+    :isLoading="isLoading"
+    @mouseEntered="showNavigation = true"
+    @mouseLeft="showNavigation = false">
     <template v-slot:top v-if="message">
       <b-message class="message-box" type="is-primary">
         <div class="columns">
@@ -22,6 +24,13 @@
         </div>
       </b-message>
     </template>
+    <template v-slot:image>
+      <Navigation
+        v-if="nftsFromSameCollection.length > 1"
+        :showNavigation="showNavigation"
+        :items="nftsFromSameCollection"
+        :currentId="nft.id" />
+    </template>
     <template v-slot:main>
       <div class="columns">
         <div class="column is-6">
@@ -173,6 +182,9 @@ import { get, set } from 'idb-keyval'
 import { Component, mixins, Vue } from 'nuxt-property-decorator'
 import { getMetadata, getOwner, getPrice, hasAllPallets } from './utils'
 import AvailableActions from './AvailableActions.vue'
+import nftListIdsByCollection from '@/queries/subsquid/general/nftIdListByCollection.graphql'
+import { unwrapSafe } from '@/utils/uniquery'
+import { mapToId } from '@/utils/mappers'
 
 @Component<GalleryItem>({
   name: 'GalleryItem',
@@ -207,6 +219,7 @@ import AvailableActions from './AvailableActions.vue'
     AccountBalance: () => import('@/components/shared/AccountBalance.vue'),
     OfferList: () => import('@/components/bsx/Offer/OfferList.vue'),
     History: () => import('@/components/rmrk/Gallery/History.vue'),
+    Navigation: () => import('@/components/rmrk/Gallery/Item/Navigation.vue'),
   },
   directives: {
     orientation: Orientation,
@@ -229,11 +242,14 @@ export default class GalleryItem extends mixins(
   public events: Interaction[] = []
   public message = ''
   public isMakeOffersAllowed = true
+  public showNavigation = false
+  private nftsFromSameCollection: string[] = []
 
   public async created() {
     this.checkId()
     await this.fetchNftData()
     await this.fetchEvents()
+    this.fetchCollectionItems()
     onApiConnect(this.apiUrl, (api) => {
       if (hasAllPallets(api)) {
         this.subscribe(getOwner(api), this.tokenId, this.observeOwner)
@@ -284,6 +300,40 @@ export default class GalleryItem extends mixins(
     this.$set(this.nft, 'price', unwrapOrDefault(data).toString())
   }
 
+  public async fetchCollectionItems() {
+    const collectionId = this.nft?.collection.id
+    if (collectionId) {
+      // cancel request and get ids from store in case we already fetched collection data before
+      if (this.$store.state.history?.currentCollection?.id === collectionId) {
+        this.nftsFromSameCollection =
+          this.$store.state.history.currentCollection?.nftIds || []
+        return
+      }
+      try {
+        const nfts = await this.$apollo.query({
+          query: nftListIdsByCollection,
+          client: this.client,
+          variables: {
+            id: collectionId,
+          },
+        })
+
+        const {
+          data: { nftEntities },
+        } = nfts
+
+        this.nftsFromSameCollection = unwrapSafe(nftEntities).map(mapToId) || []
+        this.$store.dispatch('history/setCurrentCollection', {
+          id: collectionId,
+          nftIds: this.nftsFromSameCollection,
+          prefix: this.urlPrefix,
+        })
+      } catch (e) {
+        showNotification(`${e}`, notificationTypes.warn)
+      }
+    }
+  }
+
   private async fetchEvents() {
     const result = await this.$apollo.query({
       query: itemEvents,

components/rmrk/Gallery/CollectionPriceChart.vue

@@ -95,6 +95,9 @@ export default class PriceChart extends mixins(ChainMixin) {
       )?.getContext('2d')
 
       if (ctx) {
+        const chartStatus = Chart.getChart('collectionPriceChart')
+        chartStatus?.destroy()
+
         const median = getCollectionMedian(this.priceData[1])
         const chart = new Chart(ctx, {
           type: 'line',

components/rmrk/Gallery/PopularCollections.vue

@@ -21,10 +21,7 @@
       </div>
     </div>
 
-    <CarouselCardList
-      :nfts="nfts"
-      :page="currentValue"
-      :url="`${urlPrefix}/collection`" />
+    <CarouselCardList :nfts="nfts" :page="currentValue" :url="`collection`" />
   </div>
 </template>
 

components/shared/BlockExplorerLink.vue

@@ -1,18 +1,14 @@
 <template>
-  <span v-if="hasDisabledBlockUrl"> {{ text }}</span>
-  <a
-    v-else
-    target="_blank"
-    rel="noopener noreferrer"
-    :href="getBlockUrl(blockId)">
+  <span v-if="!hasBlockUrl"> {{ text }}</span>
+  <a v-else target="_blank" rel="noopener noreferrer" :href="blockUrl">
     {{ text }}
   </a>
 </template>
 
 <script lang="ts">
 import { Component, mixins, Prop } from 'nuxt-property-decorator'
-import { urlBuilderBlockNumber } from '@/utils/explorerGuide'
-import PrefixMixin from '~/utils/mixins/prefixMixin'
+import { blockExplorerOf } from '@/utils/config/chain.config'
+import PrefixMixin from '@/utils/mixins/prefixMixin'
 
 const components = {}
 
@@ -22,17 +18,18 @@ export default class BlockExplorerLink extends mixins(PrefixMixin) {
   @Prop({ type: String, required: true }) public blockId!: string
   @Prop({ type: String, required: true }) public text!: string
 
-  public getBlockUrl(block: string): string {
-    return urlBuilderBlockNumber(
-      block,
-      this.$store.getters['explorer/getCurrentChain'],
-      this.provider
-    )
+  get blockUrl(): string {
+    return this.hasBlockUrl && this.blockId
+      ? this.blockExplorer + 'block/' + this.blockId
+      : '#'
   }
 
-  get hasDisabledBlockUrl(): boolean {
-    const disableBlockUrlPrefix = ['bsx']
-    return disableBlockUrlPrefix.includes(this.urlPrefix)
+  get blockExplorer(): string | undefined {
+    return blockExplorerOf(this.urlPrefix)
+  }
+
+  get hasBlockUrl(): boolean {
+    return Boolean(this.blockExplorer)
   }
 }
 </script>

components/shared/IdentityPopover.vue

@@ -160,15 +160,12 @@ export default class IdentityPopover extends mixins(
         // if cache exist and within 12h
         await this.handleResult({ data, type: 'cache' })
       } else {
-        const query = await resolveQueryPath(
-          this.urlPrefix,
-          'userStatsByAccount'
-        )
+        const query = await resolveQueryPath(this.client, 'userStatsByAccount')
 
         this.$apollo.addSmartQuery('collections', {
           query: query.default,
           manual: true,
-          client: this.urlPrefix,
+          client: this.client,
           loadingKey: 'isLoading',
           result: this.handleResult,
           variables: {
@@ -202,9 +199,8 @@ export default class IdentityPopover extends mixins(
 
       if (data?.firstMint?.length > 0) {
         this.firstMintDate = data.firstMint[0].createdAt
-      } else if (data?.firstMint?.nodes?.length > 0) {
-        this.firstMintDate = data.firstMint.nodes[0].createdAt
       }
+
       const cacheData = {
         totalCreated: this.totalCreated,
         totalCollected: this.totalCollected,

package.json

@@ -30,6 +30,7 @@
     "lint:quiet": "eslint --quiet --ignore-path .gitignore --ext .js,.ts,.vue .",
     "lint:fix": "eslint --fix --quiet --ignore-path .gitignore --ext .js,.ts,.vue .",
     "test": "vitest run --reporter verbose --allowOnly",
+    "test:e2e": "cypress run --project tests",
     "test:watch": "vitest --reporter verbose --allowOnly",
     "prepare": "husky install"
   },

utils/api/Query.ts

@@ -6,6 +6,7 @@ export type ChainProperties = {
   ss58Format: number
   tokenDecimals: number
   tokenSymbol: string
+  blockExplorer?: string
 }
 
 class Query {

utils/config/chain.config.ts

@@ -4,23 +4,30 @@ import { Config, Prefix } from './types'
 export const toChainProperty = (
   ss58Format: number,
   tokenDecimals: number,
-  tokenSymbol: string
+  tokenSymbol: string,
+  blockExplorer?: string
 ): ChainProperties => {
   return {
     ss58Format,
     tokenDecimals,
     tokenSymbol,
+    blockExplorer,
   }
 }
 
-const DEFAULT_CHAIN_PROPERTIES: ChainProperties = toChainProperty(2, 12, 'KSM')
+const DEFAULT_CHAIN_PROPERTIES: ChainProperties = toChainProperty(
+  2,
+  12,
+  'KSM',
+  'https://kusama.subscan.io/'
+)
 
 const chainPropertyMap: Config<ChainProperties> = {
   rmrk: DEFAULT_CHAIN_PROPERTIES,
   bsx: toChainProperty(10041, 12, 'BSX'),
   statemine: DEFAULT_CHAIN_PROPERTIES,
   westmint: DEFAULT_CHAIN_PROPERTIES,
-  moonsama: toChainProperty(1285, 12, 'MOVR'),
+  moonsama: toChainProperty(1285, 12, 'MOVR', 'https://moonriver.subscan.io/'),
 }
 
 export const chainPropListOf = (prefix: Prefix | string): ChainProperties => {
@@ -30,3 +37,9 @@ export const chainPropListOf = (prefix: Prefix | string): ChainProperties => {
 export const ss58Of = (prefix: Prefix | string): number => {
   return chainPropListOf(prefix).ss58Format
 }
+
+export const blockExplorerOf = (
+  prefix: Prefix | string
+): string | undefined => {
+  return chainPropListOf(prefix).blockExplorer
+}

utils/config/permision.config.ts

@@ -1,7 +1,5 @@
 import { Prefix, Config } from './types'
 
-type Config<T = boolean> = Record<Prefix, T>
-
 const hasCreate: Config<boolean> = {
   rmrk: true,
   bsx: true,