Ccc
CCC - CKBers' Codebase is a one-stop solution for your CKB JS/TS ecosystem development.
Install / Use
/learn @ckb-devrel/CccREADME
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
<p align="center"> <a href="https://live.ckbccc.com/"> <img src="https://raw.githubusercontent.com/ckb-devrel/ccc/master/assets/preview.png" width="70%" /> </a> </p>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
# 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 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>";
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";
Examples
<p align="center"> <a href="https://app.ckbccc.com/"> <img src="https://raw.githubusercontent.com/ckb-devrel/ccc/master/assets/appPreview.png" width="50%" /> </a> </p>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) }],
});
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);
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:
- 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
- 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 style="height: 50px" src="https://raw.githubusercontent.com/ckb-devrel/ccc/master/assets/projects/nervdao.svg" /> | <img style="height: 50px" src="https://raw.githubusercontent.com/ckb-devrel/ccc/master/assets/projects/utxoglobal.svg" /> | <img style="height: 50px" src="https://raw.githubusercontent.com/ckb-devrel/ccc/master/assets/projects/mobit.svg" /> | <img style="height: 50px" src="https://raw.githubusercontent.com/ckb-devrel/ccc/master/assets/projects/omiga.svg" /> | | ---------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------- |
| <img style="height: 50px" src="https://raw.githubusercontent.com/ckb-devrel/ccc/master/assets/projects/nervape.svg" /> | <img style="height: 50px" src="https://raw.githubusercontent.com/ckb-devrel/ccc/master/assets/projects/utxoswap.svg" /> | <img style="height: 50px" src="https://raw.githubusercontent.com/ckb-devrel/ccc/master/assets/projects/did.svg" /> | <img style="height: 50px" src="https://raw.githubusercontent.com/ckb-devrel/ccc/master/assets/projects/boolnetwork.svg" /> | | -------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------ | ----------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------- |
| <img style="height: 50px" src="https://raw.githubusercontent.com/ckb-devrel/ccc/master/assets/projects/world3.svg" /> | <img style="height: 50px" src="https://raw.githubusercontent.com/ckb-devrel/ccc/master/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 node16, nodenext, or bundler, and resolvePackageJsonExports is not disabled.
Read the [TypeScript's Guide](https://www.typescriptlang.org/docs/handbook/modules/reference.html#packagejson-
