Web3 Workshop - Building Your First Dapp

OK, so, yeah, if you click on the link and you go to the GitHub repo, you'll see that we have this React dApp. This is kind of the code base that you can use as a reference. But the actual workshop material itself is in this actual readme that you're seeing like right here. And the idea here is not to really clone this and do anything with it, but instead to actually follow along in the steps as we kind of go through all this. And we have a good amount of time set aside for this. So we have about three hours to build this. And we're going to be covering quite a lot. So if you were just running through this extremely quickly, you know, without even reading anything, just copying and pasting the code, you might be able to finish this workshop in about 20 or 30 minutes. But you're going to see that when we're actually kind of walking through this, explaining, you know, all the things that are going on and hopefully answering questions, we should take up probably the entire three hours. And then there is a small challenge at the end where you can kind of take some of the stuff you've learned today and try to extend it a little bit. And then I have a few links to some additional resources that you might want to follow along when you're done with this.

So with that being said, welcome to this workshop. I just wanted to thank everyone for taking time out of their extremely busy schedules to attend this. I hope that when you're done with this, you have a good understanding of how a lot of the Web3 stack works, or at least the core pieces of the Web3 stack work. And you might have hopefully some eye opening moments that excite you about, you know, working in this space, or maybe you just kind of, you know, understand what's going on here to decide whether or not this is something you want to pursue further or not. But you know, regardless of, you know, what ends up happening, I think that this is a good skill set to at least understand for the future of your career and stuff, especially with a lot of the attention and excitement that you're starting to see happen around Web3 and how people are building out applications using a lot of these crypto economic protocols that people refer to typically as crypto. So yeah, I can give an intro for myself. My name is Nader Dabit. I currently work in the crypto space and the Web3 space and the blockchain space. All of these things kind of correlate with each other and they overlap. But I've been in this space for about five and a half months now, I think since April. Before this, I was working in DevRel at AWS for over three years, really, really had a great run there and still enjoy working with a lot of that technology as well. And before that, I was doing training for big companies like Amazon and Microsoft, teaching them how to build mobile apps. And before that, I was just a software developer. But I really became interested in the Web3 space back in late 2020, early 2021, not that long ago. Really after kind of diving into a few of the projects that were interesting to me and seeing the value proposition for me as a software developer, because before this, I was a speculator in crypto in the sense I was like buying and selling tokens and stuff. And I wasn't actually aware of the fact that people were building out programs and that a lot of things might change in the next couple of years because of this technology advancement. So I became extremely excited and interested in the space and decided to leave my really comfortable job at AWS and turn down a bunch of other jobs to work at a startup that was only like a month old at the time. And it's been really fun. And in this workshop, I'm hoping that you can kind of learn the basic stack to give you a glimpse into how some of this stuff might be interesting. And I think one of the most interesting things to me that you might see in this workshop is how easily it is to program payments into a program. Now, if you've ever worked with something like Stripe or PayPal or God help you working with an API for an actual bank, you kind of notice how complex everything is to actually make all this stuff work just to enable digital payments. And the payments themselves are complex, but the underlying infrastructure is orders of magnitude more complex. So how easy it is to program payments in a smart contract to me was really, really interesting. And it was one of the things that really got me excited to kind of imagine all the future possibilities that people might be able to build into these types of programs.

So this workshop is going to kind of go over a really, really basic hello world example, and then we're going to look at how to program tokens and we're going to show how to transfer tokens or payments between parties. And while the actual implementation of some of these might be more just basic hello world types of implementations and you might not actually use these actual smart contracts in the real world, it is a really good overview or slash example of what you might be able to do.

So with that being said, we're going to go ahead, I guess, and get started and we're going to take a break at the one and a half hour mark. So we have three hours. We might spend the whole three hours. We might finish a little early. I'm not sure. But at the one and a half hour mark, which for me is going to be at 1230 p.m. Central Time, we're going to take like a 10 or 15 minute break for people to grab a bite to eat or drink or use a restroom or something like that.

So before we get started, the two prerequisites for this workshop are that you have Node.js installed on your machine. And I highly recommend using either NVM, Node Version Manager, or using FNM, which is a Node Version Manager written in Rust. And I'm assuming that if you're showing up to this, you probably already have that installed. But if you don't, I would go check that out. It doesn't take a whole lot to install Node using NVM. And I use these Node Version Managers because a lot of different environments require different versions of Node.js and it just makes it really easy to switch. The other thing that is a prerequisite is Metamask. But we're actually going to install Metamask from scratch. And Metamask is an Ethereum wallet and it's a crypto wallet. But it's also how you authenticate into Web3 apps.

And you see here, I also have a couple of other wallets installed on my browser. And I usually pin all of the different wallets here to my extension pins. And here I have Rweave, which is a Web3 protocol for storing images. I'm sorry, for storing data forever. So instead of uploading a piece of text or an image to S3 where you have to pay a monthly fee and if you don't pay that, maybe you don't get access to it anymore. Rweave is interesting to me because you pay a one time fee using Rweave to basically store a piece of text and it stays there literally forever. So one of the things that I'm building right now that I'll be open sourcing soon is a blogging platform that uses Rweave to store blog posts. And it costs about three or four cents to store a large one megabyte piece of text. So maybe one cent to store like a blog post or something. But I think it's extremely interesting that it would stay there forever. Right. So I'm kind of building out something like that. So you'll see like when you start adding different protocols and working with different projects, you'll have multiple wallets. And this is a phantom wallet and phantom is for Solana. And the Solana network is just another network other than Ethereum. We're going to be building on Ethereum today, but Solana is actually another very, very popular blockchain protocol that allows you to build smart contracts using Rust. And the transaction costs on Solana are like a fraction of what they are on Ethereum. And I think one of the biggest complaints that you're seeing right now is with Ethereum is that the transaction costs are starting to go up. There are a few different things that are going to be happening in Ethereum in the next couple of months for merging updates to to make it more scalable and less expensive. There are also layer twos on top of Ethereum that are that you can basically write the exact same code and run for a lot less expensive. But there are also alternative blockchains like Solana that I would recommend checking out. And I'll talk a little bit more about some of this stuff. But what we're going to be using is Metamask and Metamask allows you to interact with any Ethereum virtual machine blockchain. So Ethereum is kind of like the original EVM, Ethereum virtual machine. But there are now dozens of other blockchains that use the EVM. And just having Metamask allows you to interact with any of them by basically just switching the network. And we'll look at that in a second. So with that being said, does anyone have any major questions before we get started? And if they do, I can kind of answer those, if not, we'll continue on. Just going to pull up the chat real quick.

OK, cool. All right, so if everyone wants to follow along, the link to the code base and the readme and the workshop material is in both the Discord chat as well as the Zoom chat. So the first thing that I'm going to do instead of actually like starting to build the app, I want to go ahead and first install Metamask. Now, I typically already have Metamask installed, but I went ahead and deleted it before this because I want to install a brand new Metamask to kind of walk you through how to do this. And if you haven't already done this, Metamask will give me basically this secret phrase that if someone else has, they'll be able to basically take whatever money I might put in this wallet. So this is going to be for me an entirely ephemeral wallet. Like I'm going to delete it when I'm done and like I'm going to show you my passphrase, but you should never really do that. But for this workshop, I'm going to do that. But this is just to kind of give you an overview of how this works. So I'm going to go ahead and. I'm just going to Google something like, you know, Metamask wallet extension or something, and the first thing that should come up is this right here. And what I can now do is just click download and this will add it to Chrome. And this will walk me through how to do this. All right, so I'm going to go ahead and get started and I'm going to create a new wallet here. And I'm set up some password. And now I'm going to click next and now we should be given our passphrase. Now, this is the recovery phrase that you can use to basically get access to your wallet anytime in the future forever. The way that these wallets work is that you basically have something called public key encryption where you are given a seed phrase and the seed phrase can basically then generate a private key. The private key can then generate a public key and the public key generator address. So like by just having this this recovery phrase, you can basically revamp and recover your wallet anytime in the future forever. So what basically I recommend people to do is, first of all, never reveal your phrase to anyone and especially if you have money in it. And second of all, store it in a place that is extremely secure. So what I, you know, and a lot of other people do is we write it down and we place it somewhere or maybe we keep a couple of copies, maybe put it in a safety deposit box or something like that. But basically, like, you know, depending on how much money you have in there, of course, I guess. But what I'm going to do is just copy this. And of course, when I'm done, I'm just going to delete this wallet. So I'm going to go and click next and now I have to confirm. So I'm just going to paste it right here and then that way I can see it. So I'm going to just, you know, flame. All right, and after we confirm this, we should have our wallet set up. So what I'm going to do now is I'm going to go to my extensions here. And I'm going to 10 MetaMask, so now I should have a MetaMask extension here, and this is kind of the way that I want to have access to it going forward. And you'll see that I have like zero ETH in my wallet and now we should be ready to go. And another thing you'll notice is that we have this drop down menu here and this drop down menu allows you to choose which network you want to be on. So right now we're on Ethereum mainnet, which is the Ethereum network. But we can also add other networks. So let's say we wanted to use an Ethereum layer two like Arbitrum or Optimism. We can basically add that either from their website or by clicking custom RPC and entering the information ourselves. You can also use networks that are EVM or Ethereum virtual machine compatible like Avalanche or Celo or a handful of others. So just by having this one wallet, you can interact with all these different networks.

