feat: move dynamic imports in lib

also update tests to better reject and check for errors

Author: cpb8010

examples/demo-app/tests/web-sdk-test.spec.ts

@@ -97,6 +97,7 @@ test("Deploy, fund, and transfer from smart account", async ({ page }) => {
   // Wait for transaction to complete - look for transaction hash in the send section
   // We need to find the second occurrence of "Transaction Hash:" since fund also has one
   await expect(page.locator("strong:has-text(\"Transaction Hash:\")").nth(1)).toBeVisible({ timeout: 30000 });
+  await expect(page.getByText("Transaction failed: Failed to submit UserOperation:")).not.toBeVisible();
 
   // Verify we have a transaction hash for the send
   const sendTxHash = page.locator("code").filter({ hasText: /^0x[a-fA-F0-9]{64}/ }).nth(1);
@@ -196,7 +197,8 @@ test("Deploy with passkey and send transaction using passkey", async ({ page })
   await page.getByRole("button", { name: "Send with Passkey" }).click();
 
   // Wait for transaction to complete
-  await expect(page.locator("strong:has-text(\"Transaction Hash:\")").nth(1)).toBeVisible({ timeout: 60000 });
+  await expect(page.getByText("Transaction confirmed! UserOp hash:")).toBeVisible({ timeout: 60000 });
+  await expect(page.getByText("Transaction failed: Failed to submit UserOperation:")).not.toBeVisible();
 
   // Verify we have a transaction hash for the send
   const sendTxHash = page.locator("code").filter({ hasText: /^0x[a-fA-F0-9]{64}/ }).nth(1);

packages/sdk-platforms/web/src/webauthn-helpers.ts

@@ -5,6 +5,13 @@
 
 import { startAuthentication } from "@simplewebauthn/browser";
 
+import {
+  encode_passkey_signature,
+  prepare_passkey_user_operation,
+  SendTransactionConfig,
+  submit_passkey_user_operation,
+} from "../pkg-bundler/zksync_sso_erc4337_web_ffi";
+
 /**
  * Convert hex string to Uint8Array
  *
@@ -191,7 +198,6 @@ export async function signWithPasskey(
 
   // ABI encode the signature using Rust function (now fixed to match ethers.js)
   // Format: (bytes authenticatorData, string clientDataJSON, bytes32[2] rs, bytes credentialId)
-  const { encode_passkey_signature } = await import("../pkg-bundler/zksync_sso_erc4337_web_ffi");
   const signature = encode_passkey_signature(
     authenticatorData,
     clientDataJSON,
@@ -255,13 +261,6 @@ export async function sendTransactionWithPasskey(options: {
     origin,
   } = options;
 
-  // Import WASM functions
-  const {
-    prepare_passkey_user_operation,
-    submit_passkey_user_operation,
-    SendTransactionConfig,
-  } = await import("../pkg-bundler/zksync_sso_erc4337_web_ffi");
-
   // Step 1: Prepare UserOperation to get hash
   const prepareConfig = new SendTransactionConfig(
     rpcUrl,

packages/sdk-platforms/web/src/webauthn.ts

@@ -8,6 +8,22 @@
  * @module webauthn
  */
 
+// Lazy-loaded SimpleWebAuthn - only loaded when needed
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+let simpleWebAuthnModule: any = null;
+async function getSimpleWebAuthn() {
+  if (!simpleWebAuthnModule) {
+    try {
+      simpleWebAuthnModule = await import("@simplewebauthn/browser");
+    } catch {
+      throw new Error(
+        "SimpleWebAuthn is not installed. Please install @simplewebauthn/browser: npm install @simplewebauthn/browser",
+      );
+    }
+  }
+  return simpleWebAuthnModule;
+}
+
 /**
  * Configuration options for creating a WebAuthn credential
  */
@@ -128,17 +144,9 @@ function base64urlToBuffer(base64url: string): Uint8Array {
 export async function createWebAuthnCredential(
   options: CreateCredentialOptions = {},
 ): Promise<WebAuthnCredential> {
-  // Try to import SimpleWebAuthn (optional peer dependency)
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  let startRegistration: any;
-  try {
-    const simpleWebAuthn = await import("@simplewebauthn/browser");
-    startRegistration = simpleWebAuthn.startRegistration;
-  } catch {
-    throw new Error(
-      "SimpleWebAuthn is not installed. Please install @simplewebauthn/browser: npm install @simplewebauthn/browser",
-    );
-  }
+  // Get SimpleWebAuthn (lazy loaded and cached)
+  const simpleWebAuthn = await getSimpleWebAuthn();
+  const startRegistration = simpleWebAuthn.startRegistration;
 
   // Check if WebAuthn is supported
   if (!window.PublicKeyCredential) {