From 4ee0ce546302255f0df663e3f294d33d9b35c3d1 Mon Sep 17 00:00:00 2001 From: Dan Forbes Date: Tue, 20 Feb 2024 09:13:25 -0800 Subject: [PATCH 1/3] Web3.js Plugin Tooling Guide --- docs/.vuepress/sidebar/en.ts | 8 +- docs/build/tutorials/tooling-guides/web3js.md | 73 +++++++++++++++++++ 2 files changed, 79 insertions(+), 2 deletions(-) create mode 100644 docs/build/tutorials/tooling-guides/web3js.md diff --git a/docs/.vuepress/sidebar/en.ts b/docs/.vuepress/sidebar/en.ts index fb979375ba..8c2afa1d1d 100644 --- a/docs/.vuepress/sidebar/en.ts +++ b/docs/.vuepress/sidebar/en.ts @@ -112,6 +112,10 @@ export const enSidebar = sidebar({ text: "Viem", link: "/build/tutorials/tooling-guides/viem.md", }, + { + text: "Web3.js", + link: "/build/tutorials/tooling-guides/web3js.md", + }, { text: "API3", link: "/build/tutorials/tooling-guides/api3.md", @@ -250,11 +254,11 @@ export const enSidebar = sidebar({ children: [ { text: "Overview", - link: "/build/tooling/foundry/overview.md", + link: "/build/tooling/foundry/overview.md", }, { text: "Getting Started", - link: "/build/tooling/foundry/getting-started.md", + link: "/build/tooling/foundry/getting-started.md", }, ] }, diff --git a/docs/build/tutorials/tooling-guides/web3js.md b/docs/build/tutorials/tooling-guides/web3js.md new file mode 100644 index 0000000000..0dda92cef5 --- /dev/null +++ b/docs/build/tutorials/tooling-guides/web3js.md @@ -0,0 +1,73 @@ +--- +head: + - - meta + - name: "twitter:title" + content: Web3.js | zkSync Docs +--- + +# Web3.js + +[Web3.js](https://web3js.org/) is a robust and flexible collection of libraries for TypeScript and JavaScript developers. It serves as an essential tool for connecting and crafting applications within the Ethereum ecosystem 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. + +## Installation + +Start by adding Web3.js and the zkSync plugin for Web3.js to your project. Open your terminal and execute the following command: + +```bash +npm install --save 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 + +### 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) and [register the plugin](https://docs.web3js.org/guides/web3_plugin_guide/plugin_users#registering-the-plugin). + +#### Example + +```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()); +``` + +:::info + +- This examples uses the zkSync Sepolia testnet. + +::: + +### Ethereum JSON-RPC API + +Use the Web3.js `eth` package to fetch data from the zkSync [Ethereum JSON-RPC API](https://ethereum.org/en/developers/docs/apis/json-rpc). + +#### Fetch the Latest Block Number + +```javascript +const blockNumber = await web3.eth.getBlockNumber(); +console.log(`Current block number: ${blockNumber}`); +``` + +### zkSync L2-Specific JSON-RPC API + +The zkSync plugin for Web3.js implements the L2-specific [zkSync JSON-RPC API](https://docs.zksync.io/build/api.html). + +#### Fetch the Main Contract Address + +```javascript +const mainContract = await web3.zkSync.rpc.getMainContract(); +console.log(`Main contract: ${mainContract}`); +``` + +### Wallet Configuration + +Refer to the Web3.js documentation for [details regarding wallet configuration](https://docs.web3js.org/#setting-up-a-wallet). From b867e50e7b970c8222ef0d6f222aeef446c15c8a Mon Sep 17 00:00:00 2001 From: Dan Forbes Date: Wed, 21 Feb 2024 14:26:56 -0800 Subject: [PATCH 2/3] docs: formatting --- docs/build/tutorials/tooling-guides/web3js.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/docs/build/tutorials/tooling-guides/web3js.md b/docs/build/tutorials/tooling-guides/web3js.md index 0dda92cef5..f03cd5391e 100644 --- a/docs/build/tutorials/tooling-guides/web3js.md +++ b/docs/build/tutorials/tooling-guides/web3js.md @@ -30,10 +30,10 @@ Before using the zkSync plugin for Web3.js, you need to [initialize Web3 with a #### Example ```javascript -import { Web3 } from 'web3'; -import { ZkSyncPlugin } from 'web3-plugin-zksync'; +import { Web3 } from "web3"; +import { ZkSyncPlugin } from "web3-plugin-zksync"; -const zkSyncRpcUrl: string = 'https://sepolia.era.zksync.dev'; +const zkSyncRpcUrl: string = "https://sepolia.era.zksync.dev"; console.log(`📞 Connecting to zkSync Era [${zkSyncRpcUrl}]`); const web3: Web3 = new Web3(zkSyncRpcUrl); From 4704ed98d977ac918fc098bf7c3a91c04103130a Mon Sep 17 00:00:00 2001 From: Dan Forbes Date: Thu, 22 Feb 2024 07:54:44 -0800 Subject: [PATCH 3/3] Update docs/build/tutorials/tooling-guides/web3js.md Co-authored-by: Antonio --- docs/build/tutorials/tooling-guides/web3js.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/build/tutorials/tooling-guides/web3js.md b/docs/build/tutorials/tooling-guides/web3js.md index f03cd5391e..ad154a5bb0 100644 --- a/docs/build/tutorials/tooling-guides/web3js.md +++ b/docs/build/tutorials/tooling-guides/web3js.md @@ -59,7 +59,7 @@ console.log(`Current block number: ${blockNumber}`); ### zkSync L2-Specific JSON-RPC API -The zkSync plugin for Web3.js implements the L2-specific [zkSync JSON-RPC API](https://docs.zksync.io/build/api.html). +The zkSync plugin for Web3.js implements the zkSync-specific methods from the `zks_` namespace of the [JSON-RPC API](https://docs.zksync.io/build/api.html#zksync-era-json-rpc-methods). #### Fetch the Main Contract Address