 All right, so I have 215, so people can still come in, get seated, but we'll go ahead and get started. Thanks for coming out to the last session on the last day of DrupalCon. I'm sure everyone is tired, but I'm excited to see you all. Nice day out. Welcome to Ethereum and React, an introduction to building your first web decentralized application. All right, so first we're gonna do a little intro. My name is Ryan Haggerty. I'm a front-end developer, and I worked for a pretty cool company called Chromatic. We specialize in Drupal. We also do design, DevOps, support. We have a pretty active blog of all sorts of cool stuff, so check us out at Chromatic HQ. We're a distributed company, so we have people all over, Florida, Colorado, Pennsylvania. I live in the beautiful mountains of West Virginia, just a couple states over. You can find me on the internet at HotPizzas. That's my Twitter handle. So if you go there right now, I have a pin tweet with a link to the slides and the repo and everything you need to get rocking and rolling and playing around with this. I feel like it has a pretty detailed read me too in case you run into troubles on your own. So first, I wanna talk about the goal of this talk. What do we want to accomplish? And I want everyone in here to feel like, regardless of their experience level, if they feel just kind of like okay at JavaScript, if they have three or four hours for tutorials of React under their bell, I want them to feel like they can play around with Ethereum, Solidity, and React and kind of like start building your own decentralized application. This is in some like dark arts wizardry, right? This is just kind of like new and different tech. And to do that, I wanna provide everyone with MHK, Minimal Hacking Knowledge. I want you to have a basic enough understanding of the concept of Ethereum, smart contracts, and all the tools you need to start hacking away on either my project or your project. And to accomplish this, we're gonna divide the talk into three areas. The first is we're gonna talk about the idea of blockchain, Ethereum, and smart contracts. If you're unfamiliar with all that, I got you covered. The second part of the talk is we're gonna talk about all the tools you need to get rocking and rolling. And finally, we're gonna have our own little sample project. And what we'll learn is blockchain, Ethereum, and smart contracts, how Ethereum is different than a traditional blockchain like Bitcoin. We're gonna go over all the tools and frameworks you need to get started. We're gonna go over Solidity, which is currently the most popular language for Ethereum compiling. We're gonna go over a sample hello world project, and then we're gonna go over React components with Ethereum and Web 3 and how to kind of interact with it through React components. And finally, for all the testing fans out there, we're gonna go over how you can actually test your smart contract. So first, let's talk about the idea. Or blockchain, a crash course. We have a lot to cover. Probably any one of these subjects we could spend over an hour talking about. So I'm gonna give you the basics. So hold on to your butts. I wanna say what we won't cover. We're not gonna go down into the weeds too much. We're not gonna go over cryptography, proof of stake versus proof of work. We're not gonna go over the Byzantine generals problem, et cetera, but I feel like I will provide you with enough of a basic understanding that you get the core concepts. So first, let's talk about the internet as it is or the internet of information. And it was created to transmit information. Anything that can store digitally, text, images, movies, created to transmit that. So let's take an MP3, for example. Now here we have this shady little person of MP3 and I know everyone here is a responsible citizen of the internet and back in college would never share an MP3, but let's look at this little guy right here. And let's say he shares that MP3 to two people. Now those two people can save, copy, and distribute that information to other people and they can do it to other people and so on and so on. So that single MP3 now becomes millions of MP3s that are indistinguishable between one another, the exact same copy. Now let's talk about the internet as it could be or the internet of value. And the blockchain had a transmit value. Okay, so let's go back to the MP3 example. So here we have that one person with an MP3 and they send it to person B, but person A no longer has access to it. They can transmit to someone else, but they no longer can manipulate it. And person B sends it to person C and the previous two people no longer have access to it. And a good example of how to deal with transmitting value, of course, is money and payment systems. You've probably heard of Bitcoin, but how does this accomplish? Well, it's accomplished through something called a ledger. And the ledger just records all transactions and keeps up-to-date info on who owns what and how much. Each block is a series, each block contains the history of the block, i.e. the blockchain. And you can think of each block as representing the current state of the blockchain. And since we're dealing a lot with state, it might be a good idea to deal with a framework that deals a lot with state, content. All right, so let's check out some of the awesome benefits of this. Well, first, it's decentralized, right? No single party can manipulate the ledger. We do not provide any centralized person with trust. It's immutable. We cannot go back into the past and change transactions. And my personal favorite is that it's permissionless. Anyone can join and start adding and confirming transactions. There's no walled garden. There's no central authority saying who can join and what they can do. Anyone can do it. And if we take a basic operation, let's say person A wants to send person B some Bitcoin. They want to send 0.25 Bitcoin. Well, we'll subtract that 0.25, add that 2.5. And once that block is confirmed, person A has 0.75 and person B has 0.25, all right? And but that's just still a basic ledger, right? All we're doing is adding and subtracting values from different accounts. But what if we wanted to go beyond money and record all value? And this is where Ethereum enters. So it's still a ledger, but now it's a programming language on top of a ledger. So the distributed ledger now becomes a distributed computer, which is called the Ethereum virtual machine. And we're gonna go over this here in a little bit, all right? So we could transmit the value of not just kind of money, but we can transmit the value of copyrighted material, like an MP3 example, real estate property, insurance, legal contracts, supply chains, identity, we could choose who we want to share our identity with and how much, and a whole other lot of cool applications. So now let's talk about Ethereum, smart contracts, and you. First, Ethereum versus Ether, what's the difference? Well, Ethereum is just the Ethereum virtual machine. And Ether is the currency of Ethereum. I'll put a little asterisk there because it's not a true currency like you think of Bitcoin. And we're gonna go over that here in a second. So the Ethereum virtual machine, what is that? Well, the EVM or Ethereum virtual machine is a sandboxed virtual stack machine embedded within each full Ethereum node responsible for executing contract bytecode. What does that mean? Well, it means that each smart contract is executed through bytecode within each node of the Ethereum network. Ether, what's Ether? Well, we said Ether is kind of like the currency of Ethereum, but it's more accurately a utility currency. It's what powers the Ethereum virtual machine. And how does it do this? It does this through a concept called gas. All right, now gas is just the Ether that fuels Ethereum. Every transaction on Ethereum costs a little bit of Ether to use. But more importantly, it's related to Ethereum coding. Each computational step in Ethereum contract, for example, each function costs a fixed number of gas to use. But gas price is dynamic and determined by the market. So you can kind of check this out at fgasation.info and this is pretty cool. You can get an idea of how much it will cost to perform a certain action depending on the market. And since each step costs a fixed number of gas to use, the more complex or bloated code, the more expensive it becomes to transmit that transaction. And this is why performance in smart contract programming is so important because poor performing smart contracts literally cost you more money. Now as an example, let's just say you have a picture of your beautiful Puritan family that you want to store on the blockchain forever because you love them so much. And it's one megabyte big. Well, back when Ethereum cost $295, it would take over $5,000 and take over 100 steps to eventually get it on the blockchain because each block can only use so much gas. And this is an example of why storing things on Ethereum is not really an optimal solution. Some people are trying to solve this just as an aside through a distributed file system by storing a hash representing ownership of file which is pretty cool. And this is all stored in byte code which is what Solidity, the language we're gonna talk about to use to write our smart contracts, compiles down into. And we're not gonna go into the weeds yet just yet but just know byte code is coming up. I also wanted to talk about tokens very briefly. We're not gonna go into tokens but it's usually what people are most familiar with when talking about Ethereum. I just kind of want to expose people to the idea. The commonly called ERC-20 and all it is is just a standard for how to interact with a smart contract and it's its own entity stored on top of the Ethereum blockchain. And ERC just stands for Ethereum Request for Comments and that's just an official protocol for proposing improvements to the main Ethereum network and 20 is just a unique proposal ID number. So that's all that means. Some examples of some tokens, Xerox Project which is a permissionless protocol for decentralized exchanges so no more centralized exchange hacking. Aragon which is a decentralized organization through an open governance model and open governance is something I'm pretty interested in. District Xerox which is a network of these centralized markets and communities which is actually built on top of Aragon so you can have ERC-20s that are dependent on ERC-20s that are dependent on Ethereum which is kind of cool. And Funfair which is just something that is offering fair transparency and increased security for online gambling and there's just hundreds of these things but those are kind of like some cool ones. There's also one called an ERC-721 which is a non-fungible token. What does that mean? Well, each token is unique and non-divisible with its own characteristics. Example of this is digital collectibles such as crypto kitties. If you've heard of that that's basically just a way to breed, sell and buy your own cats. And now that we kind of have some of the core concepts about Ethereum and blockchain let's go into develop time. All right? So first I wanna give a little bit of warning, all right? Right now, the documentation sucks. It doesn't exist, it's outdated, it can be contradictory. There's few best practices as of now. There's little information on what tools to use to actually work with it. Hopefully we can solve that today. And breaking changes can and probably will happen when updating or even working with it. But I wanna say don't panic. All right, that might seem a little discouraging but to me it's kind of like really exciting, right? We're in unexplored territory. It's completely open because a lot of people don't even know what they're doing which is pretty cool to me. So for our next part of our talk I wanna talk about the tools we need to get rocking and rolling. And I wanna say I made this on my MacBook, this presentation and sample project but I also have a similar setup working on my Linux computer. So just so you know that it's working on both of those. And the first tool you need is something called Gnash. What is Gnash? What allows us to have a local blockchain test net environment and it's really cool. People used to use and I used to use testRPC which is a command line tool. And I wanna say I'm a big fan of the command line. I prefer the command line but don't use testRPC because Gnash is way better. Just use the GUI, it's pretty awesome. And when you open Gnash, this is what you see, right? You'll get a bunch of tabs at the top that give you some options to kind of view what's going on and then you'll be provided with 10 accounts each with 100 ether. And that's plenty to play around with and do your own testing and have fun with. If you click on blocks, you can see which block was mined, if a transaction was on that block, how much gas was used for each block for that transaction. You can see transactions, transaction hash which is basically just a receipt of a transaction. You can see contract calls, contract creations and also I wanna make a note under the options, right? See right there at the bottom, you see auto-mine. Gnash is set up to auto-mine automatically so anytime it senses a transaction it'll just mine that next block and store that transaction on there. And I like that whenever I'm kind of working with the smart contract directly that way it's kind of like super fast you can see what's going on, making sure things work. But whenever I switch to the UI and I wanna kind of see how a user would interact with it I like to give it a mining block time in seconds because that kind of simulates how a user would actually deal with a deployed contract. Right now the actual average time for a deployed contract I mean for a block in the Ethereum main network is averaging around 14 seconds. And I wanna make a note, there's a couple of things we gotta remember, go on forward, all right. So back at the top of Gnash we'll see the same called RPC server. All right, so make a note of that. We're gonna need that both for MetaMask and Truffle which are two tools coming up. And then also after each account is a little key icon and that'll give you access to your private keys. If you don't know what private keys are anyone that owns a private key for Ethereum address basically has complete control of all the ether inside that account. So you always wanna keep that private but for our test net you know we're just gonna be playing around with it. Second tool you need is a browser extension called MetaMask. And this is kinda like one of the secret sauces we need in order to make our decentralized application work in the browser. It enables users to interact with Ethereum-enabled websites via the Web3 JavaScript API. Which is pretty cool, right? You can interact with the main Ethereum network through your browser. I think that's pretty cool. Some of the browsers it works on are Chrome, Firefox, Opera, Brave. It does not work on Safari or Internet Explorer but who cares about those browsers. So you just install it like you would any other extension, right? Add extension and you're gonna create your own account here. And I wanna say that I used MetaMask Beta for these next set of images because they're super close to revamping their UI and this is what it's gonna look like. So in order to like kind of extend the longevity of this talk I wanted to use the updated UI but if you use the original all the steps are exactly the same it just looks a little bit different. Now you may be tempted right underneath Create you see import of seed phrase. If you're familiar with seed phrase it's just a way to recover accounts and Gnash provides you one right here under Mimotic. Don't do this, all right? Because the reason is that you may think I'm only gonna be using this for development but what's interesting, this is pretty hilarious is that a lot of people accidentally import that Gnash account, right? And if you have access to that seed phrase every single seed phrase when you download Gnash is exactly the same. So any person who's ever downloaded Gnash has access to those private keys, right? And since private keys are complete access to ether anyone has access to it. So if you accidentally send ether on the main network to that Gnash account and you think you're just in your test network someone who's actually set up a script to automatically withdraw ether from that account and deposit it to an account they have complete control over. So so many people I've just messed up just flubbing out this person's collected over half an ether just from like random mistakes. Which is pretty interesting. Starts to use blah, blah, blah, bling, edge tech. All right, so guess what? In your browser you're now connected to the main Ethereum network which is pretty cool but we wanna get on our local test net. So what do we do? Under main network in the top right click that click custom RPC and remember how I said in Gnash pay attention to that server address right there we just copy paste that click save. Next thing we wanna do is we wanna import our account. Remember I said pay attention to that key icon after account one well there's our private key we're gonna copy paste that, paste that account and guess what? That's pretty awesome right? We're on our private network it's reading how much ether we have through our web browser which is pretty cool. The next tool we need is a framework called Truffle and Truffle is currently the most popular development framework for Ethereum. You need Node.js and NPM for this. I won't go over how to install that if you're not familiar with that but I have a link in the read me on my repo about how to do that. We wanna install this globally so NPM install dash G Truffle and next we're gonna do Truffle unbox react. So what does that do? Well Truffle has this concept of boxes to integrate the Truffle framework with other frameworks and since we're using react and when I started react was the only option but now they have all kinds of boxes to pick whatever you wanna be familiar with or whatever you're more comfortable with like view, Angular, Node.js all sorts of cool options. And I also wanna say as an aside if you would do Truffle on by ox reacts and you get this error don't panic me and some other people in the issue queue are having this error right now but it still works fine. It's some outdated dependencies. Don't worry about it. All right. So we unboxed react, ready to go. First thing we need to do is Truffle compile, all right because every react box comes with a sample project. Okay, so what does Truffle compile do? Truffle compile takes our smart contract compiles it down to byte code for the EVM for Ethereum virtual machine to understand. Next thing we wanna do is Truffle migrate. What does Truffle migrate do? It migrates our compiled byte code onto our development network. But when you do Truffle migrate when you just start a react box, uh oh, you're gonna get an error. No network specified cannot determine a network. So, one, don't forget to have Gnash running. We need our local testnet running. Two, in our directory we have a truffle.js file. And you'll see it has a little message there saying hey, under advanced configuration, you need to set up your truffle network. Even though every project needs this, it's under advanced for whatever reason, but it's not that bad. Also in that directory is truffle-config.js. That's strictly for Windows. If you're not using Windows, feel free to delete that. But, just like our RPC server, we set up with MetaMask, we're gonna set this up again in truffle. So we're saying, hey, go to this host, use this port. If you do truffle migrate again, guess what? It works. All right, sweet. And you know this works, not only from that feedback that you get from the command line, but if you go back to Gnash, guess what? We no longer have 100 ether. Why is that? Remember how I said every transaction, every computational step in Ethereum costs a little bit of ether to use. And that's another indicator that hey, this is successfully deployed to our testnet. The included smart contract, we're gonna go over our own smart contract in Solidity, because I think mine's a little bit better, honestly. But we won't be paying attention to it right now, but feel free to delete simple storage, but I wanna make a note that keep migrations, right? Don't delete that, because that handles all of our migrations. NPM run start, guess what? You're good to go. Sweet. Now I wanna talk about Solidity. And Solidity compiles the code for the Ethereum virtual machine. So let's check out a basic overview of what it does and how it does this. And I wanna say that the language isn't tied to Ethereum, other languages can be used. The important thing to understand is that Solidity in any language that will come after it will always compile down into the bytecode, which is why, beyond understanding the bytecode, it's pretty cool and important to understand. If you're more familiar with Python, there's a language called Viper that you can use. But we're gonna go over Solidity because I come from a JavaScript background and we're gonna see how similar JavaScript in a little bit. First thing about Solidity, all right? It's statically typed, okay? Come from a JavaScript background. You'll use var store data or const store data. Here we need to say what type of variable it is. So from this example, we're using UNIT, which stands for unsigned integer. All it means is just an integer of positive value. Contracts in Solidity are similar to classes in object-oriented languages. So contract simple storage. And it's similar to JavaScript, right? In fact, the people who created Solidity very intentionally designed it around the ECMAScript syntax to make it familiar to existing web developers, aka everyone in this audience. There's structs, which are similar to objects. It also has mappings. And Solidity can be thought of two things. State and functions. And remember how I said each block represents the current state of the entire blockchain? Well, here we go, right? State are pieces of information that are permanently stored on the blockchain and functions do things. We can also have a constructor, which is the same name as our contract and it's executed once when the contract is deployed. But Solidity, what does it really do? It's compiler. Remember how we kept talking about bytecode? Well, guess what? Here's bytecode, the part that is executable by the EVM. And this is what it looks like. When you program your smart contract and you do truffle compile, this is what it comes down into, right? It looks crazy, but the interesting thing is each one of those sets of numbers actually has a corresponding opcode, right? And these opcodes are the exact functions that are actually executed by the EVM. So if you see 30, you know that you're getting the address of the currently executing account. If you see 31, you know you're getting the balance of any given account. So all Solidity does is take a higher level language and then compile it down into these. Our project, the preview from the whole world project we're gonna talk about in a little bit, this is all it compiles down into. So let's take a look at what's going on here. 60, 60, 40, 52, store 60 at memory location 40, save word to memory, what does that do? You don't need to know, all right? Don't worry about it. But I kind of find looking at opcodes super interesting, right? It's kind of cool. You don't need to know what's actually going on, but I think it's important to know that, hey, Solidity takes your program and compiles it down into bytecode and those opcodes are where you get your fixed gas amount for how much a certain function requires. I also wanna talk about security very briefly. It's too big to go into here, but you may have heard of contract hacking and I just wanna like provide you with a couple of things that will be in the slides on the repo, but every execution is a smart contract publicly visible, couple lengths of security considerations, the best practices. And as an aside, I wanna mention like for anybody that's like into security in this audience or watching online, it's pretty cool. There's been some kind of like open source cloak and dagger been going on with honey pots and what people are doing is they're making contracts with very well known bugs that will allow anyone to kind of access a theory ether stored in a contract. So let's say you're checking out some publicly available contracts and you see this bug, right? And you see that contract stores a lot of ether and it only costs a certain amount of ether to interact with it. So you say, sweet, free ether, I'm gonna interact with it, exploit that bug, get that ether. But what they're doing is they're making that exploitable part of the contract dependent on another contract that closes that bug, takes your ether away. So I think that's pretty cool. All right, so let's actually get started in our project. All right, what are we gonna do? First, we're gonna deploy our contract on our testnet. Second, we're gonna see our predefined hello message stored on the blockchain. And then three, we're gonna take our user input from our React component to change our message, store it on the blockchain, retrieve it and update our state and react. Don't forget, all right, anytime you're starting one of these projects, you need to follow six steps and I have this in the read me, but the things you need to do, start Gnash, our local blockchain testnet. Two, unlock MetaMask and make sure local network is selected, switch accounts to the one we imported, truffle compile, which compiles our smart contract down to the byte code, truffle migrate, which takes that byte code and deploys it on our testnet and MPM run, start. So our contract, all right, ReactBox comes with a simple storage. All you do is gotta blow it out, just rename it, do whatever you want with it and then change in app.js what we wanna import and our build and then here's our contract, all right. It's pretty straightforward, all it's gonna do is a little hell of a message, but I want everyone here to be comfortable with Solidity. It doesn't matter how much experience you have, so I'm gonna go over every line here and let you know what's going on. All right, so first, Pragma Solidity, what is that? That's known as the version Pragma and this allows us to specify which version of Solidity we wanna compile with so as not to introduce breaking changes in the future when Solidity updates. Then we have contract hello world. That's kind of like just the complete wrapping thing for our entire contract and then string hello. Remember how I said Solidity was statically typed? Instead of saying bar hello, const hello, we're letting the compiler know this is a type of string. And then we have a constructor, hello equals hello world. We're setting our global variable to be hello world. Public means anyone can interact with it. Then we have our set hello and this is gonna be how people are able to change our hello world message, function set hello, string hello for our function argument and you notice I have it underscored here and that's kind of a popular convention in Solidity is to underscore function arguments to differentiate between global variables. It's up to you whether or not you wanna do this but it's popular convention so I don't wanna confuse anyone. That's what I'm doing here and in public so anyone is able to change this. So hello, our global variable equals underscore hello, our function argument. And then get hello, public view returns, string return hello. Public, anyone can interact with it. View, it's basically like a constant which is actually what that keyword was originally called and all it means is it indicates that the function will not alter the storage state in any way, all this is is a getter so we're not altering the storage state so we're using view here and don't forget. Anytime you work with Solidity, you make a change, guess what, we need to recompile that bytecode. It's different now so truffle compile and then we need to deploy that contract onto our local testnet truffle migrate. If you check out our app.js, what I did was I kept it super, super similar to a standard React box. I want anyone that plays around with my repo to have a very easy time transitioning to a standard React box so everything's gonna be very, very similar. And we need to do five things here. First, we need to import everything we need. We need to set our initial state, we need to get web three and I'll talk about web three in a second. We need to instantiate our contract, render out our HTML and components. And to give you a little preview, if you kind of run this when you download it, this is what it looks like, yay. All right, it'll give you your contract address, it'll give you our predefined hello world message which is in our smart contract. If you wanna change the message, I'm gonna take user input here, hello, Nashville. MetaMask will automatically come up when you hit submit which is how we confirm our transaction to our local Ethereum network. Costs about three cents, remember? Every transaction Ether costs Ethereum, costs a little bit of Ether to use. Hit confirm, I have a little cool indicator here to let you know that we're waiting on the latest block to mine. And I wanna say like just from a UX perspective, you probably don't wanna do like me and have a modal covering your entire site. Maybe like a little indicator in the corner but our site can literally only do one thing so I think it's kind of fun to have a modal up there. And then once that block is mined, our transaction is confirmed, we update our state which is pretty awesome, I think. Now you may be sitting there being like Ryan, I've been sitting here for 40 minutes and all you're doing is just replacing text. Like wow, you know, but like the cool thing is is that it's not exactly what the user see, it's all the cool things that's happening behind the scenes, all right? All the invisible stuff. So we're taking user input, passing it to our smart contract, signing a transaction to MetaMask, broadcasting that transaction to the network, storing it on the blockchain, then getting that message and updating our state with it which is pretty cool. All right, so how are we gonna accomplish this? First, we need to import everything we need. This is pretty much a standard React box, the only difference here is I have my own hello world contract and I have two custom components, contract input and modal. We have an initial state here, again very similar to a standard React box. We're gonna get web three, now what's web three, all right? And this is another kind of like secret thing, all right? It's very, I love web three, it's very cool. And this is the Ethereum compatible JavaScript API that implements the generic JSON RPC spec, all right? So what does that do? Well, it enables us to work with Ethereum through JavaScript, all right? And if you console log web three, you're gonna get all sorts of cool stuff, all right? You can see, you can get the accounts, you can get the block number, you can get gas price, all sorts of cool stuff. And then we need to instantiate our contract, right? Again, very similar to a standard React box, but I feel like it's important to explain what's going on with hello world.deployed right in the middle over there. And basically this is a JavaScript promise. If you're not familiar with promises, all it is is a way to handle asynchronous code. You can think of it as, hey, a way to do this and then do that. Once we have this, then do this. So we're saying, hey, once our smart contract is deployed, then do this. So then take an instance of our hello world contract, set our state, make that instance our hello world contract, then set the state for a contract address. If you remember how we did that in the little preview, I've displayed the smart contract address. And then check out what's going on right below that, right? Return hello world instance.getHello. Well, guess what? That is our solidity function in JavaScript. We're just using JavaScript to execute the functions we're writing in solidity, which is pretty awesome, I think. Then take the result of getHello and then update our state. This that says state hello equals result. So we're using JavaScript to work with solidity, which is pretty cool. If you console log our contract, you get all kinds of cool information, like ABI, which is our application binary interface. And this is just the interface available to users across the network so they can see what methods are available for them to work with. We can see getHello and setHello are available. We can see our contract address. And then down at the bottom we have render, and all this is is some standard markup here, standard react markup. I only have two custom components here, modal, contract input. There's nothing dependent in modal to go over our contract. So I just wanna kinda like check out contract input. So let's check out contractinput.js. What's going on here? First, we just have standard form element here. We're taking input and saying it's this message, so the user input is going to be called message. And then I have an onSubmit method called submit. What does submit do? Let's saying, hey, get that message value, our user input. And then we have two functions here, setHelloRequest and getHelloRequest. All right? Now these are async await functions are very similar to JavaScript promises. You're just saying, hey, wait to do this first before you execute. So we're running getHello first. What does that do? All right? So it's saying constresult equals await setHelloRequest. This props updateHelloResult. What does that mean? Well, it's saying, hey, wait on the result from setHelloRequest. So let's see what setHelloRequest does. All right? So we're taking, it's a little hard to see, but hopefully you can, saying result equals instance.setHello instance is our smart contract. We're again, we're using a function rewrote in our smart contract and slowly setHello. So we pass in our message, our user value from web3faccount0. And remember how I said every transaction in Ethereum costs a little bit of ether or gas to use? So somebody's got to pay for this for changing our hello world message. And faccount0 is our standard MetaMask account. So it'll be the first account that we're using. So that's who's going to pay for it. Then once we have the result, close the modal and return getHello whatever that is, whatever they change the message to return result. And guess what? It'll update our state, which is pretty cool. I also want to mention that you can do tests in Solidity for all the kind of testing fans out there. You can either write tests in Solidity or JavaScript. I wrote it in JavaScript because I'm way more familiar with JavaScript than Solidity. So let's check this out. It's written in Jest. And this is all it does. So let's check out what this actually is doing. At the very top, artifacts that require. And this all this is, is saves your ABI, bytecode and other contract related information in a JSON file. And then we have our contract name Hello World. We're passing in accounts. And then we're just saying, hey, it should, what we expected to do. Well, it should set and get the Hello World value. And then just like in our app.js file, we're saying, have a JavaScript function here that says, hey, when Hello World is deployed, then do this. So we're passing in an instance of our Hello World contract, then we're saying, hey, Hello World instance, set Hello. So we're setting the message to be, this is a Hello test from account zero. Someone's gotta pay for it. Then return Hello World instance.getHello.call. So execute, getHello media immediately. Then what is that result? We're calling it stored data. So assert.equal, stored data is, this is a Hello test, all right? So if everything goes fine, guess what? Cool, we got a passing test. We wrote a test in JavaScript that works with Solidity, which is compiled down to bytecode, which is pretty cool. All right, so we don't have a lot of time, but I wanna talk about deployment. All right, so everyone here should be kind of like familiar with the standard web deployment. We got local development and production in Ethereum. It's local testnet and the main Ethereum network. There's all kinds of different testnets, like Robson, Coven, Rinkabee. I like Rinkabee because I find it to be pretty stable. And it's really easy to get test ether through a GitHub account. And guess what, Ethereum and React, right? It's not so scary, isn't it? I mean, you can use JavaScript to work with Ethereum, which is pretty cool. So check it out, what do we learn? Well, we learned about blockchain. We learned about Ethereum and smart contracts, how it's kind of a different kind of blockchain with programming language built on top of it. We learned about the tools and frameworks you need like Gnash, Metagamask, Truffle, the basis of Solidity, how it's a statically typed language. We learned about our sample hello world project and using a React component to execute a function that Metamask will use to broadcast and transaction. And then we learned about how to write tests in JavaScript for Solidity. I wanna say, don't forget, twitter.com slash hot pizzas. Please download, repo, have fun with it, ask me questions. Yeah, so check that out. And with that, I just wanna say, thank y'all. Cool, any questions? Hey Ryan, great session. Question about the difference between Truffle, your usage is there for debugging versus Ethereum Remix, the IDE on the web. You have any experience using one or the other? Yeah, Ethereum Remix is pretty cool, but I find it's like, it doesn't give you really like intuitive feedback for me. So I kinda just stick around with Truffle. Yeah. Oh yeah, and the question was Ethereum Remix or Truffle debugging for the people watching. Hey Ryan, in order to run tests to test your Solidity, does the application, does the network get stubbed automatically by the framework? Does it even have to talk to the network? It does talk to the network. I shouldn't have like hidden my slides already. Anyways, if you go back, if you check out the slides on there, you'll see that the test took five seconds. That's because I have each block taking five seconds to run. Right, so you need all this tooling running in order for the test to run against that network. Yep, cool. That was really interesting. I wonder if you could go into Keynote mode. Oh, go back to Keynote? No, no, like our talks in the morning, hasn't that, like we're reading a lot about how blockchain transactions are highly disruptive. And I just want to ask like, what is it disruptive of to you? To me, anything you have to place centralized trust in. For example, banks, we put a lot of faith into a centralized server. So banks are an easy target. Any time you want to like decentralize trust, like supply chains, you know, who knows if it's really halal me, right? Another example, identity is very topical. Do you want to place trust in Facebook and Google? Or do you want to control that identity yourself and choose how you want to share it? So yeah, anything where trust is important, I would consider it to be disrupting. Hope we got one more. Hi, thanks for your talk. I was wondering if you have heard or looked at Holochain at all, which is like a similar, I think it's similar to Ethereum, but it's like newer. I was wondering if you'd heard of that or looked out of that. No, I haven't heard of Holochain. Sorry. Yeah, this one isn't so much a question about the presentation. I came in a bit late, but just to share with community members, former Drupal guy has left and he actually created a blockchain project that is an Ethereum clone. So it's all solidity-based and it's not the same as a fork, but he actually cloned the code base. It's called MIX, MIX-blockchain. So you can apply your solidity skills there and it's a former Drupal guy. All right, well, I hope everyone had an awesome DrupalCon. Thank you for coming. What do you think I did on vacation? Oh, thank you, man. Thanks.