feat: CSV export (#871)

* feat: CSV export

Adds CSV export
Fixes issue with kv namespace bindings
Added rate limiters

* Add Durable objects to individual envs

Author: alexrisch

apps/explorer/src/comps/AddressCsvExportButton.tsx

@@ -0,0 +1,147 @@
+import type { Address } from 'ox'
+import * as React from 'react'
+
+import { cx } from '#lib/css'
+import { getApiUrl } from '#lib/env.ts'
+import type { HistorySources } from '#lib/queries/account'
+import DownloadIcon from '~icons/lucide/download'
+
+function getDownloadFilename(
+	contentDisposition: string | null,
+	fallback: string,
+): string {
+	if (!contentDisposition) return fallback
+
+	const match = /filename="([^"]+)"/.exec(contentDisposition)
+	return match?.[1] ?? fallback
+}
+
+export function AddressCsvExportButton(
+	props: AddressCsvExportButton.Props,
+): React.JSX.Element {
+	const { address, kind } = props
+	const status = kind === 'transactions' ? props.status : undefined
+	const include = kind === 'transactions' ? props.include : 'all'
+	const after = kind === 'transactions' ? props.after : undefined
+	const sources = kind === 'transactions' ? props.sources : []
+	const [isExporting, setIsExporting] = React.useState(false)
+	const [error, setError] = React.useState<string | null>(null)
+
+	const handleExport = React.useCallback(async () => {
+		setIsExporting(true)
+		setError(null)
+
+		try {
+			const searchParams = new URLSearchParams({ format: 'csv' })
+			searchParams.set('sort', 'desc')
+
+			let url: URL
+			let fallbackFilename: string
+
+			if (kind === 'balances') {
+				url = getApiUrl(`/api/address/balances/${address}`)
+				fallbackFilename = `balances-${address.toLowerCase()}.csv`
+			} else {
+				url = getApiUrl(`/api/address/history/${address}`)
+				fallbackFilename = `transactions-${address.toLowerCase()}.csv`
+
+				if (status) searchParams.set('status', status)
+				if (include !== 'all') searchParams.set('include', include)
+				if (after) searchParams.set('after', String(after))
+				if (sources.length > 0) {
+					searchParams.set('sources', sources.join(','))
+				}
+			}
+
+			url.search = searchParams.toString()
+
+			const response = await fetch(url, {
+				headers: { Accept: 'text/csv' },
+			})
+
+			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)
+			}
+
+			const blob = await response.blob()
+			const objectUrl = URL.createObjectURL(blob)
+
+			try {
+				const anchor = document.createElement('a')
+				anchor.href = objectUrl
+				anchor.download = getDownloadFilename(
+					response.headers.get('Content-Disposition'),
+					fallbackFilename,
+				)
+				document.body.appendChild(anchor)
+				anchor.click()
+				document.body.removeChild(anchor)
+			} finally {
+				URL.revokeObjectURL(objectUrl)
+			}
+		} catch (error) {
+			setError(error instanceof Error ? error.message : 'CSV export failed.')
+		} finally {
+			setIsExporting(false)
+		}
+	}, [address, after, include, kind, sources, status])
+
+	return (
+		<div className="flex flex-col gap-[4px] min-[800px]:items-end">
+			<button
+				type="button"
+				onClick={handleExport}
+				disabled={isExporting}
+				aria-label={
+					kind === 'balances'
+						? 'Export balances as CSV'
+						: 'Export transactions as CSV'
+				}
+				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',
+					isExporting && 'cursor-default opacity-60',
+					!isExporting && 'cursor-pointer',
+				)}
+				title={
+					kind === 'balances'
+						? 'Export balances as CSV'
+						: 'Export transactions as CSV'
+				}
+			>
+				<DownloadIcon className="size-[14px]" />
+			</button>
+			{error && <span className="text-[11px] text-red-400">{error}</span>}
+		</div>
+	)
+}
+
+export declare namespace AddressCsvExportButton {
+	type Props =
+		| {
+				address: Address.Address
+				kind: 'balances'
+		  }
+		| {
+				address: Address.Address
+				kind: 'transactions'
+				status?: 'success' | 'reverted' | undefined
+				include: 'all' | 'sent' | 'received'
+				after?: number | undefined
+				sources: ReadonlyArray<HistorySources>
+		  }
+}

apps/explorer/src/index.server.ts

@@ -1,5 +1,8 @@
 import * as Sentry from '@sentry/cloudflare'
 import handler, { createServerEntry } from '@tanstack/react-start/server-entry'
+import { ExplorerExportRateLimit } from '#lib/server/export-rate-limit'
+
+export { ExplorerExportRateLimit }
 
 export const redirects: Array<{
 	from: RegExp

apps/explorer/src/lib/address-balances.ts

@@ -0,0 +1,98 @@
+import { useQuery } from '@tanstack/react-query'
+import type { Address } from 'ox'
+import * as React from 'react'
+import { formatUnits } from 'viem'
+
+import { getApiUrl } from '#lib/env.ts'
+
+export type TokenBalance = {
+	token: Address.Address
+	balance: string
+	name?: string
+	symbol?: string
+	decimals?: number
+	currency?: string
+}
+
+export type BalancesResponse = {
+	balances: TokenBalance[]
+	error?: string
+}
+
+export type AssetData = {
+	address: Address.Address
+	metadata:
+		| { name?: string; symbol?: string; decimals?: number; currency?: string }
+		| undefined
+	balance: bigint | undefined
+}
+
+async function fetchAddressBalances(
+	address: Address.Address,
+): Promise<BalancesResponse> {
+	const response = await fetch(getApiUrl(`/api/address/balances/${address}`), {
+		headers: { 'Content-Type': 'application/json' },
+	})
+	return response.json() as Promise<BalancesResponse>
+}
+
+export function balancesQueryOptions(address: Address.Address) {
+	return {
+		queryKey: ['address-balances', address],
+		queryFn: () => fetchAddressBalances(address),
+		staleTime: 60_000,
+	}
+}
+
+export function useBalancesData(
+	accountAddress: Address.Address,
+	initialData?: BalancesResponse,
+	enabled = true,
+): {
+	data: AssetData[]
+	isLoading: boolean
+} {
+	const { data, isLoading } = useQuery({
+		...balancesQueryOptions(accountAddress),
+		initialData,
+		enabled,
+	})
+
+	const assetsData = React.useMemo(() => {
+		if (!data?.balances) return []
+		return data.balances.map((token) => ({
+			address: token.token,
+			metadata: {
+				name: token.name,
+				symbol: token.symbol,
+				decimals: token.decimals,
+				currency: token.currency,
+			},
+			balance: BigInt(token.balance),
+		}))
+	}, [data])
+
+	return { data: assetsData, isLoading }
+}
+
+export function calculateTotalHoldings(
+	assetsData: ReadonlyArray<AssetData>,
+	options?: {
+		isTokenListed?: ((address: Address.Address) => boolean) | undefined
+	},
+): number | undefined {
+	const PRICE_PER_TOKEN = 1
+	let total: number | undefined
+	for (const asset of assetsData) {
+		if (asset.metadata?.currency !== 'USD') continue
+		if (options?.isTokenListed && !options.isTokenListed(asset.address)) {
+			continue
+		}
+		const decimals = asset.metadata?.decimals
+		const balance = asset.balance
+		if (decimals === undefined || balance === undefined) continue
+		total =
+			(total ?? 0) + Number(formatUnits(balance, decimals)) * PRICE_PER_TOKEN
+	}
+	return total
+}