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

package/dist/index.mjs

@@ -2911,6 +2911,7 @@ var OrderEntryProvider = (props) => {
     onBlur,
     getErrorMsg,
     setOrderValue,
+    manualSetOrderValue,
     setOrderValues,
     currentFocusInput,
     errors,
@@ -2929,6 +2930,7 @@ var OrderEntryProvider = (props) => {
       onBlur,
       getErrorMsg,
       setOrderValue,
+      manualSetOrderValue,
       setOrderValues,
       currentFocusInput,
       errors,
@@ -2947,6 +2949,7 @@ var OrderEntryProvider = (props) => {
     onBlur,
     getErrorMsg,
     setOrderValue,
+    manualSetOrderValue,
     setOrderValues,
     currentFocusInput,
     errors,
@@ -4375,7 +4378,12 @@ var SLIDER_MAX = 100;
 var QuantitySlider = memo((props) => {
   const { canTrade, side, order_quantity, maxQty } = props;
   const [sliderValue, setSliderValue] = useState(0);
-  const { setOrderValue, symbolInfo, lastQuantityInputType } = useOrderEntryContext();
+  const {
+    setOrderValue,
+    manualSetOrderValue,
+    symbolInfo,
+    lastQuantityInputType
+  } = useOrderEntryContext();
   const { base_dp, base_tick } = symbolInfo;
   const { t } = useTranslation();
   const color = useMemo(
@@ -4388,22 +4396,30 @@ var QuantitySlider = 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 Decimal(value).div(SLIDER_MAX).mul(maxQty).toFixed(base_dp, Decimal.ROUND_DOWN);
-    setOrderValue("order_quantity", utils.formatNumber(newQty, base_tick));
+    if (isManual) {
+      manualSetOrderValue?.(
+        "order_quantity",
+        utils.formatNumber(newQty, base_tick)
+      );
+    } else {
+      setOrderValue("order_quantity", utils.formatNumber(newQty, base_tick));
+    }
   };
   const onMax = () => {
     onSliderValueChange(SLIDER_MAX);
     if (sliderValue === SLIDER_MAX) {
-      sliderToQuantity(SLIDER_MAX);
+      sliderToQuantity(SLIDER_MAX, true);
     }
   };
   useEffect(() => {
     if (lastQuantityInputType.current === 4 /* QUANTITY_SLIDER */) {
       sliderToQuantity(sliderValue);
     }
-  }, [sliderValue, maxQty]);
+  }, [maxQty]);
   useEffect(() => {
     const quantityToSlider = () => {
       if (order_quantity && Number(order_quantity) !== 0 && maxQty !== 0) {
@@ -5158,6 +5174,7 @@ var OrderEntry = (props) => {
     side,
     formattedOrder,
     setOrderValue,
+    manualSetOrderValue,
     setOrderValues,
     symbolInfo,
     maxQty,
@@ -5213,11 +5230,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]);
   useEffect(() => {
     const clickHandler = (event) => {
       const target = event.target;
@@ -5291,12 +5308,12 @@ var OrderEntry = (props) => {
     return new Decimal(maxQty).todp(symbolInfo.base_dp, Decimal.ROUND_DOWN).toString();
   }, [maxQty, symbolInfo.base_dp]);
   const onMaxQtyConfirm = 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 modal.confirm({
@@ -5304,7 +5321,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();
@@ -5336,7 +5353,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,
@@ -5384,7 +5401,7 @@ var OrderEntry = (props) => {
     setNeedConfirm,
     hidden,
     setHidden,
-    onValueChange: setOrderValue,
+    onValueChange: manualSetOrderValue,
     orderTypeExtra: formattedOrder["order_type_ext"],
     showExtra: formattedOrder["order_type"] === OrderType.LIMIT && !props.tpslSwitch
   };
@@ -5399,6 +5416,7 @@ var OrderEntry = (props) => {
       onBlur: props.onBlur,
       getErrorMsg,
       setOrderValue,
+      manualSetOrderValue,
       setOrderValues,
       currentFocusInput: currentFocusInput.current,
       priceInputRef: props.priceInputRef,
@@ -5434,7 +5452,7 @@ var OrderEntry = (props) => {
                   canTrade: props.canTrade,
                   side,
                   order_type: formattedOrder.order_type,
-                  setOrderValue,
+                  setOrderValue: manualSetOrderValue,
                   symbolLeverage: props.symbolLeverage,
                   marginMode: props.marginMode
                 }
@@ -5529,10 +5547,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 ?? PositionType.PARTIAL,
@@ -5569,7 +5587,7 @@ var OrderEntry = (props) => {
                       {
                         checked: formattedOrder.reduce_only ?? false,
                         onCheckedChange: (checked) => {
-                          setOrderValue("reduce_only", checked);
+                          manualSetOrderValue("reduce_only", checked);
                         }
                       }
                     ),
@@ -5658,7 +5676,7 @@ var OrderEntry = (props) => {
             children: showTPSLAdvanced && /* @__PURE__ */ jsx(
               TPSLAdvancedWidget,
               {
-                setOrderValue,
+                setOrderValue: manualSetOrderValue,
                 order: formattedOrder,
                 onSubmit: onSubmitAdvancedTPSL,
                 onClose: () => {
@@ -5937,6 +5955,12 @@ var useOrderEntryScript = (inputs) => {
       );
     }
   );
+  const manualSetOrderValue = useMemoizedFn(
+    (key, value, options2) => {
+      lastUserActiveTimeRef.current = Date.now();
+      setOrderValue(key, value, options2);
+    }
+  );
   const onTPSLSwitchChanged = (state2) => {
     setTpslSwitch(state2);
     if (state2) {
@@ -6063,22 +6087,21 @@ var useOrderEntryScript = (inputs) => {
     }
   }, [tpslSwitch]);
   useEffect(() => {
-    lastUserActiveTimeRef.current = Date.now();
-  }, [
-    formattedOrder.order_price,
-    formattedOrder.order_quantity,
-    formattedOrder.side
-  ]);
-  useEffect(() => {
+    let estLiqPrice = state.estLiqPrice;
+    if (estLiqPrice == null || formattedOrder.side == null || state.markPrice == null) {
+      estLiqPrice = null;
+    } else if (formattedOrder.side === OrderSide.BUY && estLiqPrice > state.markPrice || formattedOrder.side === 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(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]);
   useEffect(() => {
     setOrderValue("margin_mode", marginMode);
   }, [marginMode]);
@@ -6090,6 +6113,7 @@ var useOrderEntryScript = (inputs) => {
     level: formattedOrder.level,
     formattedOrder,
     setOrderValue,
+    manualSetOrderValue,
     setOrderValues,
     // account-level leverage (for other consumers)
     currentLeverage,