docs: add test for webauthn

.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"
 
     steps:
     - uses: actions/checkout@v4

code/webauthn/frontend/utils/webauthn.ts

@@ -8,7 +8,7 @@ import type { TransactionRequest } from 'zksync-ethers/src/types';
 import * as cbor from 'cbor';
 
 export async function authenticate(challenge: string) {
-  const resp = await fetch('http://localhost:3000/api/generate-authentication-options', {
+  const resp = await fetch('http://localhost:3000/api/get-authentication-options', {
     method: 'POST',
     headers: {
       'Content-Type': 'application/json',

content/tutorials/signing-transactions-with-webauthn/20.building-the-contracts.md

@@ -8,17 +8,23 @@ description: Build the contracts for your app.
 
 Make a new folder for the project called `zksync-webauthn` and navigate to that folder in your terminal:
 
+:test-action{actionId="make-project-folder"}
+
 ```shell
 mkdir zksync-webauthn
 cd zksync-webauthn
 ```
 
 We can start by creating the contracts for the smart account, paymaster, and NFT.
 
+:test-action{actionId="initialize-contracts"}
+
 ```shell
-zksync-cli create contracts --template hardhat_solidity --project contracts
+npx zksync-cli create contracts --template hardhat_solidity --project contracts
 ```
 
+:test-action{actionId="wait-for-init"}
+
 The CLI will prompt you to enter a private key for deploying.
 Enter the private key below for a pre-configured rich wallet:
 
@@ -27,16 +33,31 @@ Enter the private key below for a pre-configured rich wallet:
 0x7726827caac94a7f9e1b160f7ea819f172f7b6f9d2a97f992c38edeab82d4110
 ```
 
+:test-action{actionId="add-env-pk"}
+
 Once that is done, move into the `contracts` folders and
 install the dependency below:
 
-```shell
+:test-action{actionId="install-deps"}
+
+::code-group
+
+```bash [npm]
 cd contracts
 npm install -D @matterlabs/[email protected]
 ```
 
+```bash [yarn]
+cd contracts
+yarn add -D @matterlabs/[email protected]
+```
+
+::
+
 Then, delete the template contracts, scripts, and tests:
 
+:test-action{actionId="remove-template-files"}
+
 ```shell
 rm -rf ./contracts/*
 rm -rf ./deploy/*
@@ -58,10 +79,15 @@ We will be creating 4 contracts:
 
 Create a new file in the `contracts/contracts` folder called `GeneralPaymaster.sol`.
 
+:test-action{actionId="create-paymaster"}
+
 ```shell
 touch contracts/GeneralPaymaster.sol
 ```
 
+:test-action{actionId="open-paymaster"}
+:test-action{actionId="paymaster-contract-code"}
+
 ::drop-panel
 ::panel{label="GeneralPaymaster.sol"}
 
@@ -78,10 +104,15 @@ This is a basic paymaster contract that allows us to sponsor transactions for us
 
 Create another file in the `contracts/contracts` folder called `MyNFT.sol`.
 
+:test-action{actionId="create-nft-contract"}
+
 ```shell
 touch contracts/MyNFT.sol
 ```
 
+:test-action{actionId="open-nft"}
+:test-action{actionId="nft-contract-code"}
+
 ::drop-panel
 ::panel{label="MyNFT.sol"}
 
@@ -99,10 +130,15 @@ We will use this to test interacting with smart contracts using WebAuthn.
 
 Create a file in the `contracts/contracts` folder called `AAFactory.sol`.
 
+:test-action{actionId="create-aa-factory"}
+
 ```shell
 touch contracts/AAFactory.sol
 ```
 
+:test-action{actionId="open-aa-factory"}
+:test-action{actionId="aa-factory-contract-code"}
+
 ::drop-panel
 ::panel{label="AAFactory.sol"}
 
@@ -119,10 +155,15 @@ This contract is a factory contract responsbile for deploying new instances of t
 
 Finally, create a file in the `contracts/contracts` folder called `Account.sol`.
 
+:test-action{actionId="create-account-contract"}
+
 ```shell
 touch contracts/Account.sol
 ```
 
+:test-action{actionId="open-account"}
+:test-action{actionId="account-contract-code"}
+
 ::drop-panel
 ::panel{label="Account.sol"}
 
@@ -193,12 +234,17 @@ The output data should be 1 (in 32 bytes format) if the signature verification p
 
 Open a new terminal and start a local in-memory node with `era_test_node`:
 
+:test-action{actionId="start-era-test-node"}
+
 ```shell
 era_test_node run
 ```
 
 Next, replace your `hardhat.config.ts` file with the file below:
 
+:test-action{actionId="open-hardhat-config"}
+:test-action{actionId="hardhat-config"}
+
 ::drop-panel
 ::panel{label="hardhat.config.ts"}
 
@@ -213,12 +259,17 @@ Next, replace your `hardhat.config.ts` file with the file below:
 
 Create a new file inside the `deploy` folder called `deploy.ts`:
 
+:test-action{actionId="make-deploy-script"}
+
 ```shell
 touch deploy/deploy.ts
 ```
 
 Copy and paste the code below.
 
+:test-action{actionId="open-deploy-script"}
+:test-action{actionId="deploy-script"}
+
 ::drop-panel
 ::panel{label="deploy.ts"}
 
@@ -239,11 +290,22 @@ This script will:
 
 Finally, compile and deploy the contracts with:
 
-```shell
+:test-action{actionId="compile-and-deploy"}
+
+::code-group
+
+```bash [npm]
 npm run compile
 npm run deploy
 ```
 
+```bash [yarn]
+yarn compile
+yarn deploy
+```
+
+::
+
 Save the output of this command, as we will use these deployed contract addresses in the frontend.
 
 That's all for the contracts!