patternjavascriptMajor
RainbowKit: custom wallet list and proper WagmiConfig setup
Viewed 0 times
RainbowKit 2.x, wagmi 2.x
rainbowkitwagmi v2WagmiProviderQueryClientProvidergetDefaultConfigwallet setup
Error Messages
Problem
Setting up RainbowKit with wagmi v2 requires specific configuration that differs from wagmi v1 integration.
Solution
Use getDefaultConfig from RainbowKit which internally creates the wagmi config. Wrap your app with RainbowKitProvider and WagmiProvider (not WagmiConfig which is v1).
import { getDefaultConfig, RainbowKitProvider } from '@rainbow-me/rainbowkit';
import { WagmiProvider } from 'wagmi';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';Why
RainbowKit v2 was redesigned to work with wagmi v2 and TanStack Query. The WagmiConfig component was renamed to WagmiProvider and now requires a QueryClient alongside it.
Gotchas
- Forgetting QueryClientProvider causes hooks like useAccount to throw
- projectId from WalletConnect Cloud is required even if you only want injected wallets
- getDefaultConfig wraps wagmi's createConfig internally — don't call createConfig separately
Code Snippets
Full RainbowKit + wagmi v2 provider setup
import { getDefaultConfig, RainbowKitProvider } from '@rainbow-me/rainbowkit';
import { WagmiProvider } from 'wagmi';
import { mainnet, polygon } from 'wagmi/chains';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
const config = getDefaultConfig({
appName: 'My App',
projectId: 'YOUR_WALLETCONNECT_PROJECT_ID',
chains: [mainnet, polygon],
});
const queryClient = new QueryClient();
export function Providers({ children }) {
return (
<WagmiProvider config={config}>
<QueryClientProvider client={queryClient}>
<RainbowKitProvider>{children}</RainbowKitProvider>
</QueryClientProvider>
</WagmiProvider>
);
}Context
Bootstrapping a new dApp with RainbowKit and wagmi v2
Revisions (0)
No revisions yet.