fix: use HTTPS in Playwright webServer config

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()
 

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()
 

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()
 

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()
 

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()
 

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()
 

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()
 

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()
 

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: [
@@ -19,8 +20,9 @@ export default defineConfig({
     },
   ],
   webServer: {
-    command: 'pnpm run dev 2>/dev/null',
-    url: 'http://localhost:5173',
+    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,
     stdout: 'ignore',
     stderr: 'ignore',

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

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', name: 'Tempo Docs' } as any)
+              : { label: 'Tempo Docs', type: 'sign-up' as const },
           })
         }}
         type="button"

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({