NEAR Blockheads, 28 Nov 2020

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: BlockHeads Workshop 1: Intro to NEAR Part 2

Description

Time Stamps:
00:00 Intro
00:30 What Were Building
02:12 Starting The App Build
13:42 Creating The NavBar
18:58 Creating The Login/Logout Restriction Feature
26:16 Creating The Meta Data Component
42:20 Creating The Send Tokens Feature
1:39:25 Active Keys
1:43:12 Creating Function Call Keys
1:55:14 Creating the Function Call Key Component
2:05:08 Last Minute Styling
2:07:25 Application Showcase!
2:09:24 Outro
--------------------------------------------------------------------------------------------------------------------------
Follow the latest from NEAR Protocol on,

Website: https://nearprotocol.com/
Discord: https://near.ai/discord
Medium: https://near.ai/medium
Twitter: https://near.ai/twitter
GitHub: https://near.ai/github

#WhiteboardSeries #Blockchain #FutureIsNEAR

A

Hey guys welcome to the blockheads android denier, blockchain, app development workshop hope you guys are excited because in this part, we're working through a hands-on project. That's going to lock in all the core concepts. You need to begin developing your own cool, blockchain applications. You guys haven't done so already. I encourage you guys to go check out part one, because this project is designed to cover all the core concepts I went over in that part. But enough of this intro I say we just jump right in and get started.

A

I'm gonna give you guys a quick overview of what we're gonna be building. So this is what I like to call block view. uh Block will be an application that will show your near blockchain information, as, in your near token, balance the current block height, as well as um the access keys, both full access and function call access keys and a bit more. um I'm going to log in right now and show you guys what we can do with this application.

A

Through this process, I'm going to show you guys how to request full access through a third party application to your near wallet.

A

And when you log in you see all this information being displayed right here in front of you, so you have all your functional access keys, your full access keys, as well as your metadata for your account. So you can show you guys how to pull all this information.

A

I'm going to show you guys how to read your new balance, and then I'm also going to show you guys how to send your tokens to another user as well as record. These trends record the transaction histories and the total amount of near tokens that you've sent a particular user on the blockchain. So this project will show you guys how to interact with the near blockchain. Making contract calls both view, methods and change methods. So we're going to cover all this, and this should just be the core basic tools.

A

You need to begin developing your own blockchain applications. I should note that I used react.js to design certification an effort to stick to a more component-based design for the tools they see here on screen. I also use react bootstrap as a design library to cut out the fat and save on times in terms of styling, so we can focus on learning and understanding the tools that near provides to create blockchain applications. So if you are familiar with your fjs, that's totally all right.

A

I'll, put a link to the description to a crash course by traversing media.

A

So now I want you guys to head over to node.js website and download the recommended version of node.js and reference the operating system you are using at this point in the recommended download for mac os, which is the os I'm currently running, is 14.15.1.

A

It may be different for you by the time you watch this video if you're running on windows, this will come with the npm package manager, which will which we'll use multiple times for this video to download various packages from react, bootstrap near protocol and more of course, during your own project in app development, you can use whichever text editor you're most comfortable with.

A

However, to best, along with this tutorial, I recommend downloading the visual studio code text editor so head on over to code.visualstudio.com and hit the download button and follow the on-screen instructions and just select all the default options to set up vs code on your computer. So we can move on the tutorial it's time to download the new cli, as well as the create new app starting template to begin our app development.

A

So we want you guys to head over to new.org and click on docs and in search tool above I want you to search for near cli, then follow the on-screen instructions um in respect to the operating system you're currently running on so for mac and window and linux. You just simply copy this line paste into your terminal. You know, depending like which terminal you prefer after you've, installed, npm and node, which you've already completed or if you're running on windows you have to go through.

A

You do have to get this extra step of downloading the windows subsystem for linux. uh So just click on this link here and follow the instructions on this page uh once you've completed that um simply head back and copy this line and paste it to terminal again since you've already downloaded, npm and node.js and there you should have the new cli downloaded.

A

So the reason why we're downloading the new cli is because it essentially acts as a wrapper for the new api um js package, which can assess uh which can assist developers with testing by creating contract, calls running npm scripts and doing more all from your terminal.

A

This will allow you direct control over the new apigee s, uh so you can quickly test things. You cannot do in your normal app development or your normal javascript element. So uh I'll show you guys a few contrast. A few of these tools here throughout the rest of this video, so just sit tight. You can see where this will come up a little bit later. So here I am on the npm page for create new app where they go over the usage installation on how to run or install or create new app.

A

Of course, you can install this locally using npm or you can run npx and just execute the node package right on the spot, which is what we're gonna do so in your terminal or in vs code in the vs code terminal, uh navigate to the directory of which you'd like to store this project and then run npx create near app dash front, end equal to react and then we're going to name the application block view.

A

Okay, so once this is installed, we're going to type in with my little face, we're going to type in code, dot, dot to open up vs code in the in the directory that we created block view in.

A

If you hit command j on mac, you open up your terminal within vs code and just navigate into the file you just created and to ensure that everything is working properly type in yarn, dev to run the development server so build up the application execute the development account.

A

You'll see that the um devote server is on localhost 57311 and once it builds you'll automatically open that in your browser- and this will let you know that you have successfully ran, create new, app and start show.

A

You guys another way just to run, create new app just through vs code, um to make it a little more clear and direct, so I'm gonna click open and go over to the folder that I created the um that I want to like store block view in so I'm going to go to documents uh here we go put in here and if you hit command j you're going to open up the terminal down here, you can just run npx create near app dash dash front end is equal to react, the name of the project which would be block view and run through all the um installation processes uh download the node module packages and more there we go says, happy hacking and we have our little file here.

A

That stores our react project. So you can just navigate that file by typing in cd block view.

A

Then again just run yarn dev to make sure everything's working.

A

Great, so we have our application, nice and running so now that you've uncreated your app and you have run yarn dev. You should see this um example application up here which lets you know that you've installed everything correctly and you're doing everything right, um but now it's time to kind of clear out all of the example application text out of our project. So we can have a clean slate and start everything from scratch.

A

So we're going to go to source and then app.js and go up to this first curly brace and just delete everything below it.

A

Replace that ending curly, brace that you deleted and type in return.

A

Parentheses p tag hello, world hit, save and the development server should rebuild automatically and there you go. You should see hello world right here so now it's time to get rid of the uh styling for that page, so go to global.css in the same source. File hit command a or control a for. Your windows hit delete, put a star here and next to that star type in the curly brace type in margin, zero, oops and padding zero and be sure to put a semicolon. At the end of these lines, go back to the browser.

A

You should see a white background and the hello world, nice and tugged in the upper left-hand corner, so that got rid of our app that got rid of our page content and our styling. It's now time to clear out our contract. So we can have a blank slate to write.

A

Our own contract calls and communicate with the near blockchain, so go to the contract, folder and then go to assembly inside assembly go to index.ts and then delete everything underneath this import statement and then just leave all these comments up here, because I really need those hit. Save and go back to utils.js and hit and select, set greeting and get rid of it and get rid of the get greeting as well. uh These again, these items were, in the view, methods and change methods. Arrays, so just get rid of these two um contract call names.

A

I'm gonna explain more about what that actually means later and we're also going to get rid of this uh request via contents of this request. Sign in method here so reason why we're getting rid of like the contents within these, these parentheses is to tell our application that we want this third application to request full access to our near wallet.

A

If you have this name here, it's going to set the configuration for your login and for your application only to your request for a function call level access, meaning that you won't be able to send near tokens to other users or to another account. So again we are doing this, so we are able to send new tokens to another user and have access to our new tokens. This is like it's not something you want to do for all your applications, but for now it's okay and that takes care of the cleanup.

A

So now we've cleared out our create new app starting template. I think it's a good idea to hover to react. Bootstrap's main website install and download uh react bootstrap um into our project. We're gonna do this, so we don't have to worry about any of the styling components. We can keep our bulk of our focus on the near blockchain tools that we have at hand um so head back to vs code and hit ctrl c and go back over to react. Bootstrap and click on the get start button and copy this first line here.

A

So we hit control c to stop the development server and once you've stopped the development server, hit, control command, v or control v, depending on which os you're running on hit enter to install react bootstrap into your node modules folder.

A

uh While that's downloading head over to your source file and create a new folder called scss inside that folder create a file called app styles.scss.

A

So we're not going to be using too much of sas custom stylings in our project. So if you don't know sas, that's perfectly okay, um mostly we're gonna do with. It is just import our uh bootstrap stylings but past that you don't have to we're. Not gonna, use it too too much in this project. So with that said, head over to the sas section of the intro page and then hit copy to copy this import statement here and paste it into your app styles.scss file.

