Building on Ethereum

Transcript

No, good. Okay, fine. So, hi, welcome everyone. My name is Phillip and I'm from the build guild. And today my intention is to kind of answer you the question that you see on the screen. How how is possible to easily build on Ethereum? And actually was funny enough, I mean two two years ago, I was kind of curious about how how to doing it and I had just no idea how to start. So I was just looking tutorials how to build and whatever and it felt very cumbersome and difficult to do it and then it just happened that I stumbled upon Austin and Austin is the founder of the build guild. He's not here unfortunately today and I I was like you sitting in the audience and was and and he was

explaining how it is how easy it is and how you how you can get started and now I'm here two years later I'm just standing here in front of you. So I hope I can give you back some of some of that experience and then maybe you will interact with us the build guild. But maybe first of all to assess a little bit who of you is a coder. Okay, a bunch. Nice. And how many of you have deployed on Ethereum already? Okay, so we have a good know good knowled knowledge base here. That's very nice. So maybe before before we going to head in and show you, I wanted to give you a quick insight what the build guild is because the build guild is a very cool organization and I mean Austin came

up with the build because he thought there are just no applications built on Ethereum. I mean we see that today and he decided okay we need to incentivize builders to build more applications so that everyone around the world is going to using Ethereum and that's how everything is seted up but then we he realized okay but to do that we first need to kind to have to have some kind of education and that's how he came up with very nice educational tools and curriculums we have that really teach you joyfully how to build on Ethereum with with the basic concept one of that product is speedrun Ethereum and that's really really cool that's also how it happened to me, how I ended up up there here standing in front of you. Then we have some kind of batch batches where we teach people how to do some um GitHub um

PRs and really contribute to open source repository. And then to keep builders really building and motivated, we also have some kind of grants. So we kind of sponsor some people to build the first builds on Ethereum because it's also very hard if you're no one looking at you, no one giving you feedback to that. But then probably one of the the main main main main things they build build guild is building also tools is scaffold Eve and I don't know how many people of you have heard about scaffold e already are there some yeah and that's actually what I wanted to show you today because it's a very amazing tool because in the beginning I mean I can just talk from my experience when I came in there was like okay there is something like hardhead maybe there's foundry then okay then you're building

the smart contracts but What do you do then with the smart contracts? Then you're in remix and this looks very spacey in the beginning. You have all these functions and you do some calls and you don't know what it is. But the cool thing with scaffold, it just connects this back end smart contract part directly with the front end. So you can just really tinker around, play around in the smart contract, change some stuff and then you see it immediately in the front end. And that's what we're going to to do today now on uh and just one question but whenever there is a question I don't know how it is set up but maybe you can just also just scream in and ask ask it if I use some terms you don't understand but I see I mean you're probably probably very familiar with all the terms I going to

use. So let's go into scaffold and I show you how it works. Okay let's see how fast the internet is. Um, I'm just going to make the terminal a little bit bigger. And when we go to SK, if you go to scaffold e, we have just a very easy command here to run just like mpx create e latest and you get the latest version of um, scaffold e. So you don't have to do much in the beginning to to run it. Then you're you're giving it a name. So I don't know I just going to Eve um Eve CC um showcase.

Yeah. And then here you can already then choose like the framework you want to use. I mean there is the the hardhead found the hardhead or the foundry. I'm going to go now with hardhead here and let install everything. I mean the the difference of these two is that the the harder one is for you can just do everything like the deployment and writing the test everything in JavaScript. So it's probably when you're not that familiar with solidity or just want to kickstart it and just want to try more and tinker around with it. It's probably good for for beginner more or less. And then there's also the foundry and that's completely the whole environment is kind of set up with solidity. So you're writing everything in native solidity code and that's also very nice. So I I I prefer that a lot because the tests you can write in

solidity and just like feels like more natively but it but it really depends what you want to do. Yeah. Um yeah and here let me see how long this will take to to initialize. Yeah. The whole thing is really it's it's set up in a monor repo. So you really have the monor repo where you then have your you can you write your smart contract and your front end. And for a front end we just decided to go with next.js shares like the framework because probably the most most common to most of you and it comes with a very easy deployment to to basel. Let's see how long this will take otherwise I can just jump in. I just downloaded before because I was aware that it might be might take too long.

