From eb9e5de45b961be3a66036894ecc1de061672aa6 Mon Sep 17 00:00:00 2001
From: jiangzhewen <jiangzhewen666@163.com>
Date: Tue, 12 May 2026 15:06:30 +0800
Subject: [PATCH] Add history CSV export

---
 src/api/history.js                            |  36 ++-
 src/components/layout/Modals.svelte           |   7 +-
 src/components/modals/ExportHistoryCSV.svelte | 289 ++++++++++++++++++
 src/components/trade/account/Account.svelte   |   5 +-
 src/lib/icons.js                              |   7 +-
 5 files changed, 328 insertions(+), 16 deletions(-)
 create mode 100644 src/components/modals/ExportHistoryCSV.svelte

diff --git a/src/api/history.js b/src/api/history.js
index ce1e5cb..4e9ebf6 100644
--- a/src/api/history.js
+++ b/src/api/history.js
@@ -1,39 +1,51 @@
 import { get } from 'svelte/store'
 
 import { DEFAULT_HISTORY_COUNT } from '@lib/config'
-import { address, history, lastHistoryItemsCount, historySortKey, historyOrderStatusToShow } from '@lib/stores'
+import { address, history, lastHistoryItemsCount, historyOrderStatusToShow } from '@lib/stores'
 import { getLabelForAsset, getChainData } from '@lib/utils'
 
