From 098ed7531222ea04755f7cff7281d35b36ea3951 Mon Sep 17 00:00:00 2001
From: xiongdi <xiongdi@163.com>
Date: Wed, 13 May 2026 12:02:30 +0800
Subject: [PATCH] Add chart liquidation price toggle

---
 src/components/modals/Settings.svelte | 10 +++-
 src/lib/chart.js                      | 80 ++++++++++++++++++++++-----
 src/lib/stores.js                     |  1 +
 3 files changed, 75 insertions(+), 16 deletions(-)

diff --git a/src/components/modals/Settings.svelte b/src/components/modals/Settings.svelte
index 419adbf..931124b 100644
--- a/src/components/modals/Settings.svelte
+++ b/src/components/modals/Settings.svelte
@@ -4,7 +4,7 @@
 	import LabelValue from '@components/layout/LabelValue.svelte'
 	import Checkbox from '@components/layout/Checkbox.svelte'
 
-	import { showOrdersOnChart, showPositionsOnChart, showTooltips } from '@lib/stores'
+	import { showOrdersOnChart, showPositionsOnChart, showLiquidationPricesOnChart, showTooltips } from '@lib/stores'
 	import { showToast } from '@lib/ui'
 	import { saveUserSetting } from '@lib/utils'
 
@@ -13,14 +13,15 @@
 		showToast('Settings reset.');
 	}
 