A

You just created hit, save, go back to app.js and we're going to import that file. We just created so import dot, slash, scss, slash app styles.scss and to make sure that this works we're going to go over to our um react. Bootstrap page click on components go down to navbar, so we're going to both test this out and also kind of make progress towards our first step of creating our application.

A

So look for this example here, I'm at the very bottom, with these, with this cool, dark styling and these cool buttons and just kind of copy everything you see here and go back into our app.js file and paste this in.

A

To get this to work, we need to import a few items from here from the react: bootstrap node modules package, so import, curly, brace, nav bar. Oh there you go nav bar.

A

Nav drop down and nav.

A

From react in quotation marks, react bootstrap, hit, save and restart the development server to see. If this all works.

A

Out, okay, so everything looks like it's working properly. We have our navbar example running perfectly and yeah. It all looks good great job, guys.

A

So now we have our styling working. We have our nav bar imported, or at least nav bar example imported. So I think it'd be good time to kind of rework. This nav bar example into something that works better with our application.

A

So let's go over to react bootstrap or this line that says, react bootstrap here and delete the name, react bootstrap and replace it with block view.

A

We're also going to get rid of a few lines here, so we don't need any of these drop down items or this drop down section in general, so let's just get rid of it all so now drop down get rid of these two nav links here, um get rid of this line that says more deets.

A

And just replace this line here with uh the text login for now so login save and we get rid of this href statement as well, because they want to be redirected anywhere um when we actually deploy this application.

A

And we're also going to get rid of href home and this event key, because we don't really need it.

A

So hit save, go back to your browser and then you should see where it just says, login and block view. So now. I think it would be a good time to actually add some functionality to this login button, because right now it doesn't really do anything. So I'm going to bring you guys attention to one quick thing: if I type in window dot account id you'll see I get this empty string here. um That means like I'm, not korean logged in with my wallet account, and why am I bring this to your attention?

A

Well, this is going to come. This will make sense in about two seconds two hours later, but if I go over to utils.js and look at where window.account id is actually defined, which is in again utils.js you're gonna see it's defined um to this thing where it says windows.walletconnection.getaccountid.

A

So when you're logged in with your wallet account uh you're, that's actually going to return a string of the name of the account that you're logged in with so. If I go to weld.testcent.net.org and I'm logged in, I should return a string that says bloghead.testnet.

A

So, let's see if we can get that to work, so I'm going to go over to app.js go over to this nav link here and type in on click.

A

I'm going to use a ternary conditional operator to um kind of define which function we want to actually run these between the choices of login and logout.

A

So I'm going to say if window.account id is equal to an empty string again we saw that empty string a little bit earlier, telling us that we're not logged in not currently logged into our application.

A

So again, if we get this empty string, we're going to run the login function, so we can log in to our application, otherwise log out very straightforward.

A

So here we're going to replace this login string with some jsx and say window dot account id is equal to an empty string. So same thing, we're just going to return what actually displays here when we're logged in or logged out. um So again, once we get the empty string, if we're, if we're not currently logged in, we want to prompt the user with the option to log in so we're, gonna, say log in so this is what's gonna display when we're not logged in. If we get this empty string back.

A

Otherwise, if we are logged in, we want to actually display the name of our account, so we're going to type in window.

A

Dot account id, so that's just going to return the string. The string of the wallet account that we're currently logged in with so I'm going to hit save on that go back to our application.

A

Click on login again, and it's going to redirect us to wallet.testnet.net.org requesting full access. Now. Remember it's crossing full access because we went because inside our utils.js file earlier we replaced what was previously inside of these parentheses with now an empty string so be sure to do that, to um grant or to configure your application to request full access to your wallet account, so you can send and receive, or you can send off near tokens so hit allow and type in the name of your account.

A

Say confirm and there we go, we can actually see that string being returned into our nav into our navbar, so you can see the name of our account showing us that we are currently logged in with this account and again, if you type a window dot account id, you can already see that we are returning just a string of that count and there we go. We have a functioning login button.

A

So now we have the nav bar out of the way. I just would say the bulk of our application depends on whether or not the user is currently logged in. uh If they're logged in, we can actually display the contents of our application, which would be the account state, their metadata and their keys. um If they're logged out, I want to create a message for the user, prompting them to log in so I'm going to first wrap our entire application in a react fragment.

A

Take this ending tag and move it down here. This is so we don't have to necessarily wrap it in a div, so hit save below the nav bar. I'm going to create another conditional statement depending on. If that's going to like check. If we are currently logged in or not so we're going to say, window dot account id is equal to an empty string.

A

I'm sorry, it's not equal to an every string assuming like if we are currently logged in right, if we're not equal to an empty string, they're going to display the contents of replication, so we're going to call for container and a container comes from the reactor bootstrap package that we installed. So you have to import a container from react bootstrap, as well as a row and a column the other way. First, then, the first row inside of our container will be the place where we store our metadata.

A

And you're going to see me write this um write this next thing uh quite frequently for every row we have so I'm going to call in class name and import the deflex class, as well as the justify justify content center class. So again, class name is just how you import classes. Just like you would for any css file. You can actually use class name to import files from I'm sorry, import classes from css files. uh In this case these are configured and written by react bootstrap.

A

So this is like cediaflex is like display flex, where you're setting the display to a flex box and justify content center will center the contents of this row to the center of that row. So this is something I'll be going to be typing very frequently, so just kind of get used to that for now so moving forward. So we have our first row out of the way our next row.

A

We will have a column.

A

uh You actually don't need this yeah, okay, so for our next row, we're going to this will be the place. We're gonna, actually house our place, we're going to send the tokens out or a feature that sends tokens out. So I'm going to type in send token.

A

Out as a placeholder so metadata and send token that will be our placeholders and then we can move on to the next row where we will have our active keys, so row active keys.

A

We have send token out active keys and the metadata placeholders. This would be our primary contents for our application. So we're going to write our alternative display option if the user is not I'm currently logged in. So what I'm going to do is type in a colon here.

A

So that's going to signify the quote else: statement for a conditional statement that we wrote here and as the alternative to not being logged in I'm actually going to move this one down one line lower as we turn it for not being logged in we're gonna prompt, the user with a message to ask them politely to log in so we're going to call for a card from react. Bootstrap again, so we're gonna import a card from react. Bootstrap.

A

And inside this car we're going to have a card header.

A

And I'm going to say hello, user and we're going to add some text styling to this by saying a s is equal to h5, so that again comes from react, bootstrap and then we're going to create a card body to define the throughout the body of this card and again we're going to create another card title our dot title, we're going to say. Please.

A

A

A

Text this application.

A

Oops can't spell there you go application will not work.

A

Otherwise, then maybe something sassy like sorry, not sorry a little smiley face um and then we're going to create a button below this text that will prompt that, like the user, can click on to log in just to give them another option just in case they immediately see the login button in the upper right hand corner so button on click is equal to login.

A

So again, this is how you, uh you know, get the user to navigate, to get redirected to the wallet to log into your account. um That's pre-made for us with the inside of the utils.js, when we run create new app, so the button will have the contents login log in now just make it very bold and very clear, and I think that's it. So if I hit save, we should rebuild the file and we're going to go back to our application, and you see our placeholders when I'm logged in so that's good.

A

So you can see metadata, send tokens out and active keys. These other items aren't centered because we don't have this class name on the other rows. So, let's just copy and paste this class name here in the first row, where it says, send tokens out and here where it says, active, keys, so save, and then those should center immediately. So that's pretty good. If we hit the log out button, uh it says buttons not defined so we're going to go back up here because I did forget the import button.

A

So button save go back, so we can see this card appear here, prompting the user to log. In so saying, hello, user, please log in this application should not work. Otherwise, sorry, not sorry click the login now button which get redirected to the near wallet asking for full access to the third party application and our wallet or from the third party application to our wallets. We can send new tokens hit, allow type in blockheads.testnet and oops.

A

And there we go we're back to our placeholders, so yeah there we go. We have our login logout restriction, feature set up.

A

So the first component I want to create will be the metadata component, so our to replace our little filler text that we have here before we do that. I want to show you guys the type of information we're going to populate the metadata component with uh and to accomplish that I'm actually going to show off a feature of the new cli tool that we downloaded earlier.

A

So if we go to your terminal and type, you know control c to stop your development server from running um type in near and like a whole, slew of options will appear for you to use with the near cli tools. Remember the near cli tool is just a wrapper for the near api js, meaning that, like anything, you can do with nearby gs. You can do with the ci tool straight from your terminal.

