@orderly.network/ui-tpsl 2.11.3-rc.0 → 2.12.0

package/dist/index.mjs

@@ -1,15 +1,22 @@
 import { SDKError, MarginMode, PositionType, AlgoOrderRootType, OrderType, OrderSide, OrderStatus, AlgoOrderType } from '@orderly.network/types';
-import { Flex, Input, inputFormatter, cn, Slider, Text, registerSimpleSheet, registerSimpleDialog, useScreen, ScrollArea, DotStatus, Grid, Button, ThrottledButton, Divider, Box, toast, TokenIcon, modal, Tooltip, ExclamationFillIcon, Select, ChevronDownIcon, Badge, textVariants, Checkbox, SimpleDropdownMenu, CaretDownIcon, useModal } from '@orderly.network/ui';
+import { Flex, Input, inputFormatter, cn, Slider, Text, registerSimpleSheet, registerSimpleDialog, useScreen, ScrollArea, DotStatus, Grid, Button, ThrottledButton, Divider, Box, toast, TokenIcon, modal, SymbolBadge as SymbolBadge$1, Tooltip, ExclamationFillIcon, Select, ChevronDownIcon, Badge, textVariants, Checkbox, SimpleDropdownMenu, CaretDownIcon, useModal } from '@orderly.network/ui';
 import { memo, useRef, useState, useEffect, createContext, useMemo, useContext, Fragment as Fragment$1 } from 'react';
-import { utils, useSymbolsInfo, useAccount, useEventEmitter, useLocalStorage, useMarginModeBySymbol, usePositionStream, useEstLiqPriceBySymbol, useTPSLOrder, useTpslPriceChecker, ERROR_MSG_CODES, useMemoizedFn, useOrderEntry, useGetEstLiqPrice, useOrderStream, useSubAccountAlgoOrderStream, findPositionTPSLFromOrders, useMutation, useMarkPrice, useIndexPrice, useLeverageBySymbol, useMaxQty, findTPSLFromOrder, findTPSLOrderPriceFromOrder } from '@orderly.network/hooks';
+import { utils, useSymbolsInfo, useAccount, useEventEmitter, useLocalStorage, useMarginModeBySymbol, usePositionStream, useEstLiqPriceBySymbol, useTPSLOrder, useTpslPriceChecker, ERROR_MSG_CODES, useMemoizedFn, useOrderEntry, useGetEstLiqPrice, useOrderStream, useSubAccountAlgoOrderStream, findPositionTPSLFromOrders, useMutation, useMarkPrice, useIndexPrice, useLeverageBySymbol, useMaxQty, useBadgeBySymbol, useSymbolWithBroker, findTPSLFromOrder, findTPSLOrderPriceFromOrder } from '@orderly.network/hooks';
 import { useTranslation, i18n, Trans } from '@orderly.network/i18n';
 import { useOrderEntryFormErrorMsg } from '@orderly.network/react-app';
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
-import { Decimal, checkIsNaN, transSymbolformString, getTPSLDirection, formatNum, todpIfNeed } from '@orderly.network/utils';
+import { Decimal, checkIsNaN, getTPSLDirection, formatNum, todpIfNeed } from '@orderly.network/utils';
 import { order, positions } from '@orderly.network/perp';
 import { AuthGuardDataTable } from '@orderly.network/ui-connector';
 
 // src/editorPopover.tsx
+var SymbolBadge = (props) => {
+  const { brokerId, brokerName, brokerNameRaw } = useBadgeBySymbol(
+    props.symbol
+  );
+  const badge = brokerName ?? brokerId ?? void 0;
+  return /* @__PURE__ */ jsx(SymbolBadge$1, { badge, fullName: brokerNameRaw });
+};
 var OrderInfo = (props) => {
   const { t } = useTranslation();
   const { order: order2, symbolLeverage } = props;
@@ -45,10 +52,11 @@ 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__ */ jsx(SymbolBadge, { symbol: symbol ?? "" }),
                     children: symbol
                   }
                 )
@@ -254,6 +262,7 @@ var useTPSLInputRowScript = (props) => {
       });
       return roi2 * 100;
     } catch (error) {
+      console.error("error", error);
       return null;
     }
   }, [values, leverage, rootOrderPrice, type, side]);
