Scaffold ETH - Building dApps Quickly - ETHGlobal Bangkok 2024

for two t s check check hey B for for hopefully people show up for e for for spe for e hey welcome I was just waiting to see if some people came so I'll get started in like just a couple minutes yeah yeah I can't start by myself I would just be like you know really sad crying on the podium no it is live stream too so at least it wouldn't be completely wasted thanks for coming guys e all right I think we can get started uh thank you and I also work with the build Guild uh supporting scaffold eth uh teaching developers how to build on ethereum uh so scaffold eth if you've not heard of it it is a toolkit for essentially kind of rapidly prototyping it's great for hackathons it comes with a lot of uh preconfiguring it's also fully typescript and it supports both hard hat and Foundry so you can use different chains um there is some really good documentation on the website so if you go to the docs uh we're actually going to be going through that uh today um and showing off some of the features but there's a lot of information about uh we have some built-in components which we'll talk about we also have the Hooks and uh the ability to read and write from a smart contract here as well um and then we also have some like recipes uh along with uh you know how to ship your dap above and beyond the normal scope U and one of those extensions that's really cool is the subgraph extension which is to be able to do a um a graph subgraph uh so that's particularly useful as well so anyways let's let's kind of get started we're going to kind of use those docks as we go through but what I want to do is is just start scaffolding out an application uh we're going to do we don't have slides or anything like that we're just going to actually do some real time uh coding so when you want to install scaffold eth you can do it two ways you can either clone the repository or you can use npx I highly recommend using npx it says beta but it's not really beta so we can just copy that over here uh and just bring up our terminal so we're going to uh use uh a couple Windows to work with scaffold e actually a few Windows um so so you started let's paste in this command hit enter uh it's going to ask you if you want to install the package if you've never ran this command before just go ahead and do that say yes and then it's going to give you this kind of like Choose Your Own Adventure to get started building AAP so uh we will do this we will call it uh Bangkok uh app something like that and just going to ask us what chain we want to use so I particularly like hard hat if you're doing a lot of uh uh testing and you want to use solidity Foundry is good for that if you're worried about performance Foundry is also a little faster hard hat you're going to be writing all of your tests and deployment scripts pretty much in typescript so if you're familiar with typescript hard Hat's the better option uh otherwise you can also not use a chain at all if you want to just kind of connect directly to some sdks as well but we're just going to choose hard hat uh go out and and set that up uh so depending on your internet connection this might take a little while uh so in the meantime let's kind of just uh split up our screen here so again we are going to use a few screens so I'm just going to kind of split it up in here uh the one on the left top left that's installing all the packages we'll use to run our chain the one on the top right we're going to use to uh basically run our front end and then this one down here on the bottom we're going to use to do all of our deploys and and kind of like manage our our terminal right uh so we'll give that one second to kind of get going um actually it looks like it might finish soon here but yeah so let's let's just open up the mentioned scaffold e is this mono repo so it has two packages it has your chain and it has your front end so here for the chain we chose hard hat so it's got a hard hat directory and then inside of that directory is a contracts folder as well as the deploy script that holds the deploys so if you click on your contract it's going to give you a very basic contract that comes with scaffold e it's kind of like a hello world contract it's called the it's called the greeter or we call it your contract but it's really a greeting contract that allows you to set a greeting and you can change it um it's also got some like basic functionality like hard hat console it's also got the ability to uh change a string over um uh over a function so we'll show that here in a second it's got an event but for the most part it's a very basic contract it's nothing fancy um and so after uh all the pack ages are installed so the internet connection is going to be a little slow right now but um yeah basically it's just it's just this kind of greeter contract it's also got this kind of owner pattern as well like we have a modifier here modifiers are used to essentially like set some rules on if a fun is the owner of the contract essentially so it's kind of like an access control contract and we set that up when we deploy the contract here inside this Constructor so we're going to gut this contract in a sec um and and actually yeah but first let me show show it off a little bit so it's actually here is the hard hat directory there's also a test folder again that's it's a typescript test system so there's already a test for the contract that comes good to know that it's there and then nextjs folder is uh where the front end is so we go to there we click on app and it's uses um app router so it's it's very convenient you can create a new folder put in a new page. TSX file and you'll have a new path and then you can update the uh header component or um uh yeah the header component here to basically have that path really quickly and then you'll have a menu as well so it's really really convenient uh but if we go into this app folder we have this kind of like main page again it's all typescript um it's all syntax red right now because it's still installing all the pack packages and it hasn't um you know there's some missing dependencies so that's why um yeah you know what I might do is actually use a different one it looks like it's not going to and if it if it does do this for you you can uh do this and do a yarn uh so go into the directory and just do a yarn install should install the dependencies let see if that works so it might have gotten like hung up or something like that that's very very slow that's the problem with these hackathons there's too many people trying to um okay well well you know what I'm going to do is I have another one one here that's called testing that I set up earlier so I'm just going to reset this repository um hard head okay let's just this one's good this one should be good to go it's the same thing it would have just prompted a thing that says hey what do you want to do next do you want to install the um go into the folder and then start up the front end and basically that's what we're going to do so we're going to go we would have gone into the folder we'll do yarn chain so that's going to spin up um our our blockchain right so no matter which chain we chose yarn start so that's going to spin up our front end on Port 3000 right and then in this one down here below we're going to do a yarn deploy so what that's going to do is going to take that contract that came with scaffold e and deploy it run it's going to run essentially the deploy script which we're going to look at here in a little bit but in the case of uh hard hat it's a typescript file that deploys the contract tells you how much uh gas that it took and it tells you the address and the transaction hash and then you can see we Dre some output in the deploy script as well and yeah everything's good we have the front end up our blockchain's working we get some console logging that we're doing here so that's really convenient so let's take a look at scaffold e so it's on Port 3000 so we're going to go to Local Host 3000 and this just might take the connected address with the address right here uh and then if we click on debug contracts that's the real like magic part of scaffolding um when you compile your contract you write some solidity code right it's a very high level language and then it gets compiled down into bike code and that bite code is what is deployed onto the blockchain as a transaction uh when that happens you're also generating ABI right and so it's front end for us and let us start testing our contract so we know we have a greeter contract that has this greeting we know it has an owner variable we know it has a premium and a counter and it has this read to read how many times someone's changed the counter and then a right to to to basically change it so we could say all right uh hello um Bangkok like thisiss Mark hit send it's going to tell us that we don't have enough money to pay for gas because our our wallet here that comes in scaffold e that's called a burner wallet it doesn't have any gas out of the box right so we just need to get some funds here from the faucet and then we can hit send and now we've signed a transaction and that it's working right so we're able to test our contract window go to the same address and you'll notice that we get uh the same option burner wallet but it's a new identity right so then we can start doing some testing we can maybe use this as like an alternate profile and then we can use this one for for that uh okay so let's let's kind of take a look at the contract let me close this oh this is the wrong uh directory so let me open this one here okay so what we're going to do is we're going to come in here and just kind of make a really basic I just want to remove like mostly everything so I'm going to remove all the variables I'm going to remove the events I'm going to keep keep the Constructor but I'm just going to get rid of this uh the the owner pattern let's do that let's wipe this out let's also wipe this out uh let's get rid of the greeting function we don't really need that as well and let's get rid of the emit so all this stuff so we're just kind of cleaning it up so it's easy to see okay so we'll do that and then and get rid of this all this commenting okay that should be good so message that sender is like a global variable for anyone who calls the contract so in this case we can use that because anyone who calls this function uh is going to be the the the the message sender so we should be able to save that and if we were to try to deploy right now it's going to fail and that's because uh we've taken out the Constructor which uh had some arguments and we also were doing some console logging in the deploy script so if we were to take a look at the log here it would say well you tried to uh deploy but you we expected one argument sorry we expected zero arguments but we got one so that mean you can come in here and you can uh adjust how the contract's deployed uh so we can say okay well here we get a copy of the contract and we do that U sorry we we we use the um uh hard hat hard hat environment to deploy the contract so we get a a list of all of the addresses that are coming from hard hat and we use the very first address to deploy the to deploy it by calling the deployments from hard hat and then here we do a await and then deploy the contract and we use that uh deployer account that first um private key and public key to deploy the contract and here is where we were passing along the argument for the owner so we just want to get rid of that because that's where the arguments are so you can put like maybe your tokens name in there or a supply of the token or whatever might go in there uh and then we also are doing this console logging right here well it's cool because we can get a copy of the contract here to to interact so now we should be able to save that and then go ahead and deploy again let's see if that works there it goes so now it deployed successfully and tells us how much gas okay so that being said let's take a look and see what happens so everything changes right all of our stuff gets deleted uh and kind of wiped out so what we could do is just start building out some stuff here so um let's do address uh public uh boss equals and let's grab our burner wallet right here see this one right here so we have this address let's copy it and let's paste it in there out so now we have this variable called boss it's the address it's my wallet it matches right here so we and it's going to take in an ADD address underscore address and uh let's have it do um boss equal underscore address yeah I think that should be working see let see what did I do wrong oh public yeah so address function address public there we go let's try that again cool so that it's got ens resolution here it will resolve that and then we can hit send uh no uh access account what is that I probably messed something up let's see what did I do let's take a look at the code so function address function up let's try it again I think something was going on it was like mid deployment the internet connection is a little spotty right now so it may be messing me up there we go we we're able to like read a variable we're able to write a variable um so now you know you're probably going to want to do a lot more stuff to the contract this is not a solidity uh Workshop we want to show off the features of scaffold eth so it's really cool we're able to start kind of doing these things and mess around um and we know we know where the the contract is we know where our deploy script is we know how to like update things for the most part but you probably want to polish your application a lot more but we're going to go ahead now and start adding some front-end stuff just to kind of show off how you can hook up to your contract so we're going to kind of close the hard hat folder I don't think there's anything yet I want to show in there uh there is a hard hack config which is useful we'll get to that in a sec but right for right now let's talk about nextjs okay so if we go to nextjs and we go to app and then we go to the page this hello world page that you see when you first open e that is on this main page here is right there right it's the root um what I'm what I like to do is I just come in here and grab everything that's inside of this right save it and then I just uh we might use that connected address but I get rid of everything that is not highlighted anymore clean it up a little bit and then we have this kind of like empty page it's like a clean slate so what we can do now is we can say well we actually can check uh what the connected address is and we can just put put it in here like this right connected address and it's going to display up here really ugly right no one wants that in their app it's not going to be look good so uh scaffold E uses Daisy UI so we can go to Daisy ui.com and what we can do is just add a component there's a bunch of components here so grab a card uh I like to grab a card because we're going to do is replace this for right now and we're going to put it right inside uh I'm also going to wrap it in another div so I'm not a friend end programmer by any means but uh let's just kind of try to make it look as pretty as we can and then I always like to so now we have this uh kind of card this little Nike um we're not going to sell Nikes on chain so we're going to get rid of this stuff um and now let's save cool so now we have this little card what we probably want to do is take this big div and then we want to center it so we'll add some CSS oh sorry that's not right what is that doing okay CL class uh name sorry right here and then we'll go flex uh items Center and justify Center save it there we go and then now we can like add some padding we'll do padding three save that now we got some padding on it looks starting to look a little bit better we're not going to buy anything we're just going to be like uh click me I don't know cool so we have this kind of like starting point for like something some stuff we want to do so what I want to do is first is display the uh uh the connected address so we do that right here it's going to give us this really ugly thing so we want to make that prettier so we're going to go to scaffold e docs and we're going to go to the address component and we're going to take a look at that that's a much cleaner look right how do we do that all we got to do is wrap it in this address component or address equals like this and then close it off off save it it's going to automatically add the thing here if you're using the um vs code and you have the um it so now let's take a look at it and it is right there we go it's right here uh something has an error but I don't know what that is okay so now it's really a lot lot better looking right we have this connected address and matter of fact we don't really even need to say connected address here it's going to look a lot better like this which is the address and then what we can also do is um show how to write to the contract so maybe we want to actually like change who the boss is so first let's read from the contract we have this balance or address component we could also get the balance there's a balance component here we could see how much eth that that account has so we could say uh balance right below it um balance equals address equal connected address there we go and then it would show have much ballot so this is cool we want to maybe see who the boss is so we're going to go to scaffold e docs and we're going to go to read contract so we also have hooks so this particular is missing so we can add it by just calling quick and then add it back up here so it's going to put it at top and then the the function is called uh so we can actually completely remove this like that and we can call the data Uh current boss like this so what this is who the boss is so we have this variable current boss so so now we can say uh current uh let's see boss equals we want to wrap that in something so let's wrap it in address address equals and boom like that so now we have the boss current boss is was is it metallic let's let's read right now okay so let's go home okay so now we can hit refresh oh man oh man this is really bad connection or something I might have to tether okay you're deployed did I mess something up here feel like there's some aor somewhere or something but just make sure I think it's cuz the hydr failed because the does not match with that yeah I think something's going on with the internet connections really bad okay now it's good but it's still not good I don't know what's going on I think it's because the internet so I'm going to try to tether to my phone and see if that helps probably not oh connected to ethereum now that's way better so eth Global Internet is just actually maybe that is the problem I'm on ethereum okay all right well let's keep going let's keep going so what do we want to do now so now maybe we want to add a form to write to the contract right we we can have our users balance we cor so now you can come in here and you can see what that's going to look like so in this case uh we need to be able to add a button um and then we also need to probably add some add an input for who we want to make the boss to so first let's do address input so we can come over here and show what it looks like so it's going to be this address input and let's go to that page and then what we'll do is put it in here I guess actually we probably put it here there we go so we want to call this address input it's missing so we got to import it and then we don't have this set address to find and we don't have a value to find as well so what we need to do is is use some state so basically with um scaffold e you know we want to be able to like pass that address and so in order to do that we need to send it with state so we'll grab that uh and so I think that's going to go right here and then we're also going to get an error because State's not defined so we can hit quick and then add that import so now we have uh State installed and so now we have the ability ility now where we can just uh input here on this line uh and there's some kind of weird thing it's always there I need to get that fixed but we have this like thing that allows us to input something so metallic. e so now it's like ens resolution it resolves it gets the little uh PSP but then the button is not working yet so we need to fix the button so the in the button is right here use scaffold right contract in order to do that we need to uh interact with our contract so we're going to call this use scaffold right contract P the contract so we can do that again right below like this and we're missing use scaffold right contract so we can import that like this so now we have everything we need pretty much now we just need to change the button so there's this is a full example of a button to update so we can grab it it's not going to be the exact or the right right stuff in the button but let's just add it real quick okay so first of all the function doesn't exist so we need to call uh what is it what did I call it set user boss or something like that let's see deot contracts I called it update the boss so I need to uh add this update the boss in there so let's do that update the boss the argument is what's being in state so it is the address I think what am I what do I need to use set address address yeah address it should be right oh do two string see if that works actually it might work want to use set greeting we just want to call it set boss okay that's not right so is it just address. to string no H let me see the example again real quick what do I need to do so yeah the function so we can say look here the function calls update the boss it wants an address yeah should work not sure why that's not working huh okay well we might have to just keep going just so we can go through the full demo I'm not sure why that's not working me try it one more time let's see uh address two string no okay not sure I'm not sure why it's not taking that um because the address is here we're we're saving it as state as someone types it so huh I think so yeah oh maybe not maybe I don't maybe you're right ah it should work okay let's let's try it vital.

