OnchainKit

React components and TypeScript utilities for top-tier onchain apps.

Documentation

For documentation and guides, visit onchainkit.xyz.

Features

OnchainKit offers three themes packed with React components and TypeScript utilities ready for action.

• Farcaster Kit

  • Utilities:
    • getFarcasterUserAddress

• Frame Kit

  • Components:
    • <FrameMetadata />
  • Utilities:
    • getFrameHtmlResponse
    • getFrameMessage
    • getFrameMetadata
  • Framegear

• Identity Kit

  • Components:
    • <Avatar />
    • <Name />
  • Utilities:
    • getEASAttestations

• XMTP Kit

  • Utilities:
    • getXmtpFrameMessage

Overview

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

# Yarn: Add library
yarn add @coinbase/onchainkit
# Yarn: Depending on the components or utilities you choose,
# you may end up utilizing any of those libraries.
yarn add [email protected] react@18 react-dom@18

# or

# Use NPM
npm install @coinbase/onchainkit
npm install [email protected] react@18 react-dom@18

# Use PNPM
pnpm add @coinbase/onchainkit
npm install [email protected] react@18 react-dom@18

Then, feel free to utilize any of the components or utilities, such as FrameMetadata.

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

Community ☁️ 🌁 ☁️

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

• Follow @zizzamia (X, Farcaster) for project updates
• Join the discussions on our OnchainKit warpcast channel

Authors

• @zizzamia (X)
• @cnasc (warpcast)
• @alvaroraminelli (X)
• @robpolak (X)
• @taycaldwell (X)
• @wespickett (X)
• @mochikuan (X)

License

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