Can we split the `index.ts` file into multiple parts?

[ShookLyngs]

Issue

The entry index.ts file of the tutorial, brings too much complexity, in my opinion.

Let's first take a look at the index.ts file:

// Lots of imports
import ... from '...'

// Some variable definitions about private-key and account
const xxx = xxx
const xxxx = xxxx

// Major function 1, constructing the transaction
const constructHelloWorldTx = (...) => { ... }

// Major function 2, sign and send the transaction
const signAndSendTx = (...) => { ... }

// Finally, the teaching steps
(async () => {
  // step 1
  ...
  // step 2
  ...
  // step n
  ...
})()

As we can see, the index.ts file is not so easy to read, especially for newcomers, for several reasons:

1. Structurally, the last part of the code (the part with steps) is important for newcomers, so it should be placed near the top
2. The index.ts file implements too many functions, which also affects the readability of it

Idea

So I was thinking maybe we could split index.ts (including other files like helper.ts) into more parts to improve readability of the code, and to reduce the complexity of the code.

At first, we show readers the simplest code like a magic with only a few steps, so reader can run the code with confidence. And then, if readers want to learn more about how each step works, they can jump directly to the specific file where the target function belongs.

For example, if a reader wants to know how a transaction is constructed, he can directly open the file where constructHelloWorldTx function is located.

So in my opinion, index.ts should look like this:

import { constructHelloWorldTx } from './constructHelloWorldTx'
import { signAndSendTx } from './signAndSend'
import { CHARLIE } from './keys';

(async () => {
  // Step 1: declare an account for xxx purpose
  const privKey = CHARLIE.PRIVATE_KEY
  const account = generateAccountFromPrivateKey(privKey)
  
  // Step 2: this is the message that will be written on chain
  const onChainMemo: string = "Hello Common Knowledge Base!"

  /// Step 3: construct the transaction
  let txSkeleton = await constructHelloWorldTx(onChainMemo);

  // Step 4: sign and send the transaction
  const txHash = await signAndSendTx(txSkeleton, privKey);
  console.log(`Transaction ${txHash} sent.\n`);

  // Done, let's see the transaction in CKB Testnet Explorer
  console.log(`See ${CKB_TESTNET_EXPLORER}/transaction/${txHash}`);
})()

And in the constructHelloWorldTx.ts file (same for other files), the structure should be equally clear, like this:

// Imports 
import ... from ...

export async function constructHelloWorldTx(...) {
  // Step 1: xxxx
  ...
  // Step 2: xxxx
  ...
  // Step n: xxxx
  ....
}