A

uh So if you type in near state and single quotation marks your account name, so my account name is.

A

Blockheads.Test.Net, you will see the state of that account, so that will display the amount of new tokens you have displayed in yakuto near which is about 10 to the negative 24th, your locked tokens, your code hash and this code hashes all ones, meaning that currently, for this account named blockheads.testnet, it has no contract deployed onto it, and what that means is that, like the con? So whenever you create a application or you ever um deploy a contract, that contract has to live somewhere on the blockchain.

A

So traditionally, what happens is that a dev account is created, meaning, like a temporary account, not a temporary account but kind of like a a holder, a placeholder account is created to act as the quo unquote home for that contract. So when this is all ones, it signifies that there's no contract deployed to this account, so this account has no contract on it. uh Every time you deploy a new, create new app to you know, start your development server or to make it live.

A

uh Create new app will automatically create a new dev account for you. So you can even see that by going to near dev and sit and clicking on dev account- and that is my dev account that actually holds this- um that actually holds this contract.

A

I can even copy this dev account and type in near state. Single quotes, paste, close quote and then get the state of this dev account. So this is an actual account. It's no different than this one up here. Otherwise we create it on wallet.testnet, uh it's just a an account. That's automatically generated when you run, create your app and yarn dev. So here's the code hash for this particular contract that exists on this account moving forward. We can see the storage usage from this account.

A

The storage paid ad, the block height for this, um of which this account lives or like of which uh we are acting, we're currently acting upon, and then the block hash and the formatted amount of this yakuto near um this amount. That's being displayed right here, so this is just what you would normally see on say uh near that near dot wall at the test net, uh the uh like 500 near tokens that you you automatically see there, um so that is essentially the information we're going to display in our metadata so moving forward.

A

What I want to do is create a new folder in source, new folder called components inside this components. Folder I'm going to create a new file called metadata with the capital m dot js.

A

So I'm going to create another. I'm going to make another little tangent here. uh What I recommend you guys to download you don't have to. This is just a preference thing, but I love using this react.js code snippets by charlompos.

A

It saves you some time by it's like essentially a library of shortcuts that you just type in hit tab and then like a starting template for whatever you want to. Whatever you want to create will appear to show you an example: I'm just going to go back over to um the metadata.js file. We just created and type in rcsp hit tab and there we go. We have our starting template for this metadata function based functional component.

A

um So just so, if you don't have it yet just like copy this down, it's fine just pause the video and then we can move forward from there.

A

I'm just going to show you guys that, because I think it's kind of cool, so I'm going to get rid of this metadata prop types, because I don't really need it and then get rid of line 2 here, because again I don't really need the prop types I'm going to then import use, uh use date and use effect from react, um and then I'm going to see also import a table from react bootstrap, so this table will be used to actually hold and house the metadata.

A

So the first thing I want to create is a place to store the data, so I'll create a state variable right around here. Okay- and let's call the initial variable um constant, it's called initial variable, just metadata.

A

And then, let's call the change, variable or change method change, meta data.

A

Now, let's set the initial value of the state variable with use state to an empty object, so we use an object to store and and execute our data essentially so now, after this, what I want to do is call the use effect, method or react hook.

A

To create an asynchronous function that will go and retrieve our data, so we're going to initially call a callback function to initiate this. uh This new function, we're creating uh so I'm going to say callback function will then create this asynchronous function, which we're calling get data.

A

And inside get data we're going to define a variable called data which will wait or await for the data to be retrieved from the blockchain.

A

And see we can immediately see this data take place um into our uh into our terminal once retrieved, just to make sure we are getting the correct thing.

A

Then, after we have our data, we're going to use the change method that we created called change metadata to replace that empty object. With the newly retrieved data.

A

And this will all happen on. The very first instance of uh you know upon the click on it, loading onto the screen. um So now we have our function created. uh This function will not execute unless we actually call the function. So within this use effect, react hook, we're going to call getdata and that's it before we can do anything. We actually have to define window.account, because for now, as it currently stands, that just doesn't exist.

A

So, let's go over to utils.js and just below window.account id I'm going to type in window.count and define it to be new account and set.

A

The first argument to the near connection near.connection uh near is defined up here to the connection um method from the near api js, and I'm directing that connection uh to I'm referencing that connection to uh the current account that is signed into the application which is defined by window.account id, so we're going to just type in uh account id so now we're able to pull the state from this account, object or account class and then get the actual metadata that we need.

A

So now it's time to test this out before we do, uh I forgot to add the account I've about to actually pull the account object from the near api.js. So it says um add account to this first to this first import statement. We have here just to make sure this works. So now we're going to save this go over to app.js and import that metadata. We just created import um metadata from components, so dot, slash, components, slash metadata and then we're gonna go down to.

A

We have our placeholder here and call metadata and it'll be and be sure to end it with a self-closing tag so now down here in your terminal, if you haven't done so already just run yarndev and wait till the development server starts.

A

Oh and be sure to save this as well, so then the media line should disappear, which is a good thing, because we don't have any jsx returning just yet. If you open up the inspection tool, you should see an object appear inside. This object will be the account state data that we are looking for. Now we actually have the data, let's actually display to the page. So let's utilize the table component, we received from react bootstrap on line two and utilize that to initiate our table, it's a table there.

A

We go it kind of follow along with me with the uh properties I'm gonna design. The table with these are just properties you can find on react food traps website. um So these are just design elements, so striped bordered hover variant.

A

Is equal to dark and there we go um now: let's actually populate the table with the data we have from our data uh hook or data component or variable, so we're gonna start with the head of the table to actually define our columns, so we're gonna, say t head.

A

And define a row so tr like table row with th the first column being called data title and then the next column being the table or the data values. We're just going to call that value.

A

Then, after t head we're actually going to start working on the body of the table where we actually house our data, so we're going to say t body and then we're going to define the first row tr with the amount of new tokens we have so td amount.

A

Then next would be td. That's going to be the name of the values, that's the data title and then the actual value itself will be metadata, dot amount.

A

So, let's just again say what's happening here, so we have metadata being defined as data, which is the result of the window.account state that we called earlier, so we're just calling the amount property from the state, um and then that is essentially it so now this is going to get a bit repetitive, so just kind of bear with me for a minute, but I'm going to take this line and just duplicate it.

A

Actually bring that down there we go and then over here we're going to say we're going to call this next row, the locked token so locked, then we're going to switch it mount to lock then take that I'm not doing all this okay. Here we go.

A

Take this line and just duplicate it again.

A

And I think it should be fine, okay, so the next locked row we're gonna call code, hash.

A

Then we're going to pull the code hash from the metadata, so code underscore hash.

A

Then this next line will be the storage usage.

A

Then we're going to say metadata.storage.

A

Underscore usage.

A

Then this next line will be.

A

A

At and then the property will be pulling, of course, will be called storage underscore paid underscore at.

A

And duplicate this line again and we're gonna do that one more time.

A

So we're gonna call this next title: uh block height.

A

And then this last title will be called block hash.

A

And, of course, the properties will be named as such so block underscore height and block.

A

Block underscore hash, so let's save this see if you get any errors, it looks like we have one error. I think I yeah I just misspelled added some weird character to the table, so save that again. Okay, so now we're it's not successfully built. So let's go back over to our application and there we go. uh It seems they're missing the locked funk at the locked amount. Let's just see, I might have mistyped something uh this has to be lowercase there.

A

We go okay, so now we actually have our metadata component displaying the data for the account that we're logged in with so I'm going to do my best to keep the um custom css to a minimum. But I want to kind of separate this data table from the top nav bar. So we're going to do is just going to go to this div and say: style is equal to double curly, braces and margin top 10 percent.

A

Let's just see how that looks, and 10 has to be a string. So let's uh rewrite that to be 10 percent save and there we go it's a good enough gap for now. I might actually make that five, but let's see what five looks like.

A

There we go, I think, that's a good enough gap anyway. I just wanted to throw that in there.

A

So now we've created our metadata component.

A

Time for us to build our send token feature, this will allow us to send tokens to another user and we even incorporate creating a smart contract. That'll help us keep track of the total tokens we've sent up to a particular user, so hopefully this will um be good in showing you guys the workflow that's commonly associated with creating a smart contract using assembly script. So with that, let's jump in and get started.

A

So, let's go over to app.js. Actually, let's go over to source file and create a new file in the components.

A

Folder called send tokens.js inside this file, we're going to call rcsp using uh react snippets to create this kind of starting template for a functional based component and we're going to start by creating some state variables to keep track of our recipients and our values sent as well as our current balance for um for our tokens, so const recipients and I'll show you guys why we're making a recipients array in a minute essentially just like be related to the smart contracts, so recipients set recipients.

