🛠️ Introduction to Scaffold ETH 🏗️ - Kevin Jones

foreign [Applause] [Music] and welcome to the introduction to scaffoldeth Workshop joining us today is Kevin Jones who will be taking us through this session and with that I'll pass over to Kevin to get the session started thank you so much for we appreciate it thanks for joining guys uh it's super awesome to see everyone here I'm really excited uh it's been about uh I think this time last year I was speaking at the other Stanley ethereum um and so it's really cool it's really excited to be back my name is Kevin Jones I am a developer advocate for scaffold eat um all about trying to help developers um coming into ethereum and specifically coming into the East Global hackathon how they can use scaffoldeth as this kind of tool in this Catalyst to we really gotta kick start your project and get you up and running really quickly so uh without further Ado let's go ahead and just start share your screen let's just go ahead and dive into it so uh first of all I wanted to just kind of talk a little bit about how you can find scaffold beats so if you're at home uh and you want to search for it you can just do a simple Google search and you're basically going to be able to uh just click the first plank and that's going to give you the GitHub repository so to get started just you know search for this you can clone the repository so you do need a couple things installed on your system you need node.js installed obviously you need to clone the Bell so you're going to need kits um and uh it's going to basically install everything for you and this kind of like quick readme is gonna like get you up and running but I'm going to go through it with you guys today and we're going to kind of Tinker around and show how scaffold has gone to uh kind of just help you uh kick start uh your uh uh through or your ethereum project or your hackathon project so um one of the things I want to talk about too is also after you're all done with the hackathon project you guys want to learn more check out speedrun ethereum.com quick shellness this is a kind of a step-by-step validation of your skills where you can go through some challenges you can build a NFP build a staking app build a token vendor and then eventually you actually get invited What's called the build kill and I just want to briefly touch on about the build Guild is a group of developers like myself who are trying to help the uh ethereum ecosystem specifically that kind of uh using scaffold defense is kind of like public good uh to help build your uh your applications your your decentralized applications and eventually you can actually become part of the build Guild so check that out uh that's a good uh path um so I've I've gone ahead and I've actually already checked out the repository so I'm using uh Team Lux if you guys aren't familiar with Team Lux it's basically a terminal fed plexor allows you have lots of Windows up you always need like kind of three windows up to get started with scaffold eat so um I like to use it just makes things a little bit cleaner uh I was like as I was saying before I've already gone ahead and checked out the repository I've also gone ahead and did the yarn install so if you do yarn or yarn install it's going to install all the dependencies so you'll check out the repository do yarn install your install is going to install all the dependencies for you and then you can get up and running with a blockchain using uh yarn chain that's going to actually spin up a copy of hard hat running locally on your machine uh you're up and running ready to go so and it's also going to come with these 19 or actually 20 accounts that have some plate ether in there uh you can kind of start toying around and kind of test your assumptions as you start to build your your application all locally then you're going to open up a new window so again you can use this new window I'm just going to tab over this one and I'm going to do a yarn start okay so York start is going to do exactly that it's going to spin up a copy of uh react so it's it's equivalent to doing the react start of the web application it takes a second for that to start so we'll go ahead and let that sit and we can see after it started successfully we can also see that we have some contract calls that are being made that are being outputted outputted to hard hat as well then in this last window so you're always going to kind of keep those two windows up here or back end which is hard hat you got your front end which is uh react and then here is where you do your deploy so the last step is we just do a deploy we do a yarn deploy it's going to take a contract that comes with scaffold need and it's going to automatically deploy it tell her that for you and it's going to show you here that it was successful going to show you what the address was it's going to show you how much gas was used and and if you want to get a new version you could just uh do yarn deploy dash dash reset that and I would force a deploy and it would give you a whole new contract okay so we can see that everything's kind of working we can go through and do these deploy as many as we want so we're going to keep getting instances of our contract and then we can also check out the UI while we're uh while we're here so uh scaffold youth again it runs and react um it runs on local Port Street vocal host Port 3000 so you can see here that we're up and running and we have this kind of like UI which allows us to kind of like start tinkering with uh the smart contract um firstly we want to show you is there's some tabs here with a lot of different stuff going on this first tab is kind of just like a place where you would build your application so if your ability uh your your project you're going to go into the packages react app folder Source folder views and then home.jsx and that's where you can start building your dap right inside of scaffolding you didn't kind of think of it as just this app with adapt within the dab and it's just gonna going to build out inside and there so that just shows you how you can kind of get started but really what's awesome about scaffolding is it has this debug contract practice folder so we can see here that we already got a contract that's been deployed and we can see that it has an address we can see that it has a variable called Purpose with a value of building Unstoppable apps and then we can also see whether we have a function that allows us to update that so let's let's take a look at what that smart contract looks like so I'm going to load up um vs code and if you're using vs code um you can simply just go to the packages folder here on the left and then you can go to either hard hat or you can go to react app if you want a toy with the back end we're going to start out with with art hat and we're going to go into the contracts folder and we're going to go into your contract so like I said it comes with this a contract which has been deployed and it's very simple it's just a string so we could change that string here if we want we could say building uh awesome apps or something like that right we could save that we can come over here and we could redeploy again okay and then after we do that deploy there we go we get that kind of automatically updated in our in our front end and so uh again this is going to take that existing uh contract and then you can start kind of building off of that and then build your apps we can see here that we have the function and then we have a Constructor that's empty so we could do something there um so let's kind of like start tinkering in a little bit uh let's let's create a new variable first of all let's make it an address variable and we're going to make a payable address and we're going to make it um sorry address uh public payable I think that's me being I don't know equals and then let's grab our address so the next thing you'll know with scaffold is you have this ability to basically get um a copy of a private key that's automatically generated inside of your browser it's called a burner wallet so you could click here and click connect and actually connect to metamask uh but for the for the purpose of this we don't really need to do that what we can do is we can just use the the contract address that we have that's already here so uh here we have a um uh essentially a uh a burger wall that's already there and then you can kind of also see that there is a a little bit of a uh blocky that's generated and we can see if it has a balance we can also click the little wallet and we can send funds around in here we can also take a look at the private key if we wanted to right so there's a bunch of different things they can do um and then on top of that we can uh essentially use that that variable okay so what I want to do first is uh let's let's say that we want to do uh hard code an address or we could do that and we can hard code it in here like I was going to do another option that we can do is we can uh create an owner variable using the import command okay so we can import uh ownable here we can save that and then we can uh redeploy so and and we also need to say your contract is ownable like this okay so now let's go and deploy and deploy that change okay so now let's take a look at our uh UI so what's happened well we've automatically got a owner of air of mold that showed up here okay more specifically what's interesting about this is you're inheriting so the the idea of inheriting another smart contract is here we can inherit that contract and then we can use that inherited contract as an inherited set of values so we get all of the functions and all of the variables all the modifiers that are essentially available from there so net how we automatically have access to a owner variable which I was going to hard code but the better way to do it is actually use ownable now this is a hard hat address so again scaffoldingq uses hard hat so the next thing we wanted to not understand is how to scaffold me deploy the uh the actual code or hard using hard hat how does it deploy the code so let's go into our hard app folder again and right below you'll see that there's a deploy folder okay uh so we can go to the deploy folder and then we can come here and we can take a look at what's going on with the deploy so here we can see that we get a full list of the named accounts and so in this case we have the deployer and we get the very first uh address and then we use that to declare our smart contract and then here or we use that deployer and then we can also do things like if we wanted to we could pass some arguments to the Constructor here like if we wanted to name uh our token or if we wanted to pass in some kind of like uh value like this we could do that we're not going to do that right now but that's good to know that you could edit your deploy script here but what's more importantly is because we inherited ownable you'll notice that we got some new uh variables that showed up here and we also got some functions that showed up here and one of those is called transfer ownership so that's part of ownable ownable is essentially a way for you to manage ownership access control of your smart contract and so now we have access set here so what we can do is we can call that transfer ownership inside of our deploy script and so if we come down right here we'll actually see that we have a kind of a grayed out version so we can just copy that and we can instead paste our address that we get here okay and so again this is a burner variable a burner wallet and it's inside of the browser so the private key is stored inside the browser and uh we have the public address so we can transfer using that existing uh function and we can pass in that burner wallet that we have so we can save that and then we can go ahead and redeploy okay so let's take a look at the front end now now we can see that the owner is going to get updated let's go ahead and refresh oh did I pass it right properly uh let's see make sure I did it properly see what I did wrong uh your contract is not defined that's interesting is it spelled differently um your contract got transfer ownership oh that should work looks like this kind of that bug with the name of the contract same oh you're a contract yeah that should be right there was a comment that says uncomment the line uh let's see here about the transfer ownership uh about transfer ownership now this is part of the thing I don't think it needs to be uncommented actually oh I see we're not actually getting your copy yeah you're right thank you they changed this uh thanks Phillip for the yeah appreciate that so here we don't we actually get a copy of the contract I thought we're doing that already um so I think we need to do like that but oh that's if you just want to get access to a specific contract oh here it is I see hi Stuart it is so they changed this sorry guys this is uh throwing me for a loop yeah so I need to actually grab it here and there we go let's try that there we go thank you guys all right uh they changed the police script recently so uh that's why I didn't notice it okay so now we can see that we've uh moved ahead so this is good we did some real troubleshooting and what we had to do is let me just show you what we had to do so we actually had to get a copy of an instance of the contract before this was automatically uh put for us because during the deploy we would automatically get it but since we didn't do that we're creating a variable here and then we're using ethers to that git contract we're using your contract as the name and the reason deployer which is actually uh up here which is the uh named account right and then here we're actually calling that uh transfer ownership function okay so we got that so um so this is interesting so now what we can do is we can start thinking about okay well like let's say we want to actually make changes to our smart contract uh where instead of like someone who wants to call a specific function maybe we want to require that they pay some value so I'm going to show you here how we to do something like that so first let's go ahead and create a um UNS and we're going to make it publicly available we're going to call it price and we're going to make it 0.01 either like this um actually we're going to go 0 0 1 ether like that and then we're going to say that uh we're gonna do a require statement so we're going to say all right so make sure that the message dot value that's being sent equal equal to price otherwise uh send no money like that and then we're going to close it off okay so now what we can do is we can redeploy and again so what we're doing here is we're just basically creating a variable that is a certain value so we're defining it either and then we're also requiring that anyone who calls this set purpose instead of just calling it they also have to send in some value now it is already payable you want to make sure that your function is payable which it already is and so now what we can do is we can come over here and try to set the purpose to sum up into New Year using the function uh so we can say like scale ethereum like this and hit send and if we don't it's going to send more money right we need to send some value in in the contract so we don't have any funds so how do we get funds well we can just click this little button right here and that's going to give us 0.

