refactor: Curated List - Vue Composition API

.eslintrc.js

@@ -44,7 +44,7 @@ module.exports = {
   ignorePatterns: ['*.md'],
   overrides: [
     {
-      files: ['layouts/**/*.{js,ts,vue}'],
+      files: ['layouts/**/*.{js,ts,vue}', 'pages/**/*.vue'],
       rules: {
         'vue/multi-word-component-names': 'off',
       },

components/Navbar.vue

@@ -147,7 +147,10 @@
           </b-navbar-item>
         </template>
       </b-navbar-dropdown>
-      <LazyChainSelect id="NavChainSelect" class="navbar-item has-dropdown" />
+      <LazyChainSelect
+        id="NavChainSelect"
+        class="navbar-item has-dropdown"
+        data-cy="chain-select" />
       <LazySwitchLocale
         id="NavLocaleChanger"
         class="navbar-item has-dropdown"

components/bsx/Asset/AssetTable.vue

@@ -3,29 +3,29 @@
     <b-table
       :data="assetList"
       :class="{ scrollable: assetList.length > 0 }"
-      paginationPosition="top">
+      pagination-position="top">
       <b-table-column
+        v-slot="props"
         cell-class="is-vcentered is-narrow"
         field="formatPrice"
         width="120"
         :label="$t('mint.collection.symbol.label')"
-        v-slot="props"
         sortable>
         {{ props.row.symbol }}
       </b-table-column>
 
       <b-table-column
+        v-slot="props"
         cell-class="is-vcentered is-narrow"
         field="formatPrice"
         :label="$t('asset.table.balance')"
-        v-slot="props"
         sortable>
-        <Money :value="props.row.balance" inline hideUnit />
+        <Money :value="props.row.balance" inline hide-unit />
       </b-table-column>
       <b-table-column
+        v-slot="props"
         cell-class="is-vcentered is-narrow"
-        :label="$t('offer.action')"
-        v-slot="props">
+        :label="$t('offer.action')">
         <span v-if="props.row.id === currentAsset">
           {{ $t('asset.action.alreadyDefault') }}
         </span>

components/bsx/Create/RoyaltyForm.vue

@@ -4,25 +4,25 @@
       v-model="vRoyalty"
       label="mint.royalty.rate"
       :max="99"
-      :customFormatter="(v) => `${v}%`" />
+      :custom-formatter="(v) => `${v}%`" />
     <BasicSwitch v-model="isMine" label="mint.royalty.mine" />
     <AddressInput
       v-show="!isMine"
-      label="mint.royalty.receiver"
       v-model="destinationAddress"
-      @input="handleAddressUpdate"
+      label="mint.royalty.receiver"
       :strict="false"
-      emptyOnError />
+      empty-on-error
+      @input="handleAddressUpdate" />
   </div>
 </template>
 
 <script lang="ts">
 import {
   Component,
   Emit,
-  mixins,
   PropSync,
   Watch,
+  mixins,
 } from 'nuxt-property-decorator'
 import AuthMixin from '~/utils/mixins/authMixin'
 

components/landing/CuratedList.vue

@@ -10,21 +10,22 @@
       :indicator-background="false"
       indicator-mode="click"
       indicator-position="is-bottom"
-      indicator-style="is-lines">
-      <b-carousel-item v-for="(collection, i) in collections" :key="i">
-        <b-image
-          ratio="1by1"
-          class="image"
-          :src="collection.image"
-          :alt="collection.name"></b-image>
+      indicator-style="is-lines"
+      data-cy="curated-list">
+      <b-carousel-item
+        v-for="(collection, i) in collections"
+        :key="`${collection.image}-${i}`">
+        <BasicImage :src="collection.image" :alt="collection.name" />
         <div class="box">
           <div class="content has-text-left">
             <nuxt-link
               :to="{
                 name: `${urlPrefix}-collection-id`,
                 params: { id: collection.id },
               }">
-              <h2 class="title is-5">{{ collection.name }}</h2>
+              <h2 class="title is-5" data-cy="curated-name">
+                {{ collection.name }}
+              </h2>
             </nuxt-link>
             <nuxt-link
               :to="{
@@ -45,29 +46,20 @@
   </section>
 </template>
 
-<script lang="ts">
-import { Component, Vue, mixins } from 'nuxt-property-decorator'
-
-import { Collection } from '@/components/unique/types'
-
-import AuthMixin from '@/utils/mixins/authMixin'
-import PrefixMixin from '@/utils/mixins/prefixMixin'
-
+<script lang="ts" setup>
 import {
   getCloudflareImageLinks,
   processMetadata,
 } from '@/utils/cachingStrategy'
 import { fastExtract } from '@/utils/ipfs'
 import { mapOnlyMetadata } from '@/utils/mappers'
-import resolveQueryPath from '@/utils/queryPathResolver'
 
-import { SomethingWithMeta, getSanitizer } from '../rmrk/utils'
-import { CollectionMetadata } from '../rmrk/types'
+import { SomethingWithMeta, getSanitizer } from '@/components/rmrk/utils'
+import { CollectionMetadata } from '@/components/rmrk/types'
+import { Collection } from '@/components/unique/types'
 
-const components = {
-  // Identicon: () => import('@polkadot/vue-identicon'),
-  Identity: () => import('@/components/identity/IdentityIndex.vue'),
-}
+import Identity from '@/components/identity/IdentityIndex.vue'
+import BasicImage from '@/components/shared/view/BasicImage.vue'
 
 const curatedCollection = [
   '800f8a914281765a7d-KITTY', // Kitty
@@ -78,52 +70,40 @@ const curatedCollection = [
   '900D19DC7D3C444E4C-KSMBOT', // KusamaBot (deepologics)
 ]
 
-@Component<CuratedList>({
-  components,
+const { urlPrefix } = usePrefix()
+const { data } = useGraphql({
+  queryName: 'collectionCuratedList',
+  queryPrefix: urlPrefix.value,
+  variables:
+    urlPrefix.value === 'rmrk' ? { list: curatedCollection } : undefined,
 })
-export default class CuratedList extends mixins(AuthMixin, PrefixMixin) {
-  protected collections: Collection[] | SomethingWithMeta[] = []
-
-  async fetch() {
-    const query = await resolveQueryPath(
-      this.urlPrefix,
-      'collectionCuratedList'
-    )
-    const result = await this.$apollo
-      .query<any>({
-        query: query.default,
-        client: this.client,
-        variables:
-          this.urlPrefix === 'rmrk' ? { list: curatedCollection } : undefined,
-      })
-      .catch((e) => {
-        this.$consola.error(e)
-        return { data: null }
-      })
-    if (result.data) {
-      await this.handleResult(result)
-    }
-  }
 
-  protected async handleResult({ data }: any) {
-    this.collections = data.collectionEntities.map((e: any) => ({
-      ...e,
-      metadata: e.meta?.id || e.metadata,
-    })) as SomethingWithMeta[]
-    const metadataList: string[] = this.collections.map(mapOnlyMetadata)
-    const imageLinks = await getCloudflareImageLinks(metadataList)
-
-    processMetadata<CollectionMetadata>(metadataList, (meta, i) => {
-      Vue.set(this.collections, i, {
-        ...this.collections[i],
-        ...meta,
-        image:
-          imageLinks[fastExtract(this.collections[i]?.metadata)] ||
-          getSanitizer(meta.image || '')(meta.image || ''),
-      })
-    })
+type Collections = Collection & SomethingWithMeta
+const collections = ref<Collections[]>([])
+
+const updateCollections = async ({ data }) => {
+  if (!data?.collectionEntities.length) {
+    return
   }
+
+  collections.value = data.collectionEntities.map((e) => ({
+    ...e,
+    metadata: e.meta?.id || e.metadata,
+    image: '',
+  })) as Collections[]
+  const metadataList: string[] = collections.value.map(mapOnlyMetadata)
+  const imageLinks = await getCloudflareImageLinks(metadataList)
+
+  processMetadata<CollectionMetadata>(metadataList, (meta, i) => {
+    collections.value[i].image =
+      imageLinks[fastExtract(collections.value[i]?.metadata)] ||
+      getSanitizer(meta.image || '')(meta.image || '')
+  })
 }
+
+watch(data, () => {
+  updateCollections({ data: data.value })
+})
 </script>
 
 <style lang="scss">

components/landing/Landing.vue → components/landing/LandingPage.vue

@@ -79,45 +79,45 @@
   </section>
 </template>
 
-<script lang="ts">
-import { Component, Prop, mixins } from 'nuxt-property-decorator'
+<script lang="ts" setup>
+import KodadotSocialLinks from '@/components/shared/KodadotSocialLinks.vue'
 // import passionQuery from '@/queries/rmrk/subsquid/passionFeed.graphql'
-import AuthMixin from '@/utils/mixins/authMixin'
 
-@Component<Landing>({
-  components: {
-    KodadotSocialLinks: () =>
-      import('~/components/shared/KodadotSocialLinks.vue'),
+defineProps({
+  prefix: {
+    type: String,
+    default: 'rmrk',
+    required: true,
+  },
+  buildOn: {
+    type: String,
+    default: 'RMRK Protocol',
   },
 })
-export default class Landing extends mixins(AuthMixin) {
-  @Prop({ type: String, required: true, default: 'rmrk' }) prefix!: string
-  @Prop({ type: String, default: 'RMRK Protocol' }) buildOn!: string
 
-  // private passionList: string[] = ['']
+// private passionList: string[] = ['']
 
-  // async created() {
-  //   if (this.isLogIn) {
-  //     const result = await this.fetchPassionList()
-  //     if (result.length) {
-  //       this.passionList = this.passionList.concat(result)
-  //     }
-  //   }
-  // }
+// async created() {
+//   if (this.isLogIn) {
+//     const result = await this.fetchPassionList()
+//     if (result.length) {
+//       this.passionList = this.passionList.concat(result)
+//     }
+//   }
+// }
 
-  //   public async fetchPassionList() {
-  //     const {
-  //       data: { passionFeed },
-  //     } = await this.$apollo.query({
-  //       query: passionQuery,
-  //       client: 'subsquid',
-  //       variables: {
-  //         account: this.accountId,
-  //       },
-  //     })
-  //     return passionFeed?.map((item) => item.id) || []
-  //   }
-}
+//   public async fetchPassionList() {
+//     const {
+//       data: { passionFeed },
+//     } = await this.$apollo.query({
+//       query: passionQuery,
+//       client: 'subsquid',
+//       variables: {
+//         account: this.accountId,
+//       },
+//     })
+//     return passionFeed?.map((item) => item.id) || []
+//   }
 </script>
 
 <style lang="scss" scoped>

components/rmrk/utils.ts

@@ -103,7 +103,7 @@ export const fetchMetadata = async <T>(
   return emptyObject<T>()
 }
 
-export const preheatFileFromIPFS = async (ipfsUrl: string) => {
+export const preheatFileFromIPFS = (ipfsUrl: string) => {
   const url = sanitizeIpfsUrl(ipfsUrl, 'pinata')
   const hash = fastExtract(url)
   api

components/shared/ChainSelect.vue

@@ -12,7 +12,8 @@
       aria-role="listitem"
       :value="option.value"
       :disabled="option.value === 'moonriver' || option.value === 'bsx'"
-      :class="{ 'is-active': selected === option.value }">
+      :class="{ 'is-active': selected === option.value }"
+      :data-cy="`chain-dropdown-${option.value}`">
       {{ option.text }}
     </b-dropdown-item>
   </b-dropdown>

components/shared/format/ChainMoney.vue

@@ -4,7 +4,7 @@
     :unit="unit"
     :decimals="decimals"
     :inline="inline"
-    :hideUnit="hideUnit" />
+    :hide-unit="hideUnit" />
 </template>
 
 <script lang="ts">

components/unique/types.ts

@@ -16,6 +16,8 @@ export interface Collection {
   frozen: boolean
   attributes: Attribute[]
   metadataFrozen?: boolean
+  image?: string
+  name?: string
 }
 
 export interface Instance {

composables/useAuth.ts

@@ -0,0 +1,9 @@
+export default function useAuth() {
+  const { $store } = useNuxtApp()
+
+  const accountId = computed(() => $store.getters.getAuthAddress)
+  const isLogin = computed(() => Boolean($store.getters.getAuthAddress))
+  const balance = computed(() => $store.getters.getAuthBalance)
+
+  return { accountId, isLogin, balance }
+}

composables/useGraphql.ts

@@ -1,7 +1,12 @@
 import resolveQueryPath from '@/utils/queryPathResolver'
 import { notificationTypes, showNotification } from '@/utils/notification'
 
-export default function ({ queryName, variables = {}, options = {} }) {
+export default function ({
+  queryPrefix = '',
+  queryName,
+  variables = {},
+  options = {},
+}) {
   const { $apollo, $consola } = useNuxtApp()
   const { client } = usePrefix()
   const data = ref(null)
@@ -12,9 +17,9 @@ export default function ({ queryName, variables = {}, options = {} }) {
     loading.value = true
     data.value = null
     error.value = null
+    const query = await resolveQueryPath(queryPrefix || client.value, queryName)
 
     try {
-      const query = await resolveQueryPath(client.value, queryName)
       const response = await $apollo.query({
         query: query.default,
         client: client.value,