🏗 Learn to Build a dapp Quick with Scaffold-ETH 🥷 - Kevin Jones

Very good. How is everyone? Thank you so much for coming. Are they having fun or what? Welcome.

Very good. Well, a brief introduction. My name is Kevin. I work full-time for a web 2.0 company.

Engine X, you may have heard of them. It is the most popular web server in existence. But I'm also an advocate for part-time developers for Scaffold ETH. Oh, thank you. And I basically work in the Build Guild.

If you're not familiar with the build guild, it's a group of developers who enjoy building on Ethereum. Most of them are scaffold eth enthusiasts, which I'll be talking about a lot today. I also have a non-profit organization that I founded in California to educate people about blockchain, specifically Ethereum. I am a mentor in Grow, which is a free program from Solidity. In case you're interested.

It's a free program, an eight- week cohort where you can learn more about Solidity; I am also a photographer and filmmaker. You'll see me running around . In fact, I'm taking photos for today's event. Anyway, that's me. That's my contact information if you want to follow me.

What is Scaffold ETH? Most of what I'll be doing today will be a demonstration, but I want to give you a brief overview of how it works and what you need to get started. They need git, obviously, to be able to download the repository. They also need Node.js and yarn installed.

Node.js is basically the prerequisite. They need at least version 16 or higher. Make sure you have it. Make sure you have the latest version of yarn.

Do not use an older version of yarn on Linux. There is an older version of yarn that doesn't work properly. So get the latest version of Yarn and you'll be all set. Those are really the only tools they need to get started. He's going to start hardhat for you.

Hardhat is one of the main components of scaffold ETH main components of scaffold ETH , just like React. So it will start React for you and do most of the magic you won't have to worry about. Setting up a hackathon project or any Ethereum-based web3 project can be a hassle, because you have to activate all these different programs, get them to communicate with each other, figure out how to inject your API into React, and so on. Basically, everything is already done for you, and I'm going to show you what that looks like. Um, and everything I'm going to talk about today is obviously based on Solidity.

So, you know, we compile our contracts in Solidity. Um, and that's pretty much the preferred smart contract language for scaffold. Um preferred smart contract language for scaffold. Um , so if you're a developer, , so if you're a developer, how do you get it up and running? The first thing you're going to do is clone the repository.

You're going to do everything based on Yarn scripts. If you're not familiar with yarn, yarn is really cool because it's a package manager, but it also lets you run cool command-line scripts with simple commands. So you can do yarn this, yarn that, yarn whatever . So yarn install will take care of all the dependencies for you and install all the prerequisites. You don't really need to figure out which version of this particular React you want to use or what the hard hat version is.

It will do it for you based on the current version of Scaffold ETH. And then you're going to run yarn chain. That will activate your hard hat blockchain, will activate your hard hat blockchain, right? running locally. And then you're going to run React on localhost 3000 using yarn start.

So it's yarn install, you only do it once, yarn chain to activate your blockchain, yarn start to activate React, and then you do a yarn deploy. And what that will do is use hard hat to take the "hello world" type smart contract that I'm going to show you. Let's start playing with him. And he's going to send it and deploy it. And that will also automatically inject the ABI.

So, if you do n't know what an ABI is, it's basically the way in which the smart contract, your interface, can interact with that smart contract. Because, um, obviously when you compile your smart contract into bytecode, it's not human-readable; Specifically, it 's also not readable from your interface. As you interact with your application, it's quite simple; You start building blocks and can begin testing, and each time you deploy, you get a fresh copy of your smart contract. We'll also show you what that looks like . So, that's pretty much everything that's on the slides.

I don't like using slides because they're quite boring. So, let's get straight to the point. If you search for "scaffold", the first one that will appear will be the GitHub repository. The main repository for the actual scaffold is here, scaffold ETH. There is also this directory of challenges that is linked to Ethereum speedrun challenges, which I will talk about in a second.

