The Hackathon stack and how to Speedrun Ethereum I Kevin Jones and Philip Krause

Hey everyone and sorry for our little delay but now now everything is working. So Kevin and I, we are here from the build guild and um we were here kind of to show you a very nice um prototyping tool, Scaffold Eve and also the education around it and how you getting ready in and in order to build some Oh, remind me later. Sorry. In order in order to get some educations um some some applications and that's kind of the build. Oh, I need to can I put the microphone a little bit?

Does it work like this? Yeah.

Or do I need to go like that? I don't know. Okay, perfect. Is it good? Like this?

Okay, perfect. I was a little bit confused.

Yeah, that's kind like like like you see from the guild where we have we have the ed educational perspective and the and anti-tooling perspective. So I keep myself a little bit shorter so we have more time than going more into the tooling and that you can use the tool for also for for the hackathon. What is very cool what what I always always use when when I be here and build some things. It's definitely pretty nice. Yeah.

what what is kind of our our background. I think the the whole thing and that was also for me um very very important in the beginning. Then in the beginning you you starting to build and you have all this theory in front of you and you're looking through okay this is a contract but how does it really work? How it will get deployed? How how the heck will I have even an app out of that?

It's just very overwhelming in the beginning and you really don't know what to do. And then then and then there's also the other thing you're going to see okay there is DeFi and there are so many stuff out there you don't have really a clear path which way you should head in which direction and then you're looking at all these concepts out there and they're kind of all isolated so you don't really know how to bring them together and that was kind of Austin who came up he said okay we definitely need to make builders more ready to bring all the concept into applications so we kind of foster the application layer of Ethereum because we just have not enough applications I mean we have so much block space. We have so much nice protocols, layer 2 all there, but there just no app no applications for that and that's why we kind of came up with a curriculum. So we have in the beginning so all the way we having speedrun Ethereum I don't know if you have heard about it but it's pretty cool with kind of the challenge I will go into it and just flip it a little bit through what you're going to learn and out of that um when when when you're doing this you have the chance to join the batch program that's kind of a program hosted created by me and then and another guy where you're teaching people everything around how do you work in the web free space because besides just building your on your own it's also very important to know how to interact with people um out there and how you building together to build some stuff and one very important skill is definitely GitHub. How do you make the right PRs?

How do you write issues? How do you not just work randomly stuff? And so we we kind of pretty rigorous with the reviews and we just make sure that you're kind of getting the kind of the skills out of it in order to build them collabor collaboratively with other people. And and when you're doing this there there's also then we we we encourage you to have some more builds. you can you build you start build your own project um you have a call with me where we kind of um just going through your concept and you're starting to build and then the end you're going to pitch in front of Austin and the crew and then if it goes further we have CR where you could apply then for for for for other applications so you want to keep continue building and also we now have kind of a a launchpad group so we kind of grouping the most motivated builders together in a group and every month we having a call together where we discuss okay what have you done this month what did you build and where do you want to go?

Do you want to be a founder? Do you want to become an employee somewhere? And then we just try to kind of coach and mentor you in the in the in the right direction and yeah and and before you kind of start it's kind of really cool to do the speedrun. So everybody who comes to me and say I I want to start building on Ethereum I always tell just do the speedrun. And that's exactly what I did as well.

And as you can see we have kind of challenges from very the beginning to up to very complicated challenges. and um you can just jump in immediately. So the first challenge you don't really need to do much. You're just going through and on the way you're building it. You're just getting better.

And the real real cool thing about our curriculum, I mean there there are many out there, many where you learn solidity and so on. What is definitely very special about what we have to offer is that with every challenge you solve, you're having a real application out there. So you deploy it on Versel, it's out there and you can then even use this as kind of a prototype or the first template and you just can tinker around. you can add stuff because you have already things deployed in the cell on the main on the live network and that's actually pretty cool and that's what I really really enjoy about this the the the speedrun myself and just going a little bit through the different different different um challenges we have and what you're going to learn just don't don't take so much time we having kind of in the beginning you're starting off you're learning everything about NFTTS I mean it sounds a little bit boring and everybody thinks okay what what what the hell with these price these JPEGs nobody need they're out But actually it's kind of a very important base for the whole space kind of because you can use it in so many other ways also in DeFi a lot and so on. Then also and then then the next challenge then our staking app is really about how you kind of using a smart contract and how you interact with different smart contracts and you send in funds around.

That's pretty cool there. You're realizing the first how all these legalo and all this works together and all these construction um the these applications on chain. Then it goes a little bit further and it gets a little bit more difficult is kind of the token vendor where you then kind of learn in the base before you then jumping into the the DEX challenge that comes then later where you kind of swap in and out um tokens and you have also looking into um randomness onchain because there is just literally or there used to be no real randomness onchain. I mean there's still no real onchain and that that's come the first time that that you're in contact with oracles more or less. Yeah, I don't know how deep deep I should go.

