Merge branch 'main' into fix/seo/bsx

.github/ISSUE_TEMPLATE/feature.yml

@@ -1,19 +1,18 @@
-name: Feature Request
+name: Feature Request / User Experience
 description: Suggest an idea for KodaDot to be better for your friends
 title: "Be descriptive and short"
 labels: ["enhancement"]
 body:
   - type: markdown
     attributes:
       value: |
-        Thanks for taking the time to fill out this feature request!
+        Thanks for taking the time to fill out this feature request, it would help us upgrade user experience for others users like you!
   - type: textarea
     id: feature-request
     attributes:
       label: Is your feature request related to a problem?
       description: A clear and concise description of what the problem is
       placeholder: I'm always frustrated when [...]
-      value: "I'm always frustrated when [...]"
     validations:
       required: true
   - type: textarea
@@ -22,7 +21,6 @@ body:
       label: Describe the solution you would like
       description: A clear and concise description of what you want to happen.
       placeholder: I would like to see
-      value: "I would like to see"
     validations:
       required: true
   - type: textarea
@@ -31,15 +29,17 @@ body:
       label: Describe alternatives you have considered
       description: A clear and concise description of any alternative solutions or features you have considered.
       placeholder: I have tried this alternative
-      value: "I have tried this alternative"
     validations:
       required: true
   - type: textarea
     id: screenshots
     attributes:
       label: Screeenshots
-      description: Sometimes, visuals are much better than words
+      description: Most times, visuals are much better than words
       placeholder: Paste your vision
-      value: "Paste your vision"
-    validations:
-      required: true
+  - type: textarea
+    id: relatedissues
+    attributes:
+      label: Are there opened related issues?
+      description: Linking it with existing issue would help us sort out things faster on our side
+      placeholder: Link to Github issue in our repository or from elsewhere helps a lot!

components/bsx/Create/CreateToken.vue

@@ -7,10 +7,13 @@
       :hasEdition="false">
       <template v-slot:main>
         <BasicSwitch key="nsfw" v-model="nsfw" label="mint.nfsw" />
+        <BasicSwitch key="listed" v-model="listed" label="mint.listForSale" />
         <BalanceInput
+          v-if="listed"
           label="Price"
           expanded
           key="price"
+          value="0.1"
           @input="updatePrice"
           class="mb-3" />
         <CustomAttributeInput