01 either from the burner wallets that come with hard hat uh or I should say the deployer accounts and it's going to put it into our burner wallet we could get more as well so we could click the address here we could come down here click the address or for this kind of like dispenser and we could get I don't know let's say we want a hundred dollars worth of ether and then that will transfer from hard at as well and now we have 0.068 which is 117 um and so now we have some ethi to play with so let's go ahead and do that so we're gonna go 0.001 and then what you'll notice is you'd think you could just put that in and you can hit send but that's not going to work because you need to actually convert that value into way and so there's this awesome button right here that does that for you it's going to multiply your value times 10 to the 18th power which is how you convert from away to each uh and so that's going to tell us exactly how much weight that we need to send in that transaction and then we can click Send there we go uh now it was successful so we're able to update the purpose uh because we are a specific sending n specific value and then we can also see that our contract starts to get some value okay so we can actually uh start using the contract as a bank and so the next thing you might want to do is like okay well let's create a uh withdraw function right like um let's do that next so let's say um function uh sorry I cannot type today for some reason function uh withdrawn and we will send um I wanted to send anything in that but we're going to make it publicly available and we'll get back to that in a second but we're going to require this one uh to actually we're going to just do like this so let's do a stata bullion uh called success otherwise we won't uh a value and we're going to do a message.sender.call which is how we can transfer cup uh value from the contract to the address that we're calling and we're going to pass in a value uh of the balance of this contract so we're going to say address this contracts uh balance like this and then we're going to close that off now we wouldn't want anyone to be able to access all the funds that's in the contract so this is a good example of how you can use ownable and you can do you get access to also what's called modifiers so ownable plasmographer modifiers for only owner so we can say that only owner here and so this is going to require that anyone who calls this function is the owner of the actual smart contract so it can hit save and then let's go ahead and redeploy again uh did I spell something again probably oh I need to make it payable so that I think I think I'm just buying something wrong so a little uh oh I think we need to put that in the studio sorry there we go okay so now we've uh successfully been able to deploy our contract so now what now I want to talk a little bit about uh the burner wallets again I'm going to open up a new tab here and I'm sorry I'm going to open up a new incognito tab sorry file new incognito window and I'm going to go to localhost 3000 so we can see now that we have a new uh instant software burner wallet now here we have like this kind of like purple green blocky dude here we have like a yellow and green blocky dude so we could come over here and we can get some funds from the faucets we can also grab some extra funds if we need to so let's do that so we have a full control to access the faucet let's go uh ten thousand dollars this guy who's rich uh and we can update the function so let's say a set purpose um to scale ethereum like this and we can do 0.

