@orderly.network/ui-positions 2.8.8-alpha.0 → 2.8.9-alpha.0

package/dist/index.js

@@ -7,9 +7,8 @@ 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 immer = require('immer');
-var perp = require('@orderly.network/perp');
 var reactApp = require('@orderly.network/react-app');
+var perp = require('@orderly.network/perp');
 var uiConnector = require('@orderly.network/ui-connector');
 var uiLeverage = require('@orderly.network/ui-leverage');
 var uiShare = require('@orderly.network/ui-share');
@@ -599,6 +598,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 = perp.positions.notional(item.position_qty, item.mark_price);
+    const account2 = 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 = perp.positions.MMR({
+      baseMMR,
+      baseIMR,
+      IMRFactor: account2?.imr_factor[item.symbol] ?? 0,
+      positionNotional: notional,
+      IMR_factor_power: 4 / 5
+    });
+    const mm = perp.positions.maintenanceMargin({
+      positionQty: item.position_qty,
+      markPrice: item.mark_price,
+      MMR
+    });
+    const unrealPnl = perp.positions.unrealizedPnL({
+      qty: item.position_qty,
+      openPrice: item?.average_open_price,
+      markPrice: item.mark_price
+    });
+    const maxLeverage = item.leverage || 1;
+    const imr = perp.account.IMR({
+      maxLeverage,
+      baseIMR,
+      IMR_Factor: account2?.imr_factor[item.symbol] ?? 0,
+      positionNotional: notional,
+      ordersNotional: 0,
+      IMR_factor_power: 4 / 5
+    });
+    const unrealPnlROI = perp.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 = perp.positions.unrealizedPnL({
+        qty: item.position_qty,
+        openPrice: item?.average_open_price,
+        markPrice: item.index_price
+      });
+      unrealPnlROI_index = perp.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);
+    return {
+      ...item,
+      ...tpsl,
+      mmr: MMR,
+      mm,
+      notional,
+      unrealized_pnl: unrealPnl,
+      unrealized_pnl_ROI: unrealPnlROI,
+      unrealized_pnl_ROI_index: unrealPnlROI_index
+    };
+  });
+};
+function formatTPSL(tpslOrders, symbol) {
+  if (Array.isArray(tpslOrders) && tpslOrders.length) {
+    const { fullPositionOrder, partialPositionOrders } = hooks.findPositionTPSLFromOrders(tpslOrders, symbol);
+    const full_tp_sl = fullPositionOrder ? hooks.findTPSLFromOrder(fullPositionOrder) : void 0;
+    const partialPossitionOrder = partialPositionOrders && partialPositionOrders.length ? partialPositionOrders[0] : void 0;
+    const partial_tp_sl = partialPossitionOrder ? hooks.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 = (account2, accountId) => {
   const apiBaseUrl = hooks.useConfig("apiBaseUrl");
   return (useSWRNext) => {
@@ -648,6 +743,48 @@ var useSubAccountQuery = (query, options) => {
     }
   );
 };
+function useSubAccountTPSL(subAccountIds) {
+  const ee = hooks.useEventEmitter();
+  const { data: algoOrdersResponse, mutate: mutateTPSLOrders } = useSubAccountQuery(
+    `/v1/algo/orders?size=100&page=1&status=${types.OrderStatus.INCOMPLETE}`,
+    {
+      accountId: subAccountIds,
+      formatter: (data) => data,
+      revalidateOnFocus: false
+    }
+  );
+  const tpslOrders = React2.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) => [types.AlgoOrderRootType.POSITIONAL_TP_SL, types.AlgoOrderRootType.TP_SL].includes(
+        order.algo_type
+      )
+    );
+  }, [algoOrdersResponse, subAccountIds]);
+  const refresh = hooks.useDebouncedCallback(() => {
+    mutateTPSLOrders();
+  }, 200);
+  React2.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) => {
@@ -661,12 +798,9 @@ var useCombinePositionsScript = (props) => {
     selectedAccount
   } = props;
   const { pagination, setPage } = ui.usePagination({ pageSize: 50 });
-  React2.useEffect(() => {
-    setPage(1);
-  }, [symbol]);
   const symbolsInfo = hooks.useSymbolsInfo();
   const { state } = hooks.useAccount();
-  const [oldPositions, , { isLoading }] = hooks.usePositionStream(symbol, {
+  const [mainAccountPositions, , { isLoading }] = hooks.usePositionStream(symbol, {
     calcMode,
     includedPendingOrder
   });
@@ -675,90 +809,37 @@ var useCombinePositionsScript = (props) => {
     isLoading: isPositionLoading,
     mutate: mutatePositions
   } = hooks.usePrivateQuery("/v1/client/aggregate/positions", {
-    // formatter: (data) => data,
     errorRetryCount: 3
   });
+  const { allAccountIds, subAccountIds } = React2.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 = perp.positions.notional(item.position_qty, item.mark_price);
-        const account2 = 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 = perp.positions.MMR({
-          baseMMR,
-          baseIMR,
-          IMRFactor: account2?.imr_factor[item.symbol] ?? 0,
-          positionNotional: notional,
-          IMR_factor_power: 4 / 5
-        });
-        const mm = perp.positions.maintenanceMargin({
-          positionQty: item.position_qty,
-          markPrice: item.mark_price,
-          MMR
-        });
-        const unrealPnl = perp.positions.unrealizedPnL({
-          qty: item.position_qty,
-          openPrice: item?.average_open_price,
-          // markPrice: unRealizedPrice,
-          markPrice: item.mark_price
-        });
-        const maxLeverage = item.leverage || 1;
-        const imr = perp.account.IMR({
-          maxLeverage,
-          baseIMR,
-          IMR_Factor: account2?.imr_factor[item.symbol] ?? 0,
-          positionNotional: notional,
-          ordersNotional: 0,
-          IMR_factor_power: 4 / 5
-        });
-        const unrealPnlROI = perp.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 = perp.positions.unrealizedPnL({
-            qty: item.position_qty,
-            openPrice: item?.average_open_price,
-            // markPrice: unRealizedPrice,
-            markPrice: item.index_price
-          });
-          unrealPnlROI_index = perp.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 = reactApp.useDataTap(
-    [...oldPositions?.rows, ...processPositions].filter(
-      (acc) => acc.position_qty !== 0
-    )
-  ) ?? [];
+  const { tpslOrders, mutateTPSLOrders } = useSubAccountTPSL(subAccountIds);
+  const subAccountPositions = React2.useMemo(() => {
+    return calculatePositions(
+      newPositions.filter((item) => item.account_id !== state.mainAccountId),
+      symbolsInfo,
+      accountInfo,
+      tpslOrders
+    );
+  }, [newPositions, symbolsInfo, accountInfo, state.mainAccountId, tpslOrders]);
+  const allPositions = React2.useMemo(() => {
+    return [...mainAccountPositions?.rows, ...subAccountPositions].filter(
+      (item) => item.position_qty !== 0
+    );
+  }, [mainAccountPositions, subAccountPositions]);
+  const dataSource = reactApp.useDataTap(allPositions) ?? [];
   const filtered = React2.useMemo(() => {
     if (!selectedAccount || selectedAccount === "All accounts" /* ALL */) {
       return dataSource;
@@ -777,18 +858,23 @@ var useCombinePositionsScript = (props) => {
       subAccounts: state.subAccounts
     });
   }, [filtered, state.mainAccountId, state.subAccounts]);
-  const mergedLoading = React2.useMemo(() => {
-    return isLoading || isPositionLoading || isAccountInfoLoading;
-  }, [isLoading, isPositionLoading, isAccountInfoLoading]);
+  const loading = isLoading || isPositionLoading || isAccountInfoLoading;
+  React2.useEffect(() => {
+    setPage(1);
+  }, [symbol]);
+  const mutateList = React2.useCallback(() => {
+    mutatePositions();
+    mutateTPSLOrders();
+  }, []);
   return {
     tableData: groupDataSource,
-    isLoading: mergedLoading,
+    isLoading: loading,
     pnlNotionalDecimalPrecision,
     sharePnLConfig,
     symbol,
     onSymbolChange,
     pagination,
-    mutatePositions
+    mutatePositions: mutateList
   };
 };
 var groupDataByAccount = (data, options) => {
@@ -796,12 +882,12 @@ var groupDataByAccount = (data, 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,
+        account_id: accountId,
         description: accountId === mainAccountId ? i18n.i18n.t("common.mainAccount") : findSubAccount?.description || ui.formatAddress(findSubAccount?.id || ""),
         children: [item]
       });
@@ -962,7 +1048,14 @@ var OrderInfoCard = ({
   );
 };
 var ReversePosition = (props) => {
-  const { displayInfo, className, style, onConfirm, onCancel } = props;
+  const {
+    displayInfo,
+    validationError,
+    className,
+    style,
+    onConfirm,
+    onCancel
+  } = props;
   const { t } = i18n.useTranslation();
   if (!displayInfo) {
     return null;
@@ -989,6 +1082,7 @@ var ReversePosition = (props) => {
     /* @__PURE__ */ jsxRuntime.jsx(ui.Text.numeral, { dp: quoteDp, size: "sm", intensity: 80, children: markPrice }),
     /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "sm", intensity: 36, children: quote })
   ] });
