Merge pull request kodadot#10607 from kodadot/switch-to-dyndata

feat: use dyndata endpoint for drops

components/collection/drop/modal/PaidMint.vue

@@ -7,8 +7,6 @@
       :title="title"
       :scrollable="false"
       :loading="loading"
-      :custom-skeleton-title="preStepTitle"
-      :estimated-time="estimedTime"
       @close="close"
     >
       <MintOverview
@@ -63,8 +61,6 @@ enum ModalStep {
   SUCCEEDED = 'succeded',
 }
 
-const IPFS_ESTIMATED_TIME_SECONDS = 15
-
 const emit = defineEmits(['confirm', 'update:modelValue', 'list', 'close'])
 const props = defineProps<{
   modelValue: boolean
@@ -94,10 +90,6 @@ const isSingleMintNotReady = computed(
   () => amountToMint.value === 1 && !canMint.value,
 )
 
-const estimedTime = computed(() =>
-  isSingleMintNotReady.value ? IPFS_ESTIMATED_TIME_SECONDS : undefined,
-)
-
 const mintButton = computed(() => {
   if (!canMint.value) {
     return {
@@ -117,10 +109,6 @@ const loading = computed(
     || false,
 )
 
-const preStepTitle = computed<string | undefined>(() =>
-  isSingleMintNotReady.value ? $i18n.t('drops.mintDropError') : undefined,
-)
-
 const isMintOverviewStep = computed(
   () => modalStep.value === ModalStep.OVERVIEW,
 )

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

@@ -34,6 +34,7 @@ const { toast } = useToast()
 const { urlPrefix } = usePrefix()
 const { accountId } = useAuth()
 const { getCollectionFrameUrl } = useSocialShare()
+const { toMintNFTs } = storeToRefs(useDropStore())
 
 const cantList = computed(() => !props.canListNfts)
 const txHash = computed(() => props.mintingSession.txHash ?? '')
@@ -42,30 +43,48 @@ const mintedNft = computed<MintedNFT | undefined>(
   () => props.mintingSession.items[0],
 )
 
-const items = computed<ItemMedia[]>(() =>
-  props.mintingSession.items.map(item => ({
-    id: item.id,
-    name: item.name,
-    image: item.image,
-    collection: item.collection.id,
-    collectionName: item.collection.name,
-    mimeType: item.mimeType,
-  })),
-)
+const itemMedias = props.mintingSession.items.map(item => ({
+  id: item.id,
+  name: item.name,
+  image: item.image,
+  collection: item.collection.id,
+  collectionName: item.collection.name,
+  mimeType: item.mimeType,
+  metadata: item.metadata,
+}))
+const items = ref<ItemMedia[]>(itemMedias)
+
+// update serial number in nft.name asynchronously
+onMounted(async () => {
+  const metadatas = await Promise.all(
+    items.value.map(item => $fetch<{ name?: string }>(item.metadata)),
+  )
+
+  items.value.forEach((_, index) => {
+    const metadata = metadatas[index]
+    if (metadata.name) {
+      items.value[index].name = metadata.name
+      toMintNFTs.value[index].name = metadata.name
+    }
+  })
+})
 
 const nftPath = computed(
-  () => `/${mintedNft.value?.chain}/gallery/${mintedNft.value?.id}`,
+  () =>
+    `/${mintedNft.value?.chain}/gallery/${mintedNft.value?.collection.id}-${mintedNft.value?.id}`,
 )
 const nftFullUrl = computed(() => `${window.location.origin}${nftPath.value}`)
 const userProfilePath = computed(
   () => `/${urlPrefix.value}/u/${accountId.value}`,
 )
 
+const getItemSn = (name: string) => `#${name.split('#')[1]}`
+
 const sharingTxt = computed(() =>
   singleMint.value
-    ? $i18n.t('sharing.dropNft', [`#${mintedNft.value?.index}`])
+    ? $i18n.t('sharing.dropNft', [getItemSn(items.value[0].name)])
     : $i18n.t('sharing.dropNfts', [
-      props.mintingSession.items.map(item => `#${item.index}`).join(', '),
+      items.value.map(item => getItemSn(item.name)).join(', '),
     ]),
 )
 

components/collection/drop/types.ts

@@ -33,8 +33,8 @@ export type MintedNFT = {
   chain: string
   name: string
   image: string
-  index: number
-  collection: { id: string, name: string, max: number }
+  collection: { id: string, name: string, max?: number }
+  metadata: string
   mimeType?: string
 }
 

components/common/successfulModal/SuccessfulItemsMedia.vue

@@ -27,6 +27,7 @@ export type ItemMedia = {
   collectionName: string
   price?: string
   mimeType?: string
+  metadata: string
 }
 
 const props = defineProps<{

composables/drop/massmint/useDropMassMint.ts

@@ -1,36 +1,65 @@
 import { useCollectionEntity } from '../useGenerativeDropMint'
 import type { ToMintNft } from '@/components/collection/drop/types'
-import type { DoResult } from '@/services/fxart'
-import { updateMetadata } from '@/services/fxart'
+import { generateId, setDyndataUrl } from '@/services/dyndata'
 
 export type MassMintNFT = Omit<ToMintNft, 'priceUSD'> & {
-  metadata?: string
+  image: string
+  metadata: string
   nft: number // nft id
   sn?: number // serial numbers
 }
 
 export default () => {
   const dropStore = useDropStore()
   const { collectionName } = useCollectionEntity()
-
   const { drop, amountToMint, toMintNFTs, loading } = storeToRefs(dropStore)
+  const { isSub } = useIsChain(usePrefix().urlPrefix)
+
+  // ensure tokenIds are unique on single user session
+  const tokenIds = ref<number[]>([])
+  const populateTokenIds = async () => {
+    for (const _ of Array.from({ length: amountToMint.value })) {
+      const tokenId = Number.parseInt(await generateId())
+      if (!tokenIds.value.includes(tokenId)) {
+        tokenIds.value.push(tokenId)
+      }
+    }
+
+    if (tokenIds.value.length < amountToMint.value) {
+      await populateTokenIds()
+    }
+  }
 
-  const clearMassmint = () => {
+  const clearMassMint = () => {
     dropStore.resetMassmint()
+    tokenIds.value = []
   }
 
   const massGenerate = async () => {
     try {
-      clearMassmint()
+      clearMassMint()
+      if (isSub.value) {
+        await populateTokenIds()
+      }
+
+      toMintNFTs.value = Array.from({ length: amountToMint.value }).map(
+        (_, index) => {
+          const { image, metadata } = setDyndataUrl({
+            chain: drop.value.chain,
+            collection: drop.value.collection,
+            nft: tokenIds.value[index],
+          })
 
-      toMintNFTs.value = Array.from({ length: amountToMint.value }).map(() => {
-        return {
-          name: drop.value.name,
-          collectionName: collectionName.value,
-          price: drop.value.price?.toString() || '',
-          nft: parseInt(uidMathDate()),
-        }
-      })
+          return {
+            name: drop.value.name,
+            collectionName: collectionName.value,
+            price: drop.value.price?.toString() || '',
+            nft: tokenIds.value[index],
+            metadata,
+            image,
+          }
+        },
+      )
 
       console.log('[MASSMINT::GENERATE] Generated', toRaw(toMintNFTs.value))
     }
@@ -40,27 +69,10 @@ export default () => {
     }
   }
 
-  const submitMint = async (nft: MassMintNFT): Promise<DoResult> => {
-    return new Promise((resolve, reject) => {
-      try {
-        updateMetadata({
-          chain: drop.value.chain,
-          collection: drop.value.collection,
-          nft: nft.nft,
-          sn: nft.sn,
-        }).then(result => resolve(result))
-      }
-      catch (e) {
-        reject(e)
-      }
-    })
-  }
-
-  onBeforeUnmount(clearMassmint)
+  onBeforeUnmount(clearMassMint)
 
   return {
     massGenerate,
-    submitMint,
-    clearMassMint: clearMassmint,
+    clearMassMint,
   }
 }

composables/drop/massmint/useDropMassMintListing.ts

@@ -5,7 +5,7 @@ export default () => {
   const { client } = usePrefix()
   const { listNftByNftWithMetadata } = useListingCartModal()
 
-  const { mintedNFTs, mintingSession } = storeToRefs(useDropStore())
+  const { mintedNFTs, toMintNFTs } = storeToRefs(useDropStore())
 
   const subscribeForNftsWithMetadata = (nftIds: string[]) => {
     subscribeToNfts(nftIds, async (data) => {
@@ -29,10 +29,11 @@ export default () => {
   }
 
   const listMintedNFTs = () => {
-    mintedNFTs.value.forEach((withMetadataNFT: NFTWithMetadata) => {
-      const mintingSessionNFT = mintingSession.value.items.find(
-        nft => nft.id === withMetadataNFT.id,
+    mintedNFTs.value.forEach(async (withMetadataNFT: NFTWithMetadata) => {
+      const mintingSessionNFT = toMintNFTs.value.find(
+        nft => nft.nft.toString() === withMetadataNFT.sn,
       )
+
       listNftByNftWithMetadata(
         {
           ...withMetadataNFT,