@orderly.network/ui-tradingview 2.11.3-rc.0 → 2.12.0-alpha.0

package/dist/index.d.mts

@@ -15529,6 +15529,7 @@ interface DisplayControlSettingInterface {
     tpsl: boolean;
     positionTpsl: boolean;
     trailingStop: boolean;
+    liquidationPrice: boolean;
 }
 
 declare const TradingviewWidget: React$1.ForwardRefExoticComponent<TradingviewWidgetPropsInterface & React$1.RefAttributes<HTMLDivElement>>;

package/dist/index.d.ts

@@ -15529,6 +15529,7 @@ interface DisplayControlSettingInterface {
     tpsl: boolean;
     positionTpsl: boolean;
     trailingStop: boolean;
+    liquidationPrice: boolean;
 }
 
 declare const TradingviewWidget: React$1.ForwardRefExoticComponent<TradingviewWidgetPropsInterface & React$1.RefAttributes<HTMLDivElement>>;

package/dist/index.js

@@ -664,6 +664,10 @@ var init_displayControl_desktop = __esm({
           {
             label: t("orderEntry.orderType.trailingStop"),
             id: "trailingStop"
+          },
+          {
+            label: t("tradingView.displayControl.liquidationPrice"),
+            id: "liquidationPrice"
           }
         ];
       }, [t]);
