WalletConnect 🛠 Quick Start for WalletConnect V1 and an explanation of WalletConnect V2

[Applause] [Music] hi everyone uh thank you for coming to the welcoming workshop i'm not i this workshop is just a quick introduction of how to use swallow connect i'm first going to do it in english and then if there's any questions i can also do it in spanish again uh just don't have that uh so i'm going to start so while connect is basically a remote signing secure signing protocol it allows for easy integration with between wallets and and apps by using a qr code basically allows you to sign transactions from your wallet without your private keys ever leaving your wallet the the main integration point with wallop connect is with this qr code and we have we provide a specifics a pacific um i'm just going to skip this we have a specific um application uh or package an npm package that you can use to get started with walla connect this is the web3 model and basically it's just a single provider that you can see here in this image that gives you the ability to either use metamask wallet connectors coinbase it basically allows you to use any web3 provider with just a single npm package so if you want to develop a dap that is enabled with walla connect you would use this uh this npm package let's just go through it so this is the the package that you need um so this if you already have a dap a website that is already set up all you need to do is just to add this dependency for enabling the web3 model and then let's show you how you can get started with so this is the the easiest way to get started with the cure with a qr code pretty much by setting it up with this uh object you can see that in the object we got with three model and then we pass it an object parameter and we have the network main net and you need to get a even fewer and if your provider uh and if you're a project id and just to repeat this is just for version one of all connect i should have mentioned this earlier version one of all connect is the the current most stable version of that we have right now and it's the one that you're likely going to have the easiest time with uh the the from our perspective the bad things about version one is that you can only use for evm chains and um i'll go over v2 later but this is just if you want to have a working dap we recommend that you use v1 for now um once you have the the um the web free model initiated you can do the dot connect and this will allow the user once they click on the connect button to it will display this four options and then you can just select on the wall connect option that will display to you a qr code that you can see like here it will display qr code you can just scan with the wallet so while developing adapt with using this web 3 model you will get returned this provider object you'll get given this provider object this is a traditional provider object that you might find in a lot of dapps that you use and this provider object gives you um basically some events that you need to subscribe to just to get an understanding of when the user changes in a wallet or when the user uh changes the chain and it's important to follow the the event types just to have an idea that you know what to expect and so we recommend that you pay attention to the eip1193 stand event types and this is what the provider object will will um uh be following the standard that's going to be following um so sometimes you want to quickly test with one wallet and then you want to disconnect it's like okay you know i want to i want to test it with another wallet we recommend that you also clear the cache just to make sure that you have a complete uh clean session because sometimes when you reload the web browser i mean the website you're still going to have the previous account saved in the web in the web3 model and so it's because it has a a browser cache for remembering the previous accounts that it interacted with but for development purposes it's better to disconnect and also clear the cache provider just to make it easier for you in your lives and don't have like a laggard accounts left over and that might interfere your development process during this hackathon so this this is the same package right you can you have at the bottom left you can see all the different types of providers that you can that you can use we you have wall connect you have coinbase wallet uh the web3 object or like metamask um this there's a big list there you can see um what sure uh if anyone wants to scan these stocks i can you know now now's the time there's more qr codes at the end um so yeah so just to repeat the easiest way to interact with while connect is to first use this package this web 3 model package that gives you this react this interface that you see on the left on the left that has these several options and with these options you can have a provider object that allows you to either send transactions and send and request information from the wallet i recommend that you look at the docs so you can understand the full scope of features that this web 3 model package can can give you for developing your dap um here's a very good example repo it's basically a a quick start for a dap and it has the web 3 model enabled and yeah this is like the easiest way for you to get started with wall connect okay so everything before here was for version one and i want to be clear that for this hackathon that version one is the easiest way to get something working for you now for we have also a version two recently that we just released and we're trying to push it more because that's what we're the direction we want to take the the software the our our sdk right now the version two wall connect doesn't have a web free model so you would have to fork one of our existing example repositories i'll show you later and the only api that's supported is the sign api so it's like you can sign for transactions and you can the wallet can respond right now these are the wallets that support version two um so this is a good list in case you want to be testing them just to have an idea because not all wallets currently support version two of wall connect we have a a website a react wallet that you can use for testing purposes so if like for example you actually if you find something that's not working for you you can go to this react dash wallet.wallowconnect.com and that should provide you a a very simple browser based wallet that you can then uh use with well connect version two and then on the right side you have a react uh app that is using welcome connect version two at this at this domain react dash app react app.wellconnect.com um so just to be clear just to repeat what i've said like these are some wallets that already have integrated wall connect version 2 and so it's not all of them just so just a specific list but if you find issues developing with these uh wallets that that's on this list we also have this react wallet that you can use for for um version two uh another important thing for version two is that uh we have a a project id gateway race that you need to use to set up your your um your uh your provider you'll see in the docs if you go to uh in the docs website while connect you will see the instructions of how to set up a version two while connect client and it's important that you go to to set up a project id so you have to get a project id before anything else for version two this is indifferent this is different to how v1 where we don't have a project id uh on the other hand um version two we do require a project id and you know recently we just released this new feature with sign in with ethereum uh just recently for our own website so it's actually quite easy like you just have to if you already have a version one of wala connect you can scan the qr code and you can basically create an account and get a project id without email just a a theory matters so you know please try it out and we're quite excited about just this feature um yeah um so on the first qr code the v2 websites this is the repository which has there's a lot of qr codes here it's probably a bit too crowded for this um so this has all the information you need to get started with version two um for v2 for version one two and also um the whole repository our whole organization yeah so that's what i have for now um any questions i should answer or any curiosities go ahead yeah so yeah so just to repeat the question uh the question is like how do you uh do a request for a transaction and and the way you do it so both both metamask and wallow connect would be providing we'll have this provider object and if you look at the our documentation for the web 3 model should i have the qr code my band yeah so if you look at the comment documentation for the the web3 model you will have you have some quick starts on how to request for transactions and the the nice thing about the web3 model is that allows you to use both metamask and wall connect at the same time so it's the user choice so you can request a transaction and there's examples on how to do this in the docs that are here yeah so just uh if you have like if you want to test different evm chains uh you have to pay attention to listen to the chain change id uh event so like if you want to listen to like for example polygon mumbai or some other evm for version one of well connect like some evm chains um it's important to pay the wallet initiates that uh change request so the wallet sends to the data it's like okay i need to change the chain id and then you the app that is with using this provider has to listen to these events for the weather chain change so this is just something important if you're using multiple chains for development purposes i the metamask mobile wallet is good the rainbow wallet is also pretty good but you know there are a lot of are there's a lot of wallets out there that use well connect and you know just use what's your what's best for you um yeah any more questions and you know i could try to do this again in spanish it's not going to be that's good but uh you gotta try in spanish okay um [Music] is [Music] the [Music] um [Music] um [Music] um is [Music] is he [Music] um a [Music] a repository uh oh you