@orderly.network/ui-positions 2.11.2 → 2.12.0-alpha.0

package/dist/index.mjs

@@ -1,10 +1,10 @@
-import { registerSimpleDialog, registerSimpleSheet, useModal, SimpleDialog, useScreen, Flex, Text, Badge, Divider, toast, modal, CloseIcon, Button, ThrottledButton, ArrowDownShortIcon, ArrowUpShortIcon, IconButton, TokenIcon, cn, Input, inputFormatter, Slider, Statistic, Grid, ExclamationFillIcon, Tooltip, DataTable, ListView, SimpleSheet, usePagination, DataFilter, PopoverRoot, PopoverTrigger, PopoverContent, Checkbox, formatAddress, Box, HoverCard, AddCircleIcon, Tips, ChevronRightIcon, ArrowLeftRightIcon, capitalizeFirstLetter, ShareIcon, EditIcon, Select } from '@orderly.network/ui';
+import { registerSimpleDialog, registerSimpleSheet, useModal, SimpleDialog, useScreen, Flex, Text, Badge, Divider, toast, modal, CloseIcon, Button, ThrottledButton, SymbolBadge as SymbolBadge$1, ArrowDownShortIcon, ArrowUpShortIcon, IconButton, TokenIcon, cn, Input, inputFormatter, Slider, Statistic, Grid, ExclamationFillIcon, Tooltip, DataTable, ListView, SimpleSheet, usePagination, DataFilter, PopoverRoot, PopoverTrigger, PopoverContent, Checkbox, formatAddress, Box, HoverCard, AddCircleIcon, Tips, ChevronRightIcon, ArrowLeftRightIcon, capitalizeFirstLetter, ShareIcon, EditIcon, Select } from '@orderly.network/ui';
 import React2, { createContext, useMemo, useState, useCallback, useContext, useEffect, useRef } from 'react';
 import { i18n, useTranslation } from '@orderly.network/i18n';
 import { OrderSide, MarginMode, OrderType, EMPTY_LIST, AccountStatusEnum, TrackerEventName, OrderStatus, AlgoOrderRootType, PositionType, AlgoOrderType } from '@orderly.network/types';
 import { commifyOptional, Decimal, formatNum, getTimestamp, commify } from '@orderly.network/utils';
+import { useLocalStorage, useSymbolsInfo, useMarkPrice, usePositionStream, useSubAccountMutation, useMutation, useBadgeBySymbol, useCollateral, usePositions, useAppStore, usePrivateInfiniteQuery, useBoolean, useSessionStorage, useAccount, usePrivateQuery, useTrack, usePositionClose, useSWR, fetcher, useEventEmitter, useDebouncedCallback, useGetRwaSymbolOpenStatus, useTpslPriceChecker, useConfig, findPositionTPSLFromOrders, findTPSLFromOrder, useReferralInfo, useLeverageBySymbol, utils, useMaxLeverage } from '@orderly.network/hooks';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { useLocalStorage, useSymbolsInfo, useMarkPrice, usePositionStream, useSubAccountMutation, useMutation, useCollateral, usePositions, useAppStore, usePrivateInfiniteQuery, useBoolean, useSessionStorage, useAccount, usePrivateQuery, useTrack, usePositionClose, useSWR, fetcher, useEventEmitter, useDebouncedCallback, useGetRwaSymbolOpenStatus, useTpslPriceChecker, useConfig, findPositionTPSLFromOrders, findTPSLFromOrder, useReferralInfo, useLeverageBySymbol, utils, useMaxLeverage } from '@orderly.network/hooks';
 import { useDataTap, useOrderEntryFormErrorMsg } from '@orderly.network/react-app';
 import { account, positions } from '@orderly.network/perp';
 import { AuthGuardDataTable } from '@orderly.network/ui-connector';
