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.

Use Cases

We design CCC to optimize various use cases, including:

• Learn CKB: Numerous basic code examples and web demos based on CCC help you quickly understand how CKB works.
• Analyze Data: Leverage CCC to interact with CKB nodes and process blockchain data programmatically.
• Compose Transaction: Highly intuitive and customizable transaction composition, with helpers to simplify the process.
• Sign Easily: Unified Signing interface with pre-built signing methods to interoperate with multiple chains seamlessly.
• Connect Wallets: Integrate the connector component in a minute or smoothly build a customized wallet connection UI, enabling your app to reach a wider audience.

Read our documents or API reference to learn more about CCC. If you are new to the CKB, we also recommend Nervos CKB Docs for basic knowledge.

Try in the Playground

The CCC Playground is an integrated testing environment in web browsers that supports data visualization and code-sharing. Click the link to run your code without the annoying preparation and watch how the code works, exploring CCC's capabilities.

For an explanation of the visual elements and interface components in the playground, please refer to the CCC Playground guide.

Quick Start with create-ccc-app

Besides short testing, CCC is also suitable for building scalable applications. To get started quickly, you can use our CLI tool create-ccc-app to bootstrap a new CCC-based application:

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

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

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

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

Manual Installation

Whether you are a front-end or back-end developer, CCC provides helpful tools and capabilities:

• NodeJS: npm install @ckb-ccc/shell
• Custom UI: npm install @ckb-ccc/ccc
• Web Component: npm install @ckb-ccc/connector
• React (Docs): npm install @ckb-ccc/connector-react

All exports from CCC are available on the ccc object to help with code completion:

import { ccc } from "@ckb-ccc/<package-name>";
Copy

If you are an advanced developer and wish to customize your code heavily, the <package-name>/advanced entry point exports cccA, which contains almost everything else. Be aware that these interfaces are not stable:

import { cccA } from "@ckb-ccc/<package-name>/advanced";
Copy

Examples

The CCC App is a mini-toolset for CKB, showcasing some basic scenarios. You can still try the CCC App here even if you are not a developer. To learn more about the app's features, visit the documentation.

Transaction Composing

Let's start with a minimal example for transferring CKB:

const tx = ccc.Transaction.from({
  outputs: [{ lock: toLock, capacity: ccc.fixedPointFrom(amount) }],
});
Copy

Define the essential outputs of the transaction, and then...

await tx.completeInputsByCapacity(signer);
await tx.completeFeeBy(signer); // Transaction fee rate is calculated automatically
const txHash = await signer.sendTransaction(tx);
Copy

That's it! The transaction is sent.

Click here to read the full example of transferring native CKB token.

Additional examples can be found in the documentation.

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
Copy

2. Run the demo in development mode

# Go to the demo directory and start the development server:
cd packages/demo
pnpm run dev
Copy

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

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

Links

• CCC Playground and its source code 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.