Merge pull request #10969 from kodadot/main

(beta): 36 % of September 2024 Yak 🦬

components/carousel/CarouselTypeDrops.vue

@@ -2,14 +2,15 @@
   <div ref="container">
     <template v-if="isDynamicGridReady">
       <CarouselModuleCarouselAgnostic
-        v-if="isReady"
+        v-if="isReady && dropsAlias"
         :key="dropsAlias.join('-')"
         v-slot="{ item }"
         :items="drops"
         :config="config"
       >
-        <DropsDropCard
+        <DropsDropItem
           :drop="item"
+          :show-minted="true"
         />
       </CarouselModuleCarouselAgnostic>
       <CarouselModuleCarouselAgnostic
@@ -24,22 +25,9 @@
 </template>
 
 <script lang="ts" setup>
-import { useDrops } from '@/components/drops/useDrops'
-
-let queries = {
-  limit: 14,
-  active: [true],
-  chain: ['ahp', 'base'],
-}
-
-const { urlPrefix } = usePrefix()
-
-if (!isProduction && urlPrefix.value === 'ahk') {
-  queries = {
-    ...queries,
-    chain: ['ahk'],
-  }
-}
+import { useQuery } from '@tanstack/vue-query'
+import { dropsVisible } from '@/utils/config/permission.config'
+import { getDrops } from '@/services/fxart'
 
 const container = ref()
 const { cols, isReady: isDynamicGridReady } = useDynamicGrid({
@@ -55,6 +43,16 @@ const skeletonCount = computed(() =>
   Number.isInteger(perView.value) ? perView.value : Math.ceil(perView.value),
 )
 
-const { drops, loaded: isReady } = useDrops(queries, { filterOutMinted: true })
-const dropsAlias = computed(() => drops.value.map(drop => drop.alias))
+const { urlPrefix } = usePrefix()
+
+const { data: drops, isSuccess: isReady } = useQuery({
+  queryKey: ['drop-items-carousel', urlPrefix.value],
+  queryFn: () => getDrops({
+    active: [true],
+    chain: dropsVisible(urlPrefix.value) ? [urlPrefix.value] : ['base', 'ahp'],
+    limit: 14,
+  }),
+})
+
+const dropsAlias = computed(() => drops.value?.map(drop => drop.alias))
 </script>

components/collection/CollectionInfo.vue

@@ -140,7 +140,7 @@ const chain = computed(
     availableChains.value.find(chain => chain.value === route.params.prefix)
       ?.text,
 )
-const address = computed(() => collectionInfo.value?.currentOwner)
+const address = computed(() => collectionInfo.value?.displayCreator)
 const recipient = computed(() => collectionInfo.value?.recipient)
 const royalty = computed(() => collectionInfo.value?.royalty)
 const createdAt = computed(() => collectionInfo.value?.createdAt)

components/collection/CollectionRelatedDropNotification.vue

@@ -1,6 +1,6 @@
 <template>
   <div
-    v-if="relatedActiveDrop"
+    v-if="drop && !drop.isMintedOut"
     class="flex w-full justify-center mt-4"
   >
     <div
@@ -20,19 +20,19 @@
       <div class="w-4 h-[1px] bg-separator-line-color mx-2" />
       <nuxt-link
         class="flex items-center font-bold my-2"
-        :to="`/${relatedActiveDrop.chain}/drops/${relatedActiveDrop.alias}`"
+        :to="`/${drop?.chain}/drops/${drop?.alias}`"
       >
         {{ $t('drops.viewDrop') }}
       </nuxt-link>
     </div>
   </div>
   <div
-    v-else-if="relatedEndedDrop"
+    v-else
     class="flex w-full justify-center mt-4"
   >
     <NeoButton
       :tag="NuxtLink"
-      :to="`/${relatedEndedDrop.chain}/drops/${relatedEndedDrop.alias}`"
+      :to="`/${drop?.chain}/drops/${drop?.alias}`"
       variant="secondary-rounded"
       icon-left="puzzle-piece"
       icon-pack="fal"
@@ -44,18 +44,28 @@
 
 <script lang="ts" setup>
 import { NeoButton } from '@kodadot1/brick'
-import { useRelatedActiveDrop } from '@/components/drops/useDrops'
+import { getDropAttributes } from '../drops/utils'
+import { getDrops } from '@/services/fxart'
+import type { DropItem } from '@/params/types'
 
 const NuxtLink = resolveComponent('NuxtLink')
 
 const props = defineProps<{
   collectionId: string
 }>()
 
-const collectionId = computed(() => props.collectionId)
 const { urlPrefix } = usePrefix()
-const { relatedActiveDrop, relatedEndedDrop } = useRelatedActiveDrop(
-  collectionId.value,
-  urlPrefix.value,
-)
+
+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)
+  }
+})
 </script>