And then there are some examples as well. The great thing is that you can find an example of ERC 721, you can find an example of ERC 1155. Basically, there's an example for almost everything you need to know or need to build on. So it's an excellent starting point for hackathon projects, right? You don't have to worry about, you know, injecting OpenZeppelin contracts.

They are practically ready to use. It even has a small interface already prepared for you. It already has Ethers.js integrated. Your API is already connected.

Et cetera, et cetera. Everything is basically set up. So, for example, let's say you go to the ETH scaffold examples and do a search here. You could type "ERC", there's an ERC20 demo, there's a simple ERC 721 or 1155, and you can choose from that starting point, which is perfectly valid for your hackathon project. OK.

But we will focus on the scaffold, the main construction. And that's really where you should be if you 're just experimenting and building; That's what you're going to use. By the way, all the instructions for what I've mentioned will also be in the repository. Like yarn, yarn install repository. Like yarn, yarn install , yarn chain, yarn start, and basically everything I'll be looking at today is here.

So don't feel like you have to follow me step by step. I'd prefer that they just watch me do it . And then, unless you're really good, you can follow me. Well, and after setting up the scaffold, I always recommend that people who are still learning go to Solidity by Example and copy and paste content from there into their smart contract and start testing that way. Once you feel comfortable with Solidity, that's when you'll say, "Okay, I want to put my skills to the test."

This is outside of the hackathon, obviously, but when you want to start learning more, Speedrun Ethereum is a great resource. Now, it's basically a set of challenges that you must complete. And quickly, the zero challenge is to build a simple NFT. Challenge one involves creating a decentralized staking application, a token provider, a dice game, and you progress until you eventually get invited to the build guild, right? So you can start being part of the Build Guild community and, obviously, you get access to special chat channels where you can talk to developers and other creators, and work together to solve these challenges.

It gets really difficult after challenge four. So, if you can overcome these challenges, it's a lot of fun. Okay, enough hype about that. But scan this if you want to know something about scaffold eth. All the links for scaffold eth are on this card.

So, if you're interested, scan it. I'll give you a quick second. And I'm also going to give away a POAP. So come see me later and I'll put this up so you can scan the POAP too. Good.

So, let's begin. I use T-Mux. I don't know if you're familiar with T-Mux, but it's basically a terminal multiplexer. It allows you to have more than one window open at the same time. You can do it in multiple windows, but the general rule is that you need to have three windows open when working with Scaffold ETH.

Good. The first window is practically where you're going to do the yarn install. So you're going to configure and install the dependencies. I already did it in advance. It takes a little over a minute.

Good. But once you set it up, you don't have to do it again. You're ready. So, all you have to do is run yarn chain. Yarn chain.

The Hardhat node is about to start. It will run on localhost. That's all. Basically, you can leave that window open all the time. I like having it right here in the corner like having it right here in the corner , because maybe you use the Hardhat console to print things and want to debug your contract.

And then here in a new window, in the same directory, you run yarn start. Okay. So what will that do? It will start React on localhost 3000. That will take approximately one minute.

So we'll let him do his job. And then the last command, if you remember, is yarn deploy, right? With those three commands we have basically deployed a DAP locally on our localhost a DAP locally on our localhost . We can see here that we observe some contract calls. Let me zoom out a little.

We have some contract calls. We have some information about how much gas was used. We can see that React has just started on the right. Now we see more contract calls and how much gas was used to deploy our contract at the bottom. We even have our address.

So we get this great report. It tells us how long it took. Let's take a look at Scaffold ETH. It says I 'm on the main network. Oh, let me log off from MetaMask.

Good. So this is Scaffold ETH. When you first enter Scaffold ETH, it's basically React, Scaffold ETH, it's basically React, right? But the great thing is that he already has everything ready for you. Good.

On this first page of the application, you might think that this tab is where you would build the DAP that you're actually going to use for the hackathon. It's like your DAP within Scaffold ETH, you understand? And this is a special App.jsx file within React, and you can simply build around it. So you can inherit all the components you have in React and so on.

