Custom Providers

For advanced use-cases, you can choose to use multiple providers such as Alchemy for Ethereum and avax.network for Avalanche.

Example

ConnectKit uses wagmi internally and can utilize multiple providers. If you haven't already, start by importing the chain constant and configureChains function from wagmi:

,CustomProviders.js1import { WagmiConfig, createClient, chain, configureChains } from "wagmi";

Then set up configureChains with the providers you want to use like following:

,CustomProviders.jsx1import { WagmiConfig, createClient, chain, configureChains } from "wagmi";
2import { ConnectKitProvider } from "connectkit";
3
4import { WalletConnectConnector } from "wagmi/connectors/walletConnect";
5
6import { alchemyProvider } from "wagmi/providers/alchemy";
7import { jsonRpcProvider } from "wagmi/providers/jsonRpc";
8
9const alchemyId = process.env.ALCHEMY_ID;
10
11const avalancheChain = {
12  id: 43_114,
13  name: "Avalanche",
14  nativeCurrency: {
15    decimals: 18,
16    name: "Avalanche",
17    symbol: "AVAX",
18  },
19  rpcUrls: {
20    default: "https://api.avax.network/ext/bc/C/rpc",
21  },
22  blockExplorers: {
23    default: { name: "SnowTrace", url: "https://snowtrace.io" },
24    snowtrace: { name: "SnowTrace", url: "https://snowtrace.io" },
25  },
26  testnet: false,
27};
28
29const { provider, chains } = configureChains(
30  [chain.mainnet, chain.polygon, chain.optimism, chain.arbitrum],
31  [
32    alchemyProvider({ apiKey: alchemyId }),
33    jsonRpcProvider({
34      rpc: (chain) => {
35        if (chain.id !== avalancheChain.id) return null;
36        return { http: chain.rpcUrls.default };
37      },
38    }),
39  ],
40);
41
42const client = createClient({
43  autoConnect: true,
44  connectors: [
45    new WalletConnectConnector({
46      chains: chains,
47      options: {
48        qrcode: false,
49      },
50    }),
51  ],
52  provider,
53});
54
55const App = () => {
56  return (
57    <WagmiConfig client={client}>
58      <ConnectKitProvider>
59        {/* Your App */}
60        <ConnectKitButton />
61      </ConnectKitProvider>
62    </WagmiConfig>
63  );
64};

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.

Custom Providers

Example

On this page