Building multichain/layered DApps / Justyna Broniszewska, Bartek Rutkowski

Transcript

foreign thank you very much for that Andre uh so we're going to move on to the next talk now um and we're hopefully back on schedule for the live stream this is coming from Prague Czech Republic uh and we have a studio audience here as well so looking forward to hearing something from them if you have any questions as well from the live stream then you can post them in the telegram Channel but to move on to the next presentation it's going to be Justina bronzevska at bartek rutkovsky talking about building multi-chain dapps thank you

foreign [Applause] GM everyone can we get the slides thank you GM Prague Welcome to our presentation and this iskowski today we'll tell you about building multi-chain multi-layered the apps so what could possibly be hard about building the upfrontance in general well apparently there are several hard things so to start with we have like many different tools that are battle tested very well known everyone works with them

but they come from web2 so they solve web 2 problems not necessarily all of the web free problems and many of these we have so first thing is that the core of the core of the web free app is almost always the user's wallet and his account and before he connects to that we need to show something usually we see apps that show nothing only a large connect wallet button and nothing else that's a problem that we need to solve also uh we need to always show the fresh state of the app so the state of the app changes each block so it's like 15 seconds or even faster and our app needs to follow that needs to update all the time

everything while at the same time we need to keep the number of requests in check right if we have like an API key that we pay for and we wanna now fetch like hundreds of different data points of different smart contracts and we can spam API very easily and the app will be very hard to operate and also we need to gracefully handle switching wallets so do not refresh everything but refresh some of the things and do that immediately and the same with switching networks and then we also need to track transactions so we send transactions and it's pending then sometimes it's successful or it fails or we just fail to send it or the metamask rejects it and also we cannot lose that

context and the history of these transactions so we can show notifications we can show all the history even if user is changing the tab or like going somewhere else in the app and yeah so quite cumbersome yeah so we had all these problems and we were you know repeating all over again the same as like a scheme of the uh the app and of application and then we decided that okay let's create a library and we created used app and it's a framework for Rapid diab development and it supports ethereum and all evm compatible blockchains so if you hear framework then you

probably think yeah right so we had react angular View and now there is something else that's like web free native well not completely that's not the case so used up is just a set of utilities that operate on top of the react framework so you can easily continue using the webtools that you know but with Native web free support and also used up works with ethers web free react and Waffle so the usual tools that web free developer on the front and end might use yeah so let me go quickly through all these features we have and then we can dive in deep into them so we have connection management Reading blockchain

State efficiently we handle easily transactions we have multi-layer support and also built-in support for type chain so if you are not a JavaScript type of guy but type chain type of guy it's good for you exactly so as for the connection we have read only mode out of the box built in we have also like Network switching and handing multiple networks like layer 2 and layer 1. so let's go to an example so to start using qdap you just need to wrap your application with the app provider and their provider needs config so we need to pass config and it could be as simple as that like with only two parameters and one very important parameter is this

link to let's say infuri in this example so your application will will work with in the read only mode for mainnet in this example so here we have an example of connecting a wallet you all probably if you develop applications in react you probably know hook Paradigm and we also use it and you can see use eaters it's like main function of used app and it can give you all these um helpers that we have and in this example we use this use eaters function for getting activate browser wallet and account so account is actively connected actually connected account and it's a just a string it's

just an address of this account and activate the browser wallet is the function that you need to call to connect to metamask so the code is very easy we have only like two lines to connect to wallet and then display balance of ether bonds and here another example of how we can get a heater balance and the first line is just for read-only state so we just we can just you know get a either balance of anything and in this case it's just a staking contract and then we call use eaters to get account address and then in the fourth line which is

called UC turbulance with this account that is connected and then in the following lines which is displayed to user so let's see if this video will work but you can see this application this is in a read-only mode and when I started then not like this maybe like this no not like this okay so it yeah maybe someone from the backsticket can help us with displaying this video okay so probably you need to trust us that this works so when you connect to

it when you click connect button then you will see the address okay maybe and it means help oh no sorry not like this so it worked on our computers probably every developer heard that okay so yeah and when you click connect button then you will see address and then balance let's go to another example yeah so about reading blockchain state so yeah I'm only gonna add that the thing that you can imagine that happened on the video was that not only after connecting the wallet it displayed the balance and the address but also then we

went into the metamask and changed the network and immediately the state was updated to view the balance on the other network and when you change the wallet it also automatically changed the wallet that was connected to the other one and displayed the new balance exactly and this is how we can actually read the blockchain state and used app helps you because it refreshes like the state on each new block it also refreshes refreshes on every wallet change and additionally like all these calls are combined into one one single call and it's done by via multicore so you won't spam any API with too many calls because it's just one single call

