Developing Baby Blobs
What makes an NFT project unique? Amazing art and a solid team are always a great start, but we wanted to go that extra mile. Some of our favorite NFT projects on Ethereum, i.e., thedudes, Nobodies, and many of the Art Blocks, all use the animation_url category to embed an external URL into a sandboxed iframe displayed on marketplaces such as OpenSea. From there it allows full interactivity including reacting to clicks and mouse movement and having special functionality on certain key presses.
On Solana, however, that functionality was lacking. The metadata standard did not include support for interactive NFTs, and as a result, there was obviously no support from marketplaces, wallets, or the explorer either. So, we had to add it to the standard ourselves.
How Solana NFTs Work (And What We Added to Metaplex)
Metaplex is the go-to place for NFTs on Solana. They are the “market makers” for SOL NFTs, both setting the standards as well as making the tools necessary for creators to create, mint, and sell/auction their art. You can’t have NFTs on Solana without running into Metaplex. But how exactly do those NFTs work?
All NFTs on Solana are SPL tokens at heart (usually with a supply of 1). The thing that differentiates NFTs from other tokens is that each NFT also has its own token metadata account (from the Token Metadata Program) which should also have an edition marker (although SolSea NFTs don’t have editions). Pulling the metadata from the blockchain and de-serializing it should get you something similar to what you see in the new metadata tab on the Solana explorer.
From there, a lot of the work has already been done. The URI that is listed in the token metadata program points to a JSON file that is off-chain. That file contains all the NFT details, from the description, the links to the images/files, the traits, and so on.
Now on to how this all fits together in the Metaplex storefront: the Metaplex Storefront is built using React, which makes it relatively trivial to display NFTs once the metadata is pulled from the blockchain. Using Solana web3, the token metadata programs are pulled from the blockchain and deserialized. From there, it passes the URI json data (from the Token Metadata Account) to the ArtContent React component. That is where all the magic happens. The ArtContent component defines all (mostly) of the React elements that will be returned to display the NFT. This includes an image element, a VR/3D model element, a ‘video’ element, and now it also includes an ‘html’ element too! The way the component determines what element to return depends on the category field in the metadata, and if the category is absent, it relies on the animation_url extension (the ?ext=mp4, ?ext=glb, ?ext=html, etc. at the end of the animation_url). That’s why it’s important to include the category field if you want to do anything fancy.
Our new addition to Metaplex was the ‘html’ category. If the ArtContent sees that the category is ‘html’ or the animation_url extension is html (such as www.example.com?ext=html), it will take that animation_url and then embed it into an iframe (or return an image element if the ‘artView’ attribute is set to false or missing from the component). Iframes are essentially tiny little browser windows that are embedded into other sites. If you look carefully (or inspect element on your favorite sites), you’ll likely notice iframes all over the place. We also added a sandbox = ‘allow-scripts’ css property to the iframes, which limit the powers of the site that’s inside it. This serves to protect users from potentially malicious links that bad actors may try to embed in an interactive NFT.
In addition to making it possible to display interactive NFTs on Metaplex, we also added the ability to mint them directly from the storefront. After selecting the “HTML Asset” category from the Create menu, you can either choose a link or upload a local HTML file (it will upload it to Arweave for you automatically).
If you choose to enter a URL, it will display it in the next page in the iframe. If you upload the HTML file directly it will display the image in the NFT card on the next page (it will show the iframe after it is uploaded to Arweave during the “Launch” step).
On a less interesting note (although still interesting I think), you can check out the documentation for the ‘html’ category on https://docs.metaplex.com/nft-standard.
How OUR NFT Mint Works
We did a few things slightly differently than your generic Candy Machine mint.
Uploading the assets:
Our image generation, JSON generation, HTML file generation, and config file generation were all done from scratch using Python by Sway, the other developer on our team. Normally with a large candy machine mint it takes hours, or even days, to upload all the assets. Sway made it so we could batch upload with ARKB to Arweave. All our files were generated with a random hex string as the file name to make it more difficult to snipe the rarity before our launch. We uploaded the HTML files and the image files first, and then referenced them with the JSON and config generation script that Sway coded. By using ARKB and the customs scripts, we were able to cut down our total upload time from days to only 35 minutes. We will be open sourcing all our code after mint, and we’ll provide more detailed documentation for anyone else that wants to use it, too.
How our custom candy machine works:
In addition to uploading our files a bit differently, we also are using a custom candy machine. The default candy machine program takes a single treasury address that receives all the mint fees. To make the mint significantly smoother, we forked the candy machine and made a couple modifications of our own. First, instead of only having one treasury account, you can now have up to 4. We modified the CLI tools as well, so those four wallets are initialized during the create_candy_machine command. During initialization, you also declare the splits for all four of the wallets (adding up to 100). On mint, instead of the candy machine sending 100% of the mint price to a single treasury wallet, the price is split between 4 wallets in the distribution described in the splits during the create command. The custom candy machine is public on my GitHub. Feel free to check it out if you want! We’ll be releasing another article soon explaining exactly how the candy machine (both ours and the default one) works under the hood! (https://github.com/stegaBOB/metaplex/tree/better-candy-machine)
That’s about it for now! More content dropping soon :)
-Sammy (stegaBOB)
