retricsu/zero2ckb-web

https://zero2ckb.ckbapp.dev/

CKBee Onboarding Guide

for a lot of CKBee, meaning new CKB developers / CKB newbies / or just some new people who get interested at CKB, learning CKB and understanding how CKB works sometimes can be a lot pain since the design of CKB is so different from other blockchains and CKB is so flexible for developers to coding and building apps on top of.

in order to lower the threshold, we create Zero2CKB, a place to learn CKB from scratch, using no code and no software, just plain web page!

the onboarding guide contains with 4 courses, at the end of this tutorial, you will complete the following task:

• send a pkp2h transaction
• send a multisig transaction
• deploy a simple contract
• deploy a upgradable contract

the website now is under heavy developing and considered to be not finished yet. if you got any question or any suggestion, you can just open a issue or even an PR in this repo.

How to run

change the src/config/constant.json server url if needed.

yarn && yarn build
PORT=<your client running port> yarn deploy

How to publish

1. Fork repositories
2. Change the code
3. Run yarn fmt
4. Push code
5. Create pull request

prebuild images

the repo's github packages will deploy prebuild image. the entire project is copy into /zero2ck-web folder in the image, with node_module pre-installed and react UI client pre-build.

zero2ckb-web's Issues

more clear error info for even-length Hexadecimal

Learn CKB from zero 英文版格式待调整

1. 文字加粗
   INPUT
   OUTPUT
   Setting
   Generate transaction
   Save
2. 整篇的行间距建议调宽些
3. 缩进处（灰色部分）的字号建议大些

【第二步：动手实践-观察一条链】中文表述不合适

这里ComboBox中文表述为按钮不是标准名字，不能很好地指导，直觉会引导用户到下面的元素

notice info should specifically indicate that the number type we put into the capacity field in the training box must be integer

【动手实践-发送一笔交易-交易的INPUT】建议在交易输入演示区增加清空功能

原因：演示区缺少清空功能，一次演示完成需要刷新页面才能清空输入内容。

右侧Nervos box中，查看cell详细信息的弹窗中的文字无法正常复制

右侧Nervos box中，查看cell详细信息的弹窗中的文字无法正常复制
所以无法做hex转化，以及完成手动填写交易信息

chrome, macOS big sur 11.6.4

即下方截图中灰框内的文字无法复制

页面缩放及窗口展开大小，影响页面多个按钮点击

os: win10
browser version: 版本 99.0.4844.51（正式版本） （64 位）
操作：

1. 浏览器处于最大化状态，页面显示正常；
2. 浏览器处于2/3宽度状态，页面调整，页面上缘测试链更新说明与语言选项元素重合，更新说明【ok】按钮及交易演示区【设置】按钮无法点击；（预期：浏览器窗口大小不影响页面功能）
3. 页面放大到150%，页面调整，页面上缘测试链更新说明与语言选项元素重合，更新说明【ok】按钮无法点击；（预期：网页缩放大小不影响页面功能）
   


【第一步：最小化的理论知识-怎么知道你的 Cell 属于你?】缺少shannon的内容，导致多处无法理解

Multiple input transaction failure

When I select multiple inputs in a transaction, the transaction failed with ValidationFailure(-31).
However, when I only select a single cell as the input, the transaction completes without error.

Here's an image of the error:

【动手实践-发送一笔交易-对交易进行签名】建议在文档中对输入使用多个cell的场景进行说明，否则容易容易让学习者无所适从。

主要是witnesses字段的规则，输入单个cell跟多个cell场景不一样，需要说明。

【动手实践-发送一笔交易-构造交易】建议在“将交易补充完整”的填写框增加刷新功能

【CKB-ToolBox-查找Cell】前端对非法内容的搜索在超出2m请求未终止，且未提供手动终止功能。

【第二步：动手实践-交易的 OUTPUT】“设置”窗口中，非法数据成功输入，导致页面内容无法显示

步骤：
1、在生成交易演示区的output部分，设置->加一个新Cell->capacity输入框中输入一个负整数
2、点击”保存“，保存成功，无异常提示；
3、点击“保存退出”，成功，无异常提示，退出后页面内容显示不出。

【CKB-ToolBox-16进制转换10进制】对非法数据的错误提示信息不够清晰明了

Empty transaction.outputs[0].lock.args for generated transaction

Using the drag and drop functionality in Transaction Output to generate the transaction, generates an invalid transaction. Let's take for example this transaction I just generated with that tool:

