feat: working passkey endpoint

Author: o-az

apps/explorer/src/comps/ConnectWallet.tsx

@@ -15,6 +15,65 @@ import { filterSupportedInjectedConnectors } from '#lib/wallets.ts'
 import LucideLogOut from '~icons/lucide/log-out'
 import LucideWalletCards from '~icons/lucide/wallet-cards'
 
+export function ConnectPasskey() {
+	const connect = useConnect()
+
+	const connection = useConnection()
+	const connectors = useConnectors()
+
+	const connector = React.useMemo(
+		() => connectors.find((connector) => connector.id === 'webAuthn'),
+		[connectors],
+	)
+
+	if (!connector || connector.id !== 'webAuthn')
+		return <span className="text-negative">no passkey connector</span>
+
+	if (connect.status === 'pending') return <p>check prompt…</p>
+
+	if (connection.isConnected && connection.address) {
+		return (
+			<div className="flex items-center gap-2">
+				<a
+					target="_blank"
+					rel="noopener noreferrer"
+					className="font-light text-[12px] text-white/80"
+					href={`https://docs.tempo.xyz/quickstart/faucet#funding-others`}
+				>
+					[faucet]
+				</a>
+				<Address
+					chars={7}
+					align="end"
+					address={connection.address}
+					className="text-accent font-light text-sm"
+				/>
+				<SignOut />
+			</div>
+		)
+	}
+
+	return (
+		<Button
+			onClick={() =>
+				connect
+					.mutateAsync({
+						connector,
+						capabilities: { type: 'sign-in' },
+					})
+					.catch(() =>
+						connect.mutateAsync({
+							connector,
+							capabilities: { type: 'sign-up' },
+						}),
+					)
+			}
+		>
+			Connect
+		</Button>
+	)
+}
+
 export function ConnectWallet({
 	showAddChain = true,
 }: {

apps/explorer/src/comps/Contract.tsx

@@ -2,7 +2,7 @@ import type { Address } from 'ox'
 import * as React from 'react'
 import type { Abi } from 'viem'
 import { useBytecode } from 'wagmi'
-import { ConnectWallet } from '#comps/ConnectWallet.tsx'
+import { ConnectPasskey } from '#comps/ConnectWallet.tsx'
 import { AbiViewer } from '#comps/ContractAbi.tsx'
 import { ContractReader } from '#comps/ContractReader.tsx'
 import { SourceSection } from '#comps/ContractSource.tsx'
@@ -247,7 +247,7 @@ export function InteractTabContent(props: {
 				title="Write contract"
 				expanded={writeExpanded}
 				onToggle={() => setWriteExpanded(!writeExpanded)}
-				actions={<ConnectWallet />}
+				actions={<ConnectPasskey />}
 			>
 				<div className="px-[10px] pb-[10px]">
 					<ContractWriter address={address} abi={abi} />

apps/explorer/src/index.server.ts

@@ -19,21 +19,18 @@ export default Sentry.withSentry(
 			// Adds request headers and IP for users, for more info visit:
 			// https://docs.sentry.io/platforms/javascript/guides/cloudflare/configuration/options/#sendDefaultPii
 			sendDefaultPii: true,
-			enableLogs: true,
+			enableLogs: false,
 		}
 	},
 	{
 		fetch: (request: Request, opts) => {
 			const url = new URL(request.url)
-			if (url.pathname === '/debug-sentry')
-				throw new Error('My first Sentry error!')
 
 			for (const { from, to } of redirects) {
 				const match = url.pathname.match(from)
-				if (match) {
-					url.pathname = to(match)
-					return Response.redirect(url, 301)
-				}
+				if (!match) continue
+				url.pathname = to(match)
+				return Response.redirect(url, 301)
 			}
 
 			return handler.fetch(request, opts as Parameters<ServerEntry['fetch']>[1])

apps/explorer/src/routeTree.gen.ts

@@ -37,7 +37,7 @@ export const getRouter = () => {
 	if (!router.isServer) {
 		Sentry.init({
 			dsn: 'https://170113585c24ca7a67704f86cccd6750@o4510262603481088.ingest.us.sentry.io/4510467689218048',
-			enabled: import.meta.env.PROD,
+			enabled: false,
 			replaysSessionSampleRate: 0.1,
 			replaysOnErrorSampleRate: 1.0,
 			sendDefaultPii: true,

apps/explorer/src/router.tsx

@@ -0,0 +1,20 @@
+import { env } from 'cloudflare:workers'
+import { createFileRoute } from '@tanstack/react-router'
+import { Handler, Kv } from 'tempo.ts/server'
+
+export const Route = createFileRoute('/api/webauthn/$')({
+	server: {
+		handlers: {
+			GET: ({ request }) => {
+				const url = new URL(request.url)
+				const path = url.pathname
+
+				console.info('webauthn request', path)
+				return Handler.keyManager({
+					path: '/api/webauthn',
+					kv: Kv.cloudflare(env.EXPLORER_PASSKEY_STORE),
+				}).fetch(request)
+			},
+		},
+	},
+})

apps/explorer/src/routes/api/webauthn/$.ts

@@ -13,7 +13,7 @@ export const DEFAULT_TESTNET_RPC_URL = 'https://rpc-orchestra.testnet.tempo.xyz'
 export const queryClient: QueryClient = new QueryClient({
 	defaultOptions: {
 		queries: {
-			gcTime: 1000 * 60 * 60 * 24, // 24 hours
+			gcTime: 1_000 * 60 * 60 * 24, // 24 hours
 			queryKeyHashFn: Json.stringify,
 			refetchOnReconnect: () => !queryClient.isMutating(),
 			retry: 0,
@@ -48,7 +48,7 @@ export const config = createConfig({
 	],
 	connectors: [
 		webAuthn({
-			keyManager: KeyManager.http('psstkey'),
+			keyManager: KeyManager.http(`${__BASE_URL__}/api/webauthn`),
 		}),
 	],
 	batch: { multicall: false },

apps/explorer/src/wagmi.config.ts

@@ -10,6 +10,8 @@ import vitePluginChromiumDevTools from 'vite-plugin-devtools-json'
 
 const [, , , ...args] = process.argv
 
+const SENTRY_OFF_TEMPORARILY = true
+
 export default defineConfig((config) => {
 	const env = loadEnv(config.mode, process.cwd(), '')
 	const showDevtools = env.VITE_ENABLE_DEVTOOLS !== 'false'
@@ -45,6 +47,7 @@ export default defineConfig((config) => {
 			showDevtools && devtools(),
 			showDevtools && vitePluginChromiumDevTools(),
 			config.mode === 'production' &&
+				!SENTRY_OFF_TEMPORARILY &&
 				sentryVitePlugin({
 					org: 'tempoxyz',
 					telemetry: false,
@@ -67,6 +70,7 @@ export default defineConfig((config) => {
 		],
 		server: {
 			port,
+			cors: config.mode === 'development' ? true : undefined,
 			allowedHosts: config.mode === 'development' ? true : undefined,
 		},
 		build: {

apps/explorer/vite.config.ts

@@ -13,6 +13,13 @@
 		"mode": "smart"
 	},
 	"keep_vars": true,
+	"kv_namespaces": [
+		{
+			"remote": true,
+			"binding": "EXPLORER_PASSKEY_STORE",
+			"id": "9d662ec25881455da0d3766e9d38e15d"
+		}
+	],
 	"observability": {
 		"enabled": true,
 		"logs": {

apps/explorer/wrangler.jsonc

@@ -0,0 +1,21 @@
+set dotenv-load := true
+set positional-arguments := true
+
+# generate random # between 1024 and 49151
+@random-port:
+  echo $((RANDOM % 49151 + 1024))
+
+# utilities
+[group('Utilities')]
+@lowercase value:
+  @echo {{ lowercase(value) }}
+
+# kill process on port
+[group('utilities')]
+@kill-port port:
+  lsof -ti :{{ port }} | xargs kill -9 2>/dev/null || true
+
+# run workspace in dev mode
+@dev workspace:
+  just kill-port 42069
+  cd apps/{{ lowercase(workspace) }} && pnpm node --run dev -- --port $(just random-port)