So um let's do that cdin and I think I created a eccup. Yeah. And it's it's not that easy actually to type just with one hand when you have to hold a microphone. Don't know how to do this all the time. But we will see cursor. Sorry for this little typing. Yeah. And I mean probably most of you is is it big enough to see or should I zoom in? Zoom in. Yeah, that's a good hint. Thank you. So I first want this one. I mean and for all of it I'm going to use cursor. I don't know.

Probably all of you heard of heard about it and it's actually pretty cool. I just never never changed again. And I mean there are new new things coming out but I always stay with cursor because I'm just familiar with it. I just like the whole integration with the LLM. But what we're going to do first before I even um go touch any LLM because I want to also then I mean I think the title shipping fast so therefore you can definitely use LLM. So I will do this later. So just really wipe code a quick app and then we just deploy it on a on a real um real network. But first of all, I just want to go into a little bit more and deeper into how Scaffold Eve really works to give you a glimpse of it, what you can do with it, and just just the

nitty-gritty details of it. Yeah. Um, let me open this here a little bit further. So, let's close it here. So, on the one side here, we have hardhead and here we have the next.js. That's what I was talking about. It's kind of the mon repo that's kind of combines the the hardhead part, the hardhead part and the front end part with the nextJS. And here in in in in hardhead is just everything familiar to you if it is. Um and here the scaffold Eve team very nice team around Carlos and build guild. Um they they kind of here have put a default contract in here. Um I don't know to you are familiar probably a bunch because you deployed already. Um it's just a little little contract around that you can easily first in the beginning deploy

and just tinker around a little bit. What I going to do now, I first going to spin up the the local chain. That's kind of a it's always hard to to decide, but I mean it's a it's kind of a local chain that runs on your um on your laptop. So you don't really have to interact with any test net or then even a mainet. So in the beginning it's very good to get quick interactions. You have it everything strapped out with some um so some already accounts and they hold a bunch of ETH on it here. So we we just spin up this our own blockchain network here on on our computer and now I just going to run yan deploy and what it does oh sorry for that um it just really deploys the whole contract on this local on on this local network and then I

going to open also another tab and which is going to spin up um nextjs with yarn start so and let's go into local host wait I need to make this bigger as Well, yeah, let's go into local host so that I can show you how scaffold Eve looks if you just started first with the default contract in there. And a very nice thing and that's probably the thing you would use first in the in the scaffold E is the debug contracts tab. And in here you already see everything from the contract. I mean may maybe a little bit of in in epher scan or so on where you see the read and the right function but

here probably a little bit better in my opinion in a better UI design where you see okay that's your contract that's the address here's kind of all the state variables we're going to have on this side then we have the read functions on this side and here we have kind of our um um our write functions to the blockchain. So, and the and the cool thing is now if I would to just go into now here the contract and we're just using just for demonstration purposes right now here the greeting and I just like building unstoppable apps and um never stop and we're just going to redeploy the whole thing and deploy. So, it puts another smart contract on the blockchain. You're probably aware that whenever you change

something with to a to a contract you have to redeploy it and it's a completely new contract. So you can never change the the the bite code or the contract you have put on chain. So it's always a new contract with it. And here now you can see it automatically updated in here. So whatever you do in the contract and whatever function you're going to add here, it just appears immediately. And that's kind of for me makes it so so so valuable actually because you can just try in this kind of um environment. You can try out the the contract. Another really cool thing is that it has built these burner burner wallets. So here is just a um completely easy built-in contract and you can just click here and then you get one Eve every click you kind of get one

Eve on the on your local chain on your account and so you can just and then with an incognito window for instance here if you go here and you can just go to local host again you will get a completely new account so you can just kind of mimic a different user on your application and that's pretty pretty nice and and sweet actually. So here and then I can just get here more E. But if you go if you go back and we would just um I just want to show you before we go a little further. If you just add a little function here and we just call it um increment counter maybe because we have a we have a counter here. Increment increment oh increment counter. Okay thank you.

And we redeploy it here again. Let me go to the to the Dpack or is it to the deploy yet? Oh yeah. And then we have here increment counter and then from here I mean we can just easily call it and then we would just increase. So so so we can test out what we have built just right now. And and now I mean I was talking also about um how is the integration with the front end. You would think okay that's just now everything you debug. just looks a little bit nicer like ether scan or remix whatever. But now the cool thing is we really created implemented very nice hooks into speedrun Ethereum uh

