Contribution Guide · OnchainKit

Learn how to contribute to OnchainKit

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:

• Set up this project
• Navigate the codebase
• Accomplish various workflows
• Submit a feature request

Setup

Clone the repo

git clone [e-mail]: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: …”.