#DappCon22 : Day 2 - Rapid DApp Development With useDApp, Marek Kirejczyk

Transcript

okay so next up we've got Merrick kirichik I'm sorry if I butcher your name uh he's gonna talk to us about Rapids decentralized application development with ustap wake up hello guys can you hear me all right hey thank you for coming thank you shout out to organizer for having me so today we're gonna talk about building applications building perhaps multi-chain the apps uh and doing it rapidly and when we do let's see if that works up Ah that's the one boom we're gonna talk about building front

end and when we talk about building front-end instant question you know might be what is possibly hard about building front and for the app in the end we're just gonna query you know an old read a bunch of informations and display it to the user well that's what we thought and we tried it all we tried reacts we tried Redux we tried reactive programming we tried even domain driven design and everything turned out to be turned out to be very complicated and complex code in the front end what was the reason well there is no a single fundamental issue building front

ends but there is just thousands of this annoying little problems right so for example if you go to the to Ned app you would like to see that you would like to see the content of the diap if it's a Dax or Landing platform you would like to be in this reader on the plot read-only mode where you can read all the stuff right but if you connect you want to be able to interact right easy peasy then you wanna show the current state of the blockchain right so you display all the different variables and all the different places of the interface but every time a new blocks arrives one of the variable might change so you need to query your node check if there is any block and if there is a new block updates of our updates of

variables which leads us to the next problem that that generates a lot of requests so your inferior bill is not a suddenly in thousands of dollars or your Alchemy bill or your private node is getting overwhelmed so yet another problem then what you want to do if you if someone switched the wallet you want to keep refresh the content of the application without changing the context right maybe I'm doing a DEX I want to do a swap but I'm on the wrong wallet so I need to go to the next wallet and then the whole state is gone right that happens also I'm on the wrong Network so I'm on

ethereum but I want to do a swap on optimism right now I lost all the all the information and actually back in the days there was in in tutorial in documentation for ethereum it said if you switch the network you should refresh the whole page because it's just too complex to update the state accordingly right and then there's tracking transactions you know is it pending because it succeed does it fail it sounds easy right yeah but what the user refreshes the page or close and reopens the next day right do we still track the transaction if he reopens the next day and he's on the different screen can he check what was the status of transaction can you go

back and see the history right so all those little problems that makes it so your simple the app becomes spaghettical really quickly so for that we introduced used up it's almost it's going to be a year and a half old now so it's a framework for that rapid D app development and it works with evm with ethereum and all kinds of vbm chains and we make it so it works you don't have to worry about all those problems you don't need to worry about connection management Reading State transaction having multi multiple chains it even have a strong types with type chain right so all that

is done you don't need to worry you don't need to know how it works under the hood and how it works under the hood is following so first we have a connection managing connection so first of all you got really only mold out of the box so you don't need to do any additional configuration you don't need to do anything read-only mode works out of the box then whenever you do Network switching or you want to operate multiple networks it just works what does it mean well here is a piece of code that's the whole configuration assuming started with one chain we have just only one chain let's say man app mainnet and read-only URL is uh whatever is your infuria or any other node provider hopefully it's your private

node that you're using right we've wrapped our react application in the app provider providing the configuration as an as an argument and then off we go we're ready to start working on our application and our application could be something like this we have a we have a other we want to we want to understand what the balance of the user account is that is connected right so we have this hook called use eaters and it's gonna give us all kinds of cool goodies and one goodie is the account that we are currently connected to or might be null if we are not connected at all and we have this activate browser wallet which is a function that if we call it it's going to request the user to connect with

their wallet might be metamask or whatever else you're using and then to query the eater balance all we have to do is use hook use either balance provide the account and all we have to do in in our front end in our HTML and CSS we just need to make a button to activate browser when we click it's gonna activate the browser wallet and we need to display that balance might be new hence either balance and and we can nicely format the balance so if you use heaters before you're going to be familiar with methods like format teacher right or we can make it even more a more complicated example and you know let's say a top of our balance we check the

staking the balance of the staking contract for ethereum Beacon chain and yet again we display all the different items making sure we don't display them if they null right and due to technical reasons I cannot show you the animation but that is basically you don't need to trust me you can go this is an example app this is basically the code extracted from the app you know boom this is work this works we didn't connect to any any account The Ether balance is being displayed right here right so before I show you the next before I show you what happens next I want to talk a little bit about reading from the blockchain so when we query this at our

balance it will keep updating itself every time there is a new block and that happens also when you change the wallet or network but there's very important thing if I have you know 100 different items displayed in the user interface and there's all items needs to be refreshed it's going to be just a single query to the node and the way it happens is there is a heartbeat and hey I'm query that node do you have any block no do you have a new block no do you have a new block no do you have a new block oh there is a new block so what I'm doing is I'm gathering all the different inputs from the whole user interface that are being displayed and squash them into one list and do a one single query to the node a single

