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,
});