into into scaffold e. So we going here and we're going to the docs you can see here there are there are ton of here here components where you can just easily get the address the balance everything is nice and made and tidy and then we have interact with your smart contract. So here we have kind of I mean if you're coming from VM and and so on um we we we will be using these hooks but we just make it a little bit easier inside scaffold eve. So if you would go now here to so we're going to leave now the smart contract behind where we integrated the counter function and um we have here our homepage where you don't you you just see here here's our nice address UI component and what I want to going to do now I want to just

implement very quickly the the counter so that we can read the state from the smart contract like the counter is now one I increase it one um h have it in here. So what we go we go now back to to cursor. I going to minimize this one next.js. Let's go into the app. Let's go to our main page. And now we want to get we we want to get the counter. How how do we going to do this? So we're going to go to first to our docs and we see okay what we want to do use gaffod read contract. That's probably what we want to do. And I mean it has actually here a counter in here. So we're going to take we copy this out.

We're going to copy that in here. So first then we have to import that hook from scaffold Eve. Then it doesn't take any argument. Um I just going to have a and it's your and this one is not the real name. So we're going to change it to total counter. We have it here. And now we can go in here and maybe just put it underneath address. Oh yeah, sorry. I always forget that. I don't should Is this big enough? And I make this smaller. Thank you for reminding me.

And if it's too fast, I'm not sure. It's It's always the balance because some people have done this already and they're probably bored when I'm talking about smart contract stuff, but for other people, they're here and want to do the first time. They don't really know what I'm talking about. So, it's really yeah, probably a good good approach would be to separate the groups and have two different talks. So, when whenever there's a question, you don't know what I'm talking about, please just just tell me. That would be very nice and helpful for me to assess what's going on in your heads. Yeah. Now I just I just do what cursor tell me and um save the whole thing. And if we go now back here to local host then you already see okay we have total counter and one and that's actually very and this scaffold Eve is definitely a

very very powerful tool which you can um use for hackathons maybe for Eve global because you just you just build your smart contract and you're then instantly having your um um your front end build with that as well and that's very quick and fast. Yeah, that's that's kind of the the basics about scaffold. I would say what you can do. Are there any question before I go any further about that? If not, then let's go in because probably everyone of you is okay. I want I don't want to I want to do this by myself. I just want to use LLM for that.

And I mean, we know that as well. And that's why we have here some nice cursor rules integrated. So, um that's kind of what what what the team did. It just tells everything basically put in the the LMM what scaffold leaf is about what are the components and so you can then just immediate inside cursor it just uses then all all this context put in and then it it creates an application for it and know already how scaffold e works that that's actually very very powerful so that's why now I going to jump in here I I I thought I mean the the easiest one is probably a bit boring but I just went for it kind of a voting app I just I don't want to bother you that's why I just um just wrote this up front here. I have a wipe coding voting

app. So, and I just going to put this in and then I I just run this now and we going to see what's going to happen. So, my my my idea behind this I want to create a voting app where you can vote on Ethereum how how the wipe is if it's good or it's bad. and I just gave it to to cursor and let's create him now and hopefully he builds a smart the right smart contracts for it for it and also the right front end. Um I think I I realized is whenever you do this and you wipe code he will always put some owner pattern in there but most of the time if I really want to build a decentralized application I just don't want to have an owner pattern in there or a white

listing or a black listing whatever and that's why here I really highlighted everything should be decentralized no owner and permissionless so that everybody can participate in it this definitely a thing I learned when I wipe code all the time you always have to emphasize this all the time because otherwise you get just clo get get a closed application Yeah. And let's see what he does. I mean, he still works. Does he needs any prompting uh any uh any action from me? Doesn't seem like that. Yeah, it's working. That's good.

Probably. What What is he doing? Okay. Deployment script is always good. Um yeah, builds the contract. Okay. I don't want to do this. Don't want to let him install anything. No package. Now he builds the voting interface. Yeah. And maybe let's let him continue and let's look into the contract that he hopefully already built. Let's accept this here and see what he did. Okay, he built a contract. That's definitely very good. So we have good wes. We be tracking good votes and bad votes. We check if somebody has voted. I mean,

this probably voted good. That's probably won't need, but it's but it's okay. Let them in there. Um, a constructor where the mids I don't know um event when it's deployed is probably not that necessary. Then we have vote good, vote bad in here, get total votes. We wouldn't need that the getter function, but it's fine. Yeah. And so on. But I see no nothing really with an owner. That's good. So no no no centralizing an auto centralization pattern in here. So that is perfect. And what else did he do? Okay, he changed my deployment script. Let's accept that. I don't want to look through it too much and see if it just works. Then we do that here. He Okay, he's still working

