Polygon 🛠 Improving UX in Web3 - Rahat Chowdhury

foreign [Applause] [Music] good morning good afternoon good evening depending on where you're calling from we have Rahat here from polygon doing a workshop on improving ux and web 3. if you have any questions they can go into the zoom chat and how it will be more than happy happy to answer them and with that being said I will pass off the might to ever hot awesome cool uh thank you all for attending my talk improving ux and web3 really excited to be uh talking about this is this holds a special place in my heart as a former front-end engineer so hopefully you can take this and make some really awesome uh hackathon projects uh really quickly uh about me uh I'm rahatz I'm the lead developer relations engineer over at polygon um so my team are the folks you might see running around to conferences doing Tech talks conference um hackathon stuff and all that um so like I mentioned before I've previously been like a front-end engineer salinity engineer overall just like an indie hacker and web3 uh enthusiasts and these are some places you can find me um a little bit about polygon before we start um in case you're not familiar uh so polygon's leading platform for ethereum scaling and infrastructure development we provide a bunch of different types of solutions if you've already kind of been dabbling in web3 you might be more familiar with like our proof of stake blockchain which was like our primary solution uh coming up in the coming months or sooner um I always have to figure out how to word that without giving too much Alpha um we're releasing uh several more kind of like uh products um we recently talked about uh zkevm which will be out very very soon so really excited to be talking more about that um in future workshops as well so kind of like going off of that right um a lot of different scaling Solutions uh like polygon as well as others in the space we talk about adoption and we talk about it through scaling through you know higher throughput through uh making um you know blockchain interactions and everything more scalable but there's other aspects of it too besides just like you know scaling on top of um eth adoption is easier um if I is a user can use your dap quickly and easily and we're going to break down what that means a little bit throughout the workshop and we're gonna do that through like different uh types of connections and ways that people interact with your app and the best place to begin is wallet connections this is the point of entry for like how a user is going to first interact with your dap connect to it and be able to perform any type of transactions no matter what kind of dab you have there's going to be some wallet connection feature on it so this is just a quick quote example of like a handle wallet connect function um not nothing too fancy um so this is just a handle wall connect um it's an async function um in this specific example this is how you would kind of connect to like let's say a browser injected wallet like metamask um so I'm pulling ethereum out of the window if you're a front-end engineer and you know you've um this is your first kind of foray into web3 you might be thinking like what do you mean pulling the ethereum object out of the window um so if you have like a wallet such as metamask in your browser it automatically injects an ethereum object into it and this is what's going to allow you to get access to things like the um account that the user has in their metamask connecting to it starting to perform transactions Etc so this would be uh like a basic way of grabbing information about the user and getting their address here's a quick demo of like how that would work in in real life so you just add a connect wallet hit connect wallet and metamask pops up um they choose whichever address they want and you're pasting the address onto your screen in the example that I gave before I was just console logging it out but in that demo I actually put it in some HTML and displayed it onto the page so it depends on like how you use that information and how you want to use it in your UI another wallet connect pattern that I see a lot of folks doing is you know taking this initial function of like connecting to your wallet and then let's say you're using a react I'm using an example from react just because I've been a react developer before popping it inside of like a use effect but essentially What's Happening Here is that this function runs right when this page loads or when this component on this page loads right another way to think about that if you want to like think about it like more of a framework agnostic way it's just like some JavaScript that's running as soon as you hit the hit the page please don't do this um so this is a tweet that I put out like a while back this is just a pet peeve of mine uh being asked to connect your wallet as soon as you land on a page is a terrible user experience I should be able to look around and decide if I actually want to connect to your application first and like nine times out of ten unless I know who you are and like you've like I specifically know who the developer is of this app I'm not going to continue using your app and a lot of people probably won't and what I really want to kind of drive home with this kind of like pattern is like what you're essentially doing here is removing the ability for your user or your customer to like give consent to actually um like use uh like connect to their wallet like yes they can go into metamask and like reject it right but if you don't have any further functionality for connecting again then how would they know it's like refresh their app to like reconnect um this is a bad user experience on that side because they don't understand what they're connecting to before they connect to it and it's it's just like you don't want something to just happen on a website as soon as you land on it right if you think about it this way if you just go to a website music starts playing a video just starts playing that is actually something that is um uh sort of punished by Google and like your Google search rankings if you do something like that um it'll actually hurt your like I think your SEO score overall and I would like to really drive it into you that you should view that the same way with the wallet connect while it doesn't affect your SEO rankings right now I hope one day it will so people stop doing it but it's really the same concept you don't want an interaction just happening on a website unless you're the one to actually begin that interaction so this is more of a philosophical technical thing coming together right and um the other side of this this is is like it really promotes bad security practices because if we're training um the like customers and users of our applications to just say yes to everything as soon as they land on it to start connecting and using an application are they really going to go into every single thing and figure out like what did I connect to is this like some nft rug or something like that or whatever um you know it's it's just not good security practice so definitely definitely please remember not to do this I see this a lot in past like hackathons where I have like judge projects um I've seen this a lot even in like real like production applications and it's it's not it's not a good user experience overall and there are some folks who are going to try to justify this with something called the three click rule the three click rule states that um apparently if someone once is on your website and wants to get to one specific thing some specific type of feature and use it if it takes more than three clicks then they get frustrated and leave uh there is no data backing this up whatsoever I've looked for it it doesn't exist um so if you do see that justification of like the three click rule even if we applied this role not all clicks are created equal not all clicks are like should be considered among this like fake role as I refer to it is because like if you look at like a web 2 like a web 2 application the first thing to do before going into like the actual app part is like signing in with email password or signing in with Google or signing up Facebook something like that right no matter what that's always been like the first level of like giving consent and connecting to an application in the case of web3 it is connecting with your wallet but the concept Remains the Same you have to get that consent first you have to allow the user to choose to connect first and that does not count among the clicks that it takes to actually Traverse through your application that is separate so we've talked about um some of the clicks some of the like initial uh connecting uh your wallet but now we can like dive a little bit further and deeper into that side of things once you're connected to your wallet sometimes you know they're on a different network maybe they were on a separate sort of um a separate dap they're on another Network maybe they're on ethereum Main net or whatever um and maybe your application is built on polygon Network and you need them to switch networks when they actually connect their wallet so getting your user on the right network is kind of like the next step in making sure that this um like ux is like as fluid as possible so sometimes when I go into adapt and I click maybe I'm on the ethereum main net but the DAP itself is on uh the polygon main net and sometimes the pop-up that I get is like hey you're on the wrong Network without giving me any information on like what network I should be on or what um you know how I can switch or like what if I don't have the network and I need to add it um a really nice built-in way within metamask is just like you have this pop-up that can come up that says hey this site needs to be on the polygon main net do you want to switch how do we get to this experience you can actually use the minims API documentation to have some really nice examples on how to use the window.othereum.request methods you can find this like I said on that docs um I'll also be sharing these slides out so you don't have to like scramble and copy and screenshot this but here's just like the method for um you know adding an ethereum chain and then like the parameters which just be like the chain ID RBC URLs and like the chain name Etc um once you add like this information and like make that request you get this pop-up on metamask and now like instead of like the user having to figure out oh what network should I be on um you're just automatically letting them know like hey we need you to switch click here to switch and you're good to so going a little bit further for wallet connections I showed you one specific kind of like user flow like a user who has metamask right but the important thing for you when you're building out your applications is to make sure you're not just focusing on browser wallets right so abstractions are really nice libraries are really nice there's a lot of really cool awesome open source tools that can like help you out um and this to make it easier so that you don't have to like do this gigantic big uh you know request function here so you don't have to like write your own handle wallet connect function and wrap it in use effect or whatever um some really good instruction abstractions to use that make a lot of that easier is using things like rainbow um Dash me the Rainbow Dash me kit um as well as wallet connect and I think Rainbow Dash mean actually has wallet connect baked in um so what that does is like it gives you just like this modal and like some functions that automatically allow you to connect not only to a browser wallet but to mobile wallets Hardware wallets Etc and these are great for just like being as inclusive as possible to different types of users if your goal is to like make sure that your dap is being used by several types of users you want to make sure that your you have the ability to actually connect to those different types of wallets um so that's where things like Rainbow Dash me and wallet connect will uh come into like really helpful uh be really helpful for you um and another um really good open source tool that like pairs but those are like the wag me react hooks I think they actually have like um in the documentation how you can use whack me with like wallet connect to um create a nice um connect wallet um uh functionality um and rainbow lashme is also like built using both wag me and uh wallet connect and again I just want to drive this point as much as possible so hopefully I'm very passionate about this point let your users choose to connect cool um now let's talk about this uh the next part of just like the overall um user experience uh for um using adapt and a lot of that is waiting if you've ever been to one of my workshops or really any Workshop from anyone that has involved doing some type of like transaction and a waiting for that transaction to be filled there's sometimes an awkward pause or in my case I sometimes try to like distract you and talk about something else but it's probably like a very not good distraction and you can tell that I'm stalling for the transaction to go through um but you know no matter how fast a blockchain is no matter how quick we can make it and um you know how how much we improve there's always going to be that little bit of awkward waiting time of like when is this transaction going to finish is it going to finish is there going to be an error um what should I do afterwards right um I want to talk about implementing what are called optimistic UI patterns um optimistic UI patterns are things you've probably already seen in like different applications in like the web 2 world um so think of it as like you know I I'm on a website I click um some link that goes to another page and that page has to then like get some information from some API and it might take some time for that information to come in right but instead of like making the user wait for that information to come in and then loading the page we pre-load the page with some sort of like skeleton some type of like loading spinner or feature or something like that I'm sure you've seen like different websites um some examples that off the top of my head that I know like if you're like an AMEX card user um if you click on like different things for your um and like this probably works on like several credit card um uh companies where like you go in you go to a page like you're looking for your maybe your transactions or whatever and there's like a skeleton page loading as the data gets filled um I highly recommend doing something like that you don't have to do something like so complex as like a skeleton but just like a little spinner or like a loading animation thing would be cool um there's like free Spinners everywhere on the internet that you can just like copy paste and put in um that are free to use so definitely look at um making sure that like your user knows that you are actually um that your app is loading something maybe waiting for something externally but your app knows that you know something happened and there's some sort of reaction that you're taking so let's take a look at one of the ways that I implemented this in one of the very first steps that I have I had ever built so this is a Pokemon battle between a Charizard and a Lugia so the smart contract that actually Powers this is just like keeping track of like their HP and um it has like an attack feature um so what I'm going to do is I'm going to click the use flamethrower button um my meta Mouse pops up I pay some amount of gas I hit confirm and you'll see that now there's an animation of a Charizard using flamethrower um on this Lugia and the reason I'm doing that is because I am waiting for the in the background for this transaction to actually finish right but I'm letting the user know that hey you clicked on use flamethrower Charizard is now using flamethrower on Lugia right the user your user actually knows that something is happening something is going on and that's that's the main thing that you want to do when a user clicks on something like is maybe it's a mint nft function maybe it's um you know sending some tokens to someone else whatever it is let the user know that something is happening and let's dive into that a little bit more um in terms of like the code for how something like this would be set up um this is just some basic boilerplate code um get grabbing some contract address contract API for whatever I'm connecting to um and then this is this example is specifically using ethers um the npm ethersgs library so I'm connecting to my Lugia battle contract and then I have an asynchronous function called attack and um what I want you to really focus on here is that with asynchronous functions there's all of these await keywords right and in between those await keywords is where you're going to be able to implement your most crucial kind of like ux and UI updates so here I don't really have anything I'm just like awaiting I'm attacking and then getting the current like HP for each of the Pokemon but you in this example uh what I did was like I in like my UI I made sure that while we were waiting for um the transaction to go through that the animation of like the Charizard was um starting up right so that's going to be how you um actually make sure that your user knows what's going on in the background or at least that something is going on in the background so the main takeaway from that is just like distractions and updates are your friends uh distractions like the the little Charizard animation updates like letting your user know like hey this transaction is being mined a really good example of this and like this is um from uniswap so I'm on uniswap I want to change one Matic let's say for like usdc um and you'll see that fetching best price thing was a little loading spinner it was waiting for some asynchronous thing to like happen which was just like getting information about what the current price is um and I had it had the little loading spinner now I hit uh Swap and a little pop-up comes up that says that like there's we're waiting for confirmation we're waiting now for the user to do something so it gives the user like some like action that they need to take so we go into metamask except um everything you'll see a little pending um animation on the top right and you'll also see that we let the user know our unit swap let the user know that the transaction was submitted they can view this on the Explorer and eventually again we let the user know that everything was updated and um the the Matic was swapped for usdc so again this comes back to the whole concept of distractions and updates or your friend uh distractions can be Spinners can be little things um just like letting them know like hey this is this is going through don't worry about it um and then showing them the results of each action that they take so in the case of uniswap it was more just like you know letting the use or know that they need to go and click something in metamask after they've clicked that cool transaction has been submitted you can check it out here that we could they gave us the link and then eventually we got that little toaster pop-up that showed us that yes um the the swap happened everything was good right so the thing with a lot of um you know uh apps built on like um in web 3 is just like we're not really giving the user enough updates we're not telling them what's going on in the background and that is like key and crucial so like letting the user know that you know everything that things are happening um because people have short attention spans if they click something is happening something could be happening in the background they just don't know something is happening right if they don't know something is happening maybe they get disinterested and leave your app maybe they start clicking again and who knows how many times they click on some type of transaction um so you've got to make sure that you're giving the users that feedback at every kind of Step that you're able to provide that foreign driving this point home of like your distractions and updates again they happen during and after asynchronous function calls now kind of going beyond the front end what else can we do to make a better user experience um using polygon to supercharge your dapp's user experience one thing that I really like pushing a lot for better user experience is something called gasless meta transactions so um this is a little uh poorly done map of like how uh you can Implement uh gasless transactions and we're going to be breaking down each of these um individually as well but it goes into the whole um you sign some transaction um and there's an EIP that allows you to go and create like a structured signed data for this you send it to something called a relayer which is just some service that where you can like Lo preload some amount of funds to um essentially pay for the gas for the user so you you sign you sign some transaction that information is sent to the relayer the relayer is then able to wrap that request into an actual transaction and send it to the contract so now you're able to let's say like if you want to do like a free nft mint you're actually able to like cover the gas costs for the user and that creates a really good user experience especially for people who are brand new um to web3 so that they can just like quickly use your dap and just like possibly just like look around and get used to it like the whole concept of like doing something like a 30-day free trial or something like that like that exists in the web too doesn't quite exist in web3 but this is one way you can Implement something like that like a try before you buy type deal so coming back to EIP 712 which was the first um sort of um signed transaction thing that I mentioned um inside of um like uh in like the ether's documentation a quick way of doing that is like with this sign type data method um so from a JavaScript front end you can create the signature and um it's just like a Json object you put whatever information you want into it and you send it to some HTTP endpoint provided by a relayer relayers um can be found through like opens Upland Defender uh by economy ethereum gas station network and at the end of the day you're just making like a post request to some endpoint that they provide you and um this was this is something that is really awesome and well implemented uh by lens protocol so lens protocol allows you to do a lot of like their social media kind of stuff I like liking uh replying and interacting with folks it all gets like stored onto the polygon blockchain but you don't have to pay any gas for it because they're using something like a relayer in the background so that you don't have to worry about gas which creates like an actual really good user experience for like a web 3 social platform so again these are just like you know different things you can do to improve ux it's not just front end it's also kind of like the um the back end layer and different things you can do uh to make the overall user experience better um something like gasless you know meta transactions are economically viable on a solution like polygon um doing that on like ethereum mainnet will probably get prohibitedly expensive especially if you're like you know um trying to pay for a gas up front and uh yeah just um thank you again for attending uh this talk uh just leaving some of my information up here again if you want to come find me and uh if you enjoyed this talk uh please let us know you can tag us on uh Xerox polygon devs or tag me on Twitter at uh Rawhide codes uh thank you all I did see just a couple quick questions um so do you have a library recommended for svelte I'm not too familiar with svelte but I can definitely uh take a look at some and uh drop them in chat if I find any uh yep lens protocol uh was uh something that they enabled castles transactions with um while adding a connect wallet button to the website like a home page how do I know where the user has already connected to the website without calling a connect wallet in use effect um to know if they've already connected to the website um so if you use like you know certain libraries like um you know rainbow kit or like wag me hooks they have like built-in hooks that allow you to see if like you know users has already connected before um so I think generally I think most people probably won't connect you know manually I guess probably through metamask um so I I think that's probably like an edge case that may not come up too much but um yeah there are uh certain functions in like those libraries that'll help you out with like figuring out if there is a connection or not uh but yeah cool I think uh that looks like all the questions so thank you all um and uh really looking forward to seeing what you all built during this hackathon awesome thanks Rahat um for your time to do this workshop for Ethan line uh it was super interesting I was a side of like things that even like I haven't seen before so uh loved it um and thank you to the rest of you for tuning in um the workshop recording is available on YouTube for you all to reference back to at any point throughout the next month and if you have any questions um feel free to reach out to Raha or the rest of the polygon team um they're also available on the sponsor polygon Discord channel in um the youth online Discord server so yeah uh with that being said I hope everyone has a great rest of your day