WalletConnect 🛠 WalletConnect Quick Start - Vanes Mercado

foreign [Applause] [Music] thank you for coming out today my name is vaness and I'm a developer Advocate with wallet connect thank you [Applause] for today's Workshop it's going to be pretty quick and easy we're going to go ahead and show off our new web 3 modal version two and we'll get connected and we'll be using some react hooks so let's go ahead and get started foreign so for those who don't know wallet connect is a Communications protocol and we connect apps to wallets we have end-to-end encryption frictionless ux easy integration and multi-chain support we support any wallet any app any chain so to get started we're going to go ahead if get a project ID and we can do that by creating an account with developer Cloud so if you don't already have an account you should be able to scan this QR code and this will be kind of like um you know you can go ahead and start coding too so we want to make sure that everyone's running locally at the end of this with a full-on integration with the modal so I'll give you all a couple of moments to get that if you don't already have it and you can also create an account using your ethereum address so you don't actually need to create it using an email and password foreign so we're going to go ahead and make this example using react so to get started we're going to go ahead and create the react app you can do that by using your terminal and importing or typing in npx create react app name your app whatever you'd like we were calling it wallet connect demo and then the Imports that you'll want to use will be web 3 Act and web3 model ethereum since we will be making the example on the ethereum chain and then we'll also import ethers the QR code over here is our GitHub to our model 3 version 2. so if you want to take a picture of that you can actually also follow along with the docs along with this presentation so to get started we're going to first import web3 modal so we have an example here in your index.js we're going to first start with importing web3 model from a web 3 modal react and then we're going to configure project that project ID will be that same ID you just created from the developer cloud we have different theme options we have different accent color options as well and this is the ethereum object where you can go ahead and name your app and to actually use this web3 model you'll actually import it and use it right below your consuming app so it won't actually wrap like in the past with our old modal so that is something important to note for the next step you can go into your app.js file and you can add in that line import connect button from web3 model react and if you just return the connect button modal you should be able to see a view very similar to this you should see your connect button and when you click on it you'll see this new modal pop up and that's our new model that we will be using so we want to be able to actually be able to pull in some information from the user when they when they authorize using that connect button so we're going to do that by using the use account hook and a couple of things that we can pull out from that is is connected which is just a Boolean which will return true or false and then the address and so for the following example we're just going to create a ternary option so if the user is connected then we'll be able to see their address if they're not connected we'll be able to render that connect button and so this is kind of an example of what that should look like so we get logged in and then you can see your account address pretty simple but we kind of want to go a little bit further you know we've got ens names these days we've got avatars that we want to show off so we also have some um hooks for that and one of those hooks is called use ens name and so very similar to what we did with use account we're going to do the same thing with use ens name and so we're going to destructure it destructure the object take pull out data and then pass in the address which is the user's address and we just kind of updated the return statement here so we should be able to see their name their ens name as well as their address so that's kind of what it should look like but if you're doing this live you might notice that there's a moment where it takes a while to load the ens name and you probably don't want to have that because that's not really the best user experience so we're going to add and make a couple of adjustments here we're going to create a new file under a new folder called the data.js and we're basically going to kind of move everything that we had in our index or in our app put it into Data and then we're going to also now add this new property called is loading and we're taking that from use ens name hook and so what that will do is if it's loading then we're not going to render anything we're going to just render loading so then the user doesn't actually see their address first and then they have to wait at you know that moment until the loading is complete and then this is the updated app.

js so instead of having most of our return statement now we're just passing in that data component and so this is kind of what it should look like upon connecting so you have that loading State and then when it's actually complete and lastly we can't really have the full user experience unless we can also give them the option to sign out so this is where we use the use disconnect hook so we'll go ahead and import that in the data component and very similar to the other hooks as well we'll just create a new const and call that disconnect and then we'll add our button so right underneath address we add the new button we give it the on click Handler which is going to be disconnect and this is what that should look like you get your button once the user clicks it'll take them back to the is not connected state which will render that connect wallet button and lastly if you have any more questions you can take a look at our GitHub which will also have other react examples if you want to go ahead and play around with those so that kind of concludes our Workshop I know we went kind of quickly but I really wanted everyone to have a chance to really play around with the code and have this modal working so are there any questions or are there any places where anyone's stuck you said structured I'm not too sure we do have our engineering team here so I'm going to kind of look at them for support here and see is that something that we are able to do at the moment right up here new blockchain um well a couple of things so we're gonna we're going to need wallets that also play with those blockchains so we need to have the wallet support first and then we can have the DAP um integration as well are there any other questions great um is World coin compatible with wallet connect with the version one protocol or the version 2 protocol the two that's something that we can look into I haven't heard that we are or not compatible with worldcoin but um if you want to follow up with us at our booth after this I'm sure we can answer that question for you yeah thank you all right well thank you very much for joining us today um and have a great hacker weekend thank you