Init unlockable items page

[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

Context

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

Had issue bounty label?

• [x] My DOT address: Payout

Copilot Summary

🤖 Generated by Copilot at cdbb2fb

This pull request adds a new feature to display unlockable collections on the NFT gallery. It introduces several new components, such as CollectionBanner.vue, CollectionInfo.vue, CountdownTimer.vue, and HeroButtons.vue, that show various aspects of a collection, such as its banner image, description, mint phase, and social media links. It also adds a new layout unlockable-mint-layout.vue and a new page unlockable-collection.vue that use these components and set the SEO meta tags and canonical link for the page. The changes use GraphQL, Nuxt2Meta, KeenSlider, Brick, and other libraries to implement the functionality and design of the feature.

🤖 Generated by Copilot at cdbb2fb

unlockable page new components and layout spring of minting joy

[netlify[bot]]

✅ Deploy Preview for koda-canary ready!

Name	Link
🔨 Latest commit	1c57f57863855b599c935162e4d97cc7909c4cf9
🔍 Latest deploy log	https://app.netlify.com/sites/koda-canary/deploys/647df421a0ade500087b60cf
😎 Deploy Preview	https://deploy-preview-6137--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 settings.

[kodabot]

WARNING @Jarsen136 PR for issue #6117 which isn't assigned to you. Please be warned that this PR may get rejected if there's another assignee for issue #6117

[vikiival]

for testing image please use this one

[
    "https://replicate.delivery/pbxt/xZ6WzuO5VNqFJNhgMwR4mpE3COFh8GRpkSio3NvQdLdmDOQE/out-0.png",
    "https://replicate.delivery/pbxt/Cxfhi4qeTNvn6kcrrKlvL1YUPBKeAmbNrrf2ATtPVd6o5gDEB/out-1.png",
    "https://replicate.delivery/pbxt/JRefeymjem3mpQY4fHABatiApzEoJhSxzFXvf5zD00dnmDOQE/out-2.png",
    "https://replicate.delivery/pbxt/oxnUi6H6sqa3G94GLgmN9gnFrmce5agGMlOqV6vfd5xbO4ARA/out-3.png"
  ]

[vikiival]

window for 10 waifus from each phase

So apparently there should be 10 waifus

[
    "https://replicate.delivery/pbxt/PyQofrsc39W0LCzBel4ofvwStvZinbywkMoH1aNZ9wwer5EEB/out-0.png",
"https://replicate.delivery/pbxt/PtCm0mP3PBY5BdYKo1kqwmMmlgZl4V9uZzeGC5K624z7MngIA/out-0.png",
"https://replicate.delivery/pbxt/7900WedrZPyzFK5VI8Sb4K0NZ1JEt6TMRf2XpT1EBSmOaOBRA/out-0.png",
    "https://replicate.delivery/pbxt/xZ6WzuO5VNqFJNhgMwR4mpE3COFh8GRpkSio3NvQdLdmDOQE/out-0.png",
    "https://replicate.delivery/pbxt/Cxfhi4qeTNvn6kcrrKlvL1YUPBKeAmbNrrf2ATtPVd6o5gDEB/out-1.png",
    "https://replicate.delivery/pbxt/JRefeymjem3mpQY4fHABatiApzEoJhSxzFXvf5zD00dnmDOQE/out-2.png",
    "https://replicate.delivery/pbxt/oxnUi6H6sqa3G94GLgmN9gnFrmce5agGMlOqV6vfd5xbO4ARA/out-3.png",
"https://replicate.delivery/pbxt/T11jVf2EUExMdCqnjx5xH72WWWPedvZM82RrEbaADq8CaOBRA/out-0.png",
    "https://replicate.delivery/pbxt/pamnM0QmQTbaDZasPiOievPg0ekfW2X2B23WbsuqgeveobHIC/out-0.png",
    "https://replicate.delivery/pbxt/9sfHL1QbXjUGZqvJZBfyS90ZVR1souUUL03QsVWTYxPId7ARA/out-1.png",
    "https://replicate.delivery/pbxt/m2MagsaOVSYuMxbgv32b3bDaTtD0ZCVaA17eRO42KklkudgIA/out-2.png"
  ]

[yangwao]

Amazing, we can flex mobile in following issue.

@vikiival can prepare some testing minting for data and Luu can give feedback and go through, we have still two days before running for UTXO and testing it there :)

