Skip to content

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

License

Notifications You must be signed in to change notification settings

navalboyblue/onchainkit

 
 

Repository files navigation

OnchainKit logo vibes

OnchainKit

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

Version MIT License Downloads per month


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.

OnchainKit copy API KEY

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>
OnchainKit Identity components

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> 
OnchainKit Wallet components OnchainKit Wallet components

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>
OnchainKit Wallet components

Utilities

If you're seeking basic TypeScript utilities, we have plenty of ready-to-use options available.

Config
Frames
Identity
Swap
Token
Wallet
Farcaster
XMTP

Design

All our component designs are open-sourced. You can access the Figma file to use them for your onchain project.

Figma - How to use

OnchainKit logo vibes

Figma - Components

OnchainKit logo vibes

Community ☁️ 🌁 ☁️

Check out the following places for more OnchainKit-related content:

Authors

License

This project is licensed under the MIT License - see the LICENSE.md file for details

About

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

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages

  • TypeScript 75.1%
  • MDX 23.5%
  • Other 1.4%