The Generative drop v0

[Jarsen136]

Thank you for your contribution to the KodaDot - One Stop Shop for Polkadot NFTs.

👇 __ Let's make a quick check before the contribution.

PR Type

• Feature

Needs QA check

• @kodadot/qa-guild please review

Context

• Closes The Generative drop v0 #7580
• Requires deployment <snek/rubick/worker>

Did your issue had any of the "$" label on it?

• My DOT address: Payout

Screenshot 📸

• My fix has changed UI

Copilot Summary

🤖 Generated by Copilot at 7e44249

This pull request adds support for generative NFTs with unlockable content of different MIME types. It introduces a new component Generative.vue and several subcomponents to render the generative drop UI. It also updates the dropCollectionById query, the useDrops hook, and the pages/[prefix]/drops/[id].vue file to handle the new drop type. It adds a new function generativeTokenMintArgs and modifies the createUnlockableMetadata function to create the mint transaction arguments and metadata hash. It also adds some translation keys to the locales/en.json file.

🤖 Generated by Copilot at 7e44249

Oh we are the coders of the NFT sea
We make the drops generative and unlockable
We use the hooks and the components with useGraphql
And we mint the tokens with generativeTokenMintArgs

[netlify]

✅ Deploy Preview for koda-canary ready!

Name	Link
🔨 Latest commit	ce8c16d
🔍 Latest deploy log	https://app.netlify.com/sites/koda-canary/deploys/653a62eb5888c6000863bd2b
😎 Deploy Preview	https://deploy-preview-7745--koda-canary.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[kodabot]

SUCCESS @Jarsen136 PR for issue #7580 which is assigned to you. Please wait for review and don't hesitate to grab another issue in the meantime!

[reviewpad]

AI-Generated Summary: This pull request introduces two new Vue components: Generative.vue and GenerativePreview.vue in the collection/drop directory. The code also adds new functionality for generating NFTs, including mint arguments and metadata creation. A new drop type, "generative", has been included to handle different pricing models depending on the drop type. This update also provides UI enhancements such as time left for the 'mint' action and the ability for users to preview examples of possible drop variations.

In terms of localization, English translations for "run" and "variations" have been added.

Various GraphQL queries have been updated, and new computed properties have been added to support the new functionality. In particular, dropCollectionById now includes description metadata for the collection. The drop price is conditional based on the drop type.

Overall, this PR adds the necessary features for users to mint generative NFTs on the platform.

[Jarsen136]

when meta > 0 you need to call api.tx.nfts.mint(collectionId, collection.count, accountId)

I got stuck at the final step of minting NFT. When I try to send the tx, it fails and tells me I have no permission to operate this collection. Would you mind helping me with this PR and pointing out what's wrong with it? @vikiival

[vikiival]

pointing out what's wrong with it? @vikiival

Please follow

#7580 (comment)

[Jarsen136]

when meta > 0 you need to call api.tx.nfts.mint(collectionId, collection.count, accountId)

pointing out what's wrong with it? @vikiival

Please follow

#7580 (comment)

What should we do if the meta is equal to zero?
Same as other drops: Call an API

I did follow the guide. The meta of the generative drop is 1000000000, so I call api.tx.nfts.mint and then the transaction failed because of no permission. Let me know if I miss something in this PR.

[vikiival]

I did follow the guide. The meta of the generative drop is 1000000000

Meta should be null in this case i fixed the DB

[Jarsen136]

I did follow the guide. The meta of the generative drop is 1000000000

Meta should be null in this case i fixed the DB

I have updated them accordingly.
Which API should I call? I have tried with api /do/genchains and it responded successfully but there is no nft created then.

[vikiival]

successfully but there is no nft created then.

Because it failed https://assethub-kusama.subscan.io/extrinsic/0xf4f157a609689979848dcd87c68dade6a996e96953ebd3433296353f5b92fffd

[Jarsen136]

successfully but there is no nft created then.

Because it failed https://assethub-kusama.subscan.io/extrinsic/0xf4f157a609689979848dcd87c68dade6a996e96953ebd3433296353f5b92fffd

As this transaction was emitted from the server side, what should we do to deal with this failure?
The only difference I noticed is that mint_to points to another address instead of the collection's owner.

[vikiival]

It should point to your address, honestly i do not know why it failed

[Jarsen136]

It should point to your address, honestly i do not know why it failed

---

Only the collection's owner has permission to mint nft and send it to other address. I bet that's why the transaction failed. WDYT? @vikiival

---

For the previous successful transaction, it was emitted by the collection's owner.

emitted by: Gn84LKb5HSxc3SACayxCzKQcWESRMcT1VUCqeZURfGj6ASi
collection id: 165
collection's owner: Gn84LKb5HSxc3SACayxCzKQcWESRMcT1VUCqeZURfGj6ASi

