JS Demo v0.1 for TTHW

Writing "Common Knowledge: Hello world!" into a cell on CKB testnet using Lumos

Author: Flouse

README.md

@@ -24,9 +24,3 @@ https://github.com/Flouse/ckb-tthw/blob/229f9332ceb1bf365e7e1ea131322001cf1b862c
   - Preview and interact with `simple transfer` code online through [codesandbox](https://codesandbox.io).
     https://codesandbox.io/s/github/ckb-js/lumos/tree/develop/examples/secp256k1-transfer?file=/lib.ts
   - etc.
-
-- [Lumos docs site](https://cryptape.github.io/lumos-doc/)
-  - [Hello Lumos](https://cryptape.github.io/lumos-doc/docs/preparation/hellolumos)
-  - DApps on CKB Workshop
-    - https://cryptape.github.io/lumos-doc/docs/guides/integratenft
-    - etc.

js/README.md

@@ -0,0 +1,60 @@
+## Writing "Common Knowledge: Hello world!" into a cell on CKB testnet using Lumos
+
+In this tutorial, you will learn how to write "`Common Knowledge: Hello World!`" into a cell on CKB testnet using [Lumos](https://github.com/ckb-js/lumos), a JavaScript/TypeScript library for Nervos CKB. You will also learn how to check the transaction on CKB explorer.
+
+## Prerequisites
+Before we begin, it is better that you have some basic knowledge of [Nervos CKB](https://ckbacademy.vercel.app/courses/basic-theory).
+But if you don't, there's no need to worry, just follow this tutorial step by step.
+
+
+## Only 3 Steps
+
+Although some of the complexity is wrapped up, intuitively writing "Common Knowledge: Hello World!" into a cell on CKB testnet is really just `three steps`:
+
+https://github.com/Flouse/ckb-tthw/blob/229f9332ceb1bf365e7e1ea131322001cf1b862c/tthw-tmp-demo/index.ts#L85-L96
+
+### Talk is cheap. Run the code.
+
+```bash
+git clone https://github.com/Flouse/ckb-tthw.git
+cd ckb-tthw/js
+
+# Install dependences such as @ckb-lumos, etc.
+npm install
+
+# Let's run it.
+npm run start
+# Result
+# Transaction 0xad66eb1d076cfef73a98a8b76e6bc6c21b2c564011c30e0436de2f5f89579c84 sent.
+# See https://pudge.explorer.nervos.org/transaction/0x57ff3a724b41808d1bae9a7d611956145542cd70cd2e1c6c43dab34ab28b9ea7
+```
+<!-- TODO: add result image -->
+Would you like to change `onChainMemo` string and re-run it again?
+
+## Show me the code
+Let's dive into two functions that take up most of the code space. The [code and comments](./index.ts) are quite self-explained.
+
+### Function `constructHelloWorldTx`
+This function creates a new transaction that adds a cell with the proposed on-chain message.
+
+1. Create a transaction skeleton that serves as a blueprint for the final transaction.
+Define the output cell, which includes the capacity and lock script, and add it to the transaction skeleton, which is a mutable data structure used to construct a CKB transaction incrementally.
+2. Modify the transaction skeleton to include the necessary capacity to cover the output cell by injecting enough input cells.
+3. Pay the transaction fee by `payFeeByFeeRate` function, again, provided by Lumos.
+
+### Function `signAndSendTx`
+This function is self-explanatory:
+1. Sign the transaction skeleton using a test private key.
+2. Send the signed transaction to CKB testnet.
+
+### Check the message on CKB explorer
+![Check the message on CKB explorer](https://user-images.githubusercontent.com/1297478/236415697-c3a49e0d-eb8f-473e-a0c1-a587c20e5a42.png)
+The cell data is the hex format of "Common Knowledge: Hello world!".
+
+
+## Conclusion
+In this tutorial, you learned how to write a message into a cell on CKB testnet using Lumos. You also learned how to check the transaction on CKB explorer. Lumos provides a set of helper functions that make it easy to interact with the CKB blockchain. With Lumos, you can easily create, sign, and send transactions to the CKB blockchain.
+
+## References
+- [CKB basic theoretical knowledge](https://ckbacademy.vercel.app/courses/basic-theory)
+- [CKB basic practical operation](https://ckbacademy.vercel.app/courses/basic-operation)

tthw-tmp-demo/helper.ts js/helper.tstthw-tmp-demo/helper.ts renamed to js/helper.ts

@@ -33,6 +33,7 @@ const constructHelloWorldTx = async (
     },
     data: onChainMemoHex,
   };
+  // push the target output cell into the transaction's outputs array
   txSkeleton = txSkeleton.update("outputs", (outputs) => outputs.push(targetOutput));
 
   // FIXME: The data of the input cells should be empty => don't inject memo cells
@@ -71,8 +72,8 @@ const signAndSendTx = async (
   // create a new RPC instance pointing to CKB testnet
   const rpc = new RPC("https://testnet.ckb.dev/rpc");
 
-  // send the transaction to CKB node, null and passthrough mean skipping outputs validation
-  const txHash = await rpc.sendTransaction(signedTx)
+  // send the transaction to CKB node
+  const txHash = await rpc.sendTransaction(signedTx);
   return txHash;
 }
 

tthw-tmp-demo/index.ts js/index.tstthw-tmp-demo/index.ts renamed to js/index.ts

@@ -1,6 +1,6 @@
 {
   "name": "ckb-tthw",
-  "version": "0.0.2",
+  "version": "0.1.0",
   "description": "Time to `Hello World` on CKB",
   "main": "index.js",
   "scripts": {