Interactive NFTs
Find out everything about this new kind of NFT, now available to create and trade on PaintSwap.
Last updated
Find out everything about this new kind of NFT, now available to create and trade on PaintSwap.
Last updated
A regular NFT is based on predictable static or dynamic content such as images, animated images, audio files or videos. In contrast, an interactive NFT (iNFT) usually refers to web content of some kind, that changes based on your inputs. It can feature almost anything supported by a web browser. For example, a game, an app, tool or why not interactive art or music? Only the sky is the limit here.
The interaction is limited to what is supported by the main website. See some examples here!
At PaintSwap we run the iNFT in a sandboxed iframe which allows scripts and forms, but not popups or access to web extensions. The NFT content is typically an html file that can contain CSS, SVG, JavaScript, Base64 encoded image URLs and more.
You can create your own contract/collection or mint iNFTs directly on PaintSwap.
If minting outside PaintSwap, just make sure to stick to the metadata standard.
Part of the NFT metadata is injected into the iframe as a global variable, meaning anything your NFT contains in its metadata can be accessed within the iNFT code itself.
In the iNFT javascript code, the injected metadata can be accessed as such:
For a list of the supported metadata which will be injected see the Standard Metadata page. In addition, the properties field is also injected.
The properties can further enhance the iNFT as part of a collection where you want to use the same code for all NFTs but have it act differently depending on which NFT (tokenID) is loaded.
nftData.metadata.properties | json dictionary {} containing any other structure
Also exposed on the window.context:
nftData.address | contract address
nftData.tokenId| contract token ID
nftData.paintswap.soldAmounts | e.g. ["3", "1", "10"] (important for ERC1155)
nftData.paintswap.soldPrices | in the wei unit
nftData.paintswap.soldTimestamps | as unix epoch in seconds
nftData.paintswap.history | an array with marketplace events
nftData.paintswap.onSale | true or false if the asset is on sale
PaintSwap uses a responsive design. To get the best out of your iNFT, make sure to do the same. A good practice is using width and height as 100% of the root component instead of fixed pixels. The iframe should be able to change size without destroying your work. You can validate it on the minting page where there also is a button to expand the view.
PaintSwap only supports a single HTML page so if you have several files you need to find a way to combine them. If you have a React app, there are different ways to do that. See this:
Read our medium article on how to turn a Gotdot game or app into an iNFT fully compatible with PaintSwap.