-	function saveSettings(soc, spc, st) {
+	function saveSettings(soc, spc, slp, st) {
 		// console.log('saveSettings', soc, spc, st);
 		saveUserSetting('showOrdersOnChart', soc);
 		saveUserSetting('showPositionsOnChart', spc);
+		saveUserSetting('showLiquidationPricesOnChart', slp);
 		saveUserSetting('showTooltips', st);
 	}
 
-	$: saveSettings($showOrdersOnChart, $showPositionsOnChart, $showTooltips);
+	$: saveSettings($showOrdersOnChart, $showPositionsOnChart, $showLiquidationPricesOnChart, $showTooltips);
 
 </script>
 
@@ -37,6 +38,9 @@
 	</div>
 	<div class='row'>
 		<Checkbox hasPadding={true} label='Positions on chart' bind:value={$showPositionsOnChart} />
+	</div>
+	<div class='row'>
+		<Checkbox hasPadding={true} label='Liq. prices on chart' bind:value={$showLiquidationPricesOnChart} />
 	</div><!-- 
 	<div class='row'>
 		<Checkbox hasPadding={true} label='Tooltips' bind:value={$showTooltips} />
diff --git a/src/lib/chart.js b/src/lib/chart.js
index 29e5992..1f7b008 100644
--- a/src/lib/chart.js
+++ b/src/lib/chart.js
@@ -1,9 +1,9 @@
 import { get } from 'svelte/store'
 import { createChart, ColorType, LineStyle } from 'lightweight-charts'
 
-import { CURRENCY_DECIMALS } from './config'
+import { BPS_DIVIDER } from './config'
 import { formatUnits, formatOrder, formatPosition, formatForDisplay, formatPriceForDisplay } from './formatters'
-import { selectedMarket, orders, positions, chartResolution, chartLoading, showOrdersOnChart, showPositionsOnChart, hoveredOHLC } from './stores'
+import { selectedMarket, orders, positions, chartResolution, chartLoading, showOrdersOnChart, showPositionsOnChart, showLiquidationPricesOnChart, hoveredOHLC, marketInfos, fundingTrackers } from './stores'
 import { saveUserSetting, getPrecision } from './utils'
 
 import { getMarketCandles } from '@api/prices'
@@ -142,6 +142,15 @@ export function initChart(cb) {
 	showPositionsOnChart.subscribe(() => {
 		loadPositionLines();
 	});
+	showLiquidationPricesOnChart.subscribe(() => {
+		loadPositionLines();
+	});
+	marketInfos.subscribe(() => {
+		loadPositionLines();
+	});
+	fundingTrackers.subscribe(() => {
+		loadPositionLines();
+	});
 
 	chart.subscribeCrosshairMove(param => {
 		if (!param?.seriesPrices || param?.seriesPrices.size == 0) {
@@ -361,6 +370,33 @@ function loadOrderLines(_orders) {
 
 }
 
+function getPositionFunding(_position) {
+	const fundingTracker = get(fundingTrackers)[_position.asset]?.[_position.market];
+	if (!fundingTracker) return 0;
+
+	let fundingTrackerDiff = formatUnits(fundingTracker) * 1 - formatUnits(_position.fundingTracker) * 1;
+	if (_position.isLong) fundingTrackerDiff *= -1;
+
+	return _position.size * fundingTrackerDiff / BPS_DIVIDER || 0;
+}
+
+function getLiquidationPrice(_position) {
+	const marketInfo = get(marketInfos)[_position.market];
+	if (!marketInfo || !_position.size) return;
+
+	const liqThreshold = marketInfo.liqThreshold / BPS_DIVIDER;
+	const funding = getPositionFunding(_position);
+	let liqPrice;
+
+	if (_position.isLong) {
+		liqPrice = _position.price * 1 - liqThreshold * (_position.margin * 1 + funding * 1) * _position.price / _position.size;
+	} else {
+		liqPrice = _position.price * 1 + liqThreshold * (_position.margin * 1 + funding * 1) * _position.price / _position.size;
+	}
+
+	return liqPrice;
+}
+
 function loadPositionLines(_positions) {
 
 	if (!_positions) _positions = get(positions);
@@ -375,7 +411,7 @@ function loadPositionLines(_positions) {
 	clearPositionLines();
 
 
-	if (!get(showPositionsOnChart)) return;
+	if (!get(showPositionsOnChart) && !get(showLiquidationPricesOnChart)) return;
 
 	let markers = [];
 
@@ -385,16 +421,34 @@ function loadPositionLines(_positions) {
 
 		if (_position.market != get(selectedMarket)) continue;
 
-		positionLines.push(
-			candlestickSeries.createPriceLine({
-			    price: _position.price,
-			    color: _position.isLong ? '#00D604' : '#FF5000',
-			    lineWidth: 1,
-			    lineStyle: LineStyle.Solid,
-			    axisLabelVisible: true,
-			    title: `${_position.isLong ? '▲' : '▼'} ${formatForDisplay(_position.size)} ${_position.asset}`,
-			})
-		);
+		if (get(showPositionsOnChart)) {
+			positionLines.push(
+				candlestickSeries.createPriceLine({
+				    price: _position.price,
+				    color: _position.isLong ? '#00D604' : '#FF5000',
+				    lineWidth: 1,
+				    lineStyle: LineStyle.Solid,
+				    axisLabelVisible: true,
+				    title: `${_position.isLong ? '▲' : '▼'} ${formatForDisplay(_position.size)} ${_position.asset}`,
+				})
+			);
+		}
+
+		if (get(showLiquidationPricesOnChart)) {
+			const liquidationPrice = getLiquidationPrice(_position);
+			if (!isNaN(liquidationPrice * 1) && liquidationPrice * 1 > 0) {
+				positionLines.push(
+					candlestickSeries.createPriceLine({
+					    price: liquidationPrice,
+					    color: '#FFB020',
+					    lineWidth: 1,
+					    lineStyle: LineStyle.Dashed,
+					    axisLabelVisible: true,
+					    title: `Liq. ${_position.isLong ? '▲' : '▼'} ${formatForDisplay(_position.size)} ${_position.asset}`,
+					})
+				);
+			}
+		}
 
 		// markers.push({
 		// 	time: _position.timestamp.toNumber(),
diff --git a/src/lib/stores.js b/src/lib/stores.js
index d5761f7..1ed704f 100644
--- a/src/lib/stores.js
+++ b/src/lib/stores.js
@@ -23,6 +23,7 @@ export const activeError = writable();
 export const showMobileNav = writable(false);
 export const showOrdersOnChart = writable(getUserSetting('showOrdersOnChart') == undefined ? true : getUserSetting('showOrdersOnChart'));
 export const showPositionsOnChart = writable(getUserSetting('showPositionsOnChart') == undefined ? true : getUserSetting('showPositionsOnChart'));
+export const showLiquidationPricesOnChart = writable(getUserSetting('showLiquidationPricesOnChart') == undefined ? false : getUserSetting('showLiquidationPricesOnChart'));
 export const showTooltips = writable(getUserSetting('showTooltips') == undefined ? true : getUserSetting('showTooltips'));
 
 // Contracts