A

um As our state variable sequel to use state, so let's call this from react because I feel like I've done that yet so, let's call both use state and uh use effect. Here we go.

A

Our initial value for recipients will just be an empty array.

A

Our next state variable will be another array called values, values sent. Then the change method will be called set values, and we say the initial value, for this will be another empty array.

A

Our next line will be const balance, change, change, balance and initial value, for this would just be zero.

A

So now we're gonna we're gonna return from our contract. Call we're gonna actually store in the blockchain as well. Through all these interactions will be an array of strings for our recipients and an array of values corresponding to the indexes of each recipient, and then, of course, we just have the balance that you're pulling from the blockchain per hour count. So, let's head on over to the contract code, to actually define the contract that these variables will be based off of that will essentially run our ability to keep track of the totals.

A

We've sent to particular individuals from this account that the user signed in with so let's go over to contract assembly and then index.ts.

A

Where, under the import statement, we're going to define two variables, so the first variable will be const recipient list is equal to new and again remember all this is written in typescript or assembly script, which is a dialect of typescript. um So so things might be a little bit different, but they aren't too far off from javascript.

A

uh Just keep that in mind that we're not in javascript right now, we're in typescript um or assembly script, either one so uh we're also going to for continuous statement. We're also going to import a persistent map from the near sdk and implement that here.

A

So for this first persistent map, we're gonna, say each key for this map will be a string and it will give access to an array of strings.

A

Then we'll give it some unique identifier. I will call this rl for recipient list and then the next variable will be const total sent, which is equal to new persistent map. The keys will be defined as strings, and then the value will hold will be an array of cl of type i32 numbers.

A

So, oh and then the unique identifier will be ts. So I know this is a little bit confusing. So let's go over um what these persistent maps even are and what the heck I just wrote. So a persistent map is data structure that is included in the near sdk.

A

It can be essentially thought of as a dictionary like you would find in python or even an object. You find javascript in which each different key gives you access to some sort of data type. So this first, uh this first parameter. We have here this first string. We have here in both lines, is the data type for the key, so I'm defining this the string, I'm defining each key as a string and then what this key this string gives you access to will be an array of strings.

A

That's why I have string with this little um bracket here. That's a typescript or assembly script, identifier for an array, so I'm specifying the data types that will exist in this array. In this case it's an array of strings. In this case it's an array of type 32 um numbers, and then this last argument we have here is simply just a unique identifier for each of these persistent maps to avoid data collisions within this contract. So these are just simply. These have to be unique for each different, persistent map you create for this contract.

A

Just so, you can avoid data, collisions um and keep things nice and straight moving on I'm going to define our very first function, which I'm going to call add funds, so export function, add fund. So this export statement here allows me to actually access this as a public function. So that way I can export it to the utils.js file, which will define it as either a change method or a view method to then be used in a practical application. So the first argument for add funds would be recipient.

A

Recipient, which will be a string.

A

And then amount which will be defined as an I-32 number, and then this function will turn nothing so we're going to turn void to denote that return, nothing. So it's it's known by this colon, followed by the word, void to return nothing.

A

So if the we're going to check for is if the recipient list.

A

uh Contains dot contains, so all these uh methods, I'm pulling out um like recipient list doc, contains, can be found on the near documentation for persistent map, so I'll be sure to include that in the uh in the description for you, so if it contains context dot sender, so that means the current signer of this account um keep in mind. This context.sender only works for change methods. It does not work for review methods, but what essentially, this return is the name of the user. That's that's initiating this transaction.

A

That's sending off this transaction with the blockchain. In other words, this will just return a string that says blockheads.testnet, so you can just imagine this just being blockheads a testnet or your account name, whoever is signed in to your account or to this um to this application. um So if this contains the name of the person that's signing this transaction, then let's create a variable, get list which equal to recipient list dot.

A

So I'm using the co I'm using the name of the person who's, sending this account as the key. So since this will turn a string that string being the name of the account, um I am retrieving the uh list of names and then also the list of values of the people. I've sent um money to, in other words, so recipient list.getsum for blockheads or turn a list of names will all be strings of.

A

Every single person ever sent money to and then the same thing for this value, a string or the key being my account name or return the value types that correspond with each name or each person I set this money to so. Let's also retrieve the totals so get totals is equal to sorry, total totalcent.getsum, context.cinder.

A

So what am I doing here? I'm like this. If this conditional statement is just making sure that, like I've previously previously sent someone some money in the past, it's making sure that this value even exists. If it doesn't exist within this map, then we'll have to create an else statement that will create a new list for this new user. But if it does exist within this map, then they must have some existing or some previous transaction that exists that we're going to pull that data from so it'll make more sense when completed with this.

A

So if get list dot can uh include. Sorry concludes recipient.

A

Then we'll do some action, we're going to say: let get index is equal to get list index of recipient.

A

And let old total is equal to get totals uh dot if so get totals bracket get index.

A

So I'm going to pause here for a minute and just explain what's happening again so get index is equal to get list dot index of recipient list. I'm essentially kind of doing the same thing that I was doing up here with this first conditional statement.

A

I am making sure that this recipient exists within this list of names of people I have previously previously sent money to. Hopefully that makes sense, essentially I'm just checking that um out of the people that, like dorian, has sent money to. uh I have like, let's just say this person's bob like bob is. I have previously sent bob some sort of money and bob is in my list and I'm using includes because get list is an array, it's just an array of strings.

A

So I'm using the index of this list of this name list to retrieve the value I previously sent this person so that so the value should the values index should correspond with the um name with the with the name of the person who have received that value. In these two lists, so new total.

A

To go to old, total.

A

uh Plus amount.

A

So I'm retrieving the total money. I've said that before let's say that money was like ten dollars and I am adding the amount of tokens um that I am currently sending them to the old totals. I can keep track of that total of the total overall value. I've said to this person so get totals this uh index of that would be get index is equal to new total.

A

So now, I'm just updating that that list of values to update the total money sent to that user so totals uh yeah total cent dot set.

A

Again, that's just my name, my account name, this dot set is setting a new value or an exit or updating an existing value. In this persistent map get tuttles.

A

um So now I am essentially just replacing this the the old array of numbers that existed here with this new updated array of numbers. So that's what the get totals is. This is an array of numbers.

A

Moving on so, if, uh if this list does not include that recipient's name, then we're going to say get list.

A

Which again is just an array of names, array of strings getlist.push we're adding a new recipient to that list.

A

Recipient list.

A

Dot set context, dot, sender get list. So what am I doing? I'm just simply updating the current, the existing list of recipients with this new list of recipients for the recipient list, persistent map get totals doing the same thing forget total, so that push amount so setting a new amount.

A

I'm sorry or setting a new um item to the get totals list course with the indexes for both the name and the I get tells this being the same with this new amount that we're initially sending them so now total sent dot set context.sender get totals so now we only have one more conditional statement to worry about else there we go it's accounting for the case that the user has never made a transaction before so meaning that the person who's currently signed in has never uh has never even made a single transaction with anyone else before.

A

So, let's cover that um scenario by saying, if the user does not exist within this list, let's let recipient this new user. This context.sender.

A

um With his very first transaction, so we're just going to just directly put an array of strings so I'll, be recipient.

A

And we're going to do this, the same thing for his very first value, so I'm going to say totalcent.set context.sender, dot amount.

A

So there we go. This is our very first contract call our very first contract function, so we're going to take the name. Add funds so go ahead and copy. This name. Remember we're adding things to the blockchain, we're adding new values, new names, new um everything to the blockchain. So when we go over to utils.js, we want to um we're effectively changing the state of the blockchain.

A

So we're going to add this as a change method, so add funds.

A

If we were just reading some sort of value from this, we would simply put as a view method, but we were adding it as a change method. Something we want to reiterate is that context.sender only works with change methods. It does not work for view methods so do not design your contract calls using context.sender. If you plan to only read some data from that, but that's something I just learned. So let's essentially save this, so we say we're saving our index.ts.

A

You can test if this works by going back to our application and opening up the terminal and typing in window: dot, contract, dot, add funds, and, let's just say you know what and one more thing before I even like execute this function. Let's just add a logging log saying uh here saying: uh logging log, saying user user exists within list, updating values or updating lists, and then we'll say for this else statement. Let's just say logginglog, which is uh essentially the equivalent of um console.log, so logginglog.

A

User does not exist within storage, adding new user so save that head back over here. It's adding funds, um our first, our first parameter is recipient and our second parameter is amount. So whenever you call, whenever you create a contract, call you want to um your arguments or your parameters will always be an object. The properties of that object instance will be um the names of the parameters you define in your contract.

