@orderly.network/ui-order-entry 2.8.12 → 2.8.13-alpha.0

package/dist/index.mjs

@@ -1,5 +1,5 @@
 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, ERROR_MSG_CODES, useOrderEntry, useMarginRatio, useComputedLTV, useTpslPriceChecker, useHoldingStream, useAppStore, useIndexPricesStream, useTrack, useQuery, useSymbolLeverage, useBoolean } from '@orderly.network/hooks';
+import { useLocalStorage, utils, usePositionStream, useEventEmitter, useDebouncedCallback, useFeeState, useRwaSymbolsInfoStore, useOrderlyContext, useMemoizedFn, ERROR_MSG_CODES, useOrderEntry, useMarginRatio, useComputedLTV, useTpslPriceChecker, useHoldingStream, useAppStore, useIndexPricesStream, useGetEstLiqPrice, 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';
@@ -54,14 +54,21 @@ var AdditionalInfo = (props) => {
               }
             ),
             /* @__PURE__ */ jsx(
-              "label",
+              Tooltip,
               {
-                htmlFor: "toggle_order_post_only",
-                className: cn(
-                  "oui-ml-1 oui-text-2xs peer-data-[disabled]:oui-text-base-contrast-20",
-                  "oui-whitespace-nowrap oui-break-normal"
-                ),
-                children: t("orderEntry.orderType.postOnly")
+                content: t("orderEntry.orderType.postOnly.tooltip"),
+                className: "oui-max-w-[280px] oui-text-2xs oui-text-base-contrast-80",
+                children: /* @__PURE__ */ jsx(
+                  "label",
+                  {
+                    htmlFor: "toggle_order_post_only",
+                    className: cn(
+                      "oui-ml-1 oui-text-2xs peer-data-[disabled]:oui-text-base-contrast-20",
+                      "oui-cursor-pointer oui-whitespace-nowrap oui-break-normal oui-border-b oui-border-dashed oui-border-line-12"
+                    ),
+                    children: t("orderEntry.orderType.postOnly")
+                  }
+                )
               }
             )
           ] }),
@@ -80,14 +87,21 @@ var AdditionalInfo = (props) => {
               }
             ),
             /* @__PURE__ */ jsx(
-              "label",
+              Tooltip,
               {
-                htmlFor: "toggle_order_iov",
-                className: cn(
-                  "oui-ml-1 oui-text-2xs peer-data-[disabled]:oui-text-base-contrast-20",
-                  "oui-whitespace-nowrap oui-break-normal"
-                ),
-                children: t("orderEntry.orderType.ioc")
+                content: t("orderEntry.orderType.ioc.tooltip"),
+                className: "oui-max-w-[280px] oui-text-2xs oui-text-base-contrast-80",
+                children: /* @__PURE__ */ jsx(
+                  "label",
+                  {
+                    htmlFor: "toggle_order_iov",
+                    className: cn(
+                      "oui-ml-1 oui-text-2xs peer-data-[disabled]:oui-text-base-contrast-20",
+                      "oui-cursor-pointer oui-whitespace-nowrap oui-break-normal oui-border-b oui-border-dashed oui-border-line-12"
+                    ),
+                    children: t("orderEntry.orderType.ioc")
+                  }
+                )
               }
             )
           ] }),
@@ -106,14 +120,21 @@ var AdditionalInfo = (props) => {
               }
             ),
             /* @__PURE__ */ jsx(
-              "label",
+              Tooltip,
               {
-                htmlFor: "toggle_order_fok",
-                className: cn(
-                  "oui-ml-1 oui-text-2xs peer-data-[disabled]:oui-text-base-contrast-20",
-                  "oui-whitespace-nowrap oui-break-normal"
-                ),
-                children: t("orderEntry.orderType.fok")
+                content: t("orderEntry.orderType.fok.tooltip"),
+                className: "oui-max-w-[280px] oui-text-2xs oui-text-base-contrast-80",
+                children: /* @__PURE__ */ jsx(
+                  "label",
+                  {
+                    htmlFor: "toggle_order_fok",
+                    className: cn(
+                      "oui-ml-1 oui-text-2xs peer-data-[disabled]:oui-text-base-contrast-20",
+                      "oui-cursor-pointer oui-whitespace-nowrap oui-break-normal oui-border-b oui-border-dashed oui-border-line-12"
+                    ),
+                    children: t("orderEntry.orderType.fok")
+                  }
+                )
               }
             )
           ] })
@@ -157,11 +178,18 @@ var AdditionalInfo = (props) => {
           }
         ),
         /* @__PURE__ */ jsx(
-          "label",
+          Tooltip,
           {
-            htmlFor: "toggle_order_hidden",
-            className: "oui-ml-1 oui-text-2xs",
-            children: t("orderEntry.hidden")
+            content: t("orderEntry.hidden.tooltip"),
+            className: "oui-max-w-[280px] oui-text-2xs oui-text-base-contrast-80",
+            children: /* @__PURE__ */ jsx(
+              "label",
+              {
+                htmlFor: "toggle_order_hidden",
+                className: "oui-ml-1 oui-cursor-pointer oui-border-b oui-border-dashed oui-border-line-12 oui-text-2xs",
+                children: t("orderEntry.hidden")
+              }
+            )
           }
         )
       ] })
