@kodiak-finance/orderly-ui-order-entry 2.9.2-alpha.1 → 2.9.3

package/dist/index.js

@@ -77,7 +77,7 @@ var AdditionalInfo = (props) => {
                         htmlFor: "toggle_order_post_only",
                         className: orderlyUi.cn(
                           "oui-postOnly-label",
-                          "oui-ml-1 oui-text-2xs peer-data-[disabled]:oui-text-base-contrast-20",
+                          "oui-ms-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")
@@ -111,7 +111,7 @@ var AdditionalInfo = (props) => {
                         htmlFor: "toggle_order_iov",
                         className: orderlyUi.cn(
                           "oui-ioc-label",
-                          "oui-ml-1 oui-text-2xs peer-data-[disabled]:oui-text-base-contrast-20",
+                          "oui-ms-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")
@@ -145,7 +145,7 @@ var AdditionalInfo = (props) => {
                         htmlFor: "toggle_order_fok",
                         className: orderlyUi.cn(
                           "oui-fok-label",
-                          "oui-ml-1 oui-text-2xs peer-data-[disabled]:oui-text-base-contrast-20",
+                          "oui-ms-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")
@@ -176,7 +176,7 @@ var AdditionalInfo = (props) => {
               "label",
               {
                 htmlFor: "toggle_order_confirm",
-                className: "oui-orderConfirm-label oui-ml-1 oui-text-2xs",
+                className: "oui-orderConfirm-label oui-ms-1 oui-text-2xs",
                 children: t("orderEntry.orderConfirm")
               }
             )
@@ -204,7 +204,7 @@ var AdditionalInfo = (props) => {
                   "label",
                   {
                     htmlFor: "toggle_order_hidden",
-                    className: "oui-orderHidden-label oui-ml-1 oui-cursor-pointer oui-border-b oui-border-dashed oui-border-line-12 oui-text-2xs",
+                    className: "oui-orderHidden-label oui-ms-1 oui-cursor-pointer oui-border-b oui-border-dashed oui-border-line-12 oui-text-2xs",
                     children: t("orderEntry.hidden")
                   }
                 )
@@ -230,7 +230,7 @@ var AdditionalInfo = (props) => {
               "label",
               {
                 htmlFor: "toggle_order_keep_visible",
-                className: "oui-keepVisible-label oui-ml-1 oui-text-2xs",
+                className: "oui-keepVisible-label oui-ms-1 oui-text-2xs",
                 children: t("orderEntry.keepVisible")
               }
             )
@@ -342,7 +342,7 @@ function AdvancedTPSLResult(props) {
                     /* @__PURE__ */ jsxRuntime.jsx(
                       orderlyUi.Text.numeral,
                       {
-                        suffix: /* @__PURE__ */ jsxRuntime.jsx(orderlyUi.Text, { className: "oui-ml-1 oui-text-base-contrast-36", children: symbolInfo.quote }),
+                        suffix: /* @__PURE__ */ jsxRuntime.jsx(orderlyUi.Text, { className: "oui-ms-1 oui-text-base-contrast-36", children: symbolInfo.quote }),
                         className: "oui-text-base-contrast",
                         dp: symbolInfo.quote_dp,
                         children: formattedOrder.tp_trigger_price ?? ""
@@ -354,7 +354,7 @@ function AdvancedTPSLResult(props) {
                     formattedOrder.tp_order_type === orderlyTypes.OrderType.LIMIT ? /* @__PURE__ */ jsxRuntime.jsx(
                       orderlyUi.Text.numeral,
                       {
-                        suffix: /* @__PURE__ */ jsxRuntime.jsx(orderlyUi.Text, { className: "oui-ml-1 oui-text-base-contrast-36", children: symbolInfo.quote }),
+                        suffix: /* @__PURE__ */ jsxRuntime.jsx(orderlyUi.Text, { className: "oui-ms-1 oui-text-base-contrast-36", children: symbolInfo.quote }),
                         className: "oui-text-base-contrast",
                         dp: symbolInfo.quote_dp,
                         children: formattedOrder.tp_order_price ?? ""
@@ -366,7 +366,7 @@ function AdvancedTPSLResult(props) {
                     /* @__PURE__ */ jsxRuntime.jsx(
                       orderlyUi.Text.numeral,
                       {
-                        suffix: /* @__PURE__ */ jsxRuntime.jsx(orderlyUi.Text, { className: "oui-ml-1 oui-text-base-contrast-36", children: symbolInfo.quote }),
+                        suffix: /* @__PURE__ */ jsxRuntime.jsx(orderlyUi.Text, { className: "oui-ms-1 oui-text-base-contrast-36", children: symbolInfo.quote }),
                         coloring: true,
                         dp: 2,
                         children: Number(formattedOrder.tp_pnl)
@@ -419,7 +419,7 @@ function AdvancedTPSLResult(props) {
                   /* @__PURE__ */ jsxRuntime.jsx(
                     orderlyUi.Text.numeral,
                     {
-                      suffix: /* @__PURE__ */ jsxRuntime.jsx(orderlyUi.Text, { className: "oui-ml-1 oui-text-base-contrast-36", children: symbolInfo.quote }),
+                      suffix: /* @__PURE__ */ jsxRuntime.jsx(orderlyUi.Text, { className: "oui-ms-1 oui-text-base-contrast-36", children: symbolInfo.quote }),
                       className: "oui-text-base-contrast",
                       dp: symbolInfo.quote_dp,
                       children: formattedOrder.sl_trigger_price ?? ""
@@ -431,7 +431,7 @@ function AdvancedTPSLResult(props) {
                   formattedOrder.sl_order_type === orderlyTypes.OrderType.LIMIT ? /* @__PURE__ */ jsxRuntime.jsx(
                     orderlyUi.Text.numeral,
                     {
-                      suffix: /* @__PURE__ */ jsxRuntime.jsx(orderlyUi.Text, { className: "oui-ml-1 oui-text-base-contrast-36", children: symbolInfo.quote }),
+                      suffix: /* @__PURE__ */ jsxRuntime.jsx(orderlyUi.Text, { className: "oui-ms-1 oui-text-base-contrast-36", children: symbolInfo.quote }),
                       className: "oui-text-base-contrast",
                       dp: symbolInfo.quote_dp,
                       children: formattedOrder.sl_order_price ?? ""
@@ -444,7 +444,7 @@ function AdvancedTPSLResult(props) {
                     orderlyUi.Text.numeral,
                     {
                       coloring: true,
-                      suffix: /* @__PURE__ */ jsxRuntime.jsx(orderlyUi.Text, { className: "oui-ml-1 oui-text-base-contrast-36", children: symbolInfo.quote }),
+                      suffix: /* @__PURE__ */ jsxRuntime.jsx(orderlyUi.Text, { className: "oui-ms-1 oui-text-base-contrast-36", children: symbolInfo.quote }),
                       dp: 2,
                       children: Number(formattedOrder.sl_pnl)
                     }
@@ -646,7 +646,7 @@ var OrderConfirmDialog = (props) => {
         unit: quote,
         rule: "price",
         className: "oui-text-base-contrast",
-        unitClassName: "oui-text-base-contrast-36 oui-ml-1",
+        unitClassName: "oui-text-base-contrast-36 oui-ms-1",
         dp: quote_dp,
         padding: false,
         children: order.order_price
@@ -676,7 +676,7 @@ var OrderConfirmDialog = (props) => {
           "oui-text-base-contrast",
           colorType === "TP" ? "oui-text-trade-profit" : "oui-text-trade-loss"
         ),
-        unitClassName: "oui-text-base-contrast-36 oui-ml-1",
+        unitClassName: "oui-text-base-contrast-36 oui-ms-1",
         dp: quote_dp,
         padding: false,
         children: price
@@ -982,7 +982,7 @@ var OrderItem = (props) => {
         dp,
         padding: false,
         className: "oui-text-base-contrast",
-        unitClassName: "oui-text-base-contrast-36 oui-ml-1",
+        unitClassName: "oui-text-base-contrast-36 oui-ms-1",
         children: value
       }
     )
@@ -1006,7 +1006,7 @@ var OrderTypeTag = (props) => {
       default:
         return "";
     }
-  }, [props.type]);
+  }, [props.type, t]);
   return /* @__PURE__ */ jsxRuntime.jsx(orderlyUi.Badge, { color: "neutral", size: "sm", children: typeStr });
 };
 var Dialog = (props) => {
@@ -1324,7 +1324,7 @@ var ScaledOrderConfirm = (props) => {
             dp: base_dp,
             padding: false,
             intensity: 80,
-            unitClassName: "oui-text-base-contrast-36 oui-ml-1",
+            unitClassName: "oui-text-base-contrast-36 oui-ms-1",
             children: totalQuantity
           }
         )
@@ -1339,7 +1339,7 @@ var ScaledOrderConfirm = (props) => {
             dp: quote_dp,
             padding: false,
             intensity: 80,
-            unitClassName: "oui-text-base-contrast-36 oui-ml-1",
+            unitClassName: "oui-text-base-contrast-36 oui-ms-1",
             children: national
           }
         )
@@ -1777,19 +1777,26 @@ var MarginModeSwitch = (props) => {
 var OptionCard = (props) => {
   const { t } = orderlyI18n.useTranslation();
   const title = props.mode === orderlyTypes.MarginMode.CROSS ? t("marginMode.crossMargin") : t("marginMode.isolatedMargin");
-  const desc = props.mode === orderlyTypes.MarginMode.CROSS ? t("marginMode.crossMarginDescription") : t("marginMode.isolatedMarginDescription");
   return /* @__PURE__ */ jsxRuntime.jsxs(
-    "button",
+    "div",
     {
-      type: "button",
+      role: "button",
+      tabIndex: props.disabled ? -1 : 0,
       className: orderlyUi.cn(
         "oui-relative oui-w-full oui-rounded-md oui-p-2",
         "oui-bg-base-6",
-        "oui-text-left",
-        props.disabled ? "oui-cursor-not-allowed oui-opacity-50 oui-border oui-border-transparent" : props.selected ? "oui-border oui-border-[#38e2fe]" : "oui-border oui-border-transparent hover:oui-border-line-12"
+        "oui-text-start",
+        props.disabled ? "oui-cursor-not-allowed oui-opacity-50 oui-border oui-border-transparent" : props.selected ? "oui-border oui-border-[#38e2fe]" : "oui-border oui-border-transparent hover:oui-border-line-12",
+        !props.disabled && "oui-cursor-pointer"
       ),
       onClick: props.disabled ? void 0 : props.onClick,
-      disabled: props.disabled,
+      onKeyDown: (e) => {
+        if (props.disabled) return;
+        if (e.key === "Enter" || e.key === " ") {
+          e.preventDefault();
+          props.onClick();
+        }
+      },
       "aria-disabled": props.disabled,
       "data-testid": `oui-testid-marginModeSwitch-option-${props.mode}`,
       children: [
@@ -1802,13 +1809,31 @@ var OptionCard = (props) => {
               children: title
             }
           ),
-          /* @__PURE__ */ jsxRuntime.jsx(orderlyUi.Text, { className: "oui-text-2xs oui-leading-[15px] oui-text-base-contrast-36 oui-font-semibold oui-tracking-[0.03em]", children: desc })
+          props.mode === orderlyTypes.MarginMode.ISOLATED ? /* @__PURE__ */ jsxRuntime.jsx(orderlyUi.Text, { className: "oui-text-2xs oui-leading-[15px] oui-text-base-contrast-36 oui-font-semibold oui-tracking-[0.03em]", children: /* @__PURE__ */ jsxRuntime.jsx(
+            orderlyI18n.Trans,
+            {
+              i18nKey: "marginMode.isolatedMarginDescription",
+              components: [
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "a",
+                  {
+                    href: "https://orderly.network/docs/introduction/trade-on-orderly/perpetual-futures/isolated-margin",
+                    target: "_blank",
+                    rel: "noopener noreferrer",
+                    className: "whitespace-nowrap oui-font-semibold oui-text-warning oui-underline oui-underline-offset-2 hover:oui-text-warning/90",
+                    onClick: (e) => e.stopPropagation()
+                  },
+                  "isolated-margin-doc"
+                )
+              ]
+            }
+          ) }) : /* @__PURE__ */ jsxRuntime.jsx(orderlyUi.Text, { className: "oui-text-2xs oui-leading-[15px] oui-text-base-contrast-36 oui-font-semibold oui-tracking-[0.03em]", children: t("marginMode.crossMarginDescription") })
         ] }),
         props.isCurrent ? /* @__PURE__ */ jsxRuntime.jsx(
           "div",
           {
             className: orderlyUi.cn(
-              "oui-absolute -oui-right-px -oui-top-px",
+              "oui-absolute -oui-end-px -oui-top-px",
               "oui-rounded-bl-md oui-rounded-tr-md",
               "oui-bg-[#38e2fe] oui-px-1 oui-py-0.5"
             ),
@@ -1823,7 +1848,11 @@ var useMarginModeSwitchScript = (options2) => {
   const { symbol, close } = options2;
   const { isMobile } = orderlyUi.useScreen();
   const { t } = orderlyI18n.useTranslation();
-  const { marginMode: currentMarginMode, update } = orderlyHooks.useMarginModeBySymbol(symbol);
+  const {
+    marginMode: currentMarginMode,
+    update,
+    isPermissionlessListing
+  } = orderlyHooks.useMarginModeBySymbol(symbol);
   const [selectedMarginMode, setSelectedMarginMode] = React4.useState(currentMarginMode);
   React4.useEffect(() => {
     setSelectedMarginMode(currentMarginMode);
@@ -1861,7 +1890,8 @@ var useMarginModeSwitchScript = (options2) => {
     setSelectedMarginMode,
     applyMarginMode,
     close,
-    onSelect
+    onSelect,
+    isPermissionlessListing
   };
 };
 var useMarginModeSettingsScript = (options2) => {
@@ -2010,7 +2040,7 @@ var useMarginModeSettingsScript = (options2) => {
         setIsOperationLoading(false);
       }
     },
-    [brokerLockedKeys, selectedKeys, updateMarginMode]
+    [brokerLockedKeys, selectedKeys, t, updateMarginMode]
   );
   const isLoading = isDataLoading || isMarginModesLoading || isOperationLoading || isSettingMarginMode;
   return {
@@ -2116,8 +2146,8 @@ var MarginModeSettings = (props) => {
                     props.searchKeyword.trim() ? "oui-outline-primary-light" : ""
                   )
                 },
-                prefix: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "oui-pl-3 oui-pr-1", "aria-hidden": "true", children: /* @__PURE__ */ jsxRuntime.jsx(SearchGlyph, { className: "oui-text-base-contrast-54" }) }),
-                suffix: props.searchKeyword ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "oui-pr-2", children: /* @__PURE__ */ jsxRuntime.jsx(
+                prefix: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "oui-ps-3 oui-pe-1", "aria-hidden": "true", children: /* @__PURE__ */ jsxRuntime.jsx(SearchGlyph, { className: "oui-text-base-contrast-54" }) }),
+                suffix: props.searchKeyword ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "oui-pe-2", children: /* @__PURE__ */ jsxRuntime.jsx(
                   orderlyUi.CloseCircleFillIcon,
                   {
                     size: 14,
@@ -2471,7 +2501,7 @@ var LeverageBadge = (props) => {
                 dp: 0,
                 rm: orderlyUtils.Decimal.ROUND_DOWN,
                 unit: "x",
-                unitClassName: "oui-ml-0",
+                unitClassName: "oui-ms-0",
                 children: curLeverage
               }
             )
@@ -2843,7 +2873,7 @@ var SlippageEditor = React4.forwardRef((props, ref) => {
           item
         );
       }),
-      /* @__PURE__ */ jsxRuntime.jsx(
+      /* @__PURE__ */ jsxRuntime.jsx("div", { dir: "ltr", children: /* @__PURE__ */ jsxRuntime.jsx(
         orderlyUi.Input,
         {
           suffix: "%",
@@ -2860,10 +2890,10 @@ var SlippageEditor = React4.forwardRef((props, ref) => {
               "oui-h-[40px] oui-w-[74px]"
             ),
             input: "oui-text-base-contrast",
-            additional: "oui-pl-1"
+            additional: "oui-ps-1"
           }
         }
-      )
+      ) })
     ] }),
     !!error && /* @__PURE__ */ jsxRuntime.jsx(orderlyUi.Box, { mt: 5, className: "-oui-mb-5", children: /* @__PURE__ */ jsxRuntime.jsx(orderlyUi.Text, { size: "2xs", color: "danger", children: error }) })
   ] });
@@ -2937,50 +2967,84 @@ var SlippageCell = (props) => {
         )
       }
     ),
-    /* @__PURE__ */ jsxRuntime.jsxs(orderlyUi.Flex, { justify: "between", className: "oui-orderEntry-slippage", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(orderlyUi.Text, { className: "oui-slippage-label", size: "2xs", children: t("orderEntry.slippage") }),
-      /* @__PURE__ */ jsxRuntime.jsx(
-        orderlyUiConnector.AuthGuard,
-        {
-          fallback: () => /* @__PURE__ */ jsxRuntime.jsxs(orderlyUi.Text, { size: "2xs", children: [
-            t("orderEntry.slippage.est"),
-            ": -% / ",
-            t("common.max"),
-            ": --%"
-          ] }),
-          children: /* @__PURE__ */ jsxRuntime.jsxs(orderlyUi.Flex, { gap: 1, className: "oui-slippage-value-container", children: [
-            /* @__PURE__ */ jsxRuntime.jsx(
-              orderlyUi.Text.numeral,
-              {
-                size: "2xs",
-                rule: "percentages",
-                prefix: `${t("orderEntry.slippage.est")}: `,
-                suffix: ` / ${t("common.max")}: `,
-                children: props.estSlippage ?? 0
-              }
-            ),
-            /* @__PURE__ */ jsxRuntime.jsx(
-              "button",
-              {
-                className: "oui-slippage-edit-btn oui-text-2xs",
-                onClick: () => setOpen(),
-                children: /* @__PURE__ */ jsxRuntime.jsxs(orderlyUi.Flex, { className: "oui-gap-0.5", as: "span", children: [
-                  /* @__PURE__ */ jsxRuntime.jsx(orderlyUi.Text, { size: "2xs", className: "oui-text-primary", children: `${props.slippage || "-"}%` }),
-                  /* @__PURE__ */ jsxRuntime.jsx(
-                    orderlyUi.EditIcon,
-                    {
-                      className: "oui-slippage-edit-icon oui-text-primary oui-hidden md:oui-block",
-                      size: 12,
-                      opacity: 1
-                    }
-                  )
-                ] })
-              }
-            )
-          ] })
-        }
-      )
-    ] })
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      orderlyUi.Flex,
+      {
+        justify: "between",
+        itemAlign: "center",
+        gap: 1,
+        className: "oui-orderEntry-slippage oui-w-full",
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            orderlyUi.Text,
+            {
+              className: "oui-slippage-label oui-shrink-0 oui-whitespace-nowrap",
+              size: "2xs",
+              children: t("orderEntry.slippage")
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            orderlyUiConnector.AuthGuard,
+            {
+              fallback: () => /* @__PURE__ */ jsxRuntime.jsxs(orderlyUi.Text, { size: "2xs", className: "oui-whitespace-nowrap", children: [
+                t("orderEntry.slippage.est"),
+                ": -% / ",
+                t("common.max"),
+                ": --%"
+              ] }),
+              children: /* @__PURE__ */ jsxRuntime.jsxs(
+                orderlyUi.Flex,
+                {
+                  gap: 1,
+                  itemAlign: "center",
+                  justify: "end",
+                  className: "oui-slippage-value-container oui-min-w-0 oui-flex-1 oui-whitespace-nowrap",
+                  children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      orderlyUi.Text.numeral,
+                      {
+                        size: "2xs",
+                        rule: "percentages",
+                        prefix: `${t("orderEntry.slippage.est")}: `,
+                        suffix: ` / ${t("common.max")}: `,
+                        className: "oui-whitespace-nowrap",
+                        children: props.estSlippage ?? 0
+                      }
+                    ),
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      "button",
+                      {
+                        className: "oui-slippage-edit-btn oui-shrink-0 oui-text-2xs",
+                        onClick: () => setOpen(),
+                        children: /* @__PURE__ */ jsxRuntime.jsxs(
+                          orderlyUi.Flex,
+                          {
+                            itemAlign: "center",
+                            className: "oui-gap-0.5 oui-whitespace-nowrap",
+                            as: "span",
+                            children: [
+                              /* @__PURE__ */ jsxRuntime.jsx(orderlyUi.Text, { size: "2xs", className: "oui-text-primary", children: `${props.slippage || "-"}%` }),
+                              /* @__PURE__ */ jsxRuntime.jsx(
+                                orderlyUi.EditIcon,
+                                {
+                                  className: "oui-slippage-edit-icon oui-text-primary oui-hidden md:oui-block",
+                                  size: 12,
+                                  opacity: 1
+                                }
+                              )
+                            ]
+                          }
+                        )
+                      }
+                    )
+                  ]
+                }
+              )
+            }
+          )
+        ]
+      }
+    )
   ] });
 };
 var SlippageUI = (props) => {
@@ -2995,33 +3059,38 @@ function AssetInfo(props) {
     symbol,
     side: props.side
   });
