This boilerplate is for NFT Minting applications. Using this boiler plate, a minting site can be created in about 30 minutes.
I will now show you how to use this boilerplate.
Demo application is here
Need help? Ask in our discord.
First, metadata and images for NFT must be stored in storage.
For example, if you wish to issue 30 NFTs, create directories and files like the following.
- images
- 0.png
- 1.png
- 2.png
- ...
- 29.png
- json
- 0.json
- 1.json
- 2.json
- ...
- 29.json
The JSON file looks like this.
Since the image field requires the URI of the image to be entered, the first step is to save the images somewhere and then enter the URI in the JSON.
0.json:
{
"name": "Bunzz #0",
"description": "Bunzz NFT",
"image": "<URI for image>",
"edition": 0,
"date": 1664941479203,
"attributes": [
{
"trait_type": "Background",
"value": "Black"
},
{
"trait_type": "Bottom lid",
"value": "High"
},
{
"trait_type": "Top lid",
"value": "Middle"
}
],
}These JSON and images can be created manually, but there is a useful tool called hashlips that can be used to create generative NFT.
The basic generative NFT is created by creating multiple images, one for each layer of background color, hat, etc., and combining them. hashlips is a tool that makes it easy to do this.
https://github.com/HashLips/hashlips_art_engine
We will use this repository, so download it.
$ git clone https://github.com/HashLips/hashlips_art_engineGo to the hashlips directory and install the dependencies.
Note: Use node version 14.18.x.
$ yarn installBy default, there are these layers, each containing images in its own directory. The generative NFT overlaps one image from each layer to produce a single image.
For use in a production environment, try replacing these images to create your own generative art.
If you replace it, please also change the following part of config.json.
Determines the number of images to be generated. Set the value growSizeEditionTo in config.json to any value you like. This time, we will set the number to 30.
In addition, change line 343 in main.js as follows.
- let i = network == NETWORK.sol ? 0 : 1;
+ let i = 0;This is because the NFT contract used in this project has a token ID that starts with 0, so the file name is also set to start with 0.
Now let's create the image and JSON files.
$ node index.jsThe deliverables are contained in the build directory.
First, upload the image files to IPFS. You can use a service called Pinata.
https://app.pinata.cloud/pinmanager
Select the folder upload.
Upload the build/images you just created.
Enter any name you like. When you are done, click Upload.
Once the upload is complete, you will see the following row.
As introduced in first section, the URI of the image must be entered in the image field of the JSON file.
Paste the CID from earlier after ipfs:// in the baseUri of config.js
Then execute the command.
$ node utils/update_info.jsThe contents of build/json will then be rewritten so that the image field of each JSON file points to the uploaded image.
Now upload the build/json directory to IPFS in the same way as for build/images.
Having uploaded the JSON and image files to storage, the next step is to prepare the smart contract.
Please access to Bunzz.
Once accessed, connect to the wallet.
Once connected, make sure you have enough MATIC. If you do not have enough MATIC, you can get it here.
Then click on "Create Dapp".
Next, enter a name.
Next, select the chain. Here we will use Mumbai Testnet.
Then go to the All tab and type "leadedge".
Then click on "Add+". And click "Continue".
Finally, enter the arguments for the contract.
| argument name | description | |
|---|---|---|
| name_ | Contract Name(displayed as Collection Name at Marketplaces) | test |
| symbol_ | Symbol of a token (NFT), like USD or YEN. For example, BAYC, AZUKI, etc. | TEST |
| baseTokenURI_ | IPFS can also be used for the baseTokenURI. For example, Pinata is easy to use | ipfs://QmZtTG47eDgLLdMzuuQSCwJ4YKEuNRNv6hZ5tD82ah6Fyb/ |
| maxSupply_ | Maximum number of NFTs that can be minted. Set the quantity that can be sold out. | 30 |
| preCost_ | Mint cost when presale (= only WL users can mint) | 30000000000000000 |
| publicCost_ | Mint cost when public sale | 30000000000000000 |
| maxMintableQuantityPerWL_ | Mintable quantity per WL slot(=WL user) | 3 |
| mintableLimitPerTX_ | Upper limit of mintable in one tx. bot prevention | 3 |
When you are finished, click Deploy.
Dapp will then be created and a modal for deploying the module will appear.
Click "Confirm" to deploy.
Deployment is complete.
This contract also includes an NFT sales feature for whitelisting, but we will not be using that feature in this case, so we will turn that feature off.
The documentation details how to turn off that feature.
- After a presale, start a public sale duration by calling the setPresale and the pause
Now close the modal and click on the down arrow button to the right of the module name.
Then the list of functions of the contract will be displayed, and you can actually interact with the contract.
Call the setPresale and pause functions to stop the white list sales function.
The final step is to build a front-end application that communicates with the smart contract.
Please download the this boilerplate first.
$ git clone https://github.com/lastrust/boilerplate-for-nft.git
$ yarn installPlease create .env file in root directory of the project (boilerplate-for-nft/.env).
The method of obtaining each value will now be explained.
REACT_APP_CONTRACT_ADDRESS=<your contract address>
If you are using something other than Mumbai Testnet, change the following constants as needed in file src/const/networkInfo.
When you are ready, launch your application.
$ yarn startWhen you start up the application, you will see a screen like this.
Please click "Connect" button. And test mint.
If successful, the minted NFT is displayed as follows.
This is an introduction to the use of this module🎉 Thank you.