🛠 Introduction to Scaffold ETH 🏗 - Kevin Jones

foreign [Music] thank you guys so much for coming uh my name is Kevin Jones um I am also AKA shutterblock.eth you may see me running around taking photos I'm also a photographer for the events uh so I do a little bit of both um and I'm also a developer advocate for scaffoldeth um that's why we guys are here today we're talking about scaffoldeeth I don't actually have any slides uh this is all going to be like live demo and we're going to go through and actually do a live demo uh and show how it works this is all my contact information if you guys want to save my contact info uh but everything we're gonna do is going to be live demo and if if you're looking to get started with scaffoldeth uh can you guys see that okay yeah okay uh if you do a Google search for scaffoldeth you're gonna get one of the first links that's going to come up is going to be the docs or the actual GitHub repo repo um so everything you really need is in those two pages um if you actually go to the GitHub repo it's going to have a readme that's going to walk you through how to get up up and running we're going to do that in real time and we're going to kind of build a Dap and show kind of what the process looks like uh here as you go um so let's go ahead and just kind of dive right into it I'm using uh tmux which is basically a terminal multiplexer it's just going to have allow me to have multiple windows open at the same time you pretty much always need like three windows open to get started with scaffoldeeth and that's because you're running hard hat uh in a chain window and you're running uh your your front end so in react and then that third window is kind of where you're doing like your deploys and your other command line stuff okay so I've already gone ahead and basically checked out the repository so we're good to go I've also gone ahead and I did a yarn install because that takes a little while to do that's actually going to go out and get all the dependencies and install everything you need to get up and running uh once you're there then the next thing all you need to do is just do yarn chain so yarn chain is going to spin up a copy of hard hat uh hard hard hat is this kind of like virtualized uh ethereum virtual machine that you're running locally and it's going to come with all of these kind of like play uh accounts that have some play ether in there and so we can start kind of uh taking that ether and kind of testing our assumptions of our smart contract right um so you're always going to kind of keep that first window open that that window is where you're gonna uh just kind of see your console output for a hard hat uh in the next window you're gonna do a yarn start okay so sorry so yarn what that's going on there we go you're in start okay so yarn start is gonna spin up a copy of uh react uh so another core component of scaffold eth is react um so that's going to take a second to get to kind of get up and running uh but once you get up this is exactly what you're going to see it's going to spin up on Port 3000 a copy of scaffold eat and uh you could kind of think of scaffoldeth as this kind of like UI in this like front end that's kind of already like plugged up for you with your smart contract so it actually comes scaffolding comes with a smart contract but if we go here to this the the second tab which is the debug contracts which is kind of like the sweet sauce of scaffold eat you'll see here that it's not loading and that's because we haven't done a deploy yet so we got to go back to here and like I said we're always going to have these two windows open our back end which is hard hat in our front end you can see that we got some console output from hard hat and we can see the react started up successfully so all we need to do is come down here to this next window and do a yarn deploy okay so I can do yarn deploy and it's gonna do exactly that it's gonna deploy my smart contract it's gonna tell me the uh the address uh for the for the account and then it's also going to show me how much gas and how much time it took right so uh we're up and running and now we should have a copy of our smart contract here which we do so what do we got here it's a very basic smart contract uh it's got a purpose so it's got one variable and then it's got a function already written for us that's going to allow us to update that right and one of the cool things about scaffoldeeth is it comes with what's called burner wallets okay so if you're building a Dap like you know you're you're gonna have to uh you know hook up some kind of like provider and then do all that stuff this is kind of already done for you inside of scaffolding inside of the browser so if we look up here in the corner we get a copy of a private key and a public key that's in the browser and we have the address uh and we could actually like go to it if it was a on a mainnet and we could also just grab some funds so we can take some funds from hard hat and a mat basically add them to our adapt we're up and running and then we can start interacting and and interact with our debt um so sorry all right so um we we see here we have a we have a purpose okay and it's just a variable and then we have an ability to update that purpose so if I come over here and just say like Foo like this and hit send it's going to allow us to change that state Okay so we've spun up our our dap we've interacted we've got some gas from from hard hat we've made some changes to that smart contract we could also come over here and get a new copy of the contract by doing a yarn deploy Dash reset so dash dash reset and that's going to force a new copy of the contract and then it's going to revert the state so you can almost think of it like the deploy as this kind of way just to kind of reset your smart contract and then kind of test your assumptions as you start building which is exactly what we're going to do next right so let's let's load up our smart contract here so let's go code and let's load that up uh the first time that you you load here you're gonna uh if you're using vs code it's going to ask you to trust the uh contract basically or basically trust the repository which I recommend you do and it's gonna uh if you have highlighting for so validity is going to show you exactly what your uh smart contract is going to look like here and uh when we look at the project for scaffoldeth there's this packages folder okay and inside that packages folder there's essentially like two main places we're going to spend majority of your time one is the hard hat folder and that's going to be inside the contracts folder and the deploy deploy folder which we're going to get to in a second and then you can find your contract so this is a copy of the the kind of hello world smart contract and we can see here's the purpose that we have and then we have like an empty Constructor and then we have this function that allows us to update that purpose okay so it's a real basic smart contract uh it's almost like a hello world right um and then we have below that we have the react app as well so if you go under uh hard hat there's also the react react app which we're going to go into a little bit but we're not going to touch that too much in this demo but really majority of time you're going to spend probably is here in the contracts folder so we could hard code a change like this like hard code uh awesome apps or something like that I can type to there like that save it and then we could do a redeploy and then uh you will see that it was successful and then we can see that that changes reflected near the front end so we could do so start doing some changes so what are the first things that you learn when you're uh you know writing a Dap is you probably want to have some kind of like access control so let's let's do something here let's take a uh let's create a new variable okay so we're going to make it an address variable we're going to make it public and we're going to call it boss okay and we're going to basically grab our uh burner wallet which is right here inside the browser again we're not using metamask or anything like that and we're just going to basically paste that in here and then save it and then redeploy uh let's do that oh sorry let me close these out these are going to get in the way the whole time okay so let's go reset okay so now we are gonna have a new variable so we see that the the UI is automatically transformed we see we have a new variable it's called the boss and it matches what our burner wallet is so what you're going to want to do then at this point let's say you wanted to create uh some kind of function that only that particular boss could call right let's do that here let's create a require statement so the next thing you'll learn is you can do like a require and you can do message dot sender so when you're uh with ethereum you have access to a solidity you have access to the variables for who's calling that function and so message that sender is anyone who's going to assign a transaction for that function right so we're going to require that the message.sender is equal to the boss otherwise uh not the boss something like that and sorry like that and then let's close it off save that and redeploy so you can see what we're doing we're kind of automatically been able to get up our instance start making some changes to our smart contract and start start testing our assumptions so let's let's try to test that so now what I want to do is I'm going to bring up an incognito window okay I'm going to go to localhost 3000 same same dap and we're going to go to it and then we're going to try to make a change on this kind of like new uh user account we have so here we have this kind of like uh purple blocky guy and then here we have this kind of like green blocky blocky guy and so if I get some funds from the faucet and I try to make a change uh to Foo like this and then hit send it's going to tell me not the boss so we've been able to kind of implement some access control on the smart contract okay so that's actually not the proper way to do access control there's a much easier way and so what you can do is uh you can utilize what's called uh ownable which is an open Zeppelin uh contract effect so we're going to do that instead so let's let's kind of revert what we did let's let's get rid of this here and let's also get rid of this hard-coded address here like this and let's save and instead you'll notice up here there's like a commented out section where it allows us to import another smart contract so with solidity you can import a smart contract so in this case we're going to import the open Zeppelin ownable smart contract and when you do that you can then inherit that smart contract in here as an inherited one like this so we're going to import it inherit it and then we get access to essentially all of the functions we get access to the modifiers the variables that are defined when that particular smart contract is deployed so let's save that okay and then let's go ahead and redeploy so so scaffolding this is kind of like like I said continuous loop where you're kind of testing some things deploying your changes going back to your UI and then kind of like testing your assumptions so we get to this point and then what what's different here anyone notice we don't have the boss variable anymore because we got rid of that but we have this new owner variable okay so owner is should be the owner of the smart contract right um but we would expect maybe that it's going to match our burner wallet but it does not it's it's a random private key or public key that's there that is the very first account uh that comes from hard hat so because we're using hard hat to deploy our smart contract the very first contract or account is the deployer okay so what we need to do now is we need to actually uh adjust the hard hat deployment configuration script so if you look inside the hardhat folder right below that there's a deploy script right so we can go here and we can actually start making some changes to our deploy script so we want to have access to the smart contract so we don't want it just to be this random hard hat config we want to use the burner wallet so if you go to this uh this file it's going to show you exactly how the smart contract is being deployed and it's going to show you what the parameters are and then what you'll notice here there's a section that's already kind of like grayed out that you can just kind of copy from that allows us to get a copy of the deployed smart contract so we're going to do that next so we're gonna we're gonna take we're going to create a variable called your contract and we're going to use ethers to get that contract that's here with the deployer which is again it's the very first uh account of hard hat and then you'll also notice that I I mentioned it earlier a bit but when you inherit a smart contract you get access to all the functions and you get access to the modifiers and the variables and so you'll notice that our smart contract uh debug contracts tab has automatically adjusted again to add some new functions and the most important one that we're going to be using today is the transfer ownership one um and that's going to allow us to transfer the ownership of the smart contract basically out of the hard hat deployer account so let's let's call that so we can just come in here and basically we can grab this which also is just kind of already written for us and we can paste it right below and then this will this allows us to use that variable call the transfer ownership and then input whatever private or public key that we want to here so we can grab this here right this is our burner wallet we can paste it here and we can hit save and then we can go ahead and redeploy again so now uh during the deploy not only did it deploy uh the smart contract but it should have also transferred it so let's see if it did it did so now the owner is going to match our uh our account here so we've kind of are starting to build our smart contract um so we're gonna uh kind of close out the deploy script because we're kind of good with that right now um but I do want to show like uh how you would uh use that ownable smart contract earlier we did the require statement but ownable also has the uh only owner modifier so we actually need to add that if we're going to do anything that's access controlled here so we can put it as a modifier basically all a modifier is is it's another function that gets called before that existing function is call is executed so it always checks to to make sure that only the owner could call this function we're not going to use that yet so let's go ahead and close that because we it's not really too interesting to have a function that only you can call on your smart contract great you want to make it publicly available and publicly open right that's the whole purpose so instead let's kind of build something else let's let's work let's do another require statement here but this time let's also require instead of we're checking the message sender let's require that there's a value passed right so let's do message dot uh value um is equal equal to a price otherwise not enough like that so now we need to set that that that price right so units public price equals so we can just type in here like exactly what we want so we're going to do point zero uh one ether like this and then we're going to go ahead and redeploy okay so uh now we we again we have our our uh contracts modified we have this new price variable which is interesting and then now if we want to call this purpose to like Foo like this and hit send it's going to say we don't haven't sent enough money right we need to send some value so what we can do is grab this kind of like amount that we want to send and you would think you could just like put it in like this right and send that but we have to deal in way instead of uh decimals right so what's cool about scaffold these it has this little green button you can just click that and it's going to do the math for you so it's going to multiply that times 10 to the 18th power and it's going to give us what we need in way and then we can hit send and oh I don't have enough gas so here's here's where we can say all right well maybe that little 20 bucks that we got from the faucet was not enough so we can grab our address we can come down here to the corner to this little like other wallet and it's just Unlimited Supply beef basically we have like almost ten thousand each okay so we can paste our address here and we can get like a thousand bucks and hit send or if we wanted to we could also do it in uh East as well right so you have this kind of ability to just grab as much money as you need and then get going so now let's hit send there we go so now what's cool is our smart contract is acting as a bank we've actually established this uh cool like vending machine right in our smart contract uh so I could actually come over here to this like kind of incognito guy I could come over here get some funds change also send a thousand dollars over here and I could say I am cool or something like that and 0.001 oh enough send and then anyone can use it right we have this kind of like cool vending machine but what's the problem there's no that we can't get the money out how are we going to get the money out so let's figure out what we need to do to do that right we need to create a withdrawal function okay so let's write that real quick so um we're just gonna do like a function called uh withdraw like this and we're gonna make it public but this time we're going to use the modifier we only want the owner to be able to call it right so now we can uh do a um uh so we'll set a Boolean called success otherwise we won't set that and then we'll do a message dot sender so whoever's calling this function we will do a call and we will pass the value as the entire balance basically of the contract so we'll do address of this smart contract and we will take the balance like this and then we need to close this off did I type that right hopefully we did let's save that make sure it works deploy cool so we get this word error that um but for the most part it's going to work at this point um so let's get take a look at our adapt so now if we kind of come over here and we make a change to it say Foo like this and hit send we're able to put the money in there and if we come over here to the Incognito account uh so let's do that and then we kind of try to try to get that those funds from here we have the withdraw function it's going to tell me no I'm not the owner right so I I can I don't have access to to withdraw that but if I come over here and I hit send then boom I'm able to withdraw those funds and those went from the smart contract into my wallet Okay now what's interesting is we could actually just make one small minor change with the smart contract and uh just to show what's interesting is we can take we have that variable that's price right we're setting the price up here above we could do something like this where we could say price equal uh price uh times 100 I don't know divided by or sorry at times 101 divided by 100 something like that yeah see that and then let's redeploy that change okay so now if we uh come over here and we make our change we say if uh what's up and hit send what do we see that happens now the price is uh it's got a curve right we got this cool uh not only is it able to accept value and you could anyone can interact with it but it's also on a price curve and we can start doing some really interesting things with our smart contract okay um so at this point um I do want to kind of show a little bit more uh let's see here so um if if you kind of are just getting started uh with smart contracts or writing smart contracts uh scaffoldeth is just a good solution because like I said it comes with kind of all the stuff you need a really quick chill is if you guys are interested in kind of like testing your ability and kind of going through uh the process of like building different kinds of apps I would recommend checking out speedrun ethereum speedrun ethereum is cool because you can just connect your wallet and you can kind of go through various challenges uh you need to unlock this real quick let's see so um it's it's got a obviously a web 3 type of experience where you can check in with your metamask I don't know why it's not working right now make sure I'm on the right a second here okay connect wallet metamask all right there we go uh it's got this cool experience where you can actually go through and do different challenges right so like the very first challenge is you build an nft deploy an nft then you do a decentralized staking app a token vendor and then eventually you actually get invited to What's called the build Guild or the Biddle Guild uh the Biddle Guild is a collection of developers myself and there's some other build guilders here that are trying to like help the ecosystem and bring It Forward by providing value uh as enhancing scaffold eth or just doing things in the environment to help support ethereum and uh the cool thing is if you actually become a part of the build Guild you can uh do some work for the build Guild and you can be incentivized to do that and actually get streamed eth if you become a core contributor or someone that's involved in the build Guild so since the build Guild has been out there has been over 353 eth that has been streamed to other developers and we have about 700 other builders or or people that have interacted with the build Guild and about 700 different builds of scaffold eat so it's a really cool way for if you guys are trying to get involved in a community to kind of do that so that's my real quick Chill on if you're getting started those are kind of great next steps for you guys even after the hackathon but if you're building a hackathon project build it on scaffold youth because it's going to be a huge Head Start for you and another thing too is if you go to scaffoldeth and you go to the the core GitHub repository there's two things there's one there's a scaffoldeth examples directory which has a bunch of starting points for like ERC 721 1155 you name it you can just come over here and just do a search so let's say I want to search like 721 it's got an example of what that would look like or um you could just do like nft and then there's some like nft examples uh in here as well so check out that and you can you can essentially Fork that specific version and then you have a starting point for your project so that you don't have to reinvent the wheel and it really gives you a leg up on getting started with the hackathon so that's my my recommendation now there's another there's another couple things I always get asked like okay well what if I like next.js versus react or what if I like typescript uh versus JavaScript there is a new version of scaffolding so it's called se2 and I'd recommend checking it out um it's it's a special GitHub repository you can come down here and do a search for it it's se-2 so it's in a test so it's still being tested it's not the the full-on replacement for scaffoldeeth so it doesn't have a lot of the forks that you would find with the original version um but it is a little faster and if you feel more comfortable with next JS and with typescript that might be something that you guys can try out if you're competing the hackathon I would recommend though to probably use the very first version of scaffoldeth just because it's a little more vetted um and you know it's got more starting points right for you I'm going to show you what scaffolding 2 looks like real quick so I've actually I'm gonna have to just shut down this one real quick so let me do that and then I've got copy of here so I'm going to do the same thing I have se2 already checked out I'm going to do a yarn chain and this this so again this is if you're using just separate Windows second window I'm going to do a yarn start right and then in the next window I'm going to do yarn deploy okay so contracts deployed looks like it's up and running let's take a look boom we'll go 3000 same port there we go so looks completely different so uh pretty much all the demo that I did is not going to make sense but it's got the same Concepts right it's got the burner wallet right you can do the same thing you can press a button to grab a bunch from the faucet um you can you just have the debug contract folder uh or a tab I should say where you can actually test your read and write functions you can see your variables listed you can see the contract and how much balance it has and then there's an example UI as well which is a little bit more enhanced and it's built again on next.

