[SDK] How to properly use the EIP712 signer in frontend?

[VanillaScent]

Environment

Testnet

Acknowledgement

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

Issue Description

Currently I am having the user store their private key in localstorage for usage with the Wallet class,
what is the recommended method to sign EIP712 transactions in frontend?

In below example api.signer is the initialized Wallet
This works, but doesn't feel right to me

Expected Behavior

Have a cleaner way in the web3 SDK to use for example (metamask) to sign transactions

Code Example

  const signEIP712 = (tx: TransactionRequest): { signatures: Uint8Array, hash: BytesLike} => {
    if(!api.signer) throw new Error("api wallet not set")
    signedTxHash = EIP712Signer.getSignedDigest(tx)

    const signature = api.signer._signingKey().signDigest(signedTxHash)
    signatures = ethers.utils.concat([
      ethers.utils.joinSignature(signature)
    ]);

    return {signatures, hash: signedTxHash}
  }

      const signedObject = signEIP712(aaTx)

      aaTx.customData = {
        ...aaTx.customData,
        customSignature: signedObject.signatures,
      };

      const serializedTx = utils.serialize({ ...aaTx });  
      const sentTx = await provider.sendTransaction(serializedTx);

Repo Link (Optional)

No response

[dutterbutter]

@VanillaScent a couple things to mention here. See below.

1. Storing a user's private key in localStorage is generally considered unsafe and should be avoided. localStorage is not designed to be a secure storage solution. It is accessible by any script running in the same origin, meaning any JavaScript code on the same domain can access and manipulate the data stored in localStorage. If an attacker manages to inject malicious code into your application, they could potentially access and steal the private key from localStorage. It also does not provide built-in encryption for data storage.

2. It is difficult to suggest a "recommended approach to sign EIP712 transactions in frontend applications" but you will certainly want to avoid storing any private key and instead explore using window.ethereum.request({ method: 'eth_requestAccounts' }); or window.ethereum.enable(); to interact with user's MetaMask accounts. You can also check out some additional docs on EIP-712 transaction relevant to zksync.

Hope that helps to some extent!

[VanillaScent]

@dutterbutter
Fully aware that storing the private key is not ideal. Hence why I'd like to have the better solution figured out for the sake of security and privacy.
Yet, there seems to be no alternative to signer._signingKey().signDigest(signedTxHash) discussed in any tutorials or documentation that I can find.
Without this, how do we sign messages like the account abstraction tutorial if metamask calls are disabled?

[VanillaScent]

It is explicitly stated that metamask's signMessage will add an unwanted prefix,
as stated here: https://era.zksync.io/docs/dev/tutorials/custom-aa-tutorial.html#start-a-transaction-from-the-account

  const signedTxHash = EIP712Signer.getSignedDigest(aaTx);

  const signature = ethers.utils.concat([
    // Note, that `signMessage` wouldn't work here, since we don't want
    // the signed hash to be prefixed with `\x19Ethereum Signed Message:\n`
    ethers.utils.joinSignature(owner1._signingKey().signDigest(signedTxHash)),
    ethers.utils.joinSignature(owner2._signingKey().signDigest(signedTxHash)),
  ]);

  aaTx.customData = {
    ...aaTx.customData,
    customSignature: signature,
  };

owner(s) being the SDK's Wallet class using private keys.

[dutterbutter]

I see, I will have to verify this on my side but I think you can make use of eth_signTypedData_v4 for this purpose. You would need to update aaTx.customData to include a fixed gasPerPubdataByteLimit of 50000 in the transaction overrides as well to use eth_signTypedData_v4. For example,

 aaTx.customData = {
    ...aaTx.customData,
    customSignature: signature,
    gasPerPubdataByteLimit: 50000, // Added this line
  };

Again, I will need to test this on my side to see if that works but I hope that helps.

[dutterbutter]

This issue has been inactive for some time now. To keep the issue tracker clean and focused, we are considering closing older issues without recent activity.

If this issue is still relevant, please comment to keep it open.