@@ -725,7 +729,7 @@ var init_displayControl_desktop = __esm({
                         {
                           className: ui.cn(
                             "oui-text-sm oui-text-base-contrast-80",
-                            !displayControlState[item.id] && "oui-text-base-contrast-36"
+                            !(displayControlState[item.id] ?? true) && "oui-text-base-contrast-36"
                           ),
                           children: item.label
                         }
@@ -734,7 +738,7 @@ var init_displayControl_desktop = __esm({
                         ui.Switch,
                         {
                           className: "oui-h-4 oui-w-8",
-                          checked: displayControlState[item.id],
+                          checked: displayControlState[item.id] ?? true,
                           onCheckedChange: (checked) => {
                             changeDisplayControlState({
                               ...displayControlState,
@@ -799,8 +803,10 @@ var init_displayControl_mobile = __esm({
               label: t("orderEntry.orderType.trailingStop"),
               id: "trailingStop"
             },
-            // placeholder
-            {}
+            {
+              label: t("tradingView.displayControl.liquidationPrice"),
+              id: "liquidationPrice"
+            }
           ]
         ];
       }, [t]);
@@ -853,7 +859,7 @@ var init_displayControl_mobile = __esm({
                     "oui-flex oui-h-6 oui-w-full oui-items-center oui-justify-between",
                     "oui-rounded oui-px-2 oui-text-2xs",
                     item.id && "oui-bg-base-5",
-                    props.displayControlState[item.id] ? "oui-text-base-contrast" : "oui-text-base-contrast-36"
+                    props.displayControlState[item.id] ?? true ? "oui-text-base-contrast" : "oui-text-base-contrast-36"
                   ),
                   onClick: () => {
                     if (!item.id) {
@@ -866,7 +872,7 @@ var init_displayControl_mobile = __esm({
                   },
                   children: item.id && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
                     /* @__PURE__ */ jsxRuntime.jsx("div", { children: item.label }),
-                    props.displayControlState[item.id] ? /* @__PURE__ */ jsxRuntime.jsx(SelectedIcon, { className: "oui-size-3" }) : /* @__PURE__ */ jsxRuntime.jsx(UnSelectIcon, { className: "oui-size-3" })
+                    props.displayControlState[item.id] ?? true ? /* @__PURE__ */ jsxRuntime.jsx(SelectedIcon, { className: "oui-size-3" }) : /* @__PURE__ */ jsxRuntime.jsx(UnSelectIcon, { className: "oui-size-3" })
                   ] })
                 },
                 item.id || index
@@ -2747,41 +2753,42 @@ var ExecutionService = class _ExecutionService {
 };
 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;
+    /** Single temporary line driven by Order Entry estimated liquidation price. */
+    this.estimatedLine = null;
+    /** Persistent lines driven by current positions (can be multiple, e.g. cross + isolated). */
+    this.positionLines = [];
     this.instance = instance;
     this.broker = broker;
   }
   /**
-   * Render or update the liquidation line. Call when position or estimated liq. price changes.
+   * Render or update liquidation lines. Call when position or estimated liq. price changes.
    */
   renderLiquidationLine(params) {
-    const { positionLiqPrice, estimatedLiqPrice } = params;
+    const { positionLiqItems, estimatedLiqPrice } = params;
     const hasValidEst = estimatedLiqPrice != null && Number.isFinite(estimatedLiqPrice);
-    const hasValidPosition = positionLiqPrice != null && Number.isFinite(positionLiqPrice);
+    const validPositionItems = (positionLiqItems ?? []).filter(
+      (item) => item != null && item.price != null && Number.isFinite(item.price)
+    );
     if (hasValidEst) {
-      this.isUsingEstimatedPrice = true;
-      this.setLinePrice(estimatedLiqPrice);
-      this.line?.setLineStyle(1);
+      this.removePositionLines();
+      this.setEstimatedLinePrice(estimatedLiqPrice);
+      this.estimatedLine?.setLineStyle(1);
       return;
     }
-    if (hasValidPosition) {
-      this.isUsingEstimatedPrice = false;
-      this.setLinePrice(positionLiqPrice);
-      this.line?.setLineStyle(0);
+    this.removeEstimatedLine();
+    if (validPositionItems.length > 0) {
+      this.renderPositionLines(validPositionItems);
       return;
     }
-    this.removeLine();
+    this.removePositionLines();
   }
-  /** Remove the line (e.g. on destroy). */
+  /** Remove all liquidation lines (e.g. on destroy). */
   remove() {
-    this.removeLine();
+    this.removeEstimatedLine();
+    this.removePositionLines();
   }
-  getOrCreateLine() {
-    if (this.line != null) {
-      return this.line;
-    }
+  /** Build a TradingView order line and apply shared style. */
+  createBaseLine() {
     try {
       const activeChart = this.instance.activeChart();
       if (!activeChart) return null;
@@ -2790,41 +2797,93 @@ var LiquidationLineService = class {
       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();
+      let line = orderLine.setCancellable(false).setLineLength(100).setEditable(false).setExtendLeft(true).setQuantity("").setLineStyle(0).setLineColor(lineColor).setBodyBorderColor(lineColor);
       if (colorConfig.chartBG) {
-        this.line = this.line.setBodyBackgroundColor(colorConfig.chartBG).setQuantityBackgroundColor(colorConfig.chartBG);
+        line = line.setBodyBackgroundColor(colorConfig.chartBG).setQuantityBackgroundColor(colorConfig.chartBG);
       }
       if (colorConfig.textColor) {
-        this.line = this.line.setBodyTextColor(colorConfig.textColor);
+        line = line.setBodyTextColor(colorConfig.textColor);
       }
       if (colorConfig.font) {
-        this.line = this.line.setBodyFont(colorConfig.font).setQuantityFont(colorConfig.font);
+        line = line.setBodyFont(colorConfig.font).setQuantityFont(colorConfig.font);
       }
-      return this.line;
+      return line;
     } catch {
       return null;
     }
   }
-  setLinePrice(price) {
-    const line = this.getOrCreateLine();
+  /** Get or create the single estimated liquidation line. */
+  getOrCreateEstimatedLine() {
+    if (this.estimatedLine != null) {
+      return this.estimatedLine;
+    }
+    const line = this.createBaseLine();
+    if (line) {
+      this.estimatedLine = line;
+      this.updateLineLabel(line, true);
+    }
+    return line;
+  }
+  /** Get or create one position liquidation line by index. */
+  getOrCreatePositionLine(index) {
+    if (this.positionLines[index] != null) {
+      return this.positionLines[index];
+    }
+    const line = this.createBaseLine();
     if (line) {
-      line.setPrice(price);
-      this.updateLineLabel();
+      this.positionLines[index] = line;
+      this.updateLineLabel(line, false);
+    }
+    return line;
+  }
+  /** Update estimated line price and metadata. */
+  setEstimatedLinePrice(price) {
+    const line = this.getOrCreateEstimatedLine();
+    if (!line) return;
+    line.setPrice(price);
+    this.updateLineLabel(line, true);
+  }
+  /** Sync position lines to input items (create/update/remove extra lines). */
+  renderPositionLines(items) {
+    for (let i = 0; i < items.length; i += 1) {
+      const line = this.getOrCreatePositionLine(i);
+      if (!line) continue;
+      line.setLineStyle(0);
+      line.setPrice(items[i].price);
+      this.updateLineLabel(line, false, items[i].marginMode, items[i].leverage);
     }
+    for (let i = items.length; i < this.positionLines.length; i += 1) {
+      this.positionLines[i]?.remove();
+    }
+    this.positionLines = this.positionLines.slice(0, items.length);
   }
-  removeLine() {
-    if (this.line) {
-      this.line.remove();
-      this.line = null;
+  /** Remove the estimated line if it exists. */
+  removeEstimatedLine() {
+    if (this.estimatedLine) {
+      this.estimatedLine.remove();
+      this.estimatedLine = 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.i18n.t(key);
-    this.line.setTooltip(label).setText(label);
+  /** Remove all position lines if they exist. */
+  removePositionLines() {
+    this.positionLines.forEach((line) => line.remove());
+    this.positionLines = [];
+  }
+  /**
+   * Ensure line tooltip/text reflect its source (estimated vs position + margin mode).
+   * When showing margin mode, we also append leverage (if available) right after it.
+   */
+  updateLineLabel(line, isEstimated, marginMode, leverage) {
+    const key = isEstimated ? "orderEntry.estLiqPrice" : "positions.column.liqPrice";
+    let label = i18n.i18n.t(key);
+    if (!isEstimated && marginMode) {
+      const marginModeLabel = i18n.i18n.t(
+        marginMode === "ISOLATED" ? "marginMode.isolated" : "marginMode.cross"
+      );
+      const leverageLabel = leverage != null && Number.isFinite(leverage) ? ` ${leverage}x` : "";
+      label += ` (${marginModeLabel}${leverageLabel})`;
+    }
+    line.setTooltip(label).setText(label);
   }
 };
 
@@ -3240,7 +3299,11 @@ var PositionLineService = class _PositionLineService {
     );
     const quantity = _PositionLineService.getPositionQuantity(position.balance);
     if (needDrawMarginMode) {
-      text += ` (${position.marginMode === "ISOLATED" ? "Isolated" : "Cross"})`;
+      const marginModeLabel = i18n.i18n.t(
+        position.marginMode === "ISOLATED" ? "marginMode.isolated" : "marginMode.cross"
+      );
+      const leverageLabel = position.leverage != null && Number.isFinite(position.leverage) ? ` ${position.leverage}x` : "";
+      text += ` (${marginModeLabel}${leverageLabel})`;
     }
     const line = this.positionLines[idx].setQuantity(quantity).setPrice(price).setCloseButtonIconColor(colorConfig.closeIcon).setCloseButtonBorderColor(sideColor).setBodyBackgroundColor(pnlColor).setQuantityTextColor(sideColor).setBodyBorderColor(pnlColor).setLineColor(sideColor).setQuantityBorderColor(sideColor).setText(text);
     if (colorConfig.closeIcon) {
@@ -3558,7 +3621,7 @@ var Renderer = class {
     this.orderLineService.updatePositions(positions);
     this.tpslService.updatePositions(positions);
   }
-  /** Update the single liquidation price line (position + optional estimated from Order Entry). */
+  /** Update liquidation price lines (positions + optional estimated from Order Entry). */
   renderLiquidationLine(params) {
     this.liquidationLineService.renderLiquidationLine(params);
   }
@@ -3615,9 +3678,7 @@ function useCreateRenderer(symbol, displayControlSetting, marginMode) {
   });
   const positions = React3.useMemo(() => {
     if (!rows?.length) return [];
-    return rows.filter(
-      (item) => item.symbol === symbol && (marginMode == null || item.margin_mode === marginMode)
-    );
+    return rows.filter((item) => item.symbol === symbol);
   }, [rows, symbol, marginMode]);
   const [pendingOrders] = hooks.useOrderStream({
     status: types.OrderStatus.INCOMPLETE,
@@ -3662,6 +3723,7 @@ function useCreateRenderer(symbol, displayControlSetting, marginMode) {
         symbol: item.symbol,
         open: item.average_open_price,
         balance: item.position_qty,
+        leverage: item.leverage,
         closablePosition: 9999,
         // @ts-ignore
         unrealPnl: item.unrealized_pnl ?? 0,
@@ -3688,11 +3750,24 @@ function useCreateRenderer(symbol, displayControlSetting, marginMode) {
   }, [ee, symbol]);
   React3.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 positionLiqItems = (positions ?? []).filter((p) => p.symbol === symbol).flatMap((p) => {
+      const price = p.est_liq_price;
+      const leverage = p.leverage;
+      if (price == null || !Number.isFinite(price)) {
+        return [];
+      }
+      return [
+        {
+          price,
+          marginMode: p.margin_mode,
+          leverage: leverage ?? void 0
+        }
+      ];
+    });
     const effectiveEstimatedLiqPrice = estimatedLiqPrice != null && Number.isFinite(estimatedLiqPrice) ? estimatedLiqPrice : null;
+    const showPositionLiqItems = displayControlSetting?.liquidationPrice !== false ? positionLiqItems : [];
     renderer.renderLiquidationLine({
-      positionLiqPrice,
+      positionLiqItems: showPositionLiqItems,
       estimatedLiqPrice: effectiveEstimatedLiqPrice
     });
   }, [
@@ -3700,7 +3775,8 @@ function useCreateRenderer(symbol, displayControlSetting, marginMode) {
     positions,
     symbol,
     estimatedLiqPrice,
-    displayControlSetting?.position
+    displayControlSetting?.position,
+    displayControlSetting?.liquidationPrice
   ]);
   React3.useEffect(() => {
     if (!displayControlSetting || !displayControlSetting.buySell) {
@@ -4321,7 +4397,8 @@ function useTradingviewScript(props) {
       stopOrders: true,
       tpsl: true,
       positionTpsl: true,
-      trailingStop: true
+      trailingStop: true,
+      liquidationPrice: true
     };
   });
   const [interval, setInterval] = React3.useState(() => {