Mass Mint

[EthVlad]

Final Mass Mint 1.0 designs

Tasks

• [x] Onboarding #5176
• [x] Select Collection #5177
• [x] Upload Pictures #5178
• [x] Upload Description file #5179
• [x] Overview Table #5180
• [x] Edit Panel #5181
• [x] Dialogs #5182
• [x] #5863

followups:

• [x] #5328
• [x] #5662

I will provide some key description here how the feature should work.

Figma contains:

• Detailed interactions and logic is available Figma.
• all the needed screens
• interactive prototype

Please take the prototype with a grain of salt, not everything is perfect and 1:1 to final design how it should look, so in case you dont know something, dont hesitate to ask me and I will try to respond ASAP. There are some predefined flows so not everything is 100% interactive. I will provide a short video where I will cover all the logic in the prototype so you dont have to explore it all by yourself. However feel free to explore as you wish and need as well :)

Main functionality

Onboarding

• onboarding is displayed only once when 
entering Mass Mint for the first time, when entering for the 2nd time, no onboarding displayed 
, user is taken straight to mass mint
• user can scroll between slides by pressing Next button or Arrows
• user has option to go back to onboarding from mass mint feature
• button “done” is displayed on the last slide
• “skip” button is displayed on every slide except the last one

Mass Mint

---

STEP 1: SELECT COLLECTION

• user has to select a collection where he wants to mass mint NFTs
• dropdown shows all collections which user has
• last item in the list is "+ Create New Collection" which takes user to already existing and implemented Create Collection flow
  • its always displayed at the bottom
• user also cannot interact with any other mass mint element, untill he selects a collection first

---

STEP 2: UPLOAD PICTURES

• supported files: .zip
• Supported art formats: BMP, GIF, JPEG, PNG, SVG, TIFF, WEBP, MP4, OGV, QUICKTIME, WEBM, GLB, FLAC, MP3, JSON
• user can upload a .zip file containing the art
• user can either:
  • tap and choose a files (tapping opens default OS finder)
  • drag and drop the file into the field
• uploading has an animation
• once uploaded, user can still make a change by pressing "Choose File" button which opens the finder again and then choose another .zip file

---

STEP 3: UPLOAD DESCRIPTION FILE (optional step)**

• Supported files: .TXT, .CSV OR .JSON
• same logic as for Upload Pictures
• in case user plans to mint many NFTs, he can create a description file containing information for each NFT
  • in our case it would contain:
  • FILE NAME (e.g. awesome_art_1.jpeg)
  • NAME (e.g. Soldier#1)
  • DESCRIPTION (e.g. This is the rarest soldier of the collection)
  • PRICE (e.g. 200 KSM)
  • file needs to have correct structure to be able to connect the information to uploaded art files @yangwao we can discuss the structure and technical implementation of this to provide more information

---

STEP 4: OVERVIEW TABLE

Mint Button:

• by opening this table Mint button becomes tappable
  • mint button shows how many NFTs will be minted

Table:

• table shows uploaded art files
• each file is displayed as a separate row
• row with columns description is fixed and does not move
• user can scroll in the frame with NFTs starting with#1
• would be nice if the height of the table is resizable (nice to have)

List Item in Table:

• Name

  • taken from the name of the uploaded files
  • in case user uploads description file, name and other information is taken from that file
  • if missing, “*Name Required” is displayed
  • whole name textfield can also be tapped to open edit panel

• Description

  • taken from description file
  • if empty, display “Description missing”
  • whole description textfield can also be tapped to open edit panel

• Price

  • taken from description file
  • if empty, display “*Price Required”
  • whole price textfield can also be tapped to open edit panel

• States

  • OK - this is desired state so that the file can be minted
  • Name, Price and Description are filled
  • Incomplete
  • file is missing required information:
    • Name
    • Price
    • or Both
  • If some files in the table have this state, user cannot mint unless he resolves them. If he tries to mint “Incomplete mint - popup” is displayed
  • Description
  • file which is missing only description
  • this state does not restrict a user from minting

• Operation

  • Edit
  • users can edit each file by clicking edit button this opens a side edit panel where all changes to the image can be done
  • Delete
  • users can also delete an item from the table
  • confirmation popup is displayed after delete button is tapped

---

STEP 5: MINT

• user needs to sign all the necessary transactions
• when minting is finished user is redirected to the collection to which he minted the NFTs

---

OTHER

Edit panel

• edit panel slides in from the right, check prototype
• when missing required information (Name, price) textfields are red and placeholder says “*Required”
• description is limited at 500 characters
• save button can be tapped when changes were made and no *Required information is missing
• user can always go back by tapping close button without any changes

---

Dialogs

There are 4 main dialogs:

• Missing Required Information
  • this dialog is shown when there are some files with Incomplete state
  • user cannot mint unless he resolves the incomplete files
  • can be resolved by:
  • filling in required information
  • deleting incomplete files
• Final Mass Mint Overview - missing description
  • when Description missing, it does not restrict user from minting
  • he is however informed that some files are missing description
  • shows how many NFTs will be minted
• Final Mass Mint Overview - Everything OK
  • shows how many NFTs will be minted
• Delete file
  • displayed when user taps delete file button
  • if name is missing, display file number from the table

Ref

• 614

[yangwao]

I've just reviewed mass mint designs and I think most of things are done and ready to implement. It's bit longer task I guess, yet impactful component for KodaDot to start onboarding lot of content faster.

Who would like to take it from @kodadot/internal-dev ?

[roiLeo]

IMO #4942 should be done before this one

edit: nvm wrong related issue we need transactionMint #5034

[yangwao]

Can someone look on this? 😭🥹

The current minting experience is pretty bad and till we fix it back it will take while

• https://github.com/kodadot/nft-gallery/issues/4752

  @kodadot/internal-dev 🙄🙏

[daiagi]

Tasks

• moved to the top of issue

@kodadot/internal-dev @prachi00 Feel free to grab some

edit: anyone?

[yangwao]

As Mass Mint is being done, I'm excited to make it available on Statemine and Statemint.

There is effort making it mint

• https://github.com/kodadot/nft-gallery/issues/5863

Tasks - make it work for

• [x] Statemine
• [x] Statemint

[yangwao]

cc @sacha-l

[yangwao]

🥳 Closing!

@sacha-l you can give it a shot here, and feel free open a bug issue if you spot something! 😉 https://canary.kodadot.xyz/stmn/massmint

We will make it available for the public, and we will do the silent release 👀