From 81a3588d13a2d2f7acf14c0a26592e75951275b5 Mon Sep 17 00:00:00 2001
From: chinaxiao123 <chinaxiao123@users.noreply.github.com>
Date: Tue, 26 May 2026 08:42:22 +0000
Subject: [PATCH] Add liquidation price chart toggle

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

diff --git a/src/components/modals/Settings.svelte b/src/components/modals/Settings.svelte
index 419adbf..3f4611d 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, showLiquidationPriceOnChart, 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, slpc, st) {
 		// console.log('saveSettings', soc, spc, st);
 		saveUserSetting('showOrdersOnChart', soc);
 		saveUserSetting('showPositionsOnChart', spc);
+		saveUserSetting('showLiquidationPriceOnChart', slpc);
 		saveUserSetting('showTooltips', st);
 	}
 
-	$: saveSettings($showOrdersOnChart, $showPositionsOnChart, $showTooltips);
+	$: saveSettings($showOrdersOnChart, $showPositionsOnChart, $showLiquidationPriceOnChart, $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='Liquidation price on chart' bind:value={$showLiquidationPriceOnChart} />
 	</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..a08f6c7 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 { CURRENCY_DECIMALS, 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, showLiquidationPriceOnChart, hoveredOHLC, fundingTrackers, marketInfos } from './stores'
 import { saveUserSetting, getPrecision } from './utils'
 
 import { getMarketCandles } from '@api/prices'
@@ -142,6 +142,15 @@ export function initChart(cb) {
 	showPositionsOnChart.subscribe(() => {
 		loadPositionLines();
 	});
+	showLiquidationPriceOnChart.subscribe(() => {
+		loadPositionLines();
+	});
+	fundingTrackers.subscribe(() => {
+		loadPositionLines();
+	});
+	marketInfos.subscribe(() => {
+		loadPositionLines();
+	});
 
 	chart.subscribeCrosshairMove(param => {
 		if (!param?.seriesPrices || param?.seriesPrices.size == 0) {
@@ -324,6 +333,7 @@ export function onNewPrice(price) {
 
 let orderLines = [];
 let positionLines = [];
+let liquidationLines = [];
 
 function loadOrderLines(_orders) {
 
@@ -373,9 +383,9 @@ function loadPositionLines(_positions) {
 	}
 
 	clearPositionLines();
+	clearLiquidationLines();
 
-
-	if (!get(showPositionsOnChart)) return;
+	if (!get(showPositionsOnChart) && !get(showLiquidationPriceOnChart)) return;
 
 	let markers = [];
 
@@ -385,16 +395,48 @@ 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(showLiquidationPriceOnChart)) {
+			const liqThreshold = get(marketInfos)?.[_position.market]?.liqThreshold;
+			const fundingTracker = get(fundingTrackers)?.[_position.asset]?.[_position.market];
+			if (liqThreshold && fundingTracker != undefined) {
+				let ftDiff = fundingTracker * 1 - (_position.fundingTracker * 1);
+				if (_position.isLong) ftDiff = -1 * ftDiff;
+				const funding = _position.size * ftDiff / BPS_DIVIDER || 0;
+				const marginWithFunding = _position.margin * 1 + funding * 1;
+				const liqFactor = liqThreshold / BPS_DIVIDER;
+				let liqPrice;
+				if (_position.isLong) {
+					liqPrice = _position.price * 1 - liqFactor * marginWithFunding * _position.price / _position.size;
+				} else {
+					liqPrice = _position.price * 1 + liqFactor * marginWithFunding * _position.price / _position.size;
+				}
+				if (!isNaN(liqPrice) && isFinite(liqPrice)) {
+					liquidationLines.push(
+						candlestickSeries.createPriceLine({
+							price: liqPrice,
+							color: '#FF5A5F',
+							lineWidth: 1,
+							lineStyle: LineStyle.Dashed,
+							axisLabelVisible: true,
+							title: `Liq ${_position.isLong ? '▲' : '▼'} ${formatForDisplay(_position.size)} ${_position.asset}`,
+						})
+					);
+				}
+			}
+		}
 
 		// markers.push({
 		// 	time: _position.timestamp.toNumber(),
@@ -434,3 +476,10 @@ function clearPositionLines() {
 	candlestickSeries.setMarkers([]);
 	positionLines = [];
 }
+
+function clearLiquidationLines() {
+	for (const priceline of liquidationLines) {
+		candlestickSeries.removePriceLine(priceline);
+	}
+	liquidationLines = [];
+}
diff --git a/src/lib/stores.js b/src/lib/stores.js
index d5761f7..136978e 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 showLiquidationPriceOnChart = writable(getUserSetting('showLiquidationPriceOnChart') == undefined ? false : getUserSetting('showLiquidationPriceOnChart'));
 export const showTooltips = writable(getUserSetting('showTooltips') == undefined ? true : getUserSetting('showTooltips'));
 
 // Contracts