Skip to main content

JavaScript/TypeScript (CCC)

Introduction

Common Chain Connector (CCC) is a JavaScript/Typescript SDK tailored for CKB. Highly recommended as the primary CKB development tool, CCC offers advantages over alternatives such as Lumos and ckb-js-sdk.

CCC also serves as a wallet connector enhancing interoperability between wallets across different blockchains. Explore by checking out the CCC Demo.

Install Packages

CCC is designed for both front-end and back-end developers. It streamlines the development process by offering a single package that caters to a variety of requirements:

npm install @ckb-ccc/core

To use CCC, import the desired package:

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

CCC encapsulates all functionalities within the ccc object, providing a unified interface.

For advanced developers, CCC introduces cccA object that offers a comprehensive set of advanced features:

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

Please notice that these advanced interfaces are subject to change and may not be as stable as the core API.

Transaction Composing

Below is a example demonstrating how to compose a transaction for transferring CKB:

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

// Instruct CCC to complete the transaction
await tx.completeInputsByCapacity(signer);
await tx.completeFeeBy(signer, 1000); // Specify the transaction fee rate
const txHash = await signer.sendTransaction(tx); // Send and get the transaction hash

Examples

Sign and Verify Message

Toggle to view code
"use client";

import { ccc } from "@ckb-ccc/connector-react";
import React, { useState } from "react";
import { Button } from "@/src/components/Button";
import { TextInput } from "@/src/components/Input";
import { useApp } from "@/src/context";
import { ButtonsPanel } from "@/src/components/ButtonsPanel";

export default function Sign() {
const { signer, createSender } = useApp();
const { log, error } = createSender("Sign");

const [messageToSign, setMessageToSign] = useState<string>("");
const [signature, setSignature] = useState<string>("");
return (
<div className="flex w-full flex-col items-stretch">
<TextInput
label="Message"
placeholder="Message to sign and verify"
state={[messageToSign, setMessageToSign]}
/>
<ButtonsPanel>
<Button
onClick={async () => {
if (!signer) {
return;
}
const sig = JSON.stringify(await signer.signMessage(messageToSign));
setSignature(sig);
log("Signature:", sig);
}}
>
Sign
</Button>
<Button
className="ml-2"
onClick={async () => {
if (
!(await ccc.Signer.verifyMessage(
messageToSign,
JSON.parse(signature)
))
) {
error("Invalid");
return;
}
log("Valid");
}}
>
Verify
</Button>
</ButtonsPanel>
</div>
);
}

Calculate CKB Hash of Any Message

Toggle to view code
"use client";

import React, { useState } from "react";
import { TextInput } from "@/src/components/Input";
import { Button } from "@/src/components/Button";
import { ccc } from "@ckb-ccc/connector-react";
import { Textarea } from "@/src/components/Textarea";
import { useGetExplorerLink } from "@/src/utils";
import { useApp } from "@/src/context";
import { ButtonsPanel } from "@/src/components/ButtonsPanel";

export default function TransferXUdt() {
const { signer, createSender } = useApp();
const { log } = createSender("Transfer xUDT");

const { explorerTransaction } = useGetExplorerLink();

const [xUdtArgs, setXUdtArgs] = useState<string>("");
const [transferTo, setTransferTo] = useState<string>("");
const [amount, setAmount] = useState<string>("");

return (
<div className="flex w-full flex-col items-stretch">
<TextInput
label="Args"
placeholder="xUdt args to transfer"
state={[xUdtArgs, setXUdtArgs]}
/>
<Textarea
label="Address"
placeholder="Addresses to transfer to, separated by lines"
state={[transferTo, setTransferTo]}
/>
<TextInput
label="amount"
placeholder="Amount to transfer for each"
state={[amount, setAmount]}
/>
<ButtonsPanel>
<Button
className="self-center"
onClick={async () => {
if (!signer) {
return;
}
const toAddresses = await Promise.all(
transferTo
.split("\n")
.map((addr) => ccc.Address.fromString(addr, signer.client))
);
const { script: change } = await signer.getRecommendedAddressObj();

const xUdtType = await ccc.Script.fromKnownScript(
signer.client,
ccc.KnownScript.XUdt,
xUdtArgs
);

const tx = ccc.Transaction.from({
outputs: toAddresses.map(({ script }) => ({
lock: script,
type: xUdtType,
})),
outputsData: Array.from(Array(toAddresses.length), () =>
ccc.numLeToBytes(amount, 16)
),
});
await tx.completeInputsByUdt(signer, xUdtType);
const balanceDiff =
(await tx.getInputsUdtBalance(signer.client, xUdtType)) -
tx.getOutputsUdtBalance(xUdtType);
if (balanceDiff > ccc.Zero) {
tx.addOutput(
{
lock: change,
type: xUdtType,
},
ccc.numLeToBytes(balanceDiff, 16)
);
}
await tx.addCellDepsOfKnownScripts(
signer.client,
ccc.KnownScript.XUdt
);
await tx.completeInputsByCapacity(signer);
await tx.completeFeeBy(signer, 1000);

// Sign and send the transaction
log(
"Transaction sent:",
explorerTransaction(await signer.sendTransaction(tx))
);
}}
>
Transfer
</Button>
</ButtonsPanel>
</div>
);
}

Transfer CKB Tokens

Toggle to view code
"use client";