@@ -874,6 +902,11 @@ function AssetInfo(props) {
   const { canTrade, disableFeatures, orderType, symbol } = props;
   const { t } = useTranslation();
   const { isMobile } = useScreen();
+  const displayEstLiqPrice = useGetEstLiqPrice({
+    estLiqPrice: props.estLiqPrice,
+    symbol,
+    side: props.side
+  });
   return /* @__PURE__ */ jsxs("div", { className: "oui-space-y-[2px] xl:oui-space-y-1", children: [
     /* @__PURE__ */ jsxs(Flex, { justify: "between", children: [
       isMobile ? /* @__PURE__ */ jsx(Text, { size: "2xs", children: t("orderEntry.estLiqPrice") }) : /* @__PURE__ */ jsx(
@@ -910,7 +943,7 @@ function AssetInfo(props) {
           dp: props.dp,
           className: "oui-text-base-contrast-80",
           unitClassName: "oui-ml-1 oui-text-base-contrast-36",
-          children: canTrade ? props.estLiqPrice ?? "--" : "--"
+          children: canTrade ? displayEstLiqPrice ?? "--" : "--"
         }
       )
     ] }),
@@ -4161,11 +4194,8 @@ var OrderEntry = (props) => {
   const soundAlertId = useId();
   const { getErrorMsg } = useOrderEntryFormErrorMsg(validated ? errors : null);
   const buttonLabel = useMemo(() => {
-    if (isMobile && freeCollateral <= 0) {
-      return t("common.deposit");
-    }
     return side === OrderSide.BUY ? t("orderEntry.buyLong") : t("orderEntry.sellShort");
-  }, [side, t, isMobile, freeCollateral]);
+  }, [side, t, isMobile]);
   useEffect(() => {
     if (validated) {
       setErrorMsgVisible(true);
@@ -4437,17 +4467,9 @@ var OrderEntry = (props) => {
                   id: "order-entry-submit-button",
                   "data-type": OrderSide.BUY,
                   className: cn(
-                    isMobile && freeCollateral <= 0 ? "oui-bg-primary-darken hover:oui-bg-primary-darken/80 active:oui-bg-primary-darken/80" : side === OrderSide.BUY ? "orderly-order-entry-submit-button-buy oui-bg-success-darken hover:oui-bg-success-darken/80 active:oui-bg-success-darken/80" : "orderly-order-entry-submit-button-sell oui-bg-danger-darken hover:oui-bg-danger-darken/80 active:oui-bg-danger-darken/80"
+                    side === OrderSide.BUY ? "orderly-order-entry-submit-button-buy oui-bg-success-darken hover:oui-bg-success-darken/80 active:oui-bg-success-darken/80" : "orderly-order-entry-submit-button-sell oui-bg-danger-darken hover:oui-bg-danger-darken/80 active:oui-bg-danger-darken/80"
                   ),
-                  onClick: () => {
-                    if (isMobile && freeCollateral <= 0) {
-                      modal.show("DepositAndWithdrawWithSheetId", {
-                        activeTab: "deposit"
-                      });
-                    } else {
-                      validateSubmit();
-                    }
-                  },
+                  onClick: validateSubmit,
                   loading: props.isMutating,
                   disabled: !props.canTrade,
                   children: buttonLabel
@@ -4459,6 +4481,7 @@ var OrderEntry = (props) => {
                   canTrade: props.canTrade,
                   quote: symbolInfo.quote,
                   estLiqPrice: props.estLiqPrice,
+                  estLiqPriceDistance: props.estLiqPriceDistance,
                   estLeverage: props.estLeverage,
                   currentLeverage: props.currentLeverage,
                   slippage,
@@ -4467,7 +4490,8 @@ var OrderEntry = (props) => {
                   estSlippage: props.estSlippage,
                   orderType: formattedOrder.order_type,
                   disableFeatures,
-                  symbol: props.symbol
+                  symbol: props.symbol,
+                  side
                 }
               ),
               /* @__PURE__ */ jsx(Divider, { className: "oui-w-full" }),
@@ -4954,7 +4978,9 @@ var useOrderEntryScript = (inputs) => {
   const slPriceError = useTpslPriceChecker({
     slPrice: formattedOrder.sl_trigger_price,
     liqPrice: state.estLiqPrice,
-    side: formattedOrder.side
+    side: formattedOrder.side,
+    currentPosition: state.currentPosition,
+    orderQuantity: Number(formattedOrder.order_quantity)
   });
   useEffect(() => {
     if (formattedOrder.reduce_only) {