js so uh depending on like I said how comfortable you are uh with dealing with maybe some caveats se2 this would be an option for you guys as well so leave that up to you guys you guys can decide so that's awesome all right so we got five minutes for questions so I know there's gonna be some questions so let's let's tackle those yes you didn't want to go into it but I'm wondering is there like some kind of demo you can show on how somebody like me can get started with like the front end using scaffolding yeah yeah it definitely is a little bit of uh so you know basically the question was uh for people that are more into like writing smart contracts and we're interested in the back ends and not necessarily front-end developers where do you get started uh so some of the challenges have some uh the scaffolding speedrun ethereum challenges have some level of stuff you do with the UI but let me just give a real quick run through of it so you can kind of have a start so here in react app we we have the react app folder and then we have the SRC folder uh and then inside of there there is the basically the uh see the not the components folder but the uh views uh and yeah so uh app.app.jsx is kind of like scaffold eat app right so you can think of this as kind of everything that's already written for you all the variables that are defined all the functions uh all the the hooks and stuff like that are already loaded for you and so a lot of the the magic sauce that you see is is what you see here inside of the views folder is where your home jsx files so let me go back to scaffold well I don't have the other one loaded but uh you saw earlier there was some tabs right the very first tab is kind of where you would build your app so you would focus on doing stuff inside of that kind of like home folder um and then the debug contracts is like for that so home.jsx is that kind of first tab that just has some kind of like examples for you and it just kind of gets you up and running oh it's getting dark in here uh and then um there's an example UI area which is probably what I would recommend for you because that's going to give you some examples of how you interact with uh you know signing a transaction or sending a transaction or getting some kind of value from the smart contract or you know reading about value so example UI and then um there is also some stuff in hints but really example UI is probably what you're looking for as kind of that that help that hand holding this gives you some examples as you go through here and you can see what they look like yeah yeah no worries all right what do we got what else just to add to that question because I know in the scaffold eth organization there's some very work in progress repositories for like extracting out some of you guys like ducks and components that are being used in scaffold youth like what's the kind of I haven't read anything about it in terms of like what the long-term goal is whether or not that is something for kind of someone with the same profile of like making it really easy to have a address input or like all these other things that I've I think I've seen being actively developed yeah I mean I don't know what the goals are awesome ones come up here not the theory on the under the bus there really good but it's still installed just the address so there are components but they're still built in this gas relief right now but feel free to steal them and take them out yeah oh sorry yeah yeah tldr scaffold E2 has good address input and we're using wagney wag me I like youth hooks all right cool what are the questions oh uh which libraries are we using for scality too if it's probably scaffolds next year yes prediction yes okay yeah I mean uh rainbow kit and then a bunch of marker called for for like CSS and they don't tell who know and there also is a nexjs build of scaffold youth one so you can use that um if you just go in here there's a next chest typescript build it works pretty well um so that if you don't want to use that scaffolding two you still want to use scaffold that might be another option as well so awesome thank you guys so much for coming and if you guys have problems let me know [Applause]