@orderly.network/ui-positions 2.10.2 → 3.0.0-beta.0

package/dist/index.js

@@ -598,7 +598,7 @@ 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(
+    const account3 = accountInfo.find(
       (acc) => acc.account_id === item.account_id
     );
     const baseMMR = info?.("base_mmr");
@@ -609,7 +609,7 @@ var calculatePositions = (positions2, symbolsInfo, accountInfo, tpslOrders) => {
     const MMR = perp.positions.MMR({
       baseMMR,
       baseIMR,
-      IMRFactor: account2?.imr_factor[item.symbol] ?? 0,
+      IMRFactor: account3?.imr_factor[item.symbol] ?? 0,
       positionNotional: notional,
       IMR_factor_power: 4 / 5
     });
@@ -627,7 +627,7 @@ var calculatePositions = (positions2, symbolsInfo, accountInfo, tpslOrders) => {
     const imr = perp.account.IMR({
       maxLeverage,
       baseIMR,
-      IMR_Factor: account2?.imr_factor[item.symbol] ?? 0,
+      IMR_Factor: account3?.imr_factor[item.symbol] ?? 0,
       positionNotional: notional,
       ordersNotional: 0,
       IMR_factor_power: 4 / 5
@@ -656,7 +656,7 @@ var calculatePositions = (positions2, symbolsInfo, accountInfo, tpslOrders) => {
     const filteredTPSLOrders = tpslOrders.filter(
       (tpslOrder) => tpslOrder.account_id === item.account_id
     );
-    const tpsl = formatTPSL(filteredTPSLOrders, item.symbol);
+    const tpsl = formatTPSL(filteredTPSLOrders, item.symbol, item.margin_mode);
     return {
       ...item,
       ...tpsl,
@@ -669,9 +669,9 @@ var calculatePositions = (positions2, symbolsInfo, accountInfo, tpslOrders) => {
     };
   });
 };
-function formatTPSL(tpslOrders, symbol) {
+function formatTPSL(tpslOrders, symbol, marginMode) {
   if (Array.isArray(tpslOrders) && tpslOrders.length) {
-    const { fullPositionOrder, partialPositionOrders } = hooks.findPositionTPSLFromOrders(tpslOrders, symbol);
+    const { fullPositionOrder, partialPositionOrders } = hooks.findPositionTPSLFromOrders(tpslOrders, symbol, marginMode);
     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;
@@ -690,7 +690,7 @@ function formatTPSL(tpslOrders, symbol) {
     };
   }
 }
-var signatureMiddleware = (account2, accountId) => {
+var signatureMiddleware = (account3, accountId) => {
   const apiBaseUrl = hooks.useConfig("apiBaseUrl");
   return (useSWRNext) => {
     return (key, fetcher2, config) => {
@@ -698,7 +698,7 @@ var signatureMiddleware = (account2, accountId) => {
         const extendedFetcher = async (args) => {
           const url = Array.isArray(args) ? args[0] : args;
           const fullUrl = `${apiBaseUrl}${url}`;
-          const signer = account2.signer;
+          const signer = account3.signer;
           const payload = { method: "GET", url };
           const signature = await signer.sign(payload, utils.getTimestamp());
           const ids = Array.isArray(accountId) ? accountId : [accountId];
@@ -722,7 +722,7 @@ var signatureMiddleware = (account2, accountId) => {
 };
 var useSubAccountQuery = (query, options) => {
   const { formatter, accountId, ...swrOptions } = options || {};
-  const { state, account: account2 } = hooks.useAccount();
+  const { state, account: account3 } = hooks.useAccount();
   const middleware = Array.isArray(options?.use) ? options?.use ?? [] : [];
   const ids = Array.isArray(accountId) ? accountId : [accountId];
   const shouldFetch = ids.filter(Boolean).length && (state.status >= types.AccountStatusEnum.EnableTrading || state.status === types.AccountStatusEnum.EnableTradingWithoutConnected);
@@ -733,7 +733,7 @@ var useSubAccountQuery = (query, options) => {
     },
     {
       ...swrOptions,
-      use: [...middleware, signatureMiddleware(account2, ids)],
+      use: [...middleware, signatureMiddleware(account3, ids)],
       onError: () => {
       }
     }
@@ -1268,7 +1268,9 @@ var useReversePositionScript = (options) => {
         order_type: types.OrderType.MARKET,
         side,
         order_quantity: new utils.Decimal(qty).todp(baseDp).toString(),
-        reduce_only: reduceOnly
+        reduce_only: reduceOnly,
+        // Use position's margin_mode or default to CROSS for backward compatibility
+        margin_mode: position.margin_mode || types.MarginMode.CROSS
       };
     };
     const closeSide = isLong ? types.OrderSide.SELL : types.OrderSide.BUY;
@@ -1604,6 +1606,619 @@ var RwaStatusTag = ({ symbol }) => {
     }
   );
 };
+var usePositionMargin = (symbol, isAdd, isolatedMargin, finalMargin) => {
+  const { freeCollateral, freeCollateralUSDCOnly, usdcHolding } = hooks.useCollateral(
+    {
+      dp: 2
+    }
+  );
+  const positions2 = hooks.usePositions();
+  const total_cross_unsettled_pnl = React2.useMemo(() => {
+    return positions2?.filter((item) => (item.margin_mode ?? "CROSS") === "CROSS").reduce((acc, item) => acc.add(item.unsettled_pnl), new utils.Decimal(0));
+  }, [positions2]);
+  const fundingRates = hooks.useAppStore((state) => state.fundingRates);
+  const symbolsInfo = hooks.useAppStore((state) => state.symbolsInfo);
+  const accountInfo = hooks.useAppStore((state) => state.accountInfo);
+  const { data: markPrice } = hooks.useMarkPrice(symbol);
+  const totalUnsettlementPnl = React2.useMemo(() => {
+    if (!positions2?.length) {
+      return null;
+    }
+    return positions2.reduce((acc, item) => {
+      const itemAny = item;
+      const positionUnsettlementPnl = itemAny["unsettlement_pnl"] ?? item.unsettled_pnl ?? 0;
+      return acc.add(positionUnsettlementPnl);
+    }, new utils.Decimal(0));
+  }, [positions2]);
+  const currentPosition = React2.useMemo(() => {
+    return positions2?.find(
+      (item) => item.symbol === symbol && item.margin_mode === types.MarginMode.ISOLATED
+    );
+  }, [positions2]);
+  const notional = React2.useMemo(() => {
+    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 imr = React2.useMemo(() => {
+    if (!currentPosition || !symbolsInfo?.[symbol] || !notional) {
+      return null;
+    }
+    const currentSymbolInfo = symbolsInfo[symbol];
+    const maxLeverage = Math.max(currentPosition.leverage ?? 1, 1);
+    const IMR_Factor = accountInfo?.imr_factor?.[symbol] ?? currentSymbolInfo.imr_factor ?? 0;
+    return new utils.Decimal(
+      perp.account.IMR({
+        maxLeverage,
+        baseIMR: currentSymbolInfo.base_imr ?? 0,
+        IMR_Factor,
+        positionNotional: notional.toNumber(),
+        ordersNotional: 0
+      })
+    );
+  }, [currentPosition, symbolsInfo, symbol, notional, accountInfo]);
+  const maxAmount = React2.useMemo(() => {
+    if (isAdd) {
+      if (!freeCollateralUSDCOnly) return null;
+      return Math.max(0, freeCollateralUSDCOnly);
+    }
+    if (!imr || !notional || isolatedMargin === void 0 || isolatedMargin === null || !currentPosition) {
+      return null;
+    }
+    const positionNotional = notional;
+    const imrValue = imr;
+    const unsettledPnlValue = unSettledPnl ?? new utils.Decimal(0);
+    return perp.account.maxReduce({
+      isolatedPositionMargin: isolatedMargin,
+      positionNotional: positionNotional.toNumber(),
+      imr: imrValue.toNumber(),
+      positionUnsettledPnL: unsettledPnlValue.toNumber()
+    });
+  }, [
+    total_cross_unsettled_pnl,
+    usdcHolding,
+    isAdd,
+    freeCollateral,
+    unSettledPnl,
+    isolatedMargin
+  ]);
+  const liquidationPrice = React2.useMemo(() => {
+    if (!totalUnsettlementPnl || !currentPosition || !symbolsInfo?.[symbol] || !accountInfo?.imr_factor) {
+      return null;
+    }
+    const currentSymbolInfo = symbolsInfo[symbol];
+    const currentPositionNotional = notional?.toNumber() ?? 0;
+    const currentPositionIMRFactor = accountInfo.imr_factor[symbol] ?? currentSymbolInfo.imr_factor ?? 0;
+    const currentPositionMMR = 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) => {
+      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();
+      const itemMMR = item.mmr ?? perp.positions.MMR({
+        baseMMR: itemSymbolInfo?.base_mmr ?? 0,
+        baseIMR: itemSymbolInfo?.base_imr ?? 0,
+        IMRFactor: itemIMRFactor,
+        positionNotional: itemNotional,
+        IMR_factor_power: 4 / 5
+      });
+      return {
+        symbol: item.symbol,
+        position_qty: item.position_qty,
+        mark_price: item.mark_price,
+        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,
+      baseMMR: currentSymbolInfo.base_mmr ?? 0,
+      baseIMR: currentSymbolInfo.base_imr ?? 0,
+      IMRFactor: currentPositionIMRFactor,
+      costPosition: currentPosition.cost_position ?? 0
+    });
+    return liqPrice;
+  }, [
+    totalUnsettlementPnl,
+    currentPosition,
+    symbolsInfo,
+    symbol,
+    accountInfo,
+    notional,
+    positions2,
+    finalMargin,
+    markPrice
+  ]);
+  const total_collateral_value = React2.useMemo(() => {
+    if (!unSettledPnl) return null;
+    return new utils.Decimal(finalMargin).add(unSettledPnl).toNumber();
+  }, [unSettledPnl, finalMargin]);
+  const effectiveLeverage = React2.useMemo(() => {
+    if (!notional || !total_collateral_value) return null;
+    return notional.div(total_collateral_value).toNumber();
+  }, [notional, total_collateral_value]);
+  return {
+    maxAmount,
+    liquidationPrice,
+    effectiveLeverage
+  };
+};
+var usePositionMargin_default = usePositionMargin;
+
+// src/components/positions/adjustMargin/adjustMargin.script.tsx
+var useAdjustMarginScript = (props) => {
+  const { position, symbol, close } = props;
+  const { t } = i18n.useTranslation();
+  const [tab, setTab] = React2.useState("add");
+  const [inputValue, setInputValue] = React2.useState("");
+  const [sliderValue, setSliderValue] = React2.useState(0);
+  const [updateMargin, { isMutating: isLoading }] = hooks.useMutation(
+    "/v1/position_margin",
+    "POST"
+  );
+  const isAdd = React2.useMemo(() => {
+    return tab === "add";
+  }, [tab]);
+  const currentMargin = position.margin ?? 0;
+  const finalMargin = React2.useMemo(() => {
+    const delta = new utils.Decimal(inputValue || 0);
+    if (tab === "add") return currentMargin + delta.toNumber();
+    return currentMargin - delta.toNumber();
+  }, [currentMargin, inputValue, tab]);
+  const { maxAmount, liquidationPrice, effectiveLeverage } = usePositionMargin_default(
+    symbol,
+    isAdd,
+    currentMargin,
+    finalMargin
+  );
+  const syncSliderFromInput = React2.useCallback(
+    (value) => {
+      if (!value) {
+        setSliderValue(0);
+        return;
+      }
+      if (!maxAmount) return;
+      const val = new utils.Decimal(value);
+      if (maxAmount === 0) {
+        setSliderValue(0);
+        return;
+      }
+      const percent = val.div(maxAmount).mul(100).toNumber();
+      setSliderValue(Math.min(100, Math.max(0, percent)));
+    },
+    [maxAmount]
+  );
+  const syncInputFromSlider = React2.useCallback(
+    (value) => {
+      if (!maxAmount) return;
+      const val = new utils.Decimal(maxAmount).mul(value).div(100);
+      setInputValue(val.toFixed(2, utils.Decimal.ROUND_DOWN));
+    },
+    [maxAmount]
+  );
+  const onInputChange = React2.useCallback(
+    (value) => {
+      let finalValue = value;
+      if (maxAmount && value) {
+        const inputDecimal = new utils.Decimal(value);
+        if (inputDecimal.gt(maxAmount)) {
+          finalValue = new utils.Decimal(maxAmount).toFixed(2, utils.Decimal.ROUND_DOWN);
+        }
+      }
+      setInputValue(finalValue);
+      syncSliderFromInput(finalValue);
+    },
+    [syncSliderFromInput, maxAmount]
+  );
+  const onSliderChange = React2.useCallback(
+    (value) => {
+      setSliderValue(value);
+      syncInputFromSlider(value);
+    },
+    [syncInputFromSlider]
+  );
+  const onTabChange = React2.useCallback((nextTab) => {
+    setTab(nextTab);
+    setInputValue("");
+    setSliderValue(0);
+  }, []);
+  const canConfirm = React2.useMemo(() => {
+    if (!inputValue) return false;
+    const value = new utils.Decimal(inputValue);
+    return !value.isZero() && value.isPositive();
+  }, [inputValue]);
+  const onConfirm = React2.useCallback(async () => {
+    if (!inputValue || new utils.Decimal(inputValue).isZero()) return;
+    if (maxAmount) {
+      const inputDecimal = new utils.Decimal(inputValue);
+      if (inputDecimal.gt(maxAmount)) {
+        ui.toast.error(t("positions.adjustMargin.marginCannotMoreThanMax"));
+        return;
+      }
+    }
+    try {
+      const payload = {
+        symbol,
+        amount: new utils.Decimal(inputValue).toString(),
+        type: tab === "add" ? "ADD" : "REDUCE"
+      };
+      const response = await updateMargin(payload);
+      if (!response?.success) {
+        ui.toast.error(response?.message || t("positions.adjustMargin.failed"));
+        return;
+      }
+      ui.toast.success(t("positions.adjustMargin.success"));
+      close();
+    } catch (error) {
+      const message = error instanceof Error ? error.message : void 0;
+      ui.toast.error(message || t("positions.adjustMargin.failed"));
+    }
+  }, [close, inputValue, symbol, t, tab, updateMargin, maxAmount]);
+  return {
+    symbol,
+    tab,
+    inputValue,
+    sliderValue,
+    maxAmount: maxAmount ?? 0,
+    currentMargin,
+    liquidationPrice: liquidationPrice ?? 0,
+    effectiveLeverage: effectiveLeverage ?? 0,
+    isLoading,
+    isAdd,
+    canConfirm,
+    onTabChange,
+    onInputChange,
+    onSliderChange,
+    onConfirm,
+    close
+  };
+};
+var Footer = (props) => {
+  const { t } = i18n.useTranslation();
+  return /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { gap: 3, className: "oui-w-full oui-pt-5", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      ui.Button,
+      {
+        variant: "contained",
+        fullWidth: true,
+        size: "lg",
+        color: "secondary",
+        className: "oui-h-10",
+        onClick: props.close,
+        children: t("common.cancel")
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      ui.Button,
+      {
+        variant: "contained",
+        color: "primary",
+        fullWidth: true,
+        size: "lg",
+        className: "oui-h-10",
+        loading: props.isLoading,
+        disabled: !props.canConfirm,
+        onClick: props.onConfirm,
+        children: t("common.confirm")
+      }
+    )
+  ] });
+};
+var fotter_default = Footer;
+var Infos = ({
+  currentMargin,
+  liquidationPrice,
+  effectiveLeverage
+}) => {
+  const { t } = i18n.useTranslation();
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    ui.Flex,
+    {
+      direction: "column",
+      gap: 1,
+      className: "oui-w-full oui-rounded-[6px] oui-bg-base-6 oui-p-3 oui-text-2xs oui-font-semibold",
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          ui.Statistic,
+          {
+            label: t("positions.adjustMargin.currentMargin"),
+            valueProps: { dp: 2, unit: " USDC", padding: false },
+            classNames: {
+              root: "oui-flex-row oui-justify-between oui-items-center oui-w-full oui-text-2xs oui-h-5",
+              label: "oui-text-2xs"
+            },
+            children: currentMargin
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          ui.Statistic,
+          {
+            label: t("positions.adjustMargin.liqPriceAfter"),
+            valueProps: { dp: 2, unit: " USDC", padding: false },
+            classNames: {
+              root: "oui-flex-row oui-justify-between oui-items-center oui-w-full oui-text-2xs oui-h-5",
+              label: "oui-text-2xs"
+            },
+            children: liquidationPrice ?? "--"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          ui.Statistic,
+          {
+            label: t("positions.adjustMargin.leverageAfter"),
+            valueProps: { dp: 2, unit: " x" },
+            classNames: {
+              root: "oui-flex-row oui-justify-between oui-items-center oui-w-full oui-text-2xs oui-h-5",
+              label: "oui-text-2xs"
+            },
+            children: effectiveLeverage ?? "--"
+          }
+        )
+      ]
+    }
+  );
+};
+var MarginActions = ({
+  isAdd,
+  onTabChange
+}) => {
+  const { t } = i18n.useTranslation();
+  const tabBase = "oui-h-7 oui-rounded-[4px] oui-text-xs oui-font-semibold oui-transition-colors";
+  return /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { className: "oui-w-full oui-gap-[6px]", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      ui.Button,
+      {
+        size: "md",
+        fullWidth: true,
+        variant: "contained",
+        color: "secondary",
+        className: ui.cn(
+          tabBase,
+          isAdd && "oui-bg-base-5 oui-text-base-contrast-98",
+          !isAdd && "oui-bg-base-7 oui-text-base-contrast-54 hover:oui-text-base-contrast-80"
+        ),
+        onClick: () => onTabChange("add"),
+        children: t("positions.adjustMargin.add")
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      ui.Button,
+      {
+        size: "sm",
+        fullWidth: true,
+        variant: "contained",
+        color: "secondary",
+        className: ui.cn(
+          tabBase,
+          !isAdd && "oui-bg-base-5 oui-text-base-contrast-98 hover:oui-text-base-contrast-80",
+          isAdd && "oui-bg-base-7 oui-text-base-contrast-54 hover:oui-text-base-contrast-80"
+        ),
+        onClick: () => onTabChange("reduce"),
+        children: t("positions.adjustMargin.reduce")
+      }
+    )
+  ] });
+};
+var Quantity = ({
+  inputValue,
+  sliderValue,
+  maxAmount,
+  onInputChange,
+  onSliderChange
+}) => {
+  const { t } = i18n.useTranslation();
+  const percentMarks = React2.useMemo(
+    () => [0, 25, 50, 75, 100].map((m) => ({ value: m, label: `${m}%` })),
+    []
+  );
+  const isMaxClickable = maxAmount > 0;
+  const handleSetToMax = React2.useCallback(() => {
+    if (!isMaxClickable) return;
+    onSliderChange(100);
+  }, [isMaxClickable, onSliderChange]);
+  const handleKeyDown = React2.useCallback(
+    (e) => {
+      if (e.key === "Enter" || e.key === " ") {
+        e.preventDefault();
+        handleSetToMax();
+      }
+    },
+    [handleSetToMax]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { direction: "column", gap: 3, className: "oui-w-full", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      ui.Input,
+      {
+        value: inputValue,
+        onValueChange: onInputChange,
+        type: "text",
+        fullWidth: true,
+        size: "lg",
+        align: "right",
+        prefix: t("positions.adjustMargin.quantity"),
+        suffix: "USDC",
+        formatters: [
+          ui.inputFormatter.numberFormatter,
+          ui.inputFormatter.dpFormatter(2)
+        ],
+        disabled: maxAmount === null || maxAmount <= 0,
+        autoComplete: "off",
+        classNames: {
+          // Keep border color stable and remove focus ring (Input has focus-within:outline-primary-light by default)
+          root: "oui-rounded-[6px] oui-bg-base-6 oui-border oui-border-solid oui-border-white/[0.12] oui-outline oui-outline-1 oui-outline-offset-0 oui-outline-transparent focus-within:oui-outline-transparent",
+          // keep value aligned to suffix side and match design emphasis
+          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"
+        }
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { direction: "column", gap: 2, className: "oui-w-full", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        ui.Slider,
+        {
+          value: [sliderValue],
+          onValueChange: (val) => onSliderChange(val[0]),
+          max: 100,
+          min: 0,
+          step: 1,
+          color: "primary",
+          showTip: true,
+          tipFormatter: (v, _min, _max, percent) => `${percent.toFixed(0)}%`,
+          marks: percentMarks,
+          markLabelVisible: false,
+          disabled: maxAmount === null || maxAmount <= 0
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { justify: "between", className: "oui-w-full", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "2xs", className: "oui-text-primary", children: `${sliderValue.toFixed(0)}%` }),
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          ui.Flex,
+          {
+            gap: 1,
+            itemAlign: "baseline",
+            role: isMaxClickable ? "button" : void 0,
+            tabIndex: isMaxClickable ? 0 : void 0,
+            onClick: isMaxClickable ? handleSetToMax : void 0,
+            onKeyDown: isMaxClickable ? handleKeyDown : void 0,
+            className: isMaxClickable ? "oui-cursor-pointer oui-opacity-90 hover:oui-opacity-100" : void 0,
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "2xs", className: "oui-text-primary", children: t("positions.adjustMargin.max") }),
+              /* @__PURE__ */ jsxRuntime.jsx(ui.Text.numeral, { size: "2xs", intensity: 54, dp: 2, children: maxAmount })
+            ]
+          }
+        )
+      ] })
+    ] })
+  ] });
+};
+var SymbolInfo = ({ symbol }) => {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "oui-flex oui-items-center oui-gap-2", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(ui.TokenIcon, { symbol, className: "oui-size-5" }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      ui.Text.formatted,
+      {
+        rule: "symbol",
+        formatString: "base-type",
+        size: "base",
+        weight: "semibold",
+        intensity: 98,
+        children: symbol
+      }
+    )
+  ] });
+};
+var Title = ({ close }) => {
+  const { t } = i18n.useTranslation();
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "oui-w-full", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { justify: "between", itemAlign: "center", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        ui.Text,
+        {
+          className: "oui-text-base oui-leading-6 oui-font-semibold oui-tracking-[0.48px]",
+          intensity: 98,
+          children: t("positions.adjustMargin.title")
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(ui.IconButton, { onClick: close, color: "secondary", children: /* @__PURE__ */ jsxRuntime.jsx(ui.CloseIcon, { size: 18, color: "white", opacity: 0.98 }) })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(ui.Divider, { className: "oui-mt-[9px] oui-w-full" })
+  ] });
+};
+var title_default = Title;
+var AdjustMargin = (props) => {
+  const {
+    symbol,
+    inputValue,
+    sliderValue,
+    maxAmount,
+    currentMargin,
+    liquidationPrice,
+    effectiveLeverage,
+    onTabChange,
+    onInputChange,
+    onSliderChange,
+    close,
+    isAdd
+  } = props;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    ui.Flex,
+    {
+      direction: "column",
+      className: "oui-w-full oui-rounded-[12px] oui-bg-base-8 oui-font-semibold",
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(title_default, { close }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "oui-w-full oui-pt-5", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(SymbolInfo, { symbol }),
+          /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { direction: "column", gap: 4, className: "oui-mt-4 oui-w-full", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(MarginActions, { isAdd, onTabChange }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              Quantity,
+              {
+                inputValue,
+                sliderValue,
+                maxAmount,
+                onInputChange,
+                onSliderChange
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              Infos,
+              {
+                currentMargin,
+                liquidationPrice,
+                effectiveLeverage
+              }
+            )
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(fotter_default, { ...props })
+      ]
+    }
+  );
+};
+var AdjustMarginDialogId = "AdjustMarginDialog";
+var AdjustMarginSheetId = "AdjustMarginSheet";
+var AdjustMarginWidget = (props) => {
+  const { isMobile } = ui.useScreen();
+  const state = useAdjustMarginScript({
+    position: props.position,
+    symbol: props.symbol,
+    close: () => ui.modal.hide(isMobile ? AdjustMarginSheetId : AdjustMarginDialogId)
+  });
+  return /* @__PURE__ */ jsxRuntime.jsx(AdjustMargin, { ...state });
+};
+ui.registerSimpleDialog(AdjustMarginDialogId, AdjustMarginWidget, {
+  title: void 0,
+  closable: false,
+  size: "sm"
+});
+ui.registerSimpleSheet(AdjustMarginSheetId, AdjustMarginWidget, {
+  title: void 0,
+  closable: false
+});
 var QuantitySlider = (props) => {
   const { t } = i18n.useTranslation();
   const [sliderValue, setSliderValue] = React2.useState(props.value);
@@ -2260,29 +2875,59 @@ var AddIcon = (props) => {
   );
 };
 var LeverageBadge = (props) => {
-  const { symbol, leverage } = props;
+  const { symbol, leverage, marginMode } = props;
+  const { t } = i18n.useTranslation();
+  const resolvedMarginMode = marginMode;
   const showModal = () => {
     ui.modal.show(props.modalId, {
       symbol,
-      curLeverage: Number(leverage)
+      curLeverage: leverage,
+      marginMode: resolvedMarginMode
     });
   };
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "div",
-    {
-      className: ui.cn(
-        "oui-flex oui-h-[18px] oui-items-center oui-gap-1",
-        "oui-cursor-pointer oui-rounded oui-bg-line-6 oui-px-2",
-        "oui-text-2xs oui-font-semibold oui-text-base-contrast-36"
-      ),
-      onClick: showModal,
-      children: leverage ? /* @__PURE__ */ jsxRuntime.jsx(ui.Text.numeral, { dp: 0, rm: utils.Decimal.ROUND_DOWN, size: "2xs", unit: "X", children: leverage }) : /* @__PURE__ */ jsxRuntime.jsx(LeverageDisplay, { symbol })
-    }
-  );
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "oui-flex oui-items-center oui-gap-1", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: ui.cn(
+          "oui-flex oui-h-[18px] oui-items-center",
+          "oui-rounded oui-bg-line-6 oui-px-2",
+          "oui-text-2xs oui-font-semibold oui-text-base-contrast-36"
+        ),
+        children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { children: resolvedMarginMode === void 0 ? "--" : resolvedMarginMode === types.MarginMode.ISOLATED ? t("marginMode.isolated") : t("marginMode.cross") })
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        className: ui.cn(
+          "oui-flex oui-h-[18px] oui-items-center oui-gap-1",
+          "oui-rounded oui-bg-line-6 oui-px-2",
+          "oui-text-2xs oui-font-semibold oui-text-base-contrast-36",
+          "oui-cursor-pointer"
+        ),
+        onClick: showModal,
+        children: [
+          leverage === void 0 ? /* @__PURE__ */ jsxRuntime.jsx(LeverageDisplay, { symbol, marginMode }) : /* @__PURE__ */ jsxRuntime.jsx(ui.Text.numeral, { dp: 0, rm: utils.Decimal.ROUND_DOWN, size: "2xs", unit: "X", children: leverage }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            ui.ChevronRightIcon,
+            {
+              size: 12,
+              className: "oui-text-base-contrast-36",
+              opacity: 1
+            }
+          )
+        ]
+      }
+    )
+  ] });
 };
