How to Build an ERC-20 Staking App - Stake Tokens and Earn

so here is a demo of the erc20 staking application we're going to be building right here I have my login screen so we can connect either with uh in apple wallet or we can select a web3 wallet here I'm going to sign in with a metamask wallet and connect so right here I have my wallet connected this is my balance for the staking token so this is the token that we can stake in our staking app and this is my balance of a reward token so this is how much tokens I have claimed and have been rewarded now with the erc20 staking contract that we have at third web and that we're going to be using the staking and the reward token are two different tokens so the staking token is going to be a token that we stake and the reward token is going to be another token that we get back as a reward so we do have the ability here to stake and withdraw our tokens so if we hit stake here uh we can stake a token So currently right now I have 15 tokens stake so if I go St here and let's just say we want to stake five more tokens we first have to set approval so right here we'll get the approval here to uh approve five of these tokens so I'm going to uh hit next and approve once our tokens are approved we can then stake five tokens here so I'm going to hit stake we'll get the transaction here to confirm to stake those tokens and there you go now my staking tokens are uh at 20 and my staking amount here of my balance bance that's in my wallet decreases we can do the same with withdraw we can put in the amount and we can withdraw those tokens as well so currently right here I have 20 token staked and my rewards here are 1986 you can see this refreshes uh we have it set for every 10 seconds so you can see here it's going up uh an amount every 10 seconds and I can simply claim this reward and my reward balance here would be updated so if I hit claim reward we'll hit confirm on that transaction and there you go we claimed the reward the balance is back at zero it's restarting um the reward balance here and up here on the reward tokens you can see I now have more uh reward tokens and that balance was added over here so this is the erc20 staking contract that we are going to be building in this tutorial hey everyone Sean Wata here back with another tutorial video and in today's video we're going to be building ourselves our very own erc20 staking application we're going to deploy the thir web's pre-built erc20 staking smart contract and we are going to build a web 3 application which allows us to stake a token and earn a reward token in return depending on how much and how long we have our token staked for overview of what we're going to be covering in this video we're first going to deploy out all the smart contracts needed to build this out that's going to include our erc20 token for our staking token our erc20 token for our reward token and our erc20 staking smart contract these are all going to be pre-built contracts that we deploy with third web then we'll jump in and build out our erc20 staking application using third web's connect SDK so with all that said let's jump on the computer here and let's deploy our smart contracts first on my computer here I am connected to third web's dashboard I'm going to head on over to the contracts tab here and I'm going to deploy a new contract now we're going to deploy our staking token and our reward token toen first now with third web's erc20 staking smart contract the staking token so the token that we're actually staking and the reward token so the rewards that we're uh earning by having those tokens staked are going to have to be two different tokens so I'm going to deploy an erc20 smart contract for each one of those tokens in the popular section here you'll see the token contract here now we're not going to do a token drop contract we're looking for the regular token contract here and I'm going to click on that and then hit deploy now and we'll call this our staking token and we'll just call this uh staking here as the symbol and then you can uh fill out the other contract metadata if you choose to do so like an image and description down here at the bottom under Network and chains you can select the drop down here and you can deploy to any evm compatible blockchain out there so you can select your main net your test net if you're doing some testing for this tutorial I'm going to deploy this onto the base sapoia test net and I'm going to select the deploy Now button we'll get a transaction here to confirm to deploy our contract then we'll get our signature request here to add it to our third web dashboard so we'll sign that once that's deployed we'll be brought to our contract dashboard here for our staking token I'm going to open up a new tab uh under the contracts again and we're going to do the same thing I'm going to deploy a contract and I'm going to select the token contract again this time for our reward token so when I hit deploy now I'm going to put in our reward token uh we make the symbol here reward and again you can put in an image description Network and chain you want to deploy that to the same network or chain that you had selected for your other token and I'm going to hit deploy now we'll confirm that transaction to deploy our contract and again sign this signature request to add it to our dashboard there you go now we are at our contract dashboard for our reward token so we have our reward token and we have our staking token here I'm going to open up another tab here contracts one more time this time we're going to deploy our erc20 staking contract now I'm going to hit deploy contract again and I'm going to scroll down until we reach the staking section of our explore page and in our staking section here we have ERC 721 1155 and ERC 20 we're going to be using ERC 20s for this so we're going to select the stake erc20 contract here I'm going to hit deploy now we're going to name this so I'll just call this uh stake contract uh we'll give it a symbol here of stake again you can fill out the image and description now there are a few more parameters that we need to fill out here uh the first one we need to fill out is the erc20 reward token address so this is the erc20 token address that is going to be rewarded out to anyone who Stakes uh their erc20 tokens within this contract so I'm going to come here get our reward token our reward token here copy that address come back paste that in next one is going to be our ERC staking token address so this is going to be our staking token here copy that come back in here paste time unit for rewards so you can read the description here this number is going to be in seconds so if we want to give out a reward per hour we're going to have to enter 3,600 seconds for the number now this can be in any interval that you want let's just say here we want to give out a reward every minute so I'm going to say or actually we'll make it a bit quicker for this tutorial we'll say every 10 seconds we want to give out a reward and next down here we have the numerator and denominator for the reward ratio now if we want to reward one for 20 this means that one reward token will be given out for every token state so if we want the reward to be one to one that means for every one token that I have staked I will reward one token back every 10 seconds that's how the time unit and the ratio here is going to work so every 10 seconds we'll say hey we'll give one reward for every 10 tokens that you have staked so if I say here the numerator is going to be one my denominator is going to be 10 so every oneth here so I get again one reward for every 10 tokens staked every 10 seconds and of course you can configure this to whatever you want to configure it to this is what we're using here for this tutorial and then finally at the bottom here networking chain I want to make sure that I have the same networking chain selected that I had my other contracts deployed to finally I'm going to hit deploy now we'll confirm this transaction to deploy our contract and then we will sign our signature request here to add this to our dashboard all right and we now have our stake contract here so we have our three contracts we have our stake token contract we have our reward token contract and we have our staking contract now before we get into building out our staking application we need to set up this staking contract and we need to have some reward tokens here that we can deposit into the staking contract so that it can give out those rewards to people who have their token staked I'm going to come back to my rewards token contract here and I'm going to head over to the tokens tab here on the left hand navigation and you can see here our total Supply is zero we don't own any here it's zero we're going to Mint some and I'm just going to say we're going to Mint 1 million tokens here so I'm going to put in additional Supply here and mint the tokens then I will confirm this here there you go you can see now our total Supply is at 1 million and the wallet right here that I have holds all 1 million of the tokens but what we want to do is deposit these 1 million tokens into our staking contract so again that contract can give out those rewards to the users who have their tokens stake now in order to allow the contract to be able to transfer and distribute these tokens we need to give it approval and permission to do so and we can do that here within our reward token we're going to come back to our stake contract first so this is our stake contract I'm going to copy the contract address and we're going to come back to the reward token I'm going to come over to the Explorer tab here and under the EXP exp tab we have the ability to execute a right function here and we're going to select the approved function here and this approved function is US setting approval for our stake contract to be able to again transfer and give these tokens out as a reward so the spender here we are going to put our stake contract contract address and then for the value we have to provide how much of these tokens are we giving it permission to transfer so in this case we're going to give it all 1 million tokens and we're going to have to put the $1 million value in here now the value that we put in here does need to be in way so we're going to go to a whey converter here really quick and we is just a unit uh in which we provide numbers to Smart contracts so in ether here I'm going to put my 1 million and what I'm going to do is copy the wave value here come back to my reward token and put that in for the value so again we're approving that our stake cont contract has the approval to transfer and distribute 1 million of the reward tokens so right here we're going to set the approval we're going to hit execute we're going to confirm the approval here for 1 million tokens you can see here this is in a ether value so 1 million we'll hit next and approve and once that goes through we can now come back to our stake contract here and now that our state contract has the approval to again distribute our reward tokens let's deposit our reward tokens into our stake contract so I'm going to come over to our state contract and go to the Explorer Tab and the right function here we are going to deposit our reward tokens and over here we're going to put the amount that we want to deposit so again we need to provide this in way we can take that same value we're going to deposit 1 million tokens so I'm going to put that in here and I am going to execute we will then confirm this transaction here and there you go we now now have executed our transaction so if we come back to our reward tokens here and I go to the tokens tab on the left hand navigation here you can see that there's still a million Supply here um but if I look at the owned by you my wallet no longer owns 1 million tokens of the reward tokens and that's because we deposited into our staking contract and that's the uh tokens that is going to be distributed out as rewards based on the people who have our stake token state so again that sets up our staking contract uh we do need some tokens though to stake so I'm going to come back to my staking token and I'm going to come to the tokens tab here and we're just going to Mint a supply of uh 100 tokens here we don't need much so I'm going to hit mint tokens and I'm going to confirm that transaction and there you go we have some staking tokens or tokens that we can stake uh to start earning rewards uh through our demo here so again we have our three contracts deployed we have our staking token our reward token and our staking contract the staking token here is going to be the tokens that we actually stake into our staking contract uh we have our reward tokens that are going to be given out as rewards uh we minted a million of those and we deposited that all into our staking contract and again this is going to be the contract here that we use to stake our stake tokens and earn our reward tokens back in return and with that all being done we can now build out our staking application using third web so I'm going to open up my terminal here and in my terminal I'm going to create a new nextjs project here so I'm going to run MPX create next app and we're going to call this our ERC um 20 uh we'll call this our staking app you can name your project whatever you want to name it and when we create our new next project here we are uh let's uh sure let's update this real quick uh yes we are going to use typescript no to es lint uh no to tail in uh yes to Source directory and yes to app router and no to customizing the default import Alias here so we create our project here then I'm just going to clear this we'll change into our ERC 2020 staking app here and what I'm going to do next is install third webs connect STK so you can use mpm yarn pmpm or bun to install third webs connect SDK I'm just going to use yarn add third web here and we're going to install that and once that is done we can then open this up in our code editor and in our code editor here we can start building out our staking application first thing I'm going to do is in the sources folder within the app folder I'm going to create a new file and I'm going to name this one client. TS and we are going to set up our third web client ient in here and I'm going to create a variable here and we're going to call this our client ID and we are going to store our client ID or our third web API key in a EnV file so we'll just say process. env. uh next public client ID and I'm going to come back to my files here and I'm going to create a new file out here forv file and I'm going to get my next public client ID and paste that in there and we're going to get our third web API key and set that up here now you're going to come on over to your third web dashboard here you're going to go to the settings tab and in the settings tab here you can create an API key now I already have one created so I'm just going to copy this here but if you want to check out a video tutorial down in the description below we walk through what API keys are how to make one and what services and everything you can enable through it so I'm going to come back to my code editor here paste in my API key save that and we'll just close out thatv file cuz we don't need that anymore and here uh what we're going to do is we're going to export a variable here called client and we're going to use the create third web client here and I'm going to import this here from third web and the create client we need to just provide it the client ID in this case the client ID is going to be our client ID variable up here and we'll just make sure we say as a string and there we go we now have a client here that we can use throughout our application and throughout the third web SDK next I'm going to create another file in the app folder here and this file is going to be a chain. TS file and this is where we're going to define the chain that we're going to be using in our application so I'm going to export a variable here we're going to call this one chain and we're going to use the Define chain from third web now Define chain we can give it the chain ID so if you're depending on the chain that you're using you can just put in the chain ID here or you can provide it a predefined chain now we do have some popular predefined chains uh you can check it out in our documentation but I'm going to import right here because I again I deployed my contracts to the base aoia test net that's what I'm going to be using in this demo uh you'll use whatever chain you deployed your contracts to uh but I'm going to say base uh sepolia and then we're going to import that from uh third web SL chains and I can then just provide base aoia right in here and again this is just defining our chain variable here so that when we use this throughout our third web connect SDK uh we reference the Bas aolia chain right here coming back to my files I'm going to create another file in the app folder fer here and this is going to be the third web. TS file and in here we're going to set up uh and Export our third web provider so export here and I'm going to export our third web provider and I'm exporting this from third web SL react and at the very top of this we're going to tag this here with the use client and this way now when we use the third web provider to wrap our application uh it'll have used client here tagged on it so coming back to my files if I go to layout I'm just going to wrap the children here with the third web provider uh with third web provider so that we can use the third web SDK in our app so let me just come here and we'll just wrap this with third web provider get this children here put that inside now we do want to make sure that third provider here is imported not from the third web react but imported from our third web.tor tagged on it and that does it for setting up the third web connect SDK with our nextjs project now we can start building out our application if we come over to our files and go to the page. TSX file here this is the boiler plate code that we get when Crea creating a next project so I'm just going to I'm going to delete everything so everything in here I'm going to select all of it delete that and just give myself uh empty div here also going to just get rid of those Imports there and I'm just going to give this div some styling uh The Styling is just to Center everything within the middle of the page so just setting the flex uh display the flex centering everything and giving it the height and width 100% of the height and width of the page and then finally I'm just going to add a div inside here that centers uh the text of everything inside that we are going to be creating now the first thing I want to add is if we look at our demo here let's take a look back at our demo application uh let me sign out I want to have this login page right here now this is actually our connect embed so instead of having a button to click and being prompted a modo to select your different wallets or connect options uh we just want to display the Modo right here and have the button uh which is what the connect embed is so coming back to my code editor here I am just going to inside of this add the connect connect embed and we need to uh provide the connect embed with our client which is going to be our client from our client. TS file and the chain uh which we are going to provide it with the chain from our chain. TS file uh if we save that uh we can actually let's open our terminal here and run this locally uh let's see oh we didn't uh export this correctly so let's come back here uh we'll copy our connect embed so just like we did the third web provider coming back to our third web.tor this not from third web react but from our third web file here there we go and once our page refreshes is it looks like we are connected so let's add really quick come back here I'm just going to add a connect button as well and we're going to add our client in chain there and I'm just going to make sure that this is exported from third web and this is imported here from the same actually sorry we'll copy this here and get rid of this Port so let's just let the refresh Cod I already had a wallet connected so once we disconnect here uh we should be brought up with this so I'm just going to get rid of the connect button now we don't need that anymore and get rid of it here so now we have our connect embed here and this is where we can sign in with a social login we can connect any of these wallets here uh this is how we sign in to our staking application now let's build out the actual staking application so once we're connected with a wallet we should be able to see our staking application like we should be able to see our staking application our token balances and everything so coming back here I'm going to set up our contracts first so coming back to my file directory I'm going to create a new folder we're going to call this folder utils folder and in there we're going to create a new file called contracts. TS and in our contracts. TS file the first thing we're going to do here is get our contract addresses for our stake token contract our reward token and our staking contract so I'm going to come back to my contracts here uh we have our staking token I'm going to copy that contract address come here and paste it we have our reward token I'm going copy that paste that in and then we have our staking contract so I'm come back here copy that and paste that in there and that does it for our contract addresses now we need to be able to get and wrap these contracts so that we can use the connect SDK to interact with them and we're going to export our contracts here we're going to call this one our stake token contract and we're going to use get Contract here from third web and what we're going to do here is we are going to provide it one with our client which is going to be our client from our client. TS file we're going to provide it our chain which is going to be our chain from our chain. TS file and then we're going to provide it with the address and the address we're going to provide it is the stake token address and that does it for getting our wrapper for our stake token contract uh we'll do the same thing I'm just going to copy this and we're going to do this for our reward token contract so this one here we're going to use our reward token contract address and then finally we're going to do the same thing for for our staking contract so this is going to be our here our staking contract and we're going to be using our staking contract address now we do have pre-built extensions for erc20 contracts which our stake token and our reward token are uh we don't have pre-built in extensions for our erc20 staking contract so what we're going to do is we're going to provide the ABI here for our staking contract now I'm going to come into my file here and I'm going to create a another file within our utils folder and I'm going to call this our staking contract ABI TTS and we're going to create our contract ABI in here so I'm going to export a variable here called our staking contract ABI and we're going to provide our staking contract ABI now coming back to the staking contract here if we we go to the source file or Source tab here and we scroll down to the bottom here you'll see our ABI and this is the full ABI of the staking contract so we're going to copy this here come back to our staking contract ABI here paste that in and we're going to say as a constant and we're going to then we close that out in our contracts for the staking contract we're going to provide it the ABI here and this is going to be our staking contract ABI that we're going to provide it and this way we can easily access the methods and everything within the staking contract itself so that does it for our contract setup again we're getting the contracts for our stake token our reward token and our staking contract and we're creating our wrappers for those contracts here so we can interact with them with the connect SDK now let's build out our staking app so coming back to my files here I'm going to create a new folder I'm going to call this components and in the components I'm just going to create a stake. TSX file and we're going to export our component here we're going to call this stake and we are going to then return and we'll just give it some empty divs right now and the first thing we want to do is we want to only display our staking app if there is a wallet connected and we can check if a wallet is connected by using a hook so we're we're going to create a variable here and I'm going to call this account and the hook we're going to use is use active account and what this is going to return us is a active account or an account that is connected to our web3 application or it's going to return us undefined if there is no active account set so we can use that to determine if a wallet is connected or not so we'll say hey if there is an account then you can show out our application if not we're not going to show anything and the only thing that should be displayed is the connect embed that we had in our page. TSX file I'm also going to tag this component here with use client and first thing we'll display here is just a connect button so once we are connected we want to maybe see what our connected account is so we'll use the connect button here and we'll make sure we import our client and chain here so this here is just a div with some styling here and we have a connect button in here so not the connect embed but the actual button uh then we need to provide it with the client and chain we'll save that and let's head back to our page. TSX and add our stake component uh right over here so we add that in and hit save and then come back to our app so let's try this out so right here is my connect embed I can select my wallet to connect so let's just select my metamask wallet and once we're connected you can see here this is the div with some background color and we can view our connected account I can disconnect and I'm brought back to the connect embed or the login page here so we'll say connect back there you go and then within here this is where we're going to build out our staking application so come back to my code editor here and we're going to come back to the stake. TX x file we're going to first display the connected wallets balance for the staking tokens and the reward tokens so we want to display what the actual balance of the connected wallet is and we can do this by using the use read contract Hook from third web the use read contract hook uh returns us back some data which we'll call this one here our staking token balance uh it'll give us back the loading state so we'll say is uh loading we'll call this loading stake token balance so just say uh data is loading and again this is going to use the use read contract Hook and the use read contract hook we can provide it the method of the function from the contract that we want to read and in this case what we're going to do is actually provide it with an extension and we're going to provide it with the balance of extension here and I'm going going to import this extension so import balance of we're importing this from third web SL extensions SL erc20 and the balance of here we're going to provide it with first the contract and the contract we're checking the balance of is our stake token contract which we are going to import from our contracts file and then we need to provide it the address that we're checking the balance for and we can get that address from the account variable that we have here using the use active account hook so for address here we can say hey this is going to be the account do address um but if we don't have an address it'll just give us back an empty string uh we can also set some query options here and we can say it's only enabled if there is an account connected so if we don't have an account connected you shouldn't be fetching the balance of here and that is going to get us the balance of our staking token I'm going to copy this and we're going to do the same thing for our reward token so instead of token balance uh I'm going to call this our reward balance instead of loading stake token we are loading our reward token and not the stake token contract but our reward token contract and there you go so same thing but for our reward token instead of our stake token and then finally down here I'm going to just add a really quick quick truncate function uh to truncate the value uh to only two decimal places this truncate function here is going to take in our value so this balance here is going to be a string so we do need to provide it with a string and then we're going to set the decimal places to whatever decimal places we want to set it to so next I'm going to Now display this values so I'm going to create a div here we're just going to add some quick styling here to this div give it a flex and some margin and in here we're going to say hey if the loading stake token balance so if it is loading uh we're just going to show some text saying loading here you can add whatever you want uh and once the token balance is loaded we're going to display that balance so we're going to say uh staking token and then we're going to show the balance here so we're going to truncate and we're going to say uh two ether so the value that we get returned back is a way value so we're going to use two ether here from a third web which is going to convert that wave value into an ether value so it's a value that we can display here and again for truncate I'm setting the decimal place to two and what I'm going to get here is the staking token balance and we are going to display that so with just this here this should display us 100 cuz I have 100 stake tokens and right over here in our app you can see here we have staking tokens and it is set to 100 so we're going to do kind of the same thing we'll copy this uh this one's for loading our reward token and we are going to be showing our reward token balance not our stake token balance for this one and if I save that and I come back it should display zero because we don't have our reward tokens let's actually rename that here so this should be our our reward tokens there you go so stake tokens I have 100 I don't have any reward tokens yet cuz I haven't staked and claimed any rewards so that should be zero so now we have our balances shown here next let's build out the actual staking component here uh where we can either stake staking tokens or we can withdraw staking tokens if we have any of those tokens actually staked now to get that information of how much rewards and staked tokens we have we have to read that data from our staking contract now in our staking contract if we go to the explor page here and we look at the right read function here uh we have a function here called get stake info and if we provide the stake info function and address it returns us back an array of information here now this first object here is going to be our tokens staked so it's going to give us back the number of how many tokens we have staked and this second one here is going to give us back the rewards that we can claim so let me just come back here so what we're going to do here is we're going to get that stake info first so we're going to use the use contract read hook again uh so this time we're going to create a variable we're going to have our data here this is going to be our stake info and again and again we're we going to use the used read contract hook now for this one we don't have an extension again for our erc20 staking contracts but we did provide the contract wrapper with the ABI so we should be able to access all the methods and functions from the staking contract so for the used read contract here we have to provide it with the contract which is going to be our staking contract we then provide it the method and you can see here if we import our staking contract the method here we should be able to see all the functions and methods here now there is a get stake info function that we are going to use and then we need to provide any of the params um that we need for that function and in this case we do need to provide it the address or the wallet address like we showed in the Explorer page of the contract and the same thing here we'll have query options and we should only fetch this data here if there is an account connected and with that we'll be able to get our staking information which includes the amount of tokens we have staked and the amount of staking rewards and in here I'm also going to set the refetch here and this is going to be to refret the data we're just going to name this refresh stake info and then at the bottom here we're going to create a use effect to refresh that info we'll say every 10 seconds so we'll say refresh take info uh we'll import use effect and it'll just refresh that information every 10 seconds and this is because it this is also going to be keeping track of the awards that we have earned so we want to make sure that the rewards updates every 10 seconds so the user knows how much of the reward tokens they can claim so this here is just again refreshing the staking information every 10 seconds so now that we have that information we can build out our our component here so let's take a look at our demo here connect a wallet this is our demo one uh we have a stake button and a withdraw button so we can stake a certain amount of tokens it opens a little modal here or we can withdraw a certain amount and then we can claim rewards so depending on how much rewards we have we should be able to claim that and then just uh add update our values and everything up here so we're going to first create the stake and withdraw buttons here you can see here when we go stake we have some input Fields here so we're going to create some State variables for for those first and in our stake component here we also have to set approval and then we have to stake so we'll set a state for this as well to make sure that we set approval prior to being able to stake the amount and then of course we'll set the state variables for the actual modal Windows itself so coming back here I'm going to come all the way up to the top and I'm going to put these under the account variable here so I'm going to create so I'm going to create a few State variables here we'll just uh import using state so the first one is the stake amount so this is going to be for the stake amount input field we'll set that to zero as default same thing with the withdrawal amount we'll set that to zero for staking State here this is again uh we need to be able to approve the stake amount uh before we can actually stake the token so we'll be able to display the buttons depending on which state the actual staking is going through either initial or approved and then is staking and is withdrawing these are going to be the state variables for the two modal windows that we're going to control so scrolling down here right under the loading token rewards we're going to say hey if we have our stake info we should display our staking application and in here I'm just going to create a div and we're going to create two buttons so first button is going to be our stake button and then our second button is going to be our withdraw button so we save that and come back to our app not the demo one but our actual app here you can see we have stake and withdraw so we can select those buttons let's just give it some quick styling here really quick so our stick buttons let's just put some styling in here there you go we have our stake and withdraw here and let's actually let's take this this out of our or sorry here just take this we're just going to take this out of the uh div that it was under so we're going to take this out of the div that the balances and everything was and we'll just throw this into some empty tags here so there you go we have our stake button and withdraw button they don't do anything yet and next we'll work on our stake Modo so down here so down here we'll say is if we are is staking then we should show our stake modal here and we're going to just create a div here and within that div we'll create another div we're just going to give this here some styling this is to create a fixed modal in the middle of our screen and then we're going to give this here some detail for our card and then we're going to add a and then we're going to add a Clos buttons so again this here we're saying this is just going to be the actual model that opens if we're staking it opens up a div that is just going to be centered within the middle of our screen and then we have a button here that is going to close out the model now here in the stake model we're going to say hey on click we are going to set the is staking here to true and then for this model uh this close button we are going to set the onclick for this to set staking to false so coming back to our app here if I hit stake it opens up that modal if I hit close it closes the modal there so that is for our button here and then we'll do the same thing for our withdraw so I'm going to copy this here copy this is staking here and then below that we're going to say this is for is withdrawing um and then and we should say set withdrawing here to false and then coming back to the button up here for withdraw we need to set this on click here to true so coming back stake this is our staking window and then we have our withdraw window here so let's work on our staking window first so coming down here within below our close button I'm just going to add H3 here and call this staking or sorry we should call it stake we'll add in our balance here so we can see what our balance is that we can actually stake uh we'll just use a two we'll use our uh truncate here this is going to truncate our two ether and we're going to get our staking token balance and again that should display us our balance of how much of the stake token we own uh that way we can see hey this is uh how much tokens we can actually stake so if I hit stake here it should say stake and our balance is 100 now depending where we are remember uh in order to stake a token we first need to set approval and then we can execute the staking and we created a state for that so coming back all the way up here we have the staking State here and we have our initial State and then we have our approved state so only if a token is approved should it move to the approved state where we can then show the staking button to stake so only once the token is approved should we go move into this approved state where we'll then show the stake button so coming back down here into our uh staking model here uh we'll come right below our balance and we're going to say hey we're going to check the staking State and if it is in the initial State we should uh show this information here and if not then we should show show the approved State here so in the initial State here we should show the input or us to put in the amount that we want to stake uh this is going to be a number we'll set the placeholder for this to 0.0 we'll set the value for this to the stake amount we'll set the on change here to change the and set the stake amount to whatever amount is in our input and then we'll just give some quick styling here to our input so again this is going to be where we can plug in the uh input of how much we want to stake within our staking contract and below that uh we're then going to have a button now this button again it shouldn't be the stake button it should be the button to set the approval so we're going to set uh create a transaction button here from third web and we're going to say call this set approval and this transaction button here we need to provide it with a transaction and the transaction that we are going to call here is going to be the approve extension for erc20 contracts and what we are going to approve is we can set the contract so we are calling this approval on our stake token contract and we are sending sending the approval for the staking contract and what we're setting the approval for is again we're going to we're going to stake these tokens into the staking contract and we want to make sure that that staking contract also has the approval to send us back the tokens and everything when we withdraw it so we're going to set the spender here to staking contract. address and this is going to get the contract address of our staking contract and then we're going to set the amount which is going to be the stake amount so whatever input we had in our uh input here then on here we're going to say when the transaction is confirmed we are going to set the staking state to approved right so once it's confirmed uh it should set us into the next state where we can then stake the token and then I'll just add some styling here for that button so next in this section here so this is if the staking state is equal to the initial State here it should show us a prompt to input a number and then approve that amount in the approved State here we just want to display the staked amount so we'll just say whatever amount we had we'll just display that staked amount we'll give that some styling here and then below this we should have another button so we're going to say transaction button again and this button is going to allow us to stake the tokens so again we're going to set up a transaction now now for this transaction uh we are going to be using the state contract which doesn't have any extensions so we're going to prepare a contract call and we're going to set that the contract that we are preparing this call on for is going to be our staking contract the method that we are going to call is going to be the stake method so again you can look at all the methods that we have here we're going to call the stake method and we're going to give it the parameters that we need need to provide that function there which is going to be the stake amount now for this function here we do need to provide the stake amount in way so we can use the two way from third web here and then provide it our stake amount and then two string and that will provide it with our stake amount that we had in the input uh to our staking contract and it will stake that amount of tokens to our contract now we'll say on transaction confirmed we are going to set the stake amount back to zero and oh these should be brackets so set the stake amount back to zero we're going to set the staking State back to initial we are also going to re refresh our staking info we also want to refresh our token balances so let's set up our refetch here for our token balances to so here we'll say uh refetch staking token and refetch reward token down here once we stake we'll want to refresh our staking token balance and we'll also want to uh set is staking to false so we'll just close that window out so again this button here uh so in our model we first be prompted with a modal with an input where we can input the amount that we want to stake we'll then have a button here to set approval first on the stake token for to allow our staking contract the ability to transfer these tokens once the uh set approval is confirmed we set the staking stake to approved which will bring us to the next part here which is going to display our stake amount and have a confirmation button here to stake our tokens which will then call the stake function from our staking contract and once that is confirmed we'll set everything back to its initial state so we can actually test this out here now we'll come back to our app there you go so we come back to our app here and we hit stake we have our input here we have set approval first we can't stake it yet until we set approval so let's uh let's see here let's stake 10 tokens so we'll set that to 10 we'll set approval first we get a transaction here to set the approval you can see here it's set to 10 let's hit next and approve and there you go next thing we can do is stake so I can't adjust this stake amount here uh it just tells me that I have proved 10 tokens to be stake and then we can hit stake here and then we can confirm this and there you go it resets everything you can see our staking token goes down to 90 and we now have staked 10 tokens so now that we have tokens staked how can we view the amount that we have staked and and the rewards that we are earning for having those tokens staked and then finally the claim rewards button so we'll come back to this withdrawal button in a bit uh let's get that information for our Stak information uh for our Stak uh tokens first so coming back to my code editor here in our Stak info in the area where we're checking for our Stak info and we have our stake and withdrawal buttons I'm going to create another div here and in this div we are first going to display our balance State and again we are getting this staken information using the used Rec contract hook here and getting the information from the get Stak info function from our staking contract so in here when we're getting our balance Stak we are going to truncate this here uh we're going to say to Ether we are going to to get the amount uh which we're going to get from our stake info we get returned back to objects so we're going to take uh the first object here which is going to be our balance that we have staked and we're going to say two string and then we'll set the decimal places to two and sorry so we'll say get stake information then two string sorry there we go so we're going to get the stake info we'll say two ether CU we get it back in way we'll set that to a string and then truncate that to two decimal places we'll do the same thing for our reward balance so I'll just copy this here paste that we'll say reward balance and for this we're getting the second object in our stake info and that is going to give us back the rewards that we are earning for having the tokens staked so coming back to my app here you can see we this is our 10 Stak tokens and so far we have earned uh 18.2 of our reward token so now let's create a button here to allow us to claim the rewards that we are earning so coming back to my code editor below those balances we'll just add a transaction button again uh we'll call this one here claim rewards and the transaction here for our claim rewards button is is going to use the prepare contract call we're going to again call a function from our staking contract the method we are going to call is the claim rewards function and we don't need to provide it with any parameters or anything uh we're just calling that function and that should claim the rewards based on the wallet that we have connected and then we'll say here on transaction confirmed we are going to refetch our reward token balance yeah so refetch reward token balance um and then we are going to refetch our staking info as well so now coming back here we have a button here that we can claim our rewards so we have about 28 tokens that we can claim so if we hit claim rewards and confirm that transaction it should reset uh this to zero it should update our reward tokens and there you go uh we're back reset and every 10 seconds this value here should update so we should get an update soon There You Go 1.2 and we still have our 10 tokens Stak so final thing we need to do here is get our withdraw set here so if we want to take out the tokens that we have staked uh we should be able to withdraw it here so coming back to my code editor we're going to go into our withdrawal section and under the close button here we'll just add uh H3 header called withdraw under withdraw here we're going to have an input for us to input the amount that we want to withdraw so we'll just uh say number here we'll set the placeholder to 0.0 we'll set the value here to withdrawal amount and we'll set the on change to set the withdrawal amount to the number that we have set in our input I have some styling here for our input field and then we are going to create our transaction button here which is going to be our withdrawal button and in that withdraw button the transaction that we execute is going to be the withdrawal function from our staking contract so again we're going to prepare a contract call on our staking contract the method we're going to call is the withdrawal function we're going to get the withdrawal amount again we need to submit this as a way value so we're going to convert that to we here and that will withdraw the amount that we input into the input field and then on transaction confirmed here we are going to set the withdrawal amount to zero we'll refetch our staking info once again and then we'll refetch our staking token balance and set is withdrawing here to false so we're setting the input field back to zero we're ref fetching the stake amount because it should re um refetch the amount of tokens we actually have staked CU we took some out we'll refresh the staking balance to show the new balance that we have in our wallet and then we'll close the modal window out over here so coming back to our app the withdraw button here we now have our input filled and withdraw oh we can't withdraw zero uh but we have 10 tokens so let's say we want to withdraw five so let's sayit withdraw we can confirm that to withraw our five tokens and there you go we now only have five tokens staked and we have 9 five tokens in our wallet because we got five back uh we have our balance here so now we have the ability to stake tokens we have the ability to withdraw tokens and claim our rewards so to walk through all of this again let's say stake uh let's say we want to uh stake 15 tokens we can hit set approval uh we'll set that to 15 we'll approve this once approved we can hit hey stake the 15 tokens confirm that once we have the 15 tokens staked you can see here I only have 80 in my wallet and I have 20 tokens now staked uh I can withdraw those tokens like we just did and I can claim my rewards so right here I have about 22 rewards to claim I can hit claim we can hit confirm and we should then get our balance here of our reward tokens updated and this reward balance down here should reset back to zero and we can start earning rewards again so there you have it this is how you you can build an erc20 staking application utilizing third web's connect SDK again we deployed ourselves a couple erc20 token contracts that we used for our staking token and reward token we also deployed ourselves an erc20 staking smart contract all from third web and then we built out a staking application that allows us to use the staking contract and the tokens that we deployed using third webs connect SDK so again I hope you folks enjoyed this video you found some value in it if you did don't forget to give this video a thumbs up hit that subscribe button and don't forget to turn on your notification Bell so you don't miss out on more tutorial videos just like this if you need any help or support we'll drop a link down in the description below where you can open a support ticket and our support team will be happy to answer any of your questions and help you out again I hope you folks enjoyed this video until next time see you

Channel: thirdweb

Views: 1,643

Keywords:

Id: MyxsfgEGG3w

Length: 57min 59sec (3479 seconds)

Published: Tue Apr 23 2024