Ethereum Blockchain - Decentralized Financial Application | John Quarnstrom | Skillshare

Playback Speed

  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x

Ethereum Blockchain - Decentralized Financial Application

teacher avatar John Quarnstrom

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Lessons in This Class

23 Lessons (16h 27m)
    • 1. Introduction

    • 2. Structs, Mappings, and Enumerators

    • 3. Functions and Modifiers

    • 4. Testing Contracts

    • 5. Installation and Scaffolding

    • 6. React Components and Contract Revision

    • 7. Menu and Reactive ETH DAI Balances

    • 8. Single Page Application Design

    • 9. Smart Contract Initialization

    • 10. MongoDB - Insertions and Security

    • 11. Contract Polling and Mutex Locks

    • 12. Smart Contract Interfaces

    • 13. Smart Contract Interfaces Cont

    • 14. UI UX Improvements

    • 15. Session Variables and withTracker Pt

    • 16. Smart Contract Dynamic Filters

    • 17. Forward Rate Agreement Issuance (Part 1)

    • 18. Forward Rate Agreement Issuance (Part 2)

    • 19. Data Injection via Iterative Mapping (Part 1)

    • 20. Data Injection via Iterative Mapping (Part 2)

    • 21. Admin Management Panel and Final Thoughts

    • 22. Deploying App

    • 23. Session Variables and withTracker (Part 2)

  • --
  • Beginner level
  • Intermediate level
  • Advanced level
  • All levels

Community Generated

The level is determined by a majority opinion of students who have reviewed this class. The teacher's recommendation is shown until at least 5 student responses are collected.





About This Class

Learn how to build a fully decentralized application for trading derivatives on the Ethereum network. This course covers full-stack development along with smart contract design and implementation. Throughout this course, detailed descriptions and insight is given into the engineering process for decentralized finance. More importantly, students will gain an advanced understanding of how to design Single Page Applications through the Meteor framework while utilizing important NPM packages to combine Web3 and Javascript.

Meet Your Teacher

Class Ratings

Expectations Met?
  • 0%
  • Yes
  • 0%
  • Somewhat
  • 0%
  • Not really
  • 0%
Reviews Archive

In October 2018, we updated our review system to improve the way we collect feedback. Below are the reviews written before that update.

Why Join Skillshare?

Take award-winning Skillshare Original Classes

Each class has short lessons, hands-on projects

Your membership supports Skillshare teachers

Learn From Anywhere

Take classes on the go with the Skillshare app. Stream or download to watch on the plane, the subway, or wherever you learn best.


