From f3443a3dfd8987967327e67c00d89de8765a81a6 Mon Sep 17 00:00:00 2001
From: jiangzhewen <jiangzhewen666@163.com>
Date: Wed, 13 May 2026 22:08:08 +0800
Subject: [PATCH] Add trade share cards

---
 src/components/layout/Modals.svelte           |   7 +-
 src/components/modals/CustomizeColumns.svelte |   3 +
 src/components/modals/ShareTrade.svelte       | 208 ++++++++++++++++++
 src/components/trade/account/Account.svelte   |   5 +-
 src/components/trade/account/History.svelte   |  30 ++-
 src/components/trade/account/Positions.svelte |  25 ++-
 src/lib/icons.js                              |   7 +-
 src/lib/stores.js                             |   2 +-
 8 files changed, 277 insertions(+), 10 deletions(-)
 create mode 100644 src/components/modals/ShareTrade.svelte

diff --git a/src/components/layout/Modals.svelte b/src/components/layout/Modals.svelte
index 03b829d..056a995 100644
--- a/src/components/layout/Modals.svelte
+++ b/src/components/layout/Modals.svelte
@@ -14,6 +14,7 @@
 	import UnstakeCAP from '../modals/UnstakeCAP.svelte'
 	import HistoryOrderStatus from '../modals/HistoryOrderStatus.svelte'
 	import Settings from '../modals/Settings.svelte'
+	import ShareTrade from '../modals/ShareTrade.svelte'
 
 </script>
 
@@ -67,4 +68,8 @@
 
 {#if $activeModal && $activeModal.name == 'MarketInfo'}
 <MarketInfo data={$activeModal.data} />
-{/if}
\ No newline at end of file
+{/if}
+
+{#if $activeModal && $activeModal.name == 'ShareTrade'}
+<ShareTrade data={$activeModal.data} />
+{/if}
diff --git a/src/components/modals/CustomizeColumns.svelte b/src/components/modals/CustomizeColumns.svelte
index c0dd5ef..9b94136 100644
--- a/src/components/modals/CustomizeColumns.svelte
+++ b/src/components/modals/CustomizeColumns.svelte
@@ -26,6 +26,9 @@
 			isColumnShown[key] = true;
 		}
 	}
