@orderly.network/ui-positions 3.0.0-beta.1 → 3.0.0-beta.2

package/dist/index.d.mts

@@ -104,7 +104,7 @@ declare const usePositionHistoryScript: (props: PositionHistoryProps$1) => {
         value: any;
     }) => void;
     symbol: string | undefined;
-    filterDays: 1 | 7 | 30 | 90 | null;
+    filterDays: 1 | 30 | 7 | 90 | null;
     updateFilterDays: (days: 1 | 7 | 30 | 90) => void;
     pnlNotionalDecimalPrecision: number | undefined;
     onSort: (options?: _orderly_network_ui.TableSort) => void;
@@ -147,7 +147,7 @@ declare const useLiquidationScript: (props: LiquidationProps) => {
         from?: Date;
         to?: Date;
     };
-    filterDays: 1 | 7 | 30 | 90 | null;
+    filterDays: 1 | 30 | 7 | 90 | null;
     updateFilterDays: (days: 1 | 7 | 30 | 90) => void;
     filterItems: any[];
     onFilter: (filter: {

package/dist/index.d.ts

@@ -104,7 +104,7 @@ declare const usePositionHistoryScript: (props: PositionHistoryProps$1) => {
         value: any;
     }) => void;
     symbol: string | undefined;
-    filterDays: 1 | 7 | 30 | 90 | null;
+    filterDays: 1 | 30 | 7 | 90 | null;
     updateFilterDays: (days: 1 | 7 | 30 | 90) => void;
     pnlNotionalDecimalPrecision: number | undefined;
     onSort: (options?: _orderly_network_ui.TableSort) => void;
@@ -147,7 +147,7 @@ declare const useLiquidationScript: (props: LiquidationProps) => {
         from?: Date;
         to?: Date;
     };
-    filterDays: 1 | 7 | 30 | 90 | null;
+    filterDays: 1 | 30 | 7 | 90 | null;
     updateFilterDays: (days: 1 | 7 | 30 | 90) => void;
     filterItems: any[];
     onFilter: (filter: {

package/dist/index.js

@@ -5,8 +5,8 @@ var React2 = require('react');
 var i18n = require('@orderly.network/i18n');
 var types = require('@orderly.network/types');
 var utils = require('@orderly.network/utils');
-var jsxRuntime = require('react/jsx-runtime');
 var hooks = require('@orderly.network/hooks');
+var jsxRuntime = require('react/jsx-runtime');
 var reactApp = require('@orderly.network/react-app');
 var perp = require('@orderly.network/perp');
 var uiConnector = require('@orderly.network/ui-connector');
@@ -20,6 +20,11 @@ function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 var React2__default = /*#__PURE__*/_interopDefault(React2);
 
 // src/index.ts
+var SymbolBadge = ({ symbol }) => {
+  const { brokerId, brokerName, brokerNameRaw } = hooks.useBadgeBySymbol(symbol);
+  const badge = brokerName ?? brokerId ?? void 0;
+  return /* @__PURE__ */ jsxRuntime.jsx(ui.SymbolBadge, { badge, fullName: brokerNameRaw });
+};
 var ConfirmHeader = (props) => {
   const { hideCloseIcon = false } = props;
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "oui-relative oui-w-full oui-border-b oui-border-line-4 oui-pb-3", children: [
@@ -176,9 +181,10 @@ var LimitConfirmDialog = (props) => {
         ui.Text.formatted,
         {
           rule: "symbol",
-          formatString: "base-type",
+          formatString: "base",
           size: "base",
           showIcon: true,
+          suffix: /* @__PURE__ */ jsxRuntime.jsx(SymbolBadge, { symbol: order.symbol }),
           children: order.symbol
         }
       ),
@@ -326,8 +332,10 @@ var FundingFeeHistoryUI = ({ total, symbol, start_t, end_t }) => {
               ui.Text.formatted,
               {
                 rule: "symbol",
+                formatString: "base",
                 className: "oui-font-semibold",
                 intensity: 98,
+                suffix: /* @__PURE__ */ jsxRuntime.jsx(SymbolBadge, { symbol }),
                 children: symbol
               }
             )
@@ -410,7 +418,7 @@ var HistoryDataListView = ({ isLoading, data, loadMore }) => {
         dataIndex: "created_time",
         width: 120,
         render: (value) => {
-          return /* @__PURE__ */ jsxRuntime.jsx(ui.Text.formatted, { rule: "date", children: value });
+          return /* @__PURE__ */ jsxRuntime.jsx(ui.Text.formatted, { rule: "date", suffix: /* @__PURE__ */ jsxRuntime.jsx(SymbolBadge, { symbol: value }), children: value });
         }
       },
       {
@@ -1122,9 +1130,10 @@ var ReversePosition = (props) => {
                 size: "base",
                 weight: "semibold",
                 rule: "symbol",
-                formatString: "base-type",
+                formatString: "base",
                 intensity: 98,
                 showIcon: true,
+                suffix: /* @__PURE__ */ jsxRuntime.jsx(SymbolBadge, { symbol }),
                 children: symbol
               }
             ),
@@ -1593,16 +1602,19 @@ var RwaStatusTag = ({ symbol }) => {
     return null;
   }
   return /* @__PURE__ */ jsxRuntime.jsx(
-    ui.Flex,
+    ui.Tips,
     {
-      r: "base",
-      px: 2,
-      height: 18,
-      className: ui.cn(
-        "oui-shrink-0",
-        open ? "oui-bg-success/15" : "oui-bg-danger/15"
-      ),
-      children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "2xs", color: open ? "success" : "danger", children: open ? t("trading.rwa.marketHours") : t("trading.rwa.outsideMarketHours") })
+      title: t("common.tips"),
+      content: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { color: open ? "success" : "danger", children: open ? t("trading.rwa.marketHours") : t("trading.rwa.outsideMarketHours") }),
+      trigger: /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { p: 2, className: "oui-flex oui-cursor-pointer oui-items-center", children: /* @__PURE__ */ jsxRuntime.jsx(
+        ui.Box,
+        {
+          width: 4,
+          height: 4,
+          r: "full",
+          className: ui.cn(open ? "oui-bg-success" : "oui-bg-danger")
+        }
+      ) })
     }
   );
 };
