Rapid DApp Development with useDApp

[Music] [Applause] [Music] our next talk so our next speaker is marek i want to invite him on stage to talk about you step and uh i'll let him insure himself and talk about this amazing project so without further ado welcome hey hey carly great to be here great to see you great to be here on this event i'm talking to you guys one click this disclaimer i'm in a hotel in a public space that's the only place where there is a working wi-fi so uh there might be some distractions but but let's hope for the best so today we're talking about used app it's a framework for rapid development of the apps and when i see the apps i really mean the web component the web part of it we're not going to talk about smart contracts today so it's going to greatly connect to the previous presentation of richard that we that some of you might have seen on uh ether js so why doing a framework might be a question that many of you might be asking yourself and what could be possibly difficult about building frontlines for the apps right it's a simple web application it's a simple react application well it turns out it's kind of hard and we really try we would know we kind of tried it all we tried react we tried to react with redux we tried rxjs we tried domain driver design we tried everything for our last four years so we looked at what different people are doing and we really didn't find an easy way to build theats and i think there is no like any fundamental problem not any major problem that makes it difficult it just this is little small little problems everywhere that makes it difficult and i give you you know a few examples seven seven my seven top picks right so first of all if you go to an application and you want to and obviously we want to make a good user experience we want to build great ux for our applications for our users so first of all um when the user goes to the app for the first time they want to be able to browse the app without connecting they want to be in this read-only mode before they connect their metamask before they connect the wallet of choice right so the app should support this read-only mode and um the other thing is and you know that's not very hard you just make a couple leaves make sure to connect to read-only provider is it easy right but now the problem is you always want to show the most recent state of the application every 15 seconds or so depending on the network might be different times but you know new block might arrive and when the new block arrives some of the state might change some of the values that you display in your application might be different and you never know which one it might be it might have nothing to do with uh with what user was doing so what a lot of well application developers do is they keep querying every time every time every every few seconds they keep querying and see you know what is what is the status of this value over here what is the status of this value over there now that makes a lot of requests which brings up which brings us to the next problem which is how do we keep amount of requests small so that well first of all our insurer alchemy bill is not that high but second that you know the ui is responsive and the user can see the kind side and there is no like hundreds of requests in the background that you know one is waiting for the other and then there's the whole since we're talking about refreshing there's a whole thing when we're switching wallets right so when we switch from one wallet to another let's say i go to uni swap i want to exchange from one currency to another i set up the whole thing i want to exchange a to b and you know this is the exchange rate it all looks good but i'm connected with the wallet so i want to switch the wallet i don't want to see the whole application reloading right and actually if you go and you go to uh documentation of ethereum they say if you change the wallet or you change the network you should refresh the whole application because it's so complex to figure out what needs to be refreshed or not not anymore not with used up use up is handling that for you as you're gonna see so switching wallet switching networks is becoming a thing now because now we have more and more often we work with applications that have multiple net that support multiple networks you know you're on layer one you're on layer two you keep switching depending what you wanna do all kind of bridges are being built all the time it's not anything extraordinary anymore anything weird anything fringe as rich with richard would say and then there's the whole training of transactions and i know it seems simple you know like you look for the transaction if it's pending if it's successful fail but then you know transactions tend to be slow users switch contacts user wants to understand so how to understand what happens the transaction fails he's already on the other screen maybe it was replaced maybe something else happened right so we want to have we want to give user support to give give him information about you know uh the history or uh or the notifications uh of the transaction right history what was done notification what just happened so and that's why we created used up we created used up just you know earlier this year i think it was march when we released kind of the first version and um and it's already used by close to 500 applications i believe so use app is a framework for rapid the app development and it's built for ethereum but really any evm compatible blockchain should be able to handle it should be able to you should be able to use that framework with any game-based network and [Music] it's built we didn't want to reinvent the wheel from we didn't want to reinvent the wheel so it's built on react it builds on features that you might you know just in ritual presentation that was just before mine it's built on top of web free react which was developed by um guys in unis map and became kind of a standard thing for managing the connection state and for testing it is a swaffle which is popular framework which we also have developed for a smart contract testing now it's extended you can use it for testing your ui as well so without further ado what are the features we really have three major features connection management reading blockchain state and transactions and we really don't want to make it much more than that we just want to do those three things and do them really really well there will be some plugins there are already some plugins so there are other things that you can do with use that but this is really the core stuff that we want to support that we're already supporting and that we think it should be done really really well because that's what the apps are all about so what connection is doing first of all you have really only support out of the box you have support for network switching and coming soon we want to be able you can now support multiple networks but we want to be able to support multiple networks in parallel so that you can you can display content from many networks easily so here's an example called this is really all the configuration you need to do you need to specify very simple uh configuration object which tells you what's your default network in this case it's it you may net what is what is gonna be your address your nifura alchemy or whatever provider provider you want to use for your ethereum json rpc for your for your access to each um and then you've wrapped your application with the app provider and give the config as an argument and that's it it's done your application is ready you can start developing your application without any further id and here is an example application what it does is it allows you to connect it allows you to connect to ethereum and it shows your balance so you connect with your metamask or your favorite wallet there is a new hook so eaters is all about idiomatic react hooks so everything you do is a hook and it comes with all those great goodies that react who comes with which is like you don't need to think about refresh you don't need to think about state it just give you stuff and you can just use it and in this case we're using use features so again shout out to richard and it and it gives you two things one is account which is your current account can be new if the account if not connected and activate browser wallet which is a function then you can call to trigger connection to metamask then we ask for balance use each balance which is again hook which have one argument give me the account you want balance for and the account in this case is just the account that we're connecting with again each balance might return null because it might be uh we might be not connected or the balance was not yet retrieved and then we have a simple piece of interface the button to connect and we're just displaying eater balance and you know we format it with formal features which is again ethers js function so here's how it looks like here's the connect button we click connect and boom off we go we can switch the accounts we can switch the networks and everything working everything is refreshing this is like all done under the food you don't need to know anything about it and if you see this example application you can see there is actually more than just the account there is more than just each balance there is also the account and the value on interest taking contracts on each or two staking contracts so here is the full code for the application without html and css but this is basically the whole code except for the configuration except for html and css that you need to that you need to have so again we use usage or balance in this case for staking contract which is just a constant that contains the address of the sticky contract we use account from use from user users and we use user balance from well we just grab it from the hook and the hooks again they're gonna take care of all the refreshment whether it's different wallet different network whether we're not connected whether we read all the remote whether we're not in the read only mode so that was pretty easy i hope uh so yeah let's see again pretty easy we have this little notification at the bottom we're gonna uh we're gonna i'm gonna explain what it is a little bit later everything just works boom so that was just to show you connecting and very basic reading from the blockchain now we're gonna dig deeper into other functions for reading from the blockchain so so what is reading from the blockchain gives you more than just features well it gives you auto refresh on your blog it gives out our approach on wallet change and here is a new thing combine multiple calls into a single multi call so everything that you see on the screen is aggregated into one collection and every few seconds there is a single call asking to your note hey is there a new block oh no new block nothing to do is there a new block oh no new block nothing to do is there a new block but there is a new block and everything that is visible on the screen and nothing more gonna be combined into a single multiple and as a single request is gonna retrieve all the data get it back and and distribute the data across uh the application across the visible user interface and it's all done by boots so you don't need to know anything about it it just works right so we've seen this example i think within this one example yeah so here we're gonna send money from one account to another so we continue on the same example that we've seen a moment before but this time we're waiting for pending transaction just to show you that any moment now when the transaction gonna finish we're gonna see the ether balance gonna change and boom it just has changed to 0.69 so again nothing to do just works so can we [Music] yeah uh yeah so here's an example because one question you might ask okay very nice about user balance right but what about if you want to read other things from smart contracts so there's this convenient use contract call which is again the hook which you can use to define your own hooks to query blockchain for really anything so you have your stock and balance so we're going to create a new book this particular use stock and balance book is actually part of rivalry but imagine you need to recreate it from scratch or you want to you know do whatever do whatever other call to smart contracts that you want you use use contract call that returns the value that returns the same thing that uh smart contract is gonna return and it has four arguments the first argument is your c20 interface this is the same format that interjs is using it takes an address of the contract you want to call it takes the name of the method and it takes an array of arguments for the function that it then needs to call again there is a little bit with those extra extra ends and extra question marks because the values might turn out to be to be null if you're not connected if the value is not yet retrieved but other than that it's just a single function call good so we talked about connecting to the blockchain and we talked about um reading the state from the blockchain now we're gonna talk a little bit more about making transactions uh so here's an example we're gonna we're gonna send a transaction what we're gonna use for that is we're gonna use a hook surprise so use send transaction is a simple hook that allows you to send money that allows you to send each other um to the uh from one account to another and it returns well three values but for now we're going to focus on two values one values is some transaction and second is state and the send transaction is a function that takes an as an argument uh ethereum transaction so it has typical values like two value might be other things like nodes and and what not or gas related fields but for for for this example we're going to keep it simple we just have two we just have two uh arguments two and values so we're sending some eater to a certain address and um a certain amount again we're using the ether.js parse eater function and the nice thing about it is we have this additional variable that is state and state can be non-mining successful and exception so we might be we we might not yet send a traction to the transaction yet there is no mining means the transaction in spending success and fail transaction is mined successfully or not really successfully an exception might be coming for example if user cancel in metamask or there is a black in the code so this is how it works this is an example if we go back to example this is how it works just click send opens your metamask and you have those really simple transactions being mined this is just a piece of html that you display depending on the state transaction successful just a piece of html that you display depending on the state and on the bottom you also have a notification so we're gonna talk about notifications in just two slides but for now we're gonna go into more complex examples so that was just sending an ether now we're gonna actually call a function we're actually gonna issue a transaction that's gonna execute a function on the blockchain so for that we're gonna use a very similar group that is called use contract function and it really has two arguments so the contract contract again it's either contract so it's so we already have information about api and the address and the second argument is the name of function again it returns to two variables a return state which gonna track the state of the transaction and the send function that you can use to send to send to to execute the transaction to call a function now with send uh it's a little bit more tricky because send takes the list of arguments that is the same as a functional solidity and it might also take one extra parameter which is override so you might overwrite some value of your transaction like value in ether or gas related fields so in this case we go what we're gonna do is we're gonna wrap and unwrap eater so the first example from the top what it does it simply uh unwraps the eater right so you're calling the withdrawal function on wrap eater contract and uh well it sends just one argument which is the amount of wrap eater that you will unwrap the example from the bottom goes the other side so it wraps either so it takes your reader and deposits and you get wrapped in return in this case there is no function has no arguments but you need to override the values you need to override the amount of feature that you want to send and this is how it works in practice and again you see very nice state management very nice notification over here and you just wait boom transactions actually transaction is successful everything that needed to be related the balances are now updated good and you've seen those little notifications at the bottom to get those all you need to do is to use use use notification hook so you need to uh it gives you the list of all the notifications and applications include things like wallet connected transaction pending transaction mine successfully some transaction sale there was an exception running the transaction and this again because it's hooked and it takes care of all the updating like it's gonna make those automatically make those notifications disappear after certain amount of time that is configurable and if you want to have just list the history of all your transactions of all the user transactions that you've done you can use use transactions hook that gives you you know just persistent uh history and um just think about the amount of work it it takes to implement those hooks it they need to work on different networks they need to work properly when you switch the network back and forth they need to work when you close and reopen your browser so like there is there is significant amount work to it that you don't just don't need to do if you're using this and there is one more extra thing there's this uh use contract function returns one extra variable that is event so we already have parsed events and you can just dig in and see what the events are if anybody's done it in ethers before you know it usually it takes a few hours to do it first time and then it always takes time to to figure it out again to how to parse those events boom how do you go out of the box so what else is there there's plenty of other stuff so there's a lot of quotes related to many different things there is use lookup address who does it realize through ns there is huge gas price that gets to the the the gas price you can use use block metal the meta information about the current blog there's a lot of helper methods like get explorer addressing that generates the explorer link that works even if you keep switching networks so that is pretty convenient as well get the current chain name shorten your address if you wanna if you wanna display just a part of it in the interface and so on and so forth uh currently we support all the team networks mainnet and all the testnets we support binance exodus polygon tata moon riven and mumbai which are the polkadot chains harmony palm phantom and a bunch of and if you want to do local development we support local change like for example on hardhat uh if you're developing your hard hat or ganache and um you know it's a really short pull request if you need to make it work with anything else it's a few things that needs to configure and we keep seeing more and more those requests coming so if your network is missing i'm pretty sure uh there's an easy way to add it and there is one nice bonus thing which is a browser plugin so we have a browser plugin and it's available for firefox and chrome and it tracks what's happening under the hood so we can see uh you know it it might be a little bit unintuitive at the beginning what's happening what's going on under the hood so it does that it'll also manage your apis and tags so if you have specific accounts or specific contracts to interact with you can make it very readable and understandable so here's an example uh you can see the history on the left it was initialized calls updated means you know that there are new things displayed on the website that is now being tracked by the multicall and every time you connect to a different network mainnet callback or anything else you can see right every time that happens you probably you probably you're gonna need to update calls again because you know you used to call on one network now you're gonna call on another network every time you switch screen you change something in the interface it's gonna update calls right every time there's a new block it's gonna check if there if it needs to update anything if it does it will let you know you know calls updated uh first takes updates sorry right and yeah that's that's the browser plugin what's next really i was really enjoying i was watching richard moore presentation about interjs because he talked a lot about you know the challenges coming with this new reality of multi-chain layer one layer two solutions so this is what we think is gonna be the most important next thing to implement in used up so it's really great to see richard is already working on that and gonna take a lot of that work from our uh from our hands but yeah we wanna be able to for you to define your environments when you might have multiple networks connected in the parallel those networks might slightly differ and everything just works and also as i said we think this is pretty much future complete so we don't want to add more and more features and uh but we do see a lot of opportunity to have plugins or separate npms and one example is the coin gecko oracle that is just very simple package that gives you the current price using api and it's just so addictive when you start writing this idiomatic react coupes in this style in this in this api manner it's just so easy so adding other things they're just using the same idioms the same way of working and makes it so easy like if you want to display the list of you know what's what's on the user wallet and how much it's worth you hook up the coin gecko oracle you up um you hook up the standard token api and then you just come multiply one by the other you don't need to worry about all those things we're talking about refreshments wallets networks and yeah the idea yeah so it's working we have the multi i think i mentioned it's like 500 applications using here as of today it's a very young network a very young framework but you know we had uh we're using it on production in several different applications by ourselves everything i show you today ever the examples are available at example.ub.io so go check it the code is available on the github check the documents check our website use dot that i o and thank you very much for listening guys let me know if you have any questions all right that was really awesome uh i mean everybody and myself got super excited by all the uh amazing kind of attractions you have there uh we have a couple questions and a couple comments and a couple of open-ended things for you uh let's start off with something simple can you give us a framework of when somebody should think about using used app versus like scaffolding and then kind of what are the differences absolutely so first of all i want to say and i'm not sure if it's on the main branch or not but scaffolding actually is using used up at least in one of the versions because i think you know austin have many versions of that so i'm not sure which version exactly so um [Music] our philosophy is we want to do one thing and one thing really really well so and i think scaffolder is really good at like being this like boilerplate place boom off you go and you can just start coding right so and we don't try to compete with that i think it's you know awesome is doing amazing work and and there is nothing and we don't want to compete we don't see us we don't see there is a need to improve on that what we do see what we did see the core problem is you know as we develop those applications for customers so you know some of you might know me i'm i co-founded e-port it was most recently acquired by trusttoken so but we're going to continue working on the open source so don't worry guys but the point is we work over and over solving the same problem and the code get also later right and we thought that we need a better abstraction layer on connecting reading and writing to the blockchain it's really those to think because that's what you do with blockchain you know like and we want to be really really good at that right we want to make it so it's super easy super fast super efficient and yeah so we're happy to we're super happy that scaffolding is using it and i hope it's going to use more of it awesome um another question um is this production ready and i think you kind of went absolutely absolutely there is like with taylor i don't remember but i look pulled together with taylor i've seen at least a few a few serious guys using an introduction and we use them i wouldn't be able to tell you from the top of my head but there's several projects reductionary like billion dollar awesome um and then i'll do a final question which uh which is uh i think been brought up as a theme from a couple people but uh for daryl and he's planning to support svettel in the future but you know you have react okay so maybe maybe this is the i'll type this in chat um but uh the question i think uh but i see well i didn't hear about this this framework before but i'll check it out and let you know guys i know that there is a next person waiting to start so thank you very much okay thank you so much and uh yeah everybody check out usap and we'll do it ourselves too thank you [Music] [Applause]