Signers & Waiting for Transactions

[00:00:00]
>> Man, I'm kind of excited right now, I hope you're excited too. And now we're gonna increment it and we wanna see it go to two, right? We're gonna, my goodness, no, what happened here? Well, what happened was that we just tried to do a state changing transaction but we've only provided in our code a provider, we have not provided a signer.

[00:00:23]
A provider tells where the network is and basic communications. A signer accesses more of the wallets kind of information and allows for request to be signed by whoever has allowed this like this privileged to be able to use MetaMask. Now, obviously that part of a blockchain is confusing.

[00:00:43]
You can go watch a mathematician explain to you how cryptography works, how public and private keys work, signing and all that information, verifying transactions. For now, we're not gonna talk about that because that's above my pay grade. You're just simply going to add this one little function, getSigner, that's it.

[00:00:58]
We have now allow, this is gonna be when you create the provider, you're gonna get the signer from it. This is effectively stating I want to have a provider with state changing transaction privileges. And so this is very, very important to have cuz now we can do all the greatest things ever.

[00:01:16]
And hopefully that includes making millions of dollars, getting onto that yacht, right? Now, what Web 3 is all about? Yeah, money, I thought that's what it was about, I might be mistaken. All right, so there we go. We have this, so now let's go back to our website, let's refresh it.

[00:01:30]
It's still at 1 because that increment failed. So now, let's go, let's increment. And it's gonna open up MetaMask, cuz MetaMask can be like, whoa, whoa, whoa, whoa, whoa, whoa, whoa. Are you sure you want to do this? Now, for anyone that's refreshed the page, probably earlier, you already accepted the permission of using MetaMask.

[00:01:48]
I kind of have forgotten that I accepted the permission so they can prompt you with that right away. And so now I can choose what account do I want to use. Right now I'm using this account, that's not linked to my private account, so it says I have no money, insufficient funds.

[00:02:01]
So I gotta make sure that I have the right stuff hooked up. So I'm gonna reject this, I'm gonna go in here. This is kind of just working with MetaMask and development in general. Select the account that was currently selected, which is look, notice that I have this one, that is connected, this one isn't.

[00:02:16]
So I'm gonna connect, there we go, we're connected. I can also go in here, select ThePrimeagen and disconnect from it, right? So I can go here and go disconnect, it's no longer allowed. These are just using MetaMask, you'll get used to using those. It's kind of, whatever, right?

[00:02:31]
You'll figure all that stuff out. There we go, so now, I have the correct one selected. And now, when I increment, notice what happens. We have the correct one, I now have sufficient amount of money. I need to pay the gas fees, which is telling me right here, this is going to cost me point 0.005 eath.

[00:02:47]
And if my math is correct, that's like $2, right? That's a lot of money. So let's confirm, let's increment and what happened? We had yet another error. It's almost like I have planned this, which I have. All right, so let's go back to our code. Effectively what it's saying, if you look right here, it says that the chain ID is 31337 but we weren't expecting that, right?

[00:03:12]
We got some other value that was not provided. If we look at our node, you'll see that it failed. And that's because every network has a specific chain ID associated with it so you don't accidentally send transactions to the wrong network. For whatever reason, hard hat has chosen the ID of 31337, whereas MetaMask assumes all local networks have the ID of 1337, cuz that's the generally accepted local ID.

[00:03:37]
So what that means is we're gonna have to go over to our hardhat config, and we're gonna have to add in something to it. Now, this is our first time mutating and adding something to our hardhat config. It's pretty exciting, so everyone get ready, positive attitude, just wait up there and type in the word networks.

[00:03:56]
It's an object, and we're gonna provide hardhat. So when we do our local network, we're actually talking to the hardhat network. I could put in things like rink B network, and I could configure the rink B network in this same area as well. Right now we're just doing hardhat, which is the local one.

