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

package/dist/index.mjs

@@ -601,7 +601,7 @@ var init_marketsHeader_ui = __esm({
             value: tvl
           }
         ];
-      }, [total24Amount, totalOpenInterest, tvl]);
+      }, [t, total24Amount, totalOpenInterest, tvl]);
       return /* @__PURE__ */ jsx(
         Flex,
         {
@@ -672,7 +672,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"]
               }
             ) }),
@@ -684,7 +684,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
               }
             ) })
@@ -1027,7 +1027,7 @@ var init_marketsHeader_mobile_ui = __esm({
             value: tvl
           }
         ];
-      }, [total24Amount, totalOpenInterest, tvl]);
+      }, [t, total24Amount, totalOpenInterest, tvl]);
       return /* @__PURE__ */ jsx(
         Flex,
         {
@@ -1041,7 +1041,7 @@ var init_marketsHeader_mobile_ui = __esm({
             {
               ...item,
               className: 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}`
@@ -1101,7 +1101,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"]
               }
             ) }),
@@ -1113,7 +1113,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
               }
             ) })
@@ -1369,7 +1369,7 @@ var init_favoritesDropdownMenu_ui = __esm({
                   onValueChange,
                   classNames: {
                     root: 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"
                     )
                   },
@@ -1681,7 +1681,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__ */ jsx(FavoritesIcon2, { className: "oui-size-3" }) : /* @__PURE__ */ jsx(UnFavoritesIcon2, { className: "oui-size-3" })
           }
         ) });
@@ -1803,7 +1803,7 @@ function getLastAnd24hPercentageColumn(favorite, isFavoriteList = false) {
         "div",
         {
           className: 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__ */ jsxs(
@@ -1873,13 +1873,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) => {
+      useTranslation();
       const symbolCol = getSymbolColumn(favorite, isFavoriteList, {
         stackLeverageInSecondRow: true
       });
@@ -2187,7 +2186,7 @@ var init_favoritesEmpty = __esm({
                   /* @__PURE__ */ jsx(
                     PlusIcon,
                     {
-                      className: "oui-mr-1 oui-text-base-contrast",
+                      className: "oui-me-1 oui-text-base-contrast",
                       opacity: 1,
                       size: 12
                     }
@@ -2425,6 +2424,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 {
@@ -2454,7 +2498,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);
   };
@@ -2529,8 +2577,10 @@ function useFavoritesTabScript(options) {
     scrollable
   };
 }
+var cachedRTLScrollType;
 var init_favoritesTabs_script = __esm({
   "src/components/favoritesTabs/favoritesTabs.script.ts"() {
+    cachedRTLScrollType = null;
   }
 });
 var FavoritesTabWidget;
@@ -2637,9 +2687,9 @@ function resolveSuffix(suffix) {
     return void 0;
   }
   if (typeof suffix === "string") {
-    return /* @__PURE__ */ 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__ */ jsx(GradientText, { color: "brand", children: suffix }) });
+    return /* @__PURE__ */ 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__ */ jsx(GradientText, { color: "brand", children: suffix }) });
   }
-  return /* @__PURE__ */ jsx("span", { className: "oui-ml-1", children: suffix });
+  return /* @__PURE__ */ jsx("span", { className: "oui-ms-1", children: suffix });
 }
 function composeTabTitle(label, options) {
   const icon = options?.icon;
@@ -2754,7 +2804,7 @@ var init_marketsDataList_mobile_ui = __esm({
             getLastAnd24hPercentageColumn(favorite, isFavoriteList)
           ];
         },
-        []
+        [t]
       );
       const { getFavoritesProps } = useFavoritesProps();
       const builtInMeta = useMemo(
@@ -3482,7 +3532,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,
@@ -3980,7 +4030,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__ */ jsxs(Flex, { direction: "column", itemAlign: "start", gapY: 1, children: [
@@ -4371,7 +4421,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__ */ jsxs(Flex, { direction: "column", itemAlign: "start", gapY: 1, children: [
@@ -4697,7 +4747,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__ */ jsx("div", { className: cn("oui-absolute oui-right-1 oui-top-[3px]"), children: /* @__PURE__ */ jsxs(
+                const actions = /* @__PURE__ */ jsx("div", { className: cn("oui-absolute oui-end-1 oui-top-[3px]"), children: /* @__PURE__ */ jsxs(
                   Flex,
                   {
                     className: cn(
@@ -5085,12 +5135,12 @@ var init_marketItem_ui = __esm({
         {
           direction: "row",
           className: 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__ */ jsxs(Flex, { gapX: 1, itemAlign: "center", className: "oui-mr-[6px]", children: [
+            /* @__PURE__ */ jsxs(Flex, { gapX: 1, itemAlign: "center", className: "oui-me-[6px]", children: [
               /* @__PURE__ */ jsx(TokenIcon, { symbol, className: "oui-size-[18px]" }),
               /* @__PURE__ */ jsx(
                 SymbolDisplay,
@@ -5102,7 +5152,7 @@ var init_marketItem_ui = __esm({
                 }
               )
             ] }),
-            /* @__PURE__ */ jsx(Flex, { gapX: 1, className: "oui-mr-[6px]", children: /* @__PURE__ */ jsx(
+            /* @__PURE__ */ jsx(Flex, { gapX: 1, className: "oui-me-[6px]", children: /* @__PURE__ */ jsx(
               Text.numeral,
               {
                 dp: tickerData.quote_dp || 2,
@@ -5111,7 +5161,7 @@ var init_marketItem_ui = __esm({
                 children: tickerData["24h_close"]
               }
             ) }),
-            /* @__PURE__ */ jsx(Flex, { gapX: 1, className: "oui-mr-3", children: /* @__PURE__ */ jsx(
+            /* @__PURE__ */ jsx(Flex, { gapX: 1, className: "oui-me-3", children: /* @__PURE__ */ jsx(
               Text.numeral,
               {
                 rule: "percentages",
@@ -5226,7 +5276,7 @@ var init_marketTypeFilter_ui = __esm({
               Box,
               {
                 className: 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
@@ -5268,7 +5318,7 @@ var init_marketTypeFilter_ui = __esm({
                                 {
                                   htmlFor: htmlId,
                                   className: 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)
@@ -5328,7 +5378,7 @@ var init_marketTypeFilter_ui = __esm({
                                   {
                                     htmlFor: htmlId,
                                     className: 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
@@ -6293,7 +6343,7 @@ var CountdownText = (props) => {
   return /* @__PURE__ */ jsxs("span", { className: "oui-text-base-contrast oui-px-1", children: [
     days > 0 ? /* @__PURE__ */ jsxs("span", { children: [
       daysStr,
-      /* @__PURE__ */ jsx("span", { className: "oui-text-base-contrast-54 oui-mr-1 oui-ml-[2px]", children: t("common.dayShort") })
+      /* @__PURE__ */ jsx("span", { className: "oui-text-base-contrast-54 oui-me-1 oui-ms-[2px]", children: t("common.dayShort") })
     ] }) : "",
     hoursStr,
     ":",
@@ -6705,7 +6755,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__ */ jsx(FavoritesIcon2, { className: "oui-size-3 oui-text-warning-darken" }) : /* @__PURE__ */ jsx(UnFavoritesIcon2, { className: "oui-size-3 oui-text-base-contrast-36 hover:oui-text-warning-darken" })
     }
   ) }) });
@@ -6894,9 +6944,9 @@ var ScrollIndicator2 = (props) => {
       },
       className: 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__ */ jsx(ArrowLeftIcon, { className: "oui-text-base-contrast-54 hover:oui-text-base-contrast-80" })
     }
@@ -6932,7 +6982,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__ */ jsxs(Flex, { className: "oui-w-full oui-pr-2", children: [
+        /* @__PURE__ */ jsxs(Flex, { className: "oui-w-full oui-pe-2", children: [
           /* @__PURE__ */ jsx(NewsFillIcon, { className: "oui-text-warning-darken", size: 16 }),
           /* @__PURE__ */ jsxs(Flex, { children: [
             t("trading.rwa.countdown.title"),
@@ -7587,7 +7637,7 @@ var MarketsMobileContent = (props) => {
       leading: props.navProps?.leftNav && /* @__PURE__ */ jsx(
         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