@orderly.network/ui-tradingview 2.10.2 → 2.11.0

package/dist/index.js

@@ -2495,7 +2495,8 @@ function useEditOrder(onToast) {
         order_type: order.type,
         side: order.side,
         visible_quantity: 0,
-        reduce_only: order.reduce_only
+        reduce_only: order.reduce_only,
+        margin_mode: order.margin_mode
       };
       if (new utils.Decimal(order.visible_quantity ?? order.visible ?? 0).eq(
         order.quantity
@@ -2921,7 +2922,10 @@ var _OrderLineService = class _OrderLineService {
     this.cleanOldPendingOrders(this.pendingOrders);
     this.tpslCalService.prepareTpslPnlMap(this.pendingOrders);
     this.tpslCalService.prepareQuantityTpslNoMap(this.pendingOrders);
-    this.pendingOrders.forEach((order) => this.renderPendingOrder(order));
+    const needDrawMarginMode = this.pendingOrders.length > 1;
+    this.pendingOrders.forEach(
+      (order) => this.renderPendingOrder(order, needDrawMarginMode)
+    );
   }
   updatePositions(positions) {
     const changed = this.tpslCalService.recalculatePnl(
@@ -2930,12 +2934,12 @@ var _OrderLineService = class _OrderLineService {
     );
     this.pendingOrders.filter((order) => changed.includes(getOrderId(order))).forEach((order) => this.renderPendingOrder(order));
   }
-  renderPendingOrder(order) {
+  renderPendingOrder(order, needDrawMarginMode = false) {
     const orderId = _OrderLineService.getOrderId(order);
     if (!orderId) {
       return;
     }
-    const orderLine = this.drawOrderLine(orderId, order);
+    const orderLine = this.drawOrderLine(orderId, order, needDrawMarginMode);
     if (orderLine) {
       this.pendingOrderLineMap.set(orderId, orderLine);
     }
@@ -3073,8 +3077,8 @@ var _OrderLineService = class _OrderLineService {
     }
     return utils.commify(new utils.Decimal(pendingOrder.quantity).toString());
   }
-  drawOrderLine(orderId, pendingOrder) {
-    const text = isTpslOrder(pendingOrder) ? this.getTPSLText(pendingOrder) : _OrderLineService.getText(pendingOrder);
+  drawOrderLine(orderId, pendingOrder, needDrawMarginMode = false) {
+    let text = isTpslOrder(pendingOrder) ? this.getTPSLText(pendingOrder) : _OrderLineService.getText(pendingOrder);
     if (text === null) {
       return null;
     }
@@ -3099,7 +3103,10 @@ var _OrderLineService = class _OrderLineService {
     const lineLength = 100;
     const quantity = this.getOrderQuantity(pendingOrder);
     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 (needDrawMarginMode) {
+      text += ` (${pendingOrder.margin_mode === "ISOLATED" ? "Isolated" : "Cross"})`;
+    }
+    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);
@@ -3169,7 +3176,10 @@ var PositionLineService = class _PositionLineService {
       this.removePositions();
       this.currentSymbol = positions[0].symbol;
     }
-    positions.forEach((position, idx) => this.drawPositionLine(position, idx));
+    const needDrawMarginMode = positions.length > 1;
+    positions.forEach(
+      (position, idx) => this.drawPositionLine(position, idx, needDrawMarginMode)
+    );
     this.lastPositions = positions;
   }
   getBasePositionLine() {
@@ -3209,7 +3219,7 @@ var PositionLineService = class _PositionLineService {
       delete this.positionLines[Number(lineId)];
     });
   }
-  drawPositionLine(position, idx) {
+  drawPositionLine(position, idx, needDrawMarginMode = false) {
     const colorConfig = this.broker.colorConfig;
     const isPositiveBalance = position.balance >= 0;
     const pnlDecimal = new utils.Decimal(position.unrealPnl);
@@ -3224,22 +3234,24 @@ var PositionLineService = class _PositionLineService {
     const sideColor = isPositiveBalance ? colorConfig.upColor : colorConfig.downColor;
     const price = new utils.Decimal(position.open).toNumber();
     this.positionLines[idx] = this.positionLines[idx] ?? this.getBasePositionLine();
-    let line = this.positionLines[idx].setQuantity(_PositionLineService.getPositionQuantity(position.balance)).setPrice(price).setText(
-      _PositionLineService.getPositionPnL(
-        position.unrealPnl,
-        position.unrealPnlDecimal
-      )
+    let text = _PositionLineService.getPositionPnL(
+      position.unrealPnl,
+      position.unrealPnlDecimal
     );
+    const quantity = _PositionLineService.getPositionQuantity(position.balance);
+    if (needDrawMarginMode) {
+      text += ` (${position.marginMode === "ISOLATED" ? "Isolated" : "Cross"})`;
+    }
+    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) {
-      line = line.setCloseButtonIconColor(colorConfig.closeIcon);
+      line.setCloseButtonIconColor(colorConfig.closeIcon);
     }
     if (sideColor) {
-      line = line.setCloseButtonBorderColor(sideColor).setQuantityTextColor(sideColor).setLineColor(sideColor).setQuantityBorderColor(sideColor);
+      line.setCloseButtonBorderColor(sideColor).setQuantityTextColor(sideColor).setLineColor(sideColor).setQuantityBorderColor(sideColor);
     }
     if (pnlColor) {
-      line = line.setBodyBackgroundColor(pnlColor).setBodyBorderColor(pnlColor);
+      line.setBodyBackgroundColor(pnlColor).setBodyBorderColor(pnlColor);
     }
-    this.positionLines[idx] = line;
     if (this.broker.mode !== 3 /* MOBILE */) {
       this.positionLines[idx].onClose(null, () => {
         this.broker.closePosition(position);
@@ -3593,14 +3605,20 @@ var Renderer = class {
 };
 
 // src/tradingviewAdapter/hooks/useCreateRenderer.ts
-function useCreateRenderer(symbol, displayControlSetting) {
+function useCreateRenderer(symbol, displayControlSetting, marginMode) {
   const [renderer, setRenderer] = React3.useState();
   const rendererRef = React3.useRef();
   const { state } = hooks.useAccount();
   const [unPnlPriceBasis] = hooks.useLocalStorage("unPnlPriceBasis", "markPrice");
-  const [{ rows: positions }, positionsInfo] = hooks.usePositionStream(symbol, {
+  const [{ rows }, positionsInfo] = hooks.usePositionStream(symbol, {
     calcMode: unPnlPriceBasis
   });
+  const positions = React3.useMemo(() => {
+    if (!rows?.length) return [];
+    return rows.filter(
+      (item) => item.symbol === symbol && (marginMode == null || item.margin_mode === marginMode)
+    );
+  }, [rows, symbol, marginMode]);
   const [pendingOrders] = hooks.useOrderStream({
     status: types.OrderStatus.INCOMPLETE,
     symbol
@@ -3639,7 +3657,7 @@ function useCreateRenderer(symbol, displayControlSetting) {
       renderer?.renderPositions([]);
       return;
     }
-    const positionList = (positions ?? []).filter((_) => _.symbol === symbol).map((item) => {
+    const positionList = positions.map((item) => {
       return {
         symbol: item.symbol,
         open: item.average_open_price,
@@ -3650,7 +3668,7 @@ function useCreateRenderer(symbol, displayControlSetting) {
         interest: 0,
         unrealPnlDecimal: 2,
         basePriceDecimal: 4,
-        est_liq_price: item.est_liq_price ?? null
+        marginMode: item.margin_mode
       };
     });
     renderer?.renderPositions(positionList);
@@ -3705,9 +3723,7 @@ function useCreateRenderer(symbol, displayControlSetting) {
       renderer?.renderPendingOrders([]);
       return;
     }
-    const symbolPosition = (positions ?? []).find(
-      (item) => item.symbol === symbol
-    );
+    const symbolPosition = positions.find((item) => item.symbol === symbol);
     pendingOrders?.forEach((order) => {
       if (symbol !== order.symbol) {
         return;
@@ -4290,6 +4306,7 @@ function useTradingviewScript(props) {
       watchOrderbook: true
     }
   );
+  const { marginMode } = hooks.useMarginModeBySymbol(symbol ?? "");
   const [displayControlState, setDisplayControlState] = React3.useState(() => {
     const displaySettingInfo = localStorage.getItem(
       TradingViewSDKLocalstorageKey.displayControlSetting
@@ -4380,7 +4397,8 @@ function useTradingviewScript(props) {
   });
   const [createRenderer, removeRenderer] = useCreateRenderer(
     symbol,
-    displayControlState
+    displayControlState,
+    marginMode
   );
   const onFullScreenChange = () => {
     if (fullscreen) {