fix(explorer): speed up address page loading (#1159)

* fix(explorer): speed up address page loading

* fix(explorer): avoid token probes for accounts

* fix(explorer): defer account type enrichment

* fix(explorer): load address history after hydration

Author: decofe

apps/explorer/src/comps/TxEventDescription.tsx

@@ -64,28 +64,26 @@ function ContractCallPart(props: {
 	const selector = Hex.slice(input, 0, 4)
 	const isViewingAsContract = seenAs && isAddressEqual(seenAs, address)
 
-	const { data: functionName, isLoading: isLoadingAbi } = useQuery({
-		queryKey: ['contract-call-function', address, selector],
+	const { data: abi, isLoading: isLoadingAbi } = useQuery({
+		queryKey: ['contract-call-abi', address.toLowerCase()],
 		queryFn: async () => {
 			// Try known ABI first
-			let abi = getContractAbi(address)
+			const knownAbi = getContractAbi(address)
+			if (knownAbi) return knownAbi
 
 			// Fall back to extracting from bytecode
-			if (!abi) {
-				abi = await extractContractAbi(address)
-			}
-
-			if (!abi) return null
-
-			try {
-				const decoded = decodeFunctionData({ abi, data: input })
-				return decoded.functionName
-			} catch {
-				return null
-			}
+			return extractContractAbi(address)
 		},
 		staleTime: Number.POSITIVE_INFINITY,
 	})
+	const functionName = React.useMemo(() => {
+		if (!abi) return null
+		try {
+			return decodeFunctionData({ abi, data: input }).functionName
+		} catch {
+			return null
+		}
+	}, [abi, input])
 
 	// Fall back to 4byte directory lookup
 	const { data: signature, isFetched: isSignatureFetched } = useLookupSignature(

apps/explorer/src/lib/domain/contracts.ts

@@ -883,13 +883,29 @@ const defaultSignatureLookup = new loaders.MultiSignatureLookup([
 export async function lookupSignature(
 	selector: Hex.Hex,
 ): Promise<string | null> {
-	const signatures =
-		selector.length === 10
-			? await defaultSignatureLookup.loadFunctions(selector)
-			: await defaultSignatureLookup.loadEvents(selector)
-	return signatures[0] ?? null
+	const key = selector.toLowerCase() as Hex.Hex
+	const cached = signatureLookupCache.get(key)
+	if (cached) return cached
+
+	const lookup = (async () => {
+		const signatures =
+			key.length === 10
+				? await defaultSignatureLookup.loadFunctions(key)
+				: await defaultSignatureLookup.loadEvents(key)
+		return signatures[0] ?? null
+	})()
+	signatureLookupCache.set(key, lookup)
+
+	try {
+		return await lookup
+	} catch (error) {
+		signatureLookupCache.delete(key)
+		throw error
+	}
 }
 
+const signatureLookupCache = new Map<Hex.Hex, Promise<string | null>>()
+
 class TempoABILoader {
 	readonly name = 'TempoABILoader'
 	readonly chainId: number

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

@@ -96,10 +96,61 @@ export function lookupSignatureQueryOptions(args: { selector?: Hex }) {
 		gcTime: Number.POSITIVE_INFINITY,
 		staleTime: Number.POSITIVE_INFINITY,
 		queryKey: ['lookup-signature', selector],
-		queryFn: () => lookupSignature(selector as Hex),
+		queryFn: () => lookupSignatureBatched(selector as Hex),
 	})
 }
 
+type SignatureRequest = {
+	resolve: (signature: string | null) => void
+	reject: (error: unknown) => void
+}
+
+let pendingSignatureRequests = new Map<Hex, SignatureRequest[]>()
+let signatureBatchTimer: ReturnType<typeof setTimeout> | undefined
+
+/**
+ * Coalesce signature lookups started during the same render into one request.
+ * Server-side callers use the in-process lookup directly; browser callers use
+ * the batch endpoint so transaction lists do not fan out to OpenChain.
+ */
+function lookupSignatureBatched(selector: Hex): Promise<string | null> {
+	if (typeof window === 'undefined') return lookupSignature(selector)
+
+	return new Promise((resolve, reject) => {
+		const requests = pendingSignatureRequests.get(selector) ?? []
+		requests.push({ resolve, reject })
+		pendingSignatureRequests.set(selector, requests)
+
+		if (signatureBatchTimer) return
+		signatureBatchTimer = setTimeout(flushSignatureBatch, 0)
+	})
+}
+
+async function flushSignatureBatch(): Promise<void> {
+	const requests = pendingSignatureRequests
+	pendingSignatureRequests = new Map()
+	signatureBatchTimer = undefined
+
+	try {
+		const response = await fetch(getApiUrl('/api/abi/batch'), {
+			method: 'POST',
+			headers: { 'Content-Type': 'application/json' },
+			body: JSON.stringify({ addresses: [], selectors: [...requests.keys()] }),
+		})
+		if (!response.ok) throw new Error('Failed to fetch signature batch')
+
+		const data = (await response.json()) as BatchAbiResponse
+		for (const [selector, callbacks] of requests) {
+			const signature = data.signatures[selector.toLowerCase()] ?? null
+			for (const callback of callbacks) callback.resolve(signature)
+		}
+	} catch (error) {
+		for (const callbacks of requests.values()) {
+			for (const callback of callbacks) callback.reject(error)
+		}
+	}
+}
+
 export function useLookupSignature(args: {
 	enabled?: boolean
 	selector?: Hex