Speed Run Ethereum Development with Austin Griffith

contract hot reloading and uh burner wallets kind of everything that we had with the scaffold Estack. It's the best way to build apps quickly on Ethereum. So uh I've already cloned down the repo and moved in and yarn installed and I did a yarn chain and that brings up my hard hat node and then I did a yarn deploy and I shipped a template contract to it that we'll tinker with in a little bit. And then I did a yarn start and that brings up my Nex.js app.

So out of the box I just went to the scaffold ETH2 repo which I could share in a little bit. I cloned it and brought it up and this is what it looks like. So you have uh where's that tab? There we go. Okay.

Yeah. Yeah. Yeah. Yeah. Yeah.

There we go. So you have these kind of like three main tabs and the the experience is mostly in this debugging tab. So, uh, what you'll see here is I have a template smart contract and then I have this front end that's hot reloading every time I add something new to my smart contract. So, let's just get in here and create like a new I don't know. I could delete some of this stuff probably.

Let's see. I don't know. I don't want to delete anything just to mess with it. the the contract has a like a handful of things to just show you how to do things. But I'm going to create just a new address right here and call it public and make it like a like a delegate, right?

And I'll just leave it blank for now. But if I save that and then I go deploy, what you're going to see is this new delegate is going to show up over here. Boom. There we go. So now there's a delegate here, right?

And it's set to zero right now. But let's make a write function that lets us write to that delegate. So let's create a new function here. It's called like set delegate or something like that. And there we go.

That looks good. That looks good. Maybe like an only owner. Do we have an owner? We do.

Let's use this is owner modifier that's laying around here and hit save and deploy it. What I want to show you here is I'm making small changes to my smart contract and my front end is just auto adapting to that each time. So this allows me to tinker quickly with solidity. If you're trying to just a lot of people don't just like sit down and bang out a smart contract. They usually need to like get a feel for how things work.

Am I going to use mappings? Am I going to use strrus? Am I going to use arrays? How am I going to store stuff? So while you're thinking through that, you can be kind of just like tinkering with scaffold ETH and kind of changing your smart contract around to get what you need and testing your assumptions.

So now we should have a set greeting here, but I'm not the owner. So I'm going to jump over to the deploy script and see. Yeah. Okay, here we go. Let's go ahead and just force it.

So my address is the owner. Okay, so now we'll redeploy our contract, but this time hopefully we will be the owner. There we go. So now if we look at that owner blocky, it's the same as our blocky up here. Okay, this is this is g going to give me a good chance to show off burner wallets too.

So if I open an incognito window and I go to local host, I see this kind of green wallet, right? It's a different wallet than this. And let me close it and do that again and go to localhost. I get a different wallet. This is really, really handy for testing.

Instead of writing a complicated test suite to make sure only the owner can set it, I can basically try it as this dude. Right? Let's go back to our debug contracts. Let's try to set the delegate to uh Vitalic and look at this nice ENS resolution. Come on, get it.

Come on, get it. Yes, there it is. Okay, so you get both the ENS, you get their address, there's a blocky and their ENS avatar. And if I hit send, it's going to say not the owner, right? This guy's not allowed to do anything.

So, we're able to test that not the owner can set it, but let's see if the owner can set it, right? Grab some funds from the faucet. Go down here to set delegate. And this time, I'm going to set it to atgeth. Let's see what happens.

Okay. And I make the transaction. And there we go. The delegate is now Austin Griffith. So, uh, in so far what we've been able to do is bring scaffold ETH up, uh, add a new thing to our smart contract.

We see that show up in the front end. Then we created a new function that let us set that thing and make sure it was only the owner and we were able to test that only the owner can set that thing all just with our browser tinkering around without writing a complicated test suite. So, as you're writing your your hackathon project, this is a really great place to start. Uh, but it's also great for deploying production apps. So, what I'll do now is I'm just going to start tinkering around with uh an actual front end here.

So, what like basically it does what I want it to do now. I can set the delegate. Maybe there's some more stuff that I want to write in here, but let's just imagine our smart contract is pretty good and we're ready to kind of work on shipping an app. So, let's go to the uh we'll go to the front end now, right? We're kind of dealing with the back end over here with hard hat.

Let's go into our next.js folder and go to We got everything kind of There we go. And let's just look at the index page. And maybe I'll just clean some of this stuff out. How's that look?

