In the past month and December of last year, I had started trying to convince a school friend to start coding. Here comes the building fun projects to try to make it seem fun; meme generator + nfts.
Contents
- Project
- Smart Contracts — ERC721
- Front End Interactions
Project Details
You can find the meme minter on github, and on firebase. Note that it is built on ropsten, so you would want to collect some Ropsten Eth first (as the minting costs a bit of gas).
The Project
The project was created thru three parts: An ERC721 smart contract, Ethers.js libraries in the frontend and the meme generator itself.
Smart Contracts
For this project I used alchemy and hardhat to deploy to Ropsten Network.
Alchemy is a blockchain developer platform and API that allows us to communicate with the Ethereum chain without having to run our own nodes locally.
Simply, they are workers who help us shoot the smart contract onto the ropsten blockchain.
When working with files and code, hardhat is a very useful developer tool to initialize your web3 project (similar with truffle).
After initializing the Hardhat project, I started writing the contract.
The Contract (ERC-721)
Each person has their own personality, and so each smart contract have their own “style” to them.
Well you may ask, why is there these different “styles” (types of contracts)? Why limit creativity?
Though I do agree we should be free of the shackles of frameworks, these modern day contracts aren’t just used by a dapp(s) internally, other applications, users and companies may rely on the same contract function. Chaos! It may just be a whole confusion pool of docs if not for universally agreed upon token standards.
ERC-721 is a non-fungible token standard. Essentially meaning an interface/class which is to be implemented in the smart contract of an NFT. (Using solidity lang).
IERC721 Required functions:
balanceOf(owner)
ownerOf(tokenId)
safeTransferFrom(from, to, tokenId)
transferFrom(from, to, tokenId)
approve(to, tokenId)
getApproved(tokenId)
setApprovalForAll(operator, _approved)
isApprovedForAll(owner, operator)
safeTransferFrom(from, to, tokenId, data)I cover more of this in my introductory to nfts article.
^ Thats my contract! Simple right??
All thanks to OpenZeppelin’s support of erc721 standards as a importable library, the code that I wrote is way less than what you’d actually have to implement in solidity. Check out their entire implementation.
mintNFT is the core of the project (Calling that function from react when I mint a meme). The smart contract function receives an address to mint to, and a tokenURI.
The tokenURI is the metadata of the nft being minted. Like a json file representing all of its attributes and detail. Here’s a spoiler from the front end:
And this specific nft is now immortalized on ropsten.
IDs
Ids are really useful in erc721. Cuz NFTs are unique, we need to map each nft to ideally some numerical sequence that makes gathering information of the nft easy. At the bottom of mintNFT method, see the line:
return newItemId;Using the new item id, we can interact with the other methods of the smart contract that take in tokenIds to retrieve data. Example: OwnerOf(tokenId)
Thats pretty much it on the smart contracts side. If you would like to replicate this project’s nft deployment side: Check out this tutorial
- Alchemy account + api
- Hardhat project initialization
- Smart contract writing + deploy
Front-End elements
Front end for this project is very web2, react based. React especially is a great lang to use with web3 apps cuz of its ability to react to changes in data.
Some core components that I used in the project:
- Account connection first (in window.ethereum)
- Connecting to web3 provider (Injected Metamask requesting) + Retrieving signer
- Connecting to the chain and creating instance of contract (abi used)
- Initializing the tx (minting memes!)
In this project I have used ethers.js to do these things above.
Basic Connection
First we gotta establish a connection with metamask to do any other thing with the application.
This is using the ethereum (library) Reference: eth.requestAccounts. for example, you might do so like this:
Providers + Signers
Providers are the ones who are talking with the Ethereum blockchain. We need to make deals with the eth chain through them.
We get the provider through ethers, and put the provider instance some where.
Signers. They are the users’ accounts that will be going on the webapp. They are an abstraction of the users’ accounts, so we can make state changing transactions (then the cool metamask notification pops up).
Since js executes stuff simultaneously, you should init the provider, but call another function to init the signer using the provider variable as the argument to delay the .getSigner() call after the provider has been made.
Contract connection
handleNFT is one of the functions in frontend. It mints the nft thru interacting with my contract on chain using the provider.
It first retrieves a copy of the contract:
const nftcontract = new ethers.Contract(contractAddress, nftAbi.abi, web3provider); - abi is the json file from artifacts folder after compilation (helps your instance understand what to call)
- contract address and web3 provider are pretty literal
Then, we connect it to the signer, so that we can call state changing methods on chain:
const nftwithsigner = nftcontract.connect(web3provider.getSigner());Finally, the minting!
const tx = await nftwithsigner.mintNFT(accountuse, metadata)We can just use the nftwithsigner contract instance to call a solidity contract method and pass in whats needed from the solidity arguments
accountuse: String account address
metadata: json file for the meme
How I made metadata?
generateJSONFile triggered the handleNFT function way above after call with the metadata (json file).
Thats it
yea! that was basically the logic behind my meme-nft-generator thingy. Thanks for reading!
TLDR:
- Hardhat + Alchemy + OpenZeppelin Libraries for ERC721 NFT contract
- React (create-react-app)+ Ethers.js for frontend interaction
