Beginner Workshop, Building a dapp Quickly with Scaffold ETH I Kevin Jones

[Music] All right, awesome. Thank you so much everybody for coming. I really appreciate it. It's good to see some familiar faces and some new ones. Uh my name is Kevin Jones.

I am a developer relations engineer working for the graph, but I am also a core member of the build guild. uh working or biddg depending on how you want to say it working on scaffold eth and supporting uh the ethereum ecosystem. Uh today we're going to be talking about scaffold eth how you can kind of use it as a really good starting point to build your application. Um but I want to talk just briefly about the build guild. Uh the build guild is a Wyoming DAO that really is just aimed to help uh get developers onboarded into Ethereum in an easy way.

And so there's a number of uh ways that we do that. We have uh different challenges that uh Philip here is going to be speaking about a little bit later on speedrun Ethereum. We also have some batch programs where we bring in a bunch of developers that are eager to build uh interesting uh tools that have a product market fit. Um and we also have a grants program. So if anyone wants to get more information, you can go to biddlegill.

com. Uh but the the flagship thing for the build guild is is scaffold ETH. And so that's what we're going to be focusing on today. Uh scaffold ETH. can go to scaffold eth.

io and you can get everything you need just on this one landing page. Uh there is it is a GitHub project but there also is a create ETH ex uh uh application that you can use that will help you install everything using a kind of a choose your own adventure style and that's what we're going to use. Um if you do the at latest flag you'll just always get the newest version and uh this also has the the link to the docs which is very useful. We're going to be using that in our in our demo today. Uh and then there's also a subgraph uh extension.

So if you want to build on the graph, you can use the subgraph extension or if you want to build an ERC20 token, do you want to use ponder? Uh there's a whole list of extensions that are available here as well. So really really cool way to use the existing uh build of scaffold eth but then extend it to have some other functionality. Uh you can also build your own extensions uh which are really awesome and there's really good documentation on how to do that in the docs, but we're just going to we're going to go right into build mode. This is really a workshop with uh a demo kind of vibe, right?

We're not going to do any slides. Uh and to do this, we're going to run npx create ETH at latest, right? Uh this is going to pull down the the latest version of that. So it's going to ask you if you want to install that. You say yes, and then you just name the project, right?

So we'll call this uh uh cons. And it's going to ask you what framework you want to use, right? So we support hard hat or foundry or no chain at all. So if you just want to build a front end that has access to RPC providers and stuff like that, you could. Um or if you yeah, if you wanted to just build some kind of application with no chain at all, you could.

I'm going to use hard hat. It's really up to you. Um it's a preference. Doesn't really matter. Um, hard hat is just been around a little longer and I just like to use that one.

So, this is going to basically bootstrap a project for you and it's going to install all of the dependencies using uh yarn. So, it is a yarn repository. It's a mono repo which means that it has the the chain and then it also has the front end. So, two different uh folders and then it's going to go and format all the files for you um in using uh a prettier basically a formatter. Uh then it's going to create an empty git repository for you so that you can just check this into git and get get up and running.

And so we'll do that. We'll let that run just for a second and we'll go into the cons directory on each of these. Uh and then while we're waiting, let's go ahead and load it up in cursor. So I I like to use cursor. uh if if you haven't vibe coded anything uh yet, I highly recommend that you get cursor or some other uh AI enabled uh IDE because there's really a lot of power uh in using in using AI to build applications especially in web 3 uh and especially with a starter kit.

Um the cool thing about scaffold ETH uh is scaffold eth is all fully typescript. So in that sense uh the AI is really good at like understanding uh the structure of of the application. Uh, and there's also a cursor file that's already created for scaffold ETH that will always run. So, if you uh have maybe been around for a while, you may have heard there was a previous version of scaffold ETH. And so, a lot of the large language models still have the old uh versions of like the hooks and components and stuff.

And so, sometimes it can get a little confused. And so, this scaffold ETH MDC file will always run if you're using cursor and basically make sure that it's going to the right place and using the right hooks and components. Um, I'm going to close the AI chat for now. We'll probably use that a little later. And I'm going to close this.

And let's just take a look at the directory structure. So, if we come here, there's a packages folder and there's a hard hat and a nex.js folder. Okay. So, your chain uh if you've chose Foundry would be Foundry, but we're in hard hat.

