@kodiak-finance/orderly-ui-orders 2.9.2 → 2.9.3

package/dist/index.mjs

@@ -1,5 +1,5 @@
 import React2, { forwardRef, useMemo, useEffect, useRef, useCallback, useImperativeHandle, useState, createContext, memo, useContext } from 'react';
-import { useSymbolsInfo, useOrderStream, useLocalStorage, utils, useThrottledCallback, useMutation, useSWRConfig, useAccount, unstable_serialize, useMemoizedFn, getMinNotional, findTPSLFromOrder, findTPSLOrderPriceFromOrder, useMaxQty, useConfig, useTpslPriceChecker, useOrderEntity, useReferralInfo, useBadgeBySymbol, useLeverageBySymbol } from '@kodiak-finance/orderly-hooks';
+import { useSymbolsInfo, useOrderStream, useLocalStorage, utils, useThrottledCallback, useMutation, useSWRConfig, useAccount, unstable_serialize, useMemoizedFn, getMinNotional, findTPSLFromOrder, findTPSLOrderPriceFromOrder, useMaxQty, useBadgeBySymbol, useConfig, useTpslPriceChecker, useOrderEntity, useReferralInfo, useLeverageBySymbol } from '@kodiak-finance/orderly-hooks';
 import { useTranslation, Trans, i18n } from '@kodiak-finance/orderly-i18n';
 import { OrderStatus, AlgoOrderRootType, MarginMode, AlgoOrderType, OrderSide, OrderType, EMPTY_LIST } from '@kodiak-finance/orderly-types';
 import { Decimal, commify, commifyOptional, formatSymbol, getTrailingStopPrice, formatNum } from '@kodiak-finance/orderly-utils';
