========================
CODE SNIPPETS
========================
TITLE: Starting Docusaurus Local Development Server with Yarn
DESCRIPTION: Starts a local development server for the Docusaurus website. It automatically opens the site in a browser and provides live reloading, reflecting most code changes instantly without needing to manually restart the server. Requires dependencies to be installed.

SOURCE: https://github.com/ckb-devrel/ccc/blob/master/packages/docs/README.md#_snippet_1

LANGUAGE: bash
CODE:
```
yarn start
```

----------------------------------------

TITLE: Running CCC Playground Locally
DESCRIPTION: This snippet provides the shell commands required to set up and run the CCC Playground project on a local machine. It involves navigating to the project directory, installing dependencies using pnpm, and building the project. Prerequisites include having pnpm installed.

SOURCE: https://github.com/ckb-devrel/ccc/blob/master/packages/playground/README.md#_snippet_0

LANGUAGE: shell
CODE:
```
# Navigate to the project directory
pnpm install
pnpm build
```

----------------------------------------

TITLE: Building and Running the CCC Demo
DESCRIPTION: Instructions for setting up and running the local development demo project included with the CCC repository. This involves installing dependencies, building the project, navigating to the demo directory, and starting the development server using pnpm.

SOURCE: https://github.com/ckb-devrel/ccc/blob/master/README.md#_snippet_4

LANGUAGE: shell
CODE:
```
pnpm install
pnpm build
```

LANGUAGE: shell
CODE:
```
cd packages/demo
pnpm run dev
```

----------------------------------------

TITLE: Installing Docusaurus Website Dependencies with Yarn
DESCRIPTION: Installs the required project dependencies for the Docusaurus website using the Yarn package manager. This command is typically run after cloning the repository to prepare the environment for development or building. Requires Node.js and Yarn to be installed on the system.

SOURCE: https://github.com/ckb-devrel/ccc/blob/master/packages/docs/README.md#_snippet_0

LANGUAGE: bash
CODE:
```
yarn
```

----------------------------------------

TITLE: Starting Next.js Development Server (bash)
DESCRIPTION: Run one of the provided commands to start the Next.js development server. This allows you to view the project locally in your browser for development and testing purposes.

SOURCE: https://github.com/ckb-devrel/ccc/blob/master/packages/demo/README.md#_snippet_0

LANGUAGE: bash
CODE:
```
npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev
```

----------------------------------------

TITLE: Building Docusaurus Static Website with Yarn
DESCRIPTION: Generates the static content for the Docusaurus website. This command compiles the source files into static HTML, CSS, and JavaScript assets placed in the `build` directory, which can then be served by any standard static web server or hosting service. Requires dependencies to be installed.

SOURCE: https://github.com/ckb-devrel/ccc/blob/master/packages/docs/README.md#_snippet_2

LANGUAGE: bash
CODE:
```
yarn build
```

----------------------------------------

TITLE: Installing Project Dependencies (Shell)
DESCRIPTION: Run the `pnpm install` command in the project directory. This command reads the `pnpm-lock.yaml` file and installs all required project dependencies into the `node_modules` directory.

SOURCE: https://github.com/ckb-devrel/ccc/blob/master/packages/docs/docs/CCC.mdx#_snippet_11

LANGUAGE: shell
CODE:
```
pnpm install
```

----------------------------------------

TITLE: Installing Dependencies with pnpm (Bash)
DESCRIPTION: Installs project dependencies listed in package.json using the pnpm package manager. Requires pnpm to be installed globally or available in the path. Ensures all necessary packages are downloaded.

SOURCE: https://github.com/ckb-devrel/ccc/blob/master/packages/faucet/README.md#_snippet_0

LANGUAGE: bash
CODE:
```
$ pnpm install
```

----------------------------------------

TITLE: Creating CCC App Project with npx (Bash)
DESCRIPTION: Use the `npx` command to quickly bootstrap a new CKB application based on the CCC library, creating a directory named 'my-ccc-app' with necessary files and dependencies. This is the recommended way to start a new project using the latest version of the CLI tool.

