Home

Awesome

<p align="center"> <a href="https://app.ckbccc.com/"> <img alt="Logo" src="https://raw.githubusercontent.com/ckb-ecofund/ccc/master/assets/logo.svg" width="20%" /> </a> </p> <h1 align="center" style="font-size: 64px;"> CCC </h1> <p align="center"> <a href="https://www.npmjs.com/package/@ckb-ccc/ccc"><img alt="NPM Version" src="https://img.shields.io/npm/v/%40ckb-ccc%2Fccc" /></a> <img alt="GitHub commit activity" src="https://img.shields.io/github/commit-activity/m/ckb-ecofund/ccc" /> <img alt="GitHub last commit" src="https://img.shields.io/github/last-commit/ckb-ecofund/ccc/master" /> <img alt="GitHub branch check runs" src="https://img.shields.io/github/check-runs/ckb-ecofund/ccc/master" /> <a href="https://live.ckbccc.com/"><img alt="Playground" src="https://img.shields.io/website?url=https%3A%2F%2Flive.ckbccc.com%2F&label=Playground" /></a> <a href="https://app.ckbccc.com/"><img alt="App" src="https://img.shields.io/website?url=https%3A%2F%2Fapp.ckbccc.com%2F&label=App" /></a> <a href="https://docs.ckbccc.com/"><img alt="Docs" src="https://img.shields.io/website?url=https%3A%2F%2Fdocs.ckbccc.com%2F&label=Docs" /></a> </p> <p align="center"> "CCC - CKBers' Codebase" is the next step of "Common Chains Connector". <br /> Empower yourself with CCC to discover the unlimited potential of CKB. <br /> Interoperate with wallets from different chain ecosystems. <br /> Fully enabling CKB's Turing completeness and cryptographic freedom power. </p>

Playground

<p align="center"> <a href="https://live.ckbccc.com/"> <img src="https://raw.githubusercontent.com/ckb-ecofund/ccc/master/assets/preview.png" width="90%" /> </a> </p>

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.

<p align="center"> <a href="https://live.ckbccc.com/"> <img src="https://raw.githubusercontent.com/ckb-ecofund/ccc/master/assets/playgroundCell.png" width="40%" /> </a> </p>

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.

App

<p align="center"> <a href="https://app.ckbccc.com/"> <img src="https://raw.githubusercontent.com/ckb-ecofund/ccc/master/assets/appPreview.png" width="50%" /> </a> </p>

For non-developers, you can also try CCC's app now here. It showcases how to use CCC for some basic scenarios in CKB.

Transaction Composing

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!

Installing

We design CCC for both front-end and back-end developers. You need only one package to fulfil all your needs:

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";

Documents

Check our full documents for all detailed APIs.

The demo source code contains some basic examples:

Build and Run

Run the demo of CCC in two steps:

  1. Install packages and build the project
# Navigate to the project directory and run the following commands to install all necessary packages and build the project:
pnpm install
pnpm build
  1. Run the demo in development mode
# Go to the demo directory and start the development server:
cd packages/demo
pnpm run dev

Who uses CCC?

<img height="50" src="https://raw.githubusercontent.com/ckb-ecofund/ccc/master/assets/projects/utxoswap.svg" /><img height="50" src="https://raw.githubusercontent.com/ckb-ecofund/ccc/master/assets/projects/mobit.svg" /><img height="50" src="https://raw.githubusercontent.com/ckb-ecofund/ccc/master/assets/projects/did.svg" /><img height="50" src="https://raw.githubusercontent.com/ckb-ecofund/ccc/master/assets/projects/omiga.svg" />
<img height="50" src="https://raw.githubusercontent.com/ckb-ecofund/ccc/master/assets/projects/nervape.svg" /><img height="50" src="https://raw.githubusercontent.com/ckb-ecofund/ccc/master/assets/projects/utxoglobal.svg" /><img height="50" src="https://raw.githubusercontent.com/ckb-ecofund/ccc/master/assets/projects/boolnetwork.svg" /><img height="50" src="https://raw.githubusercontent.com/ckb-ecofund/ccc/master/assets/projects/joydao.svg" /><img height="50" src="https://raw.githubusercontent.com/ckb-ecofund/ccc/master/assets/projects/world3.svg" />
<img height="50" src="assets/projects/rgbcat.svg" />

FAQs

Property '*' does not exist on type 'typeof import("*/@ckb-ccc/connector-react/dist/barrel")'.ts(2339)

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 node16nodenext, or bundler, and resolvePackageJsonExports is not disabled.

Read the TypeScript's Guide for more.

TypeError: (0, react....createContext) is not a function

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.

Can I use Lumos with CCC?

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());

Links