fix: /tx trace tab loading (#331)

`traceQueryOptions()` now calls the RPC directly rather than via the API,
which was failing during SSR because of `__BASE_URL__`.

Author: bpierre

apps/explorer/src/lib/queries/trace.ts

@@ -1,23 +1,64 @@
 import { queryOptions } from '@tanstack/react-query'
-import type { TraceData } from '#routes/api/tx/trace/$hash'
+import type { Address, Hex } from 'ox'
+import { getConfig } from '#wagmi.config'
 
-export type {
-	AccountState,
-	CallTrace,
-	PrestateDiff,
-	TraceData,
-} from '#routes/api/tx/trace/$hash'
+export interface CallTrace {
+	type: 'CALL' | 'DELEGATECALL' | 'STATICCALL' | 'CREATE' | 'CREATE2'
+	from: Address.Address
+	to?: Address.Address
+	gas: Hex.Hex
+	gasUsed: Hex.Hex
+	input: Hex.Hex
+	output?: Hex.Hex
+	value?: Hex.Hex
+	error?: string
+	revertReason?: string
+	calls?: CallTrace[]
+}
+
+export interface AccountState {
+	balance?: Hex.Hex
+	nonce?: number
+	code?: Hex.Hex
+	storage?: Record<Hex.Hex, Hex.Hex>
+}
+
+export interface PrestateDiff {
+	pre: Record<Address.Address, AccountState>
+	post: Record<Address.Address, AccountState>
+}
+
+export interface TraceData {
+	trace: CallTrace | null
+	prestate: PrestateDiff | null
+}
+
+export async function fetchTraceData(hash: Hex.Hex): Promise<TraceData> {
+	const client = getConfig().getClient()
+	const [trace, prestate] = await Promise.all([
+		(
+			client.request({
+				method: 'debug_traceTransaction',
+				params: [hash, { tracer: 'callTracer' }],
+			} as Parameters<typeof client.request>[0]) as Promise<CallTrace>
+		).catch(() => null),
+		(
+			client.request({
+				method: 'debug_traceTransaction',
+				params: [
+					hash,
+					{ tracer: 'prestateTracer', tracerConfig: { diffMode: true } },
+				],
+			} as Parameters<typeof client.request>[0]) as Promise<PrestateDiff>
+		).catch(() => null),
+	])
+	return { trace, prestate }
+}
 
 export function traceQueryOptions(params: { hash: string }) {
 	return queryOptions({
 		queryKey: ['trace', params.hash],
-		queryFn: async (): Promise<TraceData> => {
-			const url = `${__BASE_URL__}/api/tx/trace/${params.hash}`
-			const response = await fetch(url)
-			const data: TraceData & { error?: string } = await response.json()
-			if (data.error) throw new Error(data.error)
-			return data
-		},
+		queryFn: () => fetchTraceData(params.hash as Hex.Hex),
 		staleTime: Infinity,
 	})
 }

apps/explorer/src/routes/api/tx/trace/$hash.ts

@@ -1,76 +1,26 @@
 import { createFileRoute } from '@tanstack/react-router'
 import { json } from '@tanstack/react-start'
-import type { Address, Hex } from 'ox'
-import type { Chain, Client, Transport } from 'viem'
+import {
+	fetchTraceData,
+	type TraceData,
+} from '#lib/queries/trace'
 import { zHash } from '#lib/zod'
-import { getConfig } from '#wagmi.config'
 
-export interface CallTrace {
-	type: 'CALL' | 'DELEGATECALL' | 'STATICCALL' | 'CREATE' | 'CREATE2'
-	from: Address.Address
-	to?: Address.Address
-	gas: Hex.Hex
-	gasUsed: Hex.Hex
-	input: Hex.Hex
-	output?: Hex.Hex
-	value?: Hex.Hex
-	error?: string
-	revertReason?: string
-	calls?: CallTrace[]
-}
-
-export interface AccountState {
-	balance?: Hex.Hex
-	nonce?: number
-	code?: Hex.Hex
-	storage?: Record<Hex.Hex, Hex.Hex>
-}
-
-export interface PrestateDiff {
-	pre: Record<Address.Address, AccountState>
-	post: Record<Address.Address, AccountState>
-}
-
-export interface TraceData {
-	trace: CallTrace | null
-	prestate: PrestateDiff | null
-}
-
-async function traceTransaction(
-	client: Client<Transport, Chain>,
-	hash: Hex.Hex,
-): Promise<CallTrace | null> {
-	return client.request({
-		method: 'debug_traceTransaction',
-		params: [hash, { tracer: 'callTracer' }],
-	} as Parameters<typeof client.request>[0])
-}
-
-async function tracePrestate(
-	client: Client<Transport, Chain>,
-	hash: Hex.Hex,
-): Promise<PrestateDiff | null> {
-	return client.request({
-		method: 'debug_traceTransaction',
-		params: [
-			hash,
-			{ tracer: 'prestateTracer', tracerConfig: { diffMode: true } },
-		],
-	} as Parameters<typeof client.request>[0])
-}
+export type {
+	AccountState,
+	CallTrace,
+	PrestateDiff,
+	TraceData,
+} from '#lib/queries/trace'
 
 export const Route = createFileRoute('/api/tx/trace/$hash')({
 	server: {
 		handlers: {
 			GET: async ({ params }) => {
 				try {
-					const client = getConfig().getClient()
 					const hash = zHash().parse(params.hash)
-					const [trace, prestate] = await Promise.all([
-						traceTransaction(client, hash).catch(() => null),
-						tracePrestate(client, hash).catch(() => null),
-					])
-					return json<TraceData>({ trace, prestate })
+					const traceData = await fetchTraceData(hash)
+					return json<TraceData>(traceData)
 				} catch (error) {
 					console.error('Trace error:', error)
 					return json({ error: 'Failed to fetch trace' }, { status: 500 })