@orderly.network/ui-tpsl 2.8.8-alpha.0 → 2.8.9-alpha.0

package/dist/index.mjs

@@ -1,8 +1,8 @@
-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 { SDKError, PositionType, AlgoOrderRootType, OrderType, OrderSide, OrderStatus, AlgoOrderType } from '@orderly.network/types';
 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 { utils, useSymbolsInfo, useAccount, useEventEmitter, useLocalStorage, usePositionStream, useEstLiqPriceBySymbol, useTPSLOrder, useTpslPriceChecker, ERROR_MSG_CODES, useMemoizedFn, useOrderEntry, useOrderStream, useSubAccountAlgoOrderStream, findPositionTPSLFromOrders, useMutation, useMarkPrice, useIndexPrice, useLeverageBySymbol, useMaxQty, findTPSLFromOrder, findTPSLOrderPriceFromOrder } from '@orderly.network/hooks';
+import { useTranslation, i18n, Trans } from '@orderly.network/i18n';
 import { useOrderEntryFormErrorMsg } from '@orderly.network/react-app';
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import { Decimal, checkIsNaN, transSymbolformString, getTPSLDirection, formatNum, todpIfNeed } from '@orderly.network/utils';
@@ -905,6 +905,7 @@ var TPSL = (props) => {
     props.slPriceError
   );
   const isSlPriceWarning = props.slPriceError?.sl_trigger_price?.type === ERROR_MSG_CODES.SL_PRICE_WARNING;
+  const isSlPriceError = props.slPriceError?.sl_trigger_price?.type === ERROR_MSG_CODES.SL_PRICE_ERROR;
   if (!position) {
     return null;
   }
@@ -1041,7 +1042,7 @@ var TPSL = (props) => {
                   order_type: TPSL_OrderEntity.sl_order_type ?? OrderType.MARKET
                 },
                 hideOrderPrice: TPSL_OrderEntity.position_type === PositionType.FULL,
-                errors: validated ? slErrors : null,
+                errors: validated ? slErrors : isSlPriceError ? props.slPriceError : null,
                 quote_dp: symbolInfo("quote_dp"),
                 positionType: TPSL_OrderEntity.position_type ?? PositionType.PARTIAL,
                 disableOrderTypeSelector: isEditing,
@@ -1321,10 +1322,13 @@ var useTPSLBuilder = (options) => {
     throw new SDKError("order is required when isEditing is true");
   }
   const symbolInfo = useSymbolsInfo();
-  useRef(AlgoOrderRootType.TP_SL);
-  const [{ rows: positions }] = usePositionStream();
+  const { state } = useAccount();
+  const ee = useEventEmitter();
   const [needConfirm] = useLocalStorage("orderly_order_confirm", true);
