@orderly.network/ui-tpsl 2.8.5-alpha.0 → 2.8.6-alpha.0

package/dist/index.mjs

@@ -1,10 +1,10 @@
-import { utils, useSymbolsInfo, usePositionStream, useLocalStorage, useTPSLOrder, useMemoizedFn, useOrderEntry, useOrderStream, findPositionTPSLFromOrders, useMutation, useMarkPrice, useIndexPrice, useLeverageBySymbol, findTPSLFromOrder, findTPSLOrderPriceFromOrder } from '@orderly.network/hooks';
+import { utils, useSymbolsInfo, usePositionStream, useLocalStorage, useEstLiqPriceBySymbol, useTPSLOrder, useTpslPriceChecker, ERROR_MSG_CODES, useMemoizedFn, useOrderEntry, useOrderStream, findPositionTPSLFromOrders, useMutation, useMarkPrice, useIndexPrice, useLeverageBySymbol, useMaxQty, findTPSLFromOrder, findTPSLOrderPriceFromOrder } from '@orderly.network/hooks';
 import { useTranslation, i18n, Trans } from '@orderly.network/i18n';
 import { SDKError, AlgoOrderRootType, PositionType, OrderType, OrderSide, OrderStatus, AlgoOrderType } from '@orderly.network/types';
-import { Flex, Input, inputFormatter, cn, Slider, Text, registerSimpleSheet, registerSimpleDialog, useScreen, ScrollArea, Grid, Button, ThrottledButton, Divider, Box, toast, TokenIcon, modal, Tooltip, ExclamationFillIcon, Select, ChevronDownIcon, Badge, textVariants, Checkbox, SimpleDropdownMenu, CaretDownIcon, useModal } from '@orderly.network/ui';
+import { Flex, Input, inputFormatter, cn, Slider, Text, registerSimpleSheet, registerSimpleDialog, useScreen, ScrollArea, DotStatus, Grid, Button, ThrottledButton, Divider, Box, toast, TokenIcon, modal, Tooltip, ExclamationFillIcon, Select, ChevronDownIcon, Badge, textVariants, Checkbox, SimpleDropdownMenu, CaretDownIcon, useModal } from '@orderly.network/ui';
+import { memo, useRef, useState, useEffect, createContext, useMemo, useContext, Fragment as Fragment$1 } from 'react';
 import { useOrderEntryFormErrorMsg } from '@orderly.network/react-app';
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
-import { memo, useRef, useState, useEffect, createContext, useMemo, Fragment as Fragment$1, useContext } from 'react';
 import { Decimal, checkIsNaN, transSymbolformString, getTPSLDirection, formatNum, todpIfNeed } from '@orderly.network/utils';
 import { order, positions } from '@orderly.network/perp';
 import { AuthGuardDataTable } from '@orderly.network/ui-connector';
@@ -122,6 +122,19 @@ var OrderInfo = (props) => {
                     children: markPrice?.data
                   }
                 )
+              ] }),
+              /* @__PURE__ */ jsxs(Flex, { justify: "between", className: "oui-text-base-contrast-36", children: [
+                /* @__PURE__ */ jsx(Text, { size: "2xs", children: t("positions.column.liqPrice") }),
+                /* @__PURE__ */ jsx(
+                  Text.numeral,
+                  {
+                    rule: "price",
+                    className: "oui-text-warning",
+                    size: "2xs",
+                    dp: props.quoteDP ?? 2,
+                    children: props.estLiqPrice ?? "--"
+                  }
+                )
               ] })
             ]
           }
