Display Contract Count on Website

[00:00:00]
>> We're gonna use our website and we're now gonna display the counter on the website and we're going to increment the counter on the website. So let's go back let's open up our index.ts and of course the first thing we need to do is going to go up to this nice little address here and we need to replace it.

[00:00:19]
I'm fairly lazy, I don't want to have to keep on putting in new addresses, so let's just do a simple process .env.CONTRACT_ADDRESS, right? So this is gonna grab our contract address off of our environment variable. Now remember, if you were keen enough to looking at that Webpack config file, I actually use .env to scrape off our environment and to bring it into Node.

[00:00:48]
And so what we'll do is we'll go here into our base directory and create a .env file. We'll create a CONTRACT_ADDRESS= we'll go to our network, grab our last counter address, copy it, go back, paste it in. So now, when we start Webpack, it's gonna take this .env file, grab out the contract address and put it into our environment.

[00:01:13]
And of course have some code inside the Webpack config that will actually replace that. I assume most people already know about .env. Nothing here should be too shocking, right? Everyone's kind of used it. If you haven't used it, it's fantastic. They have it in multiple languages right? You have it in Go.

[00:01:27]
I'm sure you have it in other ones as well. It's just a beautiful thing. And so we won't be using too much of it, but we will be using some of it. Was there a question right there? Okay, so now we have that. Second, we the do something with this, right?

[00:01:45]
Cuz before it was Hello but now we're gonna be talking to our contract address. So we do need something to change. So I think everybody here that's in the audience you should be able to just type this up yourself, right? You should be able to replace function hello with count which is gonna be a public function and that's it.

[00:02:04]
And then of course you're gonna have a get counter which is gonna be a public view returns utnt32, there we go. So we kind of know what's happening right here. This is our interface of these two functions that we want to call into. And then lastly we have our same provider that we've been using thus far.

[00:02:25]
So now it's time to do a little bit of like we're gonna go right back into all that HTML link. So let's create a couple elements to display that, I'm gonna create a div to display the number and a button to allow you to click it. So I'm just gonna do a const el = document.createElement for those that have only lived in the React World this a little scary using the raw documents stuff, but we're gonna do it.

[00:02:49]
It's gonna be fun. And then we're gonna go we'll create a little nice a sync function called set value or setCounter. I know you shouldn't ever create functions inside functions cuz you keep producing functions, but for us we're just doing this isn't that we're not creating enterprise code here, right?

[00:03:03]
We're gonna go el.innerHTML. Remember we like to live dangerously around here and we're gonna await our counter contract which we currently call hello. We should probably rename that and call getCounter there we go and of course, I should probably just rename hello to counter, beautiful, fantastic. We're gonna call setCounter.

[00:03:24]
So that way we have a nice set counter at the beginning. And then we need to create one more element for the button. I don't think I'm doing anything that people already don't know about. So I'm just gonna kind of speed through this. I assume I don't really need to explain much of these things, right?

[00:03:38]
This is just some JavaScript, button.innerText = increment type. There we go. So we know to increment and of course button on click equals function. We don't care what happens in here. Let's go a sync function await counter.count. Remember so this is where we're gonna actually do the incrementing.

[00:03:58]
So we're going to counter once and then we're gonna set the counter, that sounds about right, right?. I'm gonna erase that last line because we don't obviously want to have anything from hello world on there and then we're gonna have to go document.body.appendChild. And let's append the el and then of course let's append the button.

[00:04:25]
There we go. So now we have the elements we have the button. We created them both here, right? We created everything, we get the value out of our counter by calling the function, we've called this function by specifying it right here. Here's the interface to the function. We call it once to get the value.

[00:04:41]
We create a button. We set the text to increment. When it gets clicked, we call count. Then, boom, we set the counter. So there we go. That's pretty much identical to our deploy script. With a little bit of UI logic on top of it, right? Not a lot but it's fairly straightforward.

[00:04:58]
So that means we are only have to do one last thing, which is we have to go to our webpack we have to destroy it and then we have to relaunch it. Reason being of course, because we just added a .nfile with our contract address. It doesn't currently have our environment.

[00:05:14]
I don't know how to refresh webpacks environment variables on the fly, as you know my build system wasn't that advanced. So therefore every time we change that value, we have to make sure we destroy and relaunch webpack. I'm telling you this, because I'm gonna forget. And so when it breaks down, someone goes, did you remember to do that?

[00:05:33]
And then I'll remember to do that and then we'll all first try together. Fantastic. So let's go back to our beautiful website we've been making, which is right here, which currently says hello front end masters. And I'm gonna open up the console just in case we have anything go wrong.

[00:05:49]
And I'm gonna refresh the site. Look at that, nothing went wrong we have the one right here, we have the increment button cuz remember we launched the contract and then incremented it once, beautiful we've done it.