Merge branch 'main' into sarah/spend-limit-test

zkSync-Community-Hub · Aug 29, 2024 · a6ac39d · a6ac39d
2 parents c0b51bf + 939b796
commit a6ac39d
Show file tree

Hide file tree

Showing 2 changed files with 88 additions and 28 deletions.
diff --git a/content/tutorials/guide-web3js/10.index.md b/content/tutorials/guide-web3js/10.index.md
@@ -8,24 +8,52 @@ 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 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 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
 
-Before using the ZKsync plugin for Web3.js, you need to [initialize Web3 with a provider](https://docs.web3js.org/#initialize-web3-with-a-provider)
+Before using the ZKsync plugin for Web3.js, you need to [initialize Web3 with a provider](https://docs.web3js.org/guides/getting_started/quickstart#initialize-web3-with-a-provider)
 and [register the plugin](https://docs.web3js.org/guides/web3_plugin_guide/plugin_users#registering-the-plugin).
 
 #### Example
@@ -34,10 +62,10 @@ and [register the plugin](https://docs.web3js.org/guides/web3_plugin_guide/plugi
 import { Web3 } from "web3";
 import { ZKsyncPlugin } from "web3-plugin-zksync";
 
-const zksyncRpcUrl: string = "https://sepolia.era.zksync.dev";
+const web3: Web3 = new Web3("https://rpc.sepolia.org");
 
+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));
 ```
 
@@ -47,18 +75,16 @@ This examples uses the %%zk_testnet_name%%.
 
 ### Ethereum JSON-RPC API
 
-Use the Web3.js `eth` package to fetch data from the ZKsync [Ethereum JSON-RPC API](https://docs.zksync.io/build/api-reference/ethereum-rpc).
+ZKsync Era implements the [Ethereum JSON-RPC API](https://docs.zksync.io/build/api-reference/ethereum-rpc),
+so you can use the Web3.js `eth` package to fetch data from the Layer 1 _and_ Layer 2 networks.
 
 #### 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 l1BlockNumber = await web3.eth.getBlockNumber();
+console.log(`Current L1 block number: ${l1BlockNumber}`);
+const l2BlockNumber = await web3.ZKsync.L2.eth.getBlockNumber();
+console.log(`Current L2 block number: ${l2BlockNumber}`);
 ```
 
 ### ZKsync L2-Specific JSON-RPC API
@@ -70,15 +96,45 @@ 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 web3: Web3 = new Web3("https://rpc.sepolia.org");
+
+const zksyncRpcUrl: string = "https://sepolia.era.zksync.dev";
+console.log(`📞 Connecting to ZKsync Era [${zksyncRpcUrl}]`);
+web3.registerPlugin(new ZKsyncPlugin(zksyncRpcUrl));
+
 async function main() {
+  const l1BlockNumber = await web3.eth.getBlockNumber();
+  console.log(`Current L1 block number: ${l1BlockNumber}`);
+  const l2BlockNumber = await web3.ZKsync.L2.eth.getBlockNumber();
+  console.log(`Current L2 block number: ${l2BlockNumber}`);
+
   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 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 [ZKsync Web3.js documentation](https://sdk.zksync.io/js/web3js) for more details and
+code samples to continue building with the Web3.js Plugin.
diff --git a/content/tutorials/guide-web3js/_dir.yml b/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,17 @@ 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 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 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
+updated: 2024-08-29
 tools:
-  - web3.js
+  - Web3.js
+  - ZKsync CLI