And then there's a contracts folder. So, it comes with a starting contract. It's like a very very basic contract. It's called it's a greeter contract that basically says like hey here's a greeting if you want to change it you can call that uh that function to set the greeting. Uh and then you can also pay some value if you want to and if you do pay some value we change a boolean from false to true.

Uh and then we also do some counters and stuff like that. And it also has um this modifier ownership modifier which basically is like a a light version of something like opens up on uh uh ownable um and it has a constructor. If you're not familiar with a constructor, a constructor is basically gets deployed at the time that you actually deploy your smart contract. Um and so anything you want to define for your smart contract, you would put in there. And then there's like an event and some other variables defined.

Uh but all you need to do is now that we have uh the pro project scaffolded, we can go into the cons folder and we can do yarn chain. Okay, so yarn chain spins up uh hard hater foundry whatever whichever one you're using and then in the next folder we're going to do or the next window we're going to do yarn start. So you need a few windows open because you need to run your chain and you need to run your front end and then you need a third window to basically do your deploys. So you can just open different terminals to do this. So in this case I have three terminals up and now my front end is up and running on port 3000 and then all I need to do is just do yarn deploy uh like this and it's going to take that contract that comes with scaffold eth and it's going to go ahead and deploy it to hard hat or foundry.

Um running a little slow but there it goes. We get some like console output that comes from console log and we get some stuff that comes from hard hat here that says that it was successfully deployed. we get a uh the address of the contract, the transaction hash, and then we can see that console log came from hard hat as well. And so it's working, at least it looks like it. So now we can kind of load up scaffold on port 3000, right?

It's a react application uh running on Nex.js and we are using like I said before like fully Typescript. So, we'll get into the types that you can kind of uh use. And what's really cool about scaffold ETH is we have this concept in Ethereum with uh uh of of what's called an AI, right? And it's a it's basically short for application binary interface.

And it's really just like tells your front end how to interact with your smart contract, right? Uh and so what Scaffold does is it has a script that runs that generates all the types for everything in your contract. So what you can do is you can come here to this debug contracts tab and it automatically knows exactly what functions and variables are defined in your smart contract. So it lets you start prototyping really quickly without having to build a UI right for your application. So we automatically know that we have a greeting variable and we have an ability to set the greeting and you can pass it in here as a string and we have the ability to also pay some way which is like the lowest denomination of ether and we can update it.

So, we could say uh ETH global con like this and hit send. It's going to tell me, well, I don't have enough money to pay for gas, right? We need to pay for our our transaction to be on the blockchain. And so, what else is cool about Scaffold ETH is it comes with a burner wallet. So, this burner wallet is inside the browser session.

You don't need to connect to MetaMask or any other wallet. And you can just hit this button to get some funds from the faucet. Now, we have one ETH coming from hard hat, right? and we can hit send and we update the state right of that greeting variable. So really easily we just deployed a contract we have a UI we can start tinkering around and make sure that you know it's working properly we get a little receipt right here which shows us you know the response from the JSON RPC basically uh and we could also send some some value in the contract as well like let's say we wanted to send uh I don't know 0.

05 05 ETH, right? You think you would be able to just go ahead and hit send, but you cannot because the issue here is that we're we can't do floating decimal point um uh in Ethereum. So, we actually need to convert that from ETH to way. And you'll see there's this cool little button here that will do the math for you, right? So, it will multiply your amount that you're typing in with ETH to 10^ the 18th power and give you that value in way so that you can just hit send and there you go.

So now we paid some value. The boolean changed to true. We have two chimes that we've changed it. And we could also grab our address here. And we could see that I've changed it twice using this mapping that we have.

So everything's working, right? We have this basic smart contract. Um, but we probably let's just do like some quick changes to the smart contract just to kind of show off kind of how you would do that. Uh, let's do uh like a new address. Um, we'll call it public and we'll call it the boss or something like that.

Uh, address public boss. Save. I think that's right. And then we're going to have a function that lets us change the boss. So, right down here, we'll add a new function.

Function set boss. Right. AI is helping me right now. We don't make we'll make it not is owner. We'll just make it public like anybody could set who the boss is.