I have kind of I wanted to go a little bit in the concepts to explore it to you. I don't know if this is helpful or not. I mean since we are a very small audience just let me know. Should I talk a little bit deeper what kind of an AMM is how that works or should we just skip that and I just kind of round everything up and maybe and and show you some other things how speedrun Ethereum look like and then we would head to Kevin. I don't know.

It's about you. I mean, we have we have a very small audience. Just hands up. Who wants to go a little bit more into the the concepts? One, two, and the other.

Three, four.

Okay. I mean,

yeah. I just I Yeah, I just don't want to bore you, you know. That's why we And the cool thing now is so not really much people. So just ask ask questions and I can go a little bit deeper into the concepts because I mean what I wanted here to show you a little bit is this automated market maker. I mean this is AMM and this is like unis swap v2 kind of works and that's I would say that's kind of really the the basic concept kind of.

I mean of course you have you have these ESC20 token standards and tokens but really when you're starting then doing something useful on chain such an automated market maker is very very very important and it's just actually a very simple concept and I and and I and I really like I mean you can just think of there is kind of a pool and I put there the apple and the purse inside and that's exactly only what it is that's kind of the the the the unis swap pools liquidity pools and now imagine you want to get a a purr out of it. You put an apple in and you're taking a purr out. And what that does when you see the graph on the one side, it gonna moves kind of up up the up the um up the um x-axis kind of. Is this the x axis? Now I'm confused.

Abs y axis down up the y- axis. Sorry for that. Yeah. Yeah. and and what it means when you're taking out a pair and putting an apple in because pair is getting less and apples getting more that leads that the per prices go up.

And now maybe people thinking, okay, now now now it's a good price actually the per pair a p um a lot worth more than apples. Let's put me a um a pur in and take an apple out because it's a kind of a good deal and I can't get otherware a more expensive apple and kind of do kind of arbitrage thing. That's kind of an AMM and that's actually pretty cool and pretty simple and that's what we teach you in the challenge four. I mean that's that's pretty amazing when you when you're there already because it's kind of really the base of other it's a it's a very important building block and when we then continue further it's kind of we doing overcolaterized lending over lending maybe everyone of you know you heard about it that's kind of a works and we kind of teach you how you can build a lending protocol where where users can deposit assets and also borrowing against these asset and earn in interest rates on that and that sounds in the beginning very easy but actually what is behind it and all the mechanics and what you think about it about who can attack your your contract and so gets very difficult. Yeah, I mean we're looking in that in a lot of lending and debt tokens.

You need to do interest calculation, interest rate strategy, price oracles, collateral ratio logic and liquidation engine. I mean that sounds now very complicated but kind of these things you need all to bring together and then you have your app and the cool thing is when you're going through the challenges we we teach you that exactly

yes we touch it. Oh yeah, so sorry. And the the question is if we also going more into the theoretical part of it like the math and explaining that a little bit. I mean I would say that's not a not a scientific paper you will get from us but we're going to try to break it down so that you understand it. So for instance when it gets a little bit more complicated about oh yeah about CK we we we I mean we we'll show it later but yeah it's kind of broken down.

Yeah. And then um coming from the overcrediterized lending I mean this is kind of the base in order then to to to to have stable coins and we are we also have a have a have a stable coin challenge for that because you can imagine you having people you're having people putting in collateral and against the collateral you can then mint some tokens and that's in this case is it's a stable coin and this price for the stable coin you will get from oracle and that's kind of overcolateralized stable loan then in the end and that's also a thing that kind of built on top of that and from that we we go in kind of this funnel and we always attaching more things and get make it more complicated and then the next thing we we're touching on and that's actually pretty cool because you have a fully working prediction market then um is is the next challenge and in this prediction market I mean everybody knows maybe a prediction market like like it looks like here on on poly market where you can just bet on the different outcomes and it's I mean it's like a kind of a stock market but for future out outcomes. That's what you do with an end date and you're always trading kind of some some public events of interest. That's what you're kind of doing. And in in these I mean I'm maybe I just going to make it I mean here in this things then you're going to bring more things together.

So we having then the tokens you need tokens you need to trade for the yes and the no outcomes. You have a trading liquidity provision provision mechanism. So you need to make sure okay how can you then trade the tokens? So what are you going to go for? or is it the AMM from unis swap weap or maybe we even build an order book because it's kind of maybe more efficient with market maker.

