快速上手

跳过本地安装

直接在 Playground 中试用 CCC——无需安装，在浏览器中即可运行示例。

最快的起步方式是使用 create-ccc-app，一条命令即可生成包含你所选框架的新项目：

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

yarn create ccc-app my-ccc-app

pnpm create ccc-app my-ccc-app

按提示选择框架模板，然后进入项目目录即可。

已有 React 应用？直接安装连接器包：

npm install @ckb-ccc/connector-react

yarn add @ckb-ccc/connector-react

pnpm add @ckb-ccc/connector-react

使用 Node.js 或其他框架？参见安装指南了解所有可用包。

在应用根节点添加 ccc.Provider，挂载钱包连接器 UI，并让 CCC context 在所有子组件中可用。

React Server Components

在任何使用 ccc.Provider 的文件顶部添加 "use client"。

默认网络

ccc.Provider 默认连接测试网。上线前通过 defaultClient 属性切换到主网。

app.tsx

"use client";
import { ccc } from "@ckb-ccc/connector-react";

export default function App({ children }: { children: React.ReactNode }) {
  return (
    <ccc.Provider
      name="My CKB App"
      icon="/icon.png"
    >
      {children}
    </ccc.Provider>
  );
}

属性	类型	说明
`name`	`string`	应用名称，显示在连接器 UI 中。
`icon`	`string`	应用图标的 URL。
`signerFilter`	`function`	过滤用户可见的钱包列表。
`defaultClient`	`ccc.Client`	覆盖默认的 CKB client（默认为测试网）。
`preferredNetworks`	`ccc.NetworkPreference[]`	钱包连接的首选网络。

在任意组件中调用 useCcc hook，打开钱包弹窗并访问已连接的 Signer：

component.tsx

"use client";
import { ccc } from "@ckb-ccc/connector-react";

export function ConnectButton() {
  const { open, wallet, signerInfo, disconnect } = ccc.useCcc();

  if (signerInfo) {
    return (
      <div>
        <p>已连接：{wallet?.name}</p>
        <button onClick={disconnect}>断开连接</button>
      </div>
    );
  }

  return <button onClick={open}>连接钱包</button>;
}

返回值	类型	说明
`open`	`() => void`	打开钱包连接器弹窗。
`close`	`() => void`	关闭连接器弹窗。
`disconnect`	`() => void`	断开当前钱包连接。
`wallet`	`ccc.Wallet \| undefined`	已连接的钱包对象（如有）。
`signerInfo`	`ccc.SignerInfo \| undefined`	当前活跃的 Signer 信息（如已连接）。
`client`	`ccc.Client`	当前活跃的 CKB client。

拿到 Signer 后就可以发送 CKB 了。只需描述输出内容，CCC 自动处理输入选择和手续费计算：

transfer.ts

import { ccc } from "@ckb-ccc/connector-react";

async function transfer(signer: ccc.Signer, toAddress: string, amount: string) {
  // 从地址字符串解析出收款方的 Lock Script
  const { script: toLock } = await ccc.Address.fromString(
    toAddress,
    signer.client,
  );

  // 声明交易要产生的输出
  const tx = ccc.Transaction.from({
    outputs: [{ lock: toLock, capacity: ccc.fixedPointFrom(amount) }],
  });

  // CCC 自动选择输入 Cell 以覆盖输出所需容量
  await tx.completeInputsByCapacity(signer);

  // CCC 计算手续费并调整找零输出
  await tx.completeFeeBy(signer);

  // 签名并广播，返回交易哈希
  const txHash = await signer.sendTransaction(tx);
  console.log("Transaction sent:", txHash);
  return txHash;
}

通过以下三个方法的调用，完成所有核心工作：

completeInputsByCapacity(signer)——查找足够的输入 Cell 以覆盖输出容量。
completeFeeBy(signer)——计算手续费并相应调整输入。
signer.sendTransaction(tx)——签名并广播交易，返回交易哈希。

下一步

阅读核心概念，了解每个 CKB 应用背后的构建模块。
查看安装指南，了解所有包选项和 TypeScript 配置。
打开 CCC Playground，在浏览器中实验在线示例。
浏览 API 参考文档，查看完整的类型和方法列表。