feat: edit collection permission

components/collection/EditModal.vue

@@ -125,6 +125,56 @@
             </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 capitalize">
+                <p>{{ $t(mintingPriceUnset ? 'mint.collection.permission.noPriceSet' : 'mint.collection.permission.pricePlaceholder') }}</p>
+                <NeoSwitch
+                  v-model="mintingPriceUnset"
+                  position="left"
+                />
+              </div>
+              <div
+                v-if="!mintingPriceUnset"
+                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>
       </form>
 
       <div class="flex flex-col !mt-6">
@@ -142,9 +192,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 +203,11 @@ export type CollectionEditMetadata = {
   imageType: string
   banner?: string
   max: number | null
+  mintingSettings: CollectionMintSetting
 }
 
+const COLLECTION_MINTING_TYPES_OPTIONS = (['Issuer', 'Public', 'HolderOf'] as CollectionMintSettingType[]).map(type => ({ value: type, text: type }))
+
 const emit = defineEmits(['submit'])
 const props = defineProps<{
   modelValue: boolean
@@ -163,6 +216,7 @@ const props = defineProps<{
 }>()
 
 const isModalActive = useVModel(props, 'modelValue')
+const { chainSymbol, decimals, withDecimals } = useChain()
 
 const name = ref<string>()
 const description = ref<string>()
@@ -171,13 +225,18 @@ 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 !== 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
@@ -187,7 +246,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 +262,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(withDecimals(mintingPrice.value || 0)),
+    },
   } as UpdateCollection)
 }
 
@@ -215,14 +278,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 = originalMintPrice.value || null
   }
 })
 
-watch([banner, unlimited], ([banner, unlimited]) => {
+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 = priceUnset ? null : originalMintPrice.value
 })
 </script>

components/collection/HeroButtonEditCollection.vue

@@ -1,5 +1,6 @@
 <template>
   <NeoDropdownItem
+    :disabled="!collectionMetadata"
     @click="isModalActive = true"
   >
     {{ $t('moreActions.editCollection') }}
@@ -24,7 +25,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,30 +35,36 @@ 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,
         image: props.collection.meta.image,
         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 +74,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>

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],

composables/transaction/types.ts

@@ -291,6 +291,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 = {
@@ -300,6 +306,7 @@ export type UpdateCollection = {
   imageType?: string
   banner?: File | string | null
   max: number | null
+  mintingSettings: CollectionMintSetting
 }
 
 export type UpdateCollectionParams = BaseUnionMintParams<ActionUpdateCollection> & { api: ApiPromise }
@@ -308,7 +315,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

composables/transaction/utils.ts

@@ -65,7 +65,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.SET_METADATA]: (action: ActionSetNftMetadata) =>
       hasContent(action.nftSn),
     [NFTs.MINT_DROP]: (action: ActionMintDrop) =>

locales/en.json

@@ -1249,6 +1249,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)",
@@ -1285,6 +1290,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": {