However, for the failed one, it was emitted by the Gn84xxx6ASi instead of collection's owner (vikiival)
emitted by: Gn84LKb5HSxc3SACayxCzKQcWESRMcT1VUCqeZURfGj6ASi
collection id: 176
collection's owner: vikiival

[vikiival]

Only the collection's owner has permission to mint nft and send it to other address. I bet that's why the transaction failed.

Yup I had really weird settings on this collection (according to blockchain - KodaBot was the owner, but vikiival had all the rights to mint.

TL;DR I was able to mint but

This timer is too low. I waited around a mintute to be redirected. So please show a correct time.

2. When I was playing with settings I broke the squid. The fix should be propagated in 10 min or less

• 🔖 Stick v6.0.1 stick#130

[Jarsen136]

Yup I had really weird settings on this collection (according to blockchain - KodaBot was the owner, but vikiival had all the rights to mint.

TL;DR I was able to mint but

Interesting : ) Now It works for me as well.

This timer is too low. I waited around a mintute to be redirected. So please show a correct time.

Updated

[Jarsen136]

1. you are missing trailing slash

2. NFT view is broken

3. In GenerativePreview.vue L:45 should be

✅ All of them have been fixed. Thank you for pointing them out with the code. @vikiival

[prury]

Some questions:
Mint button is supposed to work only after clicking on Run? is this normal behavior?
Variations sometimes take a long time to load here for me(5s), maybe a small loading icon could tell the user that the variation is loading?

creation goes nicely: https://deploy-preview-7745--koda-canary.netlify.app/ahk/gallery/176-4

recent NFTs mint still needs implementation:

[Jarsen136]

Some questions: Mint button is supposed to work only after clicking on Run? is this normal behavior?

Yes, the user should click the button and choose their favourite image.

Variations sometimes take a long time to load here for me(5s), maybe a small loading icon could tell the user that the variation is loading?

Updated. I have added the loading icon for it.

creation goes nicely: https://deploy-preview-7745--koda-canary.netlify.app/ahk/gallery/176-4

recent NFTs mint still needs implementation:

Done

[vikiival]

Yes, the user should click the button and choose their favourite image.

I would default it with ss58 of current chain ()

[Jarsen136]

Yes, the user should click the button and choose their favourite image.

I would default it with ss58 of current chain ()

✅ Updated. I set a default value for it so the user does not have to click the run button.

[prury]

Done

they all have the same cover image even if NFTs are different

[prury]

one last thing, if i understood correctly, the image I'm seeing on the right side is what i get when i click mint, so, instead of example of drop we could change it to something else, maybe "Select your Variation" and change the Variation button to Generate. @exezbcz wdyt?

[Jarsen136]

Done

they all have the same cover image even if NFTs are different

It's intended because we set the same preview image for every image.
ref #7580 (comment)

[vikiival]

@prury / @Jarsen136 Is there any blocker for this PR?

[vikiival]

Also can someone from @kodadot/internal-dev review?

[Jarsen136]

@Jarsen136 Is there any blocker for this PR?

No. It's ready to review and merged.

[roiLeo]

otherwise lgtm

[prury]

@prury / @Jarsen136 Is there any blocker for this PR?

was just waiting about Exez opinion on this #7745 (comment), but will open a followup instead

[exezbcz]

@prury I would remove the tag and create followup for more UI changes

[prury]

@prury I would remove the tag and create followup for more UI changes

@Jarsen136 please remove:

and we are good to go

[codeclimate]

Code Climate has analyzed commit ce8c16d and detected 1 issue on this pull request.

Here's the issue category breakdown:

Category	Count
Complexity	1

View more on Code Climate.

[yangwao]

I think there will be few refactor/iterations to improve codebase, now we can at least test it

Thanks!
pay 50 usd

[yangwao]

😍 Perfect, I’ve sent the payout
💵 $50 @ 4.34 USD/DOT ~ 11.521 $DOT
🧗 16SjUbGKSdjCdWTy3NNT3JxbRVGGqD4mwkHpc6BD9U2Rp29Z
🔗 0x25170e0a1c3d08cde8726caad0cfdc533453b10fe1367626b7ecef058ec0a55e

🪅 Let’s grab another issue and get rewarded!
🪄 github.com/kodadot/nft-gallery/issues

[sonarqubecloud]

SonarCloud Quality Gate failed.   

0 Bugs
0 Vulnerabilities
0 Security Hotspots
0 Code Smells

No Coverage information
4.8% Duplication

Catch issues before they fail your Quality Gate with our IDE extension SonarLint