Conf42 Web 3.0 2022 - Online

Build on Ethereum Quickly and Easily with Scaffold-ETH

Video size:


Join Kevin Jones for a session on Scaffold-ETH, an off-the-shelf stack for rapid prototyping on Ethereum, giving developers access to state-of-the-art tools to quickly learn and ship an Ethereum-based dApp.


  • Kevin Jones talks on how to build on Ethereum quickly, easily with Scaffold ETH. Would love to chat with you guys if you have any questions or if you're interested in any collaboration.
  • Web three is this new concept of building applications that are decentralized. They are blockchain based using a ledger. Everything is transaction based and message based. You have to be careful with sensitive information on the blockchain. Its optimization is key.
  • Scaffoldeth is a project that allows you to build a smart contract on the Ethereum network. Here, we'll go through the steps that you need to go through to get started. We'll also do some tests to test your ability to build on the platform.
  • Scaffoldeth lets you access control of a smart contract using a public address. Instead of creating a hard coded address, we can import another smart contract. We can then use JavaScript to make contract calls as well. This is how we actually deploy our contract.
  • We're not really doing anything super crazy here. All we're doing is just have a function that allows us to change a state. Let's instead make people pay a certain value to update the smart contract. Now let's figure out a way to get that money out because right now it's a black hole.
  • When you deploy your smart contract to a testnet, you'll probably need to update your front end so that you can interact with that testnet. Next thing you want to do is anytime you deploy a smart contract, you probably want to verify your contract.
  • We're going to use a browser based wallet called metamask. We wrote a smart contract, transferred ownership of the contract, updated state of the smart contract and generated a build. Now we can surge the application to our local host Ui.


