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

package/dist/index.mjs

@@ -1,10 +1,10 @@
-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, SymbolBadge as SymbolBadge$1, 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';
 import { commifyOptional, Decimal, formatNum, getTimestamp, commify } from '@orderly.network/utils';
+import { useLocalStorage, useSymbolsInfo, useMarkPrice, usePositionStream, useSubAccountMutation, useMutation, useBadgeBySymbol, useCollateral, usePositions, useAppStore, usePrivateInfiniteQuery, useBoolean, useSessionStorage, useAccount, usePrivateQuery, useTrack, usePositionClose, useSWR, fetcher, useEventEmitter, useDebouncedCallback, useGetRwaSymbolOpenStatus, useTpslPriceChecker, useConfig, findPositionTPSLFromOrders, findTPSLFromOrder, useReferralInfo, useLeverageBySymbol, utils, useMaxLeverage } from '@orderly.network/hooks';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { useLocalStorage, useSymbolsInfo, useMarkPrice, usePositionStream, useSubAccountMutation, useMutation, useCollateral, usePositions, useAppStore, usePrivateInfiniteQuery, useBoolean, useSessionStorage, useAccount, usePrivateQuery, useTrack, usePositionClose, useSWR, fetcher, useEventEmitter, useDebouncedCallback, useGetRwaSymbolOpenStatus, useTpslPriceChecker, useConfig, findPositionTPSLFromOrders, findTPSLFromOrder, useReferralInfo, useLeverageBySymbol, utils, useMaxLeverage } from '@orderly.network/hooks';
 import { useDataTap, useOrderEntryFormErrorMsg } from '@orderly.network/react-app';
 import { account, positions } from '@orderly.network/perp';
 import { AuthGuardDataTable } from '@orderly.network/ui-connector';
@@ -14,6 +14,11 @@ import { CloseToLiqPriceIcon, TPSLSheetId, TPSLDialogId, TPSLDetailSheetId, TPSL
 import { subDays, differenceInDays } from 'date-fns';
 
 // src/index.ts
+var SymbolBadge = ({ symbol }) => {
+  const { brokerId, brokerName, brokerNameRaw } = useBadgeBySymbol(symbol);
+  const badge = brokerName ?? brokerId ?? void 0;
+  return /* @__PURE__ */ jsx(SymbolBadge$1, { badge, fullName: brokerNameRaw });
+};
 var ConfirmHeader = (props) => {
   const { hideCloseIcon = false } = props;
   return /* @__PURE__ */ jsxs("div", { className: "oui-relative oui-w-full oui-border-b oui-border-line-4 oui-pb-3", children: [
@@ -170,9 +175,10 @@ var LimitConfirmDialog = (props) => {
         Text.formatted,
         {
           rule: "symbol",
-          formatString: "base-type",
+          formatString: "base",
           size: "base",
           showIcon: true,
+          suffix: /* @__PURE__ */ jsx(SymbolBadge, { symbol: order.symbol }),
           children: order.symbol
         }
       ),
@@ -320,8 +326,10 @@ var FundingFeeHistoryUI = ({ total, symbol, start_t, end_t }) => {
               Text.formatted,
               {
                 rule: "symbol",
+                formatString: "base",
                 className: "oui-font-semibold",
                 intensity: 98,
+                suffix: /* @__PURE__ */ jsx(SymbolBadge, { symbol }),
                 children: symbol
               }
             )
@@ -404,7 +412,7 @@ var HistoryDataListView = ({ isLoading, data, loadMore }) => {
         dataIndex: "created_time",
         width: 120,
         render: (value) => {
-          return /* @__PURE__ */ jsx(Text.formatted, { rule: "date", children: value });
+          return /* @__PURE__ */ jsx(Text.formatted, { rule: "date", suffix: /* @__PURE__ */ jsx(SymbolBadge, { symbol: value }), children: value });
         }
       },
       {
@@ -1116,9 +1124,10 @@ var ReversePosition = (props) => {
                 size: "base",
                 weight: "semibold",
                 rule: "symbol",
-                formatString: "base-type",
+                formatString: "base",
                 intensity: 98,
                 showIcon: true,
+                suffix: /* @__PURE__ */ jsx(SymbolBadge, { symbol }),
                 children: symbol
               }
             ),
@@ -1587,16 +1596,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")
+        }
+      ) })
     }
   );
 };
@@ -1633,17 +1645,7 @@ var usePositionMargin = (symbol, isAdd, isolatedMargin, finalMargin) => {
     if (!currentPosition) return null;
     return new Decimal(currentPosition.notional);
   }, [currentPosition]);
