Front-end & Defi | Chainlink Hackathon Workshop

test test testing testing is that better did i fix it now test there we go sorry about that guys um another sound cool so um uh yeah so we're really excited for this workshop today we are doing a full stack blockchain application end to end we're doing front end and back end this was definitely really highly requested we're really excited to be doing this really excited to be working on this project we have a couple of different ways that we can go with this similar to how on the back end we can use hard hat we can use truffle we can use brownie we use all these different frameworks on the front end it's the same thing there's way more frameworks than um than what we're going to go over here and we'll kind of go over a couple different examples to get you spun up with the front end really quickly and get you guys going there so it is 804. we have a lot to cover uh in this so let's go ahead and jump right into it boom cool so um let me show you first what we're going to be working on today so we're going to be working on uh something like this it's a it's a contract it's a it's an application that allows us to stake uh our different tokens so we can stake these are kind of the different tokens that we can stake and then we can also get issued rewards based off of how much we've staked so if you guys have ever seen anything like um oh getting mad echo now though huh let's see if we can fix that better worse test test test see if we can fix that did i ruin it actually better or worse test test test see if you can fix this [Music] did i ruin it actually better works yeah that's super strange actually hold on [Music] is it better now um i don't want to keep going if i'm if i'm still echoing did i fix it or is it still is it still whack some quick audio issues here [Music] looks like i fixed it okay okay cool all right thanks for pointing that out though appreciate it um all right let's get back into it so here's what we're working on uh it's an application that allows us to stake our tokens and then get issued rewards for it so here we can see like up in the top right we have a reward balance uh and this is similar to like you know if you've ever seen uh you probably you guys have probably heard of liquidity farming or or yield farming or liquidity mining or whatever um i i don't this isn't necessarily that but it's more just giving um giving some type of reward token based off of how much somebody has invested in your platform right for example if you are like having like an ave or unity or a uniswap or something right and somebody has 100 000 invested in your application you can give some type of governance token or something like that up based on the value that they have in and that's actually the important part of this tutorial is that it's actually based on the value so um our fau token which is like our fake kind of dummy faucet token is going to be um it's going to be it's going to pretend to be like die basically and then chain-link token is obviously going to be link and then we're going to have our dap token which is also going to be like a sort of die so this [Music] this tutorial is inspired by uh dapp university if you guys haven't seen him uh definitely go check it out they he are a sponsor of this hackathon uh and they have a lot of fantastic videos here so um they're the inspiration for this but uh without further ado let's jump in uh into into building this and then let's talk a little bit about let's talk a little bit about the different front end approaches that we can take okay so before we actually even dive in so um i'm a big fan of this package create eth app so after you guys do all your back end stuff you do your brownie you do your hard hat you do truffle whatever you use after that you use crate eat app to actually create a front end and a lot of projects you guys have probably seen this too they do this in a separate repo right so they have one repo for the back end one repro for the front end in our demo here we're gonna do everything in the exact same repo um we can even look at link b5 front and back and are going to be in the same repo if that makes your life easier you know absolutely go for it um and just put everything in the same repo uh you don't have to do two repos but it can be a little bit nicer to for like kind of to separate the two have them in two different repos but for developing it's usually a little bit easier to have in the same repo here so that's um that's just kind of a little a little note there another note is that um if you're really struggling um there are a couple like crutches you can use um to build up front up a front end one click dap is a really nice one um you literally you know i think you log in with with metamask you connect metamask yep you sign in and what you do actually once you sign in is um you just add like the name of your dap a description api contract address and network and it'll kind of spin up a really easy front end for you so that's what i'm gonna say first off if you're like i if you know nothing about front end know nothing about javascript nothing about any of this stuff uh one click dap is a really easy way for you to get started um craig heath app is going to be a little bit more advanced it creates a react js front end boilerplate for us to kind of go in and modify this will give you all the bells and whistles this will kind of be a little bit of a crutch and of course you can always use scaffolding this is almost like the midway solution where in your um you can just add your contract to the co his contracts folder and then on your front end in the react app i believe he has a contract section um or no sorry about the contract section maybe it's an app jsx you can add your contracts in here uh and that will actually have them render on his his scaffolding bit but uh we're not going to go into that um one other uh example that i wanted to show you guys just because um i'm pretty proud of it and it's really silly but it's really fun um i have uh this one this is an example of a front end i created with crate crate ethe app um it is the vrf pizza front end you're looking for an example of like doing a front end and a separate repo outside of the one that's in the back end so this is the the back end this is the front end um the back end is written with brownie um as you can kind of see here uh and the front end is with this create eath app uh and you can see like it has all the boilerplate of cray ethap but um if you guys want to check those out as an example you absolutely can kind of a different um a different example and this one createeth app actually uses excuse me closes um the this vrf pizza front end i use crate youth app like i said and create ethe app actually does like state hooks um and does a lot of the newer react stuff whereas the example we're going to be going over isn't going to be doing state hooks or any of that newer stuff so um you're going to get a couple uh there's there's a there's a ton of different examples here for you to check out and the other thing you can do is all this stuff is open source guys so this is like actually one of my favorite parts of the um uh of the um of the blockchain world it's like everything is everything is open source so you can look up like front well maybe not uh yeah but so like this is this is like the uniswap front end right here right so you can just like fork this copy paste it whatever you want to do and you can see the front end of all these other applications so all the stuff is is open source which is amazing so if you ever want to just check out somebody else's front end uh you absolutely can and without further ado let's learn how to do this let's get this started so i'm going to kill it on my end over here i'm going to refresh and we're going to be starting from blank do this are you guys with me so far we're going to be going over a lot of stuff here you see okay cool so let's get started right and a lot of our examples have been using truffle let's just continue to start there right let's do buffalo box smart contract kit slash box it started just getting a sample box in here and again if you want to use brownie if you want to use hard hat there are examples for both of those as well so um let's get it let's get it going um let's do our contract sections first and once we have our contracts up once we have our contracts kind of being built we can uh um we can we can start doing the front right because we can't start doing the front end until we have the back end kind of up and going so let's even just really quickly again look at what what we're trying to accomplish here what are these contracts trying to do so we have a contract right that's going to be taking tokens right we're going to be sending tokens to this token farm to this staking contract right we have a reward token like a dap token here that we're going to be giving back to people and do we need anything else are those the only two that we really need that's that's really all we need we just need those two pieces because we can use existing tokens we can use like the existing chain link token we can use the existing faucet token which we're going to pretend is die a lot of people are often often asked hey i'm looking for a die faucet um you can usually just uh i usually just use what's called faucet token i just pretend it's dye um so they just give you like uh erc20 you can just pop in here your address here amount 10 connect metamask mint free tokens and you'll get um and you get this thing called faucet token so if we look in your metamask uh once we mint it we'll get more more f we'll get 10 more fau so it looks like it just confirmed so now it's 1858. so this is what i use instead of like a die faucet i just use this faucet token so so this is all we need we just need two contracts we need a contract that allows us to um [Music] do all the staking and then we just need a simple erc20 to give rewards back now we also are going to want this platform to issue rewards so that's going to be another functionality so we need to stake we need to uh we need to unstake we need to issue some rewards um and that's really it for the most part we don't really need too many other other bits we we do need to kind of allow the specific tokens that we want so we do need to allow the addresses but that's really it so i'm gonna kill this and now we're gonna start from scratch now that we kind of know what we're doing so let's jump in here so we have our contract section um we have a whole bunch of boilerplate in here and we have a whole bunch of boilerplate scripts whole bunch of boilerplate migrations i'm just going to go ahead and kill all this stuff goodbye we're going to start from absolute scratch scripts yep we're just going to start from scratch here our smart contracts in this box audited no they are not these are uh these are uh created as is so we're just gonna get rid of all the scripts um we're gonna uh we're gonna get rid of we're gonna get rid of the tests too with the trash and cool so and we're we'll even get rid of all the migrations so we're starting from pretty much scratch here okay uh let's go ahead we'll leave the test for now so let's go ahead and create our first um the easier part of this demo which is going to be the dap token right this is just going to be an erc20 right and if you guys have followed along with some of the tutorials so far you know pretty much the easiest way to create an erc20 is just using opens up one so we're going to do pragma solidity um 0.6.0 we're going to import uh opens up my i'm actually going to copy paste here so i get it right and again open zeppelin um you see 20. if you guys check it out here's tony open that one uh it just imports some really standard open zipline code for us um so that we have a really easy way to create a new r220 oh and sorry actually we're starting from scratch so this will be empty yep okay cool so once we've imported from opens up on our year 20 we can do contract token we inherit it is erc20 we'll do constructor public here c20 all we need to do is give it a name and a symbol we'll call it app token and we'll give it a symbol of dap dap it up uh and then we just call this mint function so all this um all the syntax i'm doing you can check out the open documentation um to learn you know what this looks like but this is really the easiest to set up in the r20 so we're going to mint two mets of dots under they're going to be the owner and we're going to do a big i'm actually going to cover pieces too a large amount of uh for like the initial of the initial supply so if we go one two three four five six seven eight ten the initial supply is actually uh what is this a million mr supply is a million right because remember this is like in way so those are there and that's pretty much all we need for uh for our contracts here so let's do a quick truffle compile see if this worked looks like we ran into an error let's figure out what the error is can i find module oh okay i should probably install stuff install with your so this is going to install all the stuff that you see in package.json and get us going here now i am going to be skimping a little bit on the test in the interest of time um but oftentimes writing tests as you're as you're coding as you're developing is actually going to make your experience a lot better um if you've ever seen those those videos where like you press a button and another button pops up uh or like you fix one code or you fix one bug and like five other bugs get introduced um this is going to be um a test is gonna help you prevent from doing that right so tests are gonna be really useful and um uh yeah pretty much anytime you you write some type of function you put tests on it if you want to stay like that so for for this uh for this step we could put in some tests saying like hey is the initial supply what we expect it to be um are we doing what we want here but again we're just going to skip over the tests in the interest of time so let's do traffic compile again let's see if this compiles and great so it compiles so we know we don't have any compliation errors here okay great so we have dap token uh pretty much done so right so when we deploy this it's gonna mint um a million dap tokens to the user okay great now let's work on the harder one right and this is going to be we're going to call it tokenfarm.saul okay this is going to be the contract that has a lot of stuff in here so let's just like define what it needs to do right before we even um start coding but let's give it a pragma solidity soul id 0.6.0 um and let's uh let's contract token farm we need this to do let's let's think about this before we before we do anything so we probably need a constructor right constructor look what else do we need need uh we need a stake tokens amount right we need a user build the stake tokens what else do we need we probably want an unstaked token we don't want to have our people um forever permanently uh locked in here so we'll call on stake tokens public and what else do we need we probably want an issues reward right so let's give it an issue to or like an issue tokens so we'll do a function issue tokens and what else what else do we need we probably want to get the token price right because again we're going to be issuing rewards based off the value of those tokens so we'll say get token keith price anything else that we need i'm looking at my boilerplate here there are going to be a couple other um [Music] are going to be a couple other functions that we but these are kind of the main ones right we want someone to stake tokens unstake tokens and issue tokens i mean these are our three core functions so let's start let's start building this so um so [Music] let's give this let's give this a name real quick we'll call it string public name equals the token form or not and let's go into our constructor so the reward token that we're going to use is going to be that dap token that we deployed so we need a way to say hey the um the reward token is going to be this dev token so what we can actually do is we're going to import um we're going to import the interface of an erc20 into our smart contract again we can go to open zeppelin we're actually going to import this i your c20 this is the interface and allows us to interact with your c20s really easy [Music] great glad to hear the volume issues are fixed i'm sorry about that so we're going to import some opens up and code contracts token erc20 ir20.sol um and we're going to set a global ierc20 public yep token boom and here we're going to set the dap token equals i prc 20. tap token address and this is going to be a parameter that we pass so and again guys feel free to ask a ton of questions here these are meant to be engaging and we're supposed to work together on this um but great so we have our constructor and once we deploy this contract we're gonna we're gonna say hey the dap token the token that we're going to use to issue rewards is going to be this erc20 again this is an interface and it allows us to um say hey this is an erc20 and we're going to set it to this dap token bit so once we deploy this we're gonna set it to this dap token great uh simple enough so far now let's go to our stake tokens um function this one's gonna be a little bit more a little bit more interesting right so how do we actually have users stake stuff so this is going to be something that a user is going to call a user is going to call this function so what do we want them to do right we want them to stake a certain amount of a token so we probably need a couple things probably need an amount and the address of the token that they want to use okay so let's require the amount greater than zero and if they don't give it an amount greater than zero we're gonna give an error saying you know amount cannot be zero and let's have them jump in uh let's have them start um adding this token now something that we probably uh should think about though is do we want people to stake any and all types of tokens probably not we probably only want them to stake tokens that that we've defined that are good right if you want it to be any token you absolutely can but maybe we also don't have a price fee for those tokens right if we don't have a price fee for those tokens then we can't assess the value of the token so let's create a new function called token is allowed and this will give us an idea of whether or not the token is allowed so do function token is allowed and it takes the address of the token that's going to return boolean right true true if the token's allowed and then false if it's not so how do we actually figure out what tokens are allowed well we probably need some type of um some type of mapping right or some type of array that tells us which tokens are allowed so let's actually create that array at the top so we'll say there's an address array the loud tokens and this is where we're going to store our token so we you guys probably are going to see we're going to need like a store tokens or like allow tokens right so in our tokens is allowed function um or excuse me token is allowed we're going to loop around that array and we're going to find the ones that are allowed so we'll do a for loop uh uint256 call it allowed tokens index equals zero tokens index is gonna be smaller than the allowed tokens dot length allowed tokens index plus um and as you can see we're already starting to kind of get um a little bit a little bit big here right a little bit complicated so let's even talk about word wrap real quick uh and this is where you know writing those tests as you go along is going to make your life a lot easier right because if we do trouble compile right now we're probably going to get run into a bunch of errors it's going to be like what are you trying to do you're crazy and yeah it's like what you spell things wrong you can't come on three s's on address come on get it together patrick um but uh so running these tests kind of as you as you're progressing to make sure okay this function is actually gonna do what i wanted to do but again we're going to kind of skip over into in the interest of time so so we're going to loop through this array of allowed tokens and we're going to say if no allowed tokens allowed tokens index equals equals token then we're going to return true all right so if this token is in our array of allowed tokens then we're going to return uh otherwise we'll return false okay so this is what this function is doing and this is exactly like you could write a unit test for this just to make sure okay like am i setting this correctly so you probably need a function to add a loud tokens so let's add that function add aloud tokens address of the token now for this we are going to have a manager uh we are going to have like a token manager right because we don't want anyone to be able to just add tokens maybe their their add some terrible token but we do want to um we do want uh people to be able to add tokens so maybe this would be done by a governance a dow this wouldn't be necessarily the um this wouldn't necessarily be uh like the owner right because this would make it centralized this would be like the admin key we're just gonna do only owner for the sake of this demo so only owner is a modifier uh hopefully some of you guys are familiar with it it means that this function can only be called by the owner uh we can actually import this it opens up as well i'm just going to copy paste this ownable contract you guys can check it out it has what's only owner this is what the modifier looks like um it's actually really simple but it requires that the owner is going to be message.sender uh which is really nice so we do have to inherit it as well is ownable um all right we have some questions can we use this code in production it's not audited so i would highly recommend you do not this is provided as is it's uh hey patrick why don't you use a mapping for tracking allowed tokens uh a for loop would consume a lot of gas no um actually yeah that's that's probably much better um yeah that's probably way better [Laughter] now that you mention it um yeah i kind of want to let's change it on the fly let's do mapping of address to boolean public loud tokens yeah actually a mapping would be better i'm just gonna keep going just so i can uh follow along with my uh with my demo here but yes uh a mapping would be actually much better um and much cheaper and much more gas efficient so so yeah i probably did something weird on the front end that wanted me to use the mapping or something but um yeah you probably would want to use a mapping so let's go back to our our add a lot of tokens so we'll do allow tokens allow tokens push or if you're doing the mapping this would be like allowed tokens token equals true right if you're doing the mapping you would just do that it'll be really similar if you're going to use something like a new cipher to encrypt the messages is this where you would do that i haven't worked with new cipher enough to to know the answer to that [Music] maybe i'm not sure so cool so we have this function now it adds a loud tokens we have our is token allowed we have our ad allowed tokens uh awesome now we can go back to our staking now we can go back to our staking function so if token is allowed yep a mapping would be like a million times better if the token is allowed we're going to do some stuff right we need to we need to update unique token staked which we'll get to in a second we need to update the number of tokens that this address has that this user has let's just do some boilerplate code we're going to need to transfer the token so we're going to say we're going to take this token dot transfer from message.sender comma address we're going to send it we're going to transfer it from the sender to this contract uh by the amount and then we're going to need to we're going to need a way to keep track of how much they've actually staked so let's actually go ahead and create that as well we're going to need to have these guys have some type of staking balance right so this is where we definitely 100 need to do a mapping because uh an array would be insane so we'll do a mapping of addresses to and what do we want to do as a mapping of we probably want to do this to a mapping of a mapping actually don't let this uh spin your head too far we're gonna do um uh a user so it's gonna be the user address right is gonna be mapped to a mapping of token addresses which is mapped to amounts right so we're going to mapping of the address to uint 56 equals this and we're going to call this um public balance okay so that's what this is going to do let's go back down to our state token function right because this is one of our our most important ones uh we'll come back to this in a minute i'll show you why we need this but let's let's pretend we don't care about that for now um so our stake in balance and our stake token function sticking balance of actually sorry it's it's vice versa it's um it's gonna be token address excuse me to mapping of user addresses amounts sorry so we're going to do staking balance of the token but it doesn't really matter you can do it either way such that sender be equal to the staking balance of the token of the user plus the amount right so we want to keep track of the staking balance of their of their token that they're going to send so we're going to say the staking balance token message.sender is going to be equal to the same thing plus the new amount that they're going to send so great this is us keeping track of this taking balance here and then we're going to do uh we want to keep track of who all of our stakers are so we're going to add this this additional piece um in a minute i'm going to skip over it now unique but because this is if you just want to add staking here um without any rewards this is really all you need right if the token is loud go ahead and have them transfer it there's two other functions that we'll need and again we'll get to those in a minute so great so we have pretty much the boilerplate of the state token function done again we're going to come back to it a little bit later but now we want our users to be able to unstake tokens as well so uh how do we actually have them unstick the token so we'll do address token but they're going to unstake a specific token but first we need to balance equals speaking balance token that's under so we'll get we'll get their original balance now we we want their balance to be greater than zero otherwise we could say you know it's taking balance not b zero and once we get it we're going to do again to interact with these uh these erc20s we'll do iris here i erc 20 of the token dot transfer sender balance so transfer um just a quick note why are we using transfer here and then transfer from up here does anybody know i'm gonna wait like my two seconds for the delay to uh to kick up to uh to peace out why are we using transfer in one place and transfer from another does anybody know let's see how clever are we does anybody know sorry about that if nobody knows we can move on [Music] so the reason we're using transfer down here uh and then actually if you're watching this later you know pause for a second be like okay why are we using transfer here transfer from up here okay so the reason we're using transfer here is whoever is initiating the function is going to be um okay we have a couple questions here for unsure okay the reason that we're going to use transfer here is that we're going to call this unstake token and transfer assumes that the sender is going to be message.sender right it assumes one is from the owner and the other is from the min address transfer from is from someone after approve yep so transfer from we do have to do the approve right so up here in transfer from we're calling the stake token function but it's the contract that's actually doing the transferring right so we first have to approve that this contract can can do this right because we own the tokens we own the tokens so we're going to say okay we want to send the tokens from the sender of this to the smart contract because we are the owners of the token not the contract in this case who's the owner of the token the contract is so it doesn't have to uh it it can just send it doesn't have to um do that that whole two-step process right because it's the owner of the of the tokens so that's the difference this is when the contract owns the token um and the contract owns the token and it's moving the token this one the contract doesn't own the tokens but it's moving the tokens so so that's kind of the difference there that's why we need to use transfer versus transfer from so anyways let's do staking balance the token dot sender we're going to turn the balance to zero we're just going to withdraw everything and then we will need to do one other step but we'll get to that uh later so great so unsake tokens and state tokens if we wanted to just send this we probably could uh we wouldn't be able to issue any tokens but we could have people stake on our platform and maybe we could do something crazy with their with their stake but we want to issue tokens we want to do that liquidity farming stuff so let's uh let's actually do this this issue tokens bit here okay so um how do we issue tokens well we want an idea of who all the stakers are right so do we have any any um any data structure where all the stakers are not really right we have the staking balance mapping this is mapping we can't loop through a lot i'm mapping we have an allowed tokens uh array but that's just the token so how do we actually keep track of this well we're probably going to need another address array stickers this is where we're going to store all of the stickers now we have to go back in our state tokens and we actually have to update our stakers bit okay so we'd have to do like stakers.push message.sender what's the issue here if i stake the same type of token over and over again i'm going to add to this list a whole bunch of times so we only want to update if there's a new unique token staked okay so we're going to add this function called a unique token state and if the user does have unique token stakes uh equals equals true here actually will count if unique token staked is one if they're if they're adding a unique token if this is their first their first token we'll do stakers.push message.sender the number of unique tokens that they have um is one we'll do uh we'll set it like we'll we'll send it to one so we're only going to be updating here if this is their um their first uh token staked but obviously we have to update the amount of tokens take so let's create this function update uh function update you need token state right and what is this going to do it's going to just add um the number of unique tokens that they have right so we'll do address user token and we'll have this be an internal function so that other people cannot call this right only our contract can call this we'll say if balance token user is less than or equal to zero what are we going to do we're going to uh unique to unique tokens staked by the user equal to unique staked user what's fun oh we need this unique token staked um data structure let's go ahead and make that we'll do mapping address to you in 256 public unique tokens that's right yeah so if the staking balance of a user of that token is greater than zero we're going to add it we're going to add to the number of unique token state so this is kind of a dangerous function um right because we're we're doing kind of a dumb operation here to update the number of unique tokens but again the code here is provided as is and uh isn't really meant for production anyways so great so we have this unique token staked now let's go back to our state token function mistake token function and we need to give it the message.sender and it's okay and we should probably do something at the end i'm going to pause real quick um if anybody's super lost i know i've kind of been coding for a little bit um and it's like what are you doing you are doing some crazy stuff here um are there any questions from anybody following along so far this all right it's a little bit delayed so the questions might come in in a minute but i will look down in a minute so we're still onto the issue tokens here okay so now we have an idea of um who the stickers are is it on github yes this is on github [Music] boom right here everything that we're going over is in here and you can feel free to follow along uh in here if you want so issue tokens um what we want to do is we want to loop through the stakers equals zero so let's look through all the stakers and we'll do figures index is less than stakers.length stakers index plus plus we should do this right how do you use solidity 0.6 uh because my example was written in 0.6 that's really it and uh i haven't updated yet that's pretty much it use whatever study version that you want a lot of the um a lot of the chain like core contracts uh work really well in 0.6 and i know they work well in 0.6 so um so that's why i just kind of been sticking with it uh yeah at some point we'll probably move um i'll do more examples in uh 0.8 0.8 you know that safe math upgrade is actually massive i'm really excited about that but anyways um so what do we want to do so we'll do address recipient equals gonna be the stakers stickers index and we're gonna send some of our dap token right this is gonna be that um that reward for them so we're going to do dab token.transfer recipient but how much are we going to send them how much we send them oh also we definitely want only the manager to be able to call us so only how much are we going to send them well again you know we want it to be based off the value that they've staked on our platform okay so we probably should have a function that checks the total value of a user or or how much they've staked in the platform so let's go ahead and create that function now so function is get user total value address of the user and it's going to be a public view returns un256 because we're we're going to be using this function to be getting the total uh value that a user has staked on our platform so how do we do this well conceptually we just loop through all the tokens that they have staked on a platform and we get their ethereum equivalent in value okay so let's go ahead and figure out how to do this so let's do u and 256 total value equals zero and then if we want to be clever we do like turns total value but we're not going to clog over here if you want to check do they have unique tokens staked does this user have unique cooking state if yes well what do we want to do well we're going to loop loop through all the tokens right and this is where a mapping would be a little bit hard actually because if we had um uh yeah this is where mapping would be a little bit hard so we're going to loop through the allowed tokens and this way we can always kind of go back and uh loop through okay how many tokens does this person have on our platform so this is where an array actually does come in really handy so uni-256 allowed tokens index zero cloud tokens index is less than allowed tokens.length cloud tokens index plus plus there's definitely some more clever data structures than this uh for doing this but this is what we're going with for now just because it's conceptually a little bit easier so we're going to loop through all the allowed tokens i'm going to check hey does this user have these allowed tokens if yes great let's get the value so let's even do that right now we'll do total value equal to total value plus uh get user speaking balance eth value that was kind of disgusting function where they're going to take the user and allowed tokens of the allowed tokens index we'll create another function here called get users taking balance each value so what's this going to do it's going to say based off the user user and the token just gives us the user and the token how much is that worth if i have 10 link how much is that worth if i have 10 die how much is that worth right we want to get that value so we know how much to reward them so let's create another function it's going to be this function here it's going to be function it users taking balance e value and we're again we're going to take address of the user because of the token there's probably a better function we can do than this we do public view returns uint256 and let's do this so this is where getting the price of this token is going to be really really important okay so we don't we don't have the functionality yet but we will um so let's do this so let's just do a quick check if the unique token staked user is less than or equal to zero and return zero so right if they don't have any tokens we're just gonna be like okay you don't have any tokens but uh beat it but if they do have tokens we're gonna return they can balance of that token of the user we're going to multiply it by our function get token f price token and then we're actually going to divide it by 10 raised to the 18. all right because um oh and then actually we want to even do it like this bring up the balance we're going to times it by its price and then we're just going to divide by the precision here so that we can get the actual actual reward amount that we're going to send them so let's create another function a lot of functions here get token ethprice and this function get together price first i base off the address of the token look view returns 256 based off the address of the token we need to get the price so this is where the chain link price feed bid comes in so we'll do address price feed address and how do we get the price feed address well we're probably going to need to do some type of token mapping so we'll call it booking price feed mapping okay we'll actually have to create this as well we'll do mapping address to address public token pricing mapping and we're probably going to need to uh a function that will set this up correctly so we'll do function set price feed contract we'll do address of the token i'm actually going to go a little bit quicker just because i'm running a little bit long time after the price feed public only owner do token price feed mapping token [Music] equals price fee okay so this is something that once we initialize our contracts we're good we're just going to set this up right depending on the network that we're on so let's scroll back down to get token eats price which i clearly have defined twice here's where we did the chain link bit aggregate tour v3 interface speed and if you haven't seen this stuff work with pressure stuff definitely go check out the documentation nice feed address um so we want to be working with this chain link aggregator v3 interface so we're gonna have to go back to the top we're gonna have to import this great great we've imported it now let's just get that price so if we go back to the docs to also change that link for the price feeds using the latest price this is kind of the functions that we have and this is exactly what we're doing in our contract let's even just copy this because this is exactly what we want except for yeah price feed the latest round data and we're going to return although we want a um 256 not an int price so great so now we have the latest token heath price we have the users taking balance user get total value we can issue tokens oh no we can't issue tokens let's finish that so what are we going to what are we going to transfer this person we're we're going to transfer the total value they have staked on our platform so get user total value be zip the end [Music] boom now we have oh import what yeah import the chain link library sorry so this is how we're going to import chain link into this smart contract here we're going to do this this import statement right here so that we can work with the chain-link price feeds good question so now do we have everything a lot of stuff in here let's do a quick quick scroll down right so we have dab token right we have um we have two arrays for stakers and the tokens that we allowed yes we could do some mapping stuff here we have three mappings that we want for our users we have a constructor we have a state tokens function we have a a setting price feed function updating unique tokens um do we have unstake uh we haven't fixed unstake but we will in a minute um yeah i think that's the only bit we need so this again is where tests are gonna help you out a lot you write some tests and you can actually um do stuff do stuff from the tests so let's fix our unstick tokens bit here what do we need to fix from here well we need to add this bit about the unique unique token staked message. equal since they're unstaking all their tokens which give me their own staking that specific token so we're going to remove that that token from that platform awesome now in the interest of time i kind of want to just write my migration scripts like copy paste um so we're going to we're going to write the migration skip scripts real fast okay so let's do this in here we're going to do two deploy actually let's let's compile first compile great we have some complication errors let's go see did you mean i your t20 uh yep i sure did i mean stakers i sure did did you mean stakers here too i sure did did you mean a real pipe all right i'll start hey awesome so stuff compiles great so again you definitely would want to write tests here we're going to skip over them because we only have an hour left and we gotta get to the front end so um right test it's gonna it's actually gonna it's gonna help you a lot more a lot of times somebody like often times when i'm doing this stuff i'm like oh i'll just skip the test it'll be quicker for me to get to like an mvp and it actually usually ends up taking me longer right because i run into bugs i try to fix something and then everything gets way out of whack so we're gonna skip the test just because i've already uh tested this myself so let's go ahead and do the migration so it's compiling awesome let's migrate some stuff so we'll do lucant's depth token and if you're like wait migration what are you talking about here uh go watch um some of those other truffle videos that we have artifacts dot require token module dot exports equals async function deployer network accounts we'll do await deployer.deploy app token const yep token equals await token dot deployed we'll do like console.log um token.address so let's go ahead and test this and again since i just downloaded the truffle box if we go to the config here we have ganache we have coven um oh it looks like we don't have live in here probably should have live in here um but we have these two environment rails mnemonic rpc url here's an example if you want to just do it in a dot env you do like emb and then put those in there again we have ours set so we don't need to do that if you're like wait what environment what are you talking about um just kind of follow this and put it in your own emv file so we'll do truffle migrate dash dash work kelvin and we'll see if this works so this should run this and we should constantly log the depth token dot address ran into an error here unknown error when sending transaction [Music] there's a good chance this is actually related to the this world recently released a bug in their hardware wallet and uh i'm just gonna reinstall everything [Music] sorry guys yeah there's a there's a weird glitch right now so this is good actually we're going to be we're going to test deploying this i mean and this is like a really simple erc20 so if we can't deploy this that's a bad sign [Music] so we're going to re-download this stuff now let's go ahead and try to um shuffle migrate and we'll see if we get the same error i haven't seen this error before so this will be um do a little bit of live debugging here if this is an error and again the other thing about writing tests is you don't have to you know finagle with you know doing the testnet eth and the test net link um you can just run everything locally uh which is great which is why we you know why we still have these mocks in here uh yeah so it looks like it was related to that so yeah truffle released a bug recently um so if that's that's causing issues just use uh just use that different version and i might even go into the box and up update that my uh like right after this video so that everyone just kind of starts with that that older version um cool so we actually were able to deploy it and this is where the address was we can go check that out on coventry scan yeah so the the answer to that error is just downgrading your hd wall provider to 1.0.40 um it's uh it's it's a really annoying truffle thing right now so um so the other the other work around is to just not use truffle use hard hat or brownie so uh anyways uh great so we have this deploy script let's create our deploy script for the other one and this will be deploy token farm this one's going to be a couple more things so i'm just going to do a little copy and pasting in the interest of time and do this module.exports again we're going to get the dap token that's already deployed we're going to deploy the token farm we're going to send our token farm um the initial starting balance here and great and then i'm just going to copy paste again sorry guys i'm super speeding through this just because i want to get to the front stuff um you can go check this out on the github let's talk about what's happening here um we're saying okay if the network starts with coven or it's live if it's one of these two networks we're gonna set these um we're gonna set these addresses so we're to add allowed tokens to this token which is the link token address and this is the link f price feed address so again you can see all these in the contract addresses here go to ethereum you could also use e and s that actually would be pretty cool but if we scroll down to kelvin it's it's a f actually we can even just link f so uh on the coven network so we're getting the price and f of everything so that we have um something to compare to we're gonna do fau token as well this is the favu token address we're pretending it's gonna be die so this is the die eath and then this is going to be our adap token which we're also going to be pretending it's dye so we have this add allowed tokens so we're adding the allowed tokens for it and then we're setting the price feed contracts up correctly okay so we have this mapping and we know where the price feed addresses are so let's go ahead and run this as well very network coven and this should just deploy the token farm because truffle should be smart enough to be like oh yeah you already deployed the dap token let's uh yeah so it's going right for the token farm which is good and we are deploying awesome we're getting somewhere so now we have the back end pretty much done and we have stuff deployed uh we have stuff deployed to um some good places but when working with our front end we actually want to um we actually want to be able to interact and work with these abis on the front end so i'm actually going to create a new folder src and this is where all my front-end stuff is going to be and i'm going to create a new folder in here called apis and what i want to do actually is my truffle config and this is where we're we're slowly migrating to the front of bit we can add what's called a builds directory or a contract build directory in here so we can say contracts build directory it's going to be so c apis this way our front end will actually be able to uh enter out be able to interact with this a little bit better so now um so we have source apis if we rerun this great network coven we're actually going to get all these apis in this source apis folder right and this will be great because we can put all our front-end stuff in here what is an abi abi stands for application binary interface so if we look at these it has this avi section and this is really where the api is and it just shows the way to like interact with your contract right so it's going to say it's going to have these it's going to have all your events all your function calls it it tells us okay here are the functions and here's what we can do with this contract and we need an avi and an address in order to interact with any uh any smart contract on chain so uh good question so that is that is the apis though so awesome so we've deployed to source apis we have our back end setup now we can move into the front end stuff let's do it let's do some front-end stuff so i'm going to go ahead and drop in uh some boilerplate stuff um if you guys uh you guys feel free to like just copy paste from um from the repo on this uh this is just gonna get us set up and doing uh uh and doing things uh for the front end so [Music] in here we're gonna do well actually once this is done um being sent so we're gonna add components and we're gonna add everything we need for our front end in this src so we're adding components index.js we're gonna have a service worker and it's gonna be pretty lightweight um pretty lightweight front end it's just gonna be a simple uh well simple as a terrible word um but we're just going to have a server that's going to be yeah i said running our front end once this decides it wants to uh wants to finish [Music] so yeah we're not going to go over like all of the stuff here we're just going to copy paste the boilerplate just so that our lives are a little bit easier so okay cool let's go into source there um we're gonna touch service worker dot js and open that up we're going to address and i'm just going to paste some stuff from uh my github again just just feel free to copy paste for this section this is kind of the less important stuff and we are also going to um create an index touch so this is going to be one of the uh one of the more important parts so it's going to be react so we're going to import react from react import react dom from react dom oh actually yeah import bootstrap slash this slash css slash bootstrap.css and then actually i'm just going to go ahead and copy paste all this stuff in here um because this is this is kind of the on this really isn't the interesting part this is literally just some boilerplate to get started you can literally copy paste this into your smart contract and go the more important thing and the more interesting thing is going to be components so now we have this components file this is where stuff gets interesting okay so uh our we're gonna have two kind of main functions we're gonna have our main files we're gonna have app.js main.js so let's go ahead and pull and navbar.js so let's go ahead and create all those we're gonna do app.js file is gonna be main.js appbar.js these are the different components of a react app yes the navbar is going to be for the navbar and the main and app are going to work together let's also create an app.css and i'm kind of glossing over a little bit here but stick with me guys so let's start doing our um which one do we want to start with first actually how do i get through all this in 45 minutes that's gonna be the the real challenge here is going to rip through this in 45 minutes um let's just start with uh with main right yeah let's start with me so we're gonna um again we're gonna be doing kind of the class-based react here so let's just go ahead and start ripping it so we're gonna import react come on oh mint from react import let's get some images in here so we can skip the images for now right now we have our class main it's going to extend component and let's render some stuff so this is going to be our main function that's going to be rendering um rendering our front end so we have our render function we're going to return and this is where we start writing the html and this is where we write uh kind of the less interesting stuff and i kind of want to just copy paste oh there's some how did i go through this in like two hours let's do div id actually yeah how do i get through the rest of this in 40 minutes that's gonna be the real question which which sections can i copy paste and which sections do we want to see um let's think about this what's the best way to go about this what do you guys think how do i how do i copy paste most of this without uh without copy pasting stuff maybe we'll start with app first actually yeah i'm running a little low on time i probably should stop you know stop being slow here let's start with app let's start with app.js yep let's just start here and let's just go import react once from react yeah let's start here because this is gonna have a lot of the contract stuff so we're gonna be using web3 from three now we want to import the contracts that we made yeah i do want to copy the directory but i don't want to um copy paste this jam you're killing well like i um i don't want to like i feel like i i'm gonna be skipping over a lot of stuff if i just copy paste everything um but yeah let me let me let me know what you guys think we're gonna import it so i'm me import our dev token and this is why we put it into its own kind of thing we're going to import it from avi json we're going to see how we're going to interact i'm actually yeah we're going to go through app and then uh index or main excuse me main will probably just copy paste because there's going to be a lot there cooking farm from abi token farm jason and this is one of the niceties about having your front-end backend in the same repo we can we can compile build send it and then our friend automatically has it available we do import erc20 from avis slash dot json uh we're going to import nav bar actually we're going to skip the nav bar for now or main um main import app.css that's how we're going to style it and then we're going to import and that's that's actually we will have to import the nav bar crap with the nav bar first actually then now far from maybe is could you please explain abis and why we need it so this is the second time yeah someone's asked about api so yeah i'll go into apis so abi stands for application binary interface so if we go to like if we go back to remix for example right um oh crap i meant to update this actually um so it stands for application binary interface so this means that we have a [Music] a way to interact with these these smart contracts right when we call call contracts when we interact with contracts we're kind of just calling their these functions um that are really just like bytes and stuff on chain so when we um it's it's a little bit easier to see when we're actually doing it when we um if i want to interact with a contract on chain and i don't know what the functions are how am i going to interact with it right like if we go to ether scan uh proven and we look at this and we look at it so we just deployed um token farm address right go to the contract what do you see here you see any functions no you see a whole bunch of stuff right um this is this doesn't mean anything right this isn't when we're when we're writing software right and we want to we want to call a function in here um like there's nothing here to call right this is just a bunch of jar bowls like how do we actually compute this so we need an abi to say here's how we can interact with this smart contract so an api is a way to like make sense of stuff now the apis are kind of dumb and when we say hey this api belongs to this address our code is going to say oh okay well you're the boss great and you know uh if we call a function based off our abi to this contract um it's going to try to call that function on this contract so uh and if that function exists it'll call it and we'll be successful great if it doesn't exist it'll freak out and be like stop doing whatever you're doing you're you're being nonsense so there are two things you always need to interact with a contract that's on chain you need the address of that contract and you need the abi or interface those are the two things you always need when interacting with the contract so keep that in mind you need the address and you need the abr interface you also need the the um the eth1 connection or excuse me the ethe connection right you also need to know what blockchain it's on like if it's on kelvin or ringby or whatever but those are the two main things once you know what blockchain you're on those are the two things you need you need the address and you need the abi you need the avi because you need to be your code needs to know how to interact with that contract does that make sense because this is just this is just gerbil right computer doesn't understand what this is if i go back to my code and i say hey hey code um this is how you interact with it hey code this this is what you can do uh hey code there's a um excuse me that's the let's look at the token farm hey code this contract has an owner new owner previous owner um hey code you can you can change ownership you can renounce the ownership uh hey code this has a staking balance uh you can view the types of that's taking balance uh hey code it has a mapping in here hey code uh you can add allowed tokens here's the inputs so so it lets us know how to actually interact with it so so good question really good question i'm actually just going to copy paste nav bar because the nav bar is not doing anything interesting yeah i do need to add this as well [Music] cool hello yeah we're not going to look at the app bar is not doing anything interesting we'll skip over that uh app.js okay class app extends component and this is just some react stuff again this is class-based um the vrf pizza one that does uh state hooks which is different i recommend checking out the steak hooks if you want to work with the newest stuff so async component will mount and this is when we load we're going to await this dot load web 3. wait this dot load block chain data okay so once we once we log into the page we want to load our web3 stuff we want to connect to the blockchain okay so how do we do that well we probably need a function called um uh called load web3 we probably need to account a function called load web3 we also need a function called load blockchain data okay so this is going to connect us to web3 and this one is going to load all the blockchain data into our smart account into the front end okay so this is hey once we get to the page how do we get stuff up let's do this so let's create an async function called loadweb3 and this is where like knowing a lot of about the how to work with web3 kind of comes into play and how to work with web3 on the front end so we're gonna say if window.ethereum so if there is like a meta mask or something that's what this means if window.ethereum you can learn more about this in the web3 package but if window.ethereum now we're going to say window.web3 equals new web3 window.theory this is how we're going to connect to the blockchain we're saying await window.ethereum.enable we're kind of hard coding this so to say okay the instant we get into this front end we're going to load web3 data we're going to load blockchain stuff and we're going to wait until the user hits that confirm button um what happens if i hit yarn all right you're on start right now um i think i was supposed to create react dab here oh yeah is that where the boiler part is i want to test this real quick i started this with great rack up i probably did what happens nbx pre-reactor rack app okay to proceed yeah sure uh unless it deletes all my stuff let's do make the r run tests cds yeah it's okay to proceed because actually if if this is what uh if this is what we did then it then everything will make a lot more sense i actually don't remember if i created this with create rack that let's find out guys let's find out there's a good chance that we did and if we did then that's great so we have a new folder src tst oh well look at that public looks pretty much like what we were doing huh well we're going to just delete that though remove rf test so if you're um if you're looking to create a front end i highly recommend doing like create react app as your starting point or just copy and pasting stuff from here but we're just going to we're just going to copy paste we're going to continue on [Music] in our package.json let's do scripts let's add a new one i'm going to start we're going to do like that react with scripts to start so that's what happens command not found okay let's get the command so we do need to add a lot of this stuff in here sorry guys i kind of bounced all over the place uh hd1 so um so i'm actually going to recommend you guys do like create react app or create ethep get started if you do create um ethep you're going to get the state hooks if you create react-app you're going to get this class based stuff so we're just going to copy paste over [Music] uh we're gonna copy-paste some stuff over just that we get everything good here apologies guys stop the live coding oh no okay sorry i'm just going to grab from uh oh whoops i'm going to remove this real quick apologies guys so yeah so you're gonna want to do create react app uh or create ethe app and that's really gonna um get you guys set up but in the interest of time um for me like actually doing this right so we are still going to go through app.js but we're going to have everything else already set up for us so create ethe app or create react app um that's kind of going to be your starting point and then you know once we did you guys saw that once we did that kind of create um that create react app it's it populated uh with you know uh with the different components uh with the index and everything and then you can just run yarn start from that um and that'll actually get you uh get you some get you up to speed so uh yeah this kind of has everything already imported in it but we're gonna we're gonna pretend like we don't have anything in here yeah so all right guys apologies there right react apricot it really does explain a ton i mean it's still nothing but i have much better framework i'm ahead of where to start putting it is awesome that's great to hear um so yeah so create react app or create ethef that's those are two really good ways to to start your front end but um yeah sorry i kind of uh jumped around a lot there let's let's put back the um put back this stuff so because this is where most of the important stuff is anyways actually maine is going to have a whole bunch of like html uh yeah i'm not gonna have enough time to go through with this anyways maine's gonna have a bunch of html uh a bunch of uh javascript to get um to like update the html based off the variables and that's really up that's really what this this main page has so let's do the app.js yeah because there's no way we're gonna hit it all in 30 minutes a little bit aggressive here with the timing uh but so app is where the majority of the stuff happens so in here what are we gonna do we're going to the instant we we start we're going to load web3 okay and so we're going to say if window.ethereum um we're going to do else if window.web3 no.web3 equals new f new up three window.web3.currentprovider and what this is saying is saying okay if there's a theorem here let's enable it otherwise let's just get the current provider and so you pretty much have to have a meta mask the way we're setting this up you have to have a metamask to to set to work with this so we're saying if they don't we're gonna do window.alert um you know on heath brow d protect it on web3 browser detected maybe install metamask i install again so all the contracts are going to be the same the deploy scripts are going to be the same and we have 25 minutes to get through the rest so i kind of uh there's no way i was going to get through the rest if we're going to go through everything so create ethep creative app and create react app are going to be your friends create eath app is going to use state hooks as opposed to this class-based stuff but say hooks are really nice so let's go ahead and do yarn start now and let's see let's see what this little bit gets us oh again it's not much right pretty much nothing or it'll just load forever because it's like what are you doing what are you talking about uh yeah well we have a we have an error but metamask pops up right away right so we're actually going to go ahead and go back let's let's add this other um this other function that we have which is load blockchain data load blockchain data and this is where we have to load we want to load all of our contract information that's web3 equals window.web3 there are accounts const accounts equals await get web3.ethe.getaccounts ah sorry so if you do yarn start it'll keep like updating i don't want to do that quite yet um and we're going to set the state of uh of our app here so this is going to be the the state hooks are a little bit different we're going to use set state so we're going to set state of our account to account zero this dot set state of token address we're going to initialize the front end so that they're they're on the link token address we're going to do this dot set state so we're going to skip this part uh we have to have this part let's get the image chain link set state book a name ooh like so what is this going to do actually here's what it's going to do here kind of break and freak out actually because we don't have any other information yeah it's gonna break and freak out i have 20 minutes to get through a lot of stuff um let's go really fast i guess so what are we setting the state for so we're setting the state so that on main.js we can actually call this stuff so again main is where we do all of our html right so if we want to get the staking balance of each token we'll on the front end we can do this stop properties and get the token name right because when we set the state we're sending the state for our front end same thing with image if we want to use a certain image we can we can grab it with by getting from the properties that we set uh token name address and everything so let's let's just try to rip through the rest of this because this is kind of the important one so we'll do const erc20 equals new web3.ethe.contract and this is where we need that api you see 20. api it's not state token address this dot set state to erc20 we're setting the erc20 state to eoc 20. so again on the front end actually we don't do anything here we'll do it on the back end stuff and then we'll get the balance let here see 20 balance wait you see 20 dot methods dot balance of this.state.account.com so we're going to get the balance of this efc20 based off of the account that's connected this way we can render it on the front end and then we'll do this.set state your c20 balance proceed 20 balance dot 2 string we're getting our erc20 balance of the account that's connected to us and we're probably going to we're going to render this on the front end so let's keep going though we have the balance of our year 20. let's do const f token data yep token dot networks work id um uh this staff token.network says let's get the the dap token data from our networks based off of the the id like for example if we're on coven if we're on rink b if we're on whatever [Music] [Music] and if there is data there then we'll let's get that data token equals new 3.8 contracts and to again you see we're using this web3.et.contract and we're going to use the dap token.api again because again in order to interact with anything read the abi right we need to work with the api and the address anytime we initialize a contract to interact with avi address always we'll do this dot set state address step token data [Music] we're setting the dap token uh we're telling it we're saying hey great we have a dab token here we're also going to do this dot set state token [Music] now let's start getting some balances here let dap token balance equals await token.methods i'm sorry i'm going so fast here guys bounce of this.state.account call same thing as above how we got the balance of the erc20 we're gonna get the bounce of the reward token this dot set state of token balance we can balance that to string so now we have the we have the balance here and then again we're gonna do else alert say app token not deployed so if we don't find any information we're just going to say hey we have an error okay so this is all for the dap token it's all the dap token data here this is all the erc20 stuff now let's grab stuff for the um for the token farm so const token farm data and this is all in this async load blockchain data right so this is just us loading all the blockchain data from our contracts tokenform data is gonna be tokenfarm.networks again network id because we want the network id typo balance of thank you thank you this is what i get for trying to build a whole front end in 15 minutes token farm data um if token form data accounts token form equals new web3.e.contract you can arm.avi farm data address thank you appreciate that um so again same thing we're getting the token farm information from the abi in the address again you're going to see this a lot anytime you want to interact with a contract you're going to need to get the api and the address so let's set state farm this dot update is taking balance and this is a function that we're going to need to do we're going to say okay great let's get all the all the token form data let's update the staking balance um it's going to be a function we're going to make it a little bit and then let's do another uh let's do another else here right else hey you didn't deploy the token form so we're loading blockchain data we're getting all the information for whatever token that they're working with right now again we're going to default them to link then we're going to get the dap token this is going to be the rewards right the rewards that they need and then we're going to get all the token farm data and then we'll do once this is all done we'll set loading to false and we'll have a loading state that we will will change to true often okay great so this is going to load us all of our we have 10 minutes left i'm not going to get through the rest of the stuff guys i'm sorry i'm going to copy paste and uh we're going to just go over um we ran in a time team we ran out of time i was too slow building the contract so let's just go ahead and run this copy pasted stuff back in so let's just go over what kind of happened here uh because again i'm not we're not going to have time to kind of just code everything else so we have a couple functions at the top here we have component will mount so this gets loaded whenever we um whenever we like refresh right so we load this web 3 data which we saw was just like basically interacting with metamask and then we have this load blockchain data which gets all of our all of our account information it gets all of our con uh erc20 information it loads the dap token it loads the token farm and then we have a couple of different functions this is this stake tokens this is how we interact with that big stake tokens button you can see that we're once we hit stake tokens we're going to change loading and on the front end um there's a loading component i might probably nav bar or it's in the css oh no it's in the nav bar where is loading ah when we're rendering if this dot set state is loading we're gonna add this little this little html that says loading um uh we have a way to change token whenever we click a button that changes the different tokens we have this function here which gets called again from the from the front end main.js that's how we kind of botched the front of here guys but whenever we click one of these buttons right if we click dab token we call this change token function which changes us to you know that specific token what else is in app.js we have update balance which gets called uh whenever like a transaction finishes we can call this update balance to update these these bounces on the front end right because we have these different balances here [Music] update stake and balance this is a button that we press um just using this isn't a button heavy press this again is going to update the amount of staking balance that we have we have a whole bunch of other functions down here like i said stake tokens unstake tokens this is this big button right here staking on the stake these are what gets called these these functions gets called and this constructor props thing this is what's used so that this main can render all the variables from this app.js and then we also have this render if stuff is loading we're going to have this little loading bit and then the main content is going to be uh again we're going to say hey we're going to send it over to main.js and here's what we're going to set all the like starting variables too so that main can understand stuff and um and then yeah and this is just for the nav bar so sorry guys i we didn't quite have enough time to like go through everything here but let's let's just like look at uh how this works so let's let's take right now i'm staking 10 link let's take one more link uh stick see if we get this loading thing pop up metamask is going to ask us to approve first once that goes through it's going to ask us to actually confirm and now what's happening is a transactions going on on coven and oh unless i just broke everything oh sorry that was actually a different uh a different local host that was running oh no it's there so let's see did that transaction finish code looks like it did finish first taking balance finally went up to 11. now if we unstake let's say we want to pull all of our link back we're going to confirm once this finishes the staking balance is going to go back down to zero because we're going to unstake everything so it looks like it finished we do a refresh here it looks like it's back down to zero which is good and we can see our link balance went up right we see the balance of all of our tokens here our link balance went up now we don't have any reward so let's figure out how to do that remember we only get rewards if people have something staked so let's hit stake let's take some of our tokens here yep and then we'll take questions yeah sorry we kind of re we ran through this really quick um i recommend you guys checking out create react app or create ethe app to kind of get a front end going pretty quick great ethap is really good it is using state hooks um so this the one this this demo uses class-based components which is a little bit different um so but learning the state hooks will be really good and once this transaction finishes looks like it's still going we'll get a staking balance and we can call one of our scripts here we can call issue tokens um this issue token script and then we'll be able to see a reward here does this finish okay great we have 10 link stake now right here let's go back to our scripts run truffle exact scripts token network token it's going to call our issue tokens function that's it i know network coven is a network live sorry i uh i converted it to live here network live and this should issue tokens this should issue rewards tokens here based off of how much 10 link costs in eth so sorry kind of bounce all over the place but uh yeah open for some questions here guys hopefully at least the the first part was really helpful kind of seeing the uh the running process of a um of a depth that actually works and again you can absolutely fork this do whatever you want with this play with this um or just go right for create ethe app and go from there any questions comments here as we we wait for this transaction to go through their uh links taking isn't uh a thing um but for this um for this for token farm um uh zero right now this this uh isn't hooked up to like any other application so this is kind of the gateway right once you have people staying on your platform then you can deposit into ave you can kind of do what yearned out finances and deposit it around you can kind of do whatever you want once we both stay in your platform so right now the apy for this application is zero good question and is it freaking out because i have to redeploy well whenever that finishes and this will go up any recommendations for resources that go in depth what you taught today um yeah so for the front end stuff i would say go check out craig eath app um this one's really good for the truffle stuff i mean most of the back end stuff is actually more um i mean you can just watch like chain link chain like youtube if you go to videos right uh we did uh we've done a number of workshops on on the back and stuff right testing you can go check out this video here um for the truffle stuff we can check out here uh dap university like i said dap university has a lot of really good videos if you like videos um if you like um like courses like udemy glutamine solidity is really good um crypto zombies it's gonna be one that's really good and this is just kind of uh basic solidity stuff here that's more like basic solidity stuff here but for the front end stuff um yeah create uh create ethap uh or you could take really any any react or front end course like um for that vrf pizza that silly vigorous pizza one i i was literally uh i learned a lot of my react stuff from just googling you know state hooks react front end and then watching a bunch of videos that teach us how to do that so the docs are really good there's a lot of videos on some of the stuff yeah i apologize we didn't go as deep in front of stuff as we would have liked because we kind of got short on time but um yeah a lot of there's a lot of really resources there good question any other questions my biggest problem is wrapping around wrapping my head around linking smart contracts to a front end um yeah so really the the piece that you really need um is going to be like if you create react app or create ethep or whatever the biggest thing that you're really going to want to look for is is having this abi section right having uh being able to get your apis because if you look at all of our app our front-end stuff in app.js is we import these apis right import token farm from abi's the token farm and then once you once you import an api um you can make a co like you can interact with the contract with with kind of pure javascript stuff right so const token farm equals new web3.ethe.contract pass in the api passing the address those are the two things that you're going to need and once you have those you can you can do whatever you want right so like right away we got the token farm with the abi with the address and then we called uh tokenform.methods.stakingbalance right so we're getting the state so we called one of these functions and if we remember we're gonna farm we have um so solidity is interesting oh sorry you guys can't see my screen so yeah in app.js you need um like i said you need the api and you need the address right that's it web3.e.contract ethers is a pretty similar syntax but once you have the api in the address then you can just start calling calling functions right so staking balance is a function in solidity like these these global variables are count as functions but we could just as easily call like state tokens right and and once you have this you're good to go so you just need uh the other thing that you're gonna need is a web3 connection we do it with web3 um web3 equals window window.web3 uh and we do this load web3 function right so if we say if window.ethereum then we have window.web3 equal to this window without ethereum window ethereum is basically saying if metamask is there have that metamask be the connection uh which is really helpful so once you have the the the blockchain connection the api the address you're good to go and since we're dumping our abis to this apis folder we can just uh when we compile we can just pull the apis right out of here hope that helps that's a good question awesome performance thank you i do i would apologi uh i am late for a meeting but um yeah feel free to ask questions in the discord thanks everybody for joining and we'll talk to you soon

Channel: Chainlink

Views: 2,693

Keywords:

Id: Zuyfy9wz5Ww

Length: 125min 14sec (7514 seconds)

Published: Wed Mar 24 2021