Teach you to get the sixth week of Alchemy Road to Web3 NFT

Usually use the default settings: all the way next, finally install, git installation is complete!

step2 Download Scaffold-Eth

1. Enter git clone https://github.com/scaffold-eth/scaffold-eth-challenges.git challenge-1- decentralized-staking, press Enter, wait a while for the download to complete.

2. Enter cd challenge-1-decentralized-staking in the console, and press Enter.

3. Enter git checkout challenge-1-decentralized-staking in the console and press Enter.

< /p>

4. Enter yarn install on the console, press Enter, and wait for a while.

5. You should see such a directory in the challenge-1-decentralized-staking folder.

Note: In this tutorial, we will mainly focus on Staker.sol and App.jsx. Write code for a file.

step3 Set the environment

Attention , and then use three separate consoles, I opened three consoles.

1. Enter yarn chain in the console to start your helmet backend.

2. Open another console, cd into that folder, and enter yarn deploy in the console.

3. Open another console, cd into that folder, enter yarn start in the console to start Your React front end.

Then we can see that the web page jumped out of this page! ! !

step4 Familiar with Scaffold-Eth (only take NFT, this step can be ignored)

In our default view, we have two tabs - Staker UI & Debug Contracts.

1. Send to local wallet Test coins, don’t click on that link yet! Copy the address in the upper right corner (this is the local address), then paste it in the lower right corner, and click on the little airplane.

2. You can see that there is a prompt below, and the balance in the upper left corner has changed.

3. Or here, click send. After topping up your local wallet, you will be able to interact with your contracts!

step5 In-depth study of Solidity

1 .Open vscode, click open folder, find the folder you created, and click to select the folder.

2. Find packages——hardhat——contracts——Staker.sol

3. Copy and paste the following code directly. (The official link explains each step, which is very interesting and interesting You can look at the module function corresponding to each piece of code, instead of simply pasting the final code haha, but if you use the official code, the rewardRatePerBlock on line 78 should be changed to rewardRatePerSecond, the following is the modified one)

step6 enter the front end

1. Find packages—— react-app --src --App.jsx. official link explains each step, very interesting and interesting You can look at the module function corresponding to each piece of code, instead of simply pasting the final code haha)

2. Copy and paste the following code into it.

3. Open the console again and enter yarn deploy -- reset, you can see that the front-end interface is slightly different from just now.

4. Test the stake function, click stake, and test it. It is said that normal deployment will prompt that the withdrawal time has passed. . .

step7 upload to github

1 .Log in to github and click New.

2. Fill in these three places, then pull directly to the bottom and click Create repository.

3. Click the code and copy the warehouse address for backup.

4. Then go to the local operation, first make sure you have successfully installed the Git software, on the computer Find the project folder you want to upload to Github on the Internet, enter the project folder, click the right mouse button, and select Git Bash Here, as shown in the figure below.

5. Next, enter the following code (key step) to clone the warehouse on github to the local

5. p>

git clone https://github.com/qpc666/road-to-web3-06.git（https://github .com/qpc666/road-to-web3-06.git is replaced with the address you copied before), as shown in the figure.

6. After this step, there will be an extra file under your local project folder Folder, the folder name is the project name on your github, as shown in the figure, I have added a road-to-web3-06 folder, we put all the files in the local project folder (except the newly added file Folder is not used), and the rest are copied to the new extra folder. (I don’t care if I leave it there, I’ll almost copy it when I go to play the king and come back. If the computer is too slow to play dota, it’s probably almost the same. After all, time should be used wisely)

7. Continue to enter the command cd road-to-web3-06 to enter the road-to-web3-06 folder (road-to-web3-06 is my The warehouse built, here should be changed to your own warehouse name)

8. Then enter the following codes in sequence You can complete other remaining operations:

git add . (Note: Don’t forget the following ., this operation is to add all the files under the Test folder)

git commit -m "Submit Information" (Note: "Submit Information" is replaced with what you need, or you can ignore it, here may appear the first one as follows As shown in the figure, follow the prompts to enter git config --global user.email "you@example.com" git config --global user.name "Your Name" will do)

git push -u origin main (Note: The purpose of this operation is to push the local warehouse to github, this step requires you to enter the account number and password)

9. When using Git for the first time, a box will pop up asking you to log in, put this Copy the code.

10. Click the link below the ninth step code to log in to your own git account, Then copy and paste here to authorize.

11. Just copy this link.

step8 submit project

Submit link

step9 Receive NFT

Original link

欢迎加入律动 BlockBeats 官方社群：

Telegram 订阅群：https://t.me/theblockbeats

Telegram 交流群：https://t.me/BlockBeats_App

Twitter 官方账号：https://twitter.com/BlockBeatsAsia