@@ -586,7 +586,7 @@ var init_confirmContent = __esm({
         /* @__PURE__ */ jsx(
           "button",
           {
-            className: "oui-absolute oui-right-0 oui-top-0 oui-text-base-contrast-54",
+            className: "oui-absolute oui-end-0 oui-top-0 oui-text-base-contrast-54",
             onClick: cancelPopover,
             children: /* @__PURE__ */ jsx(CloseIcon, { size: 16, color: "white", opacity: 1 })
           }
@@ -734,7 +734,7 @@ var init_editableCellInput = __esm({
           ],
           classNames: {
             root: "oui-bg-base-700 oui-px-2 oui-py-1 oui-rounded",
-            input: "oui-pr-2"
+            input: "oui-pe-2"
           },
           readOnly: props.readonly,
           suffix: /* @__PURE__ */ jsxs(Flex, { gapX: 1, children: [
@@ -1278,7 +1278,7 @@ var init_innerInput = __esm({
           color: open ? "danger" : void 0,
           classNames: {
             root: "oui-bg-base-700 oui-px-2 oui-py-1 oui-rounded",
-            input: "oui-pr-2"
+            input: "oui-pe-2"
           },
           suffix: /* @__PURE__ */ jsx("button", { onClick, children: /* @__PURE__ */ jsx(
             CheckIcon,
@@ -2008,6 +2008,29 @@ var init_triggerPriceCell = __esm({
     };
   }
 });
+var OrderSymbolCell;
+var init_orderSymbolCell = __esm({
+  "src/components/orderList/desktop/orderSymbolCell.tsx"() {
+    OrderSymbolCell = (props) => {
+      const { symbol, onSymbolChange } = props;
+      const { brokerId, brokerName, brokerNameRaw } = useBadgeBySymbol(symbol);
+      return /* @__PURE__ */ jsx(
+        Text.symbolBadge,
+        {
+          className: "oui-cursor-pointer",
+          badge: brokerName ?? brokerId ?? void 0,
+          fullName: brokerNameRaw,
+          onClick: (e) => {
+            onSymbolChange?.({ symbol });
+            e.stopPropagation();
+            e.preventDefault();
+          },
+          children: symbol
+        }
+      );
+    };
+  }
+});
 var Renew;
 var init_renew = __esm({
   "src/components/orderList/desktop/renew.tsx"() {
@@ -2280,7 +2303,7 @@ var init_tpslTriggerPrice = __esm({
                   CloseToLiqPriceIcon,
                   {
                     slPriceError: props.slPriceError,
-                    className: "oui-ml-1"
+                    className: "oui-ms-1"
                   }
                 )
               },
@@ -2342,7 +2365,7 @@ var init_tpslTriggerPrice = __esm({
       const type = orderType === AlgoOrderType.TAKE_PROFIT ? "TP" : "SL";
       const label = type === "TP" ? `${t("tpsl.tpPnl")}:` : `${t("tpsl.slPnl")}:`;
       return /* @__PURE__ */ jsxs("div", { className: "oui-flex oui-items-center", children: [
-        /* @__PURE__ */ jsx("span", { className: "oui-text-base-contrast-54 oui-mr-1", children: label }),
+        /* @__PURE__ */ jsx("span", { className: "oui-text-base-contrast-54 oui-me-1", children: label }),
         /* @__PURE__ */ jsx(
           Text.numeral,
           {
@@ -2354,7 +2377,7 @@ var init_tpslTriggerPrice = __esm({
               // @ts-ignore
               /* @__PURE__ */ jsx("span", { children: pnl === 0 ? "" : pnl > 0 ? "+" : "-" })
             ),
-            suffix: /* @__PURE__ */ jsx("span", { className: "oui-text-base-contrast-36 oui-ml-1", children: "USDC" }),
+            suffix: /* @__PURE__ */ jsx("span", { className: "oui-text-base-contrast-36 oui-ms-1", children: "USDC" }),
             children: `${Math.abs(pnl)}`
           }
         )
@@ -2366,7 +2389,7 @@ function instrument(option) {
   return {
     title: i18n.t("common.symbol"),
     dataIndex: "symbol",
-    fixed: "left",
+    fixed: "start",
     // className: "oui-h-[48px]",
     width: option?.width,
     onSort: option?.enableSort ? (r1, r2) => {
@@ -2384,23 +2407,17 @@ function instrument(option) {
           "div",
           {
             className: cn(
-              "oui-h-7 oui-w-1 oui-shrink-0 oui-rounded-[1px]",
+              "oui-h-[34px] oui-w-1 oui-shrink-0 oui-rounded-[1px]",
               record.side === OrderSide.BUY ? "oui-bg-trade-profit" : "oui-bg-trade-loss"
             )
           }
         ),
         /* @__PURE__ */ jsxs(Flex, { direction: "column", itemAlign: "start", gap: 1, children: [
           /* @__PURE__ */ jsx(
-            Text.formatted,
+            OrderSymbolCell,
             {
-              size: "xs",
-              className: "oui-cursor-pointer oui-text-xs",
-              onClick: (e) => {
-                option?.onSymbolChange?.({ symbol: value });
-                e.stopPropagation();
-                e.preventDefault();
-              },
-              children: `${value.split("_")[1]}-PERP`
+              symbol: value,
+              onSymbolChange: option?.onSymbolChange
             }
           ),
           option?.showType && /* @__PURE__ */ jsx(Flex, { direction: "row", gap: 1, wrap: "wrap", children: parseBadgesFor(record)?.map((e, index) => /* @__PURE__ */ jsx(
@@ -2678,10 +2695,9 @@ function realizedPnL(option) {
       const value = new Decimal(_value ?? 0).toNumber();
       return /* @__PURE__ */ jsxs(Flex, { gap: 1, children: [
         /* @__PURE__ */ jsx(
-          Text.numeral,
+          Text.pnl,
           {
             dp,
-            rm: Decimal.ROUND_DOWN,
             padding: false,
             intensity: (value ?? 0) == 0 ? 80 : void 0,
             showIdentifier: (value ?? 0) > 0,
@@ -2841,7 +2857,7 @@ function cancelBtn(option) {
     width: option?.width,
     className: option?.className,
     align: "right",
-    fixed: "right",
+    fixed: "end",
     render: (_, record) => {
       if (record.status === OrderStatus.CANCELLED) {
         return /* @__PURE__ */ jsx(Renew, { record });
@@ -2861,7 +2877,7 @@ function pendingTabCancelBtn(option) {
     width: option?.width,
     className: option?.className,
     align: "right",
-    fixed: "right",
+    fixed: "end",
     render: (_, record) => {
       return /* @__PURE__ */ jsx(CancelButton, { order: record });
     }
@@ -2875,7 +2891,7 @@ function tpslAction(option) {
     width: option?.width,
     className: option?.className,
     align: "right",
-    fixed: "right",
+    fixed: "end",
     render: (_, record) => {
       return /* @__PURE__ */ jsxs(Flex, { gap: 3, children: [
         /* @__PURE__ */ jsx(TP_SLEditButton, { order: record }),
@@ -2932,6 +2948,7 @@ var init_useColumn = __esm({
     init_quantityCell();
     init_trailingCallbackCell();
     init_triggerPriceCell();
+    init_orderSymbolCell();
     init_renew();
     init_tpslEdit();
     init_tpslPrice();
@@ -2959,7 +2976,7 @@ var init_useColumn = __esm({
               fillAndQuantity({
                 width: 130,
                 disableEdit: true,
-                className: "oui-pl-0 oui-pr-0",
+                className: "oui-ps-0 oui-pe-0",
                 enableSort: false
               }),
               price({
@@ -2996,12 +3013,12 @@ var init_useColumn = __esm({
               // side({ width: 162 }),
               fillAndQuantity({
                 width: 162,
-                className: "oui-pr-0",
+                className: "oui-pe-0",
                 enableSort: false
               }),
-              price({ width: 162, className: "oui-pr-0", enableSort: false }),
+              price({ width: 162, className: "oui-pe-0", enableSort: false }),
               trailingCallback({ width: 162 }),
-              triggerPrice({ width: 162, className: "oui-pr-0", isPending: true }),
+              triggerPrice({ width: 162, className: "oui-pe-0", isPending: true }),
               bracketOrderPrice({ width: 130 }),
               estTotal({ width: 162, isPending: true }),
               reduceOnly({ width: 162 }),
@@ -3038,7 +3055,7 @@ var init_useColumn = __esm({
               fillAndQuantity({
                 width: 124,
                 disableEdit: true,
-                className: "oui-pl-0 oui-pr-0"
+                className: "oui-ps-0 oui-pe-0"
               }),
               price({
                 width: 124,
@@ -3073,7 +3090,7 @@ var init_useColumn = __esm({
               fillAndQuantity({
                 width: 124,
                 disableEdit: true,
-                className: "oui-pl-0 oui-pr-0",
+                className: "oui-ps-0 oui-pe-0",
                 enableSort: false
               }),
               price({ width: 124, disableEdit: true, enableSort: false }),
@@ -3096,7 +3113,7 @@ var init_useColumn = __esm({
               fillAndQuantity({
                 width: 124,
                 disableEdit: true,
-                className: "oui-pl-0 oui-pr-0"
+                className: "oui-ps-0 oui-pe-0"
               }),
               price({ width: 124, disableEdit: true }),
               avgOpen({ width: 124 }),
@@ -3119,7 +3136,7 @@ var init_useColumn = __esm({
               fillAndQuantity({
                 width: 150,
                 disableEdit: true,
-                className: "oui-pl-6 oui-pr-0"
+                className: "oui-ps-6 oui-pe-0"
               }),
               price({
                 width: 124,
@@ -3459,7 +3476,7 @@ var init_items = __esm({
                 }
               ),
               classNames: {
-                content: "oui-bg-base-6 oui-ml-2",
+                content: "oui-bg-base-6 oui-ms-2",
                 arrow: "oui-fill-base-6"
               },
               children: /* @__PURE__ */ jsx(
@@ -3512,7 +3529,7 @@ var init_items = __esm({
                 }
               ),
               classNames: {
-                content: "oui-bg-base-6 oui-ml-2",
+                content: "oui-bg-base-6 oui-ms-2",
                 arrow: "oui-fill-base-6"
               },
               children: /* @__PURE__ */ jsx(
@@ -3556,7 +3573,7 @@ var init_items = __esm({
             children: tp_order_price
           }
         );
-      }, [tp_order_price]);
+      }, [props.quote_dp, t, tp_order_price]);
       return /* @__PURE__ */ jsx(
         Statistic,
         {
@@ -3589,7 +3606,7 @@ var init_items = __esm({
             children: sl_order_price
           }
         );
-      }, [sl_order_price]);
+      }, [props.quote_dp, sl_order_price, t]);
       return /* @__PURE__ */ jsx(
         Statistic,
         {
@@ -3814,7 +3831,7 @@ var init_bracketOrderPrice_ui = __esm({
           MobileTooltip,
           {
             classNames: {
-              content: "oui-bg-base-6 oui-ml-2",
+              content: "oui-bg-base-6 oui-ms-2",
               arrow: "oui-fill-base-6"
             },
             content: /* @__PURE__ */ jsxs(Flex, { direction: "column", itemAlign: "start", gap: 1, children: [
@@ -5054,7 +5071,7 @@ var init_editBtn_script = __esm({
           }).catch((error) => {
           });
         }
-      }, [state]);
+      }, [editAlgoOrder, editOrder, position, state, symbolInfo, t]);
       return {
         ...state,
         onShowEditSheet