So they are all things you then can try to think of. So you so you so you're building kind this concept with the different things we're giving you and then you can start to swapping these kind of things out and then and also very important part what is kind of our last challenge are oracles because it sounds very easy in the beginning you see okay it's just the right function on the blockchain so I just take my data and I just write it sending call data to the blockchain and it's there but what is the whole mechanism behind it what are the incentives behind it and all these kind of things that's actually pretty getting pretty complicated in the end when you go more deeper the rabbit hole in these kind of things. Yeah. And then the latest challenge I was just recently working on and that's actually pretty cool and that's definitely very worth taking it when you're at this point is kind of the CK voting. So really having privacy on chain because this is definitely a very important part from my opinion I see and I mean many people other people see and we also have for that now a kind of a a challenge because I mean the main main issue with the the security is that everything is kind of just transparent.

I mean it's good for the trust. You're seeing all the transaction. You can look in every protocol. You know exactly who put which address, which amounts in. But I mean for your privacy, it's not the best because just every as soon as your address gets leaked and imagine you have a salary on chain at some point in time, then your employer knows your address and every you're sending from this address to another address.

You can just see exactly what are you spending, how much money you're making, how much money you saved, which meme coins you're trading, whatever. everything is kind of onchain and you don't want to have that and in that we kind of showing you okay let's take a mixer like tornado cache I mean that's kind of here I just took took the example out of the presentation I just gave recently on the on the on the dev connect about the the CK voting yeah but it's a mixer we kind of built in here kind of a mixer and how a mixer works together with I mean I don't know how much time we have I don't see keep on yeah I mean the the cool thing I mean I can talk about this a lot because this This is really a topic I really like a lot is like a mixer is just you you have a big of group of people they all they're all doing the same thing and you're going to put like in a mixer like tornado cache you're going to use they they're all putting Eve into a into a pool more or less that's gets mixed so nobody really knows which Eve that is anymore and because of the CK like like a CK proof so the the the the prover that's kind of me I I know a secret and I can prove that one Eve in this pool belongs to me without revealing which ETH that is and because I'm taking this ETH then out in the last phase in the withdrawal phase to a different separate address the connection what I mentioned before with the security you know exactly where what goes is kind of broken and that's kind of the base how um CK actually works also when you go to add stack networks and make it more complex yeah

no I mean how it works I would now probably that will take too long to explain is but the thing is um no because you going to you only put onchain a kind of a commitment you have that is kind of consistent that's hashed of a secret and a nullifier you only know and these two variables or the super parity they stay on your computer so you just keep them they stay off chain on your client there are and you can't prove with a proof because you have these two secrets that this commitment belongs to view and therefore you're going to generate offchain. So on your machine the proof and this proof gets then passed into the smart contract and that's you can imagine it's just a if if condition more or less where you're calling the verify function and if this gives a true it lets you go through the contract otherwise it kicks you out and the whole contract rewards and that's actually what we're kind of doing doing in that. No,

that's exactly this is the the the zero knowledge proof thing. So that I'm as a prover can prove to you that I know the secret without revealing what the secret is. So you only know that I know it but you don't know what it is. So if you imagine then I mean I just gave an example. So we going in this challenge also more through Merkel trees because they get very important and that there are special forms of the merkel tree like this incremental merkel tree and what you actually do as soon as you register you do something you're getting a leaf this is all the way to the bottom kind of thing you're adding to the to the merkel tree and what you're going to do prove to the verifier that you know that you are one leaf without revealing what leaf you are so in this sense we have five people registered I can tell you I'm part of this leaf But you don't know who I am.

If this makes sense. Yeah. And and so on. And and and in here in the in the CK voting app, we do the registration with the mercury and and we're going to create CK circuits. We're going to write them nor.

And this is actually pretty cool because um NOR makes it pretty easy to use CK now nowadays. So it's actually there. And when you do this challenge, you will be definitely ready. you understand the the the the main core concepts of CK and how you could build apps around it and that's pretty cool. For for me it was very eye opening.

In the beginning it was like Philillip you should do CK voting challenge and it's like oh CK that sounds complicated. Actually it is when you go very deep but it's very good nowadays abstract way. So I think right now the time is ready to build some cool with CK some privacy focused applications. Yeah. And then we have it's coming soon it's not live yet on um speed on ethereum the or different oracle challenge about different ones optimistic oracles where you can just answer questions for prediction markets more open-ended questions or you have we have oracles where you can just deliver price prices for Ethereum and so so other and so further what what is needed for lending and borrowing protocols for instance and so on.

Yeah maybe can I use your browser for a second? I just want to show quickly how speedrun theorem looks like if you haven't seen it yet.

This is kind this is oh going different way.

No, all good. All good. All good. This is kind of the the the speedrun and you see here all the different challenge kind of tokenization and which I mentioned and when you going here into on the quest then you see how it's structured.

Yeah. But I think it's good to see. I mean I just want to I don't want to go. So we have kind of an introduction then we have different checkpoints like the environment and just going through and you're getting all the commands to to to run these challenges. You just can go through.

Yeah. Where is the presentation now Kevin? Sorry for that. It's not my

