`<OnchainKitProvider />`

Provides the OnchainKit React Context to the app.

Usage

import { base } from 'viem/chains';
import { OnchainKitProvider } from '@coinbase/onchainkit';
 
const App = () => {
  return (
    <OnchainKitProvider
      config={{
        appearance: {
          name: 'OnchainKit Playground',
          logo: 'https://onchainkit.xyz/favicon/48x48.png?v4-19-24',
          mode: 'auto',
          theme: 'default',
        },
      }}
      chain={base}
    >
      <MyComponent />
    </OnchainKitProvider>
  );
};

Props

OnchainKitProviderReact

Prop	Description	Required
`chain`	The chain that your OnchainKit project supports.	Yes
`apiKey`	Client API Key from Coinbase Developer Platform.	No
`rpcUrl`	RPC URL for onchain requests.	No
`projectId`	Your Coinbase Developer Platform Project ID.	No
`config`	- `config.appearance` — Customize your OnchainKit project's appearance - `config.paymaster` — Paymaster URL for gas sponsorship - `config.wallet` — Wallet configuration options	No
`schemaId`	[Deprecation Pending] The schema ID for attestations from the Ethereum Attestation Service (EAS).	No
`address`	[Deprecation Pending] This prop is no longer used.	No

Chain

chain specifies the chain on which your OnchainKit project will operate.

This prop is required for all OnchainKit components.

We recommend importing chain data from viem.

`apiKey`

apiKey is your Coinbase Developer Platform Client API Key.

This prop is required for most OnchainKit components, including:

You can get a Client API Key from Coinbase Developer Platform.

RPC URL

rpcUrl is required for any onchain requests. If you provide your own RPC URL, OnchainKit will use it.

If you do not provide your own RPC URL, you must provide an apiKey, which enables OnchainKit to use the Coinbase Developer Platform Node.

Project ID

projectId is your Coinbase Developer Platform Project ID.

This prop is required for the <FundButton /> component.

You can obtain a Project ID from the Coinbase Developer Platform.

Config

config is an object that can be used to customize the appearance and behavior of the OnchainKit components.

This prop has three keys: appearance, paymaster, and wallet.

Appearance

appearance manages the appearance of the OnchainKit components and has the following properties:

name — The name of your OnchainKit project
logo — The URL of the logo for your OnchainKit project
mode — The mode of the OnchainKit components. Can be auto, dark, or light.
theme — The theme of the OnchainKit components. Can be base, cyberpunk, default, hacker, or a custom theme.

Explore appearance options in the OnchainKit Playground.

Paymaster

paymaster represents the Paymaster URL that enables you to sponsor gas for your users.

You can configure your Paymaster and obtain your Paymaster URL from the Coinbase Developer Platform.

Wallet

wallet configures the wallet connection experience and has the following properties:

display — The display mode for the wallet interface. Can be either:
- 'modal' — Shows wallet connection in a modal overlay with wallet aggregation
- 'classic' — Shows wallet connection in the traditional inline style
termsUrl — URL to your terms of service
privacyUrl — URL to your privacy policy

Address [Deprecation Pending]

address is no longer used and will be removed in a future version of OnchainKit.

Schema ID [Deprecation Pending]

schemaId is no longer used as OnchainKit now defaults to using Coinbase attestations for the <Badge /> component.

This prop will be removed in a future version of OnchainKit.