feat: Holder of drop page iteration

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

@@ -64,6 +64,7 @@
 
 <script setup lang="ts">
 import { DropItem } from '@/params/types'
+import type { HolderOfCollectionProp } from './HolderOfGenerative.vue'
 
 withDefaults(
   defineProps<{
@@ -74,12 +75,12 @@ 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 }
 
     handleSelectImage: (image: string) => void
     handleSubmitMint: () => void

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

components/collection/drop/MintSection/HolderOfCollectionMintRequirements.vue

@@ -0,0 +1,140 @@
+<template>
+  <div>
+    <p class="text-k-grey mb-5">
+      {{ $t('mint.unlockable.requirements') }}
+    </p>
+
+    <div>
+      <div class="flex justify-between">
+        <div class="flex gap-4 flex-col w-full">
+          <MintRequirementItem
+            v-if="showHolderOfCollection && collection"
+            :fulfilled="fulfillsHolderOfCollection">
+            <div class="flex justify-between items-center w-full">
+              <p class="capitalize">
+                Holder of NFT from
+                <nuxt-link
+                  class="has-text-link"
+                  :to="`/${urlPrefix}/collection/${props.holderOfCollection.id}`">
+                  {{ collection?.name }}
+                </nuxt-link>
+                collection
+              </p>
+              <div v-if="!isMintedOut" class="text-xs">
+                <span class="text-k-grey capitalize mr-2">
+                  {{ $t('mint.unlockable.availableForMint') }}
+                </span>
+                <span
+                  >{{ props.holderOfCollection.amount?.available }}/{{
+                    props.holderOfCollection.amount?.total
+                  }}</span
+                >
+
+                <NeoTooltip
+                  position="top"
+                  multiline
+                  multiline-width="15rem"
+                  root-class="ml-2"
+                  content-class="capitalize">
+                  <NeoIcon
+                    icon="fa-info-circle"
+                    pack="fa-regular"
+                    class="text-k-grey" />
+
+                  <template #content>
+                    <p
+                      v-dompurify-html="
+                        $t('mint.unlockable.holderOfWarning1', [
+                          collection?.name,
+                        ])
+                      "
+                      class="mb-3" />
+                    <p
+                      v-dompurify-html="
+                        $t('mint.unlockable.holderOfWarning2')
+                      " />
+                  </template>
+                </NeoTooltip>
+              </div>
+            </div>
+          </MintRequirementItem>
+          <MintRequirementItem :fulfilled="fulfillsMinimumFunds">
+            <p v-dompurify-html="minimumFunds.description" />
+          </MintRequirementItem>
+        </div>
+      </div>
+
+      <div
+        class="flex items-start md:items-center mt-6 flex-col md:flex-row"
+        :class="[isMintedOut ? 'justify-end' : 'justify-between']">
+        <div
+          v-if="!isMintedOut"
+          class="border px-2 py-1 rounded-full h-fit w-fit capitalize text-xs flex"
+          :class="[readyToMint ? 'bg-k-green-accent' : 'bg-neutral-5']">
+          <p>
+            {{ mintLabel }}
+          </p>
+
+          <NeoIcon v-if="readyToMint" class="ml-1" icon="check" />
+        </div>
+
+        <div class="mt-[24px] md:mt-0">
+          <slot />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import MintRequirementItem from './MintRequirementItem.vue'
+import { useCollectionMinimal } from '@/components/collection/utils/useCollectionDetails'
+import { NeoIcon, NeoTooltip } from '@kodadot1/brick'
+import type { HolderOfCollectionProp } from '../HolderOfGenerative.vue'
+
+const props = defineProps<{
+  holderOfCollection: HolderOfCollectionProp
+  minimumFunds: { amount: number; description: string; hasAmount: boolean }
+  isMintedOut: boolean
+}>()
+
+const { $i18n } = useNuxtApp()
+const { urlPrefix } = usePrefix()
+const { accountId } = useAuth()
+
+const { collection } = useCollectionMinimal({
+  collectionId: computed(() => props.holderOfCollection.id || ''),
+})
+
+const showHolderOfCollection = computed(() => !!props.holderOfCollection.id)
+
+const fulfillsHolderOfCollection = computed(
+  () =>
+    Boolean(props.holderOfCollection.isHolder) &&
+    props.holderOfCollection.hasAvailable,
+)
+
+const fulfillsMinimumFunds = computed(
+  () => Boolean(props.minimumFunds.amount) && props.minimumFunds.hasAmount,
+)
+
+const readyToMint = computed(
+  () => fulfillsHolderOfCollection.value && fulfillsMinimumFunds.value,
+)
+
+const availableForMint = computed(
+  () => props.holderOfCollection.amount?.available || 0,
+)
+
+const mintLabel = computed(() => {
+  if (!accountId.value) {
+    return $i18n.t('mint.unlockable.connectWallet')
+  }
+
+  if (readyToMint.value) {
+    return $i18n.t('mint.unlockable.readyToMint', [availableForMint.value])
+  }
+
+  return $i18n.t('mint.unlockable.requirementsNotMet')
+})
+</script>