Chaos Roads custom component

[sbauch]

I'd like to support the dynamic NFT project Chaos Roads - https://www.chainleft.art/chaos-roads

Right now the collection is being displayed using the IframeNFT component. This fetches metadata and iframes the animation_url.

This is less than ideal for a few reasons - we cant control the audio of the iframed window to pause it when the slide is not active, for instance. The main issue is that this tends to lock up the chromium browser. I've tried on a 2gb and 4gb RAM rpi 4B, and neither is really able to handle this.

The artist shared their codebase for a website they use to display tokens - https://github.com/chainleft/chaos-roads-explorer

It's entirely possible that the pi image isn't well-tuned for this, but as a first step I'd like to create a custom component that mimics the above site to try and bring more of this inside our control.

I did something similar for my project BlockClocks, where rather than iframing the site pinned on ipfs, I recreated that page as a react component.

So the steps generally here would be

1. create a component to display a chaos roads token - maybe under the Collections dir?
2. Change the chaos roads collection from using the IframeNFT to instead use this custom component
3. A chaos roads token is hardcoded to be displayed inside Slideshow.tsx so one will display when running the dapp regardless of connected account holdings

I don't think we necessarily need to run the image to test things, instead load up your dev version of the site on your pi using ngrok. Then I can deploy a preview version for final testing and acceptance.