multicol and then when the data goes back from the node I'm going to distribute it back all into all the different places in the interface so that works it might be a few multiples if I'm connected to more than one network at the time right so coming back to our example you've seen exam again just asking what the account of the user is and asking for the balance of the different of the user and the staking contract and when I click connect and accept with metamask it's gonna nothing else there is no code here no more code here than what you've seen on the previous slide and it shows the account the how much if is taked in the contract but because we connected to one of the test networks

now it's only 32 if I think it was covered when we make it make this screenshot uh there is a user account and there is a balance on the account that displays automatically if users make a transaction or anything it's gonna update automatically as well so in general case if you want to read from a smart contract any anything you want to read from the smart contract you can you use this use contract call right so here's an example how would you how we use token balance is implemented so you can query the uh you can query any token smart contract for the balance and the way you do that is you use use contract call you provide the interface API interface again under a hood it uses

errors so we might be pretty familiar with that as well you need to provide the address of the talk and the name of the function and the parameters again making sure we're not providing nodes and yeah and that's it and that use contract call already takes because all the refreshing and all the updating good transactions so dragging transaction State even if we close even if we close the browser even if we reopen even if if you went to another to another top having notifications so ability to display users you know the transaction was mined

kind of or transaction spending and the history of transactions are the three features that we provide and here is an example we're going to start just sending some either again we have a use send transaction hook which provides with two things first send transaction function that we can use to send money around so we have a send transaction as an argument that basically takes an eaters transaction so Fields like two and value is things or you can also have a data or other fields as well and um and basically I can send a transaction what is the other what is the cool thing is the state is the state

variable that basically has one of the five one of the five states right it's I don't know so nothing happened user didn't request to do any transaction or it's mining which means you know transaction was issued success it was successfully mined failed transaction failed an exception which might happen for example if users reject if user reject the transaction in metamask right so with that you can really simply build uh here is an example interface again can do animation for technical reasons but if you click Send it you can very easily just doing a switch or if on the state and you know displayed router or error

message or whatever else you want to display for the given set and again more General case for smart contracts you have two functions send and state state works exactly the same send is very similar you first you need to provide for use contract function the the contract which already contains an API and the address of the contract the name of the function and the send will accept the list of our the same list of arguments that is accepted by the smart contract function and on top of that you can have one last additional argument which you can see in the second example which you can you can do transaction

overwrites right so you can add value or change the value of gas or something like that right all right so not much to show here all right oh we're doing good with time so now the most important thing if we want to build a multi chain if you want to build a multi-chain all you have to do is to any any of those functions the reading the writing function has additional parameter additional options parameter and you can just provide the chain ID which might be static or dynamic that tells you I want to read from this chain or I want to read from that Chain by default it reads either from the default read only chain or but from the wallet that is connected but you can display

easily data from multi pull chains with that all you need to do in configuration is to provide additional URLs for nodes all right and if you want to switch Network so let's say you want to build an experience maybe it's a Dax or maybe it's a bridge where you go in the specific flow and you get to a point when someone is ready to to do the action but he is connected to the wrong Network then you can use the switch network uh function that is again provided by youth eaters which will allow you to simply request change of the network and you can display high as long as I'm on the wrong Network please switch the network when you switch the network to the right Network just

make the button enabled or something right so it's really really simple you you don't need any extra handling if you want to build multi-chain flows which requires you to change multiple actions on different chains anything that we've shown so far is perfectly sufficient all right ah wrong button all right and you have those two additional hooks use transactions and use notifications use transactions give you the history of all transactions that was issued by the user with all the different states right so might be mine exception failed Mining and the this is stored in the

off-chain storage so um sorry in local storage in the browser so if you refresh or you reopen application in a few days it's still gonna work and the notification hooks give you an RI of notification which is kind of similar to transactions the differences that notification will disappear in pre-configure time I think the default is 50 seconds so you can just so we can just iterate over those and just display like nice balloons or pop-ups showing to the user okay oh transaction was mined oh transaction was issued right so it's just a very simple HTML and CSS work to make it to make it a great user experience right and some things a lot of people

were asking about the events so events if you use contract function if you use use contract function then you can then one additional value that is being returned is event so you can just you can just query those right there is a lot of other goodies so we have a hooks for ens for gas price for block data if you if you use if you use use block meta then uh then it's gonna be all squashed into a single multiple like the other things and we have a lot of those uh helpers that makes it really simple to work with multiple chains so like get me an Explorer get me a link for for for Explorer for the specific address or for

