Merge branch 'main' into 7880

components/bsx/Create/RoyaltyForm.vue

@@ -2,18 +2,23 @@
  <div>
  <BasicNumberInput
  v-model="vRoyalty"
+ data-testid="royalty-form-input-percentage"
  :label="$t('mint.royalty.rate')"
  expanded
  :step="0.1"
  :min-step="0.01"
  :min="0"
  :max="99.99" />
 
- <BasicSwitch v-model="isMine" label="mint.royalty.mine" />
+ <BasicSwitch
+ v-model="isMine"
+ label="mint.royalty.mine"
+ data-testid="royalty-form-switch" />
  <AddressInput
  v-show="!isMine"
  v-model="vAddress"
  label="mint.royalty.receiver"
+ data-testid="royalty-form-custom-address"
  :strict="false"
  empty-on-error />
  </div>

components/collectionDetailsPopover/CollectionDetailsPopover.vue

@@ -3,22 +3,24 @@
  :append-to="body"
  placement="bottom"
  :delay="[showDelay, hideDelay]"
- data-testid="identity">
+ data-testid="identity"
+ @show="triggered = true">
  <slot name="content" />
 
  <template #content>
  <div class="popover-container">
- <CollectionDetailsPopoverContent :nft="nft" />
+ <CollectionDetailsPopoverContent v-if="triggered" :nft="nft" />
  </div>
  </template>
  </tippy>
 </template>
 
 <script lang="ts" setup>
-import { CarouselNFT } from '../base/types'
+import type { CarouselNFT } from '../base/types'
 import CollectionDetailsPopoverContent from './CollectionDetailsPopoverContent.vue'
 
 const body = ref(document.body)
