fix: 3D NFT Thumbnail Preview

[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
• Refactoring: remove unused components
  components/shared/gallery/GalleryItemCardList.vue and components/shared/gallery/NftCard.vue

Needs QA check

• @kodadot/qa-guild please review

Context

• Closes 3D NFT Thumbnail Preview  #6953
• 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

/rmrk/collection/f4f8d7504c60bb5721-VB7SA
(It took some time to download the 3D object)

Copilot Summary

🤖 Generated by Copilot at ee3f53c

This pull request standardizes the NFT metadata format across the app by using the BaseNFTMeta interface and a formatNFT utility function. It also removes some unused components and renames an inconsistent property.

🤖 Generated by Copilot at ee3f53c

We are the masters of the NFTs
We shape their metadata as we please
We use the BaseNFTMeta to unify
We crush the chaos with our standardize

[kodabot]

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

[netlify]

✅ Deploy Preview for koda-canary ready!

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

[reviewpad]

AI-Generated Summary: This pull request introduces changes to the 3D NFT Thumbnail Preview feature. The modifications include the addition of a BaseNFTMeta interface in components/base/types.ts, changes to the CarouselTypeRelated.vue component where formatNFT(nfts) has been added, and updates to useNft.ts to handle this new interface and its properties.

Two files have been deleted: GalleryItemCardList.vue and NftCard.vue from the components/shared/gallery/ directory. Since these files are removed, this could impact other code that depends on these components, hence further changes might be needed to consider this update.

These modifications are likely designed to improve the handling and representation of NFT metadata across the application.

[Jarsen136]

As for [More From This Collection] section, all the 3d items do not display properly.

I debugged it and found that there is a comment code for this logic from @preschian. That means it's blocked by another issue #6237

[prury]

took a long time, but all of them loaded properly:

[stephenjason89]

Code lgtm

[preschian]

I thought the fix was in this line https://github.com/kodadot/nft-gallery/blob/main/libs/ui/src/components/NeoNftCard/NeoNftCard.vue#L17

nft.animationUrl || nft.animation_url

[daiagi]

to be honest,
I am confused about why we have so many "paths" to get to the media of an NFT
Plus we seem to have recurring bugs from these issues, always some media not working here or there

maybe we can take a deep approach and sort out this mess more properly?

Ideally, I think I would like to see a single URL coming from the indexer and the mime type
Two URLs, one for full media and another for scaled-down version would also be good so we can display videos and improve loading times

@kodadot/internal-dev @yangwao

[preschian]

I debugged it and found that there is a comment code for this logic from @preschian. That means it's blocked by another issue #6237

for this one, I think it better to revert that @Jarsen136 wdyt? re-add back animation-src

[preschian]

I am confused about why we have so many "paths" to get to the media of an NFT

I think this is the challenge we face to support multi-chain. Because each chain has different specs. For example, this is a related issue between rmrk1 and rmrk2 kodadot/workers#95

another challenge related to metadata stuff is, on the asset hub creators can put their metadata on non-ipfs. ref: #6618 (comment)

[Jarsen136]

I thought the fix was in this line https://github.com/kodadot/nft-gallery/blob/main/libs/ui/src/components/NeoNftCard/NeoNftCard.vue#L17

nft.animationUrl || nft.animation_url

I would like to unify them. Or it would be confused that if there is animationUrl or animation_url.

Moreover, there is already a type definition with only animationUrl in the nft meta.

[Jarsen136]

I debugged it and found that there is a comment code for this logic from @preschian. That means it's blocked by another issue #6237

for this one, I think it better to revert that @Jarsen136 wdyt? re-add back animation-src

I agree with you

[preschian]

Moreover, there is already a type definition with only animationUrl in the nft meta.

do we need handle animation_url || animationUrl somewhere? I found out that we have something like this in our query animation_url: animationUrl

[vikiival]

to be honest,

maybe we can take a deep approach and sort out this mess more properly?

Hello,

I am confused about why we have so many "paths" to get to the media of an NFT

the majority of f*ckups we had is with RMRK 2.0 standard they invented their own metadata types that differ a lot for the industry standard.

Ideally, I think I would like to see a single URL coming from the indexer and the mime type

All indexers have metadada available. We can fetch the mimetype from indexer too via HEAD.

To unify metadata standard for one I opened an issue for the minipfs.

kodadot/packages#161

Two URLs, one for full media and another for scaled-down version would also be good so we can display videos and improve loading times

Already done with image-worker, please open issue in kodadot/workers if in case you find a bug, or have feature request.

Plus we seem to have recurring bugs from these issues, always some media not working here or there

In ideal scenario client should not fetch ipfs metadata from gateway but opt-in for indexer.

If there is generally missing something in indexer please open issue in kodadot/loligo.

If you find a bug/ miss something in specific indexer we have:

• ksm, rmrk - rubick
• bsx, snek - snek
• ahk, ahp - stick

[vikiival]

@Jarsen136 can you remove the components in separated PR?

[codeclimate]

Code Climate has analyzed commit 965f5e1 and detected 0 issues on this pull request.

View more on Code Climate.

[sonarcloud]

Kudos, SonarCloud Quality Gate passed!   

0 Bugs
0 Vulnerabilities
0 Security Hotspots
1 Code Smell

No Coverage information
1.5% Duplication

[Jarsen136]

Moreover, there is already a type definition with only animationUrl in the nft meta.

do we need handle animation_url || animationUrl somewhere? I found out that we have something like this in our query animation_url: animationUrl

Seems not. I found that most of the cases would use getNftMetadata to fetch the final metadata. They are not using that from the indexer side directly.

[Jarsen136]

@Jarsen136 can you remove the components in separated PR?

Done. I have reverted it.

separated PR #6963

[Jarsen136]

I debugged it and found that there is a comment code for this logic from @preschian. That means it's blocked by another issue #6237

for this one, I think it better to revert that @Jarsen136 wdyt? re-add back animation-src

✅ DONE. Now they are back.

[yangwao]

took a long time, but all of them loaded properly:

can you try again? iirc our gateway stores it afterwards which load times should be much faster next time :)

[yangwao]

pay 50 usd
gg!

[yangwao]

😍 Perfect, I’ve sent the payout
💵 $50 @ 4.5 USD/DOT ~ 11.111 $DOT
🧗 16SjUbGKSdjCdWTy3NNT3JxbRVGGqD4mwkHpc6BD9U2Rp29Z
🔗 0x026c4f6f57863666ff4956daa088e9b2db4e02b670fa3695ce9803bd88e61e31

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

[prury]

took a long time, but all of them loaded properly:

can you try again? iirc our gateway stores it afterwards which load times should be much faster next time :)

indeed, much faster now, nice!

[ziga-hash]

Impressive work!