@offckb/cli 0.1.0-rc5 → 0.1.0-rc7

package/README.md

@@ -23,6 +23,14 @@ Start building on Nervos blockchain, right now, right away!
 - [Install](#install)
 - [Usage](#usage)
 - [Get started](#get-started)
+  - [Step 1: Create A Project](#step-1-create-a-project)
+  - [Step 2: Start the Devnet](#step-2-start-the-devnet)
+  - [Step 3: Access Pre-funded Accounts](#step-3-access-pre-funded-accounts)
+- [Dapp Templates](#dapp-templates)
+  - [View and transfer balance](#view-and-transfer-balance)
+  - [Write \& read on-chain messages](#write--read-on-chain-messages)
+  - [Issue custom token via xUDT scripts](#issue-custom-token-via-xudt-scripts)
+  - [Create on-chain digital object via Spore protocol](#create-on-chain-digital-object-via-spore-protocol)
 - [Built-in scripts](#built-in-scripts)
 - [Accounts](#accounts)
 - [About Lumos](#about-lumos)
@@ -48,6 +56,8 @@ offckb list-hashes # list built-in scripts hashes, equals `ckb list-hashes`
 
 ## Get started
 
+### Step 1: Create A Project
+
 ```sh
 offckb init my-awesome-ckb-dapp
 
@@ -70,7 +80,9 @@ Server running at http://localhost:1234
 ✨ Built in 10ms
 ```
 
-open another terminal and start the devnet:
+### Step 2: Start the Devnet
+
+Open another terminal and run:
 
 ```sh
 offckb node
@@ -83,7 +95,11 @@ CKB-Miner: 2024-03-04 14:35:17.567 +00:00 client INFO ckb_miner::miner  Found! #
 #...
 ```
 
-open another terminal and check the accounts to use:
+You can leave this terminal open to keep the devnet running, feel free to `ctrl+c` to exit the terminal and stop the local blockchain.
+
+### Step 3: Access Pre-funded Accounts
+
+Open another terminal and check the accounts to use:
 
 ```sh
 offckb accounts
@@ -110,6 +126,36 @@ Print account list, each account is funded with 42_000_000_00000000 capacity in
 
 Copy some private keys and visit http://localhost:1234 to play your first CKB Dapp!
 
+## Dapp Templates
+
+`offckb` packs some basic minimal Dapp templates for you to learn and get started with. By running `offckb init`, you can select the different Dapp templates to quickly set up a local Dapp project targeting the local blockchain with built-in scripts and accounts.
+
+The Dapp templates often involve interaction with some most useful smart contracts on CKB like xUDT/Spore/Omnilock. The best thing is those Dapp examples also come with detailed tutorial documents from [docs.nervos.org](https://docs.nervos.org/). The source codes of these templates are also maintained [here](https://github.com/nervosnetwork/docs.nervos.org/tree/develop-v2/examples).
+
+### View and transfer balance
+
+A simple Dapp to check CKB balance and transfer CKB.
+
+[Tutorial](https://nervos-ckb-docs-git-develop-v2-cryptape.vercel.app/docs/dapp/view-and-transfer-balance)
+
+### Write & read on-chain messages
+
+A simple Dapp to issue your own token via XUDT scripts.
+
+[Tutorial](https://nervos-ckb-docs-git-develop-v2-cryptape.vercel.app/docs/dapp/write-and-read-on-chain-message)
+
+### Issue custom token via xUDT scripts
+
+A simple Dapp to store & retrieve data from a Cell.
+
+[Tutorial](https://nervos-ckb-docs-git-develop-v2-cryptape.vercel.app/docs/dapp/issue-custom-token)
+
+### Create on-chain digital object via Spore protocol
+
+A simple Dapp to create on-chain digital objects with spore scripts.
+
+[Tutorial](https://nervos-ckb-docs-git-develop-v2-cryptape.vercel.app/docs/dapp/create-nft)
+
 ## Built-in scripts
 
 - [x] xUDT https://github.com/nervosnetwork/rfcs/pull/428

package/dist/cfg/const.d.ts

@@ -10,3 +10,8 @@ export declare const ckbFolderPath: string;
 export declare const ckbBinPath: string;
 export declare const accountTargetDir: string;
 export declare const minimalRequiredCKBVersion = "0.113.1";
+export declare const dappTemplateGitRepoUserAndName = "nervosnetwork/docs.nervos.org";
+export declare const dappTemplateGitUrl = "https://github.com/nervosnetwork/docs.nervos.org";
+export declare const dappTemplateGitBranch = "develop-v2";
+export declare const dappTemplateGitFolder = "examples";
+export declare const dappTemplateGitSelectOptionFile = "options.json";

package/dist/cfg/const.js

@@ -23,7 +23,7 @@ var __importStar = (this && this.__importStar) || function (mod) {
     return result;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.minimalRequiredCKBVersion = exports.accountTargetDir = exports.ckbBinPath = exports.ckbFolderPath = exports.devnetDataPath = exports.devnetPath = exports.devnetSourcePath = exports.targetEnvironmentPath = exports.dappTemplatePath = exports.packageRootPath = exports.packageSrcPath = exports.currentExecPath = void 0;
+exports.dappTemplateGitSelectOptionFile = exports.dappTemplateGitFolder = exports.dappTemplateGitBranch = exports.dappTemplateGitUrl = exports.dappTemplateGitRepoUserAndName = exports.minimalRequiredCKBVersion = exports.accountTargetDir = exports.ckbBinPath = exports.ckbFolderPath = exports.devnetDataPath = exports.devnetPath = exports.devnetSourcePath = exports.targetEnvironmentPath = exports.dappTemplatePath = exports.packageRootPath = exports.packageSrcPath = exports.currentExecPath = void 0;
 const path = __importStar(require("path"));
 // path
 exports.currentExecPath = process.cwd();
@@ -39,3 +39,9 @@ exports.ckbBinPath = path.resolve(exports.ckbFolderPath, 'ckb');
 exports.accountTargetDir = path.join(exports.packageRootPath, `account`);
 // Version
 exports.minimalRequiredCKBVersion = '0.113.1';
+// url
+exports.dappTemplateGitRepoUserAndName = 'nervosnetwork/docs.nervos.org';
+exports.dappTemplateGitUrl = `https://github.com/${exports.dappTemplateGitRepoUserAndName}`;
+exports.dappTemplateGitBranch = 'develop-v2';
+exports.dappTemplateGitFolder = 'examples';
+exports.dappTemplateGitSelectOptionFile = 'options.json';

package/dist/cli.js

@@ -19,7 +19,6 @@ const init_chain_1 = require("./cmd/init-chain");
 const build_lumos_config_1 = require("./cmd/build-lumos-config");
 const init_1 = require("./cmd/init");
 const accounts_1 = require("./cmd/accounts");
-const select_1 = require("./cfg/select");
 const clean_1 = require("./cmd/clean");
 const version = require('../package.json').version;
 const program = new commander_1.Command();
@@ -32,7 +31,7 @@ program
     .description('init dapp project with lumos')
     .action((str) => __awaiter(void 0, void 0, void 0, function* () {
     const name = str !== null && str !== void 0 ? str : 'my-awesome-ckb-dapp';
-    const template = yield (0, select_1.selectTemplate)();
+    const template = yield (0, init_1.selectTemplate)();
     return (0, init_1.init)(name, template);
 }));
 program.command('node').description('Use the CKB to start devnet').action(node_1.node);

package/dist/cmd/build-lumos-config.d.ts

@@ -59,6 +59,41 @@ export declare function devnetLumosConfigTemplate(cellBaseTxHashInGenesisBlock:
             INDEX: string;
             DEP_TYPE: string;
         };
+        SPORE: {
+            CODE_HASH: string;
+            HASH_TYPE: string;
+            TX_HASH: string;
+            INDEX: string;
+            DEP_TYPE: string;
+        };
+        SPORE_CLUSTER: {
+            CODE_HASH: string;
+            HASH_TYPE: string;
+            TX_HASH: string;
+            INDEX: string;
+            DEP_TYPE: string;
+        };
+        SPORE_CLUSTER_AGENT: {
+            CODE_HASH: string;
+            HASH_TYPE: string;
+            TX_HASH: string;
+            INDEX: string;
+            DEP_TYPE: string;
+        };
+        SPORE_CLUSTER_PROXY: {
+            CODE_HASH: string;
+            HASH_TYPE: string;
+            TX_HASH: string;
+            INDEX: string;
+            DEP_TYPE: string;
+        };
+        SPORE_LUA: {
+            CODE_HASH: string;
+            HASH_TYPE: string;
+            TX_HASH: string;
+            INDEX: string;
+            DEP_TYPE: string;
+        };
     };
 };
 export declare function buildLumosConfig(): Promise<void>;

package/dist/cmd/build-lumos-config.js

@@ -79,6 +79,41 @@ function devnetLumosConfigTemplate(cellBaseTxHashInGenesisBlock, secondTxHashInG
                 INDEX: '0x9',
                 DEP_TYPE: 'code',
             },
+            SPORE: {
+                CODE_HASH: '0x7e8bf78a62232caa2f5d47e691e8db1a90d05e93dc6828ad3cb935c01ec6d208',
+                HASH_TYPE: 'data1',
+                TX_HASH: cellBaseTxHashInGenesisBlock,
+                INDEX: '0xa',
+                DEP_TYPE: 'code',
+            },
+            SPORE_CLUSTER: {
+                CODE_HASH: '0x7366a61534fa7c7e6225ecc0d828ea3b5366adec2b58206f2ee84995fe030075',
+                HASH_TYPE: 'data1',
+                TX_HASH: cellBaseTxHashInGenesisBlock,
+                INDEX: '0xb',
+                DEP_TYPE: 'code',
+            },
+            SPORE_CLUSTER_AGENT: {
+                CODE_HASH: '0xc986099b41d79ca1b2a56ce5874bcda8175440a17298ea5e2bbc3897736b8c21',
+                HASH_TYPE: 'data1',
+                TX_HASH: cellBaseTxHashInGenesisBlock,
+                INDEX: '0xc',
+                DEP_TYPE: 'code',
+            },
+            SPORE_CLUSTER_PROXY: {
+                CODE_HASH: '0xbe8b9ce3d05a32c4bb26fe71cd5fc1407ce91e3a8b9e8719be2ab072cef1454b',
+                HASH_TYPE: 'data1',
+                TX_HASH: cellBaseTxHashInGenesisBlock,
+                INDEX: '0xd',
+                DEP_TYPE: 'code',
+            },
+            SPORE_LUA: {
+                CODE_HASH: '0x94a9b875911ace20f1f0d063a26495d14e4b04e32fd218261bb747f34e71ae47',
+                HASH_TYPE: 'data1',
+                TX_HASH: cellBaseTxHashInGenesisBlock,
+                INDEX: '0xe',
+                DEP_TYPE: 'code',
+            },
         },
     };
     return devnetConfig;

package/dist/cmd/init.d.ts

@@ -1 +1,2 @@
 export declare function init(name: string, template: string): void;
+export declare function selectTemplate(): Promise<string>;

package/dist/cmd/init.js

@@ -1,16 +1,27 @@
 "use strict";
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.init = void 0;
+exports.selectTemplate = exports.init = void 0;
 const const_1 = require("../cfg/const");
 const path_1 = __importDefault(require("path"));
 const util_1 = require("../util");
+const select_1 = __importDefault(require("@inquirer/select"));
+const util_2 = require("../util");
 function init(name, template) {
     const targetPath = path_1.default.resolve(const_1.currentExecPath, name);
-    const sourcePath = path_1.default.resolve(const_1.dappTemplatePath, template);
-    (0, util_1.copyFolderSync)(sourcePath, targetPath);
+    const dappTemplateFolderPath = `${const_1.dappTemplateGitFolder}/${template}`;
+    (0, util_1.gitCloneAndDownloadFolderSync)(const_1.dappTemplateGitUrl, const_1.dappTemplateGitBranch, dappTemplateFolderPath, targetPath);
     // add some common code files
     const ckbDotTs = path_1.default.resolve(const_1.dappTemplatePath, 'ckb.ts');
     const configJson = path_1.default.resolve(const_1.dappTemplatePath, 'config.json');
@@ -19,3 +30,14 @@ function init(name, template) {
     console.log(`init CKB dapp project: ${targetPath}`);
 }
 exports.init = init;
+function selectTemplate() {
+    return __awaiter(this, void 0, void 0, function* () {
+        const opts = yield (0, util_2.loadTemplateOpts)();
+        const answer = yield (0, select_1.default)({
+            message: 'Select a Dapp template',
+            choices: opts,
+        });
+        return answer;
+    });
+}
+exports.selectTemplate = selectTemplate;

package/dist/util.d.ts

@@ -4,3 +4,10 @@ export declare function copyFileSync(source: string, target: string): void;
 export declare function copyFilesWithExclusion(sourceDir: string, destinationDir: string, excludedFolders: string[]): Promise<void>;
 export declare function copyRecursive(source: string, destination: string, excludedFolders: string[]): Promise<void>;
 export declare function removeFolderSync(folderPath: string): void;
+export declare function gitCloneAndDownloadFolderSync(repoUrl: string, branch: string, subFolderName: string, targetPath: string): void;
+export interface TemplateOption {
+    name: string;
+    value: string;
+    description: string;
+}
+export declare function loadTemplateOpts(): Promise<Array<TemplateOption>>;

package/dist/util.js

@@ -31,10 +31,17 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
 };
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.removeFolderSync = exports.copyRecursive = exports.copyFilesWithExclusion = exports.copyFileSync = exports.copyFolderSync = exports.isFolderExists = void 0;
+exports.loadTemplateOpts = exports.gitCloneAndDownloadFolderSync = exports.removeFolderSync = exports.copyRecursive = exports.copyFilesWithExclusion = exports.copyFileSync = exports.copyFolderSync = exports.isFolderExists = void 0;
+const child_process_1 = require("child_process");
 const fs = __importStar(require("fs"));
 const path = __importStar(require("path"));
+const const_1 = require("./cfg/const");
+const axios_1 = __importDefault(require("axios"));
+const const_2 = require("./cfg/const");
 function isFolderExists(folderPath) {
     try {
         // Check if the path exists
@@ -139,3 +146,46 @@ function removeFolderSync(folderPath) {
     }
 }
 exports.removeFolderSync = removeFolderSync;
+function gitCloneAndDownloadFolderSync(repoUrl, branch, subFolderName, targetPath) {
+    console.log('start cloning the dapp template..');
+    const tempFolder = path.resolve(const_1.dappTemplatePath, 'temp-clone-folder');
+    // Empty the temp folder if it exists
+    if (fs.existsSync(tempFolder)) {
+        fs.rmdirSync(tempFolder, { recursive: true });
+    }
+    // Create the temp folder
+    fs.mkdirSync(tempFolder, { recursive: true });
+    const cloneCommand = `
+git clone -n --depth=1 --single-branch --branch ${branch} --filter=tree:0 \
+${repoUrl} ${tempFolder}
+cd ${tempFolder}
+git sparse-checkout set ${subFolderName}
+git checkout
+`;
+    (0, child_process_1.execSync)(cloneCommand);
+    // Ensure targetPath exists and is a directory
+    if (!fs.existsSync(targetPath) || !fs.statSync(targetPath).isDirectory()) {
+        fs.mkdirSync(targetPath, { recursive: true });
+    }
+    const source = path.resolve(tempFolder, subFolderName);
+    copyFolderSync(source, targetPath);
+    // Empty the temp folder if it exists
+    if (fs.existsSync(tempFolder)) {
+        fs.rmdirSync(tempFolder, { recursive: true });
+    }
+    console.log(`Folder ${subFolderName} downloaded successfully from ${repoUrl} and moved to ${targetPath}`);
+}
+exports.gitCloneAndDownloadFolderSync = gitCloneAndDownloadFolderSync;
+function loadTemplateOpts() {
+    return __awaiter(this, void 0, void 0, function* () {
+        const githubUrl = `https://raw.githubusercontent.com/${const_2.dappTemplateGitRepoUserAndName}/${const_2.dappTemplateGitBranch}/${const_2.dappTemplateGitFolder}/${const_2.dappTemplateGitSelectOptionFile}`;
+        try {
+            const response = yield axios_1.default.get(githubUrl);
+            return response.data;
+        }
+        catch (error) {
+            throw new Error(`Error fetching JSON: ${error.message}`);
+        }
+    });
+}
+exports.loadTemplateOpts = loadTemplateOpts;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@offckb/cli",
-  "version": "0.1.0-rc5",
+  "version": "0.1.0-rc7",
   "description": "ckb development network for your first try",
   "author": "Retric Su <retric@cryptape.com>",
   "license": "MIT",
@@ -26,8 +26,8 @@
     "build": "tsc",
     "start": "ts-node-dev --transpile-only src/cli.ts",
     "clean": "rm -rf ./target",
-    "lint": "eslint \"{src,templates}/**/*.ts\" \"{src,templates}/**/*.tsx\" --ignore-pattern 'node_modules/'",
-    "lint:fix": "eslint \"{src,templates}/**/*.ts\" \"{src,templates}/**/*.tsx\" --ignore-pattern 'node_modules/' --fix",
+    "lint": "eslint \"src/**/*.ts\" \"templates/*.ts\" --ignore-pattern 'node_modules/'",
+    "lint:fix": "eslint \"src/**/*.ts\" \"templates/*.ts\" --ignore-pattern 'node_modules/' --fix",
     "fmt": "prettier --write '{src,templates,account}/**/*.{js,jsx,ts,tsx,md,json}'"
   },
   "husky": {

package/templates/config.json

@@ -58,6 +58,41 @@
       "TX_HASH": "0x1dbed8dcfe0f18359c65c5e9546fd15cd69de73ea0a502345be30180649c9467",
       "INDEX": "0x9",
       "DEP_TYPE": "code"
+    },
+    "SPORE": {
+      "CODE_HASH": "0x7e8bf78a62232caa2f5d47e691e8db1a90d05e93dc6828ad3cb935c01ec6d208",
+      "HASH_TYPE": "data1",
+      "TX_HASH": "0x1dbed8dcfe0f18359c65c5e9546fd15cd69de73ea0a502345be30180649c9467",
+      "INDEX": "0xa",
+      "DEP_TYPE": "code"
+    },
+    "SPORE_CLUSTER": {
+      "CODE_HASH": "0x7366a61534fa7c7e6225ecc0d828ea3b5366adec2b58206f2ee84995fe030075",
+      "HASH_TYPE": "data1",
+      "TX_HASH": "0x1dbed8dcfe0f18359c65c5e9546fd15cd69de73ea0a502345be30180649c9467",
+      "INDEX": "0xb",
+      "DEP_TYPE": "code"
+    },
+    "SPORE_CLUSTER_AGENT": {
+      "CODE_HASH": "0xc986099b41d79ca1b2a56ce5874bcda8175440a17298ea5e2bbc3897736b8c21",
+      "HASH_TYPE": "data1",
+      "TX_HASH": "0x1dbed8dcfe0f18359c65c5e9546fd15cd69de73ea0a502345be30180649c9467",
+      "INDEX": "0xc",
+      "DEP_TYPE": "code"
+    },
+    "SPORE_CLUSTER_PROXY": {
+      "CODE_HASH": "0xbe8b9ce3d05a32c4bb26fe71cd5fc1407ce91e3a8b9e8719be2ab072cef1454b",
+      "HASH_TYPE": "data1",
+      "TX_HASH": "0x1dbed8dcfe0f18359c65c5e9546fd15cd69de73ea0a502345be30180649c9467",
+      "INDEX": "0xd",
+      "DEP_TYPE": "code"
+    },
+    "SPORE_LUA": {
+      "CODE_HASH": "0x94a9b875911ace20f1f0d063a26495d14e4b04e32fd218261bb747f34e71ae47",
+      "HASH_TYPE": "data1",
+      "TX_HASH": "0x1dbed8dcfe0f18359c65c5e9546fd15cd69de73ea0a502345be30180649c9467",
+      "INDEX": "0xe",
+      "DEP_TYPE": "code"
     }
   }
 }

package/dist/cfg/select.d.ts

@@ -1 +0,0 @@
-export declare function selectTemplate(): Promise<string>;

package/dist/cfg/select.js

@@ -1,51 +0,0 @@
-"use strict";
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.selectTemplate = void 0;
-const prompts_1 = require("@inquirer/prompts");
-const select_1 = __importDefault(require("@inquirer/select"));
-function selectTemplate() {
-    return __awaiter(this, void 0, void 0, function* () {
-        const answer = yield (0, select_1.default)({
-            message: 'Select a dapp template',
-            choices: [
-                {
-                    name: 'View and Transfer Balance',
-                    value: 'transfer',
-                    description: 'a simple dapp to check CKB balance and transfer CKB',
-                },
-                {
-                    name: 'Issue Token via XUDT scripts',
-                    value: 'xudt',
-                    description: 'a simple dapp to issue your own token via XUDT scripts',
-                },
-                new prompts_1.Separator(),
-                {
-                    name: 'Issue Token With Max Supply Limit via Omnilock And XUDT scripts(coming)',
-                    value: 'xudt',
-                    description: 'a simple dapp to issue your own token with max supply limit via XUDT scripts',
-                    disabled: true,
-                },
-                {
-                    name: 'Create NFT With Spore scripts(coming)',
-                    value: 'xudt',
-                    description: 'a simple dapp to issue your own token with XUDT scripts',
-                    disabled: true,
-                },
-            ],
-        });
-        return answer;
-    });
-}
-exports.selectTemplate = selectTemplate;

package/templates/transfer/index.html

@@ -1,13 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>View and Transfer Balance</title>
-  </head>
-  <body>
-    <div id="root"></div>
-    <script src="index.tsx" type="module"></script>
-  </body>
-</html>

package/templates/transfer/index.tsx

@@ -1,89 +0,0 @@
-import React, { useEffect, useState } from 'react';
-import ReactDOM from 'react-dom';
-import { Script } from '@ckb-lumos/lumos';
-import { capacityOf, generateAccountFromPrivateKey, transfer } from './lib';
-
-const app = document.getElementById('root');
-ReactDOM.render(<App />, app);
-
-export function App() {
-  const [privKey, setPrivKey] = useState('');
-  const [fromAddr, setFromAddr] = useState('');
-  const [fromLock, setFromLock] = useState<Script>();
-  const [balance, setBalance] = useState('0');
-
-  const [toAddr, setToAddr] = useState('');
-  const [amount, setAmount] = useState('');
-
-  useEffect(() => {
-    const updateFromInfo = async () => {
-      const { lockScript, address } = generateAccountFromPrivateKey(privKey);
-      const capacity = await capacityOf(address);
-      setFromAddr(address);
-      setFromLock(lockScript);
-      setBalance(capacity.toString());
-    };
-
-    if (privKey) {
-      updateFromInfo();
-    }
-  }, [privKey]);
-
-  const onInputPrivKey = (e: React.ChangeEvent<HTMLInputElement>) => {
-    // Regular expression to match a valid private key with "0x" prefix
-    const priv = e.target.value;
-    const privateKeyRegex = /^0x[0-9a-fA-F]{64}$/;
-
-    const isValid = privateKeyRegex.test(priv);
-    if (isValid) {
-      setPrivKey(priv);
-    } else {
-      alert(
-        `Invalid private key: must start with 0x and 32 bytes length. Ensure you're using a valid private key from the offckb accounts list.`,
-      );
-    }
-  };
-
-  const enabled = +amount > 6100000000 && +balance > +amount && toAddr.length > 0;
-  const amountTip =
-    amount.length > 0 && +amount < 6100000000 ? (
-      <span>
-        amount must larger than 6,100,000,000(61 CKB), see{' '}
-        <a href="https://medium.com/nervosnetwork/understanding-the-nervos-dao-and-cell-model-d68f38272c24">why</a>
-      </span>
-    ) : null;
-
-  return (
-    <div>
-      <h1>View and Transfer Balance</h1>
-      <label htmlFor="private-key">Private Key: </label>&nbsp;
-      <input id="private-key" type="text" onChange={onInputPrivKey} />
-      <ul>
-        <li>CKB Address: {fromAddr}</li>
-        <li>
-          Current lock script:
-          <pre>{JSON.stringify(fromLock, null, 2)}</pre>
-        </li>
-
-        <li>Total capacity: {(+balance).toLocaleString()}</li>
-      </ul>
-      <label htmlFor="to-address">Transfer to Address: </label>&nbsp;
-      <input id="to-address" type="text" onChange={(e) => setToAddr(e.target.value)} />
-      <br />
-      <label htmlFor="amount">Amount</label>
-      &nbsp;
-      <input id="amount" type="number" onChange={(e) => setAmount(e.target.value)} />
-      <small>Tx fee: 100,000 (0.001 CKB)</small>
-      <br />
-      <small style={{ color: 'red' }}>{amountTip}</small>
-      <br />
-      <br />
-      <button
-        disabled={!enabled}
-        onClick={() => transfer({ amount, from: fromAddr, to: toAddr, privKey }).catch(alert)}
-      >
-        Transfer
-      </button>
-    </div>
-  );
-}