Oh, here it is. Yeah. Okay.

Yeah. And the text stack we're using and this is done Kevin you go goes into it further is scaffold leaf. this is kind of this tool and I don't I I will let everything to him but it's pretty cool because it's one monor repo with has the front end and the contracts doesn't matter if it's found or hardware together and you can just very easily prototype and even it works awesome with um LLMs because they just know all the all how the um scaffold e works yeah I mean I think I have have said the m the most most of it already yeah I think that's it for the meantime maybe

hir mic is good.

So with with the the stack you're proposing um

is it um would you say like using next is necessary or like any JavaScript framework?

I mean depends huh what you how it it it just depends what you want to do. I mean of course you can have your own stack if you're if you know what you're doing. You're just starting from scratch. You not even need a framework. you're just using a rack components that would be also the other option.

It's all good. I mean the the advantage is with next and there comes some Wagmei components. They're already very nice. So you have already things that are there and you can use and we build on top of that. So you have already components prepared.

They're very easy to prototype. But of course if you want to build a product from scratch you own and give it your own style. I mean of course then probably you won't go for that stack. Then you define your own stack and what you prefer. Yeah.

Any other questions? I hope I didn't go through too fast to the concept. So if there is any question.

So So how come we use for a zero knowledge proof project?

Yes, you can use it.

Can I use it?

Yes. The only thing what you need to do is because our scaffold leaf when it comes out of the box and you install it, it only has some smart contract like hardhead or um foundry installed and next.js and in order to write nor for instance, but it depends what what zero knowledge proof language you want to use kind of um you need to install that as well. So you have another package then in the in the in the monor repo you're using the scaffold.

Okay. But you can definitely look if you want you can look at the challenge and how how the challenge is set up and will will explain you already a lot if you're interested and if you're interested you can come later to me and I can answer some questions as well there any other questions otherwise I would head over to Mr. scaff uh on the VK vote part in order to uh hide the identity of the voter we are using a burner wallet right

sorry I don't get it

in order to submit the vote we are using a burner wallet

burner wallet

yeah that you mean the last one yes exactly yeah you need a completely fresh address for that because if you would use the same address then the whole thing is for nothing.

Maybe is there a way like to send the vote to a relayer like just like in tornado cash and you don't have to pay the gas fee and

yeah you your wallet.

Yeah. How it's set up in there that you have a verifying pay master.

Mhm.

So you're going to spin up a fresh smart account and then a verifying pay master pays for this transaction.

But the current approaches I have to the different wallet.

Yeah. I mean in um how you you will see it in the application how this applic you I mean you can do it how you want but in the application or in the CK voting challenge how it's done you're having you're going to spin up a new smart account so a fresh account with a completely new private key and this one gets then sponsored from a verifying pay master so you only click vote you don't have to do and in the back end it just generates you a new smart account that gets then sponsored this makes sense I see thank Cool. Thank you so much. Oh, yeah. Let's see.

All righty. Thank you guys. Uh, thank you, Philip. That was great. Uh, yes, Speedrun Ethereum is just a great resource.

Uh, you know, when I first started building on Ethereum, it was my journey myself. So, personally just love some of those challenges and some of the newer ones are really, really good. So thank you. Okay, cool. So um yes, so my name is Kevin Jones.

I work in developer relations for the graph protocol uh at Digimon Node and I'm also in the build guild. I've been build guild for a while now. It was my first journey into Ethereum and again uh Scaffold ETH was a huge part of that. Uh so I'm going to give you guys kind of a run through on Scaffold ETH. Talk a little bit about like all the all the tooling, how it works, how you can get started quickly.

We do have a small group which is great. So I definitely want to make this as interactive as possible for you guys. Um and make sure I answer any questions we have along the way and try to take our time here. U but I I'm curious who here has used scaffile before in any kind of uh shape. Cool.

So this is new crowd. This is great. This is the per you guys are the perfect customers for this uh presentation. So we're going to try to give a full walkthrough of how scaffold works. And for you guys that want to actually do this on your own, you can just go to scaffoldeth.

io. That will bring you to this web page. And there's one command that you need to have right here. And it's the npx create- at latest. And that's going to basically use the create ETH um npx script to spin up an environment for you.

Okay. So, we're going to just dive right into it and go ahead and and and build something. So when you first do this, it's going to ask you to install it, right? So go ahead and say yes. Uh you'll need to have NodeJS installed on your machine and you'll also need to have yarn package manager because um and make sure you have the newest version of yarn package manager because there can be some issues with like older versions.

So if you have Windows or Linux, make sure you update it. Um and then you just need to name your app. So we're going to call this uh Argentina. And it's going to ask us what framework we want to use. So, we support both hard hat and foundry when you install.