A

So recipient, say, recipient was just test one and the amount will be. I don't know. 10 just say 10 for now and a con every contract call you create is asynchronous.

A

You have to type a weight um in front of it, so you can actually read the readout inside of your uh terminal, but only put away when you're inside the terminal I mean you will have to do inside javascript as well, but for now, when you're testing, the terminal just remember, to put a weight in front of your contract call so, let's hit enter and see if this actually works.

A

So contract method is not found. Maybe this didn't load properly. Let's make sure we have everything correct, so save control c we are in dev. Let's try this.

A

Again, so user does not exist within storage, adding a new user so that effectively does. Let us know that um it actually went through our function and added this new user. Keep pushing and we're gonna find a way to display this data onto our new component.

A

So now, let's actually construct a way to receive these list of names and set the values from the two persistent maps that we created so we're going to create a new function inside the index.ts file for a contract which we're going to write as export function, get names in which the uh the parameter will be um called user.

A

There we go, it should be a string and this get names function will return a string or an array of strings.

A

So if recipient list contains the user that's signed in so.

A

User then we'll return the recipient list of that user.

A

Let's see, and otherwise if this person does not exist or if this user has never sent a single transaction before we're just going to return an empty array. So let's take this and actually copy it over.

A

And create this same function, but for the values instead so values, so the parameter remain the same and instead of a string return, an array of I of type I 32 numbers.

A

So, instead recipient list, we will replace this with uh total scent.

A

So save this uh go over to.

A

A

And inside view, methods we're going to write in get names oops as a string get names.

A

And what was the other one? It was the other, it was a get values, so get values. So, let's hit save. Let's make sure we save the index.ts and let us stop the development server and rebuild it.

A

We're going to call um get names to get the names of the users that we've previously set money right now. What exists in there is, I believe, test one from that. First transaction we created so window.contract dot, get names again remember to put a wait before you type anything else.

A

So user right so we're making an object. Instance with the parameter user which we'll call uh window.account id say, so you can type that folding out so window dot account id.

A

See this actually works, so I'm going to hit enter and there we go. Remember that window.account id, if you're wondering, is simply the string blockheads.test.net. So if I were to type in blockheads.test.net um in place of window.account id here, then we'd still get this array of names or yeah, which in this case is just test one. Otherwise you can even type in get values.

A

I believe I sent them 10 near or you have 10 coco near and there we go. We have the value of 10 as our array or in our array of values. So now we've defined to test our lovely contract functions. I think it's time to actually implement them into our send money uh feature. So, let's start off by building up the body.

A

Of that component, so we're going to start with is uh housing this entire thing housing the entire output into a container, it's a container. Of course. We need to call that container. It's going to say, import container.

A

With every container comes a row and a column from react, bootstrap.

A

Bootstrap so in this first row we're going to create a card or utilize, the cards um component from react. Boot straps are also going to call card.

A

Inside this card, we're gonna have our card header.

A

And set the card header, we're gonna, say near token balance. So this would be a feature that the user will use to immediately see their balance displayed on screen. So they want to go back up to the metadata component and kind of fish through all those rows. Even though it's you know, I think it's the first one, but still it's just you know anything to make it easier for the user.

A

We're also going to add we're also going to pull another component from react. Bootstrap called list group and below card header we're going to.

A

Essentially, call list.

A

Group inside of list group we're going to call a list group item and let's make the variant for list group flush again. That's just a reactive, bootstrap uh design element so flush. There we go.

A

So here we're going to call um we're just gonna, essentially just leave this as a placeholder called near tokens.

A

And come back to that and actually set up a way to format and properly display the new tokens we have available to the user to send off. But for now that's a placeholder we're going to leave right there so below card we're going to there. We go clear row and start a new row.

A

Where actually should've done this for the first row too, we're going to establish a class name for for this row and just get this out of the way so b d flex and then justify content center again. This is just done to justify the content um or to center the content within each row to make it nice and neat so copy and paste that into the first row as well.

A

Last name is equal to that great.

A

So inside this next row we're going to create another card so card inside this card. We're gonna have another card: header card.header, where we'll title this new card um as send money to friend.

A

So this is we're actually going to place and organize the tool that will be used to send money to the user's friend so card body.

A

We'll actually house the features and the input fields for that tool inside car body, we're going to create a new container that'll help us organize our to our input fields and our submit button and our contract call area. So, um let's add a column, I'm sorry a row inside this row. We're gonna have two columns so in the first column, so one column, two columns.

A

So inside this first column we're going to have two input fields, input.

A

uh I believe these are self-closing tags, so, let's actually just self-close it and duplicate that so we'll have the type as text and oops it's equal to text.

A

Then the placeholder will be enter recipient here.

A

So this first input field will be where we will um enter the name of the person. That's receiving money from our account.

A

The type is equal to text. uh Placeholder will be enter value here. This will be where we also where we will input the value of how much money we're actually sending to that user. So, in the second column, we're simply just going to have a button from react. Bootstrap.

A

Now we don't want to worry about the stylings of our own button. uh There we go um and actually at the call button from react. Bootstrap, let's get out of the way it's a button. There we go and this would be our submit button, so we're just going to type in the word submit.

A

And after we have our submit button written out we're going to conclude that row and create one more row so again: class name, it's equal to d flex, d-flex.

A

Justify content center.

A

A

Inside this row, we're actually going to house our table, that's going to display all of our previous transactions to the users and the total amount of tokens we've ever sent to that user.

A

So this would be the results of our contract. Call it's a table. That's a styling to this style that will print this. A double curly braces margin top and let's do 10px for now 10px same thing as before, so striped bordered hover variant is equal to dark.

A

And conclude that so inside our table, we're going to have a t head and a t, row and t h, column span will be two.

A

It will call uh this table um transactions through that, so we're gonna actually name the table so transaction history that will conclude t-head onto the body of the table, so t body we're going to have.

A

A this will actually be the place where we're actually going to output and display our recipients and our values, so we're actually going to come back to that a little bit later. But for now let's just put um just put little placeholders, perhaps so, let's say t r, tr and then td, we say recipient one and then the next data field will be tdd.

A

Let's do 100 near as or 1000 year, just as a placeholder, where we actually come back to this and we can actually properly retrieve the data from our um our contract. So let's save this and let's go back to app.js and let's import.

A

A

Send tokens from component slash, send tokens and we're going to find our placeholder send tokens out and just replace it with that newly imported component send tokens. You can make this a self-closing tag there we go. So, let's save that go back over to our browser, see if we have any errors, so table is not defined. Yes, I did for it to actually define tables. So let's go back into here and define.

A

Tables or they say tables table there, you go.

A

And there we are so we actually have a card, that's going to hold our near balance, hold and display our near balance, and we actually have our tool here. That's going to be the place where we type in the recipient's name like just like this, and also the value of tokens. They want to send them, and this should actually appear here um again. This would be the tomah value or the total amount of tokens we've ever sent them, so this value would just get bigger and bigger. Every time we enter in a new value.

A

So now we have the design of our send token feature laid out as well as the table that will house our transaction history. Let's actually add some functionality to this, because right now it's doing a whole lot of nothing. So, let's head back over to our sendtoken.js file and have above the return stand below the state variables we created and below the first state variable we're going to define a function called send gift which would be an asynchronous function.

A

So we're going to type the word async here and define this as an arrow function inside this arrow function, we're going to start with three more variables called which we'll call getstate, which will simply uh retrieve the state of the account that's currently logged in, so that will be used to actually display our balance.

A

There we go next will be get amount, so is equal to await window dot, utils, dot, dot format.

A

Dot format uh near amount and get state dot amount, and uh let's see there, we go uh no no period right here. Okay, so get state dot amount and this m should be lowercase. So before I move forward, I want to make sure um that you guys in your utils file in your yeah in your utils.js file, um you've defined windows.utils as utils and you're, successfully importing utils from near apijs.

A

The reason why we were pulling um this utils again being defined here into windows.utils is because we need that formatting tool so that formatting tool that comes with utils.js, we'll take in yogyunir and format it out as a normal near mount. That, like is easy for us to read uh so essentially, instead of like you know, I can't even say it like essentially I'll, take a very big number and reduce it to the amount. That is that you would normally commonly see onto the uh onto um inside of your near wallet.

A

So uh essentially, instead of um this mount here, this crazy large. You know I can't even like say that phone number, um what that, what that new year's with that, like window.utils.format.format near amount will output, will be 161.303, which is a lot easier to read than whatever this is so moving forward. Let's lower case this m2.