import React, { useState } from "react";
import { TextInput } from "@/src/components/Input";
import { Button } from "@/src/components/Button";
import { Textarea } from "@/src/components/Textarea";
import { ccc } from "@ckb-ccc/connector-react";
import { bytesFromAnyString, useGetExplorerLink } from "@/src/utils";
import { useApp } from "@/src/context";
import { ButtonsPanel } from "@/src/components/ButtonsPanel";

export default function Transfer() {
const { signer, createSender } = useApp();
const { log, error } = createSender("Transfer");

const { explorerTransaction } = useGetExplorerLink();

const [transferTo, setTransferTo] = useState<string>("");
const [amount, setAmount] = useState<string>("");
const [data, setData] = useState<string>("");

return (

<div className="flex w-full flex-col items-stretch">
<Textarea
label="Address"
placeholder="Addresses to transfer to, separated by lines"
state={[transferTo, setTransferTo]}
/>
<TextInput
label="Amount"
placeholder="Amount to transfer for each"
state={[amount, setAmount]}
/>
<Textarea
label="Output Data(Options)"
state={[data, setData]}
placeholder="Leave empty if you don't know what this is. Data in the first output. Hex string will be parsed."
/>
<ButtonsPanel>
<Button
onClick={async () => {
if (!signer) {
return;
}
if (transferTo.split("\n").length !== 1) {
error("Only one destination is allowed for max amount");
return;
}

log("Calculating the max amount...");
// Verify destination address
const { script: toLock } = await ccc.Address.fromString(
transferTo,
signer.client,
);

// Build the full transaction to estimate the fee
const tx = ccc.Transaction.from({
outputs: [{ lock: toLock }],
outputsData: [bytesFromAnyString(data)],
});

// Complete missing parts for transaction
await tx.completeInputsByCapacity(signer);
// Change all balance to the first output
await tx.completeFeeChangeToOutput(signer, 0, 1000);
const amount = ccc.fixedPointToString(tx.outputs[0].capacity);
log("You can transfer at most", amount, "CKB");
setAmount(amount);
}}
>
Max Amount
</Button>
<Button
className="ml-2"
onClick={async () => {
if (!signer) {
return;
}
// Verify destination addresses
const toAddresses = await Promise.all(
transferTo
.split("\n")
.map((addr) => ccc.Address.fromString(addr, signer.client)),
);

const tx = ccc.Transaction.from({
outputs: toAddresses.map(({ script }) => ({ lock: script })),
outputsData: [bytesFromAnyString(data)],
});

// CCC transactions are easy to be edited
tx.outputs.forEach((output, i) => {
if (output.capacity > ccc.fixedPointFrom(amount)) {
error(`Insufficient capacity at output ${i} to store data`);
return;
}
output.capacity = ccc.fixedPointFrom(amount);
});

// Complete missing parts for transaction
await tx.completeInputsByCapacity(signer);
await tx.completeFeeBy(signer, 1000);

// Sign and send the transaction
log(
"Transaction sent:",
explorerTransaction(await signer.sendTransaction(tx)),
);
}}
>
Transfer
</Button>
</ButtonsPanel>
</div>

);
}

Transfer Native CKB Tokens With Lumos SDK

Toggle to view code
"use client";

import React, { useState } from "react";
import { TextInput } from "@/src/components/Input";
import { Button } from "@/src/components/Button";
import { ccc } from "@ckb-ccc/connector-react";
import common, {
registerCustomLockScriptInfos,
} from "@ckb-lumos/common-scripts/lib/common";
import { generateDefaultScriptInfos } from "@ckb-ccc/lumos-patches";
import { Indexer } from "@ckb-lumos/ckb-indexer";
import { TransactionSkeleton } from "@ckb-lumos/helpers";
import { predefined } from "@ckb-lumos/config-manager";
import { Textarea } from "@/src/components/Textarea";
import { useGetExplorerLink } from "@/src/utils";
import { useApp } from "@/src/context";
import { ButtonsPanel } from "@/src/components/ButtonsPanel";

export default function TransferLumos() {
const { signer, createSender } = useApp();
const { log, error } = createSender("Transfer with Lumos");

const { explorerTransaction } = useGetExplorerLink();

const [transferTo, setTransferTo] = useState<string>("");
const [amount, setAmount] = useState<string>("");
const [data, setData] = useState<string>("");
return (
<>
<div className="flex w-full flex-col items-stretch">
<TextInput
label="Address"
placeholder="Address to transfer to"
state={[transferTo, setTransferTo]}
/>
<TextInput
label="Amount"
placeholder="Amount to transfer"
state={[amount, setAmount]}
/>
<Textarea
label="Output Data(options)"
state={[data, setData]}
placeholder="Data in the cell. Hex string will be parsed."
/>
<ButtonsPanel>
<Button
className="self-center"
onClick={async () => {
if (!signer) {
return;
}
// Verify destination address
await ccc.Address.fromString(transferTo, signer.client);

const fromAddresses = await signer.getAddresses();
// === Composing transaction with Lumos ===
registerCustomLockScriptInfos(generateDefaultScriptInfos());
const indexer = new Indexer(
signer.client.url
.replace("wss://", "https://")
.replace("ws://", "http://")
.replace(new RegExp("/ws/?$"), "/"),
);
let txSkeleton = new TransactionSkeleton({
cellProvider: indexer,
});
txSkeleton = await common.transfer(
txSkeleton,
fromAddresses,
transferTo,
ccc.fixedPointFrom(amount),
undefined,
undefined,
{
config:
signer.client.addressPrefix === "ckb"
? predefined.LINA
: predefined.AGGRON4,
},
);
txSkeleton = await common.payFeeByFeeRate(
txSkeleton,
fromAddresses,
BigInt(3600),
undefined,
{
config:
signer.client.addressPrefix === "ckb"
? predefined.LINA
: predefined.AGGRON4,
},
);
// ======

const tx = ccc.Transaction.fromLumosSkeleton(txSkeleton);

// CCC transactions are easy to be edited
const dataBytes = (() => {
try {
return ccc.bytesFrom(data);
} catch (e) {}

return ccc.bytesFrom(data, "utf8");
})();
if (
tx.outputs[0].capacity < ccc.fixedPointFrom(dataBytes.length)
) {
error("Insufficient capacity to store data");
return;
}
tx.outputsData[0] = ccc.hexFrom(dataBytes);

// Sign and send the transaction
log(
"Transaction sent:",
explorerTransaction(await signer.sendTransaction(tx)),
);
}}
>
Transfer
</Button>
</ButtonsPanel>
</div>
</>
);
}