All right, so now that we have our Ethereum wallet installed, we can start building out our app. So some of this stuff like just gives you an introduction about some of the things that we're going to be working with. React, we're going to be working with Metamask, already mentioned that we're going to be working with a web client library for basically interacting with the network. So in a typical web application, you might use something like Axios or the fetch library that is native in the browser these days to interact with the network. In GraphQL, you might use something like Apollo or Urkel. But in Ethereum, you might instead use one of the native Ethereum client libraries. So we're going to be using Ethers JS. There's also Web3 JS. And those are kind of the two main ones that you might interact with the network with. But they're very similar to something like Axios. And we're going to be building out two types of smart contracts. One is a greeting contract, and this is the contract that actually is given to you by the hard hat development environment that we're going to be working with. So when we create a new Ethereum project, it's going to automatically create a new example contract. We're just going to be starting off with that one and using it. And then after that, we're going to then create a token contract for minting our own crypto tokens. And then we're going to transfer those tokens between different users. And then I think that's really interesting because it shows you how to basically transfer these tokens within the smart contract.

All right, so to get started, we just basically want to start off by creating a React app. So if you're a front end or full stack developer, you've probably done this a million times, either with React or Vue or whatever. But we're going to be starting off by just using NPX to create a new React app. So I'll copy this command here. And I'll jump into my terminal. And I'm here in an empty folder. And what I would like to do is just run NPX create React app and call it React DEP. All right. So after we've created our app. We can go ahead and just change into that new directory. And next, we want to install our dependencies, so you can use either NPM or Yarn and you can go ahead and just copy this to your clipboard if you'd like. And this kind of like goes through all the different dependencies that we want to install. So I'm going to copy that to my clipboard. Just paste it here. So some of the different dependencies here you might actually have used before, actually, just maybe this one is Chai, which is like a testing library. But everything else is going to be Ethereum or blockchain specific. So Ether is again is the client library for interacting with the Ethereum network or any other EVM network. And then we have Hard Hat and Hard Hat is interesting because it is like the entire development environment that you're going to need for any EVM or Ethereum project. This provides you a lot of really great stuff, like a local Ethereum node that you can basically deploy and run programs against. It also provides a testing environment and a lot of other stuff. So those two things are kind of the main things. And then these are kind of sub dependencies of some of that stuff that we're going to be needing. So Hard Hat Waffle is for basically like local testing stuff. And Hard Hat Ethers is basically an Ethers library that works well with Hard Hat. And all of this stuff is actually not only in this tutorial, but you'll probably see it in a lot of other documentation as well. So I'll go ahead and install that. And anyone that's just jumping in now, we're very we're we just started, so all you have to do is just run NPX create React app and you'll see those directions and GitHub read me. You don't need to clone the project unless you'd like to. But, you know, essentially we're just using that that read me as a reference to build out this project ourselves from scratch. And I probably should have used Yarn because NPM is so slow these days. Or maybe I need to upgrade my version of NPM. Which node version? I would probably use at least 10.X, but I would probably just use the latest that's out there. So let me go to the Node.js release. So, yeah, I mean, it looks like the latest is like 14.18. I'm not sure if I'm even on that late, but yeah, anything like 12.X or 10.X even should be fine. Yeah, I totally recommend using Yarn instead of NPM. This is so slow. I haven't used NPM in a while. Again, maybe I'm on like an older version there. So is MetaMask Wallet browser specific? Or can it be used with other providers? Basically, I know there's a MetaMask extension for Chrome, Edge and Brave. I'm pretty sure there is not a Chrome extension. I'm sorry. I'm pretty sure there's no extension for Safari. You can interact with Binance Smart Chain. And there's one other Binance chain that you can interact with using MetaMask. You just have to use a custom RPC. Coinbase has their own wallet as well that you can install. So let's say you have your money on Coinbase. Coinbase has a browser wallet that allows you to log in and basically use as well. But I would say like most people recommend when you're interacting with different projects from a web browser, typically using a decentralized wallet like MetaMask is probably the best thing. Someone asked, what is a contract? A contract is essentially like the back end program of a blockchain app. It's the smart contract.

It's the smart contract. You could think of it as kind of like the server almost. This has your business logic for interacting with the program itself. So that took a long time to install. I will never use like NPM again. I'm definitely like spoiled by yarn.

OK, so now that we have installed our dependencies, let's keep on going. So now that we've gotten our project set up, we can now create and configure our hard hat environment, which again is our Ethereum development environment. And to do that, all we need to do is run NPX hard hat. So I'm going to go ahead and do that. So if I run NPX hard hat, this should go ahead and scaffold out a hard hat project. And we have a couple of different options. We're just going to use the basic sample project. And then once this is done, I'm going to walk through what actually happened here. So we'll click create basic sample project. We'll choose the project route. We'll add our get ignore. And now we have a local development environment created for us. That was pretty easy. But what actually happened there? So let's take a look at the changes that were made. So if we open our code base and our text editor. We can take a look, so I'm going to go ahead and open the project to my text editor.

OK, so our React app already gave us like node modules, public and SRC. Basically, what hard hat gave us was, first of all, this hard hat dot config dot JS. So this was created for us by hard hat. We also have this contracts folder right here. And the contracts folder holds our smart contracts. We also have. This scripts folder here and this scripts folder has an example script that we can use to basically deploy our smart contract to the blockchain. And we're going to look at both of those things in just a moment, but for right now, we're just kind of like reviewing what was added for us. And then the last thing that we have now is this test folder and the test folder has an example test that we can run if we'd like.

Someone asked, can we think of a blockchain as a database? Yeah, a lot of people reference it as a database. Some people call it an actual like computer because it does have a way to do computation and it does do computation. So you can run a lot of the same type of logic that you would write in a JavaScript application and a smart contract. You can also use it just as a database for storing and retrieving data. So, yeah, it's essentially a database. And it's also kind of like you can think of it as like a computer that is distributed across tens of thousands of different nodes that are all being run in a decentralized network. And you'll hear the word decentralized a lot in Web3 because essentially all of the different protocols like Ethereum are decentralized.

The one thing we want to focus on, though, is our hard hat configuration. And this basically is our local development environment configuration. And we really don't even need any of this code here. So I'm just going to delete all that. So all we really need to kind of make this function is this module that exports where we define the version of solidity that we want. And we're going to start there and then we're going to kind of modify this a little bit. The one thing we want to take into consideration. And let me go back here is the fact that we are in a React app and in a React app, we're going to be working out of this SRC directory. And if we try to import anything that is outside of this SRC directory from the from from within it, we get an error in react. So the reason I'm kind of mentioning that is that we need to get access to some artifacts that we're going to be creating from our smart contract that will need to interact with our program. And we want those artifacts to be located in the SRC directory. So we need to configure that. So basically, I want to go ahead and update the module exports with a couple of things. First of all, we're going to set the path here. For our artifacts, and I'll talk about what these artifacts are in just a moment, but if we look at our, you know, workshop, you'll see that this is kind of going to be our final configuration, so you're you're welcome to just copy and paste that in the hard hat config. But we basically first want to set this artifacts directory and the artifacts are basically going to be us compiling our smart contract here. Into machine-readable code for our JavaScript application, when you think of something like GraphQL, if you might have used that you end up creating GraphQL queries and mutation definitions that are text. Almost kind of like JSON type of objects that define the operation that's being sent across the network. So for a GraphQL query, you might say I want to query posts and I want to return the ID and the title or something like that. With Ethereum with our smart contract, we have something very similar to that. And it's called a B eyes and a B eyes are short for application binary interface. And the great thing about hard hat is that we can just pass in our smart contract and it will create and compile these things for us and we can then just import them into our front-end react application. And we want to define the directory where these artifacts are going to live so we're basically doing that here we're just basically saying okay. When we compile our smart contract, we want those artifacts to go in the SRC directory that way we can import those from app.js or wherever without having an error thread. And then, then, then the last thing we want to update is we want to define some configuration around the network chain ID. Now this is very specific to the way that hard hat I'm sorry, the way that MetaMask configures localhost by default, by default, you basically need to define a chain ID. And when we just installed MetaMask, if I go back to my browser, you'll see that we have the localhost 8545 network. So I might go ahead and switch to that. And it's probably actually not going to work because I don't have that network started yet. But let's say we did switch that network.