@@ -127,14 +130,21 @@ export default class CreateToken extends mixins(
   protected depositPerByte = BigInt(0)
   protected attributes: Attribute[] = []
   protected nsfw = false
-  protected price: string | number = 0
+  protected price: string | number = 0.1
+  protected listed = true
   protected royalty: Royalty = {
     amount: 0,
     address: '',
   }
 
-  protected updatePrice(value: number) {
+  protected updatePrice(value: string) {
     this.price = value
+    if (parseFloat(value) === 0 && this.listed) {
+      showNotification(
+        'In order to list NFT, price has to be more than 0',
+        notificationTypes.info
+      )
+    }
   }
 
   get hasPrice() {
@@ -156,6 +166,13 @@ export default class CreateToken extends mixins(
     }
   }
 
+  @Watch('listed', { immediate: true })
+  onListedChange(value: boolean, oldVal: boolean) {
+    if (value === oldVal) {
+      return
+    }
+    this.price = value ? 0.1 : 0
+  }
   public async fetchCollections() {
     const query = await resolveQueryPath(this.urlPrefix, 'collectionForMint')
     const collections = await this.$apollo.query({

components/bsx/Create/RoyaltyForm.vue

@@ -20,9 +20,7 @@ import {
   Component,
   Emit,
   mixins,
-  Prop,
   PropSync,
-  Vue,
   Watch,
 } from 'nuxt-property-decorator'
 import AuthMixin from '~/utils/mixins/authMixin'

components/bsx/Gallery/Item/AvailableActions.vue

@@ -4,7 +4,8 @@
     <ActionList
       v-if="accountId"
       :actions="actions"
-      :isMakeOffersAllowed="isMakeOffersAllowed"
+      :isMakeOffersAllowed="!isMakeOffersDisabled"
+      :tooltipOfferLabel="tooltipOfferLabel"
       @click="handleAction" />
     <component
       class="mb-4"
@@ -38,6 +39,8 @@ import {
 import shouldUpdate from '@/utils/shouldUpdate'
 import Connector from '@kodadot1/sub-api'
 import { Component, mixins, Prop } from 'nuxt-property-decorator'
+import formatBalance from '@/utils/formatBalance'
+import onApiConnect from '@/utils/api/general'
 
 const components = {
   ActionList: () => import('@/components/rmrk/Gallery/Item/ActionList.vue'),
@@ -64,6 +67,14 @@ export default class AvailableActions extends mixins(
   private selectedAction: ShoppingActions | '' = ''
   private meta: string | number = ''
 
+  public minimumOfferAmount = 0
+  public isMakeOffersDisabled = true
+  public tooltipOfferLabel = {}
+
+  get balance(): number {
+    return Number(this.$store.getters.getAuthBalance)
+  }
+
   get actions() {
     return getActionList('bsx', this.isOwner, this.isAvailableToBuy)
   }
@@ -98,6 +109,28 @@ export default class AvailableActions extends mixins(
     return actionComponent[this.selectedAction]
   }
 
+  public async created(): Promise<void> {
+    onApiConnect(() => {
+      const { api } = Connector.getInstance()
+      this.minimumOfferAmount = parseFloat(
+        formatBalance(
+          api?.consts?.marketplace?.minimumOfferAmount?.toString(),
+          12,
+          false
+        ).replace(/,/g, '')
+      )
+
+      this.isMakeOffersDisabled =
+        !this.isMakeOffersAllowed || this.minimumOfferAmount > this.balance
+
+      if (!this.isMakeOffersAllowed) {
+        this.tooltipOfferLabel = this.$t('tooltip.makeOfferDisabled')
+      } else if (this.minimumOfferAmount > this.balance) {
+        this.tooltipOfferLabel = this.$t('tooltip.makeOfferNotEnoughBalance')
+      }
+    })
+  }
+
   protected iconType(value: string) {
     return iconResolver[value]
   }

components/bsx/Gallery/Item/GalleryItem.vue

@@ -308,10 +308,10 @@ export default class GalleryItem extends mixins(
         ? cachedMeta
         : await fetchNFTMetadata(
             this.nft,
-            getSanitizer(this.nft.metadata, 'cloudflare', 'permafrost')
+            getSanitizer(this.nft.metadata, 'pinata', 'permafrost')
           )
 
-      const imageSanitizer = getSanitizer(meta.image, 'cloudflare')
+      const imageSanitizer = getSanitizer(meta.image, 'pinata')
       this.meta = {
         ...meta,
         image: imageSanitizer(meta.image),

components/bsx/Offer/OfferList.vue

@@ -110,6 +110,7 @@ export default class OfferList extends mixins(
           notificationTypes.success
         )
       })
+      this.fetchOffers()
     } catch (e: any) {
       showNotification(`[OFFER::ERR] ${e}`, notificationTypes.danger)
       this.$consola.error(e)

components/bsx/Offer/OfferTable.vue

@@ -1,7 +1,7 @@
 <template>
   <b-table :data="offers">
     <b-table-column
-      cell-class="is-vcentered"
+      cell-class="is-vcentered is-narrow"
       field="caller"
       :label="$t('offer.caller')"
       v-slot="props"
@@ -12,7 +12,7 @@
     </b-table-column>
 
     <b-table-column
-      cell-class="is-vcentered"
+      cell-class="is-vcentered is-narrow"
       field="price"
       :label="$t('offer.price')"
       v-slot="props"
@@ -21,7 +21,7 @@
     </b-table-column>
     <b-table-column
       v-if="!isBsxStats"
-      cell-class="is-vcentered"
+      cell-class="is-vcentered is-narrow"
       field="expiration"
       :label="$t('offer.expiration')"
       v-slot="props"
@@ -30,7 +30,7 @@
     </b-table-column>
     <b-table-column
       v-if="!isBsxStats"
-      cell-class="is-vcentered"
+      cell-class="is-vcentered is-narrow"
       :label="$t('offer.action')"
       v-slot="props"
       width="120"
@@ -50,9 +50,10 @@
     </b-table-column>
     <b-table-column
       v-if="isBsxStats"
-      cell-class="is-vcentered"
+      cell-class="is-vcentered is-narrow"
       :label="$t('nft.offer.item')"
-      v-slot="props">
+      v-slot="props"
+      sortable>
       <nuxt-link :to="`gallery/${props.row.nft.id}`">
         <p v-if="props.row.nft.name">{{ props.row.nft.name }}</p>
         <p v-else>{{ props.row.nft.id }}</p>
@@ -61,10 +62,11 @@
     <b-table-column
       v-if="isBsxStats"
       field="status"
-      cell-class="is-vcentered"
+      cell-class="is-vcentered is-narrow"
       :label="$t('nft.offer.status')"
       v-slot="props"
-      ><p>{{ props.row.status }}</p></b-table-column
+      sortable>
+      <p>{{ props.row.status }}</p></b-table-column
     >
     <b-table-column
       v-if="isBsxStats"

components/landing/CuratedList.vue

@@ -55,12 +55,11 @@ import {
   processMetadata,
 } from '~/utils/cachingStrategy'
 import PrefixMixin from '~/utils/mixins/prefixMixin'
-import Unknown from '../rmrk/Media/JsonMedia.vue'
 import resolveQueryPath from '~/utils/queryPathResolver'
 import { mapOnlyMetadata } from '~/utils/mappers'
 import { CollectionMetadata } from '../rmrk/types'
 import { fastExtract } from '~/utils/ipfs'
-import { getSanitizer } from '../rmrk/utils'
+import { getSanitizer, SomethingWithMeta } from '../rmrk/utils'
 import { Collection } from '~/components/unique/types'
 
 const components = {
@@ -72,7 +71,7 @@ const curatedCollection = [
   '800f8a914281765a7d-KITTY', // Kitty
   '2075be44ea4b9e422d-🐺', // WolfAngryClub
   '160a6f4320f11acb25-LCKWV', // PixelBabe
-  '7472058104f9f93924-KSMRAI', // Kusamurais (substraknights)
+  '0a24c7876a892acb79-RADTOADZ', // RadToadz (ZestLifeLab)
   '7cf9daa38281a57331-BSS', // Spaceships (ClownWorldHouse)
   '900D19DC7D3C444E4C-KSMBOT', // KusamaBot (deepologics)
 ]
@@ -81,7 +80,7 @@ const curatedCollection = [
   components,
 })
 export default class CuratedList extends mixins(AuthMixin, PrefixMixin) {
-  protected collections: Collection[] = []
+  protected collections: Collection[] | SomethingWithMeta[] = []
 
   async fetch() {
     const query = await resolveQueryPath(
@@ -108,7 +107,7 @@ export default class CuratedList extends mixins(AuthMixin, PrefixMixin) {
     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)
 

components/rmrk/Collection/List/CollectionList.vue

@@ -66,7 +66,6 @@
 
 <script lang="ts">
 import { Component, mixins, Vue, Watch } from 'nuxt-property-decorator'
-import shouldUpdate from '~/utils/shouldUpdate'
 import { Debounce } from 'vue-debounce-decorator'
 import {
   CollectionWithMeta,
@@ -263,7 +262,7 @@ export default class CollectionList extends mixins(
 
   @Watch('$route.query.search')
   protected onSearchChange(val: string, oldVal: string) {
-    if (shouldUpdate(val, oldVal)) {
+    if (val !== oldVal) {
       this.resetPage()
       this.searchQuery.search = val || ''
     }

components/rmrk/Gallery/AvailableActions.vue

@@ -21,7 +21,7 @@
           outlined
           @click="handleAction(action)"
           expanded>
-          {{ action }}
+          {{ actionLabel(action) }}
         </b-button>
       </template>
       <template v-else-if="isForSale">
@@ -33,7 +33,7 @@
             outlined
             @click="handleAction(ShoppingActions.BUY)"
             expanded>
-            {{ replaceBuyNowWithYolo ? 'YOLO' : 'BUY' }}
+            {{ replaceBuyNowWithYolo ? 'YOLO' : actionLabel('BUY') }}
           </b-button>
         </b-tooltip>
       </template>
@@ -84,7 +84,9 @@ import {
   ShoppingActions,
   KeyboardValueToActionMap,
   getActions,
+  getActionButtonLabel,
 } from '@/utils/shoppingActions'
+import { TranslateResult } from 'vue-i18n/types'
 
 type Address = string | GenericAccountId | undefined
 type IdentityFields = Record<string, string>
@@ -410,6 +412,10 @@ export default class AvailableActions extends mixins(
     this.meta = 0
     this.submit()
   }
+
+  protected actionLabel(value: ShoppingActions): TranslateResult {
+    return getActionButtonLabel(value, this)
+  }
 }
 </script>
 <style scoped lang="scss">

components/rmrk/Gallery/Gallery.vue

@@ -115,10 +115,8 @@ import AuthMixin from '@/utils/mixins/authMixin'
 import { NFTMetadata } from '../service/scheme'
 import { getSanitizer } from '../utils'
 import { SearchQuery } from './Search/types'
-import shouldUpdate from '~/utils/shouldUpdate'
 import resolveQueryPath from '~/utils/queryPathResolver'
 import { unwrapSafe } from '~/utils/uniquery'
-import { exist } from '@/components/rmrk/Gallery/Search/exist'
 import { notificationTypes, showNotification } from '@/utils/notification'
 
 import passionQuery from '@/queries/rmrk/subsquid/passionFeed.graphql'
@@ -408,7 +406,7 @@ export default class Gallery extends mixins(
 
   @Watch('$route.query.search')
   protected onSearchChange(val: string, oldVal: string) {
-    if (shouldUpdate(val, oldVal)) {
+    if (val !== oldVal) {
       this.resetPage()
       this.searchQuery.search = val || ''
     }