+  const estLiqTipsContent = /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "oui-min-w-[204px] oui-max-w-[280px] oui-text-2xs oui-leading-normal oui-text-base-contrast-80", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "oui-text-pretty", children: t("common.liquidationPrice.tooltip") }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsx(
+      "a",
+      {
+        href: "https://orderly.network/docs/introduction/trade-on-orderly/perpetual-futures/liquidations",
+        target: "_blank",
+        rel: "noopener noreferrer",
+        className: "oui-text-primary oui-underline",
+        children: t("common.liquidationPrice.tooltip.learnMore")
+      }
+    ) })
+  ] });
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
       className: "oui-orderEntry-assetInfo oui-space-y-[2px] xl:oui-space-y-1",
       children: [
         /* @__PURE__ */ jsxRuntime.jsxs(orderlyUi.Flex, { justify: "between", className: "oui-orderEntry-estLiqPrice", children: [
-          isMobile ? /* @__PURE__ */ jsxRuntime.jsx(orderlyUi.Text, { size: "2xs", children: t("orderEntry.estLiqPrice") }) : /* @__PURE__ */ jsxRuntime.jsx(
-            orderlyUi.Tooltip,
+          /* @__PURE__ */ jsxRuntime.jsx(
+            orderlyUi.Tips,
             {
-              content: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "oui-min-w-[204px] oui-max-w-[280px] oui-text-2xs oui-leading-normal oui-text-base-contrast-80", children: [
-                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "oui-text-pretty", children: t("common.liquidationPrice.tooltip") }),
-                /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsx(
-                  "a",
-                  {
-                    href: "https://orderly.network/docs/introduction/trade-on-orderly/perpetual-futures/liquidations",
-                    target: "_blank",
-                    rel: "noopener noreferrer",
-                    className: "oui-text-primary oui-underline",
-                    children: t("common.liquidationPrice.tooltip.learnMore")
-                  }
-                ) })
-              ] }),
-              children: /* @__PURE__ */ jsxRuntime.jsx(
+              title: t("common.tips"),
+              content: estLiqTipsContent,
+              trigger: /* @__PURE__ */ jsxRuntime.jsx(
                 orderlyUi.Text,
                 {
                   size: "2xs",
-                  className: "oui-estLiqPrice-label oui-cursor-pointer oui-border-b oui-border-dashed oui-border-line-12",
+                  className: orderlyUi.cn(
+                    "oui-estLiqPrice-label oui-cursor-pointer",
+                    "oui-border-b oui-border-dashed oui-border-line-12"
+                  ),
                   children: t("orderEntry.estLiqPrice")
                 }
               )
@@ -3034,7 +3103,7 @@ function AssetInfo(props) {
               size: "2xs",
               dp: props.dp,
               className: "oui-estLiqPrice-value oui-text-base-contrast-80",
-              unitClassName: "oui-ml-1 oui-text-base-contrast-36",
+              unitClassName: "oui-ms-1 oui-text-base-contrast-36",
               children: canTrade ? displayEstLiqPrice ?? "--" : "--"
             }
           )
@@ -3131,6 +3200,7 @@ var LTVRiskTooltipUI = (props) => {
           threshold: isThresholdLoading ? "-" : ltv_threshold,
           usdcThreshold: isThresholdLoading ? "-" : negative_usdc_threshold
         }) }),