But the best thing is this contract cleanup folder. What it does is take a copy of your contract and build a fully functional debugging interface for you. It has your variables, your functions, the contract address, and the stored value, all in one place, so you can test your ideas while developing in Solidity. Okay, let's take a look at what that contract looks like. I'll use Atom, I'm going to use Atom.

Well, they can use whatever they want, but obviously Atom is just a basic text editor. And what do we have here? We have a packages folder, a hard hat folder, and then we have a React folder. Good. Almost everything I'm going to show you today is in the hard hat folder, and we'll be working from the contracts folder, where yours is located.

Okay, this is the default "Hello World" contract that comes included. Here we can see that we defined a version of Solidity. We define a license. We imported the hard hat console so we could log data to it. We named our contract and we also have an event that basically transmits the address that calls the " address that calls the " purpose" function and the string that is passed to that function.

And then we have another variable that we define. We have the empty constructor that does nothing, but we could use it. I'll show you about that in a moment. Then we have "set purpose", which is a function that allows us to change that variable, right? We have this type of public variable here.

We could change it here, for example if we write "unstoppable", save and do another deployment. Incidentally, sometimes they will want to restart and force a deployment; Just use " and force a deployment; Just use " d-reset" and it will force the deployment of a new contract. I made a small change new contract. I made a small change , and now we can see the change here. It's been modified here, right?

This allows them to make changes to the smart contract, deploy, return, and begin testing. Obviously that's a very simple test, but let's move on a bit further in the contract. Good. Within this "set purpose" function, it simply takes a variable, essentially a string, and passes it to the new purpose. Then we log that with console.

log using the hard hat console and emit that event, hard hat console and emit that event, right? So that we can capture the event and view it. It's quite ingenious, it's just a "Hello World". It's a very simple initial contract. Let's make some changes.

We're going to do some interesting things. So, the first thing you'll learn is that you might want to implement some kind of access control. So let's do a quick access control , something improvised. We'll make an owner, sorry, a public address owner equal to and we'll return to our thing here. And what do we see up here on the right?

Well, this is a temporary wallet or burner wallet. Okay, the burner wallet is great because you don't need to have MetaMask installed. Simply use a browser wallet. And if you opened another tab, you would still have access to it because it's in the browser, right? So you don't lose it.

But if you came here and said, oh well, a new incognito window and went to localhost 3000, we would get a new instance of burner wallet because it's incognito, right? So let's leave it open for now because we'll come back to that in a second. But my point is that we can use this wallet and it's empty right now . But we can get some funds from the faucet by clicking that button. We can even obtain more funding if we want.

You can copy the address. We can come down here to the faucet and say, "Oh, I want a lot more. Let me, give me, I don't know, a thousand dollars, send." I can easily get those hard hat funds. I simply deposit them into my burner wallet.

So I'm instantly ready to try. I don't have to worry about MetaMask and all that nonsense, right? So, let's make a change. Let's take this direction. Very good.

And we want to implement access control. So now we have access to this wallet. By the way, the private key is also here. So you can export the private key it generates. It's a fully functional wallet, fully functional wallet, right?

You can also import a private key. In case you just want to use one that you regularly use. And then let's get down to business and define that variable. Save it and then re- deploy it. Very good.

Let's first make sure that it deploys correctly, which it does. Very good. So what do we watch now? We have a new variable, owner, right? So what we could do is say, " Okay, let's make sure that only whoever calls this function here is an owner," like an access-controlled function .

We could do something like a "require" instruction, right? And we could say that the sender of the message is the same as the owner; Otherwise, you are not allowed to call this. I don't know, something like that. Well call this. I don't know, something like that.

Well , what I'm doing here is basically playing with my smart contract and redeploying my changes. I was able to start working with the DApp instantly and test my assumptions. So there you have it. We have our contract. We have a new one.

And now, if I want to come here, to this incognito tab, get some funds, go to the debug contracts and try to change the purpose, I don't know, to "foo" like that, it'll say you do n't have permission to call this, right? I've done some basic access control, right? But if I come here and say "fubar send" But if I come here and say "fubar send" , it allows me to, right? So, , it allows me to, right? So, good or bad?