0 uh zero one ether we can send that and we're able to update it because we are this kind of like uh new uh you know in user of the doubt but if I want to come down here and then use the withdrawal function and get this dollar 75 of ethos 0.0018 and I want to hit that uh and I hit send it's going to tell me that ownable caller is not the owner so the owner bowl is basically blocking uh access to that that deployment or to that function but if I come over here and because this owner will match then I can actually uh which are the funds so here we go and then there we go I was able to take the dollar 75 and put it into my wallet so we've been able to utilize uh honorable to do that uh and get going so one thing I will say as well is that uh if if you're if you've got a hackathon project that you're working on right now uh there are a lot of builds of scaffoldee uh that have kind of like good starting points for different things so the the one that I showed you you guys is kind of like the basic kind of starting point and then you can kind of start building out if you want to like I don't know let's say you're going to work on um an nft project so if you go to the scaffold repository and then you go to scaffold IF examples there is a complete list of of a bunch of different examples so you could seduce you know start typing nft here and there's like a vrf and a t there's an aging in Ft there's a chain link vrf and ft there's a buyer mint nftp which is quite interesting which allows you to um make up basically nfts uh and the the buyer has to pay the minting fee uh and so there's all these different kind of starting points that you can use um and there's also like an 11 70 uh 1155 version that allows you to do SVG examples so there's all sorts of examples there there's also some examples in the challenges folder um and there's also some examples in the scaffolding folder so you can kind of like dig around so if you have like an idea in line and make sure that you're using one of those kind of like good starting points as your starting point so that you don't have to write a certain amount of code right it's going to kind of get you up and running uh and then if you're kind of just messing around I also recommend like if you're new to building on ethereum check out solidity by example uh so let me by example is going to have like a bunch of examples and you could kind of do things very simply like um like creating if else statement or getting the gas price or or converting or the how to convert ether and way and use different values okay inside your smart contract whatever it is you're messing with you can come here and kind of see examples and another reason that it's useful is a lot of the code is explained on YouTube as well so if you're one of those people that's more of a visual learner you can go there and you can kind of like watch the video grab the the syntax put it into scaffold beef and kind of toy around with it uh as a good starting point um and yeah so I hope that's valuable I want to save some time for questions so if anyone has questions about how scaffolding works or if there's something I didn't cover uh please uh let me know I'm ready to help you guys out there was a question early on and what exactly is the burner wallet um another participant commented but I wonder if you wanted to maybe share your yeah yeah absolutely yeah so again just to to refresh on that so you could if you wanted to you know use metamask so you could click connect and you could use metamask um it's going to give you like an error like in this case uh I've correlated selected so it's going to let tell me I need to switch to localhost so I can do that um actually I might have to do it here let's do that uh and it's localhost there we go um okay they changed the chain ID on me as well so I needed to go in there and edit my chain ID but yeah it's kind of a hassle to deal with uh metamask for a couple reasons um one main reason is uh the nonce uh issue so there's this one issue with nonsense where metamask will start building out like the nonsense and eventually your the app and your um uh meta Minister kind of at its sync and you'll start getting nonce errors um and so that can be kind of annoying so that's why I recommend just using the burner wallet so disconnect metamask and just use these while it's uh especially if you're on like localhost because it's really just easier for you to do your testing and you don't have to worry about like loss of fun it's because it's all just kind of like hard hat money when you get to like an S Nat and you start to deploy to guerley or so um some other test net you'll probably want to start using metamask um and then you won't have to worry about uh the nonsense tube because you won't have this issue where like the deployments change change and your metamask doesn't see that change and there's this kind of out of sync problem so for test Nets you can use metamask for localhost choose burner wallets it's just a little bit easier and again the burner wall is just all inside the wallet and so if you were open up a new incognito window you could have as many kind of identities as you wanted it to uh because these oh sorry I lied to you uh in this case we have uh the incognitos are kind of working as one it sits here so so you can have like multiple kind of uh instances of wallets and it just helps you kind of like test your assumptions cheers thank you that was another question uh my team wants to know if scaffold is enough to work with multiple wallet Solutions as show or should we install used app yeah I mean you could use like uh you're talking about like here I assume you can use like wallet connects um you can use uh I don't know why that is some kind of modal era that's I have lots of Errors today it's been a while since I did this demo so um yeah so I I would probably say that's fine you can you don't need to use any kind of other um solution you can just use everything that comes with scaffold um and it should be good um and of course you could kind of like add your own components like if you wanted to use um you know a different kind of uh identity provider or uh connector you could but you don't need to and uh does scaffold work with uh metamask on ZK ebm chains um yeah I believe it yeah it does yeah so it should work um yeah as long as it's like evm compatible it will work um I particularly haven't really tested it myself uh but I'm pretty sure it works and uh Steve made a comment uh there's one branch of scaffold that I wanted to use which doesn't work chakra UI yeah I've never used the chalk review UI one particularly um I would probably say you could utilize um just the base version of scaffolding and then because it's using react you could just add in all the Shocker UI stuff on your own um it's pretty easy if you just go to like shocker I've used chakra UI before I've never used the chakra UI version of scaffold if but you probably can just import all that stuff manually I'm using the Shocker UI kind of getting started there's like different ways to do it you just put it in your react code which I didn't really get to too much but there is an entire folder here under react app and then inside react app is the source folder and you'll see there's an app GSX file and so this is kind of like the starting point and I didn't really go too much into react I was kind of just focusing on solidity but this has a lot of information here in the comments to get you started like how you adjust your networks but you could again add shock UI probably pretty easily here into the base application and it should work um yeah without a problem and uh Willman asked when scaffold eats version two yeah yeah I didn't really get to that too much either as well but if you're doing search for scaffold eat um or actually if you go to like they GitHub repository there's an se2 Branch uh so if you do sc-2 um it's it's currently in a working condition it totally works so it's scaffold beef uh Slash s-e-2 and it's basically just a rewrite of Staff leave uh most importantly it's using next.js instead of react.js out of the box it's using rainbow kit it's still using hard hat but it's also using a wag mean and it's using a typescript so if you are more familiar with nexjs or with typescript um this might be a good option for you to start but just know that if you're using it for our project it might be a little buggy there might be some issues so it's not fully ready yet um unfortunately I don't know uh because I'm not particularly the one working on it I don't know when it's going to be completely 100 ready to replace scalpel lead but it's definitely in a really good starting point so if you want to toy around with it I would recommend checking it up some and that's all we have for questions right now unless people if you want to still have some time so if you want to take yourself off mute and ask a question feel free to do so and if not um yes yeah um so let's say never mind my question is like the gay stuff integration like in terms of like let's say I don't know if you guys have like work with like snacky jazz or something like that generates proofs from in like deploy contracts not in that nature it's like I'm trying uh to see if like scaffold if has like any like Zucker cheese like stuff examples or yeah so I particularly haven't messed pretty much with the ZK uh sync builds but there are a couple here that I just saw like ZK sync and ft ZK sync starter kit um I I think mostly everything that we've done is around ZK sync um so you might want to check those out um you also might want to look on like YouTube and see if like Austin Griffith who's the creator of scaffolding or anyone else has done some stuff with zks with double div I'm not familiar particularly um but that might be a good option as well I'm just gonna check this Branch real quick okay so there's also some on on the scaffolding examples folder like ZK committable NFC game example proof membership voting example so there's some stuff out here um and usually like like this one is a voting example right and it has some additional documentation so you can go through and see um you know whoever created this build uh hopefully has done their due diligence and created a decent uh read me free release to like look at and understand what's going on but if not and you have questions about it um you could look and see like who committed the code you could try to reach out to them you could also check um scaffold needs if you are problems you can go to the scaffolding telegram Channel and you can ask in there to see if anyone has examples of stuff they've done with Z kids uh on scaffold that would be another good option so if you want to get onto the telegram which is also something I would recommend everyone to you you can go to scaffold Eve and you can go all the way to the bottom and there's a support chat right here uh you can click that and you can join the telegram group and if there's something I didn't I wasn't able to answer or someone wants to get more help during the hackathon that's another good spot for you guys to go yeah thank you so much like this is so helpful because they have like some stuff that I was actually working on cool awesome thanks yeah well thank you so much guys so again go to scaffolding uh check it out check out the repository get up and run in uh check out the sport chat and uh yeah drill down don't forget to speedrunnertheory.com uh to check out that as well so I appreciate it guys here's thank you thanks everybody for joining and uh thank you um Kevin for the great presentation and uh yeah cheers have a good rest of the day and happy hacking