Merge pull request #10713 from kodadot/fix--drops-max-count

fix: drops max count

components/collection/drop/GenerativeLayout.vue

@@ -29,7 +29,7 @@
           <CollectionUnlockableCollectionInfo
             class="mt-7"
             :collection-id="drop?.collection"
-            :description="description"
+            :description="drop.collectionDescription"
           />
 
           <hr class="hidden md:block mt-4 mb-0">
@@ -93,22 +93,19 @@ import type {
   Drop } from '@/components/drops/useDrops'
 import {
   getFormattedDropItem,
-  useDrop,
 } 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 { useCollectionEntity } from '@/composables/drop/useGenerativeDropMint'
 import type { DropItem } from '@/params/types'
 
 const mdBreakpoint = 768
 
 const emit = defineEmits(['mint'])
 
-const { drop } = useDrop()
+const { drop } = storeToRefs(useDropStore())
 const { previewItem, userMintsCount } = storeToRefs(useDropStore())
-const { description } = useCollectionEntity()
 const { width } = useWindowSize()
 
 const { emitEvent, completeLastEvent } = useCursorDropEvents()

components/collection/drop/GenerativePreview.vue

@@ -56,16 +56,23 @@
         <div class="mr-4 text-neutral-7">
           {{ mintedPercent }}% ~
         </div>
-        <div class="font-bold">
-          {{ dropStore.mintsCount }}/{{ maxCount }}
+        <div
+          v-if="drop.minted >= 0 && drop.max"
+          class="font-bold"
+        >
+          {{ drop.minted }}/{{ drop.max }}
           {{ $t('statsOverview.minted') }}
         </div>
+        <div v-else>
+          <NeoSkeleton width="100" />
+        </div>
       </div>
     </div>
 
     <CollectionUnlockableSlider
+      v-if="drop.max"
       class="text-neutral-5 dark:text-neutral-9"
-      :value="dropStore.mintsCount / maxCount"
+      :value="drop.minted / drop.max"
     />
 
     <div class="flex mt-6 gap-4 max-md:flex-col">
@@ -88,18 +95,14 @@
 </template>
 
 <script setup lang="ts">
-import { NeoButton, NeoIcon } from '@kodadot1/brick'
+import { NeoButton, NeoIcon, NeoSkeleton } from '@kodadot1/brick'
 import { sanitizeIpfsUrl } from '@/utils/ipfs'
 import useGenerativeIframeData from '@/composables/drop/useGenerativeIframeData'
-import { useDrop } from '@/components/drops/useDrops'
-import useGenerativeDropMint from '@/composables/drop/useGenerativeDropMint'
 
 const { accountId } = useAuth()
 const { chainSymbol, decimals } = useChain()
-const { drop } = useDrop()
 const dropStore = useDropStore()
