Building Full Stack dapps with Scaffold ETH - ETHGlobal Singapore 2024

[Music] awesome cool thank you guys so much welcome uh how are you guys all doing today doing good awesome uh my name is Kevin Jones I work uh for the graph I do devil but I also help out with the build Guild and I support scaffold eth um so the workshop here today is all about scaffold eth and how and why you really want to use it for building um your dap and why you want to especially use it for the hackathon um so real quick uh basic tldr for scaffold eth is it's basically a full stack um toolkit that has everything you need to get set up and running it comes with uh rain rainbow kit nextjs it also comes with a chain either um hard hat or Foundry and it's pretty much uh written with uh react with nextjs and also like pretty much fully typescript um so that's really nice because it has all the type safety stuff um and uh it's really easy to set up and it's a great starting point for hackathons so without further Ado we're just going to kind of dive right into it if you go to scaold deep.io that will take you here and it will give you the installation instructions you can either clone the repository or you can use the kind of uh more Modern Way which is to use the npx uh it's kind of like a Choose Your Own Adventure way to install it which is what I would recommend uh you do need to use that if you want to use Foundry uh so that's what we're going to use you also have access to the docks here which is great the docs are a really good resource um we're going to dive into them a little bit and there's also a GitHub repository that has more details um obviously on the code and and what you're actually using but let's go ahead and get started so I'm just going to copy the npx command uh we're going to use that and we're going to run it here so MPX createe at latest and then it's going to ask you what you want to name it so you can say whatever you want ABA kadaba hit enter and then it's going to ask you what chain you want to use so uh you can choose hard hat or you can choose founder um I personally like hard hat just because it's been around a little longer but some people prefer Foundry because it uh gives you the ability to do uh smart contract tests with solidity so it's really up to you or you can do no chain which is also an option uh I've seen people use it before so we'll just say hard hat and then it's going to go through and basically set up uh the repository for you um I've gone ahead and already did this because I'm just going to save some time U and I've already did that into this Singapore directory uh but basically after it's done I'm just going to tell you a few commands to get started we're going to go through those right now um basically with scaffold eth you kind of need a few windows open because you need to like orchestrate you need a back end you need a front end and then you need a another window to do all of your deploys so uh the first one is to do Yar chain which is the um obviously the blockchain that you're simulating the blockchain with either hardhead or Foundry um I'm going to split my window up with t-mo but you can just open up new windows if you want to do this um and we we can go into the same directory and do yarn start so yarn chain is for your backend harder Foundry yarn start is going to be nextjs react uh on Port 3000 and then in this uh third window is kind of where you do all of your deploys and like you know anything you want to do from the command line right so we're going to do a deploy so we're do yarn deploy so scaffold e does come with a contract that's kind of a a hello world greeter contract we'll get to it in a second but we can see here that we get some console output we can see that we successfully deployed our contract it gives us our address it gives us the amount of gas that was used in the transaction and then it gives us some like some console output as well that is uh in the deploy script uh but for the most part we know that the the contract has been deployed let's look at scaffold eth so let's go up Local Host 3000 and check take a look at it um it needs to compile the first time so the first time is a little slow but you can see here that it's compiling the rout um and then it'll pop up for you um so when you first come into scaffold e you get this kind of like Hello World page as well that says okay hey you're connected this is your address that's connected um we'll get to that in a second but scaffold e comes with a burner wallet automatically out of the box too which is really cool but the secret sauce is actually here in this debug contracts tab so the debug contracts tab what it does is it um every time that you deploy your contract the ABI gets generated and it automatically pulls in the Abi and it automatically builds this UI out for you so that you can start toying with your contract in your front end without having to write any front-end code which is like super powerful because you know you don't want to have to go in there and have to write everything just to test a function right uh when you do a deploy it generates the ABI and then it automatically um builds a typescript file with the deployed contract in there so with everything you need yeah uh so we see here we got everything that's in our contract which is B basically like a a right function to set a greeting so we have this greeting that's called building Unstoppable apps and then we have this function that all us to update it so I could say like uh Singapore like this oh if I can type uh and I could hit send it's going to tell me I don't have enough to pay for gas so you'll notice that we have this burner wallet so I can actually just grab some funds from the faucet right here and then I can hit send and then I can propose you know that basically write that write that transaction and I've updated the state so it's just a really easy way just to test your contract it gives you a receipt and all that good stuff so you can see what happened there's also a block Explorer so you can actually go back in time and see like okay well what happened well here's where we did the contract creation here's where we did a a faucet request and then here's where we set the greeting and we could click on it and we could see like any of the details about it in there so that's really useful um but yeah so the debug contracts is really powerful and then again this this burner wallet we don't need to worry about connecting metamask or anything we can just get started right away and start toying around so uh let's let's do that so let's load up the code real quick uh so I'm going to use vs code and let's just kind of like try to build an app real quick so we have 25 minutes uh we're going to try to build something and we're going to I'm going to show you how the uh Hooks and components work and uh that kind of stuff so let's go here okay so we got the app that's weird I don't know why it's all green like that okay uh that's a little concerning but that's okay we'll get there okay so if we go to hard hat and we go to contracts and we go to your contract so if we'll notice there's a packages folder and there's two packages because is it it is a monor repo right so it has the hard hat which is your chain and then nextjs which is your front end so in the hard hat directory there's a contracts folder and then there's your contract. soul so we can see here that we have uh the smart contract and we have this ability to start making changes to the contract we could come in here and say building cool apps we could save it come over here do a deploy now if we wanted to we can do a deploy and then we can also force a deploy so like let's say you wanted to make sure we get a new instance of the contract you can do D- reset and that will force the contract to get deployed so we'll get a new address and you can see that every time that we do that we get a new ad instance of the uh contract and you can see it refreshes and so now we see building cool apps and we get this new contract right so um you get in this kind of mode where you basically come in make some changes do a deploy come back test your changes uh and that's kind of like the life cycle but let's let's actually build something I also want to show off like you might want to do another contract right so let's grab this uh contract and let's just uh paste it in here let's rename it let's call it uh another contract right and let's just kind of gut it out a little bit let's just get rid of some of the stuff we're just going to go in here and get rid of a lot of the stuff that's in the other contract don't need this okay we'll get rid of this Constructor arguments as well get rid of this we'll get rid of this modifier um we'll change this to message. Sender you know we're just doing some writing a new contract uh so we have message. sender.

