BlockHeads Workshop 1: Intro to NEAR Part 2

Captions as YouTube publishes them, usually machine-generated, so product and people names can be misheard.

1. 0:00

   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

2. 0:16

   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 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

3. 0:43

   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 through this process i'm going to show you guys how to request full access through a third party application to your near wallet 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

4. 1:11

   your metadata for your account so you can show you guys how to pull all this information 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

5. 1:35

   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 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

6. 1:58

   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 i'll put a link to the description to a crash course by traversing media 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

7. 2:25

   download for mac os which is the os i'm currently running is 14.15.1 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

8. 2:49

   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 so we want you guys to head over to new.org and click on docs

9. 3:13

   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 you do have to get this extra step of

10. 3:38

    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 so the reason why we're downloading the new cli is because it essentially acts as a wrapper for the new api

11. 4:01

    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 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

12. 4:25

    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 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

13. 4:56

    npx create near app dash front end equal to react and then we're going to name the application block view 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 if you hit command j on mac you open up your terminal within vs code and just navigate into the file you just created

14. 5:47

    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 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 you guys another way just to run

15. 6:20

    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

16. 6:50

    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 that stores our react project so you can just navigate that file by typing in cd block view then again just run yarn dev to make sure everything's working

17. 7:28

    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 so we're going to go to source and then

18. 7:53

    app.js and go up to this first curly brace and just delete everything below it replace that ending curly brace that you deleted and type in return 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

19. 8:33

    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 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

20. 9:04

    so we can have a blank slate to write 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

21. 9:36

    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 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

22. 10:05

    full access to our near wallet 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

23. 10:29

    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 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

24. 10:53

    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 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 uh while that's downloading head over to

25. 11:23

    your source file and create a new folder called scss inside that folder create a file called app styles.scss 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

26. 11:57

    page and then hit copy to copy this import statement here and paste it into your app styles.scss file 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

27. 12:34

    test this out and also kind of make progress towards our first step of creating our application 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 to get this to work we need to import a few items from here from the react bootstrap node modules

28. 12:59

    package so import curly brace nav bar oh there you go nav bar nav drop down and nav from react in quotation marks react bootstrap hit save and restart the development server to see if this all works 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 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

29. 13:53

    kind of rework this nav bar example into something that works better with our application 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 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

30. 14:24

    um get rid of this line that says more deets 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 and we're also going to get rid of href home and this event key because we don't really need it 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

31. 15:11

    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 well this is going to come this will make sense in about two seconds

32. 15:34

    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 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 so let's see if we can

33. 16:06

    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 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 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

34. 16:42

    application 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 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

35. 17:15

    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 otherwise if we are logged in we want to actually display the name of our account so we're going to type in window 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

36. 17:51

    going to hit save on that go back to our application 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

37. 18:21

    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 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

38. 18:53

    returning just a string of that count and there we go we have a functioning login button 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

39. 19:21

    message for the user prompting them to log in so i'm going to first wrap our entire application in a react fragment 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 i'm sorry it's not equal to an every string

40. 19:59

    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

41. 20:29

    will be the place where we store our metadata 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

42. 21:06

    css files uh in this case these are configured and written by react bootstrap 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

43. 21:40

    we will have a column 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 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

44. 22:16

    active keys so row active keys 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 so that's going to signify the quote else statement for a conditional statement that we wrote here

45. 22:49

    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 and inside this car we're going to have a card header and i'm going to say hello

46. 23:20

    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 please log in and then card text this application oops can't spell there you go application will not work otherwise then

47. 24:18

    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 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

48. 24:49

    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 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

49. 25:20

    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 so button save go back so we can see this card appear here prompting the user to log

50. 25:44

    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 and there we go we're back to our placeholders so yeah there we go we have our login logout restriction feature set

51. 26:17

    up 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 so if we go to your terminal and type you know control c to stop your development server from running

52. 26:44

    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 uh so if you type in near state and single quotation marks your account name so my account name is blockheads.test.net you will see the state of that account so that will display the amount

53. 27:18

    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 so

54. 27:44

    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

55. 28:09

    app to you know start your development server or to make it live 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 i can even copy this dev account and type in near state single quotes paste

56. 28:39

    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

57. 29:04

    from this account 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

58. 29:36

    our metadata so moving forward 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 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

59. 30:09

    i love using this react.js code snippets by charlompos 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

60. 30:40

    based functional component 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 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

61. 31:05

    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 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 and then let's call the change variable or change method

62. 31:52

    change meta data 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 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

63. 32:40

    create this asynchronous function which we're calling get data 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 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 then after we have our data we're going

