# Scaffold ETH Workshop | Kevin Jones | Intro to Scaffold ETH 2 | ETHDam 2023

- Speakers: Kevin Jones
- Channel: [CryptoCanal](https://streameth.org/cryptocanal)
- Date: 2023-10-07
- Duration: 25:00
- Watch: https://streameth.org/watch/yt-wKMCoQ8rnsk
- YouTube: https://www.youtube.com/watch?v=wKMCoQ8rnsk

## Description

Kevin Jones is an active member of the Buidl Guidl 🏰 where he is focused on developer advocacy and education for Scaffold-ETH, 🏗️ a toolkit for building and prototyping dapps on Ethereum quickly.
https://twitter.com/cryptomastery_

https://github.com/scaffold-eth/scaffold-eth-2

ETHDam is a Hackathon & Conference that gathered over 500 DeFi and Privacy builders on the 20th and 21st of May 2023 in Amsterdam. 

Privacy is normal. Following the arrest of Alex Pertsev, a Tornado Cash developer in the Netherlands, ETHDam 2023 is determined to counter the chilling effects of the lawsuit and bridge worlds to discuss the future of privacy and encourage to build on the shoulders of cypherpunk giants.

ETHDam is powered by CryptoCanal, - a blockchain education and events platform growing in Amsterdam, spreading its roots to Rotterdam and Zurich. ETHDam 2024 is on the map already! Keep up with us to see updates: 

CryptoCanal https://www.cryptocanal.org/
CryptoCanal Twitter https://twitter.com/CryptoCanal
Join CryptoCanal Community https://t.me/CryptoCanalCommunity 

We would like to thank our partners and sponsors that made this event possible. 🌷
Our BFF 1inch https://1inch.io/

Our Frens: 
Sismo https://www.sismo.io/
Aleph Zero https://alephzero.org/
Scroll https://scroll.io/
RAILGUN https://railgun.org/#/

And our Sisters:
oasis.app https://oasis.app/#earn
Maven11 https://www.maven11.com/
bitvavo https://bitvavo.com/en
Lido https://lido.fi/
Spankchain https://spankchain.com/
API3 https://api3.org/
Gelato https://www.gelato.network/
VanEck https://www.vaneck.com/nl/en/crypto-etn
Marlin Protocol https://www.marlin.org/
Silent Protocol https://www.silentprotocol.org/
Cyber Capital https://cyber.capital/
… and Proto https://twitter.com/protolambda 🍍

## Transcript

foreign guys we're good to go uh thank you guys so much for coming I appreciate it um everyone on Livestream thank you welcome uh really honored to be here uh this is really cool to be back in Amsterdam my name is Kevin Jones this is pretty much all my contact info so if you guys scan this this will get you access to like my Twitter uh pretty active on there and uh just you know if you guys have any questions afterwards feel free to reach out I'll also be around here I am currently working as a developer relations engineer at edginode as of today so I'm pleased to announce that and I'm also a member of build Guild which is a basically a group of developers that helps prop up the ethereum ecosystem around developer tooling so what I'm going to be talking about today is scaffold eth which is an awesome tool kit that essentially gets you kind of up and running quickly if you want to build a Dap anyone who's interested I wrote a a mirror XY Z post uh about scaffolding 2 and more specifically about our integration with the graph and so this would be a really cool kind of walk through if you're interested in building adapt pretty much a lot of the stuff I'm going to go through is in here at least some of it I'm not going to get into the graph because I only have a limited amount of time but this would be a good resource if you want to learn how to build a Dap and use the graph as well this is a really good walkthrough so I'd highly recommend that um but we're gonna we don't have any slides here I'm just going to actually kind of delve in and we're going to start touring around with scaffoldeth so if you do a search for scaffolding there's two versions of scaffoldeep there's the original scaffold eth which is uh you know still awesome still works but we've kind of come out with a new version actually within the last uh gosh it's only been like a couple months now and Scaffolding 2 has some kind of upgrades that we've done to to the project more specifically it's everything that has the scaffold youth had but it's a little bit leaner and it's kind of built around next.js so next js on top of react obviously and it uses rainbow kit it uh it still comes with hard hat which is like the you know uh default kind of go-to uh ethereum virtual machine tooling but it also uses wag me and it's also based in typescript so if you prefer uh JavaScript and you prefer react as opposed to nextjs you could technically use scaffolding one and it's still compatible but for the sake of uh you know being up to date and using something that's kind of actively developed scaffolding 2 is is where to go um so let's just get right into it so if if you go to the the GitHub it's going to walk you through what you need you need to have node.js installed on your computer right you need to have yarn package manager installed make sure you have the most up-to-date version of yarn because if you're using like an old version of yarn it won't work so upgrade your version of yarn and obviously you need git and pretty much the walkthrough that I'm going to go through all the instructions are here also inside of my blog post there's a walkthrough that you can do to get up and running so let's just kind of dive into it so I've basically gone ahead and I've checked out the repository here um and I've got everything up and running so I've already did a yarn install for you guys just so you don't have to sit here and wait because it takes a few minutes to run but when you do a yarn or yarn install it's just going to go and it's going to grab the package file the Json file and it's going to install all your dependencies for you so check out the repository go into that directory and do a yarn install that's going to get you set up and running then all you need to do is run yarn chain okay so yarn chain is going to exactly that it's going to spin up a copy of hard hat and all of the you know play money accounts that you have that you can kind of start toying around with your smart contract and then everything in scaffold eth you kind of use like multiple windows so your first window that you have here is you're always going to have it open because it's gonna if you want to print anything out of like hard hat in your smart contract to console you'll want to be able to see that there or if you want to see your contract calls or something like that that's going to always be there and then in this next window same directory you do a yarn start so that's going to spin up a copy of react in this case it's react next JS build and it's going to start running that on Port localhost 3000 real quick real Snappy so again you'll always have that directory open right so it's kind of like your back end which is your smart contract and then you have your front end which is react right and then if we come in here uh to this kind of like third window we can do what's called a yarn deploy so let's do yarn deploy and what it's going to do is is scaffolding comes with a kind of like go-to like starting smart contract okay so if we come to our UI refresh localhost 3000 we'll see scaffoldeth right so this is running in in xjs and we'll see a couple interesting things right away we have these kind of like tabs up top the first tab is is interesting it's the debug contracts uh it's kind of The Secret Sauce the scaffoldeth what it does is it actually pulls in the smart contract it it builds a UI for you with all of your functions and it also builds a UI that has all your variables right so we can instantly see that we have this contract that's been loaded we can see the address we can see how if it has any balance we can see what network it's on we can also see like some functions uh which allow us to like read uh some kind of counter and then we also have like a write function and we also have this withdraw function which allows us to like pull money from the contract and then we can see here that we have a variable called greeting which is just like this kind of like Hello World example and we can see that there's an owner we'll get to that in a little bit uh and then we can also see that there's like some other variables here counter and so I could actually just come in here and just start toying with the contract so there's this kind of like uh like I said a hello world example where it's just hey what is the greeting and it's building Unstoppable apps let's update it so if I come in here it's just type Foo and hit send it's gonna tell me I don't have a balance right I don't have any way to pay the gas for the transaction so what you'll notice about scaffoldeth is it comes with this burner wallet automatically added to the the app so you don't have to worry about connecting uh metamask you can just instantly grab some funds from the faucet with this little button and you're up and running so now we have one eth in our account and then I can hit the transaction and update the state right of the smart contract just with those two little clicks so you can see how we're just up and running quickly with this kind of like dap and then it also has um functionality where you can actually like pull up an example UI so you can actually see kind of like what what an interface would look like of you know updating that greeting how you can pass a value so in this case we're passing some eth and we're are paying the gas and then we're able to keep the the count here I could come over here and say what's up Foo like this and total count and then hit send and it'll update that to two and we'll see that it updates it into the UI right and now we'll see if we go back to debug contracts we'll see that our balance has been adjusted because here in this UI we're actually passing in some value so let's let's take a look at the the source code and by the way if you ever want to like just like redeploy your contract you can just do a yarn to play Reset and it will force a new copy of the contract to come so you can see now it went back to Unstoppable apps so it's just really a way to like where you can rapidly get up and running and do some prototyping right on the fly so let's go ahead and let's load up the the code for the project okay so I use vs code and let's see what we got here so there's a packages folder which has really just two packages your back end your front end it has hard hat and then it has next.js and then inside this contracts folder is where we have our copy of our contract so let's let's kind of start like hacking away at it a little bit it's a rather simple contract again it's just this contract called your contract we have some variables we're defining and I'm just going to like hack away some stuff right now and just kind of show you like how we can get to like a different state let's like take away the Constructor let's because uh we're passing in some arguments like an address let's get rid of that and then later on we would like do stuff here this we're not going to do anything let's also like kind of wipe out like this uh let's see new greeting uh we can even take away like the value here which changes the variable like we can do like some changes we can save that um and if we go to try to do a deploy right and reset again we're going to get like an error message we're going to see a couple things first of all we have this like requirement that's here so we got to get rid of that so let's require let's get rid of the modifier because we're going to do something differently a modifier is kind of like a way for you to do like access control but we're going to do something different and then let's go into the deploy contracts folder so again uh scaffoldeth uses hard hat and so there is this concept of you have this deploy script that runs and deploys your contract and what we're getting here is like we're trying to deploy the contract but we're trying to send this uh variable or let's do it one more time and let's just see what happens we should get an error that's saying that uh we have this function oh we have another withdrawal function we need to get rid of that so let's just we're just kind of like required let's get rid of the withdrawal function as well save that and you see what we're doing we're just trying to kind of like get our contract in a working state by just coming back and forth now we're getting a deployment error and that's because we're trying to deploy this contract and originally we were passing in the deployer account as the kind of like the owner and so you can see right here in the deploy script here is is where we're getting a copy of the named accounts from hard hat and then we're using that in this argument so we don't want to pass that into the Constructor anymore so let's just copy that out but if you did want to you could pass stuff in here like you could pass like a supply for your token or you could pass a hard-coded value whatever you wanted to into this args option but we're getting an error so let's let's comment that out so you can see it's just kind of like back and forth uh going between now we were able to successfully deploy our contract and now we can see kind of what it looks like in the front end so let's go back go to debug contracts and you can see we kind of have like a more minimal version of that right and so what what I did is I extracted a lot of like the stuff that comes with scaffold eth that's kind of like hard-coded code and one of those Concepts is this concept of like access control like you might have a function that you want to control access to right so before we were we were hard coding all that stuff well there's a lot easier way to do that and that's by importing another contract that already has that functionality and more specific it's using what's called uh open Zeppelin ownable so anyone who has no open Zeppelin open Zeppelin is kind of like the de facto uh kind of like starting contracts they're like trusted and approved uh and they're kind of like what you would use to do some kind of functionality like an erc20 or 1155 or a seven uh 720. so what we're going to do here is we're just going to import the contract uh this way so we're going to import the open Zeppelin uh contracts which are already installed in the package file that we did earlier so they're available and then we can inherit all the the stuff that comes with that so let's go is ownable like this sorry if I can type right okay so we've kind of like inherited that now and then let's go ahead and try to redeploy again and you see this kind of like this is what you're doing with scaffold if you're deploying and you can see up here in the left that you're getting your contract calls you can see that your UI is reloading uh and you can see that you're able to deploy the contract and then we can go back and see uh what's going on so one thing I want to point out is like this owner right the owner of the smart contract is not kind of what we have in our burner wallet so the first thing you might want to do is try to take control of your smart contract deployment and so you'll notice that after we did ownable we got some new functions one of them is renounce ownership which is a part of an inherited function that comes with ownable and then we also have this transfer ownership so we can transfer the the contract to another user so we can call that in the deploy script that I was talking about earlier so let's load that back up hopefully you guys are following and by the way if you if you're not following along this is all recorded and it's been given given before you can look on YouTube tube so if you're not able to follow along but what we can do now is we can see here there's like a comment below where it shows that we're getting a copy of our contract and what it would look like to do that and so we can kind of like comment that out and let's uh I just like to do caps here so let's do that and so here we're deploying the contract right and then here we can get a copy of the contract to do something interesting like maybe call the function so that's exactly what we want to do so let's do an await and let's call the contract and let's do it the transfer ownership and let's pass in uh the the private key that we have access to or the public key we have access to so it's this one copy the address come over here and then paste it in so now we can close this off and redeploy again and so we've taken our smart contract we've kind of gutted it a little bit uh We've you know ripped out some of the the stuff that comes with it we've instead using ownable and so now we have access to uh the contract so you'll see here the owner matches our uh address that we have here so let's let's let's kind of take that a step further and let's say that we had this function that we wanted to protect so here we have set greeting let's just say for some reason we only wanted like the owner to be able to change the greeting so we could do like a require uh oh sorry normally we could do like a require statement here but we don't need to do that because we have access to all the modifiers with ownable as well and so one of those is called only owner so we can just type that here hit save and again redeploy and we can restrict access to that function so now if I come over here to this and let me open up an incognito window and let's go to localhost 3000 and one thing you'll notice is we get a new burner wallet so now we have two identities that we can start testing with we got our identity that's here and we have this kind of like Rogue little like kind of brown purple blocky guy right so let's get some funds let's go to debug contracts and let's say like I don't know I am here like this and I try to hit send it's going to tell me that I'm not the owner all right so I've set up this kind of cool access control for a function but that's that's actually not really quite interesting when it comes to a Smart contract like if you have a function that only the owner can call what's the point of having the smart contract deployed so let's do something a little different let's instead get rid of the only owner here and let's do something like a require statement so one of the next things you'll learn with like smart contract deployment is you might want to like set some kind of rule and so one of the things that you can do is get message.value and you can make sure that it's equal to some value so let's do price and then if if you don't pass in this value then you're going to get an error message say like not enough cash something like that and let's close that off and then we can set that price up above so we can say all right let's do uh let's do it right below here so UNS uh public price equals 0.01 eth or like that boom save that and then deploy so instead of having this smart contract that is kind of like restricted to the owner now we're going to require that someone actually passes some value so it's gonna it's gonna serve some kind of function to act as a bank so now we can say all right now we got this kind of like Incognito guy he should be able to change this to like hey I'm cool or something like that and you'll what you'll see here is interesting like you think you could just put like uh uh .01 here and that would work but that's not going to work because obviously you need to transact in way um and so uh here we're putting in the eth value but there's this cool thing that we'll uh do the math for you here so obviously if you are familiar with the concept of like a way to eat basically uh one eth is times 10 to the 18th power in Whey and so there's this little button here it will do the math for you so then you can just hit send and then boom successfully we were able to update that uh that thing but there's there's a problem uh does anyone know what the problem is the funds are stuck there there's no way to get them out I ripped out the withdrawal right so let's go ahead and let's write let's write that withdraw back in so let's come down here and let's do function uh withdraw and let's do uh like that and let's make it public but in this case what we're going to do is say only owner okay it's because we want to restrict access to that function and then we're going to do is we're going to do a message uh so we could do like a a message dot sender actually you know we'll we'll just kind of save that because I'm running out of time so let me kind of like go back and let me just redeploy these changes and make sure everything's good I want to dive a little bit into the the front end because if you're building a project this weekend then I would highly recommend you look at scaffoldeth because it has like a lot of this stuff already written for you but I also want to showcase real quick uh what the like the front end code looks like as well so if you go to the next JS folder and then you go into the uh Pages directory there's your app TSX file which is kind of like the the main application uh for your application and then you're inheriting everything here everything's kind of wrapped around this and then inside this components file folder is where we have the example UI and then we have the the uh the various like tooling that is basically built into scaffold eth but more more importantly we can look at the contract data folder uh so if you want to start making uh changes to your app then you might want to go to the scaffold eth sorry example UI contract interaction and then you can start building your app right inside this kind of like concept so again it's all typescript if you prefer not using typescript and you want to use JavaScript you could use the original version of scaffoldeth I think we're probably going to have like a version that's supporting JavaScript as well and typescript so it's kind of up to you but you're going to get a similar experience with scaffoldeth one as well um Okay so if you um if you're kind of new to like writing smart contracts and you're hacking what I would always recommend is uh kind of do what I was doing start kind of like toying around with solidity solidity by example is just a really good resource if you want to kind of learn by example and like Implement some interesting things so like let's just say like you took like the hello world actually that's a bad example let me go to like first app um here we have like a contract we have some functions we could literally just kind of grab this code here and put it into our contract up here like this save it and redeploy it so use solidity by example with scaffold to kind of implement features and functionality redeploy your changes and then you can come in here and test so let's go back and then we can see that now that we've done that we've been able to add this kind of like incrementer and decrementer into this thing we can see the transaction receipt and so you can see how the UI automatically adjusts for you and then from here you could take your contract and you could deploy it to a test net as well so one of the concepts that I will say is that we're using hard hat for everything we're doing so we're doing local deployments so if you let's say you want to do testnet stuff and you're kind of like working with a team right and you don't want to work locally and you want to work on a test net you can do a yarn run generate like this and what it's going to do is it's going to generate a mnemonic and store it the private key inside of the environment variable for you and then all you have to do is do a yarn account like this and it's going to spit out a QR code so if I wanted to I could grab my phone if I had some Gorly eth on here I could scan this send some eth from my phone or from metamask to this address and then instantly I have a deployer account and all I would need to do is do a yarn deploy dash dash Network and then pass in the network I want to deploy to so in this case squarely like that and it would work if I was to take the time to fund this wallet uh but for the sake of time I'm not going to do that um and then on top of that we we can take our react code so if let's say you want to push this to a uh an endpoint because right now we're running this all locally you can do yarn build and what it's going to do is going to take uh I thought it was urine build so we can look at the the package file [Music] foreign okay I thought it was yarn build but for some reason it's not working maybe they haven't added that um but yeah so you could just use the uh build a static site and then you could uh it looks like that feature is not there so with original scaffold eats you could do a yarn build and then you could like push it out to like some kind of a repository uh but you would have to like build it with next JS and then and push that out to a public repo um so hopefully that's like kind of a good uh overview of like why you would use scaffold eth especially for like a hackathon project or if you like want to be able to rapidly prototype um and then oh I have a pull-off so come see me if you want my pull-up I'll give it to you it's this cool like Amsterdam scaffoldeth Co-op um if you want to get more information on scaffoldeth this is a a contact card with like the the GitHub repo the docs uh pretty much everything you need to get started up and running one thing I will say also in this link there's a telegram channel uh and the telegram channel is awesome because there's over 2000 developers in that kind of channel that can help support support each other so it's a really cool community and if you're looking to kind of do more with scaffolding after the fact what I would say is there's a awesome website called speedrun ethereum speedrun ethereum is let me unlock this real quick speed around ethereum is this cool platform where it kind of like has you go through these steps to kind of like try your your experience uh by doing these challenges so like the first one you deploy an nft then you deploy a staking app then you deploy a token vendor and then basically you get invited after you finish those uh first three to the build Guild and so the build Guild has over 700 developers and it's a pretty cool Community up and coming in the ethereum space and there's even more challenges that you can do like you can build a DEX you can do a multi-sig right an SVG nft so there's all these really cool things you can do that will kind of like test your ability and then you can kind of use that as your like you know resume right you can say oh look at all this cool stuff I built on scaffolding right so yeah so come see me for the pull-up and I'm going to leave a couple minutes here for questions so if anyone has questions that I can answer no questions yep oh yeah yeah so as far as the UI framework so um that's a good question uh that for a while it was using um let's see if we can look it up I'm trying to remember what what they switched to because they this this is a rather new version uh let's see yeah I'm not sure what which UI they're using um for a while uh mostly I think it's a rainbow kit stuff right so it's a lot of rainbow kit um and then for CSS I don't remember what they're using for CSS uh but there's some stuff hard-coded here as well but it looks like rainbow and wag me yep yeah so the question was what's the difference between scaffoldeth one and scaffold E2 uh so scaffolding one is built around mainly react um there's a lot more repositories with scaffoldeth ones because it's been around for a lot longer so there's a lot more like use case examples like uh let's say you want to deploy a nft right there's already a branch so you can go to uh let me kind of load it up real quick so if you go to scaffold eth uh not two but just one and you come up here to the top left and let's just say you want to deploy an nft you can do a search and there's a bunch of different examples of nfts so there's a little bit more information out there it also has some more features that haven't been put in scaffolding two like I was just trying to build do a build uh that's not there yet so there might be some things that you just get a little different uh also like I said it's only react um it's not xjs it's just JavaScript as well so if you prefer JavaScript and you're afraid of typescript then scaffolding one might be a good uh good thing to use and it still works great yeah so uh but yeah today I was just showing off scaffold detail yeah no worries any other questions nope awesome thank you so much for coming and uh you guys enjoy the conference foreign