And it's probably actually not going to work because I don't have that network started yet. But let's say we did switch that network. You would know if we looked in the advanced settings that the chain ID is set to 1337 so therefore we're just kind of making sure that we have this chain ID matching what metamask is set to for localhost. And that's kind of that's kind of why we're doing that. And if you look at the hard hat documentation, there's probably a little bit more explanation there. But it's kind of more of like a setting you just want to do and not worry about why we're doing it right now.

Alright, cool. So we have our hard hat configuration setup. Next, let's go ahead and take a look at the smart contract that we're going to be working with. And the smart contract is in contracts slash greeter.sol. And.sol stands for solidity. And that's kind of the programming language that we're writing here. So a couple of things going on here. First of all, in any solidity program, you have to define a license or else you'll actually get an error when you try to deploy this. So you just have a commented out license, whatever that wants to be. So you might just say MIT or just leave it how it was before, whatever. Next, we want to define the version of solidity that we're writing. So in our hard hat config, you see that we have 0.8.4. And then here, we're basically just saying 0.8.0 or greater. So this should work. You know, with our hard hat configuration. The next thing we notice is that we have this import hard hat slash console. Now, this is really interesting, because by default, there is no easy way to kind of like log out information in your smart contract program. In JavaScript, we have console.log. And it's like, you know, pretty straightforward, and everyone understands it and uses it. So hard hat created this, I would say maybe like a helper utility that you can use to just also use that same syntax that we're used to using in JavaScript. So we can actually just say console.log and log out whatever we want, making it really, really easy to log information. So that's kind of what we're importing there. So someone said NPX hard hat just prints help. Have you already installed the dependencies before that in the same folder, like npm install or yarn add? Because if you haven't already installed hard hat, then that should, that might not show up. Can you look and see if you have the the contracts folder and the other folders already there? Maybe it did work. Okay, cool. Okay, cool. Alright. So let's take a look at the contract. So this is like, about 15 lines of code or so. And this is basically the entire program. And they're like two main functions. One is greet, and one is set greeting. We'll take a look at those in just a moment. And then we basically have our setup here, the initialization, you could say. So when this contract gets deployed, we first set a variable called greeting. And we set it just we just create it, actually, we don't really set a value on it. Private basically means that it can only be read from within the contract. If you want it to be read from outside of the contract, for instance, from a front end application, you would need to set it to public. But in our case, we're going to have a function that basically like returns that and then that function is public and therefore we can read it that way. We then have a constructor because by default, we haven't set this greeting to be anything. And our constructor, we can actually pass in an argument that sets that greeting. So that's kind of what's happening when we deploy this contract, we have to pass in some text into the argument to go ahead and set the greeting to whatever is passed in here as argument. So this is going to be basically invoked when we deploy the contract setting this initial variable. And then after it's been deployed, and we interact with it, we can call two separate methods, we can call the greet method, which basically just returns this string. And we see that is public, meaning it can be read from outside of the contract, meaning we can call it from our front end application. And then we have view. View basically means it's just returning some data from within the contract, and we're not making any state changes. With VS Code extension, I would probably just recommend this. I think there's a solidity syntax highlighter. That's probably the main one I would download for writing solidity code. Yeah. So yeah, the greet function is pretty basic, it just returns the string. And then we have the set greeting function. And this is actually going to be, you know, very simple, but this is actually updating the state, meaning that we're going to basically be taking in an argument called greeting. And we're just going to be updating the greeting to be whatever we pass in. So this is very, very, I think, straightforward. You know, we're setting the greeting when we deploy the contract, we have a function to read the greeting. And we have a function that can update the greeting. Someone asked, other than view there, yeah, there's a few other ones. Pure. I would actually go to the solidity docs and just Google, or maybe search, I would say for the different types of keywords. Yeah, you'll probably get a pretty good overview of them there. So with those three, or two, I guess, functions, we understand like, you know how this contract works.

Basically, we deploy it with an initial value, we can read the value, and then we can update the value. So when you think of CRUD, create, read, update, delete, you can't really delete in blockchain, because every interaction is like saved forever. But we can update and we can create and we can read. Alright, so now that we understand what's going on there, we're going to go ahead and close this out. And we'll go jump back into our tutorial here. And we can continue on.

So what we want to do next is compile our smart contract into the ABI or the application binary interface. And to do that, we can basically use hard hat again. And all we need to do is run NPX hard hat compile. This, this command is going to look into our hard hat config and look for the actual folder where we want to create these artifacts. And we set that artifacts folder to be SRC slash artifacts. So after we run this program, we should see a new folder show up there. So if I go back to my terminal, and I run NPX hard hat compile from the root of the project. Now look inside my source directory, I should now see this new folder called artifacts. And indeed, we see that there. And, and the contracts, we're going to see basically, these two folder, I mean, these two files, we don't really need to mess with or anything. But these are the ABI's. Actually, this one is ABI. It's basically some JSON that kind of describes what's going on. And we can basically import that we never really need to open that and look at it just kind of want to show you what's there. So now that we've compiled our, our contract, we can now consider starting to maybe like interact with it.

So we need to think about interactions with a blockchain a lot differently than you might think of interactions with a typical database. Because when you write data to a database, you're typically going to be using some type of application that is hosted on AWS, or something like that. You know, whatever super base and the person that deployed that program is paying for that hosting service. I think the main fundamental difference is for the most part, when you're running, or you're interacting with a blockchain network, that the operations that happen on chain have to be paid for at the time of that operation happening. Now, sometimes you actually see this implemented on the server somewhere where they basically have a private key, and you're able to basically just call, you know, a back end, and they're doing it that way. But most of the time, you're actually going to be interacting with it and paying for this transaction yourself. Now, these transactions can run anywhere from a fraction of a penny, like when we're interacting with Solana, or are we've, or you're going to be working with something like aetherium, where it's kind of expensive right now. And I think that the reason that you're seeing a limited type of application being built on aetherium is because of how limited you are right now, for those types of payments. So if you're going to be doing some type of decentralized finance stuff, where you're transacting, you know, hundreds of dollars, it might make sense to pay a few dollars for a transaction. But let's say you want to just do something really basic. Anything over a couple of dollars is doesn't make a lot of sense. So I think that's why you're seeing, you know, all types of new blockchain protocols that are more scalable, and maybe less expensive and stuff come out for different other types of use cases. And you're also, you know, needing to understand maybe that the way that you build one of these applications is going to be a lot different. You might only store very important information on chain. And then you might use some other type of decentralized storage that's free for other types of stuff. So that's just all fundamental, like things to think about as we're going about this. But basically, what we want to do now is we want to basically deploy our contract to a local network. So we can deploy to the aetherium main network, or we can also deploy to one of these test networks that are out there. But to do that, we need to go ahead and find aetherium, you know, test aetherium and send it to our wallet. And it's kind of, you know, a bunch of steps, though the most the, you know, the best way is to deploy it to a local network. And the best way I would say for local testing and development is to use a local network. And we can actually create a local network just by running NPX hard hat node. So I can just copy this, and I'm going to split my terminal into a couple of new windows, because we're going to need to run multiple windows. And I'm just going to clear this out. And the first thing I want to do is go ahead and create a local network, run a local aetherium node. And I can do that by running NPX hard hat node. And this will go ahead and start a local test network, a local aetherium node, and it will give me 19 test accounts. And each one of these accounts I can actually import into my metamask wallet. And I'm starting off with 10,000, at the 10,000 ETH, which means I can have some money to test out my program with. Because when I write a transaction, I'm going to need to pay some type of ETH to write to the block to the network. And now I have 10,000 ETH spread or multiplied by 20 on 20 different accounts that I can use. Alright, so what we're going to do next is go back to our tutorial. And we're going to go ahead and deploy our program to that test network. So to do that, we have a script located at scripts slash sample script.js. So let's go ahead and take a look at that. And I'm going to delete all of the comments and stuff to make this a little bit more easy to read. Alright, so not a whole lot going on here. There's really only four lines of code, or really three lines of code that we need to deploy this. First of all, we're getting a reference to the contract by saying ethers dot get contract factory and paste pasting in the string for the name of the contract. Now we're able to do this because in our hard hat config, we basically are setting the path for the artifacts. And then this is going to look in that path and it's going to find the artifact for the greeter. And this is essentially going to be getting the ABI and making it available right here in this line of code. The next function that we're going to call is greeter dot deploy. And this basically now that we have a reference to this contract, we can call deploy and then we can pass in the constructor argument. In our case, we want to set that initial value for greeting. So this could be whatever. So I could say react. London or something like that. And this will be the initial value for our program.