+  const showBelowMinError = validationError === "belowMin";
   return /* @__PURE__ */ jsxRuntime.jsxs(
     ui.Flex,
     {
@@ -1048,11 +1142,12 @@ var ReversePosition = (props) => {
             baseDp
           }
         ),
-        /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "2xs", color: "warning", weight: "semibold", children: t("positions.reverse.description") })
+        showBelowMinError ? /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "2xs", color: "danger", weight: "semibold", children: t("positions.reverse.error.belowMin") }) : /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "2xs", color: "warning", weight: "semibold", children: t("positions.reverse.description") })
       ]
     }
   );
 };
+var MAX_BATCH_ORDER_SIZE = 20;
 var useReversePositionEnabled = () => {
   const { isMobile, isDesktop } = ui.useScreen();
   const [desktopEnabled, setDesktopEnabled] = hooks.useLocalStorage(
@@ -1089,12 +1184,26 @@ var useReversePositionEnabled = () => {
 };
 var useReversePositionScript = (options) => {
   const { position, onSuccess, onError } = options || {};
-  const { t } = i18n.useTranslation();
   const { isEnabled, setEnabled } = useReversePositionEnabled();
   const symbolsInfo = hooks.useSymbolsInfo();
   const symbol = position?.symbol || "";
   const { data: symbolMarketPrice } = hooks.useMarkPrice(symbol);
   const symbolInfo = symbolsInfo?.[symbol];
+  const baseMin = React2.useMemo(() => {
+    if (!symbolInfo)
+      return 0;
+    return symbolInfo("base_min") || 0;
+  }, [symbolInfo]);
+  const baseMax = React2.useMemo(() => {
+    if (!symbolInfo)
+      return 0;
+    return symbolInfo("base_max") || 0;
+  }, [symbolInfo]);
+  const baseDp = React2.useMemo(() => {
+    if (!symbolInfo)
+      return 6;
+    return symbolInfo("base_dp") || 6;
+  }, [symbolInfo]);
   const positionQty = React2.useMemo(() => {
     if (!position)
       return 0;
@@ -1105,21 +1214,62 @@ var useReversePositionScript = (options) => {
       return false;
     return position.position_qty > 0;
   }, [position]);
-  const oppositeSide = React2.useMemo(() => {
-    return isLong ? types.OrderSide.SELL : types.OrderSide.BUY;
-  }, [isLong]);
-  const maxOpenQty = hooks.useMaxQty(symbol, oppositeSide, false);
-  const reverseQty = React2.useMemo(() => {
-    if (!position)
-      return 0;
-    const desiredQty = positionQty;
-    if (desiredQty > maxOpenQty && maxOpenQty > 0) {
-      return maxOpenQty;
+  const reverseQty = positionQty;
+  const validationError = React2.useMemo(() => {
+    if (!position || !symbolInfo)
+      return null;
+    if (baseMin > 0 && reverseQty < baseMin) {
+      return "belowMin";
     }
-    return desiredQty;
-  }, [positionQty, maxOpenQty]);
-  const [doCreateOrder, { isMutating }] = hooks.useSubAccountMutation(
-    "/v1/order",
+    return null;
+  }, [position, symbolInfo, reverseQty, baseMin]);
+  const splitOrders = React2.useMemo(() => {
+    if (!position || !symbolInfo || baseMax <= 0 || reverseQty <= 0) {
+      return { needsSplit: false, orders: [] };
+    }
+    const buildOrder = (qty, side, reduceOnly) => {
+      return {
+        symbol: position.symbol,
+        order_type: types.OrderType.MARKET,
+        side,
+        order_quantity: new utils.Decimal(qty).todp(baseDp).toString(),
+        reduce_only: reduceOnly
+      };
+    };
+    const closeSide = isLong ? types.OrderSide.SELL : types.OrderSide.BUY;
+    const openSide = isLong ? types.OrderSide.SELL : types.OrderSide.BUY;
+    if (reverseQty <= baseMax) {
+      return {
+        needsSplit: false,
+        orders: [
+          buildOrder(reverseQty, closeSide, true),
+          buildOrder(reverseQty, openSide, false)
+        ]
+      };
+    }
+    const orders = [];
+    const perOrderQty = baseMax;
+    const numOrders = Math.ceil(reverseQty / baseMax);
+    for (let i = 0; i < numOrders - 1; i++) {
+      orders.push(buildOrder(perOrderQty, closeSide, true));
+    }
+    orders.push(
+      buildOrder(reverseQty - perOrderQty * (numOrders - 1), closeSide, true)
+    );
+    for (let i = 0; i < numOrders - 1; i++) {
+      orders.push(buildOrder(perOrderQty, openSide, false));
+    }
+    orders.push(
+      buildOrder(reverseQty - perOrderQty * (numOrders - 1), openSide, false)
+    );
+    return {
+      needsSplit: true,
+      orders
+    };
+  }, [position, symbolInfo, reverseQty, baseMax, baseDp]);
+  const [isReversing, setIsReversing] = React2.useState(false);
+  const [doBatchCreateOrder] = hooks.useSubAccountMutation(
+    "/v1/batch-order",
     "POST",
     {
       accountId: position?.account_id
@@ -1127,55 +1277,74 @@ var useReversePositionScript = (options) => {
   );
   const reversePosition = React2.useCallback(async () => {
     if (!position || positionQty === 0) {
-      ui.toast.error("No position to reverse");
       return false;
     }
+    if (validationError) {
+      return false;
+    }
+    setIsReversing(true);
     try {
-      const closeSide = isLong ? types.OrderSide.SELL : types.OrderSide.BUY;
-      const closeOrder = await doCreateOrder({
-        symbol: position.symbol,
-        order_type: types.OrderType.MARKET,
-        side: closeSide,
-        order_quantity: new utils.Decimal(positionQty).toString(),
-        reduce_only: true
-      });
-      const openSide = isLong ? types.OrderSide.SELL : types.OrderSide.BUY;
-      const openOrder = await doCreateOrder({
-        symbol: position.symbol,
-        order_type: types.OrderType.MARKET,
-        side: openSide,
-        order_quantity: new utils.Decimal(reverseQty).toString(),
-        reduce_only: false
-      });
-      if (!openOrder.success) {
-        throw new Error(
-          openOrder.message || "Failed to open opposite position"
-        );
+      const ordersArray = splitOrders.orders;
+      if (ordersArray.length > MAX_BATCH_ORDER_SIZE) {
+        for (let i = 0; i < ordersArray.length; i += MAX_BATCH_ORDER_SIZE) {
+          const batch = ordersArray.slice(i, i + MAX_BATCH_ORDER_SIZE);
+          const result = await doBatchCreateOrder({
+            orders: batch,
+            symbol: position.symbol
+          });
+          await new Promise(
+            (resolve) => setTimeout(resolve, batch.length * 110)
+          );
+          if (!result || result.error) {
+            throw result?.error || new Error("Batch order failed");
+          }
+        }
+      } else {
+        const result = await doBatchCreateOrder({
+          orders: ordersArray,
+          symbol: position.symbol
+        });
+        if (!result || result.error) {
+          throw result?.error || new Error("Batch order failed");
+        }
       }
       onSuccess?.();
       return true;
     } catch (error) {
       onError?.(error);
       return false;
+    } finally {
+      setIsReversing(false);
     }
-  }, [position, positionQty, reverseQty, isLong, doCreateOrder, t, onSuccess]);
+  }, [
+    position,
+    positionQty,
+    reverseQty,
+    isLong,
+    doBatchCreateOrder,
+    splitOrders,
+    symbolInfo,
+    validationError,
+    onSuccess,
+    onError
+  ]);
   const displayInfo = React2.useMemo(() => {
     if (!position || !symbolInfo) {
       return null;
     }
     const base = symbolInfo("base");
     const quote = symbolInfo("quote");
-    const baseDp = symbolInfo("base_dp");
+    const baseDp2 = symbolInfo("base_dp");
     const quoteDp = symbolInfo("quote_dp");
     const leverage = position.leverage || 1;
     return {
       symbol: position.symbol,
       base,
       quote,
-      baseDp,
+      baseDp: baseDp2,
       quoteDp,
-      positionQty: new utils.Decimal(positionQty).todp(baseDp).toString(),
-      reverseQty: new utils.Decimal(reverseQty).todp(baseDp).toString(),
+      positionQty: new utils.Decimal(positionQty).todp(baseDp2).toString(),
+      reverseQty: new utils.Decimal(reverseQty).todp(baseDp2).toString(),
       markPrice: symbolMarketPrice ? new utils.Decimal(symbolMarketPrice).todp(quoteDp).toString() : "--",
       leverage,
       isLong
@@ -1192,11 +1361,13 @@ var useReversePositionScript = (options) => {
     isEnabled,
     setEnabled,
     reversePosition,
-    isReversing: isMutating,
+    isReversing,
     displayInfo,
     positionQty,
     reverseQty,
-    isLong
+    isLong,
+    validationError,
+    splitOrders
   };
 };
 var ReversePositionWidget = (props) => {
@@ -1215,6 +1386,7 @@ var ReversePositionWidget = (props) => {
     }
   });
   const actions = React2.useMemo(() => {
+    const hasValidationError = !!state.validationError;
     return {
       primary: {
         label: t("common.confirm"),
@@ -1235,10 +1407,11 @@ var ReversePositionWidget = (props) => {
           }
         },
         loading: state.isReversing,
-        disabled: state.isReversing || !state.displayInfo
+        disabled: state.isReversing || !state.displayInfo || hasValidationError
       },
       secondary: {
         label: t("common.cancel"),
+        disabled: state.isReversing,
         onClick: async () => {
           reject?.("cancel");
           hide();
@@ -1258,6 +1431,7 @@ var ReversePositionWidget = (props) => {
         content: "oui-border oui-border-line-6"
       },
       actions,
+      closable: !state.isReversing,
       children: /* @__PURE__ */ jsxRuntime.jsx(ReversePosition, { ...state })
     }
   );
@@ -2020,12 +2194,12 @@ var TPSLEditIcon = () => {
 };
 var AddIcon = (props) => {
   const { position, baseDp, quoteDp, tpslOrder } = usePositionsRowContext();
-  const [needConfirm] = hooks.useLocalStorage("orderly_order_confirm", true);
   const { t } = i18n.useTranslation();
   const { isMobile } = ui.useScreen();
   const onAdd = () => {
     const dialogId = isMobile ? uiTpsl.TPSLSheetId : uiTpsl.TPSLDialogId;
     const modalParams = {
+      position,
       symbol: position.symbol,
       baseDP: baseDp,
       quoteDP: quoteDp,
@@ -3435,7 +3609,7 @@ var CombinePositions = (props) => {
       dataSource,
       expanded: true,
       getSubRows: (row) => row.children,
-      generatedRowKey: (record) => record.id,
+      generatedRowKey: (record) => `${record.account_id}${record.symbol || ""}`,
       onCell: (column, record) => {
         const isGroup = (record.children ?? []).length > 0;
         if (isGroup) {
@@ -3459,6 +3633,9 @@ var CombinePositions = (props) => {
       },
       manualPagination: false,
       pagination,
+      classNames: {
+        scroll: "oui-pb-10"
+      },
       testIds: {
         body: "oui-testid-dataList-position-tab-body"
       }