+	for (const col of data.allColumns) {
+		if (col.permanent) isColumnShown[col.key] = true;
+	}
 
 	function trackColumnShownChange(isColumnShown) {
 		// set store
diff --git a/src/components/modals/ShareTrade.svelte b/src/components/modals/ShareTrade.svelte
new file mode 100644
index 0000000..90933af
--- /dev/null
+++ b/src/components/modals/ShareTrade.svelte
@@ -0,0 +1,208 @@
+<script>
+	import { onMount } from 'svelte'
+
+	import Button from '@components/layout/Button.svelte'
+	import Modal from './Modal.svelte'
+
+	import { formatDate, formatForDisplay, formatMarketName, formatPnl, formatPriceForDisplay } from '@lib/formatters'
+	import { showToast } from '@lib/ui'
+
+	export let data;
+
+	let imageUrl, shareText, shareUrl, canUseNativeShare = false;
+
+	onMount(() => {
+		canUseNativeShare = !!navigator.share;
+	});
+
+	function getNumber(value) {
+		const number = value * 1;
+		return isNaN(number) ? 0 : number;
+	}
+
+	function drawRoundRect(ctx, x, y, width, height, radius) {
+		ctx.beginPath();
+		ctx.moveTo(x + radius, y);
+		ctx.lineTo(x + width - radius, y);
+		ctx.quadraticCurveTo(x + width, y, x + width, y + radius);
+		ctx.lineTo(x + width, y + height - radius);
+		ctx.quadraticCurveTo(x + width, y + height, x + width - radius, y + height);
+		ctx.lineTo(x + radius, y + height);
+		ctx.quadraticCurveTo(x, y + height, x, y + height - radius);
+		ctx.lineTo(x, y + radius);
+		ctx.quadraticCurveTo(x, y, x + radius, y);
+		ctx.closePath();
+	}
+
+	function fillTextWithin(ctx, text, x, y, maxWidth, size, weight = 700) {
+		let currentSize = size;
+		do {
+			ctx.font = `${weight} ${currentSize}px Inter, Arial, sans-serif`;
+			currentSize -= 2;
+		} while (ctx.measureText(text).width > maxWidth && currentSize > 26);
+		ctx.fillText(text, x, y);
+	}
+
+	function drawMetric(ctx, label, value, x, y, width) {
+		ctx.fillStyle = '#7d837f';
+		ctx.font = '500 24px Inter, Arial, sans-serif';
+		ctx.fillText(label, x, y);
+		ctx.fillStyle = '#f4f7f4';
+		fillTextWithin(ctx, value || '-', x, y + 44, width, 32, 650);
+	}
+
+	function getShareData() {
+		const pnl = data?.pnl == undefined || data?.pnl === '' ? undefined : getNumber(data.pnl);
+		const pnlPercent = data?.pnlPercent == undefined || data?.pnlPercent === '' ? undefined : getNumber(data.pnlPercent);
+		const isProfit = pnl == undefined ? undefined : pnl >= 0;
+		const market = formatMarketName(data?.market) || data?.market || '-';
+		const side = data?.side || '-';
+		const asset = data?.asset || '';
+		const title = `${market} ${side}`;
+		const pnlText = pnl == undefined ? data?.status || '-' : `${formatPnl(pnl)} ${asset}`;
+		const percentText = pnlPercent == undefined ? '' : formatPnl(pnlPercent, true);
+		return { pnl, pnlPercent, isProfit, market, side, asset, title, pnlText, percentText };
+	}
+
+	function renderImage() {
+		if (!data) return;
+
+		const canvas = document.createElement('canvas');
+		canvas.width = 1200;
+		canvas.height = 675;
+		const ctx = canvas.getContext('2d');
+		const shareData = getShareData();
+		const accent = shareData.isProfit === false ? '#f84c20' : '#32d135';
+		const typeLabel = data.type == 'history' ? 'Historical Trade' : 'Active Position';
+		const status = data.status || typeLabel;
+
+		ctx.fillStyle = '#111411';
+		ctx.fillRect(0, 0, canvas.width, canvas.height);
+		const gradient = ctx.createLinearGradient(0, 0, 1200, 675);
+		gradient.addColorStop(0, 'rgba(50, 209, 53, 0.16)');
+		gradient.addColorStop(0.55, 'rgba(255, 255, 255, 0)');
+		gradient.addColorStop(1, shareData.isProfit === false ? 'rgba(248, 76, 32, 0.20)' : 'rgba(50, 209, 53, 0.10)');
+		ctx.fillStyle = gradient;
+		ctx.fillRect(0, 0, canvas.width, canvas.height);
+
+		ctx.fillStyle = '#f4f7f4';
+		ctx.font = '800 44px Inter, Arial, sans-serif';
+		ctx.fillText('CAP', 72, 90);
+		ctx.fillStyle = '#8b938d';
+		ctx.font = '500 24px Inter, Arial, sans-serif';
+		ctx.fillText(typeLabel, 72, 128);
+
+		ctx.fillStyle = accent;
+		drawRoundRect(ctx, 908, 58, 220, 54, 27);
+		ctx.fill();
+		ctx.fillStyle = '#101210';
+		ctx.font = '700 23px Inter, Arial, sans-serif';
+		ctx.textAlign = 'center';
+		ctx.fillText(status, 1018, 93);
+		ctx.textAlign = 'left';
+
+		ctx.fillStyle = '#f4f7f4';
+		fillTextWithin(ctx, shareData.title, 72, 238, 720, 72, 800);
+		ctx.fillStyle = accent;
+		ctx.font = '800 96px Inter, Arial, sans-serif';
+		ctx.fillText(shareData.pnlText, 72, 360);
+		if (shareData.percentText) {
+			ctx.fillStyle = '#cbd1cc';
+			ctx.font = '700 42px Inter, Arial, sans-serif';
+			ctx.fillText(`(${shareData.percentText})`, 72, 420);
+		}
+
+		ctx.strokeStyle = '#2f352f';
+		ctx.lineWidth = 2;
+		drawRoundRect(ctx, 72, 464, 1056, 126, 18);
+		ctx.stroke();
+
+		drawMetric(ctx, data.type == 'history' ? 'Price' : 'Entry', formatPriceForDisplay(data.entryPrice || data.price), 104, 522, 200);
+		drawMetric(ctx, data.type == 'history' ? 'Type' : 'Current', data.type == 'history' ? data.orderType : formatPriceForDisplay(data.markPrice), 366, 522, 220);
+		drawMetric(ctx, 'Size', `${formatForDisplay(data.size)} ${shareData.asset}`, 628, 522, 210);
+		drawMetric(ctx, 'Margin', `${formatForDisplay(data.margin)} ${shareData.asset}`, 890, 522, 210);
+
+		ctx.fillStyle = '#7d837f';
+		ctx.font = '500 22px Inter, Arial, sans-serif';
+		ctx.fillText(`${formatDate(data.timestamp) || ''}   cap.io`, 72, 632);
+
+		imageUrl = canvas.toDataURL('image/png');
+		shareUrl = `${window.location.origin}/trade/${data.market}`;
+		shareText = `CAP ${typeLabel}: ${shareData.title} ${shareData.pnlText}${shareData.percentText ? ` (${shareData.percentText})` : ''}`;
+	}
+
+	async function getImageFile() {
+		const response = await fetch(imageUrl);
+		const blob = await response.blob();
+		return new File([blob], `cap-${data.market}-trade.png`, { type: 'image/png' });
+	}
+
+	function downloadImage() {
+		const link = document.createElement('a');
+		link.href = imageUrl;
+		link.download = `cap-${data.market}-trade.png`;
+		link.click();
+	}
+
+	async function shareImage() {
+		if (!navigator.share) return copyShareText();
+		try {
+			const file = await getImageFile();
+			if (!navigator.canShare || navigator.canShare({ files: [file] })) {
+				await navigator.share({ files: [file], title: shareText, text: shareText });
+			} else {
+				await navigator.share({ title: shareText, text: shareText, url: shareUrl });
+			}
+		} catch(e) {
+			if (e.name != 'AbortError') showToast('Unable to share this trade.');
+		}
+	}
+
+	async function copyShareText() {
+		try {
+			await navigator.clipboard.writeText(`${shareText} ${shareUrl}`);
+			showToast('Share text copied.', 1);
+		} catch(e) {
+			showToast('Unable to copy share text.');
+		}
+	}
+
+	$: renderImage(data);
+</script>
+
+<style>
+	.container {
+		padding: var(--base-padding);
+	}
+	.preview {
+		display: block;
+		width: 100%;
+		border: 1px solid var(--layer200);
+		border-radius: var(--base-radius);
+		background-color: var(--layer0);
+	}
+	.actions {
+		display: grid;
+		grid-template-columns: repeat(3, minmax(0, 1fr));
+		gap: 10px;
+		padding-top: var(--base-padding);
+	}
+	@media all and (max-width: 600px) {
+		.actions {
+			grid-template-columns: 1fr;
+		}
+	}
+</style>
+
+<Modal title='Share Trade' width={620}>
+	<div class='container'>
+		{#if imageUrl}
+			<img class='preview' src={imageUrl} alt='Trade share card' />
+		{/if}
+		<div class='actions'>
+			<Button noSubmit={true} label='Download' on:click={downloadImage} />
+			<Button noSubmit={true} label={canUseNativeShare ? 'Share' : 'Copy'} on:click={shareImage} />
+			<Button noSubmit={true} label='Copy Text' on:click={copyShareText} />
+		</div>
+	</div>
+</Modal>
diff --git a/src/components/trade/account/Account.svelte b/src/components/trade/account/Account.svelte
index a589a71..e694e4d 100644
--- a/src/components/trade/account/Account.svelte
+++ b/src/components/trade/account/Account.svelte
@@ -63,7 +63,8 @@
 			{key: 'pnl', gridTemplate: '1fr', sortable: true},
 			{key: 'fee', gridTemplate: '0.75fr', sortable: true},
 			{key: 'expiry', gridTemplate: '1fr', sortable: true},
-			{key: 'cancelOrderId', gridTemplate: '0.5fr', sortable: false}
+			{key: 'cancelOrderId', gridTemplate: '0.5fr', sortable: false},
+			{key: 'tools', gridTemplate: '30px', sortable: false, permanent: true}
 		]
 	};
 
