Contribution Guide

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 [email protected]: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: ...".