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

package/dist/index.mjs

@@ -1,9 +1,9 @@
 import React3, { useId, forwardRef, useState, useImperativeHandle, useEffect, memo, createContext, useMemo, useRef, useCallback, useContext } from 'react';
-import { useLocalStorage, utils, usePositionStream, useEventEmitter, useDebouncedCallback, useFeeState, useRwaSymbolsInfoStore, useOrderlyContext, useMemoizedFn, useOrderEntry, useMarginRatio, useComputedLTV, useHoldingStream, useAppStore, useIndexPricesStream, useTrack, useQuery, useSymbolLeverage, useBoolean } from '@orderly.network/hooks';
+import { useLocalStorage, utils, usePositionStream, useEventEmitter, useDebouncedCallback, useFeeState, useRwaSymbolsInfoStore, useOrderlyContext, ERROR_MSG_CODES, useMemoizedFn, useOrderEntry, useMarginRatio, useComputedLTV, useTpslPriceChecker, useHoldingStream, useAppStore, useIndexPricesStream, useTrack, useQuery, useSymbolLeverage, useBoolean } from '@orderly.network/hooks';
 import { useTranslation, i18n } from '@orderly.network/i18n';
 import { useOrderEntryFormErrorMsg, useCanTrade } from '@orderly.network/react-app';
 import { EMPTY_LIST, DistributionType, TrailingCallbackType, OrderSide, OrderType, PositionType, BBOOrderType, OrderLevel, TrackerEventName } from '@orderly.network/types';
-import { ExclamationFillIcon, modal, Text, Tooltip, TooltipTrigger, Flex, Input, cn, inputFormatter, Box, registerSimpleDialog, SimpleDialog, Select, Grid, Checkbox, Slider, textVariants, SettingFillIcon, Badge, Divider, Button, TokenIcon, DataTable, SimpleDropdownMenu, CaretDownIcon, Switch, useScreen, toast, ThrottledButton, SimpleSheet, InfoCircleIcon, AddCircleIcon, PopoverRoot, PopoverTrigger, PopoverContent, EditIcon as EditIcon$1, useModal } from '@orderly.network/ui';
+import { ExclamationFillIcon, modal, Text, Tooltip, TooltipTrigger, Flex, Input, cn, inputFormatter, Box, registerSimpleDialog, SimpleDialog, Select, Grid, Checkbox, Slider, textVariants, SettingFillIcon, Badge, Divider, Button, TokenIcon, DataTable, SimpleDropdownMenu, CaretDownIcon, Switch, useScreen, toast, ThrottledButton, SimpleSheet, InfoCircleIcon, AddCircleIcon, PopoverRoot, PopoverTrigger, PopoverContent, DotStatus, EditIcon as EditIcon$1, useModal } from '@orderly.network/ui';
 import { TPSLPositionTypeWidget, TPSLAdvancedWidget } from '@orderly.network/ui-tpsl';
 import { Decimal, zero, todpIfNeed, getBBOType, removeTrailingZeros } from '@orderly.network/utils';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