SOURCE: https://github.com/ckb-devrel/ccc/blob/master/packages/docs/docs/CCC.mdx#_snippet_0

LANGUAGE: bash
CODE:
```
npx create-ccc-app@latest my-ccc-app
```

----------------------------------------

TITLE: Installing CCC Connector Web Component (Bash)
DESCRIPTION: Install the `@ckb-ccc/connector` package using npm. This package provides a Web Component for easily integrating CKB wallet connection capabilities into web applications.

SOURCE: https://github.com/ckb-devrel/ccc/blob/master/packages/docs/docs/CCC.mdx#_snippet_5

LANGUAGE: bash
CODE:
```
npm install @ckb-ccc/connector
```

----------------------------------------

TITLE: Installing Main CCC Package (Bash)
DESCRIPTION: Install the main `@ckb-ccc/ccc` package using npm. This package provides the core CCC functionalities for custom UI development, offering tools and capabilities for interacting with CKB.

SOURCE: https://github.com/ckb-devrel/ccc/blob/master/packages/docs/docs/CCC.mdx#_snippet_4

LANGUAGE: bash
CODE:
```
npm install @ckb-ccc/ccc
```

----------------------------------------

TITLE: Running NestJS App in Dev Mode (Bash)
DESCRIPTION: Starts the NestJS application in standard development mode. Executes the `start` script defined in the package.json file using pnpm. Typically compiles and serves the application.

SOURCE: https://github.com/ckb-devrel/ccc/blob/master/packages/faucet/README.md#_snippet_1

LANGUAGE: bash
CODE:
```
$ pnpm run start
```

----------------------------------------

TITLE: Running NestJS App in Production (Bash)
DESCRIPTION: Starts the NestJS application optimized for production environments. Executes the `start:prod` script using pnpm. This usually involves building the project first and then running the compiled code.

SOURCE: https://github.com/ckb-devrel/ccc/blob/master/packages/faucet/README.md#_snippet_3

LANGUAGE: bash
CODE:
```
$ pnpm run start:prod
```

----------------------------------------

TITLE: Deploying Docusaurus Website using Yarn and SSH
DESCRIPTION: Deploys the built Docusaurus website to a hosting service, typically GitHub Pages, using SSH for authentication. The command usually handles building the site before pushing the generated files to the designated deployment branch. Requires dependencies and proper SSH key configuration.

SOURCE: https://github.com/ckb-devrel/ccc/blob/master/packages/docs/README.md#_snippet_3

LANGUAGE: bash
CODE:
```
USE_SSH=true yarn deploy
```

----------------------------------------

TITLE: Running CCC Demo (Shell)
DESCRIPTION: Execute the development script (`dev`) defined in the `package.json` of the demo package using pnpm. This command typically starts a local development server, allowing you to run and interact with the CCC demo application.

SOURCE: https://github.com/ckb-devrel/ccc/blob/master/packages/docs/docs/CCC.mdx#_snippet_14

LANGUAGE: shell
CODE:
```
pnpm run dev
```

----------------------------------------

TITLE: Installing CCC Shell Package (Bash)
DESCRIPTION: Install the `@ckb-ccc/shell` package using npm. This package provides helpful tools and capabilities for NodeJS environments when working with the CKB blockchain via CCC.

SOURCE: https://github.com/ckb-devrel/ccc/blob/master/packages/docs/docs/CCC.mdx#_snippet_3

LANGUAGE: bash
CODE:
```
npm install @ckb-ccc/shell
```

----------------------------------------

TITLE: Installing CCC Connector React Package (Bash)
DESCRIPTION: Install the `@ckb-ccc/connector-react` package using npm. This package provides React-specific components and hooks for integrating CKB wallet connection within React applications.

SOURCE: https://github.com/ckb-devrel/ccc/blob/master/packages/docs/docs/CCC.mdx#_snippet_6

LANGUAGE: bash
CODE:
```
npm install @ckb-ccc/connector-react
```

----------------------------------------