Issue xUDT Tokens With Single-Use Lock

Toggle to view code
"use client";

import { useState } from "react";
import { TextInput } from "@/src/components/Input";
import { Button } from "@/src/components/Button";
import { ccc } from "@ckb-ccc/connector-react";
import { tokenInfoToBytes, useGetExplorerLink } from "@/src/utils";
import { Message } from "@/src/components/Message";
import React from "react";
import { useApp } from "@/src/context";
import { ButtonsPanel } from "@/src/components/ButtonsPanel";

export default function IssueXUdtSul() {
const { signer, createSender } = useApp();
const { log, error } = createSender("Issue xUDT (SUS)");

const { explorerTransaction } = useGetExplorerLink();

const [amount, setAmount] = useState<string>("");
const [decimals, setDecimals] = useState<string>("");
const [name, setName] = useState<string>("");
const [symbol, setSymbol] = useState<string>("");
return (

<>
<div className="flex w-full flex-col items-stretch">
<Message title="Hint" type="info">
You will need to sign two or three transactions.
</Message>

<TextInput
label="Amount"
placeholder="Amount to issue"
state={[amount, setAmount]}
/>
<TextInput
label="Decimals"
placeholder="Decimals of the token"
state={[decimals, setDecimals]}
/>
<TextInput
label="Symbol"
placeholder="Symbol of the token"
state={[symbol, setSymbol]}
/>
<TextInput
label="Name"
placeholder="Name of the token, same as symbol if empty"
state={[name, setName]}
/>

<ButtonsPanel>
<Button
className="self-center"
onClick={async () => {
if (!signer) {
return;
}
if (decimals === "" || symbol === "") {
error("Invalid token info");
return;
}

const { script } = await signer.getRecommendedAddressObj();

const susTx = ccc.Transaction.from({
outputs: [
{
lock: script,
},
],
});
await susTx.completeInputsByCapacity(signer);
await susTx.completeFeeBy(signer, 1000);
const susTxHash = await signer.sendTransaction(susTx);
log("Transaction sent:", explorerTransaction(susTxHash));
await signer.client.cache.markUnusable({
txHash: susTxHash,
index: 0,
});

const singleUseLock = await ccc.Script.fromKnownScript(
signer.client,
ccc.KnownScript.SingleUseLock,
ccc.OutPoint.from({
txHash: susTxHash,
index: 0,
}).toBytes(),
);
const lockTx = ccc.Transaction.from({
outputs: [
// Owner cell
{
lock: singleUseLock,
},
],
});
await lockTx.completeInputsByCapacity(signer);
await lockTx.completeFeeBy(signer, 1000);
const lockTxHash = await signer.sendTransaction(lockTx);
log("Transaction sent:", explorerTransaction(lockTxHash));

const mintTx = ccc.Transaction.from({
inputs: [
// SUS
{
previousOutput: {
txHash: susTxHash,
index: 0,
},
},
// Owner cell
{
previousOutput: {
txHash: lockTxHash,
index: 0,
},
},
],
outputs: [
// Issued xUDT
{
lock: script,
type: await ccc.Script.fromKnownScript(
signer.client,
ccc.KnownScript.XUdt,
singleUseLock.hash(),
),
},
// xUDT Info
{
lock: script,
type: await ccc.Script.fromKnownScript(
signer.client,
ccc.KnownScript.UniqueType,
"00".repeat(32),
),
},
],
outputsData: [
ccc.numLeToBytes(amount, 16),
tokenInfoToBytes(decimals, symbol, name),
],
});
await mintTx.addCellDepsOfKnownScripts(
signer.client,
ccc.KnownScript.SingleUseLock,
ccc.KnownScript.XUdt,
ccc.KnownScript.UniqueType,
);
await mintTx.completeInputsByCapacity(signer);
if (!mintTx.outputs[1].type) {
error("Unexpected disappeared output");
return;
}
mintTx.outputs[1].type!.args = ccc.hexFrom(
ccc.bytesFrom(ccc.hashTypeId(mintTx.inputs[0], 1)).slice(0, 20),
);
await mintTx.completeFeeBy(signer, 1000);
log(
"Transaction sent:",
explorerTransaction(await signer.sendTransaction(mintTx)),
);
}}
>
Issue
</Button>
</ButtonsPanel>
</div>
</>

);
}