But let's go a little further . Let's eliminate this concept of coded addresses and use... does of coded addresses and use... does anyone know Open Zeppelin? Open Zeppelin, right?

Incredible. If you don't know Open Zeppelin, you need to follow them. The first and second thing they will learn with smart contracts is inheritance. So, we can see here that we can do an import, right? We can import an Open Zeppelin contract and then have our contract inherit from it.

TRUE? And you will see that many examples such as ERC20, ERC1155 or 721 use this import and inheritance function. So let's do that, save and redeploy. Instead of using a hardcoded owner Instead of using a hardcoded owner , we use this inheritance method and we don't have a "only owner". That's the other thing we have to do: inherit the modifier.

So instead of using a "require" statement, we use a modifier that is part of the modifier that is part of the legacy "Ownable" access control contract. But they can see what we're doing But they can see what we're doing . We are doing tests. Let me unfold it again because I forgot that. And then let's go back.

But what's different now? Can anyone tell me what's different? The owner's address. It's unexpected. What owner's address is that?

It's just a random string, right? Well, Hardhat uses the first contract address, or should I say, has a set of 20 accounts. Use the first account to deploy the smart contract. What happened is that Hardhat deployed our contract, but kept it for themselves . We no longer have any access control because we had previously encrypted the owner.

So the next thing they'll learn with Scaffold-ETH is that they need to be able to change the deployment. If you look right below the contracts folder, there is a deployment script. OK. And this is where, when you run "yarn deploy", this is what gets processed, deploy", this is what gets processed, right? This is what is executed.

And you can see here that we get a copy of our contract. We configured the "deployer" as the deployer, which comes from the named Hardhat accounts. And then we can see here that we get an instance of the contract. So in this script we now have a copy of the contract here. What we can do is call an inherited function, right?

And if you're familiar with OpenZeppelin's Ownable, it has what's called an ownership transfer function . OK? You'll even see it down here because we inherited it. And you can see that it's right there. Now what we need to do is transfer ownership of our smart contract to ourselves.

We can take that direction again in this way. And you'll see right here that I have it kind of shaded. We can take it and call the contract's property transfer function and enter the address. Sorry, let me take it again, we save and unfold it again . Give me a second.

That worked quickly and well. And now you can see that it matches again and he is the owner. So we deployed the contract, called the transfer function, and passed it to us. That's great. We've been able to play around a bit with our contract and see how they enter this cycle where, as I said, they have Hardhat running, React open, testing the contract, and creating things.

And then they simply start testing those changes. They can do things like... I'll changes. They can do things like... I'll do a couple more things here just to show you.

We've finished with the deployment script. So we're good. Now we have some access control. Let's say we don't want to call "onlyOwner" in that function because it's a bit boring to have only one function that only the owner can call. Let's make it a public function.

But we could do something like, um, require that a certain amount of value be sent. Um, let's make uint256 public price equal to, I don't know, 0.001 ether. So we can define a price variable, and then we can come here and go back to our requirements, right? And we can say something like require, the value of the message something like require, the value of the message , which is the value of the transaction, is equal to the price, or say "it's not enough", something like that, right?

So now, if we roll out our change, which, oh, sorry, I always forget you have to do, because we're accepting value now, you have to make it a payable function. So, let's make it affordable. Save that and unfold it. Did I spell it wrong? Yeah that and unfold it.

Did I spell it wrong? Yeah . Thank you. One more time. But you can see how easy it is to start a project with scaffolding.

Um, you know, use this and start making changes. So, great. Now, we have a function, but what do they see? Well, the interface adapted and said, " Well, the interface adapted and said, " Oh, well, now we need to pass on some value." So you can start testing and we have that new variable here that shows the value in wei.

So, um, first of all, another thing you'll learn when writing smart contracts is that you need to send your transactions in wei and not ether. And so, um, you know, what this does is simply give them the variable. And if you do n't have this variable here, you can use this cool little green icon that does the calculation for you that does the calculation for you , where one ether equals 10 to the power of 18 in wei. So what we can do is say, "Okay, now we have this feature, we want to change it." Let's change the purpose to " change it."

