feat: add webauthn tutorial (#65)

This PR:
- adds a tutorial to demonstrate how to sign transactions with webauthn
& validate with the P256Verify precompile
- includes a test for running the tutorial

---------

Co-authored-by: Farhad Asgarov <[email protected]>

.github/workflows/playwright.yaml

@@ -13,6 +13,7 @@ jobs:
           - "tests/erc20-paymaster.spec.ts" 
           - "tests/how-to-test-contracts.spec.ts"
           - "tests/daily-spend-limit.spec.ts"
+          - "tests/signing-txns-with-webauthn.spec.ts"
           - "tests/native-aa-multisig.spec.ts"
 
     steps:

code/webauthn/README.md

@@ -0,0 +1,69 @@
+# Sign Transactions With Webauthn Example
+
+This demo requires Google Chrome and a device that supports webauthn.
+
+## Running Locally
+
+### Install Dependencies
+
+Use node version `20.16.0`.
+Run `npm install` in both the `frontend` and `contracts` folders.
+
+### Start a local node
+
+Run a local in-memory node with `era_test_node`:
+
+```shell
+era_test_node run
+```
+
+### Deploying the Contracts
+
+Make a `.env` file and add a private key for a [pre-configured rich wallet](https://docs.zksync.io/build/test-and-debug/in-memory-node#pre-configured-rich-wallets).
+
+```env
+WALLET_PRIVATE_KEY=<0x_YOUR_PRIVATE_KEY>
+```
+
+Deploy the AAFactory, paymaster, and NFT contracts:
+
+```shell
+npm run deploy
+```
+
+Once deployed, create a `frontend/.env.local` file based example in `frontend/.env.example` and add the deployed addresses.
+
+```env
+NEXT_PUBLIC_AA_FACTORY_ADDRESS=<0x_YOUR_AA_CONTRACT_ADDRESS>
+NEXT_PUBLIC_NFT_CONTRACT_ADDRESS=<0x_YOUR_NFT_CONTRACT_ADDRESS>
+NEXT_PUBLIC_PAYMASTER_ADDRESS=<0x_YOUR_PAYMASTER_CONTRACT_ADDRESS>
+```
+
+### Deploying a New Smart Account
+
+Go to the frontend folder and start a development server:
+
+```shell
+npm run dev
+```
+
+> Note: The next steps depend on the app running at port `3000`.
+
+Open the app at `http://localhost:3000` and click the 'Create Account' button to navigate to the `/create-account` page.
+Click the button to create a new account.
+You can optionally save the private key logged.
+
+### Registering a Webauthn Key
+
+Go back to the home page and click the "Register Passkey" button
+
+### Siging Transactions with Webauthn
+
+Go back to the home page and click the `Transfer Funds` link.
+Enter any amount into the input and try transfering the ETH.
+
+You can also click the `Mint NFT` button on the home page to try minting an NFT.
+
+### Managing Registered Passkeys
+
+You can delete and edit your registered keys in Google Chrome by going to `chrome://settings/passkeys`.

code/webauthn/contracts/.env.example

@@ -0,0 +1 @@
+WALLET_PRIVATE_KEY=

code/webauthn/contracts/.gitignore

@@ -0,0 +1,117 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+lerna-debug.log*
+.vscode
+
+# hardhat artifacts
+artifacts
+cache
+
+# zksync artifacts
+artifacts-zk
+cache-zk
+
+# Diagnostic reports (https://nodejs.org/api/report.html)
+report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+*.lcov
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (https://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# TypeScript v1 declaration files
+typings/
+
+# TypeScript cache
+*.tsbuildinfo
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Microbundle cache
+.rpt2_cache/
+.rts2_cache_cjs/
+.rts2_cache_es/
+.rts2_cache_umd/
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variables file
+.env
+.env.test
+
+# parcel-bundler cache (https://parceljs.org/)
+.cache
+
+# Next.js build output
+.next
+
+# Nuxt.js build / generate output
+.nuxt
+dist
+
+# Gatsby files
+.cache/
+# Comment in the public line in if your project uses Gatsby and *not* Next.js
+# https://nextjs.org/blog/next-9-1#public-directory-support
+# public
+
+# vuepress build output
+.vuepress/dist
+
+# Serverless directories
+.serverless/
+
+# FuseBox cache
+.fusebox/
+
+# DynamoDB Local files
+.dynamodb/
+
+# TernJS port file
+.tern-port
+
+# other
+deploy-outputs.txt
+deployments-zk

code/webauthn/contracts/.npmrc

@@ -0,0 +1 @@
+legacy-peer-deps=true

code/webauthn/contracts/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023 Matter Labs
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

code/webauthn/contracts/contracts/AAFactory.sol

@@ -0,0 +1,39 @@
+// SPDX-License-Identifier: MIT
+pragma solidity ^0.8.20;
+
+import "@matterlabs/zksync-contracts/l2/system-contracts/Constants.sol";
+import "@matterlabs/zksync-contracts/l2/system-contracts/libraries/SystemContractsCaller.sol";
+
+contract AAFactory {
+    bytes32 public aaBytecodeHash;
+
+    constructor(bytes32 _aaBytecodeHash) {
+        aaBytecodeHash = _aaBytecodeHash;
+    }
+
+    function deployAccount(
+        bytes32 salt,
+        address owner
+    ) external returns (address accountAddress) {
+        (bool success, bytes memory returnData) = SystemContractsCaller
+            .systemCallWithReturndata(
+                uint32(gasleft()),
+                address(DEPLOYER_SYSTEM_CONTRACT),
+                uint128(0),
+                abi.encodeCall(
+                    DEPLOYER_SYSTEM_CONTRACT.create2Account,
+                    (
+                        salt,
+                        aaBytecodeHash,
+                        abi.encode(owner),
+                        IContractDeployer.AccountAbstractionVersion.Version1
+                    )
+                )
+            );
+        require(success, "Deployment failed");
+
+        (accountAddress) = abi.decode(returnData, (address));
+    }
+}
+
+