GitHub - ekincixyz/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

To integrate OnchainKit into your project, begin by installing the necessary packages.

# Yarn: Add library
yarn add @coinbase/onchainkit viem@2.x

# or

# Use NPM
npm install @coinbase/onchainkit viem@2.x

# Use PNPM
pnpm add @coinbase/onchainkit viem@2.x

Components

Display ENS avatars, Attestation badges, and ENS names.

const EAS_SCHEMA_ID = '0xf8b05c79f090979bf4a80270aba232dff11a10d9ca55c4f88de95317970f0de9';
const ACCOUNT_ADDRESS = '0x838aD0EAE54F99F1926dA7C3b6bFbF617389B4D9';

<OnchainKitProvider chain={base} schemaId={EAS_SCHEMA_ID}>
  <div className="flex h-10 items-center space-x-4">
    <Avatar address={ACCOUNT_ADDRESS} showAttestation />
    <div className="flex flex-col text-sm">
      <b>
        <Name address={ACCOUNT_ADDRESS} />
      </b>
      <Name address={ACCOUNT_ADDRESS} showAddress />
    </div>
  </div>
</OnchainKitProvider>;

Convert your web page into a Frame

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

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"
    />
    ...
  );
}