And then basically here, what we're going to do is wait for the deployment to be successful. So we're going to say a weight creator deployed. And once this has successfully deployed, we're going to log out the address for our contract deployment. And we need this address to talk to our program. When you think of a typical web application, when you deploy a project or you deploy an API, I would say you're given an API endpoint. And it's typically something like HTTP colon, you know, my project dot com slash API. And the blockchain world, instead of using an API endpoint, use a combination of two things. You use an RPC address, which is a way to talk to the Ethereum network. So for Ethereum mainnet, it would be something like whatever. There's a handful of them that you can use. There's public RPC endpoints. And there's also private RPC endpoints that people are like running their own Ethereum node or people are running Ethereum nodes as a service. And you get this HTTP endpoint. But for our example, we're running a local network. So we already have our network set up. All we need to do now that we're running a local node is just jump to custom. I'm sorry, jump to local as 8545. So our our our Ethereum node or RPC endpoint is local as 8545. We already have that set up. So the two things we need are the RPC endpoint and then the contract deployment address. So the way that we get that is we just log it out here. You can also do a Node.js script or something here where you're writing it to a file somewhere. And then you can just read it and have that more automated. So you might use something like the file service and write to write some JSON or JavaScript and make it available. But we're going to basically be copying and pasting it from here. All right. Yes, deploy and deployed or built in methods. So what we want to do now is also let's rename sample script to deploy it because that makes a lot more sense. And now we can say, OK, we want to deploy by running this script, and that's what's actually happening. So it just makes a lot more sense. All right. So these two lines of code really are the main things happening. And then we're going to just like wait for that, wait for that deployment and then log out the contract address. All right, so let's go ahead and test this out. So to deploy, we can run NPX hard hat run scripts slash deployed JS and we can set the network to be localized. And what should happen is that you should see this logging out some stuff. What's. So NPX hard hat run scripts slash deployed JS and we're going to set the network to be localized. And if that's deployed successfully, you should see something like this deploying a greeter with greeting. Hello, React London. And we have a lot of information about the transaction, the deployment, the contract address, the transaction, who it's from, you know, the amount of gas use and so on and so forth. So if that deploys successfully, we should also have this log out to the to the console greeter deployed to. And then this is our contract address. So this is the address on the network. This is like a deployed to a theory and main that we would be able to actually go look at this, but it's employed to localize. But we're still going to be needing this address in just a moment. Cool, so we are getting there. So now that we've deployed that, we can start interacting with the program from our front end. But to do that, we first want to make sure we configure MetaMask with an account. That has some Ethereum. Because right now, all of our accounts don't have any Ethereum. We only have one account. So, of course, you can add other accounts by just clicking create account, but none of these are going to have any Ethereum either. What we need to do is, you know, once you've set your network to be local host, we want to import one of the accounts that was created by the Ethereum node. And we can do that just by referencing this private key. So we have like 20 different accounts. Each account has a private key and an account ID or an account address. So what we want to do is copy this private key to our clipboard. So I'm going to go ahead and highlight it, copy it, jump back to the browser. And here you can kind of see where we're going next with this. We want to go to import account. So I can go ahead and open Ethereum. I'm sorry, MetaMask. And I'm going to click import account. And I'm going to paste in the private key. And click import. And now in our wallet, we should see that we have non 99 99 point something ETH. The reason that we have that much instead of 10,000 is because if you are using account zero, which is what I'm using here, then when we deploy the contract itself, we use some of our Ethereum to pay for that deployment. If you imported account one or later, then you should have the whole 10,000 in your address in your account. And it doesn't really matter.

You can you can do either way. And someone else's that fail to connect to localhost. If, if you're seeing that, that means your Ethereum node might not be running. So just make sure that you've run NPX hard hat node. And if that is running, then you should be able to connect. And if not, then I can check on that during the next break.

Okay, cool. So now that we've connected to localhost, and we've imported one of our accounts, and we see that we have some ETH, we can now basically go ahead and run our program and interact with it. So what we want to do is we want to go ahead and write our react app. So our back end is running, it's deployed, we're kind of ready to go. Now we want to change our front end.

Alright, so I'm gonna go ahead and start copying and pasting some of this code and walking through it. So I'm going to open up dot j s. And here we're importing use state. From react, which is going to be what we're using to deal with local state. We're importing the ethers library from ethers, which is going to be how we interact with the network. And then we're importing this greeter ABI, which is here in artifacts slash contracts slash reader dot soul slash reader dot JSON. So again, that's the ABI. Next, we want to go ahead and define the address of our contract. And that was logged out to the terminal for a second ago. So I should be able to go to my terminal and copy that to my clipboard here. paste it there. The next thing we want to do is go ahead and define the app. And this is going to be our main component. We're going to go ahead and configure our app. And this is going to be our main component. We're going to go ahead and configure our local state. And the only state variable that we need to deal with right now is going to be the greeting and setting the greeting value. This way the user can type in what they want the greeting to be updated to and then we can basically send a new transaction to update that value. The next thing we're going to do is kind of interesting is we're going to have a function called request account. Now this is really completely new to most people and to myself when I started working with Ethereum. It's interesting for a couple different reasons. First of all, when someone has a wallet like MetaMask or Phantom or Arweave installed in their browser, what basically happens in addition to us having access to this wallet is that it injects a global variable into the context of the window called Ethereum or Arweave or in this case Solana. So we basically have access to something called window.ethereum. And this has a lot of different things that we can do now, now that we have this installed. And now if you tried to run this, this function on a browser that didn't have this, you just get an error. So what you might do if you wanted to kind of do some error handling, you might say if window.ethereum and then you might, you know, do stuff. But we're just assuming that this exists. And we're going to call a theory of window.ethereum.request. And we want to request their accounts. And this is going to allow the user to choose the account that they would like to connect with. You can even have a return value from this and log it out if you'd like. But we don't really need that, that value right now. All we want to do is just connect to that wallet and this will probably be the only thing that we're going to do. All we want to do is just connect to that wallet and this will prompt them and allow them to sign in with their Ethereum wallet. And that's very, you know, that's not a lot of code to make that happen. It's pretty nice. We want to go ahead now and create two functions, one function to fetch the greeting, and then another function to write the greeting. And here you can see that we're checking to make sure that window.ethereum exists. And then the rest of the code is right here. And the way that we interact with the Ethereum node or the network itself is using these things that are called providers. And there are a couple of different types of providers. You have a provider that allows you to have read access for a completely public function like the greet function that we're interacting with. And then you also have functions that need to be signed for creating an actual transaction for writing data. And that's we're going to be doing a signer or a write transaction set greeting. But for fetch greeting, we just need to read information. So this is pretty straightforward. We say we want to do ethers.providers.web3provider. And we're passing in the window.ethereum context. And then we get a reference to the actual smart contract itself by calling ethers.contract, passing in three arguments. We pass in the address of the contract, which is we defined this variable earlier. We pass in the ABI, which is the almost kind of like API for this smart contract. And then we pass in the provider. And now we can use this to call any of the different methods in our contract. So we had a function called fetch. This would be really any read functions. So anything that we wanted to read from the contract, we can now just use this contract to call it. So we can call those functions directly. And what we're doing here is we're calling contract.greet. And we're waiting for that data to come back.

And then we're just logging it out. So really basic stuff. We're getting access to the contract. We're reading the data from the contract and we're logging it out.

All right, the next thing we're going to do is create the set greeting function. And this is very similar in the sense that we're creating a provider. And we're doing the same line of code here where we call it new ethers.providers.web3provider. But instead of just using that provider directly in the contract creation, we're creating a signer. And we say provider.getsigner. And this is going to prompt the user to basically be able to sign this transaction. And then instead of passing in the provider, when we create the contract reference, we're passing in the signer. So we have this, just this one extra step. And then we call contract.setGreeting. Just like we called contract.greet, we're just calling the function within the contract. And here we're passing in an argument of greeting. And this greeting is this state variable that we set right here. So we're letting the user basically update the local state by typing.

And the last thing we have is a really basic user interface where we have a form, where we have two buttons. One for fetching the greeting and calling fetchGreeting. And the other for setting the greeting. And we have an input for allowing the user to update the greeting.

I'm going to check on the chat real quick. Yes, if you want to define the greeter address dynamically, you can just write a function in that deploy script that writes to the local file system. So I typically use FS from, you know, from Node, from I'm sorry. Yeah, it's like a Node.js package you can install, call it whatever you want. You can say FS.writeFileSync. And you can maybe just write that to a local file to make that a little easier. It's essentially like one or two lines of code. And then the, but it's not really built in. I don't think to either. It's a hard hat that I know of. There is an extension you can install. Actually, that does that, but it's not, it's not into the main, the main package. So I'm going to go ahead and run that.