@@ -1639,17 +1651,7 @@ var usePositionMargin = (symbol, isAdd, isolatedMargin, finalMargin) => {
     if (!currentPosition) return null;
     return new utils.Decimal(currentPosition.notional);
   }, [currentPosition]);
-  const unSettledPnl = React2.useMemo(() => {
-    if (!currentPosition || !notional || !fundingRates) return null;
-    const fundingRate = fundingRates[currentPosition.symbol];
-    return notional.sub(new utils.Decimal(currentPosition.cost_position)).sub(
-      new utils.Decimal(currentPosition.position_qty).mul(
-        new utils.Decimal(fundingRate.sum_unitary_funding ?? 0).sub(
-          new utils.Decimal(currentPosition.last_sum_unitary_funding)
-        )
-      )
-    );
-  }, [notional, currentPosition, fundingRates]);
+  const unSettledPnl = currentPosition?.unsettled_pnl;
   const imr = React2.useMemo(() => {
     if (!currentPosition || !symbolsInfo?.[symbol] || !notional) {
       return null;
@@ -1677,12 +1679,12 @@ var usePositionMargin = (symbol, isAdd, isolatedMargin, finalMargin) => {
     }
     const positionNotional = notional;
     const imrValue = imr;
-    const unsettledPnlValue = unSettledPnl ?? new utils.Decimal(0);
+    const unsettledPnlValue = unSettledPnl ?? 0;
     return perp.account.maxReduce({
       isolatedPositionMargin: isolatedMargin,
       positionNotional: positionNotional.toNumber(),
       imr: imrValue.toNumber(),
-      positionUnsettledPnL: unsettledPnlValue.toNumber()
+      positionUnsettledPnL: unsettledPnlValue
     });
   }, [
     total_cross_unsettled_pnl,
@@ -1699,14 +1701,14 @@ var usePositionMargin = (symbol, isAdd, isolatedMargin, finalMargin) => {
     const currentSymbolInfo = symbolsInfo[symbol];
     const currentPositionNotional = notional?.toNumber() ?? 0;
     const currentPositionIMRFactor = accountInfo.imr_factor[symbol] ?? currentSymbolInfo.imr_factor ?? 0;
-    const currentPositionMMR = perp.positions.MMR({
+    perp.positions.MMR({
       baseMMR: currentSymbolInfo.base_mmr ?? 0,
       baseIMR: currentSymbolInfo.base_imr ?? 0,
       IMRFactor: currentPositionIMRFactor,
       positionNotional: currentPositionNotional,
       IMR_factor_power: 4 / 5
     });
-    const otherPositions = positions2?.filter((item) => item.symbol !== symbol).map((item) => {
+    positions2?.filter((item) => item.symbol !== symbol).map((item) => {
       const itemSymbolInfo = symbolsInfo[item.symbol];
       const itemIMRFactor = accountInfo.imr_factor[item.symbol] ?? itemSymbolInfo?.imr_factor ?? 0;
       const itemNotional = item.notional ?? new utils.Decimal(item.position_qty).mul(item.mark_price).abs().toNumber();
@@ -1724,18 +1726,19 @@ var usePositionMargin = (symbol, isAdd, isolatedMargin, finalMargin) => {
         mmr: itemMMR
       };
     }) ?? [];
-    const totalCollateral = new utils.Decimal(finalMargin).add(currentPosition.unsettled_pnl ?? 0).toNumber();
-    const liqPrice = perp.positions.liqPrice({
-      markPrice,
-      symbol,
-      totalCollateral,
-      positionQty: currentPosition.position_qty,
-      positions: otherPositions,
-      MMR: currentPositionMMR,
+    new utils.Decimal(finalMargin).add(currentPosition.unsettled_pnl ?? 0).toNumber();
+    const sumUnitaryFunding = fundingRates?.[symbol]?.sum_unitary_funding ?? 0;
+    const liqPrice = perp.positions.liquidationPriceIsolated({
+      isolatedPositionMargin: finalMargin,
+      costPosition: currentPosition.cost_position ?? 0,
+      positionQty: currentPosition.position_qty ?? 0,
+      sumUnitaryFunding,
+      lastSumUnitaryFunding: currentPosition.last_sum_unitary_funding ?? 0,
       baseMMR: currentSymbolInfo.base_mmr ?? 0,
       baseIMR: currentSymbolInfo.base_imr ?? 0,
       IMRFactor: currentPositionIMRFactor,
-      costPosition: currentPosition.cost_position ?? 0
+      referencePrice: markPrice,
+      leverage: currentPosition.leverage ?? 0
     });
     return liqPrice;
   }, [
@@ -1881,7 +1884,7 @@ var useAdjustMarginScript = (props) => {
     sliderValue,
     maxAmount: maxAmount ?? 0,
     currentMargin,
-    liquidationPrice: liquidationPrice ?? 0,
+    liquidationPrice,
     effectiveLeverage: effectiveLeverage ?? 0,
     isLoading,
     isAdd,
@@ -2121,10 +2124,11 @@ var SymbolInfo = ({ symbol }) => {
       ui.Text.formatted,
       {
         rule: "symbol",
-        formatString: "base-type",
+        formatString: "base",
         size: "base",
         weight: "semibold",
         intensity: 98,
+        suffix: /* @__PURE__ */ jsxRuntime.jsx(SymbolBadge, { symbol }),
         children: symbol
       }
     )
@@ -2303,7 +2307,16 @@ var MobileClosePosition = (props) => {
   const orderType = isMarketClose ? t("orderEntry.orderType.market") : t("orderEntry.orderType.limit");
   const orderSide = isBuy ? /* @__PURE__ */ jsxRuntime.jsx(ui.Badge, { color: "success", size: "xs", children: t("common.buy") }) : /* @__PURE__ */ jsxRuntime.jsx(ui.Badge, { color: "danger", size: "xs", children: t("common.sell") });
   const header = /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { width: "100%", justify: "between", children: [
-    /* @__PURE__ */ jsxRuntime.jsx(ui.Text.formatted, { rule: "symbol", showIcon: true, children: position.symbol }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      ui.Text.formatted,
+      {
+        rule: "symbol",
+        formatString: "base",
+        showIcon: true,
+        suffix: /* @__PURE__ */ jsxRuntime.jsx(SymbolBadge, { symbol: position.symbol }),
+        children: position.symbol
+      }
+    ),
     /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { gap: 1, children: [
       /* @__PURE__ */ jsxRuntime.jsx(ui.Badge, { color: "neutral", size: "xs", children: orderType }),
       orderSide
@@ -3038,6 +3051,25 @@ var PartialTPSL = (props) => {
     ] })
   ] });
 };
+var PositionSymbolCell = (props) => {
+  const { symbol, onSymbolChange, className, formatString, ...rest } = props;
+  const { brokerId, brokerName, brokerNameRaw } = hooks.useBadgeBySymbol(symbol);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    ui.Text.symbolBadge,
+    {
+      ...rest,
+      className: ui.cn(className, "oui-cursor-pointer"),
+      badge: brokerName ?? brokerId ?? void 0,
+      fullName: brokerNameRaw,
+      onClick: (e) => {
+        onSymbolChange?.({ symbol });
+        e.stopPropagation();
+        e.preventDefault();
+      },
+      children: symbol
+    }
+  );
+};
 var ReversePositionButton = (props) => {
   const { position } = props;
   return /* @__PURE__ */ jsxRuntime.jsx(
@@ -3081,6 +3113,7 @@ var useShareButtonScript = (props) => {
   const { position, sharePnLConfig, iconSize } = props;
   const { getFirstRefCode } = hooks.useReferralInfo();
   const symbolsInfo = hooks.useSymbolsInfo();
+  const { brokerNameRaw } = hooks.useBadgeBySymbol(position.symbol);
   const refCode = React2.useMemo(() => {
     return getFirstRefCode()?.code;
   }, [getFirstRefCode]);
@@ -3159,7 +3192,8 @@ var useShareButtonScript = (props) => {
           marginMode: position.margin_mode
         },
         refCode,
-        ...sharePnLConfig
+        ...sharePnLConfig,
+        brokerName: sharePnLConfig?.brokerName ?? brokerNameRaw
       }
     });
   };
@@ -3482,44 +3516,38 @@ var useColumn = (config) => {
         onSort: (r1, r2) => {
           return r1.symbol?.localeCompare(r2.symbol || "");
         },
-        render: (value, record) => /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { gap: 2, children: [
+        render: (value, record) => /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { gap: 2, className: "oui-py-1", children: [
           /* @__PURE__ */ jsxRuntime.jsx(
             ui.Box,
             {
               width: 4,
-              height: 20,
+              height: 24,
               className: ui.cn(
-                "oui-h-[38px] oui-rounded-[1px]",
+                "oui-h-[42px] oui-rounded-[1px]",
                 record.position_qty > 0 ? "oui-bg-trade-profit" : "oui-bg-trade-loss"
               )
             }
           ),
-          /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { direction: "column", itemAlign: "start", children: [
-            /* @__PURE__ */ jsxRuntime.jsx(
-              ui.Text.formatted,
-              {
-                formatString: "base-type",
-                className: "oui-cursor-pointer",
-                onClick: (e) => {
-                  onSymbolChange?.({ symbol: value });
-                  e.stopPropagation();
-                  e.preventDefault();
-                },
-                children: `${value.split("_")[1]}-PERP`
-              }
-            ),
-            /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { gap: 1, children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { direction: "column", itemAlign: "start", gap: 1, children: [
+            /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { gap: 1, itemAlign: "center", children: [
               /* @__PURE__ */ jsxRuntime.jsx(
-                LeverageBadge,
+                PositionSymbolCell,
                 {
                   symbol: value,
-                  leverage: record.leverage,
-                  modalId: uiLeverage.SymbolLeverageDialogId,
-                  marginMode: record.margin_mode
+                  onSymbolChange
                 }
               ),
               /* @__PURE__ */ jsxRuntime.jsx(RwaStatusTag, { symbol: value })
-            ] })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx(ui.Flex, { gap: 1, wrap: "wrap", children: /* @__PURE__ */ jsxRuntime.jsx(
+              LeverageBadge,
+              {
+                symbol: value,
+                leverage: record.leverage,
+                modalId: uiLeverage.SymbolLeverageDialogId,
+                marginMode: record.margin_mode
+              }
+            ) })
           ] })
         ] })
       },
@@ -3791,31 +3819,37 @@ var SymbolToken = (props) => {
   const { item } = props;
   const isBuy = item.position_qty > 0;
   const { t } = i18n.useTranslation();
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    ui.Text.formatted,
-    {
-      rule: "symbol",
-      formatString: "base-type",
-      size: "2xs",
-      suffix: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "oui-flex oui-items-center oui-gap-1", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(ui.Badge, { color: isBuy ? "success" : "danger", size: "xs", children: isBuy ? t("common.long") : t("common.short") }),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          LeverageBadge,
-          {
-            symbol: item.symbol,
-            leverage: item.leverage,
-            modalId: uiLeverage.SymbolLeverageSheetId,
-            marginMode: item.margin_mode
-          }
-        )
-      ] }),
-      showIcon: true,
-      onClick: () => {
-        props.onSymbolChange?.({ symbol: item.symbol });
-      },
-      children: item.symbol
-    }
-  );
+  return /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { direction: "column", itemAlign: "start", gap: 1, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { gap: 1, itemAlign: "center", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        ui.Text.formatted,
+        {
+          rule: "symbol",
+          formatString: "base",
+          size: "2xs",
+          showIcon: true,
+          onClick: () => {
+            props.onSymbolChange?.({ symbol: item.symbol });
+          },
+          suffix: /* @__PURE__ */ jsxRuntime.jsx(SymbolBadge, { symbol: item.symbol }),
+          children: item.symbol
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(RwaStatusTag, { symbol: item.symbol })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { gap: 1, itemAlign: "center", wrap: "wrap", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(ui.Badge, { color: isBuy ? "success" : "danger", size: "xs", children: isBuy ? t("common.long") : t("common.short") }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        LeverageBadge,
+        {
+          symbol: item.symbol,
+          leverage: item.leverage,
+          modalId: uiLeverage.SymbolLeverageSheetId,
+          marginMode: item.margin_mode
+        }
+      )
+    ] })
+  ] });
 };
 var UnrealPnL = (props) => {
   const { item } = props;
@@ -4454,7 +4488,7 @@ var usePositionHistoryColumn = (props) => {
         title: t("common.symbol"),
         dataIndex: "symbol",
         fixed: "left",
-        width: 200,
+        width: 250,
         onSort: (r1, r2) => {
           return r1.symbol?.localeCompare(r2.symbol || "");
         },
@@ -4645,6 +4679,19 @@ var SymbolInfo2 = (props) => {
         )
       );
     }
+    if (record.margin_mode != null) {
+      list.push(
+        /* @__PURE__ */ jsxRuntime.jsx(
+          ui.Badge,
+          {
+            color: "neutral",
+            size: "xs",
+            children: record.margin_mode === types.MarginMode.ISOLATED ? t("marginMode.isolated") : t("marginMode.cross")
+          },
+          `margin-mode-${record.margin_mode}`
+        )
+      );
+    }
     list.push(
       /* @__PURE__ */ jsxRuntime.jsx(
         LeverageBadge2,
@@ -4657,7 +4704,7 @@ var SymbolInfo2 = (props) => {
     );
     return list;
   }, [record, t]);
-  return /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { gap: 2, height: 48, children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { gap: 2, className: "oui-py-1", children: [
     /* @__PURE__ */ jsxRuntime.jsx(
       ui.Box,
       {
@@ -4669,21 +4716,15 @@ var SymbolInfo2 = (props) => {
         )
       }
     ),
-    /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { direction: "column", itemAlign: "start", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { direction: "column", itemAlign: "start", gap: 1, children: [
       /* @__PURE__ */ jsxRuntime.jsx(
-        ui.Text.formatted,
+        PositionSymbolCell,
         {
-          formatString: "base-type",
-          className: "oui-cursor-pointer",
-          onClick: (e) => {
-            onSymbolChange?.({ symbol: record.symbol });
-            e.stopPropagation();
-            e.preventDefault();
-          },
-          children: `${record.symbol.split("_")[1]}-PERP`
+          symbol: record.symbol,
+          onSymbolChange
         }
       ),
-      /* @__PURE__ */ jsxRuntime.jsx(ui.Flex, { gap: 1, children: tags })
+      /* @__PURE__ */ jsxRuntime.jsx(ui.Flex, { gap: 1, wrap: "wrap", children: tags })
     ] })
   ] });
 };
@@ -4795,6 +4836,15 @@ var areDatesEqual = (date1, date2) => {
 };
 
 // src/components/positionHistory/positionHistory.script.tsx
+var normalizeMarginMode = (value) => {
+  if (value === 1 || value === types.MarginMode.ISOLATED) {
+    return types.MarginMode.ISOLATED;
+  }
+  if (value === 0 || value === types.MarginMode.CROSS) {
+    return types.MarginMode.CROSS;
+  }
+  return void 0;
+};
 var usePositionHistoryScript = (props) => {
   const {
     onSymbolChange,
@@ -4814,20 +4864,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 === types.MarginMode.ISOLATED ? types.MarginMode.ISOLATED : types.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
     }
@@ -5009,9 +5055,10 @@ var SymbolToken2 = (props) => {
     {
       intensity: 80,
       rule: "symbol",
-      formatString: "base-type",
+      formatString: "base",
       size: "sm",
       prefix: /* @__PURE__ */ jsxRuntime.jsx(ui.Badge, { color: isBuy ? "success" : "danger", size: "xs", children: isBuy ? t("common.buy") : t("common.sell") }),
+      suffix: /* @__PURE__ */ jsxRuntime.jsx(SymbolBadge, { symbol }),
       onClick: () => {
         props.onSymbolChange?.({ symbol });
       },
@@ -5098,8 +5145,13 @@ var PositionHistoryType = (props) => {
         )
       );
     }
+    if (record.margin_mode != null) {
+      list.push(
+        /* @__PURE__ */ jsxRuntime.jsx(ui.Badge, { color: "neutral", size: "xs", children: record.margin_mode === types.MarginMode.ISOLATED ? t("marginMode.isolated") : t("marginMode.cross") }, `margin-${record.margin_mode}`)
+      );
+    }
     return list;
-  }, [record]);
+  }, [record, t]);
   return /* @__PURE__ */ jsxRuntime.jsx(ui.Flex, { gap: 1, children: tags });
 };
 var ClosedQty = (props) => {
@@ -5314,7 +5366,7 @@ var Header = (props) => {
         ]
       }
     ),
