@orderly.network/ui-positions 3.0.4-alpha.4 → 3.1.0-alpha.0

package/dist/index.mjs

@@ -27,7 +27,7 @@ var ConfirmHeader = (props) => {
       "button",
       {
         onClick: props.onClose,
-        className: "oui-absolute oui-right-0 oui-top-0 oui-p-2 oui-text-base-contrast-54 hover:oui-text-base-contrast-80",
+        className: "oui-absolute oui-end-0 oui-top-0 oui-p-2 oui-text-base-contrast-54 hover:oui-text-base-contrast-80",
         children: /* @__PURE__ */ jsx(CloseIcon, { size: 18, color: "white" })
       }
     )
@@ -798,6 +798,7 @@ var useCombinePositionsScript = (props) => {
   const { pagination, setPage } = usePagination({ pageSize: 50 });
   const symbolsInfo = useSymbolsInfo();
   const { state } = useAccount();
+  const { t } = useTranslation();
   const [mainAccountPositions, , { isLoading }] = usePositionStream(symbol, {
     calcMode,
     includedPendingOrder
@@ -853,9 +854,10 @@ var useCombinePositionsScript = (props) => {
   const groupDataSource = useMemo(() => {
     return groupDataByAccount(filtered, {
       mainAccountId: state.mainAccountId,
+      mainAccountLabel: t("common.mainAccount"),
       subAccounts: state.subAccounts
     });
-  }, [filtered, state.mainAccountId, state.subAccounts]);
+  }, [filtered, state.mainAccountId, state.subAccounts, t]);
   const loading = isLoading || isPositionLoading || isAccountInfoLoading;
   useEffect(() => {
     setPage(1);
@@ -876,7 +878,7 @@ var useCombinePositionsScript = (props) => {
   };
 };
 var groupDataByAccount = (data, options) => {
-  const { mainAccountId = "", subAccounts = [] } = options;
+  const { mainAccountId = "", mainAccountLabel, subAccounts = [] } = options;
   const map = /* @__PURE__ */ new Map();
   for (const item of data) {
     const accountId = item.account_id || mainAccountId;
@@ -886,7 +888,7 @@ var groupDataByAccount = (data, options) => {
     } else {
       map.set(accountId, {
         account_id: accountId,
-        description: accountId === mainAccountId ? i18n.t("common.mainAccount") : findSubAccount?.description || formatAddress(findSubAccount?.id || ""),
+        description: accountId === mainAccountId ? mainAccountLabel : findSubAccount?.description || formatAddress(findSubAccount?.id || ""),
         children: [item]
       });
     }
@@ -1470,7 +1472,7 @@ var ReversePositionWidget = (props) => {
       open: visible,
       onOpenChange,
       size: "sm",
-      title: i18n.t("positions.reverse.title"),
+      title: t("positions.reverse.title"),
       classNames: {
         content: "oui-border oui-border-line-6"
       },
@@ -2067,8 +2069,8 @@ var Quantity = ({
           input: "oui-text-sm oui-font-semibold oui-text-base-contrast-98",
           // override default additional padding so value can sit closer to suffix
           additional: "oui-px-0",
-          prefix: "oui-pl-3 oui-pr-2 oui-text-sm oui-text-base-contrast-54",
-          suffix: "oui-pl-2 oui-pr-3 oui-text-sm oui-text-base-contrast-54"
+          prefix: "oui-ps-3 oui-pe-2 oui-text-sm oui-text-base-contrast-54",
+          suffix: "oui-ps-2 oui-pe-3 oui-text-sm oui-text-base-contrast-54"
         }
       }
     ),
@@ -3241,14 +3243,14 @@ var TriggerPriceItem = (props) => {
   ).toNumber();
   const type = orderType === AlgoOrderType.TAKE_PROFIT ? "TP" : "SL";
   return /* @__PURE__ */ jsxs(Flex, { children: [
-    /* @__PURE__ */ jsx(Text, { intensity: 54, className: "oui-mr-1", children: `${type} PnL:` }),
+    /* @__PURE__ */ jsx(Text, { intensity: 54, className: "oui-me-1", children: `${type} PnL:` }),
     /* @__PURE__ */ jsx(
       Text.formatted,
       {
         rule: "price",
         className: pnl === 0 ? "oui-text-base-contrast-36" : pnl > 0 ? "oui-text-trade-profit oui-gap-0" : "oui-text-trade-loss oui-gap-0",
         prefix: /* @__PURE__ */ jsx(Text, { children: pnl === 0 ? "" : pnl > 0 ? "+" : "-" }),
-        suffix: /* @__PURE__ */ jsx(Text, { intensity: 36, className: "oui-ml-1", children: "USDC" }),
+        suffix: /* @__PURE__ */ jsx(Text, { intensity: 36, className: "oui-ms-1", children: "USDC" }),
         children: `${Math.abs(pnl)}`
       }
     )
@@ -3505,7 +3507,7 @@ var useColumn = (config) => {
       {
         title: t("common.symbol"),
         dataIndex: "symbol",
-        fixed: "left",
+        fixed: "start",
         width: 200,
         onSort: (r1, r2) => {
           return r1.symbol?.localeCompare(r2.symbol || "");
@@ -3553,7 +3555,7 @@ var useColumn = (config) => {
           return a.position_qty - b.position_qty;
         },
         width: 120,
-        className: "oui-pl-6",
+        className: "oui-ps-6",
         // rule: "price",
         // numeralProps: {
         //   coloring: true,
@@ -3780,14 +3782,14 @@ var useColumn = (config) => {
       //   title: t("common.qty"),
       //   dataIndex: "close_qty",
       //   width: 100,
-      //   fixed: "right",
+      //   fixed: "end",
       //   render: renderQuantityInput,
       // },
       // {
       //   title: t("common.price"),
       //   dataIndex: "close_price",
       //   width: 100,
-      //   fixed: "right",
+      //   fixed: "end",
       //   render: renderPriceInput,
       //   // render: (value: string) => <PriceInput />,
       // },
@@ -3796,7 +3798,7 @@ var useColumn = (config) => {
         dataIndex: "close_position",
         align: "right",
         width: positionReverse ? 100 : 70,
-        fixed: "right",
+        fixed: "end",
         render(_, record) {
           return /* @__PURE__ */ jsxs(Flex, { gapX: 2, justify: "end", children: [
             /* @__PURE__ */ jsx(ClosePositionWidget, {}),
@@ -3805,7 +3807,13 @@ var useColumn = (config) => {
         }
       }
     ],
-    [pnlNotionalDecimalPrecision, sharePnLConfig, t, positionReverse]
+    [
+      onSymbolChange,
+      pnlNotionalDecimalPrecision,
+      sharePnLConfig,
+      t,
+      positionReverse
+    ]
   );
   return column;
 };
@@ -3848,9 +3856,9 @@ var SymbolToken = (props) => {
 var UnrealPnL = (props) => {
   const { item } = props;
   const { t } = useTranslation();
-  const unrealPnlLabel = /* @__PURE__ */ jsxs("div", { className: "oui-text-right", children: [
+  const unrealPnlLabel = /* @__PURE__ */ jsxs("div", { className: "oui-text-end", children: [
     /* @__PURE__ */ jsx(Text, { intensity: 36, className: "oui-underline oui-decoration-dotted", children: t("common.unrealizedPnl") }),
-    /* @__PURE__ */ jsx(Text, { intensity: 20, className: "oui-ml-0.5", children: "(USDC)" })
+    /* @__PURE__ */ jsx(Text, { intensity: 20, className: "oui-ms-0.5", children: "(USDC)" })
   ] });
   return /* @__PURE__ */ jsxs(Flex, { gap: 3, children: [
     /* @__PURE__ */ jsxs(Flex, { direction: "column", className: "oui-text-2xs", itemAlign: "end", children: [
@@ -3877,7 +3885,7 @@ var UnrealPnL = (props) => {
               prefix: "(",
               suffix: ")",
               className: cn(
-                "oui-ml-1",
+                "oui-ms-1",
                 item.unrealized_pnl_ROI > 0 ? "oui-text-success-darken" : "oui-text-danger-darken"
               ),
               children: item.unrealized_pnl_ROI
@@ -4284,7 +4292,7 @@ var PositionsRowProvider = (props) => {
       }
       return false;
     });
-  }, [submit]);
+  }, [mutatePositions, quantity, submit, symbol, symbolInfo, t]);
   const memoizedValue = useMemo(() => {
     return {
       quantity,
@@ -4481,7 +4489,7 @@ var usePositionHistoryColumn = (props) => {
       {
         title: t("common.symbol"),
         dataIndex: "symbol",
-        fixed: "left",
+        fixed: "start",
         width: 250,
         onSort: (r1, r2) => {
           return r1.symbol?.localeCompare(r2.symbol || "");
@@ -4597,7 +4605,7 @@ var usePositionHistoryColumn = (props) => {
         render: (_, record) => /* @__PURE__ */ jsx(Text.formatted, { rule: "date", formatString: "yyyy-MM-dd HH:mm:ss", children: record.last_update_time })
       }
     ],
-    [pnlNotionalDecimalPrecision, t]
+    [onSymbolChange, pnlNotionalDecimalPrecision, props.sharePnLConfig, t]
   );
   return column;
 };
@@ -5029,7 +5037,7 @@ var useFilter = () => {
       return [sideFilter, statusFilter];
     }
     return [sideFilter, statusFilter, dateRangeFilter];
-  }, [side, status, dateRange]);
+  }, [dateRange, isMobile, side, status, t]);
   return {
     filterItems,
     onFilter,
@@ -5961,7 +5969,7 @@ var Liquidation = (props) => {
   ] });
 };
 var TooltipHeaderCell = (props) => {
-  return /* @__PURE__ */ jsx("th", { className: "oui-h-10 oui-border-b oui-border-line oui-text-left oui-text-base-contrast-36", children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx("th", { className: "oui-h-10 oui-border-b oui-border-line oui-text-start oui-text-base-contrast-36", children: /* @__PURE__ */ jsx(
     Tooltip,
     {
       content: props.tooltip,