-const { userMintsCount, mintsCount } = storeToRefs(dropStore)
-const { maxCount } = useGenerativeDropMint()
+const { userMintsCount, drop } = storeToRefs(dropStore)
 const { imageDataPayload, imageDataLoaded } = useGenerativeIframeData()
 const { formatted: formattedPrice } = useAmount(
   computed(() => drop.value.price),
@@ -121,10 +124,10 @@ const { start: startTimer } = useTimeoutFn(() => {
 const generativeImageUrl = ref('')
 
 const mintedPercent = computed(() => {
-  if (!maxCount.value) {
+  if (!drop.value.max) {
     return 0
   }
-  return Math.round((mintsCount.value / maxCount.value) * 100)
+  return Math.round((drop.value.minted / drop.value.max) * 100)
 })
 
 const displayUrl = computed(() => generativeImageUrl.value || drop.value?.image)

components/collection/drop/HolderOfGenerative.vue

@@ -51,9 +51,7 @@
 <script setup lang="ts">
 import { NeoModal } from '@kodadot1/brick'
 import {
-  useDrop,
   useDropMinimumFunds,
-  useDropStatus,
 } from '@/components/drops/useDrops'
 import useGenerativeDropMint, {
   useUpdateMetadata,
@@ -91,14 +89,12 @@ const { openListingCartModal } = useListingCartModal({
 const { fetchMultipleBalance } = useMultipleBalance()
 const { hasMinimumFunds } = useDropMinimumFunds()
 
-const { drop } = useDrop()
-const { subscribeDropStatus } = useDropStatus(drop)
 const dropStore = useDropStore()
 const { claimedNft, canListMintedNft } = useGenerativeDropMint()
 const { availableNfts } = useHolderOfCollection()
 const { isAutoTeleportModalOpen } = useAutoTeleportModal()
 
-const { mintingSession, loading, walletConnecting, isCapturingImage }
+const { mintingSession, loading, walletConnecting, isCapturingImage, drop }
   = storeToRefs(dropStore)
 
 useCursorDropEvents([isTransactionLoading, loading])
@@ -241,8 +237,6 @@ useTransactionTracker({
 watch(txHash, () => {
   mintingSession.value.txHash = txHash.value
 })
-
-onBeforeMount(subscribeDropStatus)
 </script>
 
 <style scoped lang="scss">

components/collection/drop/MintButton.vue

@@ -22,7 +22,7 @@
 import { NeoButton } from '@kodadot1/brick'
 import useGenerativeDropMint from '@/composables/drop/useGenerativeDropMint'
 import { useDropStore } from '@/stores/drop'
-import { useDrop, useDropMinimumFunds } from '@/components/drops/useDrops'
+import { useDropMinimumFunds } from '@/components/drops/useDrops'
 import {
   calculateBalanceUsdValue,
   formatAmountWithRound,
@@ -39,10 +39,10 @@ const { isLogIn } = useAuth()
 const { chainSymbol, decimals } = useChain()
 const dropStore = useDropStore()
 const { hasCurrentChainBalance } = useMultipleBalance()
-const { drop } = useDrop()
 const now = useNow()
-const { mintCountAvailable, maxCount } = useGenerativeDropMint()
-const { amountToMint, previewItem, userMintsCount } = storeToRefs(dropStore)
+const { mintCountAvailable } = useGenerativeDropMint()
+const { amountToMint, previewItem, userMintsCount, drop } = storeToRefs(dropStore)
+
 const { hasMinimumFunds } = useDropMinimumFunds()
 const { holderOfCollection } = useHolderOfCollection()
 const { getWalletVM, getIsWalletVMChain } = storeToRefs(useWalletStore())
@@ -51,7 +51,8 @@ const priceUsd = ref()
 const isHolderAndEligible = computed(
   () =>
     holderOfCollection.value.isHolder
-    && maxCount.value > dropStore.mintsCount
+    && drop.value.max
+    && drop.value.max > drop.value.minted
     && hasMinimumFunds.value
     && holderOfCollection.value.hasAvailable,
 )
@@ -74,7 +75,7 @@ const mintForLabel = computed(() =>
 )
 
 const label = computed(() => {
-  if (!mintCountAvailable.value) {
+  if (drop.value.max && (drop.value.max === drop.value.minted)) {
     return $i18n.t('mint.unlockable.seeListings')
   }
   if (!isLogIn.value) {
@@ -138,7 +139,7 @@ const enabled = computed(() => {
     case 'holder':
       return isHolderAndEligible.value
     case 'paid':
-      return maxCount.value > userMintsCount.value
+      return drop.value.max && drop.value.max > userMintsCount.value
     default:
       return false
   }

components/collection/drop/MintStepper.vue

@@ -25,16 +25,5 @@ const min = computed(() =>
   isHolder.value ? Math.min(1, availableNftsAmount.value) : 1,
 )
 
-const max = computed(() => {
-  // tmp remove when uploading to IPFS step can be skipped @see https://github.com/kodadot/nft-gallery/issues/10001#issuecomment-2041533819
-  const dropMax = DROP_MASSMINT_LIMIT[drop.value.alias] ?? undefined
-
-  if (isHolder.value) {
-    return dropMax
-      ? Math.min(dropMax, availableNftsAmount.value)
-      : availableNftsAmount.value
-  }
-
-  return dropMax
-})
+const max = computed(() => isHolder.value ? availableNftsAmount.value : undefined)
 </script>

components/collection/drop/PaidGenerative.vue

@@ -13,7 +13,6 @@
 </template>
 
 <script setup lang="ts">
-import { useDrop, useDropStatus } from '@/components/drops/useDrops'
 import { useUpdateMetadata } from '@/composables/drop/useGenerativeDropMint'
 import type { AutoTeleportAction } from '@/composables/autoTeleport/types'
 import { ActionlessInteraction } from '@/components/common/autoTeleport/utils'
@@ -24,8 +23,6 @@ import useAutoTeleportModal from '@/composables/autoTeleport/useAutoTeleportModa
 import { NFTs } from '@/composables/transaction/types'
 import { openReconnectWalletModal } from '@/components/common/ConnectWallet/openReconnectWalletModal'
 
-const { drop } = useDrop()
-const { subscribeDropStatus } = useDropStatus(drop)
 const { urlPrefix } = usePrefix()
 const { doAfterLogin } = useDoAfterlogin()
 const { $i18n, $consola } = useNuxtApp()
@@ -37,7 +34,7 @@ const { openListingCartModal } = useListingCartModal({
 })
 const { getWalletVM, getIsWalletVMChain } = storeToRefs(useWalletStore())
 
-const { loading, walletConnecting, mintingSession, isCapturingImage }
+const { loading, walletConnecting, mintingSession, isCapturingImage, drop }
   = storeToRefs(useDropStore())
 
 const { isAutoTeleportModalOpen } = useAutoTeleportModal()
@@ -174,8 +171,6 @@ useTransactionTracker({
 watch(txHash, () => {
   mintingSession.value.txHash = txHash.value
 })
-
-onBeforeMount(subscribeDropStatus)
 </script>
 
 <style scoped lang="scss">

components/drops/useDrops.ts

@@ -1,6 +1,5 @@
 import orderBy from 'lodash/orderBy'
 import type { Prefix } from '@kodadot1/static'
-import type { WritableComputedRef } from 'nuxt/dist/app/compat/capi'
 import { parseCETDate } from './utils'
 import type { GetDropsQuery } from '@/services/fxart'
 import { getDropById, getDrops } from '@/services/fxart'
@@ -11,6 +10,8 @@ import type { DropItem } from '@/params/types'
 import { prefixToToken } from '@/components/common/shoppingCart/utils'
 import { useDropStore } from '@/stores/drop'
 import { getChainName } from '@/utils/chain'
+import { subCollection } from '@/utils/onchain/sub'
+import { evmCollection } from '@/utils/onchain/evm'
 
 export interface Drop {
   collection: DropItem
@@ -170,6 +171,7 @@ export const getDropDetails = async (alias: string) => {
 export function useDrop(alias?: string) {
   const { params } = useRoute()
   const dropStore = useDropStore()
+  const { isEvm, isSub } = useIsChain(usePrefix().urlPrefix)
 
   const drop = computed({
     get: () => dropStore.drop,
@@ -181,6 +183,30 @@ export function useDrop(alias?: string) {
 
   const fetchDrop = async () => {
     drop.value = await getDropById(alias ?? params.id.toString())
+
+    if (!drop.value.collection) {
+      return
+    }
+
+    if (isSub.value) {
+      const { maxSupply: supply, minted, metadata } = await subCollection(drop.value.collection)
+
+      drop.value.max = supply
+      drop.value.minted = minted
+      drop.value.collectionName = metadata.name
+      drop.value.collectionDescription = metadata.description
+    }
+
+    if (isEvm.value) {
+      const { urlPrefix } = usePrefix()
+      const address = drop.value.collection as `0x${string}`
+      const { maxSupply: supply, metadata, minted } = await evmCollection(address, urlPrefix.value)
+
+      drop.value.max = supply
+      drop.value.minted = minted
+      drop.value.collectionName = metadata.name
+      drop.value.collectionDescription = metadata.description
+    }
   }
 
   watch(() => params.id, fetchDrop)
@@ -213,75 +239,6 @@ export const fetchDropMintedCount = async (
   return data.value?.collectionEntityById?.nftCount ?? 0
 }
 
-const subscribeDropMintedCount = (
-  { drop, account }: { drop: Pick<DropItem, 'collection'>, account: string },
-  onChange: (params: { collection?: number, user?: number }) => void,
-) => {
-  return useSubscriptionGraphql({
-    query: `
-      collectionEntityById(id: "${drop.collection}") {
-        nftCount
-        nfts(where: { issuer_eq: "${account}"  }) {
-          id
-        }
-      }
-     `,
-    onChange: ({ data }) => {
-      onChange({
-        collection: data.collectionEntityById?.nftCount,
-        user: data.collectionEntityById?.nfts?.length,
-      })
-    },
-  })
-}
-
-export const useDropStatus = (
-  drop: WritableComputedRef<{ collection: string, chain: Prefix }>,
-) => {
-  const { mintsCount, userMintsCount } = storeToRefs(useDropStore())
-  const { accountId } = useAuth()
-
-  const dropStatusSubscription = ref<{
-    collection: string | undefined
-    account: string | undefined
-    unsubscribe: () => void
-  }>({
-        account: undefined,
-        collection: undefined,
-        unsubscribe: () => {},
-      })
-
-  const subscribeDropStatus = () => {
-    watch([() => drop.value, accountId], ([drop, account]) => {
-      if (drop) {
-        if (
-          drop.collection !== dropStatusSubscription.value.collection
-          || account !== dropStatusSubscription.value.account
-        ) {
-          dropStatusSubscription.value.unsubscribe?.()
-        }
-
-        dropStatusSubscription.value.collection = drop.collection
-        dropStatusSubscription.value.account = accountId.value
-        dropStatusSubscription.value.unsubscribe = subscribeDropMintedCount(
-          { drop, account: accountId.value },
-          ({ collection, user }) => {
-            mintsCount.value = collection ?? 0
-            userMintsCount.value = user ?? 0
-          },
-        )
-      }
-    })
-
-    onUnmounted(() => dropStatusSubscription.value.unsubscribe?.())
-  }
-
-  return {
-    mintsCount,
-    subscribeDropStatus,
-  }
-}
-
 export const useDropMinimumFunds = (amount = ref(1)) => {
   const { drop } = useDrop()
 

composables/drop/massmint/useDropMassMint.ts

@@ -1,4 +1,3 @@
-import { useCollectionEntity } from '../useGenerativeDropMint'
 import type { ToMintNft } from '@/components/collection/drop/types'
 import { generateId, setDyndataUrl } from '@/services/dyndata'
 
@@ -11,7 +10,6 @@ export type MassMintNFT = Omit<ToMintNft, 'priceUSD'> & {
 
 export default () => {
   const dropStore = useDropStore()
-  const { collectionName } = useCollectionEntity()
   const { drop, amountToMint, toMintNFTs, loading } = storeToRefs(dropStore)
   const { isSub } = useIsChain(usePrefix().urlPrefix)
 
@@ -52,7 +50,7 @@ export default () => {
 
           return {
             name: drop.value.name,
-            collectionName: collectionName.value,
+            collectionName: drop.value.collectionName,
             price: drop.value.price?.toString() || '',
             nft: tokenIds.value[index],
             metadata,