@@ -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/components/trade/account/History.svelte b/src/components/trade/account/History.svelte
index 68ee72e..9cb0afb 100644
--- a/src/components/trade/account/History.svelte
+++ b/src/components/trade/account/History.svelte
@@ -4,9 +4,10 @@
 	import Table from '@components/layout/table/Table.svelte'
 	import Row from '@components/layout/table/Row.svelte'
 	import Cell from '@components/layout/table/Cell.svelte'
+	import tooltip from '@lib/tooltip'
 
 	import { onMount, onDestroy } from 'svelte'
-	import { LOADING_ICON } from '@lib/icons'
+	import { LOADING_ICON, SHARE_ICON } from '@lib/icons'
 
 	import { DEFAULT_HISTORY_COUNT, DEFAULT_HISTORY_SORT_KEY } from '@lib/config'
 	import { 
@@ -100,7 +101,7 @@
 	});
 
 	let columns = [];
-	$: columns = allColumns.filter((item) => $historyColumnsToShow.includes(item.key));
+	$: columns = allColumns.filter((item) => item.permanent || $historyColumnsToShow.includes(item.key));
 
 	let formattedHistory = [];
 	$: formattedHistory = $historySorted.map((item) => formatHistoryItem(item));
@@ -117,6 +118,26 @@
 		return item.status;
 	}
 
