#7685 replace placeholders

[prachi00]

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
• [ ] Feature
• [x] Refactoring

Needs QA check

• @kodadot/qa-guild please review

Context

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

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

• [x] My DOT address: Payout

Screenshot 📸

• [x] My fix has changed UI

Copilot Summary

[kodabot]

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

[reviewpad[bot]]

AI-Generated Summary: This pull request updates the placeholders images used depending on the theme mode in the useTheme.ts file. Instead of using /placeholder.webp for dark mode and /placeholder-white.webp for light mode, it now uses /Kdark.svg and /Klight.svg respectively. These SVG files, Kdark.svg and Klight.svg, added to the public directory, define several complex shapes through various <path> elements. It's worth noting that some paths are filled with black color, and others are filled with white, denoted by different SVG rules like fill-rule and clip-rule.

[netlify[bot]]

✅ Deploy Preview for koda-canary ready!

Name	Link
🔨 Latest commit	5c6ed3e93962e9f91ef839d92fd0516fbbb035e0
🔍 Latest deploy log	https://app.netlify.com/sites/koda-canary/deploys/65409255378c520008577743
😎 Deploy Preview	https://deploy-preview-7698--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.

[prachi00]

could you use minimized .webp instead?

I converted online, the quality is reduced though

@exezbcz can you provide webp?

[exezbcz]

@prachi00 Hope this helps. I decided to make it k-grey for both modes, since its placeholder, it does not have to have big contrast

could you also make it smaller, something like with the size of container

ZIP

here is zip, both dark and light version with 4 quality versions - levels of compression. kdarkplaceholder.zip klightplaceholder.zip

[prachi00]

@exezbcz check now

[prury]

@exezbcz i think placeholder when loading collection logo image could also be reduced, wdyt on canary it also had some margins around)

[exezbcz]

weird, still see the old one on explorer

[exezbcz]

@prury yup, smaller please and without the stretch

[prachi00]

weird, still see the old one on explorer

where is this? dont we have skeletons in explore now?

[prachi00]

@prury

[prury]

@prury

@prachi00 the image you attached still shows the old logo. I believe its supposed to show the new logo, but using the same margins and image proportions that we have on canary

[prachi00]

@prury

[prury]

weird, still see the old one on explorer

where is this? dont we have skeletons in explore now?

@prachi00 this one happens in a split of a second when browsing 3D NFTs i guess, hard one to reproduce:

https://github.com/kodadot/nft-gallery/assets/36627808/76b94dfc-f2ef-4bfd-ae4e-9ba946fc8f1d

[prachi00]

it seems the old placeholder is coming from nftListWithSearch query @roiLeo @prury can we add this in a separate issue ?

[roiLeo]

it seems the old placeholder is coming from nftListWithSearch query @roiLeo @prury can we add this in a separate issue ?

it's comming from IPFS_KODADOT_IMAGE_PLACEHOLDER

[prachi00]

IPFS_KODADOT_IMAGE_PLACEHOLDER

okay so what should be the value now for this? how do I get that ipfs hash thingy for new logo?

[prachi00]

IPFS_KODADOT_IMAGE_PLACEHOLDER

okay so what should be the value now for this? how do I get that ipfs hash thingy for new logo?

@roiLeo would you know?

[daiagi]

okay so what should be the value now for this? how do I get that ipfs hash thingy for new logo?

maybe I am wrong and we have another way but my guess would be

1. download IPFS desktop
2. upload the new image file from your computer
3. use the new identifier in the code

https://docs.ipfs.tech/how-to/desktop-app/

[roiLeo]

okay so what should be the value now for this? how do I get that ipfs hash thingy for new logo?

Mint it!

[prachi00]

IPFS_KODADOT_IMAGE_PLACEHOLDER

would you mind generating one? I am having trouble loading it I got this QmVFb2qxyFePqzMqMrwcszpavi95FUhwapPVPu3z7Fxf1B hash but it doesn't load

https://image-beta.w.kodadot.xyz/ipfs/QmVFb2qxyFePqzMqMrwcszpavi95FUhwapPVPu3z7Fxf1B

[prachi00]

IPFS_KODADOT_IMAGE_PLACEHOLDER

would you mind generating one? I am having trouble loading it I got this QmVFb2qxyFePqzMqMrwcszpavi95FUhwapPVPu3z7Fxf1B hash but it doesn't load

https://image-beta.w.kodadot.xyz/ipfs/QmVFb2qxyFePqzMqMrwcszpavi95FUhwapPVPu3z7Fxf1B

@roiLeo @daiagi

[daiagi]

Which network did you mint it in? I didn't find it browsing through explore

[prachi00]

Which network did you mint it in? I didn't find it browsing through explore

I did it through the ipfs thing you mentioned

[daiagi]

Roileo advice was better. Mint it

[prachi00]

Roileo advice was better. Mint it

yeah so about that, I dont have any balance for testing stuff, and I don't know how to get tokens since we shifted on telegram from discord, would you be able to mint it? or tell me how I can get some test tokens? @daiagi

[daiagi]

there you go: https://kodadot.xyz/ahk/collection/197

https://image.w.kodadot.xyz/ipfs/bafkreiddaramgs4jvneno4pkjhrs4lr3dbxmrgpqqtviwhco674qeu4vx4 https://image.w.kodadot.xyz/ipfs/bafkreigbvowevtdh5ktnr5kyfxf2b56lp4424zj2gb6wona6if4lh35mbe

[prachi00]

there you go: https://kodadot.xyz/ahk/collection/197

https://image.w.kodadot.xyz/ipfs/bafkreiddaramgs4jvneno4pkjhrs4lr3dbxmrgpqqtviwhco674qeu4vx4 https://image.w.kodadot.xyz/ipfs/bafkreigbvowevtdh5ktnr5kyfxf2b56lp4424zj2gb6wona6if4lh35mbe

thank you

what is the equivalent for the drip thing on telegram?

[codeclimate[bot]]

Code Climate has analyzed commit 5c6ed3e9 and detected 0 issues on this pull request.

View more on Code Climate.

[sonarcloud[bot]]

Kudos, SonarCloud Quality Gate passed!   

0 Bugs
0 Vulnerabilities
0 Security Hotspots
0 Code Smells

No Coverage information
0.9% Duplication

[prachi00]

@roiLeo @daiagi it seems even after replacing the hash https://deploy-preview-7698--koda-canary.netlify.app/ksm/explore/items?listed=true&search=bureau still has the old placeholder with hash bafkreifahjdjerrz65puqznmsu2acoktrxjbo3vvp2f2j4eb7h5tc345fi I searched the codebase and we don't have it anywhere else

[daiagi]

It seems that IPFS_KODADOT_IMAGE_PLACEHOLDER is only used while minting so any nft minted before this PR will show the previous placeholder

it looks like we're just going to have to live with it

[yangwao]

Thanks! pay 30 usd

[yangwao]

😍 Perfect, I’ve sent the payout 💵 $30 @ 4.35 USD/DOT ~ 6.897 $DOT 🧗 13Qx65nLd6SwdtjrRyuoEtp9CKXhF651xdHBPaXcvhwKm4N1 🔗 0x932790f73fcd5119aa0cef35a9e75b0d781f35b46b02af0231721cedb9a2cf23

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