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

Wallet
Transaction
Swap
Identity
Frame

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 className="badge"/>
      </Name>
      <Address />
      <EthBalance />
    </Identity>
    <WalletDropdownLink icon="wallet" href="https://keys.coinbase.com">
      Wallet
    </WalletDropdownLink>
    <WalletDropdownBasename />
    <WalletDropdownDisconnect />
  </WalletDropdown>
</Wallet>

Transaction

Trigger onchain operations and sponsor them with Paymaster.

Start with Transaction

<Transaction
  chainId={base.id}
  contracts={[
    {
      address: CONTRACT_ADDRESS,
      abi: CONTRACT_ABI,
      functionName: CONTRACT_FUNCTION_NAME,
      args: [],
    },
  ]}
>
  <TransactionButton />
  <TransactionSponsor />
  <TransactionStatus>
    <TransactionStatusLabel />
    <TransactionStatusAction />
  </TransactionStatus>
</Transaction>

Swap

Swap Tokens using the Swap components.

Start with Swap

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

Identity

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

Start with Identity

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

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