From 607e2db444654af23da741642edd13bbb22d1f83 Mon Sep 17 00:00:00 2001
From: hassnian <hassnianxd@gmail.com>
Date: Tue, 16 Jan 2024 17:24:21 +0500
Subject: [PATCH 01/29] add: new holder of drop iteration

---
 components/collection/drop/Generative.vue     |   9 +-
 .../collection/drop/GenerativeLayout.vue      |   8 +-
 .../collection/drop/HolderOfGenerative.vue    |  10 +-
 .../drop/MintSection/MintRequirementItem.vue  |  37 ++++
 .../drop/MintSection/MintRequirements.vue     | 188 ++++++++++++++++++
 .../drop/{ => MintSection}/MintSection.vue    |  65 ++----
 components/collection/drop/PaidGenerative.vue |   7 +-
 composables/drop/useGenerativeDropMint.ts     |   5 +
 locales/en.json                               |  12 +-
 9 files changed, 279 insertions(+), 62 deletions(-)
 create mode 100644 components/collection/drop/MintSection/MintRequirementItem.vue
 create mode 100644 components/collection/drop/MintSection/MintRequirements.vue
 rename components/collection/drop/{ => MintSection}/MintSection.vue (70%)

diff --git a/components/collection/drop/Generative.vue b/components/collection/drop/Generative.vue
index cf4f41a397..85b2012da5 100644
--- a/components/collection/drop/Generative.vue
+++ b/components/collection/drop/Generative.vue
@@ -1,13 +1,15 @@
 <template>
   <CollectionDropGenerativeLayout
     :user-minted-nft-id="userMintedNftId"
+    :user-minted-count="mintedAmountForCurrentUser"
+    :user-max-available-to-mint="1"
     :is-wallet-connecting="isWalletConnecting"
     :is-image-fetching="isImageFetching"
     :is-loading="isLoading"
     :minimum-funds="minimumFundsProps"
     :max-count="maxCount"
     :minted-count="mintedCount"
-    :mint-count-available="mintCountAvailable || !disabledByBackend"
+    :mint-count-available="mintCountAvailable && !disabledByBackend"
     :mint-button="mintButtonProps"
     :collection-id="collectionId"
     :description="description"
@@ -142,6 +144,7 @@ const {
   canListMintedNft,
   mintedCount,
   mintCountAvailable,
+  mintedAmountForCurrentUser,
   selectedImage,
   description,
   collectionName,
@@ -157,10 +160,10 @@ const {
   defaultImage,
 })
 
