Deploying Your First App I Austin Griffith

So, [Music] I'm Austin Griffith. Uh, I'd like to introduce how to build on Ethereum. For the next two hours in this room, we will do uh introduction to building on Ethereum. We will do uh how to build a DEX and overcolateralized lending. Then we will do a stable coin.

And then we will do a prediction market. Uh those last two will be Kevin and Shiv. Shiv's probably still waiting in line out there. There's a lot of people out in a great big line out there and just a few people in the room here, but this is for the virtual session. This is for the homies at home.

Uh so here we go. Uh so first of all, uh we're doing the Ethereum tour. If you or your university club are looking for guidance around your curriculum and teaching of Ethereum, check out tour.ethereum.org.

You can uh reach out to us at uh university or universitythereum.foundation. So the Ethereum Foundation is doing an Ethereum tour where we're touring around giving similar content uh to what I'm about to give out, but we're around to answer questions and help out and make connections. Uh this is uh mostly an EF thing. We're we're an EF uh developer growth team.

Uh, but there's kind of this entity called the Build Guild, which is a DAO that I created uh with a bunch of friends to help build and help other people thrive on Ethereum. Uh, today we'll be using the tool Scaffold ETH. It's an app for building uh on Ethereum quickly. It orchestrates your contracts with hard hat and foundry and it has a front end and it has all those things wired together. So as you add things to your contract, your front end auto adapts to that and it's a good way to tinker with solidity but also ship apps quickly.

And then the curriculum using this tool scaffold ETH. This curriculum is speedrun Ethereum. It helps you speedrun all the concepts. We spend a lot of time teaching uh in a lot of virtual sessions with a lot of students found the things that work and resonate and we're kind of skating to where the puck is and teaching people what uh can what gets product market fit on Ethereum. So today I will build my first app in the first 20 minutes here and we'll talk about some of these early apps and then we'll move on to building a DEX and overcolateralized lending and then we'll move on to a stable coin and eventually we'll have uh Shiv do prediction market.

So over the next two hours we'll cover all of these topics. Uh but let's get started with just building your first app. Uh the first thing you'll do is go to scaffold ETH. Now, sometimes I like to tinker in the browser. Uh, I'm going to give a shout out to bite at a time uh a homie who made this little remix clone.

It's uh remix.bite at a time.dev. And you get your contract over here. Look, I've got this like nice simple little counter and I can deploy my counter and I can click uh execute on the increment button and my counter goes up.

Let me zoom in on that. Look at this. We've got some simple counter code over here and you can kind of dink with your first contract, right? then we can execute this increment and we can see this count go up. Uh when I'm teaching in sessions, I love doing this where I have a little bit of code up and I can show how to tinker with it.

Another thing I love to do is go look at the W contract. Uh if you haven't written your first smart contract, this is a fun one to go look at. It's basically an ERC20 token uh with some extra simple code to it. Let's go find that deposit function. Right?

If you're a coder, you can understand this almost immediately. there's this uh balance of uh variable here, right? And that's for the message.ender, the person who's calling this function. We're keeping track of a balance and we're adding the message value.

So this one line of code right here basically keeps track of everyone's balance as they deposit it. And then later on when you go to withdraw, they subtract that amount from the balance. Uh but what's fun to see is this code has an address, right? This code has an address on Ethereum and that address is holding something like $9.5 billion dollars worth of value.

And so this is something that should be exciting for a developer, right? You can write a little bit of code and that little bit of code can have hold billions and billions of dollars and orchestrate that billions of dollars moving around. So let's get into it. Let's build something. We've tinkered a little bit there.

Now let's really get into building an app. Now you actually have to go to the command line and run some things, right? So we're going to grab this command. It's mpxcreate e latest. And I'm going to paste that in.

And we're just going to do an example app. Where are we in Delhi, right? Delhi example app. So uh create ETH is a installer for scaffold ETH. And scaffold ETH is an abstraction on top of uh all the things you need to build on Ethereum, but it makes it way easier.

Brings it all together. You can use hard hat or foundry. Let's go ahead and use Foundry today. I randomly just pick them. Uh it's uh kind of up to you.

Foundry does solidity like testing in solidity, hard hat, I don't know. Sometimes it's more simple for noobs. Uh sometimes the maybe the deployments is a little smoother. Uh but it's up to you to make the decision of whether you want hard hat or foundry. They're both good options.

You'll find that a lot in Ethereum. There's a lot of open-source uh tools and there's a lot of options. You can run different clients, execution and and consensus clients. You can run different varieties of tools. You can even write smart contracts in different varieties of languages.

So there's always a lot of options and a lot of diversity within Ethereum and that makes us more robust and and stronger. Okay. So what we're doing now is we're installing all the packages we need. And if I cd into here, we can open up cursor and we can start coding. Here we go.

And let me open up cursor. Okay. And it looks like our uh app has finished. So we'll CD in there also. So we'll CD into our app.

You got to do a little command line stuff. And as AI gets better and you can vibe code more and more. I think you're still going to need to do version control. And version control still happens a lot at the command line. Maybe one day we'll have a nice little like hit play, hit rewind button at the bottom that does all the version control for you.

But right now you still need to do you still need to be a little command line warrior. So let's see. We're going to run our chain. So that's going to spin up a local blockchain. Basically, it's going to run I think it's an anvil node when I when we have foundry.

But basically, it runs your own little blockchain, right? You have your own little Ethereum running here. And it's easy to get a bunch of money on it. And blocks get built every time you make a transaction. So, it's cheap and it's free and fast and local and private just because you have it all on your own machine and you can tinker all you want.

