@orderly.network/ui-order-entry 3.0.4-alpha.2 → 3.0.4-alpha.4

package/dist/index.mjs

@@ -1,9 +1,9 @@
 import React3, { memo, forwardRef, useState, useImperativeHandle, useEffect, createContext, useMemo, useRef, useCallback, useContext, useId } from 'react';
 import { useLocalStorage, utils, useGetEstLiqPrice, useOrderlyContext, useMemoizedFn, ERROR_MSG_CODES, usePositionStream, useFeeState, useRwaSymbolsInfoStore, useMarkets, MarketsType, useMarginModes, useMarginModeBySymbol, useBadgeBySymbol, useEventEmitter, useDebouncedCallback, useHoldingStream, useAppStore, useIndexPricesStream, useComputedLTV, useBoolean, useFeatureFlag, FlagKeys, useQuery, useAccount, useOrderEntry, useMarginRatio, useTpslPriceChecker, useTrack } from '@orderly.network/hooks';
-import { i18n, useTranslation } from '@orderly.network/i18n';
+import { i18n, useTranslation, Trans } from '@orderly.network/i18n';
 import { useOrderEntryFormErrorMsg, useCanTrade } from '@orderly.network/react-app';
 import { OrderSide, EMPTY_LIST, DistributionType, TrailingCallbackType, OrderType, MarginMode, PositionType, BBOOrderType, ORDER_ENTRY_EST_LIQ_PRICE_CHANGE, OrderLevel, TrackerEventName } from '@orderly.network/types';
-import { registerSimpleDialog, SimpleDialog, ExclamationFillIcon, modal, Text, Tooltip, TooltipTrigger, Flex, Input, cn, inputFormatter, Box, Slider, textVariants, injectable, Button, ThrottledButton, registerSimpleSheet, Select, Grid, Checkbox, SettingFillIcon, useScreen, InfoCircleIcon, AddCircleIcon, useModal, 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 '@orderly.network/ui';
+import { registerSimpleDialog, SimpleDialog, ExclamationFillIcon, modal, Text, Tooltip, TooltipTrigger, Flex, Input, cn, inputFormatter, Box, Slider, textVariants, injectable, Button, ThrottledButton, registerSimpleSheet, Select, Grid, Checkbox, SettingFillIcon, useScreen, Tips, InfoCircleIcon, AddCircleIcon, useModal, 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 '@orderly.network/ui';
 import { TPSLPositionTypeWidget, TPSLAdvancedWidget } from '@orderly.network/ui-tpsl';
 import { Decimal, zero, formatSymbol, removeTrailingZeros, todpIfNeed, getBBOType } from '@orderly.network/utils';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
@@ -1712,33 +1712,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")
                 }
               )
@@ -1848,6 +1853,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,
           {
@@ -1877,6 +1883,7 @@ var useConvertThreshold = () => {
   };
 };
 var useLTVTooltipScript = (marginMode) => {
+  const { isMobile } = useScreen();
   const { data: holdingList = [], isLoading: isHoldingLoading } = useHoldingStream();
   const {
     ltv_threshold,
@@ -1908,8 +1915,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,
@@ -1934,6 +1941,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,
     {
@@ -1941,14 +1955,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"
@@ -2594,19 +2625,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"
+        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: [
@@ -2619,7 +2657,25 @@ 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",