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

package/dist/index.d.mts

@@ -1,8 +1,8 @@
 import * as react from 'react';
 import react__default, { FC } from 'react';
-import * as _orderly_network_hooks from '@orderly.network/hooks';
 import * as _orderly_network_types from '@orderly.network/types';
 import { OrderSide, OrderType, OrderLevel, OrderlyOrder, API } from '@orderly.network/types';
+import * as _orderly_network_hooks from '@orderly.network/hooks';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 
 declare enum InputType {
@@ -39,6 +39,7 @@ type OrderEntryScriptInputs = {
 };
 type OrderEntryScriptReturn = ReturnType<typeof useOrderEntryScript>;
 declare const useOrderEntryScript: (inputs: OrderEntryScriptInputs) => {
+    slPriceError: _orderly_network_hooks.OrderValidationResult | undefined;
     side: OrderSide;
     type: OrderType;
     level: OrderLevel;
@@ -86,7 +87,7 @@ declare const useOrderEntryScript: (inputs: OrderEntryScriptInputs) => {
     estSlippage: number | null;
     helper: {
         validator: () => Promise<_orderly_network_hooks.OrderValidationResult | null>;
-        validate: () => Promise<_orderly_network_hooks.OrderValidationResult | null>;
+        validate: (otherErrors?: _orderly_network_hooks.OrderValidationResult) => Promise<_orderly_network_hooks.OrderValidationResult | null>;
     };
     freeCollateral: number;
     metaState: {

package/dist/index.d.ts

@@ -1,8 +1,8 @@
 import * as react from 'react';
 import react__default, { FC } from 'react';
-import * as _orderly_network_hooks from '@orderly.network/hooks';
 import * as _orderly_network_types from '@orderly.network/types';
 import { OrderSide, OrderType, OrderLevel, OrderlyOrder, API } from '@orderly.network/types';
+import * as _orderly_network_hooks from '@orderly.network/hooks';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 
 declare enum InputType {
@@ -39,6 +39,7 @@ type OrderEntryScriptInputs = {
 };
 type OrderEntryScriptReturn = ReturnType<typeof useOrderEntryScript>;
 declare const useOrderEntryScript: (inputs: OrderEntryScriptInputs) => {
+    slPriceError: _orderly_network_hooks.OrderValidationResult | undefined;
     side: OrderSide;
     type: OrderType;
     level: OrderLevel;
@@ -86,7 +87,7 @@ declare const useOrderEntryScript: (inputs: OrderEntryScriptInputs) => {
     estSlippage: number | null;
     helper: {
         validator: () => Promise<_orderly_network_hooks.OrderValidationResult | null>;
-        validate: () => Promise<_orderly_network_hooks.OrderValidationResult | null>;
+        validate: (otherErrors?: _orderly_network_hooks.OrderValidationResult) => Promise<_orderly_network_hooks.OrderValidationResult | null>;
     };
     freeCollateral: number;
     metaState: {

package/dist/index.js

@@ -1052,6 +1052,7 @@ var LTVRiskTooltipWidget = () => {
 var Available = (props) => {
   const { canTrade, currentLtv, quote, freeCollateral } = props;
   const { t } = i18n.useTranslation();
+  const { isMobile } = ui.useScreen();
   const showLTV = React3.useMemo(() => {
     return typeof currentLtv === "number" && !Number.isNaN(currentLtv) && currentLtv > 0;
   }, [currentLtv]);
@@ -1091,7 +1092,8 @@ var Available = (props) => {
           color: "secondary",
           className: "oui-p-0 hover:oui-text-base-contrast-80",
           onClick: () => {
-            ui.modal.show("DepositAndWithdrawWithDialogId", {
+            const handleDomId = isMobile ? "DepositAndWithdrawWithSheetId" : "DepositAndWithdrawWithDialogId";
+            ui.modal.show(handleDomId, {
               activeTab: "deposit"
             });
           },
@@ -3775,8 +3777,10 @@ var OrderTPSL = (props) => {
       props.onSwitchChanged(false);
     }
   }, [props.orderType]);
-  if (props.orderType !== types.OrderType.LIMIT && props.orderType !== types.OrderType.MARKET || props.isReduceOnly)
+  if (props.orderType !== types.OrderType.LIMIT && props.orderType !== types.OrderType.MARKET) {
     return null;
+  }
+  const isSlPriceWarning = props.errors?.["sl_trigger_price"]?.["type"] === hooks.ERROR_MSG_CODES.SL_PRICE_WARNING;
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
     /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { itemAlign: "center", justify: "between", children: [
       /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { itemAlign: "center", gapX: 1, children: [
@@ -3786,7 +3790,7 @@ var OrderTPSL = (props) => {
             id: "order_entry_tpsl",
             className: "oui-h-[14px]",
             checked: props.switchState,
-            disabled: props.orderType !== types.OrderType.LIMIT && props.orderType !== types.OrderType.MARKET || props.isReduceOnly,
+            disabled: props.orderType !== types.OrderType.LIMIT && props.orderType !== types.OrderType.MARKET,
             onCheckedChange: (checked) => {
               props.onSwitchChanged(checked);
             }
@@ -3834,16 +3838,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__ */ jsxRuntime.jsx(TPSLPriceWarning, { errors: props.errors })
   ] });
 };
+var TPSLPriceWarning = (props) => {
+  const { getErrorMsg } = reactApp.useOrderEntryFormErrorMsg(props.errors);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    ui.DotStatus,
+    {
+      color: "warning",
+      size: "xs",
+      label: getErrorMsg("sl_trigger_price")
+    }
+  );
+};
 var TPSLInputForm = React3__default.default.forwardRef((props, ref) => {
   const { getErrorMsg } = reactApp.useOrderEntryFormErrorMsg(props.errors);
   const { t } = i18n.useTranslation();
@@ -3896,6 +3913,9 @@ var TPSLInputForm = React3__default.default.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
             }
           }
         ) })
@@ -4012,8 +4032,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: ui.cn("oui-pr-2 md:oui-pr-3", props.classNames?.root),
+        prefix: ui.cn("oui-pr-1 md:oui-pr-2", props.classNames?.prefix),
+        input: ui.cn(
+          "oui-text-2xs placeholder:oui-text-2xs",
+          props.classNames?.input
+        )
       },
       onValueChange,
       formatters: [
@@ -4033,6 +4057,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",
@@ -4109,6 +4134,7 @@ var OrderEntry = (props) => {
   });
   const { notification } = hooks.useOrderlyContext();
   const soundAlertId = React3.useId();
+  const isSlPriceWarning = props.slPriceError?.sl_trigger_price?.type === hooks.ERROR_MSG_CODES.SL_PRICE_WARNING;
   const { getErrorMsg } = reactApp.useOrderEntryFormErrorMsg(validated ? errors : null);
   const buttonLabel = React3.useMemo(() => {
     return side === types.OrderSide.BUY ? t("orderEntry.buyLong") : t("orderEntry.sellShort");
@@ -4152,7 +4178,8 @@ var OrderEntry = (props) => {
   }, [errorMsgVisible]);
   const onSubmit = hooks.useMemoizedFn(async () => {
     const isScaledOrder = formattedOrder.order_type === types.OrderType.SCALED;
-    helper.validate().then(
+    const isSlPriceError = props.slPriceError?.sl_trigger_price?.type === hooks.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) => {
@@ -4284,6 +4311,7 @@ var OrderEntry = (props) => {
   React3.useEffect(() => {
     setHasAdvancedTPSLResult(false);
   }, [props.symbol]);
+  const showReduceOnlySection = isMobile && formattedOrder.order_type !== types.OrderType.LIMIT && formattedOrder.order_type !== types.OrderType.MARKET || !isMobile;
   const showSoundSection = Boolean(notification?.orderFilled?.media) && (notification?.orderFilled?.displayInOrderEntry ?? true);
   const additionalInfoProps = {
     pinned,
@@ -4428,8 +4456,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) => {
@@ -4458,7 +4485,7 @@ var OrderEntry = (props) => {
                   }
                 }
               ),
-              (isMobile && (formattedOrder.order_type !== types.OrderType.LIMIT && formattedOrder.order_type !== types.OrderType.MARKET || formattedOrder.reduce_only) || !isMobile) && /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { justify: "between", itemAlign: "center", className: "oui-mt-2", children: [
+              showReduceOnlySection && /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { justify: "between", itemAlign: "center", className: "oui-mt-2", children: [
                 /* @__PURE__ */ jsxRuntime.jsx(
                   ReduceOnlySwitch,
                   {
@@ -4889,8 +4916,24 @@ var useOrderEntryScript = (inputs) => {
   const { priceInputContainerRef, priceInputContainerWidth } = usePriceInputContainer({
     order_type_ext: formattedOrder.order_type_ext
   });
+  const slPriceError = hooks.useTpslPriceChecker({
+    slPrice: formattedOrder.sl_trigger_price,
+    liqPrice: state.estLiqPrice,
+    side: formattedOrder.side
+  });
+  React3.useEffect(() => {
+    if (formattedOrder.reduce_only) {
+      setTpslSwitch(false);
+    }
+  }, [formattedOrder.reduce_only]);
+  React3.useEffect(() => {
+    if (tpslSwitch) {
+      setOrderValue("reduce_only", false);
+    }
+  }, [tpslSwitch]);
   return {
     ...state,
+    slPriceError: slPriceError ?? void 0,
     side: formattedOrder.side,
     type: formattedOrder.order_type,
     level: formattedOrder.level,