"CCC - CKBers' Codebase" is the next step of "Common Chains Connector".
Empower yourself with CCC to discover the unlimited potential of CKB.
Interoperate with wallets from different chain ecosystems.
Fully enabling CKB's Turing completeness and cryptographic freedom power.
This project is still under active development, and we are looking forward to your feedback. You can experiment instantly in the playground. If you are new to the CKB, we recommend checking Nervos CKB Docs for basic knowledge.
We represent cells with graphs in the playground. The three layers of cells represent occupancy, type and lock from inside to outside. The filled center circle means that all CKB of this cell is used to store data.
When cells share the same color, the same script governs them. They are owned by the same address (the outside ring) or the same type of assets (the inside ring). Check the script details in the "Scripts" tab.
For non-developers, you can also try CCC's app now here. It showcases how to use CCC for some basic scenarios in CKB.
Here's an example for transferring CKB:
const tx = ccc.Transaction.from({
outputs: [{ lock: toLock, capacity: ccc.fixedPointFrom(amount) }],
});
Tell CCC what you need, and then...
await tx.completeInputsByCapacity(signer);
await tx.completeFeeBy(signer, 1000); // Transaction fee rate
const txHash = await signer.sendTransaction(tx);
We have done everything!
We design CCC for both front-end and back-end developers. You need only one package to fulfil all your needs:
npm install @ckb-ccc/core
npm install @ckb-ccc/ccc
npm install @ckb-ccc/connector
npm install @ckb-ccc/connector-react
CCC exports everything on the ccc
object:
import { ccc } from "@ckb-ccc/<package-name>";
For advanced developers, we provided the cccA
object to fulfil all your needs. You should notice that these interfaces are not stable:
import { cccA } from "@ckb-ccc/<package-name>/advanced";
Check our full documents for all detailed APIs.
The demo source code contains some basic examples:
Run the demo of CCC in two steps:
# Navigate to the project directory and run the following commands to install all necessary packages and build the project:
pnpm install
pnpm build
# Go to the demo directory and start the development server:
cd packages/demo
pnpm run dev
CCC uses JS's Package Entry Points feature to help tree shaking while exporting everything on the ccc
object. Ensure in your tsconfig.json
, moduleResolution
is set to node16
, nodenext
, or bundler
, and resolvePackageJsonExports
is not disabled.
Read the TypeScript's Guide for more.
CCC UI only works on the client side. If you are using the React Server Component, add
"use client";
at the beginning of files using ccc.Provider
.
While we recommend using CCC for composing transactions, we also provide Lumos patches to:
See lumos-patches: npm install @ckb-ccc/lumos-patches
You can apply patches by:
import { generateDefaultScriptInfos } from "@ckb-ccc/lumos-patches";
// Before using Lumos. You don't need @ckb-lumos/joyid anymore.
registerCustomLockScriptInfos(generateDefaultScriptInfos());