In this video learn how to build an ERC-721 staking app, where a user can stake an ERC-721 NFT and earn ERC-20 tokens as a reward in return. We’ll cover everything from deploying all the smart contracts you need to building a frontend to interact with your contracts using thirdweb’s Connect SDK.
ERC-721 NFT smart contract: https://thirdweb.com/thirdweb.eth/DropERC721
ERC-20 Token smart contract: https://thirdweb.com/thirdweb.eth/TokenERC20
ERC-721 Staking smart contract: https://thirdweb.com/thirdweb.eth/NFTStake
GitHub Repo: https://github.com/thirdweb-example/youtube-erc721-staking
thirdweb API: https://thirdweb.com/dashboard/settingsa
Creating an API: https://youtu.be/G3bvXfE-OMg
thirdweb Docs: https://portal.thirdweb.com/
Join our Community of over 30,000 Web3 builders: https://discord.gg/thirdweb
thirdweb Official Site: https://thirdweb.com/dashboard
thirdweb Twitter: https://twitter.com/thirdweb
Timestamps:
00:00 Demo of an ERC-721 staking app
02:40 Overview of how to build an ERC-721 NFT staking application
03:25 Deploy an ERC-721 NFT smart contract
07:15 Deploy and ERC-20 token for reward token
09:20 Deploy an ERC-721 Staking contract and deposit reward tokens
15:45 Create a new Next.js project and install thirdweb Connect SDK
16:45 Setup and configure Connect SDK with Next.js project
21:15 Add a connect wallet component to web3 app
23:45 Setup and configure smart contracts with Connect SDK
27:20 Build an ERC-721 NFT claim button
34:25 Get owned NFTs to display within app
42:10 Create component to stake an ERC-721 NFT
54:50 Display staked ERC-721 NFTs
01:02:50 Build component to claim ERC-20 reward tokens
01:09:35 Test ERC-721 staking app
01:10:55 Conclusion
