All right.
So in the last lesson, we saw that we were able to get the balance by querying a hash map, and we're
able to return the result from this public query function.
And we test that on the command line using our own as public key.
Now, we want to be able to get this to work using the frontend instead of using the command line.
So to do that, we have to write some code in the balance dot G6.
Now in this file, I've already got the HTML pretty much done for you because that part is easy.
But we're going to be writing the JavaScript code in order to hook it up with our backend and get it
to work.
So the first thing we want to do is notice that we've got this handle click listener hooked up so that
whenever the user clicks on this button request balance, then it will trigger this function.
And inside this function, currently we've just got a console log.
So if we go ahead and test it on the front end, so if we go ahead and click Check Balance, then you
can see it triggers this function call.
So instead of doing a console.log, what we want to do instead is we want to use a wait and call function,
which is balance of, and we want to pass in the principle that the user typed inside that text field
right here.
So that's an input which is right here.
And in order get hold of what's inside the input is we have to add a value attribute.
Now the value is going to be an input value.
So whatever the user types in them and we're going to capture that inside a constant.
So we're going to create a consort which is using the react use state.
So we're going to set the context to be called input value, just like what we've got down here.
And we're going to give it also a setter as well.
So set input and this is going to be tracked using our use state hook and we're going to set the initial
value to just an empty string.
We've got our use state which is from our React module and in order to set the input value, we have
to add an on change listener attribute as well so that when it changes, we will trigger a function
which in this case is just going to be using the JavaScript fat arrow and we're going to call that input
to set it to the event dot target, dot value.
What this is going to do is whenever this input gets changed, which means that user's typing something
into it, it's going to trigger this function.
And this function takes the event that caused the trigger and it calls our set input setter method in
order to set the input values state to the event that triggered it.
So the typing dot target, which is going to be this current input element, dot value, which is going
to be whatever the user typed in hint.
And this kind of format is really commonly seen in React where we have an input, the value is set using
the constant and when it's on change, trigger the setter for that constant.
Let's just make sure that actually works so that we actually console log into the balance button clicked,
we're going to console.log input value and let's go ahead and hit save and go back to our front end.
And I'm just going to type something in here, click check balance and you can see that it's got a hold
of the input inside that field.
So brilliant.
Now the next thing we want to do is want to take that input value and pass it back into here.
But we don't want to pass it back just as text, which is what we've got currently.
Whatever we type into the input field is going to be served up as text, but instead we want to convert
it into a principal data type and then call this function, passing that in as the input in order to
import the classes from Mutoko on the front end.
In JavaScript, our import will look a little bit different.
So we're going to import the principal type and it's going to come from our definitive module.
So it's going to be at definitive forward slash principal.
This is really similar to my Toku Mo base slash principle, but this is written obviously in JavaScript,
but also this comes from our packaged JSON at Dfinity.
This is where it's getting it from.
And the ATS line basically just denotes a scoped package, which is sort of a way of grouping similar
packages together.
Instead of having them all separate, we can get hold of the Dfinity principle type by using this input,
and then we can create our principle by converting it using the principle type.
So we're going to say principal dot from text.
We did this in our main dot mutoko when we got hold of our own as principal from the command line and
then we converted it into an actual principal type using that method.
But in this case we're converting it from the current input value.
So we're basically taking whatever the user types inside here and then converting it into a principal
type.
And then finally, we're going to call that method balance of from our main point, my token again,
in order to be able to call the methods in our back end, we have to important.
So we're going to import our actor, which is our token canister and we're going to get it from our
relative path.
So AJ need a three of these slashes and then we go into the declarations folder which is right here
and then from there we can access the token bridge file.
This is what it should look like to import.
Now I can say await token dot balance of.
And this method requires a principle to be passed in, which is what we have created in the previous
line here.
And then we're going to set this to a concept which I'm going to call balance.
And we want to display that balance inside this paragraph element here.
Now, instead of having X, Y, Z, we're going to display the balance result here.
And for that to work, we need to create another constant that has state.
So we've called it balance result.
And we're going to have a setter which is going to be called set balance.
So we're going to use state and we're going to set the balance to have an initial value of also just
an empty string.
So notice that this is actually going to be a strings or a text data type.
When we get this balance back, it's going to look like this.
It's going to be formatted like this, and it's going to be a natural number in order to set it properly.
So using our set balance, we want to change this into a string.
And JavaScript rather handily actually has a method which is called to local string and make sure that
you've got the correct spelling.
It's not local, it's local.
And then at the end we add a set of parentheses to actually convert this number into a formatted number,
which is going to be a string.
And if we hit save and go back to our front end, if we paste in that principal ID, click check balance,
then you can see it shows up right here.
Perfect.
That actually worked using our back end.
And that is how we can get our front end to pull in the data from our back end and to format it to be
able to see it on the website.
Now, there's a couple of things that we want to fix here.
Firstly, it would be nice if we can also get hold of our currency so that it could say 1 billion dang
or whatever your currency is called.
And I actually want to set that to you as a challenge.
Can you modify the MUTOKO code as well as the JavaScript code so that you're currency symbol shows up
just after the balance?
I'll give you a few seconds to pause the video before I show you the solution.
Ready.
Here's the solution.
Let's go back and made up mutoko and let's create a nother query function.
So public query func and we'll call this one get symbol.
So it's not going to take any inputs, but it is going to return a text.
Let's add a semicolon there to make this error go away.
And we're just simply going to return whatever is the value of our symbol right here.
So whatever it is that you set right here is going to be returned to our method so we can create a new
concept which will call a crypto symbol and will have a set symbol method as well.
And we're going to use state and set it to have an initial value of an empty string.
And here we're going to use a set symbol and call or a weights token.
Dot gets symbol.
A method like this.
So let me just check that I've got the method correct.
It's called get symbol.
I could get some more.
Perfect.
And then down here, just after our balance result, we're going to add in our crypto symbol to show
up.
Let's hit save.
Let's copy all principle I.D. and paste it.
Now, this is really important.
You can see that it says type error, token, blah, blah, blah is not a function.
Now, can you figure out why that is?
Because this will happen to you quite a few times when you're doing ICP development.
So the reason is because we updated on Main Dot Metzger Code and we updated our frontend whenever we
update our frontend because we're using the automatic reload on our NPM server using NPM start, it
will automatically restart the server, but it will not automatically do DFA deploy for us.
And because we've changed the backend, our Mutoko file, we have to do that in order to pull that into
our declarations and to actually be able to access it from our frontend.
So let's do that.
DFA deploy.
And once that's done, you can see we can now access this method.
And if we hit, save and go back, we should now be able to get it to show up.
So perfect.
The next thing I want to do is I want to hide this feedback message, because when you first load it
up and you don't have any accounts, it just says this account has a balance of DOT.
It doesn't really make much sense.
So what we can do is we can create a new contact code is hidden and we can set hidden as the setter.
And we're going to start off with a value of true.
And we can set the hidden attribute on our paragraph to be equal to the is hidden constant that we've
got up here and we want to set it to be not hidden.
Once we've gotten back the balance and the symbol and the user actually clicked on the button.
So we can say set hidden and we'll set it to false inside here.
Now let's go back.
And you can see initially there's no text below the button.
But if we check our balance, then you can see that paragraph suddenly appears.
This is really just sort of improving the appearance and improving the UX of all front end.
It doesn't really change the main functionality, which we've already achieved.
There you have it.
We've got our balance checking mechanism complete and we can now move on to the next aspect, which
is getting our faucet to run and being able to tap into the faucet and give any user 10,000 free tokens.
So all of that and more.
I'll see you in the next lesson.