TITLE: Running NestJS App in Watch Mode (Bash)
DESCRIPTION: Starts the NestJS application in watch mode, which automatically recompiles and reloads the application on code changes. Executes the `start:dev` script using pnpm. Useful for rapid development iterations.

SOURCE: https://github.com/ckb-devrel/ccc/blob/master/packages/faucet/README.md#_snippet_2

LANGUAGE: bash
CODE:
```
$ pnpm run start:dev
```

----------------------------------------

TITLE: Deploying Docusaurus Website using Yarn without SSH
DESCRIPTION: Deploys the built Docusaurus website to a hosting service, typically GitHub Pages, authenticating without using SSH. This often involves providing a GitHub username (and potentially a personal access token when prompted) to push the build output to the deployment branch. Requires dependencies and a GitHub account.

SOURCE: https://github.com/ckb-devrel/ccc/blob/master/packages/docs/README.md#_snippet_4

LANGUAGE: bash
CODE:
```
GIT_USER=<Your GitHub username> yarn deploy
```

----------------------------------------

TITLE: Installing CCC Packages via npm/pnpm
DESCRIPTION: Manually install specific CCC packages for different use cases (NodeJS shell, Custom UI, Web Component, React) using npm or pnpm. These commands add the libraries to your project's dependencies.

SOURCE: https://github.com/ckb-devrel/ccc/blob/master/README.md#_snippet_1

LANGUAGE: bash
CODE:
```
npm install @ckb-ccc/shell
```

LANGUAGE: bash
CODE:
```
npm install @ckb-ccc/ccc
```

LANGUAGE: bash
CODE:
```
npm install @ckb-ccc/connector
```

LANGUAGE: bash
CODE:
```
npm install @ckb-ccc/connector-react
```

----------------------------------------

TITLE: Initializing CKB Transaction Outputs - TypeScript
DESCRIPTION: This snippet initializes a new transaction object using `ccc.Transaction.from`. It defines the transaction's output cells, specifying the recipient's lock script (`toLock`) and the amount of CKB to transfer as capacity (`amount`), converting the amount using `ccc.fixedPointFrom`.

SOURCE: https://github.com/ckb-devrel/ccc/blob/master/packages/docs/docs/code-examples.md#_snippet_0

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

----------------------------------------

TITLE: Completing and Sending CKB Transaction - TypeScript
DESCRIPTION: This snippet completes the initialized transaction (`tx`) by automatically selecting necessary input cells based on capacity using a `signer`. It then calculates and adds the transaction fee using the same signer. Finally, it sends the fully constructed transaction through the signer, returning the transaction hash.

SOURCE: https://github.com/ckb-devrel/ccc/blob/master/packages/docs/docs/code-examples.md#_snippet_1

LANGUAGE: typescript
CODE:
```
await tx.completeInputsByCapacity(signer);
await tx.completeFeeBy(signer); // Transaction fee rate is calculated automatically
const txHash = await signer.sendTransaction(tx);
```

----------------------------------------

TITLE: Composing and Sending a CKB Transaction with CCC
DESCRIPTION: Provides a minimal example of creating a CKB transaction with specified outputs, completing inputs and fee automatically using a signer, and then sending the transaction. This illustrates CCC's simplified transaction composition process.

SOURCE: https://github.com/ckb-devrel/ccc/blob/master/README.md#_snippet_3

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

LANGUAGE: typescript
CODE:
```
await tx.completeInputsByCapacity(signer);
await tx.completeFeeBy(signer); // Transaction fee rate is calculated automatically
const txHash = await signer.sendTransaction(tx);
```

----------------------------------------

TITLE: Executing UDT Transfer and Completing Transaction - TypeScript
DESCRIPTION: This snippet outlines the process of initiating a UDT transfer and finalizing the transaction. It calls the `transfer` method to get a base transaction, then uses helper methods like `completeUdtBy`, `completeInputsByCapacity`, and `completeFeeBy` with a signer object to add necessary components before sending the complete transaction to the network.

SOURCE: https://github.com/ckb-devrel/ccc/blob/master/packages/udt/README.md#_snippet_2

