Ctrlk

Interactive NFTs

Find out everything about this new kind of NFT, now available to create and trade on Paintswap.

What is an Interactive NFT

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.

Interactive NFTs at Paintswap

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.

Creating an Interactive NFT

You can create your own contract/collection or mint iNFTs directly on Paintswap.

Creating NFTs

If minting outside Paintswap, just make sure to stick to the metadata standard.

Metadata

Paintswap metadata injection

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:

var metadata = window?.context?.nftData?.metadata

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

Designing Interactive NFT

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:

Logois there a way to build a react app in a single html file?Stack Overflow

Godot games & apps -> iNFTs

Read our medium article on how to turn a Gotdot game or app into an iNFT fully compatible with Paintswap.

LogoTurning Godot games/apps into iNFTs on PaintSwapMedium

Last updated