And so what we have here is a new variable called boss. And we have a new uh function called set boss, right? And this will basically take in an address and it's public. So anyone could send it and they could set who the boss is, right? So we're just creating a new basic new function.

Now we can come over here and redeploy our changes. So we'll get a whole new copy of the contract because the contract has changed. Uh it was going to detect that and give us a new contract address right here. If you ever want to force a new contract, you can do yarn deploy-reset and that will make sure you get a new contract. So hard hat, if it doesn't detect that there's a change in the contract, it won't give you a new u artifact.

And so d-reset will force that. And so now we get a third contract and we can come back over here to scaffold eth and you'll see we get the new stuff, right? We get a boss variable. I can set the boss to vitalic and I can hit send. And now Vitalic is the boss.

Right? So very simple kind of uh flow. And that really the idea is like you're probably going to create a pretty cool contract, probably a lot better than what I did in just like 10 minutes. Um but I want to show you guys the full flow of how you now now would like use this to build a a fully functional app, right? So uh first of all, this is a Nex.

js application, right? And so in this root page here, we have a uh we have the Nex.js folder right here. And we use app router. So we're using the Nex.

js 14, I believe. And what's cool about uh the app router is you just have this app folder and you have your layout. So you have your like main page and then you have each different URL that's the URI. So slashblock explorerdebug. And so what we can do is we can take this page and we can kind of just gut it and and I'm going to take out everything inside of this fragment.

Basically everything that we see here, we're just going to kind of take out, right? So let's do that. Let's kind of wipe this out real quick and just save it. And you'll see everything goes blank, right? What that gives you is it gives you the ability to keep the header and the footer because those are useful things, right?

You want that little faucet to test. You want the the burner wallet probably on a test net. You want to be able to have this kind of like cool paths that you can add. You probably want to go have an you have an additional faucet here. Like if you want way more ETH like than than this, you could copy the address and come here and you could say like I want 20 ETH.

Sure. There it goes. Now I got 20 20 ETH in my wallet. Um and so this is just stuff good to keep. We have the night and dark mode, right?

And then from here we can start building out our app. So what do we want to do? Well, we want to find out who the boss is and display it. Now, if you're uh used scaffold, if you haven't used scaffold in the past, we use uh Daisy UI. So, we have Daisy UI built in and we also use Tailwind CSS.

So, what I always like to do is just go to Daisy UI and five minutes. Really? I thought it was a 30 minute. Okay, got you. Okay.

Um so, you go to Daisy, go to uh cards. Let's see. I want to grab a card. So, we'll take this card and what's cool is you can just copy the the JSX here like this. And you can just drop it in.

So, we'll drop it right here. And there we go. We save it. And when we come over here and we look at scaffold ETH, it'll reload. Kind of not in the best spot.

We probably need to add some like CSS to it. So, I'm not much of a CSS person. I usually use AI to do it, but let's just try. Let's do class name. Yeah, sure.

I love AI. It just helps me so much. There we go. Okay. So, it put it in the middle for me.

Um, you're going to use AI a lot, so I'm not going to explain what I just did. But, uh, here we can take away some of this stuff. Let's get rid of this paragraph and the we'll keep the title. We'll call it like, uh, who the boss. And we'll get rid of this image because we don't really need the Nike image, right?

Uh, there we go. What did I get? There we go. Like that. So, now we we have this buy now button.

We're probably going to change this to like set boss or something like that. So, I'll keep that. But let's talk about how we enable this to be a cool thing. Right. So, what we want to do is go to the docs and we want to look at two things.

One is that we have all these pre-built components. So, like things like the address that you see that has ENS resolution and the copy button, which is really useful. We have the balance thing that let you switch between like ETH. We have an input for addresses. So, you can type in an ENS and it will resolve it.

Uh, we also have the Ether input which lets you put in like US dollars or ETH and like flip-flop it. Um, and then we just have like a standard basic input. And so, we're going to use this stuff in a sec, but the next part is the hooks. Here are the hooks. The hooks allow you to read and write to the contract.

So, if you want to read data from a smart contract, you have this hook. And this hook is really useful. So, we'll grab it. Let's grab the hook and let's put it up here. So, we're going to grab uh not the counter, but we're going to say current boss.

