Setting the file. One moment.
Subchapter 4.27
references/migrations/onchainkit/provider.mdMarkdown6 KBView on GitHub
Replace OnchainKitProvider from @coinbase/onchainkit with direct WagmiProvider + QueryClientProvider setup.
OnchainKitProvider is a wrapper that:
base + baseSepolia chainscookieStorage for persistence and ssr: truebaseAccount() from wagmi/connectorsapiKey is providedQueryClient from @tanstack/react-queryThe provider detects if WagmiProvider or QueryClientProvider already exist in the React tree and skips creating them if so.
Ensure these packages are installed. They are likely already present since OnchainKit depends on them:
npm install wagmi viem @tanstack/react-queryIf the project uses Tailwind CSS and it’s not yet installed:
npm install tailwindcss @tailwindcss/postcss postcssCreate a new file for the wagmi configuration. Place it alongside the existing provider file (typically app/wagmi-config.ts).
import { http, cookieStorage, createConfig, createStorage } from "wagmi";
import { base } from "wagmi/chains";
import { coinbaseWallet, metaMask } from "wagmi/connectors";
export const wagmiConfig = createConfig({
chains: [base],
connectors: [
coinbaseWallet({ appName: "My App", preference: "all" }),
metaMask(),
],
storage: createStorage({ storage: cookieStorage }),
ssr: true,
transports: {
[base.id]: http(),
},
});Adapt based on the existing OnchainKitProvider config:
chain prop was set to something other than base, use that chain insteadapiKey was set, you can use CDP RPC URLs: http(\https://api.developer.coinbase.com/rpc/v1/base/${apiKey}\`)` (opens in a new tab)config.wallet.preference was "smartWalletOnly", adjust the coinbaseWallet connector accordinglychains array and transports object as neededReplace the existing provider file (typically rootProvider.tsx or providers.tsx).
Before (OnchainKit):
"use client";
import { ReactNode } from "react";
import { base } from "wagmi/chains";
import { OnchainKitProvider } from "@coinbase/onchainkit";
import "@coinbase/onchainkit/styles.css";
export function RootProvider({ children }: { children: ReactNode }) {
return (
<OnchainKitProvider
apiKey={process.env.NEXT_PUBLIC_ONCHAINKIT_API_KEY}
chain={base}
config={{
appearance: { mode: "auto" },
wallet: { display: "modal", preference: "all" },
}}
>
{children}
</OnchainKitProvider>
);
}After (wagmi/viem):
"use client";
import { type ReactNode, useState } from "react";
import { WagmiProvider } from "wagmi";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { wagmiConfig } from "./wagmi-config";
export function RootProvider({ children }: { children: ReactNode }) {
const [queryClient] = useState(() => new QueryClient());
return (
<WagmiProvider config={wagmiConfig}>
<QueryClientProvider client={queryClient}>
{children}
</QueryClientProvider>
</WagmiProvider>
);
}Key changes:
@coinbase/onchainkit import@coinbase/onchainkit/styles.css importQueryClient is created with useState to avoid re-creation on re-rendersWagmiProvider must wrap QueryClientProviderRemove any OnchainKit-specific imports from the layout:
SafeArea from @coinbase/onchainkit/minikitminikitConfig imports<RootProvider> inside <body> (wagmi provider must be a client component, so it should wrap the content, not the <html> tag)Before:
import { SafeArea } from "@coinbase/onchainkit/minikit";
export default function RootLayout({ children }) {
return (
<RootProvider>
<html lang="en">
<body>
<SafeArea>{children}</SafeArea>
</body>
</html>
</RootProvider>
);
}After:
export default function RootLayout({ children }) {
return (
<html lang="en">
<body>
<RootProvider>{children}</RootProvider>
</body>
</html>
);
}Run the build command:
npm run buildExpected: Build succeeds. The MetaMask SDK warning about @react-native-async-storage/async-storage is harmless and can be ignored.
If the project wraps with its own WagmiProvider outside of OnchainKit, simply remove the OnchainKitProvider wrapper. Update the existing wagmi config to include any connectors that were configured via OnchainKit.
If the existing setup relied on apiKey for RPC access, add the CDP RPC URL to the transport:
transports: {
[base.id]: http(`https://api.developer.coinbase.com/rpc/v1/base/${process.env.NEXT_PUBLIC_ONCHAINKIT_API_KEY}`),
},Add all needed chains to both the chains array and transports object:
import { base, baseSepolia } from "wagmi/chains";
export const wagmiConfig = createConfig({
chains: [base, baseSepolia],
transports: {
[base.id]: http(),
[baseSepolia.id]: http(),
},
// ...rest
});