🏗 Build on Ethereum Quickly and Easily with Scaffold-ETH 🥷 - Kevin Jones

foreign [Applause] [Music] guys thank you so much for coming I really appreciate you guys taking the time um really excited to be here today this is kind of my hometown I lived in San Francisco for five years now I live in Santa Cruz so right up the freeway um really excited to talk to you guys today about uh building on ethereum and uh real briefly my name is Kevin Jones I actually work full-time for nginx as a technical evangelist I've been there for a while about seven years um now I'm focused on advocacy for scaffold eath which is this awesome toolkit that I'm going to be showing you guys today I'm a member of the build Guild and uh yeah scaffold youth is just this awesome toolkit that's going to allow you to build on top of ethereum quickly and easily I also have a non-profit that I founded and I also help out with a solidity class for growick so if you're learning solidity it's a good kind of option to get started and we actually utilized uh some of all of scaffoldeth and a lot of the tooling that I'm going to talk about today and then I'm also a photographer filmmaker so you'll see me running around photos after this I'm shooting the event so if you want a photo come grab me this is all my contact info by the way on Twitter I'm known as crypto Mastery underscore and again if you want to just find me and we'll chat about stuff later today scaffoldee's is again it's this awesome toolkit if you want to get started building on ethereum it's really the kind of de facto way to have everything up and running in a localized development environment these are what you need to get started really to be able to check out the repository obviously it's in git open source you need node.js you need to have at least version 16 or above I would recommend just getting the newest version which is 18 and then you need to have yarn package manager uh scaffold youth utilizes yarn because yarn will install all the dependencies for you and it will also has all the scripts written for you so that you don't have to remember all of the hard hat commands and react commands and different different things that you would do you can just use Simple yarn commands that are already written for you right and so when you check out scaffoldeth you're going to get a copy of hard hat running locally on your local machine which is like ethereum virtual machine set up and ready to go and then we also deploy act for you on low cost 3000 and obviously everything I'm going to be showing you today is in solidity okay um what does it look like from the developer standpoint so obviously you need to clone the repo you do they are an install that's going to install all of your dependencies for you you do a yarn chain that's going to spin up your evm and on a local host and then it's going to yarn start is going to spin up react for you and then you just do a yarn deploy and then it takes a copy of your smart contract and it pushes it to the blockchain that you're running and you have this kind of like play ether that's available in hard hat to start testing your assumptions on your application right uh if you're looking to kind of test your skills I would recommend you guys check out speedrun ethereum it's this awesome tool built by Austin Griffith and the build Guild that allows you to kind of go through these challenges and kind of test your abilities uh and when you're done you actually when you're done with the fourth challenge you actually get invited to the build Guild um and I'm going to talk about that in a little bit if you need help along the way I'm going to be here obviously also Austin Griffith is around so if you find him he is like a wealth of knowledge and amazing he's the creator of scaffold eth but this is a good resource it has the telegram Channel it has the GitHub it has the readme it has pretty much everything you you need in one contact card and you can save this to your phone so uh don't don't get lost the telegram channel is awesome there's about 2 000 developers in it that are building on scaffoldeth uh so I'm I'm more of a fan of actually uh you know doing and showing how this works uh in real time so again if you do a search on Google the first thing for scaffolding that's going to come up is going to be the GitHub repository and all of the steps that I kind of went out went through earlier and I'm going to go through right now are available here and then it kind of guides you through of like how you edit your smart contract how you can edit your react application um and then there's also some resources of how you could learn solidity if you're just getting started learning solidity and then it actually guides you to speedrun ethereum where you can join the build Guild so this is some really good documentation and the link to the telegram chat is also down here in the bottom and there's a great docs page as well so there's a lot of cool Integrations that we've done uh with like the graph which is a really cool implementation of the graph that runs in Docker so if you're looking to get a graph Bounty this is a great idea because you can just run your sub graph locally we also have tenderly support like you you can actually authenticate your smart contract through them or etherscan and so this is a really good resource as well if you get lost and you just want to kind of read the documentation if you're getting started uh you know developing on ethereum and you're learning solidity solidity by example is a really good spot because you can actually go there and kind of copy and paste Snippets from various examples into your smart contract and kind of see how those work with scaffoldeth and again this is what speed run ethereum looks like so you can connect your wallet here and you can connect to metamask and then it will basically you can go through these quests and you can submit your your work as you do it and it guides you through and like the first one that you do is you deploy a simple nft then you deploy a staking app then a token vendor then a dice game and you kind of have to hack the dice game it teaches you a little bit about Game Theory on ethereum and then you get invited to the build Guild so that's my show for the build Guild which I highly recommend you guys do that path because there's a lot of cool stuff going in in the build uh so far the build Guild has uh streamed over 200 ether to developers that are building in the ecosystem and doing things for scaffold eat and there's about 584 builders in the system and there's over 500 builds of scaffold that allow you to do different things so an example would be is if you go to the GitHub repo and you come up here to the top you can actually do a search for whatever build you're looking for and so like let's say you wanted to do an nft there's like tons of nft examples there's like a simple nft there's a SVG Workshop that you can do there's a chain link nft a buyer mint nft where you can mint based off the buyer's interest in an nft so there's really cool examples for like different standards that are already written for you right and so that's a really good starting point for a hackathon because you don't have to do all that work and kind of uh you know you know do all the different things and create the plugins and grab open Zeppelin contracts they're already there and ready to go you can just check out that repository and then do a yarn install all in your setup as a starting point and that's a perfectly viable starting point for the hackathons as well okay so let's actually get into demo here so I'm using tmux which is just a terminal multiplexer if you're not familiar it's really cool because it just allows you to have different windows open but you can also just do this in in different terminal Windows you kind of always have like three windows open with scaffold eth I've gone ahead and I've checked out the repository here and I've also gone ahead and I did the yarn install and installed all the dependencies that that takes about a minute for you to get up and running but after you get up and running you're good to go and then you can spin up your chain so we do a yarn chain and that's going to spin up a copy of hard hat localized ethereum virtual machine and then I'm going to come over to the second window which is in the same directory and I'm going to do a yarn start right so yarn start is actually going to spin up react and it's going to run it on localhost 3000 that takes about a minute to start up so we'll just kind of let that sit uh and then on the last window is where you'll do your deploy okay so if you do a yarn deploy it's going to take a copy of your smart contract and it's going to push it to your hard hat deploy it for you it's going to tell you like the transaction hash it's going to tell you or the transaction ID and it's going to tell you the um uh where it was deployed what the contract address is and it also you'll see that you're starting to see these console logs that are available on hard hat so the the the smart contract comes with it already has hard hat console enabled which I'll show in a sec and so you can print some stuff here and use that as kind of like a debugger right for your for your contract and then it also tells you how long it took we can see react started and we see some read calls that were made to the contract that we have and first let's take a look at the Smart contract and I'm going to blow that up in atom um any text editor works if you're using vs code it will automatically I think spin up a copy of a hard hat and it will automatically spin up react for you in the terminal window which is kind of useful but that can be a little caveat just you need to know it does that because you might try to open up another terminal and do that but that last terminal you'll probably use to do your deploys okay so this is kind of what the structure of uh scaffolding looks like there's this packages folder and that's pretty much where you're primarily going to be working uh with scaffoldeeth there's specifically a hard hat folder and then inside there there's a contract folder right and then we have a copy of the your con your contract which is just kind of like the hello world starting contract we can see here that we're defining what version of solidity to use we can we have a license obviously and then we are importing the hard hat console so that we have that console Support over here in this terminal and then uh you have the ability to do more Imports which we're going to get to in a second and then we this this is real basic smart contract it's emitting well it's first it's setting up an event that keeps track of the address of the sender of the the transaction and it also keeps track of a variable called purpose and then we have that that kind of hello hello World building Unstoppable apps variable that we set we have an empty Constructor we're going to get to that in a little bit as well and then we have just this function that allows us to update that purpose right so um and then we have just come these are like default so that the smart contract can accept eth and that there's a fallback function in case that you call it contract with some ether and don't don't call a function it will actually like allow it to store that that value right so that money doesn't get lost but really this is kind of what we're going to be looking at is really the set purpose and then the the actual function here so let's look at what it looks like when you first get into scaffold eat you'll you'll see that there's these tabs here in the app home is kind of where you'll build your your project this is where you'll actually start to write like react code and you can think of it as like an application or adapt that's inside of scaffold eth right and So eventually when you launch to production or mainnet you're going to probably abstract some of this stuff and that just kind of makes it easy because you can build your app here and then it just kind of guides you like throws shows you where the contracts are shows you about variables stuff like that but what's the really cool stuff about scaffoldeth is it has the debug contracts Tab and what this does is it's basically taking your contracts ABI and it's automatically building a UI for you to start testing your assumptions right so we can actually come here if we want to interact with our contract we can come here and say ethsf like this and we can try to send a transaction it's going to tell me that I don't have any gas right I need to pay gas to be able to change the state of that variable so up here in the right hand corner you'll see that there's this funds from the faucet button you can just quickly grab some funds from hard hat and it's going to inject those into your burner wallet that's another cool thing about scaffoldeth is it comes with this burner wallet supports so if you open up another Tab and go to localhost 3000 again you'll see that we still have access to that wallet right because that's inside of this browser session but if I come over here and say new incognito window and go to localhost 3000 then I'm going to get a new blocky blocky dude right here right we have this kind of like purple guy and he doesn't have any funds but then I also have this kind of green blocky dude that is my Prime like my my what I want to use is like my permanent kind of burner account we could connect better mask if we wanted to right but it's really easy just to use the the burner wallet because you don't have to worry about like nonce errors with metamask on a local environment and then we can also do things here like we can export the private key if we wanted to we can import a private key we can also just send a q cart QR code so if we want to send some funds on like a test net which we're going to get to in a sec we can change that to a test net or we can also grab the address and then we can come here to this uh kind of like other wallet which has the all the hard hat funds which has about ten thousand each and we can send some funds here so let's grab I don't know like a thousand dollars in ether and we just did that transaction and now we'll see that our burner wallet updated with some funds from hard hat so it's really easy just you're up and running and ready to start start testing so now if I actually have some funds in my wallet I can change that state right I can pay the gas and do a transaction but that's not like a super kind of interesting smart contract so we can kind of see what it would look to to start developing some stuff so let's go back to here and we already have this uh function and it's payable which is cool because we can actually like accept some funds there we don't have a requirement there we'll get to that but the first thing you might find out with um with solidity or building dapps is you want to have like some kind of access control and so let's let's just set up like a kind of a hacky Access Control let's let's define an owner and let's grab this public key from this burner wallet that we have right we've got access to the burner wallet and let's save that and then we can redeploy so if you do a yarn deploy again it's going to see that we have changes to our smart contract and by the way if you want to force your deploy you can do a yarn deploy Dash reset and it will force a new instance of your smart contract and you can keep doing this over and over again and you'll keep getting new instances of your smart contract so we can see here we'll get a new one and so that really allows you to just reset the the smart contract and start testing you know your assumptions and so now we'll see that we have a new variable that we'd have defined and now what we can do is say okay well let's say we want to only allow the owner to set this purpose so we could say something like this require message.sender which is the global variable that says um who is actually signing the transaction will make sure that it's equal to owner or we say uh you are not the owner like this boom all right I don't know what I'm doing there all right safe and then we'll redeploy again right and so now if I come over here to this kind of like uh purple blocky guy I've got some funds in my faucet right or got some funds from the faucet and I want to come in here and say yo what's up like this and hit send it's going to tell me you are not the owner right so I've been able to kind of set up like Access Control really basic access control but that's actually not the proper way to do access control so we can actually do it a little different we can actually uh let's let's get rid of the require statement and let's get rid of this address and let's instead do like inheritance of an open zappen ownable contract so if you don't open zapline it opens Upland is like the de facto standard for doing different implementations or or standards and one of those is ownable so it has like all that functionality in there for you so we can say your contract is and inherit that ownable like this and then what we can do is because it's uh it's set up um we're inheriting all of the the functions that are inside of this smart contract then we can actually get access to the modifier which is a part of ownable that is only owner so we can actually grab that modifier save that there and then redeploy and so now we've kind of done the same thing but we've utilized open Zeppelin's ownable contract and we'll see here now that we have like a new function called renounce ownership which is if you want to like pull out ownership from a contract and make it live forever with no owner and then we have like the transfer ownership function as well and we have that address so um we we probably don't want well first of all you'll notice that the owner does not match what I think you would want because you don't have access to this account this is just some kind of random account this is actually coming from hard hat so hard hat utilizes the very first account as the deployer account and we can take a look at what that looks like inside of the deploy script so right below here we have the deploy script and we can see here this is how we're doing we're actually deploying our contract and we're setting up the the settings for that and you can see right here as we're defining the deployer which is getting uh from hard hat all the named accounts and it uses the first one and then we can say that it's actually using that deployer and then we can also see that we could pass arguments as well so like say let's say you wanted to name your contract like I don't say it's a cat's nft or something like that you might be able to pass an argument in here like this and you could pass that in the Constructor uh we're not going to do that right now but it's good to know that is if you want to pass a variable to the Constructor you can do that there but what I want to show you here is that you get we get a copy of your contract here so const your contract and then we deploy the contract and we have access to it now in inside of uh JavaScript and so you'll see here there's a there's automatically a thing that's kind of already written for you here I'm just going to copy and paste that that allows us to call that transfer ownership function so let's go grab that address here and then let's uh sorry let's paste that in here so we're going to do we're going to do the normal deploy it's going to use that hard hat account but then it's going to call the transfer ownership function right so we're going to do a deploy reset boom there we go and so now we see that we have access to the smart contract again we have access control but again that's it's kind of like not a really interesting thing because why would we want to have a function that only the owner could call so I'd rather show you like kind of how you can start using the smart contract as a bank right so let's let's do something like that let's let's uh open up the smart contract let's close the deploy script uh and let's let's instead let's set a variable so we'll take about take away the only owner modifier and instead we'll Define a price variable so we'll do a UNS public and we'll call it price and we'll set it to uh whatever ether we want so we'll do .001 ether like this and what this is going to do is it's just going to create a variable that has the value and by the way like I have my ID set up so it tells me like the calculation of what how much ether is to how much weigh so and I'll get to that in a second but you can you could write way here or you could write ether um we're going to do ether because it's easier right to read so um and then what we can do is instead do a require statement here that says all right let's require that the message value of the smart contract is equal to the price otherwise we're going to say um you are broke something like that uh and save that and then deploy that and so now we already had this and it's important that if you're going to do that with a a function you need to make sure it's payable but it was already payable so we know now it that we can accept some value on this purpose so if I come over here now and I want to change this to uh SF like this and I try to hit send it's going to tell tell me that I haven't you know send any money so now I can come here and I can do 0.001 ether right here click the little green button and what this green button does is it just calculates the amount of way that I need to send in the transaction so it just multiplies it by 10 to the 18th power and so anytime you're deploying on or making transactions you do it in way so obviously you wouldn't want your user to have to type out way so you would do that kind of calculation inside of your application using ether's JS there's support for that and then now if we hit send it's going to allow us to do that right and so now we see that the smart contract actually has some value right it's got a dollar 65 but at this point the it's kind of black hole it's stuck in the contract because we have no way to really get the funds out right so the next feasible thing would be that you would actually write a withdrawal function so we can do that we can say function withdraw like this and we can make it public and we can so we can do like set a Boolean called success and otherwise we will not and then we can do so again message.

