From b4787bbfffbb5a4c5844efed9ae3385173433c37 Mon Sep 17 00:00:00 2001
From: Jarsen <31397967+Jarsen136@users.noreply.github.com>
Date: Thu, 5 Dec 2024 14:31:17 +0100
Subject: [PATCH 01/12] feat: edit collectio n permission

---
 components/collection/EditModal.vue           | 69 +++++++++++++++++--
 .../collection/HeroButtonEditCollection.vue   | 27 ++++++--
 .../transactionUpdateCollection.ts            |  4 ++
 composables/transaction/types.ts              |  9 ++-
 composables/transaction/utils.ts              |  2 +-
 locales/en.json                               |  6 ++
 6 files changed, 105 insertions(+), 12 deletions(-)

diff --git a/components/collection/EditModal.vue b/components/collection/EditModal.vue
index da1591778b..382403e5b2 100644
--- a/components/collection/EditModal.vue
+++ b/components/collection/EditModal.vue
@@ -125,6 +125,47 @@
             </div>
           </div>
         </NeoField>
+
+        <NeoField
+          :label="$t('mint.collection.permission.label')"
+        >
+          <div class="w-full flex flex-col gap-4">
+            <div class="flex items-center justify-between">
+              <p>
+                {{ $t('mint.mintType') }}
+              </p>
+              <NeoSelect
+                v-model="selectedMintingType"
+              >
+                <option
+                  v-for="menu in COLLECTION_MINTING_TYPES_OPTIONS"
+                  :key="menu.value"
+                  :value="menu.value"
+                >
+                  {{ menu.text }}
+                </option>
+              </NeoSelect>
+            </div>
+
+            <div>
+              <div class="flex justify-between">
+                <p>{{ $t('mint.collection.permission.noPriceSet') }}</p>
+                <NeoSwitch
+                  v-model="mintingPriceUnset"
+                  position="left"
+                />
+              </div>
+              <NeoInput
+                v-if="!mintingPriceUnset"
+                v-model="mintingPrice"
+                class="mt-3"
+                type="number"
+                :placeholder="$t('mint.collection.permission.pricePlaceholder')"
+                :min="0"
+              />
+            </div>
+          </div>
+        </NeoField>
       </form>
 
       <div class="flex flex-col !mt-6">
@@ -142,9 +183,9 @@
 </template>
 
 <script setup lang="ts">
-import { NeoButton, NeoField, NeoInput, NeoModal, NeoSwitch } from '@kodadot1/brick'
+import { NeoButton, NeoField, NeoInput, NeoModal, NeoSwitch, NeoSelect } from '@kodadot1/brick'
 import ModalBody from '@/components/shared/modals/ModalBody.vue'
