The Problem
Developers building on‑chain UX need reusable React components and TypeScript helpers that abstract low‑level blockchain calls, wallet integration, and transaction building. Without a shared library, each project re‑implements similar logic, leading to duplicated effort, inconsistent error handling, and higher maintenance cost.
What This Does
onchainkit is a monorepo that ships three primary packages:
packages/onchainkit – core React components (OnchainKitProvider, DefaultOnchainKitProviders) and a suite of API helpers (src/api/buildMintTransaction.ts, src/api/getPriceQuote.ts, etc.). The public entry is src/api/index.ts. packages/create-onchain – a CLI (src/cli.ts) that scaffolds a full Next.js “mini‑app” using the core kit (packages/create-onchain/src/minikit.ts). packages/miniapp‑manifest‑generator – a small UI app that creates signed manifests for Farcaster mini‑apps (src/App.tsx, src/hooks/useSignManifest.ts).
All packages share a PNPM workspace configuration (see root package.json with "workspaces"), enabling a single pnpm install to pull dependencies for every package. CI is defined in .github/workflows/.yml, running lint, format, and Vitest test suites.
How To Use It
Setup
git clone https://github.com/coinbase/onchainkit.git cd onchainkit pnpm install # installs all workspace packages
Node 20 and PNPM 10 are required (documented in the root README).
Configuration
The core kit expects a wagmi client and an alchemy (or other RPC) provider. Example code lives in examples/minikit-example/app/components/Context.tsx, where wagmi config is created and passed to <OnchainKitProvider>.
Running the example
pnpm f:play dev # starts the playground (Next.js) on http://localhost:3000
The playground lives in examples/minikit-example. For a fresh project, use the CLI:
pnpm f:create run cli -- create my-app # scaffolds a new mini‑app under ./my-app cd my-app pnpm install pnpm dev
(See packages/create-onchain/src/cli.ts for supported flags.)
Using the library
Import components or API helpers directly:
import { OnchainKitProvider } from '@coinbase/onchainkit'; import { getPriceQuote } from '@coinbase/onchainkit/api';
function App() { const quote = await getPriceQuote({ token: 'USDC', amount: '1' }); return <OnchainKitProvider>{/ UI /}</OnchainKitProvider>; }
All TypeScript types are exported from src/api/types.ts.
Real‑World Use
A DeFi front‑end can embed <SwapButton /> (found in packages/onchainkit/src/appchain/bridge/components/) to let users swap tokens without writing contract interaction code. The component internally calls buildSwapTransaction and getSwapQuote, handling gas estimation and error mapping, so the host app only needs to supply a connected wallet and RPC URL.
Code Health & Issues
Low – Missing lockfile for example – examples/minikit-example/package.json lacks a pnpm-lock.yaml; reproducible builds rely on workspace lock only. Low – Duplicate lint configs – Both root and example have separate ESLint configs (eslint.config.mjs vs examples/minikit-example/eslint.config.mjs); could drift. Medium – No explicit runtime env validation – API helpers read RPC URLs from the provider but do not guard against undefined values; callers must ensure config. Low – Test coverage appears complete – 51 test files across all packages, and the README badge claims 100 % coverage; Vitest config present (vitest.config.ts). Low – License present – MIT license in LICENSE.md. Low – CI runs on every push – Multiple GitHub Actions (build, lint, format, test) indicate a healthy SDLC.
No obvious security secrets are committed, and the monorepo uses strict TypeScript settings (tsconfig.json with "strict": true).
The Bottom Line
onchainkit delivers a well‑structured, type‑safe React toolkit for on‑chain interactions, backed by a CLI scaffold and solid test/CI coverage. It is ready for integration in production DeFi or NFT front‑ends, provided the consuming app supplies proper wallet and RPC configuration. The primary limitation is the lack of a lockfile for the example package, which is easily remedied. Teams looking to accelerate on‑chain UI development will find the library immediately useful.