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

package/dist/index.d.mts

@@ -1,7 +1,7 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import React, { ReactNode, SVGProps } from 'react';
 import * as _orderly_network_types from '@orderly.network/types';
-import { API, AlgoOrderRootType, PositionType, OrderSide, OrderlyOrder, AlgoOrder } from '@orderly.network/types';
+import { API, AlgoOrderRootType, PositionType, OrderSide, OrderlyOrder, AlgoOrder, MarginMode } from '@orderly.network/types';
 import { ButtonProps } from '@orderly.network/ui';
 import * as _orderly_network_hooks from '@orderly.network/hooks';
 import { ComputedAlgoOrder, OrderValidationResult } from '@orderly.network/hooks';
@@ -284,6 +284,7 @@ declare const TPSLSimpleDialogWidget: React.FC<{
     symbol: string;
     close?: () => void;
     onComplete?: () => void;
+    marginMode?: MarginMode;
     showAdvancedTPSLDialog?: () => void;
 }>;
 declare const TPSLSimpleSheetId = "TPSLSimpleSheetId";
@@ -293,6 +294,7 @@ type TPSLBuilderOptions = {
     type: "tp" | "sl";
     triggerPrice?: number;
     symbol: string;
+    marginMode?: MarginMode;
 };
 declare const useTPSLSimpleDialog: (options: TPSLBuilderOptions) => {
     readonly symbolInfo: (<Key extends keyof API.SymbolExt>(key: Key, defaultValue?: API.SymbolExt[Key] | undefined) => API.SymbolExt[Key]) & (() => API.SymbolExt);

package/dist/index.d.ts

@@ -1,7 +1,7 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import React, { ReactNode, SVGProps } from 'react';
 import * as _orderly_network_types from '@orderly.network/types';
-import { API, AlgoOrderRootType, PositionType, OrderSide, OrderlyOrder, AlgoOrder } from '@orderly.network/types';
+import { API, AlgoOrderRootType, PositionType, OrderSide, OrderlyOrder, AlgoOrder, MarginMode } from '@orderly.network/types';
 import { ButtonProps } from '@orderly.network/ui';
 import * as _orderly_network_hooks from '@orderly.network/hooks';
 import { ComputedAlgoOrder, OrderValidationResult } from '@orderly.network/hooks';
@@ -284,6 +284,7 @@ declare const TPSLSimpleDialogWidget: React.FC<{
     symbol: string;
     close?: () => void;
     onComplete?: () => void;
+    marginMode?: MarginMode;
     showAdvancedTPSLDialog?: () => void;
 }>;
 declare const TPSLSimpleSheetId = "TPSLSimpleSheetId";
@@ -293,6 +294,7 @@ type TPSLBuilderOptions = {
     type: "tp" | "sl";
     triggerPrice?: number;
     symbol: string;
+    marginMode?: MarginMode;
 };
 declare const useTPSLSimpleDialog: (options: TPSLBuilderOptions) => {
     readonly symbolInfo: (<Key extends keyof API.SymbolExt>(key: Key, defaultValue?: API.SymbolExt[Key] | undefined) => API.SymbolExt[Key]) & (() => API.SymbolExt);

package/dist/index.js

@@ -12,12 +12,20 @@ var perp = require('@orderly.network/perp');
 var uiConnector = require('@orderly.network/ui-connector');
 
 // src/editorPopover.tsx
+var SymbolBadge = (props) => {
+  const { brokerId, brokerName, brokerNameRaw } = hooks.useBadgeBySymbol(
+    props.symbol
+  );
+  const badge = brokerName ?? brokerId ?? void 0;
+  return /* @__PURE__ */ jsxRuntime.jsx(ui.SymbolBadge, { badge, fullName: brokerNameRaw });
+};
 var OrderInfo = (props) => {
   const { t } = i18n.useTranslation();
   const { order: order2, symbolLeverage } = props;
   const { symbol } = order2;
   const markPrice = hooks.useMarkPrice(symbol);
   const indexPrice = hooks.useIndexPrice(symbol);
+  const marginModeLabel = props.marginMode === types.MarginMode.ISOLATED ? t("marginMode.isolated") : props.marginMode === types.MarginMode.CROSS ? t("marginMode.cross") : void 0;
   const leverage = hooks.useLeverageBySymbol(
     symbolLeverage ? void 0 : symbol,
     props.marginMode
@@ -46,20 +54,21 @@ var OrderInfo = (props) => {
                   {
                     className: "oui-whitespace-nowrap oui-break-normal",
                     rule: "symbol",
-                    formatString: "base-type",
+                    formatString: "base",
                     size: "sm",
                     weight: "semibold",
                     intensity: 98,
+                    suffix: /* @__PURE__ */ jsxRuntime.jsx(SymbolBadge, { symbol: symbol ?? "" }),
                     children: symbol
                   }
                 )
               ] }),
-              props.marginMode && /* @__PURE__ */ jsxRuntime.jsx(
+              marginModeLabel && /* @__PURE__ */ jsxRuntime.jsx(
                 ui.Text,
                 {
                   size: "2xs",
                   className: "oui-h-[18px] oui-rounded oui-bg-base-7 oui-px-2 oui-font-semibold oui-text-base-contrast-36",
-                  children: ui.capitalizeFirstLetter(props.marginMode)
+                  children: marginModeLabel
                 }
               ),
               /* @__PURE__ */ jsxRuntime.jsxs(
@@ -255,6 +264,7 @@ var useTPSLInputRowScript = (props) => {
       });
       return roi2 * 100;
     } catch (error) {
+      console.error("error", error);
       return null;
     }
   }, [values, leverage, rootOrderPrice, type, side]);
