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

package/dist/index.mjs

@@ -1,10 +1,10 @@
 import React2, { forwardRef, useMemo, useEffect, useRef, useImperativeHandle, useCallback, 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, useLeverageBySymbol } from '@orderly.network/hooks';
+import { useSymbolsInfo, useOrderStream, useLocalStorage, utils, useThrottledCallback, useMutation, useSWRConfig, useAccount, unstable_serialize, useMemoizedFn, getMinNotional, findTPSLFromOrder, findTPSLOrderPriceFromOrder, useMaxQty, useBadgeBySymbol, useConfig, useTpslPriceChecker, useOrderEntity, useReferralInfo, useLeverageBySymbol } from '@orderly.network/hooks';
 import { useTranslation, Trans, i18n } from '@orderly.network/i18n';
 import { OrderStatus, AlgoOrderRootType, MarginMode, AlgoOrderType, OrderSide, OrderType, EMPTY_LIST } from '@orderly.network/types';
 import { formatSymbol, Decimal, commify, commifyOptional, getTrailingStopPrice, formatNum } from '@orderly.network/utils';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { usePagination, modal, Text, Button, ThrottledButton, CloseIcon, cn, Flex, Input, inputFormatter, Slider, DataFilter, TableFeatures, Grid, Picker, ListView, Tabs, TabPanel, Badge, Tooltip, EditIcon, toast as toast$1, Popover, PopoverRoot, PopoverTrigger, PopoverContent, Divider, ShareIcon, CheckIcon, Statistic, SimpleDialog, useModal, Checkbox } from '@orderly.network/ui';
+import { usePagination, modal, Text, Button, ThrottledButton, CloseIcon, cn, Flex, Input, inputFormatter, Slider, DataFilter, TableFeatures, Grid, Picker, ListView, Tabs, TabPanel, Badge, Tooltip, EditIcon, toast as toast$1, Popover, PopoverRoot, PopoverTrigger, PopoverContent, Divider, ShareIcon, CheckIcon, Statistic, SymbolBadge as SymbolBadge$1, SimpleDialog, useModal, Checkbox } from '@orderly.network/ui';
 import { useDataTap, useOrderEntryFormErrorMsg } from '@orderly.network/react-app';
 import { PositionTPSLPopover, CloseToLiqPriceIcon, PositionTPSLSheet } from '@orderly.network/ui-tpsl';
 import { format, subDays, differenceInDays } from 'date-fns';
@@ -305,6 +305,7 @@ var init_shareButton_script = __esm({
       const { sharePnLConfig, order, iconSize } = props;
       const { t } = useTranslation();
       const { getFirstRefCode } = useReferralInfo();
+      const { brokerNameRaw } = useBadgeBySymbol(order.symbol);
       const refCode = useMemo(() => {
         return getFirstRefCode()?.code;
       }, [getFirstRefCode]);
@@ -322,7 +323,8 @@ var init_shareButton_script = __esm({
             },
             refCode,
             leverage,
-            ...sharePnLConfig
+            ...sharePnLConfig,
+            brokerName: sharePnLConfig?.brokerName ?? brokerNameRaw
           }
         });
       };