[00:04:12]
And in here, I'm gonna say the word chainId = 1337. We're gonna fix hardhat to become like all other ones and have what MetaMask expects. I know, kinda silly, right? Which means we're gonna have to go to our node. We're gonna have to take it down. I know, it's a little sad, we've had it running for so long that network was beautiful, great things happen on the network, but actually we've had to take it down.

[00:04:35]
We're gonna have to restart our node, which means our count contract is now gone, right? Right, so now we're gonna go back and we're gonna have to run our deploying counter script and get the counter back onto the network, cuz we had to take it down and change its chain ID, there we go.

[00:04:54]
Once this thing runs, I know, there's a lot of steps to this. Everyone get ready for how many steps we're gonna have to do. Let's go to our node and grab out our address, copy that, go back to our end file, erase that, paste in our new address, go back to webpack, kill webpack and now we're back hydrated, right?

[00:05:19]
That was a lot of steps. These are steps, you're gonna have to either build an environment around, or you're gonna have to do every single time you're doing local development. It can be kind of a pain in the ass but that's because we have so many separate things running all at once.

[00:05:33]
We have our own network. We have our own deploying. We have a website that has to communicate with it. It's using a provider like MetaMask. Do we have any questions thus far before I go through a show, great success? This next part is gonna be so beautiful, it's gonna just blow your mind, all right?

[00:05:49]
All right, let's go here, we're gonna refresh. Notice our counters back at one. We can now increment it here, I'll make it a little bit bigger, so it's just exciting. We're gonna increment, it's gonna ask us again, do you want to pay for this? Yes, we do want to pay for it.

[00:06:04]
And then of course, what happens? Nonce it's too high. What happened here? When you're developing with MetaMask, this can happen from time to time and the first time it happened, it was terrifying. So saying nonce too high, expected to but got 50. This means last night while I was practicing to do this today, I had this account hooked up and I made several, several requests, which does cost my nonce to get higher and higher and higher.

[00:06:29]
And now it's out of sync with the network, cuz I just created a new network yet I've already assumed it exists. So now that we're doing a state changing transaction saying, hey, you can't do that. So fun little fact, you could go look this up, you'd eventually run into it.

[00:06:42]
But you click on to this, go to Settings, go to Advanced, Reset Account. It resets your nonces, so everything just will work. You will run into this all the time doing local development as you take down and put back up your networks. I know, there's so many little steps that have to be done.

[00:07:00]
It's kinda like terrifying how many steps actually have to be done to get something done. It's just a part of the beautiful life of Web 3. All right, let's increment again, let's go. Now, wait for it, wait for it, it's gonna happen, Confirm. But it didn't show anything.

[00:07:21]
Does anyone have any idea what's happening? This is me seeding, don't worry, I know what's happening. All right, so the first thing you'll notice is that we did it, we got no new errors at this point, but nothing happened, right? Whoa, whoa, did you just see that? What is this?

[00:07:37]
It says transaction to confirm. Wow, that happened a lot later, didn't it? That means, we sent off a request that took some time, and then it came back, and then it completed. So I bet if I refresh this it will, my goodness, look at that. We did actually increment the counter, it just took a little bit, right?

[00:07:57]
That makes perfect sense, cuz that is how it's always going to happen. So let's go back to our little beautiful typescript. And so what comes out of here when you have this await you are not awaiting for this transaction to be done. But actually you're waiting for the transaction to be set in.

[00:08:18]
So now, what I can do is I can like this const tx = await tx.wait. Now, this will wait for the transaction to be done and then I can call the counter. Just to prove it to you I'll go back over here refresh it hit that increment allow it to happen, confirm, there we go.

[00:08:39]
It happened to go through right away this time, just lock up the network and everything went through. Increment it again, just in case you don't believe me, hopefully I don't get so fast one, every now and then I get these fast ones. Okay, it's fast now. I don't know what happened, it's going really, really fast.

[00:08:52]
But this would have worked if it was nice and slow.