Issue xUDT Tokens Controlled by a Type ID Cell

Toggle to view code
"use client";

import React, { useState } from "react";
import { TextInput } from "@/src/components/Input";
import { Button } from "@/src/components/Button";
import { ccc } from "@ckb-ccc/connector-react";
import { tokenInfoToBytes, useGetExplorerLink } from "@/src/utils";
import { Message } from "@/src/components/Message";
import { useApp } from "@/src/context";
import { ButtonsPanel } from "@/src/components/ButtonsPanel";

export default function IssueXUdtTypeId() {
const { signer, createSender } = useApp();
const { log, error } = createSender("Issue xUDT (Type ID)");

const { explorerTransaction } = useGetExplorerLink();

const [typeIdArgs, setTypeIdArgs] = useState<string>("");
const [amount, setAmount] = useState<string>("");
const [decimals, setDecimals] = useState<string>("");
const [name, setName] = useState<string>("");
const [symbol, setSymbol] = useState<string>("");
return (
<>
<div className="flex w-full flex-col items-stretch">
<Message title="Hint" type="info">
You will need to sign two or three transactions.
</Message>
<TextInput
label="Type ID(options)"
placeholder="Type ID args, empty to create new"
state={[typeIdArgs, setTypeIdArgs]}
/>
<TextInput
label="Amount"
placeholder="Amount to issue"
state={[amount, setAmount]}
/>
<TextInput
label="Decimals"
placeholder="Decimals of the token"
state={[decimals, setDecimals]}
/>
<TextInput
label="Symbol"
placeholder="Symbol of the token"
state={[symbol, setSymbol]}
/>
<TextInput
label="Name (options)"
placeholder="Name of the token, same as symbol if empty"
state={[name, setName]}
/>
<ButtonsPanel>
<Button
className="self-center"
onClick={async () => {
if (!signer) {
return;
}
const { script } = await signer.getRecommendedAddressObj();
if (decimals === "" || symbol === "") {
error("Invalid token info");
return;
}

const typeId = await (async () => {
if (typeIdArgs !== "") {
return ccc.Script.fromKnownScript(
signer.client,
ccc.KnownScript.TypeId,
typeIdArgs,
);
}
const typeIdTx = ccc.Transaction.from({
outputs: [
{
lock: script,
type: await ccc.Script.fromKnownScript(
signer.client,
ccc.KnownScript.TypeId,
"00".repeat(32),
),
},
],
});
await typeIdTx.completeInputsByCapacity(signer);
if (!typeIdTx.outputs[0].type) {
error("Unexpected disappeared output");
return;
}
typeIdTx.outputs[0].type.args = ccc.hashTypeId(
typeIdTx.inputs[0],
0,
);
await typeIdTx.completeFeeBy(signer, 1000);
log(
"Transaction sent:",
explorerTransaction(await signer.sendTransaction(typeIdTx)),
);
log("Type ID created: ", typeIdTx.outputs[0].type.args);
return typeIdTx.outputs[0].type;
})();
if (!typeId) {
return;
}

const outputTypeLock = await ccc.Script.fromKnownScript(
signer.client,
ccc.KnownScript.OutputTypeProxyLock,
typeId.hash(),
);
const lockTx = ccc.Transaction.from({
outputs: [
// Owner cell
{
lock: outputTypeLock,
},
],
});
await lockTx.completeInputsByCapacity(signer);
await lockTx.completeFeeBy(signer, 1000);
const lockTxHash = await signer.sendTransaction(lockTx);
log("Transaction sent:", explorerTransaction(lockTxHash));

const typeIdCell =
await signer.client.findSingletonCellByType(typeId);
if (!typeIdCell) {
error("Type ID cell not found");
return;
}
const mintTx = ccc.Transaction.from({
inputs: [
// Type ID
{
previousOutput: typeIdCell.outPoint,
},
// Owner cell
{
previousOutput: {
txHash: lockTxHash,
index: 0,
},
},
],
outputs: [
// Keep the Type ID cell
typeIdCell.cellOutput,
// Issued xUDT
{
lock: script,
type: await ccc.Script.fromKnownScript(
signer.client,
ccc.KnownScript.XUdt,
outputTypeLock.hash(),
),
},
// xUDT Info
{
lock: script,
type: await ccc.Script.fromKnownScript(
signer.client,
ccc.KnownScript.UniqueType,
"00".repeat(32),
),
},
],
outputsData: [
typeIdCell.outputData,
ccc.numLeToBytes(amount, 16),
tokenInfoToBytes(decimals, symbol, name),
],
});
await mintTx.addCellDepsOfKnownScripts(
signer.client,
ccc.KnownScript.OutputTypeProxyLock,
ccc.KnownScript.XUdt,
ccc.KnownScript.UniqueType,
);
await mintTx.completeInputsByCapacity(signer);
if (!mintTx.outputs[2].type) {
throw new Error("Unexpected disappeared output");
}
mintTx.outputs[2].type!.args = ccc.hexFrom(
ccc.bytesFrom(ccc.hashTypeId(mintTx.inputs[0], 2)).slice(0, 20),
);
await mintTx.completeFeeBy(signer, 1000);
log(
"Transaction sent:",
explorerTransaction(await signer.sendTransaction(mintTx)),
);
}}
>
Issue
</Button>
</ButtonsPanel>
</div>
</>
);
}