-import type { UpdateCollection } from '@/composables/transaction/types'
+import type { UpdateCollection, CollectionMintSetting, CollectionMintSettingType } from '@/composables/transaction/types'
 
 export type CollectionEditMetadata = {
   name: string
@@ -153,8 +194,11 @@ export type CollectionEditMetadata = {
   imageType: string
   banner?: string
   max: number | null
+  mintingSettings: CollectionMintSetting
 }
 
+const COLLECTION_MINTING_TYPES_OPTIONS = ['Issuer', 'Public', 'HolderOf'].map(type => ({ value: type as CollectionMintSettingType, text: type }))
+
 const emit = defineEmits(['submit'])
 const props = defineProps<{
   modelValue: boolean
@@ -171,13 +215,17 @@ const banner = ref<File>()
 const imageUrl = ref<string>()
 const bannerUrl = ref<string>()
 const unlimited = ref(true)
-
+const mintingPriceUnset = ref(true)
+const mintingPrice = ref<number | null>(null)
+const selectedMintingType = ref<CollectionMintSettingType | null>(null)
 const min = computed(() => props.min || 1)
 const max = ref<number | null>(null)
 
 const nameChanged = computed(() => props.collection.name !== name.value)
 const hasImageChanged = computed(() => (!imageUrl.value && Boolean(props.collection.image)) || Boolean(image.value))
 const originalLogoImageUrl = computed(() => sanitizeIpfsUrl(props.collection.image))
+const mintTypeChanged = computed(() => selectedMintingType.value !== props.collection.mintingSettings.mintType)
+const mintPriceChanged = computed(() => mintingPrice.value !== Number(props.collection.mintingSettings.price))
 
 const disabled = computed(() => {
   const hasImage = imageUrl.value
@@ -187,7 +235,7 @@ const disabled = computed(() => {
   const hasBannerChanged = (!bannerUrl.value && Boolean(props.collection.banner)) || Boolean(banner.value)
   const hasMaxChanged = max.value !== props.collection.max
 
-  return !hasImage || !isNameFilled || (!nameChanged.value && !descriptionChanged && !hasImageChanged.value && !hasBannerChanged && !hasMaxChanged)
+  return !hasImage || !isNameFilled || (!nameChanged.value && !descriptionChanged && !hasImageChanged.value && !hasBannerChanged && !hasMaxChanged && !mintTypeChanged.value && !mintPriceChanged.value)
 })
 
 const initLogoImage = () => {
@@ -203,6 +251,10 @@ const editCollection = async () => {
     imageType: props.collection.imageType,
     banner: bannerUrl.value ? banner.value || props.collection.banner : undefined,
     max: max.value,
+    mintingSettings: {
+      mintType: selectedMintingType.value,
+      price: mintingPriceUnset.value ? null : String(mintingPrice.value),
+    },
   } as UpdateCollection)
 }
 
@@ -215,14 +267,21 @@ watch(isModalActive, (value) => {
     initLogoImage()
     unlimited.value = !props.collection.max
     max.value = props.collection.max
+
+    // permission
+    selectedMintingType.value = props.collection.mintingSettings.mintType
+    mintingPriceUnset.value = !props.collection.mintingSettings.price
+    mintingPrice.value = Number(props.collection.mintingSettings.price) || null
   }
 })
 
-watch([banner, unlimited], ([banner, unlimited]) => {
+watch([banner, unlimited, mintingPriceUnset], ([banner, unlimited, mintingPriceUnset]) => {
   if (banner) {
     bannerUrl.value = URL.createObjectURL(banner)
   }
 
   max.value = unlimited ? null : max.value || props.collection.max
+
+  mintingPrice.value = mintingPriceUnset ? null : mintingPrice.value || Number(props.collection.mintingSettings.price)
 })
 </script>
diff --git a/components/collection/HeroButtonEditCollection.vue b/components/collection/HeroButtonEditCollection.vue
index a0e30fd549..f6032ffc9a 100644
--- a/components/collection/HeroButtonEditCollection.vue
+++ b/components/collection/HeroButtonEditCollection.vue
@@ -24,7 +24,7 @@
 <script setup lang="ts">
 import { NeoDropdownItem } from '@kodadot1/brick'
 import { type CollectionEditMetadata } from '@/components/collection/EditModal.vue'
-import { Collections, type UpdateCollection } from '@/composables/transaction/types'
+import { Collections, type UpdateCollection, type CollectionMintSetting } from '@/composables/transaction/types'
 
 const props = defineProps<{
   collection: any
@@ -34,11 +34,12 @@ const { transaction, status, isLoading } = useTransaction()
 const { $i18n } = useNuxtApp()
 const { urlPrefix } = usePrefix()
 const route = useRoute()
-
+const collectionId = route.params.id.toString()
+const collectionPermissionSettings = ref<CollectionMintSetting>()
 const isModalActive = ref(false)
 
 const collectionMetadata = computed(() =>
-  props.collection
+  props.collection && collectionPermissionSettings.value
     ? {
         name: props.collection.meta.name,
         description: props.collection.meta.description,
@@ -46,18 +47,23 @@ const collectionMetadata = computed(() =>
         imageType: props.collection.meta.type,
         banner: props.collection.meta.banner || undefined,
         max: props.collection.max,
+        mintingSettings: collectionPermissionSettings.value!,
       } as CollectionEditMetadata
     : null)
 
 const updateMetadata = (a: UpdateCollection, b: UpdateCollection) => {
   const getMetadataKey = (m: UpdateCollection) => {
-    const { max, ...rest } = m
+    const { max, mintingSettings, ...rest } = m
     return JSON.stringify(rest)
   }
 
   return getMetadataKey(a) !== getMetadataKey(b)
 }
 
+const shouldUpdatePermission = (a: CollectionMintSetting, b: CollectionMintSetting) => {
+  return a.price !== b.price || a.mintType !== b.mintType
+}
+
 const editCollection = async (collection: UpdateCollection) => {
   isModalActive.value = false
 
@@ -67,14 +73,25 @@ const editCollection = async (collection: UpdateCollection) => {
 
   await transaction({
     interaction: Collections.UPDATE_COLLECTION,
-    collectionId: route.params.id.toString(),
+    collectionId: collectionId,
     collection,
     update: {
       metadata: updateMetadata(collection, collectionMetadata.value),
       max: collection.max !== collectionMetadata.value.max,
+      permission: shouldUpdatePermission(collection.mintingSettings, collectionPermissionSettings.value!),
     },
     urlPrefix: urlPrefix.value,
     successMessage: $i18n.t('edit.collection.success'),
   })
 }
+
+watchEffect(async () => {
+  const { apiInstance } = useApi()
+  const api = await apiInstance.value
+  const config = await api.query.nfts.collectionConfigOf(collectionId)
+  const mintSettings = (config.toHuman() as { mintSettings: CollectionMintSetting }).mintSettings
+
+  mintSettings.price = mintSettings.price?.replaceAll(',', '')
+  collectionPermissionSettings.value = mintSettings
+})
 </script>
diff --git a/composables/transaction/transactionUpdateCollection.ts b/composables/transaction/transactionUpdateCollection.ts
index 9a8ba8487d..3dd48ecc85 100644
--- a/composables/transaction/transactionUpdateCollection.ts
+++ b/composables/transaction/transactionUpdateCollection.ts
@@ -75,6 +75,10 @@ async function execUpdateCollectionStatmine({ item, api, executeTransaction, isL
     args.push(api.tx.nfts.setCollectionMaxSupply(item.collectionId, item.collection.max ? item.collection.max : undefined))
   }
 
+  if (item.update.permission) {
+    args.push(api.tx.nfts.updateMintSettings(item.collectionId, item.collection.mintingSettings))
+  }
+
   executeTransaction({
     cb: api.tx.utility.batchAll,
     arg: [args],
diff --git a/composables/transaction/types.ts b/composables/transaction/types.ts
index 94a2d8a71e..71424a08cc 100644
--- a/composables/transaction/types.ts
+++ b/composables/transaction/types.ts
@@ -302,6 +302,12 @@ export interface ActionSetNftMetadata {
   errorMessage?: string
 }
 
+export type CollectionMintSettingType = 'Issuer' | 'Public' | 'HolderOf'
+export type CollectionMintSetting = {
+  price: string
+  mintType: CollectionMintSettingType
+}
+
 export type SetNftMetadataParams = BaseUnionMintParams<ActionSetNftMetadata> & { api: ApiPromise }
 
 export type UpdateCollection = {
@@ -311,6 +317,7 @@ export type UpdateCollection = {
   imageType?: string
   banner?: File | string | null
   max: number | null
+  mintingSettings: CollectionMintSetting
 }
 
 export type UpdateCollectionParams = BaseUnionMintParams<ActionUpdateCollection> & { api: ApiPromise }
@@ -319,7 +326,7 @@ export interface ActionUpdateCollection {
   interaction: Collections.UPDATE_COLLECTION
   collectionId: string
   collection: UpdateCollection
-  update: { max: boolean, metadata: boolean }
+  update: { max: boolean, metadata: boolean, permission: boolean }
   urlPrefix: string
   successMessage?: string | ((blockNumber: string) => string)
   errorMessage?: string
diff --git a/composables/transaction/utils.ts b/composables/transaction/utils.ts
index 549f928499..0fab4bc799 100644
--- a/composables/transaction/utils.ts
+++ b/composables/transaction/utils.ts
@@ -66,7 +66,7 @@ export function isActionValid(action: Actions): boolean {
     [Collections.DELETE]: (action: ActionDeleteCollection) =>
       Boolean(action.collectionId),
     [Collections.UPDATE_COLLECTION]: (action: ActionUpdateCollection) =>
-      Boolean(action.collectionId) && (action.update.metadata || action.update.max),
+      Boolean(action.collectionId) && (action.update.metadata || action.update.max || action.update.permission),
     [NFTs.BURN_MULTIPLE]: (action: ActionBurnMultipleNFTs) =>
       hasContent(action.nftIds),
     [NFTs.SET_METADATA]: (action: ActionSetNftMetadata) =>
diff --git a/locales/en.json b/locales/en.json
index ae894a5be4..54daf3786a 100644
--- a/locales/en.json
+++ b/locales/en.json
@@ -1247,6 +1247,11 @@
         "message": "Name of your collection. It will be visible in the gallery",
         "placeholder": "Enter collection name"
       },
+      "permission": {
+        "label": "Collection Permission",
+        "noPriceSet": "No specified price set",
+        "pricePlaceholder": "specify the price of the items"
+      },
       "submit": "Create Collection",
       "symbol": {
         "label": "Symbol (short name)",
@@ -1283,6 +1288,7 @@
     "mass": "NFT mass minter",
     "mintCollectionSuccess": "Collection {name} Saved in block {block}",
     "mintNFTSuccess": "NFT {name} Saved in block {block}",
+    "mintType": "Mint Type",
     "nfsw": "Explicit content (NSFW)",
     "nfswMessage": "Set your collection as explicit and sensitive content.",
     "nft": {

From 443280e36dd5563fbc751f0141e7987705a75700 Mon Sep 17 00:00:00 2001
From: Jarsen <31397967+Jarsen136@users.noreply.github.com>
Date: Thu, 5 Dec 2024 16:21:56 +0100
Subject: [PATCH 02/12] fix: token input

---
 components/collection/EditModal.vue | 35 +++++++++++++++++++----------
 1 file changed, 23 insertions(+), 12 deletions(-)

diff --git a/components/collection/EditModal.vue b/components/collection/EditModal.vue
index 382403e5b2..91db577060 100644
--- a/components/collection/EditModal.vue
+++ b/components/collection/EditModal.vue
@@ -155,14 +155,23 @@
                   position="left"
                 />
               </div>
-              <NeoInput
+              <div
                 v-if="!mintingPriceUnset"
-                v-model="mintingPrice"
-                class="mt-3"
-                type="number"
-                :placeholder="$t('mint.collection.permission.pricePlaceholder')"
-                :min="0"
-              />
+                class="flex focus-within:!border-border-color border border-k-shade h-12 mt-3"
+              >
+                <input
+                  v-model="mintingPrice"
+                  type="number"
+                  step="0.01"
+                  min="0.0001"
+                  pattern="[0-9]+([\.,][0-9]+)?"
+                  class="indent-2.5 border-none outline-none w-20 bg-background-color text-text-color w-full"
+                  :placeholder="$t('mint.collection.permission.pricePlaceholder')"
+                >
+                <div class="px-3 flex items-center">
+                  {{ chainSymbol }}
+                </div>
+              </div>
             </div>
           </div>
         </NeoField>
@@ -207,6 +216,7 @@ const props = defineProps<{
 }>()
 
 const isModalActive = useVModel(props, 'modelValue')
+const { chainSymbol, decimals, withDecimals } = useChain()
 
 const name = ref<string>()
 const description = ref<string>()
@@ -225,7 +235,8 @@ const nameChanged = computed(() => props.collection.name !== name.value)
 const hasImageChanged = computed(() => (!imageUrl.value && Boolean(props.collection.image)) || Boolean(image.value))
 const originalLogoImageUrl = computed(() => sanitizeIpfsUrl(props.collection.image))
 const mintTypeChanged = computed(() => selectedMintingType.value !== props.collection.mintingSettings.mintType)
-const mintPriceChanged = computed(() => mintingPrice.value !== Number(props.collection.mintingSettings.price))
+const mintPriceChanged = computed(() => mintingPrice.value !== originalMintPrice.value)
+const originalMintPrice = computed(() => props.collection.mintingSettings.price ? Number(props.collection.mintingSettings.price) / (10 ** decimals.value) : null)
 
 const disabled = computed(() => {
   const hasImage = imageUrl.value
@@ -253,7 +264,7 @@ const editCollection = async () => {
     max: max.value,
     mintingSettings: {
       mintType: selectedMintingType.value,
-      price: mintingPriceUnset.value ? null : String(mintingPrice.value),
+      price: mintingPriceUnset.value ? null : String(withDecimals(mintingPrice.value || 0)),
     },
   } as UpdateCollection)
 }
@@ -271,17 +282,17 @@ watch(isModalActive, (value) => {
     // permission
     selectedMintingType.value = props.collection.mintingSettings.mintType
     mintingPriceUnset.value = !props.collection.mintingSettings.price
-    mintingPrice.value = Number(props.collection.mintingSettings.price) || null
+    mintingPrice.value = originalMintPrice.value || null
   }
 })
 
-watch([banner, unlimited, mintingPriceUnset], ([banner, unlimited, mintingPriceUnset]) => {
+watch([banner, unlimited, mintingPriceUnset], ([banner, unlimited, priceUnset]) => {
   if (banner) {
     bannerUrl.value = URL.createObjectURL(banner)
   }
 
   max.value = unlimited ? null : max.value || props.collection.max
 
-  mintingPrice.value = mintingPriceUnset ? null : mintingPrice.value || Number(props.collection.mintingSettings.price)
+  mintingPrice.value = priceUnset ? null : originalMintPrice.value
 })
 </script>

From bc09014aced79b0d006f810882fbb0e41e9161bb Mon Sep 17 00:00:00 2001
From: Jarsen <31397967+Jarsen136@users.noreply.github.com>
Date: Fri, 6 Dec 2024 23:06:31 +0100
Subject: [PATCH 03/12] fix: edit collection

---
 components/collection/EditModal.vue                | 6 +++---
 components/collection/HeroButtonEditCollection.vue | 1 +
 2 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/components/collection/EditModal.vue b/components/collection/EditModal.vue
index 91db577060..69384b7cbd 100644
--- a/components/collection/EditModal.vue
+++ b/components/collection/EditModal.vue
@@ -148,8 +148,8 @@
             </div>
 
             <div>
-              <div class="flex justify-between">
-                <p>{{ $t('mint.collection.permission.noPriceSet') }}</p>
+              <div class="flex justify-between capitalize">
+                <p>{{ $t(mintingPriceUnset ? 'mint.collection.permission.noPriceSet' : 'mint.collection.permission.pricePlaceholder') }}</p>
                 <NeoSwitch
                   v-model="mintingPriceUnset"
                   position="left"
@@ -206,7 +206,7 @@ export type CollectionEditMetadata = {
   mintingSettings: CollectionMintSetting
 }
 
-const COLLECTION_MINTING_TYPES_OPTIONS = ['Issuer', 'Public', 'HolderOf'].map(type => ({ value: type as CollectionMintSettingType, text: type }))
+const COLLECTION_MINTING_TYPES_OPTIONS = (['Issuer', 'Public', 'HolderOf'] as CollectionMintSettingType[]).map(type => ({ value: type, text: type }))
 
 const emit = defineEmits(['submit'])
 const props = defineProps<{
diff --git a/components/collection/HeroButtonEditCollection.vue b/components/collection/HeroButtonEditCollection.vue
index f6032ffc9a..fc327e40c7 100644
--- a/components/collection/HeroButtonEditCollection.vue
+++ b/components/collection/HeroButtonEditCollection.vue
@@ -1,5 +1,6 @@
 <template>
   <NeoDropdownItem
+    :disabled="!collectionMetadata"
     @click="isModalActive = true"
   >
     {{ $t('moreActions.editCollection') }}

From 7f953cffc69bf0ced3c8f93b86b57c8c3393ad80 Mon Sep 17 00:00:00 2001
From: Jarsen <31397967+Jarsen136@users.noreply.github.com>
Date: Tue, 10 Dec 2024 16:53:16 +0100
Subject: [PATCH 04/12] feat: collection edit holderOf

---
 components/collection/EditModal.vue           |  80 +++++++++++-
 .../collection/HeroButtonEditCollection.vue   |  13 +-
 components/collection/SearchInput.vue         | 117 ++++++++++++++++++
 .../collection/utils/useCollectionDetails.ts  |   2 +-
 components/search/utils/collectionSearch.ts   |   4 +-
 .../transactionUpdateCollection.ts            |  13 +-
 composables/transaction/types.ts              |   1 +
 locales/en.json                               |   7 +-
 8 files changed, 229 insertions(+), 8 deletions(-)
 create mode 100644 components/collection/SearchInput.vue

diff --git a/components/collection/EditModal.vue b/components/collection/EditModal.vue
index 69384b7cbd..8fbfec09e5 100644
--- a/components/collection/EditModal.vue
+++ b/components/collection/EditModal.vue
@@ -152,6 +152,7 @@
                 <p>{{ $t(mintingPriceUnset ? 'mint.collection.permission.noPriceSet' : 'mint.collection.permission.pricePlaceholder') }}</p>
                 <NeoSwitch
                   v-model="mintingPriceUnset"
+                  :disabled="selectedMintingType && ['Issuer', 'Public'].includes(selectedMintingType)"
                   position="left"
                 />
               </div>
@@ -172,6 +173,35 @@
                   {{ chainSymbol }}
                 </div>
               </div>
+              <div
+                v-if="selectedMintingType === 'HolderOf'"
+                class="mt-4"
+              >
+                <p class="mb-2">
+                  Holder of Collection
+                </p>
+                <CollectionSearchInput
+                  :collection-id="holderOfCollectionId"
+                  @update:collection="holderOfCollectionId = $event?.collection_id"
+                />
+              </div>
+            </div>
+
+            <div class="flex flex-col w-full">
+              <div
+                v-if="permissionSettingWarningMessage"
+                class="flex items-center gap-2 bg-yellow-50 border border-yellow-200 rounded-md p-3 !mt-2"
+              >
+                <NeoIcon
+                  icon="warning"
+                  class="text-yellow-500"
+                  size="small"
+                />
+
+                <p class="text-sm text-yellow-700">
+                  {{ permissionSettingWarningMessage }}
+                </p>
+              </div>
             </div>
           </div>
         </NeoField>
@@ -192,7 +222,7 @@
 </template>
 
 <script setup lang="ts">
-import { NeoButton, NeoField, NeoInput, NeoModal, NeoSwitch, NeoSelect } from '@kodadot1/brick'
+import { NeoButton, NeoField, NeoInput, NeoModal, NeoSwitch, NeoSelect, NeoIcon } from '@kodadot1/brick'
 import ModalBody from '@/components/shared/modals/ModalBody.vue'
 import type { UpdateCollection, CollectionMintSetting, CollectionMintSettingType } from '@/composables/transaction/types'
 
@@ -215,6 +245,7 @@ const props = defineProps<{
   min?: number
 }>()
 
+const { $i18n } = useNuxtApp()
 const isModalActive = useVModel(props, 'modelValue')
 const { chainSymbol, decimals, withDecimals } = useChain()
 
@@ -237,6 +268,8 @@ const originalLogoImageUrl = computed(() => sanitizeIpfsUrl(props.collection.ima
 const mintTypeChanged = computed(() => selectedMintingType.value !== props.collection.mintingSettings.mintType)
 const mintPriceChanged = computed(() => mintingPrice.value !== originalMintPrice.value)
 const originalMintPrice = computed(() => props.collection.mintingSettings.price ? Number(props.collection.mintingSettings.price) / (10 ** decimals.value) : null)
+const originalHolderOfCollectionId = computed(() => props.collection.mintingSettings.holderOf)
+const holderOfCollectionId = ref<string | undefined>(originalHolderOfCollectionId.value)
 
 const disabled = computed(() => {
   const hasImage = imageUrl.value
@@ -245,10 +278,16 @@ const disabled = computed(() => {
   const descriptionChanged = props.collection.description !== description.value
   const hasBannerChanged = (!bannerUrl.value && Boolean(props.collection.banner)) || Boolean(banner.value)
   const hasMaxChanged = max.value !== props.collection.max
+  const holderOfCollectionIdChanged = holderOfCollectionId.value !== originalHolderOfCollectionId.value
+
+  const invalidHolderOfCollection = selectedMintingType.value === 'HolderOf' && !holderOfCollectionId.value
 
-  return !hasImage || !isNameFilled || (!nameChanged.value && !descriptionChanged && !hasImageChanged.value && !hasBannerChanged && !hasMaxChanged && !mintTypeChanged.value && !mintPriceChanged.value)
+  return !hasImage || !isNameFilled || invalidHolderOfCollection
+    || (!nameChanged.value && !descriptionChanged && !hasImageChanged.value && !hasBannerChanged && !hasMaxChanged && !mintTypeChanged.value && !mintPriceChanged.value && !holderOfCollectionIdChanged)
 })
 
+const permissionSettingWarningMessage = computed(() => selectedMintingType.value && permissionSettingCheckingMap[selectedMintingType.value] && permissionSettingCheckingMap[selectedMintingType.value]())
+
 const initLogoImage = () => {
   imageUrl.value = originalLogoImageUrl.value
   image.value = undefined
@@ -265,6 +304,7 @@ const editCollection = async () => {
     mintingSettings: {
       mintType: selectedMintingType.value,
       price: mintingPriceUnset.value ? null : String(withDecimals(mintingPrice.value || 0)),
+      holderOf: holderOfCollectionId.value || originalHolderOfCollectionId.value,
     },
   } as UpdateCollection)
 }
@@ -283,6 +323,42 @@ watch(isModalActive, (value) => {
     selectedMintingType.value = props.collection.mintingSettings.mintType
     mintingPriceUnset.value = !props.collection.mintingSettings.price
     mintingPrice.value = originalMintPrice.value || null
+    holderOfCollectionId.value = originalHolderOfCollectionId.value
+  }
+})
+
+const priceHandlerMap = {
+  Issuer: () => {
+    mintingPrice.value = null
+    mintingPriceUnset.value = true
+  },
+  Public: () => {
+    mintingPriceUnset.value = false
+  },
+}
+
+const permissionSettingCheckingMap = {
+  Issuer: () => {
+    if (mintingPrice.value) {
+      return $i18n.t('mint.collection.permission.issuerWarning')
+    }
+  },
+  Public: () => {
+    if (!mintingPrice.value || mintingPrice.value <= 0) {
+      return $i18n.t('mint.collection.permission.publicWarning')
+    }
+  },
+  HolderOf: () => {
+    if (!holderOfCollectionId.value) {
+      return $i18n.t('mint.collection.permission.holderOfIdWarning')
+    }
+    return $i18n.t('mint.collection.permission.holderOfWarning')
+  },
+}
+
+watch(selectedMintingType, (type) => {
+  if (type && priceHandlerMap[type]) {
+    priceHandlerMap[type as CollectionMintSettingType]()
   }
 })
 
diff --git a/components/collection/HeroButtonEditCollection.vue b/components/collection/HeroButtonEditCollection.vue
index fc327e40c7..50e990ba7a 100644
--- a/components/collection/HeroButtonEditCollection.vue
+++ b/components/collection/HeroButtonEditCollection.vue
@@ -25,7 +25,7 @@
 <script setup lang="ts">
 import { NeoDropdownItem } from '@kodadot1/brick'
 import { type CollectionEditMetadata } from '@/components/collection/EditModal.vue'
-import { Collections, type UpdateCollection, type CollectionMintSetting } from '@/composables/transaction/types'
+import type { CollectionMintSettingType, Collections, UpdateCollection, CollectionMintSetting } from '@/composables/transaction/types'
 
 const props = defineProps<{
   collection: any
@@ -90,9 +90,18 @@ watchEffect(async () => {
   const { apiInstance } = useApi()
   const api = await apiInstance.value
   const config = await api.query.nfts.collectionConfigOf(collectionId)
-  const mintSettings = (config.toHuman() as { mintSettings: CollectionMintSetting }).mintSettings
+  const mintSettings = (config.toHuman() as { mintSettings: {
+    price: string
+    mintType: CollectionMintSettingType
+    holderOf: string
+  } }).mintSettings
 
   mintSettings.price = mintSettings.price?.replaceAll(',', '')
+
+  if (typeof mintSettings.mintType !== 'string') {
+    mintSettings.holderOf = (mintSettings.mintType as any as { HolderOf: string }).HolderOf
+    mintSettings.mintType = 'HolderOf'
+  }
   collectionPermissionSettings.value = mintSettings
 })
 </script>
diff --git a/components/collection/SearchInput.vue b/components/collection/SearchInput.vue
new file mode 100644
index 0000000000..c9ba9df13c
--- /dev/null
+++ b/components/collection/SearchInput.vue
@@ -0,0 +1,117 @@
+<template>
+  <div class="relative w-full">
+    <input
+      v-model="searchQuery"
+      type="text"
+      class="w-full h-12 p-2 border border-gray-300"
+      :placeholder="$t('mint.collection.search')"
+      @input="handleSearch"
+    >
+    <div
+      v-if="showResults"
+      class="absolute top-full left-0 right-0 bg-white border border-gray-300 rounded-md max-h-[300px] overflow-y-auto z-[1000]"
+    >
+      <div
+        v-for="collection in searchResults"
+        :key="collection.collection_id"
+        class="p-2 flex items-center cursor-pointer hover:bg-gray-100"
+        @click="selectCollection(collection)"
+      >
+        <img
+          :src="sanitizeIpfsUrl(collection.image, 'image')"
+          class="w-6 h-6 rounded-full object-cover"
+        >
+        <span class="ml-2">{{ collection.name }}</span>
+      </div>
+    </div>
+
+    <div
+      v-if="selectedCollection"
+      class="mt-2.5"
+    >
+      <div class="flex items-center p-2 bg-gray-100 rounded-md gap-2">
+        <img
+          :src="sanitizeIpfsUrl(selectedCollection.image, 'image')"
+          class="w-6 h-6 rounded-full object-cover"
+        >
+        <span>{{ selectedCollection.name }}</span>
+        <NeoButton
+          variant="text"
+          no-shadow
+          icon="xmark"
+          size="small"
+          @click="removeCollection"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { NeoButton } from '@kodadot1/brick'
+import { fetchCollectionSuggestion } from '@/components/search/utils/collectionSearch'
+import { sanitizeIpfsUrl } from '@/utils/ipfs'
+import { useCollectionMinimal } from '@/components/collection/utils/useCollectionDetails'
+
+type CollectionMinimal = {
+  collection_id: string
+  name: string
+  image: string
+}
+
+const props = defineProps<{
+  collectionId?: string
+}>()
+
+const emit = defineEmits<{
+  (e: 'update:collection', collection: CollectionMinimal | null): void
+}>()
+
+const { urlPrefix } = usePrefix()
+const searchQuery = ref('')
+const searchResults = ref<CollectionMinimal[]>([])
+const selectedCollection = ref<CollectionMinimal | null>(null)
+const showResults = ref(false)
+
+const { collection: initialCollection } = useCollectionMinimal({
+  collectionId: computed(() => props.collectionId),
+})
+
+watch(initialCollection, (newCollection) => {
+  if (newCollection) {
+    selectedCollection.value = {
+      collection_id: newCollection.id,
+      name: newCollection.name,
+      image: newCollection.meta.image,
+    }
+  }
+})
+
+const handleSearch = async () => {
+  if (!searchQuery.value) {
+    searchResults.value = []
+    showResults.value = false
+    return
+  }
+
+  const results = await fetchCollectionSuggestion(
+    searchQuery.value,
+    3,
+    urlPrefix.value,
+  )
+  searchResults.value = results
+  showResults.value = true
+}
+
+const selectCollection = (collection: CollectionMinimal) => {
+  selectedCollection.value = collection
+  emit('update:collection', collection)
+  searchQuery.value = ''
+  showResults.value = false
+}
+
+const removeCollection = () => {
+  selectedCollection.value = null
+  emit('update:collection', null)
+}
+</script>
diff --git a/components/collection/utils/useCollectionDetails.ts b/components/collection/utils/useCollectionDetails.ts
index 0beefe32cf..40a64f5963 100644
--- a/components/collection/utils/useCollectionDetails.ts
+++ b/components/collection/utils/useCollectionDetails.ts
@@ -104,7 +104,7 @@ export function useCollectionSoldData({ address, collectionId }) {
 export const useCollectionMinimal = ({
   collectionId,
 }: {
-  collectionId: Ref<string>
+  collectionId: Ref<string | undefined>
 }) => {
   const { urlPrefix, client } = usePrefix()
   const { isAssetHub } = useIsChain(urlPrefix)
diff --git a/components/search/utils/collectionSearch.ts b/components/search/utils/collectionSearch.ts
index 9876a5215e..0fcf808e52 100644
--- a/components/search/utils/collectionSearch.ts
+++ b/components/search/utils/collectionSearch.ts
@@ -1,5 +1,6 @@
 import { $fetch } from 'ofetch'
 import consola from 'consola'
+import type { Prefix } from '@kodadot1/static'
 import { URLS } from '~/utils/constants'
 
 const SEARCH_BASE_URL = URLS.koda.search
@@ -11,11 +12,12 @@ const api = $fetch.create({
   },
   credentials: 'omit',
 })
-export async function fetchCollectionSuggestion(key: string, limit?: number) {
+export async function fetchCollectionSuggestion(key: string, limit?: number, chain?: Prefix) {
   const object = {
     search: key,
     table: 'collections',
     limit,
+    chain,
   }
 
   try {
diff --git a/composables/transaction/transactionUpdateCollection.ts b/composables/transaction/transactionUpdateCollection.ts
index 3dd48ecc85..c5e13ccb18 100644
--- a/composables/transaction/transactionUpdateCollection.ts
+++ b/composables/transaction/transactionUpdateCollection.ts
@@ -76,7 +76,18 @@ async function execUpdateCollectionStatmine({ item, api, executeTransaction, isL
   }
 
   if (item.update.permission) {
-    args.push(api.tx.nfts.updateMintSettings(item.collectionId, item.collection.mintingSettings))
+    if (item.collection.mintingSettings.mintType === 'HolderOf') {
+      args.push(api.tx.nfts.updateMintSettings(item.collectionId, {
+        price: item.collection.mintingSettings.price,
+        mintType: {
+          HolderOf: item.collection.mintingSettings.holderOf,
+        },
+      }))
+    }
+    else {
+      const { holderOf: _, ...restSettings } = item.collection.mintingSettings
+      args.push(api.tx.nfts.updateMintSettings(item.collectionId, restSettings))
+    }
   }
 
   executeTransaction({
diff --git a/composables/transaction/types.ts b/composables/transaction/types.ts
index e299b5720e..4d42bad476 100644
--- a/composables/transaction/types.ts
+++ b/composables/transaction/types.ts
@@ -295,6 +295,7 @@ export type CollectionMintSettingType = 'Issuer' | 'Public' | 'HolderOf'
 export type CollectionMintSetting = {
   price: string
   mintType: CollectionMintSettingType
+  holderOf?: string
 }
 
 export type SetNftMetadataParams = BaseUnionMintParams<ActionSetNftMetadata> & { api: ApiPromise }
diff --git a/locales/en.json b/locales/en.json
index 571445eea6..c80b099eee 100644
--- a/locales/en.json
+++ b/locales/en.json
@@ -1250,10 +1250,15 @@
         "placeholder": "Enter collection name"
       },
       "permission": {
+        "holderOfIdWarning": "You need to set a HolderOf collection",
+        "holderOfWarning": "Currently HolderOf collection is not supported to mint on Koda",
+        "issuerWarning": "You should not set a price for Issuer type",
         "label": "Collection Permission",
         "noPriceSet": "No specified price set",
-        "pricePlaceholder": "specify the price of the items"
+        "pricePlaceholder": "specify the price of the items",
+        "publicWarning": "You need to set a price so that users can mint on Koda"
       },
+      "search": "Search Collection Name...",
       "submit": "Create Collection",
       "symbol": {
         "label": "Symbol (short name)",

From a5137080dd0ce3a6e4ec07e3dfdc1b7ac8a3708b Mon Sep 17 00:00:00 2001
From: Jarsen <31397967+Jarsen136@users.noreply.github.com>
Date: Wed, 11 Dec 2024 18:39:14 +0100
Subject: [PATCH 05/12] fix: collection type edit

---
 components/collection/EditModal.vue | 8 +++++---
 locales/en.json                     | 4 +++-
 2 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/components/collection/EditModal.vue b/components/collection/EditModal.vue
index 8fbfec09e5..b261c61e2f 100644
--- a/components/collection/EditModal.vue
+++ b/components/collection/EditModal.vue
@@ -151,8 +151,8 @@
               <div class="flex justify-between capitalize">
                 <p>{{ $t(mintingPriceUnset ? 'mint.collection.permission.noPriceSet' : 'mint.collection.permission.pricePlaceholder') }}</p>
                 <NeoSwitch
+                  v-if="selectedMintingType === 'HolderOf'"
                   v-model="mintingPriceUnset"
-                  :disabled="selectedMintingType && ['Issuer', 'Public'].includes(selectedMintingType)"
                   position="left"
                 />
               </div>
@@ -178,7 +178,7 @@
                 class="mt-4"
               >
                 <p class="mb-2">
-                  Holder of Collection
+                  {{ $t('mint.collection.permission.holderOfCollection') }}
                 </p>
                 <CollectionSearchInput
                   :collection-id="holderOfCollectionId"
@@ -279,10 +279,11 @@ const disabled = computed(() => {
   const hasBannerChanged = (!bannerUrl.value && Boolean(props.collection.banner)) || Boolean(banner.value)
   const hasMaxChanged = max.value !== props.collection.max
   const holderOfCollectionIdChanged = holderOfCollectionId.value !== originalHolderOfCollectionId.value
+  const invalidPublicCollection = selectedMintingType.value === 'Public' && !mintingPrice.value
 
   const invalidHolderOfCollection = selectedMintingType.value === 'HolderOf' && !holderOfCollectionId.value
 
-  return !hasImage || !isNameFilled || invalidHolderOfCollection
+  return !hasImage || !isNameFilled || invalidHolderOfCollection || invalidPublicCollection
     || (!nameChanged.value && !descriptionChanged && !hasImageChanged.value && !hasBannerChanged && !hasMaxChanged && !mintTypeChanged.value && !mintPriceChanged.value && !holderOfCollectionIdChanged)
 })
 
@@ -347,6 +348,7 @@ const permissionSettingCheckingMap = {
     if (!mintingPrice.value || mintingPrice.value <= 0) {
       return $i18n.t('mint.collection.permission.publicWarning')
     }
+    return $i18n.t('mint.collection.permission.publicWithPriceWarning')
   },
   HolderOf: () => {
     if (!holderOfCollectionId.value) {
diff --git a/locales/en.json b/locales/en.json
index c80b099eee..c349a21288 100644
--- a/locales/en.json
+++ b/locales/en.json
@@ -1250,13 +1250,15 @@
         "placeholder": "Enter collection name"
       },
       "permission": {
+        "holderOfCollection": "Holder of Collection",
         "holderOfIdWarning": "You need to set a HolderOf collection",
         "holderOfWarning": "Currently HolderOf collection is not supported to mint on Koda",
         "issuerWarning": "You should not set a price for Issuer type",
         "label": "Collection Permission",
         "noPriceSet": "No specified price set",
         "pricePlaceholder": "specify the price of the items",
-        "publicWarning": "You need to set a price so that users can mint on Koda"
+        "publicWarning": "You need to set a price so that users can mint on Koda",
+        "publicWithPriceWarning": "You will not be able to mint in Koda. Moreover anyone can mint into your collection"
       },
       "search": "Search Collection Name...",
       "submit": "Create Collection",

From 5fd39a3a4901177a604743ea83371b2b287386ea Mon Sep 17 00:00:00 2001
From: Jarsen <31397967+Jarsen136@users.noreply.github.com>
Date: Wed, 11 Dec 2024 18:42:25 +0100
Subject: [PATCH 06/12] fix: dark mode

---
 components/collection/SearchInput.vue | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/components/collection/SearchInput.vue b/components/collection/SearchInput.vue
index c9ba9df13c..e32d368036 100644
--- a/components/collection/SearchInput.vue
+++ b/components/collection/SearchInput.vue
@@ -3,18 +3,18 @@
     <input
       v-model="searchQuery"
       type="text"
-      class="w-full h-12 p-2 border border-gray-300"
+      class="w-full h-12 p-2 border border-k-shade bg-background-color text-text-color focus:border-border-color outline-none"
       :placeholder="$t('mint.collection.search')"
       @input="handleSearch"
     >
     <div
       v-if="showResults"
-      class="absolute top-full left-0 right-0 bg-white border border-gray-300 rounded-md max-h-[300px] overflow-y-auto z-[1000]"
+      class="absolute top-full left-0 right-0 bg-background-color border border-k-shade rounded-md max-h-[300px] overflow-y-auto z-[1000]"
     >
       <div
         v-for="collection in searchResults"
         :key="collection.collection_id"
-        class="p-2 flex items-center cursor-pointer hover:bg-gray-100"
+        class="p-2 flex items-center cursor-pointer hover:bg-k-hover text-text-color"
         @click="selectCollection(collection)"
       >
         <img
@@ -29,7 +29,7 @@
       v-if="selectedCollection"
       class="mt-2.5"
     >
-      <div class="flex items-center p-2 bg-gray-100 rounded-md gap-2">
+      <div class="flex items-center p-2 bg-k-shade rounded-md gap-2 text-text-color">
         <img
           :src="sanitizeIpfsUrl(selectedCollection.image, 'image')"
           class="w-6 h-6 rounded-full object-cover"

From 529975e0c391d1487ce33849e9820e7836c1ae2c Mon Sep 17 00:00:00 2001
From: Jarsen <31397967+Jarsen136@users.noreply.github.com>
Date: Tue, 31 Dec 2024 21:02:45 +0100
Subject: [PATCH 07/12] fix: collection permission edit

---
 components/collection/EditModal.vue           | 39 +++++++++++--------
 .../collection/HeroButtonEditCollection.vue   | 16 ++++++--
 components/collection/SearchInput.vue         | 31 ++++++++++-----
 3 files changed, 57 insertions(+), 29 deletions(-)

diff --git a/components/collection/EditModal.vue b/components/collection/EditModal.vue
index b261c61e2f..9e9d64c18d 100644
--- a/components/collection/EditModal.vue
+++ b/components/collection/EditModal.vue
@@ -127,6 +127,7 @@
         </NeoField>
 
         <NeoField
+          v-if="isModalActive"
           :label="$t('mint.collection.permission.label')"
         >
           <div class="w-full flex flex-col gap-4">
@@ -149,15 +150,15 @@
 
             <div>
               <div class="flex justify-between capitalize">
-                <p>{{ $t(mintingPriceUnset ? 'mint.collection.permission.noPriceSet' : 'mint.collection.permission.pricePlaceholder') }}</p>
+                <p>{{ $t(hasMintingPrice ? 'mint.collection.permission.pricePlaceholder' : 'mint.collection.permission.noPriceSet') }}</p>
                 <NeoSwitch
                   v-if="selectedMintingType === 'HolderOf'"
-                  v-model="mintingPriceUnset"
+                  v-model="hasMintingPrice"
                   position="left"
                 />
               </div>
               <div
-                v-if="!mintingPriceUnset"
+                v-if="hasMintingPrice"
                 class="flex focus-within:!border-border-color border border-k-shade h-12 mt-3"
               >
                 <input
@@ -256,8 +257,9 @@ const banner = ref<File>()
 const imageUrl = ref<string>()
 const bannerUrl = ref<string>()
 const unlimited = ref(true)
-const mintingPriceUnset = ref(true)
+const hasMintingPrice = ref(false)
 const mintingPrice = ref<number | null>(null)
+
 const selectedMintingType = ref<CollectionMintSettingType | null>(null)
 const min = computed(() => props.min || 1)
 const max = ref<number | null>(null)
@@ -304,7 +306,7 @@ const editCollection = async () => {
     max: max.value,
     mintingSettings: {
       mintType: selectedMintingType.value,
-      price: mintingPriceUnset.value ? null : String(withDecimals(mintingPrice.value || 0)),
+      price: hasMintingPrice.value ? String(withDecimals(mintingPrice.value || 0)) : null,
       holderOf: holderOfCollectionId.value || originalHolderOfCollectionId.value,
     },
   } as UpdateCollection)
@@ -322,19 +324,26 @@ watch(isModalActive, (value) => {
 
     // permission
     selectedMintingType.value = props.collection.mintingSettings.mintType
-    mintingPriceUnset.value = !props.collection.mintingSettings.price
+    hasMintingPrice.value = Boolean(props.collection.mintingSettings.price)
     mintingPrice.value = originalMintPrice.value || null
     holderOfCollectionId.value = originalHolderOfCollectionId.value
   }
+}, {
+  immediate: true,
 })
-
-const priceHandlerMap = {
+const mintTypeChangeHandlerMap = {
   Issuer: () => {
+    hasMintingPrice.value = false
     mintingPrice.value = null
-    mintingPriceUnset.value = true
   },
   Public: () => {
-    mintingPriceUnset.value = false
+    hasMintingPrice.value = true
+    mintingPrice.value = null
+  },
+  HolderOf: () => {
+    hasMintingPrice.value = false
+    mintingPrice.value = null
+    holderOfCollectionId.value = undefined
   },
 }
 
@@ -358,19 +367,17 @@ const permissionSettingCheckingMap = {
   },
 }
 
-watch(selectedMintingType, (type) => {
-  if (type && priceHandlerMap[type]) {
-    priceHandlerMap[type as CollectionMintSettingType]()
+watch(selectedMintingType, (type, oldType) => {
+  if (oldType && type && mintTypeChangeHandlerMap[type]) {
+    mintTypeChangeHandlerMap[type as CollectionMintSettingType]()
   }
 })
 
-watch([banner, unlimited, mintingPriceUnset], ([banner, unlimited, priceUnset]) => {
+watch([banner, unlimited], ([banner, unlimited]) => {
   if (banner) {
     bannerUrl.value = URL.createObjectURL(banner)
   }
 
   max.value = unlimited ? null : max.value || props.collection.max
-
-  mintingPrice.value = priceUnset ? null : originalMintPrice.value
 })
 </script>
diff --git a/components/collection/HeroButtonEditCollection.vue b/components/collection/HeroButtonEditCollection.vue
index 50e990ba7a..7509312503 100644
--- a/components/collection/HeroButtonEditCollection.vue
+++ b/components/collection/HeroButtonEditCollection.vue
@@ -25,7 +25,7 @@
 <script setup lang="ts">
 import { NeoDropdownItem } from '@kodadot1/brick'
 import { type CollectionEditMetadata } from '@/components/collection/EditModal.vue'
-import type { CollectionMintSettingType, Collections, UpdateCollection, CollectionMintSetting } from '@/composables/transaction/types'
+import { type CollectionMintSettingType, Collections, type UpdateCollection, type CollectionMintSetting } from '@/composables/transaction/types'
 
 const props = defineProps<{
   collection: any
@@ -38,6 +38,7 @@ const route = useRoute()
 const collectionId = route.params.id.toString()
 const collectionPermissionSettings = ref<CollectionMintSetting>()
 const isModalActive = ref(false)
+const editedCollection = ref<UpdateCollection>()
 
 const collectionMetadata = computed(() =>
   props.collection && collectionPermissionSettings.value
@@ -65,9 +66,16 @@ const shouldUpdatePermission = (a: CollectionMintSetting, b: CollectionMintSetti
   return a.price !== b.price || a.mintType !== b.mintType
 }
 
-const editCollection = async (collection: UpdateCollection) => {
+const editCollection = async (updatedCollection?: UpdateCollection) => {
   isModalActive.value = false
 
+  const collection = updatedCollection || editedCollection.value!
+
+  // retry action
+  if (updatedCollection) {
+    editedCollection.value = updatedCollection
+  }
+
   if (!collectionMetadata.value) {
     return
   }
@@ -86,7 +94,7 @@ const editCollection = async (collection: UpdateCollection) => {
   })
 }
 
-watchEffect(async () => {
+watch(computed(() => collectionId), async () => {
   const { apiInstance } = useApi()
   const api = await apiInstance.value
   const config = await api.query.nfts.collectionConfigOf(collectionId)
@@ -103,5 +111,7 @@ watchEffect(async () => {
     mintSettings.mintType = 'HolderOf'
   }
   collectionPermissionSettings.value = mintSettings
+}, {
+  immediate: true,
 })
 </script>
diff --git a/components/collection/SearchInput.vue b/components/collection/SearchInput.vue
index e32d368036..5ece8bbd38 100644
--- a/components/collection/SearchInput.vue
+++ b/components/collection/SearchInput.vue
@@ -17,10 +17,14 @@
         class="p-2 flex items-center cursor-pointer hover:bg-k-hover text-text-color"
         @click="selectCollection(collection)"
       >
-        <img
-          :src="sanitizeIpfsUrl(collection.image, 'image')"
-          class="w-6 h-6 rounded-full object-cover"
-        >
+        <div>
+          <BasicImage
+            :src="sanitizeIpfsUrl(collection.image, 'image')"
+            custom-class="w-6 h-6 object-cover"
+            rounded
+          />
+        </div>
+
         <span class="ml-2">{{ collection.name }}</span>
       </div>
     </div>
@@ -29,14 +33,18 @@
       v-if="selectedCollection"
       class="mt-2.5"
     >
-      <div class="flex items-center p-2 bg-k-shade rounded-md gap-2 text-text-color">
-        <img
-          :src="sanitizeIpfsUrl(selectedCollection.image, 'image')"
-          class="w-6 h-6 rounded-full object-cover"
-        >
-        <span>{{ selectedCollection.name }}</span>
+      <div class="flex items-center p-2 bg-k-grey-light rounded-md gap-2 text-text-color pr-6">
+        <div>
+          <BasicImage
+            :src="sanitizeIpfsUrl(selectedCollection.image, 'image')"
+            custom-class="w-6 h-6 object-cover"
+            rounded
+          />
+        </div>
+        <span class="text-overflow-ellipsis overflow-hidden">{{ selectedCollection.name }}</span>
         <NeoButton
           variant="text"
+          class="absolute right-0"
           no-shadow
           icon="xmark"
           size="small"
@@ -52,6 +60,7 @@ import { NeoButton } from '@kodadot1/brick'
 import { fetchCollectionSuggestion } from '@/components/search/utils/collectionSearch'
 import { sanitizeIpfsUrl } from '@/utils/ipfs'
 import { useCollectionMinimal } from '@/components/collection/utils/useCollectionDetails'
+import BasicImage from '@/components/shared/view/BasicImage.vue'
 
 type CollectionMinimal = {
   collection_id: string
@@ -85,6 +94,8 @@ watch(initialCollection, (newCollection) => {
       image: newCollection.meta.image,
     }
   }
+}, {
+  immediate: true,
 })
 
 const handleSearch = async () => {

From b1d1af808ef0e31a641c1479fd7824561fe9afee Mon Sep 17 00:00:00 2001
From: Jarsen <31397967+Jarsen136@users.noreply.github.com>
Date: Wed, 1 Jan 2025 12:22:30 +0100
Subject: [PATCH 08/12] fix: search input

---
 components/collection/SearchInput.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/components/collection/SearchInput.vue b/components/collection/SearchInput.vue
index 5ece8bbd38..15479975db 100644
--- a/components/collection/SearchInput.vue
+++ b/components/collection/SearchInput.vue
@@ -1,6 +1,7 @@
 <template>
   <div class="relative w-full">
     <input
+      v-if="!selectedCollection"
       v-model="searchQuery"
       type="text"
       class="w-full h-12 p-2 border border-k-shade bg-background-color text-text-color focus:border-border-color outline-none"

From 774907c2b0c8d69a32c3e897a36df8344433e25f Mon Sep 17 00:00:00 2001
From: Jarsen <31397967+Jarsen136@users.noreply.github.com>
Date: Wed, 1 Jan 2025 12:54:39 +0100
Subject: [PATCH 09/12] chore: price copy

---
 locales/en.json | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/locales/en.json b/locales/en.json
index 305b762a29..bd21769a21 100644
--- a/locales/en.json
+++ b/locales/en.json
@@ -1256,8 +1256,8 @@
         "holderOfWarning": "Currently HolderOf collection is not supported to mint on Koda",
         "issuerWarning": "You should not set a price for Issuer type",
         "label": "Collection Permission",
-        "noPriceSet": "No specified price set",
-        "pricePlaceholder": "specify the price of the items",
+        "noPriceSet": "No specific price set",
+        "pricePlaceholder": "Set specific price",
         "publicWarning": "You need to set a price so that users can mint on Koda",
         "publicWithPriceWarning": "You will not be able to mint in Koda. Moreover anyone can mint into your collection"
       },

From 194f8641ca4054d09a51b4db642fcf0a8a62f7bf Mon Sep 17 00:00:00 2001
From: Jarsen <31397967+Jarsen136@users.noreply.github.com>
Date: Wed, 1 Jan 2025 15:17:28 +0100
Subject: [PATCH 10/12] chore: edit type

---
 components/collection/EditModal.vue   | 13 +++++++------
 components/collection/SearchInput.vue |  5 +++--
 2 files changed, 10 insertions(+), 8 deletions(-)

diff --git a/components/collection/EditModal.vue b/components/collection/EditModal.vue
index 9e9d64c18d..0ffd202f26 100644
--- a/components/collection/EditModal.vue
+++ b/components/collection/EditModal.vue
@@ -152,7 +152,7 @@
               <div class="flex justify-between capitalize">
                 <p>{{ $t(hasMintingPrice ? 'mint.collection.permission.pricePlaceholder' : 'mint.collection.permission.noPriceSet') }}</p>
                 <NeoSwitch
-                  v-if="selectedMintingType === 'HolderOf'"
+                  v-if="isHolderOfMintingTypeSelected"
                   v-model="hasMintingPrice"
                   position="left"
                 />
@@ -175,7 +175,7 @@
                 </div>
               </div>
               <div
-                v-if="selectedMintingType === 'HolderOf'"
+                v-if="isHolderOfMintingTypeSelected"
                 class="mt-4"
               >
                 <p class="mb-2">
@@ -272,6 +272,7 @@ const mintPriceChanged = computed(() => mintingPrice.value !== originalMintPrice
 const originalMintPrice = computed(() => props.collection.mintingSettings.price ? Number(props.collection.mintingSettings.price) / (10 ** decimals.value) : null)
 const originalHolderOfCollectionId = computed(() => props.collection.mintingSettings.holderOf)
 const holderOfCollectionId = ref<string | undefined>(originalHolderOfCollectionId.value)
+const isHolderOfMintingTypeSelected = computed(() => selectedMintingType.value === 'HolderOf')
 
 const disabled = computed(() => {
   const hasImage = imageUrl.value
@@ -283,13 +284,13 @@ const disabled = computed(() => {
   const holderOfCollectionIdChanged = holderOfCollectionId.value !== originalHolderOfCollectionId.value
   const invalidPublicCollection = selectedMintingType.value === 'Public' && !mintingPrice.value
 
-  const invalidHolderOfCollection = selectedMintingType.value === 'HolderOf' && !holderOfCollectionId.value
+  const invalidHolderOfCollection = isHolderOfMintingTypeSelected.value && !holderOfCollectionId.value
 
   return !hasImage || !isNameFilled || invalidHolderOfCollection || invalidPublicCollection
     || (!nameChanged.value && !descriptionChanged && !hasImageChanged.value && !hasBannerChanged && !hasMaxChanged && !mintTypeChanged.value && !mintPriceChanged.value && !holderOfCollectionIdChanged)
 })
 
-const permissionSettingWarningMessage = computed(() => selectedMintingType.value && permissionSettingCheckingMap[selectedMintingType.value] && permissionSettingCheckingMap[selectedMintingType.value]())
+const permissionSettingWarningMessage = computed(() => selectedMintingType.value && permissionSettingCheckingMap[selectedMintingType.value]?.())
 
 const initLogoImage = () => {
   imageUrl.value = originalLogoImageUrl.value
@@ -331,7 +332,7 @@ watch(isModalActive, (value) => {
 }, {
   immediate: true,
 })
-const mintTypeChangeHandlerMap = {
+const mintTypeChangeHandlerMap: Record<CollectionMintSettingType, () => void> = {
   Issuer: () => {
     hasMintingPrice.value = false
     mintingPrice.value = null
@@ -347,7 +348,7 @@ const mintTypeChangeHandlerMap = {
   },
 }
 
-const permissionSettingCheckingMap = {
+const permissionSettingCheckingMap: Record<CollectionMintSettingType, () => string | undefined> = {
   Issuer: () => {
     if (mintingPrice.value) {
       return $i18n.t('mint.collection.permission.issuerWarning')
diff --git a/components/collection/SearchInput.vue b/components/collection/SearchInput.vue
index 15479975db..5eca490f92 100644
--- a/components/collection/SearchInput.vue
+++ b/components/collection/SearchInput.vue
@@ -58,6 +58,7 @@
 
 <script setup lang="ts">
 import { NeoButton } from '@kodadot1/brick'
+import debounce from 'lodash/debounce'
 import { fetchCollectionSuggestion } from '@/components/search/utils/collectionSearch'
 import { sanitizeIpfsUrl } from '@/utils/ipfs'
 import { useCollectionMinimal } from '@/components/collection/utils/useCollectionDetails'
@@ -99,7 +100,7 @@ watch(initialCollection, (newCollection) => {
   immediate: true,
 })
 
-const handleSearch = async () => {
+const handleSearch = debounce(async () => {
   if (!searchQuery.value) {
     searchResults.value = []
     showResults.value = false
@@ -113,7 +114,7 @@ const handleSearch = async () => {
   )
   searchResults.value = results
   showResults.value = true
-}
+}, 500)
 
 const selectCollection = (collection: CollectionMinimal) => {
   selectedCollection.value = collection

From 9de8a8df26ea03c3d7f2f5b51f457f5323cd6b9d Mon Sep 17 00:00:00 2001
From: Jarsen <31397967+Jarsen136@users.noreply.github.com>
Date: Wed, 1 Jan 2025 15:37:37 +0100
Subject: [PATCH 11/12] chore: CollectionMintSettingType type

---
 components/collection/EditModal.vue           | 20 +++++++++----------
 .../collection/HeroButtonEditCollection.vue   |  6 +++---
 .../transactionUpdateCollection.ts            |  4 ++--
 composables/transaction/types.ts              |  7 ++++++-
 4 files changed, 21 insertions(+), 16 deletions(-)

diff --git a/components/collection/EditModal.vue b/components/collection/EditModal.vue
index 0ffd202f26..80ffb518f4 100644
--- a/components/collection/EditModal.vue
+++ b/components/collection/EditModal.vue
@@ -225,7 +225,7 @@
 <script setup lang="ts">
 import { NeoButton, NeoField, NeoInput, NeoModal, NeoSwitch, NeoSelect, NeoIcon } from '@kodadot1/brick'
 import ModalBody from '@/components/shared/modals/ModalBody.vue'
-import type { UpdateCollection, CollectionMintSetting, CollectionMintSettingType } from '@/composables/transaction/types'
+import { type UpdateCollection, type CollectionMintSetting, CollectionMintSettingType } from '@/composables/transaction/types'
 
 export type CollectionEditMetadata = {
   name: string
@@ -237,7 +237,7 @@ export type CollectionEditMetadata = {
   mintingSettings: CollectionMintSetting
 }
 
-const COLLECTION_MINTING_TYPES_OPTIONS = (['Issuer', 'Public', 'HolderOf'] as CollectionMintSettingType[]).map(type => ({ value: type, text: type }))
+const COLLECTION_MINTING_TYPES_OPTIONS = ([CollectionMintSettingType.Issuer, CollectionMintSettingType.Public, CollectionMintSettingType.HolderOf]).map(type => ({ value: type, text: type }))
 
 const emit = defineEmits(['submit'])
 const props = defineProps<{
@@ -272,7 +272,7 @@ const mintPriceChanged = computed(() => mintingPrice.value !== originalMintPrice
 const originalMintPrice = computed(() => props.collection.mintingSettings.price ? Number(props.collection.mintingSettings.price) / (10 ** decimals.value) : null)
 const originalHolderOfCollectionId = computed(() => props.collection.mintingSettings.holderOf)
 const holderOfCollectionId = ref<string | undefined>(originalHolderOfCollectionId.value)
-const isHolderOfMintingTypeSelected = computed(() => selectedMintingType.value === 'HolderOf')
+const isHolderOfMintingTypeSelected = computed(() => selectedMintingType.value === CollectionMintSettingType.HolderOf)
 
 const disabled = computed(() => {
   const hasImage = imageUrl.value
@@ -333,15 +333,15 @@ watch(isModalActive, (value) => {
   immediate: true,
 })
 const mintTypeChangeHandlerMap: Record<CollectionMintSettingType, () => void> = {
-  Issuer: () => {
+  [CollectionMintSettingType.Issuer]: () => {
     hasMintingPrice.value = false
     mintingPrice.value = null
   },
-  Public: () => {
+  [CollectionMintSettingType.Public]: () => {
     hasMintingPrice.value = true
     mintingPrice.value = null
   },
-  HolderOf: () => {
+  [CollectionMintSettingType.HolderOf]: () => {
     hasMintingPrice.value = false
     mintingPrice.value = null
     holderOfCollectionId.value = undefined
@@ -349,18 +349,18 @@ const mintTypeChangeHandlerMap: Record<CollectionMintSettingType, () => void> =
 }
 
 const permissionSettingCheckingMap: Record<CollectionMintSettingType, () => string | undefined> = {
-  Issuer: () => {
+  [CollectionMintSettingType.Issuer]: () => {
     if (mintingPrice.value) {
       return $i18n.t('mint.collection.permission.issuerWarning')
     }
   },
-  Public: () => {
+  [CollectionMintSettingType.Public]: () => {
     if (!mintingPrice.value || mintingPrice.value <= 0) {
       return $i18n.t('mint.collection.permission.publicWarning')
     }
     return $i18n.t('mint.collection.permission.publicWithPriceWarning')
   },
-  HolderOf: () => {
+  [CollectionMintSettingType.HolderOf]: () => {
     if (!holderOfCollectionId.value) {
       return $i18n.t('mint.collection.permission.holderOfIdWarning')
     }
@@ -370,7 +370,7 @@ const permissionSettingCheckingMap: Record<CollectionMintSettingType, () => stri
 
 watch(selectedMintingType, (type, oldType) => {
   if (oldType && type && mintTypeChangeHandlerMap[type]) {
-    mintTypeChangeHandlerMap[type as CollectionMintSettingType]()
+    mintTypeChangeHandlerMap[type]()
   }
 })
 
diff --git a/components/collection/HeroButtonEditCollection.vue b/components/collection/HeroButtonEditCollection.vue
index 7509312503..a62de6f185 100644
--- a/components/collection/HeroButtonEditCollection.vue
+++ b/components/collection/HeroButtonEditCollection.vue
@@ -25,7 +25,7 @@
 <script setup lang="ts">
 import { NeoDropdownItem } from '@kodadot1/brick'
 import { type CollectionEditMetadata } from '@/components/collection/EditModal.vue'
-import { type CollectionMintSettingType, Collections, type UpdateCollection, type CollectionMintSetting } from '@/composables/transaction/types'
+import { CollectionMintSettingType, Collections, type UpdateCollection, type CollectionMintSetting } from '@/composables/transaction/types'
 
 const props = defineProps<{
   collection: any
@@ -63,7 +63,7 @@ const updateMetadata = (a: UpdateCollection, b: UpdateCollection) => {
 }
 
 const shouldUpdatePermission = (a: CollectionMintSetting, b: CollectionMintSetting) => {
-  return a.price !== b.price || a.mintType !== b.mintType
+  return a.price !== b.price || a.mintType !== b.mintType || a.holderOf !== b.holderOf
 }
 
 const editCollection = async (updatedCollection?: UpdateCollection) => {
@@ -108,7 +108,7 @@ watch(computed(() => collectionId), async () => {
 
   if (typeof mintSettings.mintType !== 'string') {
     mintSettings.holderOf = (mintSettings.mintType as any as { HolderOf: string }).HolderOf
-    mintSettings.mintType = 'HolderOf'
+    mintSettings.mintType = CollectionMintSettingType.HolderOf
   }
   collectionPermissionSettings.value = mintSettings
 }, {
diff --git a/composables/transaction/transactionUpdateCollection.ts b/composables/transaction/transactionUpdateCollection.ts
index b04ece2c95..77c43a2db9 100644
--- a/composables/transaction/transactionUpdateCollection.ts
+++ b/composables/transaction/transactionUpdateCollection.ts
@@ -1,7 +1,7 @@
 import { createOpenSeaMetadata as createMetadata, protocolize } from '@kodadot1/hyperdata'
 import type { SubmittableExtrinsic } from '@polkadot/api-base/types'
 import { uploadMediaFiles } from './mintToken/constructDirectoryMeta'
-import type { ActionUpdateCollection, UpdateCollectionParams } from './types'
+import { CollectionMintSettingType, type ActionUpdateCollection, type UpdateCollectionParams } from './types'
 import { pinFileToIPFS, pinJson } from '@/services/nftStorage'
 
 const getIpfsMedia = async ({ collection: { image, banner, imageType } }: ActionUpdateCollection) => {
@@ -76,7 +76,7 @@ async function execUpdateCollectionStatmine({ item, api, executeTransaction, isL
   }
 
   if (item.update.permission) {
-    if (item.collection.mintingSettings.mintType === 'HolderOf') {
+    if (item.collection.mintingSettings.mintType === CollectionMintSettingType.HolderOf) {
       args.push(api.tx.nfts.updateMintSettings(item.collectionId, {
         price: item.collection.mintingSettings.price,
         mintType: {
diff --git a/composables/transaction/types.ts b/composables/transaction/types.ts
index 5f6e394dcb..75f0104771 100644
--- a/composables/transaction/types.ts
+++ b/composables/transaction/types.ts
@@ -310,7 +310,12 @@ export interface ActionSetNftMetadata {
   errorMessage?: string
 }
 
-export type CollectionMintSettingType = 'Issuer' | 'Public' | 'HolderOf'
+export enum CollectionMintSettingType {
+  Issuer = 'Issuer',
+  Public = 'Public',
+  HolderOf = 'HolderOf',
+}
+
 export type CollectionMintSetting = {
   price: string
   mintType: CollectionMintSettingType

From 14c89fe963cdc43e25f3c69cb5c3ec8695776de4 Mon Sep 17 00:00:00 2001
From: Jarsen <31397967+Jarsen136@users.noreply.github.com>
Date: Thu, 2 Jan 2025 21:06:48 +0100
Subject: [PATCH 12/12] refactor: getCollectionMintSettings utils

---
 components/collection/HeroButtonEditCollection.vue | 10 ++--------
 composables/transaction/mintCollection/utils.ts    | 12 ++++++++++++
 2 files changed, 14 insertions(+), 8 deletions(-)

diff --git a/components/collection/HeroButtonEditCollection.vue b/components/collection/HeroButtonEditCollection.vue
index a62de6f185..12c3e90bc6 100644
--- a/components/collection/HeroButtonEditCollection.vue
+++ b/components/collection/HeroButtonEditCollection.vue
@@ -26,6 +26,7 @@
 import { NeoDropdownItem } from '@kodadot1/brick'
 import { type CollectionEditMetadata } from '@/components/collection/EditModal.vue'
 import { CollectionMintSettingType, Collections, type UpdateCollection, type CollectionMintSetting } from '@/composables/transaction/types'
+import { getCollectionMintSettings } from '@/composables/transaction/mintCollection/utils'
 
 const props = defineProps<{
   collection: any
@@ -95,14 +96,7 @@ const editCollection = async (updatedCollection?: UpdateCollection) => {
 }
 
 watch(computed(() => collectionId), async () => {
-  const { apiInstance } = useApi()
-  const api = await apiInstance.value
-  const config = await api.query.nfts.collectionConfigOf(collectionId)
-  const mintSettings = (config.toHuman() as { mintSettings: {
-    price: string
-    mintType: CollectionMintSettingType
-    holderOf: string
-  } }).mintSettings
+  const mintSettings = await getCollectionMintSettings(collectionId)
 
   mintSettings.price = mintSettings.price?.replaceAll(',', '')
 
diff --git a/composables/transaction/mintCollection/utils.ts b/composables/transaction/mintCollection/utils.ts
index da6a346cfb..d53d7ffe8b 100644
--- a/composables/transaction/mintCollection/utils.ts
+++ b/composables/transaction/mintCollection/utils.ts
@@ -1,4 +1,5 @@
 import { chainAssetOf } from '@/utils/config/chain.config'
+import type { CollectionMintSettingType } from '@/composables/transaction/types'
 
 export function createArgs(
   randomId: number,
@@ -33,3 +34,14 @@ export const calculateFees = () => {
     token: symbol,
   }
 }
+
+export const getCollectionMintSettings = async (collectionId: string) => {
+  const { apiInstance } = useApi()
+  const api = await apiInstance.value
+  const config = await api.query.nfts.collectionConfigOf(collectionId)
+  return (config.toHuman() as { mintSettings: {
+    price: string
+    mintType: CollectionMintSettingType
+    holderOf: string
+  } }).mintSettings
+}