@orderly.network/ui-tradingview 2.12.0 → 2.12.1

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 { 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, 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';
 
@@ -2388,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,
@@ -3365,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();
@@ -3379,7 +3392,7 @@ var TPSLService = class {
       },
       showAdvancedTPSLDialog: (options) => {
         this.showAdvancedTPSLDialog({
-          type: pnl.gt(0) ? "tp" : "sl",
+          type,
           triggerPrice: params.price,
           qty: options.qty
         });
@@ -3401,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;
@@ -3456,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([
@@ -3724,7 +3738,9 @@ function useCreateRenderer(symbol, displayControlSetting, marginMode) {
         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);