Deploy Contract & Connect MetaMask

[00:00:00]
>> All right, so I actually made a joke we're not going to do anything with meta mask right now. It's actually a lot of typing. And I just wanted you guys to have it ready. So that way when we actually do it actually joke's on you. I were gonna do it.

[00:00:13]
I did live type this because this is actually how I felt when I was writing this. I was like, I don't want to do all this. Okay, actually, yes, I do want to do all this. So this is my emotional roller coaster for you all to write, we're actually going to do this.

[00:00:25]
And I do a lot of live coding. But there is one thing I will not live code, which is a Webpack config. I copy and paste this every single time. So I'm gonna start from the tippy top, and I'm going to scroll all the way down to the bippity bottom, and I'm gonna copy that.

[00:00:39]
I'm gonna go over to my editor, I'm gonna go to my route and I'm gonna go webpack.config.JavaScript, paste it all in promptly navigate away from that. I don't want to look at that, or think about Webpack. It's very, very annoying. Webpack has two things that are important. I have a source/index.hml, and I have a source slash index.typescript.

[00:01:02]
Those are two files that will be important here very, very shortly. Also side note I am not a like a super front end person so we're not gonna be building anything beautiful or involving any library. Second we need to do this nice lovely install statement again our node modules.

[00:01:23]
If this was stocks, these things are going up, unlike my investment in opendoor, which has currently gone down a lot, and so yarn add, add all these things for Webpack. So let's go over to our terminal, paste all those things in it will take a moment. I don't know how to run the Webpack WebDev server and I didn't want to take or the dev server and I didn't want to take the time to figure that out.

[00:01:43]
So I'm going to do a Python simple server and host out my files that way. If you know how to do it, I have the config in there. So you can choose which way you'd like to do that. And lastly, we should have a TS config because this will make things not break.

[00:01:58]
So copy and paste these two options. If you want to have a more complete TS config, go for it. These two are the ones that we really need for this project. The rest, they're just extra stuff such as no implicit all right, so tsconfig.json it's actually French I don't know if that it's just on was a French.

[00:02:19]
That was a French thing and so a lot of people get confused and they call it Json which totally wrong it's just on all right. So next we're gonna to code up a meta mask interaction. And we're gonna get hello world from our contract that's deployed on our local network, but it's gonna show up in our browser.

[00:02:40]
So this is gonna involve a lot of coding. If you don't want to do a lot of coding, the complete code is located right here. So we're gonna, we're gonna get there I may call things differently. Because I am live coding. I'm kind of free flowing off the top of my head as opposed to, say doing things correctly.

[00:02:57]
So let's create the directory called source. Inside of here I'm going to create in dot index,html. I'm gonna become an html programmer for a moment. So we're going to create a small html file right here where I'm gonna go html replace it with head because I think you're supposed to have that I'm actually not even sure if you're supposed to have that or not.

[00:03:16]
I'm gonna have body properly indented four spaces and that's it we've just html programmed our way into the future. And put a little quick write in there and let's create an index.typescript. So there we go so this will be the code we're obviously gonna be putting into the browser and so we need to import the correct address items.

[00:03:35]
So what we aren't gonna import is the hard hat ethers. This time we are gonna import from ethers itself, which means that it doesn't have some of those convenient methods because it can't read from disk at this point. We're not able to do what we did before. And we too are not gonna read our data from disk.

[00:03:52]
We're not gonna grab the very convenient json build stuff, we're gonna just kind of deploy it by hand to begin with or contacted by hand to begin with. All right, so the first thing we need to do is that there's two steps to connecting with Metamask. It's kind of an interesting piece of technology.

[00:04:10]
It can be a little bit frustrating sometimes, if you have a Metamask request up. If you refresh the page, you get an error when you request access to meta mask. And they don't have a way for you to listen when someone accepts it, if you've read so anyways, it's kind of annoying.

[00:04:25]
So I just do this to set two simple steps that a mom in Arizona discovered that Metamask hates. So what I do is I go like this async function has accounts. I think I do have signers and the other one and all I do here is I simply grab the Metamask object, and ask, do I have any Aetherium accounts currently?

[00:04:45]
And so, I'm gonna do one other function right here called get it. Just because I have the TS ignore it. So, it's gonna go window dot Aetherium. Right, adding Global's is just always just so easy and not painful. And so we're just gonna have this nice little Ethereum object right there.