@@ -2009,6 +2011,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"() {
@@ -2385,23 +2410,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(
@@ -2932,6 +2951,7 @@ var init_useColumn = __esm({
     init_quantityCell();
     init_trailingCallbackCell();
     init_triggerPriceCell();
+    init_orderSymbolCell();
     init_renew();
     init_tpslEdit();
     init_tpslPrice();
@@ -2950,7 +2970,7 @@ var init_useColumn = __esm({
           case "all" /* all */:
             return [
               instrument({
-                width: 174,
+                width: 200,
                 showType: true,
                 onSymbolChange,
                 enableSort: false
@@ -2988,7 +3008,7 @@ var init_useColumn = __esm({
           case "pending" /* pending */:
             return [
               instrument({
-                width: 172,
+                width: 200,
                 showType: true,
                 onSymbolChange,
                 enableSort: false
@@ -3012,7 +3032,7 @@ var init_useColumn = __esm({
           case "tp_sl" /* tp_sl */:
             return [
               instrument({
-                width: 176,
+                width: 200,
                 showType: true,
                 onSymbolChange,
                 enableSort: false
@@ -3030,7 +3050,7 @@ var init_useColumn = __esm({
             return [
               instrument({
                 showType: true,
-                width: 166,
+                width: 200,
                 onSymbolChange
               }),
               // type({ width: 124 }),
@@ -3065,7 +3085,7 @@ var init_useColumn = __esm({
             return [
               instrument({
                 showType: true,
-                width: 154,
+                width: 200,
                 onSymbolChange,
                 enableSort: false
               }),
@@ -3089,7 +3109,7 @@ var init_useColumn = __esm({
             return [
               instrument({
                 showType: true,
-                width: 154,
+                width: 200,
                 onSymbolChange
               }),
               // side({ width: 124 }),
@@ -3112,7 +3132,7 @@ var init_useColumn = __esm({
             return [
               instrument({
                 showType: true,
-                width: 160,
+                width: 200,
                 onSymbolChange
               }),
               // side({ width: 124 }),
@@ -3150,10 +3170,23 @@ var init_useColumn = __esm({
     };
   }
 });
+var SymbolBadge;
+var init_symbolBadge = __esm({
+  "src/components/symbolBadge.tsx"() {
+    SymbolBadge = (props) => {
+      const { brokerId, brokerName, brokerNameRaw } = useBadgeBySymbol(
+        props.symbol
+      );
+      const badge = brokerName ?? brokerId ?? void 0;
+      return /* @__PURE__ */ jsx(SymbolBadge$1, { badge, fullName: brokerNameRaw });
+    };
+  }
+});
 var SymbolToken, OrderTypeView, OrderTime, OrderState, Qty, Filled, EstTotal, TriggerPrice, MarkPrice, LimitPrice, TPTrigger, SLTrigger, TPPrice, SLPrice, TPSLQuantity, AvgPrice2, OrderPrice, RealizedPnL, MobileTooltip, Fee, TrailingCallback, TrailingPrice;
 var init_items = __esm({
   "src/components/orderList/mobile/items.tsx"() {
     init_util();
+    init_symbolBadge();
     init_tpslOrderRowContext();
     SymbolToken = (props) => {
       const { item } = props;
@@ -3164,9 +3197,10 @@ var init_items = __esm({
         {
           intensity: 80,
           rule: "symbol",
-          formatString: "base-type",
+          formatString: "base",
           size: "sm",
           prefix: /* @__PURE__ */ jsx(Badge, { color: isBuy ? "success" : "danger", size: "xs", children: isBuy ? t("common.buy") : t("common.sell") }),
+          suffix: /* @__PURE__ */ jsx(SymbolBadge, { symbol: item.symbol }),
           onClick: () => {
             props.onSymbolChange?.({ symbol: item.symbol });
           },
@@ -4101,6 +4135,7 @@ var ConfirmDialogContent;
 var init_editDialogContent = __esm({
   "src/components/orderList/mobile/editSheet/components/editDialogContent.tsx"() {
     init_util();
+    init_symbolBadge();
     ConfirmDialogContent = (props) => {
       const { item } = props;
       const {
@@ -4123,16 +4158,19 @@ var init_editDialogContent = __esm({
           }
         ),
         /* @__PURE__ */ jsxs(Flex, { gap: 2, mb: 3, mt: 2, justify: "between", children: [
-          /* @__PURE__ */ jsx(
-            Text.formatted,
-            {
-              rule: "symbol",
-              formatString: "base-type",
-              size: "base",
-              showIcon: true,
-              children: item.symbol
-            }
-          ),
+          /* @__PURE__ */ jsxs(Flex, { direction: "column", itemAlign: "start", gap: 1, grow: true, children: [
+            /* @__PURE__ */ jsx(
+              Text.formatted,
+              {
+                rule: "symbol",
+                formatString: "base",
+                size: "base",
+                showIcon: true,
+                children: item.symbol
+              }
+            ),
+            /* @__PURE__ */ jsx(SymbolBadge, { symbol: item.symbol })
+          ] }),
           /* @__PURE__ */ jsxs(Flex, { direction: "row", gap: 1, children: [
             parseBadgesFor(item)?.map((e, index) => /* @__PURE__ */ jsx(
               Badge,
@@ -4274,11 +4312,22 @@ var EditSheetHeader;
 var init_editSheetHeader = __esm({
   "src/components/orderList/mobile/editSheet/components/editSheetHeader.tsx"() {
     init_util();
+    init_symbolBadge();
     EditSheetHeader = (props) => {
       const { item } = props;
       const { t } = useTranslation();
       return /* @__PURE__ */ jsxs(Flex, { width: "100%", justify: "between", children: [
-        /* @__PURE__ */ jsx(Text.formatted, { rule: "symbol", showIcon: true, intensity: 80, children: item.symbol }),
+        /* @__PURE__ */ jsx(
+          Text.formatted,
+          {
+            rule: "symbol",
+            formatString: "base",
+            showIcon: true,
+            intensity: 80,
+            suffix: /* @__PURE__ */ jsx(SymbolBadge, { symbol: item.symbol }),
+            children: item.symbol
+          }
+        ),
         /* @__PURE__ */ jsxs(Flex, { direction: "row", gap: 1, children: [
           parseBadgesFor(props.item)?.map((e, index) => /* @__PURE__ */ jsx(
             Badge,
@@ -5537,7 +5586,7 @@ var init_orderList_script = __esm({
         page: enableLoadMore || !manualPagination ? void 0 : page,
         // pending and ts_sl list get all data
         size: manualPagination ? pageSize : 500,
-        sourceTypeAll: type === "orderHistory" /* orderHistory */,
+        sourceTypeAll: type === "orderHistory" /* orderHistory */ || type === "filled" /* filled */,
         dateRange,
         includes,
         excludes