LANGUAGE: TypeScript
CODE:
```
const { script: to } = await signer.getRecommendedAddressObj();

const { res: transferTx } = await udt.transfer(signer, [{ to, amount: 100 }]);
const completedTx = await udt.completeUdtBy(transferTx, signer);

await completedTx.completeInputsByCapacity(signer);
await completedTx.completeFeeBy(signer);
const transferTxHash = await signer.sendTransaction(completedTx);
```

----------------------------------------

TITLE: Creating CCC App Project with pnpm (Bash)
DESCRIPTION: Use the `pnpm create` command with the `ccc-app` template to bootstrap a new CKB application based on the CCC library. This command initializes a new project in the 'my-ccc-app' directory, managing dependencies with pnpm.

SOURCE: https://github.com/ckb-devrel/ccc/blob/master/packages/docs/docs/CCC.mdx#_snippet_2

LANGUAGE: bash
CODE:
```
pnpm create ccc-app my-ccc-app
```

----------------------------------------

TITLE: Creating CCC App Project with Yarn (Bash)
DESCRIPTION: Use the `yarn create` command with the `ccc-app` template to bootstrap a new CKB application based on the CCC library. This command creates a directory named 'my-ccc-app' and sets up the project structure using Yarn.

SOURCE: https://github.com/ckb-devrel/ccc/blob/master/packages/docs/docs/CCC.mdx#_snippet_1

LANGUAGE: bash
CODE:
```
yarn create ccc-app my-ccc-app
```

----------------------------------------

TITLE: Navigating to Demo Directory (Shell)
DESCRIPTION: Use the `cd` command to change the current directory to the `packages/demo` subdirectory within the project structure. This step is necessary before running the demo application.

SOURCE: https://github.com/ckb-devrel/ccc/blob/master/packages/docs/docs/CCC.mdx#_snippet_13

LANGUAGE: shell
CODE:
```
cd packages/demo
```

----------------------------------------

TITLE: Building CCC Project (Shell)
DESCRIPTION: Run the `pnpm build` command in the project directory. This command executes the build script defined in the project's `package.json`, typically compiling source code, generating assets, and preparing the project for distribution or execution.

SOURCE: https://github.com/ckb-devrel/ccc/blob/master/packages/docs/docs/CCC.mdx#_snippet_12

LANGUAGE: shell
CODE:
```
pnpm build
```

----------------------------------------

TITLE: Instantiating UDT and UDTPausable Scripts - TypeScript
DESCRIPTION: This snippet demonstrates how to initialize an SSRI server and create instances of the Udt and UdtPausable classes. It requires providing the SSRI server URL, the OutPoint of the script code (transaction hash and index), and the script's details (code hash, hash type, and args).

SOURCE: https://github.com/ckb-devrel/ccc/blob/master/packages/udt/README.md#_snippet_0

LANGUAGE: TypeScript
CODE:
```
import { Server } from "@ckb-ccc/ssri";
import { Udt, UdtPausable } from "@ckb-ccc/udt";

const { signer } = useApp();
const server = new Server("https://localhost:9090");

const udt = new Udt(
  server,
  {
    txHash: "0x...",
    index: 0,
  },
  {
    codeHash: "0x...",
    hashType: "type",
    args: "0x...",
  },
);

const udtPausable = new UdtPausable(
  server,
  {
    txHash: "0x...",
    index: 0,
  },
  {
    codeHash: "0x...",
    hashType: "type",
    args: "0x...",
  },
);
```

----------------------------------------

TITLE: Running E2E Tests with Supertest (Bash)
DESCRIPTION: Executes the project's end-to-end (e2e) tests, which test the application's overall flow from the user's perspective (e.g., using Supertest). Runs the `test:e2e` script via pnpm. Requires the application to be running or mocked.

SOURCE: https://github.com/ckb-devrel/ccc/blob/master/packages/faucet/README.md#_snippet_5

LANGUAGE: bash
CODE:
```
$ pnpm run test:e2e
```

----------------------------------------

