Aye voters drop page at Polkadot and Kusama asset hub

[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

• [ ] Bugfix
• [x] Feature
• [ ] Refactoring

Needs QA check

• @kodadot/qa-guild please review

Context

• [x] Closes #6615
• [ ] Requires deployment <snek/rubick/worker>

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

• [x] My DOT address: Payout

Screenshot 📸

• [ ] My fix has changed UI

Copilot Summary

🤖 Generated by Copilot at fa7ee3c

This pull request adds a new feature to display a vote drop collection on the drops page, which is a special collection that can only be minted by users who have voted yes on a specific referendum. It also refactors the existing unlockable collection components to be more reusable and robust, and enables the use of the Polkassembly API to fetch the voting data.

🤖 Generated by Copilot at fa7ee3c

We're building a vote drop for the NFT crew With UnlockableCollectionInfo and VoteDropContainer too We'll fetch the votes from the Polkassembly API And mint the collection on the count of three

[kodabot]

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

[netlify[bot]]

✅ Deploy Preview for koda-canary ready!

Name	Link
🔨 Latest commit	e13ce5da37c98bc69ca34424d1728fe9a401fb8b
🔍 Latest deploy log	https://app.netlify.com/sites/koda-canary/deploys/64f887474406cb0008c27a0e
😎 Deploy Preview	https://deploy-preview-6664--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.

[Jarsen136]

The mock page is here: /ahk/drops/vote-drop

For now, it's still blocked by the work on the indexer side.

[exezbcz]

good! one detail, text in button: its eligibility

[vikiival]

For now, it's still blocked by the work on the indexer side.

Sir maybe ping?

What needs to be done?

[Jarsen136]

For now, it's still blocked by the work on the indexer side.

Sir maybe ping?

Oh sorry, I just thought you are still developing the indexer for the drop.

What needs to be done?

(edited)

• Id of the free-drop collection. And what network will the collection belong to?
• the API to mint nft @vikiival

[vikiival]

Oh, I just thought you are still developing the indexer for the drop.

Indexer was there for already for a week, no need to develop our own for this.

re page

Even though I am not eligible I am able to mint.

Id of the free-drop collection. And what network will the collection belong to?

FOR TEST STMN 99

FOR PROD I dont have collection yet

the API to mint nft

API

[Jarsen136]

mock page: https://deploy-preview-6664--koda-canary.netlify.app/ahk/drops/vote-drop

[Jarsen136]

Id of the free-drop collection. And what network will the collection belong to?

FOR TEST STMN 99

FOR PROD I dont have collection yet

the API to mint nft

API

@vikiival There is one thing I'm not sure about. For the production version, are we going to make the minting process on the frontend side? If that's the case, the detection of mint permissions would only be done on the front-end. Hackers can directly call the API on-chain to create NFTs without going through the page.

In the previous implementation of our free mint, we used to request the backend server to perform minting and transferring.

[vikiival]

Cc @yangwao maybe do this as holderOf collection? I can predrop some art to all supporters

Or i can do that via backend

[vikiival]

Hackers can directly call the API to create NFTs without going through the page

It still need to be implemented for future drops.

Rest is describe in the comment above

[yangwao]

maybe do this as holderOf collection?

Holder of which collection?

meanwhile, we've passed!

• https://polkadot.polkassembly.io/referenda/93

[vikiival]

Holder of which collection?

As i said above:

I can predrop some art to all supporters

[Jarsen136]

@vikiival There is one thing I'm not sure about. For the production version, are we going to make the minting process on the frontend side? If that's the case, the detection of mint permissions would only be done on the front-end. Hackers can directly call the API on-chain to create NFTs without going through the page.

I do not mean to send drops directly to all supporters. I'm thinking about providing an api for users to mint. When a legitimate user requests the interface, the backend service will determine if they are a supporter and send them an NFT. I hope my thoughts have not caused any misunderstanding.

[vikiival]

I'm thinking about providing an api for users to mint.

When a legitimate user requests the interface, the backend service will determine if they are a supporter and send them an NFT.

Yes thats how it works now with current drops

I hope my thoughts have not caused any misunderstanding.

[vikiival]

@Jarsen136 any blockers from my side on this?

[yangwao]

I can predrop some art to all supporters

but doesn't have nft-pallet whitelist/allowlist?

[Jarsen136]

@Jarsen136 any blockers from my side on this?

There are three steps that need to be done.

1. Prepare the collection for drop for production environment @yangwao
2. Implement the api to mint nft, like we have implemented with current drops. @vikiival
3. Apply the api to the mint button on the page. @Jarsen136

Then we could release this aye voters drop page.

[vikiival]

Implement the api to mint nft, like we have implemented with current drops

It is the same api as for drops

[vikiival]

but doesn't have nft-pallet whitelist/allowlist?

It has only 3 minting options:

• public
• issuer
• holderOF

As mentioned before it will work same as current drops: issuer + internal whitelist

[Jarsen136]

Implement the api to mint nft, like we have implemented with current drops

It is the same api as for drops

Thanks for the clarification. At least we need a new campaign name for the same api I bet.

[vikiival]

Thanks for the clarification. At least we need a new campaign name for the same api I bet.

[prury]

• tested eligibility using different accounts ✔️

• twitter message works ✔️

• mint success message: ✔️

• redirection worked ✔️

• image not loading: ❌

https://deploy-preview-6664--koda-canary.netlify.app/ahk/gallery/99-2

• image not loading aswell: ❌

[vikiival]

image not loading aswell: ❌

this is either my bad or indexer one

[vikiival]

{
  "data": {
    "collectionEntityById": {
      "id": "99",
      "name": "AYE Waifu",
      "image": "ipfs://ipfs/bafybeibe2jccdqti4gsrllbhh6bwbmllaf6q3c7gwpi3jnlpmdwntfcn2a",
      "meta": {
        "id": "bafkreigb6fxq6bt6ysgqknu4rxrsrngv3lif2mek7vnvm65o3fpflxnidq",
        "name": "AYE Waifu",
        "image": "ipfs://ipfs/bafybeibe2jccdqti4gsrllbhh6bwbmllaf6q3c7gwpi3jnlpmdwntfcn2a"
      }
    }
  }
}

image is there so @Jarsen136 it is a bug

[Jarsen136]

• image not loading: ❌

https://deploy-preview-6664--koda-canary.netlify.app/ahk/gallery/99-2

There's the same bug on free-drop. I have created an issue for it https://github.com/kodadot/nft-gallery/issues/7077

[Jarsen136]

image not loading aswell: ❌

this is either my bad or indexer one

{
  "data": {
    "collectionEntityById": {
      "id": "99",
      "name": "AYE Waifu",
      "image": "ipfs://ipfs/bafybeibe2jccdqti4gsrllbhh6bwbmllaf6q3c7gwpi3jnlpmdwntfcn2a",
      "meta": {
        "id": "bafkreigb6fxq6bt6ysgqknu4rxrsrngv3lif2mek7vnvm65o3fpflxnidq",
        "name": "AYE Waifu",
        "image": "ipfs://ipfs/bafybeibe2jccdqti4gsrllbhh6bwbmllaf6q3c7gwpi3jnlpmdwntfcn2a"
      }
    }
  }
}

image is there so @Jarsen136 it is a bug

It might be indexer one 👀 @vikiival

ahp id: 2 https://squid.subsquid.io/speck/v/v2/graphql

[vikiival]

Waiting for @JustLuuuu for Metadata :)