-var LeverageDisplay = ({ symbol }) => {
-  const leverage = hooks.useLeverageBySymbol(symbol);
-  return /* @__PURE__ */ jsxRuntime.jsx(ui.Text.numeral, { dp: 0, rm: utils.Decimal.ROUND_DOWN, size: "2xs", unit: "X", children: leverage || 1 });
+var LeverageDisplay = ({
+  symbol,
+  marginMode
+}) => {
+  const leverage = hooks.useLeverageBySymbol(symbol, marginMode);
+  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: leverage === void 0 ? /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "2xs", children: "--" }) : /* @__PURE__ */ jsxRuntime.jsx(ui.Text.numeral, { dp: 0, rm: utils.Decimal.ROUND_DOWN, size: "2xs", unit: "X", children: leverage }) });
 };
 var renderQuantity = (value) => {
   const symbolInfo = useSymbolContext();
@@ -2436,11 +3081,13 @@ var useShareButtonScript = (props) => {
   const { position, sharePnLConfig, iconSize } = props;
   const { getFirstRefCode } = hooks.useReferralInfo();
   const symbolsInfo = hooks.useSymbolsInfo();
-  const { data: accountInfo } = hooks.useAccountInfo();
   const refCode = React2.useMemo(() => {
     return getFirstRefCode()?.code;
   }, [getFirstRefCode]);
-  const symbolLeverage = hooks.useLeverageBySymbol(position.symbol);
+  const symbolLeverage = hooks.useLeverageBySymbol(
+    position.symbol,
+    position.margin_mode ?? types.MarginMode.CROSS
+  );
   const getHistoryEntity = () => {
     const netPnL = position.netPnL || 0;
     const openPrice = Math.abs(position.avg_open_price);
@@ -2449,10 +3096,22 @@ var useShareButtonScript = (props) => {
     const symbolInfo = symbolsInfo[position.symbol];
     const baseIMR = symbolInfo("base_imr");
     const IMR_Factor = symbolInfo("imr_factor");
-    if (netPnL !== 0 && quantity !== 0 && openPrice !== 0 && accountInfo?.max_leverage && baseIMR && // IMR_Factor is possible to be 0
+    if (netPnL !== 0 && quantity !== 0 && openPrice !== 0 && baseIMR && // IMR_Factor is possible to be 0
     typeof IMR_Factor !== "undefined") {
       const notional = perp.positions.notional(quantity, openPrice);
-      const maxLeverage = position.leverage ? position.leverage : accountInfo.max_leverage;
+      const maxLeverage = position.leverage || symbolLeverage;
+      if (!maxLeverage) {
+        return {
+          side: position.side,
+          pnl: netPnL,
+          roi,
+          openPrice,
+          closePrice: Math.abs(position.avg_close_price),
+          openTime: position.open_timestamp,
+          closeTime: position.close_timestamp,
+          quantity: position.closed_position_qty
+        };
+      }
       const imr = perp.account.IMR({
         maxLeverage,
         baseIMR,
@@ -2496,7 +3155,8 @@ var useShareButtonScript = (props) => {
           symbol: position.symbol,
           // when position.leverage is empty, use leverage from useSymbolLeverage
           leverage: position.leverage || symbolLeverage,
-          ...entity
+          ...entity,
+          marginMode: position.margin_mode
         },
         refCode,
         ...sharePnLConfig
@@ -2811,7 +3471,7 @@ var useColumn = (config) => {
     positionReverse
   } = config;
   const { t } = i18n.useTranslation();
-  React2.useRef(Date.now().toString());
+  const { isMobile } = ui.useScreen();
   const column = React2.useMemo(
     () => [
       {
@@ -2854,7 +3514,8 @@ var useColumn = (config) => {
                 {
                   symbol: value,
                   leverage: record.leverage,
-                  modalId: uiLeverage.SymbolLeverageDialogId
+                  modalId: uiLeverage.SymbolLeverageDialogId,
+                  marginMode: record.margin_mode
                 }
               ),
               /* @__PURE__ */ jsxRuntime.jsx(RwaStatusTag, { symbol: value })
@@ -3043,17 +3704,13 @@ var useColumn = (config) => {
           ui.Tooltip,
           {
             className: "oui-max-w-[280px] oui-bg-base-8 oui-p-3 oui-text-2xs oui-text-base-contrast-54",
-            content: /* @__PURE__ */ jsxRuntime.jsxs(
+            content: /* @__PURE__ */ jsxRuntime.jsx(
               ui.Flex,
               {
                 direction: "column",
                 gap: 3,
                 className: "oui-rounded-sm oui-bg-base-8 oui-text-base-contrast-54",
-                children: [
-                  /* @__PURE__ */ jsxRuntime.jsx("span", { children: t("positions.column.margin.tooltip") }),
-                  /* @__PURE__ */ jsxRuntime.jsx(ui.Divider, { className: "oui-w-full" }),
-                  /* @__PURE__ */ jsxRuntime.jsx("span", { children: t("positions.column.margin.formula") })
-                ]
+                children: /* @__PURE__ */ jsxRuntime.jsx("span", { children: t("positions.column.margin.tooltip") })
               }
             ),
             children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "oui-underline oui-decoration-dotted", children: t("positions.column.margin") })
@@ -3063,7 +3720,26 @@ var useColumn = (config) => {
         onSort: true,
         width: 140,
         rule: "price",
-        render: (value) => /* @__PURE__ */ jsxRuntime.jsx(ui.Text.numeral, { children: value })
+        render: (value, record) => {
+          const isIsolated = record.margin_mode === "ISOLATED";
+          return /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { gap: 2, itemAlign: "center", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(ui.Text.numeral, { children: isIsolated ? record.margin ?? "--" : "--" }),
+            isIsolated && /* @__PURE__ */ jsxRuntime.jsx(
+              ui.IconButton,
+              {
+                color: "secondary",
+                onClick: (e) => {
+                  e.stopPropagation();
+                  ui.modal.show(AdjustMarginDialogId, {
+                    position: record,
+                    symbol: record.symbol
+                  });
+                },
+                children: /* @__PURE__ */ jsxRuntime.jsx(ui.AddCircleIcon, { size: 16, fill: "currentColor", opacity: 1 })
+              }
+            )
+          ] });
+        }
       },
       // {
       //   title: t("funding.fundingFee"),
@@ -3128,7 +3804,8 @@ var SymbolToken = (props) => {
           {
             symbol: item.symbol,
             leverage: item.leverage,
-            modalId: uiLeverage.SymbolLeverageSheetId
+            modalId: uiLeverage.SymbolLeverageSheetId,
+            marginMode: item.margin_mode
           }
         )
       ] }),
@@ -3211,11 +3888,8 @@ var Qty = (props) => {
 var Margin = (props) => {
   const { item } = props;
   const { t } = i18n.useTranslation();
-  const marginTipsContent = /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "oui-text-2xs oui-text-base-contrast-80", children: [
-    /* @__PURE__ */ jsxRuntime.jsx("div", { children: t("positions.column.margin.tooltip") }),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "oui-my-2 oui-h-px oui-w-full oui-bg-base-8" }),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { children: t("positions.column.margin.formula") })
-  ] });
+  const isIsolated = item.margin_mode === "ISOLATED";
+  const marginTipsContent = /* @__PURE__ */ jsxRuntime.jsx("div", { className: "oui-text-2xs oui-text-base-contrast-80", children: /* @__PURE__ */ jsxRuntime.jsx("div", { children: t("positions.column.margin.tooltip") }) });
   const marginLabel = /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "oui-underline oui-decoration-dotted", children: t("positions.column.margin") });
   return /* @__PURE__ */ jsxRuntime.jsx(
     ui.Statistic,
@@ -3232,7 +3906,23 @@ var Margin = (props) => {
         root: "oui-text-xs",
         label: "oui-text-2xs"
       },
-      children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text.numeral, { dp: 2, intensity: 80, children: item.mm })
+      children: /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { gap: 1, children: [
+        /* @__PURE__ */ jsxRuntime.jsx(ui.Text.numeral, { dp: 2, intensity: 80, children: isIsolated ? item.margin ?? "--" : "--" }),
+        isIsolated && /* @__PURE__ */ jsxRuntime.jsx(
+          ui.IconButton,
+          {
+            color: "secondary",
+            onClick: (e) => {
+              e.stopPropagation();
+              ui.modal.show(AdjustMarginSheetId, {
+                position: item,
+                symbol: item.symbol
+              });
+            },
+            children: /* @__PURE__ */ jsxRuntime.jsx(ui.AddCircleIcon, { size: 16, fill: "currentColor", opacity: 1 })
+          }
+        )
+      ] })
     }
   );
 };
