How to create an ERC20 staking app

hey what's up everyone and welcome back to another video in today's video we are going to be building an erc20 staking application this application is going to allow us to stake an erc20 token and then we'll be able to earn a reward token based on the amount of the token that we have state we're going to cover a few things in this video we're first going to create our staking token contract which will be a erc20 contract we will then create another erc20 contract which will be our reward token and finally we will create an erc20 staking contract which will allow us to stake our staking token and earn our reward token and have our user be able to claim those tokens when they choose to do so and then we'll end everything by building a front-end application that a user can interact with and some visuals so that someone can see how much of the reward token they are earning based on the amount of stake tokens that they have so let's take a quick look at the demo of this application right here on my computer I have the app that will be building we can see we have a bit of information here we have our stake token in the top left it will say how much of the stake token we currently own we'll also have the reward token which is the token that we will be paid out based on how much tokens we have state now below here this is where the staking happens you can see we can earn reward tokens on the left hand side we have our stick token which currently we have 200 tokens staked we can choose to stake or unstake an amount and then on the right side we have our reward token and you can see here our reward token is generating and we can claim this reward token when we choose to do so so we'll stay here we'll add another 100 tokens to our stake token and we can stake that we'll just say 100 as the Max and we'll continue and approve that transaction and we'll confirm that to stake our tokens you can see our stake was successful and we have now 300 of our stake tokens staked and we can see here we are still generating our reward tokens I currently have what is this 500 000 of this reward token we're gonna claim 2700 So we get this claim here we'll be able to confirm that transaction and claim the reward tokens that we earned for staking so far you can see there the reward tokens have been removed our rewards were claimed successfully and we now have 503 000 reward tokens and then the same thing goes for unstaking if someone wanted to unstake all their tokens we could unstake the 300 tokens that we do have staked confirm that transaction and we can then unstake all those tokens and you can see after that it's unsticked we are back to a million stake tokens right up here and there you have it that is the demo of the erc20 staking application that we are going to build so without wasting any more time let's jump right into it okay so on a computer here I am on third web's website and I have connected my wallet if you haven't done so already you can connect your wallet in the top right and the first thing we're going to do is browse contracts here now we're going to deploy our two erc20 token contracts this is going to be our staking token and our reward token now there are two different token contracts you can deploy the regular token contract and what this will do is when you mint your tokens they will be minted directly to the wallet that you minted them with there is another token contract if you drill come down here under drops and it's a token drop contract it allows you to essentially sell your erc20 token so people can pay to claim these tokens so if that's something you want to do you're going to want to deploy a token drop contract but for this demo purpose because I'm just going to be using the wallet that I deployed this with I'm just going to use the regular token contract here so we can click on that up in the top or right we're going to hit deploy now and we're going to name this I'm going to name it stake token and we're going to give it a symbol of stake here you can add an image a description and you can configure the platform fees and the wallet for your primary cell recipient here at the very bottom you're going to choose the network or chain you want to deploy this contract to we're going to deploy it to the Mumbai test net but if you select that you can search any evm compatible blockchain that you want to deploy your contract to right in here once you have that set we'll select deploy now we'll confirm that transaction and we'll sign to add it to our dashboard once we have that created we can see here on our overview page if we look at our token details we don't have any of our stake tokens yet on the left navigation here under the extensions there is a tokens tab we can select that and in that tokens tab there is a mint button so if we select the mint we can now mint the tokens that we want for our stake token so I'm going tournament 1 million stake tokens here and we're going to hit mint tokens we're going to confirm that transaction and once that goes through you can see we have now 1 million stake tokens and we own 1 Min State tokens within this wallet I'm gonna open up a new tab here to create a new contract and we're going to deploy a new one and we're going to deploy the same token contract right over there this time when we hit deploy now we're going to deploy our reward token which is going to have the reward symbol and again you can configure these to your liking the network or chain you want to make sure you have it on the same network here and we're going to select deploy now we'll then confirm that transaction and we'll sign to add it to our dashboard once it deploys we're going to do the same thing for reward token that we did to our stake token so on the left hand navigation here will come to the tokens tab we'll select mint and we'll mint uh 1 million reward tokens as well so let's mint those tokens we'll confirm this transaction and you can see we now have 1 million reward tokens and we own all one million here we're gonna open up one more tab again this time we are going to deploy a con contract and we're going to scroll down to the bottom under our day staking section there is a stake ERC 20 contract and this is going to be the smart contract that takes care of our staking so a user can stake our stake token and in return earn a reward token and we're going to be able to set up the rewards and kind of the amount that is rewarded to the user that has their tokens staked so we click on deploy now we can name our contract here I'm just going to call this erc20 stake and I'm going to call this erc20s for a token or a symbol here now this staking contract is going to need a few things so the first thing it's going to ask for is our erc20 reward token contract address so we come back to our reward token here under the name you can copy the contracts address right over there you can come back in and paste that in there next we're going to need the staking token address so we'll come up to our stake token copy that come back down here and paste that one into there next we have the time unit for rewards so this is going to be a number and it's going to be in seconds so the example gives us is if we want to put that we're going to reward out our reward tokens every hour then it's going to be 3 600 seconds for there being 3 600 seconds in an hour just so we can see this quickly I'm going to put 60 seconds which is going to reward us every minute then down here this is going to be our reward ratio we have our numerator and our denominator and the example they gave us is 1 20th and this implies that one reward will be given out for every token a 20 token state so our numerator is going to be first I'm just gonna put one and four denominator I'm going to put a hundred so the reward is you'll get rewarded one token for every 100 tokens that you have state and that is going to be our reward ratio right there I'm going to deploy this to the same um by testnet select deploy now confirm this transaction Here sign to add this to your dashboard and once that's deployed you'll be brought to your overview section here now there's one more thing we need to do before we start building our application and that is to deposit our reward tokens to our staking contract so it can reward it out to the users when they claim it now we first need to set approval to approve our erc20 con staking contract to spend those tokens so I'm going to copy the staking contract address right there I'm gonna come back to our reward token under the Explorer tab this is going to show us our read write functions of our smart contract and under the right functions there is the approve function here we are going to paste in our erc20 staking contract address there and we're going to approve it for a certain amount of tokens now this amount does need to be in way and if you want we'll drop like a weight converter down at the bottom but I'm going to just say we're going to allow it to spend and 500 000 tokens so the amount you want it to that you want should go into ethers the amount or value that you're gonna copy is the way value here and if you come back to our reward token that is the amount that you're going to put into this amount so again it is going to be in way and then you can execute that transaction uh we're just going to do 500 000 is the max here so we're gonna hit oh not Max sorry 500 000 right next approve and we can see there that went through so if we come back to our erc20 staking contract now under the explore tab for this one for the rate functions we're going to deposit our reward tokens into our staking contract and we're gonna put that same value of 500 000 but convert it to whey and we're going to then execute that I'm going to confirm that transaction here and you can see here that went through so if we check out our reward tokens really quick and go to overview um you can see our reward tokens we still have a million for the supply this wallet now only owns 500 000 because the remaining 500 000 was deposited into our staking contract so now that we have all of our contracts set and we have some reward token deposited into our erc20 staking contract we can now build our application I'm going to open up my terminal here and the first thing we're going to do to create our application is I'm going to do MPX third web I'm gonna do at latest just so I get the latest version and I'm going to do create app all right we're going to name our project I'm just going to name this erc20s for staking we're going to select evm because we did do this on the Mumbai testnet and I'm going to use next and typescript for this application and once that is completed we're just going to change directory into our erc20s here and for this demo I'm going to be using chakra UI which is a UI Library that's just going to help me build out this app have to look very nice in a quick amount of time for this demo now feel free to use chakra as well or feel free to use any UI library that you want or create your own styles for your application but I am going to install chakra really quick right here and I'm then going to run this in my code editor now let me just zoom in here really quick now what we're going to do is under the pages folder there is an underscore app.tsx file and we're going to set up a few things first we're going to set up this active chain and I'm going to switch this over to Mumbai because that is the chain that we deployed our contracts to I'm also going to just set up my chakra UI in here by installing importing chakra provider and just wrapping this really quick right over there all right now I'm going to come back to my directory here and I'm going to create a new folder this one is going to just be called constants and this is going to hold our contract address because we are going to use it quite a few times within our application here so in there I'm going to create a new file called addresses dot TS and I'm going to paste in and let me just get rid of these and I'm going to paste in this here and this is just going to store our staking token our reward token and our staking contract addresses and again we can just grab that from our dashboards here so this is our reward token which is that one you can come over to our stake token here just that top one and then we can grab our taking contract address which is this one right here and we'll just save that that way we can use these contract addresses throughout our application right so coming back to Pages here in our index.tsx file there is some templated code here we're just going to get rid of this stuff we don't need it in this one I'm gonna get rid of this connect wallet because we're not going to use it here and I'm just going to create create a container really quick and in that container I'm just going to put a heading here and this heading is just going to say erc20 uh staking app right we can actually open up our terminal here and I'm just going to run yarn Dev to take a look at our application here let's open this up in our browser and we should just see the title yep so we have erc20 staking app here let's just come down here remove that and the next thing we're going to do is create a nav bar for application so coming back to our files here I'm just going to create a new folder called components and the first component we're going to create is our nav bar I'm gonna do navbar.tsx and I'm going to copy a few things here to import which is just some UI stuff from Chakra and a connect wallet button from third web and then for our navbar component here I'm going to just create a container with a Max width of 1200 pixels and some padding on the top and bottom and I will then create a flex just to put everything into a roll and push them to the sides of our application on the left hand side we're going to have our heading that's going to say our token sticking app and then I'm going to add a connect wallet which is a UI component from third web that all you need to do is add this connect wallet button and you now have a feature where a user can connect their metamask wallet coinbase or any wallet that they choose and it will connect directly to our application so save that we'll actually come back to our underscore app TSX file here and above our components here we will add that nav bar right and then back in our index I'm just going to get rid of the heading that we put there and if we come back and take a look at our app we can now see our tokenstaking app our title there and disconnect wallet button so if I disconnect it you can see we get a little option to connect wallet we can choose what wallet they want to connect and it'll connect directly to our application all right and now back in our index.tsx file we want to make sure that a wallet is connected and prompt someone to connect their wallet if they don't have it connected already so we need to know if a wallet is connected to our application or not and to do that we can use the use address Hook from third web and that will check for the wallet address of any connected wallet to our application and we can just store that address under an address variable here and again we're going to use the use address hook and that is just going to check if there is an address and if there is an address it'll store that wallet address into our address variable and then we can just check if there is no address then we can just return a container here that says please connect your wallet now give this container a Max width of 1200 pixels and if we check out our application here right now it's not going to show the please connect wallet because we do have a wallet connected but if we disconnect you can see we now have something that says please connect your wallet right over here now let's Center that really quick and back in our code here I'm just going to get rid of this heading and we're going to add it in a flex and we'll Center that within our screen so now that I come back it should kind of be in the center saying please connect wallet user can come up here connect their wallet and they are now within our application now once they're in their application we want to display a few things and now if we look at our demo app from before the first thing we want to display is the connected wallet stake token so how much of the stakeable token do they own and we want to display that information right there so let's create that stick section of our application and under components I'm going to create a new folder and I'm going to call this the token dot TSX and we're going to import a few things some stuff from again Chalker UI we're going to be using some hooks from third web and we're also importing our stake token address from our constants folder and then for our stake token component we're going to create our component here we're first going to again store our wallet address that is connected to our app into an address component here because we're going to need to check how much of the state token a certain wallet has or the wallet that is connected we're then going to get our stake token contract now we're going to be using the use contract Hook from third web by passing our stake token contract address and that is going to allow us to get some information and start interacting with our staking token contract we're then going to use another hook called the use token balance and this is going to take our stake token contract and the wallet address and it's going to check the wallet address to see how much of that token from the contract does it own and it's going to store it into our token balance right over there next for our component we're going to create a card from Chalker UI that's just going to add a little section with some a drop shadow on it and within that we're going to create a stack just so everything is spaced nicely and we're first going to add a title call it stake token and next we're going to add a skeleton here this is just going to be a placeholder while our data is loading from our contract and you can see here it will show the skeleton as long as the loading State token and loading token balance have not been received once we get the data from that and we get our token balance it'll display the information and we're going to display the tokenbalance dot symbol now this symbol is going to be the symbol that we gave our token when we deployed the contract and below that we're going to create another skeleton same thing this time we're going to display the value and this display value is the amount that of the token that is owned by the wallet and it is displaying a value so it's just going to give us a string value back instead of a big number or a number and then we can save that and if we had come back over to our index.tsx file under our return here I'm just going to give this container a Max width of 1200 pixels as well we can add in our stake token component here and once we save that we can come back and you can see here we have our stake token and we own 1 million stake tokens which is the amount that we own if I change wallets here actually let me just switch wallets here we switch wallets here you can see this little new wallet that doesn't own any stake token and it displays zero and back to our previous wallet we now have our 1 million tokens there now I do want to display this on the left hand side so in here I'm going to create a simple grid with two columns and if I come back you can now see that the stake token box only takes up half of the width of our application here next we're going to do the same thing but for the reward tokens so coming back to to our code editor here back in our components I'm going to create a new file called reward token dot TSX again I'm going to import a few things from Chalker UI the hooks that we will be using from a third web and our address this time our reward token address all right and then for the reward token very similar to our stake token we're going to create our component here and we're first going to get the address by using the use address hook we're then going to get our reward token contract using the use contract and this time passing our reward token address and then we're going to get the token balance of the wallet by again using the use token balance with our reward token contract and the connected wallets address we're going to create a card again and put a stack in there to make sure everything is stacked nicely with some spacing and we're going to name this one reward token again we're going to have that skeleton in there that's going to check that our reward tokens have been our data has been loaded and we have the token balance and once we do we're going to display the token balance symbol of our reward token we're going to create another skeleton there and then below that display the token balance with display value which will give us a string to display now coming back to our index.tsx file here within that simple grid we can now add our reward token component save that and if we come back over to our app you can see once that loads we now have the 500 000 reward tokens that we own in this wallet because again the other 500 000 are within our staking contract so if we refresh the page you can see here that it'll just show these skeletons while it's getting the data and once it has it it'll display that information next we need to create the actual staking component of our application here so coming back to our demo app we are creating this section right over here that is going to allow a user to stake or unstake their stake token and claim their reward token that they have earned so coming back to our code editor here right here in our components folder we're going to create another file I'm just going to call this one stake.tsx and we're going to again import a few things some stuff from Chakra UI some UI components like a web3 button and some hooks from third web and all of our addresses that we stored in our constants folder and we'll also be using use effect and use state from react and ethers from ethers as well alright so in our state component here again the first thing we're going to do is get the address of the connected wallet store that under our address here and then we're going to get all of our contracts our reward token our staking token and our staking contract address and we're going to use the use contract address here and pass those contract addresses to each one and I'm going to store them into their own variables right there next we're going to get the token balances of the staking tokens and the reward token so again using the use token balance just like we did in the other two components we're going to get that of our staking token contract and of our reward token contract and then we're going to use the use contract read Hook from the third web here and there is a function that we're going to read called a get stake info and what get stake info is going to give us back is how much tokens we have staked and how much rewards we have available to claim and we're going to store that into a stake info variable here we're also going to set the refetch here and we're going to use a use effect here to just kind of fetch that information and then we'll just put our time and you can choose however in whatever interval you want to refresh this information but this is just to refresh the information of the claimable rewards that way we can display it as it goes up and then below that we're just going to set States for our setting a stake amount and stake amount because that is going to be two input fields we use and then we're going to create a reset value function here that will reset it back to zero once a user has staked or unstaked their stake tokens and then this is just a UI thing but I'm going to use the use toast from chalk right here to just display a little success toast at the bottom if a steak or unstake or function has gone through successfully okay and for our staking application at the bottom of our dashboard we're going to create a card for that as well add some padding and add some margin on the top to separate it from our two other cards that we created earlier I will then give it a title of earn reward token and then we'll create a simple grid first this is going to split up our sticking unsteaking section from our claimable reward section and we'll first create that staking and unstaking section and we'll create that in another card here we'll then add a box here and within that box we're going to just display our stake token so how much of the stake token that we have currently staked into the contract we're going to create a skeleton here and this is just going to make sure that we get the stake information and our token balance loaded before displaying what we have and in there we're going to check once we have our stake info and we're going to check stake info which gives us back an array and the first item in that array is how much tokens do we have staked in that contract that that wallet has staked and if it does have something staked what we're going to do is take that stake info which is a big number here so we're going to use ethers.utils dot format ether to display a nice number that is easy for us to understand here and we'll then add the state token balance symbol also get the symbol of the token and will display that after our stake token value and if there isn't anything within that stake info then we'll just return zero because again if there's nothing there then more that means there is nothing staked within the contract below that we're going to create a simple grid uh within there because this is going to be our stake and unstate options here so first we'll create a stack for our stake option and this is just going to make sure that we have some nice spacing between our input which is going to be a of type number and the max that we can actually enter into that is just going to be the amount that we have so we'll display but that value in there our balance the value we're going to set this to stake amount and on change we're just going to use the set stake amount so we can use that state to change whatever the user's input is next we're going to create a web 3 button and this button is just going to say stake Now web3 button allows us to interact with a smart contract and we first need to Define what that smart contract is so for our contract address we are going to set it to our stake contract address and then we need an action what is this button going to do with this contract address uh so the action here we're going to create uh this async and we first need to await and set allowance for our wallet to stake the tokens to it so we need to set the approval so we're going to set allowance for the stake contract address and the amount being staked which is the amount that we are putting into the input we're then going to once we set approval and allowance we're going to call the stake function from the state contract and we're going to pass that stake amount now we again need to put in the proper amount so we're going to use ether's utils parse ether to make sure that we pass the way amount of the stake amount that is inputted into our input and then we'll reset the value back to zero if this is successful will just display our little toast at the bottom that says take successful with a status of success so it shows green and then we'll put a duration and it is closable so a user can close it now we'll do the unstake which is going to be very similar to the stake so again we're going to put the input here which is a number the value is going to be our unstick amount and on change is just going to set the unstick amount with our state of whatever the user has inputted there we're then going to create another web 3 button this time the button is going to be unstake it's still going to be caught on our staking contract address uh the action this time is we're just going to on our contract call the withdrawal function and this withdrawal function is just going to withdraw the amount that we pass from the state contract and again we're going to use ether's utils parse ether to make sure that amount that the user puts into our input is converted to away when we pass it through our action here and on success again we'll just put a little toast that says unstake is successful now on the other end we are going to have the claimable rewards section so we're going to create another card for that uh we're gonna put a flex in there to just space out everything top to bottom um in a column first thing we're going to display is the reward token just a title we're then going to show a skeleton here to make sure we have the stake in full and our reward token balance loaded and once it has loaded we're going to display just like we did the stake value we're going to check if there is our information and if there is some stake info we will in here create a box and display the amount this time being from the second item in our array which is going to be our claimable rewards so we're going to do stake involt one here and below that will display the symbol so we'll take the reward our balance dot symbol add a little dollar sign in front of it and that will display the value of our claimable rewards and if there's no claimable rewards then again we're just going to display zero we're going to add a web 3 button this is going to be the claim button so someone can claim the rewards that they have claimable uh it's going to again be on our contract address the action is we are going to call the claim rewards function from our smart contract and claim rewards is just going to claim whatever available rewards there is and then we'll add a little toast at the end we can actually get rid of this reset value because it doesn't need to be in this button just for our stake and unstake and that does it for our stake component here so coming back to our index here under our simple grid we will add our state component save that and coming back to our app here once everything loads you can now see we have this earn reward token we have our stake token section where we can stake some tokens and then unstake some tokens and then we will see our claimable rewards here where we can now claim it so let's test this out we can stake some tokens let's just take 100 tokens here we'll hit stake we should get a transaction saying um for us to set allowance here so we're just going to allow 100 tokens we're going to approve then it should bring us up another transaction allowing us to confirm the transaction to actually stake the coin once that comes up we can confirm that transaction you can see stake was successful we now have a hundred coins staked our input went back to zero and we can see here under reward tokens we're starting to earn some reward tokens here and you can see that number is updating and going up as we earn reward tokens we'll let this go up a bit and once it reaches a larger amount we'll go ahead and claim this token here and there you go we reached 1 reward token so let's claim that it'll bring up a transaction for us here we'll confirm that you can see the reward tokens drop back down our reward tokens were claimed and we now have our 500 000 and 1.26 tokens right here in our reward tokens and there you go we went and created our very own erc20 staking application we created two ERC 20 token contracts and a staking contract and built a application that will allow users to stake their staking token and earn reward tokens in return now if you enjoyed this video and you found some value in it don't forget to give this video a thumbs up hit that subscribe button and don't forget to turn on the notification Bell so you don't miss out on tutorial videos just like this if you haven't joined our Discord Community yet join the amazing community of Builders just like yourself if you have any questions or you need any support you can drop them in our Discord and we'll be happy to help you out but again I hope you folks enjoyed this video you found some value in it until next time see ya

Channel: thirdweb

Views: 10,420

Keywords:

Id: hTbYGdNFDD0

Length: 33min 52sec (2032 seconds)

Published: Sun Apr 30 2023