@kodiak-finance/orderly-ui-positions 2.9.2 → 2.9.3

package/dist/index.js

@@ -7,9 +7,8 @@ var orderlyTypes = require('@kodiak-finance/orderly-types');
 var orderlyUtils = require('@kodiak-finance/orderly-utils');
 var orderlyHooks = require('@kodiak-finance/orderly-hooks');
 var jsxRuntime = require('react/jsx-runtime');
-var immer = require('immer');
-var orderlyPerp = require('@kodiak-finance/orderly-perp');
 var orderlyReactApp = require('@kodiak-finance/orderly-react-app');
+var orderlyPerp = require('@kodiak-finance/orderly-perp');
 var orderlyUiConnector = require('@kodiak-finance/orderly-ui-connector');
 var orderlyUiLeverage = require('@kodiak-finance/orderly-ui-leverage');
 var orderlyUiShare = require('@kodiak-finance/orderly-ui-share');
@@ -34,7 +33,7 @@ var ConfirmHeader = (props) => {
       "button",
       {
         onClick: props.onClose,
-        className: "oui-absolute oui-right-0 oui-top-0 oui-p-2 oui-text-base-contrast-54 hover:oui-text-base-contrast-80",
+        className: "oui-absolute oui-end-0 oui-top-0 oui-p-2 oui-text-base-contrast-54 hover:oui-text-base-contrast-80",
         children: /* @__PURE__ */ jsxRuntime.jsx(orderlyUi.CloseIcon, { size: 18, color: "white" })
       }
     )
@@ -603,6 +602,102 @@ var FundingFeeButton = ({ fee, symbol, start_t, end_t }) => {
     )
   ] });
 };
+var calculatePositions = (positions2, symbolsInfo, accountInfo, tpslOrders) => {
+  return positions2.map((item) => {
+    const info = symbolsInfo[item.symbol];
+    const notional = orderlyPerp.positions.notional(item.position_qty, item.mark_price);
+    const account3 = accountInfo.find(
+      (acc) => acc.account_id === item.account_id
+    );
+    const baseMMR = info?.("base_mmr");
+    const baseIMR = info?.("base_imr");
+    if (!baseMMR || !baseIMR) {
+      return item;
+    }
+    const MMR = orderlyPerp.positions.MMR({
+      baseMMR,
+      baseIMR,
+      IMRFactor: account3?.imr_factor[item.symbol] ?? 0,
+      positionNotional: notional,
+      IMR_factor_power: 4 / 5
+    });
+    const mm = orderlyPerp.positions.maintenanceMargin({
+      positionQty: item.position_qty,
+      markPrice: item.mark_price,
+      MMR
+    });
+    const unrealPnl = orderlyPerp.positions.unrealizedPnL({
+      qty: item.position_qty,
+      openPrice: item?.average_open_price,
+      markPrice: item.mark_price
+    });
+    const maxLeverage = item.leverage || 1;
+    const imr = orderlyPerp.account.IMR({
+      maxLeverage,
+      baseIMR,
+      IMR_Factor: account3?.imr_factor[item.symbol] ?? 0,
+      positionNotional: notional,
+      ordersNotional: 0,
+      IMR_factor_power: 4 / 5
+    });
+    const unrealPnlROI = orderlyPerp.positions.unrealizedPnLROI({
+      positionQty: item.position_qty,
+      openPrice: item.average_open_price,
+      IMR: imr,
+      unrealizedPnL: unrealPnl
+    });
+    let unrealPnl_index = 0;
+    let unrealPnlROI_index = 0;
+    if (item.index_price) {
+      unrealPnl_index = orderlyPerp.positions.unrealizedPnL({
+        qty: item.position_qty,
+        openPrice: item?.average_open_price,
+        markPrice: item.index_price
+      });
+      unrealPnlROI_index = orderlyPerp.positions.unrealizedPnLROI({
+        positionQty: item.position_qty,
+        openPrice: item.average_open_price,
+        IMR: imr,
+        unrealizedPnL: unrealPnl_index
+      });
+    }
+    const filteredTPSLOrders = tpslOrders.filter(
+      (tpslOrder) => tpslOrder.account_id === item.account_id
+    );
+    const tpsl = formatTPSL(filteredTPSLOrders, item.symbol, item.margin_mode);
+    return {
+      ...item,
+      ...tpsl,
+      mmr: MMR,
+      mm,
+      notional,
+      unrealized_pnl: unrealPnl,
+      unrealized_pnl_ROI: unrealPnlROI,
+      unrealized_pnl_ROI_index: unrealPnlROI_index
+    };
+  });
+};
+function formatTPSL(tpslOrders, symbol, marginMode) {
+  if (Array.isArray(tpslOrders) && tpslOrders.length) {
+    const { fullPositionOrder, partialPositionOrders } = orderlyHooks.findPositionTPSLFromOrders(tpslOrders, symbol, marginMode);
+    const full_tp_sl = fullPositionOrder ? orderlyHooks.findTPSLFromOrder(fullPositionOrder) : void 0;
+    const partialPossitionOrder = partialPositionOrders && partialPositionOrders.length ? partialPositionOrders[0] : void 0;
+    const partial_tp_sl = partialPossitionOrder ? orderlyHooks.findTPSLFromOrder(partialPossitionOrder) : void 0;
+    return {
+      full_tp_sl: {
+        tp_trigger_price: full_tp_sl?.tp_trigger_price,
+        sl_trigger_price: full_tp_sl?.sl_trigger_price,
+        algo_order: fullPositionOrder
+      },
+      partial_tp_sl: {
+        order_num: partialPositionOrders?.length ?? 0,
+        tp_trigger_price: partial_tp_sl?.tp_trigger_price,
+        sl_trigger_price: partial_tp_sl?.sl_trigger_price,
+        algo_order: partialPossitionOrder
+      }
+    };
+  }
+}
 var signatureMiddleware = (account3, accountId) => {
   const apiBaseUrl = orderlyHooks.useConfig("apiBaseUrl");
   return (useSWRNext) => {
@@ -652,6 +747,48 @@ var useSubAccountQuery = (query, options) => {
     }
   );
 };