-const mintButtonDisabled = computed(
+const mintButtonDisabled = computed<boolean>(
   () =>
     !mintCountAvailable.value ||
-    disabledByBackend.value ||
+    Boolean(disabledByBackend.value) ||
     (isLogIn.value && Boolean(!selectedImage.value)),
 )
 
diff --git a/components/collection/drop/GenerativeLayout.vue b/components/collection/drop/GenerativeLayout.vue
index 0fdb896a90..92e74589a2 100644
--- a/components/collection/drop/GenerativeLayout.vue
+++ b/components/collection/drop/GenerativeLayout.vue
@@ -13,6 +13,8 @@
           <CollectionDropMintSection
             v-if="!isMobile"
             :user-minted-nft-id="userMintedNftId"
+            :user-minted-count="userMintedCount"
+            :user-max-available-to-mint="userMaxAvailableToMint"
             :collection-id="collectionId"
             :is-wallet-connecting="isWalletConnecting"
             :is-image-fetching="isImageFetching"
@@ -39,6 +41,8 @@
           class="column"
           :collection-id="collectionId"
           :user-minted-nft-id="userMintedNftId"
+          :user-minted-count="userMintedCount"
+          :user-max-available-to-mint="userMaxAvailableToMint"
           :is-wallet-connecting="isWalletConnecting"
           :is-image-fetching="isImageFetching"
           :is-loading="isLoading"
@@ -78,8 +82,10 @@ withDefaults(
     isImageFetching: boolean
     isWalletConnecting: boolean
     isLoading: boolean
-    userMintedNftId?: string
     holderOfCollection?: { id?: string; isHolderOfTargetCollection?: boolean }
+    userMintedNftId?: string
+    userMintedCount: number
+    userMaxAvailableToMint: number
 
     handleSelectImage: (image: string) => void
     handleSubmitMint: () => void
diff --git a/components/collection/drop/HolderOfGenerative.vue b/components/collection/drop/HolderOfGenerative.vue
index d0f0cb9230..aa7a9c1df7 100644
--- a/components/collection/drop/HolderOfGenerative.vue
+++ b/components/collection/drop/HolderOfGenerative.vue
@@ -7,6 +7,8 @@
     :drop="drop"
     :holder-of-collection="holderOfCollection"
     :user-minted-nft-id="userMintedNftId"
+    :user-minted-count="mintedAmountForCurrentUser"
+    :user-max-available-to-mint="1"
     :is-wallet-connecting="isWalletConnecting"
     :is-image-fetching="isImageFetching"
     :is-loading="isLoading"
@@ -16,7 +18,8 @@
     :mint-count-available="mintCountAvailable"
     :mint-button="mintButtonProps"
     :handle-select-image="handleSelectImage"
-    :handle-submit-mint="handleSubmitMint" />
+    :handle-submit-mint="handleSubmitMint"
+    :max-available-to-mint="1" />
 
   <CollectionDropAddFundsModal
     v-model="isAddFundModalActive"
@@ -137,6 +140,7 @@ const {
   userMintedNftId,
   mintedCount,
   mintCountAvailable,
+  mintedAmountForCurrentUser,
   selectedImage,
   description,
   collectionName,
@@ -167,10 +171,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,
 )
diff --git a/components/collection/drop/MintSection/MintRequirementItem.vue b/components/collection/drop/MintSection/MintRequirementItem.vue
new file mode 100644
index 0000000000..0c328d940d
--- /dev/null
+++ b/components/collection/drop/MintSection/MintRequirementItem.vue
@@ -0,0 +1,37 @@
+<template>
+  <div class="flex items-center">
+    <NeoIcon class="mr-4" :icon="icon" :class="iconClass" />
+
+    <div>
+      <slot />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { NeoIcon } from '@kodadot1/brick'
+
+const props = defineProps<{
+  fulfilled: boolean
+}>()
+
+const { accountId } = useAuth()
+
+const icon = computed(() => {
+  if (!accountId.value) {
+    return 'lock-keyhole'
+  }
+
+  return props.fulfilled ? 'check' : 'xmark'
+})
+
+const iconClass = computed(() => {
+  if (!accountId.value) {
+    return 'text-k-grey'
+  }
+
+  return props.fulfilled ? 'text-k-green' : 'text-k-red'
+})
+</script>
+
+<style scoped></style>
diff --git a/components/collection/drop/MintSection/MintRequirements.vue b/components/collection/drop/MintSection/MintRequirements.vue
new file mode 100644
index 0000000000..e5a369362f
--- /dev/null
+++ b/components/collection/drop/MintSection/MintRequirements.vue
@@ -0,0 +1,188 @@
+<template>
+  <div>
+    <div v-if="useList">
+      <p class="text-k-grey mb-6">
+        {{ $t('mint.unlockable.requirements') }}
+      </p>
+
+      <div>
+        <div class="flex justify-between">
+          <div class="flex gap-4 flex-col">
+            <MintRequirementItem
+              v-if="showHolderOfCollection && collection"
+              :fulfilled="holderOfCollection.isHolder || false">
+              <p class="capitalize">
+                Holder of NFT from
+                <nuxt-link
+                  class="text-link-hover"
+                  :to="`/${urlPrefix}/collection/${props.holderOfCollection.collectionId}`">
+                  {{ collection?.name }}
+                </nuxt-link>
+                collection
+              </p>
+            </MintRequirementItem>
+            <MintRequirementItem v-if="checkMinimumFunds" fulfilled>
+              <p v-dompurify-html="minimumFunds.description" />
+            </MintRequirementItem>
+          </div>
+
+          <div v-if="!isMintedOut" class="text-xs">
+            <span class="text-k-grey capitalize mr-2">
+              {{ $t('mint.unlockable.availableForMint') }}
+            </span>
+            <span>{{ available }}</span>
+
+            <NeoTooltip
+              multiline
+              position="top"
+              :auto-close="['outside', 'inside']"
+              class="text-neutral-7">
+              <NeoIcon
+                icon="fa-info-circle"
+                pack="fa-regular"
+                class="ml-2 text-k-grey" />
+
+              <template #content> </template>
+            </NeoTooltip>
+          </div>
+        </div>
+
+        <div
+          class="flex items-center mt-2"
+          :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="[ready ? 'bg-k-green-accent' : 'bg-neutral-5']">
+            <p>
+              {{ mintLabel }}
+            </p>
+
+            <NeoIcon v-if="ready" class="ml-1" icon="check" />
+          </div>
+
+          <slot />
+        </div>
+      </div>
+    </div>
+    <div v-else class="flex justify-end flex-wrap">
+      <div v-if="minimumFunds.amount" class="flex items-center">
+        <NeoIcon icon="circle-info" class="mr-3" />
+        <div
+          v-dompurify-html="minimumFunds.description"
+          class="minimum-funds-description" />
+      </div>
+
+      <slot />
+    </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'
+
+enum MintRequirementType {
+  MINIMUM_FUNDS = 'minimum_funds',
+  HOLDER_OF_COLLECTION = 'holder_of_collection',
+}
+
+const props = withDefaults(
+  defineProps<{
+    holderOfCollection: {
+      isHolder?: boolean
+      collectionId?: string
+    }
+    minimumFunds: { amount: number; description: string }
+
+    isMintedOut: boolean
+    userMintedCount: number
+    userMaxAvailableToMint: number
+
+    requirements: MintRequirementType[]
+  }>(),
+  {
+    requirements: () => [
+      MintRequirementType.HOLDER_OF_COLLECTION,
+      MintRequirementType.MINIMUM_FUNDS,
+    ],
+  },
+)
+
+const { $i18n } = useNuxtApp()
+const { urlPrefix } = usePrefix()
+const { accountId } = useAuth()
+
+const { collection } = useCollectionMinimal({
+  collectionId: computed(() => props.holderOfCollection.collectionId || ''),
+})
+
+const useList = computed(() => conditionsStates.value.length > 1)
+
+const showHolderOfCollection = computed(
+  () => !!props.holderOfCollection.collectionId,
+)
+
+const canMintAsManyNftsAsPossible = computed(
+  () => props.userMaxAvailableToMint === Infinity,
+)
+
+const checkMinimumFunds = computed(() => Boolean(props.minimumFunds.amount))
+
+const conditionsStates = computed(() => {
+  const conditions: boolean[] = []
+
+  if (props.requirements.includes(MintRequirementType.MINIMUM_FUNDS)) {
+    conditions.push(checkMinimumFunds.value)
+  }
+
+  if (
+    props.requirements.includes(MintRequirementType.HOLDER_OF_COLLECTION) &&
+    showHolderOfCollection.value
+  ) {
+    conditions.push(Boolean(props.holderOfCollection.isHolder))
+  }
+
+  return conditions
+})
+
+const requirementsCompleted = computed(() =>
+  conditionsStates.value.every(Boolean),
+)
+
+const ready = computed(() => requirementsCompleted.value)
+
+const mintLabel = computed(() => {
+  if (!accountId.value) {
+    return $i18n.t('mint.unlockable.connectWallet')
+  }
+
+  const remaining = props.userMaxAvailableToMint - props.userMintedCount
+
+  if (ready.value) {
+    if (canMintAsManyNftsAsPossible.value) {
+      return $i18n.t('mint.unlockable.readyToMint')
+    }
+
+    return `${$i18n.t('mint.unlockable.readyToMint')}: ${$i18n.t(
+      'mint.unlockable.nftsRemaining',
+      [remaining],
+    )}`
+  }
+
+  return $i18n.t('mint.unlockable.readyToMint')
+})
+
+const available = computed(() =>
+  canMintAsManyNftsAsPossible.value
+    ? '∞'
+    : `${props.userMintedCount}/${props.userMaxAvailableToMint}`,
+)
+</script>
+
+<style scoped lang="scss">
+.minimum-funds-description {
+  max-width: 314px;
+}
+</style>
diff --git a/components/collection/drop/MintSection.vue b/components/collection/drop/MintSection/MintSection.vue
similarity index 70%
rename from components/collection/drop/MintSection.vue
rename to components/collection/drop/MintSection/MintSection.vue
index 289546160b..8974bf604c 100644
--- a/components/collection/drop/MintSection.vue
+++ b/components/collection/drop/MintSection/MintSection.vue
@@ -25,7 +25,7 @@
       <UnlockableSlider :value="mintedCount / maxCount" />
     </div>
 
-    <div class="my-5">
+    <div>
       <div v-if="userMintedNftId" class="flex justify-end items-center">
         <div class="mr-2">
           {{ $t('mint.unlockable.nftAlreadyMinted') }}
@@ -41,44 +41,17 @@
           :to="`/${urlPrefix}/gallery/${userMintedNftId}`" />
       </div>
 
-      <div
-        v-else-if="showHolderOfCollection"
-        class="columns holder-of-collection">
-        <div class="column">
-          <CollectionDropHolderOfCollection
-            class="mt-4 mb-5"
-            :is-holder="holderOfCollection.isHolderOfTargetCollection"
-            :collection-id="holderOfCollection.id" />
-
-          <div v-if="minimumFunds.amount" class="flex items-center mr-5">
-            <NeoIcon icon="circle-info" class="mr-3" />
-            <div
-              v-dompurify-html="minimumFunds.description"
-              class="minimum-funds-description" />
-          </div>
-        </div>
-
-        <div class="column has-text-right">
-          <NeoButton
-            ref="root"
-            class="my-2 mint-button"
-            variant="k-accent"
-            :loading="loading"
-            :disabled="mintButtonDisabled"
-            :loading-with-label="isWalletConnecting"
-            :label="mintButtonLabel"
-            @click="handleMint" />
-        </div>
-      </div>
-
-      <div v-else class="flex justify-end flex-wrap">
-        <div v-if="minimumFunds.amount" class="flex items-center">
-          <NeoIcon icon="circle-info" class="mr-3" />
-          <div
-            v-dompurify-html="minimumFunds.description"
-            class="minimum-funds-description" />
-        </div>
-
+      <CollectionDropMintSectionMintRequirements
+        v-else-if="useRequirements"
+        class="my-5"
+        :holder-of-collection="{
+          isHolder: holderOfCollection.isHolderOfTargetCollection,
+          collectionId: holderOfCollection.id,
+        }"
+        :minimum-funds="minimumFunds"
+        :is-minted-out="isMintedOut"
+        :user-max-available-to-mint="userMaxAvailableToMint"
+        :user-minted-count="userMintedCount">
         <NeoButton
           ref="root"
           class="ml-5 my-2 mint-button"
@@ -88,7 +61,7 @@
           :loading-with-label="isWalletConnecting"
           :label="mintButtonLabel"
           @click="handleMint" />
-      </div>
+      </CollectionDropMintSectionMintRequirements>
     </div>
   </div>
 </template>
@@ -111,8 +84,11 @@ const props = withDefaults(
     isLoading: boolean
     mintButton: { label: string; disabled: boolean }
     userMintedNftId?: string
+    userMaxAvailableToMint: number
+    userMintedCount: number
     holderOfCollection?: { id?: string; isHolderOfTargetCollection?: boolean }
     collectionId: string
+    availableToMint?: number
   }>(),
   {
     userMintedNftId: undefined,
@@ -125,6 +101,9 @@ const emit = defineEmits(['mint'])
 const { $i18n } = useNuxtApp()
 const { urlPrefix } = usePrefix()
 
+// make dynmic when dynamic stages is added
+const useRequirements = true
+
 const loading = computed(
   () => props.isImageFetching || props.isWalletConnecting || props.isLoading,
 )
@@ -155,17 +134,11 @@ const handleMint = () => {
 
   emit('mint')
 }
-
-const showHolderOfCollection = computed(() => !!props.holderOfCollection.id)
 </script>
 
 <style scoped lang="scss">
 @import '@/assets/styles/abstracts/variables';
 
-.minimum-funds-description {
-  max-width: 314px;
-}
-
 .mint-button {
   width: 14rem;
   height: 3.5rem;
diff --git a/components/collection/drop/PaidGenerative.vue b/components/collection/drop/PaidGenerative.vue
index 33ee0315f3..0372591900 100644
--- a/components/collection/drop/PaidGenerative.vue
+++ b/components/collection/drop/PaidGenerative.vue
@@ -4,6 +4,8 @@
     :description="description"
     :drop="drop"
     :user-minted-nft-id="userMintedNftId"
+    :user-max-available-to-mint="Infinity"
+    :user-minted-count="mintedAmountForCurrentUser"
     :is-wallet-connecting="isWalletConnecting"
     :is-image-fetching="isImageFetching"
     :is-loading="isLoading"
@@ -168,6 +170,7 @@ const {
   userMintedNftId,
   mintedCount,
   mintCountAvailable,
+  mintedAmountForCurrentUser,
   canListMintedNft,
   selectedImage,
   description,
@@ -185,10 +188,6 @@ const {
   defaultImage,
 })
 
-const mintedAmountForCurrentUser = computed(
-  () => collectionData.value?.nftEntitiesConnection?.totalCount || 0, // todo: fetch from backend
-)
-
 const maxMintLimitForCurrentUser = computed(() => maxCount.value)
 
 const mintButtonLabel = computed(() => {
diff --git a/composables/drop/useGenerativeDropMint.ts b/composables/drop/useGenerativeDropMint.ts
index e40f02d23a..a0acbebf17 100644
--- a/composables/drop/useGenerativeDropMint.ts
+++ b/composables/drop/useGenerativeDropMint.ts
@@ -83,6 +83,10 @@ export default ({
     () => collectionData.value?.collectionEntity?.nftCount,
   )
 
+  const mintedAmountForCurrentUser = computed(
+    () => collectionData.value?.nftEntitiesConnection?.totalCount || 0, // todo: fetch from backend
+  )
+
   const canListMintedNft = computed(() => Boolean(mintedNftWithMetadata.value))
 
   const tryCapture = async () => {
@@ -155,6 +159,7 @@ export default ({
     collectionName,
     canListMintedNft,
     nftCount,
+    mintedAmountForCurrentUser,
     listMintedNft,
     tryCapture,
     subscribeToMintedNft,
diff --git a/locales/en.json b/locales/en.json
index 71622860c7..518d716bd0 100644
--- a/locales/en.json
+++ b/locales/en.json
@@ -617,8 +617,8 @@
       "onlyOneExample": "Example Of Drop",
       "mintThisNft": "Mint This NFT",
       "seeYourNft": "See Your NFT",
-      "minimumFundsDescription": "Holding a Minimum of <strong>{0} On {1}</strong> in Your Wallet is Required",
-      "freeMinimumFundsDescription": "Holding a Minimum of <strong>{0} On {1}</strong> in Your Wallet is Required for This Free Mint.",
+      "minimumFundsDescription": "Holding a Minimum of <strong>{0}</strong> On {1} in Your Wallet",
+      "freeMinimumFundsDescription": "Holding a Minimum of <strong>{0}</strong> On {1} in Your Wallet",
       "claimNftNow": "Claim NFT Now",
       "claimPaidNft": "Claim For {0}",
       "nftAlreadyMinted": "NFT Already Minted",
@@ -653,7 +653,13 @@
           "transfer": "<strong>Transfer:</strong> Move {0} from another account to your wallet.",
           "note": "Transactions may require a network confirmation"
         }
-      }
+      },
+      "requirements": "Requirements",
+      "connectWallet": "Connect wallet to proceed",
+      "availableForMint": "Available for mint",
+      "readyToMint": "Ready to Mint",
+      "nftsRemaining": "{0} NFTs Remaining",
+      "requirementsNotMet": "Requirements not met"
     },
     "blockchain": {
       "label": "Select Blockchain",

From cf925a31478d80a63026cd3555cd63ebfed6a2f4 Mon Sep 17 00:00:00 2001
From: hassnian <hassnianxd@gmail.com>
Date: Tue, 16 Jan 2024 18:18:49 +0500
Subject: [PATCH 02/29] ref: move simple minimum-funds

---
 ...=> HolderOfGenerativeMintRequirements.vue} | 71 ++++---------------
 .../drop/MintSection/MintSection.vue          | 35 +++++++--
 2 files changed, 44 insertions(+), 62 deletions(-)
 rename components/collection/drop/MintSection/{MintRequirements.vue => HolderOfGenerativeMintRequirements.vue} (73%)

diff --git a/components/collection/drop/MintSection/MintRequirements.vue b/components/collection/drop/MintSection/HolderOfGenerativeMintRequirements.vue
similarity index 73%
rename from components/collection/drop/MintSection/MintRequirements.vue
rename to components/collection/drop/MintSection/HolderOfGenerativeMintRequirements.vue
index e5a369362f..bb54da858e 100644
--- a/components/collection/drop/MintSection/MintRequirements.vue
+++ b/components/collection/drop/MintSection/HolderOfGenerativeMintRequirements.vue
@@ -65,16 +65,6 @@
         </div>
       </div>
     </div>
-    <div v-else class="flex justify-end flex-wrap">
-      <div v-if="minimumFunds.amount" class="flex items-center">
-        <NeoIcon icon="circle-info" class="mr-3" />
-        <div
-          v-dompurify-html="minimumFunds.description"
-          class="minimum-funds-description" />
-      </div>
-
-      <slot />
-    </div>
   </div>
 </template>
 
@@ -83,32 +73,17 @@ import MintRequirementItem from './MintRequirementItem.vue'
 import { useCollectionMinimal } from '@/components/collection/utils/useCollectionDetails'
 import { NeoIcon, NeoTooltip } from '@kodadot1/brick'
 
-enum MintRequirementType {
-  MINIMUM_FUNDS = 'minimum_funds',
-  HOLDER_OF_COLLECTION = 'holder_of_collection',
-}
+const props = defineProps<{
+  holderOfCollection: {
+    isHolder?: boolean
+    collectionId?: string
+  }
+  minimumFunds: { amount: number; description: string }
 
-const props = withDefaults(
-  defineProps<{
-    holderOfCollection: {
-      isHolder?: boolean
-      collectionId?: string
-    }
-    minimumFunds: { amount: number; description: string }
-
-    isMintedOut: boolean
-    userMintedCount: number
-    userMaxAvailableToMint: number
-
-    requirements: MintRequirementType[]
-  }>(),
-  {
-    requirements: () => [
-      MintRequirementType.HOLDER_OF_COLLECTION,
-      MintRequirementType.MINIMUM_FUNDS,
-    ],
-  },
-)
+  isMintedOut: boolean
+  userMintedCount: number
+  userMaxAvailableToMint: number
+}>()
 
 const { $i18n } = useNuxtApp()
 const { urlPrefix } = usePrefix()
@@ -130,22 +105,10 @@ const canMintAsManyNftsAsPossible = computed(
 
 const checkMinimumFunds = computed(() => Boolean(props.minimumFunds.amount))
 
-const conditionsStates = computed(() => {
-  const conditions: boolean[] = []
-
-  if (props.requirements.includes(MintRequirementType.MINIMUM_FUNDS)) {
-    conditions.push(checkMinimumFunds.value)
-  }
-
-  if (
-    props.requirements.includes(MintRequirementType.HOLDER_OF_COLLECTION) &&
-    showHolderOfCollection.value
-  ) {
-    conditions.push(Boolean(props.holderOfCollection.isHolder))
-  }
-
-  return conditions
-})
+const conditionsStates = computed(() => [
+  Boolean(props.holderOfCollection.isHolder),
+  checkMinimumFunds.value,
+])
 
 const requirementsCompleted = computed(() =>
   conditionsStates.value.every(Boolean),
@@ -181,8 +144,4 @@ const available = computed(() =>
 )
 </script>
 
-<style scoped lang="scss">
-.minimum-funds-description {
-  max-width: 314px;
-}
-</style>
+<style scoped lang="scss"></style>
diff --git a/components/collection/drop/MintSection/MintSection.vue b/components/collection/drop/MintSection/MintSection.vue
index 8974bf604c..5bffd1b7db 100644
--- a/components/collection/drop/MintSection/MintSection.vue
+++ b/components/collection/drop/MintSection/MintSection.vue
@@ -41,8 +41,8 @@
           :to="`/${urlPrefix}/gallery/${userMintedNftId}`" />
       </div>
 
-      <CollectionDropMintSectionMintRequirements
-        v-else-if="useRequirements"
+      <HolderOfGenerativeMintRequirements
+        v-else-if="showHolderOfCollection"
         class="my-5"
         :holder-of-collection="{
           isHolder: holderOfCollection.isHolderOfTargetCollection,
@@ -61,7 +61,26 @@
           :loading-with-label="isWalletConnecting"
           :label="mintButtonLabel"
           @click="handleMint" />
-      </CollectionDropMintSectionMintRequirements>
+      </HolderOfGenerativeMintRequirements>
+
+      <div v-else class="flex justify-end flex-wrap">
+        <div v-if="minimumFunds.amount" class="flex items-center">
+          <NeoIcon icon="circle-info" class="mr-3" />
+          <div
+            v-dompurify-html="minimumFunds.description"
+            class="minimum-funds-description" />
+        </div>
+
+        <NeoButton
+          ref="root"
+          class="ml-5 my-2 mint-button"
+          variant="k-accent"
+          :loading="loading"
+          :disabled="mintButtonDisabled"
+          :loading-with-label="isWalletConnecting"
+          :label="mintButtonLabel"
+          @click="handleMint" />
+      </div>
     </div>
   </div>
 </template>
@@ -69,6 +88,7 @@
 <script setup lang="ts">
 import UnlockableSlider from '@/components/collection/unlockable/UnlockableSlider.vue'
 import { NeoButton, NeoIcon } from '@kodadot1/brick'
+import HolderOfGenerativeMintRequirements from './HolderOfGenerativeMintRequirements.vue'
 
 const NuxtLink = resolveComponent('NuxtLink')
 
@@ -101,9 +121,6 @@ const emit = defineEmits(['mint'])
 const { $i18n } = useNuxtApp()
 const { urlPrefix } = usePrefix()
 
-// make dynmic when dynamic stages is added
-const useRequirements = true
-
 const loading = computed(
   () => props.isImageFetching || props.isWalletConnecting || props.isLoading,
 )
@@ -125,6 +142,8 @@ const mintButtonDisabled = computed(() =>
   isMintedOut.value ? false : props.mintButton.disabled,
 )
 
+const showHolderOfCollection = computed(() => !!props.holderOfCollection.id)
+
 const handleMint = () => {
   if (isMintedOut.value) {
     return navigateTo(
@@ -139,6 +158,10 @@ const handleMint = () => {
 <style scoped lang="scss">
 @import '@/assets/styles/abstracts/variables';
 
+.minimum-funds-description {
+  max-width: 314px;
+}
+
 .mint-button {
   width: 14rem;
   height: 3.5rem;

From 6a273c2976ccdeb3a5324749655fca255d6c734d Mon Sep 17 00:00:00 2001
From: hassnian <hassnianxd@gmail.com>
Date: Tue, 16 Jan 2024 19:01:27 +0500
Subject: [PATCH 03/29] ref: holder of collection requirements

---
 components/collection/drop/Generative.vue     |   3 -
 .../collection/drop/GenerativeLayout.vue      |  15 +-
 .../collection/drop/HolderOfGenerative.vue    |   8 +-
 .../HolderOfCollectionMintRequirements.vue    | 120 ++++++++++++++
 .../HolderOfGenerativeMintRequirements.vue    | 147 ------------------
 .../drop/MintSection/MintSection.vue          |  28 ++--
 components/collection/drop/PaidGenerative.vue |   2 -
 7 files changed, 147 insertions(+), 176 deletions(-)
 create mode 100644 components/collection/drop/MintSection/HolderOfCollectionMintRequirements.vue
 delete mode 100644 components/collection/drop/MintSection/HolderOfGenerativeMintRequirements.vue

diff --git a/components/collection/drop/Generative.vue b/components/collection/drop/Generative.vue
index 85b2012da5..2e11f13233 100644
--- a/components/collection/drop/Generative.vue
+++ b/components/collection/drop/Generative.vue
@@ -1,8 +1,6 @@
 <template>
   <CollectionDropGenerativeLayout
     :user-minted-nft-id="userMintedNftId"
-    :user-minted-count="mintedAmountForCurrentUser"
-    :user-max-available-to-mint="1"
     :is-wallet-connecting="isWalletConnecting"
     :is-image-fetching="isImageFetching"
     :is-loading="isLoading"
@@ -144,7 +142,6 @@ const {
   canListMintedNft,
   mintedCount,
   mintCountAvailable,
-  mintedAmountForCurrentUser,
   selectedImage,
   description,
   collectionName,
diff --git a/components/collection/drop/GenerativeLayout.vue b/components/collection/drop/GenerativeLayout.vue
index 92e74589a2..239bb8f3b2 100644
--- a/components/collection/drop/GenerativeLayout.vue
+++ b/components/collection/drop/GenerativeLayout.vue
@@ -13,8 +13,6 @@
           <CollectionDropMintSection
             v-if="!isMobile"
             :user-minted-nft-id="userMintedNftId"
-            :user-minted-count="userMintedCount"
-            :user-max-available-to-mint="userMaxAvailableToMint"
             :collection-id="collectionId"
             :is-wallet-connecting="isWalletConnecting"
             :is-image-fetching="isImageFetching"
@@ -41,8 +39,6 @@
           class="column"
           :collection-id="collectionId"
           :user-minted-nft-id="userMintedNftId"
-          :user-minted-count="userMintedCount"
-          :user-max-available-to-mint="userMaxAvailableToMint"
           :is-wallet-connecting="isWalletConnecting"
           :is-image-fetching="isImageFetching"
           :is-loading="isLoading"
@@ -82,10 +78,15 @@ withDefaults(
     isImageFetching: boolean
     isWalletConnecting: boolean
     isLoading: boolean
-    holderOfCollection?: { id?: string; isHolderOfTargetCollection?: boolean }
+    holderOfCollection?: {
+      id?: string
+      isHolder?: boolean
+      amount?: {
+        total: number
+        used: number
+      }
+    }
     userMintedNftId?: string
-    userMintedCount: number
-    userMaxAvailableToMint: number
 
     handleSelectImage: (image: string) => void
     handleSubmitMint: () => void
diff --git a/components/collection/drop/HolderOfGenerative.vue b/components/collection/drop/HolderOfGenerative.vue
index aa7a9c1df7..00f0987a56 100644
--- a/components/collection/drop/HolderOfGenerative.vue
+++ b/components/collection/drop/HolderOfGenerative.vue
@@ -7,8 +7,6 @@
     :drop="drop"
     :holder-of-collection="holderOfCollection"
     :user-minted-nft-id="userMintedNftId"
-    :user-minted-count="mintedAmountForCurrentUser"
-    :user-max-available-to-mint="1"
     :is-wallet-connecting="isWalletConnecting"
     :is-image-fetching="isImageFetching"
     :is-loading="isLoading"
@@ -181,7 +179,11 @@ const isHolderOfTargetCollection = computed(
 
 const holderOfCollection = computed(() => ({
   id: holderOfCollectionId,
-  isHolderOfTargetCollection: isHolderOfTargetCollection.value,
+  isHolder: isHolderOfTargetCollection.value,
+  amount: {
+    total: maxMintLimitForCurrentUser.value,
+    used: 0,
+  },
 }))
 
 const mintButtonLabel = computed(() => {
diff --git a/components/collection/drop/MintSection/HolderOfCollectionMintRequirements.vue b/components/collection/drop/MintSection/HolderOfCollectionMintRequirements.vue
new file mode 100644
index 0000000000..6fe6a1c8f4
--- /dev/null
+++ b/components/collection/drop/MintSection/HolderOfCollectionMintRequirements.vue
@@ -0,0 +1,120 @@
+<template>
+  <div>
+    <p class="text-k-grey mb-6">
+      {{ $t('mint.unlockable.requirements') }}
+    </p>
+
+    <div>
+      <div class="flex justify-between">
+        <div class="flex gap-4 flex-col">
+          <MintRequirementItem
+            v-if="showHolderOfCollection && collection"
+            :fulfilled="holderOfCollection.isHolder || false">
+            <p class="capitalize">
+              Holder of NFT from
+              <nuxt-link
+                class="text-link-hover"
+                :to="`/${urlPrefix}/collection/${props.holderOfCollection.collectionId}`">
+                {{ collection?.name }}
+              </nuxt-link>
+              collection
+            </p>
+          </MintRequirementItem>
+          <MintRequirementItem v-if="checkMinimumFunds" fulfilled>
+            <p v-dompurify-html="minimumFunds.description" />
+          </MintRequirementItem>
+        </div>
+
+        <div v-if="!isMintedOut" class="text-xs">
+          <span class="text-k-grey capitalize mr-2">
+            {{ $t('mint.unlockable.availableForMint') }}
+          </span>
+          <span
+            >{{ props.holderOfCollection.amount?.used }}/{{
+              props.holderOfCollection.amount?.total
+            }}</span
+          >
+
+          <NeoTooltip
+            multiline
+            position="top"
+            :auto-close="['outside', 'inside']"
+            class="text-neutral-7">
+            <NeoIcon
+              icon="fa-info-circle"
+              pack="fa-regular"
+              class="ml-2 text-k-grey" />
+
+            <template #content> </template>
+          </NeoTooltip>
+        </div>
+      </div>
+
+      <div
+        class="flex items-center mt-2"
+        :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>
+
+        <slot />
+      </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'
+
+const props = defineProps<{
+  holderOfCollection: {
+    id?: string
+    isHolder?: boolean
+    amount?: {
+      total: number
+      used: number
+    }
+  }
+  minimumFunds: { amount: number; description: string }
+  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 checkMinimumFunds = computed(() => Boolean(props.minimumFunds.amount))
+
+const readyToMint = computed(
+  () => Boolean(props.holderOfCollection.isHolder) && checkMinimumFunds.value,
+)
+
+const mintLabel = computed(() => {
+  if (!accountId.value) {
+    return $i18n.t('mint.unlockable.connectWallet')
+  }
+
+  if (readyToMint.value) {
+    return $i18n.t('mint.unlockable.readyToMint')
+  }
+
+  return $i18n.t('mint.unlockable.requirementsNotMet')
+})
+</script>
+
+<style scoped lang="scss"></style>
diff --git a/components/collection/drop/MintSection/HolderOfGenerativeMintRequirements.vue b/components/collection/drop/MintSection/HolderOfGenerativeMintRequirements.vue
deleted file mode 100644
index bb54da858e..0000000000
--- a/components/collection/drop/MintSection/HolderOfGenerativeMintRequirements.vue
+++ /dev/null
@@ -1,147 +0,0 @@
-<template>
-  <div>
-    <div v-if="useList">
-      <p class="text-k-grey mb-6">
-        {{ $t('mint.unlockable.requirements') }}
-      </p>
-
-      <div>
-        <div class="flex justify-between">
-          <div class="flex gap-4 flex-col">
-            <MintRequirementItem
-              v-if="showHolderOfCollection && collection"
-              :fulfilled="holderOfCollection.isHolder || false">
-              <p class="capitalize">
-                Holder of NFT from
-                <nuxt-link
-                  class="text-link-hover"
-                  :to="`/${urlPrefix}/collection/${props.holderOfCollection.collectionId}`">
-                  {{ collection?.name }}
-                </nuxt-link>
-                collection
-              </p>
-            </MintRequirementItem>
-            <MintRequirementItem v-if="checkMinimumFunds" fulfilled>
-              <p v-dompurify-html="minimumFunds.description" />
-            </MintRequirementItem>
-          </div>
-
-          <div v-if="!isMintedOut" class="text-xs">
-            <span class="text-k-grey capitalize mr-2">
-              {{ $t('mint.unlockable.availableForMint') }}
-            </span>
-            <span>{{ available }}</span>
-
-            <NeoTooltip
-              multiline
-              position="top"
-              :auto-close="['outside', 'inside']"
-              class="text-neutral-7">
-              <NeoIcon
-                icon="fa-info-circle"
-                pack="fa-regular"
-                class="ml-2 text-k-grey" />
-
-              <template #content> </template>
-            </NeoTooltip>
-          </div>
-        </div>
-
-        <div
-          class="flex items-center mt-2"
-          :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="[ready ? 'bg-k-green-accent' : 'bg-neutral-5']">
-            <p>
-              {{ mintLabel }}
-            </p>
-
-            <NeoIcon v-if="ready" class="ml-1" icon="check" />
-          </div>
-
-          <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'
-
-const props = defineProps<{
-  holderOfCollection: {
-    isHolder?: boolean
-    collectionId?: string
-  }
-  minimumFunds: { amount: number; description: string }
-
-  isMintedOut: boolean
-  userMintedCount: number
-  userMaxAvailableToMint: number
-}>()
-
-const { $i18n } = useNuxtApp()
-const { urlPrefix } = usePrefix()
-const { accountId } = useAuth()
-
-const { collection } = useCollectionMinimal({
-  collectionId: computed(() => props.holderOfCollection.collectionId || ''),
-})
-
-const useList = computed(() => conditionsStates.value.length > 1)
-
-const showHolderOfCollection = computed(
-  () => !!props.holderOfCollection.collectionId,
-)
-
-const canMintAsManyNftsAsPossible = computed(
-  () => props.userMaxAvailableToMint === Infinity,
-)
-
-const checkMinimumFunds = computed(() => Boolean(props.minimumFunds.amount))
-
-const conditionsStates = computed(() => [
-  Boolean(props.holderOfCollection.isHolder),
-  checkMinimumFunds.value,
-])
-
-const requirementsCompleted = computed(() =>
-  conditionsStates.value.every(Boolean),
-)
-
-const ready = computed(() => requirementsCompleted.value)
-
-const mintLabel = computed(() => {
-  if (!accountId.value) {
-    return $i18n.t('mint.unlockable.connectWallet')
-  }
-
-  const remaining = props.userMaxAvailableToMint - props.userMintedCount
-
-  if (ready.value) {
-    if (canMintAsManyNftsAsPossible.value) {
-      return $i18n.t('mint.unlockable.readyToMint')
-    }
-
-    return `${$i18n.t('mint.unlockable.readyToMint')}: ${$i18n.t(
-      'mint.unlockable.nftsRemaining',
-      [remaining],
-    )}`
-  }
-
-  return $i18n.t('mint.unlockable.readyToMint')
-})
-
-const available = computed(() =>
-  canMintAsManyNftsAsPossible.value
-    ? '∞'
-    : `${props.userMintedCount}/${props.userMaxAvailableToMint}`,
-)
-</script>
-
-<style scoped lang="scss"></style>
diff --git a/components/collection/drop/MintSection/MintSection.vue b/components/collection/drop/MintSection/MintSection.vue
index 5bffd1b7db..ca9681505f 100644
--- a/components/collection/drop/MintSection/MintSection.vue
+++ b/components/collection/drop/MintSection/MintSection.vue
@@ -41,17 +41,12 @@
           :to="`/${urlPrefix}/gallery/${userMintedNftId}`" />
       </div>
 
-      <HolderOfGenerativeMintRequirements
+      <HolderOfCollectionMintRequirements
         v-else-if="showHolderOfCollection"
         class="my-5"
-        :holder-of-collection="{
-          isHolder: holderOfCollection.isHolderOfTargetCollection,
-          collectionId: holderOfCollection.id,
-        }"
+        :holder-of-collection="holderOfCollection"
         :minimum-funds="minimumFunds"
-        :is-minted-out="isMintedOut"
-        :user-max-available-to-mint="userMaxAvailableToMint"
-        :user-minted-count="userMintedCount">
+        :is-minted-out="isMintedOut">
         <NeoButton
           ref="root"
           class="ml-5 my-2 mint-button"
@@ -61,7 +56,7 @@
           :loading-with-label="isWalletConnecting"
           :label="mintButtonLabel"
           @click="handleMint" />
-      </HolderOfGenerativeMintRequirements>
+      </HolderOfCollectionMintRequirements>
 
       <div v-else class="flex justify-end flex-wrap">
         <div v-if="minimumFunds.amount" class="flex items-center">
@@ -88,7 +83,7 @@
 <script setup lang="ts">
 import UnlockableSlider from '@/components/collection/unlockable/UnlockableSlider.vue'
 import { NeoButton, NeoIcon } from '@kodadot1/brick'
-import HolderOfGenerativeMintRequirements from './HolderOfGenerativeMintRequirements.vue'
+import HolderOfCollectionMintRequirements from './HolderOfCollectionMintRequirements.vue'
 
 const NuxtLink = resolveComponent('NuxtLink')
 
@@ -104,15 +99,20 @@ const props = withDefaults(
     isLoading: boolean
     mintButton: { label: string; disabled: boolean }
     userMintedNftId?: string
-    userMaxAvailableToMint: number
-    userMintedCount: number
-    holderOfCollection?: { id?: string; isHolderOfTargetCollection?: boolean }
+    holderOfCollection?: {
+      id?: string
+      isHolder?: boolean
+      amount?: {
+        total: number
+        used: number
+      }
+    }
     collectionId: string
     availableToMint?: number
   }>(),
   {
     userMintedNftId: undefined,
-    holderOfCollection: () => ({ id: '', isHolderOfTargetCollection: false }),
+    holderOfCollection: () => ({ id: '', isHolder: false }),
   },
 )
 
diff --git a/components/collection/drop/PaidGenerative.vue b/components/collection/drop/PaidGenerative.vue
index 0372591900..42a6a8ff35 100644
--- a/components/collection/drop/PaidGenerative.vue
+++ b/components/collection/drop/PaidGenerative.vue
@@ -4,8 +4,6 @@
     :description="description"
     :drop="drop"
     :user-minted-nft-id="userMintedNftId"
-    :user-max-available-to-mint="Infinity"
-    :user-minted-count="mintedAmountForCurrentUser"
     :is-wallet-connecting="isWalletConnecting"
     :is-image-fetching="isImageFetching"
     :is-loading="isLoading"

From 49b343fb3ce99b24d1f54c6ed2af01627e57b20e Mon Sep 17 00:00:00 2001
From: hassnian <hassnianxd@gmail.com>
Date: Wed, 17 Jan 2024 08:25:07 +0500
Subject: [PATCH 04/29] add: holder of collection tooltip

---
 .../collection/drop/HolderOfGenerative.vue    |  7 +-
 .../HolderOfCollectionMintRequirements.vue    | 85 +++++++++++--------
 .../drop/MintSection/MintRequirementItem.vue  |  4 +-
 locales/en.json                               |  7 +-
 4 files changed, 57 insertions(+), 46 deletions(-)

diff --git a/components/collection/drop/HolderOfGenerative.vue b/components/collection/drop/HolderOfGenerative.vue
index 00f0987a56..ce83b9443a 100644
--- a/components/collection/drop/HolderOfGenerative.vue
+++ b/components/collection/drop/HolderOfGenerative.vue
@@ -16,8 +16,7 @@
     :mint-count-available="mintCountAvailable"
     :mint-button="mintButtonProps"
     :handle-select-image="handleSelectImage"
-    :handle-submit-mint="handleSubmitMint"
-    :max-available-to-mint="1" />
+    :handle-submit-mint="handleSubmitMint" />
 
   <CollectionDropAddFundsModal
     v-model="isAddFundModalActive"
@@ -198,10 +197,10 @@ const mintButtonLabel = computed(() => {
         : $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 ||
diff --git a/components/collection/drop/MintSection/HolderOfCollectionMintRequirements.vue b/components/collection/drop/MintSection/HolderOfCollectionMintRequirements.vue
index 6fe6a1c8f4..ed24568e9e 100644
--- a/components/collection/drop/MintSection/HolderOfCollectionMintRequirements.vue
+++ b/components/collection/drop/MintSection/HolderOfCollectionMintRequirements.vue
@@ -6,48 +6,58 @@
 
     <div>
       <div class="flex justify-between">
-        <div class="flex gap-4 flex-col">
+        <div class="flex gap-4 flex-col w-full">
           <MintRequirementItem
             v-if="showHolderOfCollection && collection"
-            :fulfilled="holderOfCollection.isHolder || false">
-            <p class="capitalize">
-              Holder of NFT from
-              <nuxt-link
-                class="text-link-hover"
-                :to="`/${urlPrefix}/collection/${props.holderOfCollection.collectionId}`">
-                {{ collection?.name }}
-              </nuxt-link>
-              collection
-            </p>
+            :fulfilled="Boolean(holderOfCollection.isHolder)">
+            <div class="flex justify-between items-center w-full">
+              <p class="capitalize">
+                Holder of NFT from
+                <nuxt-link
+                  class="text-link-hover"
+                  :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?.used }}/{{
+                    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')"
+                      class="mb-3" />
+                    <p
+                      v-dompurify-html="
+                        $t('mint.unlockable.holderOfWarning2')
+                      " />
+                  </template>
+                </NeoTooltip>
+              </div>
+            </div>
           </MintRequirementItem>
           <MintRequirementItem v-if="checkMinimumFunds" fulfilled>
             <p v-dompurify-html="minimumFunds.description" />
           </MintRequirementItem>
         </div>
-
-        <div v-if="!isMintedOut" class="text-xs">
-          <span class="text-k-grey capitalize mr-2">
-            {{ $t('mint.unlockable.availableForMint') }}
-          </span>
-          <span
-            >{{ props.holderOfCollection.amount?.used }}/{{
-              props.holderOfCollection.amount?.total
-            }}</span
-          >
-
-          <NeoTooltip
-            multiline
-            position="top"
-            :auto-close="['outside', 'inside']"
-            class="text-neutral-7">
-            <NeoIcon
-              icon="fa-info-circle"
-              pack="fa-regular"
-              class="ml-2 text-k-grey" />
-
-            <template #content> </template>
-          </NeoTooltip>
-        </div>
       </div>
 
       <div
@@ -110,7 +120,10 @@ const mintLabel = computed(() => {
   }
 
   if (readyToMint.value) {
-    return $i18n.t('mint.unlockable.readyToMint')
+    return $i18n.t('mint.unlockable.readyToMint', [
+      props.holderOfCollection.amount?.total -
+        props.holderOfCollection.amount?.used,
+    ])
   }
 
   return $i18n.t('mint.unlockable.requirementsNotMet')
diff --git a/components/collection/drop/MintSection/MintRequirementItem.vue b/components/collection/drop/MintSection/MintRequirementItem.vue
index 0c328d940d..7dda833e9a 100644
--- a/components/collection/drop/MintSection/MintRequirementItem.vue
+++ b/components/collection/drop/MintSection/MintRequirementItem.vue
@@ -2,9 +2,7 @@
   <div class="flex items-center">
     <NeoIcon class="mr-4" :icon="icon" :class="iconClass" />
 
-    <div>
-      <slot />
-    </div>
+    <slot />
   </div>
 </template>
 
diff --git a/locales/en.json b/locales/en.json
index 518d716bd0..d8f48af3e4 100644
--- a/locales/en.json
+++ b/locales/en.json
@@ -657,9 +657,10 @@
       "requirements": "Requirements",
       "connectWallet": "Connect wallet to proceed",
       "availableForMint": "Available for mint",
-      "readyToMint": "Ready to Mint",
-      "nftsRemaining": "{0} NFTs Remaining",
-      "requirementsNotMet": "Requirements not met"
+      "readyToMint": "Ready to Mint: {0} NFTs Remaining",
+      "requirementsNotMet": "Requirements not met",
+      "holderOfWarning1": "Each Motherboard collection NFT allows you to <strong>mint one</strong> new NFT.",
+      "holderOfWarning2": "After a claim, that NFT <strong>can't be</strong> used for another mint."
     },
     "blockchain": {
       "label": "Select Blockchain",

From 4d746f5b468ebf66d6864d363d0715d4c441d96a Mon Sep 17 00:00:00 2001
From: hassnian <hassnianxd@gmail.com>
Date: Wed, 17 Jan 2024 10:25:09 +0500
Subject: [PATCH 05/29] add: check if holder of collection  nfts are already
 claimed

---
 .../collection/drop/HolderOfGenerative.vue    | 23 +++++++++++++++++--
 .../HolderOfCollectionMintRequirements.vue    | 17 ++++++++++----
 components/drops/useDrops.ts                  | 21 +++++++++++++++++
 components/gallery/GalleryItemHolderOf.vue    | 20 ++++------------
 locales/en.json                               |  2 +-
 5 files changed, 59 insertions(+), 24 deletions(-)

diff --git a/components/collection/drop/HolderOfGenerative.vue b/components/collection/drop/HolderOfGenerative.vue
index ce83b9443a..6c3ef5a0ef 100644
--- a/components/collection/drop/HolderOfGenerative.vue
+++ b/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'
@@ -72,6 +76,7 @@ const minimumFundsProps = computed(() => ({
 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 +89,7 @@ const { client } = usePrefix()
 const isLoading = ref(false)
 const isImageFetching = ref(false)
 const isAddFundModalActive = ref(false)
+const amountClaimedNfts = ref(0)
 
 const {
   defaultName,
@@ -181,7 +187,7 @@ const holderOfCollection = computed(() => ({
   isHolder: isHolderOfTargetCollection.value,
   amount: {
     total: maxMintLimitForCurrentUser.value,
-    used: 0,
+    used: amountClaimedNfts.value,
   },
 }))
 
@@ -345,6 +351,19 @@ const handleDropAddModalConfirm = () => {
   closeAddFundModal()
   fetchMultipleBalance([urlPrefix.value])
 }
+
+watch(
+  holderOfCollectionData,
+  async () => {
+    const nftIds = holderOfCollectionData.value.nftEntities.map((nft) => nft.sn)
+    const claimed = await Promise.all(
+      nftIds.map((sn) => isNftClaimed(sn, collectionId.value)),
+    )
+
+    amountClaimedNfts.value = claimed.filter(Boolean).length
+  },
+  { immediate: true },
+)
 </script>
 
 <style scoped lang="scss">
diff --git a/components/collection/drop/MintSection/HolderOfCollectionMintRequirements.vue b/components/collection/drop/MintSection/HolderOfCollectionMintRequirements.vue
index ed24568e9e..104884c526 100644
--- a/components/collection/drop/MintSection/HolderOfCollectionMintRequirements.vue
+++ b/components/collection/drop/MintSection/HolderOfCollectionMintRequirements.vue
@@ -43,7 +43,11 @@
 
                   <template #content>
                     <p
-                      v-dompurify-html="$t('mint.unlockable.holderOfWarning1')"
+                      v-dompurify-html="
+                        $t('mint.unlockable.holderOfWarning1', [
+                          collection?.name,
+                        ])
+                      "
                       class="mb-3" />
                     <p
                       v-dompurify-html="
@@ -114,16 +118,19 @@ const readyToMint = computed(
   () => Boolean(props.holderOfCollection.isHolder) && checkMinimumFunds.value,
 )
 
+const availableForMint = computed(
+  () =>
+    (props.holderOfCollection.amount?.total || 0) -
+    (props.holderOfCollection.amount?.used || 0),
+)
+
 const mintLabel = computed(() => {
   if (!accountId.value) {
     return $i18n.t('mint.unlockable.connectWallet')
   }
 
   if (readyToMint.value) {
-    return $i18n.t('mint.unlockable.readyToMint', [
-      props.holderOfCollection.amount?.total -
-        props.holderOfCollection.amount?.used,
-    ])
+    return $i18n.t('mint.unlockable.readyToMint', [availableForMint.value])
   }
 
   return $i18n.t('mint.unlockable.requirementsNotMet')
diff --git a/components/drops/useDrops.ts b/components/drops/useDrops.ts
index 9fca786bd9..06000c5634 100644
--- a/components/drops/useDrops.ts
+++ b/components/drops/useDrops.ts
@@ -165,3 +165,24 @@ export const useDropMinimumFunds = (drop) => {
     formattedExistentialDeposit,
   }
 }
+
+export const useHolderOfCollectionDrop = () => {
+  const { apiInstance } = useApi()
+
+  const isNftClaimed = async (sn: string, collectionId: string) => {
+    const api = await apiInstance.value
+
+    const claimed = await api.query.nfts.attribute(
+      collectionId,
+      sn,
+      { Pallet: null },
+      '0x0033000000',
+    )
+
+    const wasUsed = claimed.toHuman()
+
+    return wasUsed !== null
+  }
+
+  return { isNftClaimed }
+}
diff --git a/components/gallery/GalleryItemHolderOf.vue b/components/gallery/GalleryItemHolderOf.vue
index c14641c576..99c32808ca 100644
--- a/components/gallery/GalleryItemHolderOf.vue
+++ b/components/gallery/GalleryItemHolderOf.vue
@@ -10,13 +10,13 @@
 <script setup lang="ts">
 import { NeoIcon } from '@kodadot1/brick'
 import { NFT } from '@/components/rmrk/service/scheme'
-import { useDrop } from '../drops/useDrops'
+import { useDrop, useHolderOfCollectionDrop } from '../drops/useDrops'
 
 const props = defineProps<{
   nft: NFT
 }>()
 
-const { apiInstance } = useApi()
+const { isNftClaimed } = useHolderOfCollectionDrop()
 
 const isHolderOfCollection = computed(() =>
   Object.keys(HOLDER_OF_DROP_MAP).includes(props.nft.collection.id),
@@ -33,20 +33,8 @@ const hasAvailable = computed(() => {
   return Math.min(exclusiveDrop?.minted || 0, chainMax) < chainMax
 })
 
-const checkIfAlreadyClaimed = async () => {
-  const api = await apiInstance.value
-
-  const claimed = await api.query.nfts.attribute(
-    props.nft.collection.id,
-    props.nft.sn,
-    { Pallet: null },
-    '0x0033000000',
-  )
-
-  const wasUsed = claimed.toHuman()
-
-  return wasUsed !== null
-}
+const checkIfAlreadyClaimed = async () =>
+  isNftClaimed(props.nft.sn, props.nft.collection.id)
 
 const isActiveDrop = computed(
   () => Boolean(exclusiveDrop) && !exclusiveDrop.disabled && hasAvailable.value,
diff --git a/locales/en.json b/locales/en.json
index d8f48af3e4..a3ca8ffd3f 100644
--- a/locales/en.json
+++ b/locales/en.json
@@ -659,7 +659,7 @@
       "availableForMint": "Available for mint",
       "readyToMint": "Ready to Mint: {0} NFTs Remaining",
       "requirementsNotMet": "Requirements not met",
-      "holderOfWarning1": "Each Motherboard collection NFT allows you to <strong>mint one</strong> new NFT.",
+      "holderOfWarning1": "Each {0} collection NFT allows you to <strong>mint one</strong> new NFT.",
       "holderOfWarning2": "After a claim, that NFT <strong>can't be</strong> used for another mint."
     },
     "blockchain": {

From 792d0b2a36133ff742c61028e0aad408cce0b796 Mon Sep 17 00:00:00 2001
From: hassnian <hassnianxd@gmail.com>
Date: Wed, 17 Jan 2024 10:29:52 +0500
Subject: [PATCH 06/29] remove:  empy tags

---
 .../drop/MintSection/HolderOfCollectionMintRequirements.vue     | 2 --
 components/collection/drop/MintSection/MintRequirementItem.vue  | 2 --
 2 files changed, 4 deletions(-)

diff --git a/components/collection/drop/MintSection/HolderOfCollectionMintRequirements.vue b/components/collection/drop/MintSection/HolderOfCollectionMintRequirements.vue
index 104884c526..641013b944 100644
--- a/components/collection/drop/MintSection/HolderOfCollectionMintRequirements.vue
+++ b/components/collection/drop/MintSection/HolderOfCollectionMintRequirements.vue
@@ -136,5 +136,3 @@ const mintLabel = computed(() => {
   return $i18n.t('mint.unlockable.requirementsNotMet')
 })
 </script>
-
-<style scoped lang="scss"></style>
diff --git a/components/collection/drop/MintSection/MintRequirementItem.vue b/components/collection/drop/MintSection/MintRequirementItem.vue
index 7dda833e9a..be8ec5a8a3 100644
--- a/components/collection/drop/MintSection/MintRequirementItem.vue
+++ b/components/collection/drop/MintSection/MintRequirementItem.vue
@@ -31,5 +31,3 @@ const iconClass = computed(() => {
   return props.fulfilled ? 'text-k-green' : 'text-k-red'
 })
 </script>
-
-<style scoped></style>

From 5f9982512757cdc2e83ad9f5696a23ac896371f4 Mon Sep 17 00:00:00 2001
From: hassnian <hassnianxd@gmail.com>
Date: Wed, 17 Jan 2024 11:23:16 +0500
Subject: [PATCH 07/29] add: check has minimumFunds amount

---
 components/collection/drop/GenerativeLayout.vue     |  2 +-
 components/collection/drop/HolderOfGenerative.vue   |  1 +
 .../HolderOfCollectionMintRequirements.vue          | 13 +++++++++----
 .../collection/drop/MintSection/MintSection.vue     |  2 +-
 4 files changed, 12 insertions(+), 6 deletions(-)

diff --git a/components/collection/drop/GenerativeLayout.vue b/components/collection/drop/GenerativeLayout.vue
index 239bb8f3b2..1e6711054a 100644
--- a/components/collection/drop/GenerativeLayout.vue
+++ b/components/collection/drop/GenerativeLayout.vue
@@ -74,7 +74,7 @@ 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
diff --git a/components/collection/drop/HolderOfGenerative.vue b/components/collection/drop/HolderOfGenerative.vue
index 6c3ef5a0ef..cef72ed2b1 100644
--- a/components/collection/drop/HolderOfGenerative.vue
+++ b/components/collection/drop/HolderOfGenerative.vue
@@ -71,6 +71,7 @@ const minimumFundsDescription = computed(() =>
 const minimumFundsProps = computed(() => ({
   amount: minimumFunds.value,
   description: minimumFundsDescription.value,
+  hasAmount: hasMinimumFunds.value,
 }))
 
 const isWalletConnecting = ref(false)
diff --git a/components/collection/drop/MintSection/HolderOfCollectionMintRequirements.vue b/components/collection/drop/MintSection/HolderOfCollectionMintRequirements.vue
index 641013b944..f2302926d7 100644
--- a/components/collection/drop/MintSection/HolderOfCollectionMintRequirements.vue
+++ b/components/collection/drop/MintSection/HolderOfCollectionMintRequirements.vue
@@ -14,7 +14,7 @@
               <p class="capitalize">
                 Holder of NFT from
                 <nuxt-link
-                  class="text-link-hover"
+                  class="has-text-link"
                   :to="`/${urlPrefix}/collection/${props.holderOfCollection.id}`">
                   {{ collection?.name }}
                 </nuxt-link>
@@ -58,7 +58,9 @@
               </div>
             </div>
           </MintRequirementItem>
-          <MintRequirementItem v-if="checkMinimumFunds" fulfilled>
+          <MintRequirementItem
+            v-if="checkMinimumFunds"
+            :fulfilled="minimumFunds.hasAmount">
             <p v-dompurify-html="minimumFunds.description" />
           </MintRequirementItem>
         </div>
@@ -98,7 +100,7 @@ const props = defineProps<{
       used: number
     }
   }
-  minimumFunds: { amount: number; description: string }
+  minimumFunds: { amount: number; description: string; hasAmount: boolean }
   isMintedOut: boolean
 }>()
 
@@ -115,7 +117,10 @@ const showHolderOfCollection = computed(() => !!props.holderOfCollection.id)
 const checkMinimumFunds = computed(() => Boolean(props.minimumFunds.amount))
 
 const readyToMint = computed(
-  () => Boolean(props.holderOfCollection.isHolder) && checkMinimumFunds.value,
+  () =>
+    Boolean(props.holderOfCollection.isHolder) &&
+    checkMinimumFunds.value &&
+    props.minimumFunds.hasAmount,
 )
 
 const availableForMint = computed(
diff --git a/components/collection/drop/MintSection/MintSection.vue b/components/collection/drop/MintSection/MintSection.vue
index ca9681505f..025f8534f9 100644
--- a/components/collection/drop/MintSection/MintSection.vue
+++ b/components/collection/drop/MintSection/MintSection.vue
@@ -93,7 +93,7 @@ const props = withDefaults(
     mintCountAvailable: boolean
     disabledByBackend: number
     maxCount: number
-    minimumFunds: { amount: number; description: string }
+    minimumFunds: { amount: number; description: string; hasAmount: boolean }
     isImageFetching: boolean
     isWalletConnecting: boolean
     isLoading: boolean

From 1a257fc2cf63d20456d2ba3dd8e9fdb910419e92 Mon Sep 17 00:00:00 2001
From: hassnian <hassnianxd@gmail.com>
Date: Wed, 17 Jan 2024 11:33:22 +0500
Subject: [PATCH 08/29] add: requiremnt check available for mint amount

---
 .../drop/MintSection/HolderOfCollectionMintRequirements.vue    | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/components/collection/drop/MintSection/HolderOfCollectionMintRequirements.vue b/components/collection/drop/MintSection/HolderOfCollectionMintRequirements.vue
index f2302926d7..83b6c9d190 100644
--- a/components/collection/drop/MintSection/HolderOfCollectionMintRequirements.vue
+++ b/components/collection/drop/MintSection/HolderOfCollectionMintRequirements.vue
@@ -120,7 +120,8 @@ const readyToMint = computed(
   () =>
     Boolean(props.holderOfCollection.isHolder) &&
     checkMinimumFunds.value &&
-    props.minimumFunds.hasAmount,
+    props.minimumFunds.hasAmount &&
+    availableForMint.value !== 0,
 )
 
 const availableForMint = computed(

From 14a49f4c2b2db8c340d3c0204c696ba9c059686f Mon Sep 17 00:00:00 2001
From: hassnian <hassnianxd@gmail.com>
Date: Wed, 17 Jan 2024 11:41:13 +0500
Subject: [PATCH 09/29] add: missing hasAmount minimumFundsProps

---
 components/collection/drop/Generative.vue     |  3 +-
 .../collection/drop/HolderOfCollection.vue    | 51 -------------------
 components/collection/drop/PaidGenerative.vue |  1 +
 3 files changed, 3 insertions(+), 52 deletions(-)
 delete mode 100644 components/collection/drop/HolderOfCollection.vue

diff --git a/components/collection/drop/Generative.vue b/components/collection/drop/Generative.vue
index 2e11f13233..7fd0794b03 100644
--- a/components/collection/drop/Generative.vue
+++ b/components/collection/drop/Generative.vue
@@ -7,7 +7,7 @@
     :minimum-funds="minimumFundsProps"
     :max-count="maxCount"
     :minted-count="mintedCount"
-    :mint-count-available="mintCountAvailable && !disabledByBackend"
+    :mint-count-available="mintCountAvailable || !disabledByBackend"
     :mint-button="mintButtonProps"
     :collection-id="collectionId"
     :description="description"
@@ -119,6 +119,7 @@ const minimumFundsDescription = computed(() =>
 const minimumFundsProps = computed(() => ({
   amount: minimumFunds.value,
   description: minimumFundsDescription.value,
+  hasAmount: hasMinimumFunds.value,
 }))
 
 const isWalletConnecting = ref(false)
diff --git a/components/collection/drop/HolderOfCollection.vue b/components/collection/drop/HolderOfCollection.vue
deleted file mode 100644
index 4013dce39f..0000000000
--- a/components/collection/drop/HolderOfCollection.vue
+++ /dev/null
@@ -1,51 +0,0 @@
-<template>
-  <div v-if="collection" class="is-flex is-align-items-center">
-    <NeoIcon
-      :icon="isHolder ? 'circle-check' : 'lock-keyhole'"
-      icon-pack="fas"
-      :class="[
-        'mr-3',
-        {
-          'has-text-success': isHolder,
-          'text-k-grey': !isHolder,
-        },
-      ]" />
-    <NuxtImg
-      height="32"
-      densities="2x"
-      :src="sanitizeIpfsUrl(collection?.meta?.image)"
-      alt="avatar"
-      class="object-fit-cove mr-3 border" />
-    <div>
-      <div class="text-xs text-k-grey">Exclusive to NFT owners of</div>
-      <div class="is-size-6">
-        <nuxt-link :to="`/${urlPrefix}/collection/${collectionId}`">
-          {{ collection?.name }}
-        </nuxt-link>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { useCollectionMinimal } from '@/components/collection/utils/useCollectionDetails'
-import { sanitizeIpfsUrl } from '@/utils/ipfs'
-import { NeoIcon } from '@kodadot1/brick'
-
-const props = defineProps({
-  isHolder: {
-    type: Boolean,
-    default: false,
-  },
-  collectionId: {
-    type: String,
-    default: '',
-  },
-})
-
-const { urlPrefix } = usePrefix()
-
-const { collection } = useCollectionMinimal({
-  collectionId: computed(() => props.collectionId),
-})
-</script>
diff --git a/components/collection/drop/PaidGenerative.vue b/components/collection/drop/PaidGenerative.vue
index 42a6a8ff35..60c4054402 100644
--- a/components/collection/drop/PaidGenerative.vue
+++ b/components/collection/drop/PaidGenerative.vue
@@ -93,6 +93,7 @@ const toMintNft = computed<ToMintNft>(() => ({
 const minimumFundsProps = computed(() => ({
   amount: minimumFunds.value,
   description: minimumFundsDescription.value,
+  hasAmount: hasMinimumFunds.value,
 }))
 
 const isWalletConnecting = ref(false)

From a9425441af1635840a4fe646d29ee33b7cf8f926 Mon Sep 17 00:00:00 2001
From: hassnian <hassnianxd@gmail.com>
Date: Wed, 17 Jan 2024 12:06:45 +0500
Subject: [PATCH 10/29] add: mobile version holder of requirements

---
 .../drop/MintSection/HolderOfCollectionMintRequirements.vue | 6 ++++--
 components/collection/drop/MintSection/MintSection.vue      | 2 +-
 2 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/components/collection/drop/MintSection/HolderOfCollectionMintRequirements.vue b/components/collection/drop/MintSection/HolderOfCollectionMintRequirements.vue
index 83b6c9d190..21de6e44a6 100644
--- a/components/collection/drop/MintSection/HolderOfCollectionMintRequirements.vue
+++ b/components/collection/drop/MintSection/HolderOfCollectionMintRequirements.vue
@@ -67,7 +67,7 @@
       </div>
 
       <div
-        class="flex items-center mt-2"
+        class="flex items-start md:items-center mt-6 flex-col md:flex-row"
         :class="[isMintedOut ? 'justify-end' : 'justify-between']">
         <div
           v-if="!isMintedOut"
@@ -80,7 +80,9 @@
           <NeoIcon v-if="readyToMint" class="ml-1" icon="check" />
         </div>
 
-        <slot />
+        <div class="mt-[24px] md:mt-0">
+          <slot />
+        </div>
       </div>
     </div>
   </div>
diff --git a/components/collection/drop/MintSection/MintSection.vue b/components/collection/drop/MintSection/MintSection.vue
index 025f8534f9..7f9ae6afb6 100644
--- a/components/collection/drop/MintSection/MintSection.vue
+++ b/components/collection/drop/MintSection/MintSection.vue
@@ -49,7 +49,7 @@
         :is-minted-out="isMintedOut">
         <NeoButton
           ref="root"
-          class="ml-5 my-2 mint-button"
+          class="mint-button"
           variant="k-accent"
           :loading="loading"
           :disabled="mintButtonDisabled"

From cc92d98092f60f0f3daef142eef7374f1cf54419 Mon Sep 17 00:00:00 2001
From: hassnian <hassnianxd@gmail.com>
Date: Wed, 17 Jan 2024 13:18:55 +0500
Subject: [PATCH 11/29] fix: checkAlreadyClaimedNfts wrong collection

---
 .../collection/drop/HolderOfGenerative.vue    | 22 +++++++++----------
 1 file changed, 10 insertions(+), 12 deletions(-)

diff --git a/components/collection/drop/HolderOfGenerative.vue b/components/collection/drop/HolderOfGenerative.vue
index cef72ed2b1..ca30a2468f 100644
--- a/components/collection/drop/HolderOfGenerative.vue
+++ b/components/collection/drop/HolderOfGenerative.vue
@@ -348,23 +348,21 @@ const submitMint = async (sn: string) => {
   }
 }
 
+const checkAlreadyClaimedNfts = async () => {
+  const nftIds = holderOfCollectionData.value.nftEntities.map((nft) => nft.sn)
+  const claimed = await Promise.all(
+    nftIds.map((sn) => isNftClaimed(sn, holderOfCollectionId)),
+  )
+
+  amountClaimedNfts.value = claimed.filter(Boolean).length
+}
+
 const handleDropAddModalConfirm = () => {
   closeAddFundModal()
   fetchMultipleBalance([urlPrefix.value])
 }
 
-watch(
-  holderOfCollectionData,
-  async () => {
-    const nftIds = holderOfCollectionData.value.nftEntities.map((nft) => nft.sn)
-    const claimed = await Promise.all(
-      nftIds.map((sn) => isNftClaimed(sn, collectionId.value)),
-    )
-
-    amountClaimedNfts.value = claimed.filter(Boolean).length
-  },
-  { immediate: true },
-)
+watch(holderOfCollectionData, checkAlreadyClaimedNfts, { immediate: true })
 </script>
 
 <style scoped lang="scss">

From 848884ab3a7da4e23cdb3d65dbc916a5a67a9d43 Mon Sep 17 00:00:00 2001
From: hassnian <hassnianxd@gmail.com>
Date: Wed, 17 Jan 2024 13:20:47 +0500
Subject: [PATCH 12/29] ref: use correct transaltion

---
 components/collection/drop/HolderOfGenerative.vue | 2 +-
 locales/en.json                                   | 5 +++--
 2 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/components/collection/drop/HolderOfGenerative.vue b/components/collection/drop/HolderOfGenerative.vue
index ca30a2468f..4098116793 100644
--- a/components/collection/drop/HolderOfGenerative.vue
+++ b/components/collection/drop/HolderOfGenerative.vue
@@ -62,7 +62,7 @@ const { fetchMultipleBalance } = useMultipleBalance()
 const { hasMinimumFunds, formattedMinimumFunds, minimumFunds } =
   useDropMinimumFunds(props.drop)
 const minimumFundsDescription = computed(() =>
-  $i18n.t('mint.unlockable.minimumFundsDescription', [
+  $i18n.t('mint.unlockable.minimumFundsHolderOfDescription', [
     formattedMinimumFunds.value,
     chainName.value,
   ]),
diff --git a/locales/en.json b/locales/en.json
index a3ca8ffd3f..af817359c5 100644
--- a/locales/en.json
+++ b/locales/en.json
@@ -617,8 +617,9 @@
       "onlyOneExample": "Example Of Drop",
       "mintThisNft": "Mint This NFT",
       "seeYourNft": "See Your NFT",
-      "minimumFundsDescription": "Holding a Minimum of <strong>{0}</strong> On {1} in Your Wallet",
-      "freeMinimumFundsDescription": "Holding a Minimum of <strong>{0}</strong> On {1} in Your Wallet",
+      "minimumFundsDescription": "Holding a Minimum of <strong>{0} On {1}</strong> in Your Wallet is Required",
+      "minimumFundsHolderOfDescription": "Holding a Minimum of <strong>{0}</strong> On {1} in Your Wallet is Required",
+      "freeMinimumFundsDescription": "Holding a Minimum of <strong>{0} On {1}</strong> in Your Wallet is Required for This Free Mint.",
       "claimNftNow": "Claim NFT Now",
       "claimPaidNft": "Claim For {0}",
       "nftAlreadyMinted": "NFT Already Minted",

From 20350ebe36f74d7b5dcdb1f9484ce0e63beffe7d Mon Sep 17 00:00:00 2001
From: hassnian <hassnianxd@gmail.com>
Date: Wed, 17 Jan 2024 13:22:40 +0500
Subject: [PATCH 13/29] ref: transaltion key rename

---
 components/collection/drop/HolderOfGenerative.vue | 2 +-
 locales/en.json                                   | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/components/collection/drop/HolderOfGenerative.vue b/components/collection/drop/HolderOfGenerative.vue
index 4098116793..840fd7de20 100644
--- a/components/collection/drop/HolderOfGenerative.vue
+++ b/components/collection/drop/HolderOfGenerative.vue
@@ -62,7 +62,7 @@ const { fetchMultipleBalance } = useMultipleBalance()
 const { hasMinimumFunds, formattedMinimumFunds, minimumFunds } =
   useDropMinimumFunds(props.drop)
 const minimumFundsDescription = computed(() =>
-  $i18n.t('mint.unlockable.minimumFundsHolderOfDescription', [
+  $i18n.t('mint.unlockable.holderOfCollectionMinimumFundsDescription', [
     formattedMinimumFunds.value,
     chainName.value,
   ]),
diff --git a/locales/en.json b/locales/en.json
index af817359c5..73c90fe412 100644
--- a/locales/en.json
+++ b/locales/en.json
@@ -618,7 +618,7 @@
       "mintThisNft": "Mint This NFT",
       "seeYourNft": "See Your NFT",
       "minimumFundsDescription": "Holding a Minimum of <strong>{0} On {1}</strong> in Your Wallet is Required",
-      "minimumFundsHolderOfDescription": "Holding a Minimum of <strong>{0}</strong> On {1} in Your Wallet is Required",
+      "holderOfCollectionMinimumFundsDescription": "Holding a Minimum of <strong>{0}</strong> On {1} in Your Wallet",
       "freeMinimumFundsDescription": "Holding a Minimum of <strong>{0} On {1}</strong> in Your Wallet is Required for This Free Mint.",
       "claimNftNow": "Claim NFT Now",
       "claimPaidNft": "Claim For {0}",

From 7df5f901ddea3ff540936094d7f0e0556cbc5b7d Mon Sep 17 00:00:00 2001
From: hassnian <hassnianxd@gmail.com>
Date: Wed, 17 Jan 2024 13:27:16 +0500
Subject: [PATCH 14/29] add: check hasMinimumFunds mint button disabled and
 label

---
 components/collection/drop/HolderOfGenerative.vue | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/components/collection/drop/HolderOfGenerative.vue b/components/collection/drop/HolderOfGenerative.vue
index 840fd7de20..5263e3e71f 100644
--- a/components/collection/drop/HolderOfGenerative.vue
+++ b/components/collection/drop/HolderOfGenerative.vue
@@ -197,7 +197,8 @@ const mintButtonLabel = computed(() => {
     ? $i18n.t('shoppingCart.wallet')
     : isLogIn.value
       ? isHolderOfTargetCollection.value &&
-        maxMintLimitForCurrentUser.value > mintedAmountForCurrentUser.value
+        maxMintLimitForCurrentUser.value > mintedAmountForCurrentUser.value &&
+        hasMinimumFunds.value
         ? $i18n.t('mint.unlockable.claimPaidNft', [
             `${depositAmount.value} ${depositChainSymbol.value}`,
           ])
@@ -212,7 +213,9 @@ const mintButtonDisabled = computed<boolean>(
       Boolean(
         !selectedImage.value ||
           !isHolderOfTargetCollection.value ||
-          maxMintLimitForCurrentUser.value <= mintedAmountForCurrentUser.value,
+          maxMintLimitForCurrentUser.value <=
+            mintedAmountForCurrentUser.value ||
+          !hasMinimumFunds.value,
       )),
 )
 

From 502800b3715e3987cf95cb870251990442f839c3 Mon Sep 17 00:00:00 2001
From: hassnian <hassnianxd@gmail.com>
Date: Wed, 17 Jan 2024 14:05:13 +0500
Subject: [PATCH 15/29] ref: move holder of collection logic

---
 .../collection/drop/GenerativeLayout.vue      | 10 +----
 .../collection/drop/HolderOfGenerative.vue    | 28 ++++++++++----
 .../HolderOfCollectionMintRequirements.vue    | 38 ++++++++-----------
 .../drop/MintSection/MintSection.vue          | 15 +++-----
 4 files changed, 44 insertions(+), 47 deletions(-)

diff --git a/components/collection/drop/GenerativeLayout.vue b/components/collection/drop/GenerativeLayout.vue
index c23a1a8564..06a3e74f0a 100644
--- a/components/collection/drop/GenerativeLayout.vue
+++ b/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<{
@@ -78,14 +79,7 @@ withDefaults(
     isImageFetching: boolean
     isWalletConnecting: boolean
     isLoading: boolean
-    holderOfCollection?: {
-      id?: string
-      isHolder?: boolean
-      amount?: {
-        total: number
-        used: number
-      }
-    }
+    holderOfCollection?: HolderOfCollectionProp
     userMintedNftId?: string
 
     handleSelectImage: (image: string) => void
diff --git a/components/collection/drop/HolderOfGenerative.vue b/components/collection/drop/HolderOfGenerative.vue
index 5263e3e71f..57d7443141 100644
--- a/components/collection/drop/HolderOfGenerative.vue
+++ b/components/collection/drop/HolderOfGenerative.vue
@@ -48,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
@@ -90,7 +100,7 @@ const { client } = usePrefix()
 const isLoading = ref(false)
 const isImageFetching = ref(false)
 const isAddFundModalActive = ref(false)
-const amountClaimedNfts = ref(0)
+const availableNfts = ref(0)
 
 const {
   defaultName,
@@ -183,12 +193,15 @@ const isHolderOfTargetCollection = computed(
   () => maxMintLimitForCurrentUser.value > 0,
 )
 
-const holderOfCollection = computed(() => ({
+const hasAvailableNfts = computed(() => availableNfts.value !== 0)
+
+const holderOfCollection = computed<HolderOfCollectionProp>(() => ({
   id: holderOfCollectionId,
   isHolder: isHolderOfTargetCollection.value,
+  hasAvailable: hasAvailableNfts.value,
   amount: {
     total: maxMintLimitForCurrentUser.value,
-    used: amountClaimedNfts.value,
+    available: availableNfts.value,
   },
 }))
 
@@ -198,7 +211,8 @@ const mintButtonLabel = computed(() => {
     : isLogIn.value
       ? isHolderOfTargetCollection.value &&
         maxMintLimitForCurrentUser.value > mintedAmountForCurrentUser.value &&
-        hasMinimumFunds.value
+        hasMinimumFunds.value &&
+        hasAvailableNfts.value
         ? $i18n.t('mint.unlockable.claimPaidNft', [
             `${depositAmount.value} ${depositChainSymbol.value}`,
           ])
@@ -351,13 +365,13 @@ const submitMint = async (sn: string) => {
   }
 }
 
-const checkAlreadyClaimedNfts = async () => {
+const checkAvailableNftsToClaim = async () => {
   const nftIds = holderOfCollectionData.value.nftEntities.map((nft) => nft.sn)
   const claimed = await Promise.all(
     nftIds.map((sn) => isNftClaimed(sn, holderOfCollectionId)),
   )
 
-  amountClaimedNfts.value = claimed.filter(Boolean).length
+  availableNfts.value = claimed.filter((x) => !Boolean(x)).length
 }
 
 const handleDropAddModalConfirm = () => {
@@ -365,7 +379,7 @@ const handleDropAddModalConfirm = () => {
   fetchMultipleBalance([urlPrefix.value])
 }
 
-watch(holderOfCollectionData, checkAlreadyClaimedNfts, { immediate: true })
+watch(holderOfCollectionData, checkAvailableNftsToClaim, { immediate: true })
 </script>
 
 <style scoped lang="scss">
diff --git a/components/collection/drop/MintSection/HolderOfCollectionMintRequirements.vue b/components/collection/drop/MintSection/HolderOfCollectionMintRequirements.vue
index 21de6e44a6..d9b2b84ac9 100644
--- a/components/collection/drop/MintSection/HolderOfCollectionMintRequirements.vue
+++ b/components/collection/drop/MintSection/HolderOfCollectionMintRequirements.vue
@@ -9,7 +9,7 @@
         <div class="flex gap-4 flex-col w-full">
           <MintRequirementItem
             v-if="showHolderOfCollection && collection"
-            :fulfilled="Boolean(holderOfCollection.isHolder)">
+            :fulfilled="fulfillsHolderOfCollection">
             <div class="flex justify-between items-center w-full">
               <p class="capitalize">
                 Holder of NFT from
@@ -25,7 +25,7 @@
                   {{ $t('mint.unlockable.availableForMint') }}
                 </span>
                 <span
-                  >{{ props.holderOfCollection.amount?.used }}/{{
+                  >{{ props.holderOfCollection.amount?.available }}/{{
                     props.holderOfCollection.amount?.total
                   }}</span
                 >
@@ -58,9 +58,7 @@
               </div>
             </div>
           </MintRequirementItem>
-          <MintRequirementItem
-            v-if="checkMinimumFunds"
-            :fulfilled="minimumFunds.hasAmount">
+          <MintRequirementItem :fulfilled="fulfillsMinimumFunds">
             <p v-dompurify-html="minimumFunds.description" />
           </MintRequirementItem>
         </div>
@@ -92,16 +90,10 @@
 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: {
-    id?: string
-    isHolder?: boolean
-    amount?: {
-      total: number
-      used: number
-    }
-  }
+  holderOfCollection: HolderOfCollectionProp
   minimumFunds: { amount: number; description: string; hasAmount: boolean }
   isMintedOut: boolean
 }>()
@@ -116,20 +108,22 @@ const { collection } = useCollectionMinimal({
 
 const showHolderOfCollection = computed(() => !!props.holderOfCollection.id)
 
-const checkMinimumFunds = computed(() => Boolean(props.minimumFunds.amount))
-
-const readyToMint = computed(
+const fulfillsHolderOfCollection = computed(
   () =>
     Boolean(props.holderOfCollection.isHolder) &&
-    checkMinimumFunds.value &&
-    props.minimumFunds.hasAmount &&
-    availableForMint.value !== 0,
+    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?.total || 0) -
-    (props.holderOfCollection.amount?.used || 0),
+  () => props.holderOfCollection.amount?.available || 0,
 )
 
 const mintLabel = computed(() => {
diff --git a/components/collection/drop/MintSection/MintSection.vue b/components/collection/drop/MintSection/MintSection.vue
index 7f9ae6afb6..f964cd19e5 100644
--- a/components/collection/drop/MintSection/MintSection.vue
+++ b/components/collection/drop/MintSection/MintSection.vue
@@ -84,6 +84,7 @@
 import UnlockableSlider from '@/components/collection/unlockable/UnlockableSlider.vue'
 import { NeoButton, NeoIcon } from '@kodadot1/brick'
 import HolderOfCollectionMintRequirements from './HolderOfCollectionMintRequirements.vue'
+import type { HolderOfCollectionProp } from '../HolderOfGenerative.vue'
 
 const NuxtLink = resolveComponent('NuxtLink')
 
@@ -99,20 +100,12 @@ const props = withDefaults(
     isLoading: boolean
     mintButton: { label: string; disabled: boolean }
     userMintedNftId?: string
-    holderOfCollection?: {
-      id?: string
-      isHolder?: boolean
-      amount?: {
-        total: number
-        used: number
-      }
-    }
+    holderOfCollection?: HolderOfCollectionProp
     collectionId: string
     availableToMint?: number
   }>(),
   {
     userMintedNftId: undefined,
-    holderOfCollection: () => ({ id: '', isHolder: false }),
   },
 )
 
@@ -142,7 +135,9 @@ const mintButtonDisabled = computed(() =>
   isMintedOut.value ? false : props.mintButton.disabled,
 )
 
-const showHolderOfCollection = computed(() => !!props.holderOfCollection.id)
+const showHolderOfCollection = computed(
+  () => !!props.holderOfCollection?.id && props.holderOfCollection,
+)
 
 const handleMint = () => {
   if (isMintedOut.value) {

From 5c58d26ca99fbfec3e9d7a975555ab86dba168a8 Mon Sep 17 00:00:00 2001
From: hassnian <hassnianxd@gmail.com>
Date: Wed, 17 Jan 2024 14:12:44 +0500
Subject: [PATCH 16/29] fix: on wallet disconnect update available nft count

---
 components/collection/drop/HolderOfGenerative.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/components/collection/drop/HolderOfGenerative.vue b/components/collection/drop/HolderOfGenerative.vue
index 57d7443141..5a19dbaef7 100644
--- a/components/collection/drop/HolderOfGenerative.vue
+++ b/components/collection/drop/HolderOfGenerative.vue
@@ -366,11 +366,11 @@ const submitMint = async (sn: string) => {
 }
 
 const checkAvailableNftsToClaim = async () => {
-  const nftIds = holderOfCollectionData.value.nftEntities.map((nft) => nft.sn)
+  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) => !Boolean(x)).length
 }
 

From 37101e0e147ae3bc16dbe6008fcabe7604bb6487 Mon Sep 17 00:00:00 2001
From: hassnian <hassnianxd@gmail.com>
Date: Wed, 17 Jan 2024 14:13:36 +0500
Subject: [PATCH 17/29] ref: remove boolean

---
 components/collection/drop/HolderOfGenerative.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/collection/drop/HolderOfGenerative.vue b/components/collection/drop/HolderOfGenerative.vue
index 5a19dbaef7..c0be65e944 100644
--- a/components/collection/drop/HolderOfGenerative.vue
+++ b/components/collection/drop/HolderOfGenerative.vue
@@ -371,7 +371,7 @@ const checkAvailableNftsToClaim = async () => {
   const claimed = await Promise.all(
     nftIds.map((sn) => isNftClaimed(sn, holderOfCollectionId)),
   )
-  availableNfts.value = claimed.filter((x) => !Boolean(x)).length
+  availableNfts.value = claimed.filter((x) => !x).length
 }
 
 const handleDropAddModalConfirm = () => {

From 225234ee1dd095937f37d6e9d7fdf903d4a322a6 Mon Sep 17 00:00:00 2001
From: hassnian <hassnianxd@gmail.com>
Date: Wed, 17 Jan 2024 14:28:50 +0500
Subject: [PATCH 18/29] fix: disabled button if does not have  available nfts

---
 components/collection/drop/HolderOfGenerative.vue              | 3 ++-
 .../drop/MintSection/HolderOfCollectionMintRequirements.vue    | 2 +-
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/components/collection/drop/HolderOfGenerative.vue b/components/collection/drop/HolderOfGenerative.vue
index c0be65e944..45a3279d92 100644
--- a/components/collection/drop/HolderOfGenerative.vue
+++ b/components/collection/drop/HolderOfGenerative.vue
@@ -229,7 +229,8 @@ const mintButtonDisabled = computed<boolean>(
           !isHolderOfTargetCollection.value ||
           maxMintLimitForCurrentUser.value <=
             mintedAmountForCurrentUser.value ||
-          !hasMinimumFunds.value,
+          !hasMinimumFunds.value ||
+          !hasAvailableNfts.value,
       )),
 )
 
diff --git a/components/collection/drop/MintSection/HolderOfCollectionMintRequirements.vue b/components/collection/drop/MintSection/HolderOfCollectionMintRequirements.vue
index d9b2b84ac9..28b85b47fc 100644
--- a/components/collection/drop/MintSection/HolderOfCollectionMintRequirements.vue
+++ b/components/collection/drop/MintSection/HolderOfCollectionMintRequirements.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <p class="text-k-grey mb-6">
+    <p class="text-k-grey mb-5">
       {{ $t('mint.unlockable.requirements') }}
     </p>
 

From 441529a92947c6ece8c4e677c38a5911db91fb07 Mon Sep 17 00:00:00 2001
From: hassnian <hassnianxd@gmail.com>
Date: Wed, 17 Jan 2024 15:11:53 +0500
Subject: [PATCH 19/29] ref: rename checkAvailableNfts

---
 components/collection/drop/HolderOfGenerative.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/components/collection/drop/HolderOfGenerative.vue b/components/collection/drop/HolderOfGenerative.vue
index 45a3279d92..87d193724d 100644
--- a/components/collection/drop/HolderOfGenerative.vue
+++ b/components/collection/drop/HolderOfGenerative.vue
@@ -366,7 +366,7 @@ const submitMint = async (sn: string) => {
   }
 }
 
-const checkAvailableNftsToClaim = async () => {
+const checkAvailableNfts = async () => {
   const nftEntities = holderOfCollectionData.value?.nftEntities || []
   const nftIds = nftEntities.map((nft) => nft.sn)
   const claimed = await Promise.all(
@@ -380,7 +380,7 @@ const handleDropAddModalConfirm = () => {
   fetchMultipleBalance([urlPrefix.value])
 }
 
-watch(holderOfCollectionData, checkAvailableNftsToClaim, { immediate: true })
+watch(holderOfCollectionData, checkAvailableNfts, { immediate: true })
 </script>
 
 <style scoped lang="scss">

From bffc3a2f51e9d350ac4d4aed08990ea6fcc5b036 Mon Sep 17 00:00:00 2001
From: hassnian <hassnianxd@gmail.com>
Date: Wed, 17 Jan 2024 19:07:38 +0500
Subject: [PATCH 20/29] ref: icon name and class

---
 .../drop/MintSection/MintRequirementItem.vue  | 24 +++++++++----------
 1 file changed, 12 insertions(+), 12 deletions(-)

diff --git a/components/collection/drop/MintSection/MintRequirementItem.vue b/components/collection/drop/MintSection/MintRequirementItem.vue
index be8ec5a8a3..9ea2b713a3 100644
--- a/components/collection/drop/MintSection/MintRequirementItem.vue
+++ b/components/collection/drop/MintSection/MintRequirementItem.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="flex items-center">
-    <NeoIcon class="mr-4" :icon="icon" :class="iconClass" />
+    <NeoIcon class="mr-4" :icon="icon.name" :class="icon.class" />
 
     <slot />
   </div>
@@ -15,19 +15,19 @@ const props = defineProps<{
 
 const { accountId } = useAuth()
 
-const icon = computed(() => {
+const icon = computed<{ name: string; class: string }>(() => {
   if (!accountId.value) {
-    return 'lock-keyhole'
+    return {
+      name: 'lock-keyhole',
+      class: 'text-k-grey',
+    }
   }
 
-  return props.fulfilled ? 'check' : 'xmark'
-})
-
-const iconClass = computed(() => {
-  if (!accountId.value) {
-    return 'text-k-grey'
-  }
-
-  return props.fulfilled ? 'text-k-green' : 'text-k-red'
+  return props.fulfilled
+    ? {
+        name: 'check',
+        class: 'text-k-green',
+      }
+    : { name: 'xmark', class: 'text-k-red' }
 })
 </script>

From 7bc773feb2300a5c812318a116d82ff49bdce2fa Mon Sep 17 00:00:00 2001
From: hassnian <hassnianxd@gmail.com>
Date: Thu, 18 Jan 2024 14:11:20 +0500
Subject: [PATCH 21/29] remove: default holder of collection prop for other
 drops

---
 components/collection/drop/GenerativeLayout.vue        | 1 -
 components/collection/drop/MintSection/MintSection.vue | 6 ++----
 2 files changed, 2 insertions(+), 5 deletions(-)

diff --git a/components/collection/drop/GenerativeLayout.vue b/components/collection/drop/GenerativeLayout.vue
index 06a3e74f0a..33b22f463d 100644
--- a/components/collection/drop/GenerativeLayout.vue
+++ b/components/collection/drop/GenerativeLayout.vue
@@ -88,7 +88,6 @@ withDefaults(
   {
     description: '',
     userMintedNftId: undefined,
-    holderOfCollection: () => ({ id: '', isHolderOfTargetCollection: false }),
   },
 )
 
diff --git a/components/collection/drop/MintSection/MintSection.vue b/components/collection/drop/MintSection/MintSection.vue
index f964cd19e5..5a94a75a33 100644
--- a/components/collection/drop/MintSection/MintSection.vue
+++ b/components/collection/drop/MintSection/MintSection.vue
@@ -42,7 +42,7 @@
       </div>
 
       <HolderOfCollectionMintRequirements
-        v-else-if="showHolderOfCollection"
+        v-else-if="showHolderOfCollection && holderOfCollection"
         class="my-5"
         :holder-of-collection="holderOfCollection"
         :minimum-funds="minimumFunds"
@@ -135,9 +135,7 @@ const mintButtonDisabled = computed(() =>
   isMintedOut.value ? false : props.mintButton.disabled,
 )
 
-const showHolderOfCollection = computed(
-  () => !!props.holderOfCollection?.id && props.holderOfCollection,
-)
+const showHolderOfCollection = computed(() => !!props.holderOfCollection?.id)
 
 const handleMint = () => {
   if (isMintedOut.value) {

From 59a849033d8613196d76d000112a424e2e1bd40b Mon Sep 17 00:00:00 2001
From: hassnian <hassnianxd@gmail.com>
Date: Mon, 29 Jan 2024 17:21:18 +0500
Subject: [PATCH 22/29] remove: dupicate mintedAmountForCurrentUser

---
 composables/drop/useGenerativeDropMint.ts | 5 -----
 1 file changed, 5 deletions(-)

diff --git a/composables/drop/useGenerativeDropMint.ts b/composables/drop/useGenerativeDropMint.ts
index b6ef7b7f81..901bcf705d 100644
--- a/composables/drop/useGenerativeDropMint.ts
+++ b/composables/drop/useGenerativeDropMint.ts
@@ -87,10 +87,6 @@ export default ({
     () => collectionData.value?.collectionEntity?.nftCount,
   )
 
-  const mintedAmountForCurrentUser = computed(
-    () => collectionData.value?.nftEntitiesConnection?.totalCount || 0, // todo: fetch from backend
-  )
-
   const canListMintedNft = computed(() => Boolean(mintedNftWithMetadata.value))
 
   const tryCapture = async () => {
@@ -164,7 +160,6 @@ export default ({
     collectionName,
     canListMintedNft,
     nftCount,
-    mintedAmountForCurrentUser,
     listMintedNft,
     tryCapture,
     subscribeToMintedNft,

From 4afc864db0c2f232cd87a6ebccba6499318fa353 Mon Sep 17 00:00:00 2001
From: hassnian <hassnianxd@gmail.com>
Date: Mon, 29 Jan 2024 18:34:44 +0500
Subject: [PATCH 23/29] add: check holds field from api holder of generative

---
 components/collection/drop/HolderOfGenerative.vue | 9 ++++-----
 composables/drop/useGenerativeDropDetails.ts      | 2 ++
 pages/[prefix]/drops/[id].vue                     | 2 +-
 params/types.ts                                   | 1 +
 4 files changed, 8 insertions(+), 6 deletions(-)

diff --git a/components/collection/drop/HolderOfGenerative.vue b/components/collection/drop/HolderOfGenerative.vue
index f096dd3e82..ff82364b5a 100644
--- a/components/collection/drop/HolderOfGenerative.vue
+++ b/components/collection/drop/HolderOfGenerative.vue
@@ -51,8 +51,6 @@ import useGenerativeDropMint, {
 import useGenerativeDropDetails from '@/composables/drop/useGenerativeDropDetails'
 import { asBalanceTransferAlive } from '@kodadot1/sub-api'
 
-const holderOfCollectionId = '50' // ChaosFlakes | todo: mock for testing, should be fetched from backend
-
 export type HolderOfCollectionProp = {
   id: string
   isHolder: boolean
@@ -115,6 +113,7 @@ const {
   chainName,
   disabledByBackend,
   token,
+  holderOfCollectionId,
 } = useGenerativeDropDetails(props.drop)
 
 const {
@@ -181,7 +180,7 @@ const { data: holderOfCollectionData } = await useAsyncData(
       clientId: client.value,
       query: holderOfCollectionById,
       variables: {
-        id: holderOfCollectionId,
+        id: holderOfCollectionId.value,
         account: accountId.value,
       },
     }).then((res) => res.data.value),
@@ -201,7 +200,7 @@ const isHolderOfTargetCollection = computed(
 const hasAvailableNfts = computed(() => availableNfts.value !== 0)
 
 const holderOfCollection = computed<HolderOfCollectionProp>(() => ({
-  id: holderOfCollectionId,
+  id: holderOfCollectionId.value as string,
   isHolder: isHolderOfTargetCollection.value,
   hasAvailable: hasAvailableNfts.value,
   amount: {
@@ -377,7 +376,7 @@ 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)),
+    nftIds.map((sn) => isNftClaimed(sn, holderOfCollectionId.value as string)),
   )
   availableNfts.value = claimed.filter((x) => !x).length
 }
diff --git a/composables/drop/useGenerativeDropDetails.ts b/composables/drop/useGenerativeDropDetails.ts
index 025f2b4a1e..34e66daea2 100644
--- a/composables/drop/useGenerativeDropDetails.ts
+++ b/composables/drop/useGenerativeDropDetails.ts
@@ -10,6 +10,7 @@ export default (drop: DropItem) => {
   const chainName = computed(() => getChainName(drop.chain))
   const token = computed(() => prefixToToken[drop.chain])
   const price = computed(() => drop?.price)
+  const holderOfCollectionId = computed(() => drop.holds)
 
   return {
     defaultMax,
@@ -20,5 +21,6 @@ export default (drop: DropItem) => {
     disabledByBackend,
     token,
     price,
+    holderOfCollectionId,
   }
 }
diff --git a/pages/[prefix]/drops/[id].vue b/pages/[prefix]/drops/[id].vue
index 2ca30d574c..78d0a02892 100644
--- a/pages/[prefix]/drops/[id].vue
+++ b/pages/[prefix]/drops/[id].vue
@@ -2,7 +2,7 @@
   <UnlockableCollectionBanner :drop="drop" />
   <CollectionDropContainer v-if="dropType === 'paid'" :drop="drop" />
   <CollectionDropHolderOfGenerative
-    v-else-if="dropType === 'generative' && drop.alias === 'chroma'"
+    v-else-if="dropType === 'generative' && Boolean(drop.holds)"
     :drop="drop" />
   <CollectionDropPaidGenerative
     v-else-if="dropType === 'generative' && Number(drop.price)"
diff --git a/params/types.ts b/params/types.ts
index 41169b4ada..ec1e7aa603 100644
--- a/params/types.ts
+++ b/params/types.ts
@@ -73,4 +73,5 @@ export type DropItem = {
   minted?: number
   max?: number
   price?: string
+  holds?: string
 }

From 1ea8f75f084b0fa3e2d6ceabe57fec6c0f93da28 Mon Sep 17 00:00:00 2001
From: hassnian <hassnianxd@gmail.com>
Date: Tue, 30 Jan 2024 09:50:47 +0500
Subject: [PATCH 24/29] add: mint requirements checking state

---
 .../collection/drop/GenerativeLayout.vue      |  5 +-
 .../collection/drop/HolderOfGenerative.vue    | 20 ++++--
 .../HolderOfCollectionMintRequirements.vue    | 10 ++-
 .../drop/MintSection/MintRequirementItem.vue  | 28 ++++++--
 .../drop/MintSection/MintSection.vue          | 65 +++++++++++++------
 components/collection/drop/types.ts           | 11 ++++
 composables/useMultipleBalance.ts             | 22 ++++++-
 locales/en.json                               |  1 +
 8 files changed, 124 insertions(+), 38 deletions(-)
 create mode 100644 components/collection/drop/types.ts

diff --git a/components/collection/drop/GenerativeLayout.vue b/components/collection/drop/GenerativeLayout.vue
index 73efb5e54e..2a9bd1f9a6 100644
--- a/components/collection/drop/GenerativeLayout.vue
+++ b/components/collection/drop/GenerativeLayout.vue
@@ -66,17 +66,18 @@
 <script setup lang="ts">
 import { DropItem } from '@/params/types'
 import type { HolderOfCollectionProp } from './HolderOfGenerative.vue'
+import type { MinimumFundsProp, MintButtonProp } from './types'
 
 withDefaults(
   defineProps<{
     collectionId: string
     description?: string
     drop: DropItem
-    mintButton: { label: string; disabled: boolean }
+    mintButton: MintButtonProp
     mintedCount: number
     mintCountAvailable: boolean
     maxCount: number
-    minimumFunds: { amount: number; description: string; hasAmount: boolean }
+    minimumFunds: MinimumFundsProp
     isImageFetching: boolean
     isWalletConnecting: boolean
     isLoading: boolean
diff --git a/components/collection/drop/HolderOfGenerative.vue b/components/collection/drop/HolderOfGenerative.vue
index ff82364b5a..7c1c780229 100644
--- a/components/collection/drop/HolderOfGenerative.vue
+++ b/components/collection/drop/HolderOfGenerative.vue
@@ -50,10 +50,12 @@ import useGenerativeDropMint, {
 } from '@/composables/drop/useGenerativeDropMint'
 import useGenerativeDropDetails from '@/composables/drop/useGenerativeDropDetails'
 import { asBalanceTransferAlive } from '@kodadot1/sub-api'
+import { MinimumFundsProp, MintButtonProp } from './types'
 
 export type HolderOfCollectionProp = {
   id: string
   isHolder: boolean
+  isLoading: boolean
   hasAvailable: boolean
   amount: {
     total: number
@@ -70,7 +72,7 @@ const props = withDefaults(
   },
 )
 
-const { fetchMultipleBalance } = useMultipleBalance()
+const { fetchMultipleBalance, hasCurrentChainBalance } = useMultipleBalance()
 
 const { hasMinimumFunds, formattedMinimumFunds, minimumFunds } =
   useDropMinimumFunds(props.drop)
@@ -81,10 +83,11 @@ const minimumFundsDescription = computed(() =>
   ]),
 )
 
-const minimumFundsProps = computed(() => ({
+const minimumFundsProps = computed<MinimumFundsProp>(() => ({
   amount: minimumFunds.value,
   description: minimumFundsDescription.value,
   hasAmount: hasMinimumFunds.value,
+  isLoading: !hasCurrentChainBalance.value,
 }))
 
 const isWalletConnecting = ref(false)
@@ -103,7 +106,7 @@ const { client } = usePrefix()
 const isLoading = ref(false)
 const isImageFetching = ref(false)
 const isAddFundModalActive = ref(false)
-const availableNfts = ref(0)
+const availableNfts = reactive({ isLoading: true, amount: 0 })
 
 const {
   defaultName,
@@ -197,15 +200,16 @@ const isHolderOfTargetCollection = computed(
   () => maxMintLimitForCurrentUser.value > 0,
 )
 
-const hasAvailableNfts = computed(() => availableNfts.value !== 0)
+const hasAvailableNfts = computed(() => availableNfts.amount !== 0)
 
 const holderOfCollection = computed<HolderOfCollectionProp>(() => ({
   id: holderOfCollectionId.value as string,
   isHolder: isHolderOfTargetCollection.value,
   hasAvailable: hasAvailableNfts.value,
+  isLoading: availableNfts.isLoading,
   amount: {
     total: maxMintLimitForCurrentUser.value,
-    available: availableNfts.value,
+    available: availableNfts.amount,
   },
 }))
 
@@ -238,7 +242,7 @@ const mintButtonDisabled = computed<boolean>(
       )),
 )
 
-const mintButtonProps = computed(() => ({
+const mintButtonProps = computed<MintButtonProp>(() => ({
   disabled: mintButtonDisabled.value,
   label: mintButtonLabel.value,
 }))
@@ -373,12 +377,14 @@ const submitMint = async (sn: string) => {
 }
 
 const checkAvailableNfts = async () => {
+  availableNfts.isLoading = true
   const nftEntities = holderOfCollectionData.value?.nftEntities || []
   const nftIds = nftEntities.map((nft) => nft.sn)
   const claimed = await Promise.all(
     nftIds.map((sn) => isNftClaimed(sn, holderOfCollectionId.value as string)),
   )
-  availableNfts.value = claimed.filter((x) => !x).length
+  availableNfts.amount = claimed.filter((x) => !x).length
+  availableNfts.isLoading = false
 }
 
 const handleDropAddModalConfirm = () => {
diff --git a/components/collection/drop/MintSection/HolderOfCollectionMintRequirements.vue b/components/collection/drop/MintSection/HolderOfCollectionMintRequirements.vue
index 28b85b47fc..133b39d160 100644
--- a/components/collection/drop/MintSection/HolderOfCollectionMintRequirements.vue
+++ b/components/collection/drop/MintSection/HolderOfCollectionMintRequirements.vue
@@ -9,7 +9,8 @@
         <div class="flex gap-4 flex-col w-full">
           <MintRequirementItem
             v-if="showHolderOfCollection && collection"
-            :fulfilled="fulfillsHolderOfCollection">
+            :fulfilled="fulfillsHolderOfCollection"
+            :loading="holderOfCollection.isLoading">
             <div class="flex justify-between items-center w-full">
               <p class="capitalize">
                 Holder of NFT from
@@ -58,7 +59,9 @@
               </div>
             </div>
           </MintRequirementItem>
-          <MintRequirementItem :fulfilled="fulfillsMinimumFunds">
+          <MintRequirementItem
+            :fulfilled="fulfillsMinimumFunds"
+            :loading="minimumFunds.isLoading">
             <p v-dompurify-html="minimumFunds.description" />
           </MintRequirementItem>
         </div>
@@ -91,10 +94,11 @@ import MintRequirementItem from './MintRequirementItem.vue'
 import { useCollectionMinimal } from '@/components/collection/utils/useCollectionDetails'
 import { NeoIcon, NeoTooltip } from '@kodadot1/brick'
 import type { HolderOfCollectionProp } from '../HolderOfGenerative.vue'
+import type { MinimumFundsProp } from '../types'
 
 const props = defineProps<{
   holderOfCollection: HolderOfCollectionProp
-  minimumFunds: { amount: number; description: string; hasAmount: boolean }
+  minimumFunds: MinimumFundsProp
   isMintedOut: boolean
 }>()
 
diff --git a/components/collection/drop/MintSection/MintRequirementItem.vue b/components/collection/drop/MintSection/MintRequirementItem.vue
index 9ea2b713a3..0b4b1bc552 100644
--- a/components/collection/drop/MintSection/MintRequirementItem.vue
+++ b/components/collection/drop/MintSection/MintRequirementItem.vue
@@ -1,6 +1,10 @@
 <template>
   <div class="flex items-center">
-    <NeoIcon class="mr-4" :icon="icon.name" :class="icon.class" />
+    <NeoIcon
+      class="mr-4"
+      :icon="icon.name"
+      :class="icon.class"
+      :spin="icon.spin" />
 
     <slot />
   </div>
@@ -9,13 +13,19 @@
 <script setup lang="ts">
 import { NeoIcon } from '@kodadot1/brick'
 
-const props = defineProps<{
-  fulfilled: boolean
-}>()
+const props = withDefaults(
+  defineProps<{
+    fulfilled: boolean
+    loading?: boolean
+  }>(),
+  {
+    loading: false,
+  },
+)
 
 const { accountId } = useAuth()
 
-const icon = computed<{ name: string; class: string }>(() => {
+const icon = computed<{ name: string; class: string; spin?: boolean }>(() => {
   if (!accountId.value) {
     return {
       name: 'lock-keyhole',
@@ -23,6 +33,14 @@ const icon = computed<{ name: string; class: string }>(() => {
     }
   }
 
+  if (props.loading) {
+    return {
+      name: 'spinner-third',
+      class: 'text-k-grey',
+      spin: true,
+    }
+  }
+
   return props.fulfilled
     ? {
         name: 'check',
diff --git a/components/collection/drop/MintSection/MintSection.vue b/components/collection/drop/MintSection/MintSection.vue
index f0ce24c319..8ea9dec5f4 100644
--- a/components/collection/drop/MintSection/MintSection.vue
+++ b/components/collection/drop/MintSection/MintSection.vue
@@ -41,7 +41,7 @@
           :to="`/${urlPrefix}/gallery/${userMintedNftId}`" />
       </div>
 
-      <HolderOfCollectionMintRequirements
+      <CollectionDropMintSectionHolderOfCollectionMintRequirements
         v-else-if="showHolderOfCollection && holderOfCollection"
         class="my-5"
         :holder-of-collection="holderOfCollection"
@@ -52,11 +52,11 @@
           class="mint-button"
           variant="k-accent"
           :loading="loading"
-          :disabled="mintButtonDisabled"
-          :loading-with-label="isWalletConnecting"
-          :label="mintButtonLabel"
+          :disabled="buttonMint.disabled"
+          :loading-with-label="buttonMint.withLabel || isWalletConnecting"
+          :label="buttonMint.label"
           @click="handleMint" />
-      </HolderOfCollectionMintRequirements>
+      </CollectionDropMintSectionHolderOfCollectionMintRequirements>
 
       <div v-else class="flex justify-end flex-wrap">
         <div v-if="minimumFunds.amount" class="flex items-center">
@@ -71,9 +71,9 @@
           class="ml-5 my-2 mint-button"
           variant="k-accent"
           :loading="loading"
-          :disabled="mintButtonDisabled"
-          :loading-with-label="isWalletConnecting"
-          :label="mintButtonLabel"
+          :disabled="buttonMint.disabled"
+          :loading-with-label="buttonMint.withLabel || isWalletConnecting"
+          :label="buttonMint.label"
           @click="handleMint" />
       </div>
     </div>
@@ -82,8 +82,8 @@
 
 <script setup lang="ts">
 import { NeoButton, NeoIcon } from '@kodadot1/brick'
-import HolderOfCollectionMintRequirements from './HolderOfCollectionMintRequirements.vue'
 import type { HolderOfCollectionProp } from '../HolderOfGenerative.vue'
+import type { MinimumFundsProp, MintButtonProp } from '../types'
 
 const NuxtLink = resolveComponent('NuxtLink')
 
@@ -93,11 +93,11 @@ const props = withDefaults(
     mintCountAvailable: boolean
     disabledByBackend: number
     maxCount: number
-    minimumFunds: { amount: number; description: string; hasAmount: boolean }
+    minimumFunds: MinimumFundsProp
     isImageFetching: boolean
     isWalletConnecting: boolean
     isLoading: boolean
-    mintButton: { label: string; disabled: boolean }
+    mintButton: MintButtonProp
     userMintedNftId?: string
     holderOfCollection?: HolderOfCollectionProp
     collectionId: string
@@ -114,7 +114,11 @@ const { $i18n } = useNuxtApp()
 const { urlPrefix } = usePrefix()
 
 const loading = computed(
-  () => props.isImageFetching || props.isWalletConnecting || props.isLoading,
+  () =>
+    props.isImageFetching ||
+    props.isWalletConnecting ||
+    props.isLoading ||
+    (!isMintedOut.value && isCheckingMintRequirements.value),
 )
 
 const mintedPercent = computed(() => {
@@ -124,15 +128,38 @@ const mintedPercent = computed(() => {
 
 const isMintedOut = computed(() => !props.mintCountAvailable)
 const showHolderOfCollection = computed(() => !!props.holderOfCollection?.id)
-const mintButtonDisabled = computed(() =>
-  isMintedOut.value ? false : props.mintButton.disabled,
-)
-const mintButtonLabel = computed(() =>
-  isMintedOut.value
-    ? $i18n.t('mint.unlockable.seeListings')
-    : props.mintButton.label,
+const isCheckingMintRequirements = computed(
+  () =>
+    showHolderOfCollection.value &&
+    (props.holderOfCollection?.isLoading || props.minimumFunds.isLoading),
 )
 
+const buttonMint = computed<{
+  label: string
+  disabled: boolean
+  withLabel?: boolean
+}>(() => {
+  if (isMintedOut.value) {
+    return {
+      label: $i18n.t('mint.unlockable.seeListings'),
+      disabled: false,
+    }
+  }
+
+  if (isCheckingMintRequirements.value) {
+    return {
+      label: $i18n.t('checking'),
+      disabled: true,
+      withLabel: true,
+    }
+  }
+
+  return {
+    label: props.mintButton.label,
+    disabled: props.mintButton.disabled,
+  }
+})
+
 const handleMint = () => {
   if (isMintedOut.value) {
     return navigateTo(
diff --git a/components/collection/drop/types.ts b/components/collection/drop/types.ts
new file mode 100644
index 0000000000..8a4aaccdce
--- /dev/null
+++ b/components/collection/drop/types.ts
@@ -0,0 +1,11 @@
+export type MinimumFundsProp = {
+  amount: number
+  description: string
+  hasAmount: boolean
+  isLoading: boolean
+}
+
+export type MintButtonProp = {
+  label: string
+  disabled: boolean
+}
diff --git a/composables/useMultipleBalance.ts b/composables/useMultipleBalance.ts
index b4a53f51ae..dc8c25a3eb 100644
--- a/composables/useMultipleBalance.ts
+++ b/composables/useMultipleBalance.ts
@@ -44,7 +44,7 @@ function calculateUsd(amount: string, tokenValue) {
 
 export default function (refetchPeriodically: boolean = false) {
   const { accountId } = useAuth()
-  const { isTestnet } = usePrefix()
+  const { isTestnet, urlPrefix } = usePrefix()
   const identityStore = useIdentityStore()
   const fiatStore = useFiatStore()
 
@@ -56,7 +56,24 @@ export default function (refetchPeriodically: boolean = false) {
   } = storeToRefs(identityStore)
 
   const currentNetwork = computed(() =>
-    isTestnet.value ? 'test-network' : 'main-network',
+    isTestnet ? 'test-network' : 'main-network',
+  )
+
+  const chainBalances = computed(() => ({
+    [Chain.KUSAMA]: multiBalances.value.chains.kusama?.ksm?.nativeBalance,
+    [Chain.ASSETHUBKUSAMA]:
+      multiBalances.value.chains.kusamaHub?.ksm?.nativeBalance,
+    [Chain.POLKADOT]: multiBalances.value.chains.polkadot?.dot?.nativeBalance,
+    [Chain.ASSETHUBPOLKADOT]:
+      multiBalances.value.chains.polkadotHub?.dot?.nativeBalance,
+  }))
+
+  const currentChain = computed(() => prefixToChainMap[urlPrefix.value])
+  const currentChainBalance = computed<string | undefined>(
+    () => currentChain.value && chainBalances.value[currentChain.value],
+  )
+  const hasCurrentChainBalance = computed(
+    () => currentChainBalance.value !== undefined,
   )
 
   async function getBalance(chainName: string, token = 'KSM', tokenId = 0) {
@@ -164,6 +181,7 @@ export default function (refetchPeriodically: boolean = false) {
   return {
     multiBalances,
     currentNetwork,
+    hasCurrentChainBalance,
     fetchMultipleBalance,
   }
 }
diff --git a/locales/en.json b/locales/en.json
index 70bb004e56..296a83df80 100644
--- a/locales/en.json
+++ b/locales/en.json
@@ -21,6 +21,7 @@
   "soon": "Soon",
   "classic": "Classic",
   "email": "Email",
+  "checking": "Checking",
   "handle": "Handle",
   "website": "Website",
   "account": "Account",

From 1eb5c38783628750035bdc93339f1153ffcf498b Mon Sep 17 00:00:00 2001
From: hassnian <hassnianxd@gmail.com>
Date: Tue, 30 Jan 2024 10:01:38 +0500
Subject: [PATCH 25/29] fix: always show available nfts

---
 .../drop/MintSection/HolderOfCollectionMintRequirements.vue     | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/collection/drop/MintSection/HolderOfCollectionMintRequirements.vue b/components/collection/drop/MintSection/HolderOfCollectionMintRequirements.vue
index 133b39d160..695108e338 100644
--- a/components/collection/drop/MintSection/HolderOfCollectionMintRequirements.vue
+++ b/components/collection/drop/MintSection/HolderOfCollectionMintRequirements.vue
@@ -21,7 +21,7 @@
                 </nuxt-link>
                 collection
               </p>
-              <div v-if="!isMintedOut" class="text-xs">
+              <div class="text-xs">
                 <span class="text-k-grey capitalize mr-2">
                   {{ $t('mint.unlockable.availableForMint') }}
                 </span>

From 579594b87e3a233b5e2d129b549c37f29490ba00 Mon Sep 17 00:00:00 2001
From: hassnian <hassnianxd@gmail.com>
Date: Tue, 30 Jan 2024 13:32:25 +0500
Subject: [PATCH 26/29] ref: remove chain balances to useMultiBalance

---
 components/drops/useDrops.ts      | 15 ++++-----------
 composables/useMultipleBalance.ts |  1 +
 composables/useTeleport.ts        | 16 +---------------
 3 files changed, 6 insertions(+), 26 deletions(-)

diff --git a/components/drops/useDrops.ts b/components/drops/useDrops.ts
index 06000c5634..a17c6ab151 100644
--- a/components/drops/useDrops.ts
+++ b/components/drops/useDrops.ts
@@ -120,22 +120,15 @@ export const useDropStatus = (id: string) => {
 export const useDropMinimumFunds = (drop) => {
   const chainProperties = chainPropListOf(drop.chain)
 
-  const { chainBalances } = useTeleport()
   const { existentialDeposit } = useChain()
-  const { fetchMultipleBalance } = useMultipleBalance()
+  const { fetchMultipleBalance, currentChainBalance } = useMultipleBalance()
 
-  const currentChain = computed(() => prefixToChainMap[drop.chain])
+  const transferableDropChainBalance = computed(
+    () => (Number(currentChainBalance.value) || 0) - existentialDeposit.value,
+  )
   const meta = computed<number>(() => Number(drop.meta) || 0)
   const price = computed<number>(() => Number(drop.price) || 0)
-  const currentChainBalance = computed(
-    () =>
-      (currentChain.value && Number(chainBalances[currentChain.value]())) || 0,
-  )
   const minimumFunds = computed<number>(() => price.value || meta.value)
-
-  const transferableDropChainBalance = computed(
-    () => currentChainBalance.value - existentialDeposit.value,
-  )
   const hasMinimumFunds = computed(
     () =>
       !minimumFunds.value ||
diff --git a/composables/useMultipleBalance.ts b/composables/useMultipleBalance.ts
index dc8c25a3eb..bd9cfeff3a 100644
--- a/composables/useMultipleBalance.ts
+++ b/composables/useMultipleBalance.ts
@@ -181,6 +181,7 @@ export default function (refetchPeriodically: boolean = false) {
   return {
     multiBalances,
     currentNetwork,
+    currentChainBalance,
     hasCurrentChainBalance,
     fetchMultipleBalance,
   }
diff --git a/composables/useTeleport.ts b/composables/useTeleport.ts
index 22f0e09704..a4105e05eb 100644
--- a/composables/useTeleport.ts
+++ b/composables/useTeleport.ts
@@ -29,19 +29,7 @@ export default function (fetchBalancePeriodically: boolean = false) {
   const { assets } = usePrefix()
   const { decimalsOf } = useChain()
   const { urlPrefix } = usePrefix()
-  const { fetchMultipleBalance, multiBalances } = useMultipleBalance(
-    fetchBalancePeriodically,
-  )
-
-  const chainBalances = {
-    [Chain.KUSAMA]: () => multiBalances.value.chains.kusama?.ksm?.nativeBalance,
-    [Chain.ASSETHUBKUSAMA]: () =>
-      multiBalances.value.chains.kusamaHub?.ksm?.nativeBalance,
-    [Chain.POLKADOT]: () =>
-      multiBalances.value.chains.polkadot?.dot?.nativeBalance,
-    [Chain.ASSETHUBPOLKADOT]: () =>
-      multiBalances.value.chains.polkadotHub?.dot?.nativeBalance,
-  }
+  const { fetchMultipleBalance } = useMultipleBalance(fetchBalancePeriodically)
 
   const chain = computed<Chain | null>(
     () => prefixToChainMap[urlPrefix.value] || null,
@@ -149,7 +137,6 @@ export default function (fetchBalancePeriodically: boolean = false) {
   const getChainTokenDecimals = (chain: Chain) => {
     switch (chain) {
       case Chain.KUSAMA:
-      case Chain.BASILISK:
       case Chain.ASSETHUBKUSAMA:
         return assets(5).decimals
       case Chain.POLKADOT:
@@ -171,7 +158,6 @@ export default function (fetchBalancePeriodically: boolean = false) {
     isError,
     isLoading,
     isAvailable,
-    chainBalances,
     teleport,
     getAddressByChain,
     getChainTokenDecimals,

From 945d92d4124b144b996500afc90a854b0c453758 Mon Sep 17 00:00:00 2001
From: hassnian <hassnianxd@gmail.com>
Date: Tue, 30 Jan 2024 13:51:12 +0500
Subject: [PATCH 27/29] ref: use computed chainBalances on teleport page

---
 components/teleport/Teleport.vue  | 14 ++++----------
 composables/useMultipleBalance.ts |  1 +
 composables/useTeleport.ts        |  5 ++++-
 3 files changed, 9 insertions(+), 11 deletions(-)

diff --git a/components/teleport/Teleport.vue b/components/teleport/Teleport.vue
index d77ffc95a2..daca38def5 100644
--- a/components/teleport/Teleport.vue
+++ b/components/teleport/Teleport.vue
@@ -252,7 +252,7 @@ const warningReason = computed(() =>
 const insufficientAmountAfterFees = computed(() => amountAfterFees.value === 0)
 
 const recieverBalance = computed(
-  () => Number(chainBalances[toChain.value]()) || 0,
+  () => Number(chainBalances.value[toChain.value]) || 0,
 )
 
 const insufficientExistentialDepositOnTargetChain = computed(() => {
@@ -381,15 +381,9 @@ const toChainLabel = computed(() =>
   getChainName(chainToPrefixMap[toChain.value]),
 )
 
-const myBalance = computed(() => {
-  const getBalance = chainBalances[fromChain.value]
-  if (!getBalance) {
-    throw new Error(`Unsupported chain: ${fromChain.value}`)
-  }
-  const balance = Number(getBalance()) || 0
-
-  return balance
-})
+const myBalance = computed(
+  () => Number(chainBalances.value[fromChain.value]) || 0,
+)
 
 const explorerUrl = computed(() => {
   return `${blockExplorerOf(chainToPrefixMap[toChain.value])}account/${
diff --git a/composables/useMultipleBalance.ts b/composables/useMultipleBalance.ts
index bd9cfeff3a..cd68e265b5 100644
--- a/composables/useMultipleBalance.ts
+++ b/composables/useMultipleBalance.ts
@@ -180,6 +180,7 @@ export default function (refetchPeriodically: boolean = false) {
 
   return {
     multiBalances,
+    chainBalances,
     currentNetwork,
     currentChainBalance,
     hasCurrentChainBalance,
diff --git a/composables/useTeleport.ts b/composables/useTeleport.ts
index a4105e05eb..ba58c479cb 100644
--- a/composables/useTeleport.ts
+++ b/composables/useTeleport.ts
@@ -29,7 +29,9 @@ export default function (fetchBalancePeriodically: boolean = false) {
   const { assets } = usePrefix()
   const { decimalsOf } = useChain()
   const { urlPrefix } = usePrefix()
-  const { fetchMultipleBalance } = useMultipleBalance(fetchBalancePeriodically)
+  const { fetchMultipleBalance, chainBalances } = useMultipleBalance(
+    fetchBalancePeriodically,
+  )
 
   const chain = computed<Chain | null>(
     () => prefixToChainMap[urlPrefix.value] || null,
@@ -158,6 +160,7 @@ export default function (fetchBalancePeriodically: boolean = false) {
     isError,
     isLoading,
     isAvailable,
+    chainBalances,
     teleport,
     getAddressByChain,
     getChainTokenDecimals,

From 08608f2fa217e2342d1d031b647881c2ffbe6e7f Mon Sep 17 00:00:00 2001
From: hassnian <hassnianxd@gmail.com>
Date: Tue, 30 Jan 2024 13:59:57 +0500
Subject: [PATCH 28/29] ref: use computed chainBalances on use autoteleport

---
 composables/autoTeleport/useAutoTeleportTransitionDetails.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/composables/autoTeleport/useAutoTeleportTransitionDetails.ts b/composables/autoTeleport/useAutoTeleportTransitionDetails.ts
index 122e57afbe..ff9f4380d4 100644
--- a/composables/autoTeleport/useAutoTeleportTransitionDetails.ts
+++ b/composables/autoTeleport/useAutoTeleportTransitionDetails.ts
@@ -66,7 +66,7 @@ export default function (
 
   const currentChainBalance = computed(
     () =>
-      (currentChain.value && Number(chainBalances[currentChain.value]())) ||
+      (currentChain.value && Number(chainBalances.value[currentChain.value])) ||
       Number(balance.value),
   )
 
@@ -99,7 +99,7 @@ export default function (
     allowedSourceChains.value.reduce(
       (reducer, chainPrefix) => ({
         ...reducer,
-        [chainPrefix]: chainBalances[chainPrefix](),
+        [chainPrefix]: chainBalances.value[chainPrefix],
       }),
       {},
     ),

From ea67ae1e9e16abdd14cae106a83d7432e16302aa Mon Sep 17 00:00:00 2001
From: hassnian <hassnianxd@gmail.com>
Date: Tue, 30 Jan 2024 14:03:14 +0500
Subject: [PATCH 29/29] ref: move HolderOfCollectionProp to types.ts

---
 components/collection/drop/GenerativeLayout.vue |  7 +++++--
 .../collection/drop/HolderOfGenerative.vue      | 17 +++++------------
 .../HolderOfCollectionMintRequirements.vue      |  3 +--
 .../collection/drop/MintSection/MintSection.vue |  7 +++++--
 components/collection/drop/types.ts             | 11 +++++++++++
 5 files changed, 27 insertions(+), 18 deletions(-)

diff --git a/components/collection/drop/GenerativeLayout.vue b/components/collection/drop/GenerativeLayout.vue
index 2a9bd1f9a6..302c6fcde0 100644
--- a/components/collection/drop/GenerativeLayout.vue
+++ b/components/collection/drop/GenerativeLayout.vue
@@ -65,8 +65,11 @@
 
 <script setup lang="ts">
 import { DropItem } from '@/params/types'
-import type { HolderOfCollectionProp } from './HolderOfGenerative.vue'
-import type { MinimumFundsProp, MintButtonProp } from './types'
+import type {
+  HolderOfCollectionProp,
+  MinimumFundsProp,
+  MintButtonProp,
+} from './types'
 
 withDefaults(
   defineProps<{
diff --git a/components/collection/drop/HolderOfGenerative.vue b/components/collection/drop/HolderOfGenerative.vue
index 7c1c780229..bc268630d6 100644
--- a/components/collection/drop/HolderOfGenerative.vue
+++ b/components/collection/drop/HolderOfGenerative.vue
@@ -50,18 +50,11 @@ import useGenerativeDropMint, {
 } from '@/composables/drop/useGenerativeDropMint'
 import useGenerativeDropDetails from '@/composables/drop/useGenerativeDropDetails'
 import { asBalanceTransferAlive } from '@kodadot1/sub-api'
-import { MinimumFundsProp, MintButtonProp } from './types'
-
-export type HolderOfCollectionProp = {
-  id: string
-  isHolder: boolean
-  isLoading: boolean
-  hasAvailable: boolean
-  amount: {
-    total: number
-    available: number
-  }
-}
+import {
+  HolderOfCollectionProp,
+  MinimumFundsProp,
+  MintButtonProp,
+} from './types'
 
 const props = withDefaults(
   defineProps<{
diff --git a/components/collection/drop/MintSection/HolderOfCollectionMintRequirements.vue b/components/collection/drop/MintSection/HolderOfCollectionMintRequirements.vue
index 695108e338..c751776652 100644
--- a/components/collection/drop/MintSection/HolderOfCollectionMintRequirements.vue
+++ b/components/collection/drop/MintSection/HolderOfCollectionMintRequirements.vue
@@ -93,8 +93,7 @@
 import MintRequirementItem from './MintRequirementItem.vue'
 import { useCollectionMinimal } from '@/components/collection/utils/useCollectionDetails'
 import { NeoIcon, NeoTooltip } from '@kodadot1/brick'
-import type { HolderOfCollectionProp } from '../HolderOfGenerative.vue'
-import type { MinimumFundsProp } from '../types'
+import type { HolderOfCollectionProp, MinimumFundsProp } from '../types'
 
 const props = defineProps<{
   holderOfCollection: HolderOfCollectionProp
diff --git a/components/collection/drop/MintSection/MintSection.vue b/components/collection/drop/MintSection/MintSection.vue
index 8ea9dec5f4..c9f8dde030 100644
--- a/components/collection/drop/MintSection/MintSection.vue
+++ b/components/collection/drop/MintSection/MintSection.vue
@@ -82,8 +82,11 @@
 
 <script setup lang="ts">
 import { NeoButton, NeoIcon } from '@kodadot1/brick'
-import type { HolderOfCollectionProp } from '../HolderOfGenerative.vue'
-import type { MinimumFundsProp, MintButtonProp } from '../types'
+import type {
+  HolderOfCollectionProp,
+  MinimumFundsProp,
+  MintButtonProp,
+} from '../types'
 
 const NuxtLink = resolveComponent('NuxtLink')
 
diff --git a/components/collection/drop/types.ts b/components/collection/drop/types.ts
index 8a4aaccdce..ccabea9840 100644
--- a/components/collection/drop/types.ts
+++ b/components/collection/drop/types.ts
@@ -9,3 +9,14 @@ export type MintButtonProp = {
   label: string
   disabled: boolean
 }
+
+export type HolderOfCollectionProp = {
+  id: string
+  isHolder: boolean
+  isLoading: boolean
+  hasAvailable: boolean
+  amount: {
+    total: number
+    available: number
+  }
+}