Family 🛠️ Building with ConnectKit

[Music] hello everyone and welcome to the LFO family Workshop building with connect kit joining us today is n dbit who will be taking us through this session and with that I'll pass it over to n to get the session started all right yeah so thanks everyone for coming through today or if you're watching this later thanks for stopping by uh today we're going to be just looking at connect kit and connect kit is a really simple and polished way to kind of have a wallet connector set up with your app a couple of things that it would be comparable to are web 3 model from wallet connect or um something like rainbow kit and it actually integrates wallet Connect into connect kit so you kind of have the mobile functionality and all that ready to go um a couple things that kind of set it apart are its customization and how easy you can design and theme it and that's going to be some of the things that I'm going to be going through and then I'm going to walk through building an from scratch that just uh implements authentication or a wallet connection with the with connect kit so this is um basically an example of kind of what that model looks like you've probably seen this in a lot of apps out there because it is one of the most used wallet connectors out there so if you've kind of been in web 3 you've probably stumbled upon it you know at some time um I've tweeted about it a few few times in fact I just tweeted about it yesterday if you follow me on Twitter I was kind of showing how you can you know theme it or skin it in different ways in in this example I was kind of going through a basic example design and then just swapping out the colors to be matching famous color schemes so I did slack Chicago Bulls Reese's and a couple of other ones in the past and it's really simple to do that as we're about to kind of see here so some of the features is that it is typescript ready you know I think everyone in at this point if you're building full stack is probably going to be wanting typescript for the most part um it it works on all devices so you don't have to worry about writing any specific code for mobile the ux is really nice a lot of people think it's kind of like the best ux out there for this type of thing um we enable you to customize the chains that you want to connect to it has a lot of pre-designed themes or it's really simple to theme it skin it yourself to match exactly what you would like so I think a way to stand out from everyone else's app is to not just use a default theme that's given to you from one of these libraries but to kind of spend literally like five or 10 minutes customizing it yourself and you automatically kind of stand out and it really makes it easy to do with connect kid and then it also has sign in with ethereum built in and so the way that that works is that on the client and on the server it offers packages as well as a really simple getting started God for you to implement signning with ethereum so if you're using nextjs it actually has nextjs packages if you're using nodejs it has no JS packages as well as like a really simple getting started guide for how to do that so theming um this is kind of an example of me going through some of the different themes but I'm going to also go through that on the website in just a moment but to theme it it's really simple you just basically pass in a theme property and the theme property would um match one of the existing themes here if you wanted to kind of get started so there's like this default theme web 95 retro soft minimal so these are just strings that you would kind of pass in and then you would be able to if you would like also kind of start from one of those themes and customize it to match your app you can change the font family and things like that also really easily um you can also pass in that those values obviously on the client which is kind of where you would pass in the custom theme so here you would be able to kind of pass in the custom theme in this object that is the connected to the provider and the way that you could kind of get some of those properties would be to go to kind of this theme Builder here and I started with um the basic theme but you can actually start from let's see here you can start from from whatever theme you would want so let's say we want to start from retro we click edit theme you see up here it kind of has edit equals retro we might change the font family be something like that and then we could download the theme and use it locally or we can kind of actually see the CSS properties here and change those you know as well so really a lot of different ways that you can kind of customize this and it's pretty easy so that's just another view of some of the themes um you can also pass in whatever font that you would like for it to be used throughout the entire uh wallet connector in all the different places so a very obvious thing in terms of like making your design pop a little more than everyone else is just to match the the the font family you're using in your app so if you already have a font family you're using having the wallet connector match that is really simple just one line of code um and then I'm mentioned um sonin with ethereum so it's kind of built with sonin with ethereum as a first class citizen it has dedicated packages it even comes with a dedicated backend that you would that you can kind of implement really easily um on a hosted server so you kind of have the option between serverless or a regular node.js server all right so with that being said we're going to do a quick demo so I'm going to go into my terminal and open up this um app I have running locally and if I go to Local Host 3000 it you'll see it's just a really basic nextjs app all right so this is kind of what you get if you run npx create next app the only thing that I've done so far was like if I went to connect kit uh get started I've already installed these dependencies so if I go to my package.json you'll see that I already have connect kit VM and wag me installed so other than that I don't really have anything installed we're kind of starting from scratch so the three things that you need to do are install your dependencies create a provider and then connect the provider to the entry point to your app and you're kind of ready to go at that point so those are going to be kind of the steps that we walk through you probably done this if you've ever built with any other of these connectors but it's worth going through if you've never done this or just to kind of see how it's done with connect kit because it only takes a couple seconds what we're going to do is go ahead and create the connect the uh provider so I'll call this connect kit provider. TSX and I'm going to go ahead and populate this with the all the code that we need um all this stuff is documented here so I'm just kind of like going by this exact same stuff that we're seeing here we're importing a couple of apis from both wagi as well as connect kit and then we're wrapping our page which will be the children in the wagy config and the connect kit provider and then you're passing in a few different properties that are specific to your app um I don't have an Alchemy ID it's not something that you actually have to have um or any type of RPC ID the the one thing you do need is the wallet connect project ID so you can just go to wallet connect get the project ID you set it in env. looc and this is a temporary key I'm going to be deleting this so I'm I'm fine showing it here but this is just how it looks you just create a .

