@orderly.network/ui-orders 2.8.5 → 2.8.6

package/dist/index.mjs

@@ -1,12 +1,12 @@
 import React2, { forwardRef, useMemo, useEffect, useRef, useImperativeHandle, useCallback, useState, createContext, memo, useContext } from 'react';
-import { useSymbolsInfo, useOrderStream, useLocalStorage, utils, useThrottledCallback, useMutation, useSWRConfig, useAccount, unstable_serialize, useMemoizedFn, getMinNotional, findTPSLFromOrder, findTPSLOrderPriceFromOrder, useMaxQty, useConfig, useOrderEntity, useReferralInfo, useLeverageBySymbol } from '@orderly.network/hooks';
+import { useSymbolsInfo, useOrderStream, useLocalStorage, utils, useThrottledCallback, useMutation, useSWRConfig, useAccount, unstable_serialize, useMemoizedFn, getMinNotional, findTPSLFromOrder, findTPSLOrderPriceFromOrder, useMaxQty, useConfig, useTpslPriceChecker, useOrderEntity, useReferralInfo, useLeverageBySymbol } from '@orderly.network/hooks';
 import { useTranslation, Trans, i18n } from '@orderly.network/i18n';
 import { OrderStatus, AlgoOrderRootType, AlgoOrderType, OrderSide, OrderType, EMPTY_LIST } from '@orderly.network/types';
 import { formatSymbol, Decimal, commify, commifyOptional, getTrailingStopPrice, formatNum } from '@orderly.network/utils';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { usePagination, modal, Text, Button, ThrottledButton, CloseIcon, cn, Flex, Input, inputFormatter, Slider, DataFilter, TableFeatures, Grid, Picker, ListView, Tabs, TabPanel, Badge, Tooltip, EditIcon, toast as toast$1, Popover, PopoverRoot, PopoverTrigger, PopoverContent, Divider, ShareIcon, CheckIcon, Statistic, SimpleDialog, useModal, Checkbox } from '@orderly.network/ui';
 import { useDataTap, useOrderEntryFormErrorMsg } from '@orderly.network/react-app';
-import { PositionTPSLPopover, PositionTPSLSheet } from '@orderly.network/ui-tpsl';
+import { PositionTPSLPopover, CloseToLiqPriceIcon, PositionTPSLSheet } from '@orderly.network/ui-tpsl';
 import { format, subDays, differenceInDays } from 'date-fns';
 import { SharePnLDialogId } from '@orderly.network/ui-share';
 import { AuthGuardDataTable } from '@orderly.network/ui-connector';
@@ -370,7 +370,7 @@ var init_bracketOrderPrice = __esm({
         }
         return utils.findTPSLFromOrder(props.order.child_orders[0]);
       }, [props.order]);
-      const { pnl, roi } = calcBracketRoiAndPnL(order);
+      const { pnl } = calcBracketRoiAndPnL(order);
       if (!tp_trigger_price && !sl_trigger_price) {
         return "--";
       }
