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 feature request

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

Docs

We use Vocs to power this site. Vocs includes support for twoslash to display types in code blocks on an opt-in basis.

To enable twoslash in any ts/tsx code block you can add twoslash after your code block declaration, i.e. ```tsx twoslash

If your codeblock is not valid, you will see errors generated from twoslash. If you cannot resolve these errors in code, it is possible to suppress twoslash using the noErrors syntax.

// @noErrors: 2304 - Cannot find name

Storybook

Storybook is a frontend workshop for building UI components and pages in isolation. It helps you develop and share hard-to-reach states and edge cases without needing to run your whole app.

To develop and test your components in Storybook, run the following command:

yarn storybook:dev
 
# In a browser, navigate to http://localhost:6006/

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