@orderly.network/ui-order-entry 2.11.1-alpha.0 → 2.11.2-alpha.0

package/dist/index.d.mts

@@ -47,6 +47,9 @@ declare const useOrderEntryScript: (inputs: OrderEntryScriptInputs) => {
     setOrderValue: (this: unknown, key: string, value: unknown, options?: {
         shouldUpdateLastChangedField?: boolean;
     } | undefined) => void;
+    manualSetOrderValue: (this: unknown, key: string, value: unknown, options?: {
+        shouldUpdateLastChangedField?: boolean;
+    } | undefined) => void;
     setOrderValues: (values: Partial<_orderly_network_types.OrderlyOrder>) => void;
     currentLeverage: number | null;
     symbolLeverage: number | undefined;

package/dist/index.d.ts

@@ -47,6 +47,9 @@ declare const useOrderEntryScript: (inputs: OrderEntryScriptInputs) => {
     setOrderValue: (this: unknown, key: string, value: unknown, options?: {
         shouldUpdateLastChangedField?: boolean;
     } | undefined) => void;
+    manualSetOrderValue: (this: unknown, key: string, value: unknown, options?: {
+        shouldUpdateLastChangedField?: boolean;
+    } | undefined) => void;
     setOrderValues: (values: Partial<_orderly_network_types.OrderlyOrder>) => void;
     currentLeverage: number | null;
     symbolLeverage: number | undefined;

package/dist/index.js

@@ -2917,6 +2917,7 @@ var OrderEntryProvider = (props) => {
     onBlur,
     getErrorMsg,
     setOrderValue,
+    manualSetOrderValue,
     setOrderValues,
     currentFocusInput,
     errors,
@@ -2935,6 +2936,7 @@ var OrderEntryProvider = (props) => {
       onBlur,
       getErrorMsg,
       setOrderValue,
+      manualSetOrderValue,
       setOrderValues,
       currentFocusInput,
       errors,
@@ -2953,6 +2955,7 @@ var OrderEntryProvider = (props) => {
     onBlur,
     getErrorMsg,
     setOrderValue,
+    manualSetOrderValue,
     setOrderValues,
     currentFocusInput,
     errors,
@@ -4381,7 +4384,12 @@ var SLIDER_MAX = 100;
 var QuantitySlider = React3.memo((props) => {
   const { canTrade, side, order_quantity, maxQty } = props;
   const [sliderValue, setSliderValue] = React3.useState(0);
-  const { setOrderValue, symbolInfo, lastQuantityInputType } = useOrderEntryContext();
+  const {
+    setOrderValue,
+    manualSetOrderValue,
+    symbolInfo,
+    lastQuantityInputType
+  } = useOrderEntryContext();
   const { base_dp, base_tick } = symbolInfo;
   const { t } = i18n.useTranslation();
   const color = React3.useMemo(
@@ -4394,22 +4402,30 @@ var QuantitySlider = React3.memo((props) => {
   const onSliderValueChange = (value) => {
     lastQuantityInputType.current = 4 /* QUANTITY_SLIDER */;
     setSliderValue(value);
+    sliderToQuantity(value, true);
   };
-  const sliderToQuantity = (value) => {
+  const sliderToQuantity = (value, isManual = false) => {
     const newQty = new utils.Decimal(value).div(SLIDER_MAX).mul(maxQty).toFixed(base_dp, utils.Decimal.ROUND_DOWN);
-    setOrderValue("order_quantity", hooks.utils.formatNumber(newQty, base_tick));
+    if (isManual) {
+      manualSetOrderValue?.(
+        "order_quantity",
+        hooks.utils.formatNumber(newQty, base_tick)
+      );
+    } else {
+      setOrderValue("order_quantity", hooks.utils.formatNumber(newQty, base_tick));
+    }
   };
   const onMax = () => {
     onSliderValueChange(SLIDER_MAX);
     if (sliderValue === SLIDER_MAX) {
-      sliderToQuantity(SLIDER_MAX);
+      sliderToQuantity(SLIDER_MAX, true);
     }
   };
   React3.useEffect(() => {
     if (lastQuantityInputType.current === 4 /* QUANTITY_SLIDER */) {
       sliderToQuantity(sliderValue);
     }
-  }, [sliderValue, maxQty]);
+  }, [maxQty]);
   React3.useEffect(() => {
     const quantityToSlider = () => {
       if (order_quantity && Number(order_quantity) !== 0 && maxQty !== 0) {
@@ -5164,6 +5180,7 @@ var OrderEntry = (props) => {
     side,
     formattedOrder,
     setOrderValue,
+    manualSetOrderValue,
     setOrderValues,
     symbolInfo,
     maxQty,
@@ -5219,11 +5236,11 @@ var OrderEntry = (props) => {
       return;
     }
     if (slippage) {
-      setOrderValue("slippage", Number(slippage));
+      manualSetOrderValue("slippage", Number(slippage));
     } else {
-      setOrderValue("slippage", void 0);
+      manualSetOrderValue("slippage", void 0);
     }
-  }, [slippage, disableFeatures]);
+  }, [slippage, disableFeatures, manualSetOrderValue]);
   React3.useEffect(() => {
     const clickHandler = (event) => {
       const target = event.target;
@@ -5297,12 +5314,12 @@ var OrderEntry = (props) => {
     return new utils.Decimal(maxQty).todp(symbolInfo.base_dp, utils.Decimal.ROUND_DOWN).toString();
   }, [maxQty, symbolInfo.base_dp]);
   const onMaxQtyConfirm = React3.useCallback(() => {
-    setOrderValue("order_quantity", formattedMaxQty);
+    manualSetOrderValue("order_quantity", formattedMaxQty);
     requestAnimationFrame(() => {
       onSubmit();
     });
     setMaxQtyConfirmOpen(false);
-  }, [setOrderValue, formattedMaxQty]);
+  }, [manualSetOrderValue, formattedMaxQty, onSubmit]);
   const validateSubmit = async () => {
     if (formattedOrder.reduce_only && maxQty === 0) {
       return ui.modal.confirm({
@@ -5310,7 +5327,7 @@ var OrderEntry = (props) => {
         content: t("orderEntry.reduceOnly.reminder.content"),
         okLabel: t("orderEntry.placeOrderNow"),
         onOk: async () => {
-          setOrderValue("reduce_only", false);
+          manualSetOrderValue("reduce_only", false);
           requestAnimationFrame(() => {
             props.resetMetaState();
             onSubmit();
@@ -5342,7 +5359,7 @@ var OrderEntry = (props) => {
   };
   const onSubmitAdvancedTPSL = (order) => {
     if (order.side !== formattedOrder.side) {
-      setOrderValue("side", order.side);
+      manualSetOrderValue("side", order.side);
     }
     setOrderValues({
       position_type: order.position_type,
@@ -5390,7 +5407,7 @@ var OrderEntry = (props) => {
     setNeedConfirm,
     hidden,
     setHidden,
-    onValueChange: setOrderValue,
+    onValueChange: manualSetOrderValue,
     orderTypeExtra: formattedOrder["order_type_ext"],
     showExtra: formattedOrder["order_type"] === types.OrderType.LIMIT && !props.tpslSwitch
   };
@@ -5405,6 +5422,7 @@ var OrderEntry = (props) => {
       onBlur: props.onBlur,
       getErrorMsg,
       setOrderValue,
+      manualSetOrderValue,
       setOrderValues,
       currentFocusInput: currentFocusInput.current,
       priceInputRef: props.priceInputRef,
@@ -5440,7 +5458,7 @@ var OrderEntry = (props) => {
                   canTrade: props.canTrade,
                   side,
                   order_type: formattedOrder.order_type,
-                  setOrderValue,
+                  setOrderValue: manualSetOrderValue,
                   symbolLeverage: props.symbolLeverage,
                   marginMode: props.marginMode
                 }
@@ -5535,10 +5553,10 @@ var OrderEntry = (props) => {
                   onSwitchChanged: props.setTpslSwitch,
                   orderType: formattedOrder.order_type,
                   errors: validated || props.slPriceError !== void 0 ? { ...errors, ...props.slPriceError } : null,
-                  setOrderValue,
+                  setOrderValue: manualSetOrderValue,
                   reduceOnlyChecked: formattedOrder.reduce_only ?? false,
                   onReduceOnlyChange: (checked) => {
-                    setOrderValue("reduce_only", checked);
+                    manualSetOrderValue("reduce_only", checked);
                   },
                   values: {
                     position_type: formattedOrder.position_type ?? types.PositionType.PARTIAL,
@@ -5575,7 +5593,7 @@ var OrderEntry = (props) => {
                       {
                         checked: formattedOrder.reduce_only ?? false,
                         onCheckedChange: (checked) => {
-                          setOrderValue("reduce_only", checked);
+                          manualSetOrderValue("reduce_only", checked);
                         }
                       }
                     ),
@@ -5664,7 +5682,7 @@ var OrderEntry = (props) => {
             children: showTPSLAdvanced && /* @__PURE__ */ jsxRuntime.jsx(
               uiTpsl.TPSLAdvancedWidget,
               {
-                setOrderValue,
+                setOrderValue: manualSetOrderValue,
                 order: formattedOrder,
                 onSubmit: onSubmitAdvancedTPSL,
                 onClose: () => {
@@ -5943,6 +5961,12 @@ var useOrderEntryScript = (inputs) => {
       );
     }
   );
+  const manualSetOrderValue = hooks.useMemoizedFn(
+    (key, value, options2) => {
+      lastUserActiveTimeRef.current = Date.now();
+      setOrderValue(key, value, options2);
+    }
+  );
   const onTPSLSwitchChanged = (state2) => {
     setTpslSwitch(state2);
     if (state2) {
@@ -6069,22 +6093,21 @@ var useOrderEntryScript = (inputs) => {
     }
   }, [tpslSwitch]);
   React3.useEffect(() => {
-    lastUserActiveTimeRef.current = Date.now();
-  }, [
-    formattedOrder.order_price,
-    formattedOrder.order_quantity,
-    formattedOrder.side
-  ]);
-  React3.useEffect(() => {
+    let estLiqPrice = state.estLiqPrice;
+    if (estLiqPrice == null || formattedOrder.side == null || state.markPrice == null) {
+      estLiqPrice = null;
+    } else if (formattedOrder.side === types.OrderSide.BUY && estLiqPrice > state.markPrice || formattedOrder.side === types.OrderSide.SELL && estLiqPrice < state.markPrice) {
+      estLiqPrice = null;
+    }
     const lastActive = lastUserActiveTimeRef.current;
     const now = Date.now();
     const isUserActive = now - lastActive <= ORDER_ENTRY_EST_LIQ_ACTIVE_WINDOW_MS;
     ee.emit(types.ORDER_ENTRY_EST_LIQ_PRICE_CHANGE, {
       symbol,
-      estLiqPrice: state.estLiqPrice ?? null,
+      estLiqPrice,
       isUserActive
     });
-  }, [ee, symbol, state.estLiqPrice]);
+  }, [ee, symbol, state.estLiqPrice, state.markPrice, formattedOrder.side]);
   React3.useEffect(() => {
     setOrderValue("margin_mode", marginMode);
   }, [marginMode]);
@@ -6096,6 +6119,7 @@ var useOrderEntryScript = (inputs) => {
     level: formattedOrder.level,
     formattedOrder,
     setOrderValue,
+    manualSetOrderValue,
     setOrderValues,
     // account-level leverage (for other consumers)
     currentLeverage,