And let's just put a hello here to make sure it's working and hit save. Then go over here and go home. Okay, cool. So, we kind of have a blank slate here. What we need to do is create some React elements, right?

You'll find that if you're building products in web 3, you spend 20% of the time writing the smart contract and 80% of the time doing the damn front end. So, let's just bang through that quickly so we can get it done. So, let's see. Uh, what I want to do is what do I want to do? I Let's do a read first.

So, let's get a hook going over here and let's read the current delegate. Basically, I want to make a small UI that lets a user set the delegate on the smart contract. So, uh, I'm going to do something like this first. So, I can do this. And I'm gonna say use scaffold contract read.

It's this nice hook that sets me up with that. Oh, I don't want scaffold ETH. I want your contract. And I'm reading the delegate, right? And I don't think I need that.

And then uh what do we have here? I think it's uh data, right? How how would I figure that out? There's a keystroke here. There it is.

There it is. So, I hit control space. And now, thanks to Typescript, I can kind of look through here and figure out what what I'm getting out of this hook and what I want to use with it. But basically, I want the data that's coming out of that. And I'm going to change the name of that to delegate.

Something like that. Okay. And now let's bring that delegate and display it over here. Just the ugly raw address for now. We'll say something like current delegate is.

And then we'll do this noise right there. Right. And let's see. Does it get mad at us? Oh, okay.

Current delegate is that. Okay, that's cool. But if you're building a web 3 app, you're not going to display your addresses like this, right? What's nice about Scaffold ETH is we bring in a bunch of handy components for you. So, if we just start making an address component here.

Hopefully, that's not too small, but I'm just going to get an address going here. Oh, that's not what I wanted. So, we're going to bring in an address component. And hopefully that lets me add that from scaffold right there. And we'll say address equals that uh delegate, right?

And we don't need ENS provider. That's my own uh that's scaffold one. The the AI thinks I'm doing scaffold one right now, which is funny. Okay, so now there we go. Doesn't that look a lot nicer?

Okay, so we've got our current delegate. We've got it displayed. It's using an ENS. Like it it's just it just looks a lot nicer. If I click this, it's going to take me to Ether Scan to my address.

I can click this and I can copy the address. Just like basic you need if you're going to build an app. This is all here. And by the time you get done building your first prototype and you realize you needed all these things, you'll wish you came back to scaffold ETH. So try starting with this because it's going to help you tinker and it's going to have the stuff that you need once you're ready.

Okay, so we have the current delegate, but what I want to do is set up some UI so I can set the current delegate. So what I'm going to do is create uh another hook. And this one's going to be use scaffold contract, right? And we're going to write to the contract and we're going to set the delegate to uh arts. Yes.

So in here I want to set the delegate to oh it'll be some const. Okay. Okay. So blah blah blah blah. We need we need like an input, right?

Okay. So we're going to need to have an address input and then we're going to have some controlled state and then when I hit the button it's going to take that controlled state and send it into the address input. So sorry, let me back up a little bit and get that address input going. Okay. So, an address input.

Same thing as the address, right? I just kind of start typing this and TypeScript helps me out a lot. Uh, and then I think we're going to have like a value. Yep. Value and we'll set that.

And then there's probably an onchange and we'll set that. Very nice. Okay. Now, we need that React state, right? So we've got const uh this uh new delegate new dell.

There we go. Set new dell that equal to uh there we go. Thank you. All right. All right.

So then on change okayoop we'll take in some value and inside of that we are going to set the delegate to that value and then the value is going to be the new delegate right nice okay let's go tinker with that real quick and make sure why doesn't it like that do I need to type def that to any or something like that. Oh man, I can't hear you. Oh, you can't see it. The use state you're saying? Oh, here.

Okay. Type def it. Yeah, with TypeScript, you've got to tell it that it's going to be a string. Sorry, I saw that and deleted it, too. I should have just left it there.

I'm I'm slowly picking up TypeScript and the dark arts over here. Okay, so now that's fine. We've got our delegate. Let's test out that this works. Uh I should be able to type in uh it's not Carlos, but if I type Carlos, it's going to be somebody.

Nope, it's not. Uh let's see. Let's go to Vitalic again. There we go. So, we're able to input an address.

It's stored uh in the state. Let's just make sure real quick. Let's bring that state down here and say new delegate. I just want to see that this thing is working, right? I want to do something like that.

