WalletConnect 🛠 How to Connect your Dapp with WalletConnect

[Music] [Applause] um thanks again for everyone who has come uh if you don't know what wall connect is wall connect provides you with the ability of connecting to multiple wallets uh remotely and not just have the browser extension so if you're familiar with metamask or even with a mobile app that has a little dab browser it allows you to inject a provider that will allow you to have the wallet expose some accounts and then those accounts are used for you to know which addresses the user has and with that you can actually sign transactions and messages right so that's kind of the core concept from it and what WOC connect has enabled was basically to make it more interoperable and expand beyond the world of just the desktop browser or even the mobile dab browser and just have this note connection be anywhere the first experience that we created was with a mobile wallet connecting to a desktop computer and you would have complete separation between the wallet and the dab so we basically created an endtoend encrypted Channel or end to end encrypted chat that allowed you to have to any wallet to connect to an application and that would look like uh for example if you go into our registry we have more than a 100 wallets like you can go through all all the pages in here but even if you choose a dab like Unis swap uh you would have the ability of actually connecting your wallet and when you go into the wallet connect you actually pop up this QR code and you bring one of your wallets um and you scan the QR code you go into the QR code scanner and as you go to the QR code scanner you get prompted to connect your wallet into the application it knows which website it's connected to and it's asking you to approve it so when you actually do that from your phone it sends a message back and that message sends the accounts so essentially while is a messaging Network um with a very specific purpose so let's say we wanted to buy like 100 inch um and then it's going to fetch the best price and then you confirm that you want to swap it on my phone I received the message this needs to be approved and it happens immediately and in order for this to happen you have basically service in the background just relaying encrypted messages and these two parties are talking to each other so in this case I'm actually going to cancel and you see that the swap has failed because I canceled there's more than a hundreds of dabs and0 wallets right now supporting wallet connect but in order for us to actually Reach This adoption we had to make the experience of connecting your dab to your wallet much easier and one of the things that we created is this open source project called web3 Model you might have seen this screen before uh it's I would say a very popular screen nowadays and this drove a lot of the adoption for wanic because it did one thing that nobody was doing which was how do I allow the user to select which option they want everyone just made the Assumption everyone's just going to use metamask or use like a dab browser but then I actually wanted to make it easier for them to actually select wall connect so I created a library called Web model which in a sense says it's a web Tre model because it displays a user with a model to select which web Tre provider you want so this will be compatible with either web3js or ejs depending on your preference personally I would recommend ejs nothing wrong with web3js but ejs is really really good so it will save you a lot of time um and how does it work you go into npm and you install web to model and when you install web model then you have to see the provider options section the reason for this is because when you add to your project you're going to have this Library web model that you can even con figure which network you want there's some option out for the provider and everything and then this um this part here when you say connect it abstracts the user selection it will handle when the user is displayed with the model it will display that for you it will handle when the user failed for example they went through the process of connect to metamask wall connect but for some reason failed it will throw an error but at the end of the day it just says here's your provider and then you could take that provider and inject it into web 3 or ejs so I have actually a example here of uh source code uh that uses uh web modle it's literally the react app like boiler plate with the button that says connect can you imagine what it's going to do it's going to display the web Model Magic um and so this is interesting right because then you have the option here of actually selecting metamask or I can cancel it and I can go into the wall connect and you're abstracted from that whole experience and then when it actually is successful it will just replicate and say oh look you're connected and there's this address here and I have this button authenticate which signs a message and then you will see it pop up on my phone um which actually shows like this one wants to sign a message and then I actually sign it and it will this is such a simple example that the signature is here you know and the signature is here so basically I've been able to connect my wallet to this and I can do the same experience on um on metamask as well actually I have to clear storage Bo boom all right so we repeat the same experience with metamask sorry ah because metam musk is like unlocked don't look at my password all right metamask and it's authenticated and then you actually see the message and it signs and web to model works exactly the same so how would you go into the process of doing this you the most important thing to consider is that web model is an abstraction but then we don't want when you install web model that all of the 20 providers are in your app then your app would be like 20 me bytes big like you need to actually have some consideration that they need to in be installed separately so we made this ability of actually configuring which providers you want and sometimes providers have options of their own that need to be injected so the first step that you need to take is actually uh import web model that we saw that you need to install and in this case we're going to support metamask and woning the reason metamask doesn't need to be configured is because it's a browser extension so it's already present in the user uh and it will web stream model will detect whether metamask is there and if it's not there it doesn't even give it the option so web Tre model abstracts that logic for you and you don't need to configure anything for wall conect you have to install wall conect team provider and then from the wne provider you can create a web model object uh which you can see here and you I passed the network to be mainnet cache provider cache provider is an interesting feature uh that has become more and more popular where you actually cache the user selection so next time the user comes to your app they don't need to select that model over and over again it will just default to the provider that they used before so for example uh if you use uh metamask then when you come back it will use metamask because it knows your browser has been to metamask and in the provider options you basically put the provider that you want and you pass it the package so you have to inject the package this is what makes it like a lighter library because you only install webg model and wallon provider side by side and in the case of wallon you actually have to pass like an inur ID and here I actually use like environment variable which is a good practice guys do it more often and but it's a hackaton so you don't have to do it um one of the things that's really important to do when you actually um integrate with this is that you have to listen to events like for example if you're familiar with the EIP 1193 uh if you're not then I'm going to actually teach you about it uh the reason web3 model is actually possible is because there's a standard called 1193 or it provided JavaScript API that defines that every wallet provider will follow this API so web3 model was able to support more than 20 providers because we all agreed how the providers are going to look like and these providers uh have a lot of definitions and everything but you know what in web model we explain it more easily uh we just say that you have to use these events these events are very important uh the first event shows when the accounts has changed like it's a very common pattern for eum wallets that the user can select which accounts are available to the application and if that were to change after the connection then you can actually listen to this event and you can see that the data that it's passed is an array of accounts and the second one is the chain change which is very useful especially in the pattern of um multi-chain evm and everything because if you want to use a layer two you tell the user hey can you switch to optimism or arbitrum or something like that and it will show you the chain ID and you can update your app and say okay now we're on this chain and then you have also connect and disconnect in the case of in the case of metamask you don't actually have that but like some wall wallet providers use remote connections even coinbase wallet has this so in case there is a disconnection you actually have this event happening uh and you can handle that State uh you can even have like a I don't know like a little red indicator oh your wallet is offline and then your wallet is online so it's a really good pattern to follow there uh but the most important um things that you have to consider is that uh when you get the provider you can just injected into the the web TR that you want so there's sometimes when you're in a hackaton it's good to just write vanilla JavaScript and not have a react app we also have an example for that um so you can actually follow the vanilla JS example and you can see how it actually handles this in the case we have have like w conon formatic you still pass the provider options here everything and you can see how it's used in web tree where you can get the chain ID and then from the chain ID we even have this library to get the name of the chain and everything you get the accounts and then you have to listen to the actual changes uh for the accounts change change there you go W so here see like you have to provide their own accounts change fetch new account data chain change fetch new account Data Network change uh Network change was deprecated do no longer exist um but now you still have to listen to this so these are the most important things uh when you're connecting to a wallet uh also another thing to consider that I think not a lot of people consider is like the disconnection um because while while you you can't really disconnect in um in metamask you can actually disconnect on um on wallet connect and other providers like coinbase wallet so from the DAP you can actually have the user like block that connection and not have it connected anymore and the way you can do that is by calling provider close and you if you're using the cache provider you actually should clear the cach provider because if you're caching the provider and the that was just a page that reloaded then it's important but if the user specifically disconnected the provider then in that case I would recommend that you clear the cache provider in that point and honestly that I think that pretty much covers all of the basics uh I think it it's also useful to review the documentation for example on wconnect you can go to docs. walc connect.com go to quickart if you're building a dab then you go here you use the web Tre provider for your web gjs or ejs and we tell you how to install it and and we have a setup that can use both infura or a custom RPC where you can use like for example Alchemy nodes or some X die or some arbitrum you can use whatever you want with wanic and you can customize it over here you enable the provider this is what web model abstracts you from so you don't need to do this part but then obviously you have to do the events for 11983 and then you have the methods to request um what I was going to say is that like there's some particularities about the ejs and web 3js so web3js existed before and worked in a very specific way so they actually have a much cleaner integration here but then when you use ejs you have to make sure that any web tree model provider needs to be wrapped as a web tree provider before P being passed into one of the contract classes or wallet classes um yeah yeah I would love to hear questions how do you how do you to show the model before the model yes oh so for the user right so the model is very abstracted so when you actually go into let's go into the documentation web model this model is displayed uh in this part webam model connect so you can have your app you configure your provider options and you instantiate the webt model object and then whenever you want to get you could assign this to the connect button the connect button that we saw in the react tab would call this web Tre model connect and that would open the model for the user and the user would do the whole process so different providers will have different process of how they authenticate but once it's finished and complete then it would return you an object and it would just say here's your provider now you can actually go into web togs or ejs and just add it in so this process will open and close the model for you and it will also handle the success and failure states of different providers and you just need to you know build your dab which is your job you know the experience of web model is really developer Focus because we want to make sure that you have to think less about things that don't really matter there's so many web Tre providers out there like literally when you see C provider sections you go into provider section here there's all of these options and then inside for example W can I a coinbase wall like you open it and then you have like oh for w connect you install the web model and then you have to configure it like this and have to pass the infer ID and then it shows C full options for wconnect web provider in the case you actually want to go to wconnect documentation and configure even further but this is like the basics for the wconnect provider and if you were going to go like with a coinbase wallet then it has like a separate document that actually provides you here with how you would actually do it but they all follow the same pattern of you have to install a extra package inject a package into the provider options of web model and then pass some optional or required parameters yes sorry to ask about web3 modal again but uh is metamask the only extension based wallet that's automatically populated this is a good question because actually it has nothing to do with that uh it has to do with the fact that it's an injected provider and if you want to dive into source code we're going to do it so there is actually when I say metamask I actually mean injected providers we actually have a here a massive list of injector providers metamask just happens to be the first one that existed gnosis save back in the day actually had the uh provider that was a browser extension that would actually inject Nifty wallet also exists that is an injector provider so that first option of the injector provider would actually be configurable um automatically displayed sorry I me based on the injection so if you go to I don't know for example status wallet and you open the da browser the web stream model will detect it and just change the logo to be status but 90% of the times it's metamask that's why I keep saying metamask because it's easier but actually if you go through there's actually a lot of injected provider wallets out there and it will change the logo based on the one that's available to the user so that's why it's automatically there because you could think of it as like injected wallets are user installed and these are develop and the other ones are Developer installed so it's up to you to do the configuration rather than the user have to do it themselves yeah for example you see Brave the browser has their own browser extension and they also have their dedicated logo so when you open this model over here instead of saying metamask it will say connect to your Brave wallet and it will show the little Brave logo other questions there is an example app with the list of all providers available as a working G yes do you have something on gab or somewhere so to rephrase your question is all the providers options in there configured into the web model actually I've never done that it will look crazy it will it will it will start scrolling through it yeah yeah it will scroll it will start scrolling so I I would not recommend that honestly I I think like at the end of the day as a developer you have to think what's your target user and you have to kind of just pick like for example I personally picked this because I found this to be a good combo you have like the desktop us users and then you have the mobile users and then you have like the users that don't know what the wallet is so they can just use tourus which now it's called Web tree off they're downstairs they renamed I have to rename this um and then you have coinbase ball right like so this is like very popular options so that's the ones I usually configure but I've seen like some of them with like eight providers at once you know and honestly that's fine you know it's up to you guys to develop it oh yeah hi do you also have like some option for uh analytics like tracking which wallet gets connected to M or something we don't but we actually thought about that that would be actually a very cool feature to have uh the reason we don't have that is because this isn't a very open source project there's no backend there's no like even though it was developed by wall connect like this is a completely separate thing that's why it's so popular because it's kind of like free open- source Libra like nobody owns this nobody's tracking this there's no analytics but honestly you could you could just like after the web Tre model connect you could just like look at which web provider you got and then you just like track it yourself you know in theory you could do that but it's not built in yes does it work in F so this is a very how do I say isolated Library it's technically built in react but it should work anywhere because it's rendered completely separate you could have like a VJs app with this webam model and it would work so yes I would say it works andv I've never tried personally but I know there's an example in vit and there's an example in angular there's an example in VI and felt I right but it should work in PHP would work right yeah any other questions what if you what if you have an injected wallet that is not on your list that's a good question it will show you like a little logo that says web3 and just says connect to web3 wallet so it kind of just like defaulted to web3 wallet it has a it has a fall back we injector provider but there's a huge list it's very unlikely that happens unless you build your own yeah yeah yeah anything else can you pass the mic yes hi um general question does it have to what it connect does it have to run in a browser or can it run outside the browser no uh yeah because I I was saying if you're Chris because we had a similar question in the boo before uh yes wall connect like webam model is for browsers but wall connect can run anywhere like uh web3 model it only runs in browsers but Walla connect provider you can run it as an electron app as a react native app as a IOS app Android app uh literally anywhere honestly we even had some people who develop like a flutter plugin but it wasn't actually developed by us but I we posted on the Discord chat if someone wants it yeah so for example if you want to do like a nodejs like I remember there was someone who did a CLI uh terminal that would like connect the wallet with wallet connect and it would just like display the QR code in terminal and it would work so yes the the JavaScript library is what's called isomorphic so it will work whatever any other questions sorry just the language library is not is obligatory JavaScript or so talking about wall conect specifically um the library that I showed is a JavaScript library that will run in react n electron node.js browser but then you have the cotlin library which runs on Android and then you have the Swift Library which runs on iOS and there's even a C library that runs for Unity uh and then there's the flut one uh for no the dart one for flutter so if you thinking about another one no there's no more there was someone who did like a one weekend progent and WR it write it in Rust uh but it was not maintained for like 3 years so I wouldn't recommend it so uh how does the flow differ uh on a mobile app and how can you optimize that part so you're saying like what it would look like if web3 model was on a mobile app I mean it would look like the same and then you would have like the user selected and and for example for wall connect actually I can try to emulate it let's try to emulate that uh give me a sec sty well yeah it's responsive all right so we have on the left uh Unis swap on mobile let's refresh it just make sure it detects on mobile we're going to like change actually I might need to do a hard reload you know what just go full in cogn there you all right now it's why is it still there we're gonna go Safari guys okay it's not there like wanik is very persistent uh actually this is terrible here I just need to go into here no wipe that actually that's very annoying how do you disconnect from here oh it's this guy because we used metamask before so I kind of wish metamask had the disconnect button you know what I'm not going to use this one I'm going to use this one okay Bo there you go all right this is how wall connect would look on mobile uh wall connect doesn't use a QR code on mobile because it would be impossible so the way it works is that you have uh these deep links uh which will redirect you to the specific wallet on iOS and on Android this will actually look different with just like a one button because Android actually has a a user prompt to select the app and yeah and then you know like for example if I were to emulate it here uh the URI actually just shows right on the right and you approve it and you would be able to do all the transactions because the QR code just has like this minimum information to actually establish the connection and that can be represented either as a deep link or as a QR code so yeah uh that that's how it would look like on that side any other questions well then oh sorry is it easy to use uh wallet providers instead of the alchemy One when you want to after you connected the wallet when you want to go some um smart contract functions so the question that we have is specifically compared to like Alchemy or like infura right so H there remember there was this part here where I showed on the documentation for wall connect that you can customize your RPC end points that's when you actually have basically web uh the web provided for wall conect proxying to your favorite RPC wconnect doesn't actually read smart contracts directly you choose who actually reads the smart contracts uh by default we had infura always but then we added a custom RPC and you can put like your Alchemy end points so it will format the transaction reading from Alchemy or INF fur or quick node and then take that transaction and send it to the wallet so only when the transaction or the message is ready to send to the wallet then it would actually go through wallet connect protocol right so you would have the exact same performance as if you're connecting directly with Alchemy because we're just proxy uh to the wallet before going to sign so I have an app that logs in with wallet connect but uh app Apple rejected it because they don't like the flow of the user being taken out into metamask and then coming back in is like a way to amend that problem wow that's actually the first time I heard that actually you know the thing with apple is that they have guidelines but then they kind of just like pick and choose like someone to bully like because honestly I don't think that that should have been a problem because there's literally wallets like trust wallet that they had to remove their D browser because Apple didn't like it and then they just used wallet connect instead and then they were like cool with it so I don't know what particularly they were not liking about that but if you go to the openc app on mobile like the native mobile app they use wall connect to connect it uh zarion also uses it uh zapper uses it uh even Twitter with their new Twitter blue feature of the nft they use wconnect so if they didn't reject Twitter is because they have favoritism honestly option where you just can put your uh wallet and then they loog them in I think my guess was that for that reason uh they allowed it because there's another way to log in yeah but then you have other apps that don't do that so I mean add another option for like just adding the address maybe they will pass it sometimes you just kind of have to play ball with them you know to just get it approved past the App Store and like you know sometimes they live like a scam app but they don't leave your app like you know it's not perfect system all right guys I think we covered pretty much all of it and thanks a lot for all of your questions I have some stress puls because it's going to be some very stressed times ahead of you for all the hacking and like late submissions that you guys are going to go through so please take them um yeah and thanks a lot for coming and I hope you guys use wanic if you have any questions please join me at the booth on on the other side of the venue and I'll be happy to help you guys thank you everyone [Music] [Applause]