In this workshop, you'll learn how to build your first full stack dapp on the Ethereum blockchain, reading and writing data to the network, and connecting a front end application to the contract you've deployed. By the end of the workshop, you'll understand how to set up a full stack development environment, run a local node, and interact with any smart contract using React, HardHat, and Ethers.js.
Web3 Workshop - Building Your First Dapp
AI Generated Video Summary
This workshop covers building a React dApp and programming payments in smart contracts. It explores Web3 technology, Rweave protocol, Solana network, and Metamask. Participants learn to install dependencies, set up a Hard Hat environment, and deploy contracts to a local network. They also interact with the Ethereum network, deploy token contracts, and send tokens using MetaMask. The workshop highlights the use cases of blockchain technology, the permanence of data on the blockchain, and the potential for crypto integration in gaming and social media platforms.
1. Introduction to the Workshop
In this workshop, we'll be building a React dApp and following the steps outlined in the readme. The workshop will take about three hours to complete, with time for explanations and questions. At the end, there will be a small challenge and additional resources to explore.
OK, so, yeah, if you click on the link and you go to the GitHub repo, you'll see that we have this React dApp. This is kind of the code base that you can use as a reference. But the actual workshop material itself is in this actual readme that you're seeing like right here. And the idea here is not to really clone this and do anything with it, but instead to actually follow along in the steps as we kind of go through all this. And we have a good amount of time set aside for this. So we have about three hours to build this. And we're going to be covering quite a lot. So if you were just running through this extremely quickly, you know, without even reading anything, just copying and pasting the code, you might be able to finish this workshop in about 20 or 30 minutes. But you're going to see that when we're actually kind of walking through this, explaining, you know, all the things that are going on and hopefully answering questions, we should take up probably the entire three hours. And then there is a small challenge at the end where you can kind of take some of the stuff you've learned today and try to extend it a little bit. And then I have a few links to some additional resources that you might want to follow along when you're done with this.
2. Introduction to Web3 and Smart Contract Payments
Welcome to this workshop where we'll explore the Web3 stack and its core components. I'm Nader Dabit, currently working in the crypto, Web3, and blockchain spaces. I've been in this field for about five and a half months, with previous experience in DevRel at AWS and training for companies like Amazon and Microsoft. I became fascinated with Web3 in late 2020 and decided to leave my job to work in this space. In this workshop, you'll learn the basics of programming payments in smart contracts, which is a fascinating aspect of Web3 technology.
So with that being said, welcome to this workshop. I just wanted to thank everyone for taking time out of their extremely busy schedules to attend this. I hope that when you're done with this, you have a good understanding of how a lot of the Web3 stack works, or at least the core pieces of the Web3 stack work. And you might have hopefully some eye opening moments that excite you about, you know, working in this space, or maybe you just kind of, you know, understand what's going on here to decide whether or not this is something you want to pursue further or not. But you know, regardless of, you know, what ends up happening, I think that this is a good skill set to at least understand for the future of your career and stuff, especially with a lot of the attention and excitement that you're starting to see happen around Web3 and how people are building out applications using a lot of these crypto economic protocols that people refer to typically as crypto. So yeah, I can give an intro for myself. My name is Nader Dabit. I currently work in the crypto space and the Web3 space and the blockchain space. All of these things kind of correlate with each other and they overlap. But I've been in this space for about five and a half months now, I think since April. Before this, I was working in DevRel at AWS for over three years, really, really had a great run there and still enjoy working with a lot of that technology as well. And before that, I was doing training for big companies like Amazon and Microsoft, teaching them how to build mobile apps. And before that, I was just a software developer. But I really became interested in the Web3 space back in late 2020, early 2021, not that long ago. Really after kind of diving into a few of the projects that were interesting to me and seeing the value proposition for me as a software developer, because before this, I was a speculator in crypto in the sense I was like buying and selling tokens and stuff. And I wasn't actually aware of the fact that people were building out programs and that a lot of things might change in the next couple of years because of this technology advancement. So I became extremely excited and interested in the space and decided to leave my really comfortable job at AWS and turn down a bunch of other jobs to work at a startup that was only like a month old at the time. And it's been really fun. And in this workshop, I'm hoping that you can kind of learn the basic stack to give you a glimpse into how some of this stuff might be interesting. And I think one of the most interesting things to me that you might see in this workshop is how easily it is to program payments into a program. Now, if you've ever worked with something like Stripe or PayPal or God help you working with an API for an actual bank, you kind of notice how complex everything is to actually make all this stuff work just to enable digital payments. And the payments themselves are complex, but the underlying infrastructure is orders of magnitude more complex. So how easy it is to program payments in a smart contract to me was really, really interesting. And it was one of the things that really got me excited to kind of imagine all the future possibilities that people might be able to build into these types of programs.
3. Workshop Overview and Prerequisites
This workshop will cover a basic hello world example, programming tokens, and transferring payments between parties. It provides an overview of what you can do with smart contracts. We'll take a break at the one and a half hour mark. The prerequisites are Node.js and Metamask, which we'll install from scratch.
So this workshop is going to kind of go over a really, really basic hello world example, and then we're going to look at how to program tokens and we're going to show how to transfer tokens or payments between parties. And while the actual implementation of some of these might be more just basic hello world types of implementations and you might not actually use these actual smart contracts in the real world, it is a really good overview or slash example of what you might be able to do.
So with that being said, we're going to go ahead, I guess, and get started and we're going to take a break at the one and a half hour mark. So we have three hours. We might spend the whole three hours. We might finish a little early. I'm not sure. But at the one and a half hour mark, which for me is going to be at 1230 p.m. Central Time, we're going to take like a 10 or 15 minute break for people to grab a bite to eat or drink or use a restroom or something like that.
So before we get started, the two prerequisites for this workshop are that you have Node.js installed on your machine. And I highly recommend using either NVM, Node Version Manager, or using FNM, which is a Node Version Manager written in Rust. And I'm assuming that if you're showing up to this, you probably already have that installed. But if you don't, I would go check that out. It doesn't take a whole lot to install Node using NVM. And I use these Node Version Managers because a lot of different environments require different versions of Node.js and it just makes it really easy to switch. The other thing that is a prerequisite is Metamask. But we're actually going to install Metamask from scratch. And Metamask is an Ethereum wallet and it's a crypto wallet. But it's also how you authenticate into Web3 apps.
4. Rweave, Solana, and Metamask
In this part, we'll discuss the Rweave protocol for storing data forever and its use in a blogging platform. We'll also explore the Solana network as an alternative blockchain with lower transaction costs. Additionally, we'll introduce Metamask, which allows interaction with various Ethereum virtual machine blockchains.
And you see here, I also have a couple of other wallets installed on my browser. And I usually pin all of the different wallets here to my extension pins. And here I have Rweave, which is a Web3 protocol for storing images. I'm sorry, for storing data forever. So instead of uploading a piece of text or an image to S3 where you have to pay a monthly fee and if you don't pay that, maybe you don't get access to it anymore. Rweave is interesting to me because you pay a one time fee using Rweave to basically store a piece of text and it stays there literally forever. So one of the things that I'm building right now that I'll be open sourcing soon is a blogging platform that uses Rweave to store blog posts. And it costs about three or four cents to store a large one megabyte piece of text. So maybe one cent to store like a blog post or something. But I think it's extremely interesting that it would stay there forever. Right. So I'm kind of building out something like that. So you'll see like when you start adding different protocols and working with different projects, you'll have multiple wallets. And this is a phantom wallet and phantom is for Solana. And the Solana network is just another network other than Ethereum. We're going to be building on Ethereum today, but Solana is actually another very, very popular blockchain protocol that allows you to build smart contracts using Rust. And the transaction costs on Solana are like a fraction of what they are on Ethereum. And I think one of the biggest complaints that you're seeing right now is with Ethereum is that the transaction costs are starting to go up. There are a few different things that are going to be happening in Ethereum in the next couple of months for merging updates to to make it more scalable and less expensive. There are also layer twos on top of Ethereum that are that you can basically write the exact same code and run for a lot less expensive. But there are also alternative blockchains like Solana that I would recommend checking out. And I'll talk a little bit more about some of this stuff. But what we're going to be using is Metamask and Metamask allows you to interact with any Ethereum virtual machine blockchain. So Ethereum is kind of like the original EVM, Ethereum virtual machine. But there are now dozens of other blockchains that use the EVM. And just having Metamask allows you to interact with any of them by basically just switching the network. And we'll look at that in a second. So with that being said, does anyone have any major questions before we get started? And if they do, I can kind of answer those, if not, we'll continue on. Just going to pull up the chat real quick.
5. Installing and Setting Up Metamask Wallet
To start, we'll install a brand new Metamask wallet and create a new wallet with a recovery phrase. It's important to keep the recovery phrase secure and never reveal it to anyone. After confirming the recovery phrase, we'll have our wallet set up. We can access it through the MetaMask extension, which also allows us to choose different networks to interact with.
OK, cool. All right, so if everyone wants to follow along, the link to the code base and the readme and the workshop material is in both the Discord chat as well as the Zoom chat. So the first thing that I'm going to do instead of actually like starting to build the app, I want to go ahead and first install Metamask. Now, I typically already have Metamask installed, but I went ahead and deleted it before this because I want to install a brand new Metamask to kind of walk you through how to do this. And if you haven't already done this, Metamask will give me basically this secret phrase that if someone else has, they'll be able to basically take whatever money I might put in this wallet. So this is going to be for me an entirely ephemeral wallet. Like I'm going to delete it when I'm done and like I'm going to show you my passphrase, but you should never really do that. But for this workshop, I'm going to do that. But this is just to kind of give you an overview of how this works. So I'm going to go ahead and. I'm just going to Google something like, you know, Metamask wallet extension or something, and the first thing that should come up is this right here. And what I can now do is just click download and this will add it to Chrome. And this will walk me through how to do this. All right, so I'm going to go ahead and get started and I'm going to create a new wallet here. And I'm set up some password. And now I'm going to click next and now we should be given our passphrase. Now, this is the recovery phrase that you can use to basically get access to your wallet anytime in the future forever. The way that these wallets work is that you basically have something called public key encryption where you are given a seed phrase and the seed phrase can basically then generate a private key. The private key can then generate a public key and the public key generator address. So like by just having this this recovery phrase, you can basically revamp and recover your wallet anytime in the future forever. So what basically I recommend people to do is, first of all, never reveal your phrase to anyone and especially if you have money in it. And second of all, store it in a place that is extremely secure. So what I, you know, and a lot of other people do is we write it down and we place it somewhere or maybe we keep a couple of copies, maybe put it in a safety deposit box or something like that. But basically, like, you know, depending on how much money you have in there, of course, I guess. But what I'm going to do is just copy this. And of course, when I'm done, I'm just going to delete this wallet. So I'm going to go and click next and now I have to confirm. So I'm just going to paste it right here and then that way I can see it. So I'm going to just, you know, flame. All right, and after we confirm this, we should have our wallet set up. So what I'm going to do now is I'm going to go to my extensions here. And I'm going to 10 MetaMask, so now I should have a MetaMask extension here, and this is kind of the way that I want to have access to it going forward. And you'll see that I have like zero ETH in my wallet and now we should be ready to go. And another thing you'll notice is that we have this drop down menu here and this drop down menu allows you to choose which network you want to be on. So right now we're on Ethereum mainnet, which is the Ethereum network. But we can also add other networks. So let's say we wanted to use an Ethereum layer two like Arbitrum or Optimism. We can basically add that either from their website or by clicking custom RPC and entering the information ourselves. You can also use networks that are EVM or Ethereum virtual machine compatible like Avalanche or Celo or a handful of others. So just by having this one wallet, you can interact with all these different networks.
6. Building the App and Installing Dependencies
We'll be using Ethers JS and building two types of smart contracts: a greeting contract and a token contract for minting and transferring crypto tokens. To get started, create a new React app using NPX and install the necessary dependencies, including Ether and Hard Hat. MetaMask Wallet is browser-specific and can be used with Chrome, Edge, Brave, and Binance Smart Chain. A contract is the back-end program of a blockchain app, also known as a smart contract.
All right, so now that we have our Ethereum wallet installed, we can start building out our app. So some of this stuff like just gives you an introduction about some of the things that we're going to be working with. React, we're going to be working with Metamask, already mentioned that we're going to be working with a web client library for basically interacting with the network. So in a typical web application, you might use something like Axios or the fetch library that is native in the browser these days to interact with the network. In GraphQL, you might use something like Apollo or Urkel. But in Ethereum, you might instead use one of the native Ethereum client libraries. So we're going to be using Ethers JS. There's also Web3 JS. And those are kind of the two main ones that you might interact with the network with. But they're very similar to something like Axios. And we're going to be building out two types of smart contracts. One is a greeting contract, and this is the contract that actually is given to you by the hard hat development environment that we're going to be working with. So when we create a new Ethereum project, it's going to automatically create a new example contract. We're just going to be starting off with that one and using it. And then after that, we're going to then create a token contract for minting our own crypto tokens. And then we're going to transfer those tokens between different users. And then I think that's really interesting because it shows you how to basically transfer these tokens within the smart contract.
All right, so to get started, we just basically want to start off by creating a React app. So if you're a front end or full stack developer, you've probably done this a million times, either with React or Vue or whatever. But we're going to be starting off by just using NPX to create a new React app. So I'll copy this command here. And I'll jump into my terminal. And I'm here in an empty folder. And what I would like to do is just run NPX create React app and call it React DEP. All right. So after we've created our app. We can go ahead and just change into that new directory. And next, we want to install our dependencies, so you can use either NPM or Yarn and you can go ahead and just copy this to your clipboard if you'd like. And this kind of like goes through all the different dependencies that we want to install. So I'm going to copy that to my clipboard. Just paste it here. So some of the different dependencies here you might actually have used before, actually, just maybe this one is Chai, which is like a testing library. But everything else is going to be Ethereum or blockchain specific. So Ether is again is the client library for interacting with the Ethereum network or any other EVM network. And then we have Hard Hat and Hard Hat is interesting because it is like the entire development environment that you're going to need for any EVM or Ethereum project. This provides you a lot of really great stuff, like a local Ethereum node that you can basically deploy and run programs against. It also provides a testing environment and a lot of other stuff. So those two things are kind of the main things. And then these are kind of sub dependencies of some of that stuff that we're going to be needing. So Hard Hat Waffle is for basically like local testing stuff. And Hard Hat Ethers is basically an Ethers library that works well with Hard Hat. And all of this stuff is actually not only in this tutorial, but you'll probably see it in a lot of other documentation as well. So I'll go ahead and install that. And anyone that's just jumping in now, we're very we're we just started, so all you have to do is just run NPX create React app and you'll see those directions and GitHub read me. You don't need to clone the project unless you'd like to. But, you know, essentially we're just using that that read me as a reference to build out this project ourselves from scratch. And I probably should have used Yarn because NPM is so slow these days. Or maybe I need to upgrade my version of NPM. Which node version? I would probably use at least 10.X, but I would probably just use the latest that's out there. So let me go to the Node.js release. So, yeah, I mean, it looks like the latest is like 14.18. I'm not sure if I'm even on that late, but yeah, anything like 12.X or 10.X even should be fine. Yeah, I totally recommend using Yarn instead of NPM. This is so slow. I haven't used NPM in a while. Again, maybe I'm on like an older version there. So is MetaMask Wallet browser specific? Or can it be used with other providers? Basically, I know there's a MetaMask extension for Chrome, Edge and Brave. I'm pretty sure there is not a Chrome extension. I'm sorry. I'm pretty sure there's no extension for Safari. You can interact with Binance Smart Chain. And there's one other Binance chain that you can interact with using MetaMask. You just have to use a custom RPC. Coinbase has their own wallet as well that you can install. So let's say you have your money on Coinbase. Coinbase has a browser wallet that allows you to log in and basically use as well. But I would say like most people recommend when you're interacting with different projects from a web browser, typically using a decentralized wallet like MetaMask is probably the best thing. Someone asked, what is a contract? A contract is essentially like the back end program of a blockchain app. It's the smart contract.
7. Setting Up Hard Hat Environment
We installed our dependencies and created and configured our hard hat environment for Ethereum development. Hard hat provided us with a hard hat config file, contracts folder for smart contracts, scripts folder for deployment scripts, and a test folder for example tests. Blockchain can be thought of as a database and a distributed computer. In a React app, we need to configure the artifacts path to be within the SRC directory. Artifacts are machine-readable code generated by compiling smart contracts. Hard hat simplifies this process and allows us to import the artifacts into our React application. We also need to define the network chain ID, which is specific to MetaMask's default configuration.
It's the smart contract. You could think of it as kind of like the server almost. This has your business logic for interacting with the program itself. So that took a long time to install. I will never use like NPM again. I'm definitely like spoiled by yarn.
OK, so now that we have installed our dependencies, let's keep on going. So now that we've gotten our project set up, we can now create and configure our hard hat environment, which again is our Ethereum development environment. And to do that, all we need to do is run NPX hard hat. So I'm going to go ahead and do that. So if I run NPX hard hat, this should go ahead and scaffold out a hard hat project. And we have a couple of different options. We're just going to use the basic sample project. And then once this is done, I'm going to walk through what actually happened here. So we'll click create basic sample project. We'll choose the project route. We'll add our get ignore. And now we have a local development environment created for us. That was pretty easy. But what actually happened there? So let's take a look at the changes that were made. So if we open our code base and our text editor. We can take a look, so I'm going to go ahead and open the project to my text editor.
OK, so our React app already gave us like node modules, public and SRC. Basically, what hard hat gave us was, first of all, this hard hat dot config dot JS. So this was created for us by hard hat. We also have this contracts folder right here. And the contracts folder holds our smart contracts. We also have. This scripts folder here and this scripts folder has an example script that we can use to basically deploy our smart contract to the blockchain. And we're going to look at both of those things in just a moment, but for right now, we're just kind of like reviewing what was added for us. And then the last thing that we have now is this test folder and the test folder has an example test that we can run if we'd like.
8. Hard Hat Configuration and Smart Contract Overview
In this part, we discuss the hard hat configuration and the smart contract we'll be working with. We ensure the chain ID matches Metamask's settings and import the hard hat console utility for logging information. We also mention the need to install dependencies and check the presence of the contracts folder. The smart contract defines a license, specifies the solidity version, and includes the greet and set greeting functions. The greet function returns a string, while the set greeting function updates the greeting state. We briefly mention other keywords and conclude by understanding the contract's functionality.
And it's probably actually not going to work because I don't have that network started yet. But let's say we did switch that network. You would know if we looked in the advanced settings that the chain ID is set to 1337 so therefore we're just kind of making sure that we have this chain ID matching what metamask is set to for localhost. And that's kind of that's kind of why we're doing that. And if you look at the hard hat documentation, there's probably a little bit more explanation there. But it's kind of more of like a setting you just want to do and not worry about why we're doing it right now.
9. Deploying the Contract to a Local Network
We deploy the contract with an initial value, read the value, and update the value. Interacting with a blockchain is different from a typical database as operations on the chain need to be paid for at the time of the operation. Transactions can vary in cost, and different blockchain protocols offer scalability and cost advantages. We deploy the contract to a local network using NPX hard hat node, which starts a local test network with 19 test accounts. We can import these accounts into our Metamask wallet and have 10,000 ETH to test our program. We deploy our program to the test network using a script that gets a reference to the contract, deploys it, and sets the initial value for greeting.
Basically, we deploy it with an initial value, we can read the value, and then we can update the value. So when you think of CRUD, create, read, update, delete, you can't really delete in blockchain, because every interaction is like saved forever. But we can update and we can create and we can read. Alright, so now that we understand what's going on there, we're going to go ahead and close this out. And we'll go jump back into our tutorial here. And we can continue on.
So what we want to do next is compile our smart contract into the ABI or the application binary interface. And to do that, we can basically use hard hat again. And all we need to do is run NPX hard hat compile. This, this command is going to look into our hard hat config and look for the actual folder where we want to create these artifacts. And we set that artifacts folder to be SRC slash artifacts. So after we run this program, we should see a new folder show up there. So if I go back to my terminal, and I run NPX hard hat compile from the root of the project. Now look inside my source directory, I should now see this new folder called artifacts. And indeed, we see that there. And, and the contracts, we're going to see basically, these two folder, I mean, these two files, we don't really need to mess with or anything. But these are the ABI's. Actually, this one is ABI. It's basically some JSON that kind of describes what's going on. And we can basically import that we never really need to open that and look at it just kind of want to show you what's there. So now that we've compiled our, our contract, we can now consider starting to maybe like interact with it.
So we need to think about interactions with a blockchain a lot differently than you might think of interactions with a typical database. Because when you write data to a database, you're typically going to be using some type of application that is hosted on AWS, or something like that. You know, whatever super base and the person that deployed that program is paying for that hosting service. I think the main fundamental difference is for the most part, when you're running, or you're interacting with a blockchain network, that the operations that happen on chain have to be paid for at the time of that operation happening. Now, sometimes you actually see this implemented on the server somewhere where they basically have a private key, and you're able to basically just call, you know, a back end, and they're doing it that way. But most of the time, you're actually going to be interacting with it and paying for this transaction yourself. Now, these transactions can run anywhere from a fraction of a penny, like when we're interacting with Solana, or are we've, or you're going to be working with something like aetherium, where it's kind of expensive right now. And I think that the reason that you're seeing a limited type of application being built on aetherium is because of how limited you are right now, for those types of payments. So if you're going to be doing some type of decentralized finance stuff, where you're transacting, you know, hundreds of dollars, it might make sense to pay a few dollars for a transaction. But let's say you want to just do something really basic. Anything over a couple of dollars is doesn't make a lot of sense. So I think that's why you're seeing, you know, all types of new blockchain protocols that are more scalable, and maybe less expensive and stuff come out for different other types of use cases. And you're also, you know, needing to understand maybe that the way that you build one of these applications is going to be a lot different. You might only store very important information on chain. And then you might use some other type of decentralized storage that's free for other types of stuff. So that's just all fundamental, like things to think about as we're going about this. But basically, what we want to do now is we want to basically deploy our contract to a local network. So we can deploy to the aetherium main network, or we can also deploy to one of these test networks that are out there. But to do that, we need to go ahead and find aetherium, you know, test aetherium and send it to our wallet. And it's kind of, you know, a bunch of steps, though the most the, you know, the best way is to deploy it to a local network. And the best way I would say for local testing and development is to use a local network. And we can actually create a local network just by running NPX hard hat node. So I can just copy this, and I'm going to split my terminal into a couple of new windows, because we're going to need to run multiple windows. And I'm just going to clear this out. And the first thing I want to do is go ahead and create a local network, run a local aetherium node. And I can do that by running NPX hard hat node. And this will go ahead and start a local test network, a local aetherium node, and it will give me 19 test accounts. And each one of these accounts I can actually import into my metamask wallet. And I'm starting off with 10,000, at the 10,000 ETH, which means I can have some money to test out my program with. Because when I write a transaction, I'm going to need to pay some type of ETH to write to the block to the network. And now I have 10,000 ETH spread or multiplied by 20 on 20 different accounts that I can use. Alright, so what we're going to do next is go back to our tutorial. And we're going to go ahead and deploy our program to that test network. So to do that, we have a script located at scripts slash sample script.js. So let's go ahead and take a look at that. And I'm going to delete all of the comments and stuff to make this a little bit more easy to read. Alright, so not a whole lot going on here. There's really only four lines of code, or really three lines of code that we need to deploy this. First of all, we're getting a reference to the contract by saying ethers dot get contract factory and paste pasting in the string for the name of the contract. Now we're able to do this because in our hard hat config, we basically are setting the path for the artifacts. And then this is going to look in that path and it's going to find the artifact for the greeter. And this is essentially going to be getting the ABI and making it available right here in this line of code. The next function that we're going to call is greeter dot deploy. And this basically now that we have a reference to this contract, we can call deploy and then we can pass in the constructor argument. In our case, we want to set that initial value for greeting. So this could be whatever. So I could say react. London or something like that. And this will be the initial value for our program.
10. Deployment and MetaMask Configuration
To deploy, run NPX hard hat run scripts/deployed.js with the network set to localized. The deployment process will log out information about the transaction, deployment, contract address, and gas usage. After successful deployment, configure MetaMask with an account that has Ethereum by importing an account using the private key provided by the Ethereum node. Once configured, the account will have a non-zero ETH balance. Account zero is used for deployment and deducts Ethereum from the balance, while other accounts have the full 10,000 ETH.
11. Interacting with the Ethereum Network
We can now run our program and interact with it by writing our React app. We configure our local state, define the app as our main component, and create a function called request account to connect with the user's Ethereum wallet. We also create two functions to fetch and write the greeting using providers to interact with the Ethereum network. By calling contract.greet, we can read data from the contract.
You can you can do either way. And someone else's that fail to connect to localhost. If, if you're seeing that, that means your Ethereum node might not be running. So just make sure that you've run NPX hard hat node. And if that is running, then you should be able to connect. And if not, then I can check on that during the next break.
Okay, cool. So now that we've connected to localhost, and we've imported one of our accounts, and we see that we have some ETH, we can now basically go ahead and run our program and interact with it. So what we want to do is we want to go ahead and write our react app. So our back end is running, it's deployed, we're kind of ready to go. Now we want to change our front end.
Alright, so I'm gonna go ahead and start copying and pasting some of this code and walking through it. So I'm going to open up dot j s. And here we're importing use state. From react, which is going to be what we're using to deal with local state. We're importing the ethers library from ethers, which is going to be how we interact with the network. And then we're importing this greeter ABI, which is here in artifacts slash contracts slash reader dot soul slash reader dot JSON. So again, that's the ABI. Next, we want to go ahead and define the address of our contract. And that was logged out to the terminal for a second ago. So I should be able to go to my terminal and copy that to my clipboard here. paste it there. The next thing we want to do is go ahead and define the app. And this is going to be our main component. We're going to go ahead and configure our app. And this is going to be our main component. We're going to go ahead and configure our local state. And the only state variable that we need to deal with right now is going to be the greeting and setting the greeting value. This way the user can type in what they want the greeting to be updated to and then we can basically send a new transaction to update that value. The next thing we're going to do is kind of interesting is we're going to have a function called request account. Now this is really completely new to most people and to myself when I started working with Ethereum. It's interesting for a couple different reasons. First of all, when someone has a wallet like MetaMask or Phantom or Arweave installed in their browser, what basically happens in addition to us having access to this wallet is that it injects a global variable into the context of the window called Ethereum or Arweave or in this case Solana. So we basically have access to something called window.ethereum. And this has a lot of different things that we can do now, now that we have this installed. And now if you tried to run this, this function on a browser that didn't have this, you just get an error. So what you might do if you wanted to kind of do some error handling, you might say if window.ethereum and then you might, you know, do stuff. But we're just assuming that this exists. And we're going to call a theory of window.ethereum.request. And we want to request their accounts. And this is going to allow the user to choose the account that they would like to connect with. You can even have a return value from this and log it out if you'd like. But we don't really need that, that value right now. All we want to do is just connect to that wallet and this will probably be the only thing that we're going to do. All we want to do is just connect to that wallet and this will prompt them and allow them to sign in with their Ethereum wallet. And that's very, you know, that's not a lot of code to make that happen. It's pretty nice. We want to go ahead now and create two functions, one function to fetch the greeting, and then another function to write the greeting. And here you can see that we're checking to make sure that window.ethereum exists. And then the rest of the code is right here. And the way that we interact with the Ethereum node or the network itself is using these things that are called providers. And there are a couple of different types of providers. You have a provider that allows you to have read access for a completely public function like the greet function that we're interacting with. And then you also have functions that need to be signed for creating an actual transaction for writing data. And that's we're going to be doing a signer or a write transaction set greeting. But for fetch greeting, we just need to read information. So this is pretty straightforward. We say we want to do ethers.providers.web3provider. And we're passing in the window.ethereum context. And then we get a reference to the actual smart contract itself by calling ethers.contract, passing in three arguments. We pass in the address of the contract, which is we defined this variable earlier. We pass in the ABI, which is the almost kind of like API for this smart contract. And then we pass in the provider. And now we can use this to call any of the different methods in our contract. So we had a function called fetch. This would be really any read functions. So anything that we wanted to read from the contract, we can now just use this contract to call it. So we can call those functions directly. And what we're doing here is we're calling contract.greet. And we're waiting for that data to come back.
12. Interacting with the Contract and User Interface
We're getting access to the contract, reading the data, and logging it out. We create the set greeting function by creating a signer and passing it to the contract reference. We have a basic user interface with buttons for fetching and setting the greeting. A question from the chat is answered regarding dynamically defining the greeter address. Updating contract logic requires deploying a new contract, but proxy contracts can be used to update the contract pointer. The user interface is complete, and the app is started. The app interacts with the contract by fetching and updating the greeting. The transaction cost is displayed.
And then we're just logging it out. So really basic stuff. We're getting access to the contract. We're reading the data from the contract and we're logging it out.
All right, the next thing we're going to do is create the set greeting function. And this is very similar in the sense that we're creating a provider. And we're doing the same line of code here where we call it new ethers.providers.web3provider. But instead of just using that provider directly in the contract creation, we're creating a signer. And we say provider.getsigner. And this is going to prompt the user to basically be able to sign this transaction. And then instead of passing in the provider, when we create the contract reference, we're passing in the signer. So we have this, just this one extra step. And then we call contract.setGreeting. Just like we called contract.greet, we're just calling the function within the contract. And here we're passing in an argument of greeting. And this greeting is this state variable that we set right here. So we're letting the user basically update the local state by typing.
And the last thing we have is a really basic user interface where we have a form, where we have two buttons. One for fetching the greeting and calling fetchGreeting. And the other for setting the greeting. And we have an input for allowing the user to update the greeting.
I'm going to check on the chat real quick. Yes, if you want to define the greeter address dynamically, you can just write a function in that deploy script that writes to the local file system. So I typically use FS from, you know, from Node, from I'm sorry. Yeah, it's like a Node.js package you can install, call it whatever you want. You can say FS.writeFileSync. And you can maybe just write that to a local file to make that a little easier. It's essentially like one or two lines of code. And then the, but it's not really built in. I don't think to either. It's a hard hat that I know of. There is an extension you can install. Actually, that does that, but it's not, it's not into the main, the main package. So I'm going to go ahead and run that.
Is there a way to update contract logic without affecting data already stored? No, not really. That's why Ethereum. That's why blockchain development is so complex. That's one of the reasons is that if you do want to have an update to contract logic, you need to deploy a new contract. And then you also end up having new state. Now, there are some interesting ways to do stuff that bypasses some of these, I guess you could call constraints. One of those is a proxy contract, meaning that you have your proxy contract that will point to another contract. And then you can basically have a function in your proxy that allows you to update where that, that pointer is. So that's one way to do that. There's, there are a few other different things you can do, but, but by nature, yeah, that's the whole idea. You can't really update things. But a lot of people do, do use proxy contracts.
OK, cool. So we're done writing our user interface. And, you know, I kind of walk through each individual function to kind of go through, but in reality, you know, most of the functionality happening there, that is Ethereum or blockchain specific is just maybe four or five lines of code. And we'll go ahead and start our app by running npm start. So I'll run it down here because I want to make sure. I've referenced all this other stuff we've been doing. OK, cool. So this is what our app looks like. It's really, really basic. No, no nice design or anything. We're focused on functionality for the most part here. So what I want to do is go ahead and just call fetch greeting. And here we see hello, we are in London. So we're, we're, we're interacting with the contract. And then we want to go ahead and update this. So I can just call set greeting and this will now prompt me to connect my wallet and the wallet that I want to connect is the one that has Ethereum in it. And then now it's going to actually ask me to pay for this transaction. So the transaction cost is point zero zero whatever zeros six three.
13. Interacting with the Contract
We interact with the contract, update the greeting, and see the updated greeting. Contract calls are logged to the Ethereum node.
And here we see hello, we are in London. So we're, we're, we're interacting with the contract. And then we want to go ahead and update this. So I can just call set greeting and this will now prompt me to connect my wallet and the wallet that I want to connect is the one that has Ethereum in it. And then now it's going to actually ask me to pay for this transaction. So the transaction cost is point zero zero whatever zeros six three. So if I click confirm, then I see that we've now updated the greeting. And if I refresh. And I'll call fetch greeting. And we now see that we have our updated greeting. And another thing you'll notice is that when you're when you're interacting with the contract, you'll see this logged out to your Ethereum node that a contract call has been made, either a read or write operations are all logged out here.
14. Interacting with the Contract and Use Cases
In this section, we discussed the ability to write transactions to the deployed contract and the cost implications on the Ethereum mainnet. We also explored how Ethereum layer twos provide lower transaction costs, enabling different use cases. Additionally, we addressed the question of creating a smart contract with time triggers and explained the use of Cron jobs or external functions like Lambda in AWS. The presence of window.ethereum and window.Solana in browser wallets was also explained. Lastly, we touched on the contract's role as a server responding to API calls and highlighted the transfer function as an interesting use case. We mentioned Axie Infinity as an example of a blockchain-based video game that allows players to earn and trade tokens, showcasing the potential for crypto integration in the gaming industry.
All right, so doesn't look like there's any questions there. Let me check out the other chat here. Okay, good. Yeah, not not a ton of questions right now. So yeah, does anyone have any questions there before we move on to the next portion of this?
Okay, good. So I'm going to go ahead and close this out. And I'm going to go ahead and close this out. And I'm going to go ahead and close this out. So yeah, does anyone have any questions there before we move on to the next portion of this? Are anyone running into any issues? Okay. A couple people typing, so I'm going to wait for those questions to come through. Cool, looks like working good for a couple people. So just to confirm, we are actually able to write this transaction to the deployed contract. That's right. Yeah. So we're writing this, we're making state changes on the blockchain whenever we write a transaction. Now, you typically wouldn't probably have this, again, this type of application for Ethereum mainnet. You often see, you know, high value transactions on Ethereum mainnet because of how expensive it is to have a transaction. You have DeFi, you have, you know, financial stuff. You have ART, you know, people selling things that are hundreds of dollars. What you do have, though, is Ethereum layer twos that you can use all of the skills that we're learning to write on. And those transaction costs are in the fractions of a penny. And that just essentially lowers the barrier to entry to different other use cases. So, you know, you could basically say, OK, only a certain type of application is worth paying a couple of dollars for a transaction, high value transactions. What if I just wanted to send five dollars or a dollar to one of my friends? Then the fraction of a penny, like, makes a lot of sense. Or if you want to build in some type of financial use case that is less expensive, DAOs and things like that make a lot of sense as well. So someone asked the question, if I want to create a game, how can we create a smart contract with Tom Stamps to trigger the smart contract after a period of time? Yeah, so that's a good question. And that's one of the questions that I also had. The idea around like Cron jobs, I guess, is kind of like the idea there. And when you think of how you build a typical server based API or server based application, you can set up these these these Cron jobs or these triggers that get invoked every like hour or every certain point in time every day. This is not built into the Ethereum virtual machine. You can't just say I want to invoke this function every X number of minutes. But what you can do, though, is just spin up like a Lambda function or something like that in AWS. And you can call the contract from there every X, you know, every so often and do it that way. So people do do do Cron jobs and stuff, but it's not native to how you can't. You can't write it directly into the Solidity code. Someone asked, why is window.ethereum there? That's a good question. So if someone has a browser wallet like like Metamask installed, then window.ethereum will be available to there. So let's say you have not Metamask, but maybe a different wallet. As long as it's an Ethereum wallet, then window.ethereum will be there. And if you have a Solana wallet like Phantom, you'll have window.Solana there. And you can also call functions like window.Solana.isPhantom will tell you if the if the Phantom wallet is the type of wallet. So all types of stuff like that is injected in the window. So if you install Metamask, window.Ethereum will automatically be there. Yeah, you can think of the contract like a server responding to API calls. It's exactly that how you could think of it.
All right, cool. So the next use case that we're going to look at, and. So the whole point of this contract is more of like a introduction to how you might interact with the network. Versus an actual like real world use case, even even this minting tokens example isn't probably the most real world use case. I think the one interesting thing that we're going to look at, though, is this transfer function. And this transfer function gives you a real. Like example of how you can transfer value between parties and only like five lines of code. Versus maybe what you might have experienced in any other type of e-commerce trying to write this type of code yourself. I think this is a really interesting use case. Now, if you want to learn about Ethereum, Dapps, like what apps are being built on Ethereum. A good example or a good view of some of the examples, if you just go to explore Dapps on Ethereum.org, you can see like finance, arts and collectibles, gaming and technology. I think one of the interesting ones for me is is Axie Infinity. And I'm trying to think I saw I saw a chart today where their growth in the last three months has been some ridiculous number. But with Axie Infinity, it's it's a blockchain based video game that allows people to make or to earn tokens while they're playing. So it's like play to earn. But you can also buy and sell items within the game. So if you think of Fortnite, I have a couple of kids and I spend hundreds of dollars a year probably. Or they spend also all the money, a lot of it they get on Fortnite. You get these skins, but like once they grow out of it, like the skins are gone. With Axie Infinity, you actually can resell all of the things that you buy in game. So you have now I think growth of something like they had one month of of growth where they hit like over 800 million dollars in transactions like last month. And they've grown even even faster since since I saw that, because I saw some tweet today that was kind of like kind of blew me away. So I thought that was a really interesting thing. And you're starting to see now that all of the big gaming studios are starting to realize that this is a big potential. So the head of YouTube Gaming was recently talking about how they're looking at ways to collaborate and do stuff with with crypto within games and dealing with Web3 types of ideas.
15. Blockchain Use Cases and App Development
The use cases for blockchain technology currently fall into categories such as finance, arts and collectibles, gaming, and technology. With the emergence of more affordable chains like Arbitrum, Optimism, Solana, and Avalanche, we may soon see broader use cases, including social media platforms that allow users to earn rewards. One interesting aspect of building on the blockchain is that once data is written to it, it stays there forever. This opens up possibilities for projects like a blog where posts are stored permanently for a small transaction fee. The NFT space is another example, with multiple marketplaces building interfaces on top of the underlying application data. Looking ahead, we can expect the development of Web3 versions of popular platforms like YouTube, social media, and Instagram. To explore the types of apps being built, visit the graph.com and browse through the subgraphs, which are APIs created by developers. Many of these APIs are focused on DeFi and gaming.
You also have a few of the big gaming studios that have been actively talking about it even today. Just in general, like crypto like awareness, like Stripe just announced today that they're doing a big push for a new crypto team and they're hiring a bunch of people for that within Stripe. And Stripe has been really anti crypto actually up until recently. So that's pretty interesting. So like right now, a lot of the use cases fall in these categories, finance, arts and collectibles, gaming and technology. I think, though, with the lesser expensive chains like Arbitrum and Optimism, Solana and even like Avalanche, you're starting to see now more broad use cases like we haven't seen the big social media application yet that allows people to earn for using the platform itself. So I think that is going to happen sometime soon. Yeah. And get requests are free. So, yeah, so get requests are free. I think that's one of the also one of the really interesting things about building on the blockchain is that your data stays there literally forever. As long as the network is up and running, Ethereum has never gone down. Maybe that I know of. Maybe maybe it has for like a short amount of time at some point. But from what I understand, it never has. But once you write data to the blockchain, it stays there forever. So like I mentioned, one of the projects that I'm working on that I think is going to be interesting is a blog that once I write a blog post and I pay, I think it was two or three cents for the transaction on Solana and Arweave, that it lives there forever. I never have to pay anything again in the future. And if I forget to pay my hosting bill, it doesn't go down. But it's also public and accessible by anybody. And I think a lot of the ideas are on Web3 or are people building out front ends to compete on different back end data. And a good example of this is the NFT space where you have Foundation, Zora, OpenSea and SuperRare and Rarible. You have like half dozen marketplaces that are now building out interfaces on top of all this this application data. So I think that's a really basic example like NFTs isn't applicable to most things, but you'll see that same idea play out. I think when someone builds the YouTube of Web3, the social media of Web3, Instagram of Web3 and those sorts of things. Another good place to see types of apps that people are building is if you go to the graph.com. This is actually where I work or one of the protocols I work closely with, I guess you could say. And you go to sub graphs. These are kind of like APIs that people have built. And you go to actually I'm going to go to the hosted service because this has some more APIs. Here you can see a good example of some of the different types of applications that are popular and the different APIs that people are building. A lot of these are around DeFi and gaming.
16. Debugging Transaction Error and Token Contract
Someone asked about an error with sending a raw transaction with an invalid chain ID. Double check the chain ID is set to 1337. If the issue persists, reset your account transaction history in Metamask settings. After the break, we'll explore tokens and sending payments within a contract. We can abstract away the need for payment providers and allow direct transactions between parties. We'll walk through the code for a token contract that sets the name, symbol, and supply.
OK, cool. So someone asked, I'm getting this error trying to send a raw transaction with an invalid chain ID. So. Two things we're going to do to debug that. First of all, I would double check that you have the chain ID set up right here is 1337. And if you don't, this is documented in the readme. So just make sure that you have this set up to chain ID 1337. And then if that is already done and it's still not working, you can go to reset your account. And this isn't going to delete your account. It's just going to reset the transaction history. And the way that you can do that is by going to your Metamask wallet, opening the settings here. And then going to advance. And then going to advance. And then clicking reset account. So those are the two things I would double check to make sure you're good to go.
Alright. So I think the next thing we're going to be looking at is tokens, but I think that since we are at 20 minutes after the hour, it might be a good time to take a break to allow people to to maybe get caught up or to take a restroom or drink break. So what we'll do is we're going to start back at 35 minutes after the hour. So that's almost exactly 15 minutes from now. So let's take a 15 minute break. We will come back at 1235 my time, which is going to be like 1035 a.m. Pacific time. It will be one thirty five p.m. Eastern time. And I'm not sure the time in Europe where you where you are, but let's say 35 minutes after the hour. And I will be hanging out drinking coffee and I will be checking out questions on Discord. And I will be hanging out drinking coffee and I will be checking out questions on Discord. And I will be checking out questions on Discord. And I will be checking out questions on Discord. And I will be checking out questions on Discord.
Alright. Looks like it is time to continue on. So it looks like some people were having some fun during the break, sending themselves tokens to other wallets, which is cool. And it's a good way to experiment because you do have multiple accounts and you can send them to different accounts doing that. So let's say I wanted to send some tokens to this account. I can just open this account, copy to my clipboard, go back here and send and transfer them between my accounts or I can paste the address here either way. And I might want to send like, you know, 100 ETH to that address. Should be able to go here and now see that I have 100. And this is similar to what we're going to be doing in just a moment. But we're going to be doing it with our own tokens that we create and we're going to be doing it programmatically via a front end application.
One of the most interesting things about smart contract development is the ability to send payments between different parties within the contract itself. Also to program and things like commissions and fees into a contract that can be sent to a certain address, which is pretty interesting when you think about how marketplaces work today. All the different types of digital marketplaces there are today. You can think of what people are buying and selling digitally. So for instance, you have things like, I would say, Spotify, you have YouTube, you have people that are selling digital courses. You have, of course, the NFTs, which are like Web3 types of technology. But in general, you have all types of digital payments that can happen. One of the really interesting things is that we can basically abstract that away and make it part of the contract itself. So we don't need to have any payment provider. We just allow people to transact directly between different parties without any intermediary. So I mentioned earlier that this transfer function is going to be what's going on there. But instead of just touching on that, let's go ahead and copy this whole contract. And we're going to walk through all of this code. So I'm going to copy this and I'm going to create a new file called token.sol. And this is going to be in the contracts directory. So if I go ahead and open up my project code base. And I go to contracts at the root level here. And I create a new file called token.sol. I can go ahead and paste this new contract here. So we're doing all the same stuff when we get started. We're just importing hardhat.console. And we're setting our Solidity version and all that. And our main functionality is happening in these 20 lines of code. So we have a contract called token. We set a few initial pieces of state. So the first thing that we're doing is we're setting the name of our token to be lazy cats token or whatever you'd like. We're setting a symbol. And here we're just setting it as LCT. And we're setting the supply to be 1 million.
17. Token Contract and Deployment
We set the supply to be 1 million and use a mapping to store balances of addresses as key-value pairs. In the constructor, we set the total supply of tokens for the deployer. The person deploying the contract is referred to as message.sender. The transfer function allows sending tokens between parties. It includes a require statement to check the sender's balance and subtracts tokens from the sender's account while depositing them into the recipient's account. We have 15 lines of code that accomplish this. After saving the contract, we compile it and update the deploy script to include the token deployment. We obtain a reference to the token contract and wait for the deployment to be successful, logging the token address. Multiple addresses can be programmed into the contract to distribute tokens among parties.
And we're setting the supply to be 1 million. So here we have a value that we're setting as a variable name called token supply. And the amount is 1 million. And then we have something that's kind of interesting, this mapping. And this is a way to do a key value pair type of operation in Solidity, almost kind of like an object where you have an object. In our case, it's going to be called balances. And then balances is going to have a key. And the key is going to be an address. And the value is going to be an integer. So this way, we can add multiple values if we wanted here. But in reality, we're only going to have one. So this mapping you can think of as kind of like a map or an object in another programming language.
OK, cool, so we basically have 15 lines of code, actually, that was like 20 lines of code, and we're doing quite a bit there. So let's go ahead and save that contract and continue on. We can now call MPX hard hat compile again because we now have a new contract. And if this compiles successfully, then we should be able to go into our artifacts directory and just see that we have now a new token contract. So we don't really need to touch that, but it's just good to kind of see that it's that it's been compiled. The next thing we want to do is we want to update our deploy script. Because right now, our deploy script is only deploying the greeter and we now want to also deploy the token. So. I'm going to go ahead and get a reference to the token contract and all of this stuff is exactly in the in the documentation. We're going to go ahead and get a reference to the token contract. We're going to go ahead and deploy the token. We're going to go ahead and deploy the token. And then just like we did before. We're going to wait for the deployment to be successful, and then we'll just log out the token address. So. Exact same code that we wrote here, I think the main difference is that in the deploy function here, we're passing in a constructor value. But here we have hard coded everything. So we don't have any constructor value. So we just leave that argument blank. Yeah, you can you can program multiple addresses in a contract like when you deploy this, you could basically have an array and you could just distribute these tokens between like a certain number of parties. All right, cool.
18. Deploying Contract and Updating Front End
We have written our deployment script and deployed our contract to our local Ethereum node. We updated our front end to start interacting with the deployed contract by importing the token and setting the token address. We created new pieces of state for the amount of tokens and the account number to send the tokens to. We implemented the get balance function to retrieve the token balance of the user. We also implemented the send coins function to approve and transfer tokens between parties. We updated the user interface to include buttons for getting the balance and sending the coins, as well as form inputs for the user account and amount. Finally, we imported the token address into our MetaMask wallet to view the token balance.
So. We have written our deployment script, so we can now continue on. Kind of just done this part here. And now we want to deploy our contract. To our local Ethereum node again, because now we've updated some stuff, we want to go ahead and deploy again. So the way that we can do that is we can just run the same script that we ran before this script right here. So we run NPX hard hat. Run scripts, slash deploy. And they want to set the network. As local as. And this script is, you know, and the tutorial and the. And the workshop material. So if I run this, we should now see that we see some logging happen here and we now have the two different contract addresses logged out here. So we have the greeter and we now have the new one for the token. So the token's been deployed. So let's now update our front end to start interacting with that. So to do that, I will go ahead and start importing some new stuff. So I'm going to go ahead and open SRC slash app dot JS. I'm going to go to the top here. So we already have the greeter imported, so I'm going to now import the token. We also have the greeter address. We don't yet have the token address. So I'll go ahead and set that. So if I go back to my terminal. I can actually let me go ahead and update the greeter as well, since we deployed a new version of it. And then I don't think you have to. I think they both will still work. But either way, I'm going to go ahead and set the token address here.
Next, we want to go ahead and create a couple of new things. Next, we want to go ahead and create a couple of new pieces of state. We're going to have a form that allows the user to send tokens to another account, so we need to keep up with two pieces of state. We need the amount of tokens and then the account number that we want to send the tokens to. The next thing we want to do is have a function to get the token balance of the user that is calling the function. So I'm going to go below these two functions. And I'm going to create a new function called get balance. And one interesting thing that we're doing here that we haven't really done before is that we're calling this window.ethereum.request like we did earlier. But we're setting the return value as a variable. That's because when you call window.ethereum.request, you're given an array of accounts that the user has, I would say, allowed the application to use. And since we've only allowed this application to use one single account, we're just going to grab the first account out of that array. So this should be the account that we've been using all along. The next thing we do is like we do the same provider stuff, but here when we call contract.balanceof, we're passing in the account of the user that is currently signed in. So this is kind of going to be us passing in this variable into the balance of and if we go to token.sol, you'll see balance of takes in, you know, one argument for an address. And here we're passing in that address. The next function that we're going to write is send coins. This is going to be using a signer because we're basically needing to sign a transaction and approve a transfer between two parties. And what we're going to do is we want to call contract.transfer passing in two arguments. One is going to be the account that we'd like to send to and the other is the amount. And we set those variables earlier like right here. So we have user account, set user account, amount and set amount. We're going to be updating, you know, set amount and set user account in the UI in just a moment, but those variables will be available to us here. And then we wait for that transaction to complete and then we just log out, you know, that it successfully transfer. Looks like someone's having an error. Okay, looks like they got it working. Okay, good. Okay, the next thing we'll do is we'll update our user interface now. So we added, you know, get balance. We added send coins. And now we want to add this code right here. So I'll just go ahead and maybe copy this. Okay, so we've got our user interface. So I'll just go ahead and maybe copy this. I'm doing this all I guess within this header. Okay, so we're just adding like a line break here. And then we're adding a button for getting the balance, a button for sending the coins, a form input that allows us to set the user account. That we want to send the coins to. And then we have a form input that allows us to define the amount that we'd like to send.
Okay, so we have that. The next thing that we're doing is kind of interesting. When we deployed this contract, we were given a address for this token. Now this is an address that we can now actually import into our MetaMask wallet and see that balance in our wallet.
19. Adding Token Contract Address
To add the token contract address, go to the add token section and paste the address. The symbol will appear automatically. Set the token decimal to 0.1 and click add custom token.
So the way that we do that is we just copy this to our clipboard. And I have this kind of outline here. But what we're going to do is we're going to go here to add token. And it looks like we now need to, looks like the interface maybe has changed since I did this. So import tokens. So I need to update that. So import tokens. And we're going to paste in the token contract address. And you see that when we paste in the address, we see the symbol shows up automatically. That means it's realizing that. And for the token decimal, we're just going to put 0.1. And then we're going to click add custom token.
20. Importing and Sending Tokens
We now have 1 million LazyCat tokens in our wallet and can import them into MetaMask. After updating the user interface, we can send tokens to other addresses. However, there seems to be a bug in MetaMask, and we may need to reinstall the wallet. We apologize for the inconvenience.
So here we have now our LazyCats tokens in our wallet. So we now have 1 million LazyCat tokens. So we have ETH. Oops. Yeah, we have ETH now and LCT. Cool. So now that we have our new tokens in our wallet, we can actually import them into our MetaMask wallet. And we can now start sending these to other people.
So what I'll do is I'll just save this and I'll go back to my React app. And we should now see that we have an updated user interface. So if we click get balance, we should see that we have a balance of 1 million. And now we want to send these to someone else. So I might say, let's just, you know, send to another address here, I guess. So I'll go ahead and click on account 2. And just copy this address to my clipboard. Go back to account 3. And here I can paste in the account ID and then the amount. I'm going to send them 100,000. So if I click send coins. And it looks like I have some type of error. Not sure what's going on there. Huh. Interesting. Looks like I've had a bug in MetaMask. Is anyone else getting a bug? And I don't think I saved my wallet's information. So I might need to delete this wallet. And then reinstall it. And I don't think I saved my wallet's information. So I might need to delete this wallet. And then reinstall it. Yep, I'm going to have to do that. So I'm going to remove. Wow, interesting. Someone else had the same error. So I have to go through this whole process again. So I apologize. This will be that entire process again. Maybe I should save this passphrase just in case. Okay. Looks like I messed something up. Let me try this again. Oh gosh, I messed something up again. There we go. Okay, cool. So I'm going to go ahead and save this. Passphrase just in case that happens again. So I have MetaMask installed. I now want to. Go ahead and. Import this account address. Which I need to go ahead and restart the node. Okay. I want to go ahead and redeploy this contract. Update the token address. And then try to import the token address here. Okay. Let me try that again. Okay. Okay. Let me try that again. Okay. Um, what I might do, and I'm not sure if this had any reason to do with that, but I might go ahead and import another. One of these accounts to use instead of like using the MetaMask account. So I'm gonna go and copy this private key. And. I will go here and I will say import account. And I'm going to use this account. So to send to somebody and copy this address and go back to account to. Okay. And I'm going to go ahead and import this account.
21. Importing Tokens and Open Zeppelin
I encountered an error while trying to send coins, but I realized it was due to a mistake in the token decimal. Ethereum works with 18 decimals, but in our case, we set it to zero. Once I corrected the decimal, the transaction went through successfully. It's important to understand the decimal system when dealing with Ethereum and tokens. Open Zeppelin is a company that provides open source solutions for secure and standardized smart contract development.
And I'm going to go ahead and import this account. So I'm gonna go and copy this address and go back to account to. And I want to send coins to this address. We'll try this again. I'm hitting this error again. I wonder if it's the way I imported that account. Let me try one more time. Okay. All right. All right. All right, let me go ahead and copy this token address. And I'm going to import the token. And maybe I'll set the token decimal is zero. Wondering if that's what what messed it up. So I'm setting the token decimal to zero. I'm hoping that this will fix the issue and maybe I was. I was wrong about the token decimal. All right. So with that being said, let's try this one more time. I will go ahead and refresh. Send coins there. One hundred thousand. First get balance. First get balance. The balance looks good. OK, there we go. I think for some reason I was mistaken around the token decimal. The decimal matters because when you're dealing with Ethereum, you're actually like with ETH, which is the native, you know, currency of interacting on the Ethereum blockchain. You're actually working at 18 decimals and you have, you know, the ability to send, you know, portions of an ETH down to the 18th decimal. And these things are a little bit beyond the scope of this, I would say, workshop. But it is definitely something to look into. And the way that we are able to kind of deal with these large orders of numbers is you have this idea of way and way. One way is one one 18th of a decimal of of ether and one way is eight decimals. So when you want to send, you know, these these massive numbers of decimals, you're dealing with like these things. So typically when you deploy your own token, you set the token to have 18 decimals as well. But in our case, we set it as zero decimals. So I think when I tried to transact at point one decimals, it kind of figured out that there was something wrong there. Anyway, we should be able to click confirm and see that one hundred thousand coins were successfully sent there. So if you had the same error as me and you were listening to me to do one point one decimals, that was the error. When you're importing the token, it should just be zero decimals. And I'll make sure I update the workshop material to reflect that. If you're getting. Yeah, if you're if you're sending 10 and getting point one, that's because I messed the decimals up when once you set it to zero, it should work good. I'm getting a balance of zero instead of one million. Yeah, maybe it's imported into the wrong account. Make sure that the the account that you are importing should be this account zero for like where the hundred thousand tokens should show up. They're not going to show up in any of these other accounts, only an account zero. And the reason for that is when you deploy the contract. Using the CLI automatically uses account zero something. Yeah, I use zero as the decimal. So what I should now be able to do, though, when I when I check my balance, it should now be at nine hundred thousand. But if I switch over to this other account. Connect to it and I get the balance, I should now have a balance of one hundred thousand. And, you know, we could continue sending these on to other parties as well. Say I wanted to send a hundred like fifty thousand back to this account. You know, I can go here and do that. And it looks like I don't have enough. I don't have any Ethereum to send, so you have to have either to send. OK, cool. It looks like zero is working. Oh, you know what? I even have it in the tutorial to use zero. I don't know why I thought point one anyway. All right, let's continue on now, the way that we just use tokens is kind of very crude. We hard coded everything. There is no security. There aren't a lot of things that you typically need for a financial transaction, especially when you're dealing with actual value like you are in Ethereum. The great thing about the Ethereum ecosystem is that there are a lot of things that have been figured out already. And a lot of this stuff is already open source and standardized. And because transacting value is such a commonplace thing when you're dealing with digital currency within smart contracts, you have a lot of things that have already been tried and tested out and standardized, like I said. So one of those things is you have this company called Open Zeppelin and Open Zeppelin has a lot of really great open source stuff that they've created and made freely available.
22. ERC20 Token Creation and Open Zeppelin
ERC20 is a token standard that allows for easy minting of tokens using predefined functions and functionality. By inheriting the ERC20 standard in your contract, you gain access to various functions such as transfer, approve, and allowance. To use ERC20, you need to install Open Zeppelin contracts and import them into your contract. With just a few lines of code, you can create a token and call the Mint function to create the actual token. The Mint function transfers a specified number of tokens to the message.sender. ERC20 is commonly used for fungible digital tokens, while ERC721 is used for non-fungible tokens. The ERC20 documentation provides detailed information on the various functions available. In the constructor, you need to specify the name and symbol of the token. Pass these arguments into the constructor to create your token. Finally, in the deploy.js file, pass the arguments to the constructor to complete the token creation process.
So what I'm going to do is go ahead and do that. I'm going to call npm install at Open Zeppelin slash contracts. But I'm going to use Yarn. Hopefully this works since I already have a pack. I don't have a package. So I do have a package on JSON. OK, it's still going to work. All right. Looks like it's almost there. All right. Looks like it's almost there. All right. Looks like it's almost there. OK, so we have installed Open Zeppelin. And what we can now do is just import it. Like so. And then now we can inherit from ERC20 and have all that functionality. So we can essentially create a token using four lines or five lines of code. So let's go ahead and copy this and go back to our smart contract and just update this. So what we have now is created all of that functionality and just five lines of code. Now, the most important line of code is this right here. This is where we're actually calling Mint. And Mint means we're creating the actual token itself. And Mint takes in two required arguments. And if we go back here, let's see here. Looks like I don't have Mint listed. But let's actually let me veer off here for a second. And I'm going to just Google for Open Zeppelin ERC20. So a few of the other tokens or the two of the few of the other standards that they support are ERC721, ERC777. And I think there's one or two other ones. But ERC20 is what a lot of people use for actual digital tokens that are fungible or they are currency type of tokens. And then ERC721 are what people use for NFTs or non fungible tokens, which are basically unique identifiers for an individual token. Whereas with ERC20, you can mint multiple. But if you go to ERC20, you'll see that we have a lot of documentation around like what all is going on here. So, for instance, there's an explanation of decimals. You have documentation around creating a fixed supply. You also have like a little bit more information around the mint function. If we click on mint, you'll see that like we have all this documented. But mint is basically going to transfer this number of tokens to the message dot sender. That's kind of a general idea. So.
With that being said, we're going to pass in the constructor. We need to specify a couple of arguments. One is the name of the token and the other is the symbol. And earlier we had we had hard coded that. But in this example, we're actually going to be passing in as the constructor. You could also decide to create a variable like here and then omit this and then just reference those variables right here. So like it's up to you. But in this case, we're just going to be taking the standard as is and we'll pass that into the constructor. So we have token and we're calling it the Indy token or you can call this whatever. But, you know, this is really all we need to kind of continue going on. So with that being said.
Let's go ahead and. Go to deploy JS. And now we want to go ahead and pass in the arguments to the constructor.
23. Updating the Front End and Additional Resources
To update the front end to use the new token, you need to modify the get balance and send points functions. The challenge is to use the new token in the front end, which requires importing it into Metamask. Minting refers to creating tokens or digital scarcity in the Ethereum world. The Ethereum dev speed run, scaffold ETH, Buildspace, and the NFT marketplace tutorial are recommended resources for further learning. Use Web3 is a comprehensive platform with tutorials, podcasts, video courses, books, and starter kits. Follow influential people on Twitter, such as Austin Griffith, for more insights.
And now we want to go ahead and pass in the arguments to the constructor. So for this, I'm going to go ahead and do Indy token. Or this would actually be whatever you would like to call it, but it needs to match this. And then we want to pass in two arguments here. Actually, no, we need to pass in two arguments here. I'm getting a little confused. No, no, I'm sorry, I was right. We need to pass in two arguments here. I think I got confused because I called this Indy token instead of maybe just token or something like that. But again, if you just follow the workshop, it should work right. I'm just confusing myself, I think. So with this update, we've now passed in the values for the constructor. And we should be good to go. So if we now run. Like NPX hard hat compile. And then NPX hard hat run scripts. Slash deploy and then set. Whoops. Network as localhost. Then we should see that we've successfully deployed our new token and we now have a total supply of. In our case, 100000 and we have 18 decimals by default. So when we import this, we have to set the decimal as 18. So with that being said, we're kind of on to the wrap up of all the stuff that we've been doing here. So what I would say would be the challenge for you and I can hang out on Discord afterwards and answer questions is how do you actually update your front end to use this new token that we deployed? And really the main the main two differences that you need to change or consider changing are going to be. This. Function for calling get balance and this function for calling send points because. Maybe we have already this function here, so we have balance of. We have actually transfer or maybe already updated this to be the same thing, but either way, I would I would say, OK, let's try to update the front end or test out the front end to see if we can use these new tokens. But you still need to import those in the Metamask and all of that. So I would say the challenge is to kind of use this new token in the front end. And then if you can get that, which should not be very hard because a lot of it's already done for you, then you should be done. And someone asked of around some next steps that you would take to kind of dive deeper into a lot of this stuff. And I kind of linked to a few of the things that are the resources that are for me pretty good that are all free. So. There is the Ethereum dev speed run. This is something that was created by Austin Griffith and this he's a really great educator and he's actually the person that educated me a lot around a lot of this stuff. And so, yeah, someone mentioned minting or asked about minting. Yes. So minting is basically creating, creating tokens or printing money, whatever you'd like to say, or creating digital something, some type of digital scarcity in the Ethereum world. So. Yeah, Ethereum dev speed run is great. It introduces you to a bunch of things within the Ethereum ecosystem and solidity. And it also introduces you to his scaffold ETH. Which is a really great starter project for working with Ethereum. It has branches for all types of different types of applications on Ethereum. So each one of these branches is a different type of app that's written. That's like full stack. So you have like Coinbase wallet, you have like DeFi stuff, you have NFTs, flash loans, all kinds of stuff. So this is like hundreds almost or definitely. It's probably hundreds of applications that are like boilerplate projects that you can play around with, which are really great. The other thing that I recommend is Buildspace. Buildspace. And this is a free, almost like coding school for Web3. And they are really great. They do a lot of stuff on Ethereum and they're now starting to explore Solana as well. We also have this tutorial that I wrote, building a full stack NFT marketplace on Ethereum with Polygon. This uses what's kind of known as a side chain or people often bucket Polygon as a layer or two. This allows you to transact on the Ethereum, quote unquote, network on an alternate EVM network using what's known as Polygon for a fraction of what you would typically do on Ethereum. So a transaction with Polygon, I believe, is in the range of 0.001 cents or 2.1 cent or something like that. But you can use the same code base to build an NFT marketplace anywhere on any EVM compatible chain, even Ethereum layer one. So those are both really all really great places. And then finally, Use Web3 is a really great overall place to see a bunch of different tutorials and stuff. So you have like podcasts, video courses, books, starter kits, tutorials. So like those four things that I linked at the bottom will keep you extremely busy for probably weeks or months. There seems to be a lot of great content coming out lately on Web3. Of course, it's starting to just finally blow up. And I would just say follow a bunch of people on Twitter. See fun people that are creating stuff. Follow Austin Griffin. Follow some of the people that he's retweeting.
Q&A and Additional Resources
I will be available for the next 40 minutes to answer questions on Discord. If you have any final questions, please let me know. I appreciate everyone's time and hope you learned a lot. You can follow me on Twitter at dabit3 and reach out to me at a later time. The main differences between hard hat and truffle lie in the developer experience. Ethers.js has a better API than Web3.js in my opinion. I'm excited to be in London next week for the main event. Check out my tutorial on building GraphQL APIs on Ethereum using the Graph Protocol on dev.to.
Those are all great educators in the space. So with that being said, I think we're kind of done. I will be around for the next 40 minutes to answer questions on Discord. And if anyone has any final questions, please let me know. And I would be happy to answer them, of course, for the next 10 minutes or so. No way to thank me other than just like having shown up here and stuck around for that for this whole workshop. You know, I just I truly appreciate everyone's time these days. I know how busy we all are. So I'm glad that you came and showed up and I'm hoping that you learned a lot. Seeing some pretty good feedback. I'm glad that everyone enjoyed it. Yeah, and you can always again also follow me on Twitter and reach out to me, you know, at a later time. If you have any questions, I'm dabit3 on Twitter. And my messages are kind of like closed. My DMs are, but you could always like just respond to a tweet or something like that. All right. So it looks like I don't see. OK, here's a question. So I'll stick around for a second. What are the main differences between hard hat and truffle? Same for ethers and Web3.js. So I would say that the main difference is that I'm using a lot of the same stuff. And Web3.js. So I would say that the earlier libraries for Ethereum development were going to be truffle and ganache and Web3.js. And those are really great. And you can do a lot with them. And I would say, you know, a lot of projects definitely still use them and they have great funding. I think consensus funds Web3.js. And so, yeah, they're great. But I think what hard hat brings to the table to me is a slightly better developer experience. That's just my opinion. There's a lot of people that actually don't agree with that. But hard hat is starting to become pretty popular. So I think they're both equally popular. And I would suggest like if you're interested in exploring more of the ecosystem to check out truffle as well. I do think that ethers.js has a better API than Web3.js. It was just easier for me to pick up and understand. Web3.js probably has a larger API surface that you might be able to do more with. But ethers to me was just easier to pick up. And I thought their documentation was a little bit better. So thanks again for showing up. I'm going to wrap up and jump off the chat here. I'm off of the live stream. So, yeah, it was great to be here. Thanks for showing up. I'm looking forward to being in London next week for the main event. And someone asked about an introduction to the graph. And I do have that. And it's on dev.to. If you just Google building GraphQL APIs on Ethereum, I think that should show up. So this is the tutorial that I wrote for building APIs on top of Ethereum. It's a long story, but it's kind of hard to build. Yeah, it's hard to build front end applications directly querying Ethereum, getting anything that's non-trivial, the type of data you typically need. So you need some type of indexing server. And the project that I work with is called the Graph Protocol. And it allows developers to really quickly and easily build these APIs on top of Ethereum or any of these decentralized networks. So this is a good tutorial. If you want to kind of go into that intermediate level, maybe even, yeah, I would say intermediate level of Ethereum development, I would check out this tutorial as well. Yeah, let me share the link.