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: 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: 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: 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: ``` {/* Your application */} ``` ---------------------------------------- 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: 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: 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: 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: 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: 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: 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: 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: 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: 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: 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"; ``` ---------------------------------------- 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: 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 Core CCC Object (TypeScript/JavaScript) DESCRIPTION: Import the main `ccc` object from a specific CCC package (replace `` 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/"; ``` ---------------------------------------- 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: 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: 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: 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/"; ``` LANGUAGE: typescript CODE: ``` import { cccA } from "@ckb-ccc//advanced"; ``` ---------------------------------------- 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 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: 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//advanced"; ``` ---------------------------------------- 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: 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: 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: 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: 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 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: 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: 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: 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= yarn deploy ``` ---------------------------------------- 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: 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: 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: 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: 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: 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: 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: 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: 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: 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 ```