feat: accounts sdk docs (#219)

* wip

* accounts docs: guides sidebar, update deps, vocs

Amp-Thread-ID: https://ampcode.com/threads/T-019d6176-f3a7-71b8-a7e9-3fc5fbf3911a

* wip

Amp-Thread-ID: https://ampcode.com/threads/T-019d6478-0703-7239-b479-27de573344e6

* accounts: remove WebAuthnCeremony.local, fix guide links, rename adapter to connector

Amp-Thread-ID: https://ampcode.com/threads/T-019d652c-8d5d-723f-9b1a-41076bcc23ba

* fix: import Expiry, Dialog, WebAuthnCeremony from accounts instead of accounts/wagmi

Amp-Thread-ID: https://ampcode.com/threads/T-019d652c-8d5d-723f-9b1a-41076bcc23ba

* fix: update gitpick examples to tempoxyz/accounts repo

Amp-Thread-ID: https://ampcode.com/threads/T-019d652c-8d5d-723f-9b1a-41076bcc23ba

* accounts: polish getting started, examples table, remove connectors overview, use /auth

Amp-Thread-ID: https://ampcode.com/threads/T-019d652c-8d5d-723f-9b1a-41076bcc23ba

* accounts: add quick prompt, examples table, getting help section

Amp-Thread-ID: https://ampcode.com/threads/T-019d652c-8d5d-723f-9b1a-41076bcc23ba

Author: jxom

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-lock.yaml

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

pnpm-workspace.yaml

@@ -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/AccountsSignIn.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/CreatePasskeyAccount.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/Demo.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/EmbedPasskeys.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/AddFundsToWallet.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()