paintswap
  • Introduction to Paintswap
  • Getting Started
    • Create a Wallet
    • Bridging Funds to Sonic
    • Paintswap
  • Paintswap dApp Suite
    • NFT Marketplace
    • NFT Launchpad
      • Launching your collection
    • Estfor Kingdom
    • Beardies
  • Click royale (coming soon)
  • VRF (coming soon)
  • PAIGE - Paintswap AI Game Engine (coming soon)
  • NFT lending (coming soon)
  • Sonic airdrop orderbook (coming soon)
  • Tokenomics
    • $BRUSH
      • LP/Staking
      • Early Distribution
      • Emissions History
  • NFT Marketplace
    • Introduction & Fees
    • Creating NFTs
      • Contract Factory
      • Bulk Mint
      • Interactive NFTs
      • Metadata
      • Supported NFTs
    • NFT Vaults
    • Trading NFTs
      • Marketplace Mechanics
      • Bulk / Batch Actions
      • Royalties
    • Collections
  • Resources
    • Contracts
    • API Endpoints
    • Discord Sales Bot
    • Media Kit
    • GitHub
    • Bugs & Reports
  • Socials
    • Medium
    • Twitter
    • Discord
    • Telegram
Powered by GitBook
On this page
  • What is an Interactive NFT
  • Interactive NFTs at Paintswap
  • Creating an Interactive NFT
  • Paintswap metadata injection
  • Designing Interactive NFT
  • Godot games & apps -> iNFTs
  1. NFT Marketplace
  2. Creating NFTs

Interactive NFTs

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

PreviousBulk MintNextMetadata

Last updated 3 months ago

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.

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

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

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:

Godot games & apps -> iNFTs

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

For a list of the supported metadata which will be injected see the page. In addition, the properties field is also injected.

Creating NFTs
Metadata
Logois there a way to build a react app in a single html file?Stack Overflow
LogoTurning Godot games/apps into iNFTs on PaintSwapMedium
Standard Metadata