Merge branch 'main' into issue-10753

components/Navbar.vue

@@ -290,7 +290,7 @@ const logoSrc = computed(() => {
 const dropsPath = computed(() => {
   const prefix = pickByVm({
     SUB: 'ahp',
-    EVM: 'base',
+    EVM: urlPrefix.value,
   })
   return `/${prefix}/drops`
 })

components/carousel/CarouselTypeDrops.vue

@@ -29,9 +29,10 @@
 import type { Drop } from '@/components/drops/useDrops'
 import { useDrops } from '@/components/drops/useDrops'
 import { openReconnectWalletModal } from '@/components/common/ConnectWallet/openReconnectWalletModal'
+import { vmOf } from '@/utils/config/chain.config'
 
 let queries = {
-  limit: 12,
+  limit: 14,
   active: [true],
   chain: ['ahp', 'base'],
 }
@@ -48,7 +49,7 @@ if (!isProduction && urlPrefix.value === 'ahk') {
 
 const container = ref()
 const { accountId } = useAuth()
-const { vmOf } = useChain()
+
 const router = useRouter()
 const { cols, isReady: isDynamicGridReady } = useDynamicGrid({
   container,
@@ -63,7 +64,7 @@ const skeletonCount = computed(() =>
   Number.isInteger(perView.value) ? perView.value : Math.ceil(perView.value),
 )
 
-const { drops, loaded: isReady } = useDrops(queries)
+const { drops, loaded: isReady } = useDrops(queries, { filterOutMinted: true })
 const dropsAlias = computed(() => drops.value.map(drop => drop.alias))
 
 const onDropClick = ({ path, drop }: { path: string, drop: Drop }) => {

components/codeChecker/CodeChecker.vue

@@ -234,11 +234,11 @@ import type { AssetMessage, Validity } from './types'
 const RESOURCES_LIST = [
   {
     title: 'codeChecker.kodahashTemplate',
-    url: 'https://hello.kodadot.xyz/tutorial/generative-art',
+    url: 'https://github.com/vikiival/kodahash',
   },
   {
     title: 'codeChecker.learnAboutGenArt',
-    url: 'https://github.com/vikiival/kodahash',
+    url: 'https://hello.kodadot.xyz/tutorial/generative-art',
   },
   {
     title: 'codeChecker.codeChecker',

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<{

components/create/CreateCollection.vue

@@ -277,8 +277,10 @@ const royalty = ref({
 })
 
 const menus = availablePrefixes().filter(
-  menu => menu.value !== 'ksm' && menu.value !== 'rmrk',
-)
+  (menu) => {
+    const { isRemark, isEvm } = useIsChain(computed(() => menu.value as Prefix))
+    return !isRemark.value && !isEvm.value
+  })
 
 const chainByPrefix = menus.find(menu => menu.value === urlPrefix.value)
 const selectBlockchain = ref(chainByPrefix?.value || menus[0].value)

components/create/CreateNft.vue

@@ -393,8 +393,11 @@ const imagePreview = computed(() => {
 
 // select available blockchain
 const menus = availablePrefixes().filter(
-  menu => menu.value !== 'ksm' && menu.value !== 'rmrk',
-)
+  (menu) => {
+    const { isRemark, isEvm } = useIsChain(computed(() => menu.value as Prefix))
+    return !isRemark.value && !isEvm.value
+  })
+
 const chainByPrefix = computed(() =>
   menus.find(menu => menu.value === urlPrefix.value),
 )

components/drops/Drops.vue

@@ -36,7 +36,7 @@
       :drops="currentDrops"
       :loaded="loaded"
       :default-skeleton-count="DEFAULT_SKELETON_COUNT"
-      :async-skeleton-count="Math.round((count/2) - currentDrops.length)"
+      :async-skeleton-count="asyncSkeletonCountOf(currentDrops.length)"
       skeleton-key="current-drops-skeleton"
     />
 
@@ -56,7 +56,7 @@
       :drops="pastDrops"
       :loaded="loaded"
       :default-skeleton-count="DEFAULT_SKELETON_COUNT"
-      :async-skeleton-count="Math.round((count/2) - pastDrops.length)"
+      :async-skeleton-count="asyncSkeletonCountOf(pastDrops.length)"
       skeleton-key="skeleton"
     />
 
@@ -96,6 +96,8 @@ const pastDrops = computed(() =>
   filter(drops.value, { status: DropStatus.MINTING_ENDED }),
 )
 
+const asyncSkeletonCountOf = (amount: number) => count.value ? Math.max(0, Math.round((count.value) / 2) - amount) : DEFAULT_SKELETON_COUNT
+
 const checkRouteAvailability = () => {
   if (!dropsVisible(urlPrefix.value)) {
     navigateTo('/')

components/drops/DropsGrid.vue

@@ -5,7 +5,7 @@
     persist
   >
     <template
-      v-if="asyncSkeletonCount ? true : loaded"
+      v-if="isAsync || loaded"
     >
       <div
         v-for="(drop, index) in drops"
@@ -23,7 +23,7 @@
     </template>
     <template v-if="!loaded">
       <DropsDropCardSkeleton
-        v-for="x in asyncSkeletonCount || defaultSkeletonCount"
+        v-for="x in isAsync ? asyncSkeletonCount : defaultSkeletonCount"
         :key="`${skeletonKey}-${x}`"
       />
     </template>
@@ -41,7 +41,7 @@ const GRID_DEFAULT_WIDTH = {
   large: 0,
 }
 
-defineProps<{
+const props = defineProps<{
   drops: Drop[] | InternalDropCalendar[]
   loaded: boolean
   defaultSkeletonCount: number
@@ -50,6 +50,8 @@ defineProps<{
   clickable?: boolean
 }>()
 
+const isAsync = computed(() => typeof props.asyncSkeletonCount === 'number')
+
 const isDrop = (item: Drop | InternalDropCalendar): item is Drop =>
   (item as Drop).collection !== undefined
 </script>

components/drops/useDrops.ts

@@ -49,7 +49,7 @@ const DROP_LIST_ORDER = [
 
 const ONE_DAYH_IN_MS = 24 * 60 * 60 * 1000
 
-export function useDrops(query?: GetDropsQuery, { async = false }: { async?: boolean } = { }) {
+export function useDrops(query?: GetDropsQuery, { async = false, filterOutMinted = false }: { async?: boolean, filterOutMinted?: boolean } = { }) {
   const drops = ref<Drop[]>([])
   const dropsList = ref<DropItem[]>([])
   const count = computed(() => dropsList.value.length)
@@ -79,7 +79,7 @@ export function useDrops(query?: GetDropsQuery, { async = false }: { async?: boo
     else {
       drops.value = await Promise.all(
         dropsList.value.map(async drop => getFormattedDropItem(drop, drop)),
-      )
+      ).then(dropsList => filterOutMinted ? dropsList.filter(drop => !drop.isMintedOut) : dropsList)
 
       loaded.value = true
     }

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,
   }
 }