The New Frontend with Evgeny Kuzyakov

today I'm going to talk about how you can build a front-end completely on chain and that's based on the story of near social so this is me on a near social network and and this is uh on one of the gateways so what they mean by this is different gateways can use the same data and same front-end logic but display it differently so this is the same data but slightly different layout and this is just a different Gateway by the same front-end logic so this is near social right now and this is a fully Unchained social network built on top of near but today we're going to talk about more how you can build front-ends so before we start what is near social so this this is a open web protocol it has a bunch of components so the first one is social DB basically a smart contract to store generic data and we'll talk more about this and then there's a list of standards and they Define how the data is stored because data is generic and you need some kind of unified way and to store data then there is a API servers which is a dedicated RPC which is like super fast and memory provider then there's a gateways so think about gateways as ipfs gateways it's basically a website that reads data from chain and later render it so anyone can launch their own Gateway data is synchronized on a blockchain and you effectively can run your own instance then components are reusable components they're fully open source they stored on chain uncompiled so you can read through them and you can execute them and finally virtual machine that's what renders all of this and executes it so what is social DB so in web 2 how the world works you have multiple applications and every application has its own database and there is there store data about users in their database so in Social DB it's a Webster model where we store data per user so every user store their own data and then within this user storage you have multiple applications so user has to cover storage that's just how near protocol works and to prevent blow up the stage state and the data is fully public and you can effectively if you want to access data of application 3 you query like give me data from all users that have data about apps right and because it's on a chain you have a full history of data that ever written so for example a user updates a profile at a given block height you have a version of the previous data update and you can effectively go back in time so we leverage this for the code storage as well when you store a source code of a component at a given block height you effectively create a permanent copy of this code and you can go back in time at a given block height and get all the components that were active at this time so the data storage is kind of like a huge gigantic Json slightly more optimized but a query interface is pretty much adjacent so it's very easy to work from the front end so a little bit about gateways so the Gateway is effectively a static app you can deploy it on apfs and it will work so it consists of a few elements editor is a online ID editor you can edit your components then it uses a virtual machine of a certain version and then you have a navigation and also wallet Integrations so here's for example an editor you haven't left the code on the right preview of the component that it renders and you can store it and like modify it and play with this so the components is what powers all the applications there and they are executed in a virtual machine so this is a component that renders itself it's basically a component in react.js that renders a source code using a markdown so it features the source code from chain then inject it in a text and just render some markdown so here's for example a profile component it's kind of like one isolated piece but it consists of multiple other components so here's an example how it's composed so it uses a bunch of other components so for example a header and then an image and then a following list and stuff like this so the rainbow borders here just displaced and the hierarchy of the components and then you get a blockchain Version Control on top of the components so imagine you want to get the interface that was active at a given blockade you can query all the components only at the given block height or earlier so if someone breaks the front end and you don't want to go to a new version you can always like just say hey give me a height of the front end that was set a given a block height foreign there's a bunch of applications that's built already on top of this framework so a simplest version is just similar to Sr scan contract right you can build a a simple token sender so you select the token you select a recipient and the amount and click Send it will generate the transaction for you another one there's a demo we used to build the latest taken widget based on the original lighter code and you can stake your lighter from there the beauty of this is you can inspect the code and it's not compiled code so you get the current source that getting executed and if you don't like Samsung you can easily modify it and just execute in a new code and this is a near specific component you can delegate on the near side and the beauty of this is even so it's dedicated for near and stored code on here you can interact with multiple blockchain so long as the wallets are integrated and we have a few gateways one dedicated for near and one dedicated specifically for evm and uh like metamask stuff wallets so this is another component you can build a real game a Sudoku on top of the smart contracts and then just the UI is uh on the client side and obviously we built a social network and that was the original idea but during our work uh we I discovered the the most interesting aspect is not necessarily the social network itself for the near accounts but the compatibility of the front ends so another widget or component is the history of commits and you can see how changes of a given component were pushed on chain so a final part is like how you can build a simple application and for this we're going to use one of the gateways called boss GG so this is a gateway that we built specifically for East Denver and there's a bunch of bounties on this so if you deploy a front end there you will be eligible from the bounty so if you go to post GG and open the website connect your metamask and then you click editor you'll enter in a plane editor um page so first we can add some boilerplate so the way you write a component for um hey so yeah the way you deploy them the way you interact with the evm is you once you connect the metamask you get a capital injected users and it has a provider similar to users.js provider you can also call a list of accounts and functions there act like a react hook so they are more um more synchronous so this is some boilerplate and it checks if you already signed in otherwise it displays a button for you to connect so first thing you can do is you fetch some API or you can hard code this API directly in the component and we also fetch the token list and then we parse it and display it on a raid so this is just raw output from the Json of the token list next thing we can use some of the react so we take the tokens um object and we map over this and we render a simpler and react component that renders a token name and a token address and we get a list of all the tokens so from the moment you get to like start in develop and then to the moment you see the result is like less than a minute next we can display images fairly easily by adding for example an image tag to the logo URL and we get all the images but the interesting part about this is we wrote this code that renders a single token with an image so what we can do we can extract this uh piece of code that just renders this into a separate component and save it on chain and now it becomes available for everyone to use in their code so we now can replace the rendering code into a link effectively a custom company called widget we put the source where the component was just saved and we pass the property of the token and that way we get exactly the same result um and you can use this type of stuff to build a more complex item so right now in theory we can pass the sender into the component and it can fetch the balance so if you're familiar with like react development on the development here becomes very familiar so um you can try it now go to one of those websites and play with this so two of them are social networks dedicated for near but also you can develop custom components and post GG is a evm enable Gateway dedicated specifically for developing applications for EVMS so thank you you can find me later if you have questions