🏗 Introduction to Scaffold-ETH

[Applause] [Music] uh if you guys aren't familiar with scaffolding it's just amazing awesome open source um program or a collection of tools it's kind of like a tool kit that you can use to rapidly deploy ethereum based uh daps uh real quickly so it's available on github so really you know you can kind of get started real quickly by just forking the code we're gonna go through a demo today and kind of walk through it and show you how you can tinker but all the instructions are here so you can get started real quickly um once you get through kind of tinkering around with with scaffolding you can kind of go on there and put in examples from like solidity by example and kind of mess around with it and after you've been kind of playing around with a bit with it a bit you can go to uh speedrun ethereum so the speedrun theorem is kind of this like uh kind of these quests that you go on where you learn how to do different things like build an nft uh be it build a decentralized staking app token vendor dice game there's all these cool things you can do and eventually you can become part of the build guild which is this kind of like collection of of coders that want to build on the ethereum ecosystem so check that out everything you need is right here so you guys if you guys take a picture of this this will give you the website for github this will give you speed around ethereum and you guys can get started um but yeah so we don't have the app up right now uh but i i use what's called tmux which is this just a terminal multiplexer allows me to have multiple screens up um i've already gone ahead and checked out the code for you guys so we're just going to kind of get started and get going here everything's here when you first download the repository you're going to do a yarn install which is going to basically go through and it's going to install any dependencies that are required to get you up and running so do the yarn install it takes about a minute or so to run and you'll be good to go then what we can do is we can do what's called a yarn chain okay yarn chain is gonna spin up an instance of hard hat uh scaffolding uses hard hat it's gonna spin up that you're gonna be ready to go that's all you need then in a new window you're gonna come over here and you're gonna do a yarn start which is basically yarn start is going to spin up react so the front end that you utilize with scaffolding is react that might take a little bit to load so while that's kind of doing that what i'm also going to do and that's going to be the second window that you're always going to keep up the next one i'm going to show kind of what the the data structure of the code looks like okay so you'll see when you first get in here inside the directory there's uh let me close this out for right now there's this packages directory so inside there we have hard hat and we also have react and then we also have subgraphs so if you want to do a a sub graph using graphq uh the graph a graphql subgraph you can do that as well um but the most of the stuff that you're going to really be messing around with is going to be here in the in the hard hat directory right so inside the contracts there's this kind of like bare bones contract that gets deployed and it's kind of like a hello world contract uh we can kind of check it out and see if it's spun up which here it is so we're up and running uh this is gonna be out of the box it's gonna have a lot of cool stuff that you don't really have to think about to get started building on ethereum uh one of the cool things is it has what's called a burner wallets right so you load up your uh your scaffolding app everything's in burner wallets and you can just grab some funds from the faucet so it'll pull funds from hard hat pull them into your burner wallet which is like an in-browser wallet you don't need a mess of metamask you don't have to worry about nonces or anything any of that stuff you can connect i don't even have made a mask installed on this uh profile but if you wanted to you could you could connect to like wallet connect app or if you had made a mask it would show up here as well so you can see i've got some funds down the wallet um this app home which is basically everything you see here is like where you would build your your app to like prototype so you know you kind of like build the ui into this section but what's uh really useful is this this debugs contract directory and this is where it's going to keep track of like kind of all the functions that you have available to write in scaffolding and how you can interact with them and test with them it also gives you the address contract address and it tells you how much value is in there as well um i might need to reset let's see oh i haven't run your deploy yet so the last step is once you get hard hat up you get react up then you do a yarn deploy now what yarn deploy is going to do is it's going to grab the the contract that's in the contracts directory and it's going to deploy that on onto the blockchain so that way and it's what it also is going to do is it's going to kind of like grab the abi automatically insert the abi into the front end and it's also going to deploy the instance of the contract so that you can mess with it and it also reports like how much gas you use it's really really useful and it also publishes a subgraph as well so uh let's take a look at kind of some things you could do so like an example would be like let's say we've deployed that contract now now that we've deployed it we have this kind of like hello world where there's a contract there's what's called a purpose which is just a you know a variable that's being set and then we have a function that allows us to update that right so we could say eth nyc or something like that right and then hit send and then we just interacted from our burner wallet directly into um into scaffolding and we were able to see that we updated that variable right so it's a real basic uh concept right um so let's let's do something a little bit more interesting so let's uh let's define a address right uh variable and we might do something like uh public make it a public variable and we'll call it owner and we'll set up an owner variable we could grab this sorry you can copy the address of the contract or you can copy the address of the meta mask or sorry the burner wallet so we're going to grab that and punch that in here and then save that and then come back and redeploy so you're kind of doing this thing where you're messing with the contract deploying your changes and then once you know that they're successfully deployed everything gets updated and then you can look back at the ui and see okay cool now we have a new variable that's called owner and we have that in it matches this so let's say we want to do something like maybe we want we have this existing function that gets set up here it's called set purpose and you can see here we have like a require that i've already done earlier i was doing gandalf but we'll just say that you're not the owner if you don't have this particular message so one of the first things you learn with with solidity is the require statement right it's this concept of um you you basically are checking a function to see that something is is set in this case we have one called bestes.center where we're checking to see that who was the message sender for this contract call does it match the variable owner and if not it's going to say not the owner so we can set that do a deploy oh did i do something wrong ah thank you let's try it again yarn deploy cool so you get but you get the idea we're going through we're kind of doing some changes here making some updates to the uh to the code and so now what i can do is i can kind of mess around here and we'll go uh let's open up a new incognito window let's go to that local host and so now we have a new instance of the contract up or i should say the dap up right so at this point we can grab some funds into this burner wallet we can go to the debug contracts again and we can try to update it something like foo right hit send and we're going to get an error not the owner right pretty straightforward um so you get in this kind of like loop where you're just kind of testing uh the the updates that you make to the contract and then you're just kind of validating that hey these are the changes that i made and they're working but that's not very uh that's not the really the proper way to do something like access control for a function you could also do something like inheritance so you can actually import so another uh existing set of contracts so in this case we're going to we can import open zeppelin contracts specifically the ownable.sol and then what we can do is we can make this an ownable contract so inherited from uh ownable and then we can do something like well we get rid of this variable here because we don't need that and we can instead on the end of this function we can say only owner we can deploy that and then make that change so inheritance is that concept of inheriting rate everything that's in another contract and making it available in this contract let's see if that deployed looks like it did but what you'll notice is now we have that owner variable but it doesn't match what's in our burner wallet so this is kind of one of the first things i had a problem with with scaffolding is i didn't understand like well who was deploying it well hard hat is deploying the contract right so what we actually need to do is um update the deploy script to transfer the ownership so you'll notice that in the dap here now we have this transfer ownership function which is a function that's built into ownable so what we want to do is then take that uh variable or i should say that function and call it in the deploy so there's uh when you when you set up scaffolding there's a cut there's a couple different areas there's this old folder called scripts don't go in there because that's the old deploy.js script go into this one here that's uh under deploy and you'll see that what we're doing here is we're deploying the contract here and we're creating an instance of the contract and then there's an example of how you would deploy your contract here so i've actually gone in here and already kind of set it up but what we're going to do is since we already have the the contract deployed in this particular instance here we're going to call that that instance of the contract called transfer ownership but then we need to put the proper address that we want to transfer to so we'll come back to our dap we'll come over here we'll grab the burner wallet address that we have and oh sorry so let's update that save it and let's redeploy cool and we might need to refresh it let's see if it worked looks like it worked okay cool so now we've we were able to deploy the contract using hard hat and then we were able to transfer the contract using transfer ownership so now we're the we're the owner again um but it's still this isn't a very i guess interesting contract it's it allows us to set the purpose um but you know we don't want to really just let just the owner of the contract set the purpose so what we could do instead is we could make this function actually have like um require a value right to make transact with this with this contract so to do that we can go back to our our smart contract and instead we can do a require statement require that the message.value so this message.