Really is up to you. I'm going to use hard hat because I've just been using it forever and uh I just too lazy to to switch over to foundry. Uh hard hat is has a little bit more support I would say in terms of like history on the internet for like finding issues. Uh but Foundry is a little faster. You can also uh write your deploy scripts uh and your tests in solidity which is sometimes nice for if you're really really into solidity and not so much JavaScript or TypeScript.

Uh hard hat uses TypeScript uh or JavaScript for testing and deployments. So this is going to go out. It's going to install all the dependencies for your project. This basically uh is going to install everything that's in the package JSON. So Philip mentioned earlier it is a monor repo.

So, it's actually got two different packages in there. It has the hard hat or foundry folder and then it has the Nex.js folder. So, depending on your internet connection, this might take a little while. Uh, also here at the hackathon, uh, there's probably a lot of people on the network.

So, just because it looks like it's not moving, I'm going to go ahead and I did this ahead of time and I have one called FU. So, I'm just going to go in there. Okay. So, I already did that. Let's just assume that I uh set up the project.

Uh the very first window that you need to do is is bring up uh your chain. Okay. So you can see here I'm going to do yarn chain. That's going to basically spin up either hard hat or foundry depending on which one that you uh installed. And it's going to give you all of the you know accounts that come with it right as a kind of a console output.

And then everything you do in scaffold eth you need a couple windows open. actually a few windows because you need always have your chain up. So, we're going to keep that open so we can see what's going on. And then in this other window, we're going to go into the same exact directory and start up our front end. Okay, so that's yarn start.

Close this. Um, so yarn start is going to spin up the front end port 3000. Very easy. And then that's it. You'll keep those kind of open.

That way you see if you have any errors with your front end or if you have any issues with the chain or console output, stuff like that. Then in this very last window, we're just going to spin up and and deploy our contract. Okay. So to do that, we all we need to do is do yarn deploy. So chain for the back end, start for the front end, and deploy will deploy our contract.

Um that's going to give us some console output here. And it tells you exactly what your contract address is. Also tells you how much gas that it costs to deploy the contract. And then you can see we got some console log output as well up on the top. And so uh that's that's good.

Everything seems to be working. Uh we were able to deploy successfully. So let's load up Scaffold ETH here. Okay. So again, Scaffold ETH is a React application.

So we have it here on port 3000. And we're going to go ahead and just test kind of the the Scaffold ETH environment to make sure everything's working. So it might take a sec for it to compile. You'll know it's done when it has this little daisy UI thing right here. And you should be able to reload and it should start.

For some reason, my computer's running a little slow. So, there we go. Okay. All right. So, here we are.

We're inside scaffold. So, it is a it's a React application. Uh I heard a question earlier was like, oh, do you need Nex.js or do you need React? Um I like Nex.

js because it has a lot of like interesting stuff that makes it easy to build hackathon projects. things like app router, uh things like the ability to do API routes if you want to deploy to versel, like there might be things that are just going to make life a little bit easier for you in Nex.js. Um and so that's kind of why we picked Nex.js.

We also picked Nex.js over React because Nex.js is a little faster uh than React was. And so there's a little bit less um um yeah, I guess overhead when it comes to memory. Uh but here we have scaffold up and running and we can go to this debug contracts tab.

So that's kind of like the secret sauce of scaffold. This debug contracts tab keeps track of everything that is in the contract AI and it reads in all of the data types that are created for the AI and the functions so that we can build a UI automatically. And so that happens here. Like when you saw when we deployed our contract, you may have seen this line right here. What's cool is we actually run this script and we generate types for all of the definitions of the contract.

And so what that allows us to do is have this unique page that automatically lets us start testing our smart contract. We don't even have to know any front-end code at all. And we can kind of assume that we know what the contract does just by looking here. So we have a contract that's called a greeting contract that's called your contract that has a string called greeting and it has an owner address. It has a boolean which is a a true or false and it has a counter which is an unsigned integer.

And then we have this write function here that lets us update that. Right? So we can go ahead and come in here and say uh Argentina this. And if I hit send it's not going to work. And that's because I don't have any gas.

But you'll notice up here we have a little burner wallet and a faucet. So we can just go ahead and grab funds from the faucet. And there we go. And now that we have one ETH in our account right here, we can go ahead and click send. There we go.

And so now it was able to kind of like change that greeting, right? Super awesome. Uh so nothing crazy, but we're able to really like test our smart contract without really doing any front-end code. Let's take a look now at uh and by the way, you can also like reveal the private key here as well. So, if you want to like export that into MetaMask or into some other uh wallet, you can do that.

There's also a QR code, so you can like fund it from your phone. Super useful. Just little things. There's also this like night mode and day mode switcher, which is really cool. But let's let's pretend that we want to write like a very basic hackathon project, right?

So, let's go back over here and load up this whole project in cursor. Okay. So, I'm going to load up cursor and let's come in here, go full screen. There we go. Zoom in a little bit so we can see what's going on.