specific transactions this is really getting annoying that's if you don't have those if you're on the multiple checks right or get me a chain name right and all the information is packed in a way that you can provide a single argument and get a like for example a contract and you can get a get the response there's also shortened address which comes in handy pretty often and we support a lot of networks I don't think that's exhaustive list anymore but uh if there is a network you don't see there here it's very simple to actually just add a new network it's just a simple a few properties that you need to add

like you know the name of the network the chain ID perhaps a name of the network the addresses for the Explorers but also but also the address of the multi-call contract on specific Network all right we also have a browser plugin available for Firefox and chrome and it kind of allows you to see what's going on under the hood so you can see for example oh calls updated so let's start with simple things you know 25 million seven free zero something something block found means ah new block was mined right two State updates means we query a multi-call and there were two up the two

changes to the state that's going to be distributed over to to the UI and um two calls updated or minus one call updated means you know new stuff showed up in the interface that we're gonna track with the multiple all were removed and you know Network connected simply means we change the wallet we are connected to we change with the wall at the network were connected all right and some last minute things that I added to the presentation uh so this is Rock Solid framework we use on production we use you know a lot of defy applications are very heavy on the numbers of variables and display a lot of things in the different places so a lot of those little optimalizations

really help and that was one of the things that people were asking for as well on the in the GitHub issues so for example you can make a call static if you're querying a contract for a token name it probably doesn't change every block or even along you know the lifetime of using of the application so you can use a static true and therefore make it so it's not including in the including in the multi-call if you don't want to refresh every blog but let's say every five block that's a snippet number two and we actually discovered and this is an interesting one we discovered that encoding now takes so much time that it makes browser a little bit slower so we re-implemented and code ABI encoding ourselves so for if you

have a long list of long lists of variables that you want to display you might want to use fast multiple encoding flag as well so yeah if you're not using it yet go to ustab.io and and check it out maybe maybe you want to use it and thank you very much we've got a bit of time for a question over here oh many questions just a detailed one for resending a transaction with higher gas

which I found many dabs don't really handle they still track the old transaction and if I resend it with higher gas because for whatever reason the gas price was too low that I originally sent does it handle that uh I sent a transaction accidentally put one G way which is way too low then I use metamask built-in uh increase gas which has a higher non so different transaction has many D apps I found don't handle this so I have to full page refresh I believe someone implemented it a year ago it was a pull request I can't tell you for sure but I believe it is handled now well and I think important detail is we have a free people team now so if there is

any like we really so the history was we created it and um you know I founded this company called Leaf works it was acquired by trufi and for a half a year we didn't maintain it and then the beginning of this year we built a team and they kind of clear up the issues and we think it's really rock solid and uh battle tested but if there is anything you find that you think is missing then make an issue we really look at those now thank you thank you great app looking forward to using that a question I have is how do you handle the wallet connections you

say that there is the way to connect the wallet but usually depending on the wallet there will be a different way of connect there is what a connector it's harder wallet do you handle that in the app yeah so uh there is a very good support for uh metamask but there is also uh we we have backward compatibility compatibility web free react connectors I think that is slowly getting less and less popular so we actually so version one zero will release early earlier this year which we perceive to be feature complete 1.1 was released most recently which was like

production-ready stuff optimizations all the little uh problems and in 1.2 we actually want to we want to focus on connecting different wallets and one of the directions we are exploring is for example porting rainbow kit on top of usab so I think it should be good enough right now but we're getting we want to we want to get into much better place soon hi thank you for the vulnerable report have you already developed unit testing tools or helpers or do you plan okay so testing my favorite topic I also a few years earlier I developed a

library called waffle that some of my you some of you might have heard about so testing interface is super annoying and super difficult so I don't think you can do much unit testing I mean unit testing is like you can just test you know you can just test your function so you can do that one thing that we build and wasn't very happy about and improve recently is testing hooks so there are special tasks that allows you to test hooks because it's basically you know it's a quick library right so so yeah I think I didn't try it it was developed by the team so but they told me it's really good so make your judgment yourself foreign

is there any chance you will support other Frameworks as well like angular or vue.js because it's quite react focused uh we don't have plans now supporting other Frameworks react you know comes with pros and cons it was not our favorite framework where we started building on web free but we really tried different options and it seems the hooks are just working and I mean the using used up really so you probably have some accumulators in your applications that might require using things like the graph and so on right but the everything that you can just read from the smart contracts it became

so simple with used app and with react that the question is why you really want to use our framework that's our unless you're already using other framework which obviously right but it's just the speed of building and also you can put good HTML CSS guy with some basic JavaScript knowledge and he can do such a big part of your application now and while have your hardcore web free developers focus on you know the graph smart contracts or whatever else then it's really economically not um we're not very motivated to build other Frameworks because it just works so fine just hire another guy to like create a whole of your application it's going to

be much cheaper than two web free Developers thank you very much right we don't have time for any more questions thank you guys [Applause]