Providers

To get the most out of ConnectKit you will need to include an API key from Infura or Alchemy or both depending on the networks you wish to support.

By default ConnectKit includes a shared provider key for development and testing that is heavily limited and not fit for production use. It is recommended to provide your own Alchemy/Infura API key to prevent being rate-limited.

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 in your app like following:

,App.jsximport { createConfig } from "wagmi";
import { getDefaultConfig } from "connectkit";

const config = createConfig(
  getDefaultConfig({
    ...
    infuraId: process.env.INFURA_ID
    ...
  }),
);

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 in your app like following:

,App.jsximport { createConfig } from "wagmi";
import { getDefaultConfig } from "connectkit";

const config = createConfig(
  getDefaultConfig({
    ...
    alchemyId: process.env.ALCHEMY_ID
    ...
  }),
);

Custom Providers

For advanced use-cases, you may want to use a custom 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.js and add your custom chain configuration like following:

,customChains.jsexport const avalancheChain = {
  id: 43_114,
  name: "Avalanche",
  nativeCurrency: {
    decimals: 18,
    name: "Avalanche",
    symbol: "AVAX",
  },
  rpcUrls: {
    default: "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 and the configureChains function from wagmi and set up the providers you want to use like following:

,App.jsximport { ConnectKitProvider } from "connectkit";

import { WagmiConfig, createConfig, configureChains } from "wagmi";
import { mainnet, polygon, optimism, arbitrum } from "wagmi/chains";
import { alchemyProvider } from "wagmi/providers/alchemy";
import { jsonRpcProvider } from "wagmi/providers/jsonRpc";

// Import your custom chains
import { avalancheChain } from "./customChains";

const alchemyId = process.env.ALCHEMY_ID;

// Add your custom chains to the list of wagmi configured chains
const { publicClient, chains } = configureChains(
  [mainnet, polygon, optimism, arbitrum],
  [
    alchemyProvider({ apiKey: alchemyId }),
    jsonRpcProvider({
      rpc: (chain) => {
        if (chain.id !== avalancheChain.id) return null;
        return { http: chain.rpcUrls.default };
      },
    }),
  ],
);

// Use the configured provider and chains to create a wagmi config
const config = createConfig(
  getDefaultConfig({
    ...
    chains,
    publicClient,
    ...
  }),
);

const App = () => {
  return (
    <WagmiConfig config={config}>
      <ConnectKitProvider>
        {/* Your App */}
        <ConnectKitButton />
      </ConnectKitProvider>
    </WagmiConfig>
  );
};

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.

Providers

Infura

Alchemy

Custom Providers

On this page