@kodiak-finance/orderly-ui-order-entry 2.9.2 → 2.9.4

package/dist/index.mjs

@@ -1,9 +1,9 @@
 import React4, { memo, forwardRef, useId, useState, useImperativeHandle, useEffect, createContext, useMemo, useRef, useCallback, useContext } from 'react';
 import { useLocalStorage, utils, useGetEstLiqPrice, useOrderlyContext, useMemoizedFn, ERROR_MSG_CODES, usePositionStream, useMarkets, MarketsType, useMarginModes, useMarginModeBySymbol, useFeeState, useRwaSymbolsInfoStore, useBadgeBySymbol, useEventEmitter, useDebouncedCallback, useHoldingStream, useAppStore, useIndexPricesStream, useComputedLTV, useBoolean, useFeatureFlag, FlagKeys, useQuery, useAccount, useOrderEntry, useMarginRatio, useTpslPriceChecker, useTrack } from '@kodiak-finance/orderly-hooks';
-import { i18n, useTranslation } from '@kodiak-finance/orderly-i18n';
+import { i18n, useTranslation, Trans } from '@kodiak-finance/orderly-i18n';
 import { useOrderEntryFormErrorMsg, useCanTrade } from '@kodiak-finance/orderly-react-app';
 import { OrderSide, EMPTY_LIST, DistributionType, TrailingCallbackType, OrderType, MarginMode, PositionType, BBOOrderType, ORDER_ENTRY_EST_LIQ_PRICE_CHANGE, OrderLevel, TrackerEventName } from '@kodiak-finance/orderly-types';
-import { registerSimpleDialog, SimpleDialog, registerSimpleSheet, ExclamationFillIcon, modal, Text, Tooltip, TooltipTrigger, Flex, Input, cn, inputFormatter, Box, Slider, textVariants, injectable, Button, ThrottledButton, Grid, Checkbox, Select, SettingFillIcon, useModal, useScreen, InfoCircleIcon, AddCircleIcon, toast, Divider, Switch, SimpleSheet, Badge, TokenIcon, DataTable, IconButton, CloseIcon, CloseCircleFillIcon, ChevronRightIcon, SymbolBadge as SymbolBadge$1, EditIcon as EditIcon$1, SimpleDropdownMenu, CaretDownIcon, DotStatus, PopoverRoot, PopoverTrigger, PopoverContent } from '@kodiak-finance/orderly-ui';
+import { registerSimpleDialog, SimpleDialog, registerSimpleSheet, ExclamationFillIcon, modal, Text, Tooltip, TooltipTrigger, Flex, Input, cn, inputFormatter, Box, Slider, textVariants, injectable, Button, ThrottledButton, Grid, Checkbox, Select, SettingFillIcon, useModal, useScreen, Tips, InfoCircleIcon, AddCircleIcon, toast, Divider, Switch, SimpleSheet, Badge, TokenIcon, DataTable, IconButton, CloseIcon, CloseCircleFillIcon, ChevronRightIcon, SymbolBadge as SymbolBadge$1, EditIcon as EditIcon$1, SimpleDropdownMenu, CaretDownIcon, DotStatus, PopoverRoot, PopoverTrigger, PopoverContent } from '@kodiak-finance/orderly-ui';
 import { TPSLPositionTypeWidget, TPSLAdvancedWidget } from '@kodiak-finance/orderly-ui-tpsl';
 import { Decimal, zero, formatSymbol, removeTrailingZeros, todpIfNeed, getBBOType } from '@kodiak-finance/orderly-utils';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
@@ -71,7 +71,7 @@ var AdditionalInfo = (props) => {
                         htmlFor: "toggle_order_post_only",
                         className: 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")
@@ -105,7 +105,7 @@ var AdditionalInfo = (props) => {
                         htmlFor: "toggle_order_iov",
                         className: 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")
@@ -139,7 +139,7 @@ var AdditionalInfo = (props) => {
                         htmlFor: "toggle_order_fok",
                         className: 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")
@@ -170,7 +170,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")
               }
             )
@@ -198,7 +198,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")
                   }
                 )
@@ -224,7 +224,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")
               }
             )
