feat: use accounts SDK for demo connectors

src/components/ConnectWallet.tsx

@@ -1,7 +1,7 @@
 'use client'
 import * as React from 'react'
 import { useChains, useConnect, useConnection, useConnectors, useSwitchChain } from 'wagmi'
-import { Button, Logout } from './guides/Demo'
+import { Button, Logout, TEMPO_CONNECTOR_ID } from './guides/Demo'
 import { filterSupportedInjectedConnectors } from './lib/wallets'
 
 export function ConnectWallet({ showAddChain = true }: { showAddChain?: boolean }) {
@@ -19,7 +19,7 @@ export function ConnectWallet({ showAddChain = true }: { showAddChain?: boolean
     return (
       <div className="flex items-center text-[14px] -tracking-[2%]">No browser wallets found.</div>
     )
-  if (!address || connector?.id === 'webAuthn')
+  if (!address || connector?.id === TEMPO_CONNECTOR_ID)
     return (
       <div className="flex gap-2">
         {injectedConnectors.map((connector) => (

src/components/guides/Demo.tsx

@@ -21,6 +21,8 @@ import { alphaUsd } from './tokens'
 
 export { alphaUsd, betaUsd, pathUsd, thetaUsd } from './tokens'
 
+export const TEMPO_CONNECTOR_ID = 'xyz.tempo'
+
 export const FAKE_RECIPIENT = '0xbeefcafe54750903ac1c8909323af7beb21ea2cb'
 export const FAKE_RECIPIENT_2 = '0xdeadbeef54750903ac1c8909323af7beb21ea2cb'
 
@@ -110,14 +112,14 @@ export function Container(
 
     if (source === 'webAuthn') {
       const webAuthnConnection = connections.find(
-        (c) => c.connector.id === 'webAuthn' || c.connector.id === 'xyz.tempo',
+        (c) => c.connector.id === 'webAuthn' || c.connector.id === TEMPO_CONNECTOR_ID,
       )
       return webAuthnConnection?.accounts[0]
     }
 
     if (source === 'wallet') {
       const walletConnection = connections.find(
-        (c) => c.connector.id !== 'webAuthn' && c.connector.id !== 'xyz.tempo',
+        (c) => c.connector.id !== 'webAuthn' && c.connector.id !== TEMPO_CONNECTOR_ID,
       )
       return walletConnection?.accounts[0]
     }
@@ -369,14 +371,32 @@ export function Login() {
           Check prompt
         </Button>
       ) : (
-        <Button
-          variant="accent"
-          className="font-normal text-[14px] -tracking-[2%]"
-          onClick={() => connect.connect({ connector })}
-          type="button"
-        >
-          Sign in
-        </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: {
+                  name: 'Tempo Docs',
+                  method: 'register',
+                },
+              })
+            }
+            type="button"
+          >
+            Sign up
+          </Button>
+        </div>
       )}
     </div>
   )

src/components/guides/EmbedPasskeys.tsx

@@ -41,8 +41,8 @@ export function SignInButtons() {
           connect.connect({
             connector,
             capabilities: {
-              label: 'Tempo Docs',
-              type: 'sign-up',
+              name: 'Tempo Docs',
+              method: 'register',
             },
           })
         }}

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

@@ -12,7 +12,7 @@ import {
 import LucideCheck from '~icons/lucide/check'
 import LucideWalletCards from '~icons/lucide/wallet-cards'
 import { filterSupportedInjectedConnectors } from '../../../lib/wallets'
-import { Button, Step, StringFormatter, useCopyToClipboard } from '../../Demo'
+import { Button, Step, StringFormatter, TEMPO_CONNECTOR_ID, useCopyToClipboard } from '../../Demo'
 import type { DemoStepProps } from '../types'
 
 export function ConnectWallet(props: DemoStepProps) {
@@ -31,7 +31,7 @@ export function ConnectWallet(props: DemoStepProps) {
   const isSupported = chains.some((c) => c.id === chain?.id)
   const [copied, copyToClipboard] = useCopyToClipboard()
 
-  const walletConnection = connections.find((c) => c.connector.id !== 'webAuthn')
+  const walletConnection = connections.find((c) => c.connector.id !== TEMPO_CONNECTOR_ID)
   const walletAddress = walletConnection?.accounts[0]
   const walletConnector = walletConnection?.connector
   const hasNonWebAuthnWallet = Boolean(walletAddress)

src/wagmi.config.ts

@@ -13,7 +13,7 @@ import {
   useConnectors,
   webSocket,
 } from 'wagmi'
-import { KeyManager, webAuthn } from 'wagmi/tempo'
+import { webAuthn } from 'accounts/wagmi'
 import { alphaUsd, betaUsd, pathUsd, thetaUsd } from './components/guides/tokens'
 
 const feeToken = '0x20c0000000000000000000000000000000000001'
@@ -25,13 +25,6 @@ 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({
@@ -53,12 +46,8 @@ export function getConfig(options: getConfig.Options = {}) {
         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,
+        authUrl: 'https://keys.tempo.xyz',
+        rdns: 'webAuthn',
       }),
     ],
     multiInjectedProviderDiscovery,