And you'll see that we get an error that it's not added. Um, and so we can say quick fix and import it. And then it'll appear right here. And then we can pass in what it is. So, we want to get the boss.

And we also don't need to pass any arguments, but if you needed to, you could. And there we go. So, now we have this data coming back from the blockchain called current boss. Now we can say, all right, let's go ahead and put it let's put it inside its own div. Oh, there we go.

Current boss. Perfect. So, here we go. Current boss. That's really ugly.

So, let's make that look better. So, how can we do that? Well, we have an address component for that. So, we go to address here and then we can uh install the address component and just do it like this. So, we have this like component.

So, I can just type that in like this. I can say um address. There we go. Did it for me. Whoa.

Okay. Yeah, there we go. Address. Add address equals current boss. Now we come over here and there we go.

Scaffold Eth is already starting to look a little better, right? We have Vitalic. He's the boss. We also have this button to set the boss, but we don't have any way to set it. So, we can find find out how to do that.

So, we come over here. Now, we want to write to the contract, right? So, we go to use scaffold write contract. We can uh easily just come in here and just grab this example and I'll walk you guys through it. There's a little copy button actually right there.

And in order to do this now, we're going to write to the contract. So what does this do? Well, we use the use scaffold write contract. So we're missing that. So we need to install that.

You can do update import like that. And we're calling your contract, which is the name of the contract, right, that we deployed. Um, and then we have a special button here that shows us how to set something. So, I'm going to grab that and I'm going to replace this button with that button. Okay.

Now, what do we got here? We This is an asynchronous function that it's called write your contract async, right? You can rename this to whatever you want. You're probably going to have more than one, but we'll just keep it the same because we're only going to use one in our app. But you could rewrite this to whatever you want.

We're going to call not set greeting but set boss, right? And we don't need to pass any uh or we do need to pass arguments. We need to figure out how we get the who the boss is, right? So, we'll fix that in a second. And we don't want to send any value.

So, we'll get rid of that. But if you needed to, you could do that, right? So, maybe we Yeah, this is recommending that maybe we just the connected address can be set as the boss for simplicity and time. I'm going to do that. So, here we go.

So, what this button will do is it will let me set the boss of whoever's wallet is connected. So, everyone could just join this app, click the button, and they become the boss. So, kind of like, you know, who's on the the hill or what's the what's the game you play as a kid? Um, okay. So, now we can double check it and see.

There we go. So, now I'm connected to this address. I can hit set boss and might have to wait a second. There it goes. So with that little button, I wrote to the blockchain with my address that was connected.

Uh you probably would want to have like state and you would have a input button to put another boss. And if you want to do that, you can just use uh this input base right here to do that. And it shows you how to do that. It gives you an example of how you use state. So when you're uh if you're not a front-end developer, whenever you want to have like something typed in the app, you need to store it in a memory.

And so this is where we would use state, right? So, we would have like a little state um and we would put that into state and then use that input to keep track of every time someone typed in something and add it. Uh actually, you'd want to use address input. Sorry, you'd want to use this one, uh which is like right here. So, this is a full-blown example of how we could do that.

Um, for the sake of time, I'm not going to do that, but you have all the docs here. It's very easy to follow. What I want to show you real quickly is how quickly we could ship this app out, right? So, it's it's on our laptop. Now, we need to push it to a chain, right?

So, we don't want to use the smart um the private keys that come with scaffold ETH. We actually want to do a yarn generate. And what that will do is it will generate a private key and store it on your local machine in an encrypted format. So, here you would want to type a password, right? It's a demo, so I'm not going to do it, but you should type a password uh and then confirm the password.

And it's going to generate a public key, public address for you and a private key and store it in your env file. So all we need to do now is if we want to deploy this to base, we need to just go yarn account like this and sorry yarn account. We're going to get the address here. Uh just hit enter or your password. There we go.

So now we're going to load this up. You get this little QR code. So, what I can do now is I can grab um my wallet here and I will scan right here and I will send this I don't know like a dollar or something like that. Um on base I will send $1. Do I trust this?

Yes, I trust you. Okay, so now I just sent a dollar to this account. Right now the fun the my deployer is funded. All I need to do is yarn deploy network base. It's going to take my smart contract.