Yeah, there it is. There it is. And if I do atgeth. Yeah. Oh, that looks nice.

Okay. I mean, it doesn't look nice, but it's doing what we need it to do. Okay. Now, maybe a little bit more padding here, right? A little bit more.

Okay. Whatever. All right. Now, we need a button right underneath that. And in our button, we're going to have an on click.

And when we click, what are we going to we want to do? We want to basically set the delegate, right? So something like set delegate. Let's just see that. That looks okay.

Oh. Oh, we need to type. Here we go. Here we go. Class name.

We're using Tailwind and Daisy here. Class name needs to be btn btn primary. Okay, that looks nice, right? Okay. And we click that button.

We set our delegate. Okay. So, the last little piece here is that that use scaffold, right, that I started working on earlier. So basically the use scaffold write is going to call it's going to call set delegate I think. Let's go look at our smart contract real quick.

Yeah, set delegate with an address. So let's do that. Set delegate. And then the address here is going to be the state that we're tracking, right? The new delegate.

And what's going to come back is data. I'm looking for a function here. Right? Write async. That's the dog I want.

And this does the do do set dell or something like that. I don't know. I'm a terrible namer. Okay. And that's where we need to do that here.

So when you click the button, it's going to do a do set dell to No, it already has the arguments. We just call it, right? I think that's it. Let's see what happens. Let's see if this works.

Okay, so we've got Austin Griffith as the current delegate. Let's see if we can set Vitalic as the new delegate. Okay, we're going to need internet. I don't even know. Oh.

Oh. Oh. Okay. Now, yes. Yes, it did it.

Okay, great. So, we we we wrote a quick smart contract and we added a delegation system to it. Then we tinkered with that smart contract over here. Made sure it worked the way we wanted it to. Then we jumped back over here and we wrote some React to make the app work.

And we still have about 12 minutes before we're done. So I think what I'm going to do is to try to deploy this app live. The problem is I probably have a bunch of linting errors. Uh let's see. Yarn next.

Oh yeah, sure. Sure. I'm happy with that. And lint. Right.

Just making sure we got I could also yolo it, but I got Carlos in the crowd. I wanna I don't want to yolo it. I want to make it work. Right. Oh, shoot.

Okay. Yeah, we got Oh, it's um stuff in the index that we're not using anymore, right? This stuff. How about now? Okay, we're ready.

So, yarn versel. Oh, I need to deploy the smart contract to a network, right? Because it's not even if we put it on public, it's going to be like my local host. This isn't going to work because of the internet. Okay, so my smart contract is still just deployed locally.

So let's try to put it up on Gorly even though the Wi-Fi like if I can get a signal out of this building, I'll be impressed. So to deploy a contract right now, we've just been using hard hat to deploy locally. We need to put this thing up public. So I need to do a yarn generate and that's going to create a local pneumonic. It's going to put it in an env file that's already git ignored.

And then if I do a yarn account, that account comes up there. And then if I send I might even have some on this already from another demo. Yep, I've already got gorly. So, normally I would use a punk wallet or uh some other wallet to send some gorly into that address, but it looks like there's some there already. So, let's just do a yarn deploy.

This is crazy trying to deploy a smart contract. In the western stock show, do you notice there's these doors come up and a cow walks by here? Right. And and they're auctioned off, right? Do you notice where the fence goes?

Picking up a little hint of smell. Okay, our contract is deploying. Maybe, maybe, maybe, maybe. Let's give it like 15 seconds just to just to Oh there it goes. Damn.

Okay, so we've got a contract on Gorly. Now, what I'm going to do is I need to go change my environment files. You'll notice if we look back at the app, it still says hard hat. So, I'm going to go to here, these environment files, and I'm going to put them both on Gorly. Now, watch this.

That one little change. Now, let's go look at our app. Oh, no. Did it not save? Let's go look at our app now.

I'm going to go ahead and connect my MetaMask. Now, now I'm not going to use that burner wallet anymore. I'm going to use a professional wallet with all the all the bells and whistles. You notice that the app is now on Gorly. I made one small change to go from hard hat to Gorly.

And now, if I click any of these addresses, they're going to take me to the Gorly uh ether scan. Okay. So now we need to set our delegate. But you have to be the owner of the contract. Oh no.

We need this guy to be the owner of the contract, right? Because this is going to be Yeah. Okay. Let's go edit our contract real quick. One more.