@@ -489,10 +502,15 @@ var PriceInput = (props) => {
       value: props.value,
       color: props.error ? "danger" : void 0,
       classNames: {
-        input: "oui-text-2xs placeholder:oui-text-2xs",
-        prefix: "oui-text-base-contrast-54 oui-text-2xs",
-        root: "oui-w-full"
-        // root: "oui-outline-line-12 focus-within:oui-outline-primary-light",
+        input: cn(
+          "oui-text-2xs placeholder:oui-text-2xs",
+          props.classNames?.input
+        ),
+        prefix: cn(
+          "oui-text-base-contrast-54 oui-text-2xs",
+          props.classNames?.prefix
+        ),
+        root: cn("oui-w-full", props.classNames?.root)
       },
       onValueChange: props.onValueChange,
       onFocus: () => {
@@ -549,7 +567,10 @@ var TPSLInputRowUI = (props) => {
                           onValueChange: (value) => {
                             props.onChange(`${props.type}_trigger_price`, value);
                           },
-                          quote_dp: props.quote_dp
+                          quote_dp: props.quote_dp,
+                          classNames: {
+                            root: props.inputWarnNode ? "oui-outline-warning-darken focus-within:oui-outline-warning-darken" : void 0
+                          }
                         }
                       ),
                       /* @__PURE__ */ jsx(
@@ -568,6 +589,7 @@ var TPSLInputRowUI = (props) => {
                   ]
                 }
               ),
