KitProvider

The root provider component for @web3marketlabs/react. It wraps Wagmi’s WagmiProvider and TanStack Query’s QueryClientProvider, providing the necessary context for all other Web3.Market React components and hooks.

import { KitProvider } from '@web3marketlabs/react'
 
<KitProvider config={wagmiConfig}>
  {children}
</KitProvider>

⚠️

KitProvider must wrap your entire application. All Web3.Market components (ConnectButton, TransactionButton) and generated hooks require it as an ancestor.

Props

KitProviderProps

Parameter	Type	Description
`config`*	Config (wagmi)	A Wagmi configuration object created with createConfig(). Defines chains, transports, connectors, and other Wagmi settings.
`children`*	ReactNode	Child components that will have access to the Wagmi and TanStack Query context.

Internal Defaults

KitProvider creates a QueryClient internally with the following default options:

Option	Value	Description
`staleTime`	`5_000` (5 seconds)	How long query data is considered fresh before refetching
`gcTime`	`10 * 60 * 1000` (10 minutes)	How long unused query data remains in the cache before garbage collection

These defaults are set on the queries key of QueryClient.defaultOptions. You do not need to create your own QueryClient or QueryClientProvider — KitProvider handles this internally.

Full Example

import { createConfig, http } from 'wagmi'
import { mainnet, sepolia } from 'wagmi/chains'
import { KitProvider } from '@web3marketlabs/react'
 
const config = createConfig({
  chains: [mainnet, sepolia],
  transports: {
    [mainnet.id]: http(),
    [sepolia.id]: http(),
  },
})
 
export default function App() {
  return (
    <KitProvider config={config}>
      <YourApp />
    </KitProvider>
  )
}

What It Renders

KitProvider renders the following component tree:

<WagmiProvider config={config}>
  <QueryClientProvider client={queryClient}>
    {children}
  </QueryClientProvider>
</WagmiProvider>

The QueryClient instance is created once via useState to ensure it remains stable across re-renders.

Source

export interface KitProviderProps {
  config: Config
  children: ReactNode
}

Defined in @web3marketlabs/react — src/components/KitProvider.tsx.

Index ConnectButton