TITLE: Bootstraping a CCC Application with create-ccc-app
DESCRIPTION: Use the create-ccc-app command-line interface tool to quickly scaffold a new CCC-based application project. Choose your preferred package manager from npx, yarn, or pnpm.

SOURCE: https://github.com/ckb-devrel/ccc/blob/master/README.md#_snippet_0

LANGUAGE: bash
CODE:
```
npx create-ccc-app@latest my-ccc-app
```

LANGUAGE: bash
CODE:
```
yarn create ccc-app my-ccc-app
```

LANGUAGE: bash
CODE:
```
pnpm create ccc-app my-ccc-app
```

----------------------------------------

TITLE: Generating Test Coverage Report (Bash)
DESCRIPTION: Executes the project's tests and generates a code coverage report, showing which parts of the code are covered by tests. Runs the `test:cov` script via pnpm. Useful for tracking test completeness.

SOURCE: https://github.com/ckb-devrel/ccc/blob/master/packages/faucet/README.md#_snippet_6

LANGUAGE: bash
CODE:
```
$ pnpm run test:cov
```

----------------------------------------

TITLE: Running Unit Tests with Jest (Bash)
DESCRIPTION: Executes the project's unit tests using the configured test runner (likely Jest in a NestJS project). Runs the `test` script defined in package.json via pnpm. Verifies individual code components.

SOURCE: https://github.com/ckb-devrel/ccc/blob/master/packages/faucet/README.md#_snippet_4

LANGUAGE: bash
CODE:
```
$ pnpm run test
```

----------------------------------------

TITLE: Creating CKB Transaction (TypeScript/JavaScript)
DESCRIPTION: Create a basic CKB transaction object using the `ccc.Transaction.from` method. This snippet defines the essential outputs, specifying the recipient's lock script (`toLock`) and the amount of CKB to send, using `ccc.fixedPointFrom` for capacity.

SOURCE: https://github.com/ckb-devrel/ccc/blob/master/packages/docs/docs/CCC.mdx#_snippet_9

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

----------------------------------------

TITLE: Applying CCC Lumos Patches (TypeScript)
DESCRIPTION: Demonstrates how to apply the patches provided by the `@ckb-ccc/lumos-patches` package before initializing Lumos. This step is crucial for enabling Lumos support for specific wallets like JoyID, Nostr, and Portal without needing individual wallet-specific Lumos packages.

SOURCE: https://github.com/ckb-devrel/ccc/blob/master/README.md#_snippet_6

LANGUAGE: typescript
CODE:
```
import { generateDefaultScriptInfos } from "@ckb-ccc/lumos-patches";

// Before using Lumos. You don't need @ckb-lumos/joyid anymore.
registerCustomLockScriptInfos(generateDefaultScriptInfos());
```

----------------------------------------

TITLE: Applying CKB CCC Lumos Patches in TypeScript
DESCRIPTION: This snippet demonstrates how to apply wallet-specific patches to Lumos using the `@ckb-ccc/lumos-patches` library. It imports `generateDefaultScriptInfos` and calls `registerCustomLockScriptInfos` (presumably a Lumos function) to register the new script information before Lumos is used, enabling support for wallets like JoyID, Nostr, and Portal.

SOURCE: https://github.com/ckb-devrel/ccc/blob/master/packages/docs/docs/CCC.mdx#_snippet_16

LANGUAGE: typescript
CODE:
```
import { generateDefaultScriptInfos } from "@ckb-ccc/lumos-patches";

// Before using Lumos. You don't need @ckb-lumos/joyid anymore.
registerCustomLockScriptInfos(generateDefaultScriptInfos());
```

----------------------------------------

TITLE: Importing Core CCC Object (TypeScript/JavaScript)
DESCRIPTION: Import the main `ccc` object from a specific CCC package (replace `<package-name>` with the actual package). This object provides access to standard CCC functionalities and is designed to assist with code completion.

SOURCE: https://github.com/ckb-devrel/ccc/blob/master/packages/docs/docs/CCC.mdx#_snippet_7

