[SDK] Can't get the signer for zkSync in web3-react

[polartar]

Environment

Testnet

Acknowledgement

• I understand that issues are expected with the Python and Java SDK as they are being updated.

Issue Description

• issue
  can't get the signer for zkSync.
  I need to call the write function of the smart contract and tried to get the signer for zkSync, but it has an error.
  

After signing, it has an error.

• Environment
  Windows, Metamask, Node 16. Node 18
• Libraries and framework
  Next.js, Web3-react, zksync

Expected Behavior

Should get the zkSync signer.

Code Example

import * as zksync from 'zksync';

const { library } = useWeb3React();
const syncProvider = await zksync.getDefaultProvider('goerli');
const syncWallet = await zksync.Wallet.fromEthSigner(library.getSigner(), syncProvider); // This is causing the error. It displays the
//Metamask popup to sign the signature. After clicking the sign button, it throws the error.

Repo Link (Optional)

No response

[dutterbutter]

Hello 👋,

Thank you so much for bringing this issue to our attention! 🙏

Your detailed report, complete with screenshots and code snippets, is very helpful! 👏📸

To further assist you, it would be beneficial if I could reproduce the issue on my end. Could you please provide a repo with the minimal code that reproduces this issue? This will help me pinpoint the problem and provide a solution more effectively.

[polartar]

@dutterbutter Does your SDK 'zksync-web3' will display the connect popup? I can see it requires the private key.

[polartar]

You can just install zksync and web3-react libraries and run the below code.

import * as zksync from 'zksync';

const { library } = useWeb3React();
const syncProvider = await zksync.getDefaultProvider('goerli');
const syncWallet = await zksync.Wallet.fromEthSigner(library.getSigner(), syncProvider); // This is causing the error. It displays the
//Metamask popup to sign the signature. After clicking the sign button, it throws the error.

[polartar]

@dutterbutter I created the repo so that you can test and invited you.

[dutterbutter]

Hello, I reviewed the minimal example provided and have provided a few takeaways:

1. You are referencing a library called zksync, you should only make use of zksync-web3 the official javascript sdk. Thus your imports should be changed to:

import { Web3Provider, <OTHER CLASSES TO IMPORT (e.g. Wallet, ContractFactory> } from "zksync-web3";

2. Some of the methods you're trying to invoke (like zksync.Wallet.fromEthSigner) aren't recognized. If your goal is to interface with a MetaMask account, consider this approach:

import { Web3Provider } from "zksync-web3";

const provider = new Web3Provider((window as any).ethereum);
await provider.send("eth_requestAccounts", []);   
const signerInstance = provider.getSigner();

This will give you the signer that you can then pass to your ContractFactory.

3. Be cautious about supplying the appropriate number of constructor arguments when deploying your contract. I observed some inconsistency in your code:

await TokenFactory.deploy(); // this line will fail as it expects 4 constructor arguments
await TokenFactory.deploy(name, 'symbol', parseEther('123123123'), true);

Ensure you're invoking the deploy method with the right number of arguments that align with your contract's constructor.

[polartar]

Thanks for checking.
This repo is just for demo purposes, so there may be some wrong codes. Sorry about that.

Btw, can you check again? I updated the code. It fails to deploy the contract.
And we also need to support the wallet connect.

[polartar]

@dutterbutter If you have any issues while running the repo locally, please let me know.

[polartar]

Now I am getting the below error. I think it's same as wighawag/hardhat-deploy#453.

[uF4No]

Make sure your contract is compiled with zksolc. You can find a hardhat.config example here: https://era.zksync.io/docs/tools/hardhat/migrating-to-zksync.html

[polartar]

@uF4No Awesome!
It's working.
Btw, will it be the same with other chains to verify the contract? Or are there any additional steps?

[uF4No]

Verification is pretty similar.
If your contract is simple, you can verify directly from the explorer.
If you prefer to do it from the terminal or programatically, you need to install our verification plugin, import it in the hardhat.config.ts file and run the verify:verify task. All the details are in our docs 🤙