[00:05:02]
So I can just go const eth = window, to or not that one, what I've been doing, geteth, there we go. So I got the Ethereum object, the Ethereum objects placed on there. When you have Metamask installed, so now I'm gonna just do one last little simple check.

[00:05:17]
I'm gonna go cost equals this. If not, he then we should probably throw new air. I know you don't have to do this because I assume everyone has it. Get meta mask and a positive attitude. There we go, fantastic return eight. So there we go. We have this nice little thing going right here, we have the metamask object.

[00:05:40]
Once we have that, we can simply go account equals await eth.request. Then we're gonna pass in this little object. This is where we tell metamask, what to go request, or this is how we talk to metamask to request data out of it. I'm just gonna simply go method, eth accounts and that's it.

[00:06:01]
And so then I'm gonna go as string of course or as string array which should give you back an array of strings. But, it technically gives you back an undefined or an air if things aren't and correct. So what I'll do is just simply go accounts and accounts.length, right?

[00:06:17]
As long as there's a length to the accounts, we've effectively, we have accounts. We're good to go. We're kind of hacking into this. If you wanna develop a better solution, you can, but for now, we're just taking the easiest possible way to get there. So I'm gonna just take this method.

[00:06:31]
I'm gonna copy it. And instead of has account. Let's go here and go request accounts everything's the same except for we do eat request accounts. Now if you already have a request open or you already have it you're going to get an error so that's why that's why I do the has accounts first.

[00:06:48]
Then the request accounts pretty much the exact same piece of code we could probably be even smarter and create a nice method here that you know does this.. And we just pass in the name but I usually do the Martin Fowler's rule of three we currently only have two duplication.

[00:07:03]
So no need to get super fancy here and make it nicer. So I assume everyone's effectively caught up. If not, there is always the website where you can copy and paste these things out. So let's do this a sync function run. So this is where we're going to do our main amount of coding.

[00:07:20]
I'm going to call the run function, and we'll do it right here. So if not, a weight has accounts which is just OS requesting from meta mask the accounts that exist. And await 33 ot await request accounts meaning if you try to request it and it doesn't work you say no we're here that means something bad happened then we probably should just throw new error.

[00:07:44]
Please let me take your money. There we go, beautiful. So now, if we get to line 31, which is where I'm at right now, we should have access to your meta mask at this point. Obviously there's this is not production grade if you refresh if there's, there's a lot of stuff still out there.

[00:08:03]
And meta mask is kind of difficult to play with sometimes I actually filed an issue where I was just like, hey, if you do these steps, it doesn't work. There's a workaround like this, but I don't really like the workaround. The person responded with great workaround. So I was like, okay, well, this is what we're going with from here on out.

[00:08:18]
So it is what it is. It's great piece of software. It makes life super convenient. But programming against it's a bit a bit wonky. Soo there we go we now have Metamask available for us to access so now we need to call our contract from the browser Well, much like the deploying, we need a way to be able to point to it.

[00:08:40]
So this is what we're gonna do. We're gonna go Cnst hello equals, new ethers, contract. Now what is in an ethers contract? Let's see do we have it? You requires an address or name, the interface to the contract, and a signer or a provider. Now, this is very important to know effectively we'll go over the specifics of signer provider.

[00:09:04]
But you need these three items to be able to contract or contact a contract on any network. So, let's go back to this thing and let's simply go, alright. We need an address we don't have that, we need an interface to our contract we don't have that, do we have a provider?

[00:09:23]
Yes technically we do have a provider, r bbbbemember that whole meta mask thing. Meta mask is a provider. It abstracts away how you contact the network. So that way ethers doesn't have to know how to contact the network. It knows how to form proper request to the network.

[00:09:39]
It doesn't know where the network's at. And so we're gonna tell it where the network's ads by simply doing new ethers providers .web3Provider(window.ethereum), right? That's that whole, obviously, I can just getEth, there we go. Beautiful, so, now we've given ethers how to contact the network, but we haven't given it where on the network and what does it look like, yet?

[00:10:06]
So, the first thing we need to do is give it where on this network is our contract. Well, we got to go back to our node. We can go to the to section right here because this is the contract that we actually deployed in made. I'm going to copy out this address, and I'm going to intentionally not very great software engineering practices hard coded into our script right here.

[00:10:30]
Next we need to give it an interface. Now we can handcraft these interfaces actually fairly easy. All I'm going to do is I'm gonna just add a string that says function. Hello, public pier returns string memory just give it like our literal string ification of the function signature.

