fix: add cli to web3js

content/tutorials/guide-web3js/10.index.md

@@ -8,20 +8,48 @@ It serves as an essential tool for connecting and crafting applications within t
 and can be extended to support other networks through its [plugin system](https://docs.web3js.org/guides/web3_plugin_guide/).
 
 You can use the [ZKsync plugin](https://github.com/web3/web3-plugin-zksync) for Web3.js
-to interact with the [ZKsync JSON-RPC API](https://docs.zksync.io/build/api.html) smart contracts deployed on ZKsync.
+to interact with the [ZKsync JSON-RPC API](https://docs.zksync.io/build/api.html) smart contracts deployed
+on ZKsync. Whether you are setting up a project from scratch or integrating Web3.js into an existing project,
+this guide has you covered.
 
-## Installation
+## Installation with existing project
 
-Start by adding Web3.js and the ZKsync plugin for Web3.js to your project.
+For existing projects, start by adding Web3.js and the ZKsync plugin for Web3.js.
 Open your terminal and execute the following command:
 
 ```bash
-npm install --save web3 web3-plugin-zksync
+npm install web3 web3-plugin-zksync
 ```
 
 This command installs the latest version of Web3.js and the ZKsync plugin for Web3.js and adds them to your project's dependencies.
 
-## Initial Setup
+## Creating a project with zksync-cli
+
+This section provides a quick start for developers who prefer using the zksync-cli to bootstrap their Web3.js
+project from scratch. It’s ideal for those looking to create scripts that interact with ZKsync contracts in a new project.
+
+Step 1: Install the zksync-cli globally
+
+```bash
+npm install -g @matterlabs/zksync-cli
+```
+
+Step 2: Create a new ZKsync project by running
+
+```bash
+zksync-cli create --template node_web3js my-project
+```
+
+And then choose your preferred package manager in the list. This command will generate a new project with all
+necessary configurations for ZKsync and install all necessary dependencies.
+
+Step 3: Navigate to the newly created project directory:
+
+```bash
+cd my-project
+```
+
+Step 4: Let's walk through the code to understand each part before running the script.
 
 ### Initialization
 
@@ -52,13 +80,8 @@ Use the Web3.js `eth` package to fetch data from the ZKsync [Ethereum JSON-RPC A
 #### Fetch the Latest Block Number
 
 ```javascript
-
-async function main() {
-  const blockNumber = await web3.eth.getBlockNumber();
-  console.log(`Current block number: ${blockNumber}`);
-}
-
-main().catch(console.error);
+const blockNumber = await web3.eth.getBlockNumber();
+console.log(`Current block number: ${blockNumber}`);
 ```
 
 ### ZKsync L2-Specific JSON-RPC API
@@ -70,15 +93,42 @@ from the `zks_` namespace of the [JSON-RPC API](https://docs.zksync.io/build/api
 
 <!-- /*spellchecker: disable*/ -->
 ```javascript
+const mainContract = await web3.ZKsync.rpc.getMainContract();
+console.log(`Main contract: ${mainContract}`);
+```
+<!-- /*spellchecker: enable*/ -->
+
+Step 5: Write your code in `src/main.ts` file, then run the script using `npm run start`.
+
+```javascript
+import { Web3 } from "web3";
+import { ZKsyncPlugin } from "web3-plugin-zksync";
+
+const zksyncRpcUrl: string = "https://sepolia.era.zksync.dev";
+
+console.log(`📞 Connecting to ZKsync Era [${zksyncRpcUrl}]`);
+const web3: Web3 = new Web3(zksyncRpcUrl);
+web3.registerPlugin(new ZKsyncPlugin(zksyncRpcUrl));
+
 async function main() {
-  const mainContract = await web3.ZKsync.rpc.getMainContract();
-  console.log(`Main contract: ${mainContract}`);
-} 
+const blockNumber = await web3.eth.getBlockNumber();
+console.log(`Current block number: ${blockNumber}`);
+
+const mainContract = await web3.ZKsync.rpc.getMainContract();
+console.log(`Main contract: ${mainContract}`);
+}
 
 main().catch(console.error);
 ```
-<!-- /*spellchecker: enable*/ -->
 
-### Wallet Configuration
+## Recap
+In this tutorial, you’ve learned how to set up a Web3.js project with ZKsync, both by integrating it into an
+existing project and by starting from scratch using the zksync-cli. You’ve also explored how to interact with
+ZKsync specific JSON-RPC methods, such as retrieving the current block number and fetching the main contract
+address.
+
+## Learn More
 
-Refer to the Web3.js documentation for [details regarding wallet configuration](https://docs.web3js.org/#setting-up-a-wallet).
+- To further enhance your skills, explore the examples provided in the zksync-cli scripting template found under `src/examples`.
+These examples demonstrate additional scripts you can run with Web3.js to interact with ZKsync.
+- Refer to the [documentation](https://sdk.zksync.io/js/web3js) for more details and code samples to continue building with the Web3.js Plugin.

content/tutorials/guide-web3js/_dir.yml

@@ -1,4 +1,4 @@
-title: Using web3.js to interact with ZKsync
+title: Using Web3.js to interact with ZKsync
 featured: false
 authors:
   - name: ChainSafe
@@ -7,13 +7,16 @@ authors:
 github_repo: https://github.com/ChainSafe
 tags:
   - guide
-  - web3.js
-summary: This page will guide you through the steps to use web3.js to interact with ZKsync.
-description: This guide outlines how to use the ZKsync web3.js plugin to interact with ZKsync.
+  - Web3.js
+summary:
+  This guide will teach you how to set up and use Web3.js to interact with ZKsync, leveraging the ZKsync Web3.js plugin.
+description:
+  Learn how to use the ZKsync Web3.js plugin to interact with ZKsync. This guide covers setting up a new Web3.js project
+  with the zksync-cli, integrating ZKsync into an existing project, and sending RPC requests to ZKsync.
 what_you_will_learn:
-  - How to install web3.js and the ZKsync plugin
+  - How to setup a Web3.js project using the zksync-cli
+  - How to install Web3.js and the ZKsync plugin in an existing project
   - How to send RPC requests to ZKsync
-  - How to use ZKsync-specific methods
 updated: 2024-05-09
 tools:
-  - web3.js
+  - Web3.js