+const triggered = ref(false)
 
 withDefaults(
  defineProps<{

components/collectionDetailsPopover/CollectionDetailsPopoverContent.vue

@@ -79,7 +79,7 @@
 </template>
 
 <script lang="ts" setup>
-import { CarouselNFT } from '../base/types'
+import type { CarouselNFT } from '../base/types'
 import {
  useBuyEvents,
  useCollectionDetails,

components/create/CreateLanding.vue

@@ -16,6 +16,7 @@
  </div>
  <button
  class="pack-box"
+ data-testid="create-landing-nft-button"
  @click="router.push({ query: { select: 'nft' } })">
  <div class="pack-content">
  <NeoIcon icon="gem" custom-size="fa-3x" />
@@ -59,7 +60,10 @@
  </div>
 
  <div v-else class="pack">
- <div class="pack-box" @click="gotoPathAfterLogin('/create/nft')">
+ <div
+ class="pack-box"
+ data-testid="create-landing-single-nft-button"
+ @click="gotoPathAfterLogin('/create/nft')">
  <div class="pack-content">
  <NeoIcon icon="image" custom-size="fa-3x" />
  <div class="pack-content-text">
@@ -72,6 +76,7 @@
  </div>
  <div
  class="pack-box"
+ data-testid="create-landing-multiple-nft-button"
  @click="gotoPathAfterLogin(`/${urlPrefix}/massmint`)">
  <div class="pack-content">
  <NeoIcon icon="photo-film" custom-size="fa-3x" />

components/create/CreateNft.vue

@@ -12,7 +12,8 @@
  :price="form.salePrice"
  :symbol="chainSymbol"
  :chain="currentChain"
- :image="imagePreview" />
+ :image="imagePreview"
+ data-testid="create-nft-preview-box" />
 
  <h1 class="title is-size-3 mb-7">
  {{ $t('mint.nft.create') }}
@@ -38,6 +39,7 @@
  :error="!form.name">
  <NeoInput
  v-model="form.name"
+ data-testid="create-nft-input-name"
  required
  :placeholder="$t('mint.nft.name.placeholder')" />
  </NeoField>
@@ -46,6 +48,7 @@
  <NeoField :label="`${$t('mint.nft.description.label')} (optional)`">
  <NeoInput
  v-model="form.description"
+ data-testid="create-nft-input-description"
  type="textarea"
  has-counter
  maxlength="1000"
@@ -88,7 +91,7 @@
  <div class="w-full">
  <p>{{ $t('mint.nft.sale.message') }}</p>
  </div>
- <NeoSwitch v-model="form.sale" />
+ <NeoSwitch v-model="form.sale" data-testid="create-nft-sale-switch" />
  </NeoField>
  <!-- list for sale price -->
  <NeoField
@@ -101,8 +104,10 @@
  class="is-flex is-justify-content-space-between is-align-items-center">
  <NeoInput
  v-model="form.salePrice"
+ data-testid="create-nft-input-list-value"
  type="number"
  step="0.01"
+ min="0.01"
  pattern="[0-9]+([\.,][0-9]+)?"
  placeholder="0.01 is the minimum"
  expanded />
@@ -117,8 +122,17 @@
  <NeoField :label="`${$t('mint.blockchain.label')} *`">
  <div class="w-100">
  <p>{{ $t('mint.blockchain.message') }}</p>
- <NeoSelect v-model="selectChain" class="mt-3" expanded required>
- <option v-for="menu in menus" :key="menu.value" :value="menu.value">
+ <NeoSelect
+ v-model="selectChain"
+ class="mt-3"
+ data-testid="create-nft-dropdown-select"
+ expanded
+ required>
+ <option
+ v-for="menu in menus"
+ :key="menu.value"
+ :value="menu.value"
+ :data-testid="`nft-chain-dropdown-option-${menu.value}`">
  {{ menu.text }}
  </option>
  </NeoSelect>
@@ -131,6 +145,7 @@
  <p>{{ $t('mint.nft.copies.message') }}</p>
  <NeoInput
  v-model="form.copies"
+ data-testid="create-nft-input-copies"
  class="mt-3"
  type="number"
  placeholder="e.g 10"
@@ -139,29 +154,34 @@
  <BasicSwitch
  v-if="form.copies > 1"
  v-model="form.postfix"
+ data-testid="create-nft-input-copies-switch"
  class="mt-3"
  label="mint.expert.postfix" />
  </div>
  </NeoField>
 
  <!-- nft properties -->
  <NeoField :label="`${$t('tabs.properties')} (optional)`">
- <CustomAttributeInput v-model="form.tags" :max="10" />
+ <CustomAttributeInput
+ v-model="form.tags"
+ :max="10"
+ data-testid="create-nft-properties" />
  </NeoField>
 
  <!-- royalty -->
  <NeoField v-if="!isRmrk">
  <RoyaltyForm
  v-model:amount="form.royalty.amount"
- v-model:address="form.royalty.address" />
+ v-model:address="form.royalty.address"
+ data-testid="create-nft-royalty" />
  </NeoField>
 
  <!-- explicit content -->
  <NeoField :label="`${$t('mint.nfsw')}`">
  <div class="w-full">
  <p>{{ $t('mint.nfswMessage') }}</p>
  </div>
- <NeoSwitch v-model="form.nsfw" />
+ <NeoSwitch v-model="form.nsfw" data-testid="create-nft-nsfw-switch" />
  </NeoField>
 
  <hr class="my-6" />
@@ -170,7 +190,9 @@
  <div>
  <div class="is-flex has-text-weight-medium has-text-info">
  <div>{{ $t('mint.deposit') }}:&nbsp;</div>
- <div>{{ totalItemDeposit }} {{ chainSymbol }}</div>
+ <div data-testid="create-nft-deposit-amount">
+ {{ totalItemDeposit }} {{ chainSymbol }}
+ </div>
  </div>
  <div class="is-flex">
  <div>{{ $t('general.balance') }}:&nbsp;</div>
@@ -187,6 +209,7 @@
  <NeoButton
  expanded
  :label="$t('mint.nft.create')"
+ data-testid="create-nft-button-new"
  class="is-size-6"
  native-type="submit"
  size="medium"
@@ -205,6 +228,7 @@
  href="https://hello.kodadot.xyz/multi-chain/fees"
  target="_blank"
  class="has-text-link"
+ data-testid="create-nft-learn-more-link"
  rel="nofollow noopener noreferrer">
  {{ $t('helper.learnMore') }}
  </a>

components/create/CreateNftPreview.vue

@@ -11,14 +11,20 @@
  </p>
  </div>
  <div class="preview-content border-top p-3">
- <p class="has-text-weight-bold is-ellipsis">{{ name || 'Untitled' }}</p>
+ <p
+ class="has-text-weight-bold is-ellipsis"
+ data-testid="nft-preview-name">
+ {{ name || 'Untitled' }}
+ </p>
  <p class="is-size-7 is-ellipsis has-text-grey">
  {{ collection || $t('mint.nft.preview.noCollection') }}
  </p>
 
  <div
  class="is-flex is-justify-content-space-between is-align-items-center mt-2">
- <p class="">{{ price || '$$$' }} {{ symbol }}</p>
+ <p class="" data-testid="nft-preview-price">
+ {{ price || '$$$' }} {{ symbol }}
+ </p>
  <p class="is-capitalized is-size-7 has-text-grey">
  {{ chain ? getChainNameByPrefix(chain) : '--' }}
  </p>

components/items/ItemsGrid/ItemsGrid.vue

@@ -143,16 +143,15 @@ const { items, fetchSearch, clearFetchResults, usingTokens } = useFetchSearch({
 watch(
  () => items.value.length,
  async () => {
- if (
- listingCartEnabled.value &&
- usingTokens.value &&
- items.value.length > 0
- ) {
- const nftsForPotentialList = await getTokensNfts(
- items.value as TokenEntity[],
- )
-
- updatePotentialNftsForListingCart(nftsForPotentialList as NFT[])
+ if (listingCartEnabled.value && items.value.length > 0) {
+ if (usingTokens.value) {
+ const nftsForPotentialList = await getTokensNfts(
+ items.value as TokenEntity[],
+ )
+ updatePotentialNftsForListingCart(nftsForPotentialList as NFT[])
+ } else {
+ updatePotentialNftsForListingCart(items.value as NFT[])
+ }
  }
  },
  { immediate: true },

components/rmrk/Create/AttributeInput.vue

@@ -5,6 +5,7 @@
  no-shadow
  size="medium"
  icon-left="times"
+ data-testid="attribute-button-remove"
  @click="remove" />
  <NeoInput
  v-model="vKey"

components/rmrk/Create/CustomAttributeInput.vue

@@ -3,6 +3,7 @@
  <div
  v-for="(attribute, index) in attributes"
  :key="index"
+ :data-testid="`attr-${index}`"
  class="custom-attribute-input my-4">
  <AttributeInput
  v-model:trait_type="attributes[index].trait_type"
@@ -15,6 +16,7 @@
  class="my-4"
  :disabled="disabled"
  icon-left="plus"
+ data-testid="button-add-attribute"
  @click="addAttribute">
  Add Attribute
  </NeoButton>

components/search/SearchSuggestion.vue

@@ -256,8 +256,8 @@ import { useDebounceFn } from '@vueuse/core'
 import seriesInsightList from '@/queries/rmrk/subsquid/seriesInsightList.graphql'
 import { denyList } from '@/utils/constants'
 import {
- CollectionWithMeta,
- NFTWithMeta,
+ type CollectionWithMeta,
+ type NFTWithMeta,
 } from '@/components/rmrk/service/scheme'
 import { sanitizeIpfsUrl } from '@/utils/ipfs'
 import { logError, mapNFTorCollectionMetadata } from '@/utils/mappers'

components/shared/QRCode.vue

@@ -8,7 +8,8 @@
 </template>
 
 <script setup lang="ts">
-import QrcodeVue, { Level } from 'qrcode.vue'
+import type { Level } from 'qrcode.vue'
+import QrcodeVue from 'qrcode.vue'
 
 withDefaults(
  defineProps<{

components/teleport/NetworkDropdown.vue

@@ -0,0 +1,71 @@
+<template>
+ <div>
+ <NeoDropdown class="w-full">
+ <template #trigger="{ active }">
+ <NeoButton
+ no-shadow
+ expanded
+ rounded
+ class="dropdown-trigger"
+ :icon="active ? 'chevron-up' : 'chevron-down'">
+ <div class="is-flex is-flex-items-center">
+ <img
+ class="mr-2"
+ width="24"
+ height="24"
+ :src="selectedNetwork?.icon"
+ alt="icon" />
+ <span>{{ selectedNetwork?.label }}</span>
+ </div>
+ </NeoButton>
+ </template>
+ <NeoDropdownItem
+ v-for="opt in validateOptions"
+ :key="opt.value"
+ :active="value === opt.value"
+ @click="emit('select', opt.value)">
+ <div class="is-flex is-flex-items-center">
+ <img class="mr-2" width="24" height="24" :src="opt.icon" alt="icon" />
+ <span>{{ opt.label }}</span>
+ </div>
+ </NeoDropdownItem>
+ </NeoDropdown>
+ </div>
+</template>
+
+<script setup lang="ts">
+import { NeoButton, NeoDropdown, NeoDropdownItem } from '@kodadot1/brick'
+import { Chain } from '@/utils/teleport'
+
+type NetworkOption = {
+ label: string
+ value: Chain
+ disabled?: ComputedRef<boolean>
+ icon: string
+}
+const props = defineProps<{
+ options: NetworkOption[]
+ value: string
+}>()
+
+const emit = defineEmits(['select'])
+
+const selectedNetwork = computed<NetworkOption | undefined>(() => {
+ return props.options.find((opt) => opt.value === props.value)
+})
+const validateOptions = computed(() => {
+ return props.options.filter((opt) => !opt.disabled?.value)
+})
+</script>
+
+<style lang="scss" scoped>
+@import '@/assets/styles/abstracts/variables';
+
+.dropdown-trigger {
+ height: 2.5rem;
+
+ @include ktheme() {
+ border: 1px solid theme('border-color');
+ }
+}
+</style>