API Providers

Configure your chains with API providers

You can use our built-in API providers to configure your chains. This way, you don't need to worry about defining RPC URLs or about passing provider instances to wagmi.

RainbowKit exports a configureChains function. This function accepts an array of chains and an array of API providers. This function returns

chains: pass this to getDefaultWallets
provider: pass this to createClient
webSocketProvider: optionally pass this to createClient

import {
  apiProvider,
  configureChains,
  getDefaultWallets,
} from '@rainbow-me/rainbowkit';
import { chain, createClient } from 'wagmi';

const { chains, provider } = configureChains(
  [chain.mainnet, chain.polygon],
  [apiProvider.alchemy(process.env.ALCHEMY_ID), apiProvider.fallback()]
);

const { connectors } = getDefaultWallets({
  appName: 'My RainbowKit App',
  chains,
});

const wagmiClient = createClient({
  autoConnect: true,
  connectors,
  provider,
});

const App = () => {
  return (
    <WagmiProvider client={wagmiClient}>
      <RainbowKitProvider chains={chains}>
        <YourApp />
      </RainbowKitProvider>
    </WagmiProvider>
  );
};

Examples

Alchemy

To use Alchemy, use the apiProvider.alchemy provider with an Alchemy ID.

const { chains, provider } = configureChains(
  [chain.mainnet, chain.polygon],
  [apiProvider.alchemy(process.env.ALCHEMY_ID)]
);

Infura

To use Infura, use the apiProvider.infura provider with an Infura ID.

const { chains, provider } = configureChains(
  [chain.mainnet, chain.polygon],
  [apiProvider.infura(process.env.INFURA_ID)]
);

JSON RPC

To use your own RPC URLs, use the apiProvider.jsonRpc provider to configure chains with its RPC URLs.

const { chains, provider } = configureChains(
  [chain.mainnet, chain.polygon],
  [
    apiProvider.jsonRpc(chain => ({
      rpcUrl: `https://${chain.id}.example.com`,
    })),
  ]
);

Fallback RPC

To configure the chains with their respective fallback (public) RPC URLs, use the apiProvider.fallback provider.

const { chains, provider } = configureChains(
  [chain.mainnet, chain.polygon],
  [apiProvider.fallback()]
);

Note: Only having apiProvider.fallback in your API providers will make the chain use the public RPC URL which could lead to rate-limiting. It is recommended to also include apiProvider.alchemy, apiProvider.infura or apiProvider.jsonRpc.

Multiple API providers

The configureChains function accepts multiple API Providers. This is useful if not all your chains support a single API provider. For example, you may want to use Alchemy for Ethereum, and avax.network for Avalanche.

import {
  apiProvider,
  Chain,
  configureChains,
} from '@rainbow-me/rainbowkit';

const avalancheChain: Chain = {
  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,
};

const { provider, chains } = configureChains(
  [chain.mainnet, avalancheChain],
  [
    apiProvider.alchemy(process.env.ALCHEMY_ID),
    apiProvider.jsonRpc(chain => ({ rpcUrl: chain.rpcUrls.default })),
  ]
);

WebSocket provider

If you wish to use a WebSocket provider, the configureChains also returns a webSocketProvider. You need to pass that to the createClient function.

import {
  apiProvider,
  configureChains,
  getDefaultWallets,
} from '@rainbow-me/rainbowkit';
import { chain } from 'wagmi';

const { chains, provider, webSocketProvider } = configureChains(
  [chain.mainnet, chain.polygon],
  [apiProvider.alchemy(process.env.ALCHEMY_ID)]
);

const { connectors } = getDefaultWallets({
  appName: 'RainbowKit demo',
  chains,
});

const wagmiClient = createClient({
  autoConnect: true,
  connectors,
  provider,
  webSocketProvider,
});

Overview

Getting Started

Advanced