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

package/dist/index.js

@@ -1718,33 +1718,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(ui.Flex, { justify: "between", className: "oui-orderEntry-estLiqPrice", children: [
-          isMobile ? /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "2xs", children: t("orderEntry.estLiqPrice") }) : /* @__PURE__ */ jsxRuntime.jsx(
-            ui.Tooltip,
+          /* @__PURE__ */ jsxRuntime.jsx(
+            ui.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(
                 ui.Text,
                 {
                   size: "2xs",
-                  className: "oui-estLiqPrice-label oui-cursor-pointer oui-border-b oui-border-dashed oui-border-line-12",
+                  className: ui.cn(
+                    "oui-estLiqPrice-label oui-cursor-pointer",
+                    "oui-border-b oui-border-dashed oui-border-line-12"
+                  ),
                   children: t("orderEntry.estLiqPrice")
                 }
               )
@@ -1854,6 +1859,7 @@ var LTVRiskTooltipUI = (props) => {
           threshold: isThresholdLoading ? "-" : ltv_threshold,
           usdcThreshold: isThresholdLoading ? "-" : negative_usdc_threshold
         }) }),
+        marginMode === types.MarginMode.ISOLATED ? /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "oui-pb-2", intensity: 54, size: "2xs", children: t("transfer.LTV.isolatedMarginOrderHint") }) : null,
         /* @__PURE__ */ jsxRuntime.jsx(
           ui.Button,
           {
@@ -1883,6 +1889,7 @@ var useConvertThreshold = () => {
   };
 };
 var useLTVTooltipScript = (marginMode) => {
+  const { isMobile } = ui.useScreen();
   const { data: holdingList = [], isLoading: isHoldingLoading } = hooks.useHoldingStream();
   const {
     ltv_threshold,
@@ -1914,8 +1921,8 @@ var useLTVTooltipScript = (marginMode) => {
   });
   const currentLtv = hooks.useComputedLTV();
   const onConvert = React3.useCallback(async () => {
-    return ui.modal.show("ConvertDialogId");
-  }, []);
+    return ui.modal.show(isMobile ? "ConvertSheetId" : "ConvertDialogId");
+  }, [isMobile]);
   return {
     holdingData,
     isHoldingLoading,
@@ -1940,6 +1947,13 @@ var Available = (props) => {
   const showLTV = React3.useMemo(() => {
     return typeof currentLtv === "number" && !Number.isNaN(currentLtv) && currentLtv > 0;
   }, [currentLtv]);
+  const availableTooltip = React3.useMemo(() => {
+    return marginMode === types.MarginMode.ISOLATED ? t("transfer.LTV.isolatedModeUsdcOnly") : t("transfer.LTV.availableCrossMarginHint");
+  }, [marginMode, t]);
+  const availableTipsContent = React3.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(
     ui.Flex,
     {
@@ -1947,14 +1961,31 @@ var Available = (props) => {
       justify: "between",
       className: "oui-orderEntry-available",
       children: [
-        marginMode === types.MarginMode.ISOLATED ? /* @__PURE__ */ jsxRuntime.jsx(ui.Tooltip, { content: t("transfer.LTV.isolatedModeUsdcOnly"), children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "oui-available-label oui-cursor-pointer", size: "2xs", children: t("common.available") }) }) : /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "oui-available-label", size: "2xs", children: t("common.available") }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          ui.Tips,
+          {
+            title: t("common.tips"),
+            content: availableTipsContent,
+            trigger: /* @__PURE__ */ jsxRuntime.jsx(
+              ui.Text,
+              {
+                size: "2xs",
+                className: ui.cn(
+                  "oui-available-label oui-cursor-pointer",
+                  "oui-border-b oui-border-dashed oui-border-line-12"
+                ),
+                children: t("common.available")
+              }
+            )
+          }
+        ),
         /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { itemAlign: "center", justify: "center", gap: 1, children: [
           showLTV && /* @__PURE__ */ jsxRuntime.jsx(
-            ui.Tooltip,
+            ui.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(
                 ui.InfoCircleIcon,
                 {
                   className: "oui-cursor-pointer oui-text-warning oui-opacity-80"
@@ -2600,19 +2631,26 @@ var MarginModeSwitch = (props) => {
 var OptionCard = (props) => {
   const { t } = i18n.useTranslation();
   const title = props.mode === types.MarginMode.CROSS ? t("marginMode.crossMargin") : t("marginMode.isolatedMargin");
-  const desc = props.mode === types.MarginMode.CROSS ? t("marginMode.crossMarginDescription") : t("marginMode.isolatedMarginDescription");
   return /* @__PURE__ */ jsxRuntime.jsxs(
-    "button",
+    "div",
     {
-      type: "button",
+      role: "button",
+      tabIndex: props.disabled ? -1 : 0,
       className: ui.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: [
@@ -2625,7 +2663,25 @@ var OptionCard = (props) => {
               children: title
             }
           ),
-          /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "oui-text-2xs oui-leading-[15px] oui-text-base-contrast-36 oui-font-semibold oui-tracking-[0.03em]", children: desc })
+          props.mode === types.MarginMode.ISOLATED ? /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "oui-text-2xs oui-leading-[15px] oui-text-base-contrast-36 oui-font-semibold oui-tracking-[0.03em]", children: /* @__PURE__ */ jsxRuntime.jsx(
+            i18n.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(ui.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",