Transfer xUDT Tokens

Toggle to view code
"use client";

import React, { useState } from "react";
import { TextInput } from "@/src/components/Input";
import { Button } from "@/src/components/Button";
import { ccc } from "@ckb-ccc/connector-react";
import { Textarea } from "@/src/components/Textarea";
import { useGetExplorerLink } from "@/src/utils";
import { useApp } from "@/src/context";
import { ButtonsPanel } from "@/src/components/ButtonsPanel";

export default function TransferXUdt() {
const { signer, createSender } = useApp();
const { log } = createSender("Transfer xUDT");

const { explorerTransaction } = useGetExplorerLink();

const [xUdtArgs, setXUdtArgs] = useState<string>("");
const [transferTo, setTransferTo] = useState<string>("");
const [amount, setAmount] = useState<string>("");
return (

<div className="flex w-full flex-col items-stretch">
<TextInput
label="Args"
placeholder="xUdt args to transfer"
state={[xUdtArgs, setXUdtArgs]}
/>
<Textarea
label="Address"
placeholder="Addresses to transfer to, separated by lines"
state={[transferTo, setTransferTo]}
/>
<TextInput
label="amount"
placeholder="Amount to transfer for each"
state={[amount, setAmount]}
/>
<ButtonsPanel>
<Button
className="self-center"
onClick={async () => {
if (!signer) {
return;
}
const toAddresses = await Promise.all(
transferTo
.split("\n")
.map((addr) => ccc.Address.fromString(addr, signer.client)),
);
const { script: change } = await signer.getRecommendedAddressObj();

const xUdtType = await ccc.Script.fromKnownScript(
signer.client,
ccc.KnownScript.XUdt,
xUdtArgs,
);

const tx = ccc.Transaction.from({
outputs: toAddresses.map(({ script }) => ({
lock: script,
type: xUdtType,
})),
outputsData: Array.from(Array(toAddresses.length), () =>
ccc.numLeToBytes(amount, 16),
),
});
await tx.completeInputsByUdt(signer, xUdtType);
const balanceDiff =
(await tx.getInputsUdtBalance(signer.client, xUdtType)) -
tx.getOutputsUdtBalance(xUdtType);
if (balanceDiff > ccc.Zero) {
tx.addOutput(
{
lock: change,
type: xUdtType,
},
ccc.numLeToBytes(balanceDiff, 16),
);
}
await tx.addCellDepsOfKnownScripts(
signer.client,
ccc.KnownScript.XUdt,
);
await tx.completeInputsByCapacity(signer);
await tx.completeFeeBy(signer, 1000);

// Sign and send the transaction
log(
"Transaction sent:",
explorerTransaction(await signer.sendTransaction(tx)),
);
}}
>
Transfer
</Button>
</ButtonsPanel>
</div>

);
}

Manage NervosDAO

Toggle to view code
"use client";

import React, { useEffect, useMemo, useState } from "react";
import { TextInput } from "@/src/components/Input";
import { Button } from "@/src/components/Button";
import { ccc } from "@ckb-ccc/connector-react";
import { useGetExplorerLink } from "@/src/utils";
import { useApp } from "@/src/context";
import { ButtonsPanel } from "@/src/components/ButtonsPanel";
import { BigButton } from "@/src/components/BigButton";

function parseEpoch(epoch: ccc.Epoch): ccc.FixedPoint {
return (
ccc.fixedPointFrom(epoch[0].toString()) +
(ccc.fixedPointFrom(epoch[1].toString()) * ccc.fixedPointFrom(1)) /
ccc.fixedPointFrom(epoch[2].toString())
);
}

function getProfit(
dao: ccc.Cell,
depositHeader: ccc.ClientBlockHeader,
withdrawHeader: ccc.ClientBlockHeader,
): ccc.Num {
const occupiedSize = ccc.fixedPointFrom(
dao.cellOutput.occupiedSize + ccc.bytesFrom(dao.outputData).length,
);
const profitableSize = dao.cellOutput.capacity - occupiedSize;

return (
(profitableSize * withdrawHeader.dao.ar) / depositHeader.dao.ar -
profitableSize
);
}

function getClaimEpoch(
depositHeader: ccc.ClientBlockHeader,
withdrawHeader: ccc.ClientBlockHeader,
): ccc.Epoch {
const depositEpoch = depositHeader.epoch;
const withdrawEpoch = withdrawHeader.epoch;
const intDiff = withdrawEpoch[0] - depositEpoch[0];
// deposit[1] withdraw[1]
// ---------- <= -----------
// deposit[2] withdraw[2]
if (
intDiff % ccc.numFrom(180) !== ccc.numFrom(0) ||
depositEpoch[1] * withdrawEpoch[2] <= depositEpoch[2] * withdrawEpoch[1]
) {
return [
depositEpoch[0] +
(intDiff / ccc.numFrom(180) + ccc.numFrom(1)) * ccc.numFrom(180),
depositEpoch[1],
depositEpoch[2],
];
}
return [
depositEpoch[0] + (intDiff / ccc.numFrom(180)) * ccc.numFrom(180),
depositEpoch[1],
depositEpoch[2],
];
}