{
  "version": "0x0",
![Screenshot from 2022-05-05 18-58-21](https://user-images.githubusercontent.com/90913182/167005236-d072d1d2-c9ca-4d04-8655-c9d26f823172.png)

  "header_deps": [],
  "cell_deps": [
    {
      "out_point": {
        "tx_hash": "0x4f1097802dc6fe19b942f1c2e8e52d564ee35899e4aef308101c86c49bc1f471",
        "index": "0x0"
      },
      "dep_type": "dep_group"
    }
  ],
  "inputs": [
    {
      "previous_output": {
        "tx_hash": "0x41a2f4f14500fa11b98b88f86017e6974118bfb475cb041fe16825157820ae0d",
        "index": "0x0"
      },
      "since": "0x0"
    }
  ],
  "outputs": [
    {
      "capacity": "0x2ecbd7ce61",
      "lock": {
        "code_hash": "0x9bd7e06f3ecf4be0f2fcd2188b23f1b9fcc88e5d4b65a8637b17723bbda3cce8",
        "hash_type": "type",
        "args": ""
      }
    }
  ],
  "outputs_data": [
    "0x"
  ],
  "witnesses": [
    "0x"
  ]
}

This transaction cannot pass the validation in the Fill in the transaction information and it reports this error:

transaction.outputs[0].lock.args must be a hex string!

The reason being that transaction.outputs[0].lock.args is empty, so it's not a valid hexadecimal value!

【第二步：动手实践-交易的 OUTPUT】“设置”窗口中，对内容格式有要求的输入框对输入内容无限制，导致非法输入有效

more clear docs about only showing parts of wallet cells/txs

【第一步：最小化的理论知识-锁的代码如果丢了怎么办？】建议lock字段的示意规范表示

【动手实践-发送一笔交易-构造交易】建议供填写的交易模板的witnesses字段“0x”进行说明，否则容易让学习者误会，导致提交失败。

误会点1：input：单个cell, witnesses字段填写为：
"witnesses": [
"0x55000000100000005500000055000000410000001b69323d8a32d32567a9d6a90e26eb8ef52c6a4dad3693c2aa4c4c90e803c0701b908f07070c469bacdf357182cf25f529ae7a374f38968b8512359ce7c1da8d00",
"0x"
]
误会点2：input: 多个cell, witnesses字段填写为多个相同的签名内容。

钱包2跟钱包3的live cell以及Tx没有，需要补上

【第二步：动手实践-观察一条链】英文表述容易造成困扰，建议加一个“click"动作指示

建议改为"click and select..."

语言选择按钮选中状态显示不明显，建议通过背景反色来显示

No mention of a minimal fee of 355 shannons/KB

The section Fill in the transaction information should mention the minimal fee of 355 shannons/KB, when constructing the transaction, as later on it's enforced in The final step is to send the transaction back on-chain section.

Probably it's not the right thing to let the user discover it the hard way at the end, or maybe it's educational, I don't know!! 🤣

【第二步：动手实践-观察一条链】较长的交易内容在浏览器自然状态下显示不全

input nothing just switching the cursor position triggers error message

2e110f312bb6098530209ff1fe944ba4.mp4

【第二步：动手实践-观察一条链】后台k8s node升级，ckb miner重启后，部分账户获取信息出现异常，但错误信息无内容

操作：1、在“钱包对应的live cell”窗口，选择钱包2，查看返回结果
预期：钱包有对应的live cell，则返回live cell及相应的交易
实际:
1、返回信息有交易但看不到cell,无错误提示；

2、返回信息有交易但看不到cell,有错误提示，但内容空白；

3、返回cell及交易，无错误提示，但多次返回的交易数量不一样

【第二步：动手实践-构造交易-生成待签名的 message】raw_tx生成tx_hash成功，生成message失败，无错误提示

操作：
1、在交易模板中填入以下内容：
{
"version": "0x0",
"header_deps": [],
"cell_deps": [
{
"out_point": {
"tx_hash": "0x4f1097802dc6fe19b942f1c2e8e52d564ee35899e4aef308101c86c49bc1f471",
"index": "0x0"
},
"dep_type": "dep_group"
}
],
"inputs": [
{
"previous_output": {
"tx_hash": "0xbbff9e98d6989678484a32c3bfeac66840ca28c5b927031b938153bc4ab1e20a",
"index": "0x0"
},
"since": "0x0"
},
{
"previous_output": {
"tx_hash": "0xd0317b3e2e24ce14f806d3fb46f8d40f593d445e3dca0dbe6effde59e8275b29",
"index": "0x0"
},
"since": "0x0"
}
],
"outputs": [
{
"capacity": "0x2e90edd000",
"lock": {
"code_hash": "0x9bd7e06f3ecf4be0f2fcd2188b23f1b9fcc88e5d4b65a8637b17723bbda3cce8",
"hash_type": "type",
"args": "0x43d509d97f26007a285f39241cffcd411157196c"
}
}
],
"outputs_data": [
"0x"
],
"witnesses": [
"0x",
"0x"
]
}
2、生成tx_hash，成功；
3、生成message，失败，无提示。（预期：失败，提示错误）

some typo

lock_arg: indicates the first 20 bits of the wallet's corresponding public key hash. Think of it simply as a fingerprint of the public key.
Should be 20 bytes

This is the distinction between the type script and the lock script. The former protects the ownership of the box and the latter secures the data transformation rules.
exchange former and latter. The former secures the data transformation rules and the latter protects the ownership of the box

in the second summary, The size of the entire cell cannot exceed the value of the capacity field

This term is duplicated, it was shown twice in the list.

---

original post by @YunwenL

多个刷新按钮均无效

【动手实践-发送一笔交易-交易的INPUT,交易的OUTPUT】偶现演示区cell无法拖入输入框

偶现：演示区cell无法拖入输入框，刷新页面后恢复
触发条件：未知

1ae7516f8d2c948987c7faa4cdd2b96b.mp4