-  const position = positions.find((item) => item.symbol === symbol);
+  const [{ rows: positions }] = usePositionStream();
+  const mainAccountPosition = positions.find((item) => item.symbol === symbol);
+  const isSubAccount = options.position?.account_id && options.position?.account_id !== state.mainAccountId;
+  const position = isSubAccount ? options.position : mainAccountPosition;
   const estLiqPrice = useEstLiqPriceBySymbol(symbol);
   useEffect(() => {
     if (!position) {
@@ -1452,6 +1456,7 @@ var useTPSLBuilder = (options) => {
         }
       }).then(
         () => {
+          ee.emit("tpsl:updateOrder", options2.position);
           return true;
         },
         () => {
@@ -1468,6 +1473,7 @@ var useTPSLBuilder = (options) => {
             accountId: position?.account_id
           });
           if (res.success) {
+            ee.emit("tpsl:updateOrder", options2.position);
             return res;
           }
           if (res.message) {
@@ -1581,8 +1587,6 @@ registerSimpleDialog(TPSLDialogId, TPSLWidget, {
 });
 var PositionTPSLPopover = (props) => {
   const { position, order: order2, baseDP, quoteDP, buttonProps, isEditing } = props;
-  const [needConfirm] = useLocalStorage("orderly_order_confirm", true);
-  const { t } = useTranslation();
   const isPositionTPSL = isEditing ? order2?.algo_type === AlgoOrderRootType.POSITIONAL_TP_SL : void 0;
   const onEdit = () => {
     modal.show(TPSLDialogId, {
@@ -1591,7 +1595,8 @@ var PositionTPSLPopover = (props) => {
       baseDP,
       quoteDP,
       positionType: isPositionTPSL ? PositionType.FULL : PositionType.PARTIAL,
-      isEditing
+      isEditing,
+      position
     });
   };
   return /* @__PURE__ */ jsx(Box, { onClick: onEdit, className: "oui-cursor-pointer", children: props.children || /* @__PURE__ */ jsx(
@@ -1623,6 +1628,7 @@ var TPSLAdvancedUI = (props) => {
   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 isSlPriceError = props.slPriceError?.sl_trigger_price?.type === ERROR_MSG_CODES.SL_PRICE_ERROR;
   const {
     formattedOrder,
     setValue: setOrderValue,
@@ -1799,7 +1805,7 @@ var TPSLAdvancedUI = (props) => {
               side: formattedOrder.side,
               values: slValues,
               hideOrderPrice: formattedOrder.position_type === PositionType.FULL,
-              errors: validated ? errors : null,
+              errors: validated ? errors : isSlPriceError ? props.slPriceError : null,
               inputWarnNode: isSlPriceWarning && /* @__PURE__ */ jsx(
                 DotStatus,
                 {
@@ -1955,13 +1961,18 @@ var useTPSLDetail = (props) => {
   const { position } = props;
   const symbol = position.symbol;
   const symbolInfo = useSymbolsInfo()[symbol];
+  const ee = useEventEmitter();
+  const { state } = useAccount();
   const { isMobile } = useScreen();
-  const { t } = useTranslation();
   const [fullPositionOrders, setFullPositionOrders] = useState(
     []
   );
   const [partialPositionOrders, setPartialPositionOrders] = useState([]);
-  const [tpslOrders, { cancelAlgoOrder, cancelPostionOrdersByTypes, refresh }] = useOrderStream(
+  const isSubAccount = position.account_id && position.account_id !== state.mainAccountId;
+  const [
+    mainAccountTpslOrders,
+    { cancelAlgoOrder, cancelPostionOrdersByTypes }
+  ] = useOrderStream(
     {
       symbol: position.symbol,
       status: OrderStatus.INCOMPLETE,
@@ -1972,10 +1983,46 @@ var useTPSLDetail = (props) => {
       keeplive: true
     }
   );
+  const [
+    subAccountTpslOrders,
+    {
+      cancelAlgoOrder: cancelSubAccountAlgoOrder,
+      cancelPostionOrdersByTypes: cancelSubAccountPostionOrdersByTypes,
+      refresh: refreshSubAccountTpslOrders
+    }
+  ] = useSubAccountAlgoOrderStream(
+    {
+      symbol: position.symbol,
+      status: OrderStatus.INCOMPLETE,
+      includes: [AlgoOrderRootType.POSITIONAL_TP_SL, AlgoOrderRootType.TP_SL],
+      size: 100
+    },
+    {
+      accountId: position.account_id
+    }
+  );
+  const tpslOrders = isSubAccount ? subAccountTpslOrders : mainAccountTpslOrders;
   const onCancelOrder = async (order2) => {
+    if (isSubAccount) {
+      const res = await cancelSubAccountAlgoOrder(
+        order2.algo_order_id,
+        order2.symbol
+      );
+      refreshSubAccountTpslOrders();
+      ee.emit("tpsl:updateOrder", position);
+      return res;
+    }
     return await cancelAlgoOrder(order2.algo_order_id, order2.symbol);
   };
   const onCancelAllTPSLOrders = async () => {
+    if (isSubAccount) {
+      const res = await cancelSubAccountPostionOrdersByTypes(symbol, [
+        AlgoOrderRootType.TP_SL
+      ]);
+      refreshSubAccountTpslOrders();
+      ee.emit("tpsl:updateOrder", position);
+      return res;
+    }
     return await cancelPostionOrdersByTypes(symbol, [AlgoOrderRootType.TP_SL]);
   };
   const showTPSLDialog = ({
@@ -1987,6 +2034,7 @@ var useTPSLDetail = (props) => {
     modal.show(dialogId, {
       order: order2,
       symbol: position.symbol,
+      position,
       positionType,
       isEditing
     });
@@ -3349,6 +3397,7 @@ var EditBracketOrderUI = (props) => {
   const { errors, validated } = props.metaState;
   const { isMobile } = useScreen();
   const isSlPriceWarning = props.slPriceError?.sl_trigger_price?.type === ERROR_MSG_CODES.SL_PRICE_WARNING;
+  const isSlPriceError = props.slPriceError?.sl_trigger_price?.type === ERROR_MSG_CODES.SL_PRICE_ERROR;
   const { getErrorMsg } = useOrderEntryFormErrorMsg(props.slPriceError);
   const {
     formattedOrder,
@@ -3499,7 +3548,7 @@ var EditBracketOrderUI = (props) => {
                       label: getErrorMsg("sl_trigger_price")
                     }
                   ),
-                  errors: validated ? errors : null,
+                  errors: validated ? errors : isSlPriceError ? props.slPriceError : null,
                   quote_dp: symbolInfo.quote_dp,
                   positionType: formattedOrder.position_type ?? PositionType.PARTIAL,
                   onChange: (key, value) => {