[vikiival]

@Jarsen136 so url to obtain waifu images is

https://waifu-me.kodadot.workers.dev/latest

[Jarsen136]

@Jarsen136 so url to obtain waifu images is

https://waifu-me.kodadot.workers.dev/latest

OK

Then I wonder where can I fetch the details data for this part. Or the data on this page is all static?

[vikiival]

for testing you can use this collection https://canary.kodadot.xyz/stmn/collection/6?collectionId=6

total is collection.nftCount / (colllection.max || Infinity)

Other is just plain typescript (checking the current time)

Regarding to available for mint (I would check the query) (actually would subscribe that)

query mintedBetween($from: DateTime, $to: DateTime) {
  minted: nftEntitiesConnection(orderBy: createdAt_DESC, where: {createdAt_gte: $from, createdAt_lte: $to}) {
    count: totalCount
  }
}

const MAX_PER_WINDOW = 10
const available = MAX_PER_WINDOW - minted.count

[vikiival]

cc @Jarsen136

[vikiival]

So I have also minting API

POST https://waifu-me.kodadot.workers.dev/

{
    "image": "https://replicate.delivery/pbxt/9J9QidY2qn7fUSGG1MhM3gM1q6q22uxuTuYD2YUcTfyU9dnQA/out-0.png",
    "metadata": "ipfs://ipfs/bafkreibp2b6dgpj5ff4jp4lxcn2htt5b5ejhttweuu6olazkex6vbftapa",
    "address": "DJW45XKKomj9HPKzLuZKqaneKhb53QGQCLCkEx9PaZk6d4k"
}

So data to fill from frontend

import { createMetadata, unSanitizeIpfsUrl } from '@kodadot1/minimark/utils'
import { pinJson } from '@/services/nftStorage'
import { preheatFileFromIPFS } from '@/utils/ipfs'

const name = 'Corn Waifu'
const description = 'This anime waifu loves corn with butter and salt. Please dont microwave your corn, cook it like a normal person. Boil salty water and add corn - cook 15 minutes. Your anime waifu will make you a popcorn if you defeat her in a final battle. Only true winner can enjoy good dinner in a form of corn'
const image = selected.image

const meta = createMetadata(
  name,
  description,
  imageHash,
  undefined,
  [],
  'kodadot.xyz',
  'image/png'
)

const metaHash = await pinJson(meta, image)

preheatFileFromIPFS(metaHash)
const hash = unSanitizeIpfsUrl(metaHash)

const { accountId } = useAuth()
const res = await doWaifu(accountId.value, hash, image)

[yangwao]

https://github.com/kodadot/nft-gallery/assets/5887929/3acf677e-605c-478b-9467-2fa1ada0c68a

[exezbcz]

@yangwao live bug hunting on utxo

[yangwao]

i believe in @Jarsen136

yeah seems we will be rapidly and radically updating 😁

[exezbcz]

I have a few suggestions for changes but won't provide complete feedback.

this to 16px top, bottom margin, please

• make it a bit slower, please
• make it infinite; there is too big a gap between the time left things

Otherwise, layout is correct, and visual things could be done ad-hoc

Thank you!

[Jarsen136]

There are still some unclear things that need your guide. @vikiival

for testing you can use this collection https://canary.kodadot.xyz/stmn/collection/6?collectionId=6

total is collection.nftCount / (colllection.max || Infinity)

I'm not sure how to get themax from collection.

Regarding to available for mint (I would check the query) (actually would subscribe that)

query mintedBetween($from: DateTime, $to: DateTime) {
  minted: nftEntitiesConnection(orderBy: createdAt_DESC, where: {createdAt_gte: $from, createdAt_lte: $to}) {
    count: totalCount
  }
}

It's strange that when I try to get the total count of nfts from this testing collection, it returns nothing. /stmn/collection/6

It works on another collection.

[Jarsen136]

So I have also minting API

