How to Integrate Reown AppKit on EVM - ETHGlobal Singapore 2024

hey everyone I'm Rohit and I'm the head of devell at Ron wallet connect Inc is now known as Ron and Ron has two major product offerings they are appkit and wallet kit so imagine if you're building a cool blockchain application and with appkit you can make it super easy for your users to do everything from within the application without ever needing to leave it so they can swap tokens login with their email address and social accounts like Google Twitter or forecaster approve transactions with simple click and buy crypto and also get important notifications all from within your application and wallet kit is a tool that helps wallet talk to different applications on the blockchain and it makes it super easy for you to do things like approv transactions with just one tap get important messages and notifications for your favorite apps and it also helps you stay safe from Bad actors that use pishing links on their wallet applications all of this happens smoothly without you ever needing to do a lot of extra work so for the sake of this tutorial our primary focus would be appkit so we will be building a simple next app that will allow you to connect your wallet to any evm chain and yeah let's get started so I'm going to open vs code and now we need to create our next app so I'm going to run npx create next app at latest and you also need to give the application's name so I'm going to give it as appkit example and you press enter now it's going to ask you a few questions so yes we would like to use typescript so I'm going to select it as yes I'm going to set es lint to no and I'm going to use tailin CSS so it's a yes I'll skip using the CRC directory for for the sake of Simplicity and yes we would like to use the app router and for this it'll be no so give it a few seconds and it should install or create the next application with the name as appkit example after that we need to install a few other dependencies and packages that'll be necessary to run or web 3 application and you can see that it has already created the next app so let me change into that directory by typing CD appkit sample and now I'm going to open that on vs code and you can see that our app has been set up and this is our boilerplate next application so I'm going to open the terminal on this as well and like I mentioned you need to import the packages and for that you need to First install the dependencies in the packages and in order to do that you need to run npm install at theate Reon appkit at theate Reon appkit adapter WME and we also need to install WME and then we need to install tanack for our react query so for this for the sake of this tutorial I'll be using my preferred ethereum Library as WME however you could also use ether so after I'm done typing this I'm going to press enter and it's going to install these dependencies in about a minute so please wait patiently okay so as you can see our dependencies have been successfully installed so now we need to get a project ID before we proceed because this project ID is what is going to help us set up our appkit so you need to navigate to cloud. re.com so since I have already logged in I do not need to sign up but if you haven't signed up please sign up and now it'll ask you to create a project so please navigate to the project Tab and click on create project let me give the name as appkit example and click on continue when you click on continue It'll ask you to select the product preference that you would like to start working with the SDK that we are using like I mentioned is appkit so I'm going to select appkit and click on next the framework that we're using is nextjs so I'm going to select that and then I'm going to click on create this should essentially create a project ID for us okay so as you can see our project has been set up and this is where the project ID can be found so please copy that and now you can switch back to your vs code and at the root level of your code directory please create a new file which isv and now you need to create a variable that's says next public project ID is equal to and paste your project ID and now that we have our environment variable configured which which means we can proceed with configuring the rest of the application so I'm going to close this and at the root level of our code directory we need to create a new folder called config and within this you need to create a new file which would be index. TSX and within this index. TSX file which is there in your config folder is where we would create the WME adapter which will be used as a configuration for our appkit app okay so now let's get started with the import statements so we first need to import a few things so let me import things like cookie storage and create storage from WME and after this you need to import WME adapter from reown appkit adapter WME and you also need to import the chains that you need to work with so in this case I'm going to import main net and arbitrum and this needs to be imported from at the rate reown appkit SL networks and after you're done with this we can proceed with the next line and here you need to get your project ID and configure it so I'm going to give the statement as export const project ID is equal to process.

