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

package/dist/index.d.mts

@@ -15535,6 +15535,8 @@ declare const TradingviewWidget: React$1.ForwardRefExoticComponent<TradingviewWi
 
 declare const TradingviewUI: React__default.ForwardRefExoticComponent<TradingviewUIPropsInterface & React__default.RefAttributes<HTMLDivElement>>;
 
+declare const InjectableTradingviewDesktop: React$1.ComponentType<TradingviewUIPropsInterface>;
+
 declare function useTradingviewScript(props: TradingviewWidgetPropsInterface): {
     tradingViewScriptSrc: string | undefined;
     chartRef: React$1.RefObject<HTMLDivElement>;
@@ -15555,4 +15557,4 @@ declare function useTradingviewScript(props: TradingviewWidgetPropsInterface): {
     fullscreen: any;
 };
 
-export { type DisplayControlSettingInterface, type TradingviewLocaleCode, TradingviewUI, type TradingviewUIPropsInterface, TradingviewWidget, type TradingviewWidgetPropsInterface, useTradingviewScript };
+export { type DisplayControlSettingInterface, InjectableTradingviewDesktop, type TradingviewLocaleCode, TradingviewUI, type TradingviewUIPropsInterface, TradingviewWidget, type TradingviewWidgetPropsInterface, useTradingviewScript };

package/dist/index.d.ts

@@ -15535,6 +15535,8 @@ declare const TradingviewWidget: React$1.ForwardRefExoticComponent<TradingviewWi
 
 declare const TradingviewUI: React__default.ForwardRefExoticComponent<TradingviewUIPropsInterface & React__default.RefAttributes<HTMLDivElement>>;
 
+declare const InjectableTradingviewDesktop: React$1.ComponentType<TradingviewUIPropsInterface>;
+
 declare function useTradingviewScript(props: TradingviewWidgetPropsInterface): {
     tradingViewScriptSrc: string | undefined;
     chartRef: React$1.RefObject<HTMLDivElement>;
@@ -15555,4 +15557,4 @@ declare function useTradingviewScript(props: TradingviewWidgetPropsInterface): {
     fullscreen: any;
 };
 
-export { type DisplayControlSettingInterface, type TradingviewLocaleCode, TradingviewUI, type TradingviewUIPropsInterface, TradingviewWidget, type TradingviewWidgetPropsInterface, useTradingviewScript };
+export { type DisplayControlSettingInterface, InjectableTradingviewDesktop, type TradingviewLocaleCode, TradingviewUI, type TradingviewUIPropsInterface, TradingviewWidget, type TradingviewWidgetPropsInterface, useTradingviewScript };

package/dist/index.js

@@ -2495,7 +2495,8 @@ function useEditOrder(onToast) {
         order_type: order.type,
         side: order.side,
         visible_quantity: 0,
-        reduce_only: order.reduce_only
+        reduce_only: order.reduce_only,
+        margin_mode: order.margin_mode
       };
       if (new utils.Decimal(order.visible_quantity ?? order.visible ?? 0).eq(
         order.quantity
@@ -2921,7 +2922,10 @@ var _OrderLineService = class _OrderLineService {
     this.cleanOldPendingOrders(this.pendingOrders);
     this.tpslCalService.prepareTpslPnlMap(this.pendingOrders);
     this.tpslCalService.prepareQuantityTpslNoMap(this.pendingOrders);
-    this.pendingOrders.forEach((order) => this.renderPendingOrder(order));
+    const needDrawMarginMode = this.pendingOrders.length > 1;
+    this.pendingOrders.forEach(
+      (order) => this.renderPendingOrder(order, needDrawMarginMode)
+    );
   }
   updatePositions(positions) {
     const changed = this.tpslCalService.recalculatePnl(
@@ -2930,12 +2934,12 @@ var _OrderLineService = class _OrderLineService {
     );
     this.pendingOrders.filter((order) => changed.includes(getOrderId(order))).forEach((order) => this.renderPendingOrder(order));
   }
-  renderPendingOrder(order) {
+  renderPendingOrder(order, needDrawMarginMode = false) {
     const orderId = _OrderLineService.getOrderId(order);
     if (!orderId) {
       return;
     }
-    const orderLine = this.drawOrderLine(orderId, order);
+    const orderLine = this.drawOrderLine(orderId, order, needDrawMarginMode);
     if (orderLine) {
       this.pendingOrderLineMap.set(orderId, orderLine);
     }
@@ -3073,8 +3077,8 @@ var _OrderLineService = class _OrderLineService {
     }
     return utils.commify(new utils.Decimal(pendingOrder.quantity).toString());
   }
-  drawOrderLine(orderId, pendingOrder) {
-    const text = isTpslOrder(pendingOrder) ? this.getTPSLText(pendingOrder) : _OrderLineService.getText(pendingOrder);
+  drawOrderLine(orderId, pendingOrder, needDrawMarginMode = false) {
+    let text = isTpslOrder(pendingOrder) ? this.getTPSLText(pendingOrder) : _OrderLineService.getText(pendingOrder);
     if (text === null) {
       return null;
     }
@@ -3099,7 +3103,10 @@ var _OrderLineService = class _OrderLineService {
     const lineLength = 100;
     const quantity = this.getOrderQuantity(pendingOrder);
     const textColor = colorConfig.textColor;
-    orderLine.setText(text).setCancelButtonIconColor(colorConfig.closeIcon).setCancelButtonBorderColor(color).setBodyTextColor(textColor).setBodyBorderColor(borderColor).setQuantityBorderColor(borderColor).setQuantityTextColor(color).setLineColor(color).setLineLength(lineLength).setQuantity(quantity ?? "").setPrice(price);
+    if (needDrawMarginMode) {
+      text += ` (${pendingOrder.margin_mode === "ISOLATED" ? "Isolated" : "Cross"})`;
+    }
+    orderLine.setText(text).setCancelButtonIconColor(colorConfig.closeIcon).setCancelButtonBorderColor(color).setBodyTextColor(textColor).setBodyBorderColor(borderColor).setQuantityBorderColor(borderColor).setQuantityTextColor(color).setLineColor(color).setLineLength(lineLength).setQuantity(quantity).setPrice(price);
     if (this.broker.mode !== 3 /* MOBILE */) {
       orderLine.onCancel(null, () => this.broker.cancelOrder(pendingOrder));
       this.applyEditOnMove(orderLine, pendingOrder);
@@ -3169,7 +3176,10 @@ var PositionLineService = class _PositionLineService {
       this.removePositions();
       this.currentSymbol = positions[0].symbol;
     }
-    positions.forEach((position, idx) => this.drawPositionLine(position, idx));
+    const needDrawMarginMode = positions.length > 1;
+    positions.forEach(
+      (position, idx) => this.drawPositionLine(position, idx, needDrawMarginMode)
+    );
     this.lastPositions = positions;
   }
   getBasePositionLine() {
@@ -3209,7 +3219,7 @@ var PositionLineService = class _PositionLineService {
       delete this.positionLines[Number(lineId)];
     });
   }
-  drawPositionLine(position, idx) {
+  drawPositionLine(position, idx, needDrawMarginMode = false) {
     const colorConfig = this.broker.colorConfig;
     const isPositiveBalance = position.balance >= 0;
     const pnlDecimal = new utils.Decimal(position.unrealPnl);
@@ -3224,22 +3234,24 @@ var PositionLineService = class _PositionLineService {
     const sideColor = isPositiveBalance ? colorConfig.upColor : colorConfig.downColor;
     const price = new utils.Decimal(position.open).toNumber();
     this.positionLines[idx] = this.positionLines[idx] ?? this.getBasePositionLine();
-    let line = this.positionLines[idx].setQuantity(_PositionLineService.getPositionQuantity(position.balance)).setPrice(price).setText(
-      _PositionLineService.getPositionPnL(
-        position.unrealPnl,
-        position.unrealPnlDecimal
-      )
+    let text = _PositionLineService.getPositionPnL(
+      position.unrealPnl,
+      position.unrealPnlDecimal
     );
+    const quantity = _PositionLineService.getPositionQuantity(position.balance);
+    if (needDrawMarginMode) {
+      text += ` (${position.marginMode === "ISOLATED" ? "Isolated" : "Cross"})`;
+    }
+    const line = this.positionLines[idx].setQuantity(quantity).setPrice(price).setCloseButtonIconColor(colorConfig.closeIcon).setCloseButtonBorderColor(sideColor).setBodyBackgroundColor(pnlColor).setQuantityTextColor(sideColor).setBodyBorderColor(pnlColor).setLineColor(sideColor).setQuantityBorderColor(sideColor).setText(text);
     if (colorConfig.closeIcon) {
-      line = line.setCloseButtonIconColor(colorConfig.closeIcon);
+      line.setCloseButtonIconColor(colorConfig.closeIcon);
     }
     if (sideColor) {
-      line = line.setCloseButtonBorderColor(sideColor).setQuantityTextColor(sideColor).setLineColor(sideColor).setQuantityBorderColor(sideColor);
+      line.setCloseButtonBorderColor(sideColor).setQuantityTextColor(sideColor).setLineColor(sideColor).setQuantityBorderColor(sideColor);
     }
     if (pnlColor) {
-      line = line.setBodyBackgroundColor(pnlColor).setBodyBorderColor(pnlColor);
+      line.setBodyBackgroundColor(pnlColor).setBodyBorderColor(pnlColor);
     }
-    this.positionLines[idx] = line;
     if (this.broker.mode !== 3 /* MOBILE */) {
       this.positionLines[idx].onClose(null, () => {
         this.broker.closePosition(position);
@@ -3593,14 +3605,20 @@ var Renderer = class {
 };
 
 // src/tradingviewAdapter/hooks/useCreateRenderer.ts
-function useCreateRenderer(symbol, displayControlSetting) {
+function useCreateRenderer(symbol, displayControlSetting, marginMode) {
   const [renderer, setRenderer] = React3.useState();
   const rendererRef = React3.useRef();
   const { state } = hooks.useAccount();
   const [unPnlPriceBasis] = hooks.useLocalStorage("unPnlPriceBasis", "markPrice");
-  const [{ rows: positions }, positionsInfo] = hooks.usePositionStream(symbol, {
+  const [{ rows }, positionsInfo] = hooks.usePositionStream(symbol, {
     calcMode: unPnlPriceBasis
   });
+  const positions = React3.useMemo(() => {
+    if (!rows?.length) return [];
+    return rows.filter(
+      (item) => item.symbol === symbol && (marginMode == null || item.margin_mode === marginMode)
+    );
+  }, [rows, symbol, marginMode]);
   const [pendingOrders] = hooks.useOrderStream({
     status: types.OrderStatus.INCOMPLETE,
     symbol
@@ -3639,7 +3657,7 @@ function useCreateRenderer(symbol, displayControlSetting) {
       renderer?.renderPositions([]);
       return;
     }
-    const positionList = (positions ?? []).filter((_) => _.symbol === symbol).map((item) => {
+    const positionList = positions.map((item) => {
       return {
         symbol: item.symbol,
         open: item.average_open_price,
@@ -3650,7 +3668,7 @@ function useCreateRenderer(symbol, displayControlSetting) {
         interest: 0,
         unrealPnlDecimal: 2,
         basePriceDecimal: 4,
-        est_liq_price: item.est_liq_price ?? null
+        marginMode: item.margin_mode
       };
     });
     renderer?.renderPositions(positionList);
@@ -3705,9 +3723,7 @@ function useCreateRenderer(symbol, displayControlSetting) {
       renderer?.renderPendingOrders([]);
       return;
     }
-    const symbolPosition = (positions ?? []).find(
-      (item) => item.symbol === symbol
-    );
+    const symbolPosition = positions.find((item) => item.symbol === symbol);
     pendingOrders?.forEach((order) => {
       if (symbol !== order.symbol) {
         return;
@@ -4290,6 +4306,7 @@ function useTradingviewScript(props) {
       watchOrderbook: true
     }
   );
+  const { marginMode } = hooks.useMarginModeBySymbol(symbol ?? "");
   const [displayControlState, setDisplayControlState] = React3.useState(() => {
     const displaySettingInfo = localStorage.getItem(
       TradingViewSDKLocalstorageKey.displayControlSetting
@@ -4380,7 +4397,8 @@ function useTradingviewScript(props) {
   });
   const [createRenderer, removeRenderer] = useCreateRenderer(
     symbol,
-    displayControlState
+    displayControlState,
+    marginMode
   );
   const onFullScreenChange = () => {
     if (fullscreen) {
@@ -4662,9 +4680,25 @@ var NoTradingview = () => {
   ] }) });
 };
 var TopBar = (props) => {
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "top-toolbar oui-flex oui-h-[44px] oui-justify-between md:oui-justify-start oui-items-center oui-p-2 md:oui-px-3 md:oui-pt-3 md:oui-pb-[14px]", children: props.children });
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "top-toolbar oui-flex oui-h-[44px] oui-justify-between md:oui-justify-start oui-items-center oui-p-2 md:oui-px-3 md:oui-pt-3 md:oui-pb-[14px] oui-w-full", children: props.children });
 };
 var topBar_default = TopBar;
+var TradingviewChart = ({ chartRef }) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      "data-testid": "tradingview-chart",
+      ref: chartRef,
+      className: "oui-size-full oui-overflow-hidden"
+    }
+  );
+};
+
+// src/components/tradingview.injectable.tsx
+var InjectableTradingviewDesktop = ui.injectable(
+  TradingviewChart,
+  "TradingView.Desktop"
+);
 var LazyLineType = React3__default.default.lazy(() => Promise.resolve().then(() => (init_lineType(), lineType_exports)));
 var LazyTimeInterval = React3__default.default.lazy(
   () => Promise.resolve().then(() => (init_timeInterval(), timeInterval_exports)).then((mod) => ({ default: mod.TimeInterval }))
@@ -4679,6 +4713,98 @@ var LazyDesktopDisplayControl = React3__default.default.lazy(
     default: mod.DesktopDisplayControl
   }))
 );
+var MobileTopBar = ({
+  interval,
+  changeInterval,
+  displayControlState,
+  changeDisplaySetting,
+  openChartIndicators
+}) => {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    ui.Flex,
+    {
+      gapX: 2,
+      width: "100%",
+      justify: "between",
+      className: "oui-hide-scrollbar oui-overflow-x-scroll",
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(React3__default.default.Suspense, { fallback: null, children: /* @__PURE__ */ jsxRuntime.jsx(
+          LazyTimeInterval,
+          {
+            interval: interval ?? "15",
+            changeInterval
+          }
+        ) }),
+        /* @__PURE__ */ jsxRuntime.jsx(OperateButton, { onClick: openChartIndicators, children: /* @__PURE__ */ jsxRuntime.jsx(IndicatorsIcon, {}) }),
+        /* @__PURE__ */ jsxRuntime.jsx(React3__default.default.Suspense, { fallback: null, children: /* @__PURE__ */ jsxRuntime.jsx(
+          LazyMobileDisplayControl,
+          {
+            displayControlState,
+            changeDisplayControlState: changeDisplaySetting
+          }
+        ) })
+      ]
+    }
+  );
+};
+var DesktopTopBar = ({
+  interval,
+  changeInterval,
+  displayControlState,
+  changeDisplaySetting,
+  openChartIndicators,
+  lineType,
+  changeLineType,
+  openChartSetting,
+  fullscreen,
+  onFullScreenChange
+}) => {
+  return /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { justify: "between", itemAlign: "center", width: "100%", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(React3__default.default.Suspense, { fallback: null, children: /* @__PURE__ */ jsxRuntime.jsx(
+        LazyTimeInterval,
+        {
+          interval: interval ?? "1",
+          changeInterval
+        }
+      ) }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        ui.Divider,
+        {
+          direction: "vertical",
+          className: "oui-h-4",
+          mx: 2,
+          intensity: 8
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { justify: "start", itemAlign: "center", gap: 2, children: [
+        /* @__PURE__ */ jsxRuntime.jsx(React3__default.default.Suspense, { fallback: null, children: /* @__PURE__ */ jsxRuntime.jsx(
+          LazyDesktopDisplayControl,
+          {
+            displayControlState,
+            changeDisplayControlState: changeDisplaySetting
+          }
+        ) }),
+        /* @__PURE__ */ jsxRuntime.jsx(OperateButton, { onClick: openChartIndicators, children: /* @__PURE__ */ jsxRuntime.jsx(IndicatorsIcon, {}) }),
+        /* @__PURE__ */ jsxRuntime.jsx(React3__default.default.Suspense, { fallback: null, children: /* @__PURE__ */ jsxRuntime.jsx(LazyLineType, { lineType, changeLineType }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(OperateButton, { onClick: openChartSetting, children: /* @__PURE__ */ jsxRuntime.jsx(SettingIcon, {}) })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(ui.Flex, { children: fullscreen ? /* @__PURE__ */ jsxRuntime.jsx(
+      ZoomOutIcon,
+      {
+        className: "oui-text-base-contrast-54 hover:oui-text-base-contrast oui-cursor-pointer",
+        onClick: onFullScreenChange
+      }
+    ) : /* @__PURE__ */ jsxRuntime.jsx(
+      ZoomInIcon,
+      {
+        className: "oui-text-base-contrast-54 hover:oui-text-base-contrast oui-cursor-pointer",
+        onClick: onFullScreenChange
+      }
+    ) })
+  ] });
+};
 var OperateButton = ({ children, onClick }) => {
   return /* @__PURE__ */ jsxRuntime.jsx(
     ui.Box,
@@ -4748,83 +4874,31 @@ var TradingviewUI = React3.forwardRef((props, ref) => {
             props.classNames?.content
           ),
           children: [
-            /* @__PURE__ */ jsxRuntime.jsx(topBar_default, { children: isMobile ? /* @__PURE__ */ jsxRuntime.jsxs(
-              ui.Flex,
+            /* @__PURE__ */ jsxRuntime.jsx(topBar_default, { children: isMobile ? /* @__PURE__ */ jsxRuntime.jsx(
+              MobileTopBar,
               {
-                gapX: 2,
-                width: "100%",
-                justify: "between",
-                className: "oui-hide-scrollbar oui-overflow-x-scroll",
-                children: [
-                  /* @__PURE__ */ jsxRuntime.jsx(React3__default.default.Suspense, { fallback: null, children: /* @__PURE__ */ jsxRuntime.jsx(
-                    LazyTimeInterval,
-                    {
-                      interval: interval ?? "15",
-                      changeInterval
-                    }
-                  ) }),
-                  /* @__PURE__ */ jsxRuntime.jsx(OperateButton, { onClick: openChartIndicators, children: /* @__PURE__ */ jsxRuntime.jsx(IndicatorsIcon, {}) }),
-                  /* @__PURE__ */ jsxRuntime.jsx(React3__default.default.Suspense, { fallback: null, children: /* @__PURE__ */ jsxRuntime.jsx(
-                    LazyMobileDisplayControl,
-                    {
-                      displayControlState,
-                      changeDisplayControlState: changeDisplaySetting
-                    }
-                  ) })
-                ]
+                interval,
+                changeInterval,
+                displayControlState,
+                changeDisplaySetting,
+                openChartIndicators
               }
-            ) : /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { justify: "between", itemAlign: "center", width: "100%", children: [
-              /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { children: [
-                /* @__PURE__ */ jsxRuntime.jsx(React3__default.default.Suspense, { fallback: null, children: /* @__PURE__ */ jsxRuntime.jsx(
-                  LazyTimeInterval,
-                  {
-                    interval: interval ?? "1",
-                    changeInterval
-                  }
-                ) }),
-                /* @__PURE__ */ jsxRuntime.jsx(
-                  ui.Divider,
-                  {
-                    direction: "vertical",
-                    className: "oui-h-4",
-                    mx: 2,
-                    intensity: 8
-                  }
-                ),
-                /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { justify: "start", itemAlign: "center", gap: 2, children: [
-                  /* @__PURE__ */ jsxRuntime.jsx(React3__default.default.Suspense, { fallback: null, children: /* @__PURE__ */ jsxRuntime.jsx(
-                    LazyDesktopDisplayControl,
-                    {
-                      displayControlState,
-                      changeDisplayControlState: changeDisplaySetting
-                    }
-                  ) }),
-                  /* @__PURE__ */ jsxRuntime.jsx(OperateButton, { onClick: openChartIndicators, children: /* @__PURE__ */ jsxRuntime.jsx(IndicatorsIcon, {}) }),
-                  /* @__PURE__ */ jsxRuntime.jsx(React3__default.default.Suspense, { fallback: null, children: /* @__PURE__ */ jsxRuntime.jsx(
-                    LazyLineType,
-                    {
-                      lineType,
-                      changeLineType
-                    }
-                  ) }),
-                  /* @__PURE__ */ jsxRuntime.jsx(OperateButton, { onClick: openChartSetting, children: /* @__PURE__ */ jsxRuntime.jsx(SettingIcon, {}) })
-                ] })
-              ] }),
-              /* @__PURE__ */ jsxRuntime.jsx(ui.Flex, { children: props.fullscreen ? /* @__PURE__ */ jsxRuntime.jsx(
-                ZoomOutIcon,
-                {
-                  className: "oui-text-base-contrast-54 hover:oui-text-base-contrast oui-cursor-pointer",
-                  onClick: onFullScreenChange
-                }
-              ) : /* @__PURE__ */ jsxRuntime.jsx(
-                ZoomInIcon,
-                {
-                  className: "oui-text-base-contrast-54 hover:oui-text-base-contrast oui-cursor-pointer",
-                  onClick: onFullScreenChange
-                }
-              ) })
-            ] }) }),
-            /* @__PURE__ */ jsxRuntime.jsx("div", { ref: chartRef, className: "oui-size-full oui-overflow-hidden" })
+            ) : /* @__PURE__ */ jsxRuntime.jsx(
+              DesktopTopBar,
+              {
+                interval,
+                changeInterval,
+                displayControlState,
+                changeDisplaySetting,
+                openChartIndicators,
+                lineType,
+                changeLineType,
+                openChartSetting,
+                fullscreen: props.fullscreen,
+                onFullScreenChange
+              }
+            ) }),
+            /* @__PURE__ */ jsxRuntime.jsx(InjectableTradingviewDesktop, { ...props })
           ]
         }
       )
@@ -4833,9 +4907,10 @@ var TradingviewUI = React3.forwardRef((props, ref) => {
 });
 var TradingviewWidget = React3.forwardRef((props, ref) => {
   const state = useTradingviewScript(props);
-  return /* @__PURE__ */ jsxRuntime.jsx(TradingviewUI, { ...state, ref });
+  return /* @__PURE__ */ jsxRuntime.jsx(TradingviewUI, { ...state });
 });
 
+exports.InjectableTradingviewDesktop = InjectableTradingviewDesktop;
 exports.TradingviewUI = TradingviewUI;
 exports.TradingviewWidget = TradingviewWidget;
 exports.useTradingviewScript = useTradingviewScript;