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 your preferred chains from wagmi and the configureChains function from wagmi:

,CustomProviders.js1import { WagmiConfig, createClient, configureChains } from "wagmi";
2import { mainnet, polygon, optimism, arbitrum } from "wagmi/chains";

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

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

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