function DaoButton({ dao }: { dao: ccc.Cell }) {
const { signer, createSender } = useApp();
const { log, error } = createSender("Transfer");

const { explorerTransaction } = useGetExplorerLink();

const [tip, setTip] = useState<ccc.ClientBlockHeader | undefined>();
const [infos, setInfos] = useState<
| [
ccc.Num,
ccc.ClientTransactionResponse,
ccc.ClientBlockHeader,
[undefined | ccc.ClientTransactionResponse, ccc.ClientBlockHeader],
]
| undefined
>();

const isNew = useMemo(() => dao.outputData === "0x0000000000000000", [dao]);
useEffect(() => {
if (!signer) {
return;
}

(async () => {
const tipHeader = await signer.client.getTipHeader();
setTip(tipHeader);

const previousTx = await signer.client.getTransaction(
dao.outPoint.txHash,
);
if (!previousTx?.blockHash) {
return;
}
const previousHeader = await signer.client.getHeaderByHash(
previousTx.blockHash,
);
if (!previousHeader) {
return;
}

const claimInfo = await (async (): Promise<typeof infos> => {
if (isNew) {
return;
}

const depositTxHash =
previousTx.transaction.inputs[Number(dao.outPoint.index)]
.previousOutput.txHash;
const depositTx = await signer.client.getTransaction(depositTxHash);
if (!depositTx?.blockHash) {
return;
}
const depositHeader = await signer.client.getHeaderByHash(
depositTx.blockHash,
);

if (!depositHeader) {
return;
}
return [
getProfit(dao, depositHeader, previousHeader),
depositTx,
depositHeader,
[previousTx, previousHeader],
];
})();

if (claimInfo) {
setInfos(claimInfo);
} else {
setInfos([
getProfit(dao, previousHeader, tipHeader),
previousTx,
previousHeader,
[undefined, tipHeader],
]);
}
})();
}, [dao, signer, isNew]);
return (
<BigButton
key={ccc.hexFrom(dao.outPoint.toBytes())}
size="sm"
iconName="Vault"
onClick={() => {
if (!signer || !infos) {
return;
}

(async () => {
const [profit, depositTx, depositHeader] = infos;
if (!depositTx.blockHash || !depositTx.blockNumber) {
error(
"Unexpected empty block info for",
explorerTransaction(dao.outPoint.txHash),
);
return;
}
const { blockHash, blockNumber } = depositTx;

let tx;
if (isNew) {
tx = ccc.Transaction.from({
headerDeps: [blockHash],
inputs: [{ previousOutput: dao.outPoint }],
outputs: [dao.cellOutput],
outputsData: [ccc.numLeToBytes(blockNumber, 8)],
});

await tx.addCellDepsOfKnownScripts(
signer.client,
ccc.KnownScript.NervosDao,
);

await tx.completeInputsByCapacity(signer);
await tx.completeFeeBy(signer, 1000);
} else {
if (!infos[3]) {
error("Unexpected no found deposit info");
return;
}
const [withdrawTx, withdrawHeader] = infos[3];
if (!withdrawTx?.blockHash) {
error("Unexpected empty withdraw tx block info");
return;
}
if (!depositTx.blockHash) {
error("Unexpected empty deposit tx block info");
return;
}

tx = ccc.Transaction.from({
headerDeps: [withdrawTx.blockHash, blockHash],
inputs: [
{
previousOutput: dao.outPoint,
since: {
relative: "absolute",
metric: "epoch",
value: ccc.numLeFromBytes(
ccc.epochToHex(
getClaimEpoch(depositHeader, withdrawHeader),
),
),
},
},
],
outputs: [
{
lock: (await signer.getRecommendedAddressObj()).script,
},
],
witnesses: [
ccc.WitnessArgs.from({
inputType: ccc.numLeToBytes(1, 8),
}).toBytes(),
],
});
await tx.addCellDepsOfKnownScripts(
signer.client,
ccc.KnownScript.NervosDao,
);

await tx.completeInputsByCapacity(signer);
await tx.completeFeeChangeToOutput(signer, 0, 1000);
tx.outputs[0].capacity += profit;
}

// Sign and send the transaction
log(
"Transaction sent:",
explorerTransaction(await signer.sendTransaction(tx)),
);
})();
}}
className={`align-center ${isNew ? "text-yellow-400" : "text-orange-400"}`}
>
<div className="text-md flex flex-col">
<span>
{ccc.fixedPointToString(
(dao.cellOutput.capacity / ccc.fixedPointFrom("0.01")) *
ccc.fixedPointFrom("0.01"),
)}
</span>
{infos ? (
<span className="-mt-1 text-sm">
+
{ccc.fixedPointToString(
(infos[0] / ccc.fixedPointFrom("0.0001")) *
ccc.fixedPointFrom("0.0001"),
)}
</span>
) : undefined}
</div>
<div className="flex flex-col text-sm">
{infos && tip ? (
<div className="flex whitespace-nowrap">
{ccc.fixedPointToString(
((parseEpoch(getClaimEpoch(infos[2], infos[3][1])) -
parseEpoch(tip.epoch)) /
ccc.fixedPointFrom("0.001")) *
ccc.fixedPointFrom("0.001"),
)}{" "}
epoch
</div>
) : undefined}
<span>{isNew ? "Withdraw" : "Claim"}</span>
</div>
</BigButton>
);
}

