feat: add passkey actions to sdk-4337

examples/demo-app/components/PasskeyConfig.vue

@@ -127,6 +127,7 @@
 
 <script setup>
 import { computed, ref } from "vue";
+import { createWebAuthnCredential } from "zksync-sso-4337/client/passkey";
 
 // Props
 const props = defineProps({
@@ -158,9 +159,6 @@ async function handleCreatePasskey() {
   errorMessage.value = "";
 
   try {
-    // Import the WebAuthn helper from the SDK
-    const { createWebAuthnCredential } = await import("zksync-sso-web-sdk/bundler");
-
     // eslint-disable-next-line no-console
     console.log("Creating WebAuthn credential using SimpleWebAuthn...");
 

examples/demo-app/components/TransactionSender.vue

@@ -92,12 +92,12 @@
 
 <script setup lang="ts">
 import { ref } from "vue";
-import { createPublicClient, formatEther, http, parseEther } from "viem";
+import { formatEther, http, parseEther } from "viem";
 import { createBundlerClient } from "viem/account-abstraction";
-import type { Address, Chain } from "viem";
-import { toPasskeySmartAccount } from "zksync-sso-4337/client/passkey";
-import { toEcdsaSmartAccount } from "zksync-sso-4337/client/ecdsa";
+import type { Address } from "viem";
+import { toEcdsaSmartAccount, toPasskeySmartAccount } from "zksync-sso-4337/client";
 import { WebAuthnValidatorAbi } from "zksync-sso-4337/abi";
+import { loadContracts, getBundlerUrl, getChainConfig, createPublicClient } from "~/utils/contracts";
 
 // Props
 const props = defineProps({
@@ -130,22 +130,8 @@ async function sendTransaction() {
     // eslint-disable-next-line no-console
     console.log("Checking smart account status...");
 
-    // Load contracts.json to get RPC URL
-    const response = await fetch("/contracts.json");
-    const contracts = await response.json();
-
-    const chain = {
-      id: contracts.chainId,
-      name: "Anvil",
-      nativeCurrency: { name: "Ether", symbol: "ETH", decimals: 18 },
-      rpcUrls: { default: { http: [contracts.rpcUrl] } },
-    } satisfies Chain;
-
     // Create public client
-    const publicClient = createPublicClient({
-      chain,
-      transport: http(),
-    });
+    const publicClient = await createPublicClient();
 
     // Check if account is deployed
     const code = await publicClient.getCode({
@@ -196,22 +182,12 @@ async function sendTransaction() {
 
 // Send transaction using EOA validator (NEW SDK)
 async function sendFromSmartAccountWithEOA() {
-  // Load contracts.json
-  const response = await fetch("/contracts.json");
-  const contracts = await response.json();
-
-  const chain = {
-    id: contracts.chainId,
-    name: "Anvil",
-    nativeCurrency: { name: "Ether", symbol: "ETH", decimals: 18 },
-    rpcUrls: { default: { http: [contracts.rpcUrl] } },
-  } satisfies Chain;
+  // Load contracts configuration
+  const contracts = await loadContracts();
+  const chain = getChainConfig(contracts);
 
   // Create public client for network calls
-  const publicClient = createPublicClient({
-    chain,
-    transport: http(),
-  });
+  const publicClient = await createPublicClient(contracts);
 
   // Create smart account using the new SDK
   // eslint-disable-next-line no-console
@@ -228,7 +204,7 @@ async function sendFromSmartAccountWithEOA() {
   const bundlerClient = createBundlerClient({
     client: publicClient,
     chain,
-    transport: http(contracts.bundlerUrl || "http://localhost:4337"),
+    transport: http(getBundlerUrl(contracts)),
   });
 
   // Send user operation
@@ -264,22 +240,15 @@ async function sendFromSmartAccountWithPasskey() {
   // eslint-disable-next-line no-console
   console.log("Sending transaction from smart account using Passkey (NEW SDK)...");
 
-  // Load contracts.json
-  const response = await fetch("/contracts.json");
-  const contracts = await response.json();
+  // Load contracts configuration
+  const contracts = await loadContracts();
+  const chain = getChainConfig(contracts);
   const webauthnValidatorAddress = props.passkeyConfig.validatorAddress;
 
   if (!webauthnValidatorAddress) {
     throw new Error("WebAuthn validator address not found");
   }
 
-  const chain = {
-    id: contracts.chainId,
-    name: "Anvil",
-    nativeCurrency: { name: "Ether", symbol: "ETH", decimals: 18 },
-    rpcUrls: { default: { http: [contracts.rpcUrl] } },
-  } satisfies Chain;
-
   // eslint-disable-next-line no-console
   console.log("  Smart Account:", props.deploymentResult.address);
   // eslint-disable-next-line no-console
@@ -294,10 +263,7 @@ async function sendFromSmartAccountWithPasskey() {
   console.log("Verifying public key registration on-chain...");
 
   // Create public client for network calls
-  const publicClient = createPublicClient({
-    chain,
-    transport: http(),
-  });
+  const publicClient = await createPublicClient(contracts);
 
   const registeredKey = await publicClient.readContract({
     address: webauthnValidatorAddress as Address,
@@ -352,7 +318,7 @@ async function sendFromSmartAccountWithPasskey() {
   const bundlerClient = createBundlerClient({
     client: publicClient,
     chain,
-    transport: http(contracts.bundlerUrl || "http://localhost:4337"),
+    transport: http(getBundlerUrl(contracts)),
     userOperation: {
       // Use fixed gas values matching old Rust SDK implementation
       // (old SDK used: 2M callGas, 2M verificationGas, 1M preVerificationGas)

examples/demo-app/components/WalletConfig.vue

@@ -195,6 +195,7 @@
 
 <script setup>
 import { computed, ref, watch, onMounted } from "vue";
+import { loadContracts } from "~/utils/contracts";
 
 // Props
 const props = defineProps({
@@ -322,18 +323,15 @@ function handleAccountsChanged(accounts) {
 async function detectEnvironment() {
   // First, detect if we're on Anvil
   try {
-    const response = await fetch("/contracts.json");
-    if (response.ok) {
-      const contracts = await response.json();
-      rpcUrl.value = contracts.rpcUrl || "";
-      isAnvil.value = rpcUrl.value.includes("localhost:8545") || rpcUrl.value.includes("127.0.0.1:8545");
+    const contracts = await loadContracts();
+    rpcUrl.value = contracts.rpcUrl || "";
+    isAnvil.value = rpcUrl.value.includes("localhost:8545") || rpcUrl.value.includes("127.0.0.1:8545");
 
-      // Auto-select appropriate source
-      if (isAnvil.value && config.value.source === "browser-wallet") {
-        config.value.source = "anvil";
-      } else if (!isAnvil.value && config.value.source === "anvil") {
-        config.value.source = "browser-wallet";
-      }
+    // Auto-select appropriate source
+    if (isAnvil.value && config.value.source === "browser-wallet") {
+      config.value.source = "anvil";
+    } else if (!isAnvil.value && config.value.source === "anvil") {
+      config.value.source = "browser-wallet";
     }
   } catch (err) {
     // eslint-disable-next-line no-console

examples/demo-app/nuxt.config.ts

@@ -5,7 +5,7 @@ import wasm from "vite-plugin-wasm";
 export default defineNuxtConfig({
   compatibilityDate: "2024-07-08",
   devtools: { enabled: true },
-  modules: ["@nuxt/eslint", "@pinia/nuxt", "@nuxtjs/tailwindcss", "@nuxtjs/google-fonts"],
+  modules: ["@nuxt/eslint", "@nuxtjs/tailwindcss", "@nuxtjs/google-fonts"],
   app: {
     head: {
       title: "ZKsync SSO Demo",

examples/demo-app/package.json

@@ -8,21 +8,16 @@
     "postinstall": "nuxt prepare"
   },
   "dependencies": {
-    "zksync-sso-web-sdk": "workspace:*",
     "@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",
     "@wagmi/core": "^2.13.3",
-    "@web3modal/wagmi": "^5.1.11",
-    "ethers": "^6.13.2",
     "nuxt": "^3.12.3",
     "viem": "2.30.0",
     "vue": "^3.4.21",
     "wagmi": "^2.12.17",
-    "zksync-ethers": "^6.15.0",
     "zksync-sso": "workspace:*",
     "zksync-sso-4337": "workspace:*",
     "zksync-sso-wagmi-connector": "workspace:*"