Supplemental Providers · OnchainKit - Base Documentation

Under the hood, OnchainKit will create our recommended Wagmi and QueryClient providers. If you wish to customize the providers, you can do so by creating these providers with your own configuration. For example, the following code creates custom Wagmi and QueryClient providers:

// @noErrors: 2554
import { http, cookieStorage, createConfig, createStorage } from 'wagmi';
import { base } from 'wagmi/chains'; // add baseSepolia for testing
import { coinbaseWallet } from 'wagmi/connectors';

export function getConfig() {
  return createConfig({
    chains: [base], // add baseSepolia for testing
    connectors: [
      coinbaseWallet({
        appName: 'OnchainKit',
        preference: 'smartWalletOnly',
        version: '4',
      }),
    ],
    storage: createStorage({
      storage: cookieStorage,
    }),
    ssr: true,
    transports: {
      [base.id]: http(), // add baseSepolia for testing
    },
  });
}

declare module 'wagmi' {
  interface Register {
    config: ReturnType<typeof getConfig>;
  }
}

// @noErrors: 2307 2580 2339 2554 - cannot find 'process', cannot find './wagmi', cannot find 'import.meta'
import { OnchainKitProvider } from '@coinbase/onchainkit';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { base } from 'wagmi/chains'; // add baseSepolia for testing
import { type ReactNode, useState } from 'react';
import { type State, WagmiProvider } from 'wagmi';

import { getConfig } from '@/wagmi'; // your import path may vary

export function Providers(props: {
  children: ReactNode;
  initialState?: State;
}) {
  const [config] = useState(() => getConfig());
  const [queryClient] = useState(() => new QueryClient());
  const apiKey =
    typeof window !== 'undefined'
      ? window.ENV?.PUBLIC_ONCHAINKIT_API_KEY
      : undefined; 

  return (
    <WagmiProvider config={config} initialState={props.initialState}>
      <QueryClientProvider client={queryClient}>
        <OnchainKitProvider
          apiKey={apiKey}
          chain={base} // add baseSepolia for testing
        >
          {props.children}
        </OnchainKitProvider>
      </QueryClientProvider>
    </WagmiProvider>
  );
}

Start building!

Explore our ready-to-use onchain components:

Identity – Show Basenames, avatars, badges, and addresses.
Wallet – Create or connect wallets with Connect Wallet.
Transaction – Handle transactions using EOAs or Smart Wallets.
Checkout – Integrate USDC checkout flows with ease.
Fund – Create a funding flow to onboard users.
Tokens – Search and display tokens with various components.
Swap – Enable token swaps in your app.
Mint – View and Mint NFTs in your app.

⌘I