@orderly.network/ui-positions 2.8.14 → 2.9.0-alpha.1

package/dist/index.js

@@ -2926,7 +2926,7 @@ var useColumn = (config) => {
                 }
               ) })
             ] }),
-            children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { children: t("positions.column.liqPrice") })
+            children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "oui-underline oui-decoration-dotted", children: t("positions.column.liqPrice") })
           }
         ),
         width: 100,
@@ -2956,7 +2956,7 @@ var useColumn = (config) => {
             side: "top",
             align: "center",
             className: "oui-max-w-[280px] oui-text-2xs",
-            children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { children: t("common.unrealizedPnl") })
+            children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "oui-underline oui-decoration-dotted", children: t("common.unrealizedPnl") })
           }
         ),
         dataIndex: "unrealized_pnl",
@@ -3057,12 +3057,12 @@ var useColumn = (config) => {
                 ]
               }
             ),
-            children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { children: t("positions.column.margin") })
+            children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "oui-underline oui-decoration-dotted", children: t("positions.column.margin") })
           }
         ),
         dataIndex: "mm",
         onSort: true,
-        width: 100,
+        width: 140,
         rule: "price",
         render: (value) => /* @__PURE__ */ jsxRuntime.jsx(ui.Text.numeral, { children: value })
       },
@@ -3144,12 +3144,20 @@ var SymbolToken = (props) => {
 var UnrealPnL = (props) => {
   const { item } = props;
   const { t } = i18n.useTranslation();
+  const unrealPnlLabel = /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "oui-text-right", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { intensity: 36, className: "oui-underline oui-decoration-dotted", children: t("common.unrealizedPnl") }),
+    /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { intensity: 20, className: "oui-ml-0.5", children: "(USDC)" })
+  ] });
   return /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { gap: 3, children: [
     /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { direction: "column", className: "oui-text-2xs", itemAlign: "end", children: [
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "oui-text-right", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { intensity: 36, children: t("common.unrealizedPnl") }),
-        /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { intensity: 20, children: "(USDC)" })
-      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        ui.Tips,
+        {
+          trigger: unrealPnlLabel,
+          content: /* @__PURE__ */ jsxRuntime.jsx(UnrealizedPnLPopoverCard, {}),
+          title: t("common.tips")
+        }
+      ),
       /* @__PURE__ */ jsxRuntime.jsx(
         ui.Text.pnl,
         {
@@ -3204,13 +3212,23 @@ var Qty = (props) => {
 var Margin = (props) => {
   const { item } = props;
   const { t } = i18n.useTranslation();
+  const marginTipsContent = /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "oui-text-2xs oui-text-base-contrast-80", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { children: t("positions.column.margin.tooltip") }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "oui-my-2 oui-h-px oui-w-full oui-bg-base-8" }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { children: t("positions.column.margin.formula") })
+  ] });
+  const marginLabel = /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "oui-underline oui-decoration-dotted", children: t("positions.column.margin") });
   return /* @__PURE__ */ jsxRuntime.jsx(
     ui.Statistic,
     {
-      label: /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
-        t("positions.column.margin"),
-        /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { intensity: 20, children: "(USDC)" })
-      ] }),
+      label: /* @__PURE__ */ jsxRuntime.jsx(
+        ui.Tips,
+        {
+          trigger: marginLabel,
+          content: marginTipsContent,
+          title: t("common.tips")
+        }
+      ),
       classNames: {
         root: "oui-text-xs",
         label: "oui-text-2xs"
@@ -3281,10 +3299,31 @@ var LiqPrice = (props) => {
     }
     return estLiqPrice;
   }, [item.est_liq_price, item.mark_price]);
+  const liqTipsContent = /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "oui-text-2xs oui-text-base-contrast-80", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "oui-text-pretty", children: t("common.liquidationPrice.tooltip") }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "oui-mt-2", 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")
+      }
+    ) })
+  ] });
+  const liqLabel = /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "oui-underline oui-decoration-dotted", children: t("positions.column.liqPrice") });
   return /* @__PURE__ */ jsxRuntime.jsx(
     ui.Statistic,
     {
-      label: t("positions.column.liqPrice"),
+      label: /* @__PURE__ */ jsxRuntime.jsx(
+        ui.Tips,
+        {
+          trigger: liqLabel,
+          content: liqTipsContent,
+          title: t("common.tips")
+        }
+      ),
       align: "end",
       classNames: {
         root: "oui-text-xs",
@@ -3365,7 +3404,7 @@ var TPSLPrice = (props) => {
     /* @__PURE__ */ jsxRuntime.jsxs(
       ui.Flex,
       {
-        className: "oui-text-2xs oui-text-base-contrast-36 oui-grid-cols-end",
+        className: "oui-text-2xs oui-grid-cols-end oui-text-base-contrast-36",
         direction: "column",
         itemAlign: "end",
         children: [