components/collection/HeroButtons.vue

@@ -171,7 +171,7 @@ const shareCollectionToFarcaster = () => {
 const { collection } = useCollectionMinimal({
   collectionId,
 })
-const collectionIssuer = computed(() => collection.value?.issuer)
+const collectionIssuer = computed(() => collection.value?.displayCreator)
 const collectionNftCount = computed(() => collection.value?.nftCount)
 const collectionMaxCount = computed(() => collection.value?.max)
 

components/collection/drop/GenerativeLayout.vue

@@ -43,8 +43,8 @@
 
           <CollectionDropPhase
             class="mt-28 md:mt-7"
-            :drop-status="formattedDropItem?.status"
-            :drop-start-time="formattedDropItem?.dropStartTime"
+            :drop-status="drop?.status"
+            :drop-start-time="drop?.dropStartTime"
           />
 
           <CollectionUnlockableTag :collection-id="drop?.collection" />
@@ -89,16 +89,9 @@
 
 <script setup lang="ts">
 import { useWindowSize } from '@vueuse/core'
-import type {
-  Drop } from '@/components/drops/useDrops'
-import {
-  getFormattedDropItem,
-} from '@/components/drops/useDrops'
-import { useCollectionActivity } from '@/composables/collectionActivity/useCollectionActivity'
-import { useCollectionMinimal } from '@/components/collection/utils/useCollectionDetails'
 import useCursorDropEvents from '@/composables/party/useCursorDropEvents'
 import { DropEventType } from '@/composables/party/types'
-import type { DropItem } from '@/params/types'
+import { fetchOdaCollectionOwners } from '@/services/oda'
 
 const mdBreakpoint = 768
 
@@ -109,32 +102,20 @@ const { previewItem, userMintsCount } = storeToRefs(useDropStore())
 const { width } = useWindowSize()
 
 const { emitEvent, completeLastEvent } = useCursorDropEvents()
-const { collection: collectionInfo } = useCollectionMinimal({
-  collectionId: computed(() => drop.value?.collection ?? ''),
-})
 
 const divider = ref()
 
 const address = computed(() => drop.value?.creator)
 
-const { owners } = useCollectionActivity({
-  collectionId: computed(() => drop.value?.collection),
+const owners = ref()
+const ownerAddresses = computed(() => Object.keys(owners.value?.owners || {}))
+watchEffect(async () => {
+  if (!drop.value?.collection) {
+    return
+  }
+
+  owners.value = await fetchOdaCollectionOwners(drop.value.chain, drop.value.collection)
 })
-const ownerAddresses = computed(() => Object.keys(owners.value || {}))
-
-const formattedDropItem = ref<Drop>()
-watch(
-  [collectionInfo],
-  async () => {
-    if (collectionInfo.value) {
-      formattedDropItem.value = await getFormattedDropItem(
-        collectionInfo.value,
-        drop.value as DropItem,
-      )
-    }
-  },
-  { immediate: true },
-)
 
 const handleNftGeneration = (preview: GenerativePreviewItem) => {
   emitEvent(DropEventType.DROP_GENERATING)

components/collection/drop/Phase.vue

@@ -101,21 +101,6 @@
       :title="`Drop: ${drop.name}`"
       :drop-start-time="dropStartTime"
     />
-
-    <!-- if there is location on the campaign -->
-    <CollectionDropRequirementItem
-      v-if="drop?.location"
-      :fulfilled="Boolean(drop?.userAccess)"
-    >
-      <p class="capitalize">
-        Location Verification: You are
-        <span
-          v-if="!Boolean(drop?.userAccess)"
-          class="font-bold"
-        >not</span> in
-        <span class="font-bold">{{ drop?.location }}</span>
-      </p>
-    </CollectionDropRequirementItem>
   </div>
 </template>
 

components/collection/drop/modal/shared/SuccessfulDrop.vue

@@ -55,8 +55,10 @@ const itemMedias = props.mintingSession.items.map(item => ({
 }))
 const items = ref<ItemMedia[]>(itemMedias)
 
-// update serial number in nft.name asynchronously
 onMounted(async () => {
+  toast('Successfully minted token. There is a 1 minute indexer and worker delay for this action to appear in the website.', { position: 'top-right', duration: 15000 })
+
+  // update serial number in nft.name asynchronously
   const metadatas = await Promise.all(
     items.value.map(item => $fetch<{ name?: string }>(item.metadata)),
   )