@orderly.network/ui-positions 2.11.1 → 2.11.2-alpha.0

package/dist/index.mjs

@@ -1,4 +1,4 @@
-import { registerSimpleDialog, registerSimpleSheet, useModal, SimpleDialog, useScreen, Flex, Text, Badge, Divider, toast, modal, CloseIcon, Button, ThrottledButton, ArrowDownShortIcon, ArrowUpShortIcon, IconButton, TokenIcon, cn, Input, inputFormatter, Slider, Statistic, Grid, ExclamationFillIcon, Tooltip, DataTable, ListView, SimpleSheet, usePagination, DataFilter, PopoverRoot, PopoverTrigger, PopoverContent, Checkbox, formatAddress, Box, HoverCard, AddCircleIcon, ChevronRightIcon, ArrowLeftRightIcon, capitalizeFirstLetter, ShareIcon, EditIcon, Select, Tips } from '@orderly.network/ui';
+import { registerSimpleDialog, registerSimpleSheet, useModal, SimpleDialog, useScreen, Flex, Text, Badge, Divider, toast, modal, CloseIcon, Button, ThrottledButton, ArrowDownShortIcon, ArrowUpShortIcon, IconButton, TokenIcon, cn, Input, inputFormatter, Slider, Statistic, Grid, ExclamationFillIcon, Tooltip, DataTable, ListView, SimpleSheet, usePagination, DataFilter, PopoverRoot, PopoverTrigger, PopoverContent, Checkbox, formatAddress, Box, HoverCard, AddCircleIcon, Tips, ChevronRightIcon, ArrowLeftRightIcon, capitalizeFirstLetter, ShareIcon, EditIcon, Select } from '@orderly.network/ui';
 import React2, { createContext, useMemo, useState, useCallback, useContext, useEffect, useRef } from 'react';
 import { i18n, useTranslation } from '@orderly.network/i18n';
 import { OrderSide, MarginMode, OrderType, EMPTY_LIST, AccountStatusEnum, TrackerEventName, OrderStatus, AlgoOrderRootType, PositionType, AlgoOrderType } from '@orderly.network/types';
@@ -1587,16 +1587,19 @@ var RwaStatusTag = ({ symbol }) => {
     return null;
   }
   return /* @__PURE__ */ jsx(
-    Flex,
+    Tips,
     {
-      r: "base",
-      px: 2,
-      height: 18,
-      className: cn(
-        "oui-shrink-0",
-        open ? "oui-bg-success/15" : "oui-bg-danger/15"
-      ),
-      children: /* @__PURE__ */ jsx(Text, { size: "2xs", color: open ? "success" : "danger", children: open ? t("trading.rwa.marketHours") : t("trading.rwa.outsideMarketHours") })
+      title: t("common.tips"),
+      content: /* @__PURE__ */ jsx(Text, { color: open ? "success" : "danger", children: open ? t("trading.rwa.marketHours") : t("trading.rwa.outsideMarketHours") }),
+      trigger: /* @__PURE__ */ jsx(Box, { p: 2, className: "oui-flex oui-cursor-pointer oui-items-center", children: /* @__PURE__ */ jsx(
+        Box,
+        {
+          width: 4,
+          height: 4,
+          r: "full",
+          className: cn(open ? "oui-bg-success" : "oui-bg-danger")
+        }
+      ) })
     }
   );
 };