Is there a way to update contract logic without affecting data already stored? No, not really. That's why Ethereum. That's why blockchain development is so complex. That's one of the reasons is that if you do want to have an update to contract logic, you need to deploy a new contract. And then you also end up having new state. Now, there are some interesting ways to do stuff that bypasses some of these, I guess you could call constraints. One of those is a proxy contract, meaning that you have your proxy contract that will point to another contract. And then you can basically have a function in your proxy that allows you to update where that, that pointer is. So that's one way to do that. There's, there are a few other different things you can do, but, but by nature, yeah, that's the whole idea. You can't really update things. But a lot of people do, do use proxy contracts.

OK, cool. So we're done writing our user interface. And, you know, I kind of walk through each individual function to kind of go through, but in reality, you know, most of the functionality happening there, that is Ethereum or blockchain specific is just maybe four or five lines of code. And we'll go ahead and start our app by running npm start. So I'll run it down here because I want to make sure. I've referenced all this other stuff we've been doing. OK, cool. So this is what our app looks like. It's really, really basic. No, no nice design or anything. We're focused on functionality for the most part here. So what I want to do is go ahead and just call fetch greeting. And here we see hello, we are in London. So we're, we're, we're interacting with the contract. And then we want to go ahead and update this. So I can just call set greeting and this will now prompt me to connect my wallet and the wallet that I want to connect is the one that has Ethereum in it. And then now it's going to actually ask me to pay for this transaction. So the transaction cost is point zero zero whatever zeros six three.

And here we see hello, we are in London. So we're, we're, we're interacting with the contract. And then we want to go ahead and update this. So I can just call set greeting and this will now prompt me to connect my wallet and the wallet that I want to connect is the one that has Ethereum in it. And then now it's going to actually ask me to pay for this transaction. So the transaction cost is point zero zero whatever zeros six three. So if I click confirm, then I see that we've now updated the greeting. And if I refresh. And I'll call fetch greeting. And we now see that we have our updated greeting. And another thing you'll notice is that when you're when you're interacting with the contract, you'll see this logged out to your Ethereum node that a contract call has been made, either a read or write operations are all logged out here.

All right, so doesn't look like there's any questions there. Let me check out the other chat here. Okay, good. Yeah, not not a ton of questions right now. So yeah, does anyone have any questions there before we move on to the next portion of this?

Okay, good. So I'm going to go ahead and close this out. And I'm going to go ahead and close this out. And I'm going to go ahead and close this out. So yeah, does anyone have any questions there before we move on to the next portion of this? Are anyone running into any issues? Okay. A couple people typing, so I'm going to wait for those questions to come through. Cool, looks like working good for a couple people. So just to confirm, we are actually able to write this transaction to the deployed contract. That's right. Yeah. So we're writing this, we're making state changes on the blockchain whenever we write a transaction. Now, you typically wouldn't probably have this, again, this type of application for Ethereum mainnet. You often see, you know, high value transactions on Ethereum mainnet because of how expensive it is to have a transaction. You have DeFi, you have, you know, financial stuff. You have ART, you know, people selling things that are hundreds of dollars. What you do have, though, is Ethereum layer twos that you can use all of the skills that we're learning to write on. And those transaction costs are in the fractions of a penny. And that just essentially lowers the barrier to entry to different other use cases. So, you know, you could basically say, OK, only a certain type of application is worth paying a couple of dollars for a transaction, high value transactions. What if I just wanted to send five dollars or a dollar to one of my friends? Then the fraction of a penny, like, makes a lot of sense. Or if you want to build in some type of financial use case that is less expensive, DAOs and things like that make a lot of sense as well. So someone asked the question, if I want to create a game, how can we create a smart contract with Tom Stamps to trigger the smart contract after a period of time? Yeah, so that's a good question. And that's one of the questions that I also had. The idea around like Cron jobs, I guess, is kind of like the idea there. And when you think of how you build a typical server based API or server based application, you can set up these these these Cron jobs or these triggers that get invoked every like hour or every certain point in time every day. This is not built into the Ethereum virtual machine. You can't just say I want to invoke this function every X number of minutes. But what you can do, though, is just spin up like a Lambda function or something like that in AWS. And you can call the contract from there every X, you know, every so often and do it that way. So people do do do Cron jobs and stuff, but it's not native to how you can't. You can't write it directly into the Solidity code. Someone asked, why is window.ethereum there? That's a good question. So if someone has a browser wallet like like Metamask installed, then window.ethereum will be available to there. So let's say you have not Metamask, but maybe a different wallet. As long as it's an Ethereum wallet, then window.ethereum will be there. And if you have a Solana wallet like Phantom, you'll have window.Solana there. And you can also call functions like window.Solana.isPhantom will tell you if the if the Phantom wallet is the type of wallet. So all types of stuff like that is injected in the window. So if you install Metamask, window.Ethereum will automatically be there. Yeah, you can think of the contract like a server responding to API calls. It's exactly that how you could think of it.

All right, cool. So the next use case that we're going to look at, and. So the whole point of this contract is more of like a introduction to how you might interact with the network. Versus an actual like real world use case, even even this minting tokens example isn't probably the most real world use case. I think the one interesting thing that we're going to look at, though, is this transfer function. And this transfer function gives you a real. Like example of how you can transfer value between parties and only like five lines of code. Versus maybe what you might have experienced in any other type of e-commerce trying to write this type of code yourself. I think this is a really interesting use case. Now, if you want to learn about Ethereum, Dapps, like what apps are being built on Ethereum. A good example or a good view of some of the examples, if you just go to explore Dapps on Ethereum.org, you can see like finance, arts and collectibles, gaming and technology. I think one of the interesting ones for me is is Axie Infinity. And I'm trying to think I saw I saw a chart today where their growth in the last three months has been some ridiculous number. But with Axie Infinity, it's it's a blockchain based video game that allows people to make or to earn tokens while they're playing. So it's like play to earn. But you can also buy and sell items within the game. So if you think of Fortnite, I have a couple of kids and I spend hundreds of dollars a year probably. Or they spend also all the money, a lot of it they get on Fortnite. You get these skins, but like once they grow out of it, like the skins are gone. With Axie Infinity, you actually can resell all of the things that you buy in game. So you have now I think growth of something like they had one month of of growth where they hit like over 800 million dollars in transactions like last month. And they've grown even even faster since since I saw that, because I saw some tweet today that was kind of like kind of blew me away. So I thought that was a really interesting thing. And you're starting to see now that all of the big gaming studios are starting to realize that this is a big potential. So the head of YouTube Gaming was recently talking about how they're looking at ways to collaborate and do stuff with with crypto within games and dealing with Web3 types of ideas.

You also have a few of the big gaming studios that have been actively talking about it even today. Just in general, like crypto like awareness, like Stripe just announced today that they're doing a big push for a new crypto team and they're hiring a bunch of people for that within Stripe. And Stripe has been really anti crypto actually up until recently. So that's pretty interesting. So like right now, a lot of the use cases fall in these categories, finance, arts and collectibles, gaming and technology. I think, though, with the lesser expensive chains like Arbitrum and Optimism, Solana and even like Avalanche, you're starting to see now more broad use cases like we haven't seen the big social media application yet that allows people to earn for using the platform itself. So I think that is going to happen sometime soon. Yeah. And get requests are free. So, yeah, so get requests are free. I think that's one of the also one of the really interesting things about building on the blockchain is that your data stays there literally forever. As long as the network is up and running, Ethereum has never gone down. Maybe that I know of. Maybe maybe it has for like a short amount of time at some point. But from what I understand, it never has. But once you write data to the blockchain, it stays there forever. So like I mentioned, one of the projects that I'm working on that I think is going to be interesting is a blog that once I write a blog post and I pay, I think it was two or three cents for the transaction on Solana and Arweave, that it lives there forever. I never have to pay anything again in the future. And if I forget to pay my hosting bill, it doesn't go down. But it's also public and accessible by anybody. And I think a lot of the ideas are on Web3 or are people building out front ends to compete on different back end data. And a good example of this is the NFT space where you have Foundation, Zora, OpenSea and SuperRare and Rarible. You have like half dozen marketplaces that are now building out interfaces on top of all this this application data. So I think that's a really basic example like NFTs isn't applicable to most things, but you'll see that same idea play out. I think when someone builds the YouTube of Web3, the social media of Web3, Instagram of Web3 and those sorts of things. Another good place to see types of apps that people are building is if you go to the graph.com. This is actually where I work or one of the protocols I work closely with, I guess you could say. And you go to sub graphs. These are kind of like APIs that people have built. And you go to actually I'm going to go to the hosted service because this has some more APIs. Here you can see a good example of some of the different types of applications that are popular and the different APIs that people are building. A lot of these are around DeFi and gaming.