@@ -830,10 +839,10 @@ var TPSLQuantity = memo((props) => {
         tooltip: errorMsg,
         color: errorMsg ? "danger" : void 0,
         formatters: [
+          inputFormatter.decimalPointFormatter,
           inputFormatter.dpFormatter(props.base_dp),
           inputFormatter.numberFormatter,
-          inputFormatter.currencyFormatter,
-          inputFormatter.decimalPointFormatter
+          inputFormatter.currencyFormatter
         ],
         onValueChange: (value) => {
           props.onQuantityChange?.(value);
@@ -1105,6 +1114,7 @@ var TPSL = (props) => {
               props.close?.();
               onComplete?.();
             }).catch((err) => {
+              console.log("--->>>cancel order", err);
             });
           },
           children: t("common.confirm")
@@ -1183,21 +1193,25 @@ var PositionTPSLConfirm = (props) => {
     );
   };
   const isPositionTPSL = _isPositionTPSL;
+  const displaySymbol = useSymbolWithBroker(symbol);
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    isEditing && /* @__PURE__ */ jsx(Text, { as: "div", size: "2xs", intensity: 80, className: "oui-mb-3", children: t("tpsl.agreement", { symbol: transSymbolformString(symbol) }) }),
+    isEditing && /* @__PURE__ */ jsx(Text, { as: "div", size: "2xs", intensity: 80, className: "oui-mb-3", children: t("tpsl.agreement", { symbol: displaySymbol }) }),
     /* @__PURE__ */ jsxs(Flex, { pb: 4, children: [
-      /* @__PURE__ */ jsx(Box, { grow: true, children: /* @__PURE__ */ jsx(
-        Text.formatted,
-        {
-          rule: "symbol",
-          formatString: "base-type",
-          size: "base",
-          showIcon: true,
-          as: "div",
-          intensity: 80,
-          children: symbol
-        }
-      ) }),
+      /* @__PURE__ */ jsxs(Flex, { direction: "column", itemAlign: "start", gap: 1, grow: true, children: [
+        /* @__PURE__ */ jsx(Box, { grow: true, children: /* @__PURE__ */ jsx(
+          Text.formatted,
+          {
+            rule: "symbol",
+            formatString: "base",
+            size: "base",
+            showIcon: true,
+            as: "div",
+            intensity: 80,
+            children: symbol
+          }
+        ) }),
+        /* @__PURE__ */ jsx(SymbolBadge, { symbol })
+      ] }),
       /* @__PURE__ */ jsxs(Flex, { gap: 1, children: [
         isPositionTPSL && /* @__PURE__ */ jsx(Badge, { size: "xs", color: "primary", children: t("common.position") }),
         /* @__PURE__ */ jsx(TPSLOrderType, { tpPrice, slPrice }),
@@ -1394,6 +1408,7 @@ var useTPSLBuilder = (options) => {
   });
   const isSlPriceWarning = slPriceError?.sl_trigger_price?.type === ERROR_MSG_CODES.SL_PRICE_WARNING;
   const setQuantity = (value) => {
+    console.log("------>>>>>setQuantity", value);
     setValue("quantity", value);
   };
   const setOrderPrice = (name, value) => {
@@ -1952,6 +1967,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 {
@@ -2617,6 +2634,7 @@ var TPSLDetailUI = (props) => {
     symbolInfo
   } = props;
   const { estLiqPrice } = useTPSLDetailContext();
+  console.log("----- position", position);
   return /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsxs(ScrollArea, { className: cn(isMobile && "oui-h-[calc(100vh-100px)]"), children: [
     /* @__PURE__ */ jsx(
       OrderInfo,
@@ -3163,7 +3181,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"),
@@ -3225,6 +3243,7 @@ var TPSLSimpleDialogUI = (props) => {
 var TPSLSimpleDialogWidget = (props) => {
   const { close, onComplete, showAdvancedTPSLDialog } = props;
   const state = useTPSLSimpleDialog(props);
+  console.log("------>>>>>TPSLSimpleDialogWidget", state);
   return /* @__PURE__ */ jsx(
     TPSLSimpleDialogUI,
     {
@@ -3632,6 +3651,7 @@ var EditBracketOrderUI = (props) => {
               props.onSubmit().then(() => {
                 props.onClose?.();
               }).catch((err) => {
+                console.log("--->>>cancel order", err);
               });
             },
             children: t("common.confirm")