call so now we'll change this and we'll call it another contract like this and we'll save that so You' think you could just come in here and deploy but that's not going to work because you actually need to write a deploy script because we're using hard hat um so if you look down below there's a deploy folder so what we can do is take this other deploy script uh copy it and let's go ahead and paste it in there and let's rename it so we're going to do do 01 unor deploy another contract like this and we're basically going to come in here and and replace everything so again there's already a a deploy script for the existing contract uh whereas where we basically come in here and say okay let's use all the named accounts from hard hat to deploy the contract uh here we actually deploy the contract by calling a deploy and we pass in the arguments which is the the deployer address and then this is where we were doing this console log so it's all you just hard hat deploy so my goal is to just take this and now deploy one for the another contract so I've kind of copied that over here and I'm just going to like search for everything that says your contract in here and I'm going to replace it with another contract like this so basically it's going to go through the file and just create another deploy script so now we have uh the initial deploy script for your contract now we have a deploy script for another contract and I can save that and then now deploy and so now we have a second contract that was deployed oh what did I do wrong I think I need to uh check the arguments because I was passing uh an argument is expecting something here we can just get rid of that save it and then do a deploy yeah Deo command it'll take all the scripts from the deploy folder um yeah it goes in order so like like in this case there 0 and then 01 um and so yeah it it's going to deploy whatever and I think we're getting an error because there's this console log let's get rid of that uh CU I was trying to call a function that is not in another contract so now let's try it one more time deployed it should be successful now so there we go so now we have two contracts that we deployed right uh so if we go to scaffold e we'll see that data contract automatically appeared here so we have the existing contract which is here which is that hello world contract with the greeting and then we have this new contract that's kind of empty right so now we can start building in some functionality with this contract uh so let's try to do that real quick um and I'm going fast here just because I want to show you guys everything with scaffold so let's go to another contract let's um let's do a uh I don't know an unsigned integer 256 counter sure total counter and then let's create a function that allows us to increment that counter so we'll do function uh increment um public boom and then we'll do uh total counter Plus+ yeah and then we can do another one to uh decrements so we'll do uh DC public and we'll do total counter minus minus I think that should work now let's try to deploy that so you know we're just kind of creating like a real basic contract uh and so now if we see we have this variable called total counter we should should be able to increment it there we go and we should be able to decrement it there we go if we go all the way down below zero we'll get an error because it's an unsigned integer um so we can't go below zero because it's an unsigned integer um but for the most part we know let's just pretend that this is what we built obviously you should build a way cooler app but I'm just showing off how you can kind of get started um so you've probably you have a smart contract developer and then you have a front-end developer so now your front end developer is going to take over and start building some stuff right so where you want to point your front and developer at is the docs and then you're going to want to point him at the components section which is all the components that come in scaffold eth so there's one for like address for that has ens resolution there's a balance component which gives you the balance of a contract address and it will allow you to toggle back and forth between like the price in US dollars to eth um and then there's also an address input with ens resolution in there so there's a lot of cool stuff we'll show it off here in a second and all those are outlined here and how to implement those we'll do that and then there's also a section for interacting with your smart contracts and this is all of the hooks so let's say that you want to um read from a smart contract or you want to write to your smart contract there's a hook for that so there's a read contract which shows you how to read data and then there's another one that shows you how to write data so let's let's try to go through and do some stuff right now so first of all I want to show the front end code a little bit so we we we've kind of messed around with hard hat and the contracts you know how to deploy a contract probably at this point let's close hard hat for now let's go to nextjs so we use nextjs uh app router so there's this app directory and then inside there there's a main page and then there's all the URLs that are available so debug and block Explorer so we're going to use the main page and the main page that you see with scaffold e is what we see here on this home directory right let's just kind of gut this out and get rid of all the boilerplate code here and save it and we'll see that this kind of like goes away it's going to Blink out there we go so we want to build an app in here let's let's close get rid of all this stuff that is not being used uh we're going to use the address component so we'll leave that there um let's start out by first talking about uh so we use uh Tailwind CSS and Daisy UI so if you go to Daisy ui.com and then you go to compon components you can get a bunch of cool components for your app so if your friend and developer can just come in here and build whatever he wants I'm going to use uh the card because it's just really clean and I'm going to take a card and just grab the jsx for it copy it and let's just paste it into our app so let's save it and then let's see if it loads up so we have this kind of like Nike shoe thing obviously we're not going to sell any Nikes on chain so we're going to get rid of that uh I'm also going to wrap it in like like another div because I want to center it and make it look a little better so I'm going to get rid of this and okay then I got to center it exactly class name oh what is this what is going on okay uh class name equals uh what do we want to do we want to do a flex and uh justify Center I think item Center I can't remember remember you know this is like the worst part of writing daps is dealing with CSS okay cool all right and then we also want some padding so let's do padding six sure there we go get off the top looks a little better cool shoes We're not selling shoes let's talk about uh what we can put here so let's just show the connected address right so if what you'll notice is that we use wagney uh to do uh use account to grab the current connected account and so we have access to that address variable that we create right here with this kind of uh data that we get back so we can save that and you'll see it's really ugly does not look good uh we don't want that in our our dap we want to make some kind of like clean resolution so what we could do instead is use the scaffold e component so there is an address component so we can say address and then address equals and then put that connected address here and close it off and then you'll see it automatically imported the address component from scaffold e for me um and so if we go back there we get this kind of nice pretty um address component where we have like little copy button which is really useful and the little blocky dude which is like a little Avatar um cool we're running very low on time uh five minutes Oh I thought I had 30 minutes okay so let's just pretend that we have this app that is kind of working um we want to actually push it out and deploy it obviously you're going to front end developer is going to do a lot more stuff so he's going to come in here and say uh okay how to read to the contract and how to write to the contract I wish I had time to get to that but I don't I only have 5 minutes so let me take that and let's say we want to ship this to a test net first we need to generate a deployer account because we don't want to use the hard hat accounts because they're shared private keys and when you move into a testnet or a public account you don't want to use a a shared private key so we're going to do yarn run generate this is going to generate a private and public key pair and then store it locally in the EnV file uh and this will be an account that we can fund then you can run your an account to fund that account so if you run your an account it's going to give you the QR code for it uh and then you can fund it so I am going to fund this thing with some funds real quick so I have some on my punk wallet so I'm going to come on here and fund this so there's a scan option on Punk wallet where I can like scan with my wallet uh with the camera so I'm going to grab that and then I'm going to send some sapoia eth to that address let's see I'll spend I'll send 0.25 sure why not send okay so I just sens some suppot from my phone to here we should be able to yarn account and it will get me all the balances so try one more time I think it went through there we go okay so I have simpo e so now if let's say I want to take this smart contract and deploy it to seoa I can either do yarn deploy D- Network sapoia or I can update the hard hot config I'm just going to do this way because of time uh so this is going to oh I do have more time okay I thought I had more time I just wasn't 100% sure okay cool so I have until 4 3 357 okay cool but is you can see I deployed the app um to the test net and obviously it's got to deployed two contracts right so it's going through and proposing those transactions and then they were successfully deployed um I guess what I'll do is I'll show off next in the front end where we actually need to update scaffold e to point at that same network so if we go here to the scaffold config.txt obviously is hard hat because we're doing like local stuff so if we come over here to scaffold eth it says hard hat we can change this to sapoia so let's do sapoia and we might need to refresh there we go okay so you'll notice you get kicked out of the burner wallet right because you don't really want to use a burner wallet for um uh a public network uh you technically can turn it back on right here so you could say like false and you could enable it if you wanted to and it will throw back in there um but obviously we don't recommend that so let's just go ahead and do it true and then um we can just here we can connect our wallet so we can connect to metamask next confirm switch Network so I was on optimism but now I just switched to Suppa and then now I have this ability to interact with the D um so let's uh what else can we show off um yeah let's see here let's so let's let's say we wanted to um right let let's try to write to the contract actually so what we'll do is we'll actually add a set greeting function here so let's go to the scaffold e config let's go to use scaffold right contract and you'll see this use scaffold right contract has this ability to write to the contract so what we'll do is we'll take this button that we have which is here that says buy now uh let's just get rid of this and then let's just say uh set greeting well we'll we'll update it in anyways but let's let's just grab the code for it so let's do write contract we're going to write to your contract uh so we're going to do that and we need to import this so if you click here and click quick fix it will give you the option import it there we go and then we will grab this button and we will just replace this button actually with that uh and save that we won't send any ether in the transaction so we'll get rid of that but we'll set the value to I don't know what should we do like yo what's up okay so set greeting so we're going to call set greeting just with this single button and we're going to say set greeting to yo what's up I don't know all right so now let's go back to scaffold e and let's go to the home directory so now we have this button right here oh let's also like read from the contract Let's uh let's show the greeting is so let's go to scaffold e let's go read contract uh let's grab this one and let's go ahead and paste that here uh we want to do you scaffold read contract your contract and greeting yeah I think we don't need to pass any arguments there uh yeah sure let's just get rid of that we need to import this okay import cool so now we have both of these read and write so now we should be able to get access to this we don't want to call it total counter we'll call it current greeting and let's display it right below the address current greeting all right there it is building cool apps now I should be able to hit this button it's going to ask me to propose a transaction I need to sign it pay some gas confirm da da da da da so obviously we're on a stoia so it's a little slower than the local network uh but we should be able to once this is successful refresh and then we'll get the proper um function oh another thing too is if you want to verify your contract you can just do yarn verify D- Network sapoia and we can verify the contract there it is yo what's up so it was successful uh so we were able to build like a real basic DAP in this 25 minutes or whatever that we've been going um so I may have time for I have like five minutes for questions so what questions do you guys have yeah what about uh PES like a year goes byes are I use this I think you guys fix it like working set of packages yeah yeah I mean we maintain scaffold these so if packages change or move or you know um you know VM needs to be updated or wagy or whatever yeah we maintain it yeah uh there is a uh just so you guys know there's an extension system for scaffolding so if you go to the docs uh and you go to extensions we have a whole bunch of extensions there's one for the graph um that's really useful so if you're going to go for the graph Bounty you can do uh- e and then put in the GitHub URL of the extension or in this case subgraph um and so you could write an extension that uses the base of scaffold e and then you just build on top of it with an extension there's a whole section on how to create your own extension here so that would be the way to probably go if you're just trying to do like features with using scaffold e then you do that good question what other questions do you guys have no more questions gotta be one more question for no I saw something cool all right thank you guys so much good luck hacking guys [Music]