fix: Cleanup Error display and optimize requests (#872)

Cleaned up error display to not show full html
optimized requests a bit more to potentially avoid timeouts

Author: alexrisch

apps/explorer/src/comps/AddressCsvExportButton.tsx

@@ -60,21 +60,7 @@ export function AddressCsvExportButton(
 			})
 
 			if (!response.ok) {
-				let message =
-					kind === 'balances'
-						? 'Failed to export balances.'
-						: 'Failed to export transactions.'
-
-				const contentType = response.headers.get('Content-Type') ?? ''
-				if (contentType.includes('application/json')) {
-					const payload = (await response.json()) as { error?: string }
-					if (payload.error) message = payload.error
-				} else {
-					const text = (await response.text()).trim()
-					if (text) message = text
-				}
-
-				throw new Error(message)
+				throw new Error('Error')
 			}
 
 			const blob = await response.blob()
@@ -94,7 +80,7 @@ export function AddressCsvExportButton(
 				URL.revokeObjectURL(objectUrl)
 			}
 		} catch (error) {
-			setError(error instanceof Error ? error.message : 'CSV export failed.')
+			setError(error instanceof Error ? error.message : 'Error')
 		} finally {
 			setIsExporting(false)
 		}
@@ -113,7 +99,9 @@ export function AddressCsvExportButton(
 				}
 				className={cx(
 					'flex size-[28px] items-center justify-center rounded-[6px] border text-[12px] transition-colors',
-					'border-transparent text-tertiary hover:text-secondary hover:bg-base-alt',
+					error
+						? 'border-transparent text-red-400 hover:text-red-300 hover:bg-base-alt'
+						: 'border-transparent text-tertiary hover:text-secondary hover:bg-base-alt',
 					isExporting && 'cursor-default opacity-60',
 					!isExporting && 'cursor-pointer',
 				)}
@@ -125,7 +113,7 @@ export function AddressCsvExportButton(
 			>
 				<DownloadIcon className="size-[14px]" />
 			</button>
-			{error && <span className="text-[11px] text-red-400">{error}</span>}
+			{error && <span className="text-[11px] text-red-400">Error</span>}
 		</div>
 	)
 }

apps/explorer/src/lib/server/address-history.ts

@@ -214,9 +214,11 @@ export async function fetchAddressHistoryData(params: {
 	chainId: number
 	searchParams: HistoryRequestParameters
 	maxLimit?: number | undefined
+	includeKnownEvents?: boolean | undefined
 }): Promise<HistoryResponse> {
 	const { address, chainId, searchParams } = params
 	const maxLimit = params.maxLimit ?? MAX_LIMIT
+	const includeKnownEvents = params.includeKnownEvents ?? true
 	const config = getWagmiConfig()
 
 	const include =
@@ -426,6 +428,65 @@ export async function fetchAddressHistoryData(params: {
 		}
 	}
 
+	const finalHashValues = finalHashes.map((entry) => entry.hash)
+
+	const [receiptRows, txRows] = await Promise.all([
+		txOnlyPageResult
+			? Promise.resolve(txOnlyPageResult.receiptRows)
+			: fetchAddressReceiptRowsByHashes(chainId, finalHashValues),
+		txOnlyPageResult
+			? Promise.resolve(txOnlyPageResult.txRows)
+			: fetchAddressHistoryTxDetailsByHashes(chainId, finalHashValues),
+	])
+
+	const receiptMap = new Map(
+		receiptRows.map((row) => [row.tx_hash, row] as const),
+	)
+	const txMap = new Map(txRows.map((row) => [row.hash, row] as const))
+
+	if (!includeKnownEvents) {
+		const transactions = finalHashes.map((hashEntry) => {
+			const receipt = receiptMap.get(hashEntry.hash)
+			const tx = txMap.get(hashEntry.hash)
+
+			const fromSource = tx?.from ?? hashEntry.from ?? receipt?.from ?? address
+			const toSource = tx?.to ?? hashEntry.to ?? receipt?.to ?? null
+			const valueSource = tx?.value ?? hashEntry.value ?? 0n
+			const blockNumberSource =
+				receipt?.block_num ?? tx?.block_num ?? hashEntry.block_num
+			const timestampSource =
+				receipt?.block_timestamp ?? tx?.block_timestamp ?? 0
+			const status = toHistoryStatus(receipt?.status)
+
+			return {
+				hash: hashEntry.hash,
+				blockNumber: toHexQuantity(blockNumberSource),
+				timestamp: toFiniteTimestamp(timestampSource),
+				from: Address.checksum(fromSource as Address.Address),
+				to: toSource ? Address.checksum(toSource as Address.Address) : null,
+				value: toHexQuantity(valueSource),
+				status,
+				gasUsed: toHexQuantity(receipt?.gas_used),
+				effectiveGasPrice: toHexQuantity(receipt?.effective_gas_price),
+				knownEvents: [],
+			}
+		})
+
+		const finalTransactions = after
+			? transactions.filter((transaction) => transaction.timestamp >= after)
+			: transactions
+
+		return {
+			transactions: finalTransactions,
+			total: after ? finalTransactions.length : totalCount,
+			offset,
+			limit,
+			hasMore: after ? false : hasMore,
+			countCapped: after ? false : countCapped,
+			error: null,
+		}
+	}
+
 	if (isTxOnlySource) {
 		if (!txOnlyPageResult) {
 			throw new Error('Missing tx-only history page result')
@@ -434,8 +495,8 @@ export async function fetchAddressHistoryData(params: {
 		const transactions = await buildTxOnlyTransactions({
 			address,
 			hashes: finalHashes,
-			txRows: txOnlyPageResult.txRows,
-			receiptRows: txOnlyPageResult.receiptRows,
+			txRows,
+			receiptRows,
 			logRows: txOnlyPageResult.logRows,
 		})
 
@@ -450,19 +511,11 @@ export async function fetchAddressHistoryData(params: {
 		}
 	}
 
-	const finalHashValues = finalHashes.map((entry) => entry.hash)
-
-	const [receiptRows, txRows, logRows, transferRows] = await Promise.all([
-		fetchAddressReceiptRowsByHashes(chainId, finalHashValues),
-		fetchAddressHistoryTxDetailsByHashes(chainId, finalHashValues),
+	const [logRows, transferRows] = await Promise.all([
 		fetchAddressLogRowsByTxHashes(chainId, finalHashValues),
 		fetchAddressTransferRowsByTxHashes(chainId, finalHashValues),
 	])
 
-	const receiptMap = new Map(
-		receiptRows.map((row) => [row.tx_hash, row] as const),
-	)
-	const txMap = new Map(txRows.map((row) => [row.hash, row] as const))
 	const logsByHash = new Map<Hex.Hex, Log[]>()
 
 	for (const row of logRows) {
@@ -658,6 +711,7 @@ export async function fetchAddressHistoryExportRows(params: {
 				limit: pageLimit,
 			},
 			maxLimit: CSV_EXPORT_PAGE_SIZE,
+			includeKnownEvents: false,
 		})
 
 		if (page.transactions.length === 0) break