64. 33:23

    to use the change method that we created called change metadata to replace that empty object with the newly retrieved data 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

65. 33:56

    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 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 the first argument to the near connection near.connection uh near is defined up here to the connection

66. 34:30

    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 so now it's time to

67. 35:02

    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

68. 35:33

    metadata and then we're gonna go down to 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 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

69. 36:09

    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 we go it kind of

70. 36:34

    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 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

71. 37:10

    the table to actually define our columns so we're gonna say t head 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 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

72. 37:50

    row tr with the amount of new tokens we have so td amount 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 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

73. 38:35

    for a minute but i'm going to take this line and just duplicate it 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 take this line and just duplicate it again and i think it should be fine okay so the next locked row we're gonna call

74. 39:25

    code hash then we're going to pull the code hash from the metadata so code underscore hash then this next line will be the storage usage then we're going to say metadata.storage underscore usage then this next line will be storage paid at and then the property will be pulling of course will be called storage underscore paid underscore at and duplicate this line again and we're gonna do that one more time

75. 40:30

    so we're gonna call this next title uh block height and then this last title will be called block hash and of course the properties will be named as such so block underscore height and block 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

76. 41:19

    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 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

77. 41:45

    going to go to this div and say style is equal to double curly braces and margin top 10 percent 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 there we go i think that's a good enough gap anyway i just wanted to throw that in there

78. 42:26

    so now we've created our metadata component 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

79. 43:01

    started so let's go over to app.js actually let's go over to source file and create a new file in the components 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

80. 43:32

    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 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

81. 44:14

    uh use effect here we go our initial value for recipients will just be an empty array 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 our next line will be const balance change change balance and initial value for this would just be zero so now we're gonna we're gonna return from our contract call we're gonna

82. 45:11

    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

83. 45:36

    that will essentially run our ability to keep track of the totals 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 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

84. 46:10

    um so so things might be a little bit different but they aren't too far off from javascript 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 so for this first persistent map we're

85. 46:38

    gonna say each key for this map will be a string and it will give access to an array of strings 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 so oh and then the unique identifier will be ts so i know this is a little bit

86. 47:23

    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 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

87. 47:55

    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 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

88. 48:26

    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 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

89. 48:56

    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 recipient which will be a string 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

90. 49:39

    to return nothing so if the we're going to check for is if the recipient list 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

91. 50:20

    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 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

92. 50:44

    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 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

93. 51:17

    to in other words so recipient list.getsum for blockheads or turn a list of names will all be strings of 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

94. 51:57

    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

95. 52:21

    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 so if get list dot can uh include sorry concludes recipient then we'll do some action we're going to say let get index is equal to get list index of recipient and let old total is equal to get totals uh dot if so get totals bracket get index so i'm going to pause here for a minute and just explain what's

96. 53:19

    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 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

97. 53:45

    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 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

98. 54:18

    name of the person who have received that value in these two lists so new total to go to old total uh plus amount 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

99. 55:02

    is equal to new total 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 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 um so now i am essentially just replacing this the the old array of numbers that existed here with

100. 55:46

     this new updated array of numbers so that's what the get totals is this is an array of numbers moving on so if uh if this list does not include that recipient's name then we're going to say get list which again is just an array of names array of strings getlist.push we're adding a new recipient to that list recipient list 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

101. 56:39

     for the recipient list persistent map get totals doing the same thing forget total so that push amount so setting a new amount 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

102. 57:19

     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 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 um with his very first transaction so we're just going to just directly put an array of strings so i'll be recipient

103. 57:57

     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 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

104. 58:27

     when we go over to utils.js we want to um we're effectively changing the state of the blockchain so we're going to add this as a change method so add funds 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

105. 58:57

     but that's something i just learned so let's essentially save this so we say we're saving our index.ts 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

106. 59:38

     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 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

107. 1:00:26

     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 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 you have to type a weight um in front of it so you can actually read the readout

108. 1:01:06

     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 so contract method is not found maybe this didn't load properly let's make sure we have everything correct so save

109. 1:01:30

     control c we are in dev let's try this 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 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

110. 1:02:03

     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 there we go it should be a string and this get names function will return a string or an array of strings so if recipient list contains the user that's signed in so user then we'll return the recipient list

111. 1:02:54

     of that user 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 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 so instead recipient list we will replace this with uh

112. 1:03:46

     total scent so save this uh go over to utils.js and inside view methods we're going to write in get names oops as a string get names 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 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

113. 1:04:42

     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 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 see this actually works so i'm going to hit enter and there we go remember that window.account id

114. 1:05:20

     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 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

115. 1:05:51

     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 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 with every container comes a row and a