there is also another important aspect of using the multi-code because if you imagine yourself making 10 calls 20 calls or 100 calls within the lifespan of like one block So within like 15 seconds it's possible that some of the calls will arrive to the node at block X and some of the calls will are gonna arrive and gonna be resolved at the Block X plus one so the state might change and you will get an inconsistent state of the app this is an important reason to use a multi-color so then all these like hundreds of call potential are going to be combined into like one API request and all of them are gonna be for we can be 100 sure that they're gonna be resolved at the same block and the state is going to be 100 consistent um all the time because it's just one

call okay so we have another example actually that's the same example I mean the code hasn't changed but what changed we just sent a demo yeah what's the demo uh we we wanted to send here a transaction so actually yeah this is what happens when what you can see after we connect our wallet so we have this account and then our balance is displayed but right now when we let's try it again maybe this button this time is gonna work no maybe you can help us with displaying this starting this video okay let's try it yeah so let me

describe what should happen so we have metamask opened and then we send a transaction to someone else and then right after this transaction is successfully mined and we can see it in metamask our balance changes so we don't need any additional code so this is still the same code we had previously but it just updates and what's important we don't refresh the whole Dom of react we only refresh this one particular component that displays the user balance and it's not like heavy on computation exactly yeah so we can also not only read either balance we can actually call any smart contract and here we have an example of

very well-known erc20 token balance so of course erc20 interface is always the same should be and we created all these helpers for erc20 or different known contracts and here you can use it of course but here is an example how you can create your own helpers for your smart contracts because they can be different right so but I want dive into that and yeah so let's talk about transactions so we can track transaction State we can have history and notifications so let's go to examples so here is an example of how to

send ether you just need to call use send transaction function and then it will return you state and send transaction State send transaction is just a callback that you need to call with transaction parameters and state is the state of the transaction you send so here are different states we have non-mining success fail and exception we have another demo video okay we can do anything so I will just describe uh what will should happen and we can show you after presentation on our computer because we have it as well yeah so right here we just click this button send and actually under this button sent we have

this sending transaction called and then you you should probably see on you would see on this video we have this state of this transaction so as soon as you click Send it's like there's going to be metamask yeah of course sending confirmation Etc and then after we send this transaction we have mining state so the it's like our transaction is in in the mempool and then we have also this notification um from these notifications and right after is successful in mind we have status success and also we have a notification about that

yeah the same we can do with smart contracts iterations so we just simply call use contract function with contract that you probably know from eaters library and then you need to pass another like parameter is a contra like the function name you want you would like to call and here are like withdraw and deposit uh like functions and additionally we also have state return from use contract function and then this send callback that you need to call if you want to provide this this function and another demo we wanted to show you so here we just like send our eater to

raptither and then we wrap our ether and you can see also like balances so it after right after we wrap our ether then our balance will like if balance will decrease and then wrapped eater will increase and additionally we also have these states here and notifications yeah so the final like like the feature we would we all we all came here for it's like multi-chain support multi-layer support so let me show you the example of how to do that so here we just can call like for either balance on three different chains so to

do that you just need to pass additional argument arguments which is chain ID in this case and here we have like mainnet arbitrum and CK sync test net like all these different balances displayed in one View yeah so without changing anything you can read from multiple chains at the same time but in order to write to a particular chain you need to switch to that chain like for example in metamask so the transaction is going to be a signed and prepared properly so you can use the switch Network utility and then whenever you wish to send transaction to a particular Network you can use that function and then the you can for example check whether the chain ID you

are currently connected to is correct and if not then you enforce the network switch the metamask pop out will appear and we'll change the network yes so you can see that you just need to check whether the chain currently like active chain ID is different than maintenance then you need to just enforce user to just switch Network so we can imagine for example like one slide even before that you have like three different pools deployed on three different chains and then when you click deposit you check whether this pool is you are is on the network that you are currently connected to and if not then it's gonna switch the chain automatically and send the transaction um also like uh using the transaction

history super easy using the notification uh as well yeah I recommend to checking out the documentation for details um and one more important thing about the use contract uh they use contract function call is that it doesn't only retire new uh doesn't only allow you to perform the transaction and doesn't only return in the state but also it's capable of returning you the the array of events that were emitted during that particular transaction execution so you do not need to after the transaction is processed somehow call the node to check what events were addressed were emitted in that like particular Block in that

