feat: accounts sdk docs

package.json

@@ -20,6 +20,7 @@
     "@vercel/analytics": "^1.6.1",
     "@vercel/speed-insights": "^1.3.1",
     "abitype": "^1.2.3",
+    "accounts": "^0.4.23",
     "cva": "1.0.0-beta.4",
     "mermaid": "^11.12.2",
     "monaco-editor": "^0.55.1",
@@ -33,10 +34,9 @@
     "sql-formatter": "^15.7.0",
     "tailwind-merge": "^3.4.0",
     "tailwindcss": "^4.1.18",
-    "tempo.ts": "^0.14.0",
     "unplugin-auto-import": "^21.0.0",
     "unplugin-icons": "^23.0.1",
-    "viem": "^2.47.5",
+    "viem": "^2.47.10",
     "vocs": "https://pkg.pr.new/vocs@70a7c8c",
     "wagmi": "^3.5.0",
     "waku": "1.0.0-alpha.4",
@@ -54,7 +54,8 @@
     "tsx": "^4.21.0",
     "typescript": "^5.9.3",
     "use-sync-external-store": "^1.6.0",
-    "vite": "^7.3.1"
+    "vite": "^7.3.1",
+    "vite-plugin-mkcert": "^1.17.10"
   },
   "devEngines": {
     "runtime": {

pnpm-workspace.yaml

@@ -3,3 +3,5 @@ patchedDependencies:
   dayjs@1.11.19: patches/dayjs@1.11.19.patch
 
 minimumReleaseAge: 1440
+minimumReleaseAgeExclude:
+  - accounts

src/components/guides/AccountsSignIn.tsx

@@ -0,0 +1,41 @@
+'use client'
+import { useConnect, useConnection, useConnectors, useDisconnect } from 'wagmi'
+import { Button } from './Demo'
+
+export function AccountsSignIn() {
+  const account = useConnection()
+  const connect = useConnect()
+  const disconnect = useDisconnect()
+  const connector = useTempoWalletConnector()
+
+  if (!connector) return null
+
+  if (account.address)
+    return (
+      <div className="flex items-center gap-2">
+        <Button onClick={() => disconnect.disconnect()} variant="destructive">
+          Sign out
+        </Button>
+      </div>
+    )
+
+  if (connect.isPending)
+    return (
+      <div>
+        <Button disabled>Check prompt</Button>
+      </div>
+    )
+
+  return (
+    <div className="flex gap-1">
+      <Button variant="accent" onClick={() => connect.connect({ connector })} type="button">
+        Sign in
+      </Button>
+    </div>
+  )
+}
+
+function useTempoWalletConnector() {
+  const connectors = useConnectors()
+  return connectors.find((c) => c.id === 'xyz.tempo')
+}

src/components/guides/Demo.tsx

@@ -5,7 +5,7 @@ import * as React from 'react'
 import type { Address, BaseError } from 'viem'
 import { formatUnits } from 'viem'
 import { tempoModerato } from 'viem/chains'
-import { useAccount, useConnect, useConnections, useConnectors, useDisconnect } from 'wagmi'
+import { useAccount, useConnect, useConnections, useDisconnect } from 'wagmi'
 import { Hooks } from 'wagmi/tempo'
 import LucideCheck from '~icons/lucide/check'
 import LucideCopy from '~icons/lucide/copy'
@@ -15,6 +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 { Container as ParentContainer } from '../Container'
 import { alphaUsd } from './tokens'
 
@@ -23,15 +24,6 @@ export { alphaUsd, betaUsd, pathUsd, thetaUsd } from './tokens'
 export const FAKE_RECIPIENT = '0xbeefcafe54750903ac1c8909323af7beb21ea2cb'
 export const FAKE_RECIPIENT_2 = '0xdeadbeef54750903ac1c8909323af7beb21ea2cb'
 
-export function useWebAuthnConnector() {
-  const connectors = useConnectors()
-  return React.useMemo(
-    // biome-ignore lint/style/noNonNullAssertion: webAuthn connector always defined in wagmi.config.ts
-    () => connectors.find((connector) => connector.id === 'webAuthn')!,
-    [connectors],
-  )
-}
-
 function getExplorerHost() {
   const { VITE_TEMPO_ENV, VITE_EXPLORER_OVERRIDE } = import.meta.env
 
@@ -117,12 +109,16 @@ export function Container(
     if (!source) return address
 
     if (source === 'webAuthn') {
-      const webAuthnConnection = connections.find((c) => c.connector.id === 'webAuthn')
+      const webAuthnConnection = connections.find(
+        (c) => c.connector.id === 'webAuthn' || c.connector.id === 'xyz.tempo',
+      )
       return webAuthnConnection?.accounts[0]
     }
 
     if (source === 'wallet') {
-      const walletConnection = connections.find((c) => c.connector.id !== 'webAuthn')
+      const walletConnection = connections.find(
+        (c) => c.connector.id !== 'webAuthn' && c.connector.id !== 'xyz.tempo',
+      )
       return walletConnection?.accounts[0]
     }
 
@@ -363,7 +359,7 @@ export namespace StringFormatter {
 
 export function Login() {
   const connect = useConnect()
-  const connector = useWebAuthnConnector()
+  const connector = useTempoWalletConnector()
 
   return (
     <div>
@@ -373,32 +369,14 @@ export function Login() {
           Check prompt
         </Button>
       ) : (
-        <div className="flex gap-1">
-          <Button
-            variant="accent"
-            className="font-normal text-[14px] -tracking-[2%]"
-            onClick={() => connect.connect({ connector })}
-            type="button"
-          >
-            Sign in
-          </Button>
-          <Button
-            variant="default"
-            className="font-normal text-[14px] -tracking-[2%]"
-            onClick={() =>
-              connect.connect({
-                connector,
-                capabilities: {
-                  label: 'Tempo Docs',
-                  type: 'sign-up',
-                },
-              })
-            }
-            type="button"
-          >
-            Sign up
-          </Button>
-        </div>
+        <Button
+          variant="accent"
+          className="font-normal text-[14px] -tracking-[2%]"
+          onClick={() => connect.connect({ connector })}
+          type="button"
+        >
+          Sign in
+        </Button>
       )}
     </div>
   )

src/components/guides/EmbedPasskeys.tsx

@@ -1,6 +1,7 @@
 'use client'
 import { useAccount, useConnect, useDisconnect } from 'wagmi'
-import { Button, useWebAuthnConnector } from './Demo'
+import { useWebAuthnConnector } from '../../wagmi.config'
+import { Button } from './Demo'
 
 export function EmbedPasskeys() {
   const account = useAccount()

src/components/guides/steps/wallet/AddFundsToWallet.tsx

@@ -14,7 +14,9 @@ import type { DemoStepProps } from '../types'
 export function AddFundsToWallet(props: DemoStepProps) {
   const { stepNumber = 2, last = false } = props
   const { address, connector } = useConnection()
-  const hasNonWebAuthnWallet = Boolean(address && connector?.id !== 'webAuthn')
+  const hasNonWebAuthnWallet = Boolean(
+    address && connector?.id !== 'webAuthn' && connector?.id !== 'xyz.tempo',
+  )
   const queryClient = useQueryClient()
 
   const { data: balance, refetch: balanceRefetch } = Hooks.token.useGetBalance({

src/components/guides/steps/wallet/AddTokensToWallet.tsx

@@ -58,7 +58,9 @@ function AddTokenButton(props: {
 export function AddTokensToWallet(props: DemoStepProps) {
   const { stepNumber = 3, last = false } = props
   const { address, connector } = useConnection()
-  const hasNonWebAuthnWallet = Boolean(address && connector?.id !== 'webAuthn')
+  const hasNonWebAuthnWallet = Boolean(
+    address && connector?.id !== 'webAuthn' && connector?.id !== 'xyz.tempo',
+  )
 
   const [addedTokens, setAddedTokens] = React.useState<Set<string>>(new Set())
   const [expanded, setExpanded] = React.useState(false)

src/components/guides/steps/wallet/SetFeeToken.tsx

@@ -27,7 +27,9 @@ const DEFAULT_FEE_TOKEN_OPTION = FEE_TOKEN_OPTIONS[0]
 export function SetFeeToken(props: DemoStepProps) {
   const { stepNumber = 1 } = props
   const { address, connector } = useConnection()
-  const hasNonWebAuthnWallet = Boolean(address && connector?.id !== 'webAuthn')
+  const hasNonWebAuthnWallet = Boolean(
+    address && connector?.id !== 'webAuthn' && connector?.id !== 'xyz.tempo',
+  )
   const chainId = useChainId()
   const config = useConfig()
 

src/components/lib/wallets.ts

@@ -4,10 +4,13 @@ const UNSUPPORTED_WALLET_IDS = new Set(['app.phantom'])
 const UNSUPPORTED_WALLET_NAMES = new Set(['Phantom'])
 
 export function filterSupportedInjectedConnectors(connectors: readonly Connector[]) {
-  return connectors.filter(
-    (connector) =>
-      connector.id !== 'webAuthn' &&
-      !UNSUPPORTED_WALLET_IDS.has(connector.id) &&
-      !UNSUPPORTED_WALLET_NAMES.has(connector.name),
-  )
+  const seen = new Set<string>()
+  return connectors.filter((connector) => {
+    if (connector.id === 'webAuthn') return false
+    if (UNSUPPORTED_WALLET_IDS.has(connector.id)) return false
+    if (UNSUPPORTED_WALLET_NAMES.has(connector.name)) return false
+    if (seen.has(connector.id)) return false
+    seen.add(connector.id)
+    return true
+  })
 }

src/pages/accounts/api/adapters.mdx

@@ -0,0 +1,39 @@
+---
+title: Adapters
+description: Pluggable adapters for the Tempo Accounts SDK Provider.
+---
+
+import { Cards, Card } from 'vocs'
+
+# Adapters
+
+Adapters control how accounts are created and managed. Pass an adapter to `Provider.create()` to configure the account management strategy.
+
+| Adapter | Uses | Best for |
+| --- | --- | --- |
+| [`dialog`](/accounts/api/dialog) (default) | Hosted dialog | Apps wanting a universal account experience |
+| [`webAuthn`](/accounts/api/webAuthn) | Domain-bound passkeys | Wallets integrating Passkey accounts, or Apps wanting to host and manage their own Passkey accounts |
+| [`local`](/accounts/api/local) | Arbitrary keys | Custom signing and key management |
+
+---
+
+<Cards>
+  <Card
+    description="Embeds a universal Tempo Wallet dialog into your app"
+    icon="lucide:wallet"
+    to="/accounts/api/dialog"
+    title="dialog"
+  />
+  <Card
+    description="Embeds domain-bound passkey accounts into your app"
+    icon="lucide:fingerprint"
+    to="/accounts/api/webAuthn"
+    title="webAuthn"
+  />
+  <Card
+    description="Uses arbitrary keys for account management"
+    icon="lucide:key"
+    to="/accounts/api/local"
+    title="local"
+  />
+</Cards>

src/pages/accounts/api/dialog.iframe.mdx

@@ -0,0 +1,20 @@
+---
+title: Dialog.iframe
+description: Embed the Tempo Wallet auth UI in an iframe dialog element.
+---
+
+# `Dialog.iframe`
+
+Creates an iframe dialog that embeds the auth app in a `<dialog>` element. This is the default on most browsers in secure (HTTPS) contexts.
+
+Falls back to a popup on Safari (which does not support WebAuthn in cross-origin iframes) and insecure (HTTP) origins.
+
+## Usage
+
+```ts
+import { dialog, Dialog, Provider } from 'accounts'
+
+const provider = Provider.create({
+  adapter: dialog({ dialog: Dialog.iframe() }),
+})
+```