feat: Phases in drop page

components/collection/drop/Generative.vue

@@ -119,6 +119,7 @@ const minimumFundsDescription = computed(() =>
 const minimumFundsProps = computed(() => ({
   amount: minimumFunds.value,
   description: minimumFundsDescription.value,
+  hasAmount: hasMinimumFunds.value,
 }))
 
 const isWalletConnecting = ref(false)
@@ -157,10 +158,10 @@ const {
   defaultImage,
 })
 
-const mintButtonDisabled = computed(
+const mintButtonDisabled = computed<boolean>(
   () =>
     !mintCountAvailable.value ||
-    disabledByBackend.value ||
+    Boolean(disabledByBackend.value) ||
     (isLogIn.value && Boolean(!selectedImage.value)),
 )
 

components/collection/drop/GenerativeLayout.vue

@@ -24,6 +24,7 @@
             :disabled-by-backend="drop.disabled"
             :mint-button="mintButton"
             :holder-of-collection="holderOfCollection"
+            :mint-phases="mintPhases"
             @mint="handleSubmitMint" />
         </div>
 
@@ -49,6 +50,7 @@
           :disabled-by-backend="drop.disabled"
           :mint-button="mintButton"
           :holder-of-collection="holderOfCollection"
+          :mint-phases="mintPhases"
           @mint="handleSubmitMint" />
       </div>
 
@@ -64,6 +66,7 @@
 
 <script setup lang="ts">
 import { DropItem } from '@/params/types'
+import { HolderOfCollectionProp, MintPhase } from './types'
 
 withDefaults(
   defineProps<{
@@ -74,20 +77,21 @@ withDefaults(
     mintedCount: number
     mintCountAvailable: boolean
     maxCount: number
-    minimumFunds: { amount: number; description: string }
+    minimumFunds: { amount: number; description: string; hasAmount: boolean }
     isImageFetching: boolean
     isWalletConnecting: boolean
     isLoading: boolean
+    holderOfCollection?: HolderOfCollectionProp
     userMintedNftId?: string
-    holderOfCollection?: { id?: string; isHolderOfTargetCollection?: boolean }
+    mintPhases: MintPhase[]
 
     handleSelectImage: (image: string) => void
     handleSubmitMint: () => void
   }>(),
   {
     description: '',
     userMintedNftId: undefined,
-    holderOfCollection: () => ({ id: '', isHolderOfTargetCollection: false }),
+    mintPhases: () => [],
   },
 )
 

components/collection/drop/HolderOfGenerative.vue

@@ -32,7 +32,11 @@
 import { createUnlockableMetadata } from '../unlockable/utils'
 import { DropItem } from '@/params/types'
 import { claimDropItem } from '@/services/waifu'
-import { useDropMinimumFunds, useDropStatus } from '@/components/drops/useDrops'
+import {
+  useDropMinimumFunds,
+  useDropStatus,
+  useHolderOfCollectionDrop,
+} from '@/components/drops/useDrops'
 import { fetchNft } from '@/components/items/ItemsGrid/useNftActions'
 import holderOfCollectionById from '@/queries/subsquid/general/holderOfCollectionById.graphql'
 import unlockableCollectionById from '@/queries/subsquid/general/unlockableCollectionById.graphql'
@@ -44,6 +48,16 @@ import useGenerativeDropDetails from '@/composables/drop/useGenerativeDropDetail
 
 const holderOfCollectionId = '50' // ChaosFlakes | todo: mock for testing, should be fetched from backend
 
+export type HolderOfCollectionProp = {
+  id: string
+  isHolder: boolean
+  hasAvailable: boolean
+  amount: {
+    total: number
+    available: number
+  }
+}
+
 const props = withDefaults(
   defineProps<{
     drop: DropItem
@@ -58,7 +72,7 @@ const { fetchMultipleBalance } = useMultipleBalance()
 const { hasMinimumFunds, formattedMinimumFunds, minimumFunds } =
   useDropMinimumFunds(props.drop)
 const minimumFundsDescription = computed(() =>
-  $i18n.t('mint.unlockable.minimumFundsDescription', [
+  $i18n.t('mint.unlockable.holderOfCollectionMinimumFundsDescription', [
     formattedMinimumFunds.value,
     chainName.value,
   ]),
@@ -67,11 +81,13 @@ const minimumFundsDescription = computed(() =>
 const minimumFundsProps = computed(() => ({
   amount: minimumFunds.value,
   description: minimumFundsDescription.value,
+  hasAmount: hasMinimumFunds.value,
 }))
 
 const isWalletConnecting = ref(false)
 const { currentAccountMintedToken, mintedDropCount, fetchDropStatus } =
   useDropStatus(props.drop.alias)
+const { isNftClaimed } = useHolderOfCollectionDrop()
 const instance = getCurrentInstance()
 const mintNftSN = ref('0')
 const { doAfterLogin } = useDoAfterlogin(instance)
@@ -84,6 +100,7 @@ const { client } = usePrefix()
 const isLoading = ref(false)
 const isImageFetching = ref(false)
 const isAddFundModalActive = ref(false)
+const availableNfts = ref(0)
 
 const {
   defaultName,
@@ -137,6 +154,7 @@ const {
   userMintedNftId,
   mintedCount,
   mintCountAvailable,
+  mintedAmountForCurrentUser,
   selectedImage,
   description,
   collectionName,
@@ -167,10 +185,6 @@ const { data: holderOfCollectionData } = await useAsyncData(
   },
 )
 
-const mintedAmountForCurrentUser = computed(
-  () => collectionData.value?.nftEntitiesConnection?.totalCount || 0, // todo: fetch from backend
-)
-
 const maxMintLimitForCurrentUser = computed(
   () => holderOfCollectionData.value?.nftEntitiesConnection?.totalCount || 0,
 )
@@ -179,32 +193,44 @@ const isHolderOfTargetCollection = computed(
   () => maxMintLimitForCurrentUser.value > 0,
 )
 
-const holderOfCollection = computed(() => ({
+const hasAvailableNfts = computed(() => availableNfts.value !== 0)
+
+const holderOfCollection = computed<HolderOfCollectionProp>(() => ({
   id: holderOfCollectionId,
-  isHolderOfTargetCollection: isHolderOfTargetCollection.value,
+  isHolder: isHolderOfTargetCollection.value,
+  hasAvailable: hasAvailableNfts.value,
+  amount: {
+    total: maxMintLimitForCurrentUser.value,
+    available: availableNfts.value,
+  },
 }))
 
 const mintButtonLabel = computed(() => {
   return isWalletConnecting.value
     ? $i18n.t('shoppingCart.wallet')
     : isLogIn.value
       ? isHolderOfTargetCollection.value &&
-        maxMintLimitForCurrentUser.value > mintedAmountForCurrentUser.value
+        maxMintLimitForCurrentUser.value > mintedAmountForCurrentUser.value &&
+        hasMinimumFunds.value &&
+        hasAvailableNfts.value
         ? $i18n.t('mint.unlockable.claimPaidNft', [
             `${depositAmount.value} ${depositChainSymbol.value}`,
           ])
         : $i18n.t('mint.unlockable.notEligibility')
       : $i18n.t('mint.unlockable.checkEligibility')
 })
-const mintButtonDisabled = computed(
+const mintButtonDisabled = computed<boolean>(
   () =>
     !mintCountAvailable.value ||
-    disabledByBackend.value ||
+    Boolean(disabledByBackend.value) ||
     (isLogIn.value &&
       Boolean(
         !selectedImage.value ||
           !isHolderOfTargetCollection.value ||
-          maxMintLimitForCurrentUser.value <= mintedAmountForCurrentUser.value,
+          maxMintLimitForCurrentUser.value <=
+            mintedAmountForCurrentUser.value ||
+          !hasMinimumFunds.value ||
+          !hasAvailableNfts.value,
       )),
 )
 
@@ -340,10 +366,21 @@ const submitMint = async (sn: string) => {
   }
 }
 
+const checkAvailableNfts = async () => {
+  const nftEntities = holderOfCollectionData.value?.nftEntities || []
+  const nftIds = nftEntities.map((nft) => nft.sn)
+  const claimed = await Promise.all(
+    nftIds.map((sn) => isNftClaimed(sn, holderOfCollectionId)),
+  )
+  availableNfts.value = claimed.filter((x) => !x).length
+}
+
 const handleDropAddModalConfirm = () => {
   closeAddFundModal()
   fetchMultipleBalance([urlPrefix.value])
 }
+
+watch(holderOfCollectionData, checkAvailableNfts, { immediate: true })
 </script>
 
 <style scoped lang="scss">