+              props.inputWarnNode,
               /* @__PURE__ */ jsxs(
                 Flex,
                 {
@@ -866,7 +888,23 @@ var TPSL = (props) => {
   const { errors, validated } = props.metaState;
   const { t } = useTranslation();
   const { isMobile } = useScreen();
+  const tpErrors = useMemo(() => {
+    if (!errors)
+      return null;
+    const { sl_trigger_price, ...rest } = errors;
+    return rest;
+  }, [errors]);
+  const slErrors = useMemo(() => {
+    if (!errors)
+      return null;
+    const { tp_trigger_price, ...rest } = errors;
+    return rest;
+  }, [errors]);
   const { getErrorMsg } = useOrderEntryFormErrorMsg(errors);
+  const { getErrorMsg: getSlPriceErrorMsg } = useOrderEntryFormErrorMsg(
+    props.slPriceError
+  );
+  const isSlPriceWarning = props.slPriceError?.sl_trigger_price?.type === ERROR_MSG_CODES.SL_PRICE_WARNING;
   if (!position) {
     return null;
   }
@@ -896,6 +934,7 @@ var TPSL = (props) => {
         {
           baseDP: symbolInfo("base_dp"),
           quoteDP: symbolInfo("quote_dp"),
+          estLiqPrice: props.estLiqPrice,
           classNames: {
             root: "oui-mb-3",
             container: "oui-gap-x-[30px]"
@@ -927,7 +966,14 @@ var TPSL = (props) => {
                 }
               }
             ),
-            TPSL_OrderEntity.position_type === PositionType.FULL && /* @__PURE__ */ jsx(Text, { className: "oui-text-2xs oui-text-warning", children: t("tpsl.positionType.full.tips.market") })
+            TPSL_OrderEntity.position_type === PositionType.FULL && /* @__PURE__ */ jsx(
+              DotStatus,
+              {
+                color: "warning",
+                size: "xs",
+                label: t("tpsl.positionType.full.tips.market")
+              }
+            )
           ]
         }
       ),
@@ -958,7 +1004,7 @@ var TPSL = (props) => {
                   order_type: TPSL_OrderEntity.tp_order_type ?? OrderType.MARKET
                 },
                 hideOrderPrice: TPSL_OrderEntity.position_type === PositionType.FULL,
-                errors: validated ? errors : null,
+                errors: validated ? tpErrors : null,
                 disableOrderTypeSelector: isEditing,
                 quote_dp: symbolInfo("quote_dp"),
                 positionType: TPSL_OrderEntity.position_type ?? PositionType.PARTIAL,
@@ -971,6 +1017,16 @@ var TPSL = (props) => {
             /* @__PURE__ */ jsx(
               TPSLInputRowWidget,
               {
+                inputWarnNode: isSlPriceWarning && /* @__PURE__ */ jsx(
+                  DotStatus,
+                  {
+                    color: "warning",
+                    label: getSlPriceErrorMsg("sl_trigger_price"),
+                    classNames: {
+                      root: "oui-mt-1"
+                    }
+                  }
+                ),
                 symbol: position.symbol,
                 rootOrderPrice: position.average_open_price.toString(),
                 type: "sl",
@@ -985,7 +1041,7 @@ var TPSL = (props) => {
                   order_type: TPSL_OrderEntity.sl_order_type ?? OrderType.MARKET
                 },
                 hideOrderPrice: TPSL_OrderEntity.position_type === PositionType.FULL,
-                errors: validated ? errors : null,
+                errors: validated ? slErrors : null,
                 quote_dp: symbolInfo("quote_dp"),
                 positionType: TPSL_OrderEntity.position_type ?? PositionType.PARTIAL,
                 disableOrderTypeSelector: isEditing,
@@ -1269,6 +1325,7 @@ var useTPSLBuilder = (options) => {
   const [{ rows: positions }] = usePositionStream();
   const [needConfirm] = useLocalStorage("orderly_order_confirm", true);
   const position = positions.find((item) => item.symbol === symbol);
+  const estLiqPrice = useEstLiqPriceBySymbol(symbol);
   useEffect(() => {
     if (!position) {
       options.close?.();
@@ -1303,6 +1360,12 @@ var useTPSLBuilder = (options) => {
       isEditing
     }
   );
+  const slPriceError = useTpslPriceChecker({
+    slPrice: tpslOrder.sl_trigger_price?.toString() ?? void 0,
+    liqPrice: estLiqPrice ?? null,
+    side: tpslOrder.side
+  });
+  const isSlPriceWarning = slPriceError?.sl_trigger_price?.type === ERROR_MSG_CODES.SL_PRICE_WARNING;
   const setQuantity = (value) => {
     setValue("quantity", value);
   };
@@ -1448,7 +1511,9 @@ var useTPSLBuilder = (options) => {
   };
   const onSubmit = async () => {
     try {
-      const validOrder = await validate();
+      const validOrder = await validate(
+        isSlPriceWarning ? void 0 : slPriceError
+      );
       if (validOrder) {
         if (!needConfirm) {
           return submit({ accountId: position?.account_id }).then(() => true).catch((err) => {
@@ -1481,6 +1546,8 @@ var useTPSLBuilder = (options) => {
     setOrderPrice,
     // needConfirm,
     onSubmit,
+    slPriceError,
+    estLiqPrice,
     metaState,
     errors,
     status: {
@@ -1554,6 +1621,8 @@ var PositionTPSLSheet = (props) => {
 var TPSLAdvancedUI = (props) => {
   const { t } = useTranslation();
   const { errors, validated } = props.metaState;
+  const { getErrorMsg } = useOrderEntryFormErrorMsg(props.slPriceError);
+  const isSlPriceWarning = props.slPriceError?.sl_trigger_price?.type === ERROR_MSG_CODES.SL_PRICE_WARNING;
   const {
     formattedOrder,
     setValue: setOrderValue,
@@ -1628,6 +1697,7 @@ var TPSLAdvancedUI = (props) => {
           order: formattedOrder,
           baseDP: symbolInfo.base_dp,
           quoteDP: symbolInfo.quote_dp,
+          estLiqPrice: props.estLiqPrice ?? void 0,
           symbolLeverage: props.symbolLeverage
         }
       ) }),
@@ -1730,6 +1800,14 @@ var TPSLAdvancedUI = (props) => {
               values: slValues,
               hideOrderPrice: formattedOrder.position_type === PositionType.FULL,
               errors: validated ? errors : null,
+              inputWarnNode: isSlPriceWarning && /* @__PURE__ */ jsx(
+                DotStatus,
+                {
+                  color: "warning",
+                  size: "xs",
+                  label: getErrorMsg("sl_trigger_price")
+                }
+              ),
               quote_dp: symbolInfo.quote_dp,
               positionType: formattedOrder.position_type ?? PositionType.PARTIAL,
               onChange: (key, value) => {
@@ -1829,8 +1907,14 @@ var useTPSLAdvanced = (props) => {
       tp_offset_percentage: order2.tp_offset_percentage
     }
   });
+  const slPriceError = useTpslPriceChecker({
+    slPrice: formattedOrder.sl_trigger_price,
+    liqPrice: state.estLiqPrice,
+    side: formattedOrder.side
+  });
   const onSubmit = () => {
-    helper.validate().then(() => {
+    const isSlPriceError = slPriceError?.sl_trigger_price?.type === ERROR_MSG_CODES.SL_PRICE_ERROR;
+    helper.validate(isSlPriceError ? slPriceError : void 0).then(() => {
       props.onSubmit(formattedOrder);
     }).catch((err) => {
     });
@@ -1839,6 +1923,8 @@ var useTPSLAdvanced = (props) => {
     order: order2,
     formattedOrder,
     symbolInfo,
+    slPriceError,
+    estLiqPrice: state.estLiqPrice,
     setValue,
     setValues,
     onSubmit,
@@ -1934,13 +2020,16 @@ var useTPSLDetail = (props) => {
 var TPSLDetailContext = createContext({});
 var TPSLDetailProvider = (props) => {
   const symbolInfo = useSymbolsInfo()[props.symbol];
+  const estLiqPrice = useEstLiqPriceBySymbol(props.symbol);
   return /* @__PURE__ */ jsx(
     TPSLDetailContext.Provider,
     {
       value: {
         base_dp: symbolInfo("base_dp"),
         quote_dp: symbolInfo("quote_dp"),
-        position: props.position
+        side: props.position.position_qty > 0 ? OrderSide.BUY : OrderSide.SELL,
+        position: props.position,
+        estLiqPrice
       },
       children: props.children
     }
@@ -1956,7 +2045,7 @@ var FlexCell = (props) => {
       direction: "column",
       justify: "center",
       itemAlign: "start",
-      className: "oui-text-2xs oui-h-[36px]",
+      className: cn("oui-text-2xs oui-h-[36px]", props.className),
       children: props.children
     }
   );
@@ -2083,9 +2172,65 @@ var TriggerPrice = ({ order: order2 }) => {
     }
   );
 };
+var CloseToLiqPriceIcon = ({
+  slPriceError,
+  className
+}) => {
+  const { t } = useTranslation();
+  const { isMobile } = useScreen();
+  const { getErrorMsg } = useOrderEntryFormErrorMsg(slPriceError);
+  const isSlPriceWarning = slPriceError?.sl_trigger_price?.type === ERROR_MSG_CODES.SL_PRICE_WARNING;
+  const icon = /* @__PURE__ */ jsx(
+    ExclamationFillIcon,
+    {
+      onMouseEnter: (e) => e.stopPropagation(),
+      onMouseLeave: (e) => e.stopPropagation(),
+      onPointerEnter: (e) => e.stopPropagation(),
+      onPointerLeave: (e) => e.stopPropagation(),
+      size: 14,
+      className: cn(
+        "oui-text-warning-darken hover:oui-cursor-pointer",
+        className
+      )
+    }
+  );
+  if (!isSlPriceWarning || !slPriceError)
+    return null;
+  if (isMobile) {
+    return /* @__PURE__ */ jsx(
+      "button",
+      {
+        onClick: (e) => {
+          modal.alert({
+            title: t("common.tips"),
+            message: getErrorMsg("sl_trigger_price")
+          });
+        },
+        className: "oui-px-1",
+        children: icon
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    Tooltip,
+    {
+      content: getErrorMsg("sl_trigger_price"),
+      className: "oui-max-w-[240px] oui-text-base-contrast-80",
+      children: icon
+    }
+  );
+};
+CloseToLiqPriceIcon.displayName = "CloseToLiqPriceIcon";
 var TypeRender = ({ order: order2 }) => {
+  const { side, estLiqPrice } = useTPSLDetailContext();
   const { tp_trigger_price, sl_trigger_price } = findTPSLFromOrder(order2);
   const { t } = useTranslation();
+  const slPriceError = useTpslPriceChecker({
+    slPrice: sl_trigger_price?.toString() ?? void 0,
+    liqPrice: estLiqPrice ?? null,
+    side
+  });
+  const isSlPriceWarning = slPriceError?.sl_trigger_price?.type === ERROR_MSG_CODES.SL_PRICE_WARNING;
   return /* @__PURE__ */ jsxs(
     Flex,
     {
@@ -2095,7 +2240,10 @@ var TypeRender = ({ order: order2 }) => {
       className: "oui-text-2xs",
       children: [
         tp_trigger_price && /* @__PURE__ */ jsx(FlexCell, { children: /* @__PURE__ */ jsx(Text, { className: "oui-text-trade-profit", children: t("tpsl.tp") }) }),
-        sl_trigger_price && /* @__PURE__ */ jsx(FlexCell, { children: /* @__PURE__ */ jsx(Text, { className: "oui-text-trade-loss", children: t("tpsl.sl") }) })
+        sl_trigger_price && /* @__PURE__ */ jsxs(FlexCell, { className: "oui-flex-row oui-items-center oui-gap-1", children: [
+          /* @__PURE__ */ jsx(Text, { className: "oui-text-trade-loss", children: t("tpsl.sl") }),
+          isSlPriceWarning && /* @__PURE__ */ jsx(CloseToLiqPriceIcon, { slPriceError })
+        ] })
       ]
     }
   );
@@ -2387,6 +2535,7 @@ var TPSLDetailUI = (props) => {
     addTPSLOrder,
     symbolInfo
   } = props;
+  const { estLiqPrice } = useTPSLDetailContext();
   return /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsxs(ScrollArea, { className: cn(isMobile && "oui-h-[calc(100vh-100px)]"), children: [
     /* @__PURE__ */ jsx(
       OrderInfo,
@@ -2396,6 +2545,7 @@ var TPSLDetailUI = (props) => {
           order_quantity: position.position_qty.toString(),
           order_price: position.average_open_price.toString()
         },
+        estLiqPrice,
         symbolLeverage: position.leverage,
         baseDP: symbolInfo("base_dp"),
         quoteDP: symbolInfo("quote_dp"),
@@ -3071,8 +3221,19 @@ var useEditBracketOrder = (props) => {
     props.order
   );
   const [doUpdateOrder, { isMutating }] = useMutation("/v1/algo/order", "PUT");
-  const { formattedOrder, setValue, setValues, metaState, symbolInfo, helper } = useOrderEntry(props.order.symbol, {
-    initialOrder: baseInfo
+  const maxQty = useEditOrderMaxQty(props.order, props.order.quantity);
+  const {
+    formattedOrder,
+    setValue,
+    setValues,
+    estLiqPrice,
+    metaState,
+    symbolInfo,
+    helper,
+    ...state
+  } = useOrderEntry(props.order.symbol, {
+    initialOrder: baseInfo,
+    maxQty
   });
   const symbol = props.order.symbol;
   const isPriceChanged = useMemo(() => {
@@ -3114,8 +3275,14 @@ var useEditBracketOrder = (props) => {
       ...tpslPriceInfo
     });
   }, [props.order, setValues]);
+  const slPriceError = useTpslPriceChecker({
+    slPrice: formattedOrder.sl_trigger_price,
+    liqPrice: estLiqPrice,
+    side: formattedOrder.side
+  });
+  const isSlPriceError = slPriceError?.sl_trigger_price?.type === ERROR_MSG_CODES.SL_PRICE_ERROR;
   const onSubmit = async () => {
-    return helper.validate().then(() => {
+    return helper.validate(isSlPriceError ? slPriceError : void 0).then(() => {
       const tpOrder = {
         order_id: tpInfo.orderId,
         algo_type: AlgoOrderType.TAKE_PROFIT,
@@ -3155,6 +3322,9 @@ var useEditBracketOrder = (props) => {
   return {
     symbol,
     symbolInfo,
+    slPriceError,
+    estLiqPrice,
+    side: formattedOrder.side,
     formattedOrder,
     setValue,
     setValues,
@@ -3164,10 +3334,22 @@ var useEditBracketOrder = (props) => {
     isPriceChanged
   };
 };
+function useEditOrderMaxQty(order2, positionQty) {
+  const { reduce_only } = order2;
+  const maxQty = useMaxQty(order2.symbol, order2.side, reduce_only);
+  return useMemo(() => {
+    if (reduce_only) {
+      return Math.abs(positionQty ?? 0);
+    }
+    return order2.quantity + Math.abs(maxQty);
+  }, [order2.quantity, maxQty, reduce_only, positionQty]);
+}
 var EditBracketOrderUI = (props) => {
   const { t } = useTranslation();
   const { errors, validated } = props.metaState;
   const { isMobile } = useScreen();
+  const isSlPriceWarning = props.slPriceError?.sl_trigger_price?.type === ERROR_MSG_CODES.SL_PRICE_WARNING;
+  const { getErrorMsg } = useOrderEntryFormErrorMsg(props.slPriceError);
   const {
     formattedOrder,
     setValue: setOrderValue,
@@ -3235,6 +3417,7 @@ var EditBracketOrderUI = (props) => {
                 order_quantity: formattedOrder.order_quantity,
                 order_price: formattedOrder.order_price
               },
+              estLiqPrice: props.estLiqPrice ?? void 0,
               baseDP: symbolInfo.base_dp,
               quoteDP: symbolInfo.quote_dp
             }
@@ -3308,6 +3491,14 @@ var EditBracketOrderUI = (props) => {
                   side: formattedOrder.side,
                   values: slValues,
                   hideOrderPrice: formattedOrder.position_type === PositionType.FULL,
+                  inputWarnNode: isSlPriceWarning && /* @__PURE__ */ jsx(
+                    DotStatus,
+                    {
+                      color: "warning",
+                      size: "xs",
+                      label: getErrorMsg("sl_trigger_price")
+                    }
+                  ),
                   errors: validated ? errors : null,
                   quote_dp: symbolInfo.quote_dp,
                   positionType: formattedOrder.position_type ?? PositionType.PARTIAL,
@@ -3370,6 +3561,6 @@ registerSimpleDialog(EditBracketOrderDialogId, EditBracketOrderWidget, {
   }
 });
 
-export { ArrowRightIcon, EditBracketOrderDialogId, EditBracketOrderSheetId, EditBracketOrderWidget, PositionTPSLConfirm, PositionTPSLPopover, PositionTPSLSheet, TPSL, TPSLAdvancedDialogId, TPSLAdvancedSheetId, TPSLAdvancedUI, TPSLAdvancedWidget, TPSLDetailDialogId, TPSLDetailSheetId, TPSLDetailWidget, TPSLDialogId, TPSLPositionTypeWidget, TPSLSheetId, TPSLSimpleDialogId, TPSLSimpleDialogUI, TPSLSimpleDialogWidget, TPSLSimpleSheetId, TPSLWidget, useTPSLAdvanced, useTPSLBuilder, useTPSLSimpleDialog };
+export { ArrowRightIcon, CloseToLiqPriceIcon, EditBracketOrderDialogId, EditBracketOrderSheetId, EditBracketOrderWidget, PositionTPSLConfirm, PositionTPSLPopover, PositionTPSLSheet, TPSL, TPSLAdvancedDialogId, TPSLAdvancedSheetId, TPSLAdvancedUI, TPSLAdvancedWidget, TPSLDetailDialogId, TPSLDetailSheetId, TPSLDetailWidget, TPSLDialogId, TPSLPositionTypeWidget, TPSLSheetId, TPSLSimpleDialogId, TPSLSimpleDialogUI, TPSLSimpleDialogWidget, TPSLSimpleSheetId, TPSLWidget, useTPSLAdvanced, useTPSLBuilder, useTPSLSimpleDialog };
 //# sourceMappingURL=out.js.map
 //# sourceMappingURL=index.mjs.map