[00:10:49]
It almost looks like an interface. So what I've just done is I told a theory are ethers that this is what is on the contract. This is where the contract is at. And this is how you communicate to the contract. And so ethers does the rest formulates the requests, make sure everything's happened.

[00:11:08]
It properly waits for everything. And so there we go. Now we have hello.
>> So theoretically we should just be able to like this document dot body dot inner html. Because we're dangerous around here we're going to await for hello hello that. So if I've done everything correctly first try which I do every time this should work out so let's go over to a terminal let's launch Webpack.

[00:11:33]
So I'm gonna go Webpack launch it if I have programmed everything correctly it should give me all green it gave me green fantastic. Let's go to another terminal just because I don't have a way to launch the dev server if you not launch the dev server I put the config in there.

[00:11:50]
I just didn't take time to learn all those things so I'm just gonna do a simple server on port 6969. And so there we go I'm now serving out the disk, the build to my web pack. And so we kinda have everything all nice and lifted up. We're ready to go.

[00:12:06]
We should be able to communicate. So now I'm gonna open up a local host at 69 69 and it says, hello, front end masters. So we have communicated from the browser to our local node running through meta so that's actually pretty cool, because MetaMask is just a drop down to other networks, right?

[00:12:25]
And so Ethers doesn't have to know where the network is at. It just needs to know how to communicate there. And if we look at our node, you'll notice that it was called again, for Helloworld. We actually have two in a row Helloworld calls All right, let's see.

[00:12:43]
Let's go back here. Let's make sure I didn't miss anything. So here's the complete code. So if you want to, you can go through here and go to this complete code right here. And so let's take a moment kind of think about all the things that just happen there because hopefully this is kind of exciting for me.

[00:12:58]
This was actually this was actually a pretty cool moment. Because I just saw the full circle happen, right? I wrote a programme where I told it where it was, what it looked like and how to contact it. And I was able to call a remote function with little to no effort.

[00:13:15]
For me that is pretty neat. I was able to specify the remote function in a fairly simple language. Also pretty neat and what I didn't do anything with the server I don't have any worries about uptime it just simply exists out on a network. And if I was able to put this on the main net I don't want people Spend money to do that, It would exist forever and I'd be able to call this thing as much as I'd like and I'd get the data back out.

[00:13:41]
And I can call these functions for free. That's pretty neat. I have a forever living function that will live out there. Right now It's on my local net. So that's, not very forever right now, but nonetheless, that was pretty neat, right? Like that's very unusual programming paradigm. It's like lambda functions.

[00:13:59]
But a bit more extreme, right? So it's kind of a cool concept. And this for me really was the moment where I went, wow, web three is pretty. That's pretty coom, I like that. So I'm sure there's a few gaps in your knowledge. First off, any questions thus far at this point now.

[00:14:17]
>> How to spin up the,
>> The Little server yeah, I just did a simple Python server so I did a python three module http server and here's the port. So the contract is just floating out there on the ether network and it's being connected to through meta mask.

[00:14:34]
When are the guest fees incurred.
>> Great question so we're actually gonna go over gas here shortly but there's a distinction in the network there's two types of requests that you really need to understand those that cost gas and those that do not cost gas I know crazy, right?

[00:14:53]
But whenever you do a call to a certain set of functions, it does not require any gas. Let's just for fun look at the function that I created. What can you say about this function? Does it alter the network in any way? No, therefore it's free. Does it, so it doesn't write to any state doesn't matter how complex the call is.

[00:15:18]
It does not alter the state of the Ethereum network. Therefore it is free. I'm going a little bit ahead of time just to kind of answer that. So our contract Yes, it does float out there somewhere, but it has an address much like your house. Or where you live it has an address we have a way to get there which is the provider.

[00:15:35]
And we have the shape of it which is that little interface that we wrote and so by having those three pieces you can communicate via RPC to the network for a specific contract for specific function and get out data.
>> Can you ever upgrade or change the code once it's deployed to the blockchain?

[00:15:52]
>> Beautiful question. We will actually get there. Hopefully there's enough time. We will get there. It is exceptionally complex. But yes, there's are ways around this whole problem because the reality is if I were to relaunch my contract. I would create a new contract with new state. Once it's launched, it is launched, it is immutable you cannot change it, you cannot change the code out of underneath it.

[00:16:18]
But there are ways around that make it so that you can change the code, So it sounds like I just contradicted myself but once you see it, it will make ten times more sense.