-  const unSettledPnl = useMemo(() => {
-    if (!currentPosition || !notional || !fundingRates) return null;
-    const fundingRate = fundingRates[currentPosition.symbol];
-    return notional.sub(new Decimal(currentPosition.cost_position)).sub(
-      new Decimal(currentPosition.position_qty).mul(
-        new Decimal(fundingRate.sum_unitary_funding ?? 0).sub(
-          new Decimal(currentPosition.last_sum_unitary_funding)
-        )
-      )
-    );
-  }, [notional, currentPosition, fundingRates]);
+  const unSettledPnl = currentPosition?.unsettled_pnl;
   const imr = useMemo(() => {
     if (!currentPosition || !symbolsInfo?.[symbol] || !notional) {
       return null;
@@ -1671,12 +1673,12 @@ var usePositionMargin = (symbol, isAdd, isolatedMargin, finalMargin) => {
     }
     const positionNotional = notional;
     const imrValue = imr;
-    const unsettledPnlValue = unSettledPnl ?? new Decimal(0);
+    const unsettledPnlValue = unSettledPnl ?? 0;
     return account.maxReduce({
       isolatedPositionMargin: isolatedMargin,
       positionNotional: positionNotional.toNumber(),
       imr: imrValue.toNumber(),
-      positionUnsettledPnL: unsettledPnlValue.toNumber()
+      positionUnsettledPnL: unsettledPnlValue
     });
   }, [
     total_cross_unsettled_pnl,
@@ -1693,14 +1695,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 = positions.MMR({
+    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 Decimal(item.position_qty).mul(item.mark_price).abs().toNumber();
@@ -1718,18 +1720,19 @@ var usePositionMargin = (symbol, isAdd, isolatedMargin, finalMargin) => {
         mmr: itemMMR
       };
     }) ?? [];
-    const totalCollateral = new Decimal(finalMargin).add(currentPosition.unsettled_pnl ?? 0).toNumber();
-    const liqPrice = positions.liqPrice({
-      markPrice,
-      symbol,
-      totalCollateral,
-      positionQty: currentPosition.position_qty,
-      positions: otherPositions,
-      MMR: currentPositionMMR,
+    new Decimal(finalMargin).add(currentPosition.unsettled_pnl ?? 0).toNumber();
+    const sumUnitaryFunding = fundingRates?.[symbol]?.sum_unitary_funding ?? 0;
+    const liqPrice = 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;
   }, [
@@ -1875,7 +1878,7 @@ var useAdjustMarginScript = (props) => {
     sliderValue,
     maxAmount: maxAmount ?? 0,
     currentMargin,
-    liquidationPrice: liquidationPrice ?? 0,
+    liquidationPrice,
     effectiveLeverage: effectiveLeverage ?? 0,
     isLoading,
     isAdd,
@@ -2115,10 +2118,11 @@ var SymbolInfo = ({ symbol }) => {
       Text.formatted,
       {
         rule: "symbol",
-        formatString: "base-type",
+        formatString: "base",
         size: "base",
         weight: "semibold",
         intensity: 98,
+        suffix: /* @__PURE__ */ jsx(SymbolBadge, { symbol }),
         children: symbol
       }
     )
@@ -2297,7 +2301,16 @@ var MobileClosePosition = (props) => {
   const orderType = isMarketClose ? t("orderEntry.orderType.market") : t("orderEntry.orderType.limit");
   const orderSide = isBuy ? /* @__PURE__ */ jsx(Badge, { color: "success", size: "xs", children: t("common.buy") }) : /* @__PURE__ */ jsx(Badge, { color: "danger", size: "xs", children: t("common.sell") });
   const header = /* @__PURE__ */ jsxs(Flex, { width: "100%", justify: "between", children: [
-    /* @__PURE__ */ jsx(Text.formatted, { rule: "symbol", showIcon: true, children: position.symbol }),
+    /* @__PURE__ */ jsx(
+      Text.formatted,
+      {
+        rule: "symbol",
+        formatString: "base",
+        showIcon: true,
+        suffix: /* @__PURE__ */ jsx(SymbolBadge, { symbol: position.symbol }),
+        children: position.symbol
+      }
+    ),
     /* @__PURE__ */ jsxs(Flex, { gap: 1, children: [
       /* @__PURE__ */ jsx(Badge, { color: "neutral", size: "xs", children: orderType }),
       orderSide
@@ -3032,6 +3045,25 @@ var PartialTPSL = (props) => {
     ] })
   ] });
 };
+var PositionSymbolCell = (props) => {
+  const { symbol, onSymbolChange, className, formatString, ...rest } = props;
+  const { brokerId, brokerName, brokerNameRaw } = useBadgeBySymbol(symbol);
+  return /* @__PURE__ */ jsx(
+    Text.symbolBadge,
+    {
+      ...rest,
+      className: 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__ */ jsx(
@@ -3075,6 +3107,7 @@ var useShareButtonScript = (props) => {
   const { position, sharePnLConfig, iconSize } = props;
   const { getFirstRefCode } = useReferralInfo();
   const symbolsInfo = useSymbolsInfo();
+  const { brokerNameRaw } = useBadgeBySymbol(position.symbol);
   const refCode = useMemo(() => {
     return getFirstRefCode()?.code;
   }, [getFirstRefCode]);
@@ -3153,7 +3186,8 @@ var useShareButtonScript = (props) => {
           marginMode: position.margin_mode
         },
         refCode,
-        ...sharePnLConfig
+        ...sharePnLConfig,
+        brokerName: sharePnLConfig?.brokerName ?? brokerNameRaw
       }
     });
   };
@@ -3476,44 +3510,38 @@ var useColumn = (config) => {
         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,
             {
               width: 4,
-              height: 20,
+              height: 24,
               className: 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__ */ 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,
+                PositionSymbolCell,
                 {
                   symbol: value,
-                  leverage: record.leverage,
-                  modalId: SymbolLeverageDialogId,
-                  marginMode: record.margin_mode
+                  onSymbolChange
                 }
               ),
               /* @__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
+              }
+            ) })
           ] })
         ] })
       },
@@ -3785,31 +3813,37 @@ 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",
+          size: "2xs",
+          showIcon: true,
+          onClick: () => {
+            props.onSymbolChange?.({ symbol: item.symbol });
+          },
+          suffix: /* @__PURE__ */ jsx(SymbolBadge, { 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;
@@ -4448,7 +4482,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 || "");
         },
@@ -4639,6 +4673,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,
@@ -4651,7 +4698,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,
       {
@@ -4663,21 +4710,15 @@ 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,
+        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__ */ jsx(Flex, { gap: 1, children: tags })
+      /* @__PURE__ */ jsx(Flex, { gap: 1, wrap: "wrap", children: tags })
     ] })
   ] });
 };
@@ -4789,6 +4830,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,
@@ -4808,20 +4858,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
     }
@@ -5003,9 +5049,10 @@ var SymbolToken2 = (props) => {
     {
       intensity: 80,
       rule: "symbol",
-      formatString: "base-type",
+      formatString: "base",
       size: "sm",
       prefix: /* @__PURE__ */ jsx(Badge, { color: isBuy ? "success" : "danger", size: "xs", children: isBuy ? t("common.buy") : t("common.sell") }),
+      suffix: /* @__PURE__ */ jsx(SymbolBadge, { symbol }),
       onClick: () => {
         props.onSymbolChange?.({ symbol });
       },
@@ -5092,8 +5139,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) => {
@@ -5308,7 +5360,7 @@ var Header = (props) => {
         ]
       }
     ),
-    /* @__PURE__ */ jsxs(Flex, { direction: "column", itemAlign: "end", className: "oui-flex-1", children: [
+    /* @__PURE__ */ jsxs(Flex, { direction: "column", itemAlign: "end", children: [
       /* @__PURE__ */ jsx(Text, { size: "2xs", intensity: 36, children: t("positions.history.column.netPnl") }),
       /* @__PURE__ */ jsxs(Flex, { gapX: 1, children: [
         /* @__PURE__ */ jsx("button", { onClick: showAlert, children: /* @__PURE__ */ jsx(Text.numeral, { size: "xs", coloring: true, children: props.item.netPnL ?? "--" }) }),
@@ -5546,16 +5598,8 @@ var useLiquidationColumn = (props) => {
       {
         title: t("common.symbol"),
         dataIndex: "Symbol",
-        // width: 202,
-        render: (_, record) => /* @__PURE__ */ jsx(Flex, { direction: "column", itemAlign: "start", children: record.positions_by_perp?.map((item) => /* @__PURE__ */ jsx(
-          Text.formatted,
-          {
-            rule: "symbol",
-            formatString: "base-quote",
-            children: item.symbol
-          },
-          item.symbol
-        )) })
+        width: 120,
+        render: (_, record) => /* @__PURE__ */ jsx(Flex, { direction: "column", itemAlign: "start", children: record.positions_by_perp?.map((item) => /* @__PURE__ */ jsx(PositionSymbolCell, { symbol: item.symbol }, item.symbol)) })
       },
       // Price (USDC)
       {
@@ -5723,9 +5767,15 @@ var Header2 = (props) => {
       Text.formatted,
       {
         rule: "symbol",
-        formatString: "base-quote",
+        formatString: "base",
         size: "xs",
         intensity: 80,
+        suffix: /* @__PURE__ */ jsx(
+          SymbolBadge,
+          {
+            symbol: props.item.positions_by_perp?.[0]?.symbol || ""
+          }
+        ),
         children: props.item.positions_by_perp?.[0]?.symbol || ""
       }
     ) }) }) }),