Revert "feat: use accounts SDK for demo connectors (#216)"

This reverts commit 0d2aaf7.

Author: jxom

pnpm-lock.yaml

@@ -1,7 +1,7 @@
 'use client'
 import * as React from 'react'
 import { useChains, useConnect, useConnection, useConnectors, useSwitchChain } from 'wagmi'
-import { Button, Logout, TEMPO_CONNECTOR_ID } from './guides/Demo'
+import { Button, Logout } 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 === TEMPO_CONNECTOR_ID)
+  if (!address || connector?.id === 'webAuthn')
     return (
       <div className="flex gap-2">
         {injectedConnectors.map((connector) => (

src/components/ConnectWallet.tsx

@@ -21,8 +21,6 @@ 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'
 
@@ -112,14 +110,14 @@ export function Container(
 
     if (source === 'webAuthn') {
       const webAuthnConnection = connections.find(
-        (c) => c.connector.id === 'webAuthn' || c.connector.id === TEMPO_CONNECTOR_ID,
+        (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' && c.connector.id !== TEMPO_CONNECTOR_ID,
+        (c) => c.connector.id !== 'webAuthn' && c.connector.id !== 'xyz.tempo',
       )
       return walletConnection?.accounts[0]
     }
@@ -371,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: {
-                  name: 'Tempo Docs',
-                  method: 'register',
-                },
-              })
-            }
-            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/Demo.tsx

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

src/components/guides/EmbedPasskeys.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, TEMPO_CONNECTOR_ID, useCopyToClipboard } from '../../Demo'
+import { Button, Step, StringFormatter, 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 !== TEMPO_CONNECTOR_ID)
+  const walletConnection = connections.find((c) => c.connector.id !== 'webAuthn')
   const walletAddress = walletConnection?.accounts[0]
   const walletConnector = walletConnection?.connector
   const hasNonWebAuthnWallet = Boolean(walletAddress)

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

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