+        marginMode === orderlyTypes.MarginMode.ISOLATED ? /* @__PURE__ */ jsxRuntime.jsx(orderlyUi.Text, { className: "oui-pb-2", intensity: 54, size: "2xs", children: t("transfer.LTV.isolatedMarginOrderHint") }) : null,
         /* @__PURE__ */ jsxRuntime.jsx(
           orderlyUi.Button,
           {
@@ -3160,6 +3230,7 @@ var useConvertThreshold = () => {
   };
 };
 var useLTVTooltipScript = (marginMode) => {
+  const { isMobile } = orderlyUi.useScreen();
   const { data: holdingList = [], isLoading: isHoldingLoading } = orderlyHooks.useHoldingStream();
   const {
     ltv_threshold,
@@ -3191,8 +3262,8 @@ var useLTVTooltipScript = (marginMode) => {
   });
   const currentLtv = orderlyHooks.useComputedLTV();
   const onConvert = React4.useCallback(async () => {
-    return orderlyUi.modal.show("ConvertDialogId");
-  }, []);
+    return orderlyUi.modal.show(isMobile ? "ConvertSheetId" : "ConvertDialogId");
+  }, [isMobile]);
   return {
     holdingData,
     isHoldingLoading,
@@ -3217,6 +3288,13 @@ var Available = (props) => {
   const showLTV = React4.useMemo(() => {
     return typeof currentLtv === "number" && !Number.isNaN(currentLtv) && currentLtv > 0;
   }, [currentLtv]);
+  const availableTooltip = React4.useMemo(() => {
+    return marginMode === orderlyTypes.MarginMode.ISOLATED ? t("transfer.LTV.isolatedModeUsdcOnly") : t("transfer.LTV.availableCrossMarginHint");
+  }, [marginMode, t]);
+  const availableTipsContent = React4.useMemo(
+    () => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "oui-text-pretty oui-text-2xs oui-leading-normal oui-text-base-contrast-80", children: availableTooltip }),
+    [availableTooltip]
+  );
   return /* @__PURE__ */ jsxRuntime.jsxs(
     orderlyUi.Flex,
     {
@@ -3224,14 +3302,31 @@ var Available = (props) => {
       justify: "between",
       className: "oui-orderEntry-available",
       children: [
-        marginMode === orderlyTypes.MarginMode.ISOLATED ? /* @__PURE__ */ jsxRuntime.jsx(orderlyUi.Tooltip, { content: t("transfer.LTV.isolatedModeUsdcOnly"), children: /* @__PURE__ */ jsxRuntime.jsx(orderlyUi.Text, { className: "oui-available-label oui-cursor-pointer", size: "2xs", children: t("common.available") }) }) : /* @__PURE__ */ jsxRuntime.jsx(orderlyUi.Text, { className: "oui-available-label", size: "2xs", children: t("common.available") }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          orderlyUi.Tips,
+          {
+            title: t("common.tips"),
+            content: availableTipsContent,
+            trigger: /* @__PURE__ */ jsxRuntime.jsx(
+              orderlyUi.Text,
+              {
+                size: "2xs",
+                className: orderlyUi.cn(
+                  "oui-available-label oui-cursor-pointer",
+                  "oui-border-b oui-border-dashed oui-border-line-12"
+                ),
+                children: t("common.available")
+              }
+            )
+          }
+        ),
         /* @__PURE__ */ jsxRuntime.jsxs(orderlyUi.Flex, { itemAlign: "center", justify: "center", gap: 1, children: [
           showLTV && /* @__PURE__ */ jsxRuntime.jsx(
-            orderlyUi.Tooltip,
+            orderlyUi.Tips,
             {
-              className: "oui-available-ltvRisk-tooltip oui-bg-base-6 oui-p-2",
+              title: t("common.tips"),
               content: /* @__PURE__ */ jsxRuntime.jsx(LTVRiskTooltipWidget, { marginMode }),
-              children: /* @__PURE__ */ jsxRuntime.jsx(
+              trigger: /* @__PURE__ */ jsxRuntime.jsx(
                 orderlyUi.InfoCircleIcon,
                 {
                   className: "oui-cursor-pointer oui-text-warning oui-opacity-80"
@@ -3245,7 +3340,7 @@ var Available = (props) => {
               unit: quote,
               size: "2xs",
               className: "oui-available-value oui-text-base-contrast-80",
-              unitClassName: "oui-ml-1 oui-text-base-contrast-54",
+              unitClassName: "oui-ms-1 oui-text-base-contrast-54",
               dp: 2,
               padding: false,
               children: canTrade ? freeCollateral : 0
@@ -3375,7 +3470,7 @@ var QuantitySlider = React4.memo((props) => {
               {
                 className: orderlyUi.textVariants({
                   size: "2xs",
-                  className: "oui-quantitySlider-maxQty-btn oui-mr-1"
+                  className: "oui-quantitySlider-maxQty-btn oui-me-1"
                 }),
                 onClick: onMax,
                 "data-testid": "oui-testid-orderEntry-maxQty-value-button",
@@ -3636,7 +3731,7 @@ var CustomInput = React4.forwardRef(
           input: orderlyUi.cn("oui-mb-1 oui-mt-5 oui-h-5", props?.classNames?.input),
           // prefix: cn(props.classNames?.prefix),
           suffix: orderlyUi.cn(
-            "oui-absolute oui-right-0 oui-top-0 oui-justify-start oui-py-2 oui-text-2xs oui-text-base-contrast-36",
+            "oui-absolute oui-end-0 oui-top-0 oui-justify-start oui-py-2 oui-text-2xs oui-text-base-contrast-36",
             props.classNames?.suffix
           )
         },
@@ -3652,7 +3747,7 @@ var InputLabel = (props) => {
     {
       htmlFor: props.id,
       className: orderlyUi.cn(
-        "oui-absolute oui-left-2 oui-top-[7px] oui-text-2xs oui-text-base-contrast-36",
+        "oui-absolute oui-start-2 oui-top-[7px] oui-text-2xs oui-text-base-contrast-36",
         props.className
       ),
       children: props.children
@@ -3680,7 +3775,7 @@ var BBOOrderTypeSelect = (props) => {
         value: orderlyTypes.BBOOrderType.QUEUE5
       }
     ],
-    []
+    [t]
   );
   return /* @__PURE__ */ jsxRuntime.jsx(
     orderlyUi.Select.options,
@@ -3836,7 +3931,7 @@ var PriceInput = (props) => {
           {
             className: orderlyUi.cn(
               "oui-orderEntry-bboSelect",
-              "oui-absolute oui-bottom-1 oui-left-0"
+              "oui-absolute oui-bottom-1 oui-start-0"
             ),
             children: /* @__PURE__ */ jsxRuntime.jsx(
               BBOOrderTypeSelect,
@@ -3858,7 +3953,7 @@ var QtyAndTotalInput = React4.memo((props) => {
   const { t } = orderlyI18n.useTranslation();
   const { symbolInfo, onFocus, onBlur, getErrorMsg, setOrderValue } = useOrderEntryContext();
   const { base, quote, base_dp, quote_dp } = symbolInfo;
-  return /* @__PURE__ */ jsxRuntime.jsxs(orderlyUi.Grid, { cols: 2, className: "oui-group oui-space-x-1", children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs(orderlyUi.Grid, { cols: 2, className: "oui-group oui-gap-1", children: [
     /* @__PURE__ */ jsxRuntime.jsx(
       CustomInput,
       {
@@ -3988,7 +4083,7 @@ var QuantityDistributionHint = (props) => {
         quantity: /* @__PURE__ */ jsxRuntime.jsx(DescendingQuantity, {})
       }
     ];
-  }, []);
+  }, [t]);
   const currentContent = React4.useMemo(() => {
     return content.find((item) => item.type === type);
   }, [content, type]);
@@ -4004,7 +4099,7 @@ var QuantityDistributionHint = (props) => {
           intensity: type === item.type ? 500 : 600,
           width: 78,
           p: 2,
-          className: "oui-cursor-pointer oui-rounded-l",
+          className: "oui-cursor-pointer oui-rounded-s",
           onClick: () => {
             setType(item.type);
           },
@@ -4022,10 +4117,10 @@ var QuantityDistributionHint = (props) => {
           intensity: 500,
           width: "100%",
           className: orderlyUi.cn(
-            "oui-rounded-r",
-            type === orderlyTypes.DistributionType.FLAT && "oui-rounded-bl",
-            type === orderlyTypes.DistributionType.ASCENDING && "oui-rounded-l",
-            type === orderlyTypes.DistributionType.DESCENDING && "oui-rounded-tl"
+            "oui-rounded-e",
+            type === orderlyTypes.DistributionType.FLAT && "oui-rounded-es",
+            type === orderlyTypes.DistributionType.ASCENDING && "oui-rounded-s",
+            type === orderlyTypes.DistributionType.DESCENDING && "oui-rounded-ss"
           ),
           children: [
             /* @__PURE__ */ jsxRuntime.jsx("div", { children: currentContent?.formula }),
@@ -4087,7 +4182,7 @@ var QuantityDistribution = (props) => {
               className: orderlyUi.cn(
                 "oui-quantityDistribution-option-label",
                 "oui-text-2xs",
-                "oui-ml-1",
+                "oui-ms-1",
                 "oui-whitespace-nowrap oui-break-normal"
               ),
               children: distributionTypeMap[type]
@@ -4423,7 +4518,7 @@ var ScaledQuantityUnit = (props) => {
       classNames: {
         trigger: orderlyUi.cn(
           "oui-orderEntry-scaledQuantityUnit-btn",
-          "oui-absolute oui-right-0 oui-top-1",
+          "oui-absolute oui-end-0 oui-top-1",
           "oui-w-full oui-justify-end",
           "oui-shadow-none"
         )
@@ -4469,7 +4564,7 @@ var ScaledQuantityInput = React4.memo((props) => {
         suffix,
         id: "order_quantity_input",
         name: "order_quantity_input",
-        className: "oui-orderEntry-scaledOrder-quantityInput !oui-rounded-r",
+        className: "oui-orderEntry-scaledOrder-quantityInput !oui-rounded-e",
         value: props.order_quantity,
         error: getErrorMsg(
           "order_quantity",
@@ -4492,7 +4587,7 @@ var ScaledQuantityInput = React4.memo((props) => {
       suffix,
       id: "order_total_input",
       name: "order_total_input",
-      className: "oui-orderEntry-scaledOrder-totalInput !oui-rounded-r",
+      className: "oui-orderEntry-scaledOrder-totalInput !oui-rounded-e",
       value: props.total,
       error: getErrorMsg("order_quantity", `${errors?.total?.value} ${quote}`),
       onChange: (val) => {
@@ -4541,7 +4636,7 @@ var TotalOrdersInput = React4.memo((props) => {
       label: t("orderEntry.totalOrders"),
       placeholder: "2-20",
       id: "order_total_orders_input",
-      className: "oui-orderEntry-scaledOrder-totalOrdersInput !oui-rounded-l",
+      className: "oui-orderEntry-scaledOrder-totalOrdersInput !oui-rounded-s",
       value: props.total_orders,
       error: getErrorMsg("total_orders"),
       onChange: (val) => {
@@ -4569,7 +4664,7 @@ var ScaledOrderInput = (props) => {
         end_price: values.end_price
       }
     ),
-    /* @__PURE__ */ jsxRuntime.jsxs(orderlyUi.Grid, { cols: 2, className: "oui-group oui-space-x-1", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(orderlyUi.Grid, { cols: 2, className: "oui-group oui-gap-1", children: [
       /* @__PURE__ */ jsxRuntime.jsx(
         ScaledQuantityInput,
         {
@@ -4704,7 +4799,7 @@ var TrailingCallbackSelect = React4.memo(
         classNames: {
           trigger: orderlyUi.cn(
             "oui-orderEntry-trailingCallbackSelect-btn",
-            "oui-absolute oui-right-0 oui-top-1",
+            "oui-absolute oui-end-0 oui-top-1",
             "oui-w-[124px] oui-justify-end",
             "oui-text-base-contrast-36"
           )
@@ -4807,7 +4902,7 @@ var TrailingCallbackInput = React4.memo(
           /* @__PURE__ */ jsxRuntime.jsx(
             CallbackRatePercentages,
             {
-              className: "oui-trailingCallback-percentages oui-absolute oui-bottom-1 oui-left-2",
+              className: "oui-trailingCallback-percentages oui-absolute oui-bottom-1 oui-start-2",
               callback_rate
             }
           )
@@ -5181,7 +5276,7 @@ var PNLInput = (props) => {
         onBlur();
       },
       suffix: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-        isPercentageMode && !!value && /* @__PURE__ */ jsxRuntime.jsx(orderlyUi.Text, { size: "2xs", color: "inherit", className: "oui-ml-[2px]", children: "%" }),
+        isPercentageMode && !!value && /* @__PURE__ */ jsxRuntime.jsx(orderlyUi.Text, { size: "2xs", color: "inherit", className: "oui-ms-[2px]", children: "%" }),
         /* @__PURE__ */ jsxRuntime.jsx(
           PNLMenus,
           {
@@ -5240,7 +5335,7 @@ var PnlInputProvider = (props) => {
         {
           rule: "percentages",
           className: orderlyUi.cn(
-            "oui-ml-1 oui-text-xs",
+            "oui-ms-1 oui-text-xs",
             type === "TP" ? "oui-text-trade-profit" : "oui-text-trade-loss"
           ),
           children: values.ROI
@@ -5250,14 +5345,14 @@ var PnlInputProvider = (props) => {
         {
           rule: "price",
           className: orderlyUi.cn(
-            "oui-ml-1 oui-text-xs",
+            "oui-ms-1 oui-text-xs",
             type === "TP" ? "oui-text-trade-profit" : "oui-text-trade-loss"
           ),
           children: values.PnL
         }
       )
     ] });
-  }, [mode, values.ROI, values.PnL, values.trigger_price]);
+  }, [mode, t, type, values.ROI, values.PnL, values.trigger_price]);
   const memoizedValue = React4.useMemo(() => {
     return { mode, setMode, tipsEle };
   }, [mode, setMode, tipsEle]);
@@ -5326,7 +5421,7 @@ var OrderTPSL = (props) => {
       {
         className: orderlyUi.cn(
           "oui-orderEntry-tpsl-body",
-          "oui-max-h-0 oui-overflow-hidden oui-transition-all",
+          "oui-overflow-hidden oui-transition-all",
           props.switchState ? "oui-max-h-[120px]" : "oui-max-h-0"
         ),
         onTransitionEnd: () => {
@@ -5470,7 +5565,6 @@ var TPSLTriggerPriceInput = (props) => {
   const { t } = orderlyI18n.useTranslation();
   const { errorMsgVisible } = useOrderEntryContext();
   const { tipsEle } = usePnlInputContext();
-  const [prefix, setPrefix] = React4.useState(`${props.type} Price`);
   const [placeholder, setPlaceholder] = React4.useState("USDC");
   const [tipVisible, setTipVisible] = React4.useState(false);
   const [isFocused, setIsFocused] = React4.useState(false);
@@ -5495,31 +5589,17 @@ var TPSLTriggerPriceInput = (props) => {
     tipsEle,
     props.displayErrorMessage
   ]);
-  const getPrefixLabel = (trigger_price) => {
-    let _prefix = props.type === "TP" ? t("tpsl.tpPrice") : t("tpsl.slPrice");
-    if (trigger_price) {
-      _prefix = props.type === "TP" ? t("tpsl.tp") : t("tpsl.sl");
-    }
-    return _prefix;
-  };
+  const prefix = isFocused || innerValue ? props.type === "TP" ? t("tpsl.tp") : t("tpsl.sl") : props.type === "TP" ? t("tpsl.tpPrice") : t("tpsl.slPrice");
   const onValueChange = (value) => {
     setInnerValue(value);
     props.onChange(value);
   };
-  React4.useEffect(() => {
-    setPrefix(getPrefixLabel(props.values.trigger_price));
-    if (!isFocused) {
-      setInnerValue(props.values.trigger_price ?? "");
-    }
-  }, [props.type, props.values.trigger_price]);
   const onFocus = () => {
-    setPrefix(props.type === "TP" ? t("tpsl.tp") : t("tpsl.sl"));
     setPlaceholder("");
     setTipVisible(true);
     setIsFocused(true);
   };
   const onBlur = () => {
-    setPrefix(getPrefixLabel(props.values.trigger_price));
     setPlaceholder("USDC");
     setTipVisible(false);
     setIsFocused(false);
@@ -5548,10 +5628,10 @@ var TPSLTriggerPriceInput = (props) => {
         additional: "oui-text-base-contrast-54",
         root: orderlyUi.cn(
           "oui-orderEntry-tpsl-triggerPrice",
-          "oui-pr-2 md:oui-pr-3",
+          "oui-pe-2 md:oui-pe-3",
           props.classNames?.root
         ),
-        prefix: orderlyUi.cn("oui-pr-1 md:oui-pr-2", props.classNames?.prefix),
+        prefix: orderlyUi.cn("oui-pe-1 md:oui-pe-2", props.classNames?.prefix),
         input: orderlyUi.cn(
           "oui-text-2xs placeholder:oui-text-2xs",
           props.classNames?.input
@@ -6097,7 +6177,7 @@ var OrderEntry = (props) => {
                     onClick: () => {
                       setPinned(false);
                     },
-                    className: "oui-group oui-absolute oui-right-2 oui-top-2",
+                    className: "oui-group oui-absolute oui-end-2 oui-top-2",
                     "data-testid": "oui-testid-orderEntry-pinned-button"
                   }
                 )
@@ -6115,7 +6195,7 @@ var OrderEntry = (props) => {
               overlay: "!oui-bg-base-10/60",
               content: orderlyUi.cn(
                 "oui-rounded-[16px] oui-border-none !oui-p-0",
-                isMobile ? "oui-inset-y-0 oui-right-0 oui-w-[280px]" : "!oui-bottom-[40px] oui-right-3 oui-top-[44px] !oui-h-auto oui-w-[360px]"
+                isMobile ? "oui-inset-y-0 oui-end-0 oui-w-[280px]" : "!oui-bottom-[40px] oui-end-3 oui-top-[44px] !oui-h-auto oui-w-[360px]"
               )
             },
             contentProps: { side: "right", closeable: false },