[vikiival]

also @Jarsen136 It should mint same metadata as for collection

[vikiival]

Also it should show Collection image instead of waifus

[vikiival]

@Jarsen136 wen user clicks on claim he/she will get random waifu, which is incorrect -> It should get same metadata string as the collection.metadata

[Jarsen136]

@Jarsen136 wen user clicks on claim he/she will get random waifu, which is incorrect -> It should get same metadata string as the collection.metadata

Thanks. I will modify it later.

[prury]

Check Eligibility button not triggering anything atm when wallet is disconnected

[Jarsen136]

Check Eligibility button not triggering anything atm when wallet is disconnected

Fixed

[Jarsen136]

https://squid.subsquid.io/polkadot-polkassembly/graphql The indexer is down, so it would not work to check the eligibility for now. cc @vikiival

[vikiival]

The indexer is down, so it would not work to check the eligibility for now

Noted will come up with some backup plan for now

[Jarsen136]

There is another issue related to the format of the metadata on collection.

The format of metadata is text instead of json, which is why the image could not load properly before. https://image-beta.w.kodadot.xyz/ipfs/bafkreiduhiiovev346oqlhnmovxzsjwjhh2g5blxoxxnmqsfxttwxgnp6a

I have to write this fallback to make the image load.

 typeof _data === 'string' ? JSON.parse(_data) : _data

