feat: passkey support in explorer

o-az · o-az · commit 82306475fcd7 · 2025-12-18T20:27:30.000-08:00
diff --git a/apps/explorer/src/lib/queries/blocks.ts b/apps/explorer/src/lib/queries/blocks.ts
@@ -4,7 +4,7 @@ import type { Block } from 'viem'
 import { getBlock, getTransactionReceipt } from 'wagmi/actions'
 import { type KnownEvent, parseKnownEvents } from '#lib/domain/known-events'
 import * as Tip20 from '#lib/domain/tip20.ts'
-import { getConfig } from '#wagmi.config.ts'
+import { config as wagmiConfig } from '#wagmi.config.ts'
 
 export const BLOCKS_PER_PAGE = 12
 
@@ -19,8 +19,6 @@ export function blocksQueryOptions(page: number) {
 	return queryOptions({
 		queryKey: ['blocks-loader', page],
 		queryFn: async () => {
-			const wagmiConfig = getConfig()
-
 			const latestBlock = await getBlock(wagmiConfig)
 			const latestBlockNumber = latestBlock.number
 
@@ -57,7 +55,6 @@ export function blockDetailQueryOptions(
 	return queryOptions({
 		queryKey: ['block-detail', blockRef, page],
 		queryFn: async () => {
-			const wagmiConfig = getConfig()
 			const block = await getBlock(wagmiConfig, {
 				includeTransactions: true,
 				...(blockRef.kind === 'hash'
@@ -72,10 +69,8 @@ export function blockDetailQueryOptions(
 				startIndex + TRANSACTIONS_PER_PAGE,
 			)
 
-			const knownEventsByHash = await fetchKnownEventsForTransactions(
-				pageTransactions,
-				wagmiConfig,
-			)
+			const knownEventsByHash =
+				await fetchKnownEventsForTransactions(pageTransactions)
 
 			return {
 				blockRef,
@@ -90,7 +85,6 @@ export function blockDetailQueryOptions(
 
 async function fetchKnownEventsForTransactions(
 	transactions: BlockTransaction[],
-	wagmiConfig: ReturnType<typeof getConfig>,
 ): Promise<Record<Hex.Hex, KnownEvent[]>> {
 	const entries = await Promise.all(
 		transactions.map(async (transaction) => {
diff --git a/apps/explorer/src/lib/queries/tx.ts b/apps/explorer/src/lib/queries/tx.ts
@@ -4,7 +4,7 @@ import { getBlock, getTransaction, getTransactionReceipt } from 'wagmi/actions'
 import { parseKnownEvent, parseKnownEvents } from '#lib/domain/known-events'
 import { getFeeBreakdown } from '#lib/domain/receipt'
 import * as Tip20 from '#lib/domain/tip20'
-import { getConfig } from '#wagmi.config'
+import { config } from '#wagmi.config'
 
 export function txQueryOptions(params: { hash: Hex.Hex }) {
 	return queryOptions({
@@ -14,7 +14,6 @@ export function txQueryOptions(params: { hash: Hex.Hex }) {
 }
 
 async function fetchTxData(params: { hash: Hex.Hex }) {
-	const config = getConfig()
 	const receipt = await getTransactionReceipt(config, { hash: params.hash })
 
 	const [block, transaction, getTokenMetadata] = await Promise.all([
diff --git a/apps/explorer/src/routes/_layout/address/$address.tsx b/apps/explorer/src/routes/_layout/address/$address.tsx
@@ -66,7 +66,7 @@ import {
 	type TransactionsData,
 	transactionsQueryOptions,
 } from '#lib/queries/account.ts'
-import { config, getConfig } from '#wagmi.config.ts'
+import { config } from '#wagmi.config.ts'
 
 async function fetchAddressTotalValue(address: Address.Address) {
 	const response = await fetch(
@@ -107,10 +107,9 @@ function useBatchTransactionData(
 		queries: hashes.map((hash) => ({
 			queryKey: ['tx-data-batch', viewer, hash],
 			queryFn: async (): Promise<TransactionData | null> => {
-				const cfg = getConfig()
-				const receipt = await getTransactionReceipt(cfg, { hash })
+				const receipt = await getTransactionReceipt(config, { hash })
 				const [block, transaction, getTokenMetadata] = await Promise.all([
-					getBlock(cfg, { blockHash: receipt.blockHash }),
+					getBlock(config, { blockHash: receipt.blockHash }),
 					getTransaction(config, { hash: receipt.transactionHash }),
 					Tip20.metadataFromLogs(receipt.logs),
 				])
diff --git a/apps/explorer/src/routes/_layout/receipt/$hash.tsx b/apps/explorer/src/routes/_layout/receipt/$hash.tsx
@@ -17,17 +17,16 @@ import {
 	formatEventForOgServer,
 	OG_BASE_URL,
 } from '#lib/og'
-import { getConfig } from '#wagmi.config'
+import { config } from '#wagmi.config'
 
-function receiptDetailQueryOptions(params: { hash: Hex.Hex; rpcUrl?: string }) {
+function receiptDetailQueryOptions(params: { hash: Hex.Hex }) {
 	return queryOptions({
-		queryKey: ['receipt-detail', params.hash, params.rpcUrl],
+		queryKey: ['receipt-detail', params.hash],
 		queryFn: () => fetchReceiptData(params),
 	})
 }
 
-async function fetchReceiptData(params: { hash: Hex.Hex; rpcUrl?: string }) {
-	const config = getConfig({ rpcUrl: params.rpcUrl })
+async function fetchReceiptData(params: { hash: Hex.Hex }) {
 	const receipt = await getTransactionReceipt(config, {
 		hash: params.hash,
 	})
@@ -142,12 +141,11 @@ export const Route = createFileRoute('/_layout/receipt/$hash')({
 						return 'text/plain'
 				})()
 
-				const rpcUrl = url.searchParams.get('r') ?? undefined
 				const hash = parseHashFromParams(params)
 
 				if (type === 'text/plain') {
 					if (!hash) return new Response('Not found', { status: 404 })
-					const data = await fetchReceiptData({ hash, rpcUrl })
+					const data = await fetchReceiptData({ hash })
 					const text = TextRenderer.render(data)
 					return new Response(text, {
 						headers: {
@@ -166,10 +164,7 @@ export const Route = createFileRoute('/_layout/receipt/$hash')({
 				if (type === 'application/json') {
 					if (!hash)
 						return Response.json({ error: 'Not found' }, { status: 404 })
-					const { lineItems, receipt } = await fetchReceiptData({
-						hash,
-						rpcUrl,
-					})
+					const { lineItems, receipt } = await fetchReceiptData({ hash })
 					return Response.json(
 						JSON.parse(Json.stringify({ lineItems, receipt })),
 					)
diff --git a/apps/explorer/src/routes/api/address/total-value/$address.ts b/apps/explorer/src/routes/api/address/total-value/$address.ts
@@ -8,7 +8,7 @@ import { Abis } from 'viem/tempo'
 import { readContract } from 'wagmi/actions'
 
 import { zAddress } from '#lib/zod.ts'
-import { config, getConfig } from '#wagmi.config.ts'
+import { config } from '#wagmi.config.ts'
 
 const IS = IDX.IndexSupply.create({
 	apiKey: env.INDEXER_API_KEY,
@@ -73,7 +73,7 @@ export const Route = createFileRoute('/api/address/total-value/$address')({
 						(await Promise.all(
 							tokensToFetch.map(
 								(row) =>
-									readContract(getConfig(), {
+									readContract(config, {
 										address: row.token_address as Address.Address,
 										abi: Abis.tip20,
 										functionName: 'decimals',
diff --git a/apps/explorer/src/routes/api/tx/balance-changes/$hash.ts b/apps/explorer/src/routes/api/tx/balance-changes/$hash.ts
@@ -8,7 +8,7 @@ import { Abis } from 'viem/tempo'
 import * as z from 'zod/mini'
 
 import { zHash } from '#lib/zod'
-import { getConfig } from '#wagmi.config'
+import { config } from '#wagmi.config'
 
 const DEFAULT_LIMIT = 20
 const MAX_LIMIT = 100
@@ -74,7 +74,7 @@ function computeBalanceChanges(logs: Log[]) {
 }
 
 async function getBalanceAtBlock(
-	client: ReturnType<ReturnType<typeof getConfig>['getClient']>,
+	client: ReturnType<typeof config.getClient>,
 	token: Address.Address,
 	account: Address.Address,
 	blockNumber: bigint,
@@ -93,7 +93,7 @@ async function getBalanceAtBlock(
 }
 
 async function getTokenMetadata(
-	client: ReturnType<ReturnType<typeof getConfig>['getClient']>,
+	client: ReturnType<typeof config.getClient>,
 	token: Address.Address,
 ) {
 	const [decimals, symbol] = await Promise.all([
@@ -118,7 +118,6 @@ export async function fetchBalanceChanges(params: {
 	offset: number
 }): Promise<BalanceChangesData> {
 	const { hash, limit, offset } = params
-	const config = getConfig()
 	const client = config.getClient()
 
 	const receipt = await getTransactionReceipt(client, { hash })
diff --git a/apps/explorer/src/routes/api/tx/trace/$hash.ts b/apps/explorer/src/routes/api/tx/trace/$hash.ts
@@ -3,7 +3,7 @@ import { json } from '@tanstack/react-start'
 import type { Address, Hex } from 'ox'
 import type { Chain, Client, Transport } from 'viem'
 import { zHash } from '#lib/zod'
-import { getConfig } from '#wagmi.config'
+import { config } from '#wagmi.config'
 
 export interface CallTrace {
 	type: 'CALL' | 'DELEGATECALL' | 'STATICCALL' | 'CREATE' | 'CREATE2'
@@ -64,7 +64,7 @@ export const Route = createFileRoute('/api/tx/trace/$hash')({
 		handlers: {
 			GET: async ({ params }) => {
 				try {
-					const client = getConfig().getClient()
+					const client = config.getClient()
 					const hash = zHash().parse(params.hash)
 					const [trace, prestate] = await Promise.all([
 						traceTransaction(client, hash).catch(() => null),
diff --git a/apps/explorer/src/wagmi.config.ts b/apps/explorer/src/wagmi.config.ts
@@ -1,57 +1,68 @@
 import { createAsyncStoragePersister } from '@tanstack/query-async-storage-persister'
-import { QueryClient } from '@tanstack/react-query'
-import type { OneOf } from 'viem'
-import { tempoLocalnet, tempoTestnet } from 'viem/chains'
+import { MutationCache, QueryCache, QueryClient } from '@tanstack/react-query'
+import { Json } from 'ox'
+import { KeyManager, webAuthn } from 'tempo.ts/wagmi'
 import { createConfig, deserialize, http, serialize, webSocket } from 'wagmi'
-import { hashFn } from 'wagmi/query'
-
-// biome-ignore lint/suspicious/noExplicitAny: TODO
-type TODO = any
+import { tempoLocalnet, tempoTestnet } from 'wagmi/chains'
 
 const browser = typeof window !== 'undefined'
 
-export const DEFAULT_TESTNET_RPC_URL = 'https://rpc-orchestra.testnet.tempo.xyz'
 export const DEFAULT_TESTNET_WS_URL = 'wss://rpc-orchestra.testnet.tempo.xyz'
+export const DEFAULT_TESTNET_RPC_URL = 'https://rpc-orchestra.testnet.tempo.xyz'
 
-export const queryClient = new QueryClient({
+export const queryClient: QueryClient = new QueryClient({
 	defaultOptions: {
 		queries: {
-			staleTime: 60 * 1_000, // needed for SSR
-			queryKeyHashFn: hashFn,
-			refetchOnWindowFocus: false,
-			gcTime: 1_000 * 60 * 60 * 24, // 24 hours
+			gcTime: 1000 * 60 * 60 * 24, // 24 hours
+			queryKeyHashFn: Json.stringify,
+			refetchOnReconnect: () => !queryClient.isMutating(),
+			retry: 0,
 		},
 	},
+	mutationCache: new MutationCache({
+		onError: (error) => {
+			if (import.meta.env.MODE !== 'development') return
+			console.error(error)
+		},
+	}),
+	queryCache: new QueryCache({
+		onError: (error, query) => {
+			if (import.meta.env.MODE !== 'development') return
+			if (query.state.data !== undefined) console.error('[tsq]', error)
+		},
+	}),
 })
 
 export const persister = createAsyncStoragePersister({
 	// Cache key includes build version - automatically invalidates on new deploys
-	key: `tempo-query-cache-${__BUILD_VERSION__}`,
 	serialize,
-	storage: browser ? window.localStorage : undefined,
 	deserialize,
+	key: `tempo-query-cache-${__BUILD_VERSION__}`,
+	storage: browser ? window.localStorage : undefined,
 })
 
-const chain =
-	import.meta.env.VITE_LOCALNET === 'true' ? tempoLocalnet : tempoTestnet
+export const config = createConfig({
+	ssr: true,
+	chains: [
+		import.meta.env.VITE_LOCALNET === 'true' ? tempoLocalnet : tempoTestnet,
+	],
+	connectors: [
+		webAuthn({
+			keyManager: KeyManager.http('psstkey'),
+		}),
+	],
+	batch: { multicall: false },
+	multiInjectedProviderDiscovery: false,
+	transports: {
+		[tempoTestnet.id]: browser
+			? webSocket(DEFAULT_TESTNET_WS_URL)
+			: http(DEFAULT_TESTNET_RPC_URL),
+		[tempoLocalnet.id]: http(undefined, { batch: true }),
+	},
+})
 
-export function getConfig(
-	parameters: OneOf<{ rpcUrl?: string | undefined }> = {},
-) {
-	const { rpcUrl } = parameters
-	return createConfig({
-		chains: [chain],
-		ssr: true,
-		batch: { multicall: false },
-		transports: {
-			[tempoTestnet.id]: browser
-				? webSocket(DEFAULT_TESTNET_WS_URL)
-				: http(rpcUrl ?? DEFAULT_TESTNET_RPC_URL),
-			[tempoLocalnet.id]: http(undefined, {
-				batch: true,
-			}),
-		},
-	})
+declare module 'wagmi' {
+	interface Register {
+		config: typeof config
+	}
 }
-
-export const config = getConfig() as TODO
