Powered by

A design system from Family

RPC Providers

createConfig can be instantiated with a set of Transports for each chain. A Transport is the intermediary layer that is responsible for executing outgoing JSON-RPC requests to the RPC Provider (e.g. Alchemy, Infura, etc).

By default, ConnectKit sets up your dApp with public RPC Providers for development and testing that are heavily limited and not fit for production use. It is recommended to provide your own RPC Providers to prevent being rate-limited.

import { createConfig, http, fallback } from "wagmi";
import { getDefaultConfig } from "connectkit";
import { mainnet } from "wagmi/chains";
const config = createConfig(
getDefaultConfig({
chains: [mainnet],
transports: {
[mainnet.id]: fallback([
http(`https://mainnet.infura.io/v3/${process.env.NEXT_PUBLIC_INFURA_ID}`),
http(`https://eth-mainnet.g.alchemy.com/v2/${process.env.NEXT_PUBLIC_ALCHEMY_ID}`),
]),
},
}),
);

RPC Provider Choices

There are many RPC Providers to choose from, each with their own pros and cons. Below is a list of some of the most popular RPC Providers:

Alchemy

At the time of writing, Alchemy supports both EVM and non-EVM chains. To learn more about Alchemy's supported chains, visit the Alchemy docs.

To use Alchemy, you will need to create an account and generate an API key. You can do this by visiting the Alchemy dashboard, then implement the API key with Alchemy's RPC URL.

Infura

At the time of writing, Infura supports Ethereum, Layer 2s, EVM and non-EVM compatible chains. To learn more about Infura's supported chains, visit Infura's supported networks page.

To use Infura, you will need to create an account and generate an API key. You can do this by visiting the Infura dashboard, then implement the API key with Infura's RPC URL.

Custom Providers

For advanced use-cases, you may want to use a custom RPC Provider for a specific chain.

With ConnectKit, you can choose to combine multiple providers such as Alchemy for Ethereum and avax.network for Avalanche.

Start by creating a file called customChains.ts and add your custom chain configuration like following:

,
customChains.ts
import { type Chain } from "viem";
export const avalanche: Chain = {
id: 43_114,
name: "Avalanche",
nativeCurrency: {
decimals: 18,
name: "Avalanche",
symbol: "AVAX",
},
rpcUrls: {
default: { http: ["https://api.avax.network/ext/bc/C/rpc"] },
},
blockExplorers: {
default: { name: "SnowTrace", url: "https://snowtrace.io" },
snowtrace: { name: "SnowTrace", url: "https://snowtrace.io" },
},
testnet: false,
};

Then importing your preferred chains from wagmi that you want to use like following:

,
Web3Provider.tsx
import { ConnectKitProvider } from "connectkit";
import { WagmiProvider, createConfig, http } from "wagmi";
import { mainnet } from "wagmi/chains";
import { avalanche } from "./customChains";
const config = createConfig(
getDefaultConfig({
chains: [mainnet, avalanche],
transports: {
[mainnet.id]: http(
// or your custom rpc url
`https://eth-mainnet.g.alchemy.com/v2/${process.env.NEXT_PUBLIC_ALCHEMY_ID}`,
),
[avalance.id]: http(
// or your custom rpc url
avalanche.rpcUrls.default,
),
},
}),
);
export const Web3Provider = () => {
return <WagmiProvider config={config}>...</WagmiProvider>;
};

That's it—ConnectKit will now use different providers for different chains.

For more info, check out the wagmi docs which describes a similar scenario to above around multiple providers.