Let's change the purpose to " boata", and then we have to pass if we were to pass 0.001 ether, sorry, let me put zero so it doesn't fail, and then click on this button. That would be the wrong amount; You'll tell me "it's not enough", right? But I could take this, copy it, paste it here, and send it. Boom!

It worked. So what happens now to our smart contract? It has value right now. He's actually storing something of value, which is, um, like this little vending machine like this little vending machine , right? So we could probably write a withdrawal function in there.

That would be great withdrawal function in there. That would be great , wouldn't it? And then, in that case, we would definitely want to use only the owner, right? So we could use that owner-only modifier . But let's do one more thing that I just want to show you with a small change.

You could do something at the end of your function that says price equals price, I don't know, multiplied by two. And then implement that change by two. And then implement that change . And with a small line in the contract, you completely change the behavior of this type of vending machine; it was successfully implemented. And now, if we change the, I do n't know, Colia.

Boom. Send. Now we'll see that the price has adjusted, we'll see that the price has adjusted, right? We made this simple modifier, didn't we? Okay.

So I think you get the idea. It's just a matter of experimenting and playing with your smart contracts. Test your assumptions with multiple identities, right? Multiple browsers. If you have any problems and want to, you know, if you have any issues, there is a Telegram channel to resolve any doubts.

I'll be around. I'll be taking pictures. But I'll be happy to help if you have any questions. Yes, that's pretty much what I wanted to review. Any questions?

I will try to leave some time for questions. Yes. Yes. Yes. So, if you are, yes , if you are, I mean, do you mean a test network?

Oh, let me show you quickly. They can create an account quickly. They can create an account . You can use yarn here. Let me open this in full screen.

They can do yarn run generate. And what that will do is generate a special deployment seed phrase. It will place it within your directory; I won't click on it, but it's right here. So, it has the address of the deployer. The seed phrase is in there .

So they can also inject it into MetaMask to gain access to it. And then they can make a yarn account like this. And they can also, what I would do is, I have a punk wallet on my phone and show them a QR code. It happens very quickly show them a QR code. It happens very quickly , but you can only scan the QR code, send some funds to that address, and now you have this type of wallet where you have the private key, you have the private key, right?

No, no, it's saved right here on your device. Yes. Yes, that's your deployment account. So, yes, that's a good question. I was going to show that, but I didn't have enough time and I want to be respectful of others.

I was going to deploy it. You can also verify your contract with a " You can also verify your contract with a " yarn verify". Um, you can do all these cool things. Uh, you can also use "yarn surge" and you can upload your um your DAP. You can build it with "yarn build" and then " build it with "yarn build" and then " yarn surge" and it will go up to surge.

You can also use "yarn IPFS" and send it to IPFS. So there are all these things that are already written for you. You don't have to complicate things with that. Just take a look at the package JSON file and it has all the yarn commands JSON file and it has all the yarn commands . And one more question.

Yes, try writing tests. No, there's a test in there. So you can do something like "yarn test" and there's a test in the hardhat test directory and you can create and build on that. Um, if I did it right now it would fail because the test is designed for the "hello world" example that comes with it. Um, but yes world" example that comes with it.

Um, but yes , you can definitely do a " , you can definitely do a " hard hat test" and I think that directory is uh right here, test, my test, and you just write it like a normal hard hat test. So use chai, basically hard hat and chai. Yes, one more. And so, uh there's a uh preview. There could be a future version of Scaffoldy that has Foundry.

Um, actually there is one, I think someone already built one actually that uh I don't think is here yet, but I would just keep an eye on the repository here to see. I could check it right now . Um Oh, there is one. Yes. So , there's one with foundry, I think.

I think it's something like, yes. I don't know if it's been tested too much, but um, it's probably not the recommended one to use in this hackathon, but um, yes, it seems there already is one. Yes. Thank you all. Thank you.