Try @helia/verified-fetch for fetching NFT images from IPFS

[yvaskov]

Proposal

Try using verified-fetch for fetching NFT images from IPFS instead of relying on the links provided by the backend.
https://github.com/ipfs/helia-verified-fetch/tree/main/packages/verified-fetch

Scope

• NFT Inventory view - /token/{hash}
• NFT instance view - /token/{hash}/instance/{id}
• Address NFTs - /address/{hash}?tab=tokens_nfts

Data source

It's better to use metadata.image and metadata.animation_url instead of the ones generated by backend.
Note that there can be a number of possible URLs - with or without a predefined IPFS gateway.
CID only:

• ipfs://QmV35SQCMXb3v6zA9hApYDFyG3u5tDJHJ5S25LUz6Njec6
• https://ipfs.io/ipfs/QmV35SQCMXb3v6zA9hApYDFyG3u5tDJHJ5S25LUz6Njec6

CID with a path:

• ipfs://bafybeidmmv677g2mpwnufqqoheseovn5cra4tilaoea5lrqd7sw66oc4di/300.webp
• https://nftstorage.link/ipfs/bafybeidmmv677g2mpwnufqqoheseovn5cra4tilaoea5lrqd7sw66oc4di/300.webp
• https://bafybeidmmv677g2mpwnufqqoheseovn5cra4tilaoea5lrqd7sw66oc4di.ipfs.nftstorage.link/300.webp (this is a subdomain variant of a previous link)

Both Qm... and bafy... CID variants are valid.

I suggest stripping the HTTP gateway to use the CID itself for verified-fetch, as predefined gateways have proven to be unstable.

[tom2drum]

Examples:

• images
  • https://base.blockscout.com/token/0x2E78487bb558Ca1564E2BA4E3dDbB29D960D5ed6/instance/300
• video
  • https://base.blockscout.com/token/0x2aa80a13395425EF3897c9684a0249a5226eA779/instance/3
  • https://base.blockscout.com/token/0x8DC80A209A3362f0586e6C116973Bb6908170c84
• HTML-document
  • https://base.blockscout.com/token/0x8dd893b4f12b0A962f411DC32C7aF3cd2E7b2EFB/instance/1?tab=metadata

[yvaskov]

Initial experiments revealed an issue with slow video download/streaming via verified-fetch for animation_url compared to using direct gateway link.
The scope has been reduced to fetching images only for now.