From c3120c83e5e39e0c98c09c5ea60ea983f18a2626 Mon Sep 17 00:00:00 2001 From: Derek Cofausper <256792747+decofe@users.noreply.github.com> Date: Thu, 23 Jul 2026 16:48:05 +0000 Subject: [PATCH] fix: reuse shared login in zone guides --- e2e/private-zones-sign-in.test.ts | 29 +++++++++++++++++++ src/components/guides/zones/DepositToZone.tsx | 5 ++-- .../guides/zones/SendTokensAcrossZones.tsx | 5 ++-- .../guides/zones/SendTokensWithinZone.tsx | 5 ++-- .../guides/zones/SwapAcrossZones.tsx | 5 ++-- .../guides/zones/WithdrawFromZone.tsx | 5 ++-- src/lib/useRootWebAuthnAccount.ts | 6 ++-- 7 files changed, 43 insertions(+), 17 deletions(-) create mode 100644 e2e/private-zones-sign-in.test.ts diff --git a/e2e/private-zones-sign-in.test.ts b/e2e/private-zones-sign-in.test.ts new file mode 100644 index 00000000..3a6dda9f --- /dev/null +++ b/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(() => {}) + } +}) diff --git a/src/components/guides/zones/DepositToZone.tsx b/src/components/guides/zones/DepositToZone.tsx index 453cca2b..68b4a50a 100644 --- a/src/components/guides/zones/DepositToZone.tsx +++ b/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() { : } + actions={connected ? : } error={undefined} number={1} title="Create or use a passkey account on the public chain." diff --git a/src/components/guides/zones/SendTokensAcrossZones.tsx b/src/components/guides/zones/SendTokensAcrossZones.tsx index ba19b384..4d2dfe9e 100644 --- a/src/components/guides/zones/SendTokensAcrossZones.tsx +++ b/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() { : } + actions={connected ? : } error={undefined} number={1} title="Create or use a passkey account on the public chain." diff --git a/src/components/guides/zones/SendTokensWithinZone.tsx b/src/components/guides/zones/SendTokensWithinZone.tsx index 488c0b38..e46f7e5d 100644 --- a/src/components/guides/zones/SendTokensWithinZone.tsx +++ b/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() { : } + actions={connected ? : } error={undefined} number={1} title="Create or use a passkey account on the public chain." diff --git a/src/components/guides/zones/SwapAcrossZones.tsx b/src/components/guides/zones/SwapAcrossZones.tsx index fb53d2a7..a48c0eaa 100644 --- a/src/components/guides/zones/SwapAcrossZones.tsx +++ b/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() { : } + actions={connected ? : } error={undefined} number={1} title="Create or use a passkey account on the public chain." diff --git a/src/components/guides/zones/WithdrawFromZone.tsx b/src/components/guides/zones/WithdrawFromZone.tsx index 5ee8f961..7d4d4b23 100644 --- a/src/components/guides/zones/WithdrawFromZone.tsx +++ b/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() { : } + actions={connected ? : } error={undefined} number={1} title="Create or use a passkey account on the public chain." diff --git a/src/lib/useRootWebAuthnAccount.ts b/src/lib/useRootWebAuthnAccount.ts index 968aab73..b547c0ab 100644 --- a/src/lib/useRootWebAuthnAccount.ts +++ b/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')