Supplemental Providers · OnchainKit

Customize the Wagmi and QueryClient providers

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:

wagmi.ts

// @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>;
  }
}

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.