fix: reuse shared login in zone guides

e2e/private-zones-sign-in.test.ts

@@ -0,0 +1,29 @@
+import { expect, test } from '@playwright/test'
+
+test('private zone guides sign in through the shared docs login', async ({ page }) => {
+  const client = await page.context().newCDPSession(page)
+  await client.send('WebAuthn.enable')
+  const { authenticatorId } = await client.send('WebAuthn.addVirtualAuthenticator', {
+    options: {
+      protocol: 'ctap2',
+      transport: 'internal',
+      hasResidentKey: true,
+      hasUserVerification: true,
+      isUserVerified: true,
+    },
+  })
+
+  try {
+    await page.goto('/docs/guide/private-zones/deposit-to-a-zone')
+
+    const accountStep = page
+      .locator('[data-active][data-completed]')
+      .filter({ hasText: 'Create or use a passkey account on the public chain.' })
+      .first()
+    await accountStep.getByRole('button', { name: 'Sign in' }).click()
+
+    await expect(accountStep.getByRole('button', { name: 'Sign out' })).toBeVisible()
+  } finally {
+    await client.send('WebAuthn.removeVirtualAuthenticator', { authenticatorId }).catch(() => {})
+  }
+})

src/components/guides/zones/DepositToZone.tsx

@@ -13,8 +13,7 @@ import {
 } from '../../../lib/private-zones.ts'
 import { useRootWebAuthnAccount } from '../../../lib/useRootWebAuthnAccount.ts'
 import { useZoneAuthorization, type ZoneAuthClientLike } from '../../../lib/useZoneAuthorization.ts'
-import { Button, ExplorerLink, Logout, Step } from '../Demo'
-import { SignInButtons } from '../EmbedPasskeys'
+import { Button, ExplorerLink, Login, Logout, Step } from '../Demo'
 import { pathUsd } from '../tokens'
 
 const ZONE_LABEL = 'Zone A'
@@ -52,7 +51,7 @@ export function DepositToZone() {
       <Step
         active={!connected}
         completed={connected}
-        actions={connected ? <Logout /> : <SignInButtons />}
+        actions={connected ? <Logout /> : <Login />}
         error={undefined}
         number={1}
         title="Create or use a passkey account on the public chain."

src/components/guides/zones/SendTokensAcrossZones.tsx

@@ -19,8 +19,7 @@ import {
 } from '../../../lib/private-zones.ts'
 import { useRootWebAuthnAccount } from '../../../lib/useRootWebAuthnAccount.ts'
 import { useZoneAuthorization, type ZoneAuthClientLike } from '../../../lib/useZoneAuthorization.ts'
-import { Button, ExplorerLink, Logout, ReceiptHash, Step } from '../Demo'
-import { SignInButtons } from '../EmbedPasskeys'
+import { Button, ExplorerLink, Login, Logout, ReceiptHash, Step } from '../Demo'
 import { pathUsd } from '../tokens'
 import { useStickyStepCompletion } from './useStickyStepCompletion.ts'
 
@@ -81,7 +80,7 @@ export function SendTokensAcrossZones() {
       <Step
         active={!connected}
         completed={connected}
-        actions={connected ? <Logout /> : <SignInButtons />}
+        actions={connected ? <Logout /> : <Login />}
         error={undefined}
         number={1}
         title="Create or use a passkey account on the public chain."

src/components/guides/zones/SendTokensWithinZone.tsx

@@ -13,8 +13,7 @@ import {
 } from '../../../lib/private-zones.ts'
 import { useRootWebAuthnAccount } from '../../../lib/useRootWebAuthnAccount.ts'
 import { useZoneAuthorization, type ZoneAuthClientLike } from '../../../lib/useZoneAuthorization.ts'
-import { Button, ExplorerLink, FAKE_RECIPIENT, Logout, ReceiptHash, Step } from '../Demo'
-import { SignInButtons } from '../EmbedPasskeys'
+import { Button, ExplorerLink, FAKE_RECIPIENT, Login, Logout, ReceiptHash, Step } from '../Demo'
 import { pathUsd } from '../tokens'
 import { useStickyStepCompletion } from './useStickyStepCompletion.ts'
 
@@ -42,7 +41,7 @@ export function SendTokensWithinZone() {
       <Step
         active={!connected}
         completed={connected}
-        actions={connected ? <Logout /> : <SignInButtons />}
+        actions={connected ? <Logout /> : <Login />}
         error={undefined}
         number={1}
         title="Create or use a passkey account on the public chain."

src/components/guides/zones/SwapAcrossZones.tsx

@@ -21,8 +21,7 @@ import {
 } from '../../../lib/private-zones.ts'
 import { useRootWebAuthnAccount } from '../../../lib/useRootWebAuthnAccount.ts'
 import { useZoneAuthorization, type ZoneAuthClientLike } from '../../../lib/useZoneAuthorization.ts'
-import { Button, ExplorerLink, Logout, ReceiptHash, Step } from '../Demo'
-import { SignInButtons } from '../EmbedPasskeys'
+import { Button, ExplorerLink, Login, Logout, ReceiptHash, Step } from '../Demo'
 import { betaUsd, pathUsd } from '../tokens'
 import { useStickyStepCompletion } from './useStickyStepCompletion.ts'
 
@@ -105,7 +104,7 @@ export function SwapAcrossZones() {
       <Step
         active={!connected}
         completed={connected}
-        actions={connected ? <Logout /> : <SignInButtons />}
+        actions={connected ? <Logout /> : <Login />}
         error={undefined}
         number={1}
         title="Create or use a passkey account on the public chain."

src/components/guides/zones/WithdrawFromZone.tsx

@@ -15,8 +15,7 @@ import {
 } from '../../../lib/private-zones.ts'
 import { useRootWebAuthnAccount } from '../../../lib/useRootWebAuthnAccount.ts'
 import { useZoneAuthorization, type ZoneAuthClientLike } from '../../../lib/useZoneAuthorization.ts'
-import { Button, ExplorerLink, Logout, Step } from '../Demo'
-import { SignInButtons } from '../EmbedPasskeys'
+import { Button, ExplorerLink, Login, Logout, Step } from '../Demo'
 import { pathUsd } from '../tokens'
 import { useStickyStepCompletion } from './useStickyStepCompletion.ts'
 
@@ -74,7 +73,7 @@ export function WithdrawFromZone() {
       <Step
         active={!connected}
         completed={connected}
-        actions={connected ? <Logout /> : <SignInButtons />}
+        actions={connected ? <Logout /> : <Login />}
         error={undefined}
         number={1}
         title="Create or use a passkey account on the public chain."

src/lib/useRootWebAuthnAccount.ts

@@ -24,8 +24,10 @@ export function useRootWebAuthnAccount() {
   const { address, connector } = useConnection()
 
   return useQuery({
-    enabled: Boolean(address && connector?.id === 'webAuthn'),
-    queryKey: ['root-webauthn-account', address],
+    enabled: Boolean(
+      address && (connector?.id === 'webAuthn' || connector?.id === 'xyz.tempo'),
+    ),
+    queryKey: ['root-webauthn-account', connector?.id, address],
     queryFn: async () => {
       if (!address) throw new Error('account address not ready')
       if (!connector) throw new Error('connector not ready')