value and messagesender are these global variables that are available right and so what we can do is say message.value is equal to i don't know a variable that we're going to call price and then we're going to say add more money or something like that that and then what we can do is come up here create a price variable so we'll do unt uh public price equals i don't know point zero zero zero sorry zero zero one ether something like that and then we'll save that so now uh when we deploy that what it's going to do is it's gonna it's gonna recognize oh i probably did something wrong again what did i do oh thank you payable yeah so it does need to be a payable contract newbie mistake all right let's deploy that again boom okay cool so it's deployed i always forget to make it payable by the way uh and we can also get rid of only owner actually too because we don't want only owner right so let's go back because that won't be useless so redeploy again okay so now we have uh the contract deployed we've been able to transfer the ownership but you'll see now the set purpose has this value it needs value right so i can set it to whatever i want so i'll say new york city or something like that um you'll see that now we have this price variable and you'll notice that it i put ether but it's actually showing us in way what we need to actually um uh send in the transaction so if you didn't have that there's this cool feature of scaffolding where you can just kind of hit this little green button so you can type in what it would be in eth hit the green button and it would translate it to you for in way uh but since we have it right here you could just copy and paste it and put it in there so now we hit send and boom it works so now you'll notice that the contract actually has a little bit of value so we've deployed the contract and it also has some money in there but there's a problem we don't have any uh way to withdraw the funds so we created this kind of like black hole where we're dumping funds in there so the next thing you would do is you probably would set up a way to either withdraw the funds or some kind of like you know if you're really fancy you do like a multi-signature but we're not going to do that right now so instead we can create another function that allows us to withdraw that so um i've already actually already wrote it here so we can just kind of grab it out of here so what we're doing here is we have we're creating a new function [Music] and it's called withdraw and it's a public function but this time we're making it access controlled so only the owner can call it and we're setting a variable or a boolean call named success and then we're doing a transfer to the message.sender we're doing a call actually with a value of the address of this contract's balance right so basically we're just like a rug pull we're going to grab all the funds out of there so we can save that deploy so you can see this kind of cool like we're building an app right really easily just by making our changes deploying those and then kind of testing those really really cool so now we can come in here set the purpose to foo [Music] send we've done it and then now we have this cool withdraw function so let's go back to our kind of like incognito one here and let's see if we can withdraw boom so ownable caller is not the owner so we've successfully set up this kind of bank where the contract is storing value we've set up access control so that we can withdraw the funds um we might want to do something else kind of cool like maybe just with with a simple line we could actually adjust the price so you can see here we could take that price variable that we're setting multiply it by 101 and divide it by a hundred so basically just increasing the price by one percent save that boom deploy again and then now what we'll notice is if it deployed successfully which it did uh if we change the the this thing to like nyc and then hit send we get value out of the contract and what happens to this price variable well it added one percent so every time that someone's going to come in here and set the uh the function 0.001 if we just try to send 10 000 it's going to say add more money because we didn't actually put in the new amount that it's costing to do that so we can add that send boom so now let us do it so now the the price function's in there um we have the the contracts getting value we're able to withdraw the contract we're able to do a lot of cool things we're kind of like building on our dap so what can we do next so um i guess what i want to show is maybe the idea of like building like a a token right so um the first thing usually would do is if you're going to keep track of like a of like a token inside of a contract you're going to basically create like a mapping right so you're going to create like a mapping that keeps track of addresses and then a unsigned integer that has a kind of like a balance for that contract so first first we'll create a mapping map those addresses to the uint and then we'll create a total supply and there's a couple ways you can do this but total supply is this concept of like how many tokens are we going to issue in our in our contract what i like to do is actually deploy the the supply inside of the constructor and i pass it through in the deploy arguments so what i always like to do is come in here accept an unsigned integer um in this case we can do 256 and we can do the total sub total something like that and then what we can do is uh uh total supply is equal to uh the total that's passed in the in the in the deploy of the contract and then what we can do is we can also decide um who's going to get all the balance for the for the initial balance right so we can call balances and then we can uh call the address oh sorry it's actually this and we're going to grab that address that we have in the burner we're going to put that there and we're going to set that to the total supply so this is kind of like the the owner or the deployer of the contract and then if we want to actually like uh deploy this it's going to fail right now because it it needs that this it needs this variable passed over in the deploy script so how do you do that well there's this option here called args where you can pass like an argument so in this case we could say like all right let's do i don't know 21 000 or something like that save it and then let's try to deploy it so this this uh deploy script is going to pass that value over and then it should update the balances for the burner account with the proper balance so let's see if that worked uh we can grab our address actually i think it's already on my clipboard paste it in here boom so this address has 21 000 tokens so what would be the next thing you'd want to do uh with with that you'd want to have some way to transact the tokens send them around so we're going to actually build in that functionality uh so we can come down here uh we can do like a transfer function i've actually already written it as well so let's just kind of block it out and i can kind of walk you guys through it so uh this transfer function all we're going to do is take in an address of where we want to send our new token that we've created and then we're going to take in an amount that we want to transfer that person so in this case it's a public contract and we're just going to return like a bullion to see whether it was successful or not the first thing you have to do is check with a require statement to say hey is this a person even have enough to send right do they have enough balance in their actual account to actually send those tokens over then you it's two simple lines it's one to upload the message.sender to extract their balance and then it's another one just to update of who you're sending that balance to so if we deploy this save it and deploy and now we'll have a new new function in here to be able to transfer those around so let's see if it works deployed successfully and now we got this transfer function so now i i know that this contract here or this uh burner wallet here has 21 000 maybe i want to send some to my my other little uh blocky dude here so let's come in here let's do a transfer and let's just send them i don't know 777 and then send boom so now we can check our balance again and boom you can see that we've been able to extract so basically we've created an erc20 token so you see how easy it is to tinker around scaffolding it's really really cool really really really fun um yeah so uh after you get kind of going and you're you're uh you're messing around with scaffolding again the next thing i would probably say is uh you know check out the code mess around with it learn about solidity if you guys don't know solid if you don't know slowly well you're just kind of getting started go to solidity by example and just kind of like start tinking around and grab stuff from solidity by example put it into scaffolding see how it works right and start building around and toying around with that once you're done with that then go to speedrun ethereum and come on here sign up for you know you basically you can connect your wallet here you can start doing these quests and then eventually you'll be invited to join the build guild right and go from there and uh yeah that's pretty much it that's that's kind of my demo i do want to see if you guys have any questions any anything you guys want to uh kind of know about scaffolding yep yes there is a type square version actually that is a really good point um so if you do go on scaffoldings github there's a bunch of different versions that you can get here so if you want to search for like nft or if you do typescript right here there's a next.

js typescript version um yeah so you can they've actually moved it so it's yeah it's right here so yeah we do have a typescript version yep yep so yeah so um if you do get any any issues with uh scaffolding another thing you can do you can always uh reset the contract as well so that will kind of like set the contract back to a kind of a reset state there's also another cool command that i sometimes i use like if you don't want to constantly be bounced around you can do yarn watch where you can actually like have it just kind of constantly updating for and checking for changes i'm not sure why it's not working right now it might not like some kind of change i made to like the deploy contract or something like that so i'm not sure why it's not working but um yeah so really easy to get going um just to give an example uh of like if you went to like branch like nft uh you could do like i don't know let's see so there's like an nft auction option right uh where you can just check out this uh this repository and then it's got this kind of like erc721 build um and it will help you build like an erc uh 721 marketplace i think i think it's erc erc721 um and it gives you a kind of like a starting point for your uh for your contract um and you can kind of mint these little like uh artwork that is in here uh and create nfts yeah trc721 um so yeah so there's a lot of cool stuff you can do uh highly recommend you guys check it out again if you guys want any of the links they're going to be available here i'm going to hang out a little bit later here too so if you guys have any questions about scaffolding or anything just let me know cool thanks guys