Skip to content

OnchainKit 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:

Setup

Clone this repo

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

Install node + yarn

Use nvm, mise, n or whatever works for you. Once node is installed, run this to enable yarn:

corepack enable

Install dependencies

cd onchainkit
 
yarn install

Codebase

Here is a rough layout of this codebase:

onchainkit
├── src
│   ├── core/                     - Files with zero dependencies
│   ├── token/                    - Token
│   │   ├── 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                  - Typescript entrypoint
│   ├── index.css                 - CSS entrypoint
│   └── OnchainKitProvider.tsx    - OnchainKit provider
└── site/
    ├── sidebar.ts                - Controls sidebar for the doc site
    └── docs/pages/**/*.mdx       - Documentation location

Workflows

Testing

Write and update existing unit tests. You can watch file changes and rerun tests automatically like this:

yarn test --watch

We expect 100% code coverage for any updates. You can get coverage information with:

yarn test:coverage

If the coverage drops below 100%, look at the coverage report generated by the above command with:

open coverage/lcov-report/index.html

Testing UI with hotreload

We use this doc site to test UI changes.

Navigate to the markdown used for the given file you are updating (i.e. site/docs/pages/identity/avatar.mdx) and change the import using relative import path like this:

import { Avatar } from '../../../../src/identity';
 
;

To bring up the doc site, run:

cd site
 
yarn install
 
yarn dev
 
# In a browser, navigate to http://localhost:5173

Your changes should automatically reflect in the doc site

Updating changelog

To update the change log, run:

yarn 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)

Use 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: ..."