lo and nextjs and then you pass in that or you know I think because this ends up being public probably a lot of times anyway um because it's wallet connect and it needs to go over the wire you know some people just hardcode it but I would just recommend putting it as an environment variable um and I believe actually this not might even need to be next public do that um anyway so we have that config we pass it into wag me config and we have our provider ready to go and all we need to do now is import it in our layout so I'm going to go ahead and import from from connect kit provider the connect kit provider and then I can drop that [Music] here and we're passing in the children as the child and that is coming in right here so it's kind of wrapping our layout so all we've done is like create the provider import it and set it up so now our app is is ready to go so what we can do now is go to any page and start using it so if I go to page. TSX I can I'm going to start from scratch actually and in about 28 lines of code we're kind of building out a pretty straightforward wallet connection uh implementation so we're importing user modal from wallet connect and this will allow you to have a few different apis so you can call open this is a Boolean like telling you whether it's open or not you have set open which is a function that uh you pass in a bullion of true or false that will open and close and then you have different parts of the model that you can open to so you can open to the about page or the onboarding or the profile uh you have functions that switch networks um and open sign in with ethereum so so yeah we're importing that use modal Hook from connect kit we're importing use account and use disconnect from wagm and then we're setting up a couple of hooks here so we're going to be calling um set open to true to open the model and we're going to be checking is connected to see if they are already connected and then we're going to be getting their address from wag me use use account if they're not connected we're just going to uh I'm sorry if they if they are connecting we're gonna return that they are connecting if they're not connected we'll show the button to connect and if they are connected will'll show the button to disconnect so pretty straightforward code here but it's I think the apis are you know pretty simple I think we've come a long way in general I guess in the last couple years with all of this stuff not just with um you know connect kit anyway so if I can go ahead and say and go back here we now see we have this open modal button maybe I will style that maybe a little better I think it's text flag all right there we go so we have this open modal button click that and we can now choose our wallet so I'm just going to choose rabby wallet and now we're connected and that's about it it's pretty simple if I click disconnect we're disconnected so nothing crazy there pretty straightforward um what I might want to do now though is is like theme this so I can go now to my provider and I can say theme is equal to Retro actually I need to go to the implementation which is the provider itself this is it okay all right so we have the theme set is retro so if I go back and I try to open it again we now see we have our new our new theme um we [Music] also might want to set the mode so if I remove the theme I'm already like set to default as dark mode because it's going by my system settings but if I want to set the uh mode as light I can do that as well and then we see we have like the light color wallet or connector show up so that's kind of the main overview of uh connect kit don't want to make it too complicated I think if you would like to build with it definitely check out the documentation it's at docs. family.co connect kit or you can just Google a connect kit documentation this should show up um we also have all of the information around sign in with ethereum so I think this is in my opinion a very unknown part of this project that that just makes this so much easier a lot of people often will kind of like roll their own sign in with ethereum but this is something that you can just use really really easily and then the API reference is useful over here on the right hand side you have the values you can pass into the provider we use theme and mode you can also pass in that custom theme like we showed you can have callbacks for on connect and on disconnect and then we also have these three hooks we used use model but there's also Ed sign in with ethereum and Ed chains so that's it we don't have to uh we're not not taking a ton of your time today but hopefully you learn something there and you try to use this and I'm not sure if I can take questions but I would be happy to if we do that yeah thanks for that um I yeah if anybody has any questions feel free to type them in the chat or take yourself off mute and and ask them vocally and if there are no questions then thank you all for attending and thank you n for a great presentation uh this is the last one of the day and for folks that are still looking for a team or ideas you know definitely check out the team formation session in about just less than an hour um yeah thank you all again for attending and thanks thanks have a great uh great rest of your day and a great weekend thank you for for hosting [Music] us