LANGUAGE: typescript
CODE:
```
import { ccc } from "@ckb-ccc/<package-name>";
```

----------------------------------------

TITLE: Completing and Sending CKB Transaction (TypeScript/JavaScript)
DESCRIPTION: Complete the transaction by adding necessary inputs based on capacity using a `signer` object, automatically calculate and add the transaction fee, and then asynchronously send the composed transaction using the `signer`. The transaction hash (`txHash`) is returned upon successful sending.

SOURCE: https://github.com/ckb-devrel/ccc/blob/master/packages/docs/docs/CCC.mdx#_snippet_10

LANGUAGE: typescript
CODE:
```
await tx.completeInputsByCapacity(signer);
await tx.completeFeeBy(signer); // Transaction fee rate is calculated automatically
const txHash = await signer.sendTransaction(tx);
```

----------------------------------------

TITLE: Enabling Client-Side Rendering for CKB CCC React
DESCRIPTION: This directive is used at the beginning of a React file to mark it as client-side code. It is necessary when using CCC UI components, like `ccc.Provider`, within a React Server Component environment, as CCC UI is designed for the client side.

SOURCE: https://github.com/ckb-devrel/ccc/blob/master/packages/docs/docs/CCC.mdx#_snippet_15

LANGUAGE: tsx
CODE:
```
"use client";

```

----------------------------------------

TITLE: Importing CCC Modules in TypeScript
DESCRIPTION: Demonstrates how to import the standard 'ccc' object, which contains core functionalities, or the 'cccA' object from the 'advanced' entry point for more advanced customization. Ensure your tsconfig.json supports package entry points.

SOURCE: https://github.com/ckb-devrel/ccc/blob/master/README.md#_snippet_2

LANGUAGE: typescript
CODE:
```
import { ccc } from "@ckb-ccc/<package-name>";
```

LANGUAGE: typescript
CODE:
```
import { cccA } from "@ckb-ccc/<package-name>/advanced";
```

----------------------------------------

TITLE: Importing Advanced CCC Object (TypeScript/JavaScript)
DESCRIPTION: Import the `cccA` object from the `advanced` entry point of a specific CCC package. This object provides access to more advanced or unstable interfaces and functionalities for heavy customization.

SOURCE: https://github.com/ckb-devrel/ccc/blob/master/packages/docs/docs/CCC.mdx#_snippet_8

LANGUAGE: typescript
CODE:
```
import { cccA } from "@ckb-ccc/<package-name>/advanced";
```

----------------------------------------

TITLE: Wrapping React Application with CCC Provider (TSX)
DESCRIPTION: To utilize the CKB CCC Connector within a React application, the application's component tree must be wrapped with the `ccc.Provider` component. This makes the connector's context and functionalities available to all child components, enabling them to access wallet connections and CKB interactions.

SOURCE: https://github.com/ckb-devrel/ccc/blob/master/packages/connector-react/README.md#_snippet_0

LANGUAGE: tsx
CODE:
```
<ccc.Provider>{/* Your application */}</ccc.Provider>
```

----------------------------------------

TITLE: Calling Read-Only Methods on UDT Scripts - TypeScript
DESCRIPTION: This code shows how to call read-only methods defined within the UDT script contract using the instantiated Udt and UdtPausable objects. These methods interact with the script's state and return data fetched via the SSRI server connection.

SOURCE: https://github.com/ckb-devrel/ccc/blob/master/packages/udt/README.md#_snippet_1

LANGUAGE: TypeScript
CODE:
```
const { res: udtSymbol } = await udt.symbol();
const { res: pauseList } = await udtPausable.enumeratePaused();
```

----------------------------------------

TITLE: Adding React Client Directive (TSX)
DESCRIPTION: Resolves a TypeError (`createContext is not a function`) when using CCC UI components, which are client-only, within React Server Components. Adding this directive at the top of the file ensures the component is rendered on the client side.

SOURCE: https://github.com/ckb-devrel/ccc/blob/master/README.md#_snippet_5

LANGUAGE: tsx
CODE:
```
"use client";
```