A

So moving forward, I'm going to enter in a new third variable called entered.

A

Value so entered value will actually uh call upon one of our uh one of our references that we have yet to make. So, let's make that right now, so let value input is equal to react. Dot create ref.

A

And let's create another one for the recipients, so recipient sequel to react, dot create ref.

A

So in normal, vanilla javascript, you would normally interact with the dom by calling some sort of id, and then you know interacting with that id by saying, let's just say, I was like, let's say we're, trying to get some value from like a text field to give that text field some sort of id and then call that id and then call the value within the text field of the value that the user typed and then do something with that data. So for react.js.

A

This is the alternative way to do that and for react hooks where you have to use the create ref method or create wrapped hook. That comes with react. Essentially we're going to do is just retrieve that input and that data that the user enters into that text field.

A

So say, value input is equal to I'm sorry, valueinput.current.value, let's add a conditional statement that says, if number get amount, so we're converting the um the result of this statement here to a number, because I believe we're going to get back as a string.

A

So if this number is greater than the number of the entered values or converting the end to the number we enter into the input field um from a string to an integer or a number, then we'll execute the following.

A

So await window dot account dot, send money. So this is the built in send money feature uh that comes from the near api. Js from that account uh object that we established earlier so right here on line 18.

A

so going back to the component, so send money to the recipients or um taking in that value or the name of the person we're sending money to.

A

And we'll send them this many new tokens, we're going to say window.util.

A

Dot format, dot parse near amount entered value.

A

Your amount, so uh this utils that format that parse near mount will take the entered near value and convert it into yakuto near.

A

So now, let's see so moving on we're going to add some then statements to this so once that actually um sends out we're going to say we're going to execute this next line. um That says, await window.contract dot, funds, sort of columns, contract, dot, add funds.

A

A

And let's just make sure we have that correct, so add funds, recipient and amount, so recipient will be the recipient current value and then the amount will be number entered value.

A

So remember. We have to include this in an object instance, and we are converting this entered value into a number so that our function can actually read it and record it into the uh into the blockchain's storage or persistent map that we created so once that actually gets sent off we're going to wait until that's done. If that properly executes we're going to um change the variables or update the values, so they can update, live on screen, I'm going to say set recipients.

A

Set recipients to await window contract dot, get names.

A

Then, after that, I'm going to set the values subset values to await window.contract, get totals.

A

And inside get names and get tunnels, we actually have to define the user right so make another object. Instance with the parameter user: uh let's make sure it's not make sure you're getting that correct, yeah, so user.

A

And the user's default value would be window, dot, account id and we can copy this entire thing and paste it into here.

A

So that's going to update these two variables with the with the newly added um name and value of the of the person we just sent money to, so we're not done yet we stop to um like. We start to create an instance or create a scenario in which uh this, like this condition, is not met. In other words, the value is higher than the balance, so we're gonna, say else alert.

A

Not enough funds and near actually has built-in protections um just in case a user does not exist. um It'll not execute the send money feature, so your money won't like it doesn't. You know vanish off into the void. You'll actually receive an error that that lets. You know that this uh near count does not exist, um and on top of that, it won't. Let you send more than you have uh so on and so forth. So near uh actually has these built-in protections for you.

A

So you have to like write all those errors, errors out yourself so moving forward. uh Let's utilize, the use effect react hook to call a callback function and we're going to define another asynchronous function which we're going to call getdata again.

A

So we're going to say, async basic function, get data and get data. We'll do the same thing before.

A

Dot state change, balance to data dot amount, so once the page loads or once this balance feature changes, uh the balance will update on screen um every time we reload the page.

A

Of course, you have to actually call get data there we go now, let's create one more function to uh that's, essentially going to um get rid of like a bunch of decimal places that we don't really need uh whenever we, whenever we use like the utils dot format near mount, we're going to end up with a lot of decimal places about, like you know like, like more than we have more than we want to read on screen.

A

So this custom function, you're going to create is just going to like lob off the the extra decimal places that we don't really want and just have it to maybe like two extra decimal places, uh just to make it easier for the user to read so uh we're just going to create this quick custom function.

A

So const format output is equal to text which is equal to arrow function, so of text, which would be a string text.

A

If text dot includes.

A

A period we'll execute the following: so let ar equals to text dot split by the period and we're gonna, say array: one is equal to array, one dot split.

A

Dot splice, I'm gonna, do some crazy, some crazy javascript magic here. Hopefully it's not too confusing. So essentially I'm I'm looking for decimal and then I'm going to um split this. uh This string up by an empty space or not empty space, but like I'm even like just like no spaces all just like by each adjacent um letter or character.

A

So I would say: splice: zero, zero, comma, two dot join splice will was used to literally cut up and remove parts of an array and then join is used to turret is to take an array of characters and squish them back into one single string, I'm going to say console.log.

A

It's going to actually display this array to see if this actually worked and then return array.join.

A

So otherwise, so else return the text that we that was originally inputted so like. um If this does not include a period, then we're just going to return the text that we originally got and we're going to use curly braces instead of parentheses,.

A

So save that see if we get any errors and let's actually go back to I'm actually doing a lot hoping this all kind of works, uh but like let's go back into our return statement and actually add some add some functionality to um to our placeholders, actually replace our placeholders with functional components. They actually see this out all working.

A

So, let's start off with this button, which is this one's really easy. We just say on click.

A

Oops, I can type on click is equal to send gift.

A

So when we click the submit button, this entire function should run for our input text fields. We actually need to um establish our references. Let's do that right now, so ref is equal to recipient again. That is this. That's referencing this create referee made up here, so we can actually pull the value from this input field and we're going to add another ref to the second input field for value value input so hit save on that um next thing. We're going to do is we're going to actually uh populate our table body.

A

So now this one's going to be a little tricky, that's going to be a little bit weird, but it's not going to be too bad, so we're going to delete our placeholder entirely. You don't need any of this inside our table body we're going to um create some curly braces.

A

This will be a field for us to um input some jsx so recall for recipients, dot map and for every value of recipients, which is an array we're going to cycle through each independent value, which we're going to define each independent value as as x for now and also retrieve the index of that value. So recipients is an array of strings that we receive from our contract so and this will cycle through each ray of strings temporarily, assigning it to the variable x, while keeping track of the index of the person.

A

We are currently referencing, so we're going to return so parentheses a row for each value with a key of x. So we don't get this thing screaming at us.

A

And we're going to say the first data field will be td name of the person name, the recipient and td.

A

Td uh and we're going to input in the value of near tokens that we sent to this person in total, so we're going to say, uh dollar sign parentheses. Oh sorry, dollar sign, curly, braces value, sent.

A

And pull that index that we defined earlier, so this map function takes care of the correct index for us and then close that curly, brace and just type in the word near, so I'm using the little tick mark next to to the left of the one button uh to be able to write um strings like this. If you can, if you need to use quotation, marks, go right ahead. Okay, so moving forward actually found the error uh that was plaguing our map function so take that parentheses.

A

I just deleted and put it above this curly brace and it should be working now. um I also found another error where I have this as capital b, instead of lowercase b for balance, that's not going to call anything and there's one more thing we actually have to create, but to actually establish another use effect um into your application.

A

Reason being is because we actually need to load in the name list and the value list when the component loads, so something can actually populate that transaction table without the need of setting up a value. Oh- and this get total's name is wrong. This should be get values so be sure to change that to get values in the set values. Function of our send gift function so, instead of using the second use effect, we're going to define another asynchronous function which I'm going to call get transactions so async.

A

Function: get transactions, parentheses, curly, brace, um set recipients, we're going to call our change method inside of change method, we're going to say, await window.contract, dot, get names and we're going to actually just kind of copy. This line we have up here because we're doing exactly essentially the same thing so say copy, and it's uh let's find out where the other respect was I copy and paste, and let's do the same thing for the set values.

A

We don't need the dot dense around it, because we're not actually waiting for anything to conclude but um paste it right here so now, we're doing is we're just setting the empty arrays with the popular arrays exist on the blockchain under this account name- and this should happen when the when the page loads or the component loads, so we're going to add a comma and an empty array right here. Of course, we're still not done uh at the end of this get transactions functions.

A

We still need to actually call get transactions, because right now, nothing's happening so recall, get transactions right after this concludes empty parentheses, update uh parentheses and hit save so everything should function. So we go back to our application and look at our transaction history. We actually have x and 10, so x is wrong, uh probably because, yes, probably because I forgot to put this in curly braces. So it's just ring this x as a string.

A

