@orderly.network/ui-tradingview 2.10.1 → 2.10.2

package/dist/index.mjs

@@ -1,10 +1,10 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import React3, { forwardRef, useRef, useState, useMemo, useEffect, useCallback } from 'react';
 import { useTranslation, Trans, useLocaleCode, i18n } from '@orderly.network/i18n';
-import { cn, Flex, Divider, Box, toast, modal, DropdownMenuRoot, DropdownMenuTrigger, DropdownMenuPortal, DropdownMenuContent, Text, Switch } from '@orderly.network/ui';
+import { cn, Flex, Divider, Box, useScreen, useOrderlyTheme, useThemeAttribute, toast, modal, DropdownMenuRoot, DropdownMenuTrigger, DropdownMenuPortal, DropdownMenuContent, Text, Switch } from '@orderly.network/ui';
 import { useMediaQuery, useConfig, useAccount, useSymbolsInfo, useLocalStorage, useOrderEntry_deprecated, useWS, usePositionStream, useOrderStream, useEventEmitter } from '@orderly.network/hooks';
-import { MEDIA_TABLET, OrderSide, TradingviewFullscreenKey, OrderType, AccountStatusEnum, OrderStatus } from '@orderly.network/types';
-import { Decimal, commify, getTrailingStopPrice } from '@orderly.network/utils';
+import { MEDIA_TABLET, OrderSide, TradingviewFullscreenKey, OrderType, AccountStatusEnum, OrderStatus, ORDER_ENTRY_EST_LIQ_PRICE_CHANGE } from '@orderly.network/types';
+import { Decimal, commify, getTrailingStopPrice, getPrecisionByNumber } from '@orderly.network/utils';
 import { startOfSecond, startOfMinute, startOfHour, startOfDay, startOfMonth, startOfYear, startOfWeek } from 'date-fns';
 
 var __defProp = Object.defineProperty;
@@ -138,8 +138,7 @@ var init_icons = __esm({
               fillRule: "evenodd",
               clipRule: "evenodd",
               d: "M5.5 14.5V5.5H7.5V14.5H5.5Z",
-              fill: "white",
-              fillOpacity: "0.12"
+              className: "oui-fill-base-contrast-12"
             }
           ),
           /* @__PURE__ */ jsx(
@@ -196,8 +195,7 @@ var init_icons = __esm({
               fillRule: "evenodd",
               clipRule: "evenodd",
               d: "M2.7608 17.7562C2.84602 17.899 3.00106 18 3.19016 18H16.362C17.4665 18 18.362 17.1046 18.362 16V3.94663C18.362 3.86618 18.3453 3.79397 18.3162 3.73108L13.495 12.4968C13.0776 13.2557 12.1061 13.5044 11.3754 13.0394L7.19881 10.3816L2.9774 17.558C2.92465 17.6477 2.84826 17.7148 2.7608 17.7562Z",
-              fill: "white",
-              fillOpacity: "0.12"
+              className: "oui-fill-base-contrast-12"
             }
           )
         ] })
@@ -233,8 +231,7 @@ var init_icons = __esm({
           {
             id: "Vector",
             d: "M6.00684 0.999023C3.24544 0.999023 1.00684 3.23752 1.00684 5.99902C1.00684 8.76051 3.24544 10.999 6.00684 10.999C8.76834 10.999 11.0068 8.76051 11.0068 5.99902C11.0068 3.23752 8.76834 0.999023 6.00684 0.999023ZM6.00684 1.99902C8.21584 1.99902 10.0068 3.79002 10.0068 5.99902C10.0068 8.20801 8.21584 9.99901 6.00684 9.99901C3.79769 9.99901 2.00684 8.20801 2.00684 5.99902C2.00684 3.79002 3.79769 1.99902 6.00684 1.99902Z",
-            fill: "white",
-            fillOpacity: "0.2"
+            className: "oui-fill-base-contrast-20"
           }
         ) })
       }
