diff --git a/content/tutorials/guide-web3js/10.index.md b/content/tutorials/guide-web3js/10.index.md index 3a8be6f9..03e1b867 100644 --- a/content/tutorials/guide-web3js/10.index.md +++ b/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 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 @@ -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,43 @@ from the `zks_` namespace of the [JSON-RPC API](https://docs.zksync.io/build/api ```javascript +const mainContract = await web3.ZKsync.rpc.getMainContract(); +console.log(`Main contract: ${mainContract}`); +``` + + +**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); ``` - -### 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 index a7dadaed..88ccae2b 100644 --- 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 tools: - - web3.js + - Web3.js + - ZKsync CLI