This practical work contains several tasks for interacting with NFT smart contract using a simple front-end application. Here are the instructions you need to follow:
To prepare for this lab work, the following steps are required:
-
Installed code editor (Visual Studio Code or an alternative one)
-
Installed node js
-
You can check if the installation is successful by running the command
npm -v
-
Installed the Metamask browser extension.
-
Connect Metamask to the Q testnet
- Network name: Q Testnet
- RPC URL: https://rpc.qtestnet.org
- Chain ID: 35443
- Currency symbol (with space): "Q "
- Block explorer URL: https://explorer.qtestnet.org
-
Create a new Metamask address (do not use a personal account so not to compromise your data)
-
Get test tokens to the created address using Q faucet
-
Copy the code of lab work from GitHub. This can be done in the following ways:
- download the repository as a zip archive and unzip it to the desired location
- use the built-in "Clone Git Repository" function of Visual Studio Code Editor (here you will need to copy the link from the repository)
-
Open the folder with the lab from the previous step in the code editor
-
Create a copy of the
.env.example
file and name it.env
-
Get the private key of your account (that has test tokens on) in the Metamask This can be done as follows:
- in the browser extension go to Account details
- click on Export private key and enter your Metamask password
- copy the uncovered private key
-
Insert the copied private key into the
.env
file you created as thePRIVATE_KEY
variable -
Open a terminal in the code editor and enter the command:
npm install
This command will install the necessary dependencies for the contract deployment and local operation of the frontend
-
After running the command above, enter the next command:
npm run deploy-contracts
This command will deploy the contract that is in the lab work. After the command is complete, the terminal will display the address of the contract. Please copy the address
-
In the
.env
file replace the value of the variableVITE_ERC721_ADDRESS
with the copied address⚠️ Before proceeding, if you are using Windows OS, you need to replace line 14 inpackage.json
file with following command:"start-web-client": "npm run copy-file-win && npm --prefix ./web-client run start"
-
In the terminal, enter the command:
npm run start-web-client
After its completion, there will be a link in the terminal to the front end application that has been set up locally.
-
Click on the link to open the front end application that works with the contracts you deployed.
After successfully completing the preparation part, please complete the following tasks:
- Check the basic flow opeartion:
- Mint an NFT with image links (you can upload the desired image to ipfs yourself or get the link to the image on Google
⚠️ please make sure that you have copied the link to the actual image⚠️ ) - Transfer an NFT to another address (this can be your second Metamask account)
- Switch to that address to see the differences that will be in the interface
- Use the address search. Take a look at your main and secondary accounts
- Mint an NFT with image links (you can upload the desired image to ipfs yourself or get the link to the image on Google
After you have completed steps above, locate to the code editor and execute the following command control + C
. After that the frontend will be halted
-
Transform an existing NFT contract into an SBT contract. To achieve that, add some necessary code in the
SimpleNFT.sol
file. The comments in the contract will guide you. Locate the file here:NFT-LAB/core-contracts/contracts/SimpleNFT.sol
You will have to provide a simple solution that makes the issued tokens non-transferable. As a hint, you can look up for already existing SBT contracts to take away what can be used to complete the task
-
After you made changes to the
SimpleNFT.sol
file you need to redeploy the contract and restart the frontend part. The deployment instructions can be found in the steps 6-9 in the Preparation part of the lab -
After you added the required changed to make the contract an SBT, the transfer function on the front end will throw an error. If you see one, you successfully completed the task!
-
Take the address of the contract your friend deployed and follow the steps 7-9 in the Preparation part. You should see the NFTs your friend has minted. Also try to complete the step 1 in the Tasks section
-
Some of the features of the contract you didn't deploy will not be available for you. Check what those features are and how they work
-
Enhance the front end to enable minting tokens to a specific address. The function
mintTo
is already in the contract and you will have to implement its support. Add a field in the front end form where you will be able to enter an address to receive an NFT or SBT upon minting. After introducing the changes, follow the steps 8-9 from the Preparation part of the lab