POST https://waifu-me.kodadot.workers.dev/

So data to fill from frontend

import { createMetadata, unSanitizeIpfsUrl } from '@kodadot1/minimark/utils'
import { pinJson } from '@/services/nftStorage'
import { preheatFileFromIPFS } from '@/utils/ipfs'

const name = 'Corn Waifu'
const description = 'This anime waifu loves corn with butter and salt. Please dont microwave your corn, cook it like a normal person. Boil salty water and add corn - cook 15 minutes. Your anime waifu will make you a popcorn if you defeat her in a final battle. Only true winner can enjoy good dinner in a form of corn'
const image = selected.image

const meta = createMetadata(
  name,
  description,
  imageHash,
  undefined,
  [],
  'kodadot.xyz',
  'image/png'
)

const metaHash = await pinJson(meta, image)

preheatFileFromIPFS(metaHash)
const hash = unSanitizeIpfsUrl(metaHash)

const { accountId } = useAuth()
const res = await doWaifu(accountId.value, hash, image)

I'm not sure about the minting process. Should the user select one of the 10 images and then post it? I thought nft was distributed to users randomly after minting. 😅

[exezbcz]

So I have also minting API

POST https://waifu-me.kodadot.workers.dev/

So data to fill from frontend

import { createMetadata, unSanitizeIpfsUrl } from '@kodadot1/minimark/utils'
import { pinJson } from '@/services/nftStorage'
import { preheatFileFromIPFS } from '@/utils/ipfs'

const name = 'Corn Waifu'
const description = 'This anime waifu loves corn with butter and salt. Please dont microwave your corn, cook it like a normal person. Boil salty water and add corn - cook 15 minutes. Your anime waifu will make you a popcorn if you defeat her in a final battle. Only true winner can enjoy good dinner in a form of corn'
const image = selected.image

const meta = createMetadata(
  name,
  description,
  imageHash,
  undefined,
  [],
  'kodadot.xyz',
  'image/png'
)

const metaHash = await pinJson(meta, image)

preheatFileFromIPFS(metaHash)
const hash = unSanitizeIpfsUrl(metaHash)

const { accountId } = useAuth()
const res = await doWaifu(accountId.value, hash, image)

I'm not sure about the minting process. Should the user select one of the 10 images and then post it? I thought nft was distributed to users randomly after minting. 😅

Those are only possible drops - user cannot influence what nft they get

[vikiival]

There are still some unclear things that need your guide

query collectionByIdId($id:String!) {
  collectionEntityById(id: $id) {
    id
    name
    image
    max
    nftCount
    createdAt
  }
}

you need to use stick v3

https://squid.subsquid.io/stick/v/v3/graphql

I thought It was pushed in some update

query mintedBetween($id: String!, $from: DateTime, $to: DateTime) {
  minted: nftEntitiesConnection(orderBy: createdAt_DESC, where: { collection: { id_eq: $id }, createdAt_gte: $from, createdAt_lte: $to}) {
    count: totalCount
  }
}

[Jarsen136]

So I have also minting API POST https://waifu-me.kodadot.workers.dev/

So data to fill from frontend

import { createMetadata, unSanitizeIpfsUrl } from '@kodadot1/minimark/utils'
import { pinJson } from '@/services/nftStorage'
import { preheatFileFromIPFS } from '@/utils/ipfs'

const name = 'Corn Waifu'
const description = 'This anime waifu loves corn with butter and salt. Please dont microwave your corn, cook it like a normal person. Boil salty water and add corn - cook 15 minutes. Your anime waifu will make you a popcorn if you defeat her in a final battle. Only true winner can enjoy good dinner in a form of corn'
const image = selected.image

const meta = createMetadata(
  name,
  description,
  imageHash,
  undefined,
  [],
  'kodadot.xyz',
  'image/png'
)

const metaHash = await pinJson(meta, image)

preheatFileFromIPFS(metaHash)
const hash = unSanitizeIpfsUrl(metaHash)

const { accountId } = useAuth()
const res = await doWaifu(accountId.value, hash, image)

I'm not sure about the minting process. Should the user select one of the 10 images and then post it? I thought nft was distributed to users randomly after minting. 😅

