Let's launch our own NFT collection - Crypto Devs
.
- There should only exist 20 Crypto Dev NFT's and each one of them should be unique.
- User's should be able to mint only 1 NFT with one transaction.
- Whitelisted users, should have a 5 min presale period before the actual sale where they are guaranteed 1 NFT per transaction.
- There should be a website for our NFT Collection.
Lets start building 🚀
-
What is a Non-Fungible Token? Fungible means to be the same or interchangeable eg Eth is fungible. With this in mind, NFTs are unique; each one is different. Every single token has unique characteristics and values. They are all distinguishable from one another and are not interchangeable eg Unique Art
-
What is ERC-721? ERC-721 is an open standard that describes how to build Non-Fungible tokens on EVM (Ethereum Virtual Machine) compatible blockchains; it is a standard interface for Non-Fungible tokens; it has a set of rules which make it easy to work with NFTs. Before moving ahead have a look at all the functions supported by ERC721
-
We would also be using
Ownable.sol
from Openzeppelin which helps us manage theOwnership
of a contract- By default, the owner of an Ownable contract is the account, that deployed it, which is usually exactly what we want.
- Ownable also lets you:
- transferOwnership from the owner account to a new one, and
- renounceOwnership for the owner to relinquish his administrative privilege, a common pattern after an initial stage with centralized administration is over.
-
We would also be using an extension of ERC721 known as ERC721 Enumerable
- ERC721 Enumerable helps us to keep track of all the tokenIds in the contract and also the tokensIds held by an address for a given contract.
- Please have a look at the functions it implements before moving ahead
To build the smart contract we would be using Hardhat. Hardhat is an Ethereum development environment and framework designed for full stack development in Solidity. In simple words we can write your smart contract, deploy them, run tests, and debug your code.
-
To setup a Hardhat project, Open up a terminal and execute these commands
mkdir nft_collection cd nft_collection mkdir hardhat cd hardhat npm init --yes or yarn init --yes npm install --save-dev hardhat or yarn add hardhat --dev
-
In the same directory where you installed Hardhat run:
npx hardhat
- Select
Create a basic sample project
- Press enter for the already specified
Hardhat Project root
- Press enter for the question on if you want to add a
.gitignore
- Press enter for
Do you want to install this sample project's dependencies with npm (@nomiclabs/hardhat-waffle ethereum-waffle chai @nomiclabs/hardhat-ethers ethers)?
- Select
Now we have a hardhat project ready to go!
If you are not on mac, please do this extra step and install these libraries as well :)
npm install --save-dev @nomiclabs/hardhat-waffle ethereum-waffle chai @nomiclabs/hardhat-ethers ethers
or
yarn add @nomiclabs/hardhat-waffle ethereum-waffle chai @nomiclabs/hardhat-ethers ethers --dev
and press enter
for all the questions.
-
In the same terminal now install
@openzeppelin/contracts
as we would be importing Openzeppelin's ERC721Enumerable Contract in ourCryptoDevs
contract.npm install @openzeppelin/contracts or yarn add @openzeppelin/contracts
-
We will need to call the
Whitelist Contract
that we had deployed at our previous github repo to check for addresses that were whitelisted in that project and give them presale access. As we only need to callmapping(address => bool) public whitelistedAddresses;
We can create an interface forWhitelist contract
with a function only for this mapping, in this way we would savegas
as we would not need to inherit and deploy the entireWhitelist Contract
but only a part of it. -
Create a new file inside the
contracts
directory and call itIWhitelist.sol
as shown in the repo... -
Now lets create a new file inside the
contracts
directory and call itCryptoDevs.sol
as shown in the repo... -
Now we would install
dotenv
package to be able to import the env file and use it in our config. Open up a terminal pointing athardhat
directory and execute this commandnpm install dotenv or yarn add dotenv
-
Now create a
.env
file in thehardhat
folder and add the following lines, use the instructions in the comments to get your Alchemy API Key URL and GOERLI Private Key. Make sure that the account from which you get your goerli private key is funded with Goerli Ether as shown in the repo... -
Lets deploy the contract to
goerli
network. Create a new file nameddeploy.js
under thescripts
folder as shown in the repo... -
As you can read,
deploy.js
requires some constants. Lets create a folder namedconstants
under thehardhat
folder -
Now add an
index.js
file inside theconstants
folder and add the lines of code to the file as shown in the above repo with the address of the whitelist contract that we had deployed at our previous projectgithub repo. For Metadata_URL, just copy the sample one that has been provided in this repo. We would replace this later. -
Now open the hardhat.config.js file, we would add the
goerli
network here so that we can deploy our contract to goerli as shown in this repo... -
Compile the contract, open up a terminal pointing at
hardhat
directory and execute this commandnpx hardhat compile
-
To deploy, open up a terminal pointing at
hardhat
directory and execute this commandnpx hardhat run scripts/deploy.js --network goerli
-
Save the Crypto Devs Contract Address that was printed on your terminal in your notepad, you would need it futher down in the tutorial.
-
To develop the website we would be using React and Next Js. React is a javascript framework which is used to make websites and Next Js is built on top of React.
-
First, You would need to create a new
next
app. Your folder structure should look something like- nft_collection - hardhat - next-app
-
To create this
next-app
, in the terminal point to nft_collection folder and typenpx create-next-app@latest
and press
enter
for all the questions -
Now to run the app, execute these commands in the terminal
cd next-app npm run dev or yarn dev
-
Now go to
http://localhost:3000
, your app should be running 🤘 -
Now lets install Web3Modal library(https://github.com/Web3Modal/web3modal). Web3Modal is an easy-to-use library to help developers add support for multiple providers in their apps with a simple customizable configuration. By default Web3Modal Library supports injected providers like (Metamask, Dapper, Gnosis Safe, Frame, Web3 Browsers, etc), You can also easily configure the library to support Portis, Fortmatic, Squarelink, Torus, Authereum, D'CENT Wallet and Arkane. Open up a terminal pointing at
next-app
directory and execute this commandnpm install web3modal or yarn add web3modal
-
In the same terminal also install
ethers.js
npm install ethers or yarn add ethers
-
In your public folder download and paste the images from this repo...
-
Now go to styles folder and replace all the contents of
Home.module.css
with code shown in this repo... -
Open you
index.js
file under thepages
folder and paste the codes shown in this repo... -
Now create a new folder under the
next-app
folder and name itconstants
. -
In the constants folder create a file,
index.js
as shown in the repo...- Replace
"addres of your NFT contract"
with the address of the CryptoDevs contract that you deployed and saved to your notepad. - Replace
---your abi---
with the abi of your CryptoDevs Contract. To get the abi for your contract, go to yourhardhat/artifacts/contracts/CryptoDevs.sol
folder and from yourCryptoDevs.json
file get the array marked under the"abi"
key.
- Replace
-
Now in your terminal which is pointing to
next-app
folder, executenpm run dev or yarn dev
Your Crypto Devs NFT dapp should now work without errors 🚀
Make sure before proceeding you have pushed all your code to github :)
We will now deploy your dApp, so that everyone can see your website and you can share it with all of your LearnWeb3 DAO friends.
-
Go to https://vercel.com/ and sign in with your GitHub
-
Then click on
New Project
button and then select your nft_collection repo -
When configuring your new project, Vercel will allow you to customize your
Root Directory
-
Click
Edit
next toRoot Directory
and set it tonext-app
-
Select the Framework as
Next.js
-
Now you can see your deployed website by going to your dashboard, selecting your project, and copying the
domain
from there! Save thedomain
on notepad, you would need it later.
Now lets make your collection is available on Opensea
To make the collection available on Opensea, we would need to create a metadata endpoint. This endpoint would return the metadata for an NFT given its tokenId
.
-
Open your
next-app
folder and underpages/api
folder, create a new file named[tokenId].js
(Make sure the name has the brackets as well). Adding the brackets helps create dynamic routes in next js -
Add the following lines to
[tokenId].js
file. Read about adding API routes innext js
here and copy the code as shown in this repo... -
Now you have an api route which
Opensea
can call to retrieve the metadata for the NFT -
Lets deploy a new
Crypto Devs
contract with this new api route as yourMETADATA_URL
-
Open your
hardhat/constants
folder and inside yourindex.js
and addconst METADATA_URL
=your domain which you saved to notepad
and add/api/
to its end as shown in the repo... -
Save the file and open up a new terminal pointing to
hardhat
folder and deploy a new contractnpx hardhat run scripts/deploy.js --network rinkeby
-
Save the new NFT contract address to a notepad.
-
Open up "next-app/constants" folder and inside the
index.js
file replace the old NFT contract address with the new one -
Push all the code to github and wait for vercel to deploy the new code.
-
After vercel has deployed your code, open up your website and mint an NFT
-
After your transaction gets successful,In your browser open up this link by replacing
your-nft-contract-address
with the address of your NFT contract in this link (i.e https://testnets.opensea.io/assets/your-nft-contract-address/1) -
Your NFT is now available on Opensea 🚀 🥳
You can check my final website here :- nft_collection
Special thanks 🙏🏻 to team@LearnWeb3DAO 😇