### Starting Docusaurus Local Development Server with Yarn

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

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.

```bash
yarn start
```

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

### Running CCC Playground Locally

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

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.

```shell
# Navigate to the project directory
pnpm install
pnpm build
```

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

### Building and Running the CCC Demo

Source: https://github.com/ckb-devrel/ccc/blob/master/README.md

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.

```shell
pnpm install
pnpm build
```

```shell
cd packages/demo
pnpm run dev
```

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

### Installing Docusaurus Website Dependencies with Yarn

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

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.

```bash
yarn
```

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

### Starting Next.js Development Server (bash)

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

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.

```bash
npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev
```

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

### Building Docusaurus Static Website with Yarn

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

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.

```bash
yarn build
```

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

### Installing Project Dependencies (Shell)

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

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.

```shell
pnpm install
```

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

### Installing Dependencies with pnpm (Bash)

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

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.

```bash
$ pnpm install
```

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

### Creating CCC App Project with npx (Bash)

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

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.

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

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

### Installing CCC Connector Web Component (Bash)

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

Install the `@ckb-ccc/connector` package using npm. This package provides a Web Component for easily integrating CKB wallet connection capabilities into web applications.

```bash
npm install @ckb-ccc/connector
```

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

### Installing Main CCC Package (Bash)

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

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.

```bash
npm install @ckb-ccc/ccc
```

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

### Running NestJS App in Dev Mode (Bash)

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

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.

```bash
$ pnpm run start
```

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

### Running NestJS App in Production (Bash)

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

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.

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

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

### Deploying Docusaurus Website using Yarn and SSH

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

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.

```bash
USE_SSH=true yarn deploy
```

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

### Running CCC Demo (Shell)

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

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.

```shell
pnpm run dev
```

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

### Installing CCC Shell Package (Bash)

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

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.

```bash
npm install @ckb-ccc/shell
```

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

### Installing CCC Connector React Package (Bash)

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

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.

```bash
npm install @ckb-ccc/connector-react
```

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

### Running NestJS App in Watch Mode (Bash)

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

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.

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

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

### Deploying Docusaurus Website using Yarn without SSH

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

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.

```bash
GIT_USER=<Your GitHub username> yarn deploy
```

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

### Installing CCC Packages via npm/pnpm

Source: https://github.com/ckb-devrel/ccc/blob/master/README.md

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.

```bash
npm install @ckb-ccc/shell
```

```bash
npm install @ckb-ccc/ccc
```

```bash
npm install @ckb-ccc/connector
```

```bash
npm install @ckb-ccc/connector-react
```

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

### Initializing CKB Transaction Outputs - TypeScript

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

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`.

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

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

### Completing and Sending CKB Transaction - TypeScript

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

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.

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

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

### Composing and Sending a CKB Transaction with CCC

Source: https://github.com/ckb-devrel/ccc/blob/master/README.md

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.

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

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

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

### Executing UDT Transfer and Completing Transaction - TypeScript

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

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.

```TypeScript
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);
```

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

### Creating CCC App Project with pnpm (Bash)

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

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.

```bash
pnpm create ccc-app my-ccc-app
```

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

### Creating CCC App Project with Yarn (Bash)

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

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.

```bash
yarn create ccc-app my-ccc-app
```

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

### Navigating to Demo Directory (Shell)

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

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.

```shell
cd packages/demo
```

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

### Building CCC Project (Shell)

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

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.

```shell
pnpm build
```

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

### Instantiating UDT and UDTPausable Scripts - TypeScript

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

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).

```TypeScript
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...",
  },
);
```

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

### Running E2E Tests with Supertest (Bash)

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

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.

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

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

### Bootstraping a CCC Application with create-ccc-app

Source: https://github.com/ckb-devrel/ccc/blob/master/README.md

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.

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

```bash
yarn create ccc-app my-ccc-app
```

```bash
pnpm create ccc-app my-ccc-app
```

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

### Generating Test Coverage Report (Bash)

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

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.

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

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

### Running Unit Tests with Jest (Bash)

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

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.

```bash
$ pnpm run test
```

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

### Creating CKB Transaction (TypeScript/JavaScript)

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

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.

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

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

### Applying CCC Lumos Patches (TypeScript)

Source: https://github.com/ckb-devrel/ccc/blob/master/README.md

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.

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

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

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

### Applying CKB CCC Lumos Patches in TypeScript

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

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.

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

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

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

### Importing Core CCC Object (TypeScript/JavaScript)

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

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.

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

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

### Completing and Sending CKB Transaction (TypeScript/JavaScript)

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

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.

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

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

### Enabling Client-Side Rendering for CKB CCC React

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

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.

```tsx
"use client";

```

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

### Importing CCC Modules in TypeScript

Source: https://github.com/ckb-devrel/ccc/blob/master/README.md

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.

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

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

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

### Importing Advanced CCC Object (TypeScript/JavaScript)

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

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.

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

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

### Wrapping React Application with CCC Provider (TSX)

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

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.

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

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

### Calling Read-Only Methods on UDT Scripts - TypeScript

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

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.

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

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

### Adding React Client Directive (TSX)

Source: https://github.com/ckb-devrel/ccc/blob/master/README.md

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.

```tsx
"use client";
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.