One more deployment. There we go. Let's try to deploy it again. Now I'm just getting cocky here. Deploying multiple contracts.

Let's see if that goes. It's working. Come on now. Come on, Gorly. There we go.

Okay, now our contract is deployed. Now I'm the owner. See how Austin Griffith is the owner. That's what we needed. So now, uh, if I wanted to set delegate, I could.

I can even set my greeting. Hello world. This is going to make a gorly transaction now, right? I think my wallet's There it is. There it is.

Waiting on you, MetaMask. And I confirm that. And there we go. Uh, we're making, you know, instead of using a burner wallet, now we can use a MetaMask or any other wallet that you wallet connect in. Okay.

So, now the app, right, we need this app to go all the way live. We've got the contract. We've got the front end. Uh, we've deployed our contract to Gorly. We switched over to Gorly, but the last thing we need to do is a yarn versel and that's going to build a static app and upload it to versel.

I'm just going to like yolo through these. So that's going to uh upload it to versel and now I'll have a public URL. So I could share the URL with you guys in the room and you could all go interact with my contract on the app with the front end that I just built live in like less than 20 minutes, right? And this this is hopefully a good example for you if you're going to be building a hackathon project that you can quickly pull up scaffold, start tinkering, but then deploy a live app that works with all the state-of-the-art bells and whistles. And this is going to build for a little bit.

So let me just finish off my my talk with a few things. So Scaffold ETH one is kind of the noob version. It's Typescript. It's not TypeScript. It's plain vanilla JavaScript and create React app.

So if you're a super noob, maybe scaffold ETH one, but once you get into type safety, you get into Nex.js and some of these other things, uh, React or Rainbow Kit and Wagme, that's where Scaffold ETH 2 is. And this tool is for building DAPs. Now around this tool is speedrun Ethereum. If you haven't heard Speedrun Ethereum yet, please go check it out.

This is a great way to learn how to build on Ethereum. It starts by just deploying a stupid simple NFT and then you start building a staking app and a token vendor uh a dice game, a DEX, a state channel and a multi-IG wallet and that all and an SVG NFT that's silly and that uh that whole starter kit. So if you know people that need to learn to how to build on Ethereum, tell them to go speedrun Ethereum. And then around that is what's called the build guild. And this is kind of our incentivization layer around the whole thing.

So you have the tool, you have the curriculum around that and then this is the incentivization layer around that. Basically uh I deployed all these streaming smart contracts and builders who have gone through the program can now withdraw ETH from these streams. So I stream ETH to 70 builders or so and their job is just to make public goods. Find things that need to be created. Find things that are interesting to you.

Find things that are educational. go learn them and then go teach them back in some kind of a readme and then turn that into your uh stream and you can withdraw ETH for that. So, it's kind of like developer UBI. There's there's this all this cool thing that this person has built and their stream withdraw, right? So, oh, there's our app.

Okay, so now our app should be live in production. You could go to Nex.js ETA341 or whatever, right? I could put that in a QR code and you would land here and you could connect your wallet. And if you are the owner, we could set the delegate to vitalic and hit set delegate.

Okay. So now we're going to make a transaction from our live app on our live smart contract. in the stockyard. Okay, the very last thing I'm going to do is I'm going to display a QR code and that QR code will link to a Telegram group. So, if you're thinking about building with Scaffold ETH, we're going to be in that Telegram group and we'll be around the venue all the time.

So, if you'd like that Telegram group so you can yolo questions, have your phone ready here and I'll get that uh up in a second. Let's see if we could just get this to display. Yes, there we go. We updated the live version. The Dallic is now the delegate of this contract, which is just an arbitrary thing we set, right?

So, we were able to tinker with a smart contract. Then, we were able to build a front end, then we were able to deploy our smart contract, then we deployed the front end that talks to the smart contract, and then we just got in and used it and made a few transactions, and it actually all worked. Uh, so here's the QR code. If you're thinking about building with Scaffold ETH, if you're going to be around uh at the hackathon, I think this is it. I was just sitting there.

Let's make sure this works. Someone scan that. Tell me if it goes to a Telegram room. Yep. Good.

Okay, good. Ask us questions in there. We also have a booth at the very front. Right when you walk in the door, if you just go to the left a little bit, there's the Build Guild booth. You'll see a big speedrun Ethereum sign.

So, come hit us up with questions if you have anything. But I think that's it. Thank you all.