CCC

CCC - CKBers' Codebase is a one-stop solution for your CKB JS/TS ecosystem development.
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.

Use Cases

For non-developers, you can try CCC's app now here (Project source code). It showcases how to use CCC for some basic scenarios in CKB:

• Sign and verify any message. (Playground)
• Transfer native CKB token. (Playground)
• Transfer xUDT token. (Playground)
• See Misc: Single-Use-Seals to learn how token issuing works in the cell model.
  • Issue xUDT token with the Single-Use Lock.
  • Issue xUDT token controlled by a Type ID cell.
• Manage Nervos DAO.
• Transfer native CKB token with time lock.
• Calculate the CKB hash of any messages.
• Generate mnemonic and keypairs. Encrypt to a keystore.
• Decrypt a keystore.
• Transfer the native CKB token with the old Lumos SDK.

Examples

Check our full documents for all detailed APIs to understand these examples better. If you are new to the CKB, we recommend checking Nervos CKB Docs for basic knowledge. We build examples based on the CCC playground.

Cells are represented 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.

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); // Transaction fee rate is calculated automatically
const txHash = await signer.sendTransaction(tx);

We have done everything!

• Use specified wallet in custom UI.
• Use all supported wallets in custom UI.
• Sign and verify any message.
• Transfer native CKB token.
• Transfer all native CKB token.
• Transfer UDT token.

Quick Start with create-ccc-app (Recommended)

To quickly bootstrap a new CCC-based application, you can use our CLI tool create-ccc-app:

# Using npx
npx create-ccc-app@latest my-ccc-app

# Using yarn
yarn create ccc-app my-ccc-app

# Using pnpm
pnpm create ccc-app my-ccc-app

Follow the prompts to select your preferred framework template and start building your CCC application.

Manual Installation

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

• NodeJS: npm install @ckb-ccc/core
• Custom UI: npm install @ckb-ccc/ccc
• Web Component: npm install @ckb-ccc/connector
• React (Docs): 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";

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

2. 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?

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 node16, nodenext, 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:

• Support the JoyID Wallet.
• Support the Nostr Wallet.
• Support the Portal Wallet.

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

• CCC Playground and its GitHub Repo help you experiment with CCC instantly in browsers.
• Nervos CKB Docs is the documentation website of Nervos CKB.
• Lumos and its Docs: Lumos provides utils to help compose CKB transactions.
• RGB++ SDK and its Design: RGB++ is a protocol for issuing assets with Turing-completed VM on BTC L1.
• Spore SDK and its Docs: The on-chain digital object (DOBs) protocol designed to empower ownership, distribution, and value capture.
• PW SDK is not maintained anymore. It is the early-age wallet connector and a brave pioneer of the CKB ecosystem.