@@ -831,10 +841,10 @@ var TPSLQuantity = react.memo((props) => {
         tooltip: errorMsg,
         color: errorMsg ? "danger" : void 0,
         formatters: [
+          ui.inputFormatter.decimalPointFormatter,
           ui.inputFormatter.dpFormatter(props.base_dp),
           ui.inputFormatter.numberFormatter,
-          ui.inputFormatter.currencyFormatter,
-          ui.inputFormatter.decimalPointFormatter
+          ui.inputFormatter.currencyFormatter
         ],
         onValueChange: (value) => {
           props.onQuantityChange?.(value);
@@ -1106,6 +1116,7 @@ var TPSL = (props) => {
               props.close?.();
               onComplete?.();
             }).catch((err) => {
+              console.log("--->>>cancel order", err);
             });
           },
           children: t("common.confirm")
@@ -1184,21 +1195,25 @@ var PositionTPSLConfirm = (props) => {
     );
   };
   const isPositionTPSL = _isPositionTPSL;
+  const displaySymbol = hooks.useSymbolWithBroker(symbol);
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    isEditing && /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { as: "div", size: "2xs", intensity: 80, className: "oui-mb-3", children: t("tpsl.agreement", { symbol: utils.transSymbolformString(symbol) }) }),
+    isEditing && /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { as: "div", size: "2xs", intensity: 80, className: "oui-mb-3", children: t("tpsl.agreement", { symbol: displaySymbol }) }),
     /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { pb: 4, children: [
-      /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { grow: true, children: /* @__PURE__ */ jsxRuntime.jsx(
-        ui.Text.formatted,
-        {
-          rule: "symbol",
-          formatString: "base-type",
-          size: "base",
-          showIcon: true,
-          as: "div",
-          intensity: 80,
-          children: symbol
-        }
-      ) }),
+      /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { direction: "column", itemAlign: "start", gap: 1, grow: true, children: [
+        /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { grow: true, children: /* @__PURE__ */ jsxRuntime.jsx(
+          ui.Text.formatted,
+          {
+            rule: "symbol",
+            formatString: "base",
+            size: "base",
+            showIcon: true,
+            as: "div",
+            intensity: 80,
+            children: symbol
+          }
+        ) }),
+        /* @__PURE__ */ jsxRuntime.jsx(SymbolBadge, { symbol })
+      ] }),
       /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { gap: 1, children: [
         isPositionTPSL && /* @__PURE__ */ jsxRuntime.jsx(ui.Badge, { size: "xs", color: "primary", children: t("common.position") }),
         /* @__PURE__ */ jsxRuntime.jsx(TPSLOrderType, { tpPrice, slPrice }),
@@ -1343,9 +1358,10 @@ var useTPSLBuilder = (options) => {
   const [needConfirm] = hooks.useLocalStorage("orderly_order_confirm", true);
   const { marginMode: symbolMarginMode } = hooks.useMarginModeBySymbol(symbol);
   const [{ rows: positions }] = hooks.usePositionStream();
-  const mainAccountPosition = positions.find(
-    (item) => item.symbol === symbol && item.margin_mode === (options.position?.margin_mode ?? symbolMarginMode)
-  );
+  const mainAccountPosition = positions.find((item) => {
+    const marginMode = options.position?.margin_mode ?? symbolMarginMode;
+    return item.symbol === symbol && item.margin_mode === marginMode;
+  });
   const isSubAccount = options.position?.account_id && options.position?.account_id !== state.mainAccountId;
   const position = isSubAccount ? options.position : mainAccountPosition;
   const estLiqPrice = hooks.useEstLiqPriceBySymbol(
@@ -1953,6 +1969,8 @@ var useTPSLAdvanced = (props) => {
     helper.validate(isSlPriceError ? slPriceError : void 0).then(() => {
       props.onSubmit(formattedOrder);
     }).catch((err) => {
+      console.log("metaState", metaState);
+      console.log("err", err);
     });
   };
   return {
@@ -2618,6 +2636,7 @@ var TPSLDetailUI = (props) => {
     symbolInfo
   } = props;
   const { estLiqPrice } = useTPSLDetailContext();
+  console.log("----- position", position);
   return /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { children: /* @__PURE__ */ jsxRuntime.jsxs(ui.ScrollArea, { className: ui.cn(isMobile && "oui-h-[calc(100vh-100px)]"), children: [
     /* @__PURE__ */ jsxRuntime.jsx(
       OrderInfo,
@@ -2912,9 +2931,8 @@ ui.registerSimpleSheet(TPSLDetailSheetId, TPSLDetailWidget, {
   }
 });
 var useTPSLSimpleDialog = (options) => {
-  const { type, triggerPrice, symbol } = options;
+  const { type, triggerPrice, symbol, marginMode } = options;
   const symbolInfo = hooks.useSymbolsInfo();
-  const { marginMode } = hooks.useMarginModeBySymbol(symbol ?? "");
   const [{ rows: positions }, positionsInfo] = hooks.usePositionStream(symbol);
   const position = positions?.find((item) => item.margin_mode === marginMode);
   react.useRef(types.AlgoOrderRootType.TP_SL);
@@ -3164,7 +3182,7 @@ var TPSLSimpleDialogUI = (props) => {
       TPSLQuantity,
       {
         maxQty: props.maxQty,
-        quantity: Number(props.orderQuantity ?? props.maxQty),
+        quantity: props.orderQuantity ?? props.maxQty,
         baseTick: props.symbolInfo("base_tick"),
         base_dp: props.symbolInfo("base_dp"),
         base: props.symbolInfo("base"),
@@ -3633,6 +3651,7 @@ var EditBracketOrderUI = (props) => {
               props.onSubmit().then(() => {
                 props.onClose?.();
               }).catch((err) => {
+                console.log("--->>>cancel order", err);
               });
             },
             children: t("common.confirm")