Mint HTML on opensea
I'm not an expert in blockchain programming and the following is my step by step approach to mint a generative set of collectibles in form of an HTML file on opensea.
Generative arts I created are set of javascript codes done on p5.js and displayed within a HTML file. You can't however mint an HTML file directly on Opensea and rather should do your own smart contract and then opensea will display your HTML if it has the correct metadata.
So I had to do my own smart contract and then link the animation_url to my HTML page.
I went to OpenZeppellin website here: https://docs.openzeppelin.com/contracts/4.x/wizard
This a simple contract creation wizard that allows you to create a ERC721 token template and deploy it.
I have chosen the token name as Blockchain Kittens, and BLCK as the symbol.
Now for the base URI, there are more to be done.
The base URI is the most important part of your contract. It says to platforms like opensea where to find information about your NFT. The metadata should looks like this:
{"description":"Collection of Cat faces generated with P5.js & Scribble on the fly. The script is hosted on IPFS and each Cat is generated from one source.","tokenID":0,"name":"Blockchain Kitties #0","image":"ipfs://QmUUBJLhc3SrnXZdA3gdqXwEMr2htr9B2tzguL9M1w8Fyc/0.jpeg","animation_url":"ipfs://QmdXoQ2R4TUcvaGtzNySsn8FqJiNqTC3S8uDSnUKXkNh5R?tokenId=0","attributes":[{"trait_type":"Eyes","value":"Sleeping Beauty"},{"trait_type":"Head","value":"Green Ear Bow"},{"trait_type":"Mouth","value":"Common"},{"trait_type":"Whiskers","value":"Cat"},{"trait_type":"Nose","value":"Red"},{"trait_type":"Bow","value":"No"},{"trait_type":"Body","value":"Top"},{"trait_type":"Background","value":"#D35D6E"}]}This metadata of course is for one single NFT and you need to have one metadata for each of your NFTs. These files are json files.
This json file can be hosted on your own server or on a service like InterPlanetary File System or IPFS.
Most of the parts are obvious and dont need extra explanation but you need to understand the “image” & the “animation_url” sections.
The image, is a static image of your generative art or HTML page output where can be shown on listings and the animation_url is where the magic happens. This will be a link to your HTML file which contains the generative art.
In my case, my HTML file gets the token ID from the URI and my code translates the token ID to a specific work that needs to be generated.
The token ID of course is unique to each work and if youre doing a set of collectibles or editions, you need to make sure the IDs here match the IDs for the main metadata file and the image file.
One more thing to consider is the order of files to be uploaded to IPFS. Here is what I've done:
1- Create the image folder and upload all the images. Get the CID and the IPFS address for your folder.
2- Create folder for the main HTML file, upload the file and get the CID and the IPFS address for your folder. in my case, the ID can be added to the end of URI to generate a specific art for that token..
3- Enter these 2 links to your json files.
4- Create folder for your metadata and upload all the json files, and get the CID and the IPFS address for your folder. The link to this file is what you enter in your contract Base URI which then in return tells the world all the information about your token including whats the details, whats its name, the token ID, where to find the image, where to find the main NFT file and what are the traits for this NFT.
Once you’ve created your json file, install the IPFS client and create a folder for your json files if you're doing a collection or simply upload your file if youre minting a single work.
Remember though, once you change a folder or file, the CID will change. It means if you add a file to a folder on IPFS, the CID of the folder will change
Now, uploading a file to the IPFS is not enough as this file can only be accessed if you keep your computer on forever. You must pin your files so they’re accessible even when your computer is not available.
The simplest way to pin is to use a service like Pinata
Copy the CID from the IPFS file/folder and upload it in Pinata (upload menu *CID)
Its gonna take a little bit of time depending how large your file or folder is for the pin service to start.
Once the pin is started, you can copy the CID and paste it on the base URI field. This is how your base URI should look like:
https://ipfs.io/ipfs/QmVzdqSRofDn8ZdQGvzn4rLEyTQpmdJvBDDNUx7XBcyay4/
The important part is that the smart contract will add the token ID at the end of this address. in my case, the token ID 0 will have the following URI address:
https://ipfs.io/ipfs/QmVzdqSRofDn8ZdQGvzn4rLEyTQpmdJvBDDNUx7XBcyay4/0
Other options are pretty straightforward. Obviously you want your contract to be mintable.
You may want to have incremental IDs for your minted tokens, burn them, pause the minting and the rest.
On access control section, I chose Ownable as it was more straightforward.
Once ready, click “Open in Remix” button at the top of the page. This will open your smart contract in Remix, the online solidity editor.
Make sure the correct contract is selected and then click on the second icon at the left (solidity compiler) and then compile the contract.
Take note of the ABI (highlighted on the image with red circle). You will need this later.
Once compiled, go to the third menu on the left and choose the environment for your deployment. The first 2 are for testnet and the injected web3 is to be used with metamask.
Please note you can not use a hardware wallet connected to metamask to deploy your contract in Remix. If you try a hardware wallet, the following error will be given:
Invalid transaction params: params specify an EIP-1559 transaction but the current network does not support EIP-1559Once you confirm the transaction on your metamask, your contract will be deployed to the Ethereum network within a few minutes.
When its deployed, you will see your contract name. Copy the contract address to etherscan
Here is my contract address on etherscan:
https://etherscan.io/address/0xf5b27c3ac3753dbc331768d42f5e56bfc7d7a84f
From here, you can verify your contract with etherscan which is a headache, or you can go to Custom ABI section in etherscan and paste your ABI for your smart contract to be able to interact with it (eg. mint a new work)
Here is what you'll be able to see in contract section of your smart contract after adding your custom ABI. Connect your metamask and mint your work.
Once you mint your first NFT, you can head over to Opensea (connected to the same wallet that created the smart contract) and list your contract by clicking Live on a Mainnet link. You then paste your contract number and if youre the owner of the contract, you can then set all the related details including images and headers for the collection on Opensea.
It is worth noting that its always the best practice to deploy the smart contract on testnet and test all aspects of it before launching it on mainnet. Anything launched on the mainnet acures costs and most probably very expensive depending to the network congestion so always test and make sure you're bug free before going mainnet.
Ill try to add to this article if & when I have more information to share on this topic but meanwhile, I hope this article helps someone to share their great creation with the rest of us.
Love you all, Peace ✌️❤️