@@ -14,6 +14,11 @@ import { CloseToLiqPriceIcon, TPSLSheetId, TPSLDialogId, TPSLDetailSheetId, TPSL
 import { subDays, differenceInDays } from 'date-fns';
 
 // src/index.ts
+var SymbolBadge = ({ symbol }) => {
+  const { brokerId, brokerName, brokerNameRaw } = useBadgeBySymbol(symbol);
+  const badge = brokerName ?? brokerId ?? void 0;
+  return /* @__PURE__ */ jsx(SymbolBadge$1, { badge, fullName: brokerNameRaw });
+};
 var ConfirmHeader = (props) => {
   const { hideCloseIcon = false } = props;
   return /* @__PURE__ */ jsxs("div", { className: "oui-relative oui-w-full oui-border-b oui-border-line-4 oui-pb-3", children: [
@@ -170,9 +175,10 @@ var LimitConfirmDialog = (props) => {
         Text.formatted,
         {
           rule: "symbol",
-          formatString: "base-type",
+          formatString: "base",
           size: "base",
           showIcon: true,
+          suffix: /* @__PURE__ */ jsx(SymbolBadge, { symbol: order.symbol }),
           children: order.symbol
         }
       ),
@@ -320,8 +326,10 @@ var FundingFeeHistoryUI = ({ total, symbol, start_t, end_t }) => {
               Text.formatted,
               {
                 rule: "symbol",
+                formatString: "base",
                 className: "oui-font-semibold",
                 intensity: 98,
+                suffix: /* @__PURE__ */ jsx(SymbolBadge, { symbol }),
                 children: symbol
               }
             )
@@ -404,7 +412,7 @@ var HistoryDataListView = ({ isLoading, data, loadMore }) => {
         dataIndex: "created_time",
         width: 120,
         render: (value) => {
-          return /* @__PURE__ */ jsx(Text.formatted, { rule: "date", children: value });
+          return /* @__PURE__ */ jsx(Text.formatted, { rule: "date", suffix: /* @__PURE__ */ jsx(SymbolBadge, { symbol: value }), children: value });
         }
       },
       {
@@ -1116,9 +1124,10 @@ var ReversePosition = (props) => {
                 size: "base",
                 weight: "semibold",
                 rule: "symbol",
-                formatString: "base-type",
+                formatString: "base",
                 intensity: 98,
                 showIcon: true,
+                suffix: /* @__PURE__ */ jsx(SymbolBadge, { symbol }),
                 children: symbol
               }
             ),
@@ -2109,10 +2118,11 @@ var SymbolInfo = ({ symbol }) => {
       Text.formatted,
       {
         rule: "symbol",
-        formatString: "base-type",
+        formatString: "base",
         size: "base",
         weight: "semibold",
         intensity: 98,
+        suffix: /* @__PURE__ */ jsx(SymbolBadge, { symbol }),
         children: symbol
       }
     )
@@ -2291,7 +2301,16 @@ var MobileClosePosition = (props) => {
   const orderType = isMarketClose ? t("orderEntry.orderType.market") : t("orderEntry.orderType.limit");
   const orderSide = isBuy ? /* @__PURE__ */ jsx(Badge, { color: "success", size: "xs", children: t("common.buy") }) : /* @__PURE__ */ jsx(Badge, { color: "danger", size: "xs", children: t("common.sell") });
   const header = /* @__PURE__ */ jsxs(Flex, { width: "100%", justify: "between", children: [
-    /* @__PURE__ */ jsx(Text.formatted, { rule: "symbol", showIcon: true, children: position.symbol }),
+    /* @__PURE__ */ jsx(
+      Text.formatted,
+      {
+        rule: "symbol",
+        formatString: "base",
+        showIcon: true,
+        suffix: /* @__PURE__ */ jsx(SymbolBadge, { symbol: position.symbol }),
+        children: position.symbol
+      }
+    ),
     /* @__PURE__ */ jsxs(Flex, { gap: 1, children: [
       /* @__PURE__ */ jsx(Badge, { color: "neutral", size: "xs", children: orderType }),
       orderSide
@@ -3026,6 +3045,25 @@ var PartialTPSL = (props) => {
     ] })
   ] });
 };
+var PositionSymbolCell = (props) => {
+  const { symbol, onSymbolChange, className, formatString, ...rest } = props;
+  const { brokerId, brokerName, brokerNameRaw } = useBadgeBySymbol(symbol);
+  return /* @__PURE__ */ jsx(
+    Text.symbolBadge,
+    {
+      ...rest,
+      className: cn(className, "oui-cursor-pointer"),
+      badge: brokerName ?? brokerId ?? void 0,
+      fullName: brokerNameRaw,
+      onClick: (e) => {
+        onSymbolChange?.({ symbol });
+        e.stopPropagation();
+        e.preventDefault();
+      },
+      children: symbol
+    }
+  );
+};
 var ReversePositionButton = (props) => {
   const { position } = props;
   return /* @__PURE__ */ jsx(
@@ -3069,6 +3107,7 @@ var useShareButtonScript = (props) => {
   const { position, sharePnLConfig, iconSize } = props;
   const { getFirstRefCode } = useReferralInfo();
   const symbolsInfo = useSymbolsInfo();
+  const { brokerNameRaw } = useBadgeBySymbol(position.symbol);
   const refCode = useMemo(() => {
     return getFirstRefCode()?.code;
   }, [getFirstRefCode]);
@@ -3147,7 +3186,8 @@ var useShareButtonScript = (props) => {
           marginMode: position.margin_mode
         },
         refCode,
-        ...sharePnLConfig
+        ...sharePnLConfig,
+        brokerName: sharePnLConfig?.brokerName ?? brokerNameRaw
       }
     });
   };
@@ -3466,7 +3506,7 @@ var useColumn = (config) => {
         title: t("common.symbol"),
         dataIndex: "symbol",
         fixed: "left",
-        width: 176,
+        width: 200,
         onSort: (r1, r2) => {
           return r1.symbol?.localeCompare(r2.symbol || "");
         },
@@ -3475,9 +3515,9 @@ var useColumn = (config) => {
             Box,
             {
               width: 4,
-              height: 20,
+              height: 24,
               className: cn(
-                "oui-h-[38px] oui-rounded-[1px]",
+                "oui-h-[42px] oui-rounded-[1px]",
                 record.position_qty > 0 ? "oui-bg-trade-profit" : "oui-bg-trade-loss"
               )
             }
@@ -3485,16 +3525,10 @@ var useColumn = (config) => {
           /* @__PURE__ */ jsxs(Flex, { direction: "column", itemAlign: "start", gap: 1, children: [
             /* @__PURE__ */ jsxs(Flex, { gap: 1, itemAlign: "center", children: [
               /* @__PURE__ */ jsx(
-                Text.formatted,
+                PositionSymbolCell,
                 {
-                  formatString: "base-type",
-                  className: "oui-cursor-pointer",
-                  onClick: (e) => {
-                    onSymbolChange?.({ symbol: value });
-                    e.stopPropagation();
-                    e.preventDefault();
-                  },
-                  children: `${value.split("_")[1]}-PERP`
+                  symbol: value,
+                  onSymbolChange
                 }
               ),
               /* @__PURE__ */ jsx(RwaStatusTag, { symbol: value })
@@ -3785,12 +3819,13 @@ var SymbolToken = (props) => {
         Text.formatted,
         {
           rule: "symbol",
-          formatString: "base-type",
+          formatString: "base",
           size: "2xs",
           showIcon: true,
           onClick: () => {
             props.onSymbolChange?.({ symbol: item.symbol });
           },
+          suffix: /* @__PURE__ */ jsx(SymbolBadge, { symbol: item.symbol }),
           children: item.symbol
         }
       ),
@@ -4447,7 +4482,7 @@ var usePositionHistoryColumn = (props) => {
         title: t("common.symbol"),
         dataIndex: "symbol",
         fixed: "left",
-        width: 210,
+        width: 250,
         onSort: (r1, r2) => {
           return r1.symbol?.localeCompare(r2.symbol || "");
         },
@@ -4677,16 +4712,10 @@ var SymbolInfo2 = (props) => {
     ),
     /* @__PURE__ */ jsxs(Flex, { direction: "column", itemAlign: "start", gap: 1, children: [
       /* @__PURE__ */ jsx(
-        Text.formatted,
+        PositionSymbolCell,
         {
-          formatString: "base-type",
-          className: "oui-cursor-pointer",
-          onClick: (e) => {
-            onSymbolChange?.({ symbol: record.symbol });
-            e.stopPropagation();
-            e.preventDefault();
-          },
-          children: `${record.symbol.split("_")[1]}-PERP`
+          symbol: record.symbol,
+          onSymbolChange
         }
       ),
       /* @__PURE__ */ jsx(Flex, { gap: 1, wrap: "wrap", children: tags })
@@ -5020,9 +5049,10 @@ var SymbolToken2 = (props) => {
     {
       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 }),
       onClick: () => {
         props.onSymbolChange?.({ symbol });
       },
@@ -5330,7 +5360,7 @@ var Header = (props) => {
         ]
       }
     ),
-    /* @__PURE__ */ jsxs(Flex, { direction: "column", itemAlign: "end", className: "oui-flex-1", children: [
+    /* @__PURE__ */ jsxs(Flex, { direction: "column", itemAlign: "end", children: [
       /* @__PURE__ */ jsx(Text, { size: "2xs", intensity: 36, children: t("positions.history.column.netPnl") }),
       /* @__PURE__ */ jsxs(Flex, { gapX: 1, children: [
         /* @__PURE__ */ jsx("button", { onClick: showAlert, children: /* @__PURE__ */ jsx(Text.numeral, { size: "xs", coloring: true, children: props.item.netPnL ?? "--" }) }),
@@ -5568,16 +5598,8 @@ var useLiquidationColumn = (props) => {
       {
         title: t("common.symbol"),
         dataIndex: "Symbol",
-        // width: 202,
-        render: (_, record) => /* @__PURE__ */ jsx(Flex, { direction: "column", itemAlign: "start", children: record.positions_by_perp?.map((item) => /* @__PURE__ */ jsx(
-          Text.formatted,
-          {
-            rule: "symbol",
-            formatString: "base-quote",
-            children: item.symbol
-          },
-          item.symbol
-        )) })
+        width: 120,
+        render: (_, record) => /* @__PURE__ */ jsx(Flex, { direction: "column", itemAlign: "start", children: record.positions_by_perp?.map((item) => /* @__PURE__ */ jsx(PositionSymbolCell, { symbol: item.symbol }, item.symbol)) })
       },
       // Price (USDC)
       {
@@ -5745,9 +5767,15 @@ var Header2 = (props) => {
       Text.formatted,
       {
         rule: "symbol",
-        formatString: "base-quote",
+        formatString: "base",
         size: "xs",
         intensity: 80,
+        suffix: /* @__PURE__ */ jsx(
+          SymbolBadge,
+          {
+            symbol: props.item.positions_by_perp?.[0]?.symbol || ""
+          }
+        ),
         children: props.item.positions_by_perp?.[0]?.symbol || ""
       }
     ) }) }) }),