GitHub - sscornelius/onchainkit: React components and TypeScript utilities to help you build top-tier onchain apps.

OnchainKit

React components and TypeScript utilities to help you build top-tier onchain apps.

Documentation

For documentation and guides, visit onchainkit.xyz.

Quickstart

You can use OnchainKit in an existing project, by installing OnchainKit as a dependency.

Install

Let's install OnchainKit as a dependency along with its dependencies.

# Yarn: Add library
yarn add @coinbase/onchainkit

# or

# Use NPM
npm install @coinbase/onchainkit

# Use PNPM
pnpm add @coinbase/onchainkit

# Use BUN
bun add @coinbase/onchainkit

Configure the OnchainKitProvider

The <OnchainKitProvider /> component equips your app with the essential context to interact with OnchainKit components and utilities.

Set the chain prop to your target chain and provide the API KEY to access the embedded APIs.

'use client';
import { ReactNode } from 'react';
import { base } from 'viem/chains';
import { OnchainKitProvider } from '@coinbase/onchainkit';

type Props = { children: ReactNode };

function OnchainProviders({ children }: Props) {
  return (
    <OnchainKitProvider apiKey="YOUR_PUBLIC_API_KEY" chain={base}>
      <YourKit />
    </OnchainKitProvider>
  );
};

export default OnchainProviders;

Obtain an API key from the Coinbase Developer Platform APIs.

Configure the WagmiProvider

Many of OnchainKit's components require a WagmiProvider to access Wagmi utilities.

If your application already includes these settings, you can skip this step.

OnchainProviders.tsx

'use client';
import { ReactNode } from 'react';
import { OnchainKitProvider } from '@coinbase/onchainkit';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query'; // [!code focus]
import { base } from 'viem/chains';
import { WagmiProvider } from 'wagmi'; // [!code focus]
import { wagmiConfig } from './wagmi'; // [!code focus]

type Props = { children: ReactNode };

const queryClient = new QueryClient(); // [!code focus]

function OnchainProviders({ children }: Props) {
  return (
    <WagmiProvider config={wagmiConfig}> // [!code focus]
      <QueryClientProvider client={queryClient}> // [!code focus]
        <OnchainKitProvider
          apiKey={YOUR_PUBLIC_API_KEY}
          chain={base}
        >
          {children} // [!code focus]
        </OnchainKitProvider>
      </QueryClientProvider> // [!code focus]
    </WagmiProvider> // [!code focus]
  );
}

export default OnchainProviders;

wagmi.ts

import { http, createConfig } from 'wagmi';
import { base } from 'wagmi/chains';
import { coinbaseWallet } from 'wagmi/connectors';

export const wagmiConfig = createConfig({
  chains: [base],
  multiInjectedProviderDiscovery: false,
  connectors: [
    coinbaseWallet({
      appName: 'yourAppName',
      preference: 'all',
      version: '4',
    }),
  ],
  ssr: true,
  transports: {
    [base.id]: http(),
  },
});

Style your components

All OnchainKit components come pre-configured with a style.

Simply place this at the top of your application's entry point to have the components working out of the box.

import '@coinbase/onchainkit/styles.css';

For tailwindcss users, follow the Tailwindcss Integration Guide.

Components

Display ENS avatars, Attestation badges, ENS names and account addresses.

<Identity
  address="0x838aD0EAE54F99F1926dA7C3b6bFbF617389B4D9"
  schemaId="0xf8b05c79f090979bf4a80270aba232dff11a10d9ca55c4f88de95317970f0de9"
>
  <Avatar>
    <Badge />
  </Avatar>
  <Name />
  <Address />
</Identity>

Convert your web page into a Frame

import { FrameMetadata } from '@coinbase/onchainkit/frame';

export default function HomePage() {
  return (
    ...
    <FrameMetadata
      buttons={[
        {
          label: 'Tell me the story',
        },
        {
          action: 'link',
          label: 'Link to Google',
          target: 'https://www.google.com'
        },
        {
          action: 'post_redirect',
          label: 'Redirect to cute pictures',
        },
      ]}
      image={{
       src: 'https://zizzamia.xyz/park-3.png',
       aspectRatio: '1:1'
      }}
      input={{
        text: 'Tell me a boat story',
      }}
      postUrl="https://zizzamia.xyz/api/frame"
    />
    ...
  );
}

Create or connect your wallet with Connect Wallet, powered by Smart Wallet.

<Wallet>
  <ConnectWallet>
    <Avatar className="h-6 w-6" />
    <Name />
  </ConnectWallet>
  <WalletDropdown>
    <Identity className="px-4 pt-3 pb-2" hasCopyAddressOnClick>
      <Avatar />
      <Name>
        <Badge />
      </Name>
      <Address />
      <EthBalance />
    </Identity>
    <WalletDropdownLink icon="wallet" href="https://wallet.coinbase.com">
      Go to Wallet Dashboard
    </WalletDropdownLink>
    <WalletDropdownDisconnect />
  </WalletDropdown>
</Wallet>

Search Tokens using getTokens and display them with TokenSearch, TokenChip, TokenImage and TokenRow

const [filteredTokens, setFilteredTokens] = useState<Token[]>([]);

const handleChange = useCallback((value) => {
async function getData(value) {
const tokens: Token[] = await getTokens({ search: value }); // [!code focus]
setFilteredTokens(filteredTokens);
}
getData(value);
}, []);
...

<div className="flex flex-col gap-4 rounded-3xl bg-white p-4">
  <TokenSearch onChange={handleChange} delayMs={200} /> // [!code focus]
  {filteredTokens.length > 0 && (
    <div className="flex gap-2">
      {filteredTokens.map((token) => (
        <TokenChip key={token.name} token={token} onClick={handleSelect} /> // [!code focus]
      ))}
    </div>
  )}
  {filteredTokens.length > 0 ? (
    <div>
      <div className="text-body text-black">Tokens</div>
      <div>
        {filteredTokens.map((token) => (
          <TokenRow key={token.name} token={token} onClick={handleSelect} /> // [!code focus]
        ))}
      </div>
    </div>
  ) : (
    <div className="text-body text-black">No tokens found</div>
  )}
</div>