@@ -496,7 +493,7 @@ var init_timeInterval = __esm({
                 "oui-cursor-pointer oui-px-2",
                 "hover:oui-text-base-contrast-80",
                 "oui-break-normal oui-whitespace-nowrap",
-                props.interval === item.value && "oui-text-base-contrast-80 oui-bg-white/[.06] oui-rounded"
+                props.interval === item.value && "oui-text-base-contrast-80 oui-bg-base-contrast-6 oui-rounded"
               ),
               id: item.value,
               onClick: () => props.changeInterval(item.value),
@@ -565,7 +562,7 @@ var init_timeInterval = __esm({
                 className: cn(
                   "oui-px-2",
                   "oui-break-normal oui-whitespace-nowrap",
-                  props.interval === item.value && "oui-text-base-contrast-80 oui-bg-white/[.06] oui-rounded"
+                  props.interval === item.value && "oui-text-base-contrast-80 oui-bg-base-contrast-6 oui-rounded"
                 ),
                 onClick: () => props.changeInterval(item.value),
                 children: item.label
@@ -888,38 +885,104 @@ var init_displayControl = __esm({
     init_displayControl_mobile();
   }
 });
+var cssVar2Hex = (color) => {
+  const [r, g, b] = color.trim().split(/\s+/).map(Number);
+  const toHex = (n) => Math.min(255, Math.max(0, n)).toString(16).padStart(2, "0");
+  return `#${toHex(r)}${toHex(g)}${toHex(b)}`;
+};
+var useCssVariables = (theme) => {
+  const [cssVariables, setCssVariables] = useState({});
+  const themeAttribute = useThemeAttribute();
+  useEffect(() => {
+    const rootStyle = getComputedStyle(document.documentElement);
+    const base9 = rootStyle.getPropertyValue("--oui-color-base-9").trim();
+    const primaryVar = rootStyle.getPropertyValue("--oui-color-primary").trim();
+    const warningLightVar = rootStyle.getPropertyValue("--oui-color-warning-light").trim();
+    setCssVariables({
+      chartBG: cssVar2Hex(base9),
+      primary: cssVar2Hex(primaryVar),
+      /** For liquidation line; same as Position list Liq. Price (--oui-color-warning-light). */
+      warningLight: warningLightVar ? cssVar2Hex(warningLightVar) : ""
+      // upColor: cssVar2Hex(profitColor),
+      // downColor: cssVar2Hex(lossColor),
+    });
+  }, [theme, themeAttribute]);
+  return cssVariables;
+};
 
 // src/utils/chart.util.ts
-var upColor = "#008676";
-var downColor = "#D92D6B";
-var chartBG = "#131519";
-var pnlUpColor = "#00B49E";
-var pnlDownColor = "#FF447C";
-var pnlZoreColor = "#333948";
-var textColor = "#FFFFFF";
-var qtyTextColor = "#F4F7F9";
 var font = "regular 11px Manrope";
 var defaultColorConfig = {
-  upColor,
-  downColor,
-  chartBG,
-  pnlUpColor,
-  pnlDownColor,
-  pnlZoreColor,
-  textColor,
-  qtyTextColor,
-  font,
-  volumeUpColor: "#0C3E3A",
-  volumeDownColor: "#5A1E36",
-  closeIcon: "rgba(255, 255, 255, 0.8)"
+  dark: {
+    chartBG: "#131519",
+    upColor: "#008676",
+    downColor: "#D92D6B",
+    pnlUpColor: "#00B49E",
+    pnlDownColor: "#FF447C",
+    pnlZoreColor: "#333948",
+    textColor: "#FFFFFF",
+    qtyTextColor: "#F4F7F9",
+    font,
+    volumeUpColor: "#0C3E3A",
+    volumeDownColor: "#5A1E36",
+    closeIcon: "rgba(255, 255, 255, 0.8)"
+  },
+  light: {
+    chartBG: "#ffffff",
+    upColor: "#2ebd85",
+    downColor: "#F6465D",
+    pnlUpColor: "#2ebd85",
+    pnlDownColor: "#F6465D",
+    pnlZoreColor: "#333948",
+    textColor: "#000000",
+    qtyTextColor: "#000000",
+    font,
+    volumeUpColor: "#2ebd85",
+    volumeDownColor: "#F6465D",
+    closeIcon: "rgba(0, 0, 0, 0.8)"
+  }
 };
-var getOveriides = (colorConfig, isMobile) => {
+var getColorConfig = ({
+  theme,
+  cssVariables,
+  customerColorConfig
+}) => {
+  const defaultCconfig = defaultColorConfig[theme] || defaultColorConfig.dark;
+  const chartBG = customerColorConfig?.chartBG || cssVariables.chartBG || defaultCconfig.chartBG;
+  const liqLineColor = customerColorConfig?.liqLineColor ?? cssVariables.warningLight;
+  return {
+    ...defaultCconfig,
+    ...customerColorConfig,
+    chartBG,
+    liqLineColor
+    // upColor,
+    // downColor,
+  };
+};
+var defaultOverrides = {
+  dark: {
+    "paneProperties.separatorColor": "#2B2833",
+    "paneProperties.vertGridProperties.color": "#26232F",
+    "paneProperties.horzGridProperties.color": "#26232F",
+    "scalesProperties.textColor": "#97969B"
+  },
+  light: {
+    // "paneProperties.separatorColor": "#E5E5E5",
+    // "paneProperties.vertGridProperties.color": "#E5E5E5",
+    // "paneProperties.horzGridProperties.color": "#E5E5E5",
+    // "scalesProperties.textColor": "#97969B",
+    "scalesProperties.crosshairLabelBgColorLight": "#E5E5E5"
+  }
+};
+var getOveriides = ({
+  theme,
+  colorConfig,
+  isMobile
+}) => {
   const overrides = {
     "paneProperties.background": colorConfig.chartBG,
-    // "paneProperties.background": "#ffff00",
     // "mainSeriesProperties.style": 1,
     "paneProperties.backgroundType": "solid",
-    // "paneProperties.background": "#151822",
     "mainSeriesProperties.candleStyle.upColor": colorConfig.upColor,
     "mainSeriesProperties.candleStyle.downColor": colorConfig.downColor,
     "mainSeriesProperties.candleStyle.borderColor": colorConfig.upColor,
@@ -927,13 +990,10 @@ var getOveriides = (colorConfig, isMobile) => {
     "mainSeriesProperties.candleStyle.borderDownColor": colorConfig.downColor,
     "mainSeriesProperties.candleStyle.wickUpColor": colorConfig.upColor,
     "mainSeriesProperties.candleStyle.wickDownColor": colorConfig.downColor,
-    "paneProperties.separatorColor": "#2B2833",
-    "paneProperties.vertGridProperties.color": "#26232F",
-    "paneProperties.horzGridProperties.color": "#26232F",
     "scalesProperties.fontSize": isMobile ? 8 : 12,
-    "scalesProperties.textColor": "#97969B",
     "paneProperties.legendProperties.showSeriesTitle": isMobile ? false : true,
-    "mainSeriesProperties.statusViewStyle.symbolTextSource": "ticker"
+    "mainSeriesProperties.statusViewStyle.symbolTextSource": "ticker",
+    ...defaultOverrides[theme]
   };
   const studiesOverrides = {
     "volume.volume.color.0": colorConfig.volumeDownColor,
@@ -947,6 +1007,26 @@ var getOveriides = (colorConfig, isMobile) => {
 var EXCHANGE = "Orderly";
 var withoutExchangePrefix = (symbol) => symbol.includes(":") ? symbol.split(":")[1] : symbol;
 var withExchangePrefix = (symbol) => symbol.startsWith(`${EXCHANGE}:`) ? symbol : `${EXCHANGE}:${symbol}`;
+function stringifyWithSortedKeys(obj) {
+  const keys = Object.keys(obj).sort();
+  const sorted = {};
+  for (const k of keys) {
+    sorted[k] = obj[k];
+  }
+  return JSON.stringify(sorted);
+}
+function simpleHash(str) {
+  let h = 5381;
+  for (let i = 0; i < str.length; i++) {
+    h = (h << 5) + h + str.charCodeAt(i);
+    h = h >>> 0;
+  }
+  return Math.abs(h).toString(36);
+}
+function getOverridesConfigHash(theme, overrides, studiesOverrides) {
+  const payload = `${theme}${stringifyWithSortedKeys(overrides)}${stringifyWithSortedKeys(studiesOverrides)}`;
+  return simpleHash(payload);
+}
 var getBrokerAdapter = (host, broker) => {
   let _symbolInfo;
   const getOrderCombinationType = (orderType) => {
@@ -2268,6 +2348,8 @@ var EST_TPSL_PNL_DECIMAL = 2;
 var textDash = "--";
 var BracketAlgoType = ["BRACKET" /* BRACKET */, "STOP_BRACKET" /* STOP_BRACKET */];
 var TpslAlgoType = ["POSITIONAL_TP_SL" /* POSITIONAL_TP_SL */, "TP_SL" /* TP_SL */];
+var isTpOrder = (order) => order.root_algo_order_id !== order.algo_order_id && order.algo_type === "TAKE_PROFIT" /* TAKE_PROFIT */;
+var isSlOrder = (order) => order.root_algo_order_id !== order.algo_order_id && order.algo_type === "STOP_LOSS" /* STOP_LOSS */;
 var isTpslOrder = (order) => order.root_algo_order_id !== order.algo_order_id && (order.algo_type === "TAKE_PROFIT" /* TAKE_PROFIT */ || order.algo_type === "STOP_LOSS" /* STOP_LOSS */);
 var isBracketAlgoType = (algoType) => !!algoType && BracketAlgoType.includes(algoType);
 var isPositionTpsl = (order) => order.type === "CLOSE_POSITION" /* CLOSE_POSITION */;
@@ -2458,6 +2540,8 @@ function useSendOrder(symbol) {
     sendMarketOrder
   };
 }
+
+// src/tradingviewAdapter/hooks/useBroker.ts
 var createBrokerMethod = (method) => {
   return (params) => method(params);
 };
@@ -2513,6 +2597,9 @@ var useBroker = ({
   useEffect(() => {
     broker.current.cancelOrder = cancelOrder;
   }, [cancelOrder]);
+  useEffect(() => {
+    broker.current.colorConfig = colorConfig;
+  }, [colorConfig]);
   return broker.current;
 };
 var useBroker_default = useBroker;
@@ -2651,8 +2738,91 @@ var ExecutionService = class _ExecutionService {
     this.unsubscribeIntervalChange();
   }
 };
+var LiquidationLineService = class {
+  constructor(instance, broker) {
+    this.line = null;
+    /** Tracks whether the current line source is estimated liq. price (vs position liq. price). */
+    this.isUsingEstimatedPrice = false;
+    this.instance = instance;
+    this.broker = broker;
+  }
+  /**
+   * Render or update the liquidation line. Call when position or estimated liq. price changes.
+   */
+  renderLiquidationLine(params) {
+    const { positionLiqPrice, estimatedLiqPrice } = params;
+    const hasValidEst = estimatedLiqPrice != null && Number.isFinite(estimatedLiqPrice);
+    const hasValidPosition = positionLiqPrice != null && Number.isFinite(positionLiqPrice);
+    if (hasValidEst) {
+      this.isUsingEstimatedPrice = true;
+      this.setLinePrice(estimatedLiqPrice);
+      this.line?.setLineStyle(1);
+      return;
+    }
+    if (hasValidPosition) {
+      this.isUsingEstimatedPrice = false;
+      this.setLinePrice(positionLiqPrice);
+      this.line?.setLineStyle(0);
+      return;
+    }
+    this.removeLine();
+  }
+  /** Remove the line (e.g. on destroy). */
+  remove() {
+    this.removeLine();
+  }
+  getOrCreateLine() {
+    if (this.line != null) {
+      return this.line;
+    }
+    try {
+      const activeChart = this.instance.activeChart();
+      if (!activeChart) return null;
+      const orderLine = activeChart.createOrderLine();
+      if (!orderLine) return null;
+      const colorConfig = this.broker.colorConfig;
+      const lineColor = colorConfig.liqLineColor ?? colorConfig.textColor;
+      if (!lineColor) return null;
+      this.line = orderLine.setCancellable(false).setLineLength(100).setEditable(false).setExtendLeft(true).setQuantity("").setLineStyle(1).setLineColor(lineColor).setBodyBorderColor(lineColor);
+      this.updateLineLabel();
+      if (colorConfig.chartBG) {
+        this.line = this.line.setBodyBackgroundColor(colorConfig.chartBG).setQuantityBackgroundColor(colorConfig.chartBG);
+      }
+      if (colorConfig.textColor) {
+        this.line = this.line.setBodyTextColor(colorConfig.textColor);
+      }
+      if (colorConfig.font) {
+        this.line = this.line.setBodyFont(colorConfig.font).setQuantityFont(colorConfig.font);
+      }
+      return this.line;
+    } catch {
+      return null;
+    }
+  }
+  setLinePrice(price) {
+    const line = this.getOrCreateLine();
+    if (line) {
+      line.setPrice(price);
+      this.updateLineLabel();
+    }
+  }
+  removeLine() {
+    if (this.line) {
+      this.line.remove();
+      this.line = null;
+    }
+  }
+  /** Ensure tooltip/text reflect whether we are showing estimated or position liq. price. */
+  updateLineLabel() {
+    if (!this.line) return;
+    const key = this.isUsingEstimatedPrice ? "orderEntry.estLiqPrice" : "positions.column.liqPrice";
+    const label = i18n.t(key);
+    this.line.setTooltip(label).setText(label);
+  }
+};
 
 // src/tradingviewAdapter/renderer/order.util.ts
+var CHART_QTY_DECIMAL = 4;
 var getOrderId = (order) => {
   if (order === null || order === void 0) {
     return void 0;
@@ -2684,6 +2854,22 @@ var TpslCalService = class {
     const { estPnl } = getTpslEstPnl(tpslOrder, position);
     return formatPnl(estPnl);
   }
+  /**
+   * Returns the quantity for a TP/SL order for label display.
+   * Position TP/SL: |position.balance|; partial TP/SL: |order.quantity - executed|.
+   * @returns quantity number or undefined when positions unavailable
+   */
+  getTpslQuantity(tpslOrder) {
+    if (this.positions === null) {
+      return void 0;
+    }
+    const position = this.positions[0];
+    if (!position) {
+      return void 0;
+    }
+    const { quantity } = getTpslEstPnl(tpslOrder, position);
+    return quantity;
+  }
   prepareTpslPnlMap(newPendingOrders) {
     const changed = [];
     newPendingOrders.forEach((order) => {
@@ -2834,12 +3020,18 @@ var _OrderLineService = class _OrderLineService {
     }
     return pendingOrder.trigger_price || pendingOrder.price;
   }
+  /**
+   * Builds TP/SL label body: type + PnL (e.g. "Take profit | 123.45 USDC").
+   * Falls back to "--" when PnL unavailable.
+   */
   getTPSLTextWithTpsl(text, pendingOrder) {
     const orderId = getOrderId(pendingOrder);
     if (!orderId) {
       return text;
     }
-    return text;
+    const pnlStr = this.tpslCalService.getFormattedEstPnl(pendingOrder);
+    const displayPnl = pnlStr ? pnlStr : formatPnl(void 0);
+    return `${text} | ${displayPnl} USDC`;
   }
   getTPSLText(pendingOrder) {
     const tpslTypeText = getTpslTag(
@@ -2851,17 +3043,26 @@ var _OrderLineService = class _OrderLineService {
     }
     return null;
   }
+  /**
+   * Returns quantity string for order line. For TP/SL: "qty (percent%)".
+   * Uses baseDp from broker.getSymbolInfo; falls back to CHART_QTY_DECIMAL.
+   */
   getOrderQuantity(pendingOrder) {
     if (pendingOrder.algo_order_id) {
-      if (isActivatedPositionTpsl(pendingOrder) || isPositionTpsl(pendingOrder)) {
-        return "100%";
-      }
-      if (isActivatedQuantityTpsl(pendingOrder)) {
-        const qty = new Decimal(pendingOrder.quantity).minus(
-          pendingOrder.executed ?? 0
-        );
-        const per = qty.div(new Decimal(pendingOrder.position_qty)).mul(100).todp(2).toNumber();
-        return `${Math.min(Math.abs(per), 100).toString()}%`;
+      const isTpsl = isActivatedPositionTpsl(pendingOrder) || isPositionTpsl(pendingOrder) || isActivatedQuantityTpsl(pendingOrder);
+      if (isTpsl) {
+        const percentStr = isActivatedPositionTpsl(pendingOrder) || isPositionTpsl(pendingOrder) ? "100%" : (() => {
+          const qty2 = new Decimal(pendingOrder.quantity).minus(
+            pendingOrder.executed ?? 0
+          );
+          const per = qty2.div(new Decimal(pendingOrder.position_qty)).mul(100).todp(0).toNumber();
+          return `${Math.min(Math.abs(per), 100).toString()}%`;
+        })();
+        const qty = this.tpslCalService.getTpslQuantity(pendingOrder);
+        const symbolInfo = this.broker.getSymbolInfo?.(pendingOrder.symbol);
+        const baseDp = symbolInfo?.baseTick != null ? getPrecisionByNumber(symbolInfo.baseTick) : CHART_QTY_DECIMAL;
+        const qtyStr = qty != null ? commify(new Decimal(qty).todp(baseDp).toString()) : textDash;
+        return `${qtyStr} (${percentStr})`;
       }
     }
     return commify(new Decimal(pendingOrder.quantity).toString());
@@ -2877,13 +3078,22 @@ var _OrderLineService = class _OrderLineService {
     if (!orderLine) {
       return null;
     }
-    const color = pendingOrder.side === "BUY" /* BUY */ ? colorConfig.upColor : colorConfig.downColor;
-    pendingOrder.side === "BUY" /* BUY */ ? colorConfig.pnlUpColor : colorConfig.pnlDownColor;
+    let color = pendingOrder.side === "BUY" /* BUY */ ? colorConfig.upColor : colorConfig.downColor;
+    let borderColor = pendingOrder.side === "BUY" /* BUY */ ? colorConfig.pnlUpColor : colorConfig.pnlDownColor;
+    if (isTpslOrder(pendingOrder)) {
+      if (isTpOrder(pendingOrder)) {
+        color = colorConfig.upColor;
+        borderColor = colorConfig.pnlUpColor;
+      } else if (isSlOrder(pendingOrder)) {
+        color = colorConfig.downColor;
+        borderColor = colorConfig.pnlDownColor;
+      }
+    }
     const price = _OrderLineService.getOrderPrice(pendingOrder);
     const lineLength = 100;
     const quantity = this.getOrderQuantity(pendingOrder);
-    const textColor2 = colorConfig.textColor;
-    orderLine.setText(text).setCancelButtonIconColor(colorConfig.closeIcon).setCancelButtonBorderColor(color).setBodyTextColor(textColor2).setBodyBorderColor(color).setQuantityBorderColor(color).setQuantityTextColor(color).setLineColor(color).setLineLength(lineLength).setQuantity(quantity ?? "").setPrice(price);
+    const textColor = colorConfig.textColor;
+    orderLine.setText(text).setCancelButtonIconColor(colorConfig.closeIcon).setCancelButtonBorderColor(color).setBodyTextColor(textColor).setBodyBorderColor(borderColor).setQuantityBorderColor(borderColor).setQuantityTextColor(color).setLineColor(color).setLineLength(lineLength).setQuantity(quantity ?? "").setPrice(price);
     if (this.broker.mode !== 3 /* MOBILE */) {
       orderLine.onCancel(null, () => this.broker.cancelOrder(pendingOrder));
       this.applyEditOnMove(orderLine, pendingOrder);
@@ -2957,7 +3167,21 @@ var PositionLineService = class _PositionLineService {
     this.lastPositions = positions;
   }
   getBasePositionLine() {
-    return this.instance.activeChart().createPositionLine().setTooltip(i18n.t("positions.closePosition")).setQuantityBackgroundColor(this.broker.colorConfig.chartBG).setCloseButtonBackgroundColor(this.broker.colorConfig.chartBG).setBodyTextColor(this.broker.colorConfig.textColor).setQuantityTextColor(this.broker.colorConfig.qtyTextColor).setBodyFont(this.broker.colorConfig.font).setQuantityFont(this.broker.colorConfig.font).setLineLength(100).setLineStyle(1);
+    const colorConfig = this.broker.colorConfig;
+    let line = this.instance.activeChart().createPositionLine().setTooltip(i18n.t("positions.closePosition")).setLineLength(100).setLineStyle(1);
+    if (colorConfig.chartBG) {
+      line = line.setQuantityBackgroundColor(colorConfig.chartBG).setCloseButtonBackgroundColor(colorConfig.chartBG);
+    }
+    if (colorConfig.textColor) {
+      line = line.setBodyTextColor(colorConfig.textColor);
+    }
+    if (colorConfig.qtyTextColor) {
+      line = line.setQuantityTextColor(colorConfig.qtyTextColor);
+    }
+    if (colorConfig.font) {
+      line = line.setBodyFont(colorConfig.font).setQuantityFont(colorConfig.font);
+    }
+    return line;
   }
   static getPositionQuantity(balance) {
     return commify(new Decimal(balance).todp(4, Decimal.ROUND_DOWN).toString());
@@ -2981,25 +3205,35 @@ var PositionLineService = class _PositionLineService {
   }
   drawPositionLine(position, idx) {
     const colorConfig = this.broker.colorConfig;
-    const isPositiveUnrealPnl = position.unrealPnl >= 0;
     const isPositiveBalance = position.balance >= 0;
-    let pnlColor = colorConfig.pnlZoreColor;
     const pnlDecimal = new Decimal(position.unrealPnl);
+    let pnlColor;
     if (pnlDecimal.greaterThan(0)) {
       pnlColor = colorConfig.upColor;
     } else if (pnlDecimal.lessThan(0)) {
       pnlColor = colorConfig.downColor;
+    } else {
+      pnlColor = colorConfig.pnlZoreColor;
     }
-    isPositiveUnrealPnl ? colorConfig.pnlUpColor : colorConfig.pnlDownColor;
     const sideColor = isPositiveBalance ? colorConfig.upColor : colorConfig.downColor;
     const price = new Decimal(position.open).toNumber();
     this.positionLines[idx] = this.positionLines[idx] ?? this.getBasePositionLine();
-    this.positionLines[idx].setQuantity(_PositionLineService.getPositionQuantity(position.balance)).setPrice(price).setCloseButtonIconColor(colorConfig.closeIcon).setCloseButtonBorderColor(sideColor).setBodyBackgroundColor(pnlColor).setQuantityTextColor(sideColor).setBodyBorderColor(pnlColor).setLineColor(sideColor).setQuantityBorderColor(sideColor).setText(
+    let line = this.positionLines[idx].setQuantity(_PositionLineService.getPositionQuantity(position.balance)).setPrice(price).setText(
       _PositionLineService.getPositionPnL(
         position.unrealPnl,
         position.unrealPnlDecimal
       )
     );
+    if (colorConfig.closeIcon) {
+      line = line.setCloseButtonIconColor(colorConfig.closeIcon);
+    }
+    if (sideColor) {
+      line = line.setCloseButtonBorderColor(sideColor).setQuantityTextColor(sideColor).setLineColor(sideColor).setQuantityBorderColor(sideColor);
+    }
+    if (pnlColor) {
+      line = line.setBodyBackgroundColor(pnlColor).setBodyBorderColor(pnlColor);
+    }
+    this.positionLines[idx] = line;
     if (this.broker.mode !== 3 /* MOBILE */) {
       this.positionLines[idx].onClose(null, () => {
         this.broker.closePosition(position);
@@ -3192,7 +3426,7 @@ var TPSLService = class {
           disableUndo: true,
           zOrder: "top",
           overrides: {
-            linecolor: "rgba(255,255,255, 0.2)",
+            linecolor: "rgba(var(--oui-color-base-foreground)/0.2)",
             linewidth: 1,
             rightEnd: 1,
             leftEnd: 1
@@ -3297,6 +3531,7 @@ var Renderer = class {
     this.orderLineService = new OrderLineService(instance, broker);
     this.executionService = new ExecutionService(instance, broker);
     this.tpslService = new TPSLService(instance, broker);
+    this.liquidationLineService = new LiquidationLineService(instance, broker);
   }
   async renderPositions(positions) {
     await this.chartReady();
@@ -3305,6 +3540,10 @@ var Renderer = class {
     this.orderLineService.updatePositions(positions);
     this.tpslService.updatePositions(positions);
   }
+  /** Update the single liquidation price line (position + optional estimated from Order Entry). */
+  renderLiquidationLine(params) {
+    this.liquidationLineService.renderLiquidationLine(params);
+  }
   async renderPendingOrders(pendingOrders) {
     await this.chartReady();
     this.orderLineService.renderPendingOrders(pendingOrders);
@@ -3317,6 +3556,7 @@ var Renderer = class {
   remove() {
     this.orderLineService.removeAll();
     this.positionLineService.removePositions();
+    this.liquidationLineService.remove();
     this.executionService.destroy();
   }
   onDataLoaded() {
@@ -3367,6 +3607,10 @@ function useCreateRenderer(symbol, displayControlSetting) {
     status: OrderStatus.FILLED,
     size: 500
   });
+  const ee = useEventEmitter();
+  const [estimatedLiqPrice, setEstimatedLiqPrice] = useState(
+    null
+  );
   const createRenderer = useRef(
     (instance, host, broker, container) => {
       if (rendererRef.current) {
@@ -3399,11 +3643,41 @@ function useCreateRenderer(symbol, displayControlSetting) {
         unrealPnl: item.unrealized_pnl ?? 0,
         interest: 0,
         unrealPnlDecimal: 2,
-        basePriceDecimal: 4
+        basePriceDecimal: 4,
+        est_liq_price: item.est_liq_price ?? null
       };
     });
     renderer?.renderPositions(positionList);
   }, [renderer, positions, symbol, displayControlSetting, state]);
+  useEffect(() => {
+    const handler = (payload) => {
+      if (payload.symbol === symbol) {
+        setEstimatedLiqPrice(
+          payload.isUserActive !== false ? payload.estLiqPrice : null
+        );
+      }
+    };
+    ee.on(ORDER_ENTRY_EST_LIQ_PRICE_CHANGE, handler);
+    return () => {
+      ee.off(ORDER_ENTRY_EST_LIQ_PRICE_CHANGE, handler);
+    };
+  }, [ee, symbol]);
+  useEffect(() => {
+    if (!renderer || !displayControlSetting?.position) return;
+    const symbolPosition = (positions ?? []).find((p) => p.symbol === symbol);
+    const positionLiqPrice = symbolPosition != null ? symbolPosition.est_liq_price ?? null : null;
+    const effectiveEstimatedLiqPrice = estimatedLiqPrice != null && Number.isFinite(estimatedLiqPrice) ? estimatedLiqPrice : null;
+    renderer.renderLiquidationLine({
+      positionLiqPrice,
+      estimatedLiqPrice: effectiveEstimatedLiqPrice
+    });
+  }, [
+    renderer,
+    positions,
+    symbol,
+    estimatedLiqPrice,
+    displayControlSetting?.position
+  ]);
   useEffect(() => {
     if (!displayControlSetting || !displayControlSetting.buySell) {
       renderer?.renderFilledOrders([], 6);
@@ -3888,6 +4162,7 @@ var Widget = class {
       locale: options.locale,
       theme: options.theme,
       loading_screen: options.loadingScreen,
+      toolbar_bg: options.toolbarBg,
       overrides: options.overrides,
       container: options.container,
       favorites: {
@@ -3962,10 +4237,8 @@ var Widget = class {
 };
 
 // src/components/tradingview.script.ts
-var CHART_KEY = "SDK_Tradingview";
-var MOBILE_CHART_KEY = "SDK_Moblie_Tradingview";
-var getChartKey = (isMobile) => {
-  return isMobile ? MOBILE_CHART_KEY : CHART_KEY;
+var getChartLocalStorageKey = (suffix, isMobile) => {
+  return isMobile ? `orderly_tradingview_mobile_${suffix}` : `orderly_tradingview_${suffix}`;
 };
 var defaultLocale = (localeCode) => {
   return localeCode === "id" ? "id_ID" : localeCode === "tc" ? "zh_TW" : localeCode;
@@ -3978,7 +4251,6 @@ function useTradingviewScript(props) {
     overrides: customerOverrides,
     studiesOverrides: customerStudiesOverrides,
     symbol,
-    theme,
     loadingScreen: customerLoadingScreen,
     mode,
     colorConfig: customerColorConfig,
@@ -3989,6 +4261,10 @@ function useTradingviewScript(props) {
     customIndicatorsGetter
   } = props;
   const localeCode = useLocaleCode();
+  const { isMobile } = useScreen();
+  const { currentTheme } = useOrderlyTheme();
+  const theme = props.theme ?? currentTheme?.mode ?? "dark";
+  const cssVariables = useCssVariables(theme);
   const chart = useRef(null);
   const apiBaseUrl = useConfig("apiBaseUrl");
   const { state: accountState } = useAccount();
@@ -4043,19 +4319,13 @@ function useTradingviewScript(props) {
     }
     return lastUsedLineType;
   });
-  const isMobile = useMediaQuery(MEDIA_TABLET);
-  const colorConfig = useMemo(
-    () => Object.assign({}, defaultColorConfig, customerColorConfig ?? {}),
-    [customerColorConfig]
-  );
-  const loadingScreen = useMemo(() => {
-    if (typeof customerLoadingScreen === "object") {
-      return customerLoadingScreen;
-    }
-    return {
-      backgroundColor: chartBG
-    };
-  }, [customerLoadingScreen]);
+  const colorConfig = useMemo(() => {
+    return getColorConfig({
+      theme,
+      customerColorConfig,
+      cssVariables
+    });
+  }, [theme, customerColorConfig, cssVariables]);
   const ws = useWS();
   const [chartingLibrarySciprtReady, setChartingLibrarySciprtReady] = useState(false);
   const closePositionConfirmCallback = (data) => {
@@ -4170,6 +4440,42 @@ function useTradingviewScript(props) {
       chartRef.current.appendChild(script);
     }
   }, [chartRef, chartingLibrarySciprtReady, tradingViewScriptSrc]);
+  const { overrides, studiesOverrides, configHash, toolbarBg, loadingScreen } = useMemo(() => {
+    const defaultOverrides2 = getOveriides({
+      theme,
+      colorConfig,
+      isMobile
+    });
+    const overrides2 = { ...defaultOverrides2.overrides, ...customerOverrides };
+    const studiesOverrides2 = {
+      ...defaultOverrides2.studiesOverrides,
+      ...customerStudiesOverrides
+    };
+    const configHash2 = getOverridesConfigHash(
+      theme,
+      overrides2,
+      studiesOverrides2
+    );
+    const toolbarBg2 = cssVariables.chartBG;
+    const loadingScreen2 = customerLoadingScreen ?? {
+      backgroundColor: colorConfig.chartBG,
+      foregroundColor: cssVariables.primary
+    };
+    return {
+      overrides: overrides2,
+      studiesOverrides: studiesOverrides2,
+      configHash: configHash2,
+      toolbarBg: toolbarBg2,
+      loadingScreen: loadingScreen2
+    };
+  }, [
+    theme,
+    colorConfig,
+    isMobile,
+    customerOverrides,
+    customerStudiesOverrides,
+    customerLoadingScreen
+  ]);
   useEffect(() => {
     if (!symbol) {
       return;
@@ -4177,13 +4483,6 @@ function useTradingviewScript(props) {
     if (!chartingLibrarySciprtReady || !tradingViewScriptSrc) {
       return;
     }
-    const defaultOverrides = getOveriides(colorConfig, isMobile);
-    const overrides = customerOverrides ? Object.assign({}, defaultOverrides.overrides, customerOverrides) : defaultOverrides.overrides;
-    const studiesOverrides = customerStudiesOverrides ? Object.assign(
-      {},
-      defaultOverrides.studiesOverrides,
-      customerStudiesOverrides
-    ) : defaultOverrides.studiesOverrides;
     if (chartRef.current) {
       const options = {
         // fullscreen: fullscreen ?? false,
@@ -4196,8 +4495,9 @@ function useTradingviewScript(props) {
         libraryPath,
         customCssUrl: tradingViewCustomCssUrl,
         interval: interval ?? "1",
-        theme: theme ?? "dark",
-        loadingScreen: loadingScreen ?? {},
+        theme,
+        loadingScreen,
+        toolbarBg,
         overrides,
         studiesOverrides,
         datafeed: new Datafeed(apiBaseUrl, ws),
@@ -4215,7 +4515,7 @@ function useTradingviewScript(props) {
       };
       const chartProps = {
         options,
-        chartKey: getChartKey(isMobile),
+        chartKey: getChartLocalStorageKey(`${configHash}`, isMobile),
         mode,
         onClick: () => {
         },
@@ -4228,16 +4528,20 @@ function useTradingviewScript(props) {
       chart.current?.remove();
     };
   }, [
-    chartingLibrarySciprtReady,
     isMobile,
     mode,
     chart,
     chartRef,
     chartingLibrarySciprtReady,
     tradingViewScriptSrc,
-    colorConfig,
     locale,
     localeCode,
+    theme,
+    overrides,
+    studiesOverrides,
+    configHash,
+    loadingScreen,
+    toolbarBg,
     customIndicatorsGetter
   ]);
   useEffect(() => {
@@ -4426,7 +4730,10 @@ var TradingviewUI = forwardRef((props, ref) => {
     "div",
     {
       ref,
-      className: cn("oui-relative oui-size-full", props.classNames?.root),
+      className: cn(
+        "oui-tradingview-root oui-relative oui-size-full",
+        props.classNames?.root
+      ),
       children: !tradingViewScriptSrc ? /* @__PURE__ */ jsx(NoTradingview, {}) : /* @__PURE__ */ jsxs(
         "div",
         {