So we're going to um read your add some curly braces in between these two jsx tags to implement some more javascript inside of our jsx, so just type in x inside this map function inside curly braces and should work so hit save go back here. We have test one just to make sure this all works out properly um yeah. We can even try everything out here. I'm going to send my test account, so monkey dot test net and let's just send monkey three near so, let's see if this works and we hit submit.

A

And wow there we go cool, so we have the name of our new recipient and a new total for that recipient. So if I send um monkey dot test net work, you want to three at the set. uh Let's just say five more near, we should see. Eight appear here say: hit, submit, wait a second, and hopefully we see eight appear here and there we go yeah. We even get our cool uh blockchain receipts from the near blockchain, letting us know that this actually works. So I mean there we go.

A

We have our first function, contract call and our transaction history board is working so now we're actually on a pretty good roll. Here, let's go back up to our list group item and delete our placeholder near tokens and add some functionality to this. We can actually see the new tokens we want to display or the balance of the user, so it's called format inside curly braces sorry format, output, which is our name of our custom function that we created earlier.

A

Let's see for my output, which will accept a windows, dot, utils, dot format near amount there, we go inside format near mount. We're going to call a string just to ensure that the value of balance is indeed a string.

A

And enter in balance with a lowercase b and conclude all of our parentheses and and our in our closing jsx tag or closing, curly brace and you hit save and actually before we hit save. Let's just add the word near next to this, we go back to our application. Let's see format windows that you tell is that format near your mouse. It's not a function.

A

Let's see format to your mount. Okay, we've brought, we forgot one format, so it should be windows.utils.format dot format near mount and there we go. We have 153 near and take note of this amount of here so notice that we are just taking we're just uh converting the bring of this from yak do near to near and then taking away any of these, like you know, honestly like unnecessary, like a decimal places, because the user is not going to care about all of these decimal places.

A

It's just going to care about these first three, which is what they which is what's displayed in their wallet plus, maybe two more and there we go.

A

So now we complete our send money, feature let's head back over to app.js and see what else we have left on our list. So next we have our active keys feature our active keys component. So let's go ahead and create a new, a new file in our components, folder for active keys. So it's called active keys.js heading back to our app.js file.

A

um Let's just skip some steps and like and like import.

A

This new component, we've just created so import active keys from slash components, slash active keys, so the goal- let's head back into here, so the goal for active keys uh component- is to display our full access keys and our function call access keys on display in a neat organized manner for our users to read- um and this will also be a good way to kind of like open up discussion about full access, keys and function, call access keys and what's the difference between the two, so let's type in rcsp as usual, to kind of create our starting template and let's import a container.

A

And a row from our react.

A

Bootstrap and inside this div, let's just construct this out, so we're going to say container inside this container, we're going to call for a row and of course, inside every row we have our class name set to.

A

D flex justify.

A

Content center.

A

And let's go ahead and make another duplicate of this setup, so we have to retype it so duplicate that and put this on the next line inside this first row, we're going to create another component, we're going to place another component during call for now to say full access and a placeholder for this one will be called function. Call uh let's see function, call access so hit, save on that head back to our webs our application and, let's see we have active keys here. Is this the correct tab?

A

Let's refresh this, oh we have to save app.js. So, let's save app.js.

A

And I would never actually call that component, so, let's actually replace our placeholder with active keys.

A

Self-Closing tag go back here and there we go. We have full access and function call access.

A

So with that, we have to create a another sub folder inside of components, um to create a new folder called active keys, sub inside of active keys, we're going to create a new file called full access, dot, js and another file which you'll call function, call dot js, and this would be a good place to start constructing our sub components to display the full access and function call access keys so begin by using our handy template to create a function based component.

A

So if you type in rcsp, the enter should have the uh template to begin developing a new function based component. It will start by creating a state variable.

A

By typing, in const, uh full access keys and the change method will be change, keys.

A

And we'll use use state.

A

With the initial uh value for this variable being an of the array so moving forward uh after we have this, set up, we're going to create a we're going to use the use effect hook.

A

To begin developing, our asynchronous function that'll be used to actually retrieve the keys from the blockchain.

A

So using an arrow function um to design our callback function, uh we can start developing our asynchronous function within within it, so uh our sequence function would be async function with the name get keys.

A

And we're going to start by defining two variables, so let key array is equal to await window.account dot, get access keys, so I'm gonna head over to the browser and show it that what the output of this looks like. So I actually have it right here. So this is what happens you type in? Let me just clear this out.

A

Sorry, um if you type in await window dot, count dot, get access, keys. We're going to see is an array inside this array, you're going to have two types of keys. You have a full access key like this one here, so you can tell it's full access because the permission quite literally says full access and then down here um you'll see just there's some random kids picked out, but down here. uh This is what a function call key would look like, so you open up permissions you'll see this function.

A

Call key has some sort of allowance, as well as the receiver id for the contract that the uh that this function key um allows access to them to. So uh this allowance is cryptocurrency, that's funded by the master account allotted for this specific application. So that's the main difference between a function called key and a full access. Key one will have uh access to your entire cryptocurrency storage. Well, this one will only have access to a portion of it. um On top of that, it will prompt you to a proper user anytime.

A

Tokens are being sent out to another account, and you know, in contrast to the full access keys which doesn't have to like prompt the user after the user grants them access upon logging in, if you want a full description or in-depth description of these access, keys.

A

I'll, put a link in description to a video by mike pervis, who made a in-depth video for access keys, I'm on the new blockchain and you go over over to part one of this workshop series, where I do a deeper dive into these fill into these full access, keys and function call keys to go over the differences between them so back to our application.

A

These two variables, we're going to define, will be this key array to actually get the keys and then this counter variable, which I will simply use to tally the keys and keep track of them. So we can actually display and output a counter onto our table.

A

So now that we know that the output of the get access keys is simply an array of keys, I'm going to actually take advantage of that and use the map function to uh output, some jsx into a variable which will then replace the full access keys. um Variable of state variable up here, and I will show you guys what that means in a minute.

A

So output array is equal to output array is equal to keyarray dot map inside this map. I'm going to have a function where x will be each individual key.

A

It full axis or function call axis, and the second variable will just be the index. I actually think you'll need the index, but I kind of want to put one put there just in case, um if x, dot access key, I'm sorry underscore key dot. Permission is equal to full.

A

Full access they will execute.

A

This function or this uh line of code, so we're gonna, say counter- is equal to counter plus one and we'll return. Some jsx.

A

So this jsx will simply be the design for the row um that the keys will be displayed in so we're going to do is actually we're going to display the public key that corresponds to the private key of this full access key. So we're going to write tr give this row a key.

A

We set that key to counter.

A

And inside this row we're going to have a data block, so td.

A

Which will display the count.

A

And we'll also have another data block.

A

That will display x, dot public key, the public key that corresponds to the full access private key.

A

So now we have our jsx laid out and we have the variable- that's actually being outputted to it's time to actually use this variable and use it to replace the value of this full access, keys, state variable, which is currently an empty array.

A

So let's go ahead and do that so, let's see hello here we go.

A

That's the map function, okay,.

A

Okay, so below um so after this get keys variable we have to actually call get keys. So we're going to say I'm sorry, my apologies um actually inside this very inside of this function still work included, we're going to say change, keys, we'll change the the value of full access keys to output array.

A

Then, after that, you have to still call get keys to actually activate this function.

A

And we want to do all this, so you want to do all this upon the first uh upon the first um occurrence instance at which the component loads onto the screen. So that's where we have this empty bracket here.

A

And actually, to probably make it clear for you guys is too. We can actually just put this parenthesis back up here to signify that this is the conclusion to the use effect hook so now moving on to what we're actually going to display and also we can still get rid of this prop type. So you don't really need that right now, as well as this line here, um so we're going to display is a table. So, let's actually import that table import table from react.

A

A

Inside this return statement we will define the table as such so table. Striped bordered hover variant is equal to dark.

A

Inside this table we have the t head.

A

Then the first row will have another th with the column span of two to stretch over multiple columns, and that will display your title, which is full access. Key.

A

A

And below that th t head we're going to define our t body, so the body of our table.

A

And write full access, keys, dot, map and x will simply return the value of x we're just going to return this jsx here so remember that this jsx it said that so that this I'm sorry so remember that this variable is simply an array of jsx now, where each individual item in this array will be these rows defined here.

A

So this rows will display the count as well as the public key, so we're just spitting out all these rows into this table to then define and create a new row for each and every key that may exist. So this is the dynamic way of defining your table, so we can actually show off our table to the user, no matter how many keys they have.

A

So with that. Let's save this, go back to our active keys and import the full access key full access, js file, so call full access.

A

From dot slash.