-    /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { direction: "column", itemAlign: "end", className: "oui-flex-1", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { direction: "column", itemAlign: "end", children: [
       /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "2xs", intensity: 36, children: t("positions.history.column.netPnl") }),
       /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { gapX: 1, children: [
         /* @__PURE__ */ jsxRuntime.jsx("button", { onClick: showAlert, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text.numeral, { size: "xs", coloring: true, children: props.item.netPnL ?? "--" }) }),
@@ -5552,16 +5604,8 @@ var useLiquidationColumn = (props) => {
       {
         title: t("common.symbol"),
         dataIndex: "Symbol",
-        // width: 202,
-        render: (_, record) => /* @__PURE__ */ jsxRuntime.jsx(ui.Flex, { direction: "column", itemAlign: "start", children: record.positions_by_perp?.map((item) => /* @__PURE__ */ jsxRuntime.jsx(
-          ui.Text.formatted,
-          {
-            rule: "symbol",
-            formatString: "base-quote",
-            children: item.symbol
-          },
-          item.symbol
-        )) })
+        width: 120,
+        render: (_, record) => /* @__PURE__ */ jsxRuntime.jsx(ui.Flex, { direction: "column", itemAlign: "start", children: record.positions_by_perp?.map((item) => /* @__PURE__ */ jsxRuntime.jsx(PositionSymbolCell, { symbol: item.symbol }, item.symbol)) })
       },
       // Price (USDC)
       {
@@ -5729,9 +5773,15 @@ var Header2 = (props) => {
       ui.Text.formatted,
       {
         rule: "symbol",
-        formatString: "base-quote",
+        formatString: "base",
         size: "xs",
         intensity: 80,
+        suffix: /* @__PURE__ */ jsxRuntime.jsx(
+          SymbolBadge,
+          {
+            symbol: props.item.positions_by_perp?.[0]?.symbol || ""
+          }
+        ),
         children: props.item.positions_by_perp?.[0]?.symbol || ""
       }
     ) }) }) }),