Behind the Scenes of an NFT Collection, Part 2: The Mint Website

This is part 2 of a 3-part series providing a behind-the-scenes look at the launch of Orcanauts, an impact-driven NFT collection on Solana. Missed part 1? Head over here.

In part 1, we explored the generative art processes we used to create the Orcanauts. In part 2, we’ll detail our journey creating a mint website that was easy and enjoyable to use!

Making the Mint

To appeal to the Orca community and prospective NFT collectors, we were keen to show off as much as we could about Orcanauts before launch. With that in mind, we built a gorgeous compilation of everything related to the collection here; we wanted to bring the art as front-and-center as possible, including a teaser of what was to come. Even though we didn’t know what the possible Orcanaut combinations were going to look like, we did know what the constituent traits would look like, so we previewed them on the “lazy river”, floating along their merry way!

Right up top, we highlighted the most critical information: when the Orcanauts would be released, how large the collection would be, and the mint cost. Beyond that, we also covered the future development roadmap for the Orcanauts, the revenue breakdown, and more details about our non-profit partner, Aflatoun.

Tooling Up

The site was a pretty basic installation of create-react-app, styled-components, and material-ui, which are all libraries that are fairly prevalent in the React ecosystem to make it easy to get started with a set of pre-built components. Since we were sending basic transactions over to Solana, we didn’t need anything more than that, hence why we didn’t need something more heavyweight like Next.js.

To handle the operational complexity of sending transactions over-the-wire to Solana, we used many of the libraries provided by Solana themselves, including a modified version of @solana/wallet-adapter-material-ui that supported the newest version of material-ui. The Solana wallet adapter library provided enough working code to handle the operations needed for the mint: connecting their wallet, disconnecting their wallet, and signing / sending the transaction itself.

The Mint Button

Easily the star of the show, the mint button was the most critical part of the website. We used a modified version of the mint button extracted from exiled-apes/candy-machine-mint that fit our style-guide. While the repository exposes the entire minting website and not just the button, it was relatively easy to extract the button and its supporting dependencies and drop it into the context of the mint website.

Creating a Delightful Process

We wanted to make the minting process as exciting as possible, and were sure to provide as much context back to the user as to the state of the minting transaction. We especially wanted the website to celebrate a successful mint — these Orcanauts are just so darn cute!

Due to the structure of Solana transactions, certain pieces of information are known to the client before sending information to the blockchain. In our case, the most important piece of information was the metadata address, the public key associated with the metadata of a new Orcanaut. Using just that address, we were able to use the @metaplex/js library to retrieve important information from our newly adopted Orcanaut — the image of the Orcanaut itself! On every successful adoption, we replaced the hero image up top with your adorable ‘naut for you to admire.

Measure twice, cut once

As mentioned previously, the golden rule of Solana transactions is that all accounts used in a transaction must be provided by the client; if there are any mismatches, a well-written contract will reject the transaction. When building a mint website for use with the Metaplex Candy Machine, here’s a few things to double-check before you launch to users:

• The treasury wallet (if not provided during the initialization of the Candy Machine, it will default to the keypair that was used to make the call)
• The address of the Candy Machine
• The address of the Candy Machine config

The latter two can be found by running the show command on the candy-machine CLI. Make sure you pass the correct environment and keypair!

DISCLAIMER: These tips are mostly for Candy Machine v1, which has been deprecated. Please evaluate Candy Machine v2 for any minting needs!

Phew! That was a lot of information, but the existence of these wonderful libraries make it relatively accessible to understand exactly what is needed to both query the Candy Machine as well as mint the actual NFTs. In part 3, we’ll explore more about the Candy Machine and how to prepare yourself for primetime!

Disclaimer: The content of this communication is not financial advice and should not be relied on by any persons as financial advice. This communication has not been provided in consideration of any recipient’s financial needs. We have not conducted any financial assessment based on the personal circumstances of any recipients. All persons are encouraged to seek their own independent financial advice prior to taking any further action.