revert: remove Account SDK architecture diagram

src/pages/accounts/index.mdx

@@ -4,7 +4,6 @@ description: Set up the Tempo Accounts SDK to create, manage, and interact with
 ---
 
 import { Cards, Card } from 'vocs'
-import { StaticMermaidDiagram } from '../../components/StaticMermaidDiagram'
 import * as Demo from '../../components/guides/Demo.tsx'
 import * as Step from '../../components/guides/steps'
 import IconGitHub from '~icons/simple-icons/github'
@@ -15,11 +14,19 @@ import IconGitHub from '~icons/simple-icons/github'
 
 The Tempo Accounts SDK is a TypeScript library for applications and wallets to create, manage, and interact with accounts on Tempo.
 
-<StaticMermaidDiagram chart={`flowchart TD
-    app["App"] -->|"EIP-5792 requests"| wallet["Tempo Wallet + WebAuthn Passkey"]
-    wallet -->|"delegates to"| sdk["Accounts SDK"]
-    sdk -->|"built on"| infra["Wagmi + Viem"]
-`} />
+<div className="flex gap-2">
+  <a
+    href="https://github.com/tempoxyz/accounts"
+    target="_blank"
+    rel="noopener noreferrer"
+    className="bg-surfaceTint px-2 py-1 rounded-lg border border-primary no-underline flex items-center gap-2"
+  >
+    <span className="flex items-center gap-2 text-sm text-primary font-[450]">
+      <IconGitHub className="size-3" />
+      GitHub
+    </span>
+  </a>
+</div>
 
 ### Demo
 
@@ -274,17 +281,3 @@ export default defineConfig({
 Have questions or building something cool with the Accounts SDK?
 
 Join the Telegram group to chat with the team and other devs: [@mpp_devs](https://t.me/mpp_devs)
-
-<div className="flex gap-2 mt-4">
-  <a
-    href="https://github.com/tempoxyz/accounts"
-    target="_blank"
-    rel="noopener noreferrer"
-    className="bg-surfaceTint px-2 py-1 rounded-lg border border-primary no-underline flex items-center gap-2"
-  >
-    <span className="flex items-center gap-2 text-sm text-primary font-[450]">
-      <IconGitHub className="size-3" />
-      GitHub
-    </span>
-  </a>
-</div>

src/wagmi.config.ts

@@ -1,6 +1,6 @@
 import { QueryClient } from '@tanstack/react-query'
 import { Expiry } from 'accounts'
-import { tempoWallet, webAuthn } 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'
@@ -13,6 +13,7 @@ import {
   useConnectors,
   webSocket,
 } from 'wagmi'
+import { KeyManager, webAuthn } from 'wagmi/tempo'
 import { alphaUsd, betaUsd, pathUsd, thetaUsd } from './components/guides/tokens'
 
 const feeToken = '0x20c0000000000000000000000000000000000001'
@@ -24,6 +25,13 @@ const chain =
       ? tempoDevnet.extend({ feeToken })
       : tempoModerato.extend({ feeToken })
 
+const rpId = (() => {
+  const hostname = globalThis.location?.hostname
+  if (!hostname) return undefined
+  const parts = hostname.split('.')
+  return parts.length > 2 ? parts.slice(-2).join('.') : hostname
+})()
+
 export function getConfig(options: getConfig.Options = {}) {
   const { multiInjectedProviderDiscovery = false } = options
   return createConfig({
@@ -32,22 +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({
-        authUrl: 'https://keys.tempo.xyz',
-        rdns: 'webAuthn',
-      }),
+      ...(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({