@@ -2130,6 +2130,12 @@ var init_tpslTriggerPrice = __esm({
     init_tpslOrderRowContext();
     OrderTriggerPrice = () => {
       const { sl_trigger_price, tp_trigger_price, order, position } = useTPSLOrderRowContext();
+      const positionSide = position?.position_qty && position.position_qty > 0 ? OrderSide.BUY : OrderSide.SELL;
+      const slPriceError = useTpslPriceChecker({
+        slPrice: sl_trigger_price?.toString() ?? void 0,
+        liqPrice: position?.est_liq_price ?? null,
+        side: positionSide
+      });
       return /* @__PURE__ */ jsx(
         TPSLTriggerPrice,
         {
@@ -2138,6 +2144,7 @@ var init_tpslTriggerPrice = __esm({
           direction: "column",
           order,
           position,
+          slPriceError,
           tooltip: true
         }
       );
@@ -2227,15 +2234,24 @@ var init_tpslTriggerPrice = __esm({
               Text.numeral,
               {
                 className: cn(
-                  "oui-text-trade-loss oui-gap-0 oui-decoration-white/20 oui-border-b oui-border-dashed oui-border-base-contrast-12"
+                  "oui-text-trade-loss oui-gap-0 oui-decoration-white/20 oui-border-b oui-border-dashed oui-border-base-contrast-12",
+                  "oui-flex oui-items-center"
                 ),
+                as: "div",
                 rule: "price",
                 dp: symbolInfo[order.symbol]("quote_dp", 2),
                 children: props.stopLossPrice,
                 prefix: !props.takeProfitPrice || direction === "column" ? /* @__PURE__ */ jsxs("span", { className: "oui-text-base-contrast-54", children: [
                   `${t("tpsl.sl")} -`,
                   "\xA0"
-                ] }) : ""
+                ] }) : "",
+                suffix: /* @__PURE__ */ jsx(
+                  CloseToLiqPriceIcon,
+                  {
+                    slPriceError: props.slPriceError,
+                    className: "oui-ml-1"
+                  }
+                )
               },
               "sl"
             )
@@ -2247,7 +2263,13 @@ var init_tpslTriggerPrice = __esm({
           children.splice(1, 0, /* @__PURE__ */ jsx("span", { children: "/" }, "split"));
         }
         return children;
-      }, [props.takeProfitPrice, props.stopLossPrice, order?.symbol, t]);
+      }, [
+        props.takeProfitPrice,
+        props.stopLossPrice,
+        order?.symbol,
+        t,
+        props.slPriceError
+      ]);
       const content = /* @__PURE__ */ jsx(
         "div",
         {
@@ -3414,8 +3436,14 @@ var init_items = __esm({
       );
     };
     SLTrigger = (props) => {
-      const { sl_trigger_price, slPnL } = useTPSLOrderRowContext();
+      const { sl_trigger_price, slPnL, position: item } = useTPSLOrderRowContext();
       const { t } = useTranslation();
+      const side2 = (item?.position_qty ?? 0) > 0 ? OrderSide.BUY : OrderSide.SELL;
+      const slPriceError = useTpslPriceChecker({
+        slPrice: sl_trigger_price?.toString() ?? void 0,
+        liqPrice: item?.est_liq_price ?? null,
+        side: side2
+      });
       return /* @__PURE__ */ jsx(
         Statistic,
         {
@@ -3448,10 +3476,15 @@ var init_items = __esm({
                 Text.numeral,
                 {
                   dp: props.quote_dp,
+                  as: "div",
                   rm: Decimal.ROUND_DOWN,
                   color: "sell",
                   padding: false,
-                  className: sl_trigger_price ? "oui-border-b oui-border-dashed oui-border-base-contrast-12" : void 0,
+                  suffix: /* @__PURE__ */ jsx(CloseToLiqPriceIcon, { slPriceError }),
+                  className: cn(
+                    sl_trigger_price ? "oui-border-b oui-border-dashed oui-border-base-contrast-12" : void 0,
+                    "oui-flex oui-items-center"
+                  ),
                   children: sl_trigger_price ?? "--"
                 }
               )
@@ -4540,7 +4573,7 @@ var init_editSheet_ui = __esm({
       const { t } = useTranslation();
       const { getErrorMsg } = useOrderEntryFormErrorMsg(errors);
       const disabled = !props.isChanged || Object.keys(errors).length > 0 || // when activated price is not empty, the activated price input should not be empty
-      item.activated_price && !formattedOrder.activated_price;
+      !!item.activated_price && !formattedOrder.activated_price;
       const header = /* @__PURE__ */ jsx(EditSheetHeader, { item });
       const lastPrice = /* @__PURE__ */ jsxs(Flex, { width: "100%", justify: "between", children: [
         /* @__PURE__ */ jsx(Text, { children: t("common.lastPrice") }),