+function useSubAccountTPSL(subAccountIds) {
+  const ee = orderlyHooks.useEventEmitter();
+  const { data: algoOrdersResponse, mutate: mutateTPSLOrders } = useSubAccountQuery(
+    `/v1/algo/orders?size=100&page=1&status=${orderlyTypes.OrderStatus.INCOMPLETE}`,
+    {
+      accountId: subAccountIds,
+      formatter: (data) => data,
+      revalidateOnFocus: false
+    }
+  );
+  const tpslOrders = React3.useMemo(() => {
+    if (!Array.isArray(algoOrdersResponse)) {
+      return [];
+    }
+    const algoOrders = algoOrdersResponse?.map(
+      (item, index) => item.rows.map((order) => ({
+        ...order,
+        account_id: subAccountIds[index]
+      }))
+    )?.flat();
+    return algoOrders?.filter(
+      (order) => [orderlyTypes.AlgoOrderRootType.POSITIONAL_TP_SL, orderlyTypes.AlgoOrderRootType.TP_SL].includes(
+        order.algo_type
+      )
+    );
+  }, [algoOrdersResponse, subAccountIds]);
+  const refresh = orderlyHooks.useDebouncedCallback(() => {
+    mutateTPSLOrders();
+  }, 200);
+  React3.useEffect(() => {
+    const handler = (position) => {
+      if (position.account_id) {
+        refresh();
+      }
+    };
+    ee.on("tpsl:updateOrder", handler);
+    return () => {
+      ee.off("tpsl:updateOrder", handler);
+    };
+  }, [ee]);
+  return { tpslOrders, mutateTPSLOrders };
+}
 
 // src/components/positions/combinePositions.script.ts
 var useCombinePositionsScript = (props) => {
@@ -665,12 +802,10 @@ var useCombinePositionsScript = (props) => {
     selectedAccount
   } = props;
   const { pagination, setPage } = orderlyUi.usePagination({ pageSize: 50 });
-  React3.useEffect(() => {
-    setPage(1);
-  }, [symbol]);
   const symbolsInfo = orderlyHooks.useSymbolsInfo();
   const { state } = orderlyHooks.useAccount();
-  const [oldPositions, , { isLoading }] = orderlyHooks.usePositionStream(symbol, {
+  const { t } = orderlyI18n.useTranslation();
+  const [mainAccountPositions, , { isLoading }] = orderlyHooks.usePositionStream(symbol, {
     calcMode,
     includedPendingOrder
   });
@@ -679,90 +814,37 @@ var useCombinePositionsScript = (props) => {
     isLoading: isPositionLoading,
     mutate: mutatePositions
   } = orderlyHooks.usePrivateQuery("/v1/client/aggregate/positions", {
-    // formatter: (data) => data,
     errorRetryCount: 3
   });
+  const { allAccountIds, subAccountIds } = React3.useMemo(() => {
+    const uniqueIds = new Set(
+      newPositions.filter((item) => item.account_id).map((item) => item.account_id).filter(Boolean)
+    );
+    const allAccountIds2 = Array.from(uniqueIds);
+    const subAccountIds2 = allAccountIds2.filter(
+      (item) => item !== state.mainAccountId
+    );
+    return { allAccountIds: allAccountIds2, subAccountIds: subAccountIds2 };
+  }, [newPositions, state.mainAccountId]);
   const { data: accountInfo = [], isLoading: isAccountInfoLoading } = useSubAccountQuery("/v1/client/info", {
-    accountId: newPositions.map((item) => item.account_id),
+    accountId: allAccountIds,
     revalidateOnFocus: false
   });
-  const processPositions = immer.produce(
-    newPositions.filter((acc) => acc.account_id !== state.mainAccountId),
-    (draft) => {
-      for (const item of draft) {
-        const info = symbolsInfo[item.symbol];
-        const notional = orderlyPerp.positions.notional(item.position_qty, item.mark_price);
-        const account3 = accountInfo.find(
-          (acc) => acc.account_id === item.account_id
-        );
-        const baseMMR = info?.("base_mmr");
-        const baseIMR = info?.("base_imr");
-        if (!baseMMR || !baseIMR) {
-          continue;
-        }
-        const MMR = orderlyPerp.positions.MMR({
-          baseMMR,
-          baseIMR,
-          IMRFactor: account3?.imr_factor[item.symbol] ?? 0,
-          positionNotional: notional,
-          IMR_factor_power: 4 / 5
-        });
-        const mm = orderlyPerp.positions.maintenanceMargin({
-          positionQty: item.position_qty,
-          markPrice: item.mark_price,
-          MMR
-        });
-        const unrealPnl = orderlyPerp.positions.unrealizedPnL({
-          qty: item.position_qty,
-          openPrice: item?.average_open_price,
-          // markPrice: unRealizedPrice,
-          markPrice: item.mark_price
-        });
-        const maxLeverage = item.leverage || 1;
-        const imr = orderlyPerp.account.IMR({
-          maxLeverage,
-          baseIMR,
-          IMR_Factor: account3?.imr_factor[item.symbol] ?? 0,
-          positionNotional: notional,
-          ordersNotional: 0,
-          IMR_factor_power: 4 / 5
-        });
-        const unrealPnlROI = orderlyPerp.positions.unrealizedPnLROI({
-          positionQty: item.position_qty,
-          openPrice: item.average_open_price,
-          IMR: imr,
-          unrealizedPnL: unrealPnl
-        });
-        let unrealPnl_index = 0;
-        let unrealPnlROI_index = 0;
-        if (item.index_price) {
-          unrealPnl_index = orderlyPerp.positions.unrealizedPnL({
-            qty: item.position_qty,
-            openPrice: item?.average_open_price,
-            // markPrice: unRealizedPrice,
-            markPrice: item.index_price
-          });
-          unrealPnlROI_index = orderlyPerp.positions.unrealizedPnLROI({
-            positionQty: item.position_qty,
-            openPrice: item.average_open_price,
-            IMR: imr,
-            unrealizedPnL: unrealPnl_index
-          });
-        }
-        item.mmr = MMR;
-        item.mm = mm;
-        item.notional = notional;
-        item.unrealized_pnl = unrealPnl;
-        item.unrealized_pnl_ROI = unrealPnlROI;
-        item.unrealized_pnl_ROI_index = unrealPnlROI_index;
-      }
-    }
-  );
-  const dataSource = orderlyReactApp.useDataTap(
-    [...oldPositions?.rows, ...processPositions].filter(
-      (acc) => acc.position_qty !== 0
-    )
-  ) ?? [];
+  const { tpslOrders, mutateTPSLOrders } = useSubAccountTPSL(subAccountIds);
+  const subAccountPositions = React3.useMemo(() => {
+    return calculatePositions(
+      newPositions.filter((item) => item.account_id !== state.mainAccountId),
+      symbolsInfo,
+      accountInfo,
+      tpslOrders
+    );
+  }, [newPositions, symbolsInfo, accountInfo, state.mainAccountId, tpslOrders]);
+  const allPositions = React3.useMemo(() => {
+    return [...mainAccountPositions?.rows, ...subAccountPositions].filter(
+      (item) => item.position_qty !== 0
+    );
+  }, [mainAccountPositions, subAccountPositions]);
+  const dataSource = orderlyReactApp.useDataTap(allPositions) ?? [];
   const filtered = React3.useMemo(() => {
     if (!selectedAccount || selectedAccount === "All accounts" /* ALL */) {
       return dataSource;
@@ -778,35 +860,41 @@ var useCombinePositionsScript = (props) => {
   const groupDataSource = React3.useMemo(() => {
     return groupDataByAccount(filtered, {
       mainAccountId: state.mainAccountId,
+      mainAccountLabel: t("common.mainAccount"),
       subAccounts: state.subAccounts
     });
-  }, [filtered, state.mainAccountId, state.subAccounts]);
-  const mergedLoading = React3.useMemo(() => {
-    return isLoading || isPositionLoading || isAccountInfoLoading;
-  }, [isLoading, isPositionLoading, isAccountInfoLoading]);
+  }, [filtered, state.mainAccountId, state.subAccounts, t]);
+  const loading = isLoading || isPositionLoading || isAccountInfoLoading;
+  React3.useEffect(() => {
+    setPage(1);
+  }, [symbol]);
+  const mutateList = React3.useCallback(() => {
+    mutatePositions();
+    mutateTPSLOrders();
+  }, []);
   return {
     tableData: groupDataSource,
-    isLoading: mergedLoading,
+    isLoading: loading,
     pnlNotionalDecimalPrecision,
     sharePnLConfig,
     symbol,
     onSymbolChange,
     pagination,
-    mutatePositions
+    mutatePositions: mutateList
   };
 };
 var groupDataByAccount = (data, options) => {
-  const { mainAccountId = "", subAccounts = [] } = options;
+  const { mainAccountId = "", mainAccountLabel, subAccounts = [] } = options;
   const map = /* @__PURE__ */ new Map();
   for (const item of data) {
     const accountId = item.account_id || mainAccountId;
-    const findSubAccount = subAccounts.find((acc) => acc.id === accountId);
+    const findSubAccount = subAccounts.find((item2) => item2.id === accountId);
     if (map.has(accountId)) {
       map.get(accountId)?.children?.push(item);
     } else {
       map.set(accountId, {
-        id: accountId,
-        description: accountId === mainAccountId ? orderlyI18n.i18n.t("common.mainAccount") : findSubAccount?.description || orderlyUi.formatAddress(findSubAccount?.id || ""),
+        account_id: accountId,
+        description: accountId === mainAccountId ? mainAccountLabel : findSubAccount?.description || orderlyUi.formatAddress(findSubAccount?.id || ""),
         children: [item]
       });
     }
@@ -1390,7 +1478,7 @@ var ReversePositionWidget = (props) => {
       open: visible,
       onOpenChange,
       size: "sm",
-      title: orderlyI18n.i18n.t("positions.reverse.title"),
+      title: t("positions.reverse.title"),
       classNames: {
         content: "oui-border oui-border-line-6"
       },
@@ -1538,29 +1626,29 @@ var usePositionMargin = (symbol, isAdd, isolatedMargin, finalMargin) => {
       dp: 2
     }
   );
-  const positions3 = orderlyHooks.usePositions();
+  const positions2 = orderlyHooks.usePositions();
   const total_cross_unsettled_pnl = React3.useMemo(() => {
-    return positions3?.filter((item) => (item.margin_mode ?? "CROSS") === "CROSS").reduce((acc, item) => acc.add(item.unsettled_pnl), new orderlyUtils.Decimal(0));
-  }, [positions3]);
+    return positions2?.filter((item) => (item.margin_mode ?? "CROSS") === "CROSS").reduce((acc, item) => acc.add(item.unsettled_pnl), new orderlyUtils.Decimal(0));
+  }, [positions2]);
   const fundingRates = orderlyHooks.useAppStore((state) => state.fundingRates);
   const symbolsInfo = orderlyHooks.useAppStore((state) => state.symbolsInfo);
   const accountInfo = orderlyHooks.useAppStore((state) => state.accountInfo);
   const { data: markPrice } = orderlyHooks.useMarkPrice(symbol);
   const totalUnsettlementPnl = React3.useMemo(() => {
-    if (!positions3?.length) {
+    if (!positions2?.length) {
       return null;
     }
-    return positions3.reduce((acc, item) => {
+    return positions2.reduce((acc, item) => {
       const itemAny = item;
       const positionUnsettlementPnl = itemAny["unsettlement_pnl"] ?? item.unsettled_pnl ?? 0;
       return acc.add(positionUnsettlementPnl);
     }, new orderlyUtils.Decimal(0));
-  }, [positions3]);
+  }, [positions2]);
   const currentPosition = React3.useMemo(() => {
-    return positions3?.find(
+    return positions2?.find(
       (item) => item.symbol === symbol && item.margin_mode === orderlyTypes.MarginMode.ISOLATED
     );
-  }, [positions3]);
+  }, [positions2]);
   const notional = React3.useMemo(() => {
     if (!currentPosition) return null;
     return new orderlyUtils.Decimal(currentPosition.notional);
@@ -1622,7 +1710,7 @@ var usePositionMargin = (symbol, isAdd, isolatedMargin, finalMargin) => {
       positionNotional: currentPositionNotional,
       IMR_factor_power: 4 / 5
     });
-    positions3?.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 orderlyUtils.Decimal(item.position_qty).mul(item.mark_price).abs().toNumber();
@@ -1662,7 +1750,7 @@ var usePositionMargin = (symbol, isAdd, isolatedMargin, finalMargin) => {
     symbol,
     accountInfo,
     notional,
-    positions3,
+    positions2,
     finalMargin,
     markPrice
   ]);
@@ -1987,8 +2075,8 @@ var Quantity = ({
           input: "oui-text-sm oui-font-semibold oui-text-base-contrast-98",
           // override default additional padding so value can sit closer to suffix
           additional: "oui-px-0",
-          prefix: "oui-pl-3 oui-pr-2 oui-text-sm oui-text-base-contrast-54",
-          suffix: "oui-pl-2 oui-pr-3 oui-text-sm oui-text-base-contrast-54"
+          prefix: "oui-ps-3 oui-pe-2 oui-text-sm oui-text-base-contrast-54",
+          suffix: "oui-ps-2 oui-pe-3 oui-text-sm oui-text-base-contrast-54"
         }
       }
     ),
@@ -3165,14 +3253,14 @@ var TriggerPriceItem = (props) => {
   ).toNumber();
   const type = orderType === orderlyTypes.AlgoOrderType.TAKE_PROFIT ? "TP" : "SL";
   return /* @__PURE__ */ jsxRuntime.jsxs(orderlyUi.Flex, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx(orderlyUi.Text, { intensity: 54, className: "oui-mr-1", children: `${type} PnL:` }),
+    /* @__PURE__ */ jsxRuntime.jsx(orderlyUi.Text, { intensity: 54, className: "oui-me-1", children: `${type} PnL:` }),
     /* @__PURE__ */ jsxRuntime.jsx(
       orderlyUi.Text.formatted,
       {
         rule: "price",
         className: pnl === 0 ? "oui-text-base-contrast-36" : pnl > 0 ? "oui-text-trade-profit oui-gap-0" : "oui-text-trade-loss oui-gap-0",
         prefix: /* @__PURE__ */ jsxRuntime.jsx(orderlyUi.Text, { children: pnl === 0 ? "" : pnl > 0 ? "+" : "-" }),
-        suffix: /* @__PURE__ */ jsxRuntime.jsx(orderlyUi.Text, { intensity: 36, className: "oui-ml-1", children: "USDC" }),
+        suffix: /* @__PURE__ */ jsxRuntime.jsx(orderlyUi.Text, { intensity: 36, className: "oui-ms-1", children: "USDC" }),
         children: `${Math.abs(pnl)}`
       }
     )
@@ -3429,7 +3517,7 @@ var useColumn = (config) => {
       {
         title: t("common.symbol"),
         dataIndex: "symbol",
-        fixed: "left",
+        fixed: "start",
         width: 200,
         onSort: (r1, r2) => {
           return r1.symbol?.localeCompare(r2.symbol || "");
@@ -3477,7 +3565,7 @@ var useColumn = (config) => {
           return a.position_qty - b.position_qty;
         },
         width: 120,
-        className: "oui-pl-6",
+        className: "oui-ps-6",
         // rule: "price",
         // numeralProps: {
         //   coloring: true,
@@ -3704,14 +3792,14 @@ var useColumn = (config) => {
       //   title: t("common.qty"),
       //   dataIndex: "close_qty",
       //   width: 100,
-      //   fixed: "right",
+      //   fixed: "end",
       //   render: renderQuantityInput,
       // },
       // {
       //   title: t("common.price"),
       //   dataIndex: "close_price",
       //   width: 100,
-      //   fixed: "right",
+      //   fixed: "end",
       //   render: renderPriceInput,
       //   // render: (value: string) => <PriceInput />,
       // },
@@ -3720,7 +3808,7 @@ var useColumn = (config) => {
         dataIndex: "close_position",
         align: "right",
         width: positionReverse ? 100 : 70,
-        fixed: "right",
+        fixed: "end",
         render(_, record) {
           return /* @__PURE__ */ jsxRuntime.jsxs(orderlyUi.Flex, { gapX: 2, justify: "end", children: [
             /* @__PURE__ */ jsxRuntime.jsx(ClosePositionWidget, {}),
@@ -3729,7 +3817,13 @@ var useColumn = (config) => {
         }
       }
     ],
-    [pnlNotionalDecimalPrecision, sharePnLConfig, t, positionReverse]
+    [
+      onSymbolChange,
+      pnlNotionalDecimalPrecision,
+      sharePnLConfig,
+      t,
+      positionReverse
+    ]
   );
   return column;
 };
@@ -3772,9 +3866,9 @@ var SymbolToken = (props) => {
 var UnrealPnL = (props) => {
   const { item } = props;
   const { t } = orderlyI18n.useTranslation();
-  const unrealPnlLabel = /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "oui-text-right", children: [
+  const unrealPnlLabel = /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "oui-text-end", children: [
     /* @__PURE__ */ jsxRuntime.jsx(orderlyUi.Text, { intensity: 36, className: "oui-underline oui-decoration-dotted", children: t("common.unrealizedPnl") }),
-    /* @__PURE__ */ jsxRuntime.jsx(orderlyUi.Text, { intensity: 20, className: "oui-ml-0.5", children: "(USDC)" })
+    /* @__PURE__ */ jsxRuntime.jsx(orderlyUi.Text, { intensity: 20, className: "oui-ms-0.5", children: "(USDC)" })
   ] });
   return /* @__PURE__ */ jsxRuntime.jsxs(orderlyUi.Flex, { gap: 3, children: [
     /* @__PURE__ */ jsxRuntime.jsxs(orderlyUi.Flex, { direction: "column", className: "oui-text-2xs", itemAlign: "end", children: [
@@ -3801,7 +3895,7 @@ var UnrealPnL = (props) => {
               prefix: "(",
               suffix: ")",
               className: orderlyUi.cn(
-                "oui-ml-1",
+                "oui-ms-1",
                 item.unrealized_pnl_ROI > 0 ? "oui-text-success-darken" : "oui-text-danger-darken"
               ),
               children: item.unrealized_pnl_ROI
@@ -4230,7 +4324,7 @@ var PositionsRowProvider = (props) => {
       }
       return false;
     });
-  }, [submit]);
+  }, [mutatePositions, quantity, submit, symbol, symbolInfo, t]);
   const memoizedValue = React3.useMemo(() => {
     return {
       quantity,
@@ -4477,7 +4571,7 @@ var usePositionHistoryColumn = (props) => {
       {
         title: t("common.symbol"),
         dataIndex: "symbol",
-        fixed: "left",
+        fixed: "start",
         width: 250,
         onSort: (r1, r2) => {
           return r1.symbol?.localeCompare(r2.symbol || "");
@@ -4593,7 +4687,7 @@ var usePositionHistoryColumn = (props) => {
         render: (_, record) => /* @__PURE__ */ jsxRuntime.jsx(orderlyUi.Text.formatted, { rule: "date", formatString: "yyyy-MM-dd HH:mm:ss", children: record.last_update_time })
       }
     ],
-    [pnlNotionalDecimalPrecision, t]
+    [onSymbolChange, pnlNotionalDecimalPrecision, props.sharePnLConfig, t]
   );
   return column;
 };
@@ -5025,7 +5119,7 @@ var useFilter = () => {
       return [sideFilter, statusFilter];
     }
     return [sideFilter, statusFilter, dateRangeFilter];
-  }, [side, status, dateRange]);
+  }, [dateRange, isMobile, side, status, t]);
   return {
     filterItems,
     onFilter,
@@ -6020,7 +6114,7 @@ var Liquidation = (props) => {
   ] });
 };
 var TooltipHeaderCell = (props) => {
-  return /* @__PURE__ */ jsxRuntime.jsx("th", { className: "oui-h-10 oui-border-b oui-border-line oui-text-left oui-text-base-contrast-36", children: /* @__PURE__ */ jsxRuntime.jsx(
+  return /* @__PURE__ */ jsxRuntime.jsx("th", { className: "oui-h-10 oui-border-b oui-border-line oui-text-start oui-text-base-contrast-36", children: /* @__PURE__ */ jsxRuntime.jsx(
     orderlyUi.Tooltip,
     {
       content: props.tooltip,
@@ -6347,15 +6441,15 @@ var CloseType = /* @__PURE__ */ ((CloseType2) => {
   CloseType2["LOSS"] = "LOSS";
   return CloseType2;
 })(CloseType || {});
-function getPositionsByCloseType(positions3, closeType) {
-  if (closeType === "ALL" /* ALL */) return positions3;
+function getPositionsByCloseType(positions2, closeType) {
+  if (closeType === "ALL" /* ALL */) return positions2;
   if (closeType === "PROFIT" /* PROFIT */) {
-    return positions3.filter((p) => (p.unrealized_pnl ?? 0) > 0);
+    return positions2.filter((p) => (p.unrealized_pnl ?? 0) > 0);
   }
   if (closeType === "LOSS" /* LOSS */) {
-    return positions3.filter((p) => (p.unrealized_pnl ?? 0) < 0);
+    return positions2.filter((p) => (p.unrealized_pnl ?? 0) < 0);
   }
-  return positions3;
+  return positions2;
 }
 var useCloseAllPositionsScript = (options) => {
   const { symbol, onSuccess } = options || {};
@@ -6376,7 +6470,7 @@ var useCloseAllPositionsScript = (options) => {
     "POST"
   );
   const buildOrdersFromPositions = React3.useCallback(
-    (positions3) => positions3.map((position) => {
+    (positions2) => positions2.map((position) => {
       const side = position.position_qty > 0 ? orderlyTypes.OrderSide.SELL : orderlyTypes.OrderSide.BUY;
       const quantity = Math.abs(position.position_qty);
       return {