Show liquidation prices on chart

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, showLiquidationsOnChart, 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) {
-		// console.log('saveSettings', soc, spc, st);
+	function saveSettings(soc, spc, slc, st) {
+		// console.log('saveSettings', soc, spc, slc, st);
 		saveUserSetting('showOrdersOnChart', soc);
 		saveUserSetting('showPositionsOnChart', spc);
+		saveUserSetting('showLiquidationsOnChart', slc);
 		saveUserSetting('showTooltips', st);
 	}
 
-	$: saveSettings($showOrdersOnChart, $showPositionsOnChart, $showTooltips);
+	$: saveSettings($showOrdersOnChart, $showPositionsOnChart, $showLiquidationsOnChart, $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 prices on chart' bind:value={$showLiquidationsOnChart} />
 	</div><!-- 
 	<div class='row'>
 		<Checkbox hasPadding={true} label='Tooltips' bind:value={$showTooltips} />

src/lib/chart.js

@@ -1,12 +1,13 @@
 import { get } from 'svelte/store'
 import { createChart, ColorType, LineStyle } from 'lightweight-charts'
 
-import { CURRENCY_DECIMALS } from './config'
+import { BPS_DIVIDER, CURRENCY_DECIMALS } 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, marketInfos, fundingTrackers, chartResolution, chartLoading, showOrdersOnChart, showPositionsOnChart, showLiquidationsOnChart, hoveredOHLC } from './stores'
 import { saveUserSetting, getPrecision } from './utils'
 
 import { getMarketCandles } from '@api/prices'
+import { getFundingTracker } from '@api/markets'
 
 let candles = []; // current candle set
 
@@ -142,6 +143,12 @@ export function initChart(cb) {
 	showPositionsOnChart.subscribe(() => {
 		loadPositionLines();
 	});
+	showLiquidationsOnChart.subscribe(() => {
+		loadPositionLines();
+	});
+	fundingTrackers.subscribe(() => {
+		loadPositionLines();
+	});
 
 	chart.subscribeCrosshairMove(param => {
 		if (!param?.seriesPrices || param?.seriesPrices.size == 0) {
@@ -375,7 +382,7 @@ function loadPositionLines(_positions) {
 	clearPositionLines();
 
 
-	if (!get(showPositionsOnChart)) return;
+	if (!get(showPositionsOnChart) && !get(showLiquidationsOnChart)) return;
 
 	let markers = [];
 
@@ -385,7 +392,8 @@ function loadPositionLines(_positions) {
 
 		if (_position.market != get(selectedMarket)) continue;
 
-		positionLines.push(
+		if (get(showPositionsOnChart)) {
+			positionLines.push(
 			candlestickSeries.createPriceLine({
 			    price: _position.price,
 			    color: _position.isLong ? '#00D604' : '#FF5000',
@@ -394,7 +402,24 @@ function loadPositionLines(_positions) {
 			    axisLabelVisible: true,
 			    title: `${_position.isLong ? '▲' : '▼'} ${formatForDisplay(_position.size)} ${_position.asset}`,
 			})
-		);
+			);
+		}
+
+		if (get(showLiquidationsOnChart)) {
+			const liquidationPrice = getLiquidationPrice(_position);
+			if (!liquidationPrice || isNaN(liquidationPrice)) continue;
+
+			positionLines.push(
+				candlestickSeries.createPriceLine({
+				    price: liquidationPrice,
+				    color: '#F5C542',
+				    lineWidth: 1,
+				    lineStyle: LineStyle.Dashed,
+				    axisLabelVisible: true,
+				    title: `Liq. ${formatForDisplay(_position.size)} ${_position.asset}`,
+				})
+			);
+		}
 
 		// markers.push({
 		// 	time: _position.timestamp.toNumber(),
@@ -420,6 +445,33 @@ function loadPositionLines(_positions) {
 
 }
 
+function getPositionFunding(position) {
+	const fundingTracker = get(fundingTrackers)[position.asset]?.[position.market];
+	if (fundingTracker == undefined) {
+		getFundingTracker(position.asset, position.market);
+		return 0;
+	}
+
+	let fundingTrackerDiff = formatUnits(fundingTracker) * 1 - formatUnits(position.fundingTracker) * 1;
+	if (position.isLong) fundingTrackerDiff = fundingTrackerDiff * -1;
+
+	return position.size * fundingTrackerDiff / BPS_DIVIDER || 0;
+}
+
+function getLiquidationPrice(position) {
+	const marketInfo = get(marketInfos)[position.market];
+	if (!marketInfo || !position.size || !position.margin || !position.price) return;
+
+	const liqThreshold = marketInfo.liqThreshold / BPS_DIVIDER;
+	const funding = getPositionFunding(position);
+
+	if (position.isLong) {
+		return position.price * 1 - liqThreshold * (position.margin * 1 + funding * 1) * position.price / position.size;
+	}
+
+	return position.price * 1 + liqThreshold * (position.margin * 1 + funding * 1) * position.price / position.size;
+}
+
 function clearOrderLines() {
 	for (const priceline of orderLines) {
 		candlestickSeries.removePriceLine(priceline);

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 showLiquidationsOnChart = writable(getUserSetting('showLiquidationsOnChart') == undefined ? true : getUserSetting('showLiquidationsOnChart'));
 export const showTooltips = writable(getUserSetting('showTooltips') == undefined ? true : getUserSetting('showTooltips'));
 
 // Contracts