All right, we're going to go to this uh directory and we're going to look in the packages folder. And again, we see we have two different folders. Okay, we have hard hat, which is because we chose hard hat, and we have next.js. Hard hat's going to have all of the smart contract stuff.

And so inside there, there's a contracts folder. And then inside that contracts folder is our smart contract. So if we were to come in here and look around, we would basically see the exact same stuff that we see here, but in code. Okay. And um what I want to do is just kind of show you how we make some changes.

So I'm going to make a new address that's public called boss like this. And then I'm going to make a new function that lets us change who the boss is. Okay. So I'm going to do function uh set boss uh takes an address um underscore boss and we'll make it public and we'll say uh boss equal boss I think. If that works.

Oh okay. So, we have this like new function that we've created essentially. Um, I think that should be good. I don't think we need to do anything else. Let's try to deploy our change.

I saved it. All we need to do is come over here, redeploy. Make sure I did that right. There it goes. It deploys successfully.

And so now if we come to Scaffold ETH and we refresh, we'll we should get that get that information in our our front end automatically. So now we have the boss, right? And we also have this ability to set the boss. So let's set the boss to atgeth. Boom.

Okay. So it did ENS resolution which is really cool. So there are these components inside scaffold that I'm going to get to in a little bit that will automatically do ENS resolution for us and it will give us the address back. And then we get his little like EFP. So that's Austin's uh address and his uh ENS um EFP.

and we were able to update him to the boss, right? So, we kind of made this very basic uh smart contract that's just kind of like king of the hill type contract that anybody could come in and just set themselves as the boss. We also get like this little receipt which is kind of interesting like it's a it's basically the response from the JSON RPC so that we can see you know what what happened the hash stuff like that. But let's pretend now that like we want to like build out a UI for this, right? How do we do that?

Inside of this home folder right here, all this stuff that we see here is kind of like boilerplate code that is like very very basic hello world code. And if we go now to uh our nextjs folder, we can see we have this app folder here app and inside there there's this page.tsx file. So I mentioned earlier that we use app router uh with Nex.js JS and what that gives you is these like URLbased routes.

So slashblock explorer or slashdebug right but then when you have this main page this is the root of the application. So what I always like to do is just come in here and there's a fragment defined right here and that we make it easy. You can just grab everything that's inside the fragment right here. Everything here and just wipe that out. Save that.

And when you do that, that's going to just get rid of everything in the middle. Okay, this way you still have your header because you want to use that for your hackathon. Probably you need a a wallet connector. So you need the the rainbow kit. You also need the the faucet to test locally probably.

You know, you you probably want to have this cool little banner. You can like change your styling and stuff. And you want to have this night and day mode. So that's cool. All this stuff you see on the bottom.

But we want to just build the app inside of here. Okay. So a couple things. First of all, we use uh Daisy UI. Okay, so Daisy UI.

And one of the things you can do with Daisy UI is you can just go to Daisy UI's website. Hopefully loads. And there's a list of components on there in this components right here. And you can just pick from any of those components and just copy and paste them into Scaffold ETH. So I always like to show off the card because it's pretty useful.

Shout out to Eta. She always does this one, too. Um, she's also in the build guild, really good at at uh demos. But so, if I grab this card and I go to JSX right here, I can just copy everything here. And so, any component you find on this website, you can literally just come in here and paste it here, save it, and it will show up inside of Scaffold ETH in the same kind of styling.

Okay. So, what I want to do is like incorporate all the functionality for my contract inside of here. So, I need a place to figure out who the boss is. I need a place to input a new boss, type it in, and I need a button that says set boss. So, I want to know who the boss is, and then I want to be able to change the boss, right?

So, Scaffold makes it really easy to do that because there are two two sections of of the docs that I would recommend that you check out. So, if you go to scaffoldeth.io io and click docs right here. You'll get um sent to this page and there's a components section and there's a interacting with your smart contract section. You'll kind of spend all your time in there.

Uh the components are really nice because they're just like reusable stuff that's in scaffold that's looks really good especially for like a hackathon. Um, and there are things like address resolution that I showed you, right? Where you can just put any ENS name and it will give you a copy paste button. There's also a balance checker that you can check the balance of an Ethereum address, right? Really useful and it lets you toggle between US dollars.

There's also an address input, right? This is what we saw earlier when you can type in an ENS name and it will resolve it for you. So, all this stuff is really useful. So, but let's say we want to read data from the the contract. How do we do that?

Well, you could use WagMe directly. Uh, but we have a hook that is kind of always guaranteed to stay the same. Uh, so you don't really need to know when Wagme changes some weird stuff on the back end. We take care of all that for you. And we just give you this very simple hook.