@@ -3637,7 +4327,7 @@ var Positions = (props) => {
       columns,
       bordered: true,
       dataSource,
-      generatedRowKey: (record) => record.symbol,
+      generatedRowKey: (record, index) => `${record.symbol}-${index}`,
       renderRowContainer: (record, index, children) => {
         return /* @__PURE__ */ jsxRuntime.jsx(SymbolProvider, { symbol: record.symbol, children: /* @__PURE__ */ jsxRuntime.jsx(PositionsRowProvider, { position: record, children }) });
       },
@@ -3709,7 +4399,7 @@ var CombinePositions = (props) => {
       dataSource,
       expanded: true,
       getSubRows: (row) => row.children,
-      generatedRowKey: (record) => `${record.account_id}${record.symbol || ""}`,
+      generatedRowKey: (record, index) => `${record.account_id}${record.symbol || ""}-${index}`,
       onCell: (column, record) => {
         const isGroup = (record.children ?? []).length > 0;
         if (isGroup) {
@@ -3768,14 +4458,14 @@ var usePositionHistoryColumn = (props) => {
         onSort: (r1, r2) => {
           return r1.symbol?.localeCompare(r2.symbol || "");
         },
-        render: (value, record) => /* @__PURE__ */ jsxRuntime.jsx(SymbolInfo, { record, onSymbolChange })
+        render: (value, record) => /* @__PURE__ */ jsxRuntime.jsx(SymbolInfo2, { record, onSymbolChange })
       },
       // quantity
       {
         title: t("positions.history.column.closed&maxClosed"),
         dataIndex: "close_maxClose",
         width: 200,
-        render: (value, record) => /* @__PURE__ */ jsxRuntime.jsx(Quantity, { record })
+        render: (value, record) => /* @__PURE__ */ jsxRuntime.jsx(Quantity2, { record })
       },
       // net pnl
       {
@@ -3883,7 +4573,7 @@ var usePositionHistoryColumn = (props) => {
   );
   return column;
 };
-var SymbolInfo = (props) => {
+var SymbolInfo2 = (props) => {
   const { record, onSymbolChange } = props;
   const { t } = i18n.useTranslation();
   const tags = React2.useMemo(() => {
@@ -3997,7 +4687,7 @@ var SymbolInfo = (props) => {
     ] })
   ] });
 };
-var Quantity = (props) => {
+var Quantity2 = (props) => {
   const { record } = props;
   const { base_dp } = useSymbolContext();
   return /* @__PURE__ */ jsxRuntime.jsxs(
@@ -4130,6 +4820,8 @@ var usePositionHistoryScript = (props) => {
               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
               };
             }
@@ -4743,7 +5435,7 @@ var PositionHistory = (props) => {
         columns: column,
         bordered: true,
         dataSource: props.dataSource,
-        generatedRowKey: (record) => `${record.symbol}_${record.position_id}`,
+        generatedRowKey: (record, index) => `${record.symbol}_${record.position_id}_${index}`,
         renderRowContainer: (record, index, children) => /* @__PURE__ */ jsxRuntime.jsx(SymbolProvider, { symbol: record.symbol, children }),
         manualPagination: false,
         pagination,
@@ -5536,7 +6228,8 @@ var useCloseAllPositionsScript = (options) => {
         order_type: types.OrderType.MARKET,
         side,
         order_quantity: quantity,
-        reduce_only: true
+        reduce_only: true,
+        margin_mode: position.margin_mode
       };
     }),
     []