This repo provides a nice and easy way for linking an existing NFT smart contract to this minting dapp. There are two ways of using this repo, you can go the simple route or the more complex one.
The simple route is so simple, all you need to do is download the build folder on the release page and change the configuration to fit your needs. (Follow the video for a walk through).
The more complex route allows you to add additional functionality if you are comfortable with coding in react.js. (Follow the below instructions for a walk through).
If you are cloning the project then run this first, otherwise you can download the source code on the release page and skip this step. In order to make use of this dapp, all you need to do is change the configurations to point to your smart contract as well as update the images and theme file.
For the most part all the changes will be in the public
folder.
To link up your existing smart contract, go to the public/config/config.json
file and update the following fields to fit your smart contract, network and marketplace details. The cost field should be in wei.
Note: this dapp is designed to work with the intended NFT smart contract, that only takes one parameter in the mint function "mintAmount". But you can change that in the App.js file if you need to use a smart contract that takes 2 params.
We will easily create our own NFT on the Rinkeby Chain. We can edit the name of the character in the generate-character.js
script.
This will create a character with 6 attributes from 0 - 99:
- uint256 strength;
- uint256 dexterity;
- uint256 constitution;
- uint256 intelligence;
- uint256 wisdom;
- uint256 charisma;
And then:
- uint256 experience;
- string name;
Right now this repo only works with rinkeby. Run the following.
You'll need a MNEMONIC
and a rinkeby RINKEBY_RPC_URL
environment variable. Your MNEMONIC
is your seed phrase of your wallet. You can find an RINKEBY_RPC_URL
from node provider services like Infura
Then, you can create a .env
file with the following.
MNEMONIC='cat dog frog....'
RINKEBY_RPC_URL='www.infura.io/asdfadsfafdadf'
Or, set them in a bash_profile
file or export them directly into your terminal. You can learn more about environment variables here.
To run them directly in your terminal, run:
export MNEMONIC='cat dog frog....'
export RINKEBY_RPC_URL='www.infura.io/asdfadsfafdadf'
Then you can get started with:
git clone https://github.com/PatrickAlphaC/dungeons-and-dragons-nft
cd dungeons-and-dragons-nft
yarn
truffle migrate --reset --network rinkeby
This will deploy your D&D NFT!
You can now try it out:
truffle exec scripts/fund-contract.js --network rinkeby
truffle exec scripts/generate-character.js --network rinkeby
truffle exec scripts/get-character.js --network rinkeby
This will create a new character with random stats!
Depending how often you deploy, you can pick which character by changing the dnd.getCharacterOverView(1)
command in get-character.js
to swap the 0
out with whatever tokenId
of the character you like.
This will give you the overview of your NFT. You'll see BN
since the call returns big numbers, you can cast them to ints to see what they are.... Or you could go one step farther
You can get an Etherscan API key for free and interact with the NFTs on chain. Then set ETHERSCAN_API_KEY
as an environment variable.
yarn add truffle-plugin-verify
truffle run verify DungeonsAndDragonsCharacter --network rinkeby --license MIT
This will verify and publish your contract, and you can go to the Read Contract
section of etherscan that it gives you.
Otherwise, you can use oneclickdapp and just add the contract address and ABI. You can find the ABI in the build/contracts
folder. Just remember it's not the whole file that is the ABI, just the section that says ABI
.
Once we have our NFTs created, we need to give them a tokenURI
. TokenURIs are the standard for showing the data of NFTs to the world. This makes it easier to store things like images since we don't have to waste the gas of adding them on-chain.
The TokenURI represents a URL or other unique identifier, and it is an .json
file with a few parameters.
{
"name": "Name for it ",
"description": "Anything you want",
"image": "https://ipfs.io/ipfs/HASH_HERE?file.png",
"attributes": [...]
}
We are going to be storing these images and meta data in IPFS. You'll need both:
IPFS is a peer to peer network for storing files. It's free and open sourced, and we can use it to host our tokenURI. The IPFS companion let's us view IPFS data nativly in our browsers like Brave or Chrome. And Pinata allows us to keep our IPFS files up even when our node is down (don't worry about that for now)
Once our IPFS node is up, we can start adding files to it. We first want to upload the image of our NFT. What does this D&D character look like? Add it to your IPFS node and then "Pin" it. Once pinned, you can get the CID of the pinned file, and make sure it stays pinned by pinning it on your Pinata account. Don't worry, it's free! This will just help keep the data up even when our IPFS node is down.
Once we have the image pinned and up, we can get the link for that image. It'll look a little something like this:
https://ipfs.io/ipfs/QmTgqnhFBMkfT9s8PHKcdXBn1f5bG3Q5hmBaR4U6hoTvb1?filename=Chainlink_Elf.png
This is a real link, and if you click it and nothing renders, your IPFS companion might not be working, or your IPFS node is down.
Once we have our image, we can add it to our metadata .json
file, and add our stats in there. You can see some samples in the metadata
folder. We want to use the values of our characters that we got off-chain, so be sure to verify what the random numbers you got on etherscan! Once we have the .json metadata file, we want to add that to IPFS as well, and pin it too!
This metadata json file is going to be our tokenURI
, so we will modify our set-token-uri.js
with the tokenId
of the NFT we are giving a picture to, and adding the ipfs tokenURI.
Then we just run it like:
truffle exec scripts/set-token-uri.js --network rinkeby
Now, we can get the address of our NFT and head on over to the opensea testnet marketplace to see if we did it correctly. If done correctly, it'll look something like this.
Here is the link for adding your testnet NFT contract to be viewed on opensea.