@@ -336,7 +336,7 @@ function AdvancedTPSLResult(props) {
                     /* @__PURE__ */ jsx(
                       Text.numeral,
                       {
-                        suffix: /* @__PURE__ */ jsx(Text, { className: "oui-ml-1 oui-text-base-contrast-36", children: symbolInfo.quote }),
+                        suffix: /* @__PURE__ */ jsx(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 ?? ""
@@ -348,7 +348,7 @@ function AdvancedTPSLResult(props) {
                     formattedOrder.tp_order_type === OrderType.LIMIT ? /* @__PURE__ */ jsx(
                       Text.numeral,
                       {
-                        suffix: /* @__PURE__ */ jsx(Text, { className: "oui-ml-1 oui-text-base-contrast-36", children: symbolInfo.quote }),
+                        suffix: /* @__PURE__ */ jsx(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 ?? ""
@@ -360,7 +360,7 @@ function AdvancedTPSLResult(props) {
                     /* @__PURE__ */ jsx(
                       Text.numeral,
                       {
-                        suffix: /* @__PURE__ */ jsx(Text, { className: "oui-ml-1 oui-text-base-contrast-36", children: symbolInfo.quote }),
+                        suffix: /* @__PURE__ */ jsx(Text, { className: "oui-ms-1 oui-text-base-contrast-36", children: symbolInfo.quote }),
                         coloring: true,
                         dp: 2,
                         children: Number(formattedOrder.tp_pnl)
@@ -413,7 +413,7 @@ function AdvancedTPSLResult(props) {
                   /* @__PURE__ */ jsx(
                     Text.numeral,
                     {
-                      suffix: /* @__PURE__ */ jsx(Text, { className: "oui-ml-1 oui-text-base-contrast-36", children: symbolInfo.quote }),
+                      suffix: /* @__PURE__ */ jsx(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 ?? ""
@@ -425,7 +425,7 @@ function AdvancedTPSLResult(props) {
                   formattedOrder.sl_order_type === OrderType.LIMIT ? /* @__PURE__ */ jsx(
                     Text.numeral,
                     {
-                      suffix: /* @__PURE__ */ jsx(Text, { className: "oui-ml-1 oui-text-base-contrast-36", children: symbolInfo.quote }),
+                      suffix: /* @__PURE__ */ jsx(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 ?? ""
@@ -438,7 +438,7 @@ function AdvancedTPSLResult(props) {
                     Text.numeral,
                     {
                       coloring: true,
-                      suffix: /* @__PURE__ */ jsx(Text, { className: "oui-ml-1 oui-text-base-contrast-36", children: symbolInfo.quote }),
+                      suffix: /* @__PURE__ */ jsx(Text, { className: "oui-ms-1 oui-text-base-contrast-36", children: symbolInfo.quote }),
                       dp: 2,
                       children: Number(formattedOrder.sl_pnl)
                     }
@@ -640,7 +640,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
@@ -670,7 +670,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
@@ -976,7 +976,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
       }
     )
@@ -1000,7 +1000,7 @@ var OrderTypeTag = (props) => {
       default:
         return "";
     }
-  }, [props.type]);
+  }, [props.type, t]);
   return /* @__PURE__ */ jsx(Badge, { color: "neutral", size: "sm", children: typeStr });
 };
 var Dialog = (props) => {
@@ -1318,7 +1318,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
           }
         )
@@ -1333,7 +1333,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
           }
         )
@@ -1771,19 +1771,26 @@ var MarginModeSwitch = (props) => {
 var OptionCard = (props) => {
   const { t } = useTranslation();
   const title = props.mode === MarginMode.CROSS ? t("marginMode.crossMargin") : t("marginMode.isolatedMargin");
-  const desc = props.mode === MarginMode.CROSS ? t("marginMode.crossMarginDescription") : t("marginMode.isolatedMarginDescription");
   return /* @__PURE__ */ jsxs(
-    "button",
+    "div",
     {
-      type: "button",
+      role: "button",
+      tabIndex: props.disabled ? -1 : 0,
       className: 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: [
@@ -1796,13 +1803,31 @@ var OptionCard = (props) => {
               children: title
             }
           ),
-          /* @__PURE__ */ jsx(Text, { className: "oui-text-2xs oui-leading-[15px] oui-text-base-contrast-36 oui-font-semibold oui-tracking-[0.03em]", children: desc })
+          props.mode === MarginMode.ISOLATED ? /* @__PURE__ */ jsx(Text, { className: "oui-text-2xs oui-leading-[15px] oui-text-base-contrast-36 oui-font-semibold oui-tracking-[0.03em]", children: /* @__PURE__ */ jsx(
+            Trans,
+            {
+              i18nKey: "marginMode.isolatedMarginDescription",
+              components: [
+                /* @__PURE__ */ 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__ */ jsx(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__ */ jsx(
           "div",
           {
             className: 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"
             ),
@@ -1817,7 +1842,11 @@ var useMarginModeSwitchScript = (options2) => {
   const { symbol, close } = options2;
   const { isMobile } = useScreen();
   const { t } = useTranslation();
-  const { marginMode: currentMarginMode, update } = useMarginModeBySymbol(symbol);
+  const {
+    marginMode: currentMarginMode,
+    update,
+    isPermissionlessListing
+  } = useMarginModeBySymbol(symbol);
   const [selectedMarginMode, setSelectedMarginMode] = useState(currentMarginMode);
   useEffect(() => {
     setSelectedMarginMode(currentMarginMode);
@@ -1855,7 +1884,8 @@ var useMarginModeSwitchScript = (options2) => {
     setSelectedMarginMode,
     applyMarginMode,
     close,
-    onSelect
+    onSelect,
+    isPermissionlessListing
   };
 };
 var useMarginModeSettingsScript = (options2) => {
@@ -2004,7 +2034,7 @@ var useMarginModeSettingsScript = (options2) => {
         setIsOperationLoading(false);
       }
     },
-    [brokerLockedKeys, selectedKeys, updateMarginMode]
+    [brokerLockedKeys, selectedKeys, t, updateMarginMode]
   );
   const isLoading = isDataLoading || isMarginModesLoading || isOperationLoading || isSettingMarginMode;
   return {
@@ -2110,8 +2140,8 @@ var MarginModeSettings = (props) => {
                     props.searchKeyword.trim() ? "oui-outline-primary-light" : ""
                   )
                 },
-                prefix: /* @__PURE__ */ jsx("div", { className: "oui-pl-3 oui-pr-1", "aria-hidden": "true", children: /* @__PURE__ */ jsx(SearchGlyph, { className: "oui-text-base-contrast-54" }) }),
-                suffix: props.searchKeyword ? /* @__PURE__ */ jsx("div", { className: "oui-pr-2", children: /* @__PURE__ */ jsx(
+                prefix: /* @__PURE__ */ jsx("div", { className: "oui-ps-3 oui-pe-1", "aria-hidden": "true", children: /* @__PURE__ */ jsx(SearchGlyph, { className: "oui-text-base-contrast-54" }) }),
+                suffix: props.searchKeyword ? /* @__PURE__ */ jsx("div", { className: "oui-pe-2", children: /* @__PURE__ */ jsx(
                   CloseCircleFillIcon,
                   {
                     size: 14,
@@ -2465,7 +2495,7 @@ var LeverageBadge = (props) => {
                 dp: 0,
                 rm: Decimal.ROUND_DOWN,
                 unit: "x",
-                unitClassName: "oui-ml-0",
+                unitClassName: "oui-ms-0",
                 children: curLeverage
               }
             )
@@ -2837,7 +2867,7 @@ var SlippageEditor = forwardRef((props, ref) => {
           item
         );
       }),
-      /* @__PURE__ */ jsx(
+      /* @__PURE__ */ jsx("div", { dir: "ltr", children: /* @__PURE__ */ jsx(
         Input,
         {
           suffix: "%",
@@ -2854,10 +2884,10 @@ var SlippageEditor = forwardRef((props, ref) => {
               "oui-h-[40px] oui-w-[74px]"
             ),
             input: "oui-text-base-contrast",
-            additional: "oui-pl-1"
+            additional: "oui-ps-1"
           }
         }
-      )
+      ) })
     ] }),
     !!error && /* @__PURE__ */ jsx(Box, { mt: 5, className: "-oui-mb-5", children: /* @__PURE__ */ jsx(Text, { size: "2xs", color: "danger", children: error }) })
   ] });
@@ -2931,50 +2961,84 @@ var SlippageCell = (props) => {
         )
       }
     ),
-    /* @__PURE__ */ jsxs(Flex, { justify: "between", className: "oui-orderEntry-slippage", children: [
-      /* @__PURE__ */ jsx(Text, { className: "oui-slippage-label", size: "2xs", children: t("orderEntry.slippage") }),
-      /* @__PURE__ */ jsx(
-        AuthGuard,
-        {
-          fallback: () => /* @__PURE__ */ jsxs(Text, { size: "2xs", children: [
-            t("orderEntry.slippage.est"),
-            ": -% / ",
-            t("common.max"),
-            ": --%"
-          ] }),
-          children: /* @__PURE__ */ jsxs(Flex, { gap: 1, className: "oui-slippage-value-container", children: [
-            /* @__PURE__ */ jsx(
-              Text.numeral,
-              {
-                size: "2xs",
-                rule: "percentages",
-                prefix: `${t("orderEntry.slippage.est")}: `,
-                suffix: ` / ${t("common.max")}: `,
-                children: props.estSlippage ?? 0
-              }
-            ),
-            /* @__PURE__ */ jsx(
-              "button",
-              {
-                className: "oui-slippage-edit-btn oui-text-2xs",
-                onClick: () => setOpen(),
-                children: /* @__PURE__ */ jsxs(Flex, { className: "oui-gap-0.5", as: "span", children: [
-                  /* @__PURE__ */ jsx(Text, { size: "2xs", className: "oui-text-primary", children: `${props.slippage || "-"}%` }),
-                  /* @__PURE__ */ jsx(
-                    EditIcon$1,
-                    {
-                      className: "oui-slippage-edit-icon oui-text-primary oui-hidden md:oui-block",
-                      size: 12,
-                      opacity: 1
-                    }
-                  )
-                ] })
-              }
-            )
-          ] })
-        }
-      )
-    ] })
+    /* @__PURE__ */ jsxs(
+      Flex,
+      {
+        justify: "between",
+        itemAlign: "center",
+        gap: 1,
+        className: "oui-orderEntry-slippage oui-w-full",
+        children: [
+          /* @__PURE__ */ jsx(
+            Text,
+            {
+              className: "oui-slippage-label oui-shrink-0 oui-whitespace-nowrap",
+              size: "2xs",
+              children: t("orderEntry.slippage")
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            AuthGuard,
+            {
+              fallback: () => /* @__PURE__ */ jsxs(Text, { size: "2xs", className: "oui-whitespace-nowrap", children: [
+                t("orderEntry.slippage.est"),
+                ": -% / ",
+                t("common.max"),
+                ": --%"
+              ] }),
+              children: /* @__PURE__ */ jsxs(
+                Flex,
+                {
+                  gap: 1,
+                  itemAlign: "center",
+                  justify: "end",
+                  className: "oui-slippage-value-container oui-min-w-0 oui-flex-1 oui-whitespace-nowrap",
+                  children: [
+                    /* @__PURE__ */ jsx(
+                      Text.numeral,
+                      {
+                        size: "2xs",
+                        rule: "percentages",
+                        prefix: `${t("orderEntry.slippage.est")}: `,
+                        suffix: ` / ${t("common.max")}: `,
+                        className: "oui-whitespace-nowrap",
+                        children: props.estSlippage ?? 0
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(
+                      "button",
+                      {
+                        className: "oui-slippage-edit-btn oui-shrink-0 oui-text-2xs",
+                        onClick: () => setOpen(),
+                        children: /* @__PURE__ */ jsxs(
+                          Flex,
+                          {
+                            itemAlign: "center",
+                            className: "oui-gap-0.5 oui-whitespace-nowrap",
+                            as: "span",
+                            children: [
+                              /* @__PURE__ */ jsx(Text, { size: "2xs", className: "oui-text-primary", children: `${props.slippage || "-"}%` }),
+                              /* @__PURE__ */ jsx(
+                                EditIcon$1,
+                                {
+                                  className: "oui-slippage-edit-icon oui-text-primary oui-hidden md:oui-block",
+                                  size: 12,
+                                  opacity: 1
+                                }
+                              )
+                            ]
+                          }
+                        )
+                      }
+                    )
+                  ]
+                }
+              )
+            }
+          )
+        ]
+      }
+    )
   ] });
 };
 var SlippageUI = (props) => {
@@ -2989,33 +3053,38 @@ function AssetInfo(props) {
     symbol,
     side: props.side
   });
+  const estLiqTipsContent = /* @__PURE__ */ jsxs("div", { className: "oui-min-w-[204px] oui-max-w-[280px] oui-text-2xs oui-leading-normal oui-text-base-contrast-80", children: [
+    /* @__PURE__ */ jsx("div", { className: "oui-text-pretty", children: t("common.liquidationPrice.tooltip") }),
+    /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ 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__ */ jsxs(
     "div",
     {
       className: "oui-orderEntry-assetInfo oui-space-y-[2px] xl:oui-space-y-1",
       children: [
         /* @__PURE__ */ jsxs(Flex, { justify: "between", className: "oui-orderEntry-estLiqPrice", children: [
-          isMobile ? /* @__PURE__ */ jsx(Text, { size: "2xs", children: t("orderEntry.estLiqPrice") }) : /* @__PURE__ */ jsx(
-            Tooltip,
+          /* @__PURE__ */ jsx(
+            Tips,
             {
-              content: /* @__PURE__ */ jsxs("div", { className: "oui-min-w-[204px] oui-max-w-[280px] oui-text-2xs oui-leading-normal oui-text-base-contrast-80", children: [
-                /* @__PURE__ */ jsx("div", { className: "oui-text-pretty", children: t("common.liquidationPrice.tooltip") }),
-                /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ 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__ */ jsx(
+              title: t("common.tips"),
+              content: estLiqTipsContent,
+              trigger: /* @__PURE__ */ jsx(
                 Text,
                 {
                   size: "2xs",
-                  className: "oui-estLiqPrice-label oui-cursor-pointer oui-border-b oui-border-dashed oui-border-line-12",
+                  className: cn(
+                    "oui-estLiqPrice-label oui-cursor-pointer",
+                    "oui-border-b oui-border-dashed oui-border-line-12"
+                  ),
                   children: t("orderEntry.estLiqPrice")
                 }
               )
@@ -3028,7 +3097,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 ?? "--" : "--"
             }
           )
@@ -3125,6 +3194,7 @@ var LTVRiskTooltipUI = (props) => {
           threshold: isThresholdLoading ? "-" : ltv_threshold,
           usdcThreshold: isThresholdLoading ? "-" : negative_usdc_threshold
         }) }),
+        marginMode === MarginMode.ISOLATED ? /* @__PURE__ */ jsx(Text, { className: "oui-pb-2", intensity: 54, size: "2xs", children: t("transfer.LTV.isolatedMarginOrderHint") }) : null,
         /* @__PURE__ */ jsx(
           Button,
           {
@@ -3154,6 +3224,7 @@ var useConvertThreshold = () => {
   };
 };
 var useLTVTooltipScript = (marginMode) => {
+  const { isMobile } = useScreen();
   const { data: holdingList = [], isLoading: isHoldingLoading } = useHoldingStream();
   const {
     ltv_threshold,
@@ -3185,8 +3256,8 @@ var useLTVTooltipScript = (marginMode) => {
   });
   const currentLtv = useComputedLTV();
   const onConvert = useCallback(async () => {
-    return modal.show("ConvertDialogId");
-  }, []);
+    return modal.show(isMobile ? "ConvertSheetId" : "ConvertDialogId");
+  }, [isMobile]);
   return {
     holdingData,
     isHoldingLoading,
@@ -3211,6 +3282,13 @@ var Available = (props) => {
   const showLTV = useMemo(() => {
     return typeof currentLtv === "number" && !Number.isNaN(currentLtv) && currentLtv > 0;
   }, [currentLtv]);
+  const availableTooltip = useMemo(() => {
+    return marginMode === MarginMode.ISOLATED ? t("transfer.LTV.isolatedModeUsdcOnly") : t("transfer.LTV.availableCrossMarginHint");
+  }, [marginMode, t]);
+  const availableTipsContent = useMemo(
+    () => /* @__PURE__ */ jsx("div", { className: "oui-text-pretty oui-text-2xs oui-leading-normal oui-text-base-contrast-80", children: availableTooltip }),
+    [availableTooltip]
+  );
   return /* @__PURE__ */ jsxs(
     Flex,
     {
@@ -3218,14 +3296,31 @@ var Available = (props) => {
       justify: "between",
       className: "oui-orderEntry-available",
       children: [
-        marginMode === MarginMode.ISOLATED ? /* @__PURE__ */ jsx(Tooltip, { content: t("transfer.LTV.isolatedModeUsdcOnly"), children: /* @__PURE__ */ jsx(Text, { className: "oui-available-label oui-cursor-pointer", size: "2xs", children: t("common.available") }) }) : /* @__PURE__ */ jsx(Text, { className: "oui-available-label", size: "2xs", children: t("common.available") }),
+        /* @__PURE__ */ jsx(
+          Tips,
+          {
+            title: t("common.tips"),
+            content: availableTipsContent,
+            trigger: /* @__PURE__ */ jsx(
+              Text,
+              {
+                size: "2xs",
+                className: cn(
+                  "oui-available-label oui-cursor-pointer",
+                  "oui-border-b oui-border-dashed oui-border-line-12"
+                ),
+                children: t("common.available")
+              }
+            )
+          }
+        ),
         /* @__PURE__ */ jsxs(Flex, { itemAlign: "center", justify: "center", gap: 1, children: [
           showLTV && /* @__PURE__ */ jsx(
-            Tooltip,
+            Tips,
             {
-              className: "oui-available-ltvRisk-tooltip oui-bg-base-6 oui-p-2",
+              title: t("common.tips"),
               content: /* @__PURE__ */ jsx(LTVRiskTooltipWidget, { marginMode }),
-              children: /* @__PURE__ */ jsx(
+              trigger: /* @__PURE__ */ jsx(
                 InfoCircleIcon,
                 {
                   className: "oui-cursor-pointer oui-text-warning oui-opacity-80"
@@ -3239,7 +3334,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
@@ -3369,7 +3464,7 @@ var QuantitySlider = memo((props) => {
               {
                 className: 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",
@@ -3630,7 +3725,7 @@ var CustomInput = forwardRef(
           input: cn("oui-mb-1 oui-mt-5 oui-h-5", props?.classNames?.input),
           // prefix: cn(props.classNames?.prefix),
           suffix: 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
           )
         },
@@ -3646,7 +3741,7 @@ var InputLabel = (props) => {
     {
       htmlFor: props.id,
       className: 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
@@ -3674,7 +3769,7 @@ var BBOOrderTypeSelect = (props) => {
         value: BBOOrderType.QUEUE5
       }
     ],
-    []
+    [t]
   );
   return /* @__PURE__ */ jsx(
     Select.options,
@@ -3830,7 +3925,7 @@ var PriceInput = (props) => {
           {
             className: cn(
               "oui-orderEntry-bboSelect",
-              "oui-absolute oui-bottom-1 oui-left-0"
+              "oui-absolute oui-bottom-1 oui-start-0"
             ),
             children: /* @__PURE__ */ jsx(
               BBOOrderTypeSelect,
@@ -3852,7 +3947,7 @@ var QtyAndTotalInput = memo((props) => {
   const { t } = useTranslation();
   const { symbolInfo, onFocus, onBlur, getErrorMsg, setOrderValue } = useOrderEntryContext();
   const { base, quote, base_dp, quote_dp } = symbolInfo;
-  return /* @__PURE__ */ jsxs(Grid, { cols: 2, className: "oui-group oui-space-x-1", children: [
+  return /* @__PURE__ */ jsxs(Grid, { cols: 2, className: "oui-group oui-gap-1", children: [
     /* @__PURE__ */ jsx(
       CustomInput,
       {
@@ -3982,7 +4077,7 @@ var QuantityDistributionHint = (props) => {
         quantity: /* @__PURE__ */ jsx(DescendingQuantity, {})
       }
     ];
-  }, []);
+  }, [t]);
   const currentContent = useMemo(() => {
     return content.find((item) => item.type === type);
   }, [content, type]);
@@ -3998,7 +4093,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);
           },
@@ -4016,10 +4111,10 @@ var QuantityDistributionHint = (props) => {
           intensity: 500,
           width: "100%",
           className: cn(
-            "oui-rounded-r",
-            type === DistributionType.FLAT && "oui-rounded-bl",
-            type === DistributionType.ASCENDING && "oui-rounded-l",
-            type === DistributionType.DESCENDING && "oui-rounded-tl"
+            "oui-rounded-e",
+            type === DistributionType.FLAT && "oui-rounded-es",
+            type === DistributionType.ASCENDING && "oui-rounded-s",
+            type === DistributionType.DESCENDING && "oui-rounded-ss"
           ),
           children: [
             /* @__PURE__ */ jsx("div", { children: currentContent?.formula }),
@@ -4081,7 +4176,7 @@ var QuantityDistribution = (props) => {
               className: cn(
                 "oui-quantityDistribution-option-label",
                 "oui-text-2xs",
-                "oui-ml-1",
+                "oui-ms-1",
                 "oui-whitespace-nowrap oui-break-normal"
               ),
               children: distributionTypeMap[type]
@@ -4417,7 +4512,7 @@ var ScaledQuantityUnit = (props) => {
       classNames: {
         trigger: 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"
         )
@@ -4463,7 +4558,7 @@ var ScaledQuantityInput = 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",
@@ -4486,7 +4581,7 @@ var ScaledQuantityInput = 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) => {
@@ -4535,7 +4630,7 @@ var TotalOrdersInput = 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) => {
@@ -4563,7 +4658,7 @@ var ScaledOrderInput = (props) => {
         end_price: values.end_price
       }
     ),
-    /* @__PURE__ */ jsxs(Grid, { cols: 2, className: "oui-group oui-space-x-1", children: [
+    /* @__PURE__ */ jsxs(Grid, { cols: 2, className: "oui-group oui-gap-1", children: [
       /* @__PURE__ */ jsx(
         ScaledQuantityInput,
         {
@@ -4698,7 +4793,7 @@ var TrailingCallbackSelect = memo(
         classNames: {
           trigger: 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"
           )
@@ -4801,7 +4896,7 @@ var TrailingCallbackInput = memo(
           /* @__PURE__ */ 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
             }
           )
@@ -5175,7 +5270,7 @@ var PNLInput = (props) => {
         onBlur();
       },
       suffix: /* @__PURE__ */ jsxs(Fragment, { children: [
-        isPercentageMode && !!value && /* @__PURE__ */ jsx(Text, { size: "2xs", color: "inherit", className: "oui-ml-[2px]", children: "%" }),
+        isPercentageMode && !!value && /* @__PURE__ */ jsx(Text, { size: "2xs", color: "inherit", className: "oui-ms-[2px]", children: "%" }),
         /* @__PURE__ */ jsx(
           PNLMenus,
           {
@@ -5234,7 +5329,7 @@ var PnlInputProvider = (props) => {
         {
           rule: "percentages",
           className: 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
@@ -5244,14 +5339,14 @@ var PnlInputProvider = (props) => {
         {
           rule: "price",
           className: 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 = useMemo(() => {
     return { mode, setMode, tipsEle };
   }, [mode, setMode, tipsEle]);
@@ -5320,7 +5415,7 @@ var OrderTPSL = (props) => {
       {
         className: 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: () => {
@@ -5464,7 +5559,6 @@ var TPSLTriggerPriceInput = (props) => {
   const { t } = useTranslation();
   const { errorMsgVisible } = useOrderEntryContext();
   const { tipsEle } = usePnlInputContext();
-  const [prefix, setPrefix] = useState(`${props.type} Price`);
   const [placeholder, setPlaceholder] = useState("USDC");
   const [tipVisible, setTipVisible] = useState(false);
   const [isFocused, setIsFocused] = useState(false);
@@ -5489,31 +5583,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);
   };
-  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);
@@ -5542,10 +5622,10 @@ var TPSLTriggerPriceInput = (props) => {
         additional: "oui-text-base-contrast-54",
         root: cn(
           "oui-orderEntry-tpsl-triggerPrice",
-          "oui-pr-2 md:oui-pr-3",
+          "oui-pe-2 md:oui-pe-3",
           props.classNames?.root
         ),
-        prefix: cn("oui-pr-1 md:oui-pr-2", props.classNames?.prefix),
+        prefix: cn("oui-pe-1 md:oui-pe-2", props.classNames?.prefix),
         input: cn(
           "oui-text-2xs placeholder:oui-text-2xs",
           props.classNames?.input
@@ -6091,7 +6171,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"
                   }
                 )
@@ -6109,7 +6189,7 @@ var OrderEntry = (props) => {
               overlay: "!oui-bg-base-10/60",
               content: 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 },