This transcript was autogenerated. To make changes, submit a PR.
Everyone, thank you for coming to this Conf 42 talk on how to build on Ethereum quickly, easily with Scaffoldeth E. My name is Kevin Jones and I'm really excited to teach you guys today how you can build your own decentralized web application. So without further ado, let's get started. So if you're new to this concept of web three and building on Ethereum and decentralized applications, there's a lot to learn. Again, my name is Kevin Jones. My background is full time. I work for a company called Nginx. I'm also a developers advocate for a popular toolkit called Scaffold ETH, and I am the founder of a nonprofit called the Blockchain Education Fund, based out of here in California. And I'm also a lead mentor for a solidity I'm also a photographer and filmmaker. If you guys scan this code, you'll get all my contact information. You can follow me on Twitter. I'm on Telegram. Would love to chat with you guys if you have any questions or if you're interested in any collaboration. So I want to preface that building on Ethereum can be a little complicated at first and can be a little overwhelming, but I'm going to try to demystify that today by actually walking through some of the basics and then do an actual demo for you. It's first good idea to get an idea of how everything started and where we came from. As far as the web goes. You can think of the traditional web in the early 90s when things first got started, everything was very static. It was the static web applications, static content, really, it was just a means for serving information to users. Right. There wasn't a lot of dynamic content that's changed over the years. Right. Where we're at now, which is kind of this kind of web two is really a more complex infrastructure where we have APIs that are talking to each other, we have databases, we have network storage, we have applications that are sitting in cloud providers and on premise. And then we have Jones of different protocols that have been built on top of the Internet. Right? And this is cool because it gave birth to a lot of interesting applications, social media applications, Facebook, Instagram, TikTok, you name it. There's all sorts of cool stuff that you can do in a more dynamic way and interact on the web. But web three is this new concept of building applications that are decentralized. So in other words, they are blockchain based using a ledger. The security of the network is secured by a consensus algorithm. In the case today we're going to be talking about Ethereum. Everything is transaction based and message based. And so you send transactions and broadcast these transactions to a decentralized network, and all these nodes kind of come in sync and receive these transactions. And this is all done using public cryptography and cryptographic hash algorithms. And because it is decentralized, it's open. So any user can connect to a decentralized application and then interact with a node on that blockchain. Providers can also provide access to the blockchain, things like infura or alchemy or morales that provide an SDK or an API endpoint into the application. And then in the terms of the actual smart contract, which is the program that lives on the blockchain, it's immutable in the sense that it's sensor super resistant and it can be deployed and live forever if properly designed. And again, everything on the blockchain is transparent because everyone can see a copy of that ledger. And so you do have to be careful with sensitive information on the blockchain. If you're going to store anything on the blockchain that's large, it can be kind of expensive, and you should probably encrypt that data before you're putting it on the blockchain if there is anything sensitive in there. And so what does it mean if you're a developer? Well, you write your smart contract, your front end in something like a react framework react js or sorry, JavaScript framework react JS nextjs. And you usually deploy that application in a decentralized way. You might still deploy it to a web server or something like Nginx or something like a static file service like surge. But your smart contract, which is the backbone to your application, where all the business logic sits, is deployed across the clusters of the nodes. So you deploy it to one node as a transaction and then it gets replicated through consensus to all of the other nodes on the network. This is how you get the censorship resistant aspect inside of that smart contract. Everything is handled inside of there as far as like application logic. And this removes the need for any kind of intermediary, because people that are interacting with the blockchain application or with the contract can use public key cryptography. And that smart contract can essentially act as the intermediary between two different users on the network. It also has the ability to store value because there is an inherent nature to the network being powered by Ethereum or ether. And most of these smart contracts are written in specialized languages. And then they're compiled down into bytecode mainly. We're going to be talking about solidity today, and if you want to interact with your application, you do so by use of an API SDK or an API library. Web three js, ethers js, and a lot of times providers also provide APIs to interact with the blockchain as well, or some kind of SDK for react or something like that. And they also usually offer nodes as a service. So as you interact with your application, these blocks get formed, and that's the term blockchain is the blocks are all connected to each other and store the history of the transactions on that public ledger solidity high level this is what it looks like. It's very simple, but it's a high level language, compiles down into bytecode, but it's got curly brace style. Its optimization is key. In other words that you really need to think about how you're writing your smart contract to be as efficient as possible. Because when you deploy on the Ethereum blockchain, you have to pay upfront for the storage. So anything time you want to store a value, or anytime you want to store bytes of code onto the blockchain, you have to pay upfront for that. So it's very important that you optimize your smart contract. Again, this code is compiled down into what's called bytecode, and in order to read that bytecode you need what's called an ABI. We're not going to get too much into that, but I'll explain it briefly. An ABI is kind of like a map or a way to read that bytecode because when you compile it down into bytecode, it's obviously non readable by human eyes and same with your front end application. It needs a way to understand how to interact with the bytecode properly. So if you want to follow along, you'll need a copy of git on your computer. You'll need a copy of Node Js. Probably the newest version is best, but you can use 16 or above and you'll need a copy of yarn package Manager. Yarn package Manager is the most recent package manager. Make sure you're not using an old out of date version one from the Linux as you install the dependencies using the yarn commands, it will install all of the dependencies you need, including hard hat, which is a virtualized ethereum virtual machine that runs locally on your laptop so that you can have a local EVM blockchain that you can interact with and test. That's fast and local and has some play ether for you to experiment with react, which is a front end framework. And then solidity is the contract language that we're going to be talking about. And it has the compiler in there already, so it's going to be able to compile it for you and it's going to be able to automatically create an ABI and inject that ABI into your front end for you. So you don't have to worry about all that stuff. So if you're a developer, if you want to get started, you clone the repository. So you do a git clone on the Scaffoldeth repository, you do a yarn install that's going to install all of your dependencies. You do a yarn chain that's going to spin up your blockchain, you do a yarn start that's going to spin up react, you do a yarn deploy and that's going to take your smart contract that's inside of your project. It's going to ship it to the local hard hat Ethereum virtual machine, and then as you again deploy and make changes to your smart contract, blocks will be formed and you can kind of start verifying how your application is running. Okay, so if you at any point or get lost, is kind of like your go to. So if you get anything out of this talk, go to It's going to guide you through some challenges where you can actually test your abilities and get help into the documentation as well, in case you have any problems. It'll also put you through to a telegram group which you can get help as you go along and do these challenges as well. And if you need all of the links for Scaffoldeth, this is everything. This is the repo, this is the telegram chat, this is the docs page as well as some funding pages because everything is a public good for Scaffoldeth in the build build, which is the group of developers that support Scaffoldeth. And so this is a good contact card to have. You can scan this and it'll save it for you. So let's get started. I'm more of a person that's interested in showing instead of slides, so I want to actually kind of walk you guys through again. If we do a search for Scaffoldeth, the first link that's going to come up is going to be the GitHub repository. Okay. This is going to have everything you need to get started. You can see here that it's pretty actively developed. There's lots of people working on it and it's going to give you all these steps that I'm going to go through. Clone the repository, do a yarn install, do a yarn chain, open up a new window, do a yarn start, open up another new window and do a yarn deploy. So as you go through, you're going to do these commands and I'm going to show these as well. And if you get lost along the way, there's lots of other information in here in the readme that you can follow along. So again, if you get lost, Speedrun Ethereum is a good resource because it has an introduction, it has a link to Scaffoldeth, it has a getting started playlist that will teach you about how to build. And then you can start doing these cool quests where you can test your ability to build on Ethereum. Okay, so let's take a look at what we got here. So I've already gone ahead and checked out the repository here. So we can just assume that I've gotten the moonish version. I also went ahead and did a yarn install or yarn, yarn install, yarn install and yarn will do the same thing. So I've already kind of got up my repository up and running. Now I'm using Tmux, which is a terminal multiplexer which allows me to have three terminals open in one big terminal window. You could just have separate windows open, that's fine. You're always going to need three windows open. So the first window we're going to do a yarn chain. Yarn chain is going to spin up a copy of hard hat. That's simple. Do a yarn chain. Then we know hard hat's up and running. It says that it started. Now we can do a yarn start. Now yarn start is going to spin up a copy of react. React is going to take a little while to run. So we'll go ahead and let that sit. But we can see here that it's trying to start up. So we'll give it a second. And then on the very bottom, the last one that you'll always have open is the yarn deploy. So we have yarn chain to spin up the hard hat chain. Yarn start to spin up, react, and then yarn deploy is where you're going to deploy your smart contract and be able to test. So there's already a smart contract that comes with Scaffoldeth. That's why it was deployed successfully. And we can see now that we got some read output from the console, from hard hack console. So we can see that there was some successful transactions. We can also see where the contract address is located and how much gas was used. Okay, so react is still starting up. So while that's doing that, let me just go ahead and bring up the entire code structure for you so that we can take a quicker look at what is included in the code. And I use atom, you can use any editor you'd really like to, but I'm going to go ahead and show you here what's inside here. So the directory structure for Scaffoldeth, there's a packages folder, and inside this packages folder there's really two places you're going to be the most hard hat and react. Hard hat obviously is where you're going to do everything with your smart contract. So we can see there's a contract folder and then there's your contract. And so this is kind of like a hello world. It's called the purpose or the set purpose smart contract. And it's called your contract actually here. And it allows us to take a variable which is defined here as a string, and it allows us to update that variable to a new function using a new function. So we can set a new purpose that gets passed in that transaction. And we can also log out console output to the hard hat console and emit an event. But then here's where we update the state. So we actually update that new variable. So let's see, looks like react started up successfully. So let's just take a quick look at Scaffoldeth. You'll see here in the corner we have this little night and dark mode where we could switch between. Whatever your preference is. We'll go ahead and just stick to light mode and you'll see when you first get into Scaffoldeth again, everything is in react. And there's all these cool tabs here that allows us to go through and kind of browse what's going on. This first tab here is really where you're going to build out an app. If you are a react front end developer and you want to build your app, you'll start building it into this home JSX file which is inside packages react source of use home JSX, but where the magic sauce is, is actually here in this debug contracts folder. Now we can see that we have the purpose, which I showed you inside the smart contract, and we also have the function that's already been displayed here that shows us the ability to change that function. So if I wanted to, I could say conf 42, exclamation mark, exclamation mark and hit send. And it says, oh, there's a transaction error. I don't have enough funds to fund the transaction. Now normally you might connect your application to metamask or wallet connect or something like that. But you'll see here that one concept of building on Ethereum is you have a wallet and the wallet holds your public and your private key. So you sign transactions with your private key so that they can be verified using your public key. So we already see that we have a wallet that's built into the application, which is really cool. And there's also a button right here where I can just grab some funds, so I can grab some funds from hard hat and they get thrown into my wallet. So now I've got $11.60, $0.09 or zero one ether if I click it, but it shows me how much ether I have. Now I can hit send and I can update that state because now I was able to pay a little bit of gas to change the state. Remember I said anytime you change state on an ethereum application, you need to pay that gas. So I could grab some more funds, I can click the address right here and copy it, and I can come down to this wallet and I could paste in my address and I could get like, I don't know, let's get ten eth from the hard hat and it's going to send it from the hard hat node directly to my wallet. Here we go. So now I've got ten point 99 eth and I've got $11,699 of Ethereum that I can start playing around with. So let's just show you what it looks to make a change. So we have an example, we have this payable function here. Let's get rid of payable just for a second, save it, and let's go back to our terminal and let's do a deploy again. But this time let's reset it. So we'll do a yarn deploy reset. Now what that's going to do is it's going to force a new contract to be deployed. And we can see that it was successful, we can see some calls and we can see that it was successful and how long it took and how much gas it took to deploy our smart contract. So now if we come back here, we get a new Copy, everything is reset again. But now you'll notice that the UI changed. Now there's not another field here. So if we were to change that back, let's go ahead and do that, put that back to payable and hit save, sorry, save, and then redeploy. And look at the UI. And after we do that deploy, we'll get a new copy of the contract here. You'll see. This is the contract address. Now we get that field back. So what's happening is the UI is adapting based on our smart contract so that we can test it. So let's start testing. Let's start building something interesting. Okay, so the first thing you learn in building a decentralized application is you might want to do access control of the contract. So let's define a new variable that's publicly available called boss. Let's call it boss. And let's grab this address here and let's paste it in here so that we have this new address variable. This is our public key of our wallet that we have. And let's set a require statement. So let's go require that the message sender is equal, equal to the boss. Otherwise you not the boss like that. Right. And it saved that. And now let's redeploy our change. Let's make sure it goes through successfully, which it looks like it did. And now let's go back to our app. So now we have this new variable. We have the boss variable. And if I come over here and I go say, let's go, new incognito window, and let's go to the app on an incognito window. Now what happens? What do we get here? We get a copy of the application on localhost 3000. But what do we got? We have a new user, we have a new wallet, a new burner wallet, and every time that you open up a new incognito window, you're going to get a new burner wallet. So now we have this identity and this identity. So now we can test that. So let's come over here and say, comp 42 is cool, and go like this and hit send. Well, I'm not the boss, so I can't change that because I'm not the owner of the smart contract. But if I come over here and say, comp 42, I am the boss, like that and hit send, it's going to let me, because I have access control of this smart contract I've created. Kind of like a janky access control, essentially. So that's actually not the right way to do access control because we're doing a lot of hard coding and we're doing a decent amount of work to do that. The best way to do it with Scaffoldeth is to instead let's not create our hard coded address. Let's do what's called importing and inheritance so we can import another contract. So you can see here we have an open zeppelin smart contract called ownable, which is kind of like the de facto company that creates industry standard smart contracts and so we can inherit what they've already done and use their work. So instead we can say is ownable. So we can say our contract, we've imported it, it's available, and now it's called ownable. So it's an inherited smart contract within there. And so if we save that now and then redeploy, let's see what happens to the UI. Let's make sure it was successful first, which it was, and let's take a look and see what changes. Well, first of all, now we get an owner variable which not boss anymore, it's called owner. But we also get some inherited functions that came because we imported and inherited that other smart contract. We can start utilizing those inherited solidity files. And so we have a transfer ownership Jones and we have a renounced ownership one. But there's one issue here. I have this address here as my burner wallet, as we would say, but it does not match our owner here. So where is that coming from? This address is kind of just this random address. Well, hard hat has a list of 20 accounts and it uses the very, very first address to deploy your smart contract. So right now this contract is technically being owned by a hard hat key. And so what we need to do next is go into the deploy folder right below and we'll see here that we have a deployment script. Let me just get rid of this so we can see it a little bit better. And we can see what we do is we get a copy of the named accounts using JavaScript and we grab the very first one and that is going to be the deployer. And then here we set the rules on how we're going to deploy our smart contract. So it's called deployer. And then we can get a copy of our smart contract right here. So this is where we actually do the deploy. This is where we get a copy of our contract. So what we can do is now that we have a copy of our contract, we can call that function that we talked about before. So we can call this transfer ownership function, which is what we see down here, and we can add an address. So what we can do is grab our address, right? And we can pass that address in the contract call. So you can use JavaScript to make contract calls as well, using like, as you can see here, you can also, if you need to pass any arguments to your constructor, you can do that here as well. So let's say you wanted to name your token, I don't know, dogecoin and you wanted it to have a supply of seven. Seven, Kevin or something like that. You would pass those into the arguments. I just wanted to mention that because that's good to know, but I'm not going to do that right now. So let's save this and now let's redeploy one more time and see what we get. It was successful and now we see boom. Now we've got access back to the smart contract. Okay, so we've deployed this smart contract and we've started kind of, you see what we're doing, we're testing and we're deploying and making changes and we're kind of using these three windows as kind of like our ide environment. Right? We have a UI that can test, we have our editor and we're using just these deploy commands. And I could just keep resetting if I needed to get a new copy of the contract. And there we go, we got a new contract. So this isn't a very interesting contract though because basically we're not really doing anything super crazy here. All we're doing is just have a function that allows us to change a state and we were going to make it only owner, which let's instead not do that. Let's instead make people pay a certain value to update the smart contract. So let's go require that the message value that's passed across in the request or in the transaction is equal to a price that we set. Okay? And if not we'll say send mo money boma mom, like this. And we'll set that price up here. So we'll go un, which is unsigned integer, we'll make it public, we'll call it price and we will make it zero point Jones. Ether. Ether is the native currency. When we're dealing in the blockchain, we're actually dealing. As far as interacting with adapt, we're dealing in way. So you can see here there's a math that's being done that shows us how much way that is. We're going to use ether because it's easier to read here, but on your front end you'll need to make some calculations and I'll get to that in a second. But let's set that. And now let's say save and then let's redeploy again. So now that the smart contract is payable, well, the function is payable. We already had this transaction value. So if we were to change it here to comp 42 for the purpose and hit send, it's going to say, no, you need to send some money. Okay, so let's send some money. So what do we got here? We have a new variable that keeps track of our price. Let's grab it and let's paste it here. Now you'd think you could just hit send and it would work. Well, remember I told you before, we need to transact in way which is the lowest denomination value of ether. So there's this cool green button here that does the math for us. So one eth is times ten to the 18th power in way. So we can click that right here and it's going to do that math for us and it's going to tell us how much way we need to send. So boom, we can send that. And then it worked. So now we were able to update the smart contract. And what's interesting now is now we have some value in the smart contract. So it's $11.67. So now let's figure out a way to get that money out because right now it's a black hole. We have no way to get the smart contract's value out. So how do we do that? Well, let's go back to our smart contract and let's make a new function and let's call it withdrawal. And let's make it public and let's set a boolean called success. Otherwise we won't. And then if that's successful and someone's able to call this, we will do a message sender. So we'll reference the person calling the transaction and we will do a call. So a call is kind of like a transfer function in Ethereum. It allows you to take funds from a smart contract to an address. Anytime you're sending value from a smart contract to the address, you should do a call. And so we're going to do value and then what we're going to do is we're just going to grab the balance of this smart contract so this address, which is this smart contract's balance, and then we're going to close that off. And what do we want to make sure we do here? Well, we talked about access control. Let's make sure that this is only the owner. Now, you'll notice I'm typing only owner up here on this function, and that's because we have access to the modifier that comes with ownable, ownable has this thing called a modifier only owner modifier, which modifiers allow you to change restrictions on what can be happening inside of a particular function. So you can create a modifier and then reference the modifier so that you can save on your coding. So we're just going to reference this only owner modifier and then we're going to save. And then we're going to go ahead and deploy one more time. And so now let's make sure it worked, which it was. Now we can take a look and see. So now let's put some value in here. Let's change it to comp 42 is awesome. Like this hit send. And now we've got some value in the smart contract. So now let me come over here to this little purple dude, sorry, this little kind of blacky green guy, and let's try to get this funds out. Let's go down here to the bottom and we'll see. We have this withdrawal function. Let's hit it. It's going to tell me, no, I'm not the owner. I don't have access to call that function. Okay, so now we've got those funds in there that are locked up, which is good. And because I'm the owner here now, I should be able to come over here. So we have 1167 let me hit withdrawal. It's successful. And I was able to pull that into my wallet. So I was able to take it out of the smart contract. And so now we have this vending machine that's kind of in the cloud that we can start doing interesting things with. Now the next step is that we would probably do something like figure out a way how we can deploy this smart contract. So everything we've been doing is kind of locally. The first thing you'll understand when you're deploying to a blockchain, you need to have an account that's trusted and you have control of the keys because the accounts that come with hard hat are just, everyone has access to them. So you want to use your own deployer account. So all you have to do is do a yarn run generate. And what it's going to do is it's going to spin up a deployer account based off of a random mnemonic. Now, a mnemonic is just a random number of letters, or I should say words that compromise or not compromise, but comprise of your password. So if you put them together and hash them, you get your password, your private key, essentially. So here we have a new deployer, and it's available to use. And so we could do a yarn account like this, and now we have access to the QR code for that account. Sorry, let me hit it again. And so this is really cool because if you have a wallet on your phone, so like, I have a wallet on here, and I could send some ether from my wallet on my phone. So I have a punk wallet, which is also a cool wallet that's available. You guys can kind of see it right here. It's the punk wallet. And I have some money in there. I have some guerli eth. Now, Guerli is the testnet for, you know, of course you don't want to deploy to mainnet right away. You'd want to deploy to a testnet where other people can interact with your smart contract. Again, we've been doing everything locally, so it's got this cool scanning option. So I can just go ahead and hit scan. And then I scanned it, and I got access to this address on here. It did the translation for me, which is really cool. And then I can come over here and I can send myself some eth. So let me do ether, and let me send, I don't know, let me just send like $10, see if it works. So I just sent some eth. Might take a sec for it to go through. While it's doing that, we'll go ahead and do that. Okay, so while we're waiting for that transaction to go through, let's go ahead and take a look real quickly at the react code, because the next thing you're going to want to do is after you deploy your smart contract to a testnet, you'll probably need to update your front end so that you can interact with that testnet. So here we can go to react app, we can go to source, and we can go to app JSX. And then what we can do is come here to the very top, and we can see that we have this network localhost. Okay, so we could change this to Guerreli by just doing network gawarely. So then what we're able to do is. Sorry, let me send this again. We'll do. Sorry. 0.0.1 e. That works. Okay, sorry, I had to resend the transaction. So if we save that now, we can update our front end. So if we come over here and refresh our application, then it's going to attempt to reach that contract on Guerrero. So you can see here it updated to Guerrero. But there's a problem here. It's not loading the smart contract. That's because I haven't deployed the smart contract to the testnet. So the next thing we want to do, let's check our balance again so we can just do yarn account and it's going to tell us if we have some Guerreli eth, which we should hopefully have it by now. There we go. Now we have some guerrelith because I just finally succeeded from my phone. So now what we can do is do we've been doing yarn deploy reset, we're going to do network and then type goerily like this. Now we're going to take our smart contract, we're going to use the funds that I sent from my burner wallet into this mnemonic deployer and we're going to publish that out. So you can see it's taking a little longer because the Goreli testnet is a little bit slower. So we'll go ahead and let that sit for just a second. Let me just go back real quick. While we're waiting for that, we can also look at the home or the views folder and we can see some of those other folders. So the home JSX I mentioned is where you're going to build out your application hints gives you some hints on where to go to reach different parts of the contract. But example UI is really useful. Example UI is exactly what we're looking at here. Okay, so it looks like it was successful. So my deploy was successful. You can see here how much gas it took and it worked. So I was able to deploy this. So now it's on Guerreroli and it's live. So if we were to click this, it would take us to Ethereum, scan and show us the contract. And we can see here that the deployment was successful. But if you look at the contract here, it's unverified. So next thing you want to do is anytime you deploy a smart contract, you probably want to verify your smart contract. So how do we do that? Well, let's grab the address for the smart contract, go back to our console and let's do a yarn verify paste the address network guerreli. So it's going to take our contract, compile it down, it's going to send over the smart contract to Etherscan, it's going to verify it, then send back the results to make sure it works, which it did. And so now if we come back here and refresh our contract tab, we can see that it's verified, it's got a little green checkmark and all the source code for my smart contract is now available here inside of Etherscan. So that's kind of a common thing when you build a decentralized application. You want to instill trust in it so people can see the code. So you always want to verify your smart contract, unless you're doing something like really secretive, that you don't want people to know how the contract is written, you're probably going to want to verify it. There's ways to verify it anyways, so it's better just to do the verification so that you know it's verified. But we can see now our app is working. There's one last thing that we need to do is we want to take our application and ship it out somewhere so we could do a yarn build, which is going to take a copy of our react app as it is right now, and it's going to kind of like make it so it's easily deployable and being able to transport it easily. So that might take a second to run. So let me get back to what I was saying before about these tabs. There's an example UI tab, which is really useful. So if you're going to build out your app and you want to know how to read in the purpose variable, or you want to set the purpose, or you want to read an address in or do what's called Ens resolution, or get a balance, there's all these cool examples here, buttons, and then there's an events tab, so we can see events, and then we can see a lot of examples of how you do like a toggle using ant design. So that example UI is a really good resource as you start to build out your application and you're looking for examples on what that would look like. So let's see if our build finished. So not done yet, but that's okay. Let me go back here real quick. Let's make a change with our smart contract while we're waiting. So here we have our smart contract. It requires zero point Jones eth. So let's go ahead and send some value in there. Let's do it over here from the incognito one. Oh, we can't do that one because we have an eth there. But this one, we have some eth in here. So let's do conf 42, exclamation mark, send some value, translate it, and hit send. And now you'll notice that I don't have enough funds to pay, so I need to connect my metamask. So at this point you might start using metamask metamask is just a browser based wallet. So let's go ahead and switch our network. So we connected with Metamask. I'm going to switch the network to the proper network. And if you want to learn how to get started with metamask, they have a really good getting started guide on how to install it. But metamask, it's a browser based wallet, right? It gives us this little browser wallet. So now I have a bunch of eth here. I've got 89 eth. So I can send a transaction. Now I can sign this transaction. Here we go. Confirm. So now I can update the smart contract. We can see that our transaction has started, and as soon as it's done, it'll get a little green checkmark. There we go. So I've made a test transaction. We can just hit refresh real quick, make sure it's working, which we should have the new 42. There we go. And we have some value in the smart contract, so I should be able to also get the value out. So let's try that. Let's withdraw. Unpredictable gas limit. Oh, no, that's not good. Okay, so maybe my funds are trapped in there. I'm not sure why I did this, because I'm not the owner anymore. So what I could do is I could do this. I could say, log out, right? And then I can grab my address for crypto mastery, which is my cryptomastery etH, which is my account here, and I can transfer the ownership to me so I can hit send. It's going to let me do that. There it goes. So let's transfer the ownership. So I have the burner wallet. I logged out of my metamask. I'm in the burner wallet. I'm transferring the ownership to my metamask account, which it should work any second now. There we go. It succeeded. So now I'm the owner. So now I can reconnect my metamask. See what we're doing? We're transferring the ownership of the contract, and now I can withdraw this fund. So there's 1168 in there. Let's do a withdraw, and we just got to sign the transaction. We got to pay a little gas, right? Let's do that. It's starting to transfer, so any day now, we're going to see this succeeds. We're still working on our local host Ui, though. Okay, so let's refresh. Let's see if it's all gone. Cool. We drained the contract, so we're using our local host Ui. The last thing you're going to want to do is either do Yarnipfs, which will ship our application to ipfs, or you can do yarn surge. Yarn surge is like a static file hosting service. So now that we've done a build of our build, we can just surge it and then we can name it whatever we want. We'll just keep it. This actually absolutegrain surge sh we're going to ship that. It's going to take all of our source code for our UI and upload it, or I should say our static assets. It's going to upload it for us. And so now we can just go to this website and if you guys are at home today and you have some testnet ether, you guys can interact with the application. Let's go there. There we go. So now we've got the debug contracts. We can see here that it's conf fourty two and we've deployed it. So in all that time that it took right now, we wrote a smart contract, we tested it a little bit, we set up access control, we transferred ownership of the contract, we updated state, we even withdrew some funds from the smart contract and we generated a build and we pushed that build out. And so we did the whole bam, the whole shabam. We deployed the application. And so the next steps from here would be if you get to this point where you get comfortable enough, if you're not comfortable with solidity, there's a great website called solidity by example which will also show you how to do things like how to do constants, how to do if else statements, right? All these cool examples are in here. So solidity by example is a great one. And there's also a bunch of YouTube videos as well. So if you want to understand the smart contract programmer, YouTube is really good as well for learning. Once you get to comfortable with building, then you'll want to go to And this is your kind of next step, right as you get kind of a little bit better and you'll start doing these quests. Like the first one is you build an NFT, second one is you do a decentralized staking app, then you do a token vendor, then you do a dice game and then you get invited to the build guild, which is what I'm in. And this is like a group of developers that are kind of excited to teach and build up the ethereum ecosystem. It's a public goods and you can actually get paid to be part of the build guild and do things for the build guild, like create special builds or create videos or whatever it is that you're passionate about and you're excited about on web three, you can do so, that's the best route after you get going. So I thank you guys so much for your time, and I hope this was a valuable talk for you guys. And yeah, enjoy the rest of the conference, and I'll catch you guys next time.

Kevin Jones

Senior Product Manager @ NGINX

Kevin Jones's LinkedIn account Kevin Jones's twitter account

Awesome tech events for

Priority access to all content

Video hallway track

Community chat

Exclusive promotions and giveaways