Working with the ZKsync L2 Provider Using web3-plugin-zksync

Working with the ZKsync L2 Provider Using web3-plugin-zksync

In the previous article, we covered how to set up a local ZKsync environment and connect it to the Web3.js plugin. Now, we’ll take it a step further by exploring how to interact with the ZKsync Layer 2 provider. By the end of this guide, you’ll know how to query token balances and send transactions.

We’ll walk through an example where we:

  • Initialize the ZKsync L2 provider
  • Prepare an account for transactions
  • Query the balances
  • Create, sign, and send a transaction
  • Retrieve the transaction receipt

Step 1: Initialize the ZKsync L2 Provider

The first step is to initialize the ZKsync Layer 2 provider. We use the initWithDefaultProvider method from Web3ZKsyncL2, which allows us to connect to the local ZKsync network.

In this example, we’re using the Localhost network configuration, which assumes that you're running a local instance of ZKsync.

Step 2: Prepare an Account

Before we can send transactions, we need to prepare an account. In the local testing environment, rich accounts with Ethereum (ETH) are available in the test/local/rich-wallets.json file in the web3-plugin-zksync repository. The first account (account[0]) contains both DAI and CROWN ERC20 tokens, which you can use for testing purposes.

To prepare this account for transactions, we need to convert its private key into a Web3Account. This will allow the account to sign and send transactions. Here’s how we do that:

By using the privateKeyToAccount method, we generate a Web3Account object from the rich account's private key. Then, we add this account to the provider’s wallet so it’s ready for transactions.

Step 3: Querying Token Balances

One of the common operations on any blockchain is querying balances. 

Step 4: Populating and Signing a Transaction

Once we’ve queried the balance and prepared the account, let’s create a new transaction. We’ll populate the transaction details such as the sender’s address, the recipient’s address, and the value to send.

The populateTransaction method helps you create a raw transaction object, which can then be signed and sent. Here, we are creating a simple transaction that sends 1 unit of the native token (ETH) from the rich account to a newly generated address.

Next, we sign the transaction using the rich account’s private key:

This method securely signs the transaction with the private key of the account that is sending the transaction.

Step 5: Sending the Transaction and Getting the Receipt

After signing the transaction, we can broadcast it to the ZKsync network. To do this, we’ll use the sendRawTransaction method, which sends the signed transaction and returns a transaction hash.

Once the transaction has been sent, we can wait for its confirmation and retrieve the receipt, which contains details about the transaction’s outcome.

The waitTxReceipt method waits for the transaction to be mined and returns the receipt, which includes important information such as the block number, gas used, and the status of the transaction.

Summary

In this article, we’ve explored how to interact with the ZKsync Layer 2 provider using Web3.js. Here’s a quick recap of what we covered:

  1. Initializing the provider: We connected to the local ZKsync network.
  2. Querying balances: We fetched ETH and ERC-20 (DAI) balances for a given account.
  3. Preparing an account: We converted the rich account’s private key into a Web3Account and added it to the wallet.
  4. Sending transactions: We created, signed, and sent a transaction, and retrieved the transaction receipt.

With this setup, you’re now ready to start building and testing applications on ZKsync Layer 2. Stay tuned for more advanced examples in future articles! Next, we’ll cover more complex topics like smart accounts and multisig wallets!

Here are the essential links to help you get started:

  • Web3.js Plugin for ZKsync: You can find the official plugin repository here.
  • Examples for Using the Plugin: I've also prepared a dedicated repository with all the code examples from this tutorial and more, which you can access here.
  • ZKsync Web3.js Documentation: For more detailed information and resources, check out the official documentation here.

Read more