OK, cool. So someone asked, I'm getting this error trying to send a raw transaction with an invalid chain ID. So. Two things we're going to do to debug that. First of all, I would double check that you have the chain ID set up right here is 1337. And if you don't, this is documented in the readme. So just make sure that you have this set up to chain ID 1337. And then if that is already done and it's still not working, you can go to reset your account. And this isn't going to delete your account. It's just going to reset the transaction history. And the way that you can do that is by going to your Metamask wallet, opening the settings here. And then going to advance. And then going to advance. And then clicking reset account. So those are the two things I would double check to make sure you're good to go.

Alright. So I think the next thing we're going to be looking at is tokens, but I think that since we are at 20 minutes after the hour, it might be a good time to take a break to allow people to to maybe get caught up or to take a restroom or drink break. So what we'll do is we're going to start back at 35 minutes after the hour. So that's almost exactly 15 minutes from now. So let's take a 15 minute break. We will come back at 1235 my time, which is going to be like 1035 a.m. Pacific time. It will be one thirty five p.m. Eastern time. And I'm not sure the time in Europe where you where you are, but let's say 35 minutes after the hour. And I will be hanging out drinking coffee and I will be checking out questions on Discord. And I will be hanging out drinking coffee and I will be checking out questions on Discord. And I will be checking out questions on Discord. And I will be checking out questions on Discord. And I will be checking out questions on Discord.

Alright. Looks like it is time to continue on. So it looks like some people were having some fun during the break, sending themselves tokens to other wallets, which is cool. And it's a good way to experiment because you do have multiple accounts and you can send them to different accounts doing that. So let's say I wanted to send some tokens to this account. I can just open this account, copy to my clipboard, go back here and send and transfer them between my accounts or I can paste the address here either way. And I might want to send like, you know, 100 ETH to that address. Should be able to go here and now see that I have 100. And this is similar to what we're going to be doing in just a moment. But we're going to be doing it with our own tokens that we create and we're going to be doing it programmatically via a front end application.

One of the most interesting things about smart contract development is the ability to send payments between different parties within the contract itself. Also to program and things like commissions and fees into a contract that can be sent to a certain address, which is pretty interesting when you think about how marketplaces work today. All the different types of digital marketplaces there are today. You can think of what people are buying and selling digitally. So for instance, you have things like, I would say, Spotify, you have YouTube, you have people that are selling digital courses. You have, of course, the NFTs, which are like Web3 types of technology. But in general, you have all types of digital payments that can happen. One of the really interesting things is that we can basically abstract that away and make it part of the contract itself. So we don't need to have any payment provider. We just allow people to transact directly between different parties without any intermediary. So I mentioned earlier that this transfer function is going to be what's going on there. But instead of just touching on that, let's go ahead and copy this whole contract. And we're going to walk through all of this code. So I'm going to copy this and I'm going to create a new file called token.sol. And this is going to be in the contracts directory. So if I go ahead and open up my project code base. And I go to contracts at the root level here. And I create a new file called token.sol. I can go ahead and paste this new contract here. So we're doing all the same stuff when we get started. We're just importing hardhat.console. And we're setting our Solidity version and all that. And our main functionality is happening in these 20 lines of code. So we have a contract called token. We set a few initial pieces of state. So the first thing that we're doing is we're setting the name of our token to be lazy cats token or whatever you'd like. We're setting a symbol. And here we're just setting it as LCT. And we're setting the supply to be 1 million.

And we're setting the supply to be 1 million. So here we have a value that we're setting as a variable name called token supply. And the amount is 1 million. And then we have something that's kind of interesting, this mapping. And this is a way to do a key value pair type of operation in Solidity, almost kind of like an object where you have an object. In our case, it's going to be called balances. And then balances is going to have a key. And the key is going to be an address. And the value is going to be an integer. So this way, we can add multiple values if we wanted here. But in reality, we're only going to have one. So this mapping you can think of as kind of like a map or an object in another programming language.

And then in our constructor, we have a one-liner of code where we are basically going to go ahead and set the total supply of the person that is deploying this contract to be the total supply of what we set here. And this is going to say, OK, we have this mapping called balances. And we want to go ahead and set that the person deploying this contract has a balance of one million of these tokens, essentially. Now, the way that we are able to access who the person deploying this contract is, is a very special value that we're able to reference called message.sender. This means that the person that is interacting with the contract is going to be the message sender. So this means either the person deploying the contract or the person interacting with the contract sending a transaction is going to be message.sender. So we get the ability to kind of have access to that person. It's almost like if you were doing some type of authentication mechanism on the server, you might be able to parse that JWT or parse the session out of the operation and get whoever that user's identity is. This is kind of like that, except it's native and it's part of how Ethereum virtual machine works. And we don't really need to write any code. It just always is available for us as message.sender. So we're transferring the one million tokens to the person that deploys this contract. That's essentially what's happening. And then we have two functions. One allows us to transfer tokens between two parties and one allows us to read the balance of the person interacting. So the balance of takes in an address. And here we can go ahead and check in that mapping to see the balances of that account. So when we deploy this contract, there's only going to be one account and it's going to be the person that deployed this and they're going to have a balance of one million. But if we start transacting, if we start sending tokens between parties, this mapping will have multiple different values. So we'll have one person with like X number of tokens, another person with X number of tokens and so on and so forth. But this transfer function is where we actually go ahead and send tokens between different parties. So what we have going on here is three lines of code. The first thing that we're doing is a require statement. And if you've ever done any type of like if logic in a JavaScript application, you might say if this value is true, then do that requires kind of like an if statement that says if this is not true, then we're going to stop execution at this point. So this require is essentially saying we are requiring this to be true. And if not, we're going to throw this error here. So the requirement is the person that is trying to send tokens needs to have that many tokens and their balance. And if not, of course, they can't do this operation anyway. So we want to go ahead and throw an error. And then the next two things that we're doing are pretty basic. We're subtracting the tokens from the user's account and then depositing them in the sender's account. I'm sorry, we're subtracting the tokens from the sender's account and depositing them in the account that they've specified, I guess is a better way to put it. So we're checking to make sure the sender has that amount of tokens in their account. We then transfer them outside of the person that's sending this transaction and transfer them to the user's address that's passed in as an argument. And the other argument is just the amount. So this way, we're kind of updating the balance of the of the user. Of the users, I guess you could say plural in this case.

OK, cool, so we basically have 15 lines of code, actually, that was like 20 lines of code, and we're doing quite a bit there. So let's go ahead and save that contract and continue on. We can now call MPX hard hat compile again because we now have a new contract. And if this compiles successfully, then we should be able to go into our artifacts directory and just see that we have now a new token contract. So we don't really need to touch that, but it's just good to kind of see that it's that it's been compiled. The next thing we want to do is we want to update our deploy script. Because right now, our deploy script is only deploying the greeter and we now want to also deploy the token. So. I'm going to go ahead and get a reference to the token contract and all of this stuff is exactly in the in the documentation. We're going to go ahead and get a reference to the token contract. We're going to go ahead and deploy the token. We're going to go ahead and deploy the token. And then just like we did before. We're going to wait for the deployment to be successful, and then we'll just log out the token address. So. Exact same code that we wrote here, I think the main difference is that in the deploy function here, we're passing in a constructor value. But here we have hard coded everything. So we don't have any constructor value. So we just leave that argument blank. Yeah, you can you can program multiple addresses in a contract like when you deploy this, you could basically have an array and you could just distribute these tokens between like a certain number of parties. All right, cool.

So. We have written our deployment script, so we can now continue on. Kind of just done this part here. And now we want to deploy our contract. To our local Ethereum node again, because now we've updated some stuff, we want to go ahead and deploy again. So the way that we can do that is we can just run the same script that we ran before this script right here. So we run NPX hard hat. Run scripts, slash deploy. And they want to set the network. As local as. And this script is, you know, and the tutorial and the. And the workshop material. So if I run this, we should now see that we see some logging happen here and we now have the two different contract addresses logged out here. So we have the greeter and we now have the new one for the token. So the token's been deployed. So let's now update our front end to start interacting with that. So to do that, I will go ahead and start importing some new stuff. So I'm going to go ahead and open SRC slash app dot JS. I'm going to go to the top here. So we already have the greeter imported, so I'm going to now import the token. We also have the greeter address. We don't yet have the token address. So I'll go ahead and set that. So if I go back to my terminal. I can actually let me go ahead and update the greeter as well, since we deployed a new version of it. And then I don't think you have to. I think they both will still work. But either way, I'm going to go ahead and set the token address here.