on the front end front end part. Let's see. But what we can do already, we can just yarn run yarn deploy and see if it works. If the if the contract gets deployed this one, we don't need normally. Also, he writes a bunch of tests that I don't need in the sense. So hopefully he doesn't do that. Still working on the on the front end.

Okay. But nice the contract already deployed. So if I go Okay, cool. Going to see already some stuff. So here I I kind of see the contract now in my DD contracts. And on the other side here, he already created the the whole application and looks pretty nice. So we can vote good and we could vote bad. We have good and bad votes. Very nice. Yeah, that's cool. Um maybe accept this here. And it seems like he's done with it. Okay, let's try. And now the cool thing is we just have now the contract really we didn't do any test nothing and we we we already see the front end and now because you know about everything we just can call it good and we see okay opens Metam mask that's good and transaction completed but I get an arrow okay he didn't like that um okay

maybe we can just use that just make it easy oh there's any hydration error okay normally doesn't happen when I tested it before, but it's probably always the case. Let's just put it in. Okay, but I mean, um, I don't need to debug now the front end. Actually, you you you still saw how it works. You probably need to some some tweaks about, but it's definitely very cool. It's definitely a very very base. But now you you're probably asking, okay, now now I have everything on the on the test net. How do I get it now to real to the real network? And here we have built in some some accounts. The cool thing is you don't really have to put any your own private key in here or whatever. You shouldn't do that neither.

So it's a cool feature what they can do. I let let me stop this now. Um just so diffic. And now what we can do we can yan we can run yarn account and what it does ah um yarn account generate you have to run and this and this generates you a new deployer account generate.

Okay, Jen. Oh, Jen, thank you. Generate. Um, you use this account. This one gets just one time now deployed here in created inside this repo and it spins up a completely new Ethereum address. And so it's not linked with any of your accounts. And what you're going to do now, you're going to fund this with some Ethereum on which chain you want to deploy it. So even if this gets leaked or someone has access to that one it captures nothing happened because just the amount you put on there gets lost.

If I would for instance now putting I mean if I would use I have here for instance in my my metam mask I don't know okay this is not here if I go to to do mainet I have sitting some funds in here and if I would just take out not a private key and use my private key inside the repo to deploy it and I just make something wrong I mean I just push it maybe my private key to GitHub or somehow someone has access to my laptop or whatever it just steals everything and this kind of separates that. So when I when I always deploy it, I'm going to do this and I never use this account and what you can do then when you deploy it with just a random account and may you might have an owner function because you do something whatever then you can

always in the deploy script define a transfer. So you just transfer the owner from this deployer account to the address or you plugging immediately your address in that could that could be the option what you could do. This make sense? Yeah. And then here it asks me for a password. So I just going to put a very secure password in here to confirm. And now this is what I what was I speaking of. We have here the generate wallet address is this one. And what what we can do now I I have the address and I just going to go into my metam mask. I going to go where we want to deploy. Let's go to arbitrum and I just going to send I mean it's

just a couple of sends. So maybe we um just sending 20 cents there. Continue. Continue. And that's not what I'm doing. I'm just funding now my deploy account. So I have it in here. And now I can then when it's there, it should be there. I can I can run yarn account. Then you actually see all the balances on your account. Okay. Okay, it wants to so it pulls now all the different networks you can we we support and here you can already see that the data the balance and arbitum arrived and now what I can easily do I can now instead of deploying this to my local chain I just

run yan deploy give it the flag network and put in arbitrum put my password and now it's going to deploying now it's got deployed to to arbitrum and this is kind of our address and now the cool thing is here because I mean now now the the the contract is in arbitum you just go here to the scaffold config and that means and you see here we have scaffold config here's the target network so the front end knows to which which network it

should connect so what we can Here we can now because we deployed an arbitum and now we want to interact with the contract. I just going to put in now here arbitrum and I just wanted to get the real arbitum. I going to save it and then if I go back to ah my no okay now you can see up here I mean it's too small probably just going to zoom in we are now here on arbitum. So the whole thing is now in arbitum. And if I go to debug contracts also here this contract just I just deployed right now in arbitrum. So if if you even click here, it openscan and this is the contract here I I just recently deployed. And to verify that we can run also a yarn verify

verify we just give the network term and now what it does it should take the the whole AI. Okay, now I got an error. your contract failed. Maybe I just need to this what it should does it now pushes the the code base to um to to to arc scan and then you should if this works but you failed to submit. Okay, I have no amulet. Okay, it seems like they