Okay. Uh in that same uh folder, we're going to run a yarn start and that's going to bring up our front end. So we have both our front end and our blockchain and they're going to be wired together. So uh when we deploy something, all of our uh artifacts that happen from the contract will be injected into our front end and we'll be able to tinker with our smart contract on our local blockchain. So, uh, as that comes up here, let's do that one last command.

And that's a yarn deploy, right? And look at that. It's already got the network to go to arbitr. And we want to just deploy locally at first. So, scaffold ETH comes with a simple smart contract.

It's kind of like a greeter contract. Let's get into foundry and contracts. And look at our first contract here. It's got a little bit of everything in there to kind of show a developer how to get started. There's, you know, like an you can keep track of addresses.

You can keep track of strings, bools. There's a lot of primitive data types. There's even a mapping for different greetings for different users. This is just an example smart contract. Usually, what you do is kind of clean this out as you go.

Uh, but what I'll do in just a second is I'll add a function and we'll tinker around with it. This is just our first app. Uh, a a good first app is maybe something like a little counter where we can, you know, like hit a button and increment the counter. We'll do that first and then we'll get into much more advanced apps. But what you need is a good local environment where it's really easy for you to try things, change a little bit of solidity, test your assumptions, and tinker with it a little bit.

Okay, so here is what Scaffold ETH looks like when it comes up. You've got kind of a wallet in the top right, and this is a burner wallet. We don't have any MetaMask or Rainbow Wallet or any other browser extension connected yet. At first, we're just using burner wallets. And that means it's a little scary.

Private key and local storage. Uh but that's really good because then you can just like click click click and make transactions as you need. So uh let's let's do that. Let's uh let's give this dude some funds. So if this guy tried to make a transaction right now, it would fail because we need to go to the faucet first.

So I'm going to click that button in the top right. And now we have like $3,900 of fake local ETH. Right now let me show this debug tab. When you go to the debug tab of scaffold ETH, you get basically an automatic UI for whatever is in your smart contract. So if we wanted to add some new variables, they would show up here.

If we wanted to add some new functions, they would show up here. So as you write your smart contract, you're deploying it locally and then you can tinker with your smart contract and try things out. So this contract comes with like a little greeting and you can say hello world, right? And as soon as I click this button, it's just going to set the greeting to hello world. Notice we didn't get any wallet popups or anything like that.

No, not worrying about gas or chain ID or anything like that. That's because of those burner wallets. We're able to just make quick fast transactions. Okay, so we've got our smart contract, we've got our front end. Uh let's add just like a quick variable here called 256 public.

Uh, I'm gonna call this county counter, right? Because there's already some like count that's going on. There's like this total counter that's kind of kind of keeping track of something else. I could just delete everything, but we're going to just kind of yes and and add everything here. So, we've got this new variable called county counter.

And we want to create a function called increment. All right. Now, of course, we're doing some silly, stupid, simple code right now, but if you hang around for the next two hours, we're going to get all the way through overcolateralized lending, building a DEX, building a stable coin, building a prediction market. We're going to go really fast, but I'm starting very slow just to show you how to get started. So, stick around.

Okay, so we've got an increment county counter function. And what that's going to do is increment our counter with a little plus+. It wants to emit an event. I don't really want to do that. and it created this event.

I don't really want to do that. I just want it to have a counter and increment the counter. And let's hit save and let's deploy that. Right? So, you're making these quick changes to your smart contract.

Maybe uh you need some solidity help and you go to solidity by example and you go through these concepts, these first apps, these primitives and data types and you're looking at, you know, strrus, arrays, mappings, how does the the syntax of the language work and you're bringing stuff over to Scaffold ETH and you're trying it out, you're pasting it in, you're testing your assumptions. Uh this is this is the the loop you want to be in as a developer. Okay, so we've got our county counter. We've deployed our contract. We should have a front end now that has there.

There we go. Our little county counter is at zero right now. And then uh we've got a button here that should increment our counter. There we go. We can click click click click.

And we see our counter go up to six. Okay. So then we might want to build a little frontend around that. Right. So then we would move over to Next.

js. We'd get into our app and we get into our page of our app. Okay. So this is your front end. This is where you would write your React code.

And that is represented by this homepage here, right? This welcome to scaffold stuff. So if we wanted to, we could kind of maybe clean some stuff out of here. And what we would add here are some hooks, right? We would add in some uh hooks from scaffold ETH.

What you might want to do is go to docs.scaffoldeth.io. [Music] And this docs page is going to kind of teach you. First of all, there's a nice little like eight minute video of me speedrunning this.

But what you can do is get into interacting with your smart contracts. There's a read, use scaffold read, use scaffold, write, and these hooks are right here. Right. So, what we could do is copy these hooks in and we could write our front end. Uh, I'm going to do it even faster than that.

I'm just going to prompt cursor because we've got just like a minute left here and then I'll be done. Okay. So, what I'm going to do to make a front end is I'm just going to prompt this to uh you know uh add a button to uh ink the counter and also display the counter, right? And that will build out our front end. It will add all the hooks in that we need.

Uh and that's going to create the front end for us. Uh of course, whether or not you're vibe coding your smart contract, that's up to you. You can do that. This thing will oneshot an app all the way. Uh, but what this is going to do is just make the front end for me.

And that's how you get started with your very first app. Basically, you install scaffold ETH. You tinker with your smart contract. You can play around with it in the front end. Uh, then you add these hooks into your front end and read and write from your contract.

And that's how you build your first app. The last thing you would do is do a yarn deploy and then like d-network mainet- network arbitrum and you would deploy your smart contract to a live network. And we'll do that in just a little bit. But I think that's the end of this session and uh we're good to go. Okay.

Thank you. [Music]