sender is the person that's calling the smart the the transaction right calling that that function and we can do what's called a call and we can send uh set the value as the balance of the the smart contract so it's address dot this dot balance I believe and then I think we need to do this I'm gone boom okay but we don't want anyone to be able to access all the funds right we're on the smart contract we want to make some kind of function and variable so we could actually hear we can use that only owner like this right and save that but you see what we're doing is we're getting in this kind of mode where we're making changes of our smart contract inside of uh your your solidity code you're coming over here you're deploying your your subcontra or your smart contract and then you're kind of like testing your assumptions right and so now we'll see we have this withdraw function so if I come over here and I'm I'm this kind of like purple blocky dude I'm using this dap and I'm like okay yo what's up I'm going to send some value and we could just copy this from here to here and send cool I've I've changed the the purpose to yo what's up and then I'm like oh I want to grab all those funds so I can try to say send and it's going to tell me that you're not the owner right because we have the access control set up but if I come over here it's got funds in there I can hit that withdraw button and I was able to withdraw those funds because I own this this public and private key pair and I was able to call that smart contract okay um I want to show briefly like kind of like uh the react code a little bit as well because um I think it's it's very useful uh real quickly what I also want to say is like you all the stuff that we're doing here is like localhost right um at some point you probably want to deploy your application to maybe a test net especially if you're like you're in the hackathon and you want to do it to like polygon right you might want to deploy it to polygons so right now we're using uh the hard hat accounts right you wouldn't want to use that if you're deploying to a test net because the the public key or the private key could be compromised so you would actually want to do what's called yarn run generate on here and what that's going to do is it's going to spin up or it's going to create a mnemonic and it's going to store that in the root of your application here you can see I have a couple of them here and so these are the root mnemonics I'm not going to click on them because there's there's actually like the mnemonic the password and then you can run yarn account like this and you can basically get a QR code for your account so it takes your public address creates a QR account and then it also goes out and checks the balances um of different different chains that you're on right so what I always do is another cool uh tool that is actually built by the build Guild and Austin Griffith is called a punk wallet so I just always have a punk wallet on my phone and then it's got a little scan feature so I can say allow and what I can do is right now I can send just by scanning this oh I got to redo it again and I just have this pre-loaded with some like testnet ether I also have some like polygon Mumbai stuff on here as well and so now I have access to that and I could send some ether to it right and then I have a deployer account that is generated and I'm able to deploy my account and then if you want to deploy like I could deploy this right now to uh well actually let me let me send some eth4 for it first so we'll go to go early and we'll go I'll send uh let's see here let's do I don't know 0.01 eth hit send all right looks like it's going so I was able to send some funds from my wallet we should be able to see that gorilla has some balance nope not yet try it again no it's not working it's pending so it might take a second but then we can do what's called a yarn deploy again but we can choose the network so we can do Network go early like this and just with that one command let's see if it actually succeeds it's going to try to send the transaction and we are deploying our contract it looks like it worked I think it's thinking go early is a little slow today usually it's a lot faster while that's doing that I also want to show real quick uh in the UI you might want to take your react app and update it to a test net as well so inside this app GSX file and then inside views so app.js actually is that kind of main component for scaffold eth and if we scroll down there's just this one section where we can change the default Network to greatly like this save it and then we can refresh our app and so now we should if it's successfully deployed which it's not I'm not sure why it's not deploying live demos sometimes they don't work yeah I'm not sure why it's not not working it could be that I'm not oh there it goes finally went so I deployed the smart contract to go early and now I have a copy of this smart contract and I've refreshed my app and my app is also ongoerly so now I could actually connect my metamask let's do it let's switch to go early and switch the network so now I have a bunch of gwarly eth right let's do it here let's set the purpose to uh scaffold is awesome actually let's do scaffold eth like that and let's make sure we send some value boom send and then the The Next Step I'm running out of time but the next step would be that you would maybe want to ship your app to um some other like hosting service because right now we're running locally and you can do that uh directly through here as well you can do what's called yarn build which is going to take a copy of your react app and it's going to build it and make it optimized and then you can do a um you can do a yarn uh sorry CD projects ethereum scaffoldeth then you can do a yarn um so I'd like it right now you can do a yarn surge which will put it on a surge endpoint if you're not familiar with surge it's kind of like a simple like static hosting service or you could also do it to ipfs with yarn ipfs so you have kind of some options of how you want to deploy your app but this takes a while to do so unfortunately it's not going to finish in time um but yeah that scaffold Ethan in a nutshell I do have a couple minutes I have one minute for questions so I would love to see if you guys have any questions about it got to be one question come on what yeah so there is a so under the docs uh there's a tenderly kind of like walk through there's like a video and it tells you how to verify untenderly um basically it's you have to like create this kind of script inside of your deployment script um and I think you have to do past like an API key I believe uh as well so that the instructions are here but it's really the only really thing is that you're you're um like authenticating your smart contract through uh tenderly uh at least I think that's the only current integration yeah you can also do with etherscan as well so there's either ether screen ether stands a little bit easier because you can just do yarn verify and then pass the the network here that you're using and then you also think you have to update well you should update your hard hat config also with your API key for etherscan as well um yeah that's a good question any other questions no awesome thank you guys so much for coming and I'll be around so if you need anything let me know