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

package/dist/index.d.mts

@@ -104,7 +104,7 @@ declare const usePositionHistoryScript: (props: PositionHistoryProps$1) => {
         value: any;
     }) => void;
     symbol: string | undefined;
-    filterDays: 1 | 7 | 30 | 90 | null;
+    filterDays: 1 | 30 | 7 | 90 | null;
     updateFilterDays: (days: 1 | 7 | 30 | 90) => void;
     pnlNotionalDecimalPrecision: number | undefined;
     onSort: (options?: _orderly_network_ui.TableSort) => void;
@@ -147,7 +147,7 @@ declare const useLiquidationScript: (props: LiquidationProps) => {
         from?: Date;
         to?: Date;
     };
-    filterDays: 1 | 7 | 30 | 90 | null;
+    filterDays: 1 | 30 | 7 | 90 | null;
     updateFilterDays: (days: 1 | 7 | 30 | 90) => void;
     filterItems: any[];
     onFilter: (filter: {

package/dist/index.d.ts

@@ -104,7 +104,7 @@ declare const usePositionHistoryScript: (props: PositionHistoryProps$1) => {
         value: any;
     }) => void;
     symbol: string | undefined;
-    filterDays: 1 | 7 | 30 | 90 | null;
+    filterDays: 1 | 30 | 7 | 90 | null;
     updateFilterDays: (days: 1 | 7 | 30 | 90) => void;
     pnlNotionalDecimalPrecision: number | undefined;
     onSort: (options?: _orderly_network_ui.TableSort) => void;
@@ -147,7 +147,7 @@ declare const useLiquidationScript: (props: LiquidationProps) => {
         from?: Date;
         to?: Date;
     };
-    filterDays: 1 | 7 | 30 | 90 | null;
+    filterDays: 1 | 30 | 7 | 90 | null;
     updateFilterDays: (days: 1 | 7 | 30 | 90) => void;
     filterItems: any[];
     onFilter: (filter: {

package/dist/index.js

@@ -5,8 +5,8 @@ var React2 = require('react');
 var i18n = require('@orderly.network/i18n');
 var types = require('@orderly.network/types');
 var utils = require('@orderly.network/utils');
-var jsxRuntime = require('react/jsx-runtime');
 var hooks = require('@orderly.network/hooks');
+var jsxRuntime = require('react/jsx-runtime');
 var reactApp = require('@orderly.network/react-app');
 var perp = require('@orderly.network/perp');
 var uiConnector = require('@orderly.network/ui-connector');
@@ -20,6 +20,11 @@ function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 var React2__default = /*#__PURE__*/_interopDefault(React2);
 
 // src/index.ts
+var SymbolBadge = ({ symbol }) => {
+  const { brokerId, brokerName, brokerNameRaw } = hooks.useBadgeBySymbol(symbol);
+  const badge = brokerName ?? brokerId ?? void 0;
+  return /* @__PURE__ */ jsxRuntime.jsx(ui.SymbolBadge, { badge, fullName: brokerNameRaw });
+};
 var ConfirmHeader = (props) => {
   const { hideCloseIcon = false } = props;
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "oui-relative oui-w-full oui-border-b oui-border-line-4 oui-pb-3", children: [
@@ -176,9 +181,10 @@ var LimitConfirmDialog = (props) => {
         ui.Text.formatted,
         {
           rule: "symbol",
-          formatString: "base-type",
+          formatString: "base",
           size: "base",
           showIcon: true,
+          suffix: /* @__PURE__ */ jsxRuntime.jsx(SymbolBadge, { symbol: order.symbol }),
           children: order.symbol
         }
       ),
@@ -326,8 +332,10 @@ var FundingFeeHistoryUI = ({ total, symbol, start_t, end_t }) => {
               ui.Text.formatted,
               {
                 rule: "symbol",
+                formatString: "base",
                 className: "oui-font-semibold",
                 intensity: 98,
+                suffix: /* @__PURE__ */ jsxRuntime.jsx(SymbolBadge, { symbol }),
                 children: symbol
               }
             )
@@ -410,7 +418,7 @@ var HistoryDataListView = ({ isLoading, data, loadMore }) => {
         dataIndex: "created_time",
         width: 120,
         render: (value) => {
-          return /* @__PURE__ */ jsxRuntime.jsx(ui.Text.formatted, { rule: "date", children: value });
+          return /* @__PURE__ */ jsxRuntime.jsx(ui.Text.formatted, { rule: "date", suffix: /* @__PURE__ */ jsxRuntime.jsx(SymbolBadge, { symbol: value }), children: value });
         }
       },
       {
@@ -1122,9 +1130,10 @@ var ReversePosition = (props) => {
                 size: "base",
                 weight: "semibold",
                 rule: "symbol",
-                formatString: "base-type",
+                formatString: "base",
                 intensity: 98,
                 showIcon: true,
+                suffix: /* @__PURE__ */ jsxRuntime.jsx(SymbolBadge, { symbol }),
                 children: symbol
               }
             ),
@@ -2115,10 +2124,11 @@ var SymbolInfo = ({ symbol }) => {
       ui.Text.formatted,
       {
         rule: "symbol",
-        formatString: "base-type",
+        formatString: "base",
         size: "base",
         weight: "semibold",
         intensity: 98,
+        suffix: /* @__PURE__ */ jsxRuntime.jsx(SymbolBadge, { symbol }),
         children: symbol
       }
     )
@@ -2297,7 +2307,16 @@ var MobileClosePosition = (props) => {
   const orderType = isMarketClose ? t("orderEntry.orderType.market") : t("orderEntry.orderType.limit");
   const orderSide = isBuy ? /* @__PURE__ */ jsxRuntime.jsx(ui.Badge, { color: "success", size: "xs", children: t("common.buy") }) : /* @__PURE__ */ jsxRuntime.jsx(ui.Badge, { color: "danger", size: "xs", children: t("common.sell") });
   const header = /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { width: "100%", justify: "between", children: [
-    /* @__PURE__ */ jsxRuntime.jsx(ui.Text.formatted, { rule: "symbol", showIcon: true, children: position.symbol }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      ui.Text.formatted,
+      {
+        rule: "symbol",
+        formatString: "base",
+        showIcon: true,
+        suffix: /* @__PURE__ */ jsxRuntime.jsx(SymbolBadge, { symbol: position.symbol }),
+        children: position.symbol
+      }
+    ),
     /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { gap: 1, children: [
       /* @__PURE__ */ jsxRuntime.jsx(ui.Badge, { color: "neutral", size: "xs", children: orderType }),
       orderSide
@@ -3032,6 +3051,25 @@ var PartialTPSL = (props) => {
     ] })
   ] });
 };
+var PositionSymbolCell = (props) => {
+  const { symbol, onSymbolChange, className, formatString, ...rest } = props;
+  const { brokerId, brokerName, brokerNameRaw } = hooks.useBadgeBySymbol(symbol);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    ui.Text.symbolBadge,
+    {
+      ...rest,
+      className: ui.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__ */ jsxRuntime.jsx(
@@ -3075,6 +3113,7 @@ var useShareButtonScript = (props) => {
   const { position, sharePnLConfig, iconSize } = props;
   const { getFirstRefCode } = hooks.useReferralInfo();
   const symbolsInfo = hooks.useSymbolsInfo();
+  const { brokerNameRaw } = hooks.useBadgeBySymbol(position.symbol);
   const refCode = React2.useMemo(() => {
     return getFirstRefCode()?.code;
   }, [getFirstRefCode]);
@@ -3153,7 +3192,8 @@ var useShareButtonScript = (props) => {
           marginMode: position.margin_mode
         },
         refCode,
-        ...sharePnLConfig
+        ...sharePnLConfig,
+        brokerName: sharePnLConfig?.brokerName ?? brokerNameRaw
       }
     });
   };
@@ -3472,7 +3512,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 || "");
         },
@@ -3481,9 +3521,9 @@ var useColumn = (config) => {
             ui.Box,
             {
               width: 4,
-              height: 20,
+              height: 24,
               className: ui.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"
               )
             }
@@ -3491,16 +3531,10 @@ var useColumn = (config) => {
           /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { direction: "column", itemAlign: "start", gap: 1, children: [
             /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { gap: 1, itemAlign: "center", children: [
               /* @__PURE__ */ jsxRuntime.jsx(
-                ui.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__ */ jsxRuntime.jsx(RwaStatusTag, { symbol: value })
@@ -3791,12 +3825,13 @@ var SymbolToken = (props) => {
         ui.Text.formatted,
         {
           rule: "symbol",
-          formatString: "base-type",
+          formatString: "base",
           size: "2xs",
           showIcon: true,
           onClick: () => {
             props.onSymbolChange?.({ symbol: item.symbol });
           },
+          suffix: /* @__PURE__ */ jsxRuntime.jsx(SymbolBadge, { symbol: item.symbol }),
           children: item.symbol
         }
       ),
@@ -4453,7 +4488,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 || "");
         },
@@ -4683,16 +4718,10 @@ var SymbolInfo2 = (props) => {
     ),
     /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { direction: "column", itemAlign: "start", gap: 1, children: [
       /* @__PURE__ */ jsxRuntime.jsx(
-        ui.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__ */ jsxRuntime.jsx(ui.Flex, { gap: 1, wrap: "wrap", children: tags })
@@ -5026,9 +5055,10 @@ var SymbolToken2 = (props) => {
     {
       intensity: 80,
       rule: "symbol",
-      formatString: "base-type",
+      formatString: "base",
       size: "sm",
       prefix: /* @__PURE__ */ jsxRuntime.jsx(ui.Badge, { color: isBuy ? "success" : "danger", size: "xs", children: isBuy ? t("common.buy") : t("common.sell") }),
+      suffix: /* @__PURE__ */ jsxRuntime.jsx(SymbolBadge, { symbol }),
       onClick: () => {
         props.onSymbolChange?.({ symbol });
       },
@@ -5336,7 +5366,7 @@ var Header = (props) => {
         ]
       }
     ),
-    /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { direction: "column", itemAlign: "end", className: "oui-flex-1", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { direction: "column", itemAlign: "end", children: [
       /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "2xs", intensity: 36, children: t("positions.history.column.netPnl") }),
       /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { gapX: 1, children: [
         /* @__PURE__ */ jsxRuntime.jsx("button", { onClick: showAlert, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text.numeral, { size: "xs", coloring: true, children: props.item.netPnL ?? "--" }) }),
@@ -5574,16 +5604,8 @@ var useLiquidationColumn = (props) => {
       {
         title: t("common.symbol"),
         dataIndex: "Symbol",
-        // width: 202,
-        render: (_, record) => /* @__PURE__ */ jsxRuntime.jsx(ui.Flex, { direction: "column", itemAlign: "start", children: record.positions_by_perp?.map((item) => /* @__PURE__ */ jsxRuntime.jsx(
-          ui.Text.formatted,
-          {
-            rule: "symbol",
-            formatString: "base-quote",
-            children: item.symbol
-          },
-          item.symbol
-        )) })
+        width: 120,
+        render: (_, record) => /* @__PURE__ */ jsxRuntime.jsx(ui.Flex, { direction: "column", itemAlign: "start", children: record.positions_by_perp?.map((item) => /* @__PURE__ */ jsxRuntime.jsx(PositionSymbolCell, { symbol: item.symbol }, item.symbol)) })
       },
       // Price (USDC)
       {
@@ -5751,9 +5773,15 @@ var Header2 = (props) => {
       ui.Text.formatted,
       {
         rule: "symbol",
-        formatString: "base-quote",
+        formatString: "base",
         size: "xs",
         intensity: 80,
+        suffix: /* @__PURE__ */ jsxRuntime.jsx(
+          SymbolBadge,
+          {
+            symbol: props.item.positions_by_perp?.[0]?.symbol || ""
+          }
+        ),
         children: props.item.positions_by_perp?.[0]?.symbol || ""
       }
     ) }) }) }),