Okay? And the hook basically says this is the stuff I want to get. In this case, I want to read from my contract. This is the contract name, which you that was if you have more than one contract, you would have multiple names. and then you call a certain function and then you pass in certain arguments, right?

So let's try to do that for the boss. Okay, so we we know we have this like boss variable. We want to put it inside of here. So what I'm going to do is go to the docs, go to read contract here, and I'm just going to copy all this right now. Okay, and I'm going to paste it right in this application right here.

Okay, we're not getting the counter anymore. So what this is saying is like okay we want to get some data back from the hook and we want to call it something. So I'm going to say current boss and I'm going to use scaffold read contract. It's giving me an error because it's not installed. All I need to do is actually click this do quick fix and I can import it like that and it will add it right here.

And I can reference the contract and I'm going to reference boss because every anytime you define a ver a variable with solidity, you get a get function called the name is the same as the variable. So we have that. Now I save it. I got rid of the arguments because we don't need to give it any arguments. It's that's all it is.

And now I just want to display I'm going to kind of clean up this code a little bit. I'm just going to get rid of that image. And I'm going to say like who is the boss? And I'm going to get rid of this paragraph here. And I'm just going to show the boss here like this.

Okay. So now let's look at scaffold. So what did I do? I displayed I got the info from the chain. So I queried it, but it's very ugly.

So we probably want to wrap it in that component that we have. So let's go over here to the address component and we can see what that looks like. We just need to wrap it like this. Okay. So to do that, we need to import the address component up here at the top, which we already have it actually.

And then we need to wrap this in the address. So we'll do address equals like that. AI is helping me a lot. And now we'll go over here and then look. See, did I save it?

There we go. So it's a lot better, right? It's uh got the Austin Griffith. And it didn't like the resolution. I don't know.

There's something weird going on. I probably like broke something when I used AI. Let's see. Oh, yeah. Maybe just get rid of this.

Thank you. Something with the wrap. Yeah. Okay. So, now I have this kind of like card.

It's not centered or anything nice, but it's okay. You guys are getting the idea. We have like How much time do we have? We got like five minutes. Now I want to make a button that lets me update.

Well, first I need to input to like put in a new boss, right? Um, so I'm going to go here to use scaffold. Uh, or sorry for I'm going to do input address input. Here we go. So now I want to like make some state where I can put in a new address.

So I'm going to copy that. Let's make some state real quick. Um, I think we can just put it here. I think it needs to be at the the top. Yeah.

No, it goes well. Let me let me let me grab this first and put this right below here. So, set address. We call it set boss like this. We also need the uh address input up top.

So, let me do that. Address input. There we go. And set boss. And then we need to pass in the the um the new boss.

But we need to have some state. So anytime you want to save stuff in state in um React or NextJS, you need to like basically keep track of that. So I'm going to put it here. I think that's where it goes. And I need to also import use state.

So I'm going to fix that. There we go. So now I have some state. This is not right though. Sorry, this is wrong.

That should be right. Okay. So now I have the ability to set a new boss by taking in some state. So then I could have this uh the value is should be boss I think. Value address is that right?

Oh yeah. Oh my god, this is not working. Address input on shade set boss. I have it installed. This should work.

Let me see if it works. It might just be giving me errors, but it's something with my llinter. Let's see. Okay, that might work. Let's see.

Cool. Okay, it's working. It's getting some errors, but that's okay. I think it's working. Um, so now I just need this button.

I think it's my internet connection. It's a little wacky wacky right now. So the next thing is I would probably make this button like actually set the boss to, right? Because we're keeping track of this who we want to set the boss to. So then we would use the write contract hook.

So I'm actually not going to do it cuz I want to show two things real quick. But there is a hook to write to the contract as well and it's use scaffold write contract. And you can basically define your own like custom hook for every function that you want to use in your contract. So in this case we say well we want to use the right contract async into a new function that we name whatever we want and we want to call that specific contract and then here is a button example of how we could like do that how we could call that asynchronous function. And so this was just like an example of a button.

So I would be able to just like copy that and literally just paste that in right here to replace this button. So you can see how scaffold has a lot of like front-end stuff to make it easy for you to hook up um your contract. The docs are actually really good as well. So like if you get lost, you can easily go in there. But let's just say for the sake of time because I want to do five minutes to show you the the last mile here.

Let's say thank you. Let's say we want to push this to a test net. Right now we want to push this to uh I don't know baseia or base. How do we do that? Well, first of all, we don't want to use the the keys that come with hard hatter foundry.

So, we need to generate a deployer. So, we can do that with yarn uh generate. And this will generate a private key and store it locally for us in the machine. It's going to ask you to password protect it. So, we can just go ahead and hit enter.

Hit the password again if obviously you should put a password. I'm just doing a demo. Uh and then we can do it'll give you an account address right here. And then I can do yarn account and I can also get like a visualization of that. Right.