e Oh vitalic e set set boss there it goes boom now updated so thank you yeah that worked sorry my I've been working all day and this is like my third Workshop today so okay cool it's working now we have this kind of like very basic application but at least we were able to read uh keys that come with the hard hat or Foundry because they're all shared keys so we need to generate a deployer account so the next thing we're going to do is do a yarn uh generate and this is going to generate a private key and public key pair and put it on your machine uh if you're using um hard hat it's going to drop it in this EnV file if you're using um Foundry I think it puts it in like a a a pass Pass key but it creates a wallet address for us and we also can do yarn account and we can see that wallet address and we can see how much funds it has okay okay so what I'm going to do is I'm going to grab this address let's see if that works there we go uh and I'm going to use my wallet on my phone just to send some sapoia eth here so I'm going to use my punk wallet and this is going to uh just basically allow me to scan so I'll hit scan allow boom and then I will send uh some spolia eth I'm going to change it here to eth and send and 0.1 sure okay 0.1 e cool now let's see if it worked now depending on your setup when you depending on when you do this uh and what version of scaffold e you're using uh the current scaffold e has a little bit of a bug and it's some reason showing that I have zero balance and what I think it is is that has come into the scaffold config or sorry hard hat config uh and we need to update uh the m point for uh with a proper RPC I think this one's messed up something's wrong with it so what I want to do is actually use um Alchemy for right now so I'm going to grab this string which is my my key um and I'm going to replace it with this uh RPC endpoint with my API key so I'm going save that and now let's see let's do a UR account and let's see if it actually gives us accounts ah maybe it didn't go through e 0.1 should be good let's try try it one more time so basically we're just funding this account with some spolia eth there it goes okay now it finally went okay so have 0.2 spolia eth on this wallet so so now what I can do I can either update my config here to point to whatever chain I want to deploy to or I can just pass it along into the deploy flag so what I'm going to do is I'm going to do a yarn deploy D- Network sepolia and that's going to take my contract and push it to sepolia uh it didn't need to compile it so it didn't it didn't need to generate any types it's deploying it and drum roll got this okay any minute now I think sapoia is just slow I think everyone's just testing it right now Okay cool so it deployed successfully so now we have our contract deployed uh on here but um we also need to update our front end to to be able to hit it so the contract's deployed uh it doesn't show that it's deployed here again I think my front end is just acting up on me but let's go over here and let's go into the uh nextjs folder and there is a scaffold config file so it is uh SCA going to put it on change.