particular transaction you just get the array of the events right away and no pain no additional effort attached to that and it can be really hard sometimes um we have a bunch of other goodies that can help you develop uh the most powerful up possible so gas prices block metadata Explorer links everything already baked into the the library we support all this as I said before we support all evm compatible blockchains ethereum mainnet test Nets layer tools binance Etc but the nice thing about that is that we can support

your own chain as well so we can do it in two different ways so you can just set up used up in your application as you want with your own chain but Additionally you could create a pull request in our wrapper and then add your chain to our support chains and of course it will just very easy pull request it's just like like 10 lines or something like that so if you would like to do that just go to our documentation and see how you can do that yeah and there is also another feature which is super important in my opinion which is the browser plugin so the browser plugin for used app works for Mozilla and Chrome for now and it tracks under the hood events so not the events

that were emitted on the blockchain but events that happened at the core of the used app also manages API syndacts and this is how the uh this is what the plugin looks like so you can see the tab that is the use the plugin and on the left you can see the list of all the stuff that happened in the in the application so you see that the mainnet network was connected that then the network was changed to coven that the account was connected there was new block mind there was another Network change all of that with a timestamp you can easily debug your application you can see what was exactly happening and that makes developing uh extremely easy uh and what's next so we recently uh released used up 1.0 so we consider used

up to be somehow feature complete at this point we see it as a whole though we are of course working on it uh all the time so right now we are working on optimizing the RPC requests even more we are working on more flexible more powerful and more advanced config as multi-chain supports the thing that we want to improve even more but if you have any ideas any feature requests there is anything that you thought that you're gonna hear about but we somehow skipped this then feel free to talk to us we are open for an external contributions we are open for resolving any issues you can start with used up today by just scanning the QR code which will lead you to the page where you will

find documentation sandbox examples descriptions Discord link everything that you need thank you guys for today thank you for hearing our presentation we happy to answer any questions you have if you want to do it right now or if you want to just text us just feel free this is these are our handles Twitter telegram wherever you prefer thank you we have questions okay thank you thank you stand up and we also have a microphone for the question so that the people on the live stream can also hear thank you very much thank you

as well or just the browser yes so currently you can actually use that works for a react applications yeah yeah so just a browser not react native probably if you set up it with react native it should work in my opinion that's what I guess okay yeah we weren't trying this explicitly but I don't see any reasons why it shouldn't work yeah okay does anyone else have any questions we have maybe some questions from the live stream I have some questions as well but anyone from the audience okay uh so I I have a question so you

you talk about how your uh you're open to contributions pull requests raising issues fixing issues can you talk a bit more about the kinds of developers you'd be looking for like are they are they you know what level in the stack would be the right people to contribute or anywhere you can be contributor wherever your experience is right so like you can just read our documentation and see a typo there and decide okay I will open up a request and then fix that right so we are open on to any kind of contribution yeah and we really mean that because for example adding a new evm compatible network is a dead easy pull request and we are happy to

um to merge such a pull request while still like some I don't know like heavy optimizations on the calls level is like hard stuff and if you want to work on that then you're also welcome probably JavaScript knowledge might be necessary but other than that I think there are no requirements yeah and currently we are like having some issues from uh from a community and we are like doing something working on them so maybe if you want to help with resolving them then your will come as well yeah okay and I have one more question which is um how does your project contribute to contribute to solar Punk it's a bit of a broad question but solar Punk is

one of the themes for this event can you think about how you how your project connects with the solar Punk concept yeah so I think it connects with both the solar Punk and the concept of the hackathon as well because imagine if you have like an idea or a proof of concept to build then you don't want to spend that much time on creating the low level stuff this is the thing that helps you spin up the applications super fast so you only focus on the smart contract part on the core like idea and you do not need to Dive Dive too deep into like the technical details so if there's anything that you want to test if there's anything that you want to show to people then probably this is like the easiest way of having something bootstrapped and working within like

hours or minutes even minutes okay I believe we have a question at the back ah like please stand up thank you I really enjoyed your presentation and I liked the project but I was really wondering if you guys were making a few JS version as well view JS I'm not sure does anyone use vue.js in web free so someone of course does yeah maybe I mean like if you use like view JS maybe you could be a contributor and help us support in view JS that would be great yeah I would I would put it like this we ourselves mostly use react so we know exactly how react works like deep under

the hood and we were able to like to to go to like a very low level of react to to integrate everything like really smoothly it's the best from and and I'm I'm not sure if we would be able to do that with you because we don't have that advanced knowledge of you but I guess if there is someone willing to work on The View version and sees you know the possibility of adapting used up idea to the view Paradigm then we are super happy to talk about this and and work on that as well okay do you have any more questions

okay then I think that maybe wraps it up thank you very much thank you guys thank you very much foreign