@orderly.network/ui-tradingview 2.10.2 → 2.11.0-alpha.0

package/dist/index.mjs

@@ -2,7 +2,7 @@ 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, 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 { 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 { Decimal, commify, getTrailingStopPrice, getPrecisionByNumber } from '@orderly.network/utils';
 import { startOfSecond, startOfMinute, startOfHour, startOfDay, startOfMonth, startOfYear, startOfWeek } from 'date-fns';
@@ -2489,7 +2489,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 Decimal(order.visible_quantity ?? order.visible ?? 0).eq(
         order.quantity
@@ -2915,7 +2916,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(
@@ -2924,12 +2928,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);
     }
@@ -3067,8 +3071,8 @@ var _OrderLineService = class _OrderLineService {
     }
     return commify(new 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;
     }
@@ -3093,7 +3097,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);
@@ -3163,7 +3170,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() {
@@ -3203,7 +3213,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 Decimal(position.unrealPnl);
@@ -3218,22 +3228,24 @@ var PositionLineService = class _PositionLineService {
     const sideColor = isPositiveBalance ? colorConfig.upColor : colorConfig.downColor;
     const price = new 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);
@@ -3587,14 +3599,20 @@ var Renderer = class {
 };
 
 // src/tradingviewAdapter/hooks/useCreateRenderer.ts
-function useCreateRenderer(symbol, displayControlSetting) {
+function useCreateRenderer(symbol, displayControlSetting, marginMode) {
   const [renderer, setRenderer] = useState();
   const rendererRef = useRef();
   const { state } = useAccount();
   const [unPnlPriceBasis] = useLocalStorage("unPnlPriceBasis", "markPrice");
-  const [{ rows: positions }, positionsInfo] = usePositionStream(symbol, {
+  const [{ rows }, positionsInfo] = usePositionStream(symbol, {
     calcMode: unPnlPriceBasis
   });
+  const positions = useMemo(() => {
+    if (!rows?.length) return [];
+    return rows.filter(
+      (item) => item.symbol === symbol && (marginMode == null || item.margin_mode === marginMode)
+    );
+  }, [rows, symbol, marginMode]);
   const [pendingOrders] = useOrderStream({
     status: OrderStatus.INCOMPLETE,
     symbol
@@ -3633,7 +3651,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,
@@ -3644,7 +3662,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);
@@ -3699,9 +3717,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;
@@ -4284,6 +4300,7 @@ function useTradingviewScript(props) {
       watchOrderbook: true
     }
   );
+  const { marginMode } = useMarginModeBySymbol(symbol ?? "");
   const [displayControlState, setDisplayControlState] = useState(() => {
     const displaySettingInfo = localStorage.getItem(
       TradingViewSDKLocalstorageKey.displayControlSetting
@@ -4374,7 +4391,8 @@ function useTradingviewScript(props) {
   });
   const [createRenderer, removeRenderer] = useCreateRenderer(
     symbol,
-    displayControlState
+    displayControlState,
+    marginMode
   );
   const onFullScreenChange = () => {
     if (fullscreen) {