IMO it's valuable to find out why it has such a format. wdyt @vikiival

ahp id: 2 https://squid.subsquid.io/speck/v/v2/graphql

[vikiival]

The format of metadata is text instead of json, which is why the image could not load properly before. https://image-beta.w.kodadot.xyz/ipfs/bafkreiduhiiovev346oqlhnmovxzsjwjhh2g5blxoxxnmqsfxttwxgnp6a

cc @preschian 👀

[vikiival]

Api works again

[Jarsen136]

There is another issue related to the format of the metadata on collection.

The format of metadata is text instead of json, which is why the image could not load properly before. https://image-beta.w.kodadot.xyz/ipfs/bafkreiduhiiovev346oqlhnmovxzsjwjhh2g5blxoxxnmqsfxttwxgnp6a

I have to write this fallback to make the image load.

 typeof _data === 'string' ? JSON.parse(_data) : _data

related with https://github.com/kodadot/nft-gallery/pull/7102

[preschian]

The format of metadata is text instead of json, which is why the image could not load properly before. image-beta.w.kodadot.xyz/ipfs/bafkreiduhiiovev346oqlhnmovxzsjwjhh2g5blxoxxnmqsfxttwxgnp6a

cc @preschian 👀

I will trace it here https://github.com/kodadot/workers/issues/145

[preschian]

The format of metadata is text instead of json, which is why the image could not load properly before. image-beta.w.kodadot.xyz/ipfs/bafkreiduhiiovev346oqlhnmovxzsjwjhh2g5blxoxxnmqsfxttwxgnp6a

cc @preschian 👀

I will trace it here kodadot/workers#145

found the root cause here https://github.com/kodadot/workers/pull/146

[vikiival]

So what's the status?

is it possible to test @prury ?

@kodadot/internal-dev pls make a code review

[Jarsen136]

So what's the status?

It's ready for review and testing.

[Jarsen136]

When I change account on /ahp/drops/vote-drop, I see while It should be: (after reload)

✅ Fixed

note: You really love <span>

Any suggestion? Do you mean using more semantic elements like these <h1> <h2> <section>

[prury]

Second check then: Eligibility works ✔️ images loading ✔️ already have button redirecting correctly ✔️ https://deploy-preview-6664--koda-canary.netlify.app/ahp/gallery/2-3 ✔️ https://deploy-preview-6664--koda-canary.netlify.app/ahk/gallery/99-2 ✔️ view collection button works ✔️ twitter message redirecting to free-drop, if that's okay then let's go

[roiLeo]

Any suggestion? Do you mean using more semantic elements like these <h1> <h2> <section>

simple <div> even when it's inline, idk why but <span> looks weird with our prettier setup

[codeclimate[bot]]

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

Here's the issue category breakdown:

Category	Count
Complexity	1

View more on Code Climate.

[Jarsen136]

twitter message redirecting to free-drop, if that's okay then let's go

Thanks. I have fixed it.

[sonarcloud[bot]]

Kudos, SonarCloud Quality Gate passed!   

0 Bugs
0 Vulnerabilities
0 Security Hotspots
2 Code Smells

No Coverage information
1.4% Duplication