OnchainKit

Build your onchain apps with ready-to-use React components and Typescript utilities.

npm

npm install @coinbase/onchainkit

View docs

Ready-to-use onchain components

Identity
Wallet
Tokens
Swap
Frame

Identity

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

Start with Identity

<Identity
  address="0x838aD0EAE54F99F1926dA7C3b6bFbF617389B4D9"
  schemaId="0xf8b05c79f090979bf4a80270aba232dff11a10d9ca55c4f88de95317970f0de9"
  className="rounded-xl"
>
  <Avatar>
    <Badge />
  </Avatar>
  <Name />
  <Address />
</Identity>

Wallet

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

Start with 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>

Tokens

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

Start with Tokens

const [filteredTokens, setFilteredTokens] = useState<Token[]>([]);
...
 
const tokens: Token[] = await getTokens({ search: value }); 
setFilteredTokens(filteredTokens);
...
 
<div className="flex flex-col gap-4 rounded-3xl bg-white p-4">
  <TokenSearch onChange={handleChange} delayMs={200} />
  {filteredTokens.length > 0 && (
    <div className="flex gap-2">
      {filteredTokens.map((token) => (
        <TokenChip key={token.name} token={token} onClick={handleSelect} /> 
      ))}
    </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} /> 
        ))}
      </div>
    </div>
  ) : (
    <div className="text-body text-black">No tokens found</div>
  )}
</div>

Swap

Swap Tokens using the Swap components.

Start with Swap

<Swap address={address}>
  <SwapAmountInput
    label="Sell"
    swappableTokens={swappableTokens}
    token={ETHToken}
    type="from"
  />
  <SwapToggleButton />
  <SwapAmountInput
    label="Buy"
    swappableTokens={swappableTokens}
    token={USDCToken}
    type="to"
  />
  <SwapButton />
  <SwapMessage />
</Swap>

Frame

Test, build, and ship your Farcaster frames with FrameMetadata.

Start with Frame

<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',
  }}
  state={{
    counter: 1,
  }}
  postUrl="https://zizzamia.xyz/api/frame"
/>

From design to development

Take ownership over design or collaborate efficiently with designers