Rapid DApp Development with useDApp

Transcript

okay so hello guys welcome to my presentation my name is justina brunichevska microphone is not working okay now oh can you hear me great thank you so one more time hello guys welcome to my presentation my name is isana brunichevska and i would like to tell you on how to build a multi multi-chain the apps so have you ever built any the app yes no maybe yeah so if you have builds then you will probably know what are the hard stuff about building uh the app but if you haven't then listen carefully you will see so we tried all of it i mean different

approaches good practices different frameworks and libraries but still we had all these different annoying little problems for example how to handle read-only mode um before what like user connects the wallets to our application we need to show them something right we also need to make sure that we have like updated data on our application so we need to update it on each new block we need to also keep track of request efficiency so we can't spam our api with with a lot of different calls additionally we need to handle switching

networks and wallets and don't refresh everything we just need to refresh some of the data not all of it and additionally track transactions notifications and history and having all that in mind we created used app which is a framework for rapidly of development and it's compatible with evm compatible blockchains so you can use it with all of them and yeah it's not like another library it's just like a set of rules and set of tools that can help you develop the app we use all like well-tested and well-known uh libraries like react eaters web free

react and waffle so let me quickly show you what features we we have and then deep dive into them separately so we have a connection management reading blockchain state also um we we help you with transactions multi-layer support and we also have built-in support for type chain so let's see how connection works so we have read-only mode out of the box so you don't have to worry about that we also help you with networks switching and also with multi-multi network multiple networks like for example layer 2 it's also like very tough

so this is an example of how you can use like read-only mode you just need to simply pass like rpc url in the configuration and then voila it works it just works another example of how to connect your wallet to your application we provide you use ethers function and it returns activate browser wallet and account activate browser wallet is a function uh when you call it then the application simply ask metamask to just connect to the application and the second parameter is account and that's just currently connected account correctly connected wallet address another example of how we can use

different functions from used up and the first one is user balance and it just returns either balance of the account you uh you pass there and in this case uh we have in the second line we have staking balance so it's like staking contract balance of eater so it's naturally that we would like to see it before we connect our wallet right so it should be like read-only call and another line is like we get the currently connected account and after it's connected we can get its balance so and this is the real example so that's the code i showed

you before and here we have the staking contract balance uh in this uh app and then let's connect and you will see that the account is displayed and then it balance of this account if we switch if we switch well like wallets then still it updates itself and even if we switch networks then everything is um like updated so to summarize um like used up helps you reading blockchain state it auto refresh refreshes on each new block on each wallet change or a network change and the greatest thing of it is that it like uses multi call

that combines all these different calls into single one call so you won't like you know provide too many calls it will be just one single call on each new block so here is the example of um yeah actually the same code but let's see how it works in case we for example provide a transaction so here let's send someone 0.1 meter and you will see that the state only the balance will update not anything else so on each new block it will just like update and it was like 0.7 and nice and now it's like 0.6 so it updates itself so that's and that's just

like this three or four lines of code which is like amazing in my opinion so let's talk about reading from smart contract because that's we we want only like you know check it out balance we can we need to call contracts right so in this case we have an example of how to use use contract call function which is also like another helper we provided so in this case it's like probably well-known erc token balance check so here like here is the example of how to use it we need to provide like interface of the contract then the contract address the name of the function we would like to call and then additional parameters we have so that's just

that's simple let's talk about transactions so we can track um transaction state we have also like history and notifications so here is an example of how we can send this ether so we can use send transaction function use use and transaction function and it returns send transaction and state so the state is the state of the transaction we are sending and send transaction is a function that you need to call if you want to send transaction states can be different like like here and let me show you how it looks in practice so let's send

some 0.1 if to someone and then we can we can see on the bottom that we have like notification we have also like state displayed so still it's just like you know these four like few lines of code this is amazing okay we can also not only like send transactions but we can also like call functions contract functions and it's still like very simple we have this use contract function and we just need to pass the like the contract we would like to call and then the name of the function and it returns your state and send send is the function you to call with arguments that this transaction needs to be called with and then it will

be just sent so in this example we have like wrap eater calls so let's drop some if and you will see again it's this it's this code so let's call this let's wrap some if and then we'll see it's like called a send transaction we have state notification again so the balance will also change and it's updated on each new block okay so our latest feature is like multi-chain and multi-layer support and it's super easy because like

the only difference is that you need to pass additional parameter which is like an object with chain id so in this case we can get um balance of like the same account on three different layers on three different chains for example we have mainnet arbitrary and decay sync testnet so it's very cool and another thing is like switching network helper because sometimes you if you have like multi-multi-chain or multi-layered uh application sometimes um the data will be on different network and to send a transaction you just need to switch network so we provide a function it's called switch network and that

helps you like enforce user to switch network so in this case we check whether the user is on mainnet if they they are then we can just call if they are not then we need to like call switch network to mainnet we have also notifications like it's very simple to use like with transactions right so transactions is like history of transactions that we send and then notifications you can just use like this another extra thing is that um like use contract function returns additional parameter that is events and it's super easy to just get events of the transaction you just sent

it used to be like very painful to do it and then we have like another like a lot of bunch of different like helpers that i'm not going to tell you about but you can check it out in our in our documentation we support all these different evm compatible blockchains like like all ethereum testnets their tools binance etc but we can support your own chain as well and it's super easy you can just go to our um github create a pull request with probably like few lines of code and if you have like problems with that we can we are happy to help you just uh you can um catch us on discord we

have discord servers so you can ping us and then we can help you with uh with that another cool thing is we have like browser browser plugin so it's available for like a mozilla and chrome uh it helps you track under the hood events so events of uh used up so you can know what happens in your in your application and it helps you manage apis and tags here is how it looks like so yeah what's next so we think that like used up is like feature completed we can't see any additional features that we could

like create but if you have any requests we are happy to to implement it but we are going of course to support it we want to optimize our pc requests even more and we would like to introduce advanced and dynamic config so yeah if you are interested in that just you can scan qr code go to our page and then you can find all these different documentations and sandboxes so you can play with it and request record plus and thank you for this presentation if you if you have any questions feel

free to ask just raise your hand and yeah can we get like there in the third row [Music] hi uh we are from thales so our question is the browser plugin how developed is do you support it you it's a long term support or and yeah so for now we support it and yeah we have like a team that works full time on used up so yeah we will support it how many users you have so far how many users it's hard to say because it's used on like in different applications thanks thank you

do we have any other questions if no then thank you guys and if you have any other questions maybe you can reach out to me after the presentation thank you