export default function Transfer() {
const { signer, createSender } = useApp();
const { log, error } = createSender("Transfer");

const { explorerTransaction } = useGetExplorerLink();

const [amount, setAmount] = useState<string>("");
const [daos, setDaos] = useState<ccc.Cell[]>([]);

useEffect(() => {
if (!signer) {
return;
}

(async () => {
const daos = [];
for await (const cell of signer.findCells(
{
script: await ccc.Script.fromKnownScript(
signer.client,
ccc.KnownScript.NervosDao,
"0x",
),
scriptLenRange: [33, 34],
outputDataLenRange: [8, 9],
},
true,
)) {
daos.push(cell);
setDaos(daos);
}
})();
}, [signer]);
return (
<div className="flex w-full flex-col items-stretch">
<TextInput
label="Amount"
placeholder="Amount to deposit"
state={[amount, setAmount]}
/>
<div className="mt-4 flex flex-wrap justify-center gap-2">
{daos.map((dao) => (
<DaoButton key={ccc.hexFrom(dao.outPoint.toBytes())} dao={dao} />
))}
</div>
<ButtonsPanel>
<Button
onClick={async () => {
if (!signer) {
return;
}

const { script: lock } = await signer.getRecommendedAddressObj();

const tx = ccc.Transaction.from({
outputs: [
{
lock,
type: await ccc.Script.fromKnownScript(
signer.client,
ccc.KnownScript.NervosDao,
"0x",
),
},
],
outputsData: ["00".repeat(8)],
});
await tx.addCellDepsOfKnownScripts(
signer.client,
ccc.KnownScript.NervosDao,
);

await tx.completeInputsByCapacity(signer);
await tx.completeFeeChangeToOutput(signer, 0, 1000);

const amount = ccc.fixedPointToString(tx.outputs[0].capacity);
log("You can deposit at most", amount, "CKB");
setAmount(amount);
}}
>
Max Amount
</Button>
<Button
className="ml-2"
onClick={async () => {
if (!signer) {
return;
}

const { script: lock } = await signer.getRecommendedAddressObj();

const tx = ccc.Transaction.from({
outputs: [
{
lock,
type: await ccc.Script.fromKnownScript(
signer.client,
ccc.KnownScript.NervosDao,
"0x",
),
},
],
outputsData: ["00".repeat(8)],
});
await tx.addCellDepsOfKnownScripts(
signer.client,
ccc.KnownScript.NervosDao,
);

if (tx.outputs[0].capacity > ccc.fixedPointFrom(amount)) {
error(
"Insufficient capacity at output, min",
ccc.fixedPointToString(tx.outputs[0].capacity),
"CKB",
);
return;
}
tx.outputs[0].capacity = ccc.fixedPointFrom(amount);

await tx.completeInputsByCapacity(signer);
await tx.completeFeeBy(signer, 1000);

// Sign and send the transaction
log(
"Transaction sent:",
explorerTransaction(await signer.sendTransaction(tx)),
);
}}
>
Deposit
</Button>
</ButtonsPanel>
</div>
);
}

Generate Mnemonics & Keypairs and Encrypt to a Keystore

Toggle to view code
"use client";

import { ccc } from "@ckb-ccc/connector-react";
import React, { useEffect, useMemo, useState } from "react";
import { Button } from "@/src/components/Button";
import { TextInput } from "@/src/components/Input";
import * as bip39 from "@scure/bip39";
import { wordlist } from "@scure/bip39/wordlists/english";
import { HDKey } from "@scure/bip32";
import { useApp } from "@/src/context";
import { ButtonsPanel } from "@/src/components/ButtonsPanel";

export default function Mnemonic() {
const { client } = ccc.useCcc();
const { createSender } = useApp();
const { log } = createSender("Mnemonic");

const [mnemonic, setMnemonic] = useState<string>("");
const [password, setPassword] = useState<string>("");
const [countStr, setCountStr] = useState<string>("10");
const [accounts, setAccount] = useState<
{
publicKey: string;
privateKey: string;
address: string;
path: string;
}[]

> ([]);
> const isValid = useMemo(

() => bip39.validateMnemonic(mnemonic, wordlist),
[mnemonic],

);

useEffect(() => setAccount([]), [mnemonic]);

useEffect(() => {
(async () => {
let modified = false;
const newAccounts = await Promise.all(
accounts.map(async (acc) => {
const address = await new ccc.SignerCkbPublicKey(
client,
acc.publicKey,
).getRecommendedAddress();
if (address !== acc.address) {
modified = true;
}
acc.address = address;
return acc;
}),
);
if (modified) {
setAccount(newAccounts);
}
})();
}, [client, accounts]);
return (

<div className="mb-1 flex w-9/12 flex-col items-stretch">
<TextInput
label="Mnemonic"
placeholder="Mnemonic"
state={[mnemonic, setMnemonic]}
/>
<TextInput
label="Accounts count"
placeholder="Accounts count"
state={[countStr, setCountStr]}
/>
<TextInput
label="Password"
placeholder="Password"
state={[password, setPassword]}
/>
{accounts.length !== 0 ? (
<div className="mt-1 w-full overflow-scroll whitespace-nowrap bg-white">
<p>path, address, private key</p>
{accounts.map(({ privateKey, address, path }) => (
<p key={path}>
{path}, {address}, {privateKey}
</p>
))}
</div>
) : undefined}
<ButtonsPanel>
<Button
onClick={() => {
setMnemonic(bip39.generateMnemonic(wordlist));
}} >
Random Mnemonic
</Button>
<Button
className="ml-2"
onClick={async () => {
const count = parseInt(countStr, 10);
const seed = await bip39.mnemonicToSeed(mnemonic);
const hdKey = HDKey.fromMasterSeed(seed);
setAccount([
...accounts,
...Array.from(new Array(count), (_, i) => {
const path = `m/44'/309'/0'/0/${i}`;
const derivedKey = hdKey.derive(path);
return {
publicKey: ccc.hexFrom(derivedKey.publicKey!),
privateKey: ccc.hexFrom(derivedKey.privateKey!),
path,
address: "",
};
}),
]);
}}
disabled={!isValid || Number.isNaN(parseInt(countStr, 10))} >
More accounts
</Button>
<Button
className="ml-2"
onClick={async () => {
const seed = await bip39.mnemonicToSeed(mnemonic);
const hdKey = HDKey.fromMasterSeed(seed);
log(
JSON.stringify(
await ccc.keystoreEncrypt(
hdKey.privateKey!,
hdKey.chainCode!,
password,
),
),
);
}}
disabled={!isValid} >
To Keystore
</Button>
{accounts.length !== 0 ? (
<Button
as="a"
className="ml-2"
href={`data:application/octet-stream,path%2C%20address%2C%20private%20key%0A${accounts .map(({ privateKey, address, path }) => encodeURIComponent(`${path}, ${address}, ${privateKey}`),
)
.join("\n")}`}
download={`ckb_accounts_${Date.now()}.csv`} >
Save as CSV
</Button>
) : undefined}
</ButtonsPanel>
</div>
);
}