+	function showHistoryShare(item) {
+		const pnl = item.pnl ? item.pnl : undefined;
+		showModal('ShareTrade', {
+			type: 'history',
+			status: getItemStatus(item),
+			market: item.market,
+			side: formatSide(item.isLong, item.isReduceOnly),
+			asset: item.asset,
+			price: item.price,
+			entryPrice: item.price,
+			size: item.size,
+			margin: item.margin,
+			leverage: item.leverage,
+			orderType: formatOrderType(item.orderType),
+			pnl,
+			pnlPercent: pnl && item.margin ? 100 * pnl / item.margin : undefined,
+			timestamp: item.timestamp
+		});
+	}
+
 </script>
 
 <style>
@@ -324,6 +345,9 @@
 				<Cell>{item.cancelOrderId * 1 > 0 ? item.cancelOrderId : '-'}</Cell>
 			{/if}
 
+			<Cell isTools={true}>
+				<a use:tooltip={{content: 'Share'}} on:click|stopPropagation={() => { showHistoryShare(item) }}>{@html SHARE_ICON}</a>
+			</Cell>
 
 		</Row>
 
@@ -426,4 +450,4 @@
 {#if loadingMore}
 	<div class='loading-more'>{@html LOADING_ICON}</div>
 {/if}
- -->
\ No newline at end of file
+ -->
diff --git a/src/components/trade/account/Positions.svelte b/src/components/trade/account/Positions.svelte
index bc4ccbe..ff48e47 100644
--- a/src/components/trade/account/Positions.svelte
+++ b/src/components/trade/account/Positions.svelte
@@ -10,7 +10,7 @@
 
 
 	import { onDestroy } from 'svelte'
-	import { XMARK_ICON, PENCIL_ICON } from '@lib/icons'
+	import { XMARK_ICON, PENCIL_ICON, SHARE_ICON } from '@lib/icons'
 
 	import { DEFAULT_POSITIONS_SORT_KEY, BPS_DIVIDER } from '@lib/config'
 	import { 
@@ -147,6 +147,26 @@
 
 	let showDetails = {};
 
+	function showPositionShare(position) {
+		const key = `${position.asset}:${position.market}`;
+		const pnl = totalUpls[key] || 0;
+		showModal('ShareTrade', {
+			type: 'active',
+			status: 'Active',
+			market: position.market,
+			side: formatSide(position.isLong),
+			asset: position.asset,
+			entryPrice: position.price,
+			markPrice: $prices[position.market],
+			size: position.size,
+			margin: position.margin,
+			leverage: position.leverage,
+			pnl,
+			pnlPercent: position.margin ? 100 * pnl / position.margin : 0,
+			timestamp: position.timestamp
+		});
+	}
+
 </script>
 
 <style>
@@ -334,6 +354,7 @@
 			{/if}
 
 			<Cell isTools={true}>
+				<a use:tooltip={{content: 'Share'}} on:click|stopPropagation={() => { showPositionShare(position) }}>{@html SHARE_ICON}</a>
 				<a use:tooltip={{content: 'Edit'}} on:click|stopPropagation={() => { showModal('EditMargin', {position, funding: fundings[`${position.asset}:${position.market}`]}) }}>{@html PENCIL_ICON}</a>
 				<a use:tooltip={{content: 'Close'}} on:click|stopPropagation={() => { showModal('ClosePosition', position) }}>{@html XMARK_ICON}</a>
 			</Cell>
@@ -415,4 +436,4 @@
 		</div>
 	</div>
 	{/each}
-{/if} -->
\ No newline at end of file
+{/if} -->
diff --git a/src/lib/icons.js b/src/lib/icons.js
index 36c12fd..c01c4a8 100644
--- a/src/lib/icons.js
+++ b/src/lib/icons.js
@@ -110,6 +110,11 @@ export const CHEVRON_UP_DOWN = `<svg viewBox="0 0 15.0195 17.4707">
 export const XMARK_ICON = `<svg viewBox="0 0 15.4859 15.4956">
  <path d="M0.252699 15.2429C0.594496 15.575 1.1609 15.575 1.49293 15.2429L7.74293 8.99293L13.9929 15.2429C14.325 15.575 14.9011 15.5847 15.2332 15.2429C15.5652 14.9011 15.5652 14.3445 15.2332 14.0125L8.98317 7.7527L15.2332 1.5027C15.5652 1.17067 15.575 0.604261 15.2332 0.27223C14.8914-0.0695668 14.325-0.0695668 13.9929 0.27223L7.74293 6.52223L1.49293 0.27223C1.1609-0.0695668 0.58473-0.0793324 0.252699 0.27223C-0.0793324 0.614027-0.0793324 1.17067 0.252699 1.5027L6.5027 7.7527L0.252699 14.0125C-0.0793324 14.3445-0.0890981 14.9109 0.252699 15.2429Z"/></svg>`;
 
+export const SHARE_ICON = `<svg viewBox="0 0 24 24">
+ <path d="M13 5.83V17h-2V5.83L7.41 9.42 6 8l6-6 6 6-1.41 1.42L13 5.83Z"/>
+ <path d="M5 20h14v-7h2v7c0 1.1-.9 2-2 2H5c-1.1 0-2-.9-2-2v-7h2v7Z"/>
+</svg>`;
+
 export const LIST_ICON = `
 <svg viewBox="0 0 23.0273 17.9785">
   <path d="M3.06641 17.9785L19.9609 17.9785C22.0117 17.9785 23.0273 16.9727 23.0273 14.9609L23.0273 3.02734C23.0273 1.01562 22.0117 0 19.9609 0L3.06641 0C1.02539 0 0 1.01562 0 3.02734L0 14.9609C0 16.9727 1.02539 17.9785 3.06641 17.9785ZM3.08594 16.4062C2.10938 16.4062 1.57227 15.8887 1.57227 14.873L1.57227 3.11523C1.57227 2.09961 2.10938 1.57227 3.08594 1.57227L19.9414 1.57227C20.9082 1.57227 21.4551 2.09961 21.4551 3.11523L21.4551 14.873C21.4551 15.8887 20.9082 16.4062 19.9414 16.4062Z"/>
@@ -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>`;
diff --git a/src/lib/stores.js b/src/lib/stores.js
index d5761f7..9211680 100644
--- a/src/lib/stores.js
+++ b/src/lib/stores.js
@@ -159,7 +159,7 @@ export const positionsSorted = derived([positions, positionsSortKey], ([$positio
 
 // History
 export const history = writable([]);
-export const historyColumnsToShow = writable(getUserSetting('historyColumnsToShow') || ['isLong', 'market', 'price', 'size', 'status', 'reason', 'pnl']);
+export const historyColumnsToShow = writable(getUserSetting('historyColumnsToShow') || ['isLong', 'market', 'price', 'size', 'status', 'reason', 'pnl', 'tools']);
 export const historySortKey = writable(['timestamp', true]); // [columnName, isDesc]
 export const historySorted = derived([history, historySortKey], ([$history, $historySortKey]) => {
 	return sorter($history, $historySortKey);