@@ -1046,6 +1046,7 @@ var LTVRiskTooltipWidget = () => {
 var Available = (props) => {
   const { canTrade, currentLtv, quote, freeCollateral } = props;
   const { t } = useTranslation();
+  const { isMobile } = useScreen();
   const showLTV = useMemo(() => {
     return typeof currentLtv === "number" && !Number.isNaN(currentLtv) && currentLtv > 0;
   }, [currentLtv]);
@@ -1085,7 +1086,8 @@ var Available = (props) => {
           color: "secondary",
           className: "oui-p-0 hover:oui-text-base-contrast-80",
           onClick: () => {
-            modal.show("DepositAndWithdrawWithDialogId", {
+            const handleDomId = isMobile ? "DepositAndWithdrawWithSheetId" : "DepositAndWithdrawWithDialogId";
+            modal.show(handleDomId, {
               activeTab: "deposit"
             });
           },
@@ -3769,8 +3771,10 @@ var OrderTPSL = (props) => {
       props.onSwitchChanged(false);
     }
   }, [props.orderType]);
-  if (props.orderType !== OrderType.LIMIT && props.orderType !== OrderType.MARKET || props.isReduceOnly)
+  if (props.orderType !== OrderType.LIMIT && props.orderType !== OrderType.MARKET) {
     return null;
+  }
+  const isSlPriceWarning = props.errors?.["sl_trigger_price"]?.["type"] === ERROR_MSG_CODES.SL_PRICE_WARNING;
   return /* @__PURE__ */ jsxs("div", { children: [
     /* @__PURE__ */ jsxs(Flex, { itemAlign: "center", justify: "between", children: [
       /* @__PURE__ */ jsxs(Flex, { itemAlign: "center", gapX: 1, children: [
@@ -3780,7 +3784,7 @@ var OrderTPSL = (props) => {
             id: "order_entry_tpsl",
             className: "oui-h-[14px]",
             checked: props.switchState,
-            disabled: props.orderType !== OrderType.LIMIT && props.orderType !== OrderType.MARKET || props.isReduceOnly,
+            disabled: props.orderType !== OrderType.LIMIT && props.orderType !== OrderType.MARKET,
             onCheckedChange: (checked) => {
               props.onSwitchChanged(checked);
             }
@@ -3828,16 +3832,29 @@ var OrderTPSL = (props) => {
             setOrderValue: props.setOrderValue,
             onChange: props.onChange,
             values: props.values,
-            errors: props.errors,
+            errors: isSlPriceWarning ? {} : props.errors,
             quote_dp: props.quote_dp,
             showTPSLAdvanced: props.showTPSLAdvanced,
-            isMobile
+            isMobile,
+            isSlPriceWarning
           }
         )
       }
-    )
+    ),
+    isSlPriceWarning && /* @__PURE__ */ jsx(TPSLPriceWarning, { errors: props.errors })
   ] });
 };
+var TPSLPriceWarning = (props) => {
+  const { getErrorMsg } = useOrderEntryFormErrorMsg(props.errors);
+  return /* @__PURE__ */ jsx(
+    DotStatus,
+    {
+      color: "warning",
+      size: "xs",
+      label: getErrorMsg("sl_trigger_price")
+    }
+  );
+};
 var TPSLInputForm = React3.forwardRef((props, ref) => {
   const { getErrorMsg } = useOrderEntryFormErrorMsg(props.errors);
   const { t } = useTranslation();
@@ -3890,6 +3907,9 @@ var TPSLInputForm = React3.forwardRef((props, ref) => {
               first: "oui-testid-orderEntry-tpsl-slPrice-input",
               second: "oui-testid-orderEntry-tpsl-slPnl-input",
               dropDown: "oui-testid-orderEntry-tpsl-sl-dropDown-trigger-button"
+            },
+            classNames: {
+              root: props.isSlPriceWarning ? "oui-outline-warning-darken focus-within:oui-outline-warning-darken" : void 0
             }
           }
         ) })
@@ -4006,8 +4026,12 @@ var TPSLTriggerPriceInput = (props) => {
       value: innerValue,
       classNames: {
         additional: "oui-text-base-contrast-54",
-        root: "oui-pr-2 md:oui-pr-3",
-        prefix: "oui-pr-1 md:oui-pr-2"
+        root: cn("oui-pr-2 md:oui-pr-3", props.classNames?.root),
+        prefix: cn("oui-pr-1 md:oui-pr-2", props.classNames?.prefix),
+        input: cn(
+          "oui-text-2xs placeholder:oui-text-2xs",
+          props.classNames?.input
+        )
       },
       onValueChange,
       formatters: [
@@ -4027,6 +4051,7 @@ var TPSLInputRow = (props) => {
         type: props.type,
         error: props.error,
         values: props.values ?? "",
+        classNames: props.classNames,
         onChange: (event) => {
           props.onChange(
             props.type === "SL" ? "sl_trigger_price" : "tp_trigger_price",
@@ -4103,6 +4128,7 @@ var OrderEntry = (props) => {
   });
   const { notification } = useOrderlyContext();
   const soundAlertId = useId();
+  const isSlPriceWarning = props.slPriceError?.sl_trigger_price?.type === ERROR_MSG_CODES.SL_PRICE_WARNING;
   const { getErrorMsg } = useOrderEntryFormErrorMsg(validated ? errors : null);
   const buttonLabel = useMemo(() => {
     return side === OrderSide.BUY ? t("orderEntry.buyLong") : t("orderEntry.sellShort");
@@ -4146,7 +4172,8 @@ var OrderEntry = (props) => {
   }, [errorMsgVisible]);
   const onSubmit = useMemoizedFn(async () => {
     const isScaledOrder = formattedOrder.order_type === OrderType.SCALED;
-    helper.validate().then(
+    const isSlPriceError = props.slPriceError?.sl_trigger_price?.type === ERROR_MSG_CODES.SL_PRICE_ERROR;
+    helper.validate(isSlPriceError ? props.slPriceError : void 0).then(
       // validate success, it return the order
       // TODO: get order from other function
       (order) => {
@@ -4278,6 +4305,7 @@ var OrderEntry = (props) => {
   useEffect(() => {
     setHasAdvancedTPSLResult(false);
   }, [props.symbol]);
+  const showReduceOnlySection = isMobile && formattedOrder.order_type !== OrderType.LIMIT && formattedOrder.order_type !== OrderType.MARKET || !isMobile;
   const showSoundSection = Boolean(notification?.orderFilled?.media) && (notification?.orderFilled?.displayInOrderEntry ?? true);
   const additionalInfoProps = {
     pinned,
@@ -4422,8 +4450,7 @@ var OrderEntry = (props) => {
                   switchState: props.tpslSwitch,
                   onSwitchChanged: props.setTpslSwitch,
                   orderType: formattedOrder.order_type,
-                  errors: validated ? errors : null,
-                  isReduceOnly: formattedOrder.reduce_only,
+                  errors: validated || isSlPriceWarning ? { ...errors, ...props.slPriceError } : null,
                   setOrderValue,
                   reduceOnlyChecked: formattedOrder.reduce_only ?? false,
                   onReduceOnlyChange: (checked) => {
@@ -4452,7 +4479,7 @@ var OrderEntry = (props) => {
                   }
                 }
               ),
-              (isMobile && (formattedOrder.order_type !== OrderType.LIMIT && formattedOrder.order_type !== OrderType.MARKET || formattedOrder.reduce_only) || !isMobile) && /* @__PURE__ */ jsxs(Flex, { justify: "between", itemAlign: "center", className: "oui-mt-2", children: [
+              showReduceOnlySection && /* @__PURE__ */ jsxs(Flex, { justify: "between", itemAlign: "center", className: "oui-mt-2", children: [
                 /* @__PURE__ */ jsx(
                   ReduceOnlySwitch,
                   {
@@ -4883,8 +4910,24 @@ var useOrderEntryScript = (inputs) => {
   const { priceInputContainerRef, priceInputContainerWidth } = usePriceInputContainer({
     order_type_ext: formattedOrder.order_type_ext
   });
+  const slPriceError = useTpslPriceChecker({
+    slPrice: formattedOrder.sl_trigger_price,
+    liqPrice: state.estLiqPrice,
+    side: formattedOrder.side
+  });
+  useEffect(() => {
+    if (formattedOrder.reduce_only) {
+      setTpslSwitch(false);
+    }
+  }, [formattedOrder.reduce_only]);
+  useEffect(() => {
+    if (tpslSwitch) {
+      setOrderValue("reduce_only", false);
+    }
+  }, [tpslSwitch]);
   return {
     ...state,
+    slPriceError: slPriceError ?? void 0,
     side: formattedOrder.side,
     type: formattedOrder.order_type,
     level: formattedOrder.level,