Web3 Workshop - Building Your First Dapp

Okay. 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, you know, 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, you know, follow along in the steps as we kind of go through all this. And, you know, 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 Web3Stack works, or at least the core pieces of the Web3Stack work. And you might have, hopefully, some eye opening moments that excite you about, you know, working in the 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 in the 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 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. 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 NodeVent 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 in 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 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 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 a blog post or something. But I think it's extremely interesting that it would stay there forever. So I'm kind of building out something like that. So you'll see 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 make it more scalable and less expensive. There are also layer twos on top of ethereum 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. Okay, cool. All right. So if everyone wants to follow along, the link to the code base and the readme and the workshop material, you know, 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'm going 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 pass phrase, 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 just 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'll set up, you know, some password. And now I'm going to click next. And now we should be given our pass phrase. Now this is a 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 this seed phrase can basically then generate a private key. The private key can then generate a public key and the public key generates your 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, you know, 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 ahead and click Next. And now I have to confirm. So I'm just going to like 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. But 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 of 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 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, I 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. 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 just 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, you know, ethereum or blockchain specific. So you might not have used it before. So Ether is again, is the client library for interacting with the ethereum network, or any other EVM network. And then we have Hardhat. And Hardhat is interesting, because it is like the entire development environment that you're going to need for any 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 Hardhat waffle is for basically like local testing stuff. And Hardhat ethers is basically an ethers library that works well with Hardhat. And all 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. Yeah, and anyone that's just jumping in now, 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, I think at least 10.x, but I would probably just use the latest that's 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 that late. But yeah, anything like 12.x 10.x even should be fun. 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. you you you Um, 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 if 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 we, I would say like most people recommend when you're interacting with, with different projects from a web browser, typically using a decentralized wallet like MetaMask is probably the, you know, 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. You could think of it as kind of like you could think of it as kind of like the server almost. This has your business logic for, you know, 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. Okay, so now that we have installed our dependencies, let's keep on going. So now that we've, you know, gotten our project set up, we can now create and configure our hard hat environment, which again is our, 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 the basic sample project. And then once this is done, I'm going to walk through what would actually happen 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. Okay, 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 j s. 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 you know, 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 a 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 could think of it as like a computer that is distributed across you know, 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. Okay, cool. So 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 and 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 to 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 ABIs. And ABIs 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 thrown. And 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 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. 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 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. All right, cool. So we have our hard hat configuration set up. 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 dot soul and dots dot soul sense 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 zero dot 8.4. And then here, we're basically just saying zero point 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 dot 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 dot 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 installer 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. All right. So let's take a look at the contract. So this is like, about 15 lines or coders. So this is basically the entire program. And there are 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 created, 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 interacted with it, we can call two separate methods, we can call the greet method, which basically just returns this string. And we see that it is public, meaning it can be read from outside of the contract, meaning we can call it from a 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. What 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 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 and in blockchain, because every 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 our tutorial here. And we can continue on. So what we want to do next is compile our smart contract into the api or the application binary interface. And to do that, we can basically use hardhat again. And all we need to do is run npx hardhat compile. This, this command is going to look into our hardhat 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 hardhat 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 in 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. 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. I just kind of wanted 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 the 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, back in 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 Arweave, or you're going to be working with something like ethereum, 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 ethereum 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 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 ethereum 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 ethereum, you know, test ethereum 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 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 hardhat 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. 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 ethereum node. And I can do that by running NPX hardhat node. And this will go ahead and start a local test network, a local ethereum 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 network. And now I have 10,000 ETH multiplied by 20 on 20 different accounts that I can use. All right, 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. All right, so not a whole lot going on here. There's really only one test network, all right, 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 pacing in the string for the name of the contract. Now we're able to do this because in our hardhat 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 await greeter dot 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, you 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 there's a 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 is 8545. So our our our ethereum node or RPC endpoint is local is 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, you know, something like the file service and, you know, 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 deploy are built in methods. So what we want to do now is also let's rename sample script to deploy because that makes a lot more sense. And now we can say, okay, 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 hardhat run scripts slash deploy.js, and we can set the network to be localized. And what should happen is that you should see this logging out some stuff. So npx hardhat run scripts slash deploy.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 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 deployed successfully, we should also have this logged out to the to the console greeter deployed to, and then that's deployed to the console greeter. And then that's deployed to the console greeter deployed to, and then this is our contract address. So this is the address on the network, but this is like a deploy to ethereum mainnet, we will be able to actually go look at this, but it's employed to localize, but we're still going to be needing this address 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 public, 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 the 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 9999 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 deployed 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 asks, is it failed to connect to localhost? 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. All right, so I'm going to go ahead and start copying and pasting some of this code and walking through it. So I'm going to open app.js. 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 greeter dot soul slash greeter 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. And 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 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 that we have this installed. And now if you tried to run 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 do stuff. But we're just assuming that this exists. And we're going to call a 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 value right now. 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 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 we're going to be doing a signer or a write transaction and 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 will 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 here. And we're doing the same, you know, line of code here where we call it new ethers dot providers dot web three provider. But instead of just using that provider directly in the contract creation, we're creating a signer and we say provider dot get signer. 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 dot set greeting, just like we called contract that greet, we're just calling the function within the contract. And here we're passing in an argument of greeting. And this greeting is, you know, this state variable that we set right here. So we're letting the user basically update the local state typing. And then 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 fetch greeting, 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, greeter address dynamically, you can base you can just write a function in that, that deploy script that writes to the local file system. So I typically use FS from, you know, from no from I'm sorry. Yeah, it's like a no JS package you can solve called FS, you can say FS dot write file sync. 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 the ether to 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. And is there a way to update contract logic without affecting data already stored? No, not really. That's why a theory I mean, 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 new contract and then you also end up, you know, 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 these proxy contracts. OK, cool. So we're done writing our user interface. And, you know, kind of walk through each individual function to kind of go through the 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 MPM star. 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 at London. So 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, you know, zero is six, three. So if I click confirm, then I see that we've now updated the greeting. And if I refresh and I call fetch greeting, then 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 it doesn't look like there's any questions there. Let me check out the other chat here. OK, 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? Are anyone running into any issues? I see a couple of people typing, so I'm going to wait for those questions to come through. Cool. Looks like working good for a couple of 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 where 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 time 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 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 but 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. Yeah. 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 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 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 and 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 adapts 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 adapts on ethereum.org, you can see like finance, arts and collectibles, gaming and technology. I think one of the interesting ones for me is Axie Infinity. And trying to think, I saw a chart today where their growth in the last three months has been some ridiculous number, but with Axie Infinity, 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 that a lot of it they get on Fortnite. You get these skins, but 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 growth where they hit like over $800 million in transactions like last month. And they've grown even faster since I saw that because I saw some tweet today that was 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 isn't a big potential. So the head of YouTube gaming was recently talking about how they're looking at ways to to collaborate and do stuff 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, crypto 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 sometimes 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 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 transactional and Solana and Arweave that it lives there forever. And 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 are people building out front ends to compete on different backend 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 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. Okay, 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 clicking reset account. So those are the two things I would double check to make sure you're good to go. All right. 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 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 135 p.m. Eastern time. And I'm not sure the time in Europe 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 You You You You You You You You You You You You You You You You You You You You You You You You You You You You You You You You You You You Alright, looks like it is time to continue on. So, it looks like some people were having some fun during the break I'm assuming that some people are 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 it between my accounts or I can paste the address here either way and I might want to send like 100 ETH to that address I 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. Alright, so 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 in 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 you have people that are selling digital courses you have of course the NFTs which are like web 3 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 kind of 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.sole 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.sole 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 dot slash 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 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 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 is kind of like a map or an object and 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 okay we have this mapping called balances and we want to go ahead and set that the person deploying this contract has a balance of 1 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 dot 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 dot 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 dot sender so we're transferring the 1 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 1 million but if we start transacting if we start sending tokens between parties this mapping will have multiple different values so we'll have you know 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 require is 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 in their balance and if not of course we they can't do this operation anyway so we're going 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 user the users I guess you could say plural in this case okay cool so we basically have 15 lines of code actually no it's 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 hardhat 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 this stuff is you know 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 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 hardcoded everything so we don't have any constructor value so we just leave that argument blank yeah 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 alright cool so we have written our deployment script so we can now continue on kind of just you know 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 hardhat run scripts slash deploy and then we want to set the network as localized and this script is you know in the tutorial 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.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've 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 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 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.etherium.request like we did earlier but we're setting the return value as a variable that's because when you call window.etherium.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.sole you'll see balance of takes in one argument for an address and here we're passing in that address the next function that we're going to write is sendcoins 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 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 sendcoins and now we want to add this code right here 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'll do 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 it 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 it's realizing that and for the token decimal we're just going to put point one and then we're going to click add custom token so here we have now our lazy cats tokens in our wallet so we now have one million lazy cat tokens so we have ETH oops we have ETH now and LCT cool so now that we have our new tokens in our wallet 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 one million and now we want to send these to someone else so I might say let's just send to another address here I guess so I'll go ahead and click on account two and just copy this address to my clipboard go back to account three and here I can paste in the account ID and then the amount I'm going to send them a hundred thousand so if I click send coins and it looks like I have some type of error I'm not sure what's going on there huh interesting looks like I've hit a bug and 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 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 maybe I should save this passphrase just in case oh it looks like I messed something up let me try this again oh gosh I messed something up 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 and then try to import the token address here okay 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 going to go ahead 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 so I'm going to go ahead and copy this address and go back to account two and I want to send coins to this address we'll try this again hitting this error again I wonder if it's the way I imported that account let me try one more time you you you all right let me go ahead and copy this token address and I'm going to import the token and maybe I will set the token decimal to zero wondering if that's 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 and we'll go ahead and refresh send coins there 100,000 first get balance yeah the balance looks good okay 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 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 ether and one way is eight decimals so when you want to send you know 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 .1 decimals it kind of figured out that there was something wrong there anyway we should be able to click confirm and see that 100,000 coins were successfully sent there so if you had the same error as me and you were listening to me to do .1 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 sending 10 and getting .1 that's because I messed the decimals up 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 account that you are importing should be this account zero for like where the 100,000 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 it automatically uses account zero something I use zero as the decimal so what I should now be able to do though when I check my balance it should now be at 900,000 but if I switch over to this other account and connect to it and I get the balance I should now have a balance of 100,000 and you know we could continue sending these on to other parties as well let's say I wanted to send like 50,000 back to this account you know I can go here and do that and it looks like I don't have enough oh I don't have any ethereum to send so you have to have Ether to send okay cool 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 .1 anyway alright let's continue on now the way that we just use tokens is kind of very crude it's 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 sourced 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 know 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 approved that allows you to spend that allows you to give someone else the ability to spend your own tokens and then you have allowance so these are like 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 you know in javascript where you're importing an existing library it's very similar to that and all we need to do is install opens up on 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 opens up one slash contracts but I'm going to use yarn hopefully this works since I already have a pack I don't have a package since I do have a package on json okay it's still going to work okay all right looks like it's almost there okay so we have installed opens up one 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 meant and meant means we're you know creating the actual token itself and meant takes in two required arguments and if we go back here let's see here looks like I don't have meant listed but let's actually let me veer off here for a second and I'm going to just google for opens up one 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're 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 meant 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 meant function if we click on meant you'll see that like we have all this documented but meant is basically going to transfer this number of tokens to the message dot sender that's kind of the 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 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 indie 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 um let's go ahead and go to deploy.js 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 indie token or this would actually you know 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 indie 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 hardhat compile and then npx hardhat 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 100,000 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 how do you actually update your front end to use this new token that we deployed and really the main two differences that you need to change or consider changing are going to be this function for calling git 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 I already updated this to be the same thing but either way I would say okay 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 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 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 speedrun this is something that was created by Austin Griffith and he's a really great educator and he's actually the person that educated me a lot around a lot of this stuff and yeah someone mentioned minting or asked about minting yeah 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 speedrun 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 coin based wallet you have like DeFi stuff you have NFTs flash loans all kinds of stuff so this is like hundreds almost or definitely yeah 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 build space and this is a free almost like coding school for web 3 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 this allows you to transact on the ethereum and you know 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 to 0.1 cent or something like that but you can use the same code base to build an NFT marketplace anywhere in any EVM compatible chain even ethereum layer 1 so those are both really all really great places and then finally use web 3 is a really great overall place to see a bunch of different tutorials and stuff so you have like podcast podcast 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 web 3 you know it's of course it's starting to just finally blow up and you know 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 yeah 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 david3 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 yeah all right so it looks like I don't see here's a question so I'll stick around for a second what are the main differences between hardhat and truffle same for ethers and web3.js so I would say that the earlier libraries for game 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 hardhat 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 hardhat is starting to become you know 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 awesome so thanks again for showing up I'm gonna wrap up and jump off the chat here 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 you know 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 yeah 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 it's a good idea