1. Introduction: Hey, welcome. So this is going to be the very first part of a, what will probably turn out to be a 20 to 25 video series, which goes into from 0 to a 100. How to build a decentralized application for maker Tao derivatives. And to give a little bit of a background about myself. I'm John, john coins term. And I've been building decentralized applications on a theory them for almost a year and a half now. And I've realized that there's a lot of cool financial applications which can be built, but have yet to be built. Or there aren't great user interfaces for working with them. And after working with smart contracts for so long, I've really understood the ins and outs, the tricks you can use with different architectures to accomplish what you want. And the whole inspiration behind this, I was talking with a developer who works at maker Tao. And he was telling me that they have this need for interest rate derivatives. And what that's, what that essentially means is we can, we can actually go look at the maker, Tao maker tools. It shows all the information about the press and maker the supply of dye. It's almost over a 100 million, which is pretty cool. The current lateralization ratio. And you've got a page here for stability fees. And we can look at all. And we can see that it started out at 0.5 per cent for the longest time. And that meant that if you took out 100 thousand die from a CDP, when you went to pay it back, you would have had to pay $500 with the MKDIR token to pull your collateral back and pay off the loan. That was the stability feet. And it was constant for awhile. But as we've seen in the last three months, let's go to six months. It was a 2.5% for awhile back on August 30th. And it's been going wild. It down to 0.5%. A month ago, or a month and a half ago it was 1%, then it went to 1.5%. They don't want that 3.5%. And imagine taking out a loan for a $100 thousand and you believe that you're just going to pay back 500. Well, a few months later you pay back 3500, That's three grand on a $100 thousand loan. And so if you want to avoid that as someone taking out loans, will what I want to build. And what I've been talking about, what this developer and maker Tao and is a system for buyers or, or I should say, borrowers of dye to be able to lock in a fixed rates for, for paying back the loan. And this can be over a three month time period, a six month time period. And it will be managed by a smart contracts. And the idea is that Let's say it's a, let's say the notional amount of this as like a 500 are a $100 thousand and you want to lock in that 0.5% right in the middle of January, you put up 500. And the smart contract is going to be created by this, this issuer who will provide the liquidity, he'll throw a ton of dye into it. A buyer can come along and he'll post his 500. And then the creator of that contract, the seller will actually put, if he wants to guarantee up to coverage up to six or 7% stability feet, he will put $6,000.6,000 die up against that buyers 500. And if the stability fee at the expiration date is 6.5%, you know, if you took out that $100 thousand loan, now you can have you fixed that rate and you will receive the 6 thousand. So effectively receives 6500 at the end of it. And you can protect yourself that way. So this is going to be a derivatives platform, all managed through smart contracts to protect yourself from the changing stability fee. And this is actually something that's published on the Ethereum network. In a smart contract, it's a variable in it. So we can use other smart contracts. They can reference this stability fee rate and managed these forward rate agreements as they're technically called. And so, so we're gonna go through these smart contract design. We're gonna go through the front end design of it. How we're using Meteor as the platform for developing Meteor is a fantastic application. Let me go back. The fastest way to build JavaScript apps. It's excellent. I've been using it for a lot of applications. There's a way to hosted through meteor hosting. So we're gonna go into that. I like to use MongoDB on the backend. It may turn out that we don't even touch MongoDB as we work through this. But there's a chance we will, and we can have a free 500 megabyte MongoDB back-end by, provided by mLab. And I can show how to hook that into the app. We're going to be using Semantic UI for the front end. It's a great front-end library. And to build this application, we're going to be using WebStorm. It's Javascript IDE. Very, very nice. I've got it here. I've got a license for it, but if you want to just download it, they give you a free 30 day trial. So that's that's excellence. And yeah, we're just gonna, we're just going to build a derivatives platform. I will preface that. Actually launching the platform, actually launching one of these platforms in the US would pry you would probably be under jurisdiction. I'm going to say probably you're going to be under jurisdiction of the CFTC, the Commodity Futures Trading Commission, because they live to regulate derivatives and swaps. But we're building it all on the tests net. This is, this is going to be a video series to show how you do all of this. We're going to be starting out with smart contract design, first and foremost, go into the front end and then some of the backend and deploying it. But we pretty much have everything. And I'll run through real quick the outline I have of everything that we'll be using to this and some of the things we'll be going through. And it's going to look like an eight part series right now. Each one of these parts could be broken down into two or three 45 minute long episodes. So as we worked through it, depending on the complexity of various parts, some will be longer, some will be shorter. I think I've gone covered just about everything in the overview here. Some of the languages used will be solidity, that will be four reacts or remix. I like to use this for programming the smart contracts and just writing them out. React JavaScript. Some HTML will come into the mix, and possibly MongoDB, that's not too complex. I wouldn't be. It's much simpler than you would think to work with MongoDB through media. I've gone over through, through some of the required software and tools, but in the next episode, I will be setting those up and walking through all the steps. I want this to be a full, you know, not hold your hand kind of thing, but at least show everything that I'm doing. So if I'm starting from scratch, you can start from scratch to with this kind of series tutorial. The first big programming thing that we'll dive into will be the smart contract design. We always want to start with the business requirements. This is, you know, what does the end-user need? What does the issuer or the administrator need? What kind of accessibility does he need? Some of the basic data structures like structs, mappings, how to increment the mappings, functions modifiers, and we're going to go into states. This is more of a computer science topic where you have state transitions. Something can be in state a, and there's another state B and maybe a state C. And if you're an a, you can go to be your b, you can go to C. But if you're in C, you can't go back to B. And that's how you can control some of the accessibility of, say, you have a forward rate agreement that's a three month term. Once it has been executed. Or it's expired, you don't want to be able to allow the end user to withdraw more funds or executed again in that sense. So this is something that a combination of modifiers and states can be put in place to, to protect or prevent against that kind of functionality or unwanted access. Then we're going to start with the Meteor running through that, creating the application, installing important libraries like what three, flow router. So you can do this through a single page application architecture. That's very, something that's very important and that just makes the user experience easier to you don't want some complex application with all these different pages, you know, just single-page application, very easy to use. Scaffolding is an important part 2, how do you structure all of the folders in Meteor applications to set up the front end and some back-end splitting server-side functionality with client-side functionality. Building components within reacts. At. Then once we have that setup, we'll start by according the smart contract into our Meteor application, into JavaScript. This will involve the web 3 Library creating a smart contract form for interacting with it. That's going to be a huge complex piece which we'll go into more in depth after, but we'll build a basic form to start out with and expand upon that. And then how do you manage interacting with the smart contract on the backend? How do you, how do you make a user interface allow you to click something to a smart contracts and have MetaMask. What we'll be using for a lot of this on the codon tests and everything we're going to be doing is on cobalt. And I've got a nice account here with almost 300 and another one with 43 of them. So we can do some nice testing with this amount and even open up a couple of CDPS to take out dy on the COVID test not as warm, already have about 6 thousand die. But we may need, we may need more. You never enough. We're going to go into working with smart contract components, or I should say, building react JavaScript components to watch state variables within a smart contract, or to create buttons for interacting with the smart contract. Managing the component lifecycle is important. So if you leave the page or go to something else, It's not continuing to render a component. So that's something important that we'll look into. Selectively rendering things on the front end interface to your identity management. And that's part of the web through library. Depending on which account you're accessing. We're going to be checking that, that Ethereum address. So if you're on one a theory and address, it will load all of your forward rate agreements for that account. But if you're on a different one, it'll switch and load all of the other ones. And it can do this in real time. If I change this account, you know, boom, then it'll load a different list. And that's a nice feature that we'll want to have in place. And MetaMask is great because even if you don't have an account hooked up or initialized through MetaMask, you can actually import accounts or connect the hardware wallet and manage your account through the Meta mask extension. So that just makes it that much easier to work with. And then the final thing will be state changes and reacted interfaces. So this will be a method where we're pulling the smart contracts every for various parts. Some will be every 30 seconds, some will be every two seconds. And this allows the interface to have more of a dynamic feel like you're looking at the smart contract in it. And that's a nice user experience feeling. From there we're going to get into user interactions and administrative access. So the end-user interface which will be reactive, this is kinda going to spill over from the previous section. We're going to get into the admin access. So how do we, because we want to, we're not just building it for the end users, we're building it for the administrators or the issuers of these contracts as well. So how do we build something that allows them? Let's say it's a one smart contract for stability fuse between three up to 8%. But then they want to have one from five up to 12. And maybe that three to eight, they only charge in the smart contracts 0.5% as a premium, right? That's the fee for enabling someone to lock in that fixed rate. Five to 12 percent range. Maybe they take 1%, maybe they charge twice as much for taking on more risk. And then the end user can say, well, I don't know if I want to pay 1%, but I'll get this much coverage for 0.5% fee or for the notional amount, something, you know, something in that realm. And then finally, you know, the big campaign is where we'll deploy the application. And I do it through media galaxy. It's a great system for hosting apps, setting up, you know, SSL certificates and things of that nature. But we might get into the meteor free hosting. I probably will just show because this is more of like production or enterprise kind of a tutorial. I think we'll, we'll stick and focus on Meteor galaxy hosting. Along with just buying a domain off of GoDaddy and setting up the, the forward addressing port, forwarding, whatever we need to do for that. It's been a couple of months. I forget the exact process, but we'll hop on to that and set that up. And then we'll we'll have it running right through there. So, so yeah, this is going to be a very exciting application to both build, design, build, and learn about how to build an app from scratch. So I hope you will enjoy it. 2. Structs, Mappings, and Enumerators: Welcome to Episode 2. We've covered a lot of ground in the last one, we talked about the overview for this video series. And we discuss some of the required software and tools. But we're not gonna go into that too much because we're going to dive right into the smart contract design. And all that requires is re-mix. It's put out by theory and not org. And you can write smart contracts with it. And we've already got everything set up to write a smart contract from scratch. One of the first things I want to talk about are the business requirements. Because we, we don't want to just start writing a smart contract and we don't know what we're trying to accomplish. If we have a clear vision and a clear goal of where we're trying to go or what we're trying to accomplish. That's the basis for then building and writing the smart contract. So some of the things that I've been thinking about will be that we want to have a system, a user interface where different administrators can come to the platform and offer forward rate agreements under the terms in the fee structures that they're comfortable with from a risk management perspective. So this means we're going to have one or more admins. And they're going to decide on what's the minimum stability fee that outward cover. What's the maximum stability through that I would cover in relation to the current instability feed. So if the minimum is 1% and the max is 5%, if the current stability fee is 6%, what's out of that range? And this person is not going to insure anything to this particular smart contract or provide forward rate agreements. And with that being said, they could create another one in combination with the one through five that protects five through 10 and have that at a higher feed. So, so one or more admins and one or more overall forward rate agreement controllers, if you, if you will. And a lot of this stuff as we worked through the smart contract, will make a little bit more sense. They will specify what kind of coverage they're going to offer. So this could be 50 percent coverage if the minimum stability feet 1%, maximum stability fees, 5%. If someone comes if a, if a borrower comes to the contract at the current stability Fe3 percent, they would be getting coverage up to 8%, 3 plus five, that's 5%. They could get coverage up to 10, 5 plus 5. It's anything above that. They will not be able to use this particular smart contract. But maybe there's one, another one on the platform that has liquidity and can, can be entered into. And the only other risk management, a parameter that's going to be important is the monthly fee, the flat fee, and the monthly fee. So flat fee, it is let's say you want to lock in your one-percent stability fee. Well, you're going to have to pay a little bit more than 1 percent to walk in back. Current rate is this is this this would be like the premium, right? So you may say as an administrator, I'm going to charge a one-percent flat fee. And then my monthly fee will look something like 0.15%. So if you come to me and say that you want a 12 month term, a forward rate agreement, then it's actually going to come out to be 1 percent plus 0.15 times 12, so around two to plug 25 percent. And the reason that that is in place is because you are taking on more risk the longer you stay into a contract. And there's also an interest on the money that you put in the contract. Because all forward rate agreements are collateralized. Fully during the term. So there's going to be a small monthly fee to be compensated for the fact that you don't have access to this money. And these these fees, the buyer will be paying that up front. And this, the admin will receive that immediately. But he will the buyer will still gain coverage based off of whatever the current stability fee is and what the coverage rate is. So I think that just about covers it. If there's anything I missed in these business requirements here, then I'm sure we'll we'll, we'll definitely cover it as we're building and writing this smart contract. So let's go over here. Full disclosure. I have the full written contract in this file right here. But I think in order to really understand exactly how to go about writing it and the thought process behind it. We're just going to start from scratch on this other file at maybe copy and paste a couple of sections over. And I'm going to try and work through it all and explain my thought process for every single piece of the smart contract. And that should help and really give you more insight into how to build these write the smart contracts. So one of the first things that I like to do is split up the smart contract into four different sections. One to store the state variables, one to store the constructor, wants to store the modifiers. And once a store the functions, this just makes it easier looking through later to find things through the code. It's good for a coder. It doesn't really help the contract in any way. Obviously, double slashes or comments and won't actually affect anything. And you'll also notice that I have the solidity version here at the top, 0.5.6. There's a 0.6 out. But I want to touch it. I don't know what's going on with the 0.5.6 is good. We're going to use Allen M4, right? Just anything in this smart contract. I want to talk about some of the nice things that open Zeplin as for use. And you'll see here, build secure smart contracts in Solidity. Fantastic. That's what we want, right? One of the things you'll see quite often is this safe math library in the open Zeplin repository. And this is basically going to protect a lot of mathematical things that could go wrong. For instance, function div, you don't want to divide by 0. That's pretty bad. Subtract, you don't want to subtract three from two, and you end up with negative one because you add 256 doesn't actually have a negative one. It just underflows and goes to the highest possible value. And that's not good for accounting purposes. So safe math is a library that can protect from a lot of that stuff. And I've got the safe math library over here. I'll go ahead and copy it over. And in order to import that into our contract, we just use this statement using safe math for you in 256 and is all ready to go. Now, I want to talk a little bit about how we manage or how we represent a forward rate agreement in the contract. We're actually going to use a struct for it. And I'm going to go ahead and copy over this struct that we have over here along with the state. And we're going to need that because that's part of the struct. Now, the struct for a forward rate agreement has a couple of key variables in it. The start Unix. So when it actually started, the end Unix, when it actually ends. So if it's a three month term, these are, these uint8, you'll see it says the Unix here. We're representing everything in Unix. So if we start at some, we can use the Mao variable that is a keyword now in solidity. And that takes the current Unix time associated with the block timestamp. And we can say, start a unix is now, and Unix is now plus x amount of seconds. If it's a 30-day term, then however many seconds or 30 days. And you would add that to the star Unix. And then the end cutoff Unix actually represents when the forward rate agreement expires. And I've decided and we will get to this later on, that there is an a one-day grace period for executing the forward rate agreement if at the end of one day. So let's say we're past the end Unix, but were before the end cutoff Unix. You can exercise it. If we go past the end cutoff Unix, we cannot exercise the contract or the forward rate agreement anymore. And that's important because, you know, there is a chance that both parties forget about this forward rate agreement. And if you come back to it three months after the fact, you don't want the original terms to D applied because then the bar or who entered into it could obviously just sit on it and wait for that right. Or the right stability fee. So so there's a cutoff period of one day and this is going to make sure that both parties are on top of their game and not letting this contract expire. The notional is 18 decimal notation here. This is just to remember, to remind ourselves that this term is in fact going to be 18 decimals. That's how many decimals the dye stablecoin is on the network, the main network, and choose to kind of give an example of what that looks like or what that means. If you want to represent one die, then you have one. And then you have 3, 6, 9, 12, 15, 18. And I hope I did that right. So you've got us a equals this exemption. The syntax isn't even right? But this is just showing what the value would look like. And then the final thing to note here is the state. So we did talk a little bit about states. And the last one, if you're in a, you can't go to B. If you're at B, you can't go to see. We're going to use the state to track what the D contract, what state the contract is in, and what state it ended in. This this is important because for record keeping purposes, we may want to go back and look at what happened with each of the contracts. So they all start in inactive, and it's important to have this initial inactive in our numerator. If you're not familiar with enumerators, let me take a second to just explain how they work. You, you specify a data structure like this. And then you can say data structure with this variable name equals state DOT act or state dot enact. And you can't actually assign parameters inside of a struct. But I could do it outside like this. State a is equal to And all this is doing is allowing for easy words to be used to represent the state of something. But really under the hood, this is just 0, 1, 2, 3, 4. And if if you were to look at it, it's a uint8, a 0, 1, 2, 3, 4, 5, 6, 7, 8 as it continues in size. And you can just say, well, if this specific forward rate agreement has a state variable called forward state that equals 0, then it's inactive. Nothing's happening. And as we were saying, you want the first one to be a non true or if we took it out and just said everything starts as active. Well, that's not true because as we'll see in a little bit, when we have a mapping of these FRA structs, they initialize to the default values. And we don't want the default value to be active. We want it to be inactive. So that later when we're doing our checks for how a FRA can be interacted with. We can say this is an inactive, no good cannot be interacted with, or this is active. Yes, we can interact with it and we can execute it or we can expire it. Or and I was saving this one for last, we can trigger it. And this is a special requirement that one of the developers at maker Tao was saying they wanted to have in the contracts. Let's say you enter a contract with a current stability 53, 3% and the coverage is 5%. That would mean you get coverage up to a percent? Well, he was saying that they actually want to have and I don't know if I have it pulled up over here. But the term for it is called a trigger swap. And a trigger swap essentially says, if at any point in time the stability fee exceeds the current plus the coverage. So if it exceeds a percent, if it's up to 9%, allow the FRA to be executed early and deep buyer will receive his coverage. So it's a little bit of a twist. But we're going to add it in. And we want to represent that if, if something is active, if it does get triggered and turn into a trigger swap and we're going to represent it with the state triggered. So we've got these data structures. That's great, right? But how do we set it up? And how do we interact with it? And how do we set up the formatting in such a way that we're allowing ourselves to build front-end components to work and interact with these various data structures. So let me go back. And I'm just going to copy over the remainder of these state variables. You can see from here, we just go to the constructor and talk a little bit about what each of them is doing. And we'll just start with this top one up here. So mappings are confusing. If you're not familiar with mappings, they can be confusing. If you're familiar with mappings, they can be very powerful. So it's a very good tool that you want to be familiar with to kind of get an understanding of how we're using mappings with this particular system. We're going to use this section here for the front end. This is merely a fun end helper section. And then this is more of a internal accessibility data structure. So we need a way to store all of these forward rate agreements and put them somewhere where users create them. We can set them up in an array. So we have a mapping of an address to a mapping. Confusing, right? And that second mapping is pointing various UN's to a forward rate agreement structure. So what does this mean? And then we have a second one down here that says all addresses are pointing to a uint8. So mappings allow any address feasible, any, any possible address within the Ethereum range of valid addresses to be mapped to. Another value mapping there. So for this particular forward count, which just checks how many forward rate agreements particular address is made. We might have Alexei pointing to three. And we might have OX be five. And then all of the other ones are initialized to the default value is 0. So what does that look like for a dual mapping or a double mapping, which is really just to double array. Well, it's going to look like we have OX a pointing to 10 XA, claims to have no y in the comments. The solidity editor is giving me suggestions. And o X3. And the one points to an FRA. And then the two lines to a different FRA, 1, 2, 3. And each U Int would then be pointing to a different FRA. And if we have the forward count for Alexei to be sorry, well then we know that 0.2312 unique FOR IRAs that will be created by a function that will add in later. And each time OX say, creates another FRA through that function, they will be incrementing their own foward count so that internally we can increments it and add the next new FFCRA 2, 3. And when that happens for so, delete this here. That was a pretty good explanation of mappings. Why is this a front and a helper? For what purpose does this section here serve? Well, let's say we want to load all of the FRA is created by everybody. And this is something that the admin accesses. If you're just accessing the interface with this this particular address through MetaMask and urine end-user Europe buyer, all you need to do is check what your forward count is in the smart contract and then iterate through all the forward rate agreements in this double mapping. But if you're in and you're not worried about anybody else's. But if you're an admin, you want to see all the contracts so you can expire them or execute them as necessary. And the only way you're going to be able to do that is if every time a user creates a forward, you assume see this mapping from address to bool is initialized to false. So all possible addresses or false. As soon as they create a forward, then you set it to true. And then you set in the active user list. And this may get a little confusing. Let's split it up. So it's like this. And also this dog's barking next door. It's breaking my concentration pair, whatever out. So the first time a user goes to create a forward, their address is false, but afterwards it's true. So if it's true later than you don't need to increment this section. And what this section is saying is that you INT 0 points to OX a uint8 LAN 2 000 XB. You went to points to 0 x c. And we can increase, or we can, we can actually iterate through this mapping by checking what the active user count is. And that way we can load all of the addresses that have a true user is active. And from there we can just on the front end, load all of the active contracts, all of the, the forward rate agreements for all of the active users. And, you know, maybe there's a cleaner way to do it. I actually think this is pretty clean and clever, but this is the solution that we're working with here. And then finally, I'm going to add in a couple of final state variables. For the addresses. We have the admin, that's who's creating the smart contract. We have a hard-coded address for the Coven Dai smart contract. This is going to allow us to transfer tokens from other users into the contract, tokens within the contract to other users. And then we also have Coven die, SF for stability feet. This is where the stability fee is located in a state variable. We can extract that variable from this contract and compare it against what the users minimum stability few years, what their max stability to what the admin sets for their max stability coverage. And as we talked about before, these are all parameters that IT admins going to set based on their risk profile. So this will be stored here. And then the final variable here. And not counting this one, is how much dye is available. For a buyer to come and get coverage with. So if the coverage is 5% and the notional amount that a buyer wants is 500. Die 5% of that it's going to be 25. Then the dye available better be 25 or more. If it's not. And then people can't enter into the contract. And there should be one more that I missed. Yes, There was this this bool for the Contract Law Act. This was this is basically if you're an admin and you want the contract to go on lockdown and you don't want anybody entering into it, even if there's die available for buyers to use and take liquidity from this, this could be because risk changed, the stability, feet change, something changed and you want to stop providing that coverage. You can cut it off and no other one. No more IRAs can be created with the terms set here. And then you can unlock it later if you want. Any active FOR is that are stored here, you can still interact with them if if the forward rate agreement main is locked. But you can't create anymore and that's the catch. And then this UN private card counter, I'm going to go back to open Zeplin that kind of explain what this does. It prevents against three entrances. So if we go to utils and re-entrant city guard, you'll notice that there is a private guard counter with a modifier and the constructor sets it till one. So this is how we can prevent against from re-entrant see attacks for various functions. That's, that's important and I'll show you which functions we will actually apply the non re-entry NC modifier to. I do have the non-rational modifier which we can pull and I just copied it straight from, from Zeplin and keep it right here. So I think the next thing we'll cover is the constructor of one of these contracts. So let's go ahead and pull that over. So constructor you set, which you set the terms that we've discussed in this smart contract design business requirements section. So you've got a flat fee, a monthly fee, a minimum or a maximum rate, and the coverage, these are all settable. So when we do port this into JavaScript, as you can see, you can, you can set the flat fee, monthly fee. It's it's all customizable. The only thing that we check for is that the minimum rate is less than the maximum rate. If those wherever reversed and Min rate was higher than the max rate. That could lead to some weird accounting. So we're not gonna do that. We're not going to allow that. We're going to protect the admins from themselves. And I think that's really, you know, you add a public modifier to this. You set the state variable admin up here to message dot sender. This is how the admin will receive the fees. Later on we're going to reference the admin variable just to, just to go over the flat fee, monthly fee structure. Once again, if a flat fee is 0.5% and a monthly fee is a tenth of a percent. One month would be 0.66%, months would be like five plus 0.6, so 1.1%. So if the current stability fee is 2% and you want to lock it in based on the terms that I gave. If it's a six month contract, you're actually locking in a three-point one because you lock into percent and you post the collateral for 2%, but you will have to pay 1.1% is a premium upfront. So effectively, if you look at net costs, you're effectively locking in a 3.2% rates by 35 percent rate in the scenario described. I think that about covers the basics of setting up the state variables that we want and the constructor. From here. We will go into modifiers and functions. And I'm going to stop the episode here. This will conclude episode dose. But in the third one, we're gonna go into where the modifiers, there's four other modifiers we're going to add. Those are added on to the functions. And then we're gonna go into the functions for the admin and functions for the buyer. 3. Functions and Modifiers: Welcome, welcome. We'd take my headset off. I don't need this. All right, so we're going to jump back into the smart contract design. This is a episode 3, a continuation of Episode 2. And we left off at putting in the constructor and putting in the modifier for this non reentrant agreement. So from here, we want to finish up any remaining modifiers that we made use for our functions. And then we would actually want to write out the functions. So instead of copying and pasting too much, let me see if I can actually rewrite a lot of what I had written before from basic perspective and then copy small pieces of code over. So in the modifier, there's only four other ones though that once is admin. Massive stars, cemeteries. If so, continue and modifiers. I know I write them like this. If I wrote them out completely and you would see look like this where you check the condition and then you check or you write an underscore and that allows a function to continue. So he's got his admin. Admin is locked. If the contract is currently locked, and if the contract is currently online. And we can do all of this by just saying. And of course, we want to add require functions around our conditions. That's very important, right? And for the locked, we're just going to take the contract locked and check that if it's locked, we want to make sure that this is true. It gets unlocked. We want to make sure that it's not true. And from here we have the function section, which there's really two main sections. You've got an admin, buyer and then a helper section. Helpers are functions that we may use for the front end for aren't going to use internally. Couple of internal things. Buyers is going to be all the functions that a buyer worldwide for interacting with this contract. And then the admin is going to be all of the functions that the admin once. So we know that a buyer is going to run to create an FR. And the contract needs to be unlock the full contract for that to happen. And you can kind of just start by creating the scaffolding for all the functionality you want. And then going on from there, we want to be able to create an FRA. We want to be able to execute them as foreign. And we want to be able to. And if it's the buyer, we don't want the admin interacting with it in any way whatsoever because that would not make sense. And it's important to protect against things that don't make sense in general. Oh, I see. I have two functions with the same name. You may want to execute and FMRA, we may want to trigger an FRA and we may want to expire in FRA. And aside from that, these are going to be the functions that we want from the buyer's side, from the admin side, I'm at the cheat a little bit and see what I see about I had wrote. So from the admin side, we want the ability to fill the contracts. And this is essentially allowing us to add die as liquidity. We want to be able to withdraw and die from the contract. And we want to be able to lock and unlock the contracts. So walk and Long since all his return true because sometimes you may want outside functions are outside smart contracts to interact with it. This particular one and say require. It's helpful. Maybe not in this particular system, but just as a general principle. And only these contracts can be called by the admin. This is why we have this is admin feature and place the modifier so we can protect against people from filling it up or withdrawing from it unnecessarily. And go ahead and add in the appropriate parameters for film, for withdraw and lock and unlock will not necessarily need any parameters. But we will need to check that the contract, if you're locking it, better than unlocked. And if you're unlocking it, better be locked. And then we can go ahead and change the contract. Walked stay variable two. Hello. My typing in two different places at once. Oh my God, I've never seen that. Magical. Alright. So contrast lot, we'll set that equal to true and vice verse. So we'll set it equals to false from here, 0. So this gets a little bit interesting. In order to add die to this contract or two with the try it, we're going to need some way to actually interact with the Dai smart contract that's unrelated external, this smart contract. And so we can do that with what's known as an interface. We're going to go ahead and copy this here. And we're going to plop it down there. And we're going to transfer to use transfer and transfer from within our fill in with the draw functions. And in order to enable that. Let's take Phil for example. Now fill. We'll be adding die to the smart contract and will also be increasing the dye available. We want this to happen at the same time. So the dye available is going to reference how much dye is available for a buyers who come along and take liquidity. And it's also going to be used as a reference for how much dye can be withdrawn from a particular, from this contract by the admin. So I'm just going to copy over what I've already done. I'll show you. So this is, this is how you create an interface and interact with it. And you'll notice that I have or require wrapped around it. This is because the function returns true if it occurs. And we can only continue with the fill function if we were successfully able to move money from the admins personal account to this smart contract. So the way you basically create an interface is referenced the interface name, and then in parentheses next to it, use the address that the contract that you want to reference. We have the covalent Dai smart contract hard-coded into this. So we can actually reference it and do a transfer from admin account to this address. This amount has specified here. Now, you may be thinking, well, that's seems really unsecure out this. How would this happen? And does the avid have to do anything beforehand? And the answer is yes. The admin needs to prove this particular contract to take die from his account and move it into here. So that's something that will be facilitated on the front end. And not something that will be facilitated within this smart contract, nor would it even be possible within this smart contract. I believe you would just want to reference the original smart contract when approve it. And that's actually what I have over here. You'll see it's deployed. And we're reusing the interface in the remix address to approve this address for this amount. But that's neither here nor there. And then finally, when we filled up the contract, let's say that half our liquidity was taken with put a 100 Diane and 50 die was taken and liquidity. Let's think big. You know, a $100 thousand was put in, 50 thousand die was taken in liquidity and move on our 50 K back as the admin. We can use this nice withdraw function. And what this is going to be checking for is that the dye available is greater than or equal to the amount specified. We're then going to change the dye available by subtracting whatever amount there was from it. And you can see in here when we filled it up, we add it to that number. So likewise, when we're withdrawing, we're subtracting from that number. Because we will be in situations where the contract will have more dye in it, then the dye available number will represent. And that's because we're using the contract as escrow. But we don't want to allow all the funds being taken out at one time. You have to be protected in escrow. So we use this die available in number as an internal accounting variable to make sure only the non unlocked die is accessible for withdraw. And instead of transferring from, we use the transfer function to say transfer from this internal contract to the admin for the specified a mountain. You don't have to approve anything because the contract itself is calling it. And all things have to come from within just to get to spiritual here. And since the contract is moving its own funds, it will move it out. So we have some buyer functions, but we're going to implement the helper functions first. It's going to get complex, mathematically speaking. So get out your calculators. Let's, let's go down to the algebra functions. I took a lot of this from the maker Dow's official smart contract, ds math. So even though we have this safe Matt library, in order to do mathematical calculations, we're going to be using some of the helper functions from that in using that side of the contract instead of the library. And you can actually see we have some overlap of using the safe math with maker Dow's own. This is a contract written by maker Tao. So we're using some of the functions that they already have in use right now. So the helper functions. And we're going to need one more thing. We're using a contract this time to actually access the fee that's held in a different smart contract. This is how we're going to figure out what the current stability fees on the Coven net for right now, but this is how we would access the current stability fee on the main net. And I have a bit of confusion understanding. So you can see we have dy reference, that's the name of the contract. And in order to do that, we use dive reference just like ERC-20. In parentheses we use Coven Dyess f. That's our hard coded variable up here. And think, oh, and we call it the public getter for dot phi parentheses. And that's going to get this. As I scroll down. That's going to get the fee that's held in this public smart contract here for the CO Vaughn. And I didn't understand exactly how they arrived at this phi variable. Like if we look at Maker tools, this stability fee, it says 3.5% here, right? But that's not what's actually in the smart contract. The stability fee is actually this variable right here. And I thought to myself, how in the hell am I going to get this variable? Into that. Because we need to use this to say, well, we'll move out of a 100 thousand die, will move 3500 guy over here, right? How did you use Anja thousand die? And this variable to say, Well, no, if 3500 over. And I, I talked with the developer a little while ago and actually found out what this number really means. And this is saying that this is the per second interest rate accumulation for the stability fee. So if you imagine that this is one for 1%, and you think about how many year, how many seconds are in a year. That's what this is representing. And it's saying that if you compounded this number every second, say you multiply this number by itself every second. For an entire year, you would get to 35, five. This would change from one to three. Which is and confusing too, because then you look at this and it's 1%. But, but here's the, here's the helper function that actually allows that conversion to be made. So it's called our pow. And we're saying that there's this many seconds in a year. And what we're gonna do is get that fee, get that phi value, right, is referring to this number right here. And then I call this function the real fee. We're gonna do our Pao of bat value and run it through this equation right here, which we can save this famous algorithm. This is they, they have documentation on here too, which is nice. So this algorithm is called exponentiation by squaring and calculates x to the n with x is a fixed point and n as regular unsigned, it's o log n instead of O n. For naive repeated multiplication, that's nice. And he said We would just use this equation to multiply the current number and multiply it actually exponentiated. So we're taking, yeah, it's not even multiplying. We're, we're, we're taking the exponential of, you know, it'd be like two to the three, 15, 36, 000, 000 calculation and it's, it's being done in that leaves you with a number that has 27 trailing zeros or not zeros. If it's finer, precision, which it never is, it's, it's always non-zero is typically. And then we subtract. So, so this number spits out like 10, 99 because for some reason on the Coven main that this stability fees 10 percent right now. And they say, okay, so we're gonna spit out 10 999 with 27 trailing 0. So you subtract ten to the 27. This is just like that exponentiation. And then you divide it by 10 to the nine. And what that saying, I have I have my little whiteboard right here. I can kinda show this number. If you come out with 10 and 99, 75 for and you want 99, seven, whatever. You're going to subtract. The 10 to the 27, that's going to take away this. And then instead of having a 27 decimal number, you divide it by 10 to the nine. So 27 minus 9 is 18 and you get a 10 to the 18 decimal number. And this is what can be used to represent 9.97%. So tricky, tricky accounting. But we figured it out. And we can now use this real fee function as a helper function to say, Oh, well, this is what this value is here. And let's go to here. And in fact, I will actually show a demonstration of this real quick. And we're going to pull this and we're going to make a mad deploy the smart contract. Just so I can access this function and show you what I'm talking about. Okay, So this is just some funky mathematics going on. Really cool. I mean, you're, you're literally compounding the interest rate every second and using that to calculate a stability feet. And so it's, it's pretty neat. So remixes really cool in that when you do deploy a smart contract, it comes up as long as you mark it public, you can access it here. So this is the real field number that we get. And if I pull up this text, you can see that it actually measures. This is one person right here. This is to the 9.9% and this would be 12%. And just to, just to kinda give another overview of what I just did here, I had all the parameters mapped out. So and I just I just plopped it into the constructor. So I have my flat fee. I had my monthly if my flat fee was 1, 1% with actually, if you imagine like this, this is really what it looks like, but with 18 decimals, but you've got the decimal off the front. So monthly fee of point 15 percent, uh, Min rates of one for stone stability phi max rate of 12 percent stability sheet, it's always going to be 10 percent on the Coval main that so as we're doing this, we're just going to stick with 12 percent or we have to have a number greater than 10 percent to accept it. And then I have coverage at 5%. So so I think that about explains that what we haven't gotten into. And I guess I can go over the remaining helper functions. These are just mathematics based to do this real PHI calculation and listen them heavy mathematics right here we're talking about. This is just shorthand for view. When you're creating an FRA is a buyer. Maybe you want to view a couple of statistics values before and turn him in. And this is something that we can use on the front end to display these values to a potential buyer. This will be the let me just go look up. This. These two functions are referring to the base die of the buyer that has to be deposited by the buyer to enter into a forward rate agreement. This is VFB is saying the base fee that the buyer has to pay to enter into and that far a agreement. And then base die. I have it as S, But I changed the seller to admin. So let's change That's a D V D J. And I'm going to change that over here too, just so I don't get my contracts mixed up. And this is basically saying the base STI that the admin has to put up. So, so let's, let's just kinda dive into these functions and explain how they work. You can pass the notional amount. So let's say you pass as the notional amount, this number right here. And we can even go down and use this. So this is 100 with 3 by 18 leading zeros. So that means that it's a 100 die is what it's representing. Actually, I think it's 10 DAI and I can check if I click this approved function, how much I would be approving a contract for 10. So it's 10 with 18 zeros following it. So if I want to see how much my base a dye that I have to put into a contracts for a for the specific terms of this edit 10 to cover ten notional amount. It would look like this, which obviously it's confusing because there's so many numbers. While really what that saying is. And I had to things up for display here that I would have to put up almost 10 dy. This might be a 100. So if the notional is 100. Oh yeah, because it's 10 dy, so I'd have to put up almost one die. That's what it's saying. Okay. So if I wanted to calculate the base dye that I have to pay a fee, I can look up this and type in how many months if I want to see how much would be put up against my collateral, I can type in BD. I can use this new VDS. And this is what the base die of the seller's going to be giving me. I wish we changed it to base die admin for consistency purposes. And, and I know it looks really weird looking at these numbers, but this is why we don't use remix for a user interface. We're going to make a very nice front end interface for plugging in these numbers, interpreting him, and creating something that average everyday users can understand. Because if we make, if we just leave it complex like this, no one's going to be using it or we're restricting it to vary. But a limited amount of parties. And we don't want to restrict these gray financial applications to a limited amount of parties. We want as many people out there in the world actually having it access and easy, easy to understand access to it. So I think I've covered just about everything here. Maybe I'll just cover the mathematics of this real quick. If you see the no shows a 100 and you multiply it by the current stability fee. So if it's a 100 times 10 times 10 percent, then that's ten die. And you divide it by 10 to the 18. You do that because when you multiply it by the current stability feed that adds on another 18 zeros. So you're moving. The 1800 is here. That's why you're going to see multiplied by something and then divide it by that, your basic. So how much is the the seller putting up? If he's putting up, if the contract is for 5% coverage, then you say the notional for a 100 and it's 5%, would be five. You then you divide it by 10, 15, 18, then you have five represented in that 18 decimal format. And that's going to be subtracted from the die that would be available in a contract. And here, there's no dye available in this contract. But when we get to the end of all of these explanations, that's when the magic happens. You can actually start showing how money is transferred. We can look at Coven either scan and show all the fees being said. But we gotta get through this grueling and complex explanations about how we're, how we're deducing all of these, these equations and numbers and things of that nature. So we have, okay, let's, let's go through the buyer functions and finish up this. And then in the next step is so we can actually do episode or examples for various risk management rates and parameters. And we can show examples of admin putting it up a buyer coming to it at buyer executing. Actually, we can't show that because it would take three months and we don't want to sit here watching paint dry, but we will get to that next episode. So let's finish up these buyer functions real quick. As you can see here, I have two different parameters to make it very simple and very simple to create a forward rate agreement. And as long as you have a pre-approved die to be taken, all you have to do is say how much dye you ought to have covered. Like if you've taken out of $100 thousand loan than the notional says you, you want to cover that much. And then the months will change, affect the fee structure as well. What we're going to do is actually just copy all of this over and I'm just going to run through each function. And kind of describe what each one is doing. So so we've got notional months as the perimeter. We have the admin cannot create an FRA. The contract must be unlocked. And we have this beautiful non reentrant function or a modifier which basically prevents other people from coming in. And here's a great example of why you want the non reinsurance and why this needs to go on to withdraw and they fill as well. We looked over here. I have it on the withdraw fill unlock, lock. Every function is on lockdown. Ion actually think we need it on here, but just for consistency purposes, we'll put it over there. So non reentrant what that is saying. And if we look at the modifier, will see that it increases that guard counter by one and sets the local counter to the guard counter. And then it proceeds with the function, comes back and says, now when you have completed that function, so let's say now you have completed your withdraw. It goes back and make sure that the local counter is still equal to guard counter. And this is so someone else can come along increased guard counter. Because when they do that, this require function would actually throw an error and it would have revert every state change that had happened prior. So when you do that so that someone can't create an FRA and in the middle of it, they're transferring dye into the contract. But then meanwhile and dy is being posted against it. That's already in the contract of meanwhile, the admin did the non-branching functionalists there. Meanwhile, he's withdrawing all the die that would have been posted and locked against your collateral, that that would be bad. That would be very bad. We don't want that to happen. So we added in these non reentering modifiers off of every pretty much any function that's going to be moving around and accessing tokens on other smart contracts. Even internally. So very important to have that non reentrant function or what I've just described, couldn't fact happen. So let's talk about what happens when we create an FR it. So I say, okay, I want to I want to make one for you. No, I took out a $100 thousand loan the other day and I loved to cover it for six months. So first things first we're going to check to make sure that the months greater than 0 and less than or equal to 12, we don't want there to be this locked term for longer than that. In fact, we could even create more flexibility in this by saying the maximum months that will be covered. It is specified in the constructor. But I don't see I don't see people wanting to offer a more than 12 or less than 12. But if that's the case, then this contract could be easily modified and we can change this require function right in here. But we're going to make an assumption that any, anytime between one and 12 is suitable. Then we're going to say the current stability f0 is equal to this real fee. That's our helper function down here. We're just going to return what the current 9.99% in this variable. Then we're going to say, is this greater than or equal to r, minimum stability few that we're going to cover. Is it less than or equal to the maximum stability few that we're going to cover. And if so, then has this user created a forward rate agreement before? So remember how we were getting into the front and tracking for all the contract, all the FAR is that had never been created. Well, when someone is creating an FAR, we check if the user is active in that mapping variable. And maybe, maybe it's important to show how you access one of these. So you see that you, you, you use the variable and then if you wanted to access address over x a, you put in brackets next to it, and then you get the uint8 variable. So, and if you have a dual mapping, then you would do OX say D1. And then in a struct, you get the value by doing a dot and saying start with X. So that's how you access that variable. Obviously, you can't do it right there, but to give you an example. So if the user is not active, then we say that the user is active. We set that to true. So that way if they make a second one, then this is going to skip over completely and not registered anymore. We say the active user list of the active user current count. So it starts at 0, is the message dot sender. Then we increment this value so that the next time someone unique, another unique buyer comes along, they'll be in the one slot. And this previous message dot sender was in the 0 slot. And then we can use this active user count variable to iterate through this mapping. Four from 0 to one or from 0, it's a ten if we have 10 unique buyers. So this is, this was just a nice tool for the front end. And here we are creating a struct for the forward rate agreements double mapping variable. So we reference that. We say for the message dot sender. And then we use another bracket to reference the UN ID to the FRA struct. And remember how we have that forward count mapping for message dot sender. Just like we did up here. We're going to use, it starts off in default value 0. After this goes through, once we increase it to one, so that there will only be one unique FRA, struct in the 0 element. And then the second time there will be one unique one and the one element and the two. And I know I'm putting up three and it's two, but the third spot is the two element. And then we use this notation to actually instantiate a struct. So you say FRA, which we can see this chart here. And then we use parentheses and sequentially go through each one of these variables and assign it a value. So we've got to start a unix. So you can see we have the star Unix now, DND Unix now plus there's 2,002,592,000 seconds in a month. So we say however many months It's four. We will say the end unix is in that times one, that times 2,000,592 thousand. And here we have our grace period of one day for the end cutoff Unix, There's 86400 seconds in a day. We have the notional value which was provided in the perimeter. We have the current stability fee. And wish was gathered by the helper function message dot sender, whoever called this function is now being set as the buyer or the borrower. And then we have the state, forward states. And this might be over identification management, but I'm throwing it in there. It might be easier on the front end later on. So I do things that are easy, right? And it costs a couple extra gas that's like at a penny here in that. So and then we have this state, the forward state, we set it to state dot active so that later on we can execute it and do things because initially it is state dot inactive, which is what we want, because we don't want anybody interacting with a dot inactive. Since this is going into effect, move on a, set it up as dot active. And then we increment the forward counts so that the next time around this forward count message dot sender is in the second, third element. And he said, now the, these are some calculations that I said that we had some helper functions down here to represent. But this is just internal accounting to say that, okay, Well, the base dive at a buyer has to put up is equal to whatever the notional value is. Current stability feet. So if he had creditability fees, 33.5% and the notional is 100 thousand, then this is saying that the buyer has to put up 3500 right now. And then their fees going to be whatever the flat fee is plus the monthly fee times the months. So if it's total, this comes out to 1%. Then they also have to put up the 4500. Technically not a 1000 extra, but you're not putting it up there, sending it to the buyer. The admin, I should say immediately. And you can see that down here. So the other calculation would do is say that the admin who has filled this contract with dye has to put up this much wherever the coverage, the coverage is 5% and the stability fees degree and a 0.5% than the buyers putting up 3.5, 3500 and then the admins putting up 5000. And we want to make sure that the dye available in the contract is greater than or equal to what the base die admin has to put up. Because right after we're going to be subtracting it and saying this is what's held and locked in for this specific forward rate agreement. If we didn't do this, then you can see that in these next two functions, the buyer is sending this address, their base value, and he's sending the admin fee. So if he sends all of his dye into this contract, but we don't, so we don't lower this amount, then the admin could just come along and take his money out. We don't know. We don't want bad. So so this is how you create it. And that far, you just store it into a struct. You manage this internal accounting and then the buyer post as collateral, and then the T, little liquidity that the admin has already put in is now reserved for this particular agreement. And got three more functions to get through. We have the execute a forward rate agreement. So we have the forward rate agreement ID and the buyer. And remember in that double mapping, the way we check is to say, okay, if we're looking at for a forward rate agreement for this buyer and we want to check in the 0 element. And we're gonna get to value of n Unix by doing dot in the Unix. So this is how we access values from a particular agreement and how we also put in accessibility features as well. So we're going to do require the color is either the message, the message decimeter is whoever is calling this function. They have to either be the admin or the buyer that we're accessing. And this means that one particular buyer cannot access someone else's buyer accounts. Only the Admin can execute f IRAs or the buyer itself, but no one else can, can call this function right here. So that's our safe guard. And of course it is a time sensitive manner. So we're going to check if the current time is greater than or equal to the end unix and that it's less than the end cutoff Unix. If I wanted to be a little bit nicer, I guess I could put this in that gives everybody an extra second. But I think that's too generous. So we're just going to leave it as less. And We also want to make sure that the contract, the forward rate agreement, is in the active state because we don't want something that has already been executed, to be executed, again, very bad. And this would allow people to execute them multiple times and take all the money out that belongs to other people. So we don't want that. Here's some variables that we gathers for just making the rest of this easier to program interbreed, we get the current stability feet, the starting stability fee from the forward rate agreement, The notional amount. And then we change the state of it to state dot executed. And this is nice because again, if someone tries to come back to this function and they can't while this is running, thanks to the non re-entrant modifier, things are just done sequentially at that 0.1 after the other, but not simultaneously. So we set this to executed and we prevent it from being called again. And there's 22 possible payoffs. This is why the, is where the fun happens, is where the money move it around. The current stability fee could be greater or equal to the coverage plus the starting stability feet. So if the car stability, she's 10 percent and the coverage was 5% and the starting feet stability fee was three, then that means that the buyer needs to be paid out his full 8% coverage. So he's going to receive a thousand die. Now that's not going to be enough to pay the 10, 1000 die on the loan. But that's pretty damn close. And that's what he was paying for. If there's a normal distribution, then what we do is we say the total amount to be paid out to the a will be the coverage and the starting stability sheath, dry it because this is, this is what we would be paying out in full to the buyer up here. And we say, the buyer will get paid out what the current stability fetus is, and whatever is remaining will go to the administrator. So this is where certain mathematics could occur. If the current stability fees 1%, then that means that the end, let's just say it was 3.5% to start out with. Then the buyer only receives 100 die back. And since total was 8 thousand for this FRA, then the admin gets 7 thousand. So that's good for the admin. He locked out on that one. And then we transfer the buyer is buyer pay. And we transfer the admin, is admin pay. Likewise, if it was 6% and the buyer would get paid out 6 thousand in the ABA would get paid out 8 thousand. Actually, if it's 3.5% with 5% coverage would be a 500. So anything I did with a 1000 meth, use 8500. So that's a executing the FRA. Now, keep in mind this has a 24 hour period here to be executed and something else could occur where it can be triggered or it could be expired. Let me just go over expired real quick. It's basically the same thing. Checks that the admin or buyer is the color. And it checks that it's greater than or equal to the end cutoff unix. And that it's in the active states of something hasn't been executed yet. So basically taking the values, all this does is return everything to weigh. It was initially it says the buyer is going to get paid his starting stability fees. So if you put 3500 n, you get 3500 back and the admins going to get his coverage back. And then the only other interesting thing here is the trigger FRA. So this could be called in between the start and end Unix, Right? So it's a little bit anxious thing, okay? And you can see here you would be in the active states, but it would go into triggered. So it's providing a little bit more information about what happened. You know, sugar goes to triggered execute, goes to state executed and expire goes the state expired. Now, what we're going to check is we're going to get the current stability fee. And we're going to check that it's greater than the coverage. Plus whatever the starting stability fee is. I'm changing this because we already have that variable. It has a local variable and we don't need we don't need to spell it out again. Yeah. And yes, since it's since it's a max payout, as long as the current stability fees greater than the coverage and the starting state voting fee. So if it's 10 percent at some point in time, then then the buyer is going to receive his stability feed plus the coverage and you can go pay it out. So yeah, That about covers the whole smart contract design. And we're going to conclude episode 3. Here. Surely have numbers somewhere and we're down here in number down there. The next one, we're actually going to run through a lot of these contracts and we're going to look at what it might look like to issue something at 5% with 10 percent coverage or really any random crazy numbers. And we can look at fees moving around and all that. So yeah, let's get to it. 4. Testing Contracts: Welcome back to Episode 4, where the moon comes up, some goes down, and the smart contracts, they come out to play. So we've got, we've got two browsers open right now. We've got chrome and we have brave, the Brave browser. And what that's going to allow us to do is to actually create a contract through one MetaMask accounts. This is going to be on OX be 134. And on Chrome we have OX three E6. For. Now, we're just gonna do some small interactions to kind of demonstrate what it looks like to interact with one of these contracts. So this is going to give you an understanding of what we want to build for their front end. Why we can do everything through remixed, that's great and fantastic. But the end user really needs something a little bit more powerful. Just like I need something a little bit more powerful. Kidney fueled and wouldn't you know, it I've got my fueled by Kathy and a theory of coffee mug and it's 11 PM at night and we're chugging down. The coffee is very good, especially in the cup, tastes very good in that cup specifically. So let's go ahead and let's use this 300 eith account. It's actually on Chrome and a so I'm going to leave that as the buyer and we're going to launch it through the Brave browser. So I have, when I go to the constructor right here. And let's do this. And you can kinda see what the parameters are and we can deploy it right over here. We just have to enter in the parameters right into this box right here. And I've got a notepad which has some nice variables actually lined up for us right here. If we wanted to. Let's say we just want to add in some custom parameters, right? The flat fee, the monthly fee, the minimum stability rate that will accept, the maximum stability rate that will accept in the coverage given what I have in this specific line right here is 5% coverage, 12 percent maximum stability rate. You need it to be above 9.99% because that's what it is on the covalent network. Surprisingly enough, we're not going to insure anything under 1% because, I mean, look, if it's, if it's coming, you know, even 2% were not insuring you get out here. And we're going to have a 1% flat fee with a point 15 percent monthly charge on top, and this is paid by the buyer upfront when they enter into a forward rate agreement. So I think this is good enough. So let's go ahead and copy this over. And you know what, let me talk about a couple of things. When, when I say this is 5%, you might be wondering, what do you mean 50 percent? Well, let's say we take one, just the value of one with 18 decimals. And we go 1, 2, 3, 6, 9, 12. And we compare that to five. If you notice, if we put a 10 in front of it, that would be 1.05 per cent. But since it's 000 5% and you just take the zeros off from the front. This in effect is 5%. And yeah, we can do the same with these other variables. That's 1%. So that means that flat fees one per cents, this is pop 0.15%. So this is a portion of what percent, right? And this is minimum of 2%. So. So this is just for thoroughness. This is 12% dry air. It's the largest one. And it looks a little bit. If we had a one in front of it, it would be 1.12%. But this gives, gives a little bit of insight into how these numbers were created and how we'll use them later to actually do calculations about how much dy is o and things of that nature. But what we can do is we can copy it over and you notice how there are quotes on the numbers. If we tried to submit something without the quotes, it actually wouldn't. I said it wouldn't deploy. And then diploids. But if the number is too large, maybe because these are less than 18 decimals. If the number is 18 decimals are more like an actual one or ten or 100. It will not allow you to deploy because JavaScript can't handle big numbers, but it can't handle strings and converted into big numbers in the back-end. So That's why you'll see all of these numbers anytime I use them, they have quotes around them. So let's go ahead and deploy. And it's going to cost a whopping 0.003. That's a lot to, to, to execute. And something I'll pull up is well, is the Coven Dai smart contract right here. And you'll notice that there's a drop-down menu and remix. And you can actually set this to the ERC-20 interface that we have at the very bottom here. And I add it in the approved function into the interface so that we can improve the forward rate agreement, smart contract, a certain amount of dye. And we can take, we can, we can allow it to take from us. So here are all the fantastic buttons created by re-mix. Top of the line interface. All the blue ones are static variables. Like if I click on the flat fee and see this if I click on the real fiqh, this is 9.99%. With this whole crazy calculation when we're talking about with our pow in the de-reference and stuff like that. What's the min stability fee was the max stability fee. All these hard-coded address is how much dye is available? Paul? None. So we're actually going to have to fix that. If as the admin we want to lock and unlock the contract, we can do that here. Lockett's is the contract locked? Know if I confirm it. As soon as this approves or confirms that the contract locked will turn from a false boolean to a true boolean. And we're going to want to unlock it because otherwise, once I fill it up with some dye, buyer wouldn't be able to come along. And actually a month contract or I'm sorry, create a forward rate agreement. So first things first, we want to fill this contract with some dye using our admin fill. And in order to do that, we need to use that address we copied from the Coval and die. And we're going to use the ERC-20 interface, have that selected and click Add address. And from here, we can approve a specific address along with a certain amount of tokens. So if we click this button, it's going to copy the value of the contract address for a forward rate offering. And we can tell how many coins we want it to take from us. I'll set ten and then 18 decimals. And just to show you that I'm crazy here, creating a bunch of zeros is going to say by proving this action, you grant permission for this contract to spend up to ten of your whatever on the main that it would say 10 die or Ten, whichever tokens were working with. As long as that token is 18 decimals. Funny story. The USD coin stablecoin is six decimals. So if you were to use ten with 18 leading zeros, let actually be approving 10 million or so. There are 10 million, you know, that's not something you wanna do. Just know I want to improve the amount that I just realize. We don't even need a headset. So we're going to, we're going to approve that 10. And as soon as we do that, we can actually take that same value. And we can go ahead and fill the contract with that much. You can see that this could be automated really, really easily through it, through a front-end interface. But it's just the matter of enabling that and building the appropriate tools. You see, you see I have to like watch for this function to go through. We could create a button that says, as soon as it goes through, it changes colors from red to blue. It's something that I like to do. Now that we've approved the forward rate offering for that amount, we're going to go ahead and fill it. And we'll go ahead and do that. And as soon as that confirms, then the dye available will increase from 0 to 10. And as the admin, we can immediately withdraw that amount. But we don't wanna do that. We actually want someone to come along and get coverage from us for a specific amount. So now it's approved. We can check how much coverage, how much dye available there is in the contract, then die. And we will say, Well, you know what? Let's go to Chrome. And let's go enter into a forward rate agreement. This is a totally new account. We're a different person. I wish I had a hat or something to, you know, say RA. So now we're the buyer, right? Totally different guys coming along and he's saying, You know what? I've got a lot of dye that I took out a loan and I've got a I've got to protect myself from this crazy stability fee, right? So we're going to go to the forward rate offering and we actually have copied over the contract code into this file over here. So I can just use the ABI that's automatically generated application binary interface to interact with all of these functions of state variables. And so if I click this, it says Die available. Who's the admin OX B13 for? Definitely not me. So we're going to great enough RA, and the first thing we need to do is approved. So if we look at the Create an FRA, we see that it's going to require that the months are between 0 and 12. The stability fee, if the current one is in between the range we know it is cobalt, It's fixed at 10 percent. That's that's not going to change anytime soon. It will run through this little piece of code that checks if we're an active user, we're not, we haven't created a forward rate agreement yet. But after you do, We will be and we won't run through this code again the next time we create a forward rate agreement. Here, we'll see that we're actually creating the struct and putting it into our specific double mapping of our address at our forward count, which will be 0, after which point it will be one immediately after. And it's going to require that we send a certain amount of dye into the contracts, 10 percent to be precise. Of whatever notional amount because that's what the current stability fee is. And we also have to pay the buyer of f0, which is 1% plus 0.15 times however many months. So minimum is 1.15%. Maximum, it could be 12.8%, so could be really high. So what's first approved? The contract will go up to provide die. And we will approve this contract to spend up to, I guess 10 of our dies. Well, gosh far that was a nice interface, so I didn't have to enter in on these zeros each time. Here we go for approving 10. And as soon as that happens, we will actually do a couple of small ones where the notional will be 10. So we're only putting up 10 percent of bad, which would be about 1 dy plus the fee. So we'll actually create a couple F IRAs and see what that looks like on the CO von ether scan website, great website. And it does look like I've approved. So let's go ahead and enter in that notional amount of ten and creating that FRA for three months. And it's very cheap gas wise to actually create a forward rate agreement. Very, very cheap with architecture we have designed. In other architectures. May be a little bit more pricey. And boom, it's already there. Wow, look at that. So we can, we can check a couple of things on this interface. First, what is the dye available? I, it's decreased. Bye, bye. Five die because there was 10 dye in there, so now it's 9.5. So what does that mean? That means that if our notional amount was ten and the stability he currently on the network is 10. And we put in 1 dy, which is 10 percent of ten die. And the contract automatically locked half a die because it gave 5% coverage. So we, as the buyer locked in one die and the contracts set-aside 0.5 die. Now the numbers are going to be a little bit exaggerated or weird in this situation because on the Coven network, the stability fee is really high. Obviously on makers of the main that it's like 3.5% and usually it's 2.5% for a long while it was 0.5%. So we're not going to see this, you know, buyers putting up so much collateral and the contract requiring only putting up a little bit of glider, Let's usually going to be reversed, which is the coverage right here, 500. We can look at the forward rate agreements. I could actually copy my address. My forward count was at 0 and is now at one. And if I go to the one elements, what am I going to find? What do you think? I will find that the one element, absolutely nothing, because everything starts at the 0 element. What do you know? Does a test, by the way, I hope you passed. So I think we entered three months. So the start Unix, it right now is that the end unix is the when it will expire. Technically when it will go into the cut-off mode when you can actually executed, that's not the end. Unix is an expired, but how much is the notional amount was ten die, what the stability fee was? 9.99% starting. So we're going to compare that against a future stability fee, which on cobalt It's probably never changed. Forward state, you see how it's a it's a one. And we were talking about how it's representative as it Unit 8, where inactive is 0 and right here, inactive is 0 and active is one. And it's got my name is Scott, my address and they're so close up as my name right there. So now that we have I don't think there's anything else. I mean, obviously my address is active, but I don't think we need to look at anything else there. So let's go to the Kovach ether scan and look at what it took from us as a fee in die. And now go ahead and copy my address and look at the internal ERC-20 token transactions. These were some that I have done earlier. Also covering ten die. And as you can see here, three months. That would, that would make sense in the context of base stability. Base fie, fie, fie is 0.1 or 1% and then point 15 percent for three months. So if on covering, what was it ten die, well, then 1.45% of that one plus 0.15 times three would be that point 145 value. And notice I did not send it to the contract. I actually sent it to the admin directly. So this is a fee that I paid him to provide that service to me. And then the rest of it was putting collateral within this contract. And we can see here, but by the admin actually put in his ten. And then I came along and actually put it in my, my, my one to cover ten notional. So I think that about covers it for interacting with this type of contract. The only other thing I would like to show is perhaps view BDA. How much has to be put up for a specific notional? 1, 0, 0, 0, 0, 0, 50 has to be put up. I didn't even know what this is referencing. Let's let's actually go take a look and see what I'm talking about here. View BTA. That's how much the admin put up. He's putting up 5% because that's the coverage for this particular contract. So if we were just looking at the number 1 00 00, 00, 00, 00, 00, 5% of that would be 50. So this is always going to return 5% of whatever number is put into here. Now, what does the buyer have to put in for a 10000 amount is to put in ten. So he only has to put in 1%. And that is the fee. Whoops. I meant to enter it into this one. He has to put in almost 10 percent, 9.9%, and then the buyer's fee for a thousand would be 10. So he's effectively and I'm assuming this has the months as well. So for three months, it would be 14 or five months, 17 or 12 would be 28. So collectively, if I wanted to cover 100 of something, this would just be a simple way of looking at it and saying 99 plus 28, that's 127. And that would be 12.7% to cover a 10 percent stability fee up to 15 percent. And I don't know what the mathematics, I don't think that risk management makes sense there. But released showing the functionality of how it would work and these same equations get taken into account when actually creating an, an FRA. So yeah, that's perfect. And I think from here, we have just about covered creating the designing the smart contract, writing the smart contracts, and testing it on remix. And we just want to move forward and start porting this into our Meteor application and actually building a front-end interface. So this is where it gets really fun because the smart contract design is the tough, brutal, complex part. And from here we can actually enjoy the pretty things and the shiny buttons and all that exciting, fun. So let's conclude episode 4 here. And an episode 5. We'll hop into creating our Meteor application. 5. Installation and Scaffolding: Welcome to Episode 5, or we're actually going to start diving into the more fun part of this whole decentralized application, derivatives development, platform. Chairs. I've got my coffee mug back in action again. So first things first, you're going to want to get meteor. So you can go to the meteor website and install it. One thing to note is that it says first install chocolaty. So we can see what that looks like. So you're gonna go to this website installing chocolaty, and just follow the instructions on here. And once you have that, you can do Chaco install Meteor, and then you can actually access meteors through the command prompt. And I have a projects directory, which I just put on my Meteor applications into. And we are going to start out by not following the tutorial, but by creating a meteor are react based application. Now, by default, meteor installs blaze and you really don't want to use, I don't want to use blase. I like React. I've been using it a lot. And one of the new things in Meteor 1 a, which I just found out about recently, is that it allows you to install something as a React application. As of Meteor 1.8, you can choose react instead of glaze. Excuse me, I've got a frog in my throat. And that's going to allow us to work with install a couple of the React dependencies and we can modify it. So, so what we're gonna do is we're going to create the React application. And we're going to break it down into its basic bare-bones necessity. And then we're going to build it up with the packages that we want to use, or the front-end library. What three JavaScripts and the Madeira flow router. And we're going to set up Semantic UI. And we're willing to create some of the scaffolding necessary for this project. Just a little bit of it. Most will be saved for when we actually start implementing certain components. And, and we're also going to do the flow routing to begin with. This is a nice way to set up and we may even get into doing a menu. We may even do a menu book, but probably not. We're just going to get the basic setup. So we have our application ready if the foundation is laid and we can build on top of it. So let's create a new media application here, create dash, dash, react. And we will call it maker Tao. It's clever name, right? And that's going to take a second to, to, to create. And, and hopefully you have WebStorm ready to go. So as soon as and remember WebStorm, It's made by IntelliJ EJ, like intelligence, but instead of chance at j. And WebStorm is the name of the JavaScript IDE. You can go and get a 30 day free trial. Setups. Very cool, highly recommend using it and go to My Projects folder and we can see the maker Tao application we just created. And I will pull it over here. So now we've got this nice IDE for working with a Meteor application. So let's take a look at some of the folders that we've been given. Start at the top. The Don meteor, that's all the core meteor information you've got. Really the only important one is packages. You've got versions of various packages. But we really will not use this folder too much. Aside from figuring out what packages we have installed, the client, we've got little bit of CSS formatting in here. Nothing too crazy. Let's go ahead and bump that up to 18 pixels. I'm going to use this. We've got the main HTML. It looks like there's a div in the body, and I'm guessing that's how it's going to render one of the components to begin with, but we're not going to be using this format fact. Well, i'll, I'll leave it for right now to give a demonstration of starting the application and looking at it running in a local host environment. But we will not be using this format of rendering components by giving a div id id and passing the components. And and we've also got the main.js sex where it looks like this is where it loads the app components from imports UI app right below, and renders it to that react target right here. So let's see what the app says. Welcome to Meteor. Hello info. And it looks like it also loaded the hello and the info components and passed it through this. Now, if we want to see what this looks like, what we can do is we can in the directory, if I call meteor here, nothing will happen. But if I go to this new method, our directory, and type in Meteor, it's going to take a second to load. And then we can actually access the application from a localhost 3000, localhost colon 3000 product because this is the first time it's loading up. We'll let that go for low bit. And in the API section under imports API, there's a links dot js. And it appears that this is where they're loading Mongo and they are using MongoDB on the backend. I do believe we are going to be using MongoDB. In fact, I have two fantastic books right here which I highly recommend. One is Mongo DB fixed one, that all the juicy information, right? And then the other is MongoDB applied design patterns. These are, these are just really rate if you're trying to figure out MongoDB, not from here, I tell you what. You read those books from scratch. And never having used Mongo, you'll learn everything you need to learn. And they are very comprehensive. That's for sure. And it looks like our app is running at http localhost 3000. So if we pull it up, we have welcome to needier. Click a couple times. We've got some links to tutorials. Meet the guidelines. All that fun stuff. Yeah, and we're done. We've we've done it. We've got a long road ahead of us. But this is just the very beginning. Let's run through a couple other things. startup. If links dot find, dot count is equal to 0, it's referencing links from the imports AI. So it's referencing this Mongo collection. It's saying if it's 0, insert these links. Well, what if it's four? Or if we change that to four? So you can see how as soon as you change something in the application, the command line interface starts re-rendering the whole application. And look at that. There's four more links now. So it does look like it was checking what the current count was. And yeah, so so anyways, we're going to tie this all down and build it up from scratch. So we want to just get rid of all this stuff. Tests looks like something new that they've put into the Meteor 1.8. I don't use tests. Testing is Sally bought. And then the final thing that is important to know is the package.json has all the MPM packages that dependencies. I think there's, there's packages here like React meteor data, and then there's dependencies. These are npm packages. So we can just really remove a lot of this stuff right here. We don't need a whole lot of things in our application. So let's start tearing down and the leading, everything we don't need. We don't need this links. Mongo collection. I don't even want to have a collection opener for right now. When we do need a collection, we're going to come back here and create it, but we'll be deleting it for the meantime. And one of the thing to note, if we do want to access the Mongo database that we're using in our prototyping application, what we run locally, we can actually go to the project directory, wall dy The Meteor application is running. It has to be running first before we can type in Meteor Mongo. And then we can look at what was the name of the collection links. We can type in db dot, dot, find. And it's going to show everything that has been created and we can type them. This will be pretty command and see everything nicely written out for us. And if we just want to remove everything, type in this solid deleted, we've lost everything. It's irrecoverable. So we'll be using that a lot later once we do get into the Meteor Mongo applications. Now, if we deploy the application, we can't actually access it through this means this is more like if we're running it on localhost and we're testing things out. It's just stored on our database for us, but we will get rid of that. Well, you know what? Let's just delete that. Obviously that there for right now. We have the app hello info. We can get rid of it. This, That's paths and this and deaf and that we don't have bad anymore. You can get rid of this and that. And we're not using this anymore. And that should about do it. That should do it. Now, what we're gonna wanna do next is actually set up the semantic UI, meteor, official Semantic UI integration for Meteor. So let's go ahead and follow the instructions to get this user interface library imported into our application. It says if we're on Meteor 1.3 plus, we want to follow these instructions. And keep in mind that you cannot install a package if the application is running. So we can hit Control C to close our application running in the command line prompt. And we can typing these commands over here. And I'm assuming, oh, there it is. Meteor add Semantic UI. So we can add multiple packages in a row and hosts CSS, jQuery, and falling to package.json. And we'll go ahead and do that. Think I need to copy this smaller portion here. Very good. The autoprefixer dev dependencies, dependencies that I wonder if these two need to be combined after saving the changes to package.json run, meteor, npm, install dash, dash save, you know, make actions more concretes. Okay, let's see if this work browser list who could fail on marine Browser List greater than three config used and other tools. I don't think that's going to be an issue for us. So usage create. Now, it looks like it even formatted all of this stuff for us after we ran it. Very good. Create an empty custom dot semantic dot JSON inside the a client folder somewhere in your project client lib, Semantic UI, custom dotnet dot JSON, start BY directory. Let's call it live. And I'm not going to make a subdirectory, I'm just going to do what was its semantic? Custom dot semantic dot JSON and our lib folder. And it says Start media. So I can do that. And you have to while loading meteor npm pure requirements not installed. So it looks like we need to install a couple of additional MPM packages. Things have evolved, new MPM packages are required. Let's go ahead and cancel that out. Your NPM installed posts this S at 5.2.18 posts this mode bash through that point 2, 0, Save, and mesh. Take care of that. Let's go ahead and load Meteor now. And my coffee cups empty, so I'm going to get some more coffee real quick. While that's going on. Post CSS 5.2.18 installed, but it needs. Okay. Let's go ahead and install that npm packages one. And we'll run Meteor again. And it appears that it has generated, while the application is loading, it has generated the structure. Edit the custom dot semantic dot JSON to select only the definition that theme z1 set themes basic to true, leave default is true. So we scroll down here. Defaults is true. Bayes 0, we asked them choices here. Well, I am feeling like this is a pulsar application. I hope this is a good thing. Really do. And the client modified, refreshing. And look at that bada bing, bada, boom, it has a loaded all of our, pretty much every file will need for the semantic UI library. Now, keep in mind, we're not rendering anything because we took out all of our components. So we're going to have to start from scratch on a couple of these components. But now that the belief the library is in place, we can go ahead and close this out. If we have any more issues that we'll come back to it. Oh, yeah. Talks platform. I've got my toast platform T-Shirt on. It's very nice. And they're cool company. I met with the team one time and they, they built a really great product for blockchain. It's a point-of-sale solution for like cannabis merchants. If you'd like a dispensary or girly or whatever, and you can accept cryptocurrency payments and they've got some great solutions for that. Product placement. Didn't pay me. So, so now that we've done that, Let's go ahead and add the theorem. What three package real quick, just while that's on my mind. And let's also rapidly spam control C but get no response whatsoever. Okay? So let's do a meteor add if Miriam, what 3, 0, 4, 0 router. These are going to be the two packages that we can use and leverage to create the routing for our application. And you're just in case we need to do this npm install. I I'm not sure. Don't think so. We will go ahead and set that up and we should be ready to actually start building components and putting our routing in place. And that's going to require a couple of different files in our application which may not be readily apparent. List is what we have to do, but that is the whole point of this tutorial series is to explain things that may not be readily apparent. Rack mount her. Yeah, and just to give a quick It's really simple how this works. You see it There's Mount function right now. Basically amounts to the entire page, a component, which can then have sub-components. And then if you want to change, I guess it doesn't have a list here, but if you wanted to change the amount of the main layout, you have a main layout and then you have your component. And you can switch based off of what and point B, the URL is pointing to. So let's just, let's just go check up on our application. I'm curious as to what it's doing. Probably nothing. You know. Nothing. And let's go back and let's think about what's the next thing that we're gonna wanna do for this application. I think we need to beef up the client's side just a little bit with the necessary files that we're going to need in place. And one of those files will actually be one called init dot js. This is going to run when the application starts. And I'm going to copy over some code that I have. It's a block of code that I had found from a MetaMask damp announcement saying, Hey, we're changing our, our layout of a MetaMask or how many mask works. And we need to have daps should have this code in place to handle it. So what this page is essentially doing right here, he's saying when a user comes and loads the page, any page JS gets called, it's going to instantiate a global Web three variable. Let's say wept reason, I'm not undefined. It runs to this. If it is undefined, that means they don't have MetaMask or something else in place, then we can actually call a global variable. We can set what three as a global variable to an inferior end point. And that's something that we can use for non-minimum asked users to view our application out through. Otherwise, if they had MetaMask, then they can just use that as a as their current provider. And this is how we actually can set up the user interface as something reactive later on to handle various detections of whether or not a mask is there or not. And I'm going to give a quick example of this. Let's load what's actually remove MetaMask. And let's go to in that this is a website that I've been working on. And you'll notice in the bottom here it says download Meta mass. And that's because the user interface is reactive. And it recognizes that I don't have the MetaMask extension. And if I put the extension back in and I refresh, I get this little pop-up over here on my main screen and asks, it says unlock MetaMask and I say, okay, Sure. And then it says switched to main that because it recognizes I'm not on the main that and asks me for a connection request. And then I say, okay, I'll go to the main net. I can switch over to this account here and then it says, oh, you've got 0.14044 USB-C and half a die. So this is what, this global what 3D object can allow us to view on the front end later. And now that it's in our maker Tao app, if I go to localhost 3000, look what pops up. Maker Tao would like to connect to your account. And that's because it says, if window dot a theorem, if Ethereum is recognized or whatever, it's going to try and get an enable. And it's going to request account access, so connected. And this is a security measure to basically that MetaMask now enforces on its own. And so applications need to do this if they want to access. If they want to interact with the accounts that are in the MetaMask extension. So this is an important file to have in our, in our application. I think main.js them. I think all of these other ones are good. The only other thing we're going to add in this is actually our routes JavaScript folder File. And this is how we're going to manage all of WHO. And you know, what? Will I will add another one to another directory called layouts. And their routes are actually going to manage files in the layouts. So, so what does that mean, right. So we're going to need for this from an import React, react with any bad. Since, since this is our Routing Folder. And I always like to just have as few folders open as possible and just focus in on the file that we're working with. We're going to need a couple of things. We're going to need this amount from reacting MTTR. This is going to allow us to mount components to a layout. And then we're going to have, we need to have at least one kind of layout. This is from a different project. So, so as you can see, it's trying to access a file called main layout that we would have in layouts, which we don't have yet. So we're going to have to create that. So why don't we go ahead and actually create that right now. And we'll create a new file and we'll call it, looks like the name of it is called main layout dot JSX that we're referencing to begin with in this. And then it's looking for the component named main layout. So how do we create this component? Every dot js X needs to have this import React from reactive at the top. And we're going to be exporting a layout components. And actually it might even be a CONST, CONST. So let's try that. Plus, let's export. Because this file is trying to import main layout. And that will be of type. And the idea is that this router is going to be able to mount different components who? The main layout. So we need a way to pass that component through. So this, this main layout needs to accept the passing of hate component. So it's going to look a little bit like this. And here. And we can set it up so that it's not just a div. And it's React uses these braces to accept a components pass through. I think it actually, I'm going to need to set this up as parentheses and braces here. And I have content for it and then not components. So this is something that we can obviously expand upon. This was like our homepage now. But read, Let's do. Now I'm, now I'm importing something from my from Semantic UI. Let's header. And we'll add in some spaces. And in fact, Semantic UI has a divider as well. And let me just make sure I am importing this correctly because, uh, my path to you on a good thing too, because we're using React, Semantic UI has to have a react component or add, sorry, I react MPM package. So yes, look and it's already telling us, Oh, we need the React MTTR. And we also need Semantic UI and reacts to very important packages. So let's go ahead and install those. Run the application again. And now it is recognizing these components from Semantic UI. And if we start passing in other components that we create that are unique in React through our main layout, they will be rendered underneath. And this is how we can create like we could maybe putting the navigation bar right here that says this, this, this and that like home. Create a forward rate agreement, something over here, something over here, like admin panel. And then that'll load different components below, which can in turn have other navigational panels and load other components. So this is like the top-down hierarchy and we're looking at the top component right here. And it's actually not even a component. It's a const which loads all the components for the application. So where is it? Well, we have to we have to finish our routes dot JSX first. That's very important. So let's, let's go ahead and copy over flow router. Just the basic command to launch, to mount something to our main layout called basically what this is saying is flow router dot route for the endpoint URL slash, which is just the home. Literally what we have right here. If we wanted to have like slash FRA, we would need to happen another one called FRA. And then we can say the slope of the FRA component, which we don't have a home or an FRA component created yet. And then these components would be mounted to the main layouts if depending on what endpoint URL the user goes to. And I guess right now, we don't need to create these components. We could actually just get away with like name by just, just, just pass a string as a component. Related compounds can be very basic. Just very, very basic. If I write and I want to use name FRA here. And this will be a good way to pass components. So here we go. We have now loading. Yeah, it doesn't look like it's gonna take a steering, but it could be clever. They're damn. Maybe it'll take some HTML. If not, we'll go ahead and create the components. We're gonna do that anyways, but I'm testing out some, some of the finer details of these flow router utilities. And you see what this is gonna do is gonna pass this P. If it didn't pass a string into here, I'm assuming it's not going to pass something else, but we can at least see that the homepage is loading. There's a divider right underneath and it's all looking pretty fresh right here. We could go in and just to kinda give you an example of what some of the potential uses are, semantic, name equals, globe, maker Tao, or greater than b. And you can get a really cool and complex like we could create a grid and have a menu on one side and a menu on the other. But let's not get too bogged down by things that we may not end up doing. But here we have a small little globe and so just back to Home page until we know exactly what we want to do. And it looks like we're going to need to create some bonafide components to pass to the main layout. So let's go ahead and take care of that, shall we? So we can create all of our components in this imports UI directory below. And they're all going to be dot JSX. So let's have a home. And you know what, I'm not gonna do any capitalisation. Keep everything lowercase for consistency. A home.html sex and a FRA ab.js sex. I think. We're going to end up increasing the complexity of these components and breaking them down into smaller components. But just to showcase the flow routing of components, we'll go ahead and do this. So what are the basic components of a component? Well, we now need to import React from reacts. Because if you don't do that, what do you do? And you had this is, this is going to be fun. We also need to import a components from React as well. And then we're going to want to export a component that's going to be the defaults component exported for this JSX file, because sometimes you're going to have multiple components in a file, but only one can get exported as the default. Component. And it's going to be a class, and then we name it. So let's name it home. And we're gonna say extends components. And then we have just about the basic outline for a component from right here. Some of the variable are, some of the inner workings of a component will include this state. These will be the values that can be modified and held within the component. And this is how you manage state of various things. So let's say number is 0 and letter is a, something like that. And then we're also going to have the render portion of it, so it's going to reflect this render. And then we can have the return. And we can also have a announced number letter which references in this states. So basically if something gets updated in a state, then we can reference it here and it'll get passed into this rendering of the component. So this is how we save things in state, manage it, and update things within, inside the component. And you're going to need something to wrap everything unless it's like a single thing. Usually you just going to use a div. And then you can have this. This is the point x and the y. Not copy and paste this over. This is the page content. And we can do there are a couple breaklines around this. And this is something that we can kinda one d, So home has one and B and then FRA has 0 and an a. And then we're going to need to import that into our routes. So one of the nice things about WebStorm IDE is if we just reference, like if we just type in the home component, click it. Boom, it already sets up the import state with the proper dot, dot. If you're trying to figure out how do you reference various files and other directories. Two dots means you go back and entire directory,, you're looking in the same directory that you're in right now. And so like routes dot JSX is trying to reference something in the layout. So it does dot. This directory slash layouts. The last directory slash main layout. And you don't have to say it's main layout.css. You can just say main layout. If you wanted to go back a directory, see, here's the client's directory. And routes is trying to reference something in imports. So two dots means go back a directory. And if you had another two dots, you could go back another directory. And then you say imports UI home, and you're importing the home component from home. And if we were to load our application, we can see what's going on here. That's also important, FRA. So I'll take that as well. Now, if the component is not loading in this, there could have been something that I have may have mistyped in the main layout. So what I'm going to do is copy over. I know why it's not doing that. That's because in my previous one, I was using component. I wish I was using content. And this time I'm using components. So I need to reference the correct variable to mount to pass the component through. So no wonder we weren't even seeing anything before. I wasn't even using the proper variable to pass through. I was using content instead of component. So let's let this refresh and see what's going on this time. This is the homepage content. Let's put FRA is it the FRA page content? Very good. We have solved the issue. So I think this just about covers it. No, it doesn't. We're gonna do one more thing. We are going to actually go to the homepage and we're going to show what it looks like to interact with the web 3 variable. Now remember, init. Init ab.js created this great Web three variable for us to use globally. So if we wanted to, on the front end, say what, three counts 0. And we wanted to see, does it really needs to import? Do I really need to import what three? I may just have two. Let's see what I do in the other one. Just check my work. Yeah, I don't think I have to. But it could be the case that I do. Let's reload the homepage and see if this works. If it doesn't, then. So look at that. We have my a Web 3 address directly from here. And if we were to switch accounts, it's a static variable that loads when it renders. So if we refresh the page, it does that. Now, this is just a poor example of the user interface experience. We can actually change this. So it's checking the Web 3 or theory him address every 15 seconds or every five seconds. And then when the user switches, boom, refresh the page and load content for the newly theory and address. That's not something that a lot of people will do. And you'll actually see that that's what I have happening on in depth right now. So see that it says on 364, if I switch to another one, boom, it refreshes the page to then reload that. So and in fact, it's actually loading it really quickly. You see it's even doing a little bit of change here. But because we do have to load so much, we're actually going to just use window dot reload to refresh everything and that makes sure that everything is rendered properly. So I think that about concludes this setting up our Meteor application. We're going to end it here. And then in the next episode, we're going to map out and think through everything that we want to do. Someone's knocking at the door, I'll be back. 6. React Components and Contract Revision: Welcome back to episode six of this wonderful adventure through a centralized time and space. So in the last episode, before we were disturbed by someone knocking at the door. We covered setting up our entire Meteor application. So this is pretty cool. We've got the app created. We installed the packages and the libraries. We set up some of the scaffolding and even put the router architecture in place so that moving forward we have everything ready to go. In fact, we have it up on this page right here. And we're going to start just tackling head on these next three sections. Deploying the applications. Very, very simple. So if you look at these, and I actually added a section here to number 5 called white lists. And I realized, since episodes five, I realized that we need to create a waitlist built into our forward rate agreement contracts. And what that's going to allow us to do as the exchange operator is to say, will allow admin 1, 2, and 3 to come onto our platform and create these forward rate contracts at the very top level. But you know, we, we want to make sure that not everyone in the world can come on and create a smart contract and start offering forward rate agreements. We don't want that. Now. We're okay if anybody in the world comes on and buys them, but we don't want people spamming them. So we're going to have to put in a spamming the creation of them. So we're going to have to put a filter on it. And so that's one of the first things we're going to tackle. And then the second thing is we're going to tackle a menu bar. And that's gonna go right here next to this homepage. And we're actually going to do a quick change. Because we don't want this to say homepage. We want this to be liked the name of the website. So let's come up with something very creative and name the website forward rate agreements. I think it's straight to the point and extremely creative. And we're actually going to notice how it takes up the whole page. We're going to condense that a little bit and use a thing called container in Semantic UI. And it just convinced this things a little bit and makes it all nice. So instead of it being the whole page, now it's this fixed container. So from here we're going to create a menu. It will be home marketplace for the forward rate agreements. These are where the end-users will come on and enter into forward rate agreements. And then we're going to have an admin or an issuer panel. And that's going to be where we can create different forward rate offerings for different terms. The admins can fill the forward rate offering contracts with dyes so that buyers can come along and take that liquidity. And once we've done that, and we're just going to, we're not going to build out those whole components. Those are very complex, but we're going to create the menu bar and create the base components that'll load in those sections. And then next to that are going to create the AT die and balances bar for the associated account that we're logged into. And also the Ethereum address so people can see the whole address that they're logged into. And I think we're going to be using some labels in the semantic UI library. So something, Something basic, you can actually interact with these. So you can open it up in basic and maybe it'll be the the Ethereum address. Does it have the Algerian logo? Does look at that. And so we're going to create something that looks a little bit like this. And it's going to be a list of it. So there's going to be multiple ones, back and back butt. This will say like we have 850 die. And we're going to use the dollar icon to represent die. But we can set it up. So it's like, it looks like that. And we'll have East as well. So this way we can just have the AEF, the dye, and the icon, the top and it in fact OD here that those are the hyenas, they're out in case they're going to keep going our closed the window because they're probably out hunt for rabbits and they caught one. And then there that tell on the other hand, even buddies, hey, look what I got. And then we'll have an dinner right now. Nice little pow-wow in the night desert. I don't think I'm on the second floor, right? So I can actually show, since we're just using static variables here, I can even copy this block of code. This is a very important thing to know as a developer. And one of the nice things I like about semantic is these libraries are interactive. You know, try it and then you get the code that you want. And you can go over. Now, we're going to create a component. So let's create a new component called yeah, let's go ahead and plus-plus. Go ahead and create that component right now. And and then after I want to come back and add in the waitlist integration, we're going to write a very quick waitlist and integrated into our forward rate contracts. And then we as the Uber admin, can, can say who can come on and offer these forward rate agreements. But let's go ahead and make this balances dot js sex at JavaScripts. So we're gonna get into some of the very nitty gritty details of components with this. So we know we need to load three things. You know what? Let's not get into the nitty-gritty details. Let's just make this a very static component and show what it will look like. And we'll add in the details later. Density. Say nice, dress, the balanced die. So see, I'm just adding things into the state. And we're going to need to bring that in down here. And we'll create functions which loads it dynamically and manages switching and via theory and Macau. But for, for starters, we don't have to. So let's go ahead and copy this code over. And it looks like we are going to have to import the components from semantic, such as a label and icon. And whoops, give ourselves a little bit of space here. And I think that's about all we're going to need to load into here the idea is that instead of using static members, you can use these state variables. Ie suggests when they're down here, He's balanced gonna go up there. And the dye balance has to go right there. And we're not even using container, so we can take that out. And then how do we use this in our application? While we're going to have a grid. Grids are nice. Grids are where we can use to to lay things out and see we can have a grid of 12 different things are at root of three different things. And we can have different widths of the grid as well. So that's how we can say forward rate agreements is in this section and then statuses in this section. Looks a little bit like that. I think we're going to have probably three columns. One row, of course. And they're going to be different widths. So the header is going to be in the main column with a width of about probably four. We'll have the second column be a width of about six. And then the total width volume amount is 16. So if we've got 4 and 6 is 10, then we have six left to work with. So we can use 6 one more time. So this is going to be like our main header. And if you want to make comments in JavaScript or react JavaScript, you can actually do a bracket and then slash asterisk, slash asterisk. And we can say this is our navigation bar and novices. So we're going to have the the name here of the website. We're going to have the balances in the second and the third one. And then we'll have a navigational bar, a menu in the second one. So let's go back and load this up. And I'll show you what I'm talking about. So it looks like we've got a navigational couple. Address things up here. It doesn't look quite as nice. Now because I am logged in. See how I'm using ether address and I'm not using the right through that each dot accounts is 0. We can't always assume that the user is logged in or has their MetaMask on locked. So we're going to have to do a very complex check every once and awhile. But that's okay. We're not super concerned. And as we can see, we actually have an overflow here. So we're going to need to give this a little bit more room and take a little bit more room from that. And let's see if we can get away with a width of three for the forward rate agreements header right here. We'll find out very shortly. Doesn't look like we will. So a bump that up to four. Let's keep this at five. And balances column was initially it's six. So we'll see if we can't go for seven. And it looks like it's going to accept seven. Now. We can always experiment with you now. Maybe we don't want the basic or not basic. And we can just let it load and test out. Yeah, that looks okay. We'll fine tune in later on, but that covers the initial user interface, not the back-end components to pull the dye value in the theory and value. But we got, we've got the user interface set up there. Let's get, Let's get back to this wireless integration. It's something important that I had actually forgotten to do in the initial smart contract design skipped right over it, but it's only going to take about 10 minutes to put in. It's, it's a very simple whitelist integration technique. So I'm going to show you how we add a waitlist into a smart contract. And a lot of interesting files on you. Fake. We're going to use remix. Let's use a re-mix on, on the Brave browser to add in this. So the, the, the whitelist is integrated into this forward rate contract. But it's still a separate smart contract that we're going to have to write issue as the Uber admin and allow other admins on the platform. There might be a better term than Uber admin, but it's it's the it's the best term I can come up with right now. So let's go ahead and creates the waitlist. And or English pragmas solidity, 0.5.6, contract with your waitlist. That are state variables. We've got our constructor and we've got remixed making great suggestions in the comments. We've got our functions and our modifiers. Some of the state variables that we're going to be any notice we don't have say it's not we're not working with safe safe math at all. So I actually like to hard code the admin address into DB2, the admin us indices as wireless. And let's go ahead and use this is a good one. Let's go ahead and use this as the super admin. And then we're going to have a mapping of what kind of mapping do you think we should use for this? If you were to think about it for a minute, before I actually wrote it out, what would be the best way? You have? One to something many-to-many, where you're going to use address to bool. And that's going to be verified and admins, or we'll call that verified Adams. And this is basically saying all possible addresses are initialized to false. If we want to verify an admin, it has to be set to true. And I think that's the only two state variables we're going to be using in this Uber waitlist. So let's go ahead and make the constructor. Gosh, that looks really weird with the parentheses over good, fun. Oddly enough, it accepts that as syntax. When it's created. We definitely want to do with your admin to be set to true just by default. And we're going to want an admin modifier, a 100 percent. And that's going to require that the message sender is equal to the eager admin. And then we're going to have a sad face right after the which is really just really just an underscore that I do that right? No. This was racket and not a closing parenthesis. And then we're going to have two basic functions. Function, one is going to be AD admin. Sure. S Patton only called by the admin public and those were not using re-entrant see guards in this contract because we're not moving funds around. We're just changing the state variable of a boolean from false to true. In the case of adding an adenine or true to false in the case of removing an admin. It does not call for a re-entrant. See garden. In this particular instance. Return a bool, and we will conclude now a removes admin. One of the things we're going to want to check for before adding someone to the before verifying someone is to make sure that they're already not verified and vice versa, if we're moving someone, we don't want to remove someone that's already removed, that would be a waste. So we're just going to add in a quick check and require them to go and find patterns of admin is equal to false. And I could write a exclamation point or I could write I equal to false. It says the same thing. Really. I actually think it looks easier to read if it's like this, because you see the exclamation blind and it's not readily apparent. Obviously in this case, it's like much easier and it's a little bit redundant to have the code. But, you know, it's all preference. I guess since I'm taking the text out below for consistency purposes, I'll put the exclamation point up here and know what it's saying. Functions to immutability can be restricted to view all no, No, definitely not. You're out of your mind remix. And we're going to set the pride admins of admin literature. And we're going to set this equal to false. So we now have a whitelist which can be integrated into all of the other forward rates. And we're on the main net. So let's get the hell off domain that and go to the cobalt chestnut. And the way we integrate that into all of the forward rate contracts that we're going to be using on. I'll show you in just a second. All right, and I guess there's gonna be two other helper functions that we're going to want in here so that other contracts can read even. I didn't even set this to mobile. But just, just to make it easier, we're going to add in two helper functions at the bottom and we can restrict them to use. So we're going to look like actually we're just going to add one. And it's going to be called admin status. And we're just going to return the verified actions of the admin. And this is a helper function that we can use in other contracts for basically just getting the d value of whether an admin is really true. So how do we integrate this? Now that we have this simple whitelist into our forward rate smart contract, well, we are going to need an interface for it. So let's use this. And let's use the, let's make an informed choice. Let's call it a waitlist. And let's call this function admin status, which accepts an address and returns a bool. And let's go ahead and deploy it. The Uber waitlist. And spend almost who've have another theorem when we check my account real quick. I guess I got enough. And I soon as that deploys, we have our Uber whitelist with Uber admin. There we go. And to give it a second to update and our addresses on there. And if we were to copy that and we'll check if that's the admin status is true, would say true. And let's change it and try something else. Error, invalid address. It's actually saying these are invalid addresses. I didn't realize it pre-check to address. Well, here's a way it wouldn't return false or would not return true. So we'll use this contract that we just deployed as the hard-coded waitlist in all of our other contracts. So we're going to add in address public wireless equals the address and as an invalid checks on. So when you see this note, you can do with Coven and you can type in the address and you can get the correct checksum address. It's basically saying some are not capitalised appropriately and there's like a checksum hash function. If you look, the difference is literally E and C is capitalised in this whole thing, nothing. And this E over here. So we'll take care of that. And then how do we reference this? Well, we can actually make into constructor a check to make sure that the color isn't verified, admin. And if they do not pass that check, the the contract will never be created. So we know for a fact that all contracts created with our code will never be created by a non verified admin. And this is done as a simple check by doing another required. And we're going to use the waitlist interface at the waitlist address. This is a little confusing. Let's This is going to be confusing. Yeah, I don't like that. Hold on. We need we can't have the interface. Let's call this the interface Buber waitlist. And we'll keep waitlist as the duress for referencing the Uber waitlist. Let's, let's do that. It's nice. And then we're just calling this admin status Function. And we're going to pass in the message dot sender. And then it's going to check if this mapping we haves for the one waitlist, if the color is verified or not. And the only way that they can be verified as if we added that admin as the Uber app. Or getting a real kick out of this Uber where I tell you what. So that's bing bada, boom. We have integrated a waitlist into our forward toward forward rate contracts. And if we also wanted to have a verified buyers list, if for some reason we need to add in that, we could actually have another mapping here and do that. But I think we're going to leave this, you know, the spirit of this program is that anybody can access the platform and get a forward rate agreement, but only a select handful of people can issue forward rate agreement offerings. So this architecture supports that fantastically. Now, we can mark that as done. And now we want to go back to our menu bar, where we will be adding the menu bar and setting that up so that we can have different components accessed in our main section. And these are going to be three different ones. There's going to be home, which will be the landing page. There's going to be the marketplace where end users can buy a forward rate agreements. And then there's going to be the admin panel where Admin administrators can access the forward rate agreement, offering creation form, as well as manage all of the contracts associated with a particular forward rate agreement. And I guess there's gonna be a fourth. And this is going to be where users are going to access all of their own unique forward rate agreements. So we've got home marketplace, managed panel for end-users and admin panel. And then everything else that the Uber admin wants to manage can be done off. Just interacting with the wireless smart contracts, as long as you've got the hard-coded address and you can access it through remixed. That's not really a big deal. So let's go ahead and, and let's creates a menu component. And we will piggy-back off of our previous code. We're not going to need this and this or any of that. And we are going to want to create a menu. So let me think for a second, just how I want to set this up. So one of the best things to do is actually look at what we have available to us and what might want to, what we might want to do. One of the things that catches my eye immediately is the secondary menu. Oh, that's nice as a search in a lockout feature over here on the right. And then you position right. We don't really need that. But we do want to have. Four items called. One is home loops. And this is again, one of the greatest things about Semantic UI is you can go in here and in real time. See, oh, look at that. And I think bar chart is the appropriate one for marketplace. Admin can be, we can, we can look around. This is actually one of the fun parts is to, is to look around at what we might want to have is the Admin icon. As one looks pretty good right here. Might offend some people. Let's use and let's see, we've got a managed as well. I think we can do this for this one. This would be cool. Actually, I like to list more. And then for the, for the admin, do they have a king, chess king? Oh, look at that as as royalty right there. Yeah, this is really the death of me right here. Is this looking through all these selections and thinking, you know, what? What do I want? Gosh, there's so many options. All right, I think we're going to stick with the royalty one. Unless something else comes to my mind. I kinda like that honestly. All right. Anyways, let's stick with this and let's copy this over into our, into our code. Obviously that needs to be an active item. Probably starts off at home. Can also change the name of this and then you. And we need to have the handle item click function. We clearly do not have that right here. So let's go and pick that up. This is one of the nice things, is we can just copy and paste a lot of code over. And functions are always outside of the render, never inside the render. And let's go ahead and put this component into our navigational more and see what comes of that. Okay? We do not need this anymore doing. This is r for rate smart contract None. Okay. Duplicate declaration menu. Now, why would that be happening? I don't know. Is it because 0, 0, this component to the name of it to menu bar and keep that separate from the menu that we're importing. The menu component that we're importing, semantic UI react. You don't want to have the same names and various applications that it's no good. So we'll go ahead and change that. And that should take care of that. We're using Meteor Mongo right now. So I can go ahead and close out, went out. And I believe our application is restarting, repairing itself and restore. Fantastic. So it looks like we have our menu and everything is formatted perfectly. Well. That's no good. I think what we're gonna do is I think what we're gonna do is actually move this down one. Or we could actually move, we're going to have forward rate agreements at the top and have the menu bar on the left side and another dividers section below. In this bar on the right side, that may look a little bit cleaner. So what's tidy that up real quick? And this is just going to give us a little bit more breathing, right? That's what you always want in any application is room to breathe. You don't want. Now all of these components, fighting for space is the same, a war. This is a look at that forward rate agreements, home, marketplace, manager, admin. And we have these nice labels right here. They look pretty out of place. We're going to go update that. It looked much better with the basic. And I think we're also going to want to increase the size of it. Also, just for reference. If you're ever wondering what you can do with the particular component, say we go to label, you can actually look at what the props are and you can view all of the different options. We can change the color. We can make it circular, we can make it basic. It can be pointing. We can change the size of it, which is what we wanna do right now. So if you're trying to become familiar with waves to create a great interface, one of the most important things to do is become familiar with all of the different products that can be passed into a semantic UI react component. For instance, here's a prop that we can pass. Size, massive. And it's probably don't look terrible. But there's only one way to find out what already looks so much better. So up so much better with that. Yeah, that's about what I expected. Let's just use large for all of these. And if we actually want to align everything to the right, we want it to be on the right side. We don't want this to be hanging or dangling in the middle, is just going to feel a little bit better that way. And already, this interface is looking ten times better. So and in fact, in fact, this interface would look really good if we just took this whole thing out right at the top and just had a menu bar up there. And look at this. And I think we'll even in the menu bar, there's something called a menu dot header. And we can just put this in there. Let me just double-check real quick. You'll notice I'm always going to be checking what I can and cannot do through semantic menu dot header. Yeah, it's a sub-component, which looks ridiculously, awful. Great. Well, instead of home, we need to give ourselves, we need to give it this application name. So let's go ahead and name It's maker Tao. That's the name of the application of top. No, we don't, we don't want to call it maker Tao. And in fact, let's change this and call it pulsar. And we're going under code named pulsar for right now. You know, not the greatest name, but at the worst name by any means either. And people will know it's the home directory because there's a Home icon pulsar. And in fact, in case anyone actually looks at the title up here. They'll get this. And I don't know, I think these look either this looks too large or too small. So Menu size, large displays, try that. Let's pump up the menu size to large. And I think that's going to look a hell of a lot better. Looks a hell of a lot better. And in fact, if we put a divider right on top of it, that's even better as well. Get a little bit more space throughout the whole application. A little bit of a better feel. And the labels are going to have to be bumped up to dig. I'm telling you I I could just sit here and tell you what things for days this is, this is half the fun, but I think this will really give some more insight into like how you can make things look nice. You know, like it is, It's a world of difference when things look nice. So that's kind of about do it for the menu bar. And the balances that we have over here. You know, obviously my OCD is showing a little bit and thinking like there's just a way to vertically align this in the middle, I would be ten times happier. But what do you do? Rarely are you going to and there's no prompts to fix it either. Subshell. Well, let's look at our list and see what we've accomplished so far. We have the wireless integration done. We have the menu bar is set up. We have the die and each balances in the East address. And then we have our landing page here. We're not going to really get into the back-end forward routing of this because we're already at 45 minutes and i'm I'm trying to break things up into 45-minute pieces. So I think this is a great place to stop. And from here we can maybe change this back to like, actually how is it does look a little bit weird. And then add, if we can have a header. And you know, there's like a really big size and color for SAR. We can put an icon with the name of the loads. And obviously I need to import the icon to undo this. And we're gonna make it super big. And maybe this is something that we can use to display the name up at the top of a ha, ha ha. And that looks amazing. Font size with a little bit bigger than that would just be unbelievably perfect. Oh my goodness. Oh my goodness gracious. This is the start of something beautiful. This is the start of something very beautiful. That looks pretty good. That looks really good. And I even think it would be better if this was over on the left side and this menu bar was over on the right side. So it would be really tough to do that. We'd have to like switch it. So we're gonna go ahead and do that. And yeah, Okay. Okay. And we're gonna change menu to sleep and adding what's too for. What that's gonna do is make them and you take the full size. Within this small grid that we've given it, balances is now on the left, so we need to align it to the actually like to center. I think that's going to give it a little bit more. And then we've got yeah, that looks pretty good. Home marketplace, manage, admin, pulse, you can't miss it. It's right at the top. We're going with a blue. So the icon needs to be blue as well. And I really hope, I really hope for those of you watching, I really hope you enjoy this style of programming where we're just, we're seeing something on the spot and we're changing it. You know, this is, this is after all like a design process. And sometimes ideas are just going to flow and we just got a ride with the wave of creativity. I really like this. The only thing I might change. No. I'm going to lay my perfectionism terrestrial right now and call this a day. What we're gonna do next, because we've accomplished the basics of this, is we're actually going to make reactivity in our die and eith address balanced bar. We, because right now there's limitations to it. Obviously, if I change the account, this should change automatically, which it doesn't. So that's no good. And then this menu bar over here and needs to change the endpoint, the URL. And that's going to affect the flow routers. So if I click on Marketplace, then flow router dot route should go to slash. Margaret says, right? So we can set that all up. And that's going to be what we get into this next episode. But this, this is really turning out to be something cool. I can't wait. And you know what? The blue looks so good. I can't imagine doing something else, doing a different color. I mean, look at all that, all these options. We've got red, orange, green. If we go if we go to the maker Tao site,, what colors do they use these? A little bit of orange, a little bit of green, a little bit of blue. They do use yellow if we wanted to go with yellow for like die, right. But that look good at all. I have to know. I have my curiosity. I'm literally dying of curiosity right now. If I didn't believe how curious I am, alright, we're gonna do this. We're going to check it out real quick. And then we're going to conclude the episode. If I don't like it. Oh my God. That looks ugly. Holy moly. All right. Let's get out of that. All right. Cheers. We're going to pick this back up. And we're going to start adding in some reactive functionality into our balances bar and changing the menu bar and adding various components down here until next time. 7. Menu and Reactive ETH DAI Balances: Welcome to Episode 7. We left off with this beautiful, beautiful front-end interface with the components nicely to arrange. And we're going to go through this checklist that I have over here. And wouldn't you know, what the first thing we're gonna do is rearrange the menu. Perfectionism has come and attack me again. So we're going to, we're going to rearrange some of these things that we're going to, we're going to add reactive functionality to this Dian eith, balance and address bar. We're going to create the basic components for these four buttons right here. We're going to use flow router to change the URL endpoint when clicking on it. And that's going to load a different component in the section below. And then I also want to touch on disabling the admin accessibility, this button right here. We can actually disable it based off of that whitelist that we had created before. So it'll, it'll look grayed out. It's going to look a little bit, something like if we go to that. And it's going to look a little bit like that. If while exactly like that, if we're not a registered admin and that way, you know, most people would just come to this site and they'll see home marketplace managed and they won't be able to click admin. So it's going to prevent them on the front end from accessing the admin panel. But also, even if they somehow access the admin panel, you wouldn't even be able to create a smart contract because we have it hard-coded into the smart contract to to check the wireless and make sure that whoever is calling it is a verified admin. So it's a layer for the front end to put some security into it, but it's also an enhancement to the backend security as a wall for you is really preventing anyone from getting access to creating these forward rate agreements. Because who are our understanding right now is that we're going to have anywhere from five to 10 different people creating forward rate agreements and selling them. And we're going to have 50 to a 100 times as many people actually purchasing and taking liquidity from the forward rate agreement providers. This, this system we haven't placed. So I'm going to start chipping away at just making this front-end interface a little bit better. We're going to rearrange the menu a little bit. One of the things I wanna do is actually there's a setting for the menu that makes it labeled. And that's going to, that's going to bring the icon up. We also want to really decrease this header thing in size. And we're actually going to want to pull the balances and put that up top. And we're going to want to the header into this left column. So you see we have home marketplace manage. It's all a little bit, it looks a little bit better now. And this is a top here. And we're going to think change this to for that to 12. Probably bring that down to two. Add a break above it. So it's down a little bit. Make the menu a little bit larger. The brakes way too much. I might have to actually add some padding into the mix there. And we want to get rid of the brakes on the balances. We just want that sitting up in the top and all the way on the far right. So we'll go ahead and align this to the right. And I think that's going to accomplish just about what we want. Home marketplace, manage admin. And this, the balances looks a little bit more cleaner. One of the reasons we moved it from inside this middle, the left section was because I realized it was getting too small. And then if more dire effects say someone comes along with a 25,001,000 million die balance, that's going to overflow and it's going to collapse. So we want the disk to have as much room as possible to breathe. And I think we can. Maybe cut that back down ten to 63. The CSS padding, I believe this is the upper and lower padding. And then the second is the left and right. And if we were to add four of these in a row instead of two, it would be top, left, right, bottom. I could double-check that. But let's let's take a look and see what comes out of this. This next one. Definitely does not need 40 pixels in the top and the bottom. So we're going to have to actually just do a real quick check on the CSS padding. Top right, bottom left. So we want about 25 pixels on the top and 0 for the rest. So let's think that would look about right. Maybe, maybe 12, maybe 15 on the top. And then 0 for the remainder. And that should etch clean things up pretty well. Shot down five. Backup, 10. Nice that this looks much cleaner, much more professional. And now we can actually go ahead with updating this balance bar up in the top right. Let's go ahead over to balances. And we have the ether address as the Web 3 dot-dot-dot accounts. But we don't want that. And also keep in mind that some people may come to the website and they don't have MetaMask. How can we display an address and a dive balance and balance if it's just the, if, if it's just using the inferior node that we have here. And the answer is, we can't. So we actually have to create an entirely new component or use this same. What we will do is use the same component and actually use different if statements to check what's going on with the current web three global variable and modify everything from there. So this, now we've talked about last episode getting into the nitty-gritty details of this component. And I was teasing, and we didn't do it then. What we're gonna do it now. So give me 1 second. So there's a couple of things we need to note about the MetaMask extension. All different things can happen. Let's say I come to the website and I don't have my MetaMask unlocked. It cannot pull the address. So we're going to need to do a check to see if a MetaMask is unlocked. And we can represent that with a state variable, we are assuming false. And we can also know, I think that's going to be the only other state variable that we need to keep track here. Now, there's two different things that components can do. When they load. There's a function called component did mount. Component will not have component did mount. So this is called when the component is mounted right away. It waits until after the component has fully mounted to create this Check it doesn't do it as it's mounting. That's a distinction. And then there's also components will unmount. This is called, right when the component is meant to unmount. And component will. I'm not the, the thing we are going to be using for this is our component did mount. We are going to have some checks. Every interval. It's going to be pulling to check if our address has at all changed. Yeah, I like that a little bit more. And we're yeah, so so we're gonna check if the balance of our die or eith has has changed at all. Every I think 2.5 seconds is about appropriate. If you wanted to do 1 second, you could. But keep in mind that we're wore off. Loading all of this functionality onto the client. So if they're calling it every 1 second, that's going to take up twice as many resources as two seconds or three seconds, three times money, which arguably it doesn't cost that much to pull the theory and block chain. But still, it's always nice to be more optimized than to be overly dynamic. In some cases, and in this case I think we can pull it back to 2.5 seconds. So we're gonna wanna do a check on the component mounts for, we're going to want to say, is MetaMask unlocked? And how do we do that? Well, we can say if what A3 dot-dot-dot accounts. And this is the the part of the Web three variable that it says how many accounts are associated with the particular what three, for example. And I believe it usually only loads one. Whichever one is the current one. Even though I have three here. Since I'm just exposing this one right now, only the web application can see it. So if it's equal to 0, then that means it's locked. So if the accounts dot length is equal to 0, what we can check for is having a function in our state. And when we do this in state, and we'll call it a MetaMask check and we don't have to oh, I'm sorry. Yeah. If it's, if it's equal to 0, that means it is locked and we're going to want to keep pulling until it's unlocked. And then if it's not, that means it's unlocked and we're going to want to keep pulling the balance. And MetaMask walk check. And this is going to call a function called lot check. Every fifth, every 25 for 100 milliseconds. That seems about right. Then we'll have a function called balanced check. This handle to balance check. And we'll run that every 2500 seconds as well. And if the, what A3 dot-dot-dot accounts that length is 0, we don't have access to the address, but if it is, if it's one, then we can actually set the East address to lead through the ID that accounts 0. The first account that's exposed in the first element. And we can also say that MetaMask a month equal to true. Because initially we have it as false and we will set that to true. And that's going to be used in our component down here to then expose the this group right here. Now, we don't have to handle lock check and we don't have the handle balanced check in place yet. And I will go ahead and save this for after. So let's go ahead and write the handle lot check. And the handle log check is basically going to say, here's MetaMask unlocked. If so, then do this. If not, wait and check again. So it's, it's a way to continuously pull the state of MetaMask, the MetaMask extension. So we can write it like this because we're not passing any parameters. If we were, we would have to say like, you know, for m equal to 2, something like that. But we're not using any parameters, so we just use this basic formatting. And we're essentially doing the same check. If Web 3 dot-dot-dot accounts dot length is equal to 0, then I guess we don't do anything. So in fact, we want to check if it's not equal to 0, right? And then if it is, we can run into this. And When you set an interval, you need to clear the interval after. So if we got to this point, then we're assuming that there's a variable in state called MetaMask, lot dot loc. Check. This is what we assigned here. And we're going to actually clear the integral. And this is going to prevent this from running anymore. And I guess just in case. Let's go ahead and add this variable into our, into our full state Meta mass locked check and just set it to an empty string, just in case. And then let's go ahead and handle the balanced check. Now in order to handle the balanced check, we are going to need the ERC-20 interface in the JavaScript form. That's actually the ERC-20 ABI. And let's go in. Let's go and see how we get that. How do we go and track that down and port that into our, our JavaScript application. And you know what, I think I have it on the Brave browser. Yeah. Yeah. Now, let's call this ERC 20 or so. And let's go to the ERC 20 and surface. So I googled ERC-20 interface and it took me to the ERC-20 tokens standard interface. And we've got the contract right here. Fantastic. What we'll do is we'll copy this into, into remix. And we'll see if we can copy the ABI, see how it just has this little copy API to clipboard. Let's see if this works. Yeah, it actually does. It's pretty nice. It looks absolutely atrocious like the like that. Who would much rather go to Details. And man, I, I can't stand, you know what? I can actually remove a lot of the functionality that we're going to need in this specific component by only taking in the, the function that I need, which is just balance. So let's take that. And now it's going to give us just the balance of, and that's all we need. So let's set this as a constant and a global variable outside of our, our component in the, in the, the global, local namespace. As they might say, I will call it here. So 20 API. And now, great, Now we have a means of creating a web three contract variable to the theory and Web 3 library using this API. And then getting the balance of dye that particular account has. So. So now we want to write the handled balanced check. And let's go ahead and do that. Now. We're going to want to pull, we're going to want to pull in, see how we set the address to Web 3 dot-dot-dot account 0. We don't want to pull this each time. We actually want to just use what we haven't state. So this is how we pull values from state within functions. We say cons to brackets. The name of it equals this dot state. In fact, that's the same way that we use in, within the render function. And I'm going to return our, our HTML and react. So what do I want to start and what I want to set this up? I think we are on the covalent network. We're doing everything on Coven. So we want to make sure that we're not pulling anything on the. Main network. And we'll, we'll have that handle than in here. But if we are on the main network, we don't need to go pull in contracts that don't even make any sense. And in fact, I am going to copy over the co von die variable as well. Address and say bat. So we know, we know what contract we're pulling, but if we try pulling this on the covalent network, we would get the balance. But if we're trying it on rent could be or main that, then we're not getting anything. And let's do a check. And before right, this handled balanced check, I'm going to take care of the component will amount. You see how we cleared the interval here. And we basically do that for the MetaMask watch and the balanced check up here. And we just clear both. In this way. If, you know someone has their account locked and this function is running every 2.5 seconds and they don't unlock it to go into the balance check when they, when they leave. And actually this component is on the main page, but we may use this component and other places on our application server. So even though this is always going to be available on the main page and it will never unmanned. And while in the application with its current usage, we want to write it so that we can use it in other contexts, contexts as well. So just for consistency purposes, we will be making sure that these functions are our arc ended if the Component Editor on mounts and they're not continuing to soak up valuable resources. So handled balanced check. We only want to call if we are on the COVID on network. So how do we do that? Well, I actually have the function, the call right over here for the main network. So we did the Web three, current provider, dot public config store, dot underscore version. And it is 42 is colon. I think that's a reference to the travelers of the galaxy or, or whatever that thing is called. The name is alluding me right now. And 42 is the magic number. But one is the main Matt and I may I I don't I don't know if I have the other ones right off the top of my head. And I can't find them over there. But that's fine. So I'm just going to copy over the, the function f actually. And I guess I'll type it out just, just to kind of explain. So if you want to, if you want to pull the value of an account to die value of an account. For the given East address, we say Web 3 dot dot contract. And we're, we're using this ERC-20, a BI global variable, not at the, the address. And we have the Coval and die address say here. And then we call using the API that we have here that balance of. So we're actually referring to the name within the ABI. And we can see what the inputs are. It says it needs it the name of the token owner of type address, and the output is a UN 256. So we were actually using an asynchronous function which does a call back. So that means that we pass through the ether address. Then we're left with this. And there's actually one more thing. There's three parameters that we're going to do. There's the e'th address, there are the settings associated with the call who's calling it. Because when we're using this Web 3 dot dot, when we're calling the balance of it needs to know who's calling it. Are we calling it with the current and the current IP address? Are we calling with someone else? And so we actually do this. And that's important if we have like a ledger nano hooked up and we have like 10 different accounts and we're deciding which account do we move things from m. We say, well, we want it to move it. From account five, we may we may want to have that flexibility, so we're working with the things that have a lot of flexibility and choices here. Then we have a callback function, error, E for error and R for result. And we're going to say is if there's no error, then we're going to assign the result to the dye balance for this particular in this state. So we're going to say at this dots sets. And what you also have to know about callback functions within a JavaScript is they are outside of the scope. So when I say this dot set state or this dot whatever, because we're in this other function right here. It's outside of the scope of state. And so we fix that by binding it to this, bind to this. And that way when this, when we use this dot set state, then it's going into the lower level or it's going up a hierarchy and accessing this state right here. So we say die balance is going to be equal to the result. And we are going to have to use a Web three utilities because the result is going to be 18 decimals, right? So what we can say is what 3 dot from way. If you're not familiar with the way values, you know, the way verse ether, we can look at the, you know, one, ether is 12 the 18 way. And if we want to display things on the front end as the basic just number that we need to do from way the result. And then we're going to fix it to two decimal places. Because no one says, I have $5.375 thousandths of a Senate. They say I have $5.3837. And notice that we have this polling every 2500 seconds. And we're also going to want to pull for the theory and balance. So how do we do that? Well, we can actually get balance from the web 3 dot, dot Coinbase, which is also just another term for Keith address. And then we're going to pass in our callback function. And we're going to say, no, I don't think I have to actually call what the address is is calling this one because we're not using it. Using an ABI. We're actually using a built-in get balance of the India theorem address which is handled in the library so we don't have to pass in this, in particular. Like another thing to note is that because we were calling a function, we could also pass like Something like this, right? And what this would be doing is saying we actually want to send one ether into this function call. But we're not doing that, we're just reading. But if this were say, a function call, which is what these contract APIs can do. And then we could also program how much you theorem we want to send it along. So what A3 dot-dot-dot get balance of our ether address. And we're going to be assigning the result. There is no error. To ease imbalance, I think it just uses the results. But I may be wrong. No, it would get the result in ether. So let's see what three dots from way. The result dot t2 to fix this two and call it a day. And I actually think I need to add these additional parenthesis. I I actually shouldn't bought odd. Let's go ahead and take those out and I don't think I'll need him now. So this isn't a pretty good spot. And we can also, while checking the balance, update the ISS address. So we can say at the very end regardless. Now if we are not on network 42, then we should just set the dye balance to 0 and that each balance to 0, we're not gonna go pulling or anything like that. Or we could even say, set it to a string, right? And say not available, not available. But we'll just, we'll just set it to 0 for the meantime. And we will handle that on the front end displaying that, Hey, you really need to have to be on the appropriate number for this, right? And we can also set at the very end, we can update the East addressed with what A3 dot-dot-dot, it counts 0. So as this functions continually pulling, you know, the end and it says, Oh, what your daddy thought accounts, we're assigning that to either address. So if we change it counts, then we should update all of this information on the front end. And then the next cycle we'll be using the new ether address if we switch accounts for these balance functions. So I didn't do a whole lot of testing while I was setting this all up. But now is the time to do some testing. Nice. So it looks like the dive balances updating and the address balances updating when I switch. But it does not appear as if the youth is working appropriately. And I think we need to do, instead of using ether address, we need to use one of the specific web dot Coinbase. And this is going to look at the actual account. For, I guess for some reason you can't pass in an address. It needs to be from the Meta mask extension itself to call this function on. That's what I'm, that's what I'm seeing over here. So we're going to go ahead and, you know, do what they want. Give the extension what it once. So we're still not getting, we're still not getting this theory imbalance. So let's oh, and of course, Do you know why that is? Because I I'm sure someone was watching and caught this. We weren't binding the we weren't binding this function callback to be this. So you'll see it actually wasn't able to access this dot set state. And if I hit Control S j, this dot set state is not a function. I should have been hitting Control S J to get that value. So yes, indeed, you can access the Git balanced by just passing in the address. But you do have to actually bind it to the appropriate scope or otherwise you just can't access state. So we now have our nice and reactive. It's not as reactive as I would like. And I think we could actually change that by dropping the balanced check two to 1.5 seconds. And that might feel a little bit more like, wow. I mean, shoot, if we really wanted to, I could do it every 2.5th and it would just be like super instant. So let's go ahead and try that. Oh, that feels a lot better. You really don't even notice. Added a lot better. And let's just take a look at what this might. This might look if the function is or the MetaMask extension is not accessible. So it's using the basic variables. And let's say we go ahead and enable it. And we refresh. And now it, this pops up. As soon as I enter. Within 2.5 seconds, it should load all the values for my account. Boom, very instance. So that's nice. We've got our reactivity up here on the top panel. And now We're going to, we're going to pat ourselves on the back and take that out. So now we want to make the basic components for the home marketplace, manage an admin, and then we can set up the flow router from there. So let's so we have the home, we have that. And let's just get rid of this. That tells me that this is the homepage content. Gluts. Call this one the marketplace. This is the marketplace. This is the homepage. I am going to refactor, rename this to marketplace. We need to create a Manoj page. And this is what all of the users will be using once they've entered into a forward rate agreement. So you've got the marketplace to view all the forward rate agreements. And then you've got to manage page to manage all of the ones that you've entered into. And then of course the admin has their admin page. So this is the Manage page. And we need one more for the admin page. This is the admin. Perfect. Now, what we need to go to who our routes, and we need to import all of these new. We did change the name of that component and we will set the name of it here. This is going to be important. Let me explain why you want the name here in the flow router. Because let's say you are on localhost 3000 slash marketplace. If you aren't able to access what the name of the current flow router is, you won't be able to say that that's the current active one. So it'll always start on our own if you don't, and you will just, you'll click Marketplace, you'll go over and it won't actually show what the current pages, what the true curve pages. So nth. And actually show you that this is the marketplace. So I'm on marketplace, right? But I click Marketplace and nothing happens, so that's no good. So let's update. We need to manage and we need admin. And this is the managed components. And this is the admin components. Main admin, name, manage and menu. Okay? So now that we have our components in place and we have our routes in place to the particular components with the names associated with them. We can now go ahead and add functionality to menu. And I think what we start out by doing is saying that the active item. Is actually going to be equal to the flow router dot get current page, get route name. And that's going to actually access this name right here. So that means and then the act of item is referenced by all these other components down here. And see we need to capitalize it because this is a case sensitive manner. And so now when I'm on marketplace, it loads marketplace. If I go to manage it manages this. If I go to admin, it loads that and see when I click, when I click now, it's not even saying anything as the active. And that's because it's setting the active item name, this handle item click is passing this name parameter through. And it's setting the active item to that name. But there's a capital case sensitive issue going on. So we can update that. And we're also going to want to beef up the actual handle item click function. And we do want to set the active item to the new name. And quite honestly, we could get rid of the active item altogether by, by just saying, you know, active item or by just referencing fluoride, I'd get robbed. Name is home. And all of these, right? And we don't even need an act of name. But it's already set up. There's more than one way to skin a cat, right? And what's the skin, the cat, you don't need the skin it again. So we're not gonna, we're not gonna do that, but that would be an alternative way of managing the state in all of this. Now, how do we actually get an item or two or an action to change the endpoint. While there's a function called Flow router go. And it's just referencing the DTM point right here. And we obviously need to switch this up by saying, well, if the name is equal to Home, go to Florida or dot, dot go. So if name is equal to home, then we want to go to flow router. And then just the slash that represents home. And then we can say else if. And then we don't even need to do a check at the very end. But just because we can y-naught. So we're going to add in all of our manage marketplace admin. And so this will update the active item to show that were on that page. And then it'll also actually go to the page. And it'll, when we click flow router dot go for when we call that function, then it's mounting to the main layout, the component. Our main layout, it keeps everything here, but it's passing this component, that component into this thing right here. So let's reload and we got home. We've got slash marketplace. This is the marketplace, this is the managed page, and this is the admin page. So we have that in place. And now we can start building out the home components, the managed component, the marketplace, and the admin. And one of the things we're going to want to start with first is the admin page. Because everything pours over from there. That's where everything starts in, pours over and admins going to come along and they're going to create a forward rate agreement that's going to be viewable on the marketplace and then that's entered into on the marketplace. And that's the manage. So it's easier for us to build with the flow of the application itself. Starting with the admin, moving on to the marketplace. And then going into the Manage. I may I'm gonna, I'm gonna think about what I'll do for the next episode. I may actually just beef up the homepage so we have something nice and pretty to look at. When we land. Um, and, you know, maybe a chart of the current theory m value, some of the dye statistics and what the current stability fee is. Obviously that's pretty important, right? And then we would go admin marketplace manage. And then the only other thing I wanted to, We created the basic components. We linked the menu with flow router functionality to access the components. And I actually want to disable the admin accessibility based on identity. So let's go ahead and let's, let's take care of that. That's going to be a fun test that's gonna take us about 15 minutes to do. So one of the first things we're going to need is the ABI for our waitlist. But we only need the admin status. So if we look at the contract, like if we look at this, right? All we need this function right here. And that's it. And it returns a Boolean which we can use on the front end to manage and state and then pass through to our disabled prompts in the menu dot item button. So let's go ahead and we'll switch that Uber wireless down ABI 30. Simple. And we'll, we'll set the Uber of October waitlist ABI. And we've got that there. And then we also want the whitelist, a dress. I think I saved it. There it is. And now we've got the ABI and we've got the wireless to giraffes. And we're going to want to do a handle admin check when the component mounts. So we're going to use the same, the same architecture that we did before. In fact, we can copy over a lot of the functionality from balances and take that into our menu. And we're going to, we're going to scrap this down. We're only doing one admin check. But this is, this is much easier to handle admin to do one function. And we can use other 2.5 second thread will have another variable in our state called admin check. And let's tear all this down. Now. We don't want to go check there is such a thing that we're going to have to look through at the end of our application. And it's called a Web 3 localization check. We don't want to be calling methods on the Web three variable, assuming that it's the MetaMask extension. If we are actually using the co von or the fear of Provided of Web 3 object. Because that's going to lead to two function calls that actually break the application and show a white page entirely at the application just breaks. So it's always good to program and avoid that Web three localization error as I like to call it beginning. So we don't have to get into the issue, into fixing that issue later on. And one of the ways that we will be doing that is just saying, if Web 3 dot current provider is Meta mass ends. We also want to pull in that state where we were saying that it's the three dot-dot-dot accounts dot length also has to not be equal to 0 to make sure that the MetaMask extension is unlocked. And then we also want to pull in the state, as I was saying, to make sure that we're on a co Vaughan Net. If someone tries accessing the admin panel and they're not on the covalent network. That would be, that would be bad. We are going to add into some more functionality to prevent that on the admin page itself. But for right now this is a good check. Is the current provider Meta mask? Is it unlocked? Are we on Coven? If we are, then we'll take a look at the waitlist address. So if there's, there's a lot of checks that have to go into it, right. And so we can do that by saying what three and valid admin. We'll set that to false. And then we'll say Web 3 dot, dot, dot. We're not even going to be doing that. We're just going to be checking this. And if someone is verified as an admin, then we're just gonna say, all right, you're good to go and we're going to actually close out the interval. So, so we can do this in the callback. So what A3 dot-dot-dot contract of the waitlist API and using that as the waitlist address dot admin status of what 3 dot dot accounts 0. We're going to need the pass from Web 3 dot P site counts 0. And then we're going to add our function callback error results. Let's make sure to bind it to this before we forget. For, I forget like I did last time. And if our, if not error and our now what I actually, I actually can't remember what the R is. Put the result is. And I think we have to access this C array. But this is a good testing example, right? This is, this is a good time to figure out how we test things and poke around these systems. So let's go ahead and just console log and see what we actually have. Popping up. False, false, false. So it would appear that we are getting a false variable. And that would make sense if we switch over to our 364. Now we're getting true. Very good because that's the account that we activated it from. So I just wanted to make sure that it was of a Boolean type and not giving us a 0 or a one number, which I think we can actually assume to be parsed either way. But that's alright. So if not E and R, which just means R is true, so there's no error in our returns true. Then valid admin. And this dot set state, valid admin is equal to true. And we will also clear the interval. If, if this isn't true, then we're just gonna keep checking and we're just going to run this every 2.5 seconds. So let's refresh and see what that might look like. And yeah, good. We're on this account o and valid admin. We also need to make sure that we actually pass in this disabled. What's, what's pulling the valid admin into our render scope. And let's set the disabled props to. It's disabled if they are not a valid admin, right. We are a valid admin. It should not be this would render to false and it would not be disabled. So again, we're on the account that we didn't instantiate the smart contract Waitlist from. So this should be right, so someone could just click admin, right? And then that here on this page, we're going to have another lock on this page is involved to do a check of the admin. But at the very least, this is going to prevent people from just going to it from the homepage directly. And in fact. So when I switch over to this address, then the admin pops up. If I switch back to this address, then the admin functionality should go away. It does not go away. That's right, because we cleared the interval. So we don't want to, we don't want to clear the interval because we could be checking, checking, checking. And if the associated value, if the, if the person on that page changes. Okay? So we are not going to clear the interval. And so someone changes, they can't go bad and they're already on the app and page. We're going to lock down everything within the component itself. So it'll be a locked down here. And mb it'll be locked down here. So this is some dual user interface lockdown systems that we're going to be implementing. But for the most part, I think we have about accomplish as much as we wanted to accomplish for this episode. So that was, this was great. We gotta, we gotta solid bit done. We have our flow routing in place. We have a fully reactive and dynamic balance and address bar. And then we have the admin page that opens and closes based on what page rent. And what I could actually do is actually, if you're not an admin and you're on this page, then it should kick you off, right? I mean, I could use floor router go to reroute you to the homepage. All when it's not setting it back either. Not error and not r. Then we want to save this dot set state, valid admin false. And what's due to flow router dot go homepage and actually reroute them to the homepage. So that way they are getting booted out of the admin page, they're not stuck there. And also if someone goes to the page themselves, it's gonna do a check immediately and it's going to kick them out of here. If they are not an admin. Ux, that's even nicer. Yes. So like let's say I type in slash admin. I'm on it. And then then I'm not. So I'm on this page. I switch to my other account. And then it switches over here. Oh, and so the URL did change, but it didn't set that this active item. And that's because we're using this flow router in the state. So really, really we do need to actually use flow router as the active item. And not even, not even get into this dot set state and active item or whatever. We should be using this instead to manage in getting the true. Yes. So we do need to switch that over actually. And we're getting rid of the whole concept of ACT, divide them all together. Okay? So we're learning and we're adapting, and we are making for what's going to turn out to be a world-class forward rate agreements trading platform. So let's do this one more time. And the admin panel opens up. I've switched to a different account and I get booted back to home. This is the homepage and the menu updates. So what we were seeing was the menu wasn't updating. But the component, the homepage component was loading and the URL was loading as well. So now we have, without a doubt, a very, very solid and you'll see I've got like 5 thousand die on one account and 43 on the other. We do need to do one more thing because everything is better when we are perfectionists. There's a function called to local string. And what that does is actually add commas to the value that's passed. So see you don't want to just read like four numbers in a row. You want to see commas, especially if you have a seven digit or greater balance. That's always, that's all. There's just so much easier to read than like seven numbers in a row. So here we go. Now we've got commas in place. And if we switch to the other account, we've got another common place there. The admin panel is opening up. Fantastic. Now we've accomplished what we needed to accomplish. I believe in the next episode we are going to have some fun with this homepage. And we're going to add in a couple cool features. It's unfortunate that I'm making all of these videos in one run. Or I could actually get a, some user feedback about doing some interesting things like there's a package called particle js and Vincent 0 particles. We could actually add in some particle effects to the, to the top here. And our Page Backgrounds, why it right? So we're going with that blue thing. So we could actually have like these particles in the top here. What about the neon cat? Weren't weren't where I went wrong. We get out some stars flying by. And then I also have a, there's a GitHub called transitive bullshit react particle effect button. And this is really fun to mess around with. Said that, oh, deletes, submit. Oh man, there's so much fun, right? I'll look that one was slow and then it went really fast. That's classy right there. So does that so, you know, I think we'll wait until later. I'll curb my enthusiasm for the adding in too many crazy effects. We'll stick with the basic functionalit 8. Single Page Application Design: Welcome back. We're we're already on Episode 8. We're making our way through this at a very rapid pace. This is very good and we're on schedule. We recently left off by creating a die balanced bar and a theory amount balanced bar and a theory and address. And we created a flow router to save as the marketplace. This is the managed page. Did it just send me back? Hold up. What's going on here? What's going on here? Oh, you know what, in our previous episode, I only okay. So we need to add in another check to say that if we're on the marketplace or the manager, or if, if the flow router does not equal to the admin page, we skip over it, or in other words, has to equal to this slash admin because it's actually taking us back to other pages. If we're not an admin, that was unintended functionality. And we're going to fix that real quick. So the way we can do that is take this check right here. And actually say, if there's no error and you know that from the waitlist address, we can set the admin to false. And if flow router.get route named is on admin, then go back to the main page. But if it's on any other page, stay there because that's fine. Any other pages accessible by the end-user. So that's kind of funny. Sometimes you're going to get these quirky functionalities that you didn't realize you put it in there and I'm just gonna make sure you take care of it. So now we can stay on the marketplace. Now we can stay on the managed page. We're not going to get booted off, even though we would only get booted off if we were on the admin page and just show that that functionality is still in place. We'll go to the admin page. And boom. So it's still, it's checking if the flow router dot getName is equal to admin, which it's taking from this flow route. Then we're set, we're good to go. So let's, let's go ahead and add in the homepage is designed. Let me cover a couple of the things that I want to do in this episode. First of all, I want to create a footer with visual viewable on all the pages. I want to beef up the homepage design a little bit, give us something nice to look at. Wall were just children, maximum relax. And on the homepage, there are a couple of icons below and say exactly what service we're providing. Because closer doesn't really tell you a whole lot, doesn't it? So we want to, we want to be people over the head metaphorically with what our service is. And make it very clear within 15 seconds of looking at the site what service we're offering. Because otherwise, you're just gonna be like, I don't understand this, how nodes going on. I'm gonna get out of here, get me out of here. So let's go ahead and on. The other thing we're going to finish up with is creating an admin, going to the admin panel and creating a basic smart contract creation form. We may will probably or probably not going to get to the back-end of launching a smart contract or doing the MongoDB methods and assertions. But we will get to that in the next episode. I think all of this stuff here is going to take up our time, our 45 to 60 minute allotted time for this wonderful episode 8. So let's go ahead and make a footer. We're gonna wanna make a Footer component. And we can just copy over really basic component from somewhere else and think we're going to want to put it in the divider, which we don't have the import statement. Cements UI react, but we do now. And I'm going to align it. For their rights. And I'm going to say designed by LLC, this my company. And we'll go ahead and throw a link to it, to the platform where you can trade options and set the target to underscore blank. That's going to open up another page. Which so if we didn't have this in here, it would just transition from the page or on currently to the other page. But by adding that in, we we ensure that we transition or we open up a new tab when clicking on it. And that's user experience, right? And then we're gonna go to our main layout. And we're going to add the footer components. So the bottom, very simple. One of the things this is going to do is actually scrunch up at the bottom. Let me show you. Yeah, So see you. It's not really allowing for a whole lot of space. So if there's more content, this would continue to expand below. But in the event that we don't have much content on a page, we want to give ourselves a little bit of breathing room. So we can do that by actually creating a div and setting the style min-height is equal to, let's say 500 pixels, right? And wrap the component section into this div. And recognize that we use the brackets just like this for passing in a prop. And this is like part of React. And we're passing in a string. But here we're passing in a JSON data structure formats. So that's where we have a second pair of braces if you're trying to understand the syntax of that. And this is going to give us a little bit more room. So regardless of what page we're on, it's going to give us 500 pixels of room to work with. Fantastic over a little bit of breathing room. And all the birds are chirping and like breathing room, right? So what we're gonna wanna do next is actually creates, actually find a royalty-free image. I was looking for a royalty-free image and I found one that I thought would look really cool. It's on Pexels. And I just searched mountains. I'm very inspired by the mountains. If you're wondering why. I've got a very nice view of mountains to my right. And I, I guess I could show you. Let's see if I can. There's a there's a huge mountain range all the way up all the way around my home and they go all the way back there too. So needless to say, I like the mountains singing on the patio, looking at the mountains to and I just so happens that this has a very nice and blue at the top that matches the web-page pretty well. So what we're gonna do is go ahead and create a public folder in our application. And that is a folder that we can actually access images or files from in our components. So let me go ahead and save this. Now. Maker Tao. Now we don't have a public folder. We're going to make one. And we should see on the list up here, as soon as this refreshes all this nonsense, dot JPEG. And soon as we come back, we have the mountains dot JPEG over here. And we're actually going to want to crop it a little bit. We don't want a huge photo, we just want something that's just enough. That looks really nice right there. Just something nice to look at. And we're going to close that out. And let's. So then my react over there. Let's go ahead and import this into our homepage. So how do we do that? Well, I don't need to import the image component, semantic. And we're going to want to create an image with the source. And because it's in our public file folder directory thing, you can just type it in this call it fluid. So it takes up the whole space and had a memory divider and below it. And that should look pretty good. Let's see what comes of this. We're going that we can get rid of this BreakLine. And this is just something nice that we have to look at. And it doesn't tell us a whole lot, but it makes us feel good. He say, I like it. Let me take one more look at our layouts real quick. Think we're going to want to get rid of this ER at the top, just so that we can do our own adjustments in the middle. So now there's an even amount of space here. There's an even amount of space there. And let's throw in a big sentence that says what it is we're doing. And then three sets of icon below to kinda give a overview of some more of the details of what it is we can do on this application. So let's go to the homepage. Let's import grid icon header. And under a divider, we're going to want to do in green. We know what we're going to want a header are big sentence saying what it is that we do. But said this style of size two and purchase a home maker. Now, for hearing aid and ruminants, you know, it's kinda hard to explain what this does in one sentence. We can chop this down to 1.3 and we can say purchase. They're like futures contracts, but technically they are forward rate agreements. But people are really understand the forward rate agreements are. So if I type purchase for the ingredients for breaker Dao, CDPS, hedge stability rates for loans taken from hedged stability rates. Hence stability rates associated with maker Tao CDPS. That's all right. And let's go ahead and do text align center. And that's looking a little bit better. We do have a lot more rooms, so we'll bump this up to, we'll go ahead. Great lines. Set a grid with three columns. And that's going to allow us one row and three columns equal width. Notice I'm just structuring everything out so that it's much easier to go through and set this. Actually we are going to run an icon as rho S, and this looks pretty good. Let's go ahead and see what this turns out to be. Heads stability rates associated with maker Tao collateralized debt positions. That looks pretty good. I would like this to be aligned in the center, but I don't know if that's possible or not. Pulsar a platform for hedging stability rates. And in fact, we don't even need to write posts are because it's in big letters at the top up here, a platform for hedging stability rates associated with maker Tao loads. It doesn't look like we're able to center it. Maybe you find that the icon inside that or contents battle take. Sometimes you have to just a goal and work, work your way through it. Perfect. And I bet if I did icon, he would even put the icon above. Juicy, juicy. Okay, so let's go ahead and add a couple more breaklines platform for housing stability rates associated with an acre Dao loans. And we're going to want to describe 0. And this is the fun part 2. Well, we know what we want to describe. We wanted to lock in a stability rate. Fixed stability rates. Let's find your preferred, fine preferred terms. Competitive offerings. Because the idea is that we're going to have multiple people on this site. Multiple issues offering competitive rates, finding your preferred terms. So choose between different coverages. Choose between different coverages. Multiple issues offering competitive rates. Find your preferred terms, choose between different coverages of them, different coverage availabilities. Choose your preferred available coverage. Choose your preferred coverage. And fixed stability rates is so locked in, locked gains stability feet. And let's use a lock icon. Enter into fixed rates for up to 12 months. Lock lock your stability. Locking stability. See, I'm not a copywriter by any means, but I'm happy with my best to lock your stability feet tall out of the 12 months. Fixed stability fees for us, for fixed stabilities fees for up to 12 months. Block gain, your stability rates, excitability. Lot. In stability rates. Choose your preferred terms. Find, Find Your, choose your preferred terms, find your preferred coverage. And I think locked fixed stability rates, this would look better. Mobility rates. Trump told months. Choose your preferred terms. We want to have like something that's a list, like preferences. I can do the list and see what's available. Option, options, options, options, options, and competitive offerings. Multiple issuers offering competitive rates. Flexible coverage. Now this is cool. Find your preferred coverage and terms. And I think, I think we're approaching enough. I'm not going to live to this image is a bit too colorful. Like it'd be great if I could die that down a little, tone that down a little bit. But I'm not going to worry about it right now. I think that's pretty good. We've got our own page, competitive rates. Multiple issue is offering competitive rates, flexible coverage. Find your preferred coverage in terms fixed stability rates. Lock in a stability rate for up to 12 months. That's what it should stay saved. Low lock-in based stability vary from 12 months. And we have just about knocked out the banner in the icons and the footer. And I think there's going to be about do it for right now. There should also be a thing in the footer that says have questions, contact us at, contacts at. And then so let's go ahead and add something to that real quick. We're gonna need to split this up into a grid with two columns. One on the left, one on the right, grid columns two. And think I could probably just do a line like a div inside the grid column. I think it would be easiest. I'm sure there's something I can do above, but I'm not too worried about it. Model looks pretty good and you have questions. Contact that in the exam by 10. I don't need it. I don't mean bold tag in it. Great. Well, I think that's nice platform for hedging stability rates associated with maker Tao loans, fixed ability rates, locking stability feet from 12 months. Find a preferred coverage in terms multiple issue is offering competitive rates. I think it doesn't get any better than that. Looking at this, this is this is really a noxious I think if it were like blue and black and white, that would be a lot better. I'm going to check real quick if there's any way that I can anyway that I can turn that and down What's let's just see if there's a filter for it looks a lot more visit, doesn't it? I'm not going to worry about it too much for right now. I know I could spend hours here adjusting this photo or looking for other photos. So we're going to just keep on chugging forward and keep on chugging this coffee I got from me. We're going to make a basic smart contract creation form. We're not gonna get into the back-end. Actually creating a smart contract for passing variables to our Web. Three variables in a opening up the MetaMask extension, I just got a stretch. But we're gonna make our basic smart contract creation forums. So let's, let's go ahead and do that. We do need to hop over to the admin account that created it, because otherwise we won't be able to see anything. I will just get booted off. Now. Let's go take a look at semantic UI and see what we have available for a form. I'm sure there's admin panel is going to get way more complex as time goes on. But it's all about creating components and making everything on the page a component. So we're actually going to create a directory called admin. Throw the admin into this directory. And that's going to update the the import directories like here. And we're going to start making everything a little loops, a little easier to navigate and separated. So now I can do this three dot JS, JSX. And this is something that I can throw onto the admin page and also put in different places as well. It can be a component that can be reusable in other areas, but we're, we're making edit basic component for now, which we will import into the admin page. So kind of like that. And as we update this, I will get updated on the the admin page. So if I were to do this is the non-closed visit. This is the admin page and this is the creation form. Notice that when I load the page, it looks like this up in the menu bar. And then the gray thing, because it's still, it's not kicking someone off if they aren't an admin right away. But if it turns out that they aren't, boom, you're out of here, air out of your body. So we're going to go ahead and create a creation form. And we can kinda look at what that looks like on reacts, Semantic UI. We've got some components here and inputs. But drop-down then you feel loading success, submit buttons, warnings, field errors. So we've got a lot of inline headers. Something has to be required. Variations form on submit. So that's all good. It's all fine and dandy. Let's take a look at our smart contract and see what we actually need to pass through the forward rate offering to the constructor to create something that would be a flat fee, a monthly fee, minimum rate stability fee that will be accepted, a maximum rate stability fee that will be accepted. This is referencing the current stability Xiang network. And the coverage that will be provided. So we've got five things that are passed through. And we need to create a form that will accept all five years trying to think about what's the best way to do this. All of these are percentages, right? So what if we had a drop-down for each one of these bars? Are each one of these options. Kind of like we had a drop-down for this for male-female. But what if it was like 1%, 95 percent? And we could select between this four. Like it says gender there, but what if it said like stability? And instead of having genders to placeholder, we have the default percent or 10 percent, right? I mean drop-down and you click 1.5%. And we don't need any inputs, but we could just have a big drop-down which allowed all of these selections to be made. And I guess the question at that point is, how granular do we want these options to be? And by granularity, what I'm saying is, all right, You knew you want it to be 11.11%.21, 0.3%. I mean, I guess you would want that fine tune of a selection. And you may even for the monthly fee that's selected, may even want something that's more fine tuned down to the 100th place. First starting out for starters, let's be super granular to the tenths place and do something like this. Each is supposed to have a unique key, so definitely can't control safe. I think we're going to want to go with something like this. And in fact, I'll go ahead and copy the server or save it as a global variable right now. And we're going to want to know 1.123456789234567891. And then basically we take this and we can delay a two in front of everything, right? It would be like to 0. This would be if you go to ones. And then we could have something that goes for all the percentages below it. I don't think you would want anything lower than a 0.1. I can't see any reason why you would have that right. And obviously this is very tedious and not extraordinarily in probability. What I'm gonna do is just leave it at this right here, right. And I'll go ahead and add up to the 15 percent later. Let me just, let me just add everything in for this section up to 3%, or at least up to 2.9%. And then I'm going to do all of this later on my own. You can meanwhile, like watch as I go throughout this is that wouldn't be greatly boring. And with anyone wants, it wants to do that. I'm getting bored myself just sitting here song as I finish this out. And we're going to want this handle change the value. Course. We're going to want that in our function. And we're going to work the form. Let's go ahead and we know we want a button from Semantic UI. And we want to form. And we want a and that's about it. And we'll go ahead and cost. And we'll go ahead and copy and paste. Now, one of the other things is that a form by itself might look a little strange. But we probably could maybe make the segment, put it on top of that. Extends component. Selects. Get rid of this. We've got the max stability and instability rate, the monthly fee, D flat fee. And the final thing is the coverage that's offered. How much coverage is offered? Quantity 1, 0. Then I'm gonna confuse what is this saying right here. There's a form, a form field 0, 0. This stuff is just extra from down here. Okay? I didn't realize that. Okay. We can get rid of all this then. And maybe we do have I agree to the terms and conditions you use. I really don't know. Option option. Written our options up here. And place where you're like 2% for the minimum stability fee, monthly, B is 0.8%. And then the flat fee really should be more granular where we get down to the 100's like not 1.12 or 0.13, right? But we'll just do it like this and that'll be good enough. So let's go ahead and see what this looks like crossing our fingers and pool. So we've got a form where we can select what the flat fee is, month defeat, mineral stability for you that looks at the max and the coverage. I agree to the terms and conditions and submits. And we're going to send all of that to the backend. It's going to create a smart contract. It's going to add it to our MongoDB. Something's going to pop up here below. We're going to have a whole form or a whole directory of all the forward rate agreements that we've created. And we can access them through there so that the adenine that Qin fill and with trough from his various forward rate agreements. And we can get rid of this. This is the admin page. And to explain like this obviously looks a little bit silly. But if it were on a segment like this, isn't it, that this is a segment like this. And we say wastes and recovery, lose. This starts to look a little bit, little bit better and we take out the I agree to the terms and conditions. And we have a button that's fluid and its basic, and it has an icon. And the name of the globe pen it says creates a 3D drawing them offering. And I don't want to import that. Then things start and we did we didn't use this handle change. We will we will be using that a little bit later, I'm pretty sure. And think starts to look a little bit better. Just a little bit better. We can take out this BR and we can even add a. We can give it as this is the admin page and you can do like header FRA, wish to form with some icon that says as the afterload. And the kin towards another common semantic and create forward rate agreement offering. That doesn't look really that good, especially if it's pervasive. It suits a blue. Let's take out fluid and let's put in a div and a limits to the right and go back to the home, or go back to admin, take this out, Let's make this blue. And there's BR here at the bottom and a segment. And they can have a little bit weird. I think this is all going to look a little bit better. A little bit better. Go ahead and refresh. And this is just wait patiently. Fra creation form. So there's probably better ways to organize all of the buttons. And I'm sure there's a much better way to do this whole form, but at least we got the basic parameters down that we want. I'll go ahead and add in this. The rest of these values. Create 11 hundredths of a percent accuracy for the flat fee. And possible them monthly fee as well. Minimum stability rate, that's not really important. Coverage to the tenths place is good. And I think we're going to call it here. In the next episode. I want to get into actually storing these values and state using the the. If we look at our forward rate offering good at details, you'll actually see they have a walk-through deploy a JavaScript setup for us. And what we can do here is actually an, and I'm going to get into the details of this little bit later on. But what we're looking at right here is creation of the forward rate offering. And then we have a callback function. Remember how we were talking about callback functions before? Well, this is essentially a callback function that gets fired a couple of times 11 the transaction hash for the call to the block chain for the creation of the smart contract is created. That's when MetaMask pops up and it says, do you want to click submit? Boom, you submit. Transaction hash is created. And a second time, when a contract its mind and it returns the transaction hash, our returns the contract address. And I actually don't wait for that second call back. You'll notice that I store just the transaction hash and process it from there because that gives a little bit more of an immediate feedback to the front end. And we can handle the mining of the contract address in the meantime on the front end. And we're going to get into all that. You see these details in episode nine. So let's conclude a here. And I think, I think we're gonna get into the very interesting details. I gotta be honest. All of this is really interesting and all of it. But especially in the next one where we have an interface creating the smart contracts stormy to MongoDB. That's where gaps become powerful. So until next time. 9. Smart Contract Initialization: Okay, welcome back to Episode 9. In the last episode, we had gone over creating the homepage. And we got these nice images in place, these nice icons. And we also created a basic admin panel for selecting flat fee, monthly fee, minimum stability rate, maximum stability, right? And the coverage that will be provided. And as of right now, all of this data's just being stored in the selection component. We're actually not saving it anywhere. And we wouldn't be able to create a smart contract by passing the variables along because we're not storing it in state. So some of the things that we're gonna be working on from here include importing the ABI for our forward rates smart contract. We're going to need to do that in order to create the, the web. Use the web 38 variable to create a smart contract. Pass the parameters along. And that's going to instantiate this MetaMask extension to pops up and says Submit, and we'll go from there. And then once we got the ABI in place to allow for that, we actually want to store the selections of these drop-downs in react the state. And then we also want to create a selection panel, view panel below using MongoDB. So we're gonna get into some of the deny and allow insertion methods, instantiating our forward rate agreement offerings collection. And just to reiterate so there's no confusion. Fold rate offerings and we can call this like forward rate, forward rate offering form. And that's going to be one smart contract that the admin creates liquidity to. And then a ton of people can come along and enter into a forward rate agreement. So I view the smart contract as a forward rate offering. And the individual transactions that occur within it are forward rate agreements. So let's go ahead and now I'm going to show you how to import the ABI into the Web Store, WebStorm IDE our JavaScript file. But and if you remember in the last episode, I had actually talked, actually created the, you know, the basic options for our form. And I made like 0.1% to 3% why I went through and I created the whole up to 30 percent. And then I made another another one called Options small or options. And it's good to keep that option small. And this gives more precision for the the specifically for the flat fee and the monthly fee, the minimum stability. You don't really need that precision. But we do want it for the flat fee and the monthly fee and not for the coverage really. So let me show you how you get the ABI into it. And you can see right here I have the ABI. And you acquire that by going to your remix. And you could copy and paste doing this. But for formatting purposes, I don't like all of this. I prefer to go to the details and just copy this variable over. And then you have long, long line. And you can slowly drop everything down. And so that's what I did here just because I thought it would be really boring to watch me do that. So I figured. How would you do it on my own time. And then you can kind of look at the names available and the different state variables, the different function calls and, and what not. So that's how you import the ABI and I'm going to do something right here. We had talked about what three localization before. We don't want to expose an E was three calls in the global setting of a component because someone comes along and they have, they don't have MetaMask and they're using our Web three global variable provided by inferior. Then we will run into issues and the application will crash. So what three localization means? We're not gonna do that until a function is called. And we're not going to allow a function to be called or the button to be exposed to, call that function within here. By managing this segment access to it. And making sure that you know that what three dot current provider dot is MetaMask is true. So we got the BI and we can go ahead and take care of that. And now we want to store our selections in React state. So how do we do that? Well, first off, let's go ahead and switch over the options too small. And we've got flat fee. Who's got monthly? See, we've got men, brave. Max rate, and we've got coverage. And this handle change function, it appears that it's currently taking the value. So, so if we look at a form field that I have in my other work, which has a drop-down. Let me select and copy it over. And we can take a look at what I've done elsewhere. As a label has the options, has a name that's important. Name. And then it has value. And then it has onchange equals this dot kinda change. And it, If I were to look at the handle change I have in my function over on this other application. I would in fact find it that we have a slightly different way of setting States. So it's actually taking the name and the value, so two parameters. And it's setting, it's using name to say access this value and states and change it to the value. And the value. Let's say we make a selection for flat fee. The value is actually going to be one of these. You see here value that's going to get passed into the state. And when I'm looking at right now is these are all strings and we may need to do a conversion into number in order to pass that as a parameter. But we may have a Web 3 utility to actually take care of that for us. So anyways, let's go ahead and fluffy value will be flat fee. And we do need to pull in our values and you see how it will kind of veering off to the right a little bit and it's making it tougher to see what's going on in each component. This is an indication that we just need to drop down everything and have everything on one line. Just for, just for simplicity and viewing purposes. So let me do this. And once we have that in place, it does not appear as if we have a placeholder in our, in this. So we can actually just, we can take that out. And we have control equals select instead of selection. Well, it means the same thing. If not, we'll find out and we can of course, just take out this and do selection if we have any issues. But let's go ahead and copy all of these values into states. And we'll take out placeholder. And what we wanna do for this one is copy over all of the placeholders. And we need to update the names in each of these. So it's updating the appropriate state variable. And if we wanted to do is check that we are in fact updating these state variables. What we could do is have yeah, we could do something like this, right? Flat fee and monthly fee then rate max rate coverage. In Japan. This is going to allow us to just make sure that we are in fact updating the state variables because we're actually viewing it in our component. And let's go ahead and create forward rate offering. I think we're going to change this into a grid as well and condense this form so that we have our options. We have a form over here and we can view all of the ones we've created over here. But let's go ahead and just wrote the changes that we put into place. And 0.0405060%.60.14. So we can see that in if we were to change this, then that gets updated and changed this, then the fourth variable gets updated. That's great. So we know that we are now actually assigning values to these variables, to these state variables. And one thing we could do is actually give like a range, right to start out with and just the sign. Flat fees 0.55 and monthly fees 0.157. Thank them like that, right? And yes, it is midnight and I'm still drinking coffee out of this cup. I can go ahead and delete that handle change. I'm actually surprised. Did you notice that we had to handle change functions and it seemed to be calling the appropriate one. I don't know if that's because we are overloading. Overloading is when you have one function, two functions with the same name, but there's different parameters. I don't know if meteor was accounting for that or JavaScript React js are really cool. Fit was. And yeah, so now that we actually assign some of the values in state like initializing it, we have very nice. Yeah, and this can be changed easily, but these are some good rates to start out with 1% at Get out of here at 2%. And what we're gonna wanna do now is actually create a grid. This is just going to look so much better. If we do this, let's have it be two columns. Equal width, so we don't have to specify the hips. And we'll have this over here and this new word integrated. And we'll probably going to create a component. But for right now, we'll just kind of create something that makes it look nice. So we have an idea to do. We want to create a deployment for viewing forward great offerings contested. And this is going to o and look at that. Now we have some weird things going on. So let's go into our Create form. And let's do, let's put this up into two, a row to another row of two. And make this form field fluid. And let's make the button here and actually take out the div aligned at the left. And we should have a nice condense create forward rate offering panel. We don't need to see this anymore and we don't even need to have the double brackets. So this should split it up into a flat fee, monthly fee, Min and max mobility rate, and then one entire full road for the coverage. And that's just going to look way better. And we're getting into the point or applications are getting a little bit more complex. Meteor is taking its time, regenerating everything on the front end. So we've got a flat fee, monthly fee, minimum stability rate, maximum stability rate, and the coverage we want to provide. So this is great. What if, what if you could type into this? Not worry about that right now. Carry forward rate offering. Let's change the icon on this. And let's change the icon down here and bump up the size of this button. Too large. And I think it's just going to look a lot better. View forward rate offerings. And that's going to need some be a little list. And then I think from here, we have our selections and react state. And we have the Create selection panel. We have the we don't have the view panel actually. So that might be something we want to add in next. And instead of a or, a divider would look a lot better. Here in the bottom. You still have that API, which we're gonna get to here in just a brief second. But for right now, actually look at that. I can get different lighting. She'd become a leading expert. Yeah. So I have a little divider right here and this just looks a lot better. Create forward rate offering. This would come up with some kind of panel and then we can view our forward rate offerings in here. Now, I think what we'll wanna do next is actually instantiate a smart contract. Let's do that. Let's get the data flowing. And then we can think about how we might wanna do this view forward rate offerings. And we could have a big panel that takes up the whole thing down here and expands to then manage a forward rate offering. And it can be reacted panel that updates with every visit. Very similar architecture to what I've done on, on other projects before. So let's go ahead and actually get into the creating a smart contract is our selections now. So we're going to want to have a function called handler create full, forward. Great. Offering is going to have five parameters. It's going to have flat feet. It's going to have the monthly C. And I am using different syntax. You know, that's just going to be how I roll. I like to do different things for different sections, you know, like my state as camelCase with the first letter lowercase, and then my parameters. I like to do this, but yes, it's all feeling base really. Like in my constants, constants side of this. So we can actually do form. Submit this, handle creative 40. And we would be passing in flat fee, the mean rate, max rate, and coverage. And we can check to make sure that we're getting the appropriate values by doing a console log. And we can check in our JavaScripts to make sure that when we can click this, we're actually firing the function. And oh, look at this. We're going to have to make the screen a little bit bigger. Okay? So we are passing in monthly fee, fee, monthly Min and max and coverage. So from here, we just need to actually create the smart contract. One of the checks we might want to make is that we'll use this. But one of the checks where you might want to make is that the mean rate is greater or less than the max rate. Because otherwise the contract creation is going to fail. And we could also do the admin check as well. But ideally, if you're not an admin, you should get kicked off the page pretty quickly anyways. Bytes. I guess we could do another check to just so someone can't switch real quick and then call functions. So, so maybe we want to do both of those checks prior. Just to keep things moving along. I'm not going to add in this check right here, although it wouldn't be very tough to do. Cash choices, choices, right? So let's just do this real quick. If and I think we can, can convert. If I were to do, if I were to do number and then Min and max rate, what would actually what would the console's spit out? This is important because remember that the values that we're assigning to the state variables are strings right here. So let's see how the number conversion changes it. If it changes it to a float or a double variable, that's good. If it changes it to an integer that might be. And so let's just do a real quick check. It does in fact change it to a float or a double. Fantastic. So we can actually convert number minimum. And we can say, if the number of numerator is greater than or equal to, number of smacks, rates to grow. And then re less memory greater than or equal to the tax rate. Not allowed. And this is actually going to prevent the function from running and doing anything else when you throw an error. So it's a really nice way to just cut everything off. And so we can check that by saying, if it doesn't throw, will it console log this string right here. So we can go ahead and check. And We have to make our minimum stability rate greater than our maximum stability rate. Uncaught not allowed. And it didn't it didn't log check. So that means that it's throwing and it's preventing the function from from continuing. So that's important. And let me go pull over the architecture I have for the actually creating more do I have it? Okay, so one of the first things we're going to want to do, and we can take a look at this. Is that it says forward rate offering dot contract mu. And we can go ahead and copy this whole thing over. Notice that the data here had relied me this data because otherwise we can't access it over, can't create the contract. So obviously we're going to change these variables, but I'm just adding this in here for i. Now. We can actually use for rate offering contract because notice that it wrapped the ABI and that Web three dot-dot-dot contract. And we're localizing our Web 3 activity. So we want to to say Web 3 dot three dot, dot, dot nu. And here we've, we've moved the Web 3 into our actual function call, so it will only interact with that what three global variable if the function is called when the component loads. Well, I asked strong coffee right then. So from here it's just a matter of what and the other thing is, I like I was saying before, I only like to work with a initial contract off call firing. So I just say if it's equal to undefined, and I don't want that to be any error either. Of course. Not. E Why wouldn't I be able to use why would I not be able to use that? Okay. Hold on. That's so weird. I don't know. Well anyways, so if there's no error and the contract dot address is undefined, then we will say, we will say the contract is not mind, but transaction hash is actually equal to the contract dot transaction mash. And one of the reasons we are doing it this way is that these functions are cold client-side. Okay? So in the event that a function is called and the client disconnects while we're waiting for the call back to occur. See this initial call back fires immediately. But while we're waiting for the contract to be mined on the main net disk could take up to 50. That is taken up to 1520 minutes for a transaction to mine on the on the main that and the client could disconnect in this will not call. Arguably, we could move that to the server side and handle it there. But that's not something that I'm looking to set up or do. I'm just going to save the transaction hash. So I want a 100 percent of the time collect that transaction I. And we're not gonna get into the MongoDB just yet, but we're storing it in here. So let's go ahead and do a couple of conversions. First. Remember how I was saying that. You know, when we have like 1%, it really is this number, this number I here. And if we have 0.15%, it's really this number. So let's get the console to properly, in our JavaScript code, let's get this number to properly convert to that from the 0.15 string to that. And then we'll pass it through our contract creation. And it's telling me, Hey, you can't reach this code. Oh, yeah, No, done. Okay. So number flat E. What three dot t2, wave. Number 5. And let's see what that puts out. I think I think we're going to need to look up what the way conversion is because we're definitely not. Okay. So point 55, that is, it compared to 155, is a magnitude of 100 and greater than. So what we can do is use our conversion and divide it by a 100. And that should give us the number that we're looking for. So point 55, and we can test it out. So if I go to 0.15, AM I using the flat fee? Yes, I am. So my passing the right number being down or as they might say on that one show, Brooklyn 99 being pod. So we're going to use this conversion for all of our numbers, five feet and entry fee and range maximum coverage. And that's going to allow us to create the contract with the appropriate variables. And pulling this up over here. And it spits out the transaction ash. And what we wanna do is actually take that transaction hash and create a list over here of all the forward rate offerings that we've made. And then when we select a forward rate offering, we want to have a drop-down menu below that loads all of the forward rate agreements created through that offering. And let's make sure that everything is going through. Now, check this out. This would be a security thing, right? I'm going to switch real quick, Boom, call it before boots me out. And I've now made a call with my other account. So I'm gonna go ahead and call it. And now look what's happened now I'm on my second account and it's allowing me to to deploy contracts. So that's a, a vulnerability right there. So what we are going to have to do a check at the beginning of this to make sure that whoever is calling it is verified it. And that's going to prevent people from later making yeah, insertions into our database and spending it unnecessarily and see if the contract deployment failed. Because we have that check that says whoever was calling it has to have this admin status. So while we do have the security of actually creating the smart contract, technically someone could somehow access this admin panel. And then we're in deep trouble. So to counter that, let's just go ahead and just do a small check real quick. We know that we'd already have some of the architecture from our previous menu to disable and enable that admin button. So we're going to take the waitlist ABI and pull that into our Create form. We also want the address if you copy that over. And we're gonna do a check and we're going to use a callback and then fire this function. If everything goes according to plan. Oh, what am I doing down at him? Go. So let's go to our menu and see how we recalling it before. So we have this right here, and we'll go ahead and pick back to our Create, then foil, copy paste that and Min status for tonight you've got accounts from this. So we're actually using the same architecture now on the call back. See what this is saying here as actually pinging the waitlist in the JavaScript code and just making sure that whoever called it is a valid admin or a valid issuer, as I think will soon transition to that terminology. And this should allow us to call the function, but it'll basically do nothing otherwise. And that's the key functionality that we want. And if authorized access. So so if I'm a valid admin, I should still be able to create the smart contract, right? And if I'm not, it should not allow me to pull up anything. And MetaMask popped up over here. And I'm going to reject that. And if I switch just in nicotine, um, and create a forward uncaught unauthorized access. Nothing even pops up for MetaMask. I have no no confirmed by one. So we've added an additional layer of security into our application. And we can use. So there's a lot of callbacks going on here. We call the waitlist. And if that callback is successful, then we fire a contract creation and that callback is successful. Then we print the transaction hash. And what we're going to be doing next is actually adding these creations. We're going to store the transaction ash and all these other variables in a MongoDB collection. And we're going to use that as both a means for listing all the forward rate offerings. Enabling admin management for the forward rate offerings, you know, locking a contract. Yeah, locking and offering, unlocking an offering. And also to create listings on the marketplace and to display the admins forward rate offerings. So I think we've made some really good progress. And we have a lot setup for us. We knocked out a good chunk of the admin panel right here. And it's, you know, what? It is complex, but at the same time, it's, it's pretty simple. And if we just break it down, it gets even simpler. So until next time. 10. MongoDB - Insertions and Security: All right, Welcome. We are on Episode 10 already of this grand journey into a decentralized time and space. And we had left off, we had a form and we were going to start inserting the creations. So this form creates a smart contract, right? And then it spits out a transaction ash. And we're now going to transition into storing this transaction ash into a MongoDB collection. And we're going to get into all the details about MongoDB on the backend. Cheers. Fueled by good old caffeine a theorem. So let's do a couple of things real quick. I don't like this. I like this segment. I mean, we got the smart contract creation form here on the left. The view forward rate offerings should be a little bit more. Dial down back. No segment. We'll just get rid of this. We'll add in a divider. And what I like to do is actually get into using using React Semantic UI for a list. And we can use one of the. So this is one of the cool things. There's this component or a props called selection. And that allows us to actually make selections for various components or various items in a list. I think it may be a little bit better demonstrated here, selection like this. So instead of having that, that segment thing, we can just have a long list of ten forward rate offerings per page that look kind of like this. And yes, see it's a little bit down back. And when you create something, it gets inserted into the top. So we'll have it sorted by creation date. And then they also have pagination. So so we can not load all the four grade offerings. If someone has like 30, you don't want the page to just go down, right? So we may not get into the pagination in this episode. We will get into the forward rate offering, creating this collection of MongoDB and doing a little bit of security and inserting the methods are inserting the smart contract creation into our MongoDB collection. And I think we'll, will likely end by showing this process where we are inserting elements into our MongoDB collection. And then we will have a basic list in might not have the pagination in place. But we'll see how far we get. So let's see where do we want to start here. Let's do MongoDB first. So in our imports directory, in this API directory, we want to create a dot js file and we'll call it forwards dot js. And this is where we're going to instantiate the MongoDB and add in the security precautions for interacting with it. So let's go ahead and import Mongo from meteor mongo. And we will export, let's call it F equals Mu Mongo not flip in FR. And this is the constant name that we will use to access in our JavaScript files in the directory, in the projects. But this 40 is actually how we will access it through Meteor Mongo. And I even have a demonstration of this, but it's testing a couple of things out. Don't worry, I haven't missed anything. I deleted all my work. And from here, we'll want to set up something called denied. And this is where we say we don't want. Inserts to happen. We don't want removes to happen and we don't want updates to happen. So it looks a little bit something like this. So if someone tries to insert it manually to do the command, to do the JavaScript console. Then this will return true for deny and it will not be allowed to happen. Insert, remove, or update. And from here, we will handle everything else on the server side. So the two things we wanna do is one, have our Meteor method in place for, for inserting into this collection, not from the client side but from the server side, right? So that's why we're putting it into this meteor is server code block. And we also want to have Publish. So when the client subscribes to the data, they are accessing it from the server and the server is publishing only the requested data. So the publishes actually very simple. I'll just go ahead and show you what that looks like. We have function at 40. We can call it whatever we want, and it's just the callback function. And they're going to pass in an address because one of the values that will be capturing and each of these forward rate offerings is who is the admin creating it, right? And when multiple admins will come to this page. So when they switched counts, the page would of course, well, if this was an admin, would of course, reload and would switch to all those other forward rate offerings associated with that account. So there'll be passing in their address. And this, this'll make sense a little bit later how the publish and subscribe function works. I'm not going to touch on that, but I since I'm here right now, I will go ahead and add that in. And this is some MongoDB. And just for security purposes, I am born to a string. I'm going to make sure this is a string. And I think I need to import. There we go. And let's go ahead and do that. So we're doing two things here. One, we're checking that the address provided is a string, but it also checks, it also sanitizes the data and makes sure that nothing, no MongoDB syntax is getting added into this, into this right here, because it is possible to remove all of the MongoDB collections. Maybe not to this. Maybe there is some additional syntax within it, but we do not want that to get pass through and then all of our data is deleted and bye-bye. So this is a way to check it and sanitize our data. And then we also want to have our Meteor methods. And just so I know that I have my syntax correct, And then we have this. Here we go. So I'm just gonna copy this over. We can name our function whatever we'd like. And this is if we were passing in a JSON data structure, but I prefer the perimeter structure a little bit more. So I'm going to type out all the parameters we would pass all the data that we want to store into our collection. And it would be the admin, their address. Admin. And I like to do underscore just to break up the variables a little bit. And she did have a distinction between what variable are we referencing and the parameters and what variable are we referencing over inserting into MongoDB? And it's nice to have some different syntax for those two tasks or two groups of data. So FR dot insert will want to pass along the admin. Obviously the flat fee, monthly fee, min, max rating coverage. And that should do it. Flat fee. A monthly fee and max rate. Now this is validating what our schema is. I don't really care about that. And also this section, if you see it's calling like this to do like, let's say this was our f, right? And it's updating it. We're not updating anything. In fact, we probably will never update something because if you think about the way that our smart contract works, we don't ever changed the state variables. Let me just pull it up real quick. We're never changing a state variable. That's important. Like the five fee, monthly fee, min-max, and coverage. Once the smart contract is created. And the admin, I mean, these are the only things that we set in the constructor. And there's no, there's no functions that can change that within our smart contracts. So we know we have static or fixed constants would be a more appropriate way of describing it. So we can safely store those in MongoDB knowing that they will not change later on. But regardless, we're not updating, we're inserting. And the only checks that we need to do before we insert would be to make sure that admin is a string. That would be the address. Oh, almost missed the coverage. And there's one other thing too, before I forget the transaction action. Because when something is created, we want to store that transaction ash and MongoDB and work with it later on. So we're going to want to do our checks for all seven of these variables. And the monthly fee, the flat fee, the minerals, and the max rate, along with the coverage are strings as well. And now you may be thinking, well when we created our smart contract and we convert all of these numbers into, into the 18 decimals and then divide by 100 to represent a percentage. Well, well, yes we did, but that was when we call the forward rate offering contract dot knew when we had our function call. We actually didn't not change it into prior to that. And these were all strings that were stored in our state. And see if they started out as strings. So if we're using the default values there obviously strings. But if we made another selection looking what gets stored into state here, the value of everything is a string, you know, 1.1 through all that. So when it's passed through our function, and we eventually call this, we will be passing a string into it. And finally, we're going to want to do F RO dot inserts, compete O or JSON structures, pretty JSON structure into the MongoDB collections that have happened over the last few months. We've seen minimum and the max rate, Verge and transaction on and created object. And notice I'm I'm kinda skipping just to get this. So the monthly fee will get nights. Variable B. And its max rates are just passing straight through the parameter coverage and the transaction hash. And the only thing that will add in differently into our MongoDB collection will be this date variable, new dates. And this is going to store the, the time. It's, it gets the current Unix from JavaScript. We'll actually a date-time variable and it stores it in our 40 element in our Ferraro collection. And I guess we could return true. We're not going to use it, but it's, it's, it's good because we may end up using it later on. So how, now that we have our method in place, how do we actually go about calling it? Well, very simple. We typed in and the name of our method. And then we pass in all the parameters. So if we look at the the ordering fact, we could just copy this over here. We have down here, we've got the address. And something that I want to point out. I had changed this prior to working on this application, or a couple of minutes before I started this video. In our handle create FOR 0 function, we simply did not have this additional parameter of address. But I realized we actually want to capture that what 3 eighth dot account 0 at the time that the function is fired. Because these things use callbacks and for whatever reason, if someone switches in their MetaMask account that what three dot-dot-dot account 0 value. What does it actually changed to the new account that's selected? And if this function is particularly slow for whatever reason or the callback, callback is taking a couple of seconds. We want to have that address store sent along as a parameter and use that. So we have something static and not dynamic because we want to know that a 100 percent whatever data we started with is the data that we will end with. We don't want anything to change throughout that time. So we updated this the first value in the getting the admin status. Who's calling it? Again, who's calling it in our callback. And then again, when we pass it into our forward rate offering, insert meteor call. So let's go ahead and pass in all the appropriate data. And now we have a way of inserting the transaction hash and the appropriate data into our MongoDB collection. So let's take a look and see if it works. There may be one other adjustment I need to make. Maybe one other adjustment I need to make. And I do have the meteor mongo pulled up. Let me remove everything from this collection so it's all fresh. We don't have anything in it. I'll go ahead and confirm. Error invoking method. Method not found. Now, I have forgotten something and we're going to go take care of that. There are a couple of things I have actually forgotten, which we will take care of right now. So one of the first things we need to know is, let's think about this. We have a JavaScript code, we have a JS file, and it's got server-side functions, both side functions here it creates an F Ferraro. How does our application no, this file even exists. Well, we need to go to server, and this is the server directory and main.js. And this is a file that gets called when our Meteor application Starts. And wouldn't you know it, we have to import our JavaScript file. And then we have access to all this great functionality. And another thing we can do, we have autopublish and insecure as two functions or two packages in our application. Publish all data to the clients, allow all DB rights from clients. We don't want either of those. And we can just delete it and say be gone with those two things. Because we already have the proper publish method on deny security methods and the method for inserting. And if we wanted to update it, we'd have to write another method. If we want to remove, we'd have to write another method for that. But this can't be done manually by hand anymore. So. Or I should say, what that insecure and autopublish was allowing is for access from the command line or from the JavaScript console to insert documents and remove documents. And that is no boy, I worked on a project for awhile and then even realize that was a thing. We we sorted that we sort of that whole issue out pretty quickly because embarrassing if the time actually. So let's go ahead and see what happens now. It looks good. Bloods check our Meteor Mongo. And we haven't assertion that it would appear to be at this time on this date. The transaction hash does in fact match that one. Coverage five, max stability, 11 men to monthly fee, 0.15, flat fee point 55. Let's do another one. Let's say the flat fee is going to be 0.75%. The monthly fee is going to be point 200 percent. The maximum willing to accept is three. The minimum is three, the max is 11. And I will, I saw generous. I'm going to give up to 7% coverage because That's just on that assignment for anything. Because I also charge a pretty icky, but a more risk murder or dried. So if we'd go check again. Now we have two elements inserted into our MongoDB collection hat. And this has the newer time, the newest timestamp. This transaction hash over here, coverage sudden max and Min 3, 11 and flat is 0.75 with a monthly point 2 0. And this is fantastic. This is all the data we need. We do not need the contract address. We don't even have to worry about whether it was mined or not. These are all things that we can handle within our components. And we, we really do not need to store that data. And in fact, I would even say that, well, it would be easier to manage it with a contract addressed after we get way more information by storing the transaction hash and using this. So now what have we done so far? We have our MongoDB instantiation deny assertion methods. Now we actually want to look at all of these great things that we are inserting. So how do we do that? Well, it's funny, you should ask. Well, let's go ahead and talk a little bit about data accessibility. Now, I took out that Meteor autopublish package. So what does that mean? Well, the autopublish package was publishing all data from all MongoDB collections to all the pages. That's not very secure as it is. In fact. I think I have this Meteor security application that will, even specifically for Meteor, that will even, yes, See we don't even have any publish any packages exposed like if you look at this collections, no collections detected. That's a good thing. Because if a collection was detected and it was not secure, theoretically, somebody could come along and insert and remove. And oligos tracker is not defined. Yes, so we're actually going to get into using a width tracker. And let me see if I can. Here with tracker, show a little bit about what that is. With Trump. Using tracker. Here we go. Meteor add react meter data. I'm pretty sure we already have that. React meteor data. Yeah. This is something that we add to the bottom of pages and we wrap the component around it and we subscribe to various data. There's actually some great information on this page that talks about how you can even make a subscription. So something and fetch and wait and wait till it's loaded and stuff like that. But regardless, we're going to just show a down and dirty way of doing it with this meteor mongo collection that we have an now feeding in data from this script right here. So let's go ahead to our, it's not on the create form. We actually have everything on our upper component in admin right here. And I'm going to show you a little bit about what the architecture for this looks like. So what we need to do up at the top is actually import with tracking. Import with tracker from Meteor React meteor data loops. And we're going to wrap the component into another width tracker component and then return that. And that looks a little bit something like this. We have a different export default, and it's called what tracker. And the function returns. Now, one thing I do need to note is that because we have export default here, we remove the default at the top. And then we use this to wrap our admin component. And now when we're importing from this file right here, it's wrapped with tracker. And what we'll do is we use it here. Dot subscribe, FR dot, dash will be 3 times 0. And I hope I'm doing this right. Meteor.publish 40. And one of the parameters that we pass in is the address. It checks the address and then it returns everything with admin and not address. So it would return everything if our Web 3 dot-dot-dot accounts to 0 is this, it's returning everything in the collection that matches admin equals this address. And then we're going to return a prop. And we can call it at 40. At 40 froze. What's a good name for it? Forward grade offerings. And this is going to be at 40 dot find. And he's just going to return all. And we can do it. Another one for great options. Fr dot, find, dot. This is a helper props variable. And I'll show you. So if so, what do I mean by Propp variables? Well, now that we have forward rate offerings, which is a collection of all of the potential matches. See, I'm using this syntax to find all of the elements SRO. But keep in mind, we're only subscribed to the 40 in the context of admin of elements that match this here. And then we do another find on it. So even though I'm doing fine to find all, we're only restricted to finding all within the elements that we've subscribed to. So it's filtered on the backend. And we could live on the server side, and we could do further filtering on the client side as well. That's the reasoning why you have this functionality. And then if I wanted to find if I wanted to find how many work in how many four gray offerings we had in here and maybe work with the pagination tool. This is this is where the forward rate offerings count would come into play. And we can show some examples and maybe we have five per page, we create six and then we'll show what that looks like when it expands and things of that nature. So we're going to show what it looks like to have a script. Inside of our component that accesses these prompts. So it's a little bit of a weird syntax. You have a function like this. And at the end, we have this parentheses right here. And then you have a function inside that points. You have a terminal is inside that points to something like that. And you're left at the end with this weird block of code that looks like that. And that's the syntax. But that's just how it works. So let's say if this top props dot for rate offerings exists, right? And forward rate offerings dot count greater than 0. Whoops, I didn't mean to do this dot props dot for a rate. And we're referencing these variables here, is greater than 0 because it could exist. But the count is less than 0. And I guess we could just say if this dot powerapps dot forward rate offerings count is greater than 0, right? And that would, that would do the trick. Then we return stuff for various offerings map. So this is a way that we met through all of the potential elements in the collection. And we say, say it's 40. And we'll do that for o dot will actually return. And let's just return 40 dots ID. And this is a, this is a variable that's specific to the MongoDB element. You see how it generates a unique element forever insertion. That's the information that we're gathering in. And of course, we can, we can gather in other fields as well and create a nice detailed table that shows what the flat fee, the monthly fee isn't and all these other things. But let's let's go ahead and see if I even did this right. Because it's quite possible. I do not do it properly. Tracker is not defined. That's something we may want to look into. I was reading about this earlier and it was saying tractor is not defined. We may need to add tracker. Let's go ahead and do that. Video and add. And it's saying unexpected token. Oh, that's before we finished it. So, so we weren't fast enough while we were typing in the Meteor script, loaded the application to facts and say, Well your syntax is off, but That's not, not a problem. We'll start that backup. We'll look at what the other issues were. 400 is not defined. It is very possible that we need to also import the SRO on top. So how do we do that? We can just pour 40 from our back, a director if we're inside this. So we go back to the UI directory, back to the imports directory, into the API directory into forwards, Yep. And that way we can access FOR R0 through art returned and passing it to the prompts. So it does appear we need to import that as well. Let's go ahead and refresh. Perfect. And you can see we have our IDs and we're getting a warning saying each child and older should have a unique key prop. And one of the things I like to do is actually use the ID of that element as the unique key. Because it's a unique write. Something else you can do is actually add a second perimeter into this, that's called the index. And you can also set that as the key as well because it increments with each time that you mapped. So that's another method as well. You probably want to call dot fetch on the cursor before returning it a wool. Look at this, look at Mongo helping me out. What a bro, returning me Mongo cursor from getting meteor data and this value will not be reactive. You probably want to call dot fetch on the cursor before returning it. And it's sitting somewhere else. So, so we can test it. This is reacted by creating a forward rate offering. And if we confirm, then this list should update and look at that. It does. So it looks reactive to me. And what it's saying is this should use fetch, but I don't really think it should. It's giving me a warning, but I can't say that I really agree. Without warning. You know, it does the same thing. I'm not going to I'm not going to complain. We can use this forward IT offerings count and see it. This is dynamic as well by saying my forward rate offerings, current currently, folded offerings, pounds currently for initiative. Or are you sick? For active for for issued. And if this updates based off of this count, then we know we have two reactive props. And notice that I encapsulate this data in brackets. That's how you access it, just like you would a state variable. That's how you access a props variable. So let's go ahead and 0 issued 0. 0. It looks like when we refresh the page, nothing pops up. Why would that be? Is it because what A3 dot-dot-dot accounts 0 is in fact not accessible when the page loaded pages loading faster than the MetaMask can load and it doesn't have access to the what A3 dot-dot-dot accounts variable in time. So we're going to have to get clever. Now obviously, if someone's on the home page and they go to admin, they already have it. That's not a problem, but we are going to have to get clever in terms of thinking. How do we handled data? How do we handle accessing this data in delaying delaying access? This meter dot subscribe call on. I have a solution for it. On. I'm going to play around with it. And in the next episode, I'll actually implement that solution. I don't wanna do it right now in case it takes longer than expected. But it's a good thing that we caught that and that we can think about that potential issue later on. So, so let's, let's go ahead and do a little bit of a front end development, two or more avoiding bone that we're not waiting for anything. But before we move, we move on because we did want to have this selection list and the basic FOR component below. So if we make a selection, then it updates something down here, right? So let's see how, let's see how they set up this selection. So we need to have a list and we want the selection to be in place. Selection. Here we go. So let's go ahead and copy this over. And important lists for our application. And do this. Now, we know that each list item, I think we can just copy this into here. And instead of returning a P list item. And each list item has what has content as an image and the content it has a header. Let's say it doesn't have an image and it has a header. And then what are the kinds of things can be in a list, a header, an icon. An item description. It can it can have a description. So what would the description look like? Let's description a description. The item. Can't say that I like the way this looks, but at the same time, you know, I like I would I would prefer to just not even have anything and just have like 1234. And then when it's selected, okay, I see stuff that I'm getting the hang of this now. And then it's still puts everything below. Can't say that I like that. I wonder why this is so dull. I do see how it's dull, right? I have all this of this text is still I don't like that. There we go. Okay, so we can change, we can make, we can make the color actually black by, by hard coding in this style. So this is what we're going to do. Fantastic. We're going to copy that code over and we're going to set up the appropriate information in the list item. And we're going to want to make it a little grid-like, like a table, right? So what we can do is have a grid within it. And this may or may not work. Well, we're going to find out very shortly. And we're going to have beard dot rho dot column. And we're going to have five columns. And there will be evenly divided 1234. And we can see in our MongoDB collection what each of the elements in the field is. So let's go ahead and we've got our foreign object at 40 dot admin. We don't need to display that, but we do need to display these five flat fee, monthly fee, min, max freedom coverage. So what we can do that for o dot flat feet. And I was like I had six columns instead of five flat few. Ccg memory. And the max rate and coverage. And we can take a look at how this appears on the front end. You've got the Min Cmax fee. And good. Very good. So now we can fix this up a little bit. And we can, I think we want to put this into its own label on the right. So because this looks a little weird, condensed in with the title. And then we want to have a second divider that has a description for what each of these variables are. And because each of these are percentages, we want to actually have a percent next to each one. And I don't like that. It says point 55. When I'm pretty sure in our Create form. Look at that. I'm a big fan of having a 0 at the beginning of each. So look how that there's no 0 at the beginning of any of these, right? Like this just looks really ugly. And this is unfortunately putting weird data format and you can tell are other variables. So as you can see, I am strenuously working to update and resolve this front end display of data issues. Datalog mechanical keyboards write that down. Okay? And now we have much, much cleaner. And it's going to look a hell of a lot better. And because we don't want any of the data that we were working with before. We can go ahead and we can type in db dot, dot 40 dot remove. Be careful now because we're working with the command line interface, we can, we can do it through this because we have admin privileges and access. Boom, error, failed network attempt, collagen, boom, deleting it. Now. Let's go ahead and refresh. And actually we need to add in a 0 to this because it doesn't recognize that, um, those, those ones without the 0, it has to match the value exactly for it to be able to reference it. So we'll go ahead and update that. And this is why these two are blank when loading. Now it has this very, very nice. I click to confirm over them. And now we have zeros in front of our data. And I don't think the percentage is actually in the front. And that just looks so much better. It really, it really is going to look a whole lot better. So now that we have this in place, let's go ahead and move the issued over to the right on its own and create another divider and add a description for what these values even are. And we can reuse code. So always important to reuse code. Back. Monthly fee. Monthly, few men read. Metric, average. And let's see if we have enough space to even display all of that. We may have to make the font fairly tiny to accomplish this. And you know what? It works? It works. It works. We don't even need yeah, I know, but it looks great. I would really like to have just the line center, everything. I think that would make everything look a little bit better. And since I don't actually know where I have to put in the text line. I'm just gonna do it on all five of them. I don't know if it affects it at the top or 52 it individually thought, well, we'll go ahead and do that. And this is just going to look a lot better. And that we want to have this in bold. Because that's going to capture the user's attention and make them feel like they actually understand what it is they're working with. Flat fee, monthly fee, Min rate, max rate coverage. Fantastic. And they can select from there. And I think we can actually hide the upper divider. So we don't need to have this, this one. We can add hidden. We don't need to have this one and this header right here. So we hide the upper one and then this header we want to put into a curve with two columns and actually use a label. And if I don't have a label important, we're going to go ahead and give that a label is actually it looks just like up here, you know that our dy and whatnot, so label and basic. And we can go ahead and balance radial lines of paint and add the issue and the label that the tail. And it looks like my forward rate offerings is overlap them and cutting under. So and we want to actually align this to the right. So let's go ahead and see if a line right before. I don't know if it will. And then we also want to set the width of this to 10 so it has more room. And then the right side is six because the max width that you can use an agreed it's 16. So if we give this a little bit more and okay. Now, now it's looking a little bit better. And I have a much better idea for this issue. Instead. We know what, we're just going to leave it. We're just going to leave it like that because we don't have to get too fancy doing. So we have this. And then, and then you might be thinking, well, well that's great. We have, we have a list with different Min and max stability fees and coverage and all this great stuff. But And look, this is updating as well. Three issue them here. But how do we how do we access these now, right? Like, what's their issue? How do we access it? And what we're going to need to do is actually on selection, list item selection, onclick. We can have an onclick function. And let's just see if this works. Or o dot IV. So every time we click something, it's going to actually spit out in the command line. This, the idea of that particular MongoDB collection at element in the collection. And from here we can actually write a function just like we have a function in the create form panel. Where are we handle create a 40. And that'll pass along as a parameter. The Ferraro dot ID. And it can load in a different component below the actual. So it can load in a different component below. And here's this issue again that we were having more, we refresh the page. And so I'm going to take care of that. I'm going to make a note right now at 40 Web 3 injection. What we're going to handle that later. But now we're capturing the value of the MongoDB ID and it's spitting it out. And just to confirm, we have three elements in our collection right up. We have E to D, H3, BHT 5, and 0, K5. Crazy. So we're set. The only thing I might change while we're here is actually showing how you use sorts in MongoDB. I think that would be appropriate. Let's go ahead and do that real quick. And this actually goes into MongoDB syntax. So for great offering, see how we're collecting forward rate offerings and we're finding them. We're finding all of them. Actually have a second parameter. And the second parameter would be another JSON data structure. And we can pass in into sort. The name of the field is created on. And we can sort it by saying, use the createdOn field with a negative one value. So that means that it, it takes everything in descending order. So the highest value is at the top. And the highest value since the new data's a Unix, the newest one is going to have the largest value. So that's how we can sort everything automatically to begin with, by the date that it was created on. And that's going to change a lot. So, so C and now has the most recent one before it was reverse. And if we make a new one, and this is important because if we make a new one, we don't want to have to go through all the pages to the end. We want to see the newest one right away. So let's say we start making 10 or 20 or 30 of these. If we create a new one, it's going to get added to the top right away. Boom. So now it's added to the top, antagonistic. And then the only thing that we're going to do from here is actually have this entire bottom section. With all the forward rate agreements that are created for the selected forward rate offering and maybe have some, some indication of which forward rate offering this selected. And the way that we could do that, if we look at the prompts for list dot item, there is an active. Okay? So, so let's take care of that real quick. Let's go ahead and add that in and we'll conclude after that. Active. This dot handle, active at 40, at 40 dot ID. And active for row equals. And you know what they say when it's getting far off the screen, just trump everything down. F equals for me. So keep in mind we're, we're, we're still working in a mapping. So this applies to all the mappings in the collection, the elements in the collection. We can use this active. And when it's clicked, we're going to call a function called handler active FOR row. And it's going to set a state variable, active F RO, which we will pray right now. And it's going to check if the active FOR rho is equal to the ID of the element. And if so, then we should have, well, it doesn't have any, doesn't have any example. But if we had an element and then it says active 0 and it would be a selection. Then it would see how this is active now. And then if we take it off, this is actually so this is a way that we can show which one is the current active 40 handle. Active FOR I0 is not a function. Not definitely isn't. Let's go ahead and write that axis. We're passing in an ID. And a function call from that will be this dot six states 40, tidy. Perfect. And we can use this to actually load more into a large component below. Like let's say we have, Let's say we have a big column below, a big area below called selected code re offering. And it has a divider and loop. And on the far right, it says, I followed the idea of it, right? We, we may, we may abstract the idea of it out. If we go ahead and select something like that, nothing is actually happening. Well, let's debug what is going on. This handle active FOR, oh, I know. Eyes Allies doing that. We have this additional function calling here. And we want to remove that because we already concluded that syntax below here. And settings. Yeah, perfect. So now when we select the ID, it's updating it in state and it's continuing. Remain like when we click something, you know, it, it selects that new one. And we can see over here on the list that is currently selected. And from here, we can actually get into loading all of the data for that particular smart contract in a dynamic way in this area below. And that can load all the forward rate agreements for that particular smart contract. So I think, I think we've made some really good progress in this episode. And from here, it's just a matter of creating the smart contract interface below to interact with some of the more advanced functions of the smart contract, such as filling it with drawing everything that admins going to need to manage his particular forward rate offering. And cheers man, we hit almost an hour long in this episode. So we did, we did fantastic. And if you stuck it out this long, really congrats to you. I hope you're learning a lot. And until next time. 11. Contract Polling and Mutex Locks: Welcome to Episode 11 or 11, the big 11. So we left off creating the forward rate offerings list and we have the awaiting selection. You select the forward rate offering and captures the the ID from the MongoDB collection element in the collection. And we have a couple listed here. Now for which we can see through here. If we create a fifth one, it adds it to the top of the list. And entirely new. So we want to do from here a couple of things. We want to handle pagination. And what that means is, you know, we can't have all the four IT offerings just, just going to list off forever, right? We want to have a way to transition between the entire list of forward rate offerings. And we do that with pagination in the semantic UI react library. From there, we want to actually handle MongoDB skips. So we're gonna do that with a session variable. Right now. We're extracting all the four great offerings with the just a, just an FOR refine. And if we wanted to say skip the first 10. And since they're added in sequential order by date, if we skip the first 10, were actually it'll already be sorted. So that's, That's quite all right. From there, we're actually just going to put in a, two things. We're going to limit a limit of five. And we would skip by Session.get skip at 40. And we can actually use a session variable to manage this. And one of the things that we may wanna do is initialize this. Because it'll be initialized to like vote, vote, be initialized to, I think, think just 0. But it could just be a string. And then this whole session is not the file. We don't have this session variable from. I think it's from meteor session. Yeah. And if you don't know what the session variable is, that's essentially something that it's stored in the user's local storage. It's not stored on the client. It's not stored on the server. What is stored on the client just not the client side of our app is actually held in their browser. And meteor takes care of, takes care of all that. And one of the interesting things is that try meteor add session. It looks like we're going to have to add session and I thought that was a default package. What what do I know? So meteor add session, we'll go ahead and add that in. And then that's going to allow us to store and variables in the year's session object. While we're waiting for that. The other two things that I wanted to take care of, function calls onto the actual for grade offerings themselves. So you want to lock, and then you want to unlock D for great offering. And then we're gonna do a onetime rendering of all the forward rate agreements. See, there's certain information from the spark contract that we want to render statically, like how many forward rate agreements are there. And then there's certain things that we want to render dynamically as the smart contract updates. We want to get more information back. And that would be like to balance and die the available die, things of that nature. If the contract is locked or unlocked, so that if an admin calls locked, unlocked, they get responsive feedback. And primarily, he has all the episodes that we have I've been I've been saving their names and giving small descriptions. We don't want to reinject. Like let's say there's a new forward rate. Agreement within a forward rate offering. We don't want to load that because at my overload the front end interface and make it hard to interact with the entire list of forward rate agreements. Like they keep getting added and added and added and you're trying to work with one and look at one. It'll be better to just have a refresh button up here. So if you do want to check for any new ones, you've got refresh and you can see any, any new ones. But it doesn't make sense because there could be too much activity. And since you're on the same panel that you're interacting with them from. You want that to be static, but you want all the other information to be dynamic. We're also going to change this from awaiting selection ID to just one thing, the actual contract or dress of the ether scan links and link that to ether scan. And I'll, I'll show you an example. Do you see in our address bar up here, our address? If we wanted to, to check out our recent activity on ether scan, it would be great if this was a link that we can just click and we can see all of the activity on our account. And I can show you what that would look like. And what we will be doing for a selected for great countrymen offering. So we want to pull up the balances components and we want to actually set the label. And we can, so basically turning this into an, a link like a hyperlink. And this can go to you. I think it's Coval non-dot ether scan dot io slash maxim that youth address. And the target is blank. If this isn't the right ones for coanda ether scan, we will quickly fix that. So let's go ahead. And when I hover over it, it's now blue, It's now I can click it. And ah, we need to have yes. Perfect. So now that'll allow clicking this to go to our Coval ether scan address and just pull it up. And it's just nice. I mean, you want to be able to do that and check out what's going on with your account. And if we switch accounts, it'll load the OX b1. So it's all dynamic links based off of what contract addresses there. And we're going to do that for the four great offering smart contracts in this area right here. And we can call it tape ID out. But you know what? That's one of the last things we'll do. So let's start with pagination. So page a nation, how does that work? Let's go with a basic page nation and import that into R and type that into our semantic UI react component. And very bottom, I think we're going to want to add another divider. And the pagination boundary range 0 default act of page one, loop sees autumnal first item more last item, mole. Total pages is going to be the forward rate offerings count divided by five plus one. And we can access that variable by saying lost. Stopped Cox dots for grade offerings counts. So if we have five, we want to reduce that into one-page. If we have less than five. Oh, I'm going to have to get fancy with my math here. The total pages, that's always going to be and we'll see how I did it on. Right, right, Right. Of course, of course, course, of course. So there's something called math dot ceiling of this value. And what this does is it uses the value in it. It basically takes everything and uses a stepwise function, which means if you're from 0 to one, you go to one. If you're from 1.000001 to two, you go to who? That would be mapped ceiling. And it's so regardless of what we have, if it's 0, it's mom would probably be 0 at that point. But this is a good way. Well, look at that page in Asia and that's a huge page, a nation right then. Can we turn that down? Can we make that small leaves? Asian nations size? It's pretty big. Well, perhaps we can use a different variation of alienation. Perhaps we can use, Oh look this one. So this one is so tiny. Size many. How did it do that? Well, like the mini size. Come on. Oh, this looks a lot better. Actually, I know that one. No one looks a whole lot better. Pointing and secondary. Let's try that. And the mini does look a little bit better. Actually, I could love how it looks good too. Let's go ahead and competitive bid and alignment, right? I think that's going to show a little bit more natural. And this should update dynamically. Now, we still have to actually handle the page change. So what I mean by it updates dynamically boat, we still have to handle the page change. Well, let's say we create a sixth one. Now we have five in there right now, let's say we create a sixth smart contract. It recognizes that we have six and it wants us to go it allows us to go to the second page because it's saying how many how many total pages are there? And it's saying, well, we have six divided by five, which is 1.2. And that is using the math dot ceiling two. So that's how it is rendering the page count. Now, in order to actually update the data, what we're going to have to do is do an on-page, on page change. Have a handle, a nation change. And we're going to pay dimension change. And let me get the appropriate function for that. And in fact, I'll just copy over from my other work. It's an E, It's an event. It takes the new active page and it sets, hey, and it says this state to the active page. And then we're going to set this session. We're going to set that skip 40 variable to active page minus one times five. And if you think about what this is doing, let's say we start out, let me get my light on over here. Light. So it is very important, right? Let there be light. And let's say that we said the act of page 2 1. Well, what does that do? We're onto that would go to one. We are saying set skip at 40 to 1 minus 1 times 5. So on the first page we don't skip any. We go to the second page, 2 minus 1, 1 times 5, we're skipping five. So that allows us to skip over the first five elements because we pass it into here. And then we render the next five while still limiting the data that we pull to a maximum of five. And since it's all sorted by credit creation date, that should do the trick. And wouldn't you know it? We still have the problem or we're not, we're not loading the data fast enough if we refresh the page. And I said I was going to take care of that, but I totally forgot to before filming this episode. So I'll get to it in the next episode. Not a big deal. But for here, you can see that we go to two and now these appear to be the same. Let's get a couple of different ones in here. Just to kinda show what this might look like. Let's get some loa loa loa loa loa loa fees. Big coverage, right? I think septum it over there. You can see some are spilling over to the second page and we're still getting these new IDs created. Let's create a couple more points. 0 1 percent flat fee with only 50 percent 55 percent monthly fee. My God. I mean, saying you get all of them on the right on this, you've already paying more than the current stability feet for Islands. And we're at four. Let's go ahead and make two more. And that's going to show what it looks like with Page 3. And we'll create two of the same kind. And it looks like we now have three pages. And it's starting to spill over to there. And eventually it would look maybe something like this, a little bit different. I'm sure, like if the total pages we've actually simulate it was a it was look like this. At the bottom. I forgot to eight pages. If we got up to like 25. Not opinion about it. Boom, we got a lot of pages right there. So is very nice and well taken care of. And I also wanted to switch over the issued and 11 at the top. I thought that we'd look at that after the issue was old and then the number. Right. So the slightly grayed one unit load. Yeah, it looks a little bit better. So, so since all coming together really quite nicely, Let's create another space here. And just create a little bit more of a buffer zone instead of the COGS right here. That was for there. We got that up that we want. Much farther down, much, much, much farther down. Yeah, we want we want a little bit more space, maybe not a whole lot. Let's see how to dividers loads. And we're also going to want a different icon for this area right here. Yes. Selected for reburied offering. Yeah, that looks that looks better. And some some different icon for looking at all of our Florida they offering contracts. Just looks pretty good. I like the hand pointer outline because it's like cured clicking over here. So that's kind of appealing. Yeah, that makes a little bit more sense. You click it and you've got your select for writ offering. Right? Okay, so let's, let's knock that off of our tasks. Pagination, we've got the MongoDB skips updating through a session variable. And now comes the real fun. We want to pull or reactive and static variables from our contracts. So let's just go take a look at what we have for our forward rate offering. Yes, I would like to be on a 0.50.6 solidity version. Thank you very much, remits. So what kinda of what kind of variables do we want to pull? And we can write this down. It can map this out from a dynamic perspective and a static perspective. Dynamic static. You definitely want to pull the forward count. We want to pull the active users because that's going to then allow us to render the forward rate agreements in the forward counts or the forward rate agreements in conjunction with using a forward count per forward rate agreement. We could actually load we could actually load all of the forward rate agreements just using the word count. Now that I think about it, regardless, we'll get to that redesign later. We want to pull statically D forward Count, de active user count. Because these are things that can be refreshed and don't have to be readily hold. The dye available is something that's going to be dynamic. And whether the contract is locked should be dynamic. And forward rate agreements by nature of using the forward counties in the dynamic or static. Remember we're loading the entire list based off the forward count and active user count isn't as important. And I think that's about it. Function wise. I think we'll go some more functions later. But to begin with, we wanted to implement law. Student lock and unlock and filling, withdraw. And a proof. In order to fill, you will need to approve. And in order to withdraw. You don't have to do anything. So I think we've got pretty much everything that we want to load from the smart contract. So let's go ahead and write in the code for handling that. And we're going to use intervals. And this is where things get tricky. So let's be very careful as we tread through this. I think the best place to start in this entire process is in the hand. In the handle active FOR. So when we handle an FIR or when we select an FOR more selecting which the first thing we're gonna do is set the state act of f Herodes the ID. And no longer want to display the ID down here. This is that was purely for setting the active selection in our admin. Like if we select it here, we can still go back to it and it's still selected. So that allows us to move through the different pages while we have something selected down here. But we do not want to display it. At the bottom. Things that we want to display will be whether the contract is locked, the contract address. So let's have locked. Know what we could have. We could have a variable. So what I'm doing right now is designing the interface and then we'll feed it data later. So interface design, feed data second interface first. Data second, I think we want to have two different labels. One way a lock and one with an unlocked distribute light red. And this could just be the normal color black. We want to have the dye available. Let's have, Let's make this a little bit easier on yourself. Let's move this over here. So we have this, what we're trying to get a one over here and we can look at the code at the same time. Thinking smart, right? And we want to have what the deep dive is available. A contract locked, the amount of forward rate agreements, maybe like 25 active users. And to stay consistent with what we have at the top here where we say issued and then the number. Let's actually reverse everything and have the bold information like look yet for IRAs, five die available, 0 or 100 or whatever. And let's go with that. And then we'll put the number in gray below. Locked, unlocked, die available, forward rate agreements, active users, the app that looks a lot better. And selected SRO. I think we can get away with saying selected FOR and reducing the width of this grid from ten to four. And up in mist. Well, so we have a lot of space to the right, locked. Unlocked, and we'll read this state of the contract and decide whether to show locked or unlocked. It can change based off of the current status. The dye available. For IRAs and active users. Thing. Forward count or forward rate agreements. Now, we'll load the forward rate agreements below later once we've actually built in a interface into the marketplace for interacting with them. But for right now we just want to get the basic, basic functionality in place. So let's go ahead and knock off diagnosable contract locked. Four counts. The forward rate agreements will be low, loaded below and we have the active user count. And then we want to have to two buttons for lock, unlock and fill, which requires a proof and withdraw die. And I think we could approach the withdrawal one of two ways. One could be we say if they click withdraw it, who withdraws all? If they want to, only which are half they can withdraw have. I think we want to give the user flexibility in how much they withdraw. Because they don't have to withdraw all their money. They can withdraw less than all. So we've also want to have the contract, teres, I think we can fit that in there. I think we can fit that in there. I almost forgot that one. And we'll use my address as a dummy value. And we'll go ahead and copy my work from the previous one. Bada bing, bada, boom. Now obviously it will be loading in the actual contract address into this here, into the insula bit, rough and of course, this value. But to begin with, we'll just use dummy values. And yeah, yeah, that looks pretty good. This is going to allow people to actually click. And you know what? It's not necessary to show the full contract address. I really is not. If someone wants that, we could actually just say not an ether scan. And then we can have an icon, create a space. And this will be just like a nice icon either scandal, it definitely looks better with the icon on the right. Definitely gets better at that. And we want this really. So do, so Let's even put in ether scan into the label dot into detail. And that's going to just give it a slightly grayer look to it and it's not going to be immediately apparent. Can't say that I'm a fan of is God, this is like a little bit weird right there. And can't say I'm a fan of this additional space prior. I guess we're going to have to drop the label that in detail and just stick with that. Perfect. I like it, It looks really good. Let's check something real quick. I feel like that's just too much space. I feel like that does not have to be that much space as it just me or just made edge it might be. So now we want to actually start pulling in data from the smart contract itself to render the appropriate variables here. 12. Smart Contract Interfaces: All right, Welcome back to episode 12. I had to briefly cut off the last episode because I experienced some technical difficulties about 20 or 30 seconds after the video cutoff. So we're moving on with taking the status that we get from the transaction receive. And if not, what does, what this essentially means is if we get a status of 0 X1, the contract has been mined and we can take the contracted and work with it from there. And if we can, we're not gonna do anything for right now. But it may turn out though. We send an error receive we say, Hey, this contract is still being mined. Wait a second. And then we will start using this handle dynamic load to actually cycle through. Now, this is about to get very, very complex. I'm going to try and explain exactly how I'm going to handle the data flow and accessibility in this section. If you get lost, try and follow along. It's kinda get a little bit complex. Hold onto your britches. So there's a thing called mutex locks. And what that essentially says. And I mean, I'm so good at paid, right? That I can explain what a mutex lock is. There's a piece of code and your function, your application arrives theories, let's say a function call into this piece of code. And your, you have something called mutex lock. It's a Boolean variable in your state. And it says, right now it's unlocked. You can access the rest of this code. And then it exits. And what will happen is if this is the first time a user is accessing this, we say locket, set it to true. And then when you get to the end, you unlock it. And if someone tries to come through the same variable and someone tries to come through wall, the mutex lock is locked up here. In this case, the one and only client. Then it will actually stop them altogether. And mutex locks are usually used in combination with process cues that say, well, if we hit a mutex lock, weight over here and then reactivate. But we're not doing multiple processes or parallel processing in this application. We're actually just, you know, it's just one client and they're just access to accessing functions to the front end. But we do need to apply a mutex lock because we're using callbacks when we say get this transaction receipt, okay, now that we've got this contract address, do this. And if on the front end, the user is constantly pinging, you know, Get transaction receipt. Then while they're continuing to call, call, call, call, if we don't have this mutex lock. Now our code is like reading 50 different contracts and it's just loading data, loading data, loading data. The boat. In reality we only want to have one contract loaded at a single time. So what we do is when someone clicks on the contract, we set up a mutex lock and only from there, we'll we load the data. And if they come along and try to select another contract and say, you can't come in, he can't load this data. So that's, that's the concept of mutex lock. It's computer science concepts. If you're not too familiar with it, I would highly recommend reading about it. It's also very important for Python scripts as well. And, and absolutely fascinating concepts in if you can get good at it, you can really do some great work. Because this is a bit of a complicated task. I will be copying some code over from my other function that I have written in another application. So first of all. We need a mutex lock AND statement. So if that's true, we set it to false. It's always false to begin with. And when someone selects an active and 40 from the list, the first thing we do is there a mutex lock? If mutex lock is true, right now, boom, Do Not Call. Just throw. And we could even set always pass something that's a state that says attempt, whatever. And then it would update something on the front end. If you wanted to get into that nice of user interface experience. But we're just kinda just not do anything and we're actually in the bottom gonna do with loading bar. And that's going to be a little, a little bit more of our UI UX portion. But anyways, if the mutex lock is true, throw mutex and nothing else than the function runs. Then we're going to take the, I think what we're going to be doing, if we already have something selected, we don't want to select it again. So the idea is if the active FOR, so pull in the act of f sorrow and say if x is 40 equals ID, what we had just selected, then we also want to throw error or contract already selected. So that's another prevention as well, separate from the mutex lock. And from there, we're going to say, now that we've allowed someone to come in, then we can set the FOR to the ID. And we can also set a mutex lock. Now, once this happens, if you know, if we were to just run the code from right here, this mutex lock doesn't have a way to become false and we wouldn't be able to call it again. So now we have to be thinking through what at what points do we open up the mutex lock? Now, we haven't actually written this handle dynamic load function yet. But we can test this out. We can, we can work through that. And we can start by, let's start by pulling the dye available value, right? That would be good. So assuming that there isn't into, we are going to set up an interval. So we're working backwards, but we're thinking about what the end product is going to be and then implementing that. We do know that in here. We're going to have some integral equal to this dot handle dynamic load. And it's going to be our contract. And the dress that we get back f at 3 2000 milliseconds every two seconds. And then we're going to save that in state, right? And we'll say set contracts into her full two integral. And now we just do that. And if there's a contract interval already going from before, we want to clear it up here. Maybe IK, pull it in from its current state. I could do that. So from here, how do we load the, let's say the dye available? Well, we have our ABI, our forward rate offering contract up here. You know, we we pulled that from the I want to say we pulled it from the create form. Yep. And now that we have that here, we can use this to pull die though. And we can simply say, let X equal to 3 dot-dot-dot contracts are ABI, which we call for grave offering. Contract, tricky with a BI. And we'd say x dot at the address provided. And we can get di available, which would be this right here. And we would actually be passing a callback. And then just like the car. And if we get a response, then you just say this set state die available is equal to I don't know if we have to do a conversion. I think I think we do need to do the conversion by a magnitude of 10 thousand. And then at the very end, we have that mutex lock, right? The very end. Once it's done, it's one run through. We actually say the mutex lock SQL to false. And we set received update equals true. Now, this means that we have a nother variable. You know what? Actually, I think I don't even think I need that one. I was going to use that for a loader on the front page. But honestly, I think I could use these mutex lock and all show you what I mean. Let me just make sure there's nothing else that I want to pick up or add into this contracts function real quick. Because in much easier to fix this now then it wouldn't be in a little bit. I think I just need to bind to this, to this because we're accessing this dot set state. Yeah, I think that's good. I think that is very good. Now we are going to want to create Die available as a variable in our state and set that. So just a string to begin with. And this is how we can check whether or not diagnosable is truly updating. And we're going to want to take in mutex lock and available into our render component below. And we're going to have a function a little bit similar to this. We're going to have two sections. One section is going to be here. And what we're doing right now is we're saying if the mutex lock is true, meaning nothing can be selected, then what we'll be doing is actually having a loader in the bottom to give more of a response to the user. And what this looks like. Mutex locks, hidden state variables, we'll go ahead and add all of those in. Next. I didn't add a loader. And show you real quick what some of the available loaders are from our semantic UI. Loading, loading, loading, loading. I like that one. Ooh, I like the nice and big one to what's the size of that massive yeah. All right. Let's take that nice and big. So we'll go ahead and drop that into our application here. There's a mutex lock. Else. We're going to return a segment that has what we don't have segments on this and you get him in that we use one for the form. That's in the create form. Well, in that case, then we're just going to have a div that returns. Notice I'm going to have to type in return in front of each one of these that he turns diagnosable. And this is very good. In fact, label do labeled in this canyon. And yeah, that's looking a little bit better. Ninety see, it's not allowing me to load anything yet. When it's in this loading thing. And quite honestly it doesn't really atrocious. That's way too big. We're going to just we're going to take that size off altogether. And we're also going to add in a div. And a couple of breadths above. We had a couple of breaks below it because that just doesn't look right. And from there, we should have a much better, I think now, notice that it does this before when we had no selection whatsoever. So we're going to have to get rid of that. If there's a mutex lock. Else, if else, if update is c is equal to 0. Now you know all we could check because I want to check that we don't have anything selected. So the default of active FOR row is awaiting selection. So what I could do is actually check for o is equal to B. This, right? And if it's equal to this, then we want to return maybe like text-align center and just say, please select the contract from above. And a little bit of space in between that as well. And this way it won't show die available if we haven't made our first selection. But after we have, it'll handle that and yeah, please select the contract from above. And I would like that to be grayed out a little bit. Style, font, color, KV just say Keller document that gray. Maybe has to be GR AY. Yeah. Please select the contract from above. That looks a lot better. Let's select it and it's loading. It says diagnosable is 0. If we select another one, we're waiting, time available is 0. Now, this isn't very exciting, is it? Right? Because we kinda just like, well, how do I know that this is really updating the dye available inside the contract 0. And notice it's doing, I'm cotton mutex. Whenever I try and click something all its ball, it's loading. The next contract. I could actually test this out real quick. I'll show you exactly how I would test the South. I know you're going crazy. And I said, let's say this is the most recent one. And yeah, we have book we have this one selected as the most recent one. And we go to run wrong co Vaughn. And now I'm actually going to have to get it ether scan and get the contract that that transaction hash is related to. Age nine hours? Yes. It would have been good of me to actually have done a check to really get the most recent one. And this was created one hour and 41 minutes. Go. Here we go. Now I have the contract's address and I can go to remix and I can load the forward rate offering at that address. And I can also load the ERC-20 and the dye address. And what I wanna do is actually approve this address and then fill it. And then watch here on the front end as that changes based off of how much diets available. And this is, this is how we can test. See it's calling the handle dynamic load to get the dye available every two seconds. So our interface should update relatively, relatively quickly. If voicings the block is mined, how much dye is available? And in order to fill it, I need to approve. So let's the contract and let's say you have 10 of my die in their urine. And as soon as we have approved that much, we have and we can fill that much. So we'll go ahead and confirm. And we are going to be a watching ever so patiently. And the front end. Because as soon as that contract right there gets mind, or our application should be loading the dye available. Bada bing, bada, boom, bada bing, bada, boom. Right? So, so now we have a dynamic interface for, for, for loading the values, but also continuing now to, I'm asked electric bath three minutes ago and I just updated mouse so this could go on forever, right? Which we wouldn't want to have happening if someone on loads to component. So of course component will mount. We're definitely going to want to is it called component will unmount? Yes, it is when we are definitely going to want to do one of two things. Remember that session variable that said skip FOR. We are going to want to set that to 0. Because if someone leaves and then comes back, we want it to be on the first page, right? And we also want to review we're on track. We also want to clear this contract interval. I have to set it to state. So it's pulling the variable from state and it's clearing that interval. Perfect. So we'll let that load will do this again, will with char pressures die from the contract are precious tests net die. And that's only take nine out. Let's leave, let's leave one in there for shifts and giggles, Right. Fantastic, absolutely fantastic. And you know what, I just pulled the other one out of there because and I'll hey, this is, this is test that diet. This is very valuable stuff. We got to hold onto it right? I click Confirm over that on the other window. So seen as this confirms what we already did, the second one. And let's see if our front-end interface updates anytime soon that it did. It must have been a block behind. So we can expand this architecture outs. Notice, I didn't do try and pull every single variable from the contract right away. I did one is a test. And I made sure that I had the remainder of the architecture down and in place because quite honestly it, you know, it can get confusing. So we have our mutex locks in place. And I believe from here, we want to start pulling in the remainder of the values. So let's get back into action there. We've got the reactive and static variables. And we also have the function calls that we want to expose, the onetime rendering of f IRAs with a Refresh button and then contract out address Easter scan links, which will be going into that one. So I'm going to keep that there. We want to have lock and unlock that down here. And the fill approve and withdrawn. So let's go ahead and pull all the state variables that we'll need and list them out here. Let's go ahead and get the function calls lock and unlock in. Let's get the raw functionality into this component and then we'll make it look a little bit nicer. Let's get everything in place to begin with and then probably conclude this episode. We'll go into the design next. And after this is done, guys, after this is done, will literally be built in the marketplace. Then the Manage. And then that's, it's like and then we'll come back to admin and do a little bit more. But then that's it. So warlike. Almost about a third of the way through the front end interface. Right now. The backends done, I mean, the backend is completely done for smart contracts, but the admin, we do have to add in some of the buyer side of things. But this is coming along. Excellently. Said a word, excellently. So let's go ahead and just see what other variables or we may want to pull from the contracts. Forward rate agreements? Yes. And did the forward count and we're going to do that. The user active user lists. And active user counts. Yes. Yes, we do. And we will want the die available already. We're already pulling that in. We want the contract locks. And because we're pulling them, the forward rate agreements, we do need to pull it in. We're going to handle the, the loading of the struct variables actually in a different section. And when we get into setting up the marketplace to them, purchase and enter into the forward rate agreements. Once we have another interface setting that up, then we'll set this up in the admin panel. I want there to be a similar design for the admin and the marketplace panel for the forward rate agreements to individual ones. And I'd like to spend a little bit more time designing and in picking that out. So I'm not going to get into, into that in just yet. And I think that's about it really. For the functions we want. Lock on long hill and wood. The buyer we don't need the execute in an FRA would be admin should have the ability to trigger executes and expire in FRA. So there's no reason why we shouldn't have that right now, but we are going away because we can do that. What we're doing to the FOR is later on. Okay, perfect. So let's go ahead and take and we will take Forward town activities, your list, and contract. Locked. Four count active user list. I have to use your camera. Now I'm going to be completely honest. I have not worked with, I know that when it returns a Boolean, true or false, we actually learn that in a previous episode. If it's the forward count, we know that that's a uint8, but it's doesn't have any leading deaths. Leading decimals are trailing zeros. So we can, we don't have to do division, right? The active user list,