Not going to use hard hat anymore. Well, it's going to use hard hat, but it's going to deploy it to public network. And that'll take it just a split second because it's got to actually like send the transaction. Hopefully, the funds went through. There it goes.

Now it's done. So, it's deployed. So, we have the address. So if I go to base scan now, we go to base scan and we type in that address right here. We have our app.

Okay, so we have our app, our smart contract deployed, but it's not verified. All we need to do is yarn verify-n network base and it's going to verify my smart contract. That easy. Next thing we There it goes. It's going to verify it.

Just waiting for the results and it will be successful. And while that's doing that, I want to show one other thing real quick is we want our front end now to point at base. So what we need to do is go in here. We're still pointing at hard hat. So inside of Nex.

js, there's a scaffold config which is right here. and it has the chains whatever. So all we need to do is change this to chains.base. You could use bass sapoleia bowi.

Any chain that's supported on VM is going to show up here. Save it. And then what'll happen is here in our app, we'll actually get kicked out of our burner wallet because we're on a mainet. We don't want to use a burner wallet on mainet and we'll need to actually connect our wallet here. So we connect to MetaMask.

Boom. And we have the current boss has not been set. But now I'm gonna set Grixle as the boss if I have ETH in there, which I think I do. There we go. So I deployed this app, the smart contract.

I'm the boss of the app. We built a basic UI. The last step would be that you'd push it to Verscell or some kind of thing. And so to do that, all you need to do is do yarn Verscell colon yolo-pro. And what that will do is it will uh log you into Verscell.

You'll have to put in your username and password or like basically authenticate against Verscell. You choose a project directory. You can choose where you want to deploy it. Do you want to do I want to use this one? No.

I'll use a new one. Uh no. And I'll name it uh Huda Boss. And oh, it already exists. See, I did this demo too many times.

All right. Huda Boss. There we go. Do I want to modify? No.

And there it goes. Now it's deploying my app to Verscell. So in the 20 minutes that I've been here, we built a very basic smart contract with Scaffold ETH. We built a basic front end, deployed it, verified it, and now deployed a front-end app. And so then I would just need to come in here to Verscell and then update that um uh to be public because Versell by default it will be private and so you just need to go into Verscell and say, "Hey, turn off deployment protection and it will be a public app."

And then you can submit for the hackathon. Um, so I hope that that was a really fast run through. I know that was a lot. Uh, but the good thing is we have really good docs on scaffold docs and I will be here pretty much all night. So, uh, let me know if you need help and I will definitely take some questions right now.

We have like four minutes for questions, right? Four minutes. Awesome. just

here.

Sorry, I missed it. Uh, so you you connect your wallet right there.

Yeah. So, this is we're just using like wallet connect uh or sorry, rainbow

rainbow kit.

So, you can connect to any wallet. It it's going to be mobile friendly out of the box and you can just do MetaMask. things.

Yeah. And you just connect like that. Oh, she has a question

regarding MetaMask. Um, like do you have do you need to register, you know, like your test uh test MetaMask wallet? Like make sure it's separate from not the one that you're actually

That's a great question. I like that. Um, yeah. So, the the question would basically like should you use like a separate wallet uh for development? Yeah, I would say, but I mean it's really up to you.

Don't keep a lot of funds in your browser wallet in general. um because that's just not not too smart. Um and just try to yeah use a wallet that you don't really care that could be you know even though MetaMask is very safe and secure you know you never know but yeah I would I would do a separate wallet.

Yeah. Yeah. And then how do you have to have a test tokens on it too?

Good question. So how do you get test net tokens? So you can come find me and I'll give you some uh like base Solia is a good one because it's pretty cheap. Uh, Seapoleia, there's lots of Sapoleia and then you can bridge it to like base Sapoleia. Um, there's faucets, so you can just find like a faucet.

So, uh, you can just do like Sapoleia faucet. There's like a proofof work one that works really well. There's Google Cloud one, there's Alchemy. Uh, this one is really good because it gives you like I forget how much it gives you, but it gives you a lot. You just have to let your browser sit there and it will drop some Sapoleia funds for you.

And then if you need to bridge it, you can just use a bridge to bridge to whatever chain you want to get on. If you're going for another, you know, chain that's not, you know, you might want to ask the the partner where to get that. [Music]