From 80de5bd496713c13f9e47f47a6c71cbaaf74e79f Mon Sep 17 00:00:00 2001
From: Brendan Ryan <brendan@brendanjryan.com>
Date: Tue, 7 Apr 2026 12:36:30 -0700
Subject: [PATCH 1/4] fix: use HTTPS in Playwright webServer config

vite-plugin-mkcert forces the dev server onto HTTPS, but Playwright was
checking http://localhost:5173. The health check never got a response,
causing all E2E shards to time out after 60s.

Switch baseURL and webServer.url to https:// and add ignoreHTTPSErrors
to accept the self-signed cert.
---
 playwright.config.ts | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/playwright.config.ts b/playwright.config.ts
index 8c52ede9..d6983100 100644
--- a/playwright.config.ts
+++ b/playwright.config.ts
@@ -9,7 +9,8 @@ export default defineConfig({
   timeout: 180000, // 3 min default timeout for testnet transactions
   reporter: 'html',
   use: {
-    baseURL: 'http://localhost:5173',
+    baseURL: 'https://localhost:5173',
+    ignoreHTTPSErrors: true,
     trace: 'on-first-retry',
   },
   projects: [
@@ -20,7 +21,8 @@ export default defineConfig({
   ],
   webServer: {
     command: 'pnpm run dev 2>/dev/null',
-    url: 'http://localhost:5173',
+    url: 'https://localhost:5173',
+    ignoreHTTPSErrors: true,
     reuseExistingServer: !process.env.CI,
     stdout: 'ignore',
     stderr: 'ignore',

From f27b1329b4b593cb0cf1f36dd92f37be69e7845f Mon Sep 17 00:00:00 2001
From: Brendan Ryan <brendan@brendanjryan.com>
Date: Tue, 7 Apr 2026 12:50:58 -0700
Subject: [PATCH 2/4] fix: HTTPS Playwright config + conditional webAuthn for
 E2E tests

1. vite-plugin-mkcert forces HTTPS; update Playwright to use
   https://localhost:5173 with ignoreHTTPSErrors.

2. In CI, set VITE_E2E=true so the wagmi config uses the accounts SDK
   webAuthn connector (compatible with virtual authenticators) instead
   of tempoWallet (iframe dialog that blocks the page). Production
   continues to use tempoWallet.

3. Update E2E tests to click 'Sign in' (matching current Login UI).
---
 e2e/create-a-stablecoin.test.ts |  4 +--
 e2e/distribute-rewards.test.ts  |  4 +--
 e2e/executing-swaps.test.ts     |  4 +--
 e2e/manage-stablecoin.test.ts   |  4 +--
 e2e/mint-stablecoins.test.ts    |  4 +--
 e2e/providing-liquidity.test.ts |  4 +--
 e2e/send-a-payment.test.ts      |  4 +--
 e2e/use-for-fees.test.ts        |  4 +--
 playwright.config.ts            |  2 +-
 src/components/guides/Demo.tsx  | 16 +++++++++--
 src/wagmi.config.ts             | 51 +++++++++++++++++++--------------
 11 files changed, 60 insertions(+), 41 deletions(-)

diff --git a/e2e/create-a-stablecoin.test.ts b/e2e/create-a-stablecoin.test.ts
index de36c52f..a5c82657 100644
--- a/e2e/create-a-stablecoin.test.ts
+++ b/e2e/create-a-stablecoin.test.ts
@@ -18,8 +18,8 @@ test('create a stablecoin', async ({ page }) => {
 
   await page.goto('/guide/issuance/create-a-stablecoin')
 
-  // Step 1: Sign up with passkey
-  const signUpButton = page.getByRole('button', { name: 'Sign up' }).first()
+  // Step 1: Sign in
+  const signUpButton = page.getByRole('button', { name: 'Sign in' }).first()
   await expect(signUpButton).toBeVisible({ timeout: 90000 })
   await signUpButton.click()
 
diff --git a/e2e/distribute-rewards.test.ts b/e2e/distribute-rewards.test.ts
index 39ae4275..71ca4975 100644
--- a/e2e/distribute-rewards.test.ts
+++ b/e2e/distribute-rewards.test.ts
@@ -18,8 +18,8 @@ test('distribute rewards', async ({ page }) => {
 
   await page.goto('/guide/issuance/distribute-rewards')
 
-  // Step 1: Sign up with passkey
-  const signUpButton = page.getByRole('button', { name: 'Sign up' }).first()
+  // Step 1: Sign in
+  const signUpButton = page.getByRole('button', { name: 'Sign in' }).first()
   await expect(signUpButton).toBeVisible({ timeout: 90000 })
   await signUpButton.click()
 
diff --git a/e2e/executing-swaps.test.ts b/e2e/executing-swaps.test.ts
index 264d02d2..fafd6523 100644
--- a/e2e/executing-swaps.test.ts
+++ b/e2e/executing-swaps.test.ts
@@ -18,8 +18,8 @@ test('executing swaps', async ({ page }) => {
 
   await page.goto('/guide/stablecoin-dex/executing-swaps')
 
-  // Step 1: Sign up with passkey
-  const signUpButton = page.getByRole('button', { name: 'Sign up' }).first()
+  // Step 1: Sign in
+  const signUpButton = page.getByRole('button', { name: 'Sign in' }).first()
   await expect(signUpButton).toBeVisible({ timeout: 90000 })
   await signUpButton.click()
 
diff --git a/e2e/manage-stablecoin.test.ts b/e2e/manage-stablecoin.test.ts
index 8aa13c4d..446adb10 100644
--- a/e2e/manage-stablecoin.test.ts
+++ b/e2e/manage-stablecoin.test.ts
@@ -18,8 +18,8 @@ test('manage stablecoin - grant and revoke roles', async ({ page }) => {
 
   await page.goto('/guide/issuance/manage-stablecoin')
 
-  // Step 1: Sign up with passkey
-  const signUpButton = page.getByRole('button', { name: 'Sign up' }).first()
+  // Step 1: Sign in
+  const signUpButton = page.getByRole('button', { name: 'Sign in' }).first()
   await expect(signUpButton).toBeVisible({ timeout: 90000 })
   await signUpButton.click()
 
diff --git a/e2e/mint-stablecoins.test.ts b/e2e/mint-stablecoins.test.ts
index 05c2ac98..2ccbca30 100644
--- a/e2e/mint-stablecoins.test.ts
+++ b/e2e/mint-stablecoins.test.ts
@@ -18,8 +18,8 @@ test('mint stablecoins', async ({ page }) => {
 
   await page.goto('/guide/issuance/mint-stablecoins')
 
-  // Step 1: Sign up with passkey
-  const signUpButton = page.getByRole('button', { name: 'Sign up' }).first()
+  // Step 1: Sign in
+  const signUpButton = page.getByRole('button', { name: 'Sign in' }).first()
   await expect(signUpButton).toBeVisible({ timeout: 90000 })
   await signUpButton.click()
 
diff --git a/e2e/providing-liquidity.test.ts b/e2e/providing-liquidity.test.ts
index 3967c2eb..6a40c75b 100644
--- a/e2e/providing-liquidity.test.ts
+++ b/e2e/providing-liquidity.test.ts
@@ -18,8 +18,8 @@ test('providing liquidity - place and query order', async ({ page }) => {
 
   await page.goto('/guide/stablecoin-dex/providing-liquidity')
 
-  // Step 1: Sign up with passkey
-  const signUpButton = page.getByRole('button', { name: 'Sign up' }).first()
+  // Step 1: Sign in
+  const signUpButton = page.getByRole('button', { name: 'Sign in' }).first()
   await expect(signUpButton).toBeVisible({ timeout: 90000 })
   await signUpButton.click()
 
diff --git a/e2e/send-a-payment.test.ts b/e2e/send-a-payment.test.ts
index 8049bfdd..128ea009 100644
--- a/e2e/send-a-payment.test.ts
+++ b/e2e/send-a-payment.test.ts
@@ -18,8 +18,8 @@ test('send a payment', async ({ page }) => {
 
   await page.goto('/guide/payments/send-a-payment')
 
-  // Step 1: Sign up with passkey
-  const signUpButton = page.getByRole('button', { name: 'Sign up' }).first()
+  // Step 1: Sign in
+  const signUpButton = page.getByRole('button', { name: 'Sign in' }).first()
   await expect(signUpButton).toBeVisible({ timeout: 90000 })
   await signUpButton.click()
 
diff --git a/e2e/use-for-fees.test.ts b/e2e/use-for-fees.test.ts
index 5a6df28d..d80f73d2 100644
--- a/e2e/use-for-fees.test.ts
+++ b/e2e/use-for-fees.test.ts
@@ -18,8 +18,8 @@ test('use stablecoin for fees', async ({ page }) => {
 
   await page.goto('/guide/issuance/use-for-fees')
 
-  // Step 1: Sign up with passkey
-  const signUpButton = page.getByRole('button', { name: 'Sign up' }).first()
+  // Step 1: Sign in
+  const signUpButton = page.getByRole('button', { name: 'Sign in' }).first()
   await expect(signUpButton).toBeVisible({ timeout: 90000 })
   await signUpButton.click()
 
diff --git a/playwright.config.ts b/playwright.config.ts
index d6983100..b9437203 100644
--- a/playwright.config.ts
+++ b/playwright.config.ts
@@ -20,7 +20,7 @@ export default defineConfig({
     },
   ],
   webServer: {
-    command: 'pnpm run dev 2>/dev/null',
+    command: process.env.CI ? 'VITE_E2E=true pnpm run dev 2>/dev/null' : 'pnpm run dev 2>/dev/null',
     url: 'https://localhost:5173',
     ignoreHTTPSErrors: true,
     reuseExistingServer: !process.env.CI,
diff --git a/src/components/guides/Demo.tsx b/src/components/guides/Demo.tsx
index 7b94b16e..544d8fe6 100644
--- a/src/components/guides/Demo.tsx
+++ b/src/components/guides/Demo.tsx
@@ -15,7 +15,7 @@ import LucideRotateCcw from '~icons/lucide/rotate-ccw'
 import LucideWalletCards from '~icons/lucide/wallet-cards'
 import { cva, cx } from '../../../cva.config'
 import { usePostHogTracking } from '../../lib/posthog'
-import { useTempoWalletConnector } from '../../wagmi.config'
+import { useTempoWalletConnector, useWebAuthnConnector } from '../../wagmi.config'
 import { Container as ParentContainer } from '../Container'
 import { alphaUsd } from './tokens'
 
@@ -359,7 +359,10 @@ export namespace StringFormatter {
 
 export function Login() {
   const connect = useConnect()
-  const connector = useTempoWalletConnector()
+  const tempoWallet = useTempoWalletConnector()
+  const webAuthn = useWebAuthnConnector()
+  const isE2E = import.meta.env.VITE_E2E === 'true'
+  const connector = isE2E ? webAuthn : tempoWallet
 
   return (
     <div>
@@ -372,7 +375,14 @@ export function Login() {
         <Button
           variant="accent"
           className="font-normal text-[14px] -tracking-[2%]"
-          onClick={() => connect.connect({ connector })}
+          onClick={() =>
+            connect.connect({
+              connector,
+              ...(isE2E
+                ? { capabilities: { method: 'register' as const, name: 'Tempo Docs' } }
+                : {}),
+            })
+          }
           type="button"
         >
           Sign in
diff --git a/src/wagmi.config.ts b/src/wagmi.config.ts
index d36b8906..dd49bc67 100644
--- a/src/wagmi.config.ts
+++ b/src/wagmi.config.ts
@@ -1,6 +1,6 @@
 import { QueryClient } from '@tanstack/react-query'
 import { Expiry } from 'accounts'
-import { tempoWallet } from 'accounts/wagmi'
+import { tempoWallet, webAuthn as webAuthnAccounts } from 'accounts/wagmi'
 import * as React from 'react'
 import { parseUnits } from 'viem'
 import { tempoDevnet, tempoLocalnet, tempoModerato } from 'viem/chains'
@@ -40,26 +40,35 @@ export function getConfig(options: getConfig.Options = {}) {
     },
     chains: [chain],
     connectors: [
-      tempoWallet({
-        authorizeAccessKey: () => ({
-          expiry: Expiry.days(1),
-          limits: [
-            { token: pathUsd, limit: parseUnits('500', 6) },
-            { token: alphaUsd, limit: parseUnits('500', 6) },
-            { token: betaUsd, limit: parseUnits('500', 6) },
-            { token: thetaUsd, limit: parseUnits('500', 6) },
-          ],
-        }),
-        feePayerUrl: 'https://sponsor.moderato.tempo.xyz',
-      }),
-      webAuthn({
-        grantAccessKey: {
-          // @ts-expect-error - TODO: migrate to webAuthn on Accounts SDK
-          chainId: BigInt(chain.id),
-        },
-        keyManager: KeyManager.http('https://keys.tempo.xyz'),
-        rpId,
-      }),
+      ...(import.meta.env.VITE_E2E === 'true'
+        ? [
+            webAuthnAccounts({
+              authUrl: 'https://keys.tempo.xyz',
+              rdns: 'webAuthn',
+            }),
+          ]
+        : [
+            tempoWallet({
+              authorizeAccessKey: () => ({
+                expiry: Expiry.days(1),
+                limits: [
+                  { token: pathUsd, limit: parseUnits('500', 6) },
+                  { token: alphaUsd, limit: parseUnits('500', 6) },
+                  { token: betaUsd, limit: parseUnits('500', 6) },
+                  { token: thetaUsd, limit: parseUnits('500', 6) },
+                ],
+              }),
+              feePayerUrl: 'https://sponsor.moderato.tempo.xyz',
+            }),
+            webAuthn({
+              grantAccessKey: {
+                // @ts-expect-error - TODO: migrate to webAuthn on Accounts SDK
+                chainId: BigInt(chain.id),
+              },
+              keyManager: KeyManager.http('https://keys.tempo.xyz'),
+              rpId,
+            }),
+          ]),
     ],
     multiInjectedProviderDiscovery,
     storage: createStorage({

From 824f6e32800ee67f3a100ffce45e39e86707e17f Mon Sep 17 00:00:00 2001
From: Brendan Ryan <brendan@brendanjryan.com>
Date: Tue, 7 Apr 2026 14:43:55 -0700
Subject: [PATCH 3/4] fix: use accounts SDK capabilities for EmbedPasskeys in
 E2E mode

The accounts/wagmi webAuthn connector expects { method: 'register', name }
instead of { type: 'sign-up', label } used by wagmi/tempo webAuthn.
---
 src/components/guides/EmbedPasskeys.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/guides/EmbedPasskeys.tsx b/src/components/guides/EmbedPasskeys.tsx
index ad3b1337..a1485cfb 100644
--- a/src/components/guides/EmbedPasskeys.tsx
+++ b/src/components/guides/EmbedPasskeys.tsx
@@ -31,6 +31,7 @@ export function SignInButtons() {
   const connect = useConnect()
   const connector = useWebAuthnConnector()
   const disconnect = useDisconnect()
+  const isE2E = import.meta.env.VITE_E2E === 'true'
 
   return (
     <div className="flex gap-1">
@@ -40,10 +41,9 @@ export function SignInButtons() {
           await disconnect.disconnectAsync().catch(() => {})
           connect.connect({
             connector,
-            capabilities: {
-              label: 'Tempo Docs',
-              type: 'sign-up',
-            },
+            capabilities: isE2E
+              ? { method: 'register' as const, name: 'Tempo Docs' }
+              : { label: 'Tempo Docs', type: 'sign-up' },
           })
         }}
         type="button"

From c0d3ada5d65c6be94d19f76457a03de90b007967 Mon Sep 17 00:00:00 2001
From: Brendan Ryan <brendan@brendanjryan.com>
Date: Tue, 7 Apr 2026 14:48:40 -0700
Subject: [PATCH 4/4] fix: type error for E2E capabilities in EmbedPasskeys

---
 src/components/guides/EmbedPasskeys.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/guides/EmbedPasskeys.tsx b/src/components/guides/EmbedPasskeys.tsx
index a1485cfb..2ec96edd 100644
--- a/src/components/guides/EmbedPasskeys.tsx
+++ b/src/components/guides/EmbedPasskeys.tsx
@@ -42,8 +42,8 @@ export function SignInButtons() {
           connect.connect({
             connector,
             capabilities: isE2E
-              ? { method: 'register' as const, name: 'Tempo Docs' }
-              : { label: 'Tempo Docs', type: 'sign-up' },
+              ? ({ method: 'register', name: 'Tempo Docs' } as any)
+              : { label: 'Tempo Docs', type: 'sign-up' as const },
           })
         }}
         type="button"