changed or I need to put in I would need to put my my my my um EAS scan API key in there and then I could verify it. Sorry, I haven't prepared for that. And then you could see underneath contract not even here only the bike code but you can also see the full code and it makes very transparent and for the people to really see what okay you you know about. Okay, another cool thing is I mean we most of the things we're going to deploy on VEL afterwards but I mean as everyone knows the cell is not very very decentralized and we also made the option putting in there that you can run YAN IPFS exactly and then you have it on on yan IPFS your um your front end and that's and that's

actually also very cool that's another component. Yeah, I mean that's a kind of the that are the the kind of the ma main features of scaffold uh scaffold eve I wanted to show you. Are there any questions regarding this? when I went too fast. No, no, it's just a norm. Yeah, that's why I mean you like you ask I mean Midan IPFS the downside is you cannot have dynamic websites. You can only have static websites uploaded. So, of course, if you have some, I don't know, some

some crazy web pages, this wouldn't work. But if you have an easy um easy um blockchain application, it should work. Any other questions regarding this? Okay. Then um the the the the further if you if you kind of know how to build now and what to do. I mean it's also always important to know what to build because not just everything you want to build on blockchain. And therefore we on build guild we created speedrun Ethereum and that's kind of this very nice curriculum I really like because it just has everything the basic concept wrapped into some kind of challenge. So if

you're doing this, it feels like you're doing a computer game or so it felt it felt for me like this. So you you're starting off by doing some simple NFT and NFTTS in here and you can then use Scaffold ETH to deploy it onchain. We have kind of a decentralized staking app as well. What you going to do? And from there to there you're just going to learn the basic concept going from NFTs ESA 20 token how to send and transfer for it then how to swap them in a token vendor then all about randomness I mean that was the Solange probably talking about before in the in in the chain introduction then it gets more complicated we having um a very nice DEX challenge I mean that was probably eye

opening for me when I realized wow cool I can I can understand a unis swap v2 contract and deploy deployed on chain and that's what we're doing here. We're teaching you kind of the uni unis swap v2 contract and then it gets even further. We have a overcolized lending challenge. That's kind of the basics. Then when you want to go into um a money market and then we have also just recently launched the prediction markets. So that are definitely the very cool the the the the basic content that makes definitely sense to look into it if you want to build because with these basics you kind of then can think about what else can you build. So we just try to consider everything down when you first time feel okay prediction market oh that feels a little bit bulky why is that why do you really need to deploy

any capital in there so other people can vote on that and they just can start thinking what else you can build on top of it and there therefore it's really cool to have this in your basic repertoire like these basic concepts and then from there um going further yeah and we have a multisig SVG challenge and then for for for very good people we have a capture the flag that goes more into smart contract security We have 12 challenges for that and there's also the some Eve tech tree challenges where we exploring more into D5 concepts. Yeah. And that's kind of all from me. How much more time do I have? Five minutes for journey.

Yeah, that's all. So what I mean I'm I'm very grateful to that I can stand here to you and talk to you. I I hope you enjoyed it a little bit and you're going to start building with scaffold Eve and then also jump into speedrun Ethereum. It's probably definitely cool whenever you wanted to build on Ethereum. Yeah, thank you very much for being here today and yeah, enjoy the rest of the conference and if there is any other question, please let me know. So, I saw you have this LLM's full um for scaffold ETH, which is like this context file that you provide right to the LLM. Yes. Is that the same one that you essentially get with the in the cursor rules? That's the we put them in

the cursor. When you download the the scaffold Eve repo, you will get it with scaffold Eve cursor rules in here. And this is then kind of cursor knows that he needs to put that into the context when he's going to um code. Thank you. Is there a place where Yes, my question was related to that. Is there a place where you can share a best practice of using cursor eye or or code uh with these type of tools and uh make sure we we get right the first time. I I not re I don't know a place but I think

it's a lot of tinkering around and um looking tutorials how people do that and what is the best prompts are and then the funny thing is it changes also all the time because before with 3.5 it was different and then there come four out it was completely different so I think every time yeah I agree that's why I asked the question I mean there's tinkering I mean there's some weird things and I don't know like when you putting the here I put for in the brackets the good and the bad and if wouldn't do that. It doesn't realize that that so much. So that is that is kind of important thing to do. But you're just getting this. Okay. Why is it not putting buttons for good and bad there? Yeah.

Are there any other questions? Okay, then. Thank you very much.