Next, we want to go ahead and create a couple of new things. Next, we want to go ahead and create a couple of new pieces of state. We're going to have a form that allows the user to send tokens to another account, so we need to keep up with two pieces of state. We need the amount of tokens and then the account number that we want to send the tokens to. The next thing we want to do is have a function to get the token balance of the user that is calling the function. So I'm going to go below these two functions. And I'm going to create a new function called get balance. And one interesting thing that we're doing here that we haven't really done before is that we're calling this window.ethereum.request like we did earlier. But we're setting the return value as a variable. That's because when you call window.ethereum.request, you're given an array of accounts that the user has, I would say, allowed the application to use. And since we've only allowed this application to use one single account, we're just going to grab the first account out of that array. So this should be the account that we've been using all along. The next thing we do is like we do the same provider stuff, but here when we call contract.balanceof, we're passing in the account of the user that is currently signed in. So this is kind of going to be us passing in this variable into the balance of and if we go to token.sol, you'll see balance of takes in, you know, one argument for an address. And here we're passing in that address. The next function that we're going to write is send coins. This is going to be using a signer because we're basically needing to sign a transaction and approve a transfer between two parties. And what we're going to do is we want to call contract.transfer passing in two arguments. One is going to be the account that we'd like to send to and the other is the amount. And we set those variables earlier like right here. So we have user account, set user account, amount and set amount. We're going to be updating, you know, set amount and set user account in the UI in just a moment, but those variables will be available to us here. And then we wait for that transaction to complete and then we just log out, you know, that it successfully transfer. Looks like someone's having an error. Okay, looks like they got it working. Okay, good. Okay, the next thing we'll do is we'll update our user interface now. So we added, you know, get balance. We added send coins. And now we want to add this code right here. So I'll just go ahead and maybe copy this. Okay, so we've got our user interface. So I'll just go ahead and maybe copy this. I'm doing this all I guess within this header. Okay, so we're just adding like a line break here. And then we're adding a button for getting the balance, a button for sending the coins, a form input that allows us to set the user account. That we want to send the coins to. And then we have a form input that allows us to define the amount that we'd like to send.

Okay, so we have that. The next thing that we're doing is kind of interesting. When we deployed this contract, we were given a address for this token. Now this is an address that we can now actually import into our MetaMask wallet and see that balance in our wallet.

So the way that we do that is we just copy this to our clipboard. And I have this kind of outline here. But what we're going to do is we're going to go here to add token. And it looks like we now need to, looks like the interface maybe has changed since I did this. So import tokens. So I need to update that. So import tokens. And we're going to paste in the token contract address. And you see that when we paste in the address, we see the symbol shows up automatically. That means it's realizing that. And for the token decimal, we're just going to put 0.1. And then we're going to click add custom token.

So here we have now our LazyCats tokens in our wallet. So we now have 1 million LazyCat tokens. So we have ETH. Oops. Yeah, we have ETH now and LCT. Cool. So now that we have our new tokens in our wallet, we can actually import them into our MetaMask wallet. And we can now start sending these to other people.

So what I'll do is I'll just save this and I'll go back to my React app. And we should now see that we have an updated user interface. So if we click get balance, we should see that we have a balance of 1 million. And now we want to send these to someone else. So I might say, let's just, you know, send to another address here, I guess. So I'll go ahead and click on account 2. And just copy this address to my clipboard. Go back to account 3. And here I can paste in the account ID and then the amount. I'm going to send them 100,000. So if I click send coins. And it looks like I have some type of error. Not sure what's going on there. Huh. Interesting. Looks like I've had a bug in MetaMask. Is anyone else getting a bug? And I don't think I saved my wallet's information. So I might need to delete this wallet. And then reinstall it. And I don't think I saved my wallet's information. So I might need to delete this wallet. And then reinstall it. Yep, I'm going to have to do that. So I'm going to remove. Wow, interesting. Someone else had the same error. So I have to go through this whole process again. So I apologize. This will be that entire process again. Maybe I should save this passphrase just in case. Okay. Looks like I messed something up. Let me try this again. Oh gosh, I messed something up again. There we go. Okay, cool. So I'm going to go ahead and save this. Passphrase just in case that happens again. So I have MetaMask installed. I now want to. Go ahead and. Import this account address. Which I need to go ahead and restart the node. Okay. I want to go ahead and redeploy this contract. Update the token address. And then try to import the token address here. Okay. Let me try that again. Okay. Okay. Let me try that again. Okay. Um, what I might do, and I'm not sure if this had any reason to do with that, but I might go ahead and import another. One of these accounts to use instead of like using the MetaMask account. So I'm gonna go and copy this private key. And. I will go here and I will say import account. And I'm going to use this account. So to send to somebody and copy this address and go back to account to. Okay. And I'm going to go ahead and import this account.

And I'm going to go ahead and import this account. So I'm gonna go and copy this address and go back to account to. And I want to send coins to this address. We'll try this again. I'm hitting this error again. I wonder if it's the way I imported that account. Let me try one more time. Okay. All right. All right. All right, let me go ahead and copy this token address. And I'm going to import the token. And maybe I'll set the token decimal is zero. Wondering if that's what what messed it up. So I'm setting the token decimal to zero. I'm hoping that this will fix the issue and maybe I was. I was wrong about the token decimal. All right. So with that being said, let's try this one more time. I will go ahead and refresh. Send coins there. One hundred thousand. First get balance. First get balance. The balance looks good. OK, there we go. I think for some reason I was mistaken around the token decimal. The decimal matters because when you're dealing with Ethereum, you're actually like with ETH, which is the native, you know, currency of interacting on the Ethereum blockchain. You're actually working at 18 decimals and you have, you know, the ability to send, you know, portions of an ETH down to the 18th decimal. And these things are a little bit beyond the scope of this, I would say, workshop. But it is definitely something to look into. And the way that we are able to kind of deal with these large orders of numbers is you have this idea of way and way. One way is one one 18th of a decimal of of ether and one way is eight decimals. So when you want to send, you know, these these massive numbers of decimals, you're dealing with like these things. So typically when you deploy your own token, you set the token to have 18 decimals as well. But in our case, we set it as zero decimals. So I think when I tried to transact at point one decimals, it kind of figured out that there was something wrong there. Anyway, we should be able to click confirm and see that one hundred thousand coins were successfully sent there. So if you had the same error as me and you were listening to me to do one point one decimals, that was the error. When you're importing the token, it should just be zero decimals. And I'll make sure I update the workshop material to reflect that. If you're getting. Yeah, if you're if you're sending 10 and getting point one, that's because I messed the decimals up when once you set it to zero, it should work good. I'm getting a balance of zero instead of one million. Yeah, maybe it's imported into the wrong account. Make sure that the the account that you are importing should be this account zero for like where the hundred thousand tokens should show up. They're not going to show up in any of these other accounts, only an account zero. And the reason for that is when you deploy the contract. Using the CLI automatically uses account zero something. Yeah, I use zero as the decimal. So what I should now be able to do, though, when I when I check my balance, it should now be at nine hundred thousand. But if I switch over to this other account. Connect to it and I get the balance, I should now have a balance of one hundred thousand. And, you know, we could continue sending these on to other parties as well. Say I wanted to send a hundred like fifty thousand back to this account. You know, I can go here and do that. And it looks like I don't have enough. I don't have any Ethereum to send, so you have to have either to send. OK, cool. It looks like zero is working. Oh, you know what? I even have it in the tutorial to use zero. I don't know why I thought point one anyway. All right, let's continue on now, the way that we just use tokens is kind of very crude. We hard coded everything. There is no security. There aren't a lot of things that you typically need for a financial transaction, especially when you're dealing with actual value like you are in Ethereum. The great thing about the Ethereum ecosystem is that there are a lot of things that have been figured out already. And a lot of this stuff is already open source and standardized. And because transacting value is such a commonplace thing when you're dealing with digital currency within smart contracts, you have a lot of things that have already been tried and tested out and standardized, like I said. So one of those things is you have this company called Open Zeppelin and Open Zeppelin has a lot of really great open source stuff that they've created and made freely available.

And then you also have something called the ERC20 and there are a handful of other ERC types of tokens and standards that are available for you. So ERC20 is the token that Ethereum actually is, ETH itself, and it is a standard that allows you to mint tokens very easily using a predefined set of functions and functionality that give you a lot of different things. So if I scroll down a little bit, when you use ERC20 to mint a token, you're inheriting a lot of functionality already. So you're able to inherit things like the name of the token, the symbol, have functions that you can call to get this information, the decimals. By default, this is set to 18. The total supply, the balance. You have a function that allows you to transfer. You also have a function that allows you to transfer between two addresses. And then you have approve that allows you to give someone else the ability to spend your own tokens. And then you have allowance. So these are all going to be programmed into ERC20. All you have to do is inherit that standard in your contract. So if you ever use something in JavaScript where you're importing an existing library, it's very similar to that. And all we need to do is install Open Zeppelin contracts and we can start using them.

