How to Configure your own RPCs in Reown AppKit?

Learn how to use Reown AppKit with your own RPCs configured to enable wallet connections and interact with any EVM network.

With AppKit, you can provide seamless wallet connections, including email and social logins, on-ramp functionality, smart accounts, one-click authentication, and wallet notifications, all designed to deliver an exceptional user experience.

In this tutorial, you will learn how to:

  1. Set up Reown AppKit.
  2. Configure your own RPCs in AppKit.

This guide takes approximately 10 minutes to complete.

Let’s get started!

Setting Up Wallet Interaction using AppKit

Using AppKit, you can enable wallet interactions for your Web3 app with just a few lines of code.

Below is an in-depth guide that will teach you how to set up wallet interactions using AppKit. Please ensure you complete the setup of AppKit before proceeding with the rest of this guide.

Configure your own RPCs in AppKit

Assuming that you have already set up AppKit in your project or locally, let’s understand how you can override the default RPCs configured in Reown AppKit and replace them with your own custom RPCs.

In order to do this, you need to be using Reown AppKit with Wagmi. Refer to Wagmi’s docs here.

Note: Overriding the default RPCs configured in Reown AppKit and replacing them with your own custom RPCs is only currently possible if you are using Reown AppKit with Wagmi as your Ethereum library. Soon, there will be a feature that will let you do this regardless of which Ethereum library you use.

For the sake of this tutorial, let’s assume that you are using Next.js. If you are not using Next.js, just locate the code snippet where you have configured the WagmiAdapter()function.

Now within your /config/index.tsx file, you need to pass a new parameter called transports within the WagmiAdapter() function. Refer to the code snippet below.

import { WagmiAdapter } from '@reown/appkit-adapter-wagmi'
import { mainnet, arbitrum} from '@reown/appkit/networks'

//Set up the Wagmi Adapter (Config)
export const wagmiAdapter = new WagmiAdapter({
  storage: createStorage({
    storage: cookieStorage
  }),
  transports: { 
    [mainnet.id]: http('https://eth.llamarpc.com'),
    [arbitrum.id]: http('https://arbitrum.llamarpc.com'),
  },
  ssr: true,
  networks,
  projectId
})

So what's happening in the above code? Let's break it down step-by-step:

  1. Within the WagmiAdapter() function, you are passing a new parameter called transports.
  2. This lets you override the default RPCs in AppKit for the networks that you are importing from @reown/appkit/networks.In this case, we are importing Ethereum mainnet and Arbitrum.
  3. So we are overriding their default RPCs with the RPC URLs that we are passing in the code. For example, '<https://eth.llamarpc.com>' for Ethereum mainnet.

You can follow the above process for any EVM network that you have configured within your WagmiAdapter.

Check if AppKit is using the new RPCs

If you are trying this out locally, you can now run the app and test it out. In order to do so, run the command given below.

npm run dev

If you are using alternative package managers, you can try either of these commands - yarn dev, or pnpm dev, or bun dev.

If you want to confirm whether the AppKit instance is using your new RPC URLs, you can simply open the web app on your browser and navigate to “Network” and click on “Fetch/XHR”. After you do this, you will be able to see the network calls to your newly configured RPC URLs.

In my case, I configured Arbitrum to use llamarpc and you can see it being highlighted in the screenshot below. This confirms that our new RPCs are working as expected.

Conclusion

And that’s it! You have now learned how to use your own RPCs in Reown AppKit. If you are wondering what else you can do with Reown AppKit, please refer to the docs here.

What's Next?

If you're wondering how to use Reown for various use cases and build apps with great UX, feel free to check out our other blogs here.

Need help?

For support, please join the official Reown Discord Server.

Related articles

More articles