Problem with creating a signature following EIP712 and using ethers signTypedData for wagmi.sh

[bunnnyyyy-dev]

Hi everyone!

A brief overview of the problem copy and pasted from discord:

Hi team! I'm trying to create a signature that follows the EIP712 using https://docs.ethers.org/v6/api/providers/#Signer-signTypedData but for some reason, in hardhat test it generates a valid signature which can be verified by contract, but pretty much the same code copy pasted over to a separate repo but adapted slightly to use wagmi.sh (which is using ethers v6), it gives an invalid signature
Oh also I'm using the same private key for both sides, and same parameters to generate the signature

So here are some code snippets:

test.js:

let obj;
beforeEach(async function () {
  obj = await loadFixture(fixture); // deploys forwarder and sample dice roll contract
});

describe("verify", function () {
  describe("with valid signature", function () {
    it("returns true without altering the nonce", async function () {
      const request = await forgeRequest(
        obj.sender,
        obj.receiver,
        obj.forwarder
      );
      expect(await obj.forwarder.nonces(request.from)).to.be.equal(
        request.nonce
      );

      expect(await obj.forwarder.verify(request)).to.be.equal(true);
      expect(await obj.forwarder.nonces(request.from)).to.be.equal(
        request.nonce
      );
    });
  });

helper.js:

module.exports.types = {
  EIP712Domain: [
    { name: "name", type: "string" },
    { name: "version", type: "string" },
    { name: "chainId", type: "uint256" },
    { name: "verifyingContract", type: "address" },
    { name: "salt", type: "bytes32" },
  ],
  Permit: [
    { name: "owner", type: "address" },
    { name: "spender", type: "address" },
    { name: "value", type: "uint256" },
    { name: "nonce", type: "uint256" },
    { name: "deadline", type: "uint256" },
  ],
  Ballot: [
    { name: "proposalId", type: "uint256" },
    { name: "support", type: "uint8" },
    { name: "voter", type: "address" },
    { name: "nonce", type: "uint256" },
  ],
  ExtendedBallot: [
    { name: "proposalId", type: "uint256" },
    { name: "support", type: "uint8" },
    { name: "voter", type: "address" },
    { name: "nonce", type: "uint256" },
    { name: "reason", type: "string" },
    { name: "params", type: "bytes" },
  ],
  Delegation: [
    { name: "delegatee", type: "address" },
    { name: "nonce", type: "uint256" },
    { name: "expiry", type: "uint256" },
  ],
  ForwardRequest: [
    { name: "from", type: "address" },
    { name: "to", type: "address" },
    { name: "value", type: "uint256" },
    { name: "gas", type: "uint256" },
    { name: "nonce", type: "uint256" },
    { name: "deadline", type: "uint48" },
    { name: "data", type: "bytes" },
  ],
};

module.exports.getDomain = async (contract) => {
  const {
    fields,
    name,
    version,
    chainId,
    verifyingContract,
    salt,
    extensions,
  } = await contract.eip712Domain();

  if (extensions.length > 0) {
    throw Error("Extensions not implemented");
  }

  const domain = {
    name,
    version,
    chainId: chainId,
    verifyingContract,
    salt,
  };

  for (const [i, { name }] of this.types.EIP712Domain.entries()) {
    if (!(fields & (1 << i))) {
      delete domain[name];
    }
  }

  return domain;
};

module.exports.forgeRequest = async (
  signer,
  receiver,
  forwarder,
  override = {}
) => {
  const types = {
    ForwardRequest: [
      { name: "from", type: "address" },
      { name: "to", type: "address" },
      { name: "value", type: "uint256" },
      { name: "gas", type: "uint256" },
      { name: "nonce", type: "uint256" },
      { name: "deadline", type: "uint48" },
      { name: "data", type: "bytes" },
    ],
  };

  const req = {
    from: await signer.getAddress(),
    to: await receiver.getAddress(),
    value: 0n,
    data: receiver.interface.encodeFunctionData("roll"),
    gas: 100000n,
    deadline: 10000000000000n,
    nonce: await forwarder.nonces(signer),
    ...override,
  };
  req.signature = await signer.signTypedData(
    await this.getDomain(forwarder),
    types,
    req
  );
  return req;
};

Wagmi.sh (using ethers v6 adapter):

const useSignature = () => {
  const provider = new JsonRpcProvider(process.env.RPC_URL);
  const signer = new ethers.Wallet(
    process.env.SIGNER_PK as any,
    provider
  );
  const receiver = new ethers.Contract(
    process.env.DICE_ROLL_ADDRESS as any,
    SampleDiceRollABI
  );
  const forwarder = new ethers.Contract(
    process.env.FORWARDER_ADDRESS as any,
    TrustedForwarderABI
  );

  const [request, setRequest] = useState<any>();
  useEffect(() => {
    setRequest(forgeRequest(signer, receiver, forwarder));
  }, []);

  return request;
};

The forwarder contract is inherited from Openzeppelin's v5 ERC2771Forwarder.sol here: https://docs.openzeppelin.com/contracts/5.x/api/metatx#ERC2771Forwarder

The "verify" function in the forwarder contract is used to verify the signature generated by signTypedData.

Most of the signature generation is adapted from openzeppelin's tests here: https://github.com/OpenZeppelin/openzeppelin-contracts/blob/master/test/metatx/ERC2771Forwarder.test.js

In hardhat test, the signature generated can be verified and signer matches the recovered address, but in Wagmi.sh, it recovers a different address which doesn't match the signer. The signature generated in Wagmi.sh using MetaMask is also different from hardhat generated one.

It would be great if I could get some pointers on where the problem might be and if anyone else has encountered something similar.

Thanks in advance!
Bunny

[bunnnyyyy-dev]

Hi all, just going to answer it myself here as I have found the problem.

It seems to be a JS/TS problem on the frontend side due to an incorrect domain being generated from the mismatch in code formats and inference from openzeppelin's test unit. After fixing the issue, it now generates the correct signature, and on-chain verification works.

Will be closing this discussion and thanks to those who have taken a look at the issue!
Bunny

[ricmoo]

Awesome! Thanks!

Do you have a link to your EIP-712 usage? I want to put up a cookbook entry in its usage. :)

[bunnnyyyy-dev]

Sadly I don't at the moment but once it's up and running, if I don't forget I might be able to provide it!

[kpeluso]

Would be interested as well. Also curious what the JS/TS problem was. Getting an issue with _signTypedData as well (albeit ethers v5).