116. 1:06:23

     column from react bootstrap 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 inside this card we're gonna have our card header 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

117. 1:07:11

     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 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 essentially call list group inside of list group we're going to call a list group item

118. 1:07:51

     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 so here we're going to call um we're just gonna essentially just leave this as a placeholder called near tokens 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

119. 1:08:28

     so below card we're going to there we go clear row and start a new row 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

120. 1:09:09

     last name is equal to that great 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 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 we'll actually house the features and the input fields for that tool inside car body we're going to create a new container

121. 1:09:58

     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 so inside this first column we're going to have two input fields input uh i believe these are self-closing tags so let's actually just self-close it and duplicate that so we'll have the

122. 1:10:40

     type as text and oops it's equal to text then the placeholder will be enter recipient here so this first input field will be where we will um enter the name of the person that's receiving money from our account 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

123. 1:11:30

     from react bootstrap 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 and after we have our submit button written out we're going to conclude that row and create one more row

124. 1:12:05

     so again class name it's equal to d flex d-flex justify content center and 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 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

125. 1:12:49

     and let's do 10px for now 10px same thing as before so striped bordered hover variant is equal to dark 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 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

126. 1:13:46

     so t body we're going to have 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 let's do 100

127. 1:14:33

     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 send tokens 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

128. 1:15:13

     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 tables or they say tables table there you go 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

129. 1:15:53

     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 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

130. 1:16:18

     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 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

131. 1:16:48

     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 there we go next will be get amount so is equal to await window dot utils dot dot format 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

132. 1:17:43

     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 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

133. 1:18:12

     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 so uh essentially instead of um this mount here this crazy large you know i can't even like say that phone number

134. 1:18:42

     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 so moving forward i'm going to enter in a new third variable called entered 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

135. 1:19:31

     right now so let value input is equal to react dot create ref and let's create another one for the recipients so recipient sequel to react dot create ref 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

136. 1:20:07

     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 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

137. 1:20:32

     that input and that data that the user enters into that text field 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 so if this number is greater than the number of the entered values or

138. 1:21:13

     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 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.

139. 1:21:46

     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 and we'll send them this many new tokens we're going to say window.util dot format dot parse near amount entered value your amount so uh this utils that format that parse near mount will take the entered near value and convert it into yakuto near

140. 1:22:34

     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 recipient we and let's just make sure we have that correct so add funds recipient and amount so recipient will be the recipient current

141. 1:23:20

     value and then the amount will be number entered value 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

142. 1:24:00

     i'm going to say set recipients set recipients to await window contract dot get names then after that i'm going to set the values subset values to await window.contract get totals 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 and the user's default value would be

143. 1:24:52

     window dot account id and we can copy this entire thing and paste it into here 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

144. 1:25:42

     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 so you have to like write all those errors errors out yourself

145. 1:26:16

     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 so we're going to say async basic function get data and get data we'll do the same thing before 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

146. 1:27:07

     um every time we reload the page 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

147. 1:27:40

     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 so const format output is equal to text which is equal to arrow function so of text which would be

148. 1:28:10

     a string text if text dot includes 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 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

149. 1:29:02

     i'm even like just like no spaces all just like by each adjacent um letter or character 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 it's going to actually display this array to see if this actually worked

150. 1:29:41

     and then return array.join 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 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

151. 1:30:26

     functionality to um to our placeholders actually replace our placeholders with functional components they actually see this out all working so let's start off with this button which is this one's really easy we just say on click oops i can type on click is equal to send gift so when we click the submit button this entire function should run for our input text fields we actually need to um

152. 1:31:03

     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 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

153. 1:31:42

     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 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

154. 1:32:14

     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 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

155. 1:32:49

     and we're going to say the first data field will be td name of the person name the recipient and td 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 and pull that index that we defined earlier so this map function takes care of the correct index for us

156. 1:33:33

     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 i just deleted and put it above this curly brace and it should be working now um i also found another error where

157. 1:34:02

     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 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

158. 1:34:27

     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 function get transactions parentheses curly brace um set recipients we're going to call our

159. 1:34:57

     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 we don't need the dot dense around it because we're not actually

160. 1:35:28

     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 we still need to actually call get transactions because right now nothing's happening so recall get

161. 1:35:59

     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 so we're going to um read your add some curly braces in between these two jsx tags to implement some more javascript

162. 1:36:30

     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 and wow there we go cool so we have the

163. 1:37:04

     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 we have our first function contract call and our transaction history board is working so

164. 1:37:38

     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 let's see for my output which will

165. 1:38:03

     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 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

166. 1:38:37

     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 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

