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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/dist/index.d.mts +16 -2
  2. package/dist/index.d.ts +16 -2
  3. package/dist/index.js +112 -46
  4. package/dist/index.js.map +1 -1
  5. package/dist/index.mjs +115 -49
  6. package/dist/index.mjs.map +1 -1
  7. package/package.json +10 -10
package/dist/index.d.mts CHANGED
@@ -1,7 +1,7 @@
1
1
  import * as react_jsx_runtime from 'react/jsx-runtime';
2
2
  import React, { ReactNode, SVGProps } from 'react';
3
3
  import * as _orderly_network_types from '@orderly.network/types';
4
- import { API, AlgoOrderRootType, PositionType, OrderSide, OrderlyOrder, AlgoOrder } from '@orderly.network/types';
4
+ import { API, AlgoOrderRootType, PositionType, OrderSide, OrderlyOrder, AlgoOrder, MarginMode } from '@orderly.network/types';
5
5
  import { ButtonProps } from '@orderly.network/ui';
6
6
  import * as _orderly_network_hooks from '@orderly.network/hooks';
7
7
  import { ComputedAlgoOrder, OrderValidationResult } from '@orderly.network/hooks';
@@ -98,9 +98,13 @@ declare const useTPSLBuilder: (options: TPSLBuilderOptions$1 & PropsWithTriggerP
98
98
  trigger_price_type?: _orderly_network_hooks.OrderValidationItem | undefined;
99
99
  child_orders?: _orderly_network_hooks.OrderValidationItem | undefined;
100
100
  position_type?: _orderly_network_hooks.OrderValidationItem | undefined;
101
+ tp_offset_from_mark?: _orderly_network_hooks.OrderValidationItem | undefined;
102
+ tp_offset_percentage_from_mark?: _orderly_network_hooks.OrderValidationItem | undefined;
101
103
  tp_trigger_price?: _orderly_network_hooks.OrderValidationItem | undefined;
102
104
  tp_order_price?: _orderly_network_hooks.OrderValidationItem | undefined;
103
105
  tp_order_type?: _orderly_network_hooks.OrderValidationItem | undefined;
106
+ sl_offset_from_mark?: _orderly_network_hooks.OrderValidationItem | undefined;
107
+ sl_offset_percentage_from_mark?: _orderly_network_hooks.OrderValidationItem | undefined;
104
108
  sl_trigger_price?: _orderly_network_hooks.OrderValidationItem | undefined;
105
109
  sl_order_price?: _orderly_network_hooks.OrderValidationItem | undefined;
106
110
  sl_order_type?: _orderly_network_hooks.OrderValidationItem | undefined;
@@ -148,9 +152,13 @@ declare const useTPSLBuilder: (options: TPSLBuilderOptions$1 & PropsWithTriggerP
148
152
  trigger_price_type?: _orderly_network_hooks.OrderValidationItem | undefined;
149
153
  child_orders?: _orderly_network_hooks.OrderValidationItem | undefined;
150
154
  position_type?: _orderly_network_hooks.OrderValidationItem | undefined;
155
+ tp_offset_from_mark?: _orderly_network_hooks.OrderValidationItem | undefined;
156
+ tp_offset_percentage_from_mark?: _orderly_network_hooks.OrderValidationItem | undefined;
151
157
  tp_trigger_price?: _orderly_network_hooks.OrderValidationItem | undefined;
152
158
  tp_order_price?: _orderly_network_hooks.OrderValidationItem | undefined;
153
159
  tp_order_type?: _orderly_network_hooks.OrderValidationItem | undefined;
160
+ sl_offset_from_mark?: _orderly_network_hooks.OrderValidationItem | undefined;
161
+ sl_offset_percentage_from_mark?: _orderly_network_hooks.OrderValidationItem | undefined;
154
162
  sl_trigger_price?: _orderly_network_hooks.OrderValidationItem | undefined;
155
163
  sl_order_price?: _orderly_network_hooks.OrderValidationItem | undefined;
156
164
  sl_order_type?: _orderly_network_hooks.OrderValidationItem | undefined;
@@ -238,7 +246,7 @@ declare const useTPSLAdvanced: (props: Props$3) => {
238
246
  slPriceError: OrderValidationResult | null;
239
247
  estLiqPrice: number | null;
240
248
  estLiqPriceDistance: number | null;
241
- setValue: (key: "symbol" | "type" | "order_type" | "margin_mode" | "order_type_ext" | "order_price" | "order_quantity" | "order_amount" | "visible_quantity" | "side" | "reduce_only" | "slippage" | "order_tag" | "level" | "post_only_adjust" | "client_order_id" | "total" | "start_price" | "end_price" | "total_orders" | "distribution_type" | "skew" | "activated_price" | "callback_value" | "callback_rate" | "quantity" | "price" | "algo_type" | "trigger_price_type" | "trigger_price" | "child_orders" | "position_type" | "tp_pnl" | "tp_offset" | "tp_offset_percentage" | "tp_ROI" | "tp_trigger_price" | "tp_order_price" | "tp_order_type" | "sl_pnl" | "sl_offset" | "sl_offset_percentage" | "sl_ROI" | "sl_trigger_price" | "sl_order_price" | "sl_order_type", value: any, options?: {
249
+ setValue: (key: "symbol" | "type" | "order_type" | "margin_mode" | "order_type_ext" | "order_price" | "order_quantity" | "order_amount" | "visible_quantity" | "side" | "reduce_only" | "slippage" | "order_tag" | "level" | "post_only_adjust" | "client_order_id" | "total" | "start_price" | "end_price" | "total_orders" | "distribution_type" | "skew" | "activated_price" | "callback_value" | "callback_rate" | "quantity" | "price" | "algo_type" | "trigger_price_type" | "trigger_price" | "child_orders" | "position_type" | "tp_pnl" | "tp_offset" | "tp_offset_percentage" | "tp_offset_from_mark" | "tp_offset_percentage_from_mark" | "tp_ROI" | "tp_trigger_price" | "tp_order_price" | "tp_order_type" | "sl_pnl" | "sl_offset" | "sl_offset_percentage" | "sl_offset_from_mark" | "sl_offset_percentage_from_mark" | "sl_ROI" | "sl_trigger_price" | "sl_order_price" | "sl_order_type", value: any, options?: {
242
250
  shouldUpdateLastChangedField?: boolean;
243
251
  }) => void;
244
252
  setValues: (values: Partial<OrderlyOrder>) => void;
@@ -284,6 +292,7 @@ declare const TPSLSimpleDialogWidget: React.FC<{
284
292
  symbol: string;
285
293
  close?: () => void;
286
294
  onComplete?: () => void;
295
+ marginMode?: MarginMode;
287
296
  showAdvancedTPSLDialog?: () => void;
288
297
  }>;
289
298
  declare const TPSLSimpleSheetId = "TPSLSimpleSheetId";
@@ -293,6 +302,7 @@ type TPSLBuilderOptions = {
293
302
  type: "tp" | "sl";
294
303
  triggerPrice?: number;
295
304
  symbol: string;
305
+ marginMode?: MarginMode;
296
306
  };
297
307
  declare const useTPSLSimpleDialog: (options: TPSLBuilderOptions) => {
298
308
  readonly symbolInfo: (<Key extends keyof API.SymbolExt>(key: Key, defaultValue?: API.SymbolExt[Key] | undefined) => API.SymbolExt[Key]) & (() => API.SymbolExt);
@@ -340,9 +350,13 @@ declare const useTPSLSimpleDialog: (options: TPSLBuilderOptions) => {
340
350
  trigger_price_type?: _orderly_network_hooks.OrderValidationItem | undefined;
341
351
  child_orders?: _orderly_network_hooks.OrderValidationItem | undefined;
342
352
  position_type?: _orderly_network_hooks.OrderValidationItem | undefined;
353
+ tp_offset_from_mark?: _orderly_network_hooks.OrderValidationItem | undefined;
354
+ tp_offset_percentage_from_mark?: _orderly_network_hooks.OrderValidationItem | undefined;
343
355
  tp_trigger_price?: _orderly_network_hooks.OrderValidationItem | undefined;
344
356
  tp_order_price?: _orderly_network_hooks.OrderValidationItem | undefined;
345
357
  tp_order_type?: _orderly_network_hooks.OrderValidationItem | undefined;
358
+ sl_offset_from_mark?: _orderly_network_hooks.OrderValidationItem | undefined;
359
+ sl_offset_percentage_from_mark?: _orderly_network_hooks.OrderValidationItem | undefined;
346
360
  sl_trigger_price?: _orderly_network_hooks.OrderValidationItem | undefined;
347
361
  sl_order_price?: _orderly_network_hooks.OrderValidationItem | undefined;
348
362
  sl_order_type?: _orderly_network_hooks.OrderValidationItem | undefined;
package/dist/index.d.ts CHANGED
@@ -1,7 +1,7 @@
1
1
  import * as react_jsx_runtime from 'react/jsx-runtime';
2
2
  import React, { ReactNode, SVGProps } from 'react';
3
3
  import * as _orderly_network_types from '@orderly.network/types';
4
- import { API, AlgoOrderRootType, PositionType, OrderSide, OrderlyOrder, AlgoOrder } from '@orderly.network/types';
4
+ import { API, AlgoOrderRootType, PositionType, OrderSide, OrderlyOrder, AlgoOrder, MarginMode } from '@orderly.network/types';
5
5
  import { ButtonProps } from '@orderly.network/ui';
6
6
  import * as _orderly_network_hooks from '@orderly.network/hooks';
7
7
  import { ComputedAlgoOrder, OrderValidationResult } from '@orderly.network/hooks';
@@ -98,9 +98,13 @@ declare const useTPSLBuilder: (options: TPSLBuilderOptions$1 & PropsWithTriggerP
98
98
  trigger_price_type?: _orderly_network_hooks.OrderValidationItem | undefined;
99
99
  child_orders?: _orderly_network_hooks.OrderValidationItem | undefined;
100
100
  position_type?: _orderly_network_hooks.OrderValidationItem | undefined;
101
+ tp_offset_from_mark?: _orderly_network_hooks.OrderValidationItem | undefined;
102
+ tp_offset_percentage_from_mark?: _orderly_network_hooks.OrderValidationItem | undefined;
101
103
  tp_trigger_price?: _orderly_network_hooks.OrderValidationItem | undefined;
102
104
  tp_order_price?: _orderly_network_hooks.OrderValidationItem | undefined;
103
105
  tp_order_type?: _orderly_network_hooks.OrderValidationItem | undefined;
106
+ sl_offset_from_mark?: _orderly_network_hooks.OrderValidationItem | undefined;
107
+ sl_offset_percentage_from_mark?: _orderly_network_hooks.OrderValidationItem | undefined;
104
108
  sl_trigger_price?: _orderly_network_hooks.OrderValidationItem | undefined;
105
109
  sl_order_price?: _orderly_network_hooks.OrderValidationItem | undefined;
106
110
  sl_order_type?: _orderly_network_hooks.OrderValidationItem | undefined;
@@ -148,9 +152,13 @@ declare const useTPSLBuilder: (options: TPSLBuilderOptions$1 & PropsWithTriggerP
148
152
  trigger_price_type?: _orderly_network_hooks.OrderValidationItem | undefined;
149
153
  child_orders?: _orderly_network_hooks.OrderValidationItem | undefined;
150
154
  position_type?: _orderly_network_hooks.OrderValidationItem | undefined;
155
+ tp_offset_from_mark?: _orderly_network_hooks.OrderValidationItem | undefined;
156
+ tp_offset_percentage_from_mark?: _orderly_network_hooks.OrderValidationItem | undefined;
151
157
  tp_trigger_price?: _orderly_network_hooks.OrderValidationItem | undefined;
152
158
  tp_order_price?: _orderly_network_hooks.OrderValidationItem | undefined;
153
159
  tp_order_type?: _orderly_network_hooks.OrderValidationItem | undefined;
160
+ sl_offset_from_mark?: _orderly_network_hooks.OrderValidationItem | undefined;
161
+ sl_offset_percentage_from_mark?: _orderly_network_hooks.OrderValidationItem | undefined;
154
162
  sl_trigger_price?: _orderly_network_hooks.OrderValidationItem | undefined;
155
163
  sl_order_price?: _orderly_network_hooks.OrderValidationItem | undefined;
156
164
  sl_order_type?: _orderly_network_hooks.OrderValidationItem | undefined;
@@ -238,7 +246,7 @@ declare const useTPSLAdvanced: (props: Props$3) => {
238
246
  slPriceError: OrderValidationResult | null;
239
247
  estLiqPrice: number | null;
240
248
  estLiqPriceDistance: number | null;
241
- setValue: (key: "symbol" | "type" | "order_type" | "margin_mode" | "order_type_ext" | "order_price" | "order_quantity" | "order_amount" | "visible_quantity" | "side" | "reduce_only" | "slippage" | "order_tag" | "level" | "post_only_adjust" | "client_order_id" | "total" | "start_price" | "end_price" | "total_orders" | "distribution_type" | "skew" | "activated_price" | "callback_value" | "callback_rate" | "quantity" | "price" | "algo_type" | "trigger_price_type" | "trigger_price" | "child_orders" | "position_type" | "tp_pnl" | "tp_offset" | "tp_offset_percentage" | "tp_ROI" | "tp_trigger_price" | "tp_order_price" | "tp_order_type" | "sl_pnl" | "sl_offset" | "sl_offset_percentage" | "sl_ROI" | "sl_trigger_price" | "sl_order_price" | "sl_order_type", value: any, options?: {
249
+ setValue: (key: "symbol" | "type" | "order_type" | "margin_mode" | "order_type_ext" | "order_price" | "order_quantity" | "order_amount" | "visible_quantity" | "side" | "reduce_only" | "slippage" | "order_tag" | "level" | "post_only_adjust" | "client_order_id" | "total" | "start_price" | "end_price" | "total_orders" | "distribution_type" | "skew" | "activated_price" | "callback_value" | "callback_rate" | "quantity" | "price" | "algo_type" | "trigger_price_type" | "trigger_price" | "child_orders" | "position_type" | "tp_pnl" | "tp_offset" | "tp_offset_percentage" | "tp_offset_from_mark" | "tp_offset_percentage_from_mark" | "tp_ROI" | "tp_trigger_price" | "tp_order_price" | "tp_order_type" | "sl_pnl" | "sl_offset" | "sl_offset_percentage" | "sl_offset_from_mark" | "sl_offset_percentage_from_mark" | "sl_ROI" | "sl_trigger_price" | "sl_order_price" | "sl_order_type", value: any, options?: {
242
250
  shouldUpdateLastChangedField?: boolean;
243
251
  }) => void;
244
252
  setValues: (values: Partial<OrderlyOrder>) => void;
@@ -284,6 +292,7 @@ declare const TPSLSimpleDialogWidget: React.FC<{
284
292
  symbol: string;
285
293
  close?: () => void;
286
294
  onComplete?: () => void;
295
+ marginMode?: MarginMode;
287
296
  showAdvancedTPSLDialog?: () => void;
288
297
  }>;
289
298
  declare const TPSLSimpleSheetId = "TPSLSimpleSheetId";
@@ -293,6 +302,7 @@ type TPSLBuilderOptions = {
293
302
  type: "tp" | "sl";
294
303
  triggerPrice?: number;
295
304
  symbol: string;
305
+ marginMode?: MarginMode;
296
306
  };
297
307
  declare const useTPSLSimpleDialog: (options: TPSLBuilderOptions) => {
298
308
  readonly symbolInfo: (<Key extends keyof API.SymbolExt>(key: Key, defaultValue?: API.SymbolExt[Key] | undefined) => API.SymbolExt[Key]) & (() => API.SymbolExt);
@@ -340,9 +350,13 @@ declare const useTPSLSimpleDialog: (options: TPSLBuilderOptions) => {
340
350
  trigger_price_type?: _orderly_network_hooks.OrderValidationItem | undefined;
341
351
  child_orders?: _orderly_network_hooks.OrderValidationItem | undefined;
342
352
  position_type?: _orderly_network_hooks.OrderValidationItem | undefined;
353
+ tp_offset_from_mark?: _orderly_network_hooks.OrderValidationItem | undefined;
354
+ tp_offset_percentage_from_mark?: _orderly_network_hooks.OrderValidationItem | undefined;
343
355
  tp_trigger_price?: _orderly_network_hooks.OrderValidationItem | undefined;
344
356
  tp_order_price?: _orderly_network_hooks.OrderValidationItem | undefined;
345
357
  tp_order_type?: _orderly_network_hooks.OrderValidationItem | undefined;
358
+ sl_offset_from_mark?: _orderly_network_hooks.OrderValidationItem | undefined;
359
+ sl_offset_percentage_from_mark?: _orderly_network_hooks.OrderValidationItem | undefined;
346
360
  sl_trigger_price?: _orderly_network_hooks.OrderValidationItem | undefined;
347
361
  sl_order_price?: _orderly_network_hooks.OrderValidationItem | undefined;
348
362
  sl_order_type?: _orderly_network_hooks.OrderValidationItem | undefined;
package/dist/index.js CHANGED
@@ -12,17 +12,28 @@ var perp = require('@orderly.network/perp');
12
12
  var uiConnector = require('@orderly.network/ui-connector');
13
13
 
14
14
  // src/editorPopover.tsx
15
+ var SymbolBadge = (props) => {
16
+ const { brokerId, brokerName, brokerNameRaw } = hooks.useBadgeBySymbol(
17
+ props.symbol
18
+ );
19
+ const badge = brokerName ?? brokerId ?? void 0;
20
+ return /* @__PURE__ */ jsxRuntime.jsx(ui.SymbolBadge, { badge, fullName: brokerNameRaw });
21
+ };
22
+ var LIQ_DISTANCE_THRESHOLD = 10;
15
23
  var OrderInfo = (props) => {
16
24
  const { t } = i18n.useTranslation();
17
25
  const { order: order2, symbolLeverage } = props;
18
26
  const { symbol } = order2;
19
27
  const markPrice = hooks.useMarkPrice(symbol);
20
28
  const indexPrice = hooks.useIndexPrice(symbol);
29
+ const marginModeLabel = props.marginMode === types.MarginMode.ISOLATED ? t("marginMode.isolated") : props.marginMode === types.MarginMode.CROSS ? t("marginMode.cross") : void 0;
21
30
  const leverage = hooks.useLeverageBySymbol(
22
31
  symbolLeverage ? void 0 : symbol,
23
32
  props.marginMode
24
33
  );
25
34
  const currentLeverage = symbolLeverage || leverage;
35
+ const markPriceValue = markPrice?.data;
36
+ const estLiqPrice = props.estLiqPrice === 0 || !markPriceValue || markPriceValue === 0 || Math.abs((props.estLiqPrice ?? 0) - markPriceValue) / markPriceValue >= LIQ_DISTANCE_THRESHOLD ? "--" : props.estLiqPrice ?? "--";
26
37
  return /* @__PURE__ */ jsxRuntime.jsxs(
27
38
  ui.Flex,
28
39
  {
@@ -46,20 +57,21 @@ var OrderInfo = (props) => {
46
57
  {
47
58
  className: "oui-whitespace-nowrap oui-break-normal",
48
59
  rule: "symbol",
49
- formatString: "base-type",
60
+ formatString: "base",
50
61
  size: "sm",
51
62
  weight: "semibold",
52
63
  intensity: 98,
64
+ suffix: /* @__PURE__ */ jsxRuntime.jsx(SymbolBadge, { symbol: symbol ?? "" }),
53
65
  children: symbol
54
66
  }
55
67
  )
56
68
  ] }),
57
- props.marginMode && /* @__PURE__ */ jsxRuntime.jsx(
69
+ marginModeLabel && /* @__PURE__ */ jsxRuntime.jsx(
58
70
  ui.Text,
59
71
  {
60
72
  size: "2xs",
61
73
  className: "oui-h-[18px] oui-rounded oui-bg-base-7 oui-px-2 oui-font-semibold oui-text-base-contrast-36",
62
- children: ui.capitalizeFirstLetter(props.marginMode)
74
+ children: marginModeLabel
63
75
  }
64
76
  ),
65
77
  /* @__PURE__ */ jsxRuntime.jsxs(
@@ -145,7 +157,7 @@ var OrderInfo = (props) => {
145
157
  className: "oui-text-warning",
146
158
  size: "2xs",
147
159
  dp: props.quoteDP ?? 2,
148
- children: props.estLiqPrice ?? "--"
160
+ children: estLiqPrice
149
161
  }
150
162
  )
151
163
  ] })
@@ -255,6 +267,7 @@ var useTPSLInputRowScript = (props) => {
255
267
  });
256
268
  return roi2 * 100;
257
269
  } catch (error) {
270
+ console.error("error", error);
258
271
  return null;
259
272
  }
260
273
  }, [values, leverage, rootOrderPrice, type, side]);
@@ -277,6 +290,10 @@ var usePNLInputBuilder = (props) => {
277
290
  return `${type.toLowerCase()}_offset`;
278
291
  case "Offset%" /* PERCENTAGE */:
279
292
  return `${type.toLowerCase()}_offset_percentage`;
293
+ case "OffsetFromMark" /* OFFSET_FROM_MARK */:
294
+ return `${type.toLowerCase()}_offset_from_mark`;
295
+ case "PercentageFromMark" /* PERCENTAGE_FROM_MARK */:
296
+ return `${type.toLowerCase()}_offset_percentage_from_mark`;
280
297
  default:
281
298
  return `${type.toLowerCase()}_pnl`;
282
299
  }
@@ -294,15 +311,34 @@ var usePNLInputBuilder = (props) => {
294
311
  {
295
312
  label: t("tpsl.offset"),
296
313
  value: "Offset" /* OFFSET */,
297
- testId: `${"Offset" /* OFFSET */}_mneu_item`
314
+ testId: `${"Offset" /* OFFSET */}_menu_item`
298
315
  },
299
316
  {
300
- label: `${t("tpsl.offset")}%`,
317
+ label: t("tpsl.offsetPercent"),
301
318
  value: "Offset%" /* PERCENTAGE */,
302
319
  testId: `${"Offset%" /* PERCENTAGE */}_menu_item`
320
+ },
321
+ {
322
+ label: t("tpsl.offsetMark"),
323
+ value: "OffsetFromMark" /* OFFSET_FROM_MARK */,
324
+ testId: `${"OffsetFromMark" /* OFFSET_FROM_MARK */}_menu_item`
325
+ },
326
+ {
327
+ label: t("tpsl.offsetPercentMark"),
328
+ value: "PercentageFromMark" /* PERCENTAGE_FROM_MARK */,
329
+ testId: `${"PercentageFromMark" /* PERCENTAGE_FROM_MARK */}_menu_item`
303
330
  }
304
331
  ];
305
332
  }, [t]);
333
+ const modeLabelMap = react.useMemo(() => {
334
+ return {
335
+ ["PnL" /* PnL */]: t("tpsl.pnl"),
336
+ ["Offset" /* OFFSET */]: t("tpsl.offsetHolder"),
337
+ ["Offset%" /* PERCENTAGE */]: t("tpsl.offsetHolder"),
338
+ ["OffsetFromMark" /* OFFSET_FROM_MARK */]: t("tpsl.offsetHolder"),
339
+ ["PercentageFromMark" /* PERCENTAGE_FROM_MARK */]: t("tpsl.offsetHolder")
340
+ };
341
+ }, [t]);
306
342
  const percentageSuffix = react.useRef("");
307
343
  const onValueChange = (value2) => {
308
344
  props.onChange(key, value2);
@@ -313,7 +349,7 @@ var usePNLInputBuilder = (props) => {
313
349
  onRenderBefore: (value2, options2) => {
314
350
  value2 = `${value2}`;
315
351
  if (value2 === "" || value2 === "-") return "";
316
- if (mode === "Offset%" /* PERCENTAGE */) {
352
+ if (mode === "Offset%" /* PERCENTAGE */ || mode === "PercentageFromMark" /* PERCENTAGE_FROM_MARK */) {
317
353
  try {
318
354
  return `${new utils.Decimal(
319
355
  value2.replace(
@@ -324,7 +360,7 @@ var usePNLInputBuilder = (props) => {
324
360
  } catch {
325
361
  return "";
326
362
  }
327
- } else if (mode === "Offset" /* OFFSET */) {
363
+ } else if (mode === "Offset" /* OFFSET */ || mode === "OffsetFromMark" /* OFFSET_FROM_MARK */) {
328
364
  value2 = utils.todpIfNeed(value2, dp);
329
365
  } else ;
330
366
  return `${value2}`;
@@ -333,7 +369,7 @@ var usePNLInputBuilder = (props) => {
333
369
  if (/^\-?0{2,}$/.test(value2)) {
334
370
  return "0";
335
371
  }
336
- if (mode === "Offset%" /* PERCENTAGE */) {
372
+ if (mode === "Offset%" /* PERCENTAGE */ || mode === "PercentageFromMark" /* PERCENTAGE_FROM_MARK */) {
337
373
  if (value2 !== "") {
338
374
  value2 = utils.todpIfNeed(value2, 2);
339
375
  const endStr = value2.match(/\.0{0,2}$/);
@@ -362,6 +398,7 @@ var usePNLInputBuilder = (props) => {
362
398
  return {
363
399
  mode,
364
400
  modes,
401
+ modeLabelMap,
365
402
  type: props.type,
366
403
  formatter,
367
404
  onModeChange: (mode2) => {
@@ -378,6 +415,7 @@ var PNLInput = (props) => {
378
415
  const {
379
416
  mode,
380
417
  modes,
418
+ modeLabelMap,
381
419
  onModeChange,
382
420
  onValueChange,
383
421
  quote,
@@ -385,26 +423,19 @@ var PNLInput = (props) => {
385
423
  value,
386
424
  pnl
387
425
  } = props;
388
- const { t } = i18n.useTranslation();
389
- const [prefix, setPrefix] = react.useState(mode);
390
- const [placeholder, setPlaceholder] = react.useState(
391
- mode === "Offset%" /* PERCENTAGE */ ? "%" : quote
392
- );
426
+ const [isInputFocused, setIsInputFocused] = react.useState(false);
393
427
  const color = react.useMemo(() => {
394
428
  const num = Number(pnl);
395
429
  if (isNaN(num) || num === 0) return "";
396
430
  if (num > 0) return "oui-text-trade-profit";
397
431
  if (num < 0) return "oui-text-trade-loss";
398
432
  }, [pnl]);
399
- react.useEffect(() => {
400
- const label = modes.find((item) => item.value === mode)?.label;
401
- setPrefix(label);
402
- setPlaceholder(mode === "Offset%" /* PERCENTAGE */ ? "%" : quote);
403
- }, [mode, modes]);
433
+ const prefixLabel = String(modeLabelMap[mode] ?? mode ?? "");
434
+ const placeholder = isInputFocused ? "" : mode === "Offset%" /* PERCENTAGE */ || mode === "PercentageFromMark" /* PERCENTAGE_FROM_MARK */ ? "%" : quote;
404
435
  return /* @__PURE__ */ jsxRuntime.jsx(
405
436
  ui.Input,
406
437
  {
407
- prefix,
438
+ prefix: prefixLabel,
408
439
  size: {
409
440
  initial: "lg",
410
441
  lg: "md"
@@ -427,15 +458,15 @@ var PNLInput = (props) => {
427
458
  root: "oui-outline-line-12 focus-within:oui-outline-primary-light"
428
459
  },
429
460
  onFocus: () => {
430
- setPlaceholder("");
461
+ setIsInputFocused(true);
431
462
  props.setFocus(true);
432
463
  },
433
464
  onBlur: () => {
434
- setPlaceholder(mode === "Offset%" /* PERCENTAGE */ ? "%" : quote);
465
+ setIsInputFocused(false);
435
466
  props.setFocus(false);
436
467
  },
437
468
  suffix: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
438
- mode === "Offset%" /* PERCENTAGE */ && !!value && /* @__PURE__ */ jsxRuntime.jsx(
469
+ (mode === "Offset%" /* PERCENTAGE */ || mode === "PercentageFromMark" /* PERCENTAGE_FROM_MARK */) && !!value && /* @__PURE__ */ jsxRuntime.jsx(
439
470
  ui.Text,
440
471
  {
441
472
  size: "2xs",
@@ -464,7 +495,7 @@ var PNLMenus = (props) => {
464
495
  menu: props.modes,
465
496
  align: "end",
466
497
  size: "xs",
467
- className: "oui-min-w-[80px]",
498
+ className: "oui-min-w-[120px]",
468
499
  onSelect: (item) => props.onModeChange(item),
469
500
  children: /* @__PURE__ */ jsxRuntime.jsx("button", { className: "oui-p-2", children: /* @__PURE__ */ jsxRuntime.jsx(ui.CaretDownIcon, { size: 12, color: "white" }) })
470
501
  }
@@ -831,10 +862,10 @@ var TPSLQuantity = react.memo((props) => {
831
862
  tooltip: errorMsg,
832
863
  color: errorMsg ? "danger" : void 0,
833
864
  formatters: [
865
+ ui.inputFormatter.decimalPointFormatter,
834
866
  ui.inputFormatter.dpFormatter(props.base_dp),
835
867
  ui.inputFormatter.numberFormatter,
836
- ui.inputFormatter.currencyFormatter,
837
- ui.inputFormatter.decimalPointFormatter
868
+ ui.inputFormatter.currencyFormatter
838
869
  ],
839
870
  onValueChange: (value) => {
840
871
  props.onQuantityChange?.(value);
@@ -1017,6 +1048,8 @@ var TPSL = (props) => {
1017
1048
  PnL: TPSL_OrderEntity.tp_pnl?.toString() ?? void 0,
1018
1049
  Offset: TPSL_OrderEntity.tp_offset?.toString() ?? void 0,
1019
1050
  "Offset%": TPSL_OrderEntity.tp_offset_percentage?.toString() ?? void 0,
1051
+ OffsetFromMark: TPSL_OrderEntity.tp_offset_from_mark?.toString() ?? void 0,
1052
+ PercentageFromMark: TPSL_OrderEntity.tp_offset_percentage_from_mark?.toString() ?? void 0,
1020
1053
  order_price: TPSL_OrderEntity.tp_order_price?.toString() ?? void 0,
1021
1054
  order_type: TPSL_OrderEntity.tp_order_type ?? types.OrderType.MARKET
1022
1055
  },
@@ -1054,6 +1087,8 @@ var TPSL = (props) => {
1054
1087
  PnL: TPSL_OrderEntity.sl_pnl?.toString() ?? void 0,
1055
1088
  Offset: TPSL_OrderEntity.sl_offset?.toString() ?? void 0,
1056
1089
  "Offset%": TPSL_OrderEntity.sl_offset_percentage?.toString() ?? void 0,
1090
+ OffsetFromMark: TPSL_OrderEntity.sl_offset_from_mark?.toString() ?? void 0,
1091
+ PercentageFromMark: TPSL_OrderEntity.sl_offset_percentage_from_mark?.toString() ?? void 0,
1057
1092
  order_price: TPSL_OrderEntity.sl_order_price?.toString() ?? void 0,
1058
1093
  order_type: TPSL_OrderEntity.sl_order_type ?? types.OrderType.MARKET
1059
1094
  },
@@ -1106,6 +1141,7 @@ var TPSL = (props) => {
1106
1141
  props.close?.();
1107
1142
  onComplete?.();
1108
1143
  }).catch((err) => {
1144
+ console.log("--->>>cancel order", err);
1109
1145
  });
1110
1146
  },
1111
1147
  children: t("common.confirm")
@@ -1184,21 +1220,25 @@ var PositionTPSLConfirm = (props) => {
1184
1220
  );
1185
1221
  };
1186
1222
  const isPositionTPSL = _isPositionTPSL;
1223
+ const displaySymbol = hooks.useSymbolWithBroker(symbol);
1187
1224
  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
1188
- isEditing && /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { as: "div", size: "2xs", intensity: 80, className: "oui-mb-3", children: t("tpsl.agreement", { symbol: utils.transSymbolformString(symbol) }) }),
1225
+ isEditing && /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { as: "div", size: "2xs", intensity: 80, className: "oui-mb-3", children: t("tpsl.agreement", { symbol: displaySymbol }) }),
1189
1226
  /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { pb: 4, children: [
1190
- /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { grow: true, children: /* @__PURE__ */ jsxRuntime.jsx(
1191
- ui.Text.formatted,
1192
- {
1193
- rule: "symbol",
1194
- formatString: "base-type",
1195
- size: "base",
1196
- showIcon: true,
1197
- as: "div",
1198
- intensity: 80,
1199
- children: symbol
1200
- }
1201
- ) }),
1227
+ /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { direction: "column", itemAlign: "start", gap: 1, grow: true, children: [
1228
+ /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { grow: true, children: /* @__PURE__ */ jsxRuntime.jsx(
1229
+ ui.Text.formatted,
1230
+ {
1231
+ rule: "symbol",
1232
+ formatString: "base",
1233
+ size: "base",
1234
+ showIcon: true,
1235
+ as: "div",
1236
+ intensity: 80,
1237
+ children: symbol
1238
+ }
1239
+ ) }),
1240
+ /* @__PURE__ */ jsxRuntime.jsx(SymbolBadge, { symbol })
1241
+ ] }),
1202
1242
  /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { gap: 1, children: [
1203
1243
  isPositionTPSL && /* @__PURE__ */ jsxRuntime.jsx(ui.Badge, { size: "xs", color: "primary", children: t("common.position") }),
1204
1244
  /* @__PURE__ */ jsxRuntime.jsx(TPSLOrderType, { tpPrice, slPrice }),
@@ -1343,9 +1383,10 @@ var useTPSLBuilder = (options) => {
1343
1383
  const [needConfirm] = hooks.useLocalStorage("orderly_order_confirm", true);
1344
1384
  const { marginMode: symbolMarginMode } = hooks.useMarginModeBySymbol(symbol);
1345
1385
  const [{ rows: positions }] = hooks.usePositionStream();
1346
- const mainAccountPosition = positions.find(
1347
- (item) => item.symbol === symbol && item.margin_mode === (options.position?.margin_mode ?? symbolMarginMode)
1348
- );
1386
+ const mainAccountPosition = positions.find((item) => {
1387
+ const marginMode = options.position?.margin_mode ?? symbolMarginMode;
1388
+ return item.symbol === symbol && item.margin_mode === marginMode;
1389
+ });
1349
1390
  const isSubAccount = options.position?.account_id && options.position?.account_id !== state.mainAccountId;
1350
1391
  const position = isSubAccount ? options.position : mainAccountPosition;
1351
1392
  const estLiqPrice = hooks.useEstLiqPriceBySymbol(
@@ -1672,6 +1713,8 @@ var TPSLAdvancedUI = (props) => {
1672
1713
  PnL: formattedOrder.tp_pnl ?? "",
1673
1714
  Offset: formattedOrder.tp_offset ?? "",
1674
1715
  "Offset%": formattedOrder.tp_offset_percentage ?? "",
1716
+ OffsetFromMark: formattedOrder.tp_offset_from_mark ?? "",
1717
+ PercentageFromMark: formattedOrder.tp_offset_percentage_from_mark ?? "",
1675
1718
  ROI: formattedOrder.tp_ROI ?? ""
1676
1719
  });
1677
1720
  const [slValues, setSlValues] = react.useState({
@@ -1682,6 +1725,8 @@ var TPSLAdvancedUI = (props) => {
1682
1725
  PnL: formattedOrder.sl_pnl ?? "",
1683
1726
  Offset: formattedOrder.sl_offset ?? "",
1684
1727
  "Offset%": formattedOrder.sl_offset_percentage ?? "",
1728
+ OffsetFromMark: formattedOrder.sl_offset_from_mark ?? "",
1729
+ PercentageFromMark: formattedOrder.sl_offset_percentage_from_mark ?? "",
1685
1730
  ROI: formattedOrder.sl_ROI ?? ""
1686
1731
  });
1687
1732
  react.useEffect(() => {
@@ -1694,6 +1739,8 @@ var TPSLAdvancedUI = (props) => {
1694
1739
  PnL: formattedOrder.tp_pnl ?? "",
1695
1740
  Offset: formattedOrder.tp_offset ?? "",
1696
1741
  "Offset%": formattedOrder.tp_offset_percentage ?? "",
1742
+ OffsetFromMark: formattedOrder.tp_offset_from_mark ?? "",
1743
+ PercentageFromMark: formattedOrder.tp_offset_percentage_from_mark ?? "",
1697
1744
  ROI: formattedOrder.tp_ROI ?? ""
1698
1745
  }));
1699
1746
  }, [formattedOrder]);
@@ -1707,6 +1754,8 @@ var TPSLAdvancedUI = (props) => {
1707
1754
  PnL: formattedOrder.sl_pnl ?? "",
1708
1755
  Offset: formattedOrder.sl_offset ?? "",
1709
1756
  "Offset%": formattedOrder.sl_offset_percentage ?? "",
1757
+ OffsetFromMark: formattedOrder.sl_offset_from_mark ?? "",
1758
+ PercentageFromMark: formattedOrder.sl_offset_percentage_from_mark ?? "",
1710
1759
  ROI: formattedOrder.sl_ROI ?? ""
1711
1760
  }));
1712
1761
  }, [formattedOrder]);
@@ -1937,22 +1986,31 @@ var useTPSLAdvanced = (props) => {
1937
1986
  sl_pnl: order2.sl_pnl,
1938
1987
  sl_offset: order2.sl_offset,
1939
1988
  sl_offset_percentage: order2.sl_offset_percentage,
1989
+ sl_offset_from_mark: order2.sl_offset_from_mark,
1990
+ sl_offset_percentage_from_mark: order2.sl_offset_percentage_from_mark,
1940
1991
  tp_pnl: order2.tp_pnl,
1941
1992
  tp_offset: order2.tp_offset,
1942
1993
  tp_offset_percentage: order2.tp_offset_percentage,
1994
+ tp_offset_from_mark: order2.tp_offset_from_mark,
1995
+ tp_offset_percentage_from_mark: order2.tp_offset_percentage_from_mark,
1943
1996
  margin_mode: order2.margin_mode
1944
1997
  }
1945
1998
  });
1946
1999
  const slPriceError = hooks.useTpslPriceChecker({
1947
2000
  slPrice: formattedOrder.sl_trigger_price,
1948
2001
  liqPrice: state.estLiqPrice,
1949
- side: formattedOrder.side
2002
+ side: formattedOrder.side,
2003
+ markPrice: state.markPrice,
2004
+ currentPosition: state.currentPosition,
2005
+ orderQuantity: Number(formattedOrder.order_quantity)
1950
2006
  });
1951
2007
  const onSubmit = () => {
1952
2008
  const isSlPriceError = slPriceError?.sl_trigger_price?.type === hooks.ERROR_MSG_CODES.SL_PRICE_ERROR;
1953
2009
  helper.validate(isSlPriceError ? slPriceError : void 0).then(() => {
1954
2010
  props.onSubmit(formattedOrder);
1955
2011
  }).catch((err) => {
2012
+ console.log("metaState", metaState);
2013
+ console.log("err", err);
1956
2014
  });
1957
2015
  };
1958
2016
  return {
@@ -2912,9 +2970,8 @@ ui.registerSimpleSheet(TPSLDetailSheetId, TPSLDetailWidget, {
2912
2970
  }
2913
2971
  });
2914
2972
  var useTPSLSimpleDialog = (options) => {
2915
- const { type, triggerPrice, symbol } = options;
2973
+ const { type, triggerPrice, symbol, marginMode } = options;
2916
2974
  const symbolInfo = hooks.useSymbolsInfo();
2917
- const { marginMode } = hooks.useMarginModeBySymbol(symbol ?? "");
2918
2975
  const [{ rows: positions }, positionsInfo] = hooks.usePositionStream(symbol);
2919
2976
  const position = positions?.find((item) => item.margin_mode === marginMode);
2920
2977
  react.useRef(types.AlgoOrderRootType.TP_SL);
@@ -3164,7 +3221,7 @@ var TPSLSimpleDialogUI = (props) => {
3164
3221
  TPSLQuantity,
3165
3222
  {
3166
3223
  maxQty: props.maxQty,
3167
- quantity: Number(props.orderQuantity ?? props.maxQty),
3224
+ quantity: props.orderQuantity ?? props.maxQty,
3168
3225
  baseTick: props.symbolInfo("base_tick"),
3169
3226
  base_dp: props.symbolInfo("base_dp"),
3170
3227
  base: props.symbolInfo("base"),
@@ -3457,6 +3514,8 @@ var EditBracketOrderUI = (props) => {
3457
3514
  PnL: formattedOrder.tp_pnl ?? "",
3458
3515
  Offset: formattedOrder.tp_offset ?? "",
3459
3516
  "Offset%": formattedOrder.tp_offset_percentage ?? "",
3517
+ OffsetFromMark: formattedOrder.tp_offset_from_mark ?? "",
3518
+ PercentageFromMark: formattedOrder.tp_offset_percentage_from_mark ?? "",
3460
3519
  ROI: formattedOrder.tp_ROI ?? ""
3461
3520
  });
3462
3521
  const [slValues, setSlValues] = react.useState({
@@ -3467,6 +3526,8 @@ var EditBracketOrderUI = (props) => {
3467
3526
  PnL: formattedOrder.sl_pnl ?? "",
3468
3527
  Offset: formattedOrder.sl_offset ?? "",
3469
3528
  "Offset%": formattedOrder.sl_offset_percentage ?? "",
3529
+ OffsetFromMark: formattedOrder.sl_offset_from_mark ?? "",
3530
+ PercentageFromMark: formattedOrder.sl_offset_percentage_from_mark ?? "",
3470
3531
  ROI: formattedOrder.sl_ROI ?? ""
3471
3532
  });
3472
3533
  react.useEffect(() => {
@@ -3479,6 +3540,8 @@ var EditBracketOrderUI = (props) => {
3479
3540
  PnL: formattedOrder.tp_pnl ?? "",
3480
3541
  Offset: formattedOrder.tp_offset ?? "",
3481
3542
  "Offset%": formattedOrder.tp_offset_percentage ?? "",
3543
+ OffsetFromMark: formattedOrder.tp_offset_from_mark ?? "",
3544
+ PercentageFromMark: formattedOrder.tp_offset_percentage_from_mark ?? "",
3482
3545
  ROI: formattedOrder.tp_ROI ?? ""
3483
3546
  }));
3484
3547
  }, [formattedOrder]);
@@ -3492,6 +3555,8 @@ var EditBracketOrderUI = (props) => {
3492
3555
  PnL: formattedOrder.sl_pnl ?? "",
3493
3556
  Offset: formattedOrder.sl_offset ?? "",
3494
3557
  "Offset%": formattedOrder.sl_offset_percentage ?? "",
3558
+ OffsetFromMark: formattedOrder.sl_offset_from_mark ?? "",
3559
+ PercentageFromMark: formattedOrder.sl_offset_percentage_from_mark ?? "",
3495
3560
  ROI: formattedOrder.sl_ROI ?? ""
3496
3561
  }));
3497
3562
  }, [formattedOrder]);
@@ -3633,6 +3698,7 @@ var EditBracketOrderUI = (props) => {
3633
3698
  props.onSubmit().then(() => {
3634
3699
  props.onClose?.();
3635
3700
  }).catch((err) => {
3701
+ console.log("--->>>cancel order", err);
3636
3702
  });
3637
3703
  },
3638
3704
  children: t("common.confirm")