Tenderly 🛠 How to Improve Dapp User Experience With Tenderly - Luka Anicin

foreign [Applause] [Music] company and today we are going to talk about how to improve user experience of your dapps using some of our tools and since we have a bounty for this hackathon we are going to talk about a couple of tools that can be useful for you to build better products in your projects and obviously if you have any questions reach reach out to us in the boot so the goal of today's session is for you to understand better what tenderly is if you haven't used it before we're going to start by introducing the tenderly as a whole and then some of our pieces of products that can be beneficial for you um and finally we are going to switch the gears and close the whole session by introducing the Bounty and see how that how you're going to judge it what is uh what is the uh the pricing pool and so so on and to achieve that goal uh we have six or sorry five parts of the presentation we are going to start by introducing the tenderly switching to something we call Web free Gateway which is our node as a service and then talking about simulations and web reactions and then Bounty obviously cool so tenderly in general is a development platform to help you guys build better products from basically end to end we support like the whole development life cycle from ideation stage to through the development to deployment infrastructure and in our offering we have three parts like for tools that are only for developing then for observability and then infrastructure which we are going to focus today from the development side we have our debugger which is visual debugger to allow you to debug line by line and call by call of the of your contracts and you can see and the work with your teammates to detect what is actually wrong with your transactions on that note we have something called simulations that will allow you to simulate those transactions and see how it would react on the Chain if you changed and make those like tweaks to your code and into some transactions like our arguments and stuff like that for observability we won't spend that much time today here but basically analytics alerts and stuff that you're probably used to it on other places as well and then infrastructure 3.0 as we call it we have many other things there some of them being web reactions that are pretty unique and simulation apis and forks and no there's a service which is very Gateway in our case cool so uh before we jump to more specific things this is where yeah it it is uh I don't know it is like this part of cable sorry for that I don't know um we actually changed the whole adapter and it's still blinking yeah so this is basically representation where uh where the tenderly lies into your okay you will lose it right laughs it's fine so this is the this is the representation of uh where tenderly lies in your development process so you have all the evm networks then we have tenderly on the top traditional ways of developing your smart contracts and on top of that obviously your dabs so basically you can rely on tenderly to utilize normal tools as you would to build basically all products two days ago we released the free gateways and the web free gateways is our like version of node is a service offering where it's basically tuned to every single part of our platform starting from alerting debugger our web reactions and transaction simulations so you can basically build the full fledged application on top of that and we compared to other offerings based on net based on Benchmark we have eight times faster performance and it is 100 data consistency across the board and it's lower cost so we have started basically zero dollars so it's a free tier and for first 1000 registered users for life it will be fifty dollars per month that's it and how we reach to this goal well of eight times faster accessing the archive data is we have availability across the board so we're based where you're sending a request we are going to reach to that node one being in the US so if you're developing today that's where you're going to get the data from and one in Europe and in a couple of weeks we are going to to release two more uh in us as well and one more in Asia so wherever you are in the world you will basically have consistent speed uh across the board for reaching the data and that's that's basically it so and one more additional thing before we switch to simulations if you just choose to apply this to your projects you're going to get a special merge from us which is a vacuum cleaner for your keyboards and stuff so it's just a fun nothing nothing special cool so that's basically like the node data service you can uh interact with it as you would with any other like Json RPC format so you can choose all the other things but let's let's talk about simulations so how many of you have used tenderly so far okay um did you use simulations nice so this is basically one of the most used parts of our product and it allows you to run simulations on either transactions that are never happened so you're just preventing and trying to see what would happen if you push to the network or you want to debug it in the past and see how it would change based on like some parameter changes like here you can see like for example you can choose the address you can choose the contract itself the network the input data and you can run the simulation obviously without reaching to the the network and spending the real real resources and it's tightly integrated to your product because it can be exposed through API and CLI so basically you can integrate to your product and build one for example demo account for your app and allow users to like use your app without actually spending any money and all of that can be integrated to your project so some of the ways that we saw using simulations helped our users being one improving ux and one is allowing users to run simulations on their own uh without spending the money for example exchanges so you can run the transaction exchanging from one to another and seeing like having a proof that it will work how much resources it will check and obviously gas estimation will be much more accurate with that as well so through integrating simulation API and that's more on technical aside from you for you to consider if you're going to tune into this uh to this feature for tenderly and obviously this will help your users to be more uh precise with their actions remove the anxiety part so everybody of potentially everybody sitting here including myself have anxiety when you send the transaction what will happen and with these simulations you're not removing everything but you're just decreasing it a bit so you're having more confidence in your users and obviously by doing that you're having much better user experience the other one is also like we have Forks that is integrated with a simulation so one simulation will simulate the transaction but what if you have let's say 10 transactions that are relying on one another so for that we you can spin up the fork for any network and each transaction will change the state of the fork as it would for the network which at all so you can basically run transactions one on another and get information from there and for that basically integration testing can be done with that for for you uh to make sure that all the pieces of your app work correctly and or you can just test a transaction itself for that we have like when you spin up the fork you get a traditional RPC URL put it in your project and you basically interact it as you would with any Android network and obviously this you can see it makes sense like you're just testing your network and it produces much better and sustainable products from your end to help you better understand how it would help for your hackathon projects like you can create onboarding experience for example for your users like some of our clients and I will say their names in the next slide users our simulations it works to create a longboarding experience and make sure that every single part of your product is working as as should there are a couple of a couple of things that running simulations will help you prevent from making a mistake or getting more accurate information from the network and so on and the real cases are here so these three clients of ours are using simulations apis and forks to in their products like for example insta dev has built a full demo account so whenever before sending and creating a demo account on Mr death and spending the money I don't know how much it is right now but I I think it's 90 dollars and if you don't if you're unsure if you want to spend those 90 dollars you can spin up the demo account and uh basically get information from it and interact with the with the holding infrastructure of this say for example uses for two different reasons one for their internal engineers and obviously for testing purposes of uh and checking if their solutions to the bugs are actually worth it so what happens is basically you have an exploitment system you can run the fork moments before the exploit and you can push the change of your contract just before that happened and you can see if that exploit will have happened if you had that version of the contract so you can do that with the forks and simulations and obviously safe allows us allow their users to to test their simulations and and um before executing them not chain yield uses that for testing purposes and dry runs of transactions so now that do you have any questions before we move to the web reactions Okay cool so web reactions is something that will be actually good friend of yours in in the hackathon today um and tomorrow and it is kind of a serverless part of your ecosystem so you can build a backend for your apps and that can be like those are small pieces of code that are going to be executed one one some Criterion is met like either on train or off chain and you can remove a lot of infrastructure part by using the free Gateway sorry web reactions and that will help you actually to create much better and robust uh systems in that way so here you can define a trigger we're going to speak about triggers in a second and you can Define your custom code and that's it so you can you can basically do that um and why well obviously it makes your apps more robust more agile in a sense and you it creates a good user experience by for example notifying them or using certain parts of the app that can be automated so now that you have just a high level of potentially understanding of what verification referee actions are let's dig deeper and see from technical standpoint what is goes into building one web reaction so it has two building blocks one being uh action function so it's a piece of code that could be either in a JavaScript or typescript format and you would write as any action any function and it has some launches that you need to follow to uh to be classified as an actual function like first off it needs to be exported it has some name like it's your choice it's action function type and it should be asynchronous it obviously has your logic and that's basically it except for inputs it always has context and event so let's bring that up and see what those two are so event is something that you're going to wait for to happen so that you this function is going to be executed and for context it allows you to access two different things of your uh for for repre actions one being secrets so if you for example want to call certain API when something happens on chain you can do that but you need for example an API key for that and instead of using dot EMV you can have secrets inside of tenderly and you can access all of that data through context and other other thing is storage so sometimes between execution of your function you need to store some bits of information so you're like having that and not repeating something for example here in this picture below is a piece of storage which stores information of tic-tac-toe so for example you want to have information of the state of board like you can't play the same move twice so for that you have this information which can be either extracted to your front end or basically interacted directly with your smart contract and not implementing with making a mistake and that brings us to the second building block and the last of web free action which is the trigger so trigger in my opinion is one of the most interesting part here uh so that's what needs to happen for that piece of code to be executed so here are four main types block being the simplest one saying okay when the block is mine on the network of your choice let's execute this piece of code so let's say you can monitor the mainnet from our end and say every every tenth block that goes to the main it let's uh in let's inform our users on the Discord that has happened like that's simply use case but you can do it the periodic one if you use the cronjour that's it so basically you can set up some period of time and say every 10 minutes every 10 seconds every 10 lines whatever let's execute this piece of code and that's periodic and the web Hook is when the search web Hook is sent like when the HTTP request is sent let's execute additional functionality of that which you can do here and you can see that periodic a web hook are not on chain base so it can be either chain or off chain base transaction in my opinion whenever I demo the real use case of web reactions that's what I use and that's basically tuning directly to the emitted events from your contract so you can say okay when this event emitted from this address you can go and specify as much information as you want to these trigger setup and when that happens let's execute some piece of code so we are constantly monitoring all the network that we support and you can basically do that and here is just a simple configuration you don't have to remember this all of this is in documentation so we have pretty standardized documentation that will help you build all of the triggers with as much complexity as you need for your projects and basically you have it completely freedom to customize this as much as possible and one thing is the web free actions are completely free so either in a free tier of account you will get it like to play a lot with this so some of ideas that will help you integrate web reactions that we saw our users are using so first off you can react on some chain events so basically when something happened as I mentioned before you can execute additional code inform the users run additional functionality and so on then you can automate the Discord notifications that can be tightly directed with something that has happened either on chain or off chain you can create a dial that increases dial participation by notifying constantly users to vote for example that can happen you can reduce gas spending so basically you can write a rule that executed pieces of code or send a transaction when the gas is lowest you can set basically to check how much gas is currently costing and when the trigger is met you can basically run the transaction you can build multi-purpose Bots Twitter whatever you like you can use that and and build Bots around that you can even send a transaction from web free web reaction I don't recommend it because of the security don't do that but you can um then you can create a learning system so it's the most common case so you can create like a front end and send a recoup like alerting systems to particular users a group of users or whatever you can have a completely freedom of uh of accessing your data sending that that to the transactions and so on and obviously it's a your hackathon assistant so you can automate and uh a lot sorry automate a lot of things from the backend Side by using this and now that we went through more of a technical side let's let's talk about uh our Bounty so the goal of the bounty is not to use tenderly a lot you should if you want to participate but it's about making your ux better for your users we won't judge on how much you use tenderly but how much that piece of tenderly will increment user experience the total pool is five thousand dollars and the expectation is basically that we want we will judge on what is the Innovative way or approach of applying either web reactions gateways um and or simulations so you can choose to apply all of free you can choose to apply only one so it's not to be judged on how much you apply but how you apply it and the complexity is something that we just put it there but obviously it can be as simple as sending a notification but if it's a crucial part of your application that's something and the prices is separated in this way and obviously don't forget the vacuum cleaner so that's something that needs to be remembered um scanning this QR code you will get two months free Dev account so no matter if you use standardly or not here you go it would be a good joke to automatically add me on the Discord like if it's kind of okay so obviously if you didn't scan it now or you have friends that needs Dev account from your teams you know where to find us and we will give you the access to those keys so you don't have to like be limited to this slide only and the on the other reason is the other thing is you will find us every three days here so if you need help from us please reach out and we will help you with that also we have on on call team and Belgrade so if you are working overnight there is other time zone that will be awake so hey just send a just send a message on our Discord and we'll be there to help you thank you