A

Active key sub slash full access.js, uh let's see what's going on, okay, so basic function get keys yeah! I misspelled async. Let's go back over here.

A

There we go and let's replace our placeholder with the with the component, we just imported.

A

Let me get a self-closer tag, hit save go over to app.js and, let's reassure let's make sure we actually have active keys called like we do so, with all this saved, let's head back to our function and refresh and see what errors we have so use state is not defined. That's an easy fix.

A

Function, access keys, yeah, it's not mined here so usually when I type it it gets defined. It's not sure why I didn't do it this time, but that's okay,.

A

Okay, I mean there we go here, are all of the public keys that correspond to the private keys of the full access key pairs, nice and neat for the user to see.

A

So now, we're done with the full access key component. Let's move on to the function called key component, which is essentially largely the same thing as the full access key component in terms of structure and design for the code. uh So you know, let's just jump in and get started.

A

So, let's start with our, you know, handy dandy, template so rcsp enter, get rid of prop types and the second line here next thing we do is create our initial state variable to hold the array of keys again so const and instead what we called function, call keys with the change method, called change keys, which we set equal to use state with the initial value as an empty array. Again, um moving on we'll create our use effect.

A

React hook and let's just call you state here as well.

A

And you want before you move on with, like writing out the use effect. I think we can actually just go ahead and copy this entire use effect from the full access key component and just change a few lines to save on some time.

A

So the lines we're going to change uh are just going to be this conditional statement where, instead of specifically looking for keys that have the tag full access in the permission, property we're going to look for keys that do not have full access as the as the contents of the permission property. uh So because we're looking for function, call keys now, so not full access keys.

A

On top of that, instead of just displaying the public key, we're also going to display td the axis key. Not so what a nonce is not is essentially, let's just type this out underscore key dot. Nonce a nods is essentially an instance, um so it's a count of the number of times that the key has interacted with the blockchain.

A

uh It's used just to make sure that these each interaction is unique and different and separate from the last one. So we don't have any repeated interactions and past this. We're also going to go back to our sendtokens.js key um or component and copy over this format. Output function, because the next thing I want to write or display in our function call key component will be the allowance that is allotted for that specific function called key, and to do that, I want to actually format it in a readable way and to do that again.

A

Formatting from react to muted near you'll also have a lot of lot of digits past the decimal place. I want to get rid of most of those digits and just be left with two so td.

A

We will call for windows, dot, utils, dot format, dot format near amount.

A

And then we'll say x, dot access, key dot permission.

A

Dot function call dot allowance allowance.

A

And so we're going to have that formatted amount and around this entire entire thing we just wrote we're going to call our format output function, so format.

A

A

So, let's make sure everything looks good here we are okay, so I see no red lines here, so it seems that we typed everything out correctly so far, but we'll find out when we actually execute this thing and see if we have any errors, um but for now I think we can safely assume this is ring correctly. So essentially, what this is going to do is once we get our, um let's see so wait window dot, account dot, get axis keys.

A

So essentially, once we find a function called key, that's a full access ones for find function. Call somewhere there we go. It works, so we're going to go into access key then going to go then after that we'll go into permission then, after that we'll go into function, call and call the allowance property of the function call to see how many new tokens we have allotted to this specific key and then format this into from yakdo near to near and then simply cut off the trailing uh digits that will make it harder to read.

A

So that's what essentially we're doing um here so now with the so I think that's essentially everything we need to do for the use effect. So let's go down over to the um return statement and just lay out the design for our table, so we're going to call it table from react. Bootstraps. Actually, let's import that so import table from react. Bootstrap inside of table you'll say t head, tr and th2 denote the name of this table.

A

You'll span this header over four columns, so column span.

A

So each of these is a column with four tds and this we call function. Call key pairs below hit t head, we're going to define our t.

A

Body for the first row.

A

Let's see here we go so the first um row we'll have our first entry be an empty header, so just a blank header, just as a space holder and then next would be th should be the public key pairs.

A

The next will be another th to note the nonces, so nonce.

A

Then the next header will be the allowance, so say allowance.

A

Actually, let's switch this from t body to t head again so we'll replace these with t head there we go and then below this d head we'll have our t body.

A

And this t body will simply just be the output of this function. Call keys array using the map function, we're just going to return each of these individual rows that we have designed here. So again. This is just an array of jsx and returning each individual jsx block.

A

The function call keys dot, map x, return x, so you hit save. I don't think we have any errors. So let's go back to active keys and import. This function call component.

A

It's a function, call from dot, slash, active key sub, slash function, call dot, js hit, save again place our placeholder with this new component.

A

Sub closing tag hit, save and go back to our browser. Let's see, if you have any errors, we have a few errors. Let's see function, call keys is not defined. So let's go back to function. Call online says 69.

A

Okay, I function. Okay, misplug function up here, so let's replace that with a t there we go.

A

And change keys is not defined. Where is that that is on line 42. and change keys? Is that really not defined? Oh, that's a capital c. Let's change this to a lowercase c, because I kind of like chemicals a little better.

A

Here we are our full access, key pairs and below that we should have our function, call key pairs. Let's uh modify the variant of that table. Actually, let's go back to full access, key and just kind of copy. This line here and paste it over the table that exists here.

A

Hit save again and that should go from white to black here there we go nice, so I mean there, we have it. We have our data table our metadata table our feature to be able to send money to a friend as well as record the balance, our total function, key pairs table and our function call key pairs table as well as that displays our public keys, our notches and our allowances. You can see that our allowances are formatted correctly into something nice and readable, so there are a few more styling components.

A

I want to kind of like knock out the way just make everything look a little bit cleaner and nicer.

A

So I want to increase the spacing between this balance block and the send money block, as well as the spacing between this function, key pairs and along then, after that I want to change the background color of entire thing, just to make everything pop out and stand out a little bit more. So, let's start off with the send money feature so send money feature we have. We have two cards that are separated by these like two containers.

A

So, let's just say: let's for this, let's say for this row: let's just increase the margin top top, just to kind of increase that spacing between just says, use, insta, inline, styling, so style is equal to two curly braces, we're going to say, margin top and set that spacing to 20px feel free to change this, um as you wish. um I'm going to use this again for the function call key so for the for the full access key block.

A

So let's just copy this and we have to retype it so hit save and go over to activekeys.js and inside this div. Let's add the same thing, so styles equal to margin, top 20px and then, as for the background color, let's go to appstyles.css and above this line here this import statement we're going to write we're going to modify one of the variables within the scss file for bootstrap.

A

So we're going to say, uh dollar sign body, baby dash bg, which stands for background and change that background color to rgb, three, nine, comma, three, nine comma, three, nine and hover over this little box here and click on this rgb. Three, nine. Three: nine three: nine and let's change it over to hex decimal. Just so it's readable on multiple browsers and include it with a semicolon. So we're going to hit, save and go back to our application. There we have it.

A

We have some nice spacing between the send money box and the balance box, as well as some nice spacing in between the access keys and our send money feature.

A

And there we have it, we can log out, see this notification for the user to log in let's get rid of this inspection tool so requesting full access to an account. So now you guys know how to do that. I'm going to log in with.

A

Bloghead.Testnet and once we log in we can see the amount of new tokens they have in the octave here, the lock tokens that could be, uh we can see. We have no contract deployed to this account see how much storage I've used, storage I paid the current block, height and or the blockchain, which is account, exists and the block hash, as well as the more nicely formatted balance and a feature to send any user more or less.

A

You know more money, so I can say block shop.testnet, which is an account to create for another video and send them seven near hit, submit open up a terminal, and we can see this little notification here from our contract as well as a receipt um showing that we've actually sent them seven near. So, if we refresh the page, you can see our balance go down.

A

You can even see our transaction, our total transaction history with blockshop.testnet.

A

So now you guys should know how to wire up and route your contract, calls and know the difference between change, method and view method, and now we can even see and display all of our public keys and how many public keys we have for this account two separate third-party applications, as well as a function called key pairs showing their respective allowances and the knots that each public key is currently at so great job guys. You guys did very awesome in working through this application with me.

A

Hey everyone. Thank you so much for watching this video. I hope you guys enjoyed it. I hope this video plays a helpful role in your development and creating some really cool blog chat applications. I hope one day I get to see what you guys create. If there's anything I should improve upon. If there's anything, I should go to more detail about, or if you just have any general questions.

A

Let me know in the comments below and I'll do my best to get back to you as soon as I can like subscribe and share with your friends. It really helps me out and I'd really appreciate that and guys keep growing, keep learning and have a great day. Thank you for watching.

A

Where to first your mother's butt.

A