@orderly.network/ui-tradingview 3.0.0-beta.0 → 3.0.0-beta.2

package/dist/index.mjs

@@ -3,7 +3,7 @@ import React3, { forwardRef, useRef, useState, useMemo, useEffect, useCallback }
 import { useTranslation, Trans, useLocaleCode, i18n } from '@orderly.network/i18n';
 import { injectable, cn, Flex, Divider, useScreen, useOrderlyTheme, Box, useThemeAttribute, toast, modal, DropdownMenuRoot, DropdownMenuTrigger, DropdownMenuPortal, DropdownMenuContent, Text, Switch } from '@orderly.network/ui';
 import { useMediaQuery, useConfig, useAccount, useSymbolsInfo, useLocalStorage, useOrderEntry_deprecated, useMarginModeBySymbol, useWS, usePositionStream, useOrderStream, useEventEmitter } from '@orderly.network/hooks';
-import { MEDIA_TABLET, OrderSide, TradingviewFullscreenKey, OrderType, AccountStatusEnum, OrderStatus, ORDER_ENTRY_EST_LIQ_PRICE_CHANGE } from '@orderly.network/types';
+import { MEDIA_TABLET, OrderSide, TradingviewFullscreenKey, OrderType, AccountStatusEnum, OrderStatus, ORDER_ENTRY_EST_LIQ_PRICE_CHANGE, MarginMode } from '@orderly.network/types';
 import { Decimal, commify, getTrailingStopPrice, getPrecisionByNumber } from '@orderly.network/utils';
 import { startOfSecond, startOfMinute, startOfHour, startOfDay, startOfMonth, startOfYear, startOfWeek } from 'date-fns';
 
@@ -658,6 +658,10 @@ var init_displayControl_desktop = __esm({
           {
             label: t("orderEntry.orderType.trailingStop"),
             id: "trailingStop"
+          },
+          {
+            label: t("tradingView.displayControl.liquidationPrice"),
+            id: "liquidationPrice"
           }
         ];
       }, [t]);
