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: …”.