feat: add erc7739 signatures to passkey client sdk (#155)

Author: JackHamer09

README.md

@@ -221,8 +221,7 @@ command.
 To execute the end-to-end tests for the `demo-app` (or similarly for
 `nft-quest`), you'll need to do some setup:
 
-1. Start `era_test_node` (In a separate terminal, run
-   `npx zksync-cli dev start`)
+1. Start `anvil-zksync`
 2. Deploy the smart contracts, `pnpm --dir packages/contracts run deploy`
 
 Once the local node is configured with the smart contracts deployed, you can run

examples/demo-app/.gitignore

@@ -23,3 +23,5 @@ logs
 .env.*
 !.env.example
 forge-output.json
+forge-output-paymaster.json
+forge-output-erc1271.json

examples/demo-app/package.json

@@ -3,12 +3,14 @@
   "private": true,
   "type": "module",
   "scripts": {
+    "dev": "nuxt dev",
     "preview": "nuxt preview",
     "postinstall": "nuxt prepare"
   },
   "dependencies": {
     "@matterlabs/zksync-contracts": "^0.6.1",
     "@nuxtjs/google-fonts": "^3.2.0",
+    "@openzeppelin/contracts": "^5.4.0",
     "@pinia/nuxt": "^0.5.5",
     "@simplewebauthn/browser": "^13.1.0",
     "@simplewebauthn/server": "^13.1.1",

examples/demo-app/pages/index.vue

@@ -45,6 +45,55 @@
       Send 0.1 ETH with Paymaster
     </button>
 
+    <div
+      v-if="address"
+      class="mt-8 border-t pt-4"
+    >
+      <h2 class="text-xl font-bold mb-4">
+        Typed Data Signature Verification
+      </h2>
+      <div class="mb-4">
+        <pre class="bg-gray-100 p-3 rounded text-xs overflow-x-auto max-w-2xl max-h-60">{{ JSON.stringify(typedData, null, 2) }}</pre>
+      </div>
+      <div
+        v-if="ERC1271CallerContract.deployedTo"
+        class="mb-4 text-xs text-gray-600"
+      >
+        <p>ERC1271 Caller address: {{ ERC1271CallerContract.deployedTo }}</p>
+      </div>
+      <button
+        class="bg-purple-500 hover:bg-purple-700 text-white font-bold py-2 px-4 rounded disabled:bg-slate-300"
+        :disabled="isSigningTypedData"
+        @click="signTypedDataHandler"
+      >
+        {{ isSigningTypedData ? 'Signing...' : 'Sign Typed Data' }}
+      </button>
+      <div
+        v-if="typedDataSignature"
+        class="mt-4"
+      >
+        <p class="break-all">
+          <strong>Signature:</strong> <span class="text-xs line-clamp-2">{{ typedDataSignature }}</span>
+        </p>
+      </div>
+      <div
+        v-if="isVerifyingTypedDataSignature"
+        class="mt-4"
+      >
+        <p class="text-gray-600">
+          Verifying typed data signature...
+        </p>
+      </div>
+      <div
+        v-else-if="isValidTypedDataSignature !== null"
+        class="mt-4"
+      >
+        <p :class="isValidTypedDataSignature ? 'text-green-600' : 'text-red-600'">
+          <strong>Typed Data Verification Result:</strong> {{ isValidTypedDataSignature ? 'Valid ✓' : 'Invalid ✗' }}
+        </p>
+      </div>
+    </div>
+
     <div
       v-if="errorMessage"
       class="p-4 mt-4 mb-4 max-w-96 text-sm text-red-800 rounded-lg bg-red-50 dark:bg-gray-800 dark:text-red-400"
@@ -55,16 +104,22 @@
 </template>
 
 <script lang="ts" setup>
-import { disconnect, getBalance, watchAccount, sendTransaction, createConfig, connect, reconnect, waitForTransactionReceipt, type GetBalanceReturnType } from "@wagmi/core";
-import { zksyncSsoConnector, eraTestNode } from "zksync-sso-wagmi-connector";
-import { createWalletClient, http, parseEther, type Address } from "viem";
+import { disconnect, getBalance, watchAccount, sendTransaction, createConfig, connect, reconnect, waitForTransactionReceipt, type GetBalanceReturnType, signTypedData, readContract } from "@wagmi/core";
+import { createWalletClient, createPublicClient, http, parseEther, type Address, type Hash } from "viem";
+import { zksyncSsoConnector } from "zksync-sso-wagmi-connector";
 import { privateKeyToAccount } from "viem/accounts";
-import { getGeneralPaymasterInput } from "viem/zksync";
-import PaymasterContract from "../forge-output.json";
+import { getGeneralPaymasterInput, zksyncInMemoryNode } from "viem/zksync";
+import PaymasterContract from "../forge-output-paymaster.json";
+import ERC1271CallerContract from "../forge-output-erc1271.json";
 
-const chain = eraTestNode; // Now using the exported eraTestNode instead of zksyncInMemoryNode
+const chain = zksyncInMemoryNode;
 
 const testTransferTarget = "0x55bE1B079b53962746B2e86d12f158a41DF294A6";
+
+const publicClient = createPublicClient({
+  chain: chain,
+  transport: http(),
+});
 const zksyncConnectorWithSession = zksyncSsoConnector({
   authServerUrl: "http://localhost:3002/confirm",
   session: {
@@ -92,7 +147,6 @@ reconnect(wagmiConfig);
 const address = ref<Address | null>(null);
 const balance = ref<GetBalanceReturnType | null>(null);
 const errorMessage = ref<string | null>(null);
-const isSendingEth = ref<boolean>(false);
 
 const fundAccount = async () => {
   if (!address.value) throw new Error("Not connected");
@@ -166,6 +220,9 @@ const disconnectWallet = async () => {
   await disconnect(wagmiConfig);
 };
 
+/* Send ETH */
+const isSendingEth = ref<boolean>(false);
+
 const sendTokens = async (usePaymaster: boolean) => {
   if (!address.value) return;
 
@@ -178,7 +235,7 @@ const sendTokens = async (usePaymaster: boolean) => {
       transactionHash = await sendTransaction(wagmiConfig, {
         to: testTransferTarget,
         value: parseEther("0.1"),
-        paymaster: PaymasterContract.deployedTo as `0x${string}`,
+        paymaster: PaymasterContract.deployedTo as Address,
         paymasterInput: getGeneralPaymasterInput({ innerInput: "0x" }),
       });
     } else {
@@ -225,4 +282,108 @@ const sendTokens = async (usePaymaster: boolean) => {
     isSendingEth.value = false;
   }
 };
+
+/* Typed data */
+const typedDataSignature = ref<Hash | null>(null);
+const isValidTypedDataSignature = ref<boolean | null>(null);
+const isSigningTypedData = ref<boolean>(false);
+const isVerifyingTypedDataSignature = ref<boolean>(false);
+
+const typedData = {
+  types: {
+    TestStruct: [
+      { name: "message", type: "string" },
+      { name: "value", type: "uint256" },
+    ],
+  },
+  primaryType: "TestStruct",
+  message: {
+    message: "test",
+    value: 42n,
+  },
+} as const;
+
+const signTypedDataHandler = async () => {
+  if (!address.value) return;
+
+  errorMessage.value = "";
+  isSigningTypedData.value = true;
+  isValidTypedDataSignature.value = null;
+  try {
+    const erc1271CallerAddress = ERC1271CallerContract.deployedTo as Address;
+    const { domain: callerDomain } = await publicClient.getEip712Domain({
+      address: erc1271CallerAddress,
+    });
+
+    const signature = await signTypedData(wagmiConfig, {
+      domain: {
+        ...callerDomain,
+        salt: undefined, // Otherwise the signature verification fails (todo: figure out why)
+      },
+      ...typedData,
+    });
+    typedDataSignature.value = signature;
+  } catch (error) {
+    // eslint-disable-next-line no-console
+    console.error("Typed data signing failed:", error);
+    errorMessage.value = "Typed data signing failed, see console for more info.";
+  } finally {
+    isSigningTypedData.value = false;
+  }
+};
+
+const verifyTypedDataSignatureAutomatically = async () => {
+  if (!address.value || !typedDataSignature.value) {
+    isValidTypedDataSignature.value = null;
+    return;
+  }
+
+  isVerifyingTypedDataSignature.value = true;
+  try {
+    const contractAddress = ERC1271CallerContract.deployedTo as Address;
+
+    const isValid = await readContract(wagmiConfig, {
+      address: contractAddress,
+      abi: [{
+        type: "function",
+        name: "validateStruct",
+        stateMutability: "view",
+        inputs: [
+          {
+            name: "testStruct", type: "tuple", internalType: "struct ERC1271Caller.TestStruct",
+            components: [
+              { name: "message", type: "string", internalType: "string" },
+              { name: "value", type: "uint256", internalType: "uint256" },
+            ],
+          },
+          { name: "signer", type: "address", internalType: "address" },
+          { name: "encodedSignature", type: "bytes", internalType: "bytes" },
+        ],
+        outputs: [{ name: "", type: "bool", internalType: "bool" }],
+      }] as const,
+      functionName: "validateStruct",
+      args: [
+        typedData.message,
+        address.value,
+        typedDataSignature.value,
+      ],
+    });
+
+    isValidTypedDataSignature.value = isValid;
+  } catch (error) {
+    // eslint-disable-next-line no-console
+    console.error("Typed data signature verification failed:", error);
+    isValidTypedDataSignature.value = false;
+  } finally {
+    isVerifyingTypedDataSignature.value = false;
+  }
+};
+
+watch(address, () => typedDataSignature.value = null);
+watch(typedDataSignature, verifyTypedDataSignatureAutomatically);
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+(window.BigInt as any).prototype.toJSON = function () {
+  return this.toString();
+};
 </script>

examples/demo-app/project.json

@@ -36,14 +36,14 @@
       "executor": "nx:run-commands",
       "options": {
         "cwd": "examples/demo-app",
-        "command": "forge build smart-contracts/DemoPaymaster.sol --root . --zksync"
+        "command": "FOUNDRY_LOG=trace forge build smart-contracts/ --root . --zksync"
       }
     },
     "deploy-contracts": {
       "executor": "nx:run-commands",
       "options": {
         "cwd": "examples/demo-app",
-        "command": "forge create smart-contracts/DemoPaymaster.sol:DemoPaymaster --private-key 0x7726827caac94a7f9e1b160f7ea819f172f7b6f9d2a97f992c38edeab82d4110 --rpc-url http://localhost:8011 --root . --chain 260 --zksync --json 2>&1 | sed -n 's/.*\\({.*}\\).*/\\1/p' > forge-output.json && ADDRESS=$(sed -n 's/.*\"deployedTo\":\"\\([^\"]*\\)\".*/\\1/p' forge-output.json) && echo $ADDRESS && cast send --private-key 0x7726827caac94a7f9e1b160f7ea819f172f7b6f9d2a97f992c38edeab82d4110 $ADDRESS --rpc-url http://localhost:8011 --value 0.1ether"
+        "command": "forge create smart-contracts/DemoPaymaster.sol:DemoPaymaster --private-key 0x7726827caac94a7f9e1b160f7ea819f172f7b6f9d2a97f992c38edeab82d4110 --rpc-url http://localhost:8011 --root . --chain 260 --zksync --json 2>&1 | sed -n 's/.*\\({.*}\\).*/\\1/p' > forge-output-paymaster.json && ADDRESS=$(sed -n 's/.*\"deployedTo\":\"\\([^\"]*\\)\".*/\\1/p' forge-output-paymaster.json) && echo \"DemoPaymaster deployed to: $ADDRESS\" && cast send --private-key 0x7726827caac94a7f9e1b160f7ea819f172f7b6f9d2a97f992c38edeab82d4110 $ADDRESS --rpc-url http://localhost:8011 --value 0.1ether && forge create smart-contracts/ERC1271Caller.sol:ERC1271Caller --private-key 0x7726827caac94a7f9e1b160f7ea819f172f7b6f9d2a97f992c38edeab82d4110 --rpc-url http://localhost:8011 --root . --chain 260 --zksync --json 2>&1 | sed -n 's/.*\\({.*}\\).*/\\1/p' > forge-output-erc1271.json && ADDRESS=$(sed -n 's/.*\"deployedTo\":\"\\([^\"]*\\)\".*/\\1/p' forge-output-erc1271.json) && echo \"ERC1271Caller deployed to: $ADDRESS\""
       },
       "dependsOn": ["build-contracts"]
     },

examples/demo-app/smart-contracts/ERC1271Caller.sol

@@ -0,0 +1,37 @@
+// SPDX-License-Identifier: MIT
+pragma solidity ^0.8.0;
+
+import "@openzeppelin/contracts/utils/cryptography/EIP712.sol";
+import "@openzeppelin/contracts/utils/cryptography/ECDSA.sol";
+import "@openzeppelin/contracts/interfaces/IERC1271.sol";
+import "@openzeppelin/contracts/utils/Address.sol";
+
+contract ERC1271Caller is EIP712 {
+  struct TestStruct {
+    string message;
+    uint256 value;
+  }
+
+  constructor() EIP712("ERC1271Caller", "1.0.0") {}
+
+  function validateStruct(
+    TestStruct calldata testStruct,
+    address signer,
+    bytes calldata signature
+  ) external view returns (bool) {
+    require(signer != address(0), "Invalid signer address");
+
+    bytes32 structHash = keccak256(
+      abi.encode(
+        keccak256("TestStruct(string message,uint256 value)"),
+        keccak256(bytes(testStruct.message)),
+        testStruct.value
+      )
+    );
+
+    bytes32 digest = _hashTypedDataV4(structHash);
+
+    bytes4 magic = IERC1271(signer).isValidSignature(digest, signature);
+    return magic == IERC1271.isValidSignature.selector;
+  }
+}