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

package/dist/index.d.mts

@@ -83,6 +83,8 @@ declare const useOrderEntryScript: (inputs: OrderEntryScriptInputs) => {
     resetMetaState: () => void;
     maxQty: number;
     estLiqPrice: number | null;
+    currentPosition: number;
+    estLiqPriceDistance: number | null;
     estLeverage: number | null;
     estSlippage: number | null;
     helper: {

package/dist/index.d.ts

@@ -83,6 +83,8 @@ declare const useOrderEntryScript: (inputs: OrderEntryScriptInputs) => {
     resetMetaState: () => void;
     maxQty: number;
     estLiqPrice: number | null;
+    currentPosition: number;
+    estLiqPriceDistance: number | null;
     estLeverage: number | null;
     estSlippage: number | null;
     helper: {

package/dist/index.js

@@ -60,14 +60,21 @@ var AdditionalInfo = (props) => {
               }
             ),
             /* @__PURE__ */ jsxRuntime.jsx(
-              "label",
+              ui.Tooltip,
               {
-                htmlFor: "toggle_order_post_only",
-                className: ui.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__ */ jsxRuntime.jsx(
+                  "label",
+                  {
+                    htmlFor: "toggle_order_post_only",
+                    className: ui.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")
+                  }
+                )
               }
             )
           ] }),
@@ -86,14 +93,21 @@ var AdditionalInfo = (props) => {
               }
             ),
             /* @__PURE__ */ jsxRuntime.jsx(
-              "label",
+              ui.Tooltip,
               {
-                htmlFor: "toggle_order_iov",
-                className: ui.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__ */ jsxRuntime.jsx(
+                  "label",
+                  {
+                    htmlFor: "toggle_order_iov",
+                    className: ui.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")
+                  }
+                )
               }
             )
           ] }),
@@ -112,14 +126,21 @@ var AdditionalInfo = (props) => {
               }
             ),
             /* @__PURE__ */ jsxRuntime.jsx(
-              "label",
+              ui.Tooltip,
               {
-                htmlFor: "toggle_order_fok",
-                className: ui.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__ */ jsxRuntime.jsx(
+                  "label",
+                  {
+                    htmlFor: "toggle_order_fok",
+                    className: ui.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")
+                  }
+                )
               }
             )
           ] })
@@ -163,11 +184,18 @@ var AdditionalInfo = (props) => {
           }
         ),
         /* @__PURE__ */ jsxRuntime.jsx(
-          "label",
+          ui.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__ */ jsxRuntime.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")
+              }
+            )
           }
         )
       ] })
@@ -880,6 +908,11 @@ function AssetInfo(props) {
   const { canTrade, disableFeatures, orderType, symbol } = props;
   const { t } = i18n.useTranslation();
   const { isMobile } = ui.useScreen();
+  const displayEstLiqPrice = hooks.useGetEstLiqPrice({
+    estLiqPrice: props.estLiqPrice,
+    symbol,
+    side: props.side
+  });
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "oui-space-y-[2px] xl:oui-space-y-1", children: [
     /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { justify: "between", children: [
       isMobile ? /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "2xs", children: t("orderEntry.estLiqPrice") }) : /* @__PURE__ */ jsxRuntime.jsx(
@@ -916,7 +949,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 ?? "--" : "--"
         }
       )
     ] }),
@@ -4167,11 +4200,8 @@ var OrderEntry = (props) => {
   const soundAlertId = React3.useId();
   const { getErrorMsg } = reactApp.useOrderEntryFormErrorMsg(validated ? errors : null);
   const buttonLabel = React3.useMemo(() => {
-    if (isMobile && freeCollateral <= 0) {
-      return t("common.deposit");
-    }
     return side === types.OrderSide.BUY ? t("orderEntry.buyLong") : t("orderEntry.sellShort");
-  }, [side, t, isMobile, freeCollateral]);
+  }, [side, t, isMobile]);
   React3.useEffect(() => {
     if (validated) {
       setErrorMsgVisible(true);
@@ -4443,17 +4473,9 @@ var OrderEntry = (props) => {
                   id: "order-entry-submit-button",
                   "data-type": types.OrderSide.BUY,
                   className: ui.cn(
-                    isMobile && freeCollateral <= 0 ? "oui-bg-primary-darken hover:oui-bg-primary-darken/80 active:oui-bg-primary-darken/80" : side === types.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 === types.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) {
-                      ui.modal.show("DepositAndWithdrawWithSheetId", {
-                        activeTab: "deposit"
-                      });
-                    } else {
-                      validateSubmit();
-                    }
-                  },
+                  onClick: validateSubmit,
                   loading: props.isMutating,
                   disabled: !props.canTrade,
                   children: buttonLabel
@@ -4465,6 +4487,7 @@ var OrderEntry = (props) => {
                   canTrade: props.canTrade,
                   quote: symbolInfo.quote,
                   estLiqPrice: props.estLiqPrice,
+                  estLiqPriceDistance: props.estLiqPriceDistance,
                   estLeverage: props.estLeverage,
                   currentLeverage: props.currentLeverage,
                   slippage,
@@ -4473,7 +4496,8 @@ var OrderEntry = (props) => {
                   estSlippage: props.estSlippage,
                   orderType: formattedOrder.order_type,
                   disableFeatures,
-                  symbol: props.symbol
+                  symbol: props.symbol,
+                  side
                 }
               ),
               /* @__PURE__ */ jsxRuntime.jsx(ui.Divider, { className: "oui-w-full" }),
@@ -4960,7 +4984,9 @@ var useOrderEntryScript = (inputs) => {
   const slPriceError = hooks.useTpslPriceChecker({
     slPrice: formattedOrder.sl_trigger_price,
     liqPrice: state.estLiqPrice,
-    side: formattedOrder.side
+    side: formattedOrder.side,
+    currentPosition: state.currentPosition,
+    orderQuantity: Number(formattedOrder.order_quantity)
   });
   React3.useEffect(() => {
     if (formattedOrder.reduce_only) {