-export async function getUserHistory(params) {
+export async function fetchUserHistoryPage(params) {
 
 	const dataEndpoint = getChainData('dataEndpoint');
 	
-	let _address = get(address);
+	if (!params) params = {};
+
+	let _address = params.address || get(address);
 	if (!_address) return;
 
 	_address = _address.toLowerCase();
 
-	if (!params) params = {};
-
 	let {
 		first,
 		skip,
-		diff
+		statusesToShow
 	} = params;
 
 	if (!first) first = DEFAULT_HISTORY_COUNT;
 	if (!skip) skip = 0;
 
-	const statusesToShow = get(historyOrderStatusToShow);
-
-	const sortKey = get(historySortKey); // [columnName, isDesc]
+	if (!statusesToShow) statusesToShow = get(historyOrderStatusToShow);
 
 	let sortBy = 'timestamp';
 	let sortDirection = 'desc';
 
+	const response = await fetch(`${dataEndpoint}/history/${_address}?chain=arbitrum&limit=${first}&skip=${skip}&sortBy=${sortBy}&sortDirection=${sortDirection}&status=${statusesToShow.join(',')}`);
+	const orders = await response.json() || [];
+
+	return orders;
+}
+
+export async function getUserHistory(params) {
+
+	if (!params) params = {};
+
+	let {
+		skip,
+		diff
+	} = params;
+
 	try {
-		const response = await fetch(`${dataEndpoint}/history/${_address}?chain=arbitrum&limit=${first}&skip=${skip}&sortBy=${sortBy}&sortDirection=${sortDirection}&status=${statusesToShow.join(',')}`);
-		const orders = await response.json() || [];
+		const orders = await fetchUserHistoryPage(params) || [];
 
 		lastHistoryItemsCount.set(orders.length);
 
@@ -66,4 +78,4 @@ export async function getUserHistory(params) {
 	}
 
 	return true;
-}
\ No newline at end of file
+}
diff --git a/src/components/layout/Modals.svelte b/src/components/layout/Modals.svelte
index 03b829d..5f16556 100644
--- a/src/components/layout/Modals.svelte
+++ b/src/components/layout/Modals.svelte
@@ -13,6 +13,7 @@
 	import StakeCAP from '../modals/StakeCAP.svelte'
 	import UnstakeCAP from '../modals/UnstakeCAP.svelte'
 	import HistoryOrderStatus from '../modals/HistoryOrderStatus.svelte'
+	import ExportHistoryCSV from '../modals/ExportHistoryCSV.svelte'
 	import Settings from '../modals/Settings.svelte'
 
 </script>
@@ -65,6 +66,10 @@
 <HistoryOrderStatus />
 {/if}
 
+{#if $activeModal && $activeModal.name == 'ExportHistoryCSV'}
+<ExportHistoryCSV />
+{/if}
+
 {#if $activeModal && $activeModal.name == 'MarketInfo'}
 <MarketInfo data={$activeModal.data} />
-{/if}
\ No newline at end of file
+{/if}
diff --git a/src/components/modals/ExportHistoryCSV.svelte b/src/components/modals/ExportHistoryCSV.svelte
new file mode 100644
index 0000000..7ecb2fe
--- /dev/null
+++ b/src/components/modals/ExportHistoryCSV.svelte
@@ -0,0 +1,289 @@
+<script>
+
+	import Button from '@components/layout/Button.svelte'
+	import Modal from './Modal.svelte'
+
+	import { DEFAULT_HISTORY_COUNT } from '@lib/config'
+	import {
+		formatHistoryItem,
+		formatDate,
+		formatForDisplay,
+		formatOrderType,
+		formatSide,
+		formatMarketName,
+		formatPriceForDisplay
+	} from '@lib/formatters'
+	import { hideModal, showToast } from '@lib/ui'
+
+	import { fetchUserHistoryPage } from '@api/history'
+
+	const PAGE_SIZE = Math.max(DEFAULT_HISTORY_COUNT, 100);
+	const headers = [
+		'ID',
+		'Time',
+		'Side',
+		'Market',
+		'Price',
+		'Size',
+		'Margin',
+		'Leverage',
+		'Order Type',
+		'Reduce Only',
+		'Status',
+		'Reason',
+		'P/L',
+		'Fee',
+		'Expiry',
+		'OCO Order ID'
+	];
+
+	let toDate = getDateInputValue(new Date());
+	let fromDate = getDateInputValue(new Date(Date.now() - 30 * 24 * 60 * 60 * 1000));
+	let isExporting = false;
+	let exportedCount = 0;
+	let errorMessage = '';
+
+	function getDateInputValue(date) {
+		return date.toISOString().slice(0, 10);
+	}
+
+	function getDateBounds() {
+		return {
+			from: fromDate ? new Date(`${fromDate}T00:00:00`).getTime() / 1000 : null,
+			to: toDate ? new Date(`${toDate}T23:59:59.999`).getTime() / 1000 : null
+		};
+	}
+
+	function isInRange(item, from, to) {
+		const timestamp = item.timestamp * 1;
+		if (from && timestamp < from) return false;
+		if (to && timestamp > to) return false;
+		return true;
+	}
+
+	function formatAmount(amount, asset) {
+		if (amount == undefined || amount === '') return '';
+		return `${formatForDisplay(amount)} ${asset}`;
+	}
+
+	function formatPnlForCSV(item) {
+		if (!item.pnl) return '';
+		const percent = item.margin * 1 ? 100 * item.pnl / item.margin : 0;
+		return `${formatForDisplay(item.pnl)} ${item.asset} (${formatForDisplay(percent)}%)`;
+	}
+
+	function getCSVRows(items) {
+		return items.map((item) => {
+			item = formatHistoryItem(item);
+			return [
+				item.status == 'liquidated' ? 'liq' : item.orderId,
+				formatDate(item.timestamp) || '',
+				formatSide(item.isLong, item.isReduceOnly),
+				formatMarketName(item.market),
+				item.price * 1 > 0 ? formatPriceForDisplay(item.price) : '',
+				formatAmount(item.size, item.asset),
+				formatAmount(item.margin, item.asset),
+				item.leverage ? `${formatForDisplay(item.leverage)}x` : '',
+				formatOrderType(item.orderType),
+				item.isReduceOnly ? 'Yes' : 'No',
+				item.status,
+				item.reason || '',
+				formatPnlForCSV(item),
+				formatAmount(item.fee, item.asset),
+				formatDate(item.expiry) || '',
+				item.cancelOrderId * 1 > 0 ? item.cancelOrderId : ''
+			];
+		});
+	}
+
+	function buildCSV(rows) {
+		const workerCode = `
+			function escapeCSV(value) {
+				value = value == null ? '' : String(value);
+				if (/[",\\n]/.test(value)) return '"' + value.replace(/"/g, '""') + '"';
+				return value;
+			}
+			self.onmessage = function(event) {
+				const csv = event.data.rows.map(function(row) {
+					return row.map(escapeCSV).join(',');
+				}).join('\\n');
+				self.postMessage(csv);
+			};
+		`;
+		const workerUrl = URL.createObjectURL(new Blob([workerCode], { type: 'text/javascript' }));
+		const worker = new Worker(workerUrl);
+
+		return new Promise((resolve, reject) => {
+			worker.onmessage = (event) => {
+				worker.terminate();
+				URL.revokeObjectURL(workerUrl);
+				resolve(event.data);
+			};
+			worker.onerror = (event) => {
+				worker.terminate();
+				URL.revokeObjectURL(workerUrl);
+				reject(event);
+			};
+			worker.postMessage({ rows });
+		});
+	}
+
+	function downloadCSV(csv) {
+		const blob = new Blob([csv], { type: 'text/csv;charset=utf-8' });
+		const url = URL.createObjectURL(blob);
+		const link = document.createElement('a');
+		const range = fromDate || toDate ? `-${fromDate || 'all'}-${toDate || 'now'}` : '';
+		link.href = url;
+		link.download = `cap-history${range}.csv`;
+		document.body.appendChild(link);
+		link.click();
+		document.body.removeChild(link);
+		URL.revokeObjectURL(url);
+	}
+
+	async function exportHistory() {
+		if (isExporting) return;
+		errorMessage = '';
+		exportedCount = 0;
+
+		const { from, to } = getDateBounds();
+		if (from && to && from > to) {
+			errorMessage = 'From date must be before the to date.';
+			return;
+		}
+
+		isExporting = true;
+
+		try {
+			let skip = 0;
+			let rows = [headers];
+			let shouldContinue = true;
+
+			while (shouldContinue) {
+				const page = await fetchUserHistoryPage({ first: PAGE_SIZE, skip }) || [];
+				const filteredPage = page.filter((item) => isInRange(item, from, to));
+				rows = rows.concat(getCSVRows(filteredPage));
+				exportedCount += filteredPage.length;
+
+				const lastItem = page[page.length - 1];
+				if (page.length < PAGE_SIZE || !lastItem || from && lastItem.timestamp * 1 < from) {
+					shouldContinue = false;
+				} else {
+					skip += PAGE_SIZE;
+					await new Promise((resolve) => setTimeout(resolve));
+				}
+			}
+
+			if (rows.length == 1) {
+				errorMessage = 'No history found for the selected range.';
+				return;
+			}
+
+			downloadCSV(await buildCSV(rows));
+			showToast(`Exported ${exportedCount} history items.`, 1);
+			hideModal();
+		} catch(e) {
+			console.error('history CSV export error', e);
+			errorMessage = 'Unable to export history. Please try again.';
+		} finally {
+			isExporting = false;
+		}
+	}
+
+</script>
+
+<style>
+
+	.content {
+		padding: var(--base-padding);
+	}
+
+	.note {
+		color: var(--text300);
+		line-height: 1.45;
+		margin-bottom: var(--base-padding);
+	}
+
+	.range {
+		display: grid;
+		grid-template-columns: 1fr 1fr;
+		gap: var(--semi-padding);
+	}
+
+	label {
+		display: grid;
+		gap: 8px;
+		color: var(--text300);
+		font-size: 13px;
+		font-weight: 600;
+	}
+
+	input {
+		height: 42px;
+		border-radius: var(--base-radius);
+		border: 1px solid var(--layer200);
+		background-color: var(--layer50);
+		color: var(--text0);
+		padding: 0 12px;
+		font-size: 14px;
+		font-family: inherit;
+		box-sizing: border-box;
+	}
+
+	input:focus {
+		border-color: var(--primary);
+	}
+
+	.error {
+		margin-top: var(--semi-padding);
+		color: var(--secondary);
+		font-size: 13px;
+	}
+
+	.footer {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		margin-top: var(--base-padding);
+	}
+
+	.progress {
+		color: var(--text400);
+		font-size: 13px;
+	}
+
+	@media all and (max-width: 600px) {
+		.range {
+			grid-template-columns: 1fr;
+		}
+	}
+
+</style>
+
+<Modal title='Export History' width={460}>
+	<form class='content' on:submit|preventDefault={exportHistory}>
+		<div class='note'>
+			Download a CSV report for the selected trading history range. Leave dates empty to export all available history.
+		</div>
+
+		<div class='range'>
+			<label>
+				From
+				<input type='date' bind:value={fromDate} />
+			</label>
+			<label>
+				To
+				<input type='date' bind:value={toDate} />
+			</label>
+		</div>
+
+		{#if errorMessage}
+		<div class='error'>{errorMessage}</div>
+		{/if}
+
+		<div class='footer'>
+			<div class='progress'>{#if isExporting}Preparing {exportedCount} rows...{/if}</div>
+			<Button label='Download CSV' noSubmit={false} isLoading={isExporting} />
+		</div>
+	</form>
+</Modal>
diff --git a/src/components/trade/account/Account.svelte b/src/components/trade/account/Account.svelte
index a589a71..cc451cd 100644
--- a/src/components/trade/account/Account.svelte
+++ b/src/components/trade/account/Account.svelte
@@ -10,7 +10,7 @@
 	import tooltip from '@lib/tooltip'
 
 	import { DEFAULT_CHAIN_ID } from '@lib/config'
-	import { TABLE_ICON, FILTER_ICON, XMARK_ICON, TROPHY_ICON } from '@lib/icons'
+	import { TABLE_ICON, FILTER_ICON, XMARK_ICON, TROPHY_ICON, DOWNLOAD_ICON } from '@lib/icons'
 	import { address, chainId, ordersSorted, positionsSorted } from '@lib/stores'
 	import { showModal } from '@lib/ui'
 
@@ -191,6 +191,7 @@
 		<div class='tools'>
 			{#if panel == 'history'}
 				<a on:click|stopPropagation={() => {showModal('HistoryOrderStatus')}} use:tooltip={{content: 'Filter history'}}>{@html FILTER_ICON}</a>
+				<a on:click|stopPropagation={() => {showModal('ExportHistoryCSV')}} use:tooltip={{content: 'Export history'}}>{@html DOWNLOAD_ICON}</a>
 			{/if}
 			<a use:tooltip={{content: 'Customize columns'}} on:click|stopPropagation={() => {showModal('CustomizeColumns', {panel, allColumns: allColumns[panel]})}}>{@html TABLE_ICON}</a>
 			{#if panel == 'orders' && $ordersSorted.length}
@@ -205,4 +206,4 @@
 		{#if panel == 'history'}<History allColumns={allColumns['history']} />{/if}
 	</div>
 
-</div>
\ No newline at end of file
+</div>
diff --git a/src/lib/icons.js b/src/lib/icons.js
index 36c12fd..3f94073 100644
--- a/src/lib/icons.js
+++ b/src/lib/icons.js
@@ -137,6 +137,11 @@ export const TABLE_ICON = `<svg viewBox="0 0 19.6777 16.6504">
   <path d="M13.3398 16.6504C14.6289 16.6504 15.6836 15.5957 15.6836 14.3066C15.6836 13.0176 14.6289 11.9629 13.3398 11.9629C12.0508 11.9629 10.9863 13.0176 10.9863 14.3066C10.9863 15.5957 12.0508 16.6504 13.3398 16.6504ZM13.3398 15.4492C12.6953 15.4492 12.1973 14.9414 12.1973 14.3066C12.1973 13.6523 12.6953 13.1641 13.3398 13.1641C13.9844 13.1641 14.4824 13.6523 14.4824 14.3066C14.4824 14.9414 13.9844 15.4492 13.3398 15.4492ZM11.7871 13.5156L0.78125 13.5156C0.341797 13.5156 0 13.8672 0 14.3066C0 14.7461 0.341797 15.0879 0.78125 15.0879L11.7871 15.0879ZM18.9258 13.5156L15.0391 13.5156L15.0391 15.0879L18.9258 15.0879C19.3262 15.0879 19.6777 14.7461 19.6777 14.3066C19.6777 13.8672 19.3262 13.5156 18.9258 13.5156ZM6.44531 10.6934C7.73438 10.6934 8.78906 9.62891 8.78906 8.33984C8.78906 7.05078 7.73438 5.99609 6.44531 5.99609C5.15625 5.99609 4.10156 7.05078 4.10156 8.33984C4.10156 9.62891 5.15625 10.6934 6.44531 10.6934ZM6.44531 9.48242C5.81055 9.48242 5.30273 8.97461 5.30273 8.33984C5.30273 7.69531 5.81055 7.19727 6.44531 7.19727C7.08984 7.19727 7.58789 7.69531 7.58789 8.33984C7.58789 8.97461 7.08984 9.48242 6.44531 9.48242ZM0.742188 7.54883C0.341797 7.54883 0 7.90039 0 8.33984C0 8.7793 0.341797 9.12109 0.742188 9.12109L4.76562 9.12109L4.76562 7.54883ZM18.8867 7.54883L7.99805 7.54883L7.99805 9.12109L18.8867 9.12109C19.3262 9.12109 19.6777 8.7793 19.6777 8.33984C19.6777 7.90039 19.3262 7.54883 18.8867 7.54883ZM13.3398 4.7168C14.6289 4.7168 15.6836 3.66211 15.6836 2.37305C15.6836 1.08398 14.6289 0.0195312 13.3398 0.0195312C12.0508 0.0195312 10.9863 1.08398 10.9863 2.37305C10.9863 3.66211 12.0508 4.7168 13.3398 4.7168ZM13.3398 3.51562C12.6953 3.51562 12.1973 3.00781 12.1973 2.36328C12.1973 1.71875 12.6953 1.2207 13.3398 1.2207C13.9844 1.2207 14.4824 1.71875 14.4824 2.36328C14.4824 3.00781 13.9844 3.51562 13.3398 3.51562ZM11.8359 1.5918L0.78125 1.5918C0.341797 1.5918 0 1.93359 0 2.37305C0 2.8125 0.341797 3.16406 0.78125 3.16406L11.8359 3.16406ZM18.9258 1.5918L14.9023 1.5918L14.9023 3.16406L18.9258 3.16406C19.3262 3.16406 19.6777 2.8125 19.6777 2.37305C19.6777 1.93359 19.3262 1.5918 18.9258 1.5918Z"/>
 </svg>`;
 
+export const DOWNLOAD_ICON = `<svg viewBox="0 0 20 20">
+  <path d="M9.25 1.25C9.25 0.84 9.59 0.5 10 0.5C10.41 0.5 10.75 0.84 10.75 1.25V10.44L14.22 6.97C14.51 6.68 14.99 6.68 15.28 6.97C15.57 7.26 15.57 7.74 15.28 8.03L10.53 12.78C10.24 13.07 9.76 13.07 9.47 12.78L4.72 8.03C4.43 7.74 4.43 7.26 4.72 6.97C5.01 6.68 5.49 6.68 5.78 6.97L9.25 10.44V1.25Z"/>
+  <path d="M2.75 12.25C3.16 12.25 3.5 12.59 3.5 13V16C3.5 16.83 4.17 17.5 5 17.5H15C15.83 17.5 16.5 16.83 16.5 16V13C16.5 12.59 16.84 12.25 17.25 12.25C17.66 12.25 18 12.59 18 13V16C18 17.66 16.66 19 15 19H5C3.34 19 2 17.66 2 16V13C2 12.59 2.34 12.25 2.75 12.25Z"/>
+</svg>`;
+
 export const FILTER_ICON = `
 <svg viewBox="0 0 21.8945 19.7559">
   <path d="M11.3379 4.99023L21.1426 4.99023C21.5527 4.99023 21.8945 4.66797 21.8945 4.24805C21.8945 3.83789 21.5527 3.51562 21.1426 3.51562L11.3379 3.51562C10.9277 3.51562 10.5957 3.83789 10.5957 4.24805C10.5957 4.66797 10.9277 4.99023 11.3379 4.99023ZM11.3379 16.2793L21.1426 16.2793C21.5527 16.2793 21.8945 15.957 21.8945 15.5469C21.8945 15.127 21.5527 14.8047 21.1426 14.8047L11.3379 14.8047C10.9277 14.8047 10.5957 15.127 10.5957 15.5469C10.5957 15.957 10.9277 16.2793 11.3379 16.2793Z" />
@@ -191,4 +196,4 @@ export const CHECKMARK_CIRCLE_ICON = `<svg viewBox="0 0 19.9219 19.9316">
 export const CHECKMARK_CIRCLE_INVERTED_ICON = `<svg viewBox="0 0 19.9219 19.9316">
   <path d="M9.96094 19.9219C15.4102 19.9219 19.9219 15.4004 19.9219 9.96094C19.9219 4.51172 15.4004 0 9.95117 0C4.51172 0 0 4.51172 0 9.96094C0 15.4004 4.52148 19.9219 9.96094 19.9219Z" />
   <path d="M8.86719 14.7363C8.53516 14.7363 8.26172 14.5996 8.00781 14.2578L5.55664 11.25C5.41016 11.0547 5.32227 10.8398 5.32227 10.6152C5.32227 10.1758 5.66406 9.81445 6.10352 9.81445C6.38672 9.81445 6.60156 9.90234 6.8457 10.2246L8.82812 12.7832L12.998 6.08398C13.1836 5.79102 13.4375 5.63477 13.6914 5.63477C14.1211 5.63477 14.5215 5.92773 14.5215 6.38672C14.5215 6.60156 14.3945 6.82617 14.2773 7.03125L9.6875 14.2578C9.48242 14.5801 9.19922 14.7363 8.86719 14.7363Z" fill="#00D604"/>
-</svg>`;
\ No newline at end of file
+</svg>`;