So I'm going to hit enter. So now I have this um QR code. So what I'm going to do is just take this QR code and I'm just going to send uh $1 to it on base. So, I'm just using my phone. It works.

Oh, one more time. Okay. Scan. There we go. Okay.

So, I'm going to send $1 here of base ETH. If I have a dollar, I should. Uh D. Oh, that's mainet. Do that.

Wow, the internet is so bad right now. It's not working. Uh, oh man, it's not working. For some reason, my wallet is not showing me the network name. Sorry guys, one sec.

Okay, so I've been having the worst internet connection here in Argentina. I don't know why. Everywhere I go, it's just bad. Try one more time. Okay, send.

Okay, here we go. There we go. Okay, let me just send $1. Okay, so Bass is super cheap. So, you can deploy to base very easily.

um if it will actually like send. There we go. Okay. So, I'm going to do a deploy here. But when I do the deploy, all I need to do is do d-network and do base.

And uh we use um VM to list all the chains. So, we have all the chains that are in VM are going to be available in in Scaffold ETH. I'm going to hit enter. Now it's going to compile my contract, make sure it's good, which is didn't need to. And it's going to push the and do a transaction on base if the internet works.

Let's see. Nope, not working. So, I think the internet's just bad. It's just not working, unfortunately. Um, let me try one more time with my phone.

No, it's okay. Okay, it's fine. At this point, it's like a Let's see if it finishes. Enter. We're going to do this.

I know it. I can feel it. We're going to get finished. Okay, now it's deploying. Okay, so um now it's deployed.

And then I can do yarn d-verify base and then the very last step. So this is going to verify my contract. Um we provide oh sorry yarn verify-n network sorry yarn verify-n network base this will verify your smart contract which you should do uh because it's just best practice and the very last thing that you need to know is that scaffold eth has a config file that you can change the chain. So right here the default chain is hard hat. Um, if we come down into scaffold ETH, there's a config file called scaffold config.

And you can ch change that here on the chains whatever we can change it to base like that. Hit save and now our front end will reconfigure to base. Something to note is you'll get kicked out of the burner wallet. Um, and that's because we don't want to use burner wallets inside of a main network or even a test network because the private key stored in the browser session for the burner wallet. So now we're kicked out.

Then we'll want to use a normal wallet like MetaMask or Rainbow. Uh, so now we can connect. We can see we're on the wrong network. We need to switch to Bass. And there we go.

So now our app is fully deployed on base. We can come to the who the who's the boss. And I didn't make the button work, but if I had make the button work, I would be able to come in here. I'll just do it this way. I'll set it to Vitalic and hit send.

Oh, try it again. Send. Waiting user confirmation. It's going to pop up a MetaMask thing and then it should work. Cool.

All right. Uh, we have five minutes for questions. So, uh, who has a question? Just raise your hand and we can get you a mic. If not, if we don't have a question, I can finish maybe the button.

Uh,

will you both be at like um booths or like mentors for the hackathons? Like, can we find you anywhere and like when? Yeah.

Well, I'll definitely be at the graph booth cuz I work at the graph. But, um, yeah, just let us know. We'll be around for a while. We also have other guys, I think, probably coming later. There's like 20 build guild guys here, I think, or like 15 around or something like that.

So, there's going to be some guys from Build Guild here. Um, the best way to actually get a hold of us is if you just do a search for scaffold ETH. Um, uh, Telegram. There's a Telegram chat and you can also ask in there and you can probably find someone if you if for some reason you can't find anyone for help and this will open up the Telegram chat. Yep, good question.

Another question. Uh yeah, I was just curious about like um in the last part like you you switch to from from testn net from from and and and go to to a real real chain, but uh like why did you why did you need to to connect your real wallet and and what's the difference to the the the contract that that you send? I didn't get the part. Why you send $1 to the to that address and then you just connect to to your MetaMask like

Yeah, sure. I can explain. Yeah. So, so inside the scaffoldy, the burner wallet that you're using first of all is just for testing. It's for like local testing as a user.

Pretend it's like a user. You're like kind of simulating a user. Uh when I did yarn and generate, I generated a different private key and public key pair that was stored in my environment variable just to deploy the contract. So, that's kind of like the owner of the contract. And the reason why I switched from my burner wallet to MetaMask is because you don't want to use a MetaMask uh or a burner wallet on a public network because the private key is literally inside of developer tools.

Like you can come over here and find it inside the storage, right? Um and we don't want that because you don't want someone getting your private key inside here. So we go to session storage. Uh it's somewhere in here, but yeah, the private key is inside here. Um, and so it's just not secure.

Does that make sense?

Yeah. Yeah. Thank you. Got it.

Yep. No worries.

Awesome. We have one more minute. Probably have time for one more question if anyone had one. No. Awesome.

We'll build on scaffold. And thank you so much for hacking. Good luck, guys.