In order to create a seamless live minting experience for your users, there are a few things you need to do in your code. If you start with one of our templates, this is very easy to do in practice. To get started with a typical live mint collection, clone the Cognitive Canvas Template and follow the instructions.
Cognitive Canvas imposes few restrictions on how you design your live minting experience - it is really up to your imagination. We supply many services and features that allow you to do amazing things during live minting, most of which are unique to Cognitive Canvas.
You develop your collection live, exactly as it will be seen when published. This ensures there are no errors when publishing a collection with Cognitive Canvas. There are 4 stages to publishing:
- Develop and test your collection from your local development environment, whatever that might be (VS Code, etc.). You start your collection in the normal way from your local development environment on your local machine. The metadata in Cognitive Canvas will temporarily point to your locally running copy so you can quickly and easily develop your collection live, directly in Cognitive Canvas.
- Prepare your collection for publishing. After you have thoroughly tested your collection locally, you prepare it for publishing. This step uploads your collection zip file to IPFS and updates the metadata to point to the version on IPFS. After this step, you are running your collection exactly as it will run when live, directly from IPFS.
- Do final testing running the prepared version.
- Publish the prepared collection to the blockchain.
This article contains most of the details you need to know to successfully publish a collection on Cognitive Canvas, including the low level details of IPFS, NFT metadata, and the Cognitive Canvas Live Minting process.
Overview of IPFS, Metadata, and the tokenURI Method
When a collection is published, your zip file is uploaded to IPFS and the metadata for the collection points to the directory on IPFS where your zip file was unzipped (conceptually). If you have used fxhash, this concept should be familiar.
On Ethereum, the metadata is in a standard format that has the information needed for anyone to display and run an NFT.
NFTs on Ethereum also have a standard way of getting the metadata - the tokenURI contract
method. When a marketplace wants to find the metadata for a particular NFT, it calls the
tokenURI contract method to get the url for the metadata so that it can show the NFT. A
token id is passed to tokenURI, and the contract returns a uri. Cognitive Canvas stores its
information on IPFS, so tokenURI will point to the location of the metadata on IPFS
for that NFT.
Initially, all the mints from a collection will return the same metadata. So they will all have the same thumbnail and look when displayed on our web site, on OpenSea, or other marketplaces. Of course, the artist supplies the initial thumbnail and decides how the collection will look when run.
After a user customizes a mint through Live Minting, we update IPFS appropriately (see below for details), and make a new metadata file which points to the customized live mint.
Live Minting Details
When a user customizes a mint through Live Minting, we
run the collection in an iframe and indicate through a javascript variable, isCClive,
that the collection is running in live mint mode.
postMessage and cc.js
When running in live mint mode, you display the user interface to the user, and interact with
us through the postMessage browser functionality. As the user performs actions
during live minting, you use the functions we provide to save the live mint data and communicate
with our webapp. We supply a javascript file called cc.js that encapsulates this
communication
protocol.
Essentially, you save data files during live minting that customize the mint for the user. The data files can be anything, json, images, video, audio, binary data, etc. We impose few restrictions on this data, and through the services we supply, there is little data you can't gather during this process.
How the Metadata is Updated
Files that were saved during live minting are all placed in a params directory that is
added
to your collection zip file on IPFS. IPFS has special operations that do this very efficiently (no
copying), so each separate mint has it's own params directory.
The metadata file for each mint is updated to point to this new information on IPFS.
The updateTokenURI contract method is called to update the tokenURI for the customized
mint. Now when a marketplace requests the tokenURI for the mint, it will point to
the customized mint metadata and display the customized NFT.
The params Directory
When your collection runs after a mint is configured, a params directory will be
accessible with any files that were saved for that mint, just like if you had included it in your
collection zip file from the beginning.
When your collection is running in live mode, the params directory does not exist because
the user is configuring a mint. As you save files during configuration, we manage them internally
so that the user can restart a live mint configuration at any time. When a user restarts a live mint,
you want to start with the data they have configured so far.
In order to make everything seamless, the loading of files from the params directory is
simulated during live minting by a special function called ccFetchUrlFromParams. This
returns a url that you can use to retrieve params files whether you are in live mint
mode or in normal mode.
So the only thing you need to do is use the ccFetchUrlFromParams function to get the urls
for any files in the params directory. This will keep your logic the same whether you
are in live mint mode or just showing a configured mint in the normal way.
This is very easy to do in pratice, just get the urls you need from the params directory
in some startup code and use them whereever you want in your code.
The Live Mint User Interface
Cognitive Canvas is agnostic about the user interface the artist wants to present to perform a live mint. We provide a multitude of features, services, and libraries, but the end design is up to the artist.
We do however, have some recommendations.
Use Our Colors and CSS
We supply some CSS (cc.css) that contains our colors and other controls. Using
this CSS will make your UI match nicely with Cognitive Canvas.
Use Full Screen Mode
Make use of full screen mode. Your UI will always fit in the iframe on our Live Mint page since you have control over the size. But for most live mint designs, full screen mode will provide a much better experience. All of our templates have full screen mode integrated.
Format of Zip File
Images
Be sure to include the following 4 images in your zip file. (Note: you can change the OpenSea images directly on OpenSea at any time after your collection is created, but making good images now will make everything more seamless.)
thumbnail.png
This is the image that will be seen for each mint before live minting is used to configure a mint. Should be a good representation of your artwork, because many marketplaces will only use this image. Does not need to be super hi res. For example, 900x900 is not too large, but will still generate a detailed image on all views on OpenSea and most other marketplaces.
You generate this image the same way thumbnails are generated during live minting. When you are publishing your collection, generate the thumbnail for the image just before you publish. Downoad it and include it in your zip file.
opensea.png
The OpenSea small image, 512x512.
opensea-banner.jpg
The OpenSea banner image, 2100x600 works well. Does not need to be hi res, hence must be jpg.
avatar.png
Your avatar, 128x128.
parameters.js
When you are ready to publish, download the params directory (Download Params button), and copy params.json to parameters.js (or equivalent). (And the thumbnail, see above.)
This will ensure the initial view of your collection will be identical to the one that is currently configured.
Do Not Add a params Directory
A directory named params is added during the live mint process, so make sure that your uploaded zip does not have a directory named params