@@ -719,7 +723,7 @@ var init_displayControl_desktop = __esm({
                         {
                           className: 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
                         }
@@ -728,7 +732,7 @@ var init_displayControl_desktop = __esm({
                         Switch,
                         {
                           className: "oui-h-4 oui-w-8",
-                          checked: displayControlState[item.id],
+                          checked: displayControlState[item.id] ?? true,
                           onCheckedChange: (checked) => {
                             changeDisplayControlState({
                               ...displayControlState,
@@ -793,8 +797,10 @@ var init_displayControl_mobile = __esm({
               label: t("orderEntry.orderType.trailingStop"),
               id: "trailingStop"
             },
-            // placeholder
-            {}
+            {
+              label: t("tradingView.displayControl.liquidationPrice"),
+              id: "liquidationPrice"
+            }
           ]
         ];
       }, [t]);
@@ -847,7 +853,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) {
@@ -860,7 +866,7 @@ var init_displayControl_mobile = __esm({
                   },
                   children: item.id && /* @__PURE__ */ jsxs(Fragment, { children: [
                     /* @__PURE__ */ jsx("div", { children: item.label }),
-                    props.displayControlState[item.id] ? /* @__PURE__ */ jsx(SelectedIcon, { className: "oui-size-3" }) : /* @__PURE__ */ jsx(UnSelectIcon, { className: "oui-size-3" })
+                    props.displayControlState[item.id] ?? true ? /* @__PURE__ */ jsx(SelectedIcon, { className: "oui-size-3" }) : /* @__PURE__ */ jsx(UnSelectIcon, { className: "oui-size-3" })
                   ] })
                 },
                 item.id || index
@@ -2382,13 +2388,22 @@ var getTpslEstPnl = (tpslOrder, position) => {
     tpslOrder.type === "CLOSE_POSITION" /* CLOSE_POSITION */ ? position.balance : tpslOrder.quantity
   );
   const sideFlag = tpslOrder.side === "SELL" /* SELL */ ? 1 : -1;
-  const openPrice = position.open.toString();
-  const estPnl = new Decimal(tpslOrder.trigger_price).minus(openPrice ?? 0).times(quantity).times(sideFlag).toString();
-  return { estPnl, quantity, openPrice };
+  const priceRef = position.open;
+  const estPnl = new Decimal(tpslOrder.trigger_price).minus(priceRef).times(quantity).times(sideFlag).toString();
+  return { estPnl, quantity, openPrice: priceRef };
 };
 var formatPnl = (pnl) => {
   return pnl !== void 0 && pnl !== "" ? new Decimal(pnl).todp(EST_TPSL_PNL_DECIMAL, Decimal.ROUND_FLOOR) : textDash;
 };
+var getPositionSide = (balance) => {
+  return balance >= 0 ? "LONG" /* LONG */ : "SHORT" /* SHORT */;
+};
+var determineTpslType = (targetPrice, markPrice, positionSide) => {
+  if (positionSide === "LONG" /* LONG */) {
+    return targetPrice > markPrice ? "tp" : "sl";
+  }
+  return targetPrice < markPrice ? "tp" : "sl";
+};
 function useCancelOrder() {
   const [
     pendingOrders,
@@ -2741,41 +2756,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;
@@ -2784,41 +2800,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) {
-      line.setPrice(price);
-      this.updateLineLabel();
+      this.estimatedLine = line;
+      this.updateLineLabel(line, true);
     }
+    return line;
   }
-  removeLine() {
-    if (this.line) {
-      this.line.remove();
-      this.line = null;
+  /** 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) {
+      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);
+  }
+  /** Remove the estimated line if it exists. */
+  removeEstimatedLine() {
+    if (this.estimatedLine) {
+      this.estimatedLine.remove();
+      this.estimatedLine = null;
+    }
+  }
+  /** Remove all position lines if they exist. */
+  removePositionLines() {
+    this.positionLines.forEach((line) => line.remove());
+    this.positionLines = [];
   }
-  /** 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);
+  /**
+   * 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.t(key);
+    if (!isEstimated && marginMode) {
+      const marginModeLabel = 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);
   }
 };
 
@@ -3234,7 +3302,11 @@ var PositionLineService = class _PositionLineService {
     );
     const quantity = _PositionLineService.getPositionQuantity(position.balance);
     if (needDrawMarginMode) {
-      text += ` (${position.marginMode === "ISOLATED" ? "Isolated" : "Cross"})`;
+      const marginModeLabel = 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) {
@@ -3302,11 +3374,15 @@ var TPSLService = class {
     }
   }
   showTPSLDialog(params) {
-    const pnl = new Decimal(params.price).minus(this.currentPosition.open).mul(this.currentPosition?.balance ?? 0);
+    const markPrice = this.currentPosition?.markPrice ?? this.currentPosition.open;
+    const positionSide = getPositionSide(this.currentPosition.balance ?? 0);
+    const type = determineTpslType(params.price, markPrice, positionSide);
+    const marginMode = this.currentPosition?.marginMode ?? MarginMode.CROSS;
     modal.show("TPSLSimpleDialogId", {
-      title: pnl.gt(0) ? i18n.t("tpsl.TPOrderConfirm") : i18n.t("tpsl.SLOrderConfirm"),
+      title: type === "tp" ? i18n.t("tpsl.TPOrderConfirm") : i18n.t("tpsl.SLOrderConfirm"),
       triggerPrice: params.price,
-      type: pnl.gt(0) ? "tp" : "sl",
+      type,
+      marginMode,
       symbol: this.currentPosition.symbol,
       onComplete: () => {
         this.clearTPSLElements();
@@ -3316,7 +3392,7 @@ var TPSLService = class {
       },
       showAdvancedTPSLDialog: (options) => {
         this.showAdvancedTPSLDialog({
-          type: pnl.gt(0) ? "tp" : "sl",
+          type,
           triggerPrice: params.price,
           qty: options.qty
         });
@@ -3338,29 +3414,27 @@ var TPSLService = class {
     triggerPrice,
     qty
   }) {
+    const onCloseHandler = () => {
+      this.clearTPSLElements();
+      this.chart.setScrollEnabled(true);
+      this.chart.setZoomEnabled(true);
+      this.interactiveMode = 0 /* NONE */;
+    };
     modal.show("TPSLDialogId", {
       withTriggerPrice: true,
       type,
       triggerPrice,
       symbol: this.currentPosition?.symbol,
       qty,
-      onComplete: () => {
-        this.clearTPSLElements();
-        this.chart.setScrollEnabled(true);
-        this.chart.setZoomEnabled(true);
-        this.interactiveMode = 0 /* NONE */;
-      }
+      position: this.currentPosition,
+      onComplete: onCloseHandler,
+      onCancel: onCloseHandler
     }).then(
       () => {
       },
       (err) => {
       }
-    ).finally(() => {
-      this.clearTPSLElements();
-      this.chart.setScrollEnabled(true);
-      this.chart.setZoomEnabled(true);
-      this.interactiveMode = 0 /* NONE */;
-    });
+    ).finally(onCloseHandler);
   }
   updatePositions(positions) {
     this.lastPositions = positions;
@@ -3393,13 +3467,16 @@ var TPSLService = class {
   }
   drawTPSL(params) {
     const { price } = params;
-    const pnl = new Decimal(price).minus(this.currentPosition.open).mul(this.currentPosition?.balance ?? 0);
+    const markPrice = this.currentPosition?.markPrice ?? this.currentPosition.open;
+    const positionSide = getPositionSide(this.currentPosition.balance ?? 0);
+    const type = determineTpslType(price, markPrice, positionSide);
+    const pnl = new Decimal(price).minus(markPrice).mul(this.currentPosition?.balance ?? 0);
     const { tpslOrderLine, verticalLine } = this.ensureTPSLElements({
       price,
       pnl
     });
-    const direction = pnl.gt(0) ? i18n.t("tpsl.tp") : i18n.t("tpsl.sl");
-    const color = pnl.gt(0) ? this.broker.colorConfig.upColor : this.broker.colorConfig.downColor;
+    const direction = type === "tp" ? i18n.t("tpsl.tp") : i18n.t("tpsl.sl");
+    const color = type === "tp" ? this.broker.colorConfig.upColor : this.broker.colorConfig.downColor;
     tpslOrderLine?.setText(`${direction} ${pnl.toDecimalPlaces(2).toNumber()}`).setBodyTextColor(color).setBodyBorderColor(color).setLineColor(color);
     if (this.tpslVerticalLineTime) {
       verticalLine?.setPoints([
@@ -3552,7 +3629,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);
   }
@@ -3609,9 +3686,7 @@ function useCreateRenderer(symbol, displayControlSetting, marginMode) {
   });
   const positions = 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] = useOrderStream({
     status: OrderStatus.INCOMPLETE,
@@ -3656,13 +3731,16 @@ 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,
         interest: 0,
         unrealPnlDecimal: 2,
         basePriceDecimal: 4,
-        marginMode: item.margin_mode
+        marginMode: item.margin_mode,
+        margin_mode: item.margin_mode,
+        markPrice: item.mark_price
       };
     });
     renderer?.renderPositions(positionList);
@@ -3682,11 +3760,24 @@ function useCreateRenderer(symbol, displayControlSetting, marginMode) {
   }, [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 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
     });
   }, [
@@ -3694,7 +3785,8 @@ function useCreateRenderer(symbol, displayControlSetting, marginMode) {
     positions,
     symbol,
     estimatedLiqPrice,
-    displayControlSetting?.position
+    displayControlSetting?.position,
+    displayControlSetting?.liquidationPrice
   ]);
   useEffect(() => {
     if (!displayControlSetting || !displayControlSetting.buySell) {
@@ -4315,7 +4407,8 @@ function useTradingviewScript(props) {
       stopOrders: true,
       tpsl: true,
       positionTpsl: true,
-      trailingStop: true
+      trailingStop: true,
+      liquidationPrice: true
     };
   });
   const [interval, setInterval] = useState(() => {