Merge pull request #11087 from kodadot/main

(beta): 22% of October 2024 Banana 🍌

assets/styles/pages/create.scss

@@ -14,29 +14,3 @@
     border: 1px solid theme('card-border-color');
   }
 }
-
-.sale :deep(.o-field__label) {
-  position: relative;
-  -webkit-text-stroke: 1px #000;
-  filter: drop-shadow(1px 1px #000);
-  font-weight: 700;
-  font-size: 18px;
-}
-
-.sale {
-  position: relative;
-}
-
-.hidden-sale-label {
-  @apply absolute pointer-events-none text-transparent bg-clip-text font-bold text-lg left-0 top-0;
-  background: linear-gradient(to right, white, white, white);
-  -webkit-text-stroke: 0;
-  -webkit-background-clip: text;
-}
-
-.sale.sale-on {
-  .hidden-sale-label {
-    background: linear-gradient(90deg, #ffffff 30%, #ff7ac3 100%);
-    background-clip: text;
-  }
-}

components/base/types.ts

@@ -1,5 +1,4 @@
 import type { Prefix } from '@kodadot1/static'
-import type { ItemResources } from '@/composables/useNft'
 
 export type BaseMintedCollection = {
   id: string
@@ -18,7 +17,7 @@ export type BaseTokenType<T = BaseMintedCollection> = {
   secondFile: File | null
 }
 
-export interface CarouselNFT extends ItemResources {
+export interface CarouselNFT {
   currentOwner: string
   id: string
   image: string

components/bsx/Create/RoyaltyForm.vue

@@ -11,19 +11,21 @@
       :max="99.99"
     />
 
-    <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
-    />
+    <template v-if="Number(vRoyalty)">
+      <BasicSwitch
+        v-model="isMine"
+        :label="isMine ? 'mint.royalty.mine' : 'mint.royalty.custom'"
+        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
+      />
+    </template>
   </div>
 </template>
 

components/buy/Buy.vue

@@ -54,6 +54,7 @@ const { $i18n } = useNuxtApp()
 const { isTransactionSuccessful } = useTransactionSuccessful({
   status,
   isError,
+  isLoading,
 })
 
 const nftSubscription = reactive<{

components/carousel/module/CarouselMedia.vue

@@ -4,12 +4,6 @@
     :class="{ 'carousel-media-collection': isCollection }"
   >
     <div :aria-label="`slide ${index + 1} of ${length}`">
-      <img
-        v-if="showCardIcon"
-        class="absolute z-[1] right-4 top-4"
-        :src="cardIcon"
-        alt="Card Icon"
-      >
       <BaseMediaItem
         class="carousel-media-wrapper"
         :src="imageSrc || ''"
@@ -39,15 +33,5 @@ const NuxtImg = resolveComponent('NuxtImg')
 
 const isCollection = inject('isCollection', false)
 
-const { urlPrefix } = usePrefix()
 const imageSrc = ref(props.item.image)
-const { showCardIcon, cardIcon } = useNftCardIcon(computed(() => props.item))
-
-watch(
-  () => props.item.image,
-  async () => {
-    const nft = await getNftMetadata(props.item, urlPrefix.value)
-    imageSrc.value = nft.image
-  },
-)
 </script>

components/collection/CollectionHeader.vue

@@ -0,0 +1,32 @@
+<template>
+  <div>
+    <CollectionBanner
+      :collection-id="collectionId"
+      :collection="collection"
+    />
+    <section class="pt-5">
+      <div class="container is-fluid">
+        <CollectionInfo
+          :collection-id="collectionId"
+          :collection="collection"
+        />
+        <hr class="!bg-k-grey mb-0">
+      </div>
+    </section>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { useCollectionMinimal } from '@/components/collection/utils/useCollectionDetails'
+import CollectionInfo from '@/components/collection/CollectionInfo.vue'
+import CollectionBanner from '@/components/collection/CollectionHeader/CollectionBanner.vue'
+
+const route = useRoute()
+const collectionId = computed(() => route.params.id.toString())
+
+const { collection, refetch } = useCollectionMinimal({
+  collectionId,
+})
+
+watch(collectionId, () => refetch())
+</script>

components/collection/CollectionHeader/CollectionBanner.vue

@@ -44,21 +44,15 @@ import { sanitizeIpfsUrl, toOriginalContentUrl } from '@/utils/ipfs'
 import HeroButtons from '@/components/collection/HeroButtons.vue'
 import { generateCollectionImage } from '@/utils/seoImageGenerator'
 import { convertMarkdownToText } from '@/utils/markdown'
-import collectionById from '@/queries/subsquid/general/collectionById.query'
 
 const NuxtImg = resolveComponent('NuxtImg')
 
-const collectionId = computed(() => route.params.id as string)
+const props = defineProps<{
+  collectionId: string
+  collection?: unknown
+}>()
+
 const route = useRoute()
-const { client } = usePrefix()
-
-const { data, refresh: refetch } = useAsyncQuery({
-  query: collectionById,
-  variables: {
-    id: collectionId.value,
-  },
-  clientId: client.value,
-})
 
 const collectionAvatar = ref('')
 const collectionName = ref('--')
@@ -67,13 +61,13 @@ const bannerImageUrl = computed(
   () => collectionAvatar.value && toOriginalContentUrl(collectionAvatar.value),
 )
 
-watch(collectionId, () => {
-  refetch()
+watch(() => props.collectionId, () => {
   collectionAvatar.value = ''
+  collectionName.value = '--'
 })
 
 watchEffect(async () => {
-  const collection = data.value?.collectionEntity
+  const collection = props.collection
   const metadata = collection?.metadata
   const image = collection?.meta?.image
   const name = collection?.name
@@ -102,21 +96,21 @@ watchEffect(async () => {
 useSeoMeta({
   title: collectionName,
   description: () =>
-    convertMarkdownToText(data.value?.collectionEntity?.meta?.description),
+    convertMarkdownToText(props.collection?.meta?.description),
   ogUrl: route.path,
   ogTitle: collectionName,
   ogDescription: () =>
-    convertMarkdownToText(data.value?.collectionEntity?.meta?.description),
+    convertMarkdownToText(props.collection?.meta?.description),
   ogImage: () =>
     generateCollectionImage(
       collectionName.value,
-      data.value?.nftEntitiesConnection?.totalCount,
+      props.collection?.nftCount,
       collectionAvatar.value,
     ),
   twitterImage: () =>
     generateCollectionImage(
       collectionName.value,
-      data.value?.nftEntitiesConnection?.totalCount,
+      props.collection?.nftCount,
       collectionAvatar.value,
     ),
 })

components/collection/CollectionInfo.vue

@@ -121,29 +121,31 @@
 
 <script setup lang="ts">
 import { NeoButton, NeoIcon } from '@kodadot1/brick'
-import {
-  useCollectionDetails,
-  useCollectionMinimal,
-} from './utils/useCollectionDetails'
+import { useCollectionDetails } from './utils/useCollectionDetails'
 import {
   DESCRIPTION_MAX_LENGTH,
   generatePreviewDescription,
 } from '@/components/collection/utils/description'
 
+const props = defineProps<{
+  collectionId: string
+  collection?: unknown
+}>()
+
 const body = ref(document.body)
 const route = useRoute()
 const { urlPrefix } = usePrefix()
 const { availableChains } = useChain()
-const collectionId = computed(() => route.params.id.toString())
+
 const chain = computed(
   () =>
     availableChains.value.find(chain => chain.value === route.params.prefix)
       ?.text,
 )
-const address = computed(() => collectionInfo.value?.displayCreator)
-const recipient = computed(() => collectionInfo.value?.recipient)
-const royalty = computed(() => collectionInfo.value?.royalty)
-const createdAt = computed(() => collectionInfo.value?.createdAt)
+const address = computed(() => props.collection?.displayCreator)
+const recipient = computed(() => props.collection?.recipient)
+const royalty = computed(() => props.collection?.royalty)
+const createdAt = computed(() => props.collection?.createdAt)
 const seeAllDescription = ref(false)
 
 const toggleSeeAllDescription = () => {
@@ -152,13 +154,13 @@ const toggleSeeAllDescription = () => {
 
 const hasSeeAllDescriptionOption = computed(() => {
   return (
-    (collectionInfo.value?.meta?.description?.length || 0)
+    (props.collection?.meta?.description?.length || 0)
     > DESCRIPTION_MAX_LENGTH
   )
 })
 
 const visibleDescription = computed(() => {
-  const desc = collectionInfo.value?.meta?.description
+  const desc = props.collection?.meta?.description
 
   return (
     (!hasSeeAllDescriptionOption.value || seeAllDescription.value
@@ -167,10 +169,7 @@ const visibleDescription = computed(() => {
   )
 })
 
-const { collection: collectionInfo } = useCollectionMinimal({
-  collectionId,
-})
 const { stats } = useCollectionDetails({
-  collectionId,
+  collectionId: computed(() => props.collectionId),
 })
 </script>

components/collection/CollectionRelatedDropNotification.vue

@@ -27,7 +27,7 @@
     </div>
   </div>
   <div
-    v-else
+    v-else-if="drop"
     class="flex w-full justify-center mt-4"
   >
     <NeoButton
@@ -45,7 +45,6 @@
 <script lang="ts" setup>
 import { NeoButton } from '@kodadot1/brick'
 import { getDropAttributes } from '../drops/utils'
-import { getDrops } from '@/services/fxart'
 import type { DropItem } from '@/params/types'
 
 const NuxtLink = resolveComponent('NuxtLink')
@@ -54,18 +53,13 @@ const props = defineProps<{
   collectionId: string
 }>()
 
-const { urlPrefix } = usePrefix()
+const { drop: dropItem, isPending } = useCollectionDrop(computed(() => props.collectionId))
 
 const drop = ref<DropItem>()
 
-onBeforeMount(async () => {
-  const fetchDrops = await getDrops({
-    chain: [urlPrefix.value],
-    collection: props.collectionId,
-  })
-
-  if (fetchDrops.length) {
-    drop.value = await getDropAttributes(fetchDrops[0].alias)
+watchEffect(async () => {
+  if (Boolean(dropItem.value) && !isPending.value) {
+    drop.value = await getDropAttributes(dropItem.value?.alias as string)
   }
 })
 </script>

components/collection/activity/Activity.vue

@@ -10,7 +10,8 @@
           <div class="w-2/3 pr-2">
             <ActivityChart
               :events="events"
-              class="mt-2"
+              :loading="loading"
+              :class="{ 'mt-2': !loading }"
             />
           </div>
           <div class="flex-1">
@@ -29,15 +30,21 @@
             :flippers="flippers"
           />
           <div class="max-width">
-            <ActivityChart :events="events" />
+            <ActivityChart
+              :events="events"
+              :loading="loading"
+            />
           </div>
         </div>
       </div>
       <hr
         class="mb-7"
         :class="{ 'my-7': !isBreadCrumbsShowing }"
       >
-      <Events :events="sortedEventsWithOffersDesc" />
+      <Events
+        :events="sortedEventsWithOffersDesc"
+        :loading="loading"
+      />
     </div>
   </div>
 </template>
@@ -63,8 +70,9 @@ const isBreadCrumbsShowing = computed(
   () => isAnyActivityFilterActive() && tablet.value,
 )
 
-const collectionId = computed(() => route.params.id)
-const { events, flippers, owners, offers } = useCollectionActivity({
+const collectionId = computed(() => route.params.id.toString())
+
+const { events, flippers, owners, offers, loading } = useCollectionActivity({
   collectionId,
 })