@@ -3463,11 +3466,11 @@ var useColumn = (config) => {
         title: t("common.symbol"),
         dataIndex: "symbol",
         fixed: "left",
-        width: 200,
+        width: 176,
         onSort: (r1, r2) => {
           return r1.symbol?.localeCompare(r2.symbol || "");
         },
-        render: (value, record) => /* @__PURE__ */ jsxs(Flex, { gap: 2, children: [
+        render: (value, record) => /* @__PURE__ */ jsxs(Flex, { gap: 2, className: "oui-py-1", children: [
           /* @__PURE__ */ jsx(
             Box,
             {
@@ -3479,32 +3482,32 @@ var useColumn = (config) => {
               )
             }
           ),
-          /* @__PURE__ */ jsxs(Flex, { direction: "column", itemAlign: "start", children: [
-            /* @__PURE__ */ jsx(
-              Text.formatted,
-              {
-                formatString: "base-type",
-                className: "oui-cursor-pointer",
-                onClick: (e) => {
-                  onSymbolChange?.({ symbol: value });
-                  e.stopPropagation();
-                  e.preventDefault();
-                },
-                children: `${value.split("_")[1]}-PERP`
-              }
-            ),
-            /* @__PURE__ */ jsxs(Flex, { gap: 1, children: [
+          /* @__PURE__ */ jsxs(Flex, { direction: "column", itemAlign: "start", gap: 1, children: [
+            /* @__PURE__ */ jsxs(Flex, { gap: 1, itemAlign: "center", children: [
               /* @__PURE__ */ jsx(
-                LeverageBadge,
+                Text.formatted,
                 {
-                  symbol: value,
-                  leverage: record.leverage,
-                  modalId: SymbolLeverageDialogId,
-                  marginMode: record.margin_mode
+                  formatString: "base-type",
+                  className: "oui-cursor-pointer",
+                  onClick: (e) => {
+                    onSymbolChange?.({ symbol: value });
+                    e.stopPropagation();
+                    e.preventDefault();
+                  },
+                  children: `${value.split("_")[1]}-PERP`
                 }
               ),
               /* @__PURE__ */ jsx(RwaStatusTag, { symbol: value })
-            ] })
+            ] }),
+            /* @__PURE__ */ jsx(Flex, { gap: 1, wrap: "wrap", children: /* @__PURE__ */ jsx(
+              LeverageBadge,
+              {
+                symbol: value,
+                leverage: record.leverage,
+                modalId: SymbolLeverageDialogId,
+                marginMode: record.margin_mode
+              }
+            ) })
           ] })
         ] })
       },
@@ -3776,31 +3779,36 @@ var SymbolToken = (props) => {
   const { item } = props;
   const isBuy = item.position_qty > 0;
   const { t } = useTranslation();
-  return /* @__PURE__ */ jsx(
-    Text.formatted,
-    {
-      rule: "symbol",
-      formatString: "base-type",
-      size: "2xs",
-      suffix: /* @__PURE__ */ jsxs("div", { className: "oui-flex oui-items-center oui-gap-1", children: [
-        /* @__PURE__ */ jsx(Badge, { color: isBuy ? "success" : "danger", size: "xs", children: isBuy ? t("common.long") : t("common.short") }),
-        /* @__PURE__ */ jsx(
-          LeverageBadge,
-          {
-            symbol: item.symbol,
-            leverage: item.leverage,
-            modalId: SymbolLeverageSheetId,
-            marginMode: item.margin_mode
-          }
-        )
-      ] }),
-      showIcon: true,
-      onClick: () => {
-        props.onSymbolChange?.({ symbol: item.symbol });
-      },
-      children: item.symbol
-    }
-  );
+  return /* @__PURE__ */ jsxs(Flex, { direction: "column", itemAlign: "start", gap: 1, children: [
+    /* @__PURE__ */ jsxs(Flex, { gap: 1, itemAlign: "center", children: [
+      /* @__PURE__ */ jsx(
+        Text.formatted,
+        {
+          rule: "symbol",
+          formatString: "base-type",
+          size: "2xs",
+          showIcon: true,
+          onClick: () => {
+            props.onSymbolChange?.({ symbol: item.symbol });
+          },
+          children: item.symbol
+        }
+      ),
+      /* @__PURE__ */ jsx(RwaStatusTag, { symbol: item.symbol })
+    ] }),
+    /* @__PURE__ */ jsxs(Flex, { gap: 1, itemAlign: "center", wrap: "wrap", children: [
+      /* @__PURE__ */ jsx(Badge, { color: isBuy ? "success" : "danger", size: "xs", children: isBuy ? t("common.long") : t("common.short") }),
+      /* @__PURE__ */ jsx(
+        LeverageBadge,
+        {
+          symbol: item.symbol,
+          leverage: item.leverage,
+          modalId: SymbolLeverageSheetId,
+          marginMode: item.margin_mode
+        }
+      )
+    ] })
+  ] });
 };
 var UnrealPnL = (props) => {
   const { item } = props;
@@ -4439,7 +4447,7 @@ var usePositionHistoryColumn = (props) => {
         title: t("common.symbol"),
         dataIndex: "symbol",
         fixed: "left",
-        width: 200,
+        width: 210,
         onSort: (r1, r2) => {
           return r1.symbol?.localeCompare(r2.symbol || "");
         },
@@ -4630,6 +4638,19 @@ var SymbolInfo2 = (props) => {
         )
       );
     }
+    if (record.margin_mode != null) {
+      list.push(
+        /* @__PURE__ */ jsx(
+          Badge,
+          {
+            color: "neutral",
+            size: "xs",
+            children: record.margin_mode === MarginMode.ISOLATED ? t("marginMode.isolated") : t("marginMode.cross")
+          },
+          `margin-mode-${record.margin_mode}`
+        )
+      );
+    }
     list.push(
       /* @__PURE__ */ jsx(
         LeverageBadge2,
@@ -4642,7 +4663,7 @@ var SymbolInfo2 = (props) => {
     );
     return list;
   }, [record, t]);
-  return /* @__PURE__ */ jsxs(Flex, { gap: 2, height: 48, children: [
+  return /* @__PURE__ */ jsxs(Flex, { gap: 2, className: "oui-py-1", children: [
     /* @__PURE__ */ jsx(
       Box,
       {
@@ -4654,7 +4675,7 @@ var SymbolInfo2 = (props) => {
         )
       }
     ),
-    /* @__PURE__ */ jsxs(Flex, { direction: "column", itemAlign: "start", children: [
+    /* @__PURE__ */ jsxs(Flex, { direction: "column", itemAlign: "start", gap: 1, children: [
       /* @__PURE__ */ jsx(
         Text.formatted,
         {
@@ -4668,7 +4689,7 @@ var SymbolInfo2 = (props) => {
           children: `${record.symbol.split("_")[1]}-PERP`
         }
       ),
-      /* @__PURE__ */ jsx(Flex, { gap: 1, children: tags })
+      /* @__PURE__ */ jsx(Flex, { gap: 1, wrap: "wrap", children: tags })
     ] })
   ] });
 };
@@ -4780,6 +4801,15 @@ var areDatesEqual = (date1, date2) => {
 };
 
 // src/components/positionHistory/positionHistory.script.tsx
+var normalizeMarginMode = (value) => {
+  if (value === 1 || value === MarginMode.ISOLATED) {
+    return MarginMode.ISOLATED;
+  }
+  if (value === 0 || value === MarginMode.CROSS) {
+    return MarginMode.CROSS;
+  }
+  return void 0;
+};
 var usePositionHistoryScript = (props) => {
   const {
     onSymbolChange,
@@ -4799,20 +4829,16 @@ var usePositionHistoryScript = (props) => {
     symbol ? `/v1/position_history?symbol=${symbol}&limit=1000` : "/v1/position_history?limit=1000",
     {
       formatter(data2) {
-        return (data2.rows ?? null)?.map(
-          (item) => {
-            if (item.realized_pnl != null && item.accumulated_funding_fee != null && item.trading_fee != null) {
-              const netPnL = item.realized_pnl - item.accumulated_funding_fee - item.trading_fee;
-              return {
-                ...item,
-                // convert margin_mode to MarginMode
-                margin_mode: item.margin_mode === 1 || item.margin_mode === MarginMode.ISOLATED ? MarginMode.ISOLATED : MarginMode.CROSS,
-                netPnL
-              };
-            }
-            return item;
+        return (data2.rows ?? null)?.map((item) => {
+          const result = {
+            ...item,
+            margin_mode: normalizeMarginMode(item.margin_mode)
+          };
+          if (item.realized_pnl != null && item.accumulated_funding_fee != null && item.trading_fee != null) {
+            result.netPnL = item.realized_pnl - item.accumulated_funding_fee - item.trading_fee;
           }
-        );
+          return result;
+        });
       },
       revalidateOnFocus: true
     }
@@ -5083,8 +5109,13 @@ var PositionHistoryType = (props) => {
         )
       );
     }
+    if (record.margin_mode != null) {
+      list.push(
+        /* @__PURE__ */ jsx(Badge, { color: "neutral", size: "xs", children: record.margin_mode === MarginMode.ISOLATED ? t("marginMode.isolated") : t("marginMode.cross") }, `margin-${record.margin_mode}`)
+      );
+    }
     return list;
-  }, [record]);
+  }, [record, t]);
   return /* @__PURE__ */ jsx(Flex, { gap: 1, children: tags });
 };
 var ClosedQty = (props) => {