Welcome to OnchainKit! So you want to contribute to this project? You came to the right place. In this guide, you will learn how to:

Setup

Clone the repo

git clone git@github.com:coinbase/onchainkit.git

Install Node and pnpm

Use nvm, mise, n or your favorite version manager to install Node.js. For pnpm, see the installation instructions on the pnpm website.

Install dependencies

From the root of the repository:
pnpm install

Codebase

This project is a monorepo managed with pnpm. The @coinbase/onchainkit package is located in:
packages/onchainkit/
Here is a rough layout of the codebase:
packages/onchainkit/
└── src/
   ├── api/                         - API related components and functions
   ├── core/                        - Files with zero dependencies
   ├── styles/                      - Styles
   │   ├── index-with-tailwind.css  - CSS entrypoint
   ├── {Component}/                 - Component folder
   │   ├── components/              - React components
   │   │   ├── {Name}.tsx
   │   │   ├── {Name}.test.tsx
   │   │   └── {Name}.css
   │   ├── core/                    - Utility functions
   │   ├── index.ts                 - Entrypoint for the folder
   │   └── types.ts                 - Export types
   │
   ├── index.ts                     - Main package entry point
   ├── types.ts                     - Core types
   └── OnchainKitProvider.tsx       - OnchainKit provider

Workflows

Development

To work on OnchainKit components with live UI feedback:
pnpm f:play dev
This will build the OnchainKit package in watch mode, and start a development environment (the playground) where you can see your components in action. As you make changes, the playground will update automatically. Navigate to http://localhost:3000 to open the playground.

Building

To build the package:
pnpm f:ock build

Testing

Write and update existing unit tests. You can run tests with:
pnpm f:ock test
For watching file changes and rerunning tests automatically:
pnpm f:ock test:watch
We expect 100% code coverage for any updates. You can get coverage information with:
pnpm f:ock test:coverage
If the coverage drops below 100%, look at the coverage report generated by the above command with:
open coverage/index.html

Updating changelog

To update the change log, run:
pnpm changeset
Select minor and use the following format for the summary:
- **feat**: feature update information. By @your-github-id #XX (XX is the PR number)
Possible values are:
  • feat
  • fix
  • docs
  • chore

Feature request

Have a component in mind that we are not supporting yet? You can submit a feature request to our Github. Create a “New issue” and label it “Feature Request: …”.