Alt Otters NFT Project on Evmos

Engineering

December 10, 2021

As we continued building on the Evmos Testnet, we decided it would be a fun idea to launch our own PFP NFT project. For those unfamiliar, that stands for "Profile Picture Non Fungible Tokens" and is one of the most popular kinds of collectible NFTs. At Alt, all of our team members are known as "Otters" & what better way to pay homage than by releasing a bunch of fun & sporty Otters!

Quick Banner we made to advertise our new NFTs!

Image Generation Process

The first step in building any NFT project is getting the artwork, so we quickly drafted up a proposal for our artist (essentially just that we wanted a bunch of otters doing sports) and they got to work!

What's special about Generative PFP projects is that with just a small collection of "traits" or "attributes" made by an artist, you can generate a large collection of unique profile pictures. Each image layer is randomly stacked on top of the others, so just 5 layers with 10 possible choices each, already lets us generate 100,000 (10^5) unique Otters.

Photoshop file showing the dozens of different layers on the right edge

Next, we assembled all of the image layers into a single .PSD and then wrote a few scripts to automate full Otter generation! Photoshop supports external automation through scripts written in Javascript, and was relatively straightforward to implement. Their excellent ScriptingListener plug-in made it easy to determine the correct events and functions to call for various actions in Photoshop. It took a little while to run + upload to S3, but once complete we had thousands upon thousands of Otter PFPs + their metadata ready to rock! While many projects tend to choose an IPFS based storage system to make sure their NFTs are long lasting, most do start with a simple web server before transitioning over to IPFS once the mint is complete!

A small selection of the thousands of generated Otters! Centered is the rarest Otter "F1 Driver", with a <2% mint rate!

The Contract

One of the best things about Evmos is that it supports Solidity & EVM so all code written for Ethereum runs perfectly! With that in mind we were able to start the NFT contract with a great base using OpenZeppelin's ERC 721 contract. In addition, all of Ethereums tools are compatible as well, so we were able to use the Remix IDE & Metamask for all of our testing & our deploy.

Past just a basic NFT, we wanted to have a special feature for those who sent it to others and added a leveling system. Every time an Otter was transferred, we had the level increase by 1 (up to 10 max), and your Otter's background color would change by updating image & metadata via setTokenURI.



function levelUp(uint _tokenId) private {
        if (level[_tokenId] > 0 && level[_tokenId] < MAX_LEVEL) {
            level[_tokenId] = level[_tokenId] + 1;
            _setTokenURI(_tokenId, string( abi.encodePacked(uint2str(_tokenId),uint2str(level[_tokenId])) ) );
        }
    }

function _beforeTokenTransfer(address from, address to, uint256 tokenId)
        internal
        override(ERC721, ERC721Enumerable)
    {
        super._beforeTokenTransfer(from, to, tokenId);
        levelUp(tokenId);
    }
    

Wallet Integration

To make it easier for other to view & mint their Otters, we integrated our NFTs with our web wallet as seen below. Helps to abstract away any direct contract interaction & make it doable for anyone brand new to web3!

Alt Wallet + NFT Mint page

Verifying Contract

To finish up, we used the great poa-solidity-flattener to flatten all of our dependencies + our contract down into one file and verified on the Evmos Explorer! You can view the source code of our NFT contract right here.

**😊 Thanks for reading, and please mint yourself an otter right here → http://evmos-wallet.onlyalt.com:3000/mint

And join us in the Evmos community! → https://discord.gg/8Xd29MU4DE**