onchainkit

Name: onchainkit
Author: basezh

15stars1forks

How to install onchainkit?

basezh/agent-skills-on-base/onchainkit

$npx -y skills add basezh/agent-skills-on-base --skill onchainkit

Installs into the current project.

Summary

Build onchain applications with React components and TypeScript utilities from Coinbase's OnchainKit. Use when users want to create crypto wallets, swap tokens, mint NFTs, build payments, display blockchain identities, or develop any onchain app functionality. Supports wallet con

Files · 1

View on GitHub

SKILL.md

1	# OnchainKit
2
3	Build production-ready onchain applications using Coinbase's comprehensive React component library and TypeScript utilities.
4
5	## Overview
6
7	OnchainKit provides ready-to-use, full-stack components that abstract blockchain complexity, making it easy to build onchain applications without deep blockchain knowledge. It offers AI-friendly components that work automatically on Base, requires no backend infrastructure, and provides cost-effective transactions (< $0.01 fees).
8
9	## Quick Start
10
11	### New Project Setup
12	```bash
13	# Create a new onchain app with all batteries included
14	scripts/create-onchain-app.py <project-name>
15
16	# Verify setup
17	scripts/validate-setup.py
18	```
19
20	### Add to Existing Project
21	```bash
22	npm install @coinbase/onchainkit
23	# Setup configuration and providers
24	scripts/setup-environment.py
25	```
26
27	## Core Capabilities
28
29	### 1. Wallet Connection & Management
30	Connect users to their crypto wallets with minimal code:
31
32	```tsx
33	import { Wallet, ConnectWallet } from '@coinbase/onchainkit/wallet';
34
35	function WalletConnection() {
36	return (
37	<Wallet>
38	<ConnectWallet />
39	</Wallet>
40	);
41	}
42	```
43
44	Use cases:
45	- Wallet connection flows
46	- Display wallet status
47	- Manage connection state
48	- Handle multiple wallets
49
50	Reference: [references/wallet-integration.md](references/wallet-integration.md)
51
52	### 2. Identity Display
53	Show blockchain identities with ENS names, avatars, and verification badges:
54
55	```tsx
56	import { Identity, Avatar, Name, Badge } from '@coinbase/onchainkit/identity';
57
58	function UserProfile({ address }) {
59	return (
60	<Identity address={address}>
61	<Avatar />
62	<Name />
63	<Badge />
64	</Identity>
65	);
66	}
67	```
68
69	Reference: [references/identity-components.md](references/identity-components.md)
70
71	### 3. Token Operations
72	Handle token swaps, purchases, and transfers:
73
74	```tsx
75	import { Swap, SwapAmountInput, SwapButton } from '@coinbase/onchainkit/swap';
76
77	function TokenSwap() {
78	return (
79	<Swap>
80	<SwapAmountInput />
81	<SwapButton />
82	</Swap>
83	);
84	}
85	```
86
87	Supported operations:
88	- Token swaps (any ERC-20)
89	- Token purchases with fiat
90	- Balance displays
91	- Price feeds
92
93	Reference: [references/token-operations.md](references/token-operations.md)
94
95	### 4. Transaction Building
96	Create and execute blockchain transactions:
97
98	```tsx
99	import { Transaction, TransactionButton } from '@coinbase/onchainkit/transaction';
100
101	function SendTransaction({ calls }) {
102	return (
103	<Transaction calls={calls}>
104	<TransactionButton />
105	</Transaction>
106	);
107	}
108	```
109
110	Reference: [references/transactions.md](references/transactions.md)
111
112	### 5. Payment Processing
113	Build checkout flows and payment processing:
114
115	```tsx
116	import { Checkout, CheckoutButton } from '@coinbase/onchainkit/checkout';
117
118	function PaymentFlow() {
119	return (
120	<Checkout>
121	<CheckoutButton />
122	</Checkout>
123	);
124	}
125	```
126
127	Reference: [references/payments.md](references/payments.md)
128
129	### 6. NFT Integration
130	Display, mint, and manage NFTs:
131
132	```tsx
133	import { NFTCard } from '@coinbase/onchainkit/nft';
134
135	function NFTDisplay({ contract, tokenId }) {
136	return <NFTCard contract={contract} tokenId={tokenId} />;
137	}
138	```
139
140	Reference: [references/nft-integration.md](references/nft-integration.md)
141
142	## Common Workflows
143
144	### Setting Up a Complete App
145	1. Initialize project with `create-onchain-app.py`
146	2. Configure providers using setup templates
147	3. Add wallet connection with Wallet components
148	4. Implement core features (swap, buy, identity)
149	5. Test and deploy with validation scripts
150
151	### Building a Token Swap App
152	1. Start with swap app template from `assets/templates/swap-app/`
153	2. Configure token lists and supported chains
154	3. Add wallet connection flow
155	4. Implement swap interface
156	5. Add transaction confirmations
157
158	### Creating an NFT Marketplace
159	1. Use NFT template from `assets/templates/nft-mint/`
160	2. Set up NFT contract integration
161	3. Build minting interface
162	4. Add payment processing
163	5. Implement collection browsing
164
165	## Configuration & Setup
166
167	### Environment Variables
168	```bash
169	# Required for API access
170	NEXT_PUBLIC_CDP_API_KEY="your-api-key"
171	NEXT_PUBLIC_WC_PROJECT_ID="your-walletconnect-id"
172
173	# Optional configurations
174	NEXT_PUBLIC_CHAIN_ID="8453" # Base mainnet
175	```
176
177	Reference: [references/configuration.md](references/configuration.md)
178
179	### Provider Setup
180	OnchainKit requires proper React provider configuration:
181
182	```tsx
183	import { OnchainKitProvider } from '@coinbase/onchainkit';
184	import { WagmiProvider } from 'wagmi';
185
186	function App() {
187	return (
188	<WagmiProvider config={wagmiConfig}>
189	<

People who liked this also viewed

6 picks

Type

onchainkit

15stars1forks

View on GitHub

How to install onchainkit?

basezh/agent-skills-on-base/onchainkit

$npx -y skills add basezh/agent-skills-on-base --skill onchainkit

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	# OnchainKit
2
3	Build production-ready onchain applications using Coinbase's comprehensive React component library and TypeScript utilities.
4
5	## Overview
6
7	OnchainKit provides ready-to-use, full-stack components that abstract blockchain complexity, making it easy to build onchain applications without deep blockchain knowledge. It offers AI-friendly components that work automatically on Base, requires no backend infrastructure, and provides cost-effective transactions (< $0.01 fees).
8
9	## Quick Start
10
11	### New Project Setup
12	```bash
13	# Create a new onchain app with all batteries included
14	scripts/create-onchain-app.py <project-name>
15
16	# Verify setup
17	scripts/validate-setup.py
18	```
19
20	### Add to Existing Project
21	```bash
22	npm install @coinbase/onchainkit
23	# Setup configuration and providers
24	scripts/setup-environment.py
25	```
26
27	## Core Capabilities
28
29	### 1. Wallet Connection & Management
30	Connect users to their crypto wallets with minimal code:
31
32	```tsx
33	import { Wallet, ConnectWallet } from '@coinbase/onchainkit/wallet';
34
35	function WalletConnection() {
36	return (
37	<Wallet>
38	<ConnectWallet />
39	</Wallet>
40	);
41	}
42	```
43
44	Use cases:
45	- Wallet connection flows
46	- Display wallet status
47	- Manage connection state
48	- Handle multiple wallets
49
50	Reference: [references/wallet-integration.md](references/wallet-integration.md)
51
52	### 2. Identity Display
53	Show blockchain identities with ENS names, avatars, and verification badges:
54
55	```tsx
56	import { Identity, Avatar, Name, Badge } from '@coinbase/onchainkit/identity';
57
58	function UserProfile({ address }) {
59	return (
60	<Identity address={address}>
61	<Avatar />
62	<Name />
63	<Badge />
64	</Identity>
65	);
66	}
67	```
68
69	Reference: [references/identity-components.md](references/identity-components.md)
70
71	### 3. Token Operations
72	Handle token swaps, purchases, and transfers:
73
74	```tsx
75	import { Swap, SwapAmountInput, SwapButton } from '@coinbase/onchainkit/swap';
76
77	function TokenSwap() {
78	return (
79	<Swap>
80	<SwapAmountInput />
81	<SwapButton />
82	</Swap>
83	);
84	}
85	```
86
87	Supported operations:
88	- Token swaps (any ERC-20)
89	- Token purchases with fiat
90	- Balance displays
91	- Price feeds
92
93	Reference: [references/token-operations.md](references/token-operations.md)
94
95	### 4. Transaction Building
96	Create and execute blockchain transactions:
97
98	```tsx
99	import { Transaction, TransactionButton } from '@coinbase/onchainkit/transaction';
100
101	function SendTransaction({ calls }) {
102	return (
103	<Transaction calls={calls}>
104	<TransactionButton />
105	</Transaction>
106	);
107	}
108	```
109
110	Reference: [references/transactions.md](references/transactions.md)
111
112	### 5. Payment Processing
113	Build checkout flows and payment processing:
114
115	```tsx
116	import { Checkout, CheckoutButton } from '@coinbase/onchainkit/checkout';
117
118	function PaymentFlow() {
119	return (
120	<Checkout>
121	<CheckoutButton />
122	</Checkout>
123	);
124	}
125	```
126
127	Reference: [references/payments.md](references/payments.md)
128
129	### 6. NFT Integration
130	Display, mint, and manage NFTs:
131
132	```tsx
133	import { NFTCard } from '@coinbase/onchainkit/nft';
134
135	function NFTDisplay({ contract, tokenId }) {
136	return <NFTCard contract={contract} tokenId={tokenId} />;
137	}
138	```
139
140	Reference: [references/nft-integration.md](references/nft-integration.md)
141
142	## Common Workflows
143
144	### Setting Up a Complete App
145	1. Initialize project with `create-onchain-app.py`
146	2. Configure providers using setup templates
147	3. Add wallet connection with Wallet components
148	4. Implement core features (swap, buy, identity)
149	5. Test and deploy with validation scripts
150
151	### Building a Token Swap App
152	1. Start with swap app template from `assets/templates/swap-app/`
153	2. Configure token lists and supported chains
154	3. Add wallet connection flow
155	4. Implement swap interface
156	5. Add transaction confirmations
157
158	### Creating an NFT Marketplace
159	1. Use NFT template from `assets/templates/nft-mint/`
160	2. Set up NFT contract integration
161	3. Build minting interface
162	4. Add payment processing
163	5. Implement collection browsing
164
165	## Configuration & Setup
166
167	### Environment Variables
168	```bash
169	# Required for API access
170	NEXT_PUBLIC_CDP_API_KEY="your-api-key"
171	NEXT_PUBLIC_WC_PROJECT_ID="your-walletconnect-id"
172
173	# Optional configurations
174	NEXT_PUBLIC_CHAIN_ID="8453" # Base mainnet
175	```
176
177	Reference: [references/configuration.md](references/configuration.md)
178
179	### Provider Setup
180	OnchainKit requires proper React provider configuration:
181
182	```tsx
183	import { OnchainKitProvider } from '@coinbase/onchainkit';
184	import { WagmiProvider } from 'wagmi';
185
186	function App() {
187	return (
188	<WagmiProvider config={wagmiConfig}>
189	<

People who liked this also viewed

6 picks

Type