So what I'm going to do is go ahead and do that. I'm going to call npm install at Open Zeppelin slash contracts. But I'm going to use Yarn. Hopefully this works since I already have a pack. I don't have a package. So I do have a package on JSON. OK, it's still going to work. All right. Looks like it's almost there. All right. Looks like it's almost there. All right. Looks like it's almost there. OK, so we have installed Open Zeppelin. And what we can now do is just import it. Like so. And then now we can inherit from ERC20 and have all that functionality. So we can essentially create a token using four lines or five lines of code. So let's go ahead and copy this and go back to our smart contract and just update this. So what we have now is created all of that functionality and just five lines of code. Now, the most important line of code is this right here. This is where we're actually calling Mint. And Mint means we're creating the actual token itself. And Mint takes in two required arguments. And if we go back here, let's see here. Looks like I don't have Mint listed. But let's actually let me veer off here for a second. And I'm going to just Google for Open Zeppelin ERC20. So a few of the other tokens or the two of the few of the other standards that they support are ERC721, ERC777. And I think there's one or two other ones. But ERC20 is what a lot of people use for actual digital tokens that are fungible or they are currency type of tokens. And then ERC721 are what people use for NFTs or non fungible tokens, which are basically unique identifiers for an individual token. Whereas with ERC20, you can mint multiple. But if you go to ERC20, you'll see that we have a lot of documentation around like what all is going on here. So, for instance, there's an explanation of decimals. You have documentation around creating a fixed supply. You also have like a little bit more information around the mint function. If we click on mint, you'll see that like we have all this documented. But mint is basically going to transfer this number of tokens to the message dot sender. That's kind of a general idea. So.

With that being said, we're going to pass in the constructor. We need to specify a couple of arguments. One is the name of the token and the other is the symbol. And earlier we had we had hard coded that. But in this example, we're actually going to be passing in as the constructor. You could also decide to create a variable like here and then omit this and then just reference those variables right here. So like it's up to you. But in this case, we're just going to be taking the standard as is and we'll pass that into the constructor. So we have token and we're calling it the Indy token or you can call this whatever. But, you know, this is really all we need to kind of continue going on. So with that being said.

Let's go ahead and. Go to deploy JS. And now we want to go ahead and pass in the arguments to the constructor.

And now we want to go ahead and pass in the arguments to the constructor. So for this, I'm going to go ahead and do Indy token. Or this would actually be whatever you would like to call it, but it needs to match this. And then we want to pass in two arguments here. Actually, no, we need to pass in two arguments here. I'm getting a little confused. No, no, I'm sorry, I was right. We need to pass in two arguments here. I think I got confused because I called this Indy token instead of maybe just token or something like that. But again, if you just follow the workshop, it should work right. I'm just confusing myself, I think. So with this update, we've now passed in the values for the constructor. And we should be good to go. So if we now run. Like NPX hard hat compile. And then NPX hard hat run scripts. Slash deploy and then set. Whoops. Network as localhost. Then we should see that we've successfully deployed our new token and we now have a total supply of. In our case, 100000 and we have 18 decimals by default. So when we import this, we have to set the decimal as 18. So with that being said, we're kind of on to the wrap up of all the stuff that we've been doing here. So what I would say would be the challenge for you and I can hang out on Discord afterwards and answer questions is how do you actually update your front end to use this new token that we deployed? And really the main the main two differences that you need to change or consider changing are going to be. This. Function for calling get balance and this function for calling send points because. Maybe we have already this function here, so we have balance of. We have actually transfer or maybe already updated this to be the same thing, but either way, I would I would say, OK, let's try to update the front end or test out the front end to see if we can use these new tokens. But you still need to import those in the Metamask and all of that. So I would say the challenge is to kind of use this new token in the front end. And then if you can get that, which should not be very hard because a lot of it's already done for you, then you should be done. And someone asked of around some next steps that you would take to kind of dive deeper into a lot of this stuff. And I kind of linked to a few of the things that are the resources that are for me pretty good that are all free. So. There is the Ethereum dev speed run. This is something that was created by Austin Griffith and this he's a really great educator and he's actually the person that educated me a lot around a lot of this stuff. And so, yeah, someone mentioned minting or asked about minting. Yes. So minting is basically creating, creating tokens or printing money, whatever you'd like to say, or creating digital something, some type of digital scarcity in the Ethereum world. So. Yeah, Ethereum dev speed run is great. It introduces you to a bunch of things within the Ethereum ecosystem and solidity. And it also introduces you to his scaffold ETH. Which is a really great starter project for working with Ethereum. It has branches for all types of different types of applications on Ethereum. So each one of these branches is a different type of app that's written. That's like full stack. So you have like Coinbase wallet, you have like DeFi stuff, you have NFTs, flash loans, all kinds of stuff. So this is like hundreds almost or definitely. It's probably hundreds of applications that are like boilerplate projects that you can play around with, which are really great. The other thing that I recommend is Buildspace. Buildspace. And this is a free, almost like coding school for Web3. And they are really great. They do a lot of stuff on Ethereum and they're now starting to explore Solana as well. We also have this tutorial that I wrote, building a full stack NFT marketplace on Ethereum with Polygon. This uses what's kind of known as a side chain or people often bucket Polygon as a layer or two. This allows you to transact on the Ethereum, quote unquote, network on an alternate EVM network using what's known as Polygon for a fraction of what you would typically do on Ethereum. So a transaction with Polygon, I believe, is in the range of 0.001 cents or 2.1 cent or something like that. But you can use the same code base to build an NFT marketplace anywhere on any EVM compatible chain, even Ethereum layer one. So those are both really all really great places. And then finally, Use Web3 is a really great overall place to see a bunch of different tutorials and stuff. So you have like podcasts, video courses, books, starter kits, tutorials. So like those four things that I linked at the bottom will keep you extremely busy for probably weeks or months. There seems to be a lot of great content coming out lately on Web3. Of course, it's starting to just finally blow up. And I would just say follow a bunch of people on Twitter. See fun people that are creating stuff. Follow Austin Griffin. Follow some of the people that he's retweeting.

Those are all great educators in the space. So with that being said, I think we're kind of done. I will be around for the next 40 minutes to answer questions on Discord. And if anyone has any final questions, please let me know. And I would be happy to answer them, of course, for the next 10 minutes or so. No way to thank me other than just like having shown up here and stuck around for that for this whole workshop. You know, I just I truly appreciate everyone's time these days. I know how busy we all are. So I'm glad that you came and showed up and I'm hoping that you learned a lot. Seeing some pretty good feedback. I'm glad that everyone enjoyed it. Yeah, and you can always again also follow me on Twitter and reach out to me, you know, at a later time. If you have any questions, I'm dabit3 on Twitter. And my messages are kind of like closed. My DMs are, but you could always like just respond to a tweet or something like that. All right. So it looks like I don't see. OK, here's a question. So I'll stick around for a second. What are the main differences between hard hat and truffle? Same for ethers and Web3.js. So I would say that the main difference is that I'm using a lot of the same stuff. And Web3.js. So I would say that the earlier libraries for Ethereum development were going to be truffle and ganache and Web3.js. And those are really great. And you can do a lot with them. And I would say, you know, a lot of projects definitely still use them and they have great funding. I think consensus funds Web3.js. And so, yeah, they're great. But I think what hard hat brings to the table to me is a slightly better developer experience. That's just my opinion. There's a lot of people that actually don't agree with that. But hard hat is starting to become pretty popular. So I think they're both equally popular. And I would suggest like if you're interested in exploring more of the ecosystem to check out truffle as well. I do think that ethers.js has a better API than Web3.js. It was just easier for me to pick up and understand. Web3.js probably has a larger API surface that you might be able to do more with. But ethers to me was just easier to pick up. And I thought their documentation was a little bit better. So thanks again for showing up. I'm going to wrap up and jump off the chat here. I'm off of the live stream. So, yeah, it was great to be here. Thanks for showing up. I'm looking forward to being in London next week for the main event. And someone asked about an introduction to the graph. And I do have that. And it's on dev.to. If you just Google building GraphQL APIs on Ethereum, I think that should show up. So this is the tutorial that I wrote for building APIs on top of Ethereum. It's a long story, but it's kind of hard to build. Yeah, it's hard to build front end applications directly querying Ethereum, getting anything that's non-trivial, the type of data you typically need. So you need some type of indexing server. And the project that I work with is called the Graph Protocol. And it allows developers to really quickly and easily build these APIs on top of Ethereum or any of these decentralized networks. So this is a good tutorial. If you want to kind of go into that intermediate level, maybe even, yeah, I would say intermediate level of Ethereum development, I would check out this tutorial as well. Yeah, let me share the link.