Merge branch 'new-graphql-routes' of github.com:kodadot/nft-gallery i…

…nto new-graphql-routes

# Conflicts:
#	utils/constants.ts

.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"
@@ -157,6 +160,7 @@
         id="NavProfile"
         :is-rmrk="isRmrk"
         :is-bsx="isBsx"
+        :is-snek="isSnek"
         data-cy="profileDropdown" />
     </template>
     <template v-else #end>
@@ -219,6 +223,10 @@ export default class NavbarMenu extends mixins(PrefixMixin, AuthMixin) {
     return this.urlPrefix === 'bsx'
   }
 
+  get isSnek(): boolean {
+    return this.urlPrefix === 'snek'
+  }
+
   get inCollectionPage(): boolean {
     return this.$route.name === 'rmrk-collection-id'
   }

components/bsx/Asset/AssetList.vue

@@ -4,6 +4,11 @@
       <h1 class="title is-2 has-text-centered">
         {{ $t('Assets') }}
       </h1>
+      <p class="subtitle is-size-6 has-text-centered mt-1 mb-1">
+        {{
+          "Select which asset you'd like to use for paying fees for transactions"
+        }}
+      </p>
     </div>
     <Loader v-model="isLoading" :status="status" />
     <AssetTable

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/bsx/Offer/MasterOfferTable.vue

@@ -1,11 +1,22 @@
 <template>
   <div>
-    <div class="is-flex is-align-items-center is-justify-content-center mb-5">
+    <div class="is-flex is-align-items-start is-justify-content-center mb-5">
       <AddressInput
         v-model="destinationAddress"
+        :empty-on-error="false"
         class="address-input mr-3"
+        icon="close-circle"
         :strict="false"
         @input="handleAddressUpdate" />
+      <b-button
+        v-if="isLogIn"
+        type="is-primary"
+        icon-left="paper-plane"
+        class="fill-button"
+        outlined
+        @click="fillUpAddress">
+        Fill My Address
+      </b-button>
     </div>
     <Loader v-model="isLoading" :status="status" />
     <section>
@@ -192,10 +203,19 @@ export default class MasterOfferTable extends mixins(
       this.$router.replace({ query: { tab } }).catch(() => null) // null to further not throw navigation errors
     }
   }
+
+  private fillUpAddress() {
+    this.destinationAddress = this.accountId
+    this.handleAddressUpdate(this.accountId)
+  }
 }
 </script>
 <style scoped>
 .address-input {
   width: 500px;
 }
+
+.fill-button {
+  height: 3.25em;
+}
 </style>

components/identity/module/IdentityPopoverHeader.vue

@@ -35,6 +35,7 @@
           icon="copy"
           size="is-small"
           class="copy-icon"
+          data-cy="identity-clipboard"
           @click.native="toast('Copied to clipboard')"></b-icon>
       </p>
       <p

components/identity/utils/useIdentityStats.ts

@@ -42,6 +42,24 @@ const whichData = ({ data, type }) => {
   return totalCount[type] || 0
 }
 
+const cacheTotalCount = ({ data, totalCreated, totalCollected, totalSold }) => {
+  const cacheData = {
+    created: {
+      totalCount: totalCreated,
+    },
+    collected: {
+      totalCount: totalCollected,
+    },
+    sold: {
+      totalCount: totalSold,
+    },
+    firstMintDate: data?.firstMint[0]?.createdAt || new Date(),
+    updatedAt: Date.now(),
+  }
+
+  return cacheData
+}
+
 export default function useIdentityStats({ address }) {
   const { $store } = useNuxtApp()
 
@@ -71,19 +89,12 @@ export default function useIdentityStats({ address }) {
       return
     }
 
-    const cacheData = {
-      created: {
-        totalCount: totalCreated.value,
-      },
-      collected: {
-        totalCount: totalCollected.value,
-      },
-      sold: {
-        totalCount: totalSold.value,
-      },
-      firstMintDate: data?.firstMint[0]?.createdAt,
-      updatedAt: Date.now(),
-    }
+    const cacheData = cacheTotalCount({
+      data,
+      totalCreated: totalCreated.value,
+      totalCollected: totalCollected.value,
+      totalSold: totalSold.value,
+    })
 
     firstMintDate.value = cacheData.firstMintDate
 

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">