env do next public project ID and you can also check if the project ID is being retrieved properly or Not by giving a simple if Loop so if it is not being retrieved properly you need to throw an error so you do this by typing throw new error project ID is not defined and after this you need to export a new constant variable which would be your networks so let's declare that as Main net and arbitrum so after this you need to set up the WME adapter you do this by creating another constant variable which would be exported so let me name it as WME adapter is equal to new WME adapter this is where you call the function that you just imported on the top and here you can set the storage as a create function and here you can pass storage as cookie storage and you can also set the SSR to true and now you need to pass the networks and also the project ID for it to function as expected and you can see that we have set up the WME adapter and you could also export another constant variable which would be your con config and this config needs to be WME adapter. WME config and this is what our index. TSX within our config folder would look like and now within the root directory you need to create a new folder which would be the context so you need to name it as context and within this again you need to create a new index. TSX file so this will basically be the context provider that we want to wrap our application in and initialize appkit so as usual you need to import a few of the statements but before that you need to make sure that you use client which is necessary for next and now we need to import things like WME adapter from config since you're exporting that and we need this for our context provider and you also need to import project ID after this you need to import create appkit which is the function we will use to initiate appkit and also create the instance and again we need to import the chains so I'm going to import main net arbitrum from Reon SL appkit SL networks and you also need to import a few other things like query client from tanack and you also need to import query client provider and you also need to import react then I'm going to import type react node from react and we also need to import a function to initialize the cookie state so I'm going to import cookie to initial state from WME and you also need to import WME provider and then type config these are all our import statements and now you need to set up the query client and you do this by typing const query client is equal to new query client this calls the query client function and assigns it to this Conant and variable and you can again pause the same if Loop to check if the project ID is properly being fetched or not so so I'm going to go back to the previous file and copy this eror statement to save some time and after this you need to set up a metadata variable please not that the metadata variable is completely optional however the metadata variable is what will contain the information about your application that is being used by appkit so this includes the name the URL the description and the icons to be use for your application so I'm going to do this regardless of whether it's optional or not so you need to pass the name so I'm going to set the name as appkit example and then a description like I mentioned before so I'm going to set the description as appkit example evbm and now now I need to set a URL for our app and this could be anything so I'm just going to give it as example app.com but you need to replace this with the actual apps URL and you need to set the icons so I'm just going to copy an icon that I already have in a URL format but feel free to replace that and this is how you create the metadata variable that will be passed Within in the modal that we create soon so now we need to create the modal like I mentioned before so that'll be another constant variable and here you call the create appkit function and within create appkit function is where you will configure the adapter that we created in our config file so you set the adapters as me adapter and you also need to pause the project ID and then now you need to configure the net works as what you imported so I'm going to configure it with main net and arbitrum you could also set a default Network object which will specify the default network to use so I'm going to set it to main net and now I'm going to pass a few optional features such as analytics so if you set analytics to true it will fetch all the analytics from your application and show it under your project on reown cloud and after this you could also set things like email to true so email is true by default however I'm just showing it for an example and you could also set socials to enable social login so this is how you need to pass it so I'm going to first have Google and then I'm going to have X then I'm going to have GitHub then I'm going to have discard and you could also so do this for for forecaster however this is also completely optional it depends on whether you want to enhance the user experience for your web application and I'm also going to set email show wallets to true and after this you could also set the theme mode so the theme mode is basically to configure what is the theme of your application is it dark or light so I'm going to set it to dark sorry I'm going to set it to light and this is what the body of our index.

TSX within the context folder should look like and now you need to pass a function that sets the context provider so I'm just going to copy and paste a boilet plate code that I have but feel free to take a look at what it looks like so it's a context provider that has children and cookies of the prop objects and then it Returns the WME provider which within which the query client provider is wrapped and you need to save this so now let's open the page. TSX and configure the front end for our web application so again I'm going to use client here since it's necessary and then I'm going to import use account from WME this is completely optional because I'm going to use this to check if the wallet address is connected or not so now I'm going to copy a default baller plate function that I already had so I'm going to minimize this so you can see what it looks like and you can see that I'm returning this as my body within which you need to pass the web3 model button so the w3m button is what will show your users a connect wallet button and the w3m network button is just to switch the network and after you've done this you also need to change the layout of your application so I'm going to remove all this and again copy and paste a simple baller plate code so this sets the layout of our application and I'm going to quickly walk back to the page. TSX file here please not that all of those all of these components are nothing but styling however feel free to remove those and you could just pass the w3m button and you'll still be able to see a connect wallet button that you'll be able to connect your wallet to and also disconnect so now in order to to run your next application you need to run this command which is npm run Dev since I already have an existing application running which uses the exact same code I'm going to show what it looks like on my Local Host 3000 so I'm going to set it to Local Host 3000 and open the example application and you could see that this is what it'll look like it'll show a connect wallet button so now I'm going to select connect and you can see that the social login methods and also the email address login is enabled and you could see also the other installed wallet providers that are there in my browser's extensions so I'm going to log in with metamask and it's going to pop up metamask and I select the account that I want to connect my application with and then I press on confirm and you could see that the network selection button has also been enabled so when you click on this you'll see the other network that is available which is arbitrum but you could always go back to vs code and here when you're passing networks you basically need to import the other networks that you want your application to support from reone appkit Network and pass it through the create appkit function and you also need to set it to the WME adapter function and that's pretty much it and that's what you need to do to support other networks on your web3 application and when you click on this connection model you could see that there's an option to on ramp which means you could buy cryp and there's also an option to swap you could also see activity which fetches the activity for my wallet address and that's about it and that's it you have now learned how to create a simple NEX application using appkit and let your users connect to any evm chain so happy hacking