Those are only possible drops - user cannot influence what nft they get

So I guess we would not need to upload image and generate ipfs hash, at least on the frontend side. User only need to post the api with his/her address. What do you think? @vikiival

[yangwao]

I guess we would not need to upload image and generate ipfs has

yes, it would be pre generated by api

User only need to post the api with his/her address. What do you think?

exactly! :)

[vikiival]

You still need to generate metadata

[vikiival]

[Jarsen136]

Fixed

[vikiival]

cc @exezbcz @yangwao

So people can see which one they will claim

Those are only possible drops - user cannot influence what nft they get

So selection is random?

BECAUSE THESE TWO STATEMENTS contradict each other

1. The biggest one is selected
2. one random out of ten is selected

[daiagi]

ready for review?

[vikiival]

@Jarsen136 is it possible to make that mobile-friendly?

[Jarsen136]

ready for review?

Yes, but I guess it needs some deeper refactoring in the future.

[Jarsen136]

@Jarsen136 is it possible to make that mobile-friendly?

yes, it could be solved in another issue.

[daiagi]

where to test? what is the expected behavior?

[yangwao]

So people can see which one they will claim Those are only possible drops - user cannot influence what nft they get

So selection is random?

User supposed to select from 10 pregenerated waifus

The biggest one is selected

user selects from available mints for that hour/window

one random out of ten is selected

[yangwao]

yes, it could be solved in another issue

I would merge it so we can have the mobile version started as we want to demonstrate it from mobile

[daiagi]

getting a 500 from server and loader keeps spinning (tested on dot)

[vikiival]

Because you can mint only one nft per accout

[vikiival]

I can disable it

[yangwao]

Probably better error messages? 😁 It should be some 2xx or 4xx code if so?

[yangwao]

I can disable it

for testing oke but hope not for production 😄

[vikiival]

https://stackoverflow.com/questions/42013265/remove-unique-constraint-on-a-column-in-sqlite-database

I can't remove it rn without breaking something, please provide random email address (unique each time and it will mint)

[vikiival]

Probably better error messages? 😁 It should be some 2xx or 4xx code if so?

Changed it, now it throws 400

[Jarsen136]

Probably better error messages? 😁 It should be some 2xx or 4xx code if so?

Changed it, now it throws 400

Now it would display the message toast when error happens.

[exezbcz]

So people can see which one they will claim Those are only possible drops - user cannot influence what nft they get

So selection is random?

User supposed to select from 10 pregenerated waifus

The biggest one is selected

user selects from available mints for that hour/window

~one random out of ten is selected~

yeah, sorry for the confusion

[yangwao]

can we merge, so someone can start on the mobile version?

refactor could be done afterwards.

[preschian]

can we merge, so someone can start on the mobile version?

refactor could be done afterwards.

at least fix this first before merge? https://github.com/kodadot/nft-gallery/pull/6137#discussion_r1217628384

maybe create separate graphql queries for this page? cc @Jarsen136 @vikiival

[vikiival]

at least fix this first before merge? https://github.com/kodadot/nft-gallery/pull/6137#discussion_r1217628384

Yup otherwise it would f*ck the app

[Jarsen136]

can we merge, so someone can start on the mobile version? refactor could be done afterwards.

at least fix this first before merge? #6137 (comment)

maybe create separate graphql queries for this page? cc @Jarsen136 @vikiival

Yes, I will make some quick fix.

[Jarsen136]

I guess it could be merged now.

[codeclimate[bot]]

Code Climate has analyzed commit 1c57f578 and detected 0 issues on this pull request.

View more on Code Climate.

[vikiival]

So let's merge

[yangwao]

Perfect!

Let's continue in

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

[yangwao]

pay 200 usd

[yangwao]

😍 Perfect, I’ve sent the payout 💵 $200 @ 5.27 USD/DOT ~ 37.951 $DOT 🧗 16SjUbGKSdjCdWTy3NNT3JxbRVGGqD4mwkHpc6BD9U2Rp29Z 🔗 0xaa97dd891d2705153378d92aa60b9bc0741b456b97ba15112374fd6237099b93

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