@orderly.network/markets 3.0.4 → 3.1.0-alpha.0

package/dist/index.d.mts

@@ -285,7 +285,7 @@ declare function useFavoritesTabScript(options: UseFavoritesTabScriptOptions): {
     };
     open: boolean;
     setOpen: react.Dispatch<react.SetStateAction<boolean>>;
-    container: react.RefObject<HTMLInputElement>;
+    container: react.RefObject<HTMLDivElement>;
     inputRef: react.RefObject<HTMLInputElement>;
     inputWidth: number;
     spanRef: react.RefObject<HTMLSpanElement>;

package/dist/index.d.ts

@@ -285,7 +285,7 @@ declare function useFavoritesTabScript(options: UseFavoritesTabScriptOptions): {
     };
     open: boolean;
     setOpen: react.Dispatch<react.SetStateAction<boolean>>;
-    container: react.RefObject<HTMLInputElement>;
+    container: react.RefObject<HTMLDivElement>;
     inputRef: react.RefObject<HTMLInputElement>;
     inputWidth: number;
     spanRef: react.RefObject<HTMLSpanElement>;

package/dist/index.js

@@ -607,7 +607,7 @@ var init_marketsHeader_ui = __esm({
             value: tvl
           }
         ];
-      }, [total24Amount, totalOpenInterest, tvl]);
+      }, [t, total24Amount, totalOpenInterest, tvl]);
       return /* @__PURE__ */ jsxRuntime.jsx(
         ui.Flex,
         {
@@ -678,7 +678,7 @@ var init_marketsHeader_ui = __esm({
                 size: "xs",
                 weight: "semibold",
                 dp: item.quote_dp,
-                className: "oui-tabular-nums oui-text-right",
+                className: "oui-tabular-nums oui-text-end",
                 children: item["24h_close"]
               }
             ) }),
@@ -690,7 +690,7 @@ var init_marketsHeader_ui = __esm({
                 size: "xs",
                 weight: "semibold",
                 showIdentifier: true,
-                className: "oui-tabular-nums oui-text-right",
+                className: "oui-tabular-nums oui-text-end",
                 children: item.change
               }
             ) })
@@ -1033,7 +1033,7 @@ var init_marketsHeader_mobile_ui = __esm({
             value: tvl
           }
         ];
-      }, [total24Amount, totalOpenInterest, tvl]);
+      }, [t, total24Amount, totalOpenInterest, tvl]);
       return /* @__PURE__ */ jsxRuntime.jsx(
         ui.Flex,
         {
@@ -1047,7 +1047,7 @@ var init_marketsHeader_mobile_ui = __esm({
             {
               ...item,
               className: ui.cn(
-                index !== list.length - 1 && "oui-border-r oui-border-line-6"
+                index !== list.length - 1 && "oui-border-e oui-border-line-6"
               )
             },
             `item-${index}`
@@ -1107,7 +1107,7 @@ var init_marketsHeader_mobile_ui = __esm({
                 size: "xs",
                 weight: "semibold",
                 dp: item.quote_dp,
-                className: "oui-tabular-nums oui-text-right",
+                className: "oui-tabular-nums oui-text-end",
                 children: item["24h_close"]
               }
             ) }),
@@ -1119,7 +1119,7 @@ var init_marketsHeader_mobile_ui = __esm({
                 size: "xs",
                 weight: "semibold",
                 showIdentifier: true,
-                className: "oui-tabular-nums oui-text-right",
+                className: "oui-tabular-nums oui-text-end",
                 children: item.change
               }
             ) })
@@ -1375,7 +1375,7 @@ var init_favoritesDropdownMenu_ui = __esm({
                   onValueChange,
                   classNames: {
                     root: ui.cn(
-                      "oui-ml-px oui-h-7 oui-w-full oui-rounded-sm oui-bg-base-6",
+                      "oui-ms-px oui-h-7 oui-w-full oui-rounded-sm oui-bg-base-6",
                       overLen && "focus-within:oui-outline-danger focus-visible:oui-outline-danger"
                     )
                   },
@@ -1687,7 +1687,7 @@ function getSymbolColumn(favorite, isFavoriteList = false, options) {
             height: 12,
             justify: "center",
             itemAlign: "center",
-            className: "oui-mr-1 oui-cursor-pointer",
+            className: "oui-me-1 oui-cursor-pointer",
             children: record.isFavorite ? /* @__PURE__ */ jsxRuntime.jsx(FavoritesIcon2, { className: "oui-size-3" }) : /* @__PURE__ */ jsxRuntime.jsx(UnFavoritesIcon2, { className: "oui-size-3" })
           }
         ) });