sapoia and we can also change the polling interval venal and we can also update the API key as well for uh uh Alchemy if we wanted to so let's do that just in case there's any issues um we can paste it in here and now we should be able to we go back to scaffold eth and let's take a look so it kicks us out of the burner wallet because because we don't want to use the burner wallet anymore uh it's somewhat insecure so we need to now use metamask so let's connect so it knows that we're on a test net okay connect so there it goes we're on sapoia we can see that there's a boss uh set which is uh I guess that's my burner wallet oh I got a new burner wallet for some reason okay uh that's okay uh we lost the burner wallet I don't know where it went but that's okay we have this now we can um still and we can hit set boss it's going to be a little slower because we need to sign the transaction let's go ahead and do that let's just make sure it works we can see the transaction as well cool that was successful now vitalic is the boss on oh another thing is you can do yarn verify as well so you can do yarn verify so if we look at the contract um if we go here to debug contracts it it's probably not verified right here because um it's just raw you know bike code that they know about but what we could do is just verify it so let's do that so we're going to do yarn verify D- networks apoia and that's going to basically like um make sure that the bite code uh matches what the ABI uh should be so it basically sends that to Ether scan and then ether scan verifies that so that just takes a second and then it will verify your contract there it goes now it's verified so now if we refresh we have a verified contract right here and it's got all the source code so that's very useful so now we can deploy our front end so there's a command for that as well it's yarn versell uh YOLO d-r uh basically it's just it's a yarn verell command but it ignores build errors so if there's any build errors it will ignore of those and then uh it's using the prod flag so that'll push it to production uh so we do that and it's going to ask you if you want to so you'll need to connect to your terminal to versell and you can uh It'll ask you what project if you have more than one project uh do you want to link it to you can say no we can just create a new one uh do you want to link it to an existing project no and then we can type it in so we can do like demo or whatever demo examp and ask us where the directory is say enter so this will basically set up the project for us and then it's going to ask us if we uh want to save any modify any of the settings we say no and then it's going to deploy it so it's going to push it to verell and it's going to give us this URL so we can grab that and I think I'm using this account so I need to load it over here let's load it up there it goes so it's in the middle of building so this might take a little while depending on uh you know uh how fast for sale is at the moment but for the most part it's good to go so um yeah so we were able to to make a very basic contract using scaffold eth push it out deploy it out um or to for sale and do that pretty quickly within I think it was like 45 minutes and I had some problems so it's pretty easy to build an app with scaffold eth um and yeah so I just want to end on a couple notes so again if you go to scaffold e um go to the docks everything you should need is there uh if you get stuck there's a um telegram Channel where you can get support um and yeah that's pretty much it uh the extensions take a look at those especially if you're like building for a certain um like uh Bounty you know there's like some in here for on chain kit so you qualify for base uh you have the subgraph extension as well uh plus there's also some native base stuff in there as well in scaffold e um and you can also create your own extension too so if you are here at the hackathon OR at a future hackathon and you want to build a extension for one particular uh protocol uh that's really useful because then you're like kind of building this thing that you can reuse next time you hack so uh if you go to actually if you go to scaffold eat.io and you go all the way down there's a section here that uh has all the extensions available so there's those ones there but then there's like EIP 712 there's Ponder erc20 there is uh currency conversion erc20 quadratic voting there's a bunch of these so uh the scaffold E2 chain link extension so you know there's lots of lots of ways that you can just use U existing reuse existing stuff uh last thing is I would say if you just getting started building on uh ethereum go to speed building decentralized applications but more important importantly um it's these kind of like uh challenges that utilize scaffold e so you'll learn scaffold e a lot as well as you go because you'll you'll deploy an nft then you'll build a staking app then you'll build a token vendor and then you'll build a dice game and you learn about Randomness and then eventually you'll build a DEX and once you finish with the deck you'll actually join the build Guild and uh yeah you're welcome and there's other stuff too like doing State channels multi-sig wallets and then SVG nfts um so yeah tons of information there but I hope that was useful and uh yes we have some time for a question so I think we might have some questions in the audience so what kind of question you have yeah yeah yeah we can take a second to do that um you know so with the foundary build so so the question was you know you're interested in Foundry and how that works with scaffold eth um so basically yeah I think if you go to GitHub and you go to scaffold eth I think there might be a found one but I don't know it seems like it's old it's out of date yeah so you actually probably just want to use npx that's the best way so um we can kind of just do that latest this and then we could say uh Foundry and Foundry so it's pretty much the same exact setup um yeah it might take too long actually I would say but just maybe you could do this on your own time and kind of uh explore there I mean the main differences in Foundry I think do you know the differences in Foundry yeah like one example would be like the yarn generate it creates a pass key um but yarn deploy and all these commands that I've been typing are exactly the same um but you can always go into the package Json and see what those commands are but I think the the experience is going to be almost identical the tests and the the scripts yeah yeah you mean like you're talking about like adding like an extra external account or like a external uh address kind of thing yeah yeah yeah that would be pretty easy to do yeah yeah because you could read and put it in state and then reuse it or whatever yeah yeah yeah no problem for listening in so cool catch you next time thank you dude like to yeah yeah for sure I'll be here uh today and tomorrow so yeah I can actually I started for