OnchainKit

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

npm

npm install @coinbase/onchainkit

Get started

Ready-to-use onchain components

Wallet
Transaction
Swap
Fund
Identity

Wallet

Create or connect 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>

Fund

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>