@@ -1809,7 +1809,7 @@ function getLastAnd24hPercentageColumn(favorite, isFavoriteList = false) {
         "div",
         {
           className: ui.cn(
-            "oui-absolute oui-right-0 oui-top-[6.5px]",
+            "oui-absolute oui-end-0 oui-top-[6.5px]",
             "oui-hidden group-hover:oui-block"
           ),
           children: /* @__PURE__ */ jsxRuntime.jsxs(
@@ -1879,13 +1879,12 @@ var init_column = __esm({
     init_symbolDisplay();
   }
 });
-
-// src/components/sideMarkets/column.tsx
 var useSideMarketsColumns;
 var init_column2 = __esm({
   "src/components/sideMarkets/column.tsx"() {
     init_column();
     useSideMarketsColumns = (favorite, isFavoriteList = false) => {
+      i18n.useTranslation();
       const symbolCol = getSymbolColumn(favorite, isFavoriteList, {
         stackLeverageInSecondRow: true
       });
@@ -2193,7 +2192,7 @@ var init_favoritesEmpty = __esm({
                   /* @__PURE__ */ jsxRuntime.jsx(
                     ui.PlusIcon,
                     {
-                      className: "oui-mr-1 oui-text-base-contrast",
+                      className: "oui-me-1 oui-text-base-contrast",
                       opacity: 1,
                       size: 12
                     }
@@ -2431,6 +2430,51 @@ var init_favoritesTabs_ui = __esm({
     };
   }
 });
+function getRTLScrollType() {
+  if (cachedRTLScrollType) {
+    return cachedRTLScrollType;
+  }
+  if (typeof document === "undefined" || !document.body) {
+    cachedRTLScrollType = "negative";
+    return cachedRTLScrollType;
+  }
+  const outer = document.createElement("div");
+  const inner = document.createElement("div");
+  outer.dir = "rtl";
+  outer.style.width = "4px";
+  outer.style.height = "1px";
+  outer.style.overflow = "scroll";
+  outer.style.visibility = "hidden";
+  outer.style.position = "absolute";
+  outer.style.top = "-9999px";
+  inner.style.width = "8px";
+  inner.style.height = "1px";
+  outer.appendChild(inner);
+  document.body.appendChild(outer);
+  if (outer.scrollLeft > 0) {
+    cachedRTLScrollType = "default";
+  } else {
+    outer.scrollLeft = 1;
+    cachedRTLScrollType = outer.scrollLeft === 0 ? "negative" : "reverse";
+  }
+  document.body.removeChild(outer);
+  return cachedRTLScrollType;
+}
+function getScrollLeftForLogicalOffset(element, offset) {
+  const max = Math.max(element.scrollWidth - element.clientWidth, 0);
+  const nextOffset = Math.min(Math.max(offset, 0), max);
+  if (getComputedStyle(element).direction !== "rtl") {
+    return nextOffset;
+  }
+  switch (getRTLScrollType()) {
+    case "negative":
+      return -nextOffset;
+    case "default":
+      return max - nextOffset;
+    case "reverse":
+      return nextOffset;
+  }
+}
 function useFavoritesTabScript(options) {
   const { favorite, size = "default" } = options;
   const {
@@ -2460,7 +2504,11 @@ function useFavoritesTabScript(options) {
   const scrollToRight = () => {
     setTimeout(() => {
       if (scrollView.current) {
-        scrollView.current.scrollLeft = scrollView.current.scrollWidth - scrollView.current.clientWidth;
+        const logicalEnd = scrollView.current.scrollWidth - scrollView.current.clientWidth;
+        scrollView.current.scrollLeft = getScrollLeftForLogicalOffset(
+          scrollView.current,
+          logicalEnd
+        );
       }
     }, 0);
   };
@@ -2535,8 +2583,10 @@ function useFavoritesTabScript(options) {
     scrollable
   };
 }
+var cachedRTLScrollType;
 var init_favoritesTabs_script = __esm({
   "src/components/favoritesTabs/favoritesTabs.script.ts"() {
+    cachedRTLScrollType = null;
   }
 });
 exports.FavoritesTabWidget = void 0;
@@ -2643,9 +2693,9 @@ function resolveSuffix(suffix) {
     return void 0;
   }
   if (typeof suffix === "string") {
-    return /* @__PURE__ */ jsxRuntime.jsx("span", { className: "oui-ml-1 oui-inline-flex oui-items-center oui-rounded oui-bg-gradient-to-r oui-from-[rgb(var(--oui-gradient-brand-start)_/_0.12)] oui-to-[rgb(var(--oui-gradient-brand-end)_/_0.12)] oui-px-2", children: /* @__PURE__ */ jsxRuntime.jsx(ui.GradientText, { color: "brand", children: suffix }) });
+    return /* @__PURE__ */ jsxRuntime.jsx("span", { className: "oui-ms-1 oui-inline-flex oui-items-center oui-rounded oui-bg-gradient-to-r oui-from-[rgb(var(--oui-gradient-brand-start)_/_0.12)] oui-to-[rgb(var(--oui-gradient-brand-end)_/_0.12)] oui-px-2", children: /* @__PURE__ */ jsxRuntime.jsx(ui.GradientText, { color: "brand", children: suffix }) });
   }
-  return /* @__PURE__ */ jsxRuntime.jsx("span", { className: "oui-ml-1", children: suffix });
+  return /* @__PURE__ */ jsxRuntime.jsx("span", { className: "oui-ms-1", children: suffix });
 }
 function composeTabTitle(label, options) {
   const icon = options?.icon;
@@ -2760,7 +2810,7 @@ var init_marketsDataList_mobile_ui = __esm({
             getLastAnd24hPercentageColumn(favorite, isFavoriteList)
           ];
         },
-        []
+        [t]
       );
       const { getFavoritesProps } = useFavoritesProps();
       const builtInMeta = React6.useMemo(
@@ -3488,7 +3538,7 @@ var init_marketsDataList_ui = __esm({
           classNames: {
             tabsList: "oui-tabs-markets-list",
             tabsContent: "oui-tabs-markets-content",
-            scrollIndicator: "oui-mr-3"
+            scrollIndicator: "oui-me-3"
           },
           className: "oui-markets-list-tabs",
           showScrollIndicator: true,
@@ -3986,7 +4036,7 @@ var init_columns = __esm({
             dataIndex: "symbol",
             onSort: true,
             width: 180,
-            className: isMobile ? "oui-pl-0" : void 0,
+            className: isMobile ? "oui-ps-0" : void 0,
             render: (value, record) => {
               if (isMobile) {
                 return /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { direction: "column", itemAlign: "start", gapY: 1, children: [
@@ -4377,7 +4427,7 @@ var init_columns2 = __esm({
             dataIndex: "symbol",
             width: 220,
             onSort: true,
-            className: isMobile ? "oui-pl-0" : void 0,
+            className: isMobile ? "oui-ps-0" : void 0,
             render: (value, record) => {
               if (isMobile) {
                 return /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { direction: "column", itemAlign: "start", gapY: 1, children: [
@@ -4703,7 +4753,7 @@ var init_column4 = __esm({
                   e.stopPropagation();
                 };
                 const iconCls = "oui-w-4 oui-h-4 oui-text-base-contrast-54 hover:oui-text-base-contrast";
-                const actions = /* @__PURE__ */ jsxRuntime.jsx("div", { className: ui.cn("oui-absolute oui-right-1 oui-top-[3px]"), children: /* @__PURE__ */ jsxRuntime.jsxs(
+                const actions = /* @__PURE__ */ jsxRuntime.jsx("div", { className: ui.cn("oui-absolute oui-end-1 oui-top-[3px]"), children: /* @__PURE__ */ jsxRuntime.jsxs(
                   ui.Flex,
                   {
                     className: ui.cn(
@@ -5091,12 +5141,12 @@ var init_marketItem_ui = __esm({
         {
           direction: "row",
           className: ui.cn(
-            "oui-mr-3 oui-h-[18px] oui-shrink-0 oui-cursor-pointer oui-items-center oui-rounded",
+            "oui-me-3 oui-h-[18px] oui-shrink-0 oui-cursor-pointer oui-items-center oui-rounded",
             "oui-transition-all oui-duration-200"
           ),
           onClick: handleClick,
           children: [
-            /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { gapX: 1, itemAlign: "center", className: "oui-mr-[6px]", children: [
+            /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { gapX: 1, itemAlign: "center", className: "oui-me-[6px]", children: [
               /* @__PURE__ */ jsxRuntime.jsx(ui.TokenIcon, { symbol, className: "oui-size-[18px]" }),
               /* @__PURE__ */ jsxRuntime.jsx(
                 exports.SymbolDisplay,
@@ -5108,7 +5158,7 @@ var init_marketItem_ui = __esm({
                 }
               )
             ] }),
-            /* @__PURE__ */ jsxRuntime.jsx(ui.Flex, { gapX: 1, className: "oui-mr-[6px]", children: /* @__PURE__ */ jsxRuntime.jsx(
+            /* @__PURE__ */ jsxRuntime.jsx(ui.Flex, { gapX: 1, className: "oui-me-[6px]", children: /* @__PURE__ */ jsxRuntime.jsx(
               ui.Text.numeral,
               {
                 dp: tickerData.quote_dp || 2,
@@ -5117,7 +5167,7 @@ var init_marketItem_ui = __esm({
                 children: tickerData["24h_close"]
               }
             ) }),
-            /* @__PURE__ */ jsxRuntime.jsx(ui.Flex, { gapX: 1, className: "oui-mr-3", children: /* @__PURE__ */ jsxRuntime.jsx(
+            /* @__PURE__ */ jsxRuntime.jsx(ui.Flex, { gapX: 1, className: "oui-me-3", children: /* @__PURE__ */ jsxRuntime.jsx(
               ui.Text.numeral,
               {
                 rule: "percentages",
@@ -5232,7 +5282,7 @@ var init_marketTypeFilter_ui = __esm({
               ui.Box,
               {
                 className: ui.cn(
-                  "oui-absolute oui-left-0 oui-z-50",
+                  "oui-absolute oui-start-0 oui-z-50",
                   "oui-bg-base-9 oui-border oui-border-line-6 oui-rounded-[12px]",
                   "oui-shadow-lg oui-w-[320px] oui-p-5",
                   // animation
@@ -5274,7 +5324,7 @@ var init_marketTypeFilter_ui = __esm({
                                 {
                                   htmlFor: htmlId,
                                   className: ui.cn(
-                                    "oui-text-2xs oui-ml-1",
+                                    "oui-text-2xs oui-ms-1",
                                     "oui-break-normal oui-whitespace-nowrap oui-cursor-pointer"
                                   ),
                                   children: getOptionLabel(tab)
@@ -5334,7 +5384,7 @@ var init_marketTypeFilter_ui = __esm({
                                   {
                                     htmlFor: htmlId,
                                     className: ui.cn(
-                                      "oui-text-2xs oui-ml-1",
+                                      "oui-text-2xs oui-ms-1",
                                       "oui-break-normal oui-whitespace-nowrap oui-cursor-pointer"
                                     ),
                                     children: tab.name
@@ -6299,7 +6349,7 @@ var CountdownText = (props) => {
   return /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "oui-text-base-contrast oui-px-1", children: [
     days > 0 ? /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
       daysStr,
-      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "oui-text-base-contrast-54 oui-mr-1 oui-ml-[2px]", children: t("common.dayShort") })
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "oui-text-base-contrast-54 oui-me-1 oui-ms-[2px]", children: t("common.dayShort") })
     ] }) : "",
     hoursStr,
     ":",
@@ -6711,7 +6761,7 @@ var SymbolInfoBarFull = (props) => {
       height: 12,
       justify: "center",
       itemAlign: "center",
-      className: "oui-mr-1 oui-cursor-pointer",
+      className: "oui-me-1 oui-cursor-pointer",
       children: isFavorite ? /* @__PURE__ */ jsxRuntime.jsx(FavoritesIcon2, { className: "oui-size-3 oui-text-warning-darken" }) : /* @__PURE__ */ jsxRuntime.jsx(UnFavoritesIcon2, { className: "oui-size-3 oui-text-base-contrast-36 hover:oui-text-warning-darken" })
     }
   ) }) });
@@ -6900,9 +6950,9 @@ var ScrollIndicator2 = (props) => {
       },
       className: ui.cn(
         "oui-flex oui-w-[80px] oui-items-center",
-        "oui-absolute oui-inset-y-0 oui-rounded-l",
-        leading && "oui-left-0 oui-pl-1",
-        tailing && "oui-right-0 oui-rotate-180 oui-pr-1"
+        "oui-absolute oui-inset-y-0 oui-rounded-s",
+        leading && "oui-start-0 oui-ps-1",
+        tailing && "oui-end-0 oui-rotate-180 oui-pe-1"
       ),
       children: /* @__PURE__ */ jsxRuntime.jsx(ArrowLeftIcon, { className: "oui-text-base-contrast-54 hover:oui-text-base-contrast-80" })
     }
@@ -6938,7 +6988,7 @@ var RwaCountdown = ({ closeCountdown, isRwa, open, closeTimeInterval }) => {
       r: "lg",
       className: "oui-w-full oui-text-warning-darken oui-bg-warning-darken/15 oui-flex-1 oui-my-2 oui-text-sm",
       children: [
-        /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { className: "oui-w-full oui-pr-2", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { className: "oui-w-full oui-pe-2", children: [
           /* @__PURE__ */ jsxRuntime.jsx(ui.NewsFillIcon, { className: "oui-text-warning-darken", size: 16 }),
           /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { children: [
             t("trading.rwa.countdown.title"),
@@ -7593,7 +7643,7 @@ var MarketsMobileContent = (props) => {
       leading: props.navProps?.leftNav && /* @__PURE__ */ jsxRuntime.jsx(
         uiScaffold.LeftNavUI,
         {
-          className: "-oui-mr-4 oui-ml-3",
+          className: "-oui-me-4 oui-ms-3",
           ...props?.navProps?.leftNav,
           logo: props?.navProps?.logo,
           routerAdapter: props?.navProps?.routerAdapter