From 9226fa6d20eb3aab5314473a67bc5156cc5d373a Mon Sep 17 00:00:00 2001
From: Nicole O'Brien <nicole@bloomwallet.io>
Date: Tue, 20 Feb 2024 15:14:50 +0000
Subject: [PATCH] feat: mint nft collection (#1510)

* initial mint nft collection form

Co-authored-by: MarkNerdi996 <MarkNerdi996@users.noreply.github.com>

* initial mint nft collection confirmation form

* initial mint nft collection function

* initial mint nft for collection

* improve mint nft collection including id substitute

Co-authored-by: Tuditi <Tuditi@users.noreply.github.com>

* fix: mint collection activity

* fix: remove unnecessary on mount call backs

---------

Co-authored-by: MarkNerdi996 <MarkNerdi996@users.noreply.github.com>
Co-authored-by: Tuditi <Tuditi@users.noreply.github.com>
Co-authored-by: Tuditi <45079109+Tuditi@users.noreply.github.com>
---
 .../desktop/components/popup/Popup.svelte     |   4 +
 .../MintNftCollectionConfirmationPopup.svelte | 149 +++++++++++++
 .../popups/MintNftCollectionFormPopup.svelte  | 205 ++++++++++++++++++
 .../popups/MintNftConfirmationPopup.svelte    |  19 +-
 .../popup/popups/MintNftFormPopup.svelte      |  38 ++--
 .../features/developer-tools.features.ts      |   3 +
 .../auxiliary/popup/enums/popup-id.enum.ts    |   2 +
 .../dashboard/developer/Developer.svelte      |   4 +
 .../components/MintNftCollectionButton.svelte |  22 ++
 .../dashboard/developer/components/index.ts   |   1 +
 .../src/lib/core/wallet/actions/index.ts      |   1 +
 .../src/lib/core/wallet/actions/mintNft.ts    |  25 ++-
 .../core/wallet/actions/mintNftCollection.ts  |  35 +++
 .../src/lib/core/wallet/interfaces/index.ts   |   1 +
 .../mint-nft-collection-details.interface.ts  |   3 +
 .../interfaces/mint-nft-details.interface.ts  |   2 +
 .../src/lib/core/wallet/stores/index.ts       |   1 +
 .../mint-nft-collection-details.store.ts      |  12 +
 .../developer-features.interface.ts           |   1 +
 packages/shared/src/locales/en.json           |  12 +-
 20 files changed, 512 insertions(+), 28 deletions(-)
 create mode 100644 packages/desktop/components/popup/popups/MintNftCollectionConfirmationPopup.svelte
 create mode 100644 packages/desktop/components/popup/popups/MintNftCollectionFormPopup.svelte
 create mode 100644 packages/desktop/views/dashboard/developer/components/MintNftCollectionButton.svelte
 create mode 100644 packages/shared/src/lib/core/wallet/actions/mintNftCollection.ts
 create mode 100644 packages/shared/src/lib/core/wallet/interfaces/mint-nft-collection-details.interface.ts
 create mode 100644 packages/shared/src/lib/core/wallet/stores/mint-nft-collection-details.store.ts

diff --git a/packages/desktop/components/popup/Popup.svelte b/packages/desktop/components/popup/Popup.svelte
index ce1f4e0a3e..a2eaece25e 100644
--- a/packages/desktop/components/popup/Popup.svelte
+++ b/packages/desktop/components/popup/Popup.svelte
@@ -42,6 +42,8 @@
     import ManageVotingPowerPopup from './popups/ManageVotingPowerPopup.svelte'
     import MintNativeTokenConfirmationPopup from './popups/MintNativeTokenConfirmationPopup.svelte'
     import MintNativeTokenFormPopup from './popups/MintNativeTokenFormPopup.svelte'
+    import MintNftCollectionConfirmationPopup from './popups/MintNftCollectionConfirmationPopup.svelte'
+    import MintNftCollectionFormPopup from './popups/MintNftCollectionFormPopup.svelte'
     import MintNftConfirmationPopup from './popups/MintNftConfirmationPopup.svelte'
     import MintNftFormPopup from './popups/MintNftFormPopup.svelte'
     import NodeAuthRequiredPopup from './popups/NodeAuthRequiredPopup.svelte'
@@ -122,6 +124,8 @@
         [PopupId.MintNativeTokenForm]: MintNativeTokenFormPopup,
         [PopupId.MintNftConfirmation]: MintNftConfirmationPopup,
         [PopupId.MintNftForm]: MintNftFormPopup,
+        [PopupId.MintNftCollectionForm]: MintNftCollectionFormPopup,
+        [PopupId.MintNftCollectionConfirmation]: MintNftCollectionConfirmationPopup,
         [PopupId.NodeAuthRequired]: NodeAuthRequiredPopup,
         [PopupId.NodeInfo]: NodeInfoPopup,
         [PopupId.ReceiveAddress]: ReceiveAddressPopup,
diff --git a/packages/desktop/components/popup/popups/MintNftCollectionConfirmationPopup.svelte b/packages/desktop/components/popup/popups/MintNftCollectionConfirmationPopup.svelte
new file mode 100644
index 0000000000..85179cca6e
--- /dev/null
+++ b/packages/desktop/components/popup/popups/MintNftCollectionConfirmationPopup.svelte
@@ -0,0 +1,149 @@
+<script lang="ts">
+    import { Table, Avatar, Tabs } from '@bloomwalletio/ui'
+    import { selectedAccount } from '@core/account/stores'
+    import { handleError } from '@core/error/handlers/handleError'
+    import { localize } from '@core/i18n'
+    import { CURRENT_IRC27_VERSION } from '@core/nfts'
+    import { getClient } from '@core/profile-manager'
+    import { checkActiveProfileAuthAsync, getBaseToken } from '@core/profile/actions'
+    import { formatTokenAmountPrecise } from '@core/token'
+    import { buildNftOutputBuilderParams, mintNftCollection, mintNftCollectionDetails } from '@core/wallet'
+    import { PopupId, closePopup, openPopup } from '@desktop/auxiliary/popup'
+    import { MediaIcon, PopupTab, getTabItems } from '@ui'
+    import { onMount } from 'svelte'
+    import PopupTemplate from '../PopupTemplate.svelte'
+
+    const TABS = getTabItems([PopupTab.Transaction, PopupTab.Nft, PopupTab.NftMetadata])
+
+    let selectedTab = TABS[0]
+
+    let storageDeposit: number = 0
+    const { standard, type, uri, name, issuerName, description, attributes } = $mintNftCollectionDetails || {}
+
+    $: irc27Metadata = {
+        standard,
+        version: CURRENT_IRC27_VERSION,
+        name,
+        type,
+        uri,
+        ...(issuerName && { issuerName }),
+        ...(description && { description }),
+        ...(attributes && { attributes }),
+    }
+
+    async function setStorageDeposit(): Promise<void> {
+        try {
+            const outputData = buildNftOutputBuilderParams(irc27Metadata, $selectedAccount.depositAddress)
+            const client = await getClient()
+            const preparedOutput = await client.buildNftOutput(outputData)
+
+            storageDeposit = Number(preparedOutput.amount) ?? 0
+        } catch (err) {
+            handleError(err)
+        }
+    }
+
+    function onBackClick(): void {
+        closePopup()
+        openPopup({
+            id: PopupId.MintNftCollectionForm,
+            overflow: true,
+            confirmClickOutside: true,
+        })
+    }
+
+    async function onConfirmClick(): Promise<void> {
+        try {
+            await checkActiveProfileAuthAsync()
+        } catch (err) {
+            return
+        }
+
+        try {
+            await mintNftCollection(irc27Metadata)
+            closePopup()
+        } catch (err) {
+            handleError(err)
+        }
+    }
+
+    onMount(() => {
+        try {
+            void setStorageDeposit()
+        } catch (err) {
+            handleError(err)
+        }
+    })
+</script>
+
+<PopupTemplate
+    title={localize('popups.mintNftForm.title')}
+    backButton={{
+        text: localize('actions.back'),
+        disabled: $selectedAccount?.isTransferring,
+        onClick: onBackClick,
+    }}
+    continueButton={{
+        text: localize('actions.confirm'),
+        disabled: $selectedAccount?.isTransferring,
+        onClick: onConfirmClick,
+    }}
+    busy={$selectedAccount?.isTransferring}
+>
+    <div class="max-h-100 scrollable-y flex-1">
+        <nft-details class="flex flex-col justify-center items-center space-y-5">
+            <Avatar size="lg" shape="square" surface={2}>
+                <MediaIcon {type} size="base" surface={2} />
+            </Avatar>
+            <activity-details class="w-full h-full space-y-2 flex flex-auto flex-col shrink-0">
+                <Tabs bind:selectedTab tabs={TABS} />
+                {#if selectedTab.key === PopupTab.Transaction}
+                    <Table
+                        items={[
+                            {
+                                key: localize('general.storageDeposit'),
+                                value: formatTokenAmountPrecise(storageDeposit, getBaseToken()),
+                            },
+                            {
+                                key: localize('general.immutableIssuer'),
+                                value: $selectedAccount?.depositAddress,
+                                truncate: true,
+                            },
+                        ]}
+                    />
+                {:else if selectedTab.key === PopupTab.Nft}
+                    <Table
+                        items={[
+                            {
+                                key: localize('general.name'),
+                                value: name,
+                            },
+                            {
+                                key: localize('general.description'),
+                                value: description ? description : undefined,
+                            },
+                            {
+                                key: localize('general.uri'),
+                                value: uri,
+                            },
+                            {
+                                key: localize('general.issuerName'),
+                                value: issuerName ? issuerName : undefined,
+                            },
+                        ]}
+                    />
+                {:else if selectedTab.key === PopupTab.NftMetadata}
+                    <Table
+                        items={[
+                            {
+                                key: localize('general.metadata'),
+                                value: irc27Metadata,
+                                copyable: true,
+                            },
+                        ]}
+                    />
+                {/if}
+            </activity-details>
+        </nft-details>
+    </div>
+</PopupTemplate>
diff --git a/packages/desktop/components/popup/popups/MintNftCollectionFormPopup.svelte b/packages/desktop/components/popup/popups/MintNftCollectionFormPopup.svelte
new file mode 100644
index 0000000000..7a073721ee
--- /dev/null
+++ b/packages/desktop/components/popup/popups/MintNftCollectionFormPopup.svelte
@@ -0,0 +1,205 @@
+<script lang="ts">
+    import { BaseError } from '@core/error/classes'
+    import { localize } from '@core/i18n'
+    import { NftStandard, composeUrlFromNftUri } from '@core/nfts'
+    import { MimeType } from '@core/nfts/enums'
+    import { fetchWithTimeout } from '@core/nfts/utils/fetchWithTimeout'
+    import { HttpHeader } from '@core/utils'
+    import { isValidUri } from '@core/utils/validation'
+    import { IMintNftCollectionDetails } from '@core/wallet'
+    import { mintNftCollectionDetails, setMintNftCollectionDetails } from '@core/wallet/stores'
+    import { PopupId, closePopup, openPopup } from '@desktop/auxiliary/popup'
+    import { OptionalInput } from '@ui'
+    import { Error, TextInput } from '@bloomwalletio/ui'
+    import PopupTemplate from '../PopupTemplate.svelte'
+
+    let { standard, version, type, uri, name, issuerName, description, attributes } = $mintNftCollectionDetails || {}
+
+    interface IOptionalInputs {
+        [key: string]: {
+            inputType: 'text' | 'number'
+            isInteger?: boolean
+            value: string
+            error: string
+            isOpen?: boolean
+        }
+    }
+
+    const optionalInputs: IOptionalInputs = {
+        issuerName: {
+            inputType: 'text',
+            value: issuerName,
+            error: '',
+        },
+        description: {
+            inputType: 'text',
+            value: description,
+            error: '',
+        },
+        attributes: {
+            inputType: 'text',
+            value: attributes ? JSON.stringify(attributes) : undefined,
+            error: '',
+        },
+    }
+
+    let uriError: string, nameError: string
+
+    const error: BaseError = null
+
+    function onCancelClick(): void {
+        closePopup()
+    }
+
+    async function onContinueClick(): Promise<void> {
+        resetErrors()
+        const valid = await validate()
+        if (valid) {
+            setMintNftCollectionDetails(convertInputsToMetadataType())
+            openPopup({
+                id: PopupId.MintNftCollectionConfirmation,
+                overflow: true,
+                confirmClickOutside: true,
+            })
+        }
+    }
+
+    async function validate(): Promise<boolean> {
+        if (name.length === 0) {
+            nameError = localize('popups.mintNftForm.errors.emptyName')
+        }
+
+        if (optionalInputs.quantity?.isOpen) {
+            if (Number(optionalInputs.quantity.value) < 1) {
+                optionalInputs.quantity.error = localize('popups.mintNftForm.errors.quantityTooSmall')
+            }
+            if (Number(optionalInputs.quantity.value) >= 64) {
+                optionalInputs.quantity.error = localize('popups.mintNftForm.errors.quantityTooLarge')
+            }
+        }
+
+        if (uri.length === 0 || !isValidUri(uri)) {
+            uriError = localize('popups.mintNftForm.errors.invalidURI')
+        } else {
+            try {
+                const response = await fetchWithTimeout(composeUrlFromNftUri(uri), 1, { method: 'HEAD' })
+                if (response.status === 200 || response.status === 304) {
+                    type = response.headers.get(HttpHeader.ContentType)
+                } else {
+                    uriError = localize('popups.mintNftForm.errors.notReachable')
+                }
+            } catch (err) {
+                uriError = localize('popups.mintNftForm.errors.notReachable')
+            }
+        }
+
+        if (optionalInputs.attributes.isOpen) {
+            validateAttributes()
+        }
+
+        const optionalInputsErrors = Object.values(optionalInputs).map((optionalInput) => optionalInput.error)
+
+        const hasErrors = Object.values({ ...optionalInputsErrors, nameError, uriError }).some((e) => e !== '')
+
+        return !hasErrors
+    }
+
+    function resetErrors(): void {
+        nameError = ''
+        uriError = ''
+
+        for (const key of Object.keys(optionalInputs)) {
+            optionalInputs[key].error = ''
+        }
+    }
+
+    function validateAttributes(): void {
+        let attributes: unknown
+        try {
+            attributes = JSON.parse(optionalInputs.attributes.value)
+        } catch (err) {
+            optionalInputs.attributes.error = localize('popups.mintNftForm.errors.attributesMustBeJSON')
+            return
+        }
+        if (!Array.isArray(attributes)) {
+            optionalInputs.attributes.error = localize('popups.mintNftForm.errors.attributesMustBeArrayOfObjects')
+            return
+        }
+        const isArrayOfObjects = attributes.every(
+            (attribute) => typeof attribute === 'object' && !Array.isArray(attribute) && attribute !== null
+        )
+        if (!isArrayOfObjects) {
+            optionalInputs.attributes.error = localize('popups.mintNftForm.errors.attributesMustBeArrayOfObjects')
+            return
+        }
+        const isKeysValid = attributes.every(
+            (attribute) =>
+                Object.keys(attribute).every((key) => key === 'trait_type' || key === 'value') &&
+                Object.keys(attribute).filter((key) => key === 'trait_type').length === 1 &&
+                Object.keys(attribute).filter((key) => key === 'value').length === 1
+        )
+        if (!isKeysValid) {
+            optionalInputs.attributes.error = localize('popups.mintNftForm.errors.attributesInvalidKeys')
+            return
+        }
+        const isValuesValid = attributes.every(
+            (attribute) =>
+                (typeof attribute.trait_type === 'string' &&
+                    attribute.trait_type.length > 0 &&
+                    typeof attribute.value === 'string' &&
+                    attribute.value.length > 0) ||
+                typeof attribute.value === 'number'
+        )
+        if (!isValuesValid) {
+            optionalInputs.attributes.error = localize('popups.mintNftForm.errors.attributesInvalidValues')
+            return
+        }
+    }
+
+    function convertInputsToMetadataType(): IMintNftCollectionDetails {
+        return {
+            standard: standard ?? NftStandard.Irc27,
+            version,
+            issuerName: optionalInputs.issuerName?.value,
+            description: optionalInputs.description?.value,
+            uri,
+            name,
+            attributes: optionalInputs.attributes?.value ? JSON.parse(optionalInputs.attributes.value) : undefined,
+            type: type as MimeType,
+        }
+    }
+</script>
+
+<PopupTemplate
+    title={localize('actions.mintNftCollection')}
+    backButton={{
+        text: localize('actions.cancel'),
+        onClick: onCancelClick,
+    }}
+    continueButton={{
+        text: localize('actions.continue'),
+        onClick: onContinueClick,
+    }}
+>
+    <popup-inputs class="block space-y-5 max-h-100 scrollable-y overflow-x-hidden flex-1">
+        <TextInput bind:value={uri} bind:error={uriError} label={localize('general.uri')} />
+        <TextInput bind:value={name} bind:error={nameError} label={localize('general.name')} />
+        <optional-inputs class="flex flex-row flex-wrap gap-4">
+            {#each Object.keys(optionalInputs) as key}
+                <OptionalInput
+                    bind:value={optionalInputs[key].value}
+                    bind:error={optionalInputs[key].error}
+                    bind:isOpen={optionalInputs[key].isOpen}
+                    inputType={optionalInputs[key].inputType}
+                    isInteger={optionalInputs[key]?.isInteger}
+                    label={localize(`general.${key}`)}
+                    description={localize(`tooltips.mintNftForm.${key}`)}
+                    fontSize={14}
+                />
+            {/each}
+        </optional-inputs>
+        {#if error}
+            <Error error={error?.message} />
+        {/if}
+    </popup-inputs>
+</PopupTemplate>
diff --git a/packages/desktop/components/popup/popups/MintNftConfirmationPopup.svelte b/packages/desktop/components/popup/popups/MintNftConfirmationPopup.svelte
index d9249aa596..8ae4113ceb 100644
--- a/packages/desktop/components/popup/popups/MintNftConfirmationPopup.svelte
+++ b/packages/desktop/components/popup/popups/MintNftConfirmationPopup.svelte
@@ -19,8 +19,20 @@
 
     let storageDeposit: number = 0
     let totalStorageDeposit: number = 0
-    const { standard, type, uri, name, collectionName, royalties, issuerName, description, attributes, quantity } =
-        $mintNftDetails || {}
+    const {
+        standard,
+        type,
+        uri,
+        name,
+        collectionName,
+        royalties,
+        issuerName,
+        description,
+        attributes,
+        quantity,
+        collectionId,
+        startIndex,
+    } = $mintNftDetails || {}
 
     $: irc27Metadata = {
         standard,
@@ -53,6 +65,7 @@
         openPopup({
             id: PopupId.MintNftForm,
             overflow: true,
+            confirmClickOutside: true,
         })
     }
 
@@ -64,7 +77,7 @@
         }
 
         try {
-            await mintNft(irc27Metadata, Number(quantity))
+            await mintNft(irc27Metadata, startIndex, quantity, collectionId)
             closePopup()
         } catch (err) {
             handleError(err)
diff --git a/packages/desktop/components/popup/popups/MintNftFormPopup.svelte b/packages/desktop/components/popup/popups/MintNftFormPopup.svelte
index f7e9cad232..618973f5af 100644
--- a/packages/desktop/components/popup/popups/MintNftFormPopup.svelte
+++ b/packages/desktop/components/popup/popups/MintNftFormPopup.svelte
@@ -1,6 +1,5 @@
 <script lang="ts">
     import { BaseError } from '@core/error/classes'
-    import { handleError } from '@core/error/handlers/handleError'
     import { localize } from '@core/i18n'
     import { composeUrlFromNftUri, NftStandard } from '@core/nfts'
     import { MimeType } from '@core/nfts/enums'
@@ -12,13 +11,10 @@
     import { IMintNftDetails } from '@core/wallet'
     import { mintNftDetails, setMintNftDetails } from '@core/wallet/stores'
     import { PopupId, closePopup, openPopup } from '@desktop/auxiliary/popup'
-    import { OptionalInput } from '@ui'
+    import { AliasInput, OptionalInput } from '@ui'
     import { Error, TextInput } from '@bloomwalletio/ui'
-    import { onMount } from 'svelte'
     import PopupTemplate from '../PopupTemplate.svelte'
 
-    export let _onMount: (..._: any[]) => Promise<void> = async () => {}
-
     let {
         standard,
         version,
@@ -26,13 +22,18 @@
         uri,
         quantity,
         name,
+        collectionId,
         collectionName,
         royalties,
         issuerName,
         description,
         attributes,
+        startIndex,
     } = $mintNftDetails || {}
 
+    let collectionIdInput: AliasInput
+    let collectionIdError: string
+
     interface IOptionalInputs {
         [key: string]: {
             inputType: 'text' | 'number'
@@ -75,6 +76,12 @@
             value: quantity ? String(quantity <= 1 ? '' : quantity) : '',
             error: '',
         },
+        startIndex: {
+            inputType: 'number',
+            isInteger: true,
+            value: startIndex ? String(startIndex <= 1 ? '' : startIndex) : '',
+            error: '',
+        },
     }
 
     let uriError: string, nameError: string
@@ -93,6 +100,7 @@
             openPopup({
                 id: PopupId.MintNftConfirmation,
                 overflow: true,
+                confirmClickOutside: true,
             })
         }
     }
@@ -106,16 +114,19 @@
             if (Number(optionalInputs.quantity.value) < 1) {
                 optionalInputs.quantity.error = localize('popups.mintNftForm.errors.quantityTooSmall')
             }
-            if (Number(optionalInputs.quantity.value) >= 64) {
+            if (Number(optionalInputs.quantity.value) > 126) {
                 optionalInputs.quantity.error = localize('popups.mintNftForm.errors.quantityTooLarge')
             }
         }
 
-        if (uri.length === 0 || !isValidUri(uri)) {
+        const dummyUri = uri.replace('{id}', '1')
+        if (uri.length === 0 || !isValidUri(dummyUri)) {
             uriError = localize('popups.mintNftForm.errors.invalidURI')
         } else {
             try {
-                const response = await fetchWithTimeout(composeUrlFromNftUri(uri), 1, { method: 'HEAD' })
+                const response = await fetchWithTimeout(composeUrlFromNftUri(dummyUri), 1, {
+                    method: 'HEAD',
+                })
                 if (response.status === 200 || response.status === 304) {
                     type = response.headers.get(HttpHeader.ContentType) as MimeType
                 } else {
@@ -236,8 +247,10 @@
             version,
             issuerName: optionalInputs.issuerName?.value,
             description: optionalInputs.description?.value,
+            collectionId,
             collectionName: optionalInputs.collectionName?.value,
             quantity: optionalInputs.quantity?.value ? Number(optionalInputs.quantity.value) : 1,
+            startIndex: optionalInputs.startIndex?.value ? Number(optionalInputs.startIndex.value) : 1,
             uri,
             name,
             royalties: optionalInputs.royalties?.value ? JSON.parse(optionalInputs.royalties.value) : undefined,
@@ -245,14 +258,6 @@
             type,
         }
     }
-
-    onMount(async () => {
-        try {
-            await _onMount()
-        } catch (err) {
-            handleError(err)
-        }
-    })
 </script>
 
 <PopupTemplate
@@ -267,6 +272,7 @@
     }}
 >
     <popup-inputs class="block space-y-5 max-h-100 scrollable-y overflow-x-hidden flex-1">
+        <AliasInput bind:this={collectionIdInput} bind:alias={collectionId} bind:error={collectionIdError} />
         <TextInput bind:value={uri} bind:error={uriError} label={localize('general.uri')} />
         <TextInput bind:value={name} bind:error={nameError} label={localize('general.name')} />
         <optional-inputs class="flex flex-row flex-wrap gap-4">
diff --git a/packages/desktop/features/developer-tools.features.ts b/packages/desktop/features/developer-tools.features.ts
index 50f71bea27..c066228d04 100644
--- a/packages/desktop/features/developer-tools.features.ts
+++ b/packages/desktop/features/developer-tools.features.ts
@@ -8,6 +8,9 @@ const developerToolsFeatures: IDeveloperFeatures = {
     mintNft: {
         enabled: true,
     },
+    mintNftCollection: {
+        enabled: true,
+    },
     mintNativeTokens: {
         enabled: true,
     },
diff --git a/packages/desktop/lib/auxiliary/popup/enums/popup-id.enum.ts b/packages/desktop/lib/auxiliary/popup/enums/popup-id.enum.ts
index 4ca6056575..38e48f658a 100644
--- a/packages/desktop/lib/auxiliary/popup/enums/popup-id.enum.ts
+++ b/packages/desktop/lib/auxiliary/popup/enums/popup-id.enum.ts
@@ -28,6 +28,8 @@ export enum PopupId {
     MintNativeTokenForm = 'mintNativeTokenForm',
     MintNftConfirmation = 'mintNftConfirmation',
     MintNftForm = 'mintNftForm',
+    MintNftCollectionForm = 'mintNftCollectionForm',
+    MintNftCollectionConfirmation = 'mintNftCollectionConfirmation',
     NodeAuthRequired = 'nodeAuthRequired',
     NodeInfo = 'nodeInfo',
     ReceiveAddress = 'receiveAddress',
diff --git a/packages/desktop/views/dashboard/developer/Developer.svelte b/packages/desktop/views/dashboard/developer/Developer.svelte
index 30af9695bf..dd885e7568 100644
--- a/packages/desktop/views/dashboard/developer/Developer.svelte
+++ b/packages/desktop/views/dashboard/developer/Developer.svelte
@@ -9,6 +9,7 @@
         FaucetRequestButton,
         MintNativeTokenButton,
         MintNftButton,
+        MintNftCollectionButton,
         TestDeepLinkButton,
     } from './components'
     import { DashboardRoute, dashboardRouter } from '@core/router'
@@ -30,6 +31,9 @@
                     {#if features.developerTools.mintNativeTokens.enabled}
                         <MintNativeTokenButton />
                     {/if}
+                    {#if features.developerTools.mintNftCollection.enabled}
+                        <MintNftCollectionButton />
+                    {/if}
                     {#if features.developerTools.mintNft.enabled}
                         <MintNftButton />
                     {/if}
diff --git a/packages/desktop/views/dashboard/developer/components/MintNftCollectionButton.svelte b/packages/desktop/views/dashboard/developer/components/MintNftCollectionButton.svelte
new file mode 100644
index 0000000000..c44e0cbbba
--- /dev/null
+++ b/packages/desktop/views/dashboard/developer/components/MintNftCollectionButton.svelte
@@ -0,0 +1,22 @@
+<script lang="ts">
+    import { IconName } from '@bloomwalletio/ui'
+    import { ButtonTile } from '../../../components'
+    import { localize } from '@core/i18n'
+    import { openPopup, PopupId } from '@desktop/auxiliary/popup'
+    import { resetMintNftCollectionDetails } from '@core/wallet'
+
+    function onMintNftCollectionClick(): void {
+        resetMintNftCollectionDetails()
+        openPopup({
+            id: PopupId.MintNftCollectionForm,
+            confirmClickOutside: true,
+        })
+    }
+</script>
+
+<ButtonTile
+    primaryText={localize('actions.mintNftCollection')}
+    secondaryText={localize('general.mintNftCollectionDescription')}
+    onClick={onMintNftCollectionClick}
+    icon={IconName.Image}
+/>
diff --git a/packages/desktop/views/dashboard/developer/components/index.ts b/packages/desktop/views/dashboard/developer/components/index.ts
index 70d196eb86..1cd1180fcb 100644
--- a/packages/desktop/views/dashboard/developer/components/index.ts
+++ b/packages/desktop/views/dashboard/developer/components/index.ts
@@ -2,4 +2,5 @@ export { default as CreateAliasButton } from './CreateAliasButton.svelte'
 export { default as FaucetRequestButton } from './FaucetRequestButton.svelte'
 export { default as MintNativeTokenButton } from './MintNativeTokenButton.svelte'
 export { default as MintNftButton } from './MintNftButton.svelte'
+export { default as MintNftCollectionButton } from './MintNftCollectionButton.svelte'
 export { default as TestDeepLinkButton } from './TestDeepLinkButton.svelte'
diff --git a/packages/shared/src/lib/core/wallet/actions/index.ts b/packages/shared/src/lib/core/wallet/actions/index.ts
index ec51b33b01..b276c4d6ee 100644
--- a/packages/shared/src/lib/core/wallet/actions/index.ts
+++ b/packages/shared/src/lib/core/wallet/actions/index.ts
@@ -8,6 +8,7 @@ export * from './isTrackedNftAddress'
 export * from './isTrackedTokenAddress'
 export * from './mintNativeToken'
 export * from './mintNft'
+export * from './mintNftCollection'
 export * from './rejectActivity'
 export * from './sendOutput'
 export * from './updateL2BalanceWithoutActivity'
diff --git a/packages/shared/src/lib/core/wallet/actions/mintNft.ts b/packages/shared/src/lib/core/wallet/actions/mintNft.ts
index 598fa77661..df37f4f117 100644
--- a/packages/shared/src/lib/core/wallet/actions/mintNft.ts
+++ b/packages/shared/src/lib/core/wallet/actions/mintNft.ts
@@ -15,18 +15,33 @@ import { getTransactionOptions } from '../utils'
 import { resetMintNftDetails } from '../stores'
 import { getActiveNetworkId } from '@core/network'
 
-export async function mintNft(metadata: IIrc27Metadata, quantity: number): Promise<void> {
+export async function mintNft(
+    metadata: IIrc27Metadata,
+    startIndex: number,
+    quantity: number,
+    collectionId?: string
+): Promise<void> {
     try {
         const account = getSelectedAccount()
         const networkId = getActiveNetworkId()
 
         updateSelectedAccount({ isTransferring: true })
 
-        const mintNftParams: MintNftParams = {
-            issuer: account.depositAddress,
-            immutableMetadata: Converter.utf8ToHex(JSON.stringify(metadata)),
+        const allNftParams: MintNftParams[] = []
+        for (let i = startIndex; i < startIndex + quantity; i++) {
+            const updatedMetadata = {
+                ...metadata,
+                name: metadata.name.replace('{id}', i.toString()),
+                description: metadata.description?.replace('{id}', i.toString()),
+                uri: metadata.uri.replace('{id}', i.toString()),
+            }
+            const mintNftParams: MintNftParams = {
+                address: account.depositAddress,
+                issuer: collectionId || account.depositAddress,
+                immutableMetadata: Converter.utf8ToHex(JSON.stringify(updatedMetadata)),
+            }
+            allNftParams.push(mintNftParams)
         }
-        const allNftParams: MintNftParams[] = Array(quantity).fill(mintNftParams)
 
         // Mint NFT
         const preparedTransaction = await account.prepareMintNfts(
diff --git a/packages/shared/src/lib/core/wallet/actions/mintNftCollection.ts b/packages/shared/src/lib/core/wallet/actions/mintNftCollection.ts
new file mode 100644
index 0000000000..088262ef45
--- /dev/null
+++ b/packages/shared/src/lib/core/wallet/actions/mintNftCollection.ts
@@ -0,0 +1,35 @@
+import { showNotification } from '@auxiliary/notification'
+import { getSelectedAccount, updateSelectedAccount } from '@core/account/stores'
+import { sendPreparedTransaction } from '@core/wallet/utils'
+import { localize } from '@core/i18n'
+import { IIrc27Metadata } from '@core/nfts'
+import { Converter } from '@core/utils'
+import { AliasOutputParams } from '@iota/sdk/out/types'
+import { getActiveNetworkId } from '@core/network/actions'
+import { processAndAddToActivities } from '@core/activity'
+
+export async function mintNftCollection(metadata: IIrc27Metadata): Promise<void> {
+    try {
+        const account = getSelectedAccount()
+        const networkId = getActiveNetworkId()
+        updateSelectedAccount({ isTransferring: true })
+
+        const mintNftCollectionParams: AliasOutputParams = {
+            // issuer: account.depositAddress, // TODO: uncomment when added to iota-sdk
+            immutableMetadata: Converter.utf8ToHex(JSON.stringify(metadata)),
+        }
+
+        // Mint NFT
+        const preparedTransaction = await account.prepareCreateAliasOutput(mintNftCollectionParams)
+        const transaction = await sendPreparedTransaction(preparedTransaction)
+        showNotification({
+            variant: 'success',
+            text: localize('notifications.mintNft.success'),
+        })
+        await processAndAddToActivities(transaction, account, networkId)
+    } catch (err) {
+        return Promise.reject(err)
+    } finally {
+        updateSelectedAccount({ isTransferring: false })
+    }
+}
diff --git a/packages/shared/src/lib/core/wallet/interfaces/index.ts b/packages/shared/src/lib/core/wallet/interfaces/index.ts
index 8569b56f37..516e9f5e3c 100644
--- a/packages/shared/src/lib/core/wallet/interfaces/index.ts
+++ b/packages/shared/src/lib/core/wallet/interfaces/index.ts
@@ -2,6 +2,7 @@ export * from './account-subject.interface'
 export * from './address-subject.interface'
 export * from './contact-subject.interface'
 export * from './mint-nft-details.interface'
+export * from './mint-nft-collection-details.interface'
 export * from './mint-token-details.interface'
 export * from './network-subject.interface'
 export * from './participation.interface'
diff --git a/packages/shared/src/lib/core/wallet/interfaces/mint-nft-collection-details.interface.ts b/packages/shared/src/lib/core/wallet/interfaces/mint-nft-collection-details.interface.ts
new file mode 100644
index 0000000000..a6fce4641a
--- /dev/null
+++ b/packages/shared/src/lib/core/wallet/interfaces/mint-nft-collection-details.interface.ts
@@ -0,0 +1,3 @@
+import { IIrc27Metadata } from '@core/nfts'
+
+export interface IMintNftCollectionDetails extends Omit<IIrc27Metadata, 'royalties' | 'collectionName'> {}
diff --git a/packages/shared/src/lib/core/wallet/interfaces/mint-nft-details.interface.ts b/packages/shared/src/lib/core/wallet/interfaces/mint-nft-details.interface.ts
index b05ec8a577..8d66b288e2 100644
--- a/packages/shared/src/lib/core/wallet/interfaces/mint-nft-details.interface.ts
+++ b/packages/shared/src/lib/core/wallet/interfaces/mint-nft-details.interface.ts
@@ -1,5 +1,7 @@
 import { IIrc27Metadata } from '@core/nfts'
 
 export interface IMintNftDetails extends IIrc27Metadata {
+    collectionId?: string
     quantity: number
+    startIndex: number
 }
diff --git a/packages/shared/src/lib/core/wallet/stores/index.ts b/packages/shared/src/lib/core/wallet/stores/index.ts
index 1d872c4aba..eb3dfd58c0 100644
--- a/packages/shared/src/lib/core/wallet/stores/index.ts
+++ b/packages/shared/src/lib/core/wallet/stores/index.ts
@@ -1,3 +1,4 @@
+export * from './mint-nft-collection-details.store'
 export * from './mint-nft-details.store'
 export * from './mint-token-details.store'
 export * from './send-flow-parameter.store'
diff --git a/packages/shared/src/lib/core/wallet/stores/mint-nft-collection-details.store.ts b/packages/shared/src/lib/core/wallet/stores/mint-nft-collection-details.store.ts
new file mode 100644
index 0000000000..6432c52b54
--- /dev/null
+++ b/packages/shared/src/lib/core/wallet/stores/mint-nft-collection-details.store.ts
@@ -0,0 +1,12 @@
+import { writable } from 'svelte/store'
+import { IMintNftCollectionDetails } from '../interfaces'
+
+export const mintNftCollectionDetails = writable<IMintNftCollectionDetails | undefined>(undefined)
+
+export function setMintNftCollectionDetails(payload: IMintNftCollectionDetails): void {
+    mintNftCollectionDetails.set(payload)
+}
+
+export function resetMintNftCollectionDetails(): void {
+    mintNftCollectionDetails.set(undefined)
+}
diff --git a/packages/shared/src/lib/features/interfaces/developer-features.interface.ts b/packages/shared/src/lib/features/interfaces/developer-features.interface.ts
index a7953609f0..e370f4aac2 100644
--- a/packages/shared/src/lib/features/interfaces/developer-features.interface.ts
+++ b/packages/shared/src/lib/features/interfaces/developer-features.interface.ts
@@ -3,6 +3,7 @@ import { IFeatureFlag } from './feature-flag.interface'
 export interface IDeveloperFeatures extends IFeatureFlag {
     faucet: IFeatureFlag
     mintNft: IFeatureFlag
+    mintNftCollection: IFeatureFlag
     mintNativeTokens: IFeatureFlag
     alias: IFeatureFlag
     refreshTokens: IFeatureFlag
diff --git a/packages/shared/src/locales/en.json b/packages/shared/src/locales/en.json
index 8807564d32..f561d50236 100644
--- a/packages/shared/src/locales/en.json
+++ b/packages/shared/src/locales/en.json
@@ -1159,7 +1159,7 @@
             "errors": {
                 "invalidMimetype": "Invalid MimeType, check if the file type is supported",
                 "quantityTooSmall": "Quantity needs to be greater than 0",
-                "quantityTooLarge": "Quantity needs to be smaller than 64",
+                "quantityTooLarge": "Quantity needs to be smaller than 127",
                 "emptyName": "Name is a required field",
                 "invalidURI": "Invalid URI, please provide a valid URI",
                 "notReachable": "URI not reachable, unable to check NFT type",
@@ -1366,7 +1366,8 @@
         "switchAccount": "Switch account",
         "syncAccounts": "Sync accounts",
         "importToken": "Import {type} token",
-        "syncTokens": "Force sync tokens"
+        "syncTokens": "Force sync tokens",
+        "mintNftCollection": "Mint NFT collection"
     },
     "general": {
         "recipient": "Recipient",
@@ -1587,7 +1588,9 @@
         "raffle": "Raffle",
         "governance": "Governance",
         "baseCoin": "Base Coin",
-        "unverifiedContract": "Unverified Contract"
+        "unverifiedContract": "Unverified Contract",
+        "startIndex": "Start index",
+        "mintNftCollectionDescription": "Mint collection NFT in Alias Output"
     },
     "filters":{
         "title": "Filters",
@@ -2071,7 +2074,8 @@
             "description": "Optional parameter: A description of the NFT",
             "attributes": "Optional parameter: An array of traits and values that define attributes of the NFT",
             "uri": "To create a URI using custom media, first upload your file to IPFS via a storage service (e.g. https://nft.storage/)",
-            "quantity": "Optional parameter: The quantity of copies minted with this metadata."
+            "quantity": "Optional parameter: The quantity of copies minted with this metadata.",
+            "startIndex": "Optional parameter: The start index of the NFTs to mint."
         },
         "governance": {
             "removeProposalWarning": "You must stop voting for this proposal before removing it.",