167. 1:39:15

     honestly like unnecessary like a decimal places because the user is not going to care about all of these decimal places 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 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

168. 1:39:43

     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 um let's just skip some steps and like and like import 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

169. 1:40:25

     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 and a row from our react bootstrap and inside this div let's just construct this out so we're going to say container inside this container we're

170. 1:41:12

     going to call for a row and of course inside every row we have our class name set to d flex justify content center 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

171. 1:42:01

     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 let's refresh this oh we have to save app.js so let's save app.js and i would never actually call that component so let's actually replace our placeholder with active keys self-closing tag go back here and there we go we have full access and function call access

172. 1:42:44

     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 so if you type in rcsp

173. 1:43:23

     the enter should have the uh template to begin developing a new function based component it will start by creating a state variable by typing in const uh full access keys and the change method will be change keys and we'll use use state 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

174. 1:44:12

     to begin developing our asynchronous function that'll be used to actually retrieve the keys from the blockchain 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 and we're going to start by defining two variables so let key array is equal to await window.account dot get

175. 1:44:54

     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 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

176. 1:45:29

     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 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

177. 1:45:55

     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 tokens are being sent out to another account and you know in contrast to the full

178. 1:46:28

     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 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

179. 1:46:52

     keys and function call keys to go over the differences between them so back to our application 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 so now that we know that the output of

180. 1:47:24

     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 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 it full axis or function call axis

181. 1:48:06

     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 full access they will execute 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 so this jsx will simply be the design

182. 1:48:53

     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 we set that key to counter and inside this row we're going to have a data block so td which will display the count and we'll also have another data block

183. 1:49:36

     that will display x dot public key the public key that corresponds to the full access private key 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 so let's go ahead and do that so let's see hello here we go that's the map function okay

184. 1:50:17

     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 then after that you have to still call get keys to actually activate this function and we want to do all this so you want to do all this upon the first

185. 1:51:06

     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 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

186. 1:51:34

     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 bootstrap inside this return statement we will define the table as such so table striped bordered hover variant is equal to dark inside this table we have the t head 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

187. 1:52:36

     key pairs and below that th t head we're going to define our t body so the body of our table 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

188. 1:53:23

     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 so with that let's save this go back to our active keys and import the full access key full access js file

189. 1:53:55

     so call full access from dot slash 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 there we go and let's replace our placeholder with the with the component we just imported 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

190. 1:54:49

     and refresh and see what errors we have so use state is not defined that's an easy fix 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 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 so now we're done with the full access

191. 1:55:22

     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 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

192. 1:55:55

     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 react hook and let's just call you state here as well 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

193. 1:56:41

     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 on top of that instead of just displaying the public key we're also

194. 1:57:11

     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 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

195. 1:57:44

     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 formatting from react to muted near you'll also have a lot of lot of digits

196. 1:58:17

     past the decimal place i want to get rid of most of those digits and just be left with two so td we will call for windows dot utils dot format dot format near amount and then we'll say x dot access key dot permission dot function call dot allowance allowance 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

197. 1:59:11

     format output 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

198. 1:59:49

     dot account dot get axis keys 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

199. 2:00:23

     and then simply cut off the trailing uh digits that will make it harder to read 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

200. 2:00:57

     inside of table you'll say t head tr and th2 denote the name of this table you'll span this header over four columns so column span 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 body for the first row 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

201. 2:01:54

     would be th should be the public key pairs the next will be another th to note the nonces so nonce then the next header will be the allowance so say allowance 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 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

202. 2:02:47

     have designed here so again this is just an array of jsx and returning each individual jsx block 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 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

203. 2:03:34

     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 okay i function okay misplug function up here so let's replace that with a t there we go and change keys is not defined where is that that is on line 42.

204. 2:04:10

     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 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

205. 2:04:38

     here 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

206. 2:05:10

     our allowances are formatted correctly into something nice and readable so there are a few more styling components i want to kind of like knock out the way just make everything look a little bit cleaner and nicer 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

207. 2:05:34

     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 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

208. 2:06:05

     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 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

209. 2:06:44

     one of the variables within the scss file for bootstrap 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

210. 2:07:14

     and include it with a semicolon so we're going to hit save and go back to our application there we have it 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 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

211. 2:07:46

     access to an account so now you guys know how to do that i'm going to log in with 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

212. 2:08:17

     and a feature to send any user more or less 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 you can

213. 2:08:48

     even see our transaction our total transaction history with blockshop.testnet 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

214. 2:09:13

     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 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

215. 2:09:40

     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 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

216. 2:09:55

     thank you for watching where to first your mother's butt i'm so alone