Decrypt a Keystore

Toggle to view code
"use client";

import { ccc } from "@ckb-ccc/connector-react";
import React, { useEffect, useState } from "react";
import { Button } from "@/src/components/Button";
import { TextInput } from "@/src/components/Input";
import { HDKey } from "@scure/bip32";
import { Textarea } from "@/src/components/Textarea";
import { useApp } from "@/src/context";
import { ButtonsPanel } from "@/src/components/ButtonsPanel";

export default function Keystore() {
const { client } = ccc.useCcc();
const { createSender } = useApp();
const { log, error } = createSender("Keystore");

const [keystore, setKeystore] = useState<string>("");
const [password, setPassword] = useState<string>("");
const [countStr, setCountStr] = useState<string>("10");
const [accounts, setAccount] = useState<
{
publicKey: string;
privateKey: string;
address: string;
path: string;
}[]
>([]);
const [hdKey, setHdKey] = useState<HDKey | undefined>(undefined);

useEffect(() => {
setAccount([]);
setHdKey(undefined);
}, [keystore, password]);

useEffect(() => {
(async () => {
let modified = false;
const newAccounts = await Promise.all(
accounts.map(async (acc) => {
const address = await new ccc.SignerCkbPublicKey(
client,
acc.publicKey,
).getRecommendedAddress();
if (address !== acc.address) {
modified = true;
}
acc.address = address;
return acc;
}),
);
if (modified) {
setAccount(newAccounts);
}
})();
}, [client, accounts]);
return (
<div className="flex w-full flex-col items-stretch">
<Textarea
label="keystore"
placeholder="Keystore"
state={[keystore, setKeystore]}
/>
<TextInput
label="Accounts count"
placeholder="Accounts count"
state={[countStr, setCountStr]}
/>
<TextInput
label="Password"
placeholder="Password"
state={[password, setPassword]}
/>
{accounts.length !== 0 ? (
<div className="mt-1 w-full overflow-scroll whitespace-nowrap">
<p>path, address, private key</p>
{accounts.map(({ privateKey, address, path }) => (
<p key={path}>
{path}, {address}, {privateKey}
</p>
))}
</div>
) : undefined}
<ButtonsPanel>
<Button
onClick={async () => {
try {
const { privateKey, chainCode } = await ccc.keystoreDecrypt(
JSON.parse(keystore),
password,
);
setHdKey(new HDKey({ privateKey, chainCode }));
} catch (err) {
error("Invalid");
throw err;
}
log("Valid");
}}
>
Verify Keystore
</Button>
<Button
className="ml-2"
onClick={async () => {
if (!hdKey) {
return;
}
const count = parseInt(countStr, 10);
setAccount([
...accounts,
...Array.from(new Array(count), (_, i) => {
const path = `m/44'/309'/0'/0/${i}`;
const derivedKey = hdKey.derive(path);
return {
publicKey: ccc.hexFrom(derivedKey.publicKey!),
privateKey: ccc.hexFrom(derivedKey.privateKey!),
path,
address: "",
};
}),
]);
}}
disabled={!hdKey || Number.isNaN(parseInt(countStr, 10))}
>
More accounts
</Button>
{accounts.length !== 0 ? (
<Button
as="a"
className="mt-2"
href={`data:application/octet-stream,path%2C%20address%2C%20private%20key%0A${accounts
.map(({ privateKey, address, path }) =>
encodeURIComponent(`${path}, ${address}, ${privateKey}`),
)
.join("\n")}`}
download={`ckb_accounts_${Date.now()}.csv`}
>
Save as CSV
</Button>
) : undefined}
</ButtonsPanel>
</div>
);
}

Additional Resources