WalletConnect 🛠️ Quick Start your dApp with AppKit

[Music] hey everyone my name is Kelly and today I am representing wallet connect at this year's eth Global Brussels we are the ux platform for the new internet we believe that the next phase of the internet is where utility meets usability to drive unparalleled usefulness so all of our products revolve around giving Builders and users the control choice and composer ability they need if you're watching this you probably have heard of us you'll know that we've always been the connective tissues between apps and wallets endtoend encrypted connections frictionless ux easy peasy integration and of course supporting multiple chains this year we're really excited to have relaunched our product offering with an all new set of toolkits that make it super easy for Builders of apps and wallets to build for the new internet for This eth Global we'll be encouraged ing Builders to build with appkit our allinone stack to build apps for the new internet with appkit you've got horsepower under the hood and surface level Simplicity that makes it easy for Builders of any level to build apps appkit is perfect for hackathons because it provides you outof the-box solutions for building incredibly powerful ux driven apps in this video I'm going to be taking you through how to get started with a regular nextjs app how to set up your configuration and how to Leverage the state and information of the wallet that's connected to your app I'll also leave you with some resources in case you want to get some support or learn more about how you can leverage appkit for your hackathon build to get started building with appkit you'll need to go down and navigate to wallet connect Cloud where you'll create an account you can either continue with email or you can just connect your wallet and it will create an account for you based on your wallet address so I'm going to go ahead and create an account account for my wallet named on chain taste going to use zerion sign the transaction and voila once you've created your account you should land on this page where it will prompt you to go and create a project so let's go ahead and call this ux heaven we can leave the link blank that will only be relevant when you deploy your project to a public domain we're going to select appkit as our product we're going to select nextjs as the platform and it will have created a new project for us so you'll land on this quick start wizard that takes you through the process of setting up your project it makes it super easy to go from zero to one in terms of having all your correct configuration so that you can start building your app all right now we're ready to roll so let's go ahead and create a new nextjs app on our local Drive oh we don't want that awesome let's call this project ux heaven like our Cloud project and accept all of the default settings and we'll wait for that to finish uh rendering okay awesome let's navigate into the app and then what's really nice is if you go back to your Cloud dashboard you should be able to Simply copy the install command so today we're going to use pnpm as our package manager I'm going to go and copy that navigate back to my terminal and simply just install the packages so as mentioned we recently did a product relaunch as at kit currently our package is still called web3 modal in case anyone is slightly confused by that okay and once all the dependencies are installed we're just going to go ahead and run our app and our Local Host let's open this up and once we open that up we'll arrive here the page that every single Dev sees when they start a nextjs app from scratch now let's go ahead and set up our environment variables so I'm going to just briefly stop this we're going to go ahead and install the M library this package allows us to safely store our environment variables and this is especially important when you're building web 3 apps because there's lots of secret data that you don't want linked to the Internet so now let's go ahead and open up our code okay now this is what we have just a regular nextjs app but firstly let's go ahead and just create a EnV file in the root folder so okay awesome and we're going to go ahead and copy and paste the key inside here we have to put our project ID so we're actually going to navigate back to our Cloud you can simply click on this button in the left column and it will copy it for you to your clipboard so I'm going to go back I'm going to paste my project ID in here I will be deleting this project after the demo so no worries there and we should be good to move on to the next part which is setting up the configuration so I'm going to go ahead and go back to my terminal I'm going to make sure that I'm in my root folder I am then going to create a directory called config and within that directory I will create a file called index TSX so a quick tip is for you to go back to cloud and once you click done in the quick start wizard it will actually give you a nice structure or skeleton that you can simply copy and take over to your project and just copy and paste it in real quick a one minute run through of just what exactly is in this file here right here we are bringing in the default configuration from the web 3 modal react configuration Library we then go ahead and grab a couple of functions from work me to manage how and where our data is stored this line right here Imports all the required chains for this demo I'm actually going to go ahead and Import in Bas and also base seoa so if you actually go to wag me docks down to chains here you'll be able to see all the chains that are supported and how you find them is basically just by searching the chain and it will have just exactly what you need to import into your project to be able to reach these chains and right here is where our project ID goes because I copied this piece of code straight from my cloud account it will have already populated the project ID in here but we actually want to replace this with and next let's just remember what that was okay go back here all right that's how we want to put our project ID in to ensure maximum security this metadata object here will have all the information about our app so as you can see because I copied it straight from cloud it has already populated with ux Heaven the description can be appkit example or let's say the app with the best ux in the world here in this line you can see that we actually create an object with the chains that our app will uh interact with so here again I'm going to uh Import in what we imported up here from WME chains this line is then used in our object here where we use a default WME config function that we imported above in this file we'll have the chains the project ID the metadata we'll set SSR to True which means we'll enable server side rendering we'll set storage to a new instance of create storage in which we'll use cookies to manage our data and then down here with wag me options you can add here whatever you want so in terms of wag me configuration this is all we need up till this point now our app will have all the required information to be able to interact with the blockchain great now let's give our app some context we're going to create a directory in the root folders called context and within that we're going to create an index TSX file as well okay and for this I'm going to go back to the docs and just copy in exactly what they have uh given us for the context provider there we go you'll notice first of all we have the use client directive here because we need to make sure that this file runs on the client side here we import all of the essentials we import the config object and the project ID from our config file we'll pull in the create web3 modal function from the web 3 WME react Library so that we can actually create the model we'll use the query client and the query client Provider from react query to manage data fetching and lastly the state and the wagm provider from wagm to manage all of our web 3 connections in this line we create a new instance of query client called query client then in this line we Implement some basic error handl link if there is no project ID we will throw an error so in this create web 3 modal object we have the con the wag me config set as config project ID here enable analytics which means that you'll be able to see all the analytics for your app inside your cloud account and here onramp which allows your users to buy crypto directly in app toggle to True uh these are all optional you can toggle them to false if you'd like and lastly there's the web3 modal provider this is a component that wraps all of it children with the providers for rockme provider and the query client provider all right now the hardest part is over and we can now move on to the fun stuff so you're going to go ahead and you're going to navigate to our layout. txx and this is where the main layout for our app will live we're going to get started by importing in the provider component and then we're going to call in the required WME functions so first off let's go ahead and import cookie to initial state from wagm this helps us convert cookie data to the initial State then we're going to go ahead and Import in the configuration settings for our app so let's go and import config from our config we're also going to import in of course the web3 modal Provider from our context now if you look down here this is the metad dator let's call this what our app is called which is called ux heaven and then let's go ahead and change the description the best the no what was it app with the best ux in the world now we arrive at our root layout component the first thing we're going to do is we're going to store uh the value from this function cookie to initial State inside an object called initial State cookie to initial State let's um add in as parameters our config headers uh we'll actually need to import that from next headers okay and then we're going to get cookie all right oh I think we need an extra parenthesis there and then the next thing we're going to do is we're going to wrap the children inside the web 3 modal provider so let me just make some space here and let me put in web 3 modal provider we're going to set the initial state to the initial State object of okay and now what we have to do is pop that there oh let's fix that and voila that's basically all we need to do for our layout so we're successfully wrapping all of our app content with the new with web3 functionality via this web3 modal provider so that we can successfully interact with the blockchain on our app okay everyone we are so so close now we just have to use functionality to the front end of app so let's start by creating a new directory called components and then inside there we're going to create a page called connect button. txx and if we go there we're going to scaffold a new component it is named connect button because that's what it's going to do now the magic of appkit is that appkit allows you to import in readymade components that are out of the box with the package which means this is perfect for Aon so let me show you one for example we have web 3 modal button and now let's add that to our page as you can see here I've actually cleaned out a lot of the template from nextjs so feel free to go ahead and do that let me get rid of this image we don't need this image here inside this div I want to put the connect button and so let's just import that in and now I think it's time to start our server and see how things look so far okay the moment of truth and there we go that's our connect wallet button when we click it it will pop up with the modal with all of the default settings now let me go back let's just add a quick title here maybe we can add it we can add it to here my beautiful app and there we go our connect wallet button is now working so the most exciting thing about the appkit modal is the ability to customize it however you'd like so if we quickly navigate over to the docs you'll see that it has all of these laid features such as swaps email and socials smart accounts one click off on ramp as we explored before so let's go ahead and add email and socials so I'm quickly going to show you what the motor looks like now we just have the email and then we have all these different wallets so let's go back to our code let's navigate to um config all we have to do is under an or object email is already defaulted to true so we don't need to include that but let's put in the socials and let's uh let's put show wallets as true it's already defaulted to true but I just want to show you what it's like if you toggle it on and off so let's go back and refresh our app as you can see here you have continue with Google X Discord GitHub and apple here you can change the order so if I put X first it will have continue with X so you can customize it as you wish depending on your user group or target audience now let's toggle show wallets false okay there we go so you can customize your model as you'd wish it's very composable and modular so you can pick and choose what you'd like so now let's go ahead and connect a wallet so I'm going to go ahead and continue with my wallet I'm going to connect with my zerion and here you can see it already populates my ens and the amount of eth that I have in my wallet and here if you click on the Chain you can switch between chains so if I go to base you'll see that I have 0.006 eth and um you have onramp enabled so you can buy crypto directly in app activity you can um explore the different activity of your account or wallet you can copy the address you'll see that this is my ens Avatar it's very clean composable out of the box and easy to implement as you just saw all right so now that the user is able to successfully connect their wallet now what let's go back over to our code and let's make sure that we're on our page which is where all the UI lives and uh we're going to start by actually putting in the use client directive just because everything is going to be rendered client side for this we are then going to import in two WME hooks so wag me's hooks make it really easy for apps to interact with ethereum and and different chains um let's say we're going to for the Simplicity of this demo we're just going to use the use account Hook and the use disconnect hook super simple we're firstly going to start by destructuring account and is connected from use account oops okay actually that's address I believe and then we're going to go ahead and destru structure disconnect from the use disconnect hook okay so I think we can use this div here and wrap it in a conditional with is connected so if our wallet is connected then we want to render we want to render what do we want to render we want to render the wallet address okay if not connected we we are going to render let's say p statement please connect your oops wallet all right let's see how that looks let's go back okay great so my wallet is currently connected and it shows my address now how to disconnect we don't have a disconnect button yet but it's super easy within our code we need to find a place to put a disconnect button let's put it let's put it between these discs so let's create a new div and within that div we going to create a button and for that button on click we're going to trigger this function whoops going to trigger the disconnect function that we've already called don't need that semicolon called up here and let's call it disconnect just to make sure it shows up let's also put some styling so let's say we want a border we want padding two let's also go rounded let's see how that looks okay super random it's in the middle of our app but that's okay so all we have to do is click on this and it should be disconnected we get our please connect to Wallet app because there is no longer a wallet connected and voila you are now interacting with the blockchain and you can now leverage all of the information in the connected wallet and do what you wish for your app for a 48h hour hackathon appkit is perfect because it provides both outof thee boox solutions to build apps super quick but it can also meet you at your complexity level so if you want to incorporate more complex features appkit is modular enough to help you do that now in terms of getting more support or learning more I would firstly direct you to our docs they were recently renovated by our lovely devell team in light of the product relaunch you can also jump into our Discord where we're actively providing technical troubleshooting you can open a discussion on GitHub and of course if you're around the hackathon area please find one of our team members they don't bite and they'll be more than happy to help you so happy building everyone and I can't wait to see all the fabulous apps that you build with appkit [Music]