 So hello, I'm Richard Ramos, we are from Estatus and today we're going to talk about building reactive apps. So to talk a little about this we need to give some context. We are currently working on an app called the Telenetwork which is the centralized P2P field to crypto gateway where users can interact with each other and buy and sell their P2P. And during the development of this theater we faced some challenge being the main challenge accessing smart contract data, namely in terms of tracking smart contract events and performing event sourcing. So here are some screens where we can see the areas where we need to do some data trading. For example, in this screen we need to retrieve all the active and past trades for a specific user and help them. And this ends up giving us some problems specifically to seeping the smart contract events and as well as trying to retrieve all the data in case the user refreshes the page. And maybe we can have some lack of reactiveness and need to refresh the data as well as it is hard to do simple queries because sometimes we are not using existing data and we need to retrieve the data all over again. So we came up with a simple solution which is Substance, an empty package that is already available. This is a JavaScript library that lets the dev developers be able to track events, variables, functions, and balances. It will synchronize all this data into a local database and also resume the loading of the contract events. That means that if the user refreshes the data it will not start from scratch. It will start from the last event that it has synchronized. And it also is built around our XJS observables, meaning that you can have a reactive program. So to use Substance, first we need to require the library and then we initialize it giving it a battery provider. And we need to initialize it, very important to initialize it because it makes sure to start the database, make sure it needs to be synced before starting. Now if we want to track events, the first thing to do is that we need to start initializing new contracts. There are two ways to do this. You can either pass the WAP3 contract instance or pass the API address. And what you will create, it will still be a WAP3 contract, but you will have some extra things, namely that it will have a new method called track. And this method, it will tell the subspace exactly what to track. You can also pass it some filtering options. For instance, in this case we want to track ratings, but only for a particular fire. And it will return an observable. And this observable, it will be an RxJS observable. You can use all the operators available. You can create your own operators. And in this case we pass an average operator and then whatever rating is done, the subscriber will be triggered with the latest average for those ratings. And again, it's important to emphasize that if you use this in a DAB and you refresh the DAB, it's not going to sink all over again. It's going to sink from the last node location, which it's much easier this way. And you can track the properties. So you usually would do dot poll, which you can still do because it's the same API, but you can do dot track and it will return the observable. And you can do the same thing with balances. So you can track the X balance or your C20 token balance. And this is framework agnostic, so you can use it with a framework du jour, be it React or Angular or whatever framework. So here's just an example with React. So you can use this I want to fast. You can use this with Redox or without Redox. It's not too hard to force for any particular solution. So in this case we provide a wrapper to help out and you can use this wrapper to wrap the React component. And what this will do is that it will make the React component recognize the properties that are observables, automatically subtract to them. So whenever there's something new, it automatically crashes the component. And then to use this, again, you initialize the substance contract. And again, this is a very simple example here we want to track the rating of that. And we're just passing a path with the min and the maximum for the rating. GraphQL. And yeah, so we also support integration with GraphQL. We only have to define the resolver. And with this resolver you need to pass a subspace observable and after creating the schema, you can start using the GraphQL queries to obtain specific data. And the good thing about using subspace is that each time a new event is generated, the query will be updated automatically and you will receive the latest data. And so here are some useful links in case you want to learn more about subspace. There is also a documentation where you can find examples of integration with different frameworks. So thank you for your attention.