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

package/dist/index.mjs

@@ -735,7 +735,7 @@ var init_dataList_ui = __esm({
     };
     LiquidationTab = () => {
       const { t } = useTranslation();
-      return /* @__PURE__ */ jsxs("div", { className: "oui-flex oui-space-x-1", children: [
+      return /* @__PURE__ */ jsxs("div", { className: "oui-flex oui-gap-x-1", children: [
         /* @__PURE__ */ jsx("span", { children: t("positions.liquidation") }),
         /* @__PURE__ */ jsx(
           Tooltip,
@@ -875,7 +875,7 @@ var init_dataList_ui = __esm({
                   classNames: {
                     scrollRoot: "oui-h-full oui-mb-6 oui-mt-0 oui-p-0 oui-pt-3 oui-h-[calc(100%_-_40px)]",
                     root: "oui-gap-4 oui-h-full",
-                    desc: "oui-ml-1"
+                    desc: "oui-ms-1"
                   },
                   dataTableClassNames: {
                     header: "oui-bg-base-9",
@@ -956,7 +956,7 @@ var init_lastTrades_ui = __esm({
           ),
           style: props.style,
           children: [
-            /* @__PURE__ */ jsx(Box, { className: "oui-pr-1", children: /* @__PURE__ */ jsx(
+            /* @__PURE__ */ jsx(Box, { className: "oui-pe-1", children: /* @__PURE__ */ jsx(
               Header,
               {
                 base: props.base,
@@ -991,7 +991,7 @@ var init_lastTrades_ui = __esm({
         // >
         //   <Box className={cn("oui-flex-1", classNames?.left)}>{left}</Box>
         //   <Box className={cn("oui-flex-1", classNames?.mid)}>{mid}</Box>
-        //   <Box className={cn("oui-flex-1 oui-text-right", classNames?.right)}>
+        //   <Box className={cn("oui-flex-1 oui-text-end", classNames?.right)}>
         //     {right}
         //   </Box>
         // </Flex>
@@ -1005,7 +1005,7 @@ var init_lastTrades_ui = __esm({
             children: [
               /* @__PURE__ */ jsx("div", { className: cn("oui-flex-1", classNames?.left), children: left }),
               /* @__PURE__ */ jsx("div", { className: cn("oui-flex-1", classNames?.mid), children: mid }),
-              /* @__PURE__ */ jsx("div", { className: cn("oui-flex-1 oui-text-right", classNames?.right), children: right })
+              /* @__PURE__ */ jsx("div", { className: cn("oui-flex-1 oui-text-end", classNames?.right), children: right })
             ]
           }
         )
@@ -1039,7 +1039,7 @@ var init_lastTrades_ui = __esm({
             props.className,
             "oui-overflow-auto"
           ),
-          contentClassName: "!oui-space-y-0 oui-pr-[-4px]",
+          contentClassName: "!oui-space-y-0 -oui-me-[4px]",
           renderItem: (item, index) => {
             return /* @__PURE__ */ jsx(
               Row,
@@ -1347,7 +1347,7 @@ var init_assetView_ui = __esm({
             visible,
             size: "2xs",
             unit,
-            unitClassName: "oui-text-base-contrast-36 oui-ml-0.5",
+            unitClassName: "oui-text-base-contrast-36 oui-ms-0.5",
             as: "div",
             rule,
             padding: false,
@@ -1881,8 +1881,8 @@ var init_cellBar = __esm({
         "div",
         {
           className: cn(
-            "oui-absolute oui-right-[-100%] oui-top-0 oui-h-full oui-w-full oui-transition-transform oui-pointer-events-none",
-            direction === 0 /* LEFT_TO_RIGHT */ && "oui-left-[-100%]",
+            "oui-absolute oui-end-[-100%] oui-top-0 oui-h-full oui-w-full oui-transition-transform oui-pointer-events-none",
+            direction === 0 /* LEFT_TO_RIGHT */ && "oui-start-[-100%]",
             props.className
           ),
           style: transform
@@ -1926,7 +1926,7 @@ var init_cell_desktop = __esm({
       return /* @__PURE__ */ jsxs(
         "div",
         {
-          className: "oui-relative oui-flex oui-cursor-pointer oui-flex-row oui-justify-between oui-pl-3 oui-text-xs oui-tabular-nums oui-text-base-contrast-80",
+          className: "oui-relative oui-flex oui-cursor-pointer oui-flex-row oui-justify-between oui-ps-3 oui-text-xs oui-tabular-nums oui-text-base-contrast-80",
           style: { height: `${cellHeight}px` },
           onClick: () => {
             if (Number.isNaN(price) || Number.isNaN(quantity)) {
@@ -1941,7 +1941,7 @@ var init_cell_desktop = __esm({
               "div",
               {
                 className: cn(
-                  "oui-mr-2 oui-flex oui-basis-7/12 oui-flex-row oui-items-center",
+                  "oui-me-2 oui-flex oui-basis-7/12 oui-flex-row oui-items-center",
                   showTotal && "oui-basis-5/12"
                 ),
                 children: [
@@ -1949,13 +1949,13 @@ var init_cell_desktop = __esm({
                     "div",
                     {
                       className: cn(
-                        "oui-flex-1 oui-text-left",
+                        "oui-flex-1 oui-text-start",
                         props.type === "ask" /* ASK */ ? "oui-text-trade-loss" : "oui-text-trade-profit"
                       ),
-                      children: /* @__PURE__ */ jsx(Text.numeral, { dp, children: price })
+                      children: /* @__PURE__ */ jsx(Text.numeral, { dp, dir: "ltr", children: price })
                     }
                   ),
-                  /* @__PURE__ */ jsx("div", { className: "oui-flex-1 oui-text-right oui-text-base-contrast-80", children: /* @__PURE__ */ jsx(Text.numeral, { dp: base_dp, children: quantity }) })
+                  /* @__PURE__ */ jsx("div", { className: "oui-flex-1 oui-text-end oui-text-base-contrast-80", children: /* @__PURE__ */ jsx(Text.numeral, { dp: base_dp, dir: "ltr", children: quantity }) })
                 ]
               }
             ),
@@ -1968,11 +1968,11 @@ var init_cell_desktop = __esm({
                 ),
                 children: [
                   showTotal ? /* @__PURE__ */ jsxs(Fragment, { children: [
-                    /* @__PURE__ */ jsx("div", { className: cn("oui-flex-1 oui-pr-3 oui-text-right"), children: /* @__PURE__ */ jsx(Text.numeral, { dp: base_dp, className: "oui-z-10", children: accumulated }) }),
-                    /* @__PURE__ */ jsx("div", { className: cn("oui-flex-1 oui-pr-3 oui-text-right"), children: /* @__PURE__ */ jsx(Text.numeral, { dp: 0, className: "oui-z-10", children: totalAmount }) })
-                  ] }) : /* @__PURE__ */ jsxs("div", { className: cn("oui-flex-1 oui-pr-3 oui-text-right"), children: [
-                    coinType === base && /* @__PURE__ */ jsx(Text.numeral, { dp: base_dp, className: "oui-z-10", children: accumulated }),
-                    coinType === quote && /* @__PURE__ */ jsx(Text.numeral, { dp: 0, className: "oui-z-10", children: totalAmount })
+                    /* @__PURE__ */ jsx("div", { className: cn("oui-flex-1 oui-pe-3 oui-text-end"), children: /* @__PURE__ */ jsx(Text.numeral, { dp: base_dp, className: "oui-z-10", dir: "ltr", children: accumulated }) }),
+                    /* @__PURE__ */ jsx("div", { className: cn("oui-flex-1 oui-pe-3 oui-text-end"), children: /* @__PURE__ */ jsx(Text.numeral, { dp: 0, className: "oui-z-10", dir: "ltr", children: totalAmount }) })
+                  ] }) : /* @__PURE__ */ jsxs("div", { className: cn("oui-flex-1 oui-pe-3 oui-text-end"), children: [
+                    coinType === base && /* @__PURE__ */ jsx(Text.numeral, { dp: base_dp, className: "oui-z-10", dir: "ltr", children: accumulated }),
+                    coinType === quote && /* @__PURE__ */ jsx(Text.numeral, { dp: 0, className: "oui-z-10", dir: "ltr", children: totalAmount })
                   ] }),
                   /* @__PURE__ */ jsx(
                     CellBar,
@@ -1989,7 +1989,7 @@ var init_cell_desktop = __esm({
               "div",
               {
                 className: cn(
-                  "oui-pointer-events-none oui-absolute oui-left-[4px] oui-size-[4px] oui-rounded-full",
+                  "oui-pointer-events-none oui-absolute oui-start-[4px] oui-size-[4px] oui-rounded-full",
                   props.type === "ask" /* ASK */ && "oui-bg-trade-loss",
                   props.type === "bid" /* BID */ && "oui-bg-trade-profit"
                 ),
@@ -2757,12 +2757,12 @@ var init_markPrice_desktop = __esm({
     DesktopMarkPrice = (props) => {
       const { markPrice = 0, lastPrice, asks, bids, symbolInfo } = props;
       const { showTotal } = useOrderBookContext();
-      return /* @__PURE__ */ jsxs("div", { className: "oui-flex oui-flex-row oui-pl-3 oui-tabular-nums oui-justify-between oui-text-base-contrast-80 oui-text-xs oui-relative oui-cursor-pointer oui-py-[6px]", children: [
+      return /* @__PURE__ */ jsxs("div", { className: "oui-flex oui-flex-row oui-ps-3 oui-tabular-nums oui-justify-between oui-text-base-contrast-80 oui-text-xs oui-relative oui-cursor-pointer oui-py-[6px]", children: [
         /* @__PURE__ */ jsxs(
           "div",
           {
             className: cn(
-              "oui-basis-7/12 oui-flex oui-flex-row oui-items-center oui-mr-2 oui-justify-between",
+              "oui-basis-7/12 oui-flex oui-flex-row oui-items-center oui-me-2 oui-justify-between",
               showTotal && "oui-basis-5/12"
             ),
             children: [
@@ -2785,7 +2785,7 @@ var init_markPrice_desktop = __esm({
             className: cn(
               "oui-basis-5/12 oui-flex oui-items-center oui-fex-row oui-overflow-hidden oui-relative oui-justify-end",
               showTotal && "oui-basis-7/12",
-              "oui-pr-3"
+              "oui-pe-3"
             ),
             children: /* @__PURE__ */ jsx(Spread, { asks, bids })
           }
@@ -2910,7 +2910,7 @@ var init_index_desktop = __esm({
                 showBuySellRatio ? "oui-grid-rows-[auto,auto,1fr,auto,1fr,auto]" : "oui-grid-rows-[auto,auto,1fr,auto,1fr]"
               ),
               children: [
-                /* @__PURE__ */ jsxs(Flex, { justify: "between", itemAlign: "center", className: "oui-pr-3", children: [
+                /* @__PURE__ */ jsxs(Flex, { justify: "between", itemAlign: "center", className: "oui-pe-3", children: [
                   /* @__PURE__ */ jsx(
                     DesktopDepthSelect,
                     {
@@ -3848,10 +3848,10 @@ var init_buySellRatioBar = __esm({
               /* @__PURE__ */ jsx(
                 "div",
                 {
-                  className: "oui-bg-trade-profit oui-mr-[2px] oui-rounded-sm",
+                  className: "oui-bg-trade-profit oui-me-[2px] oui-rounded-sm",
                   style: {
                     position: "absolute",
-                    left: 0,
+                    insetInlineStart: 0,
                     top: 0,
                     width: `${buyPercentage}%`,
                     height: "100%"
@@ -3861,10 +3861,10 @@ var init_buySellRatioBar = __esm({
               /* @__PURE__ */ jsx(
                 "div",
                 {
-                  className: "oui-bg-trade-loss oui-ml-[2px] oui-rounded-sm",
+                  className: "oui-bg-trade-loss oui-ms-[2px] oui-rounded-sm",
                   style: {
                     position: "absolute",
-                    left: `${buyPercentage}%`,
+                    insetInlineStart: `${buyPercentage}%`,
                     top: 0,
                     width: `${sellPercentage}%`,
                     height: "100%"
@@ -4086,7 +4086,7 @@ var init_orderBookAndTrades_ui = __esm({
                     Title2,
                     {
                       title: t("trading.orderBook"),
-                      className: "oui-pl-3 oui-text-sm"
+                      className: "oui-ps-3 oui-text-sm"
                     }
                   ),
                   /* @__PURE__ */ jsx(React12.Suspense, { fallback: null, children: /* @__PURE__ */ jsx(
@@ -4152,8 +4152,8 @@ var init_orderBookAndTrades_ui = __esm({
                 props.setTab(tab);
               },
               classNames: {
-                tabsList: "oui-pl-3"
-                // tabsContent: props.tab === "lastTrades" ? 'oui-pl-3' : ''
+                tabsList: "oui-ps-3"
+                // tabsContent: props.tab === "lastTrades" ? 'oui-ps-3' : ''
               },
               size: "lg",
               children: [
@@ -5455,14 +5455,14 @@ var init_tradingview_ui = __esm({
               {
                 ref: props.dragRef,
                 className: cn(
-                  "oui-h-[1px] oui-absolute oui-left-0 oui-right-0 oui-bottom-0 oui-top-0 oui-z-10 oui-mt-[7px] oui-bg-base-contrast-12",
+                  "oui-h-[1px] oui-absolute oui-start-0 oui-end-0 oui-bottom-0 oui-top-0 oui-z-10 oui-mt-[7px] oui-bg-base-contrast-12",
                   props.dragging && "oui-bg-primary "
                 ),
                 children: /* @__PURE__ */ jsx(
                   KlineDragIcon,
                   {
                     className: cn(
-                      "oui-w-3 oui-h-3 oui-absolute oui-left-1/2 -oui-top-[5px] -oui-translate-y-[0.5px] oui-text-base-contrast-12",
+                      "oui-w-3 oui-h-3 oui-absolute oui-start-1/2 -oui-top-[5px] -oui-translate-y-[0.5px] oui-text-base-contrast-12",
                       props.dragging && " oui-text-primary"
                     )
                   }
@@ -6555,7 +6555,7 @@ var AccountInfo = (props) => {
               {
                 size: "2xs",
                 intensity: 80,
-                prefix: /* @__PURE__ */ jsx("div", { className: "oui-h-1 oui-w-1 oui-rounded-full oui-bg-success oui-pr-1" }),
+                prefix: /* @__PURE__ */ jsx("div", { className: "oui-h-1 oui-w-1 oui-rounded-full oui-bg-success oui-pe-1" }),
                 children: props.chainName
               }
             )
@@ -6974,7 +6974,7 @@ var Chain = (props) => {
       },
       children: /* @__PURE__ */ jsxs(Box, { className: "oui-relative oui-rounded-t-[6px] oui-rounded-bl-[6px] oui-rounded-br-[3px] oui-bg-base-5 oui-px-2 oui-h-7 oui-flex oui-items-center", children: [
         /* @__PURE__ */ jsx(ChainIcon, { chainId: props.currentChainId, size: "2xs" }),
-        /* @__PURE__ */ jsx("div", { className: "oui-absolute oui-right-0 oui-bottom-0", children: /* @__PURE__ */ jsxs(
+        /* @__PURE__ */ jsx("div", { className: "oui-absolute oui-end-0 oui-bottom-0", children: /* @__PURE__ */ jsxs(
           "svg",
           {
             width: "9",
@@ -7425,7 +7425,7 @@ var RiskIndicator = (props) => {
         "div",
         {
           className: cn(
-            "oui-relative oui-w-[2px] oui-h-[2px] oui-rounded-full oui-bg-base-contrast after:oui-block after:oui-content-[''] after:oui-absolute after:oui-right-0 after:oui-w-[10px] after:oui-h-[2px] after:oui-bg-base-contrast-50",
+            "oui-relative oui-w-[2px] oui-h-[2px] oui-rounded-full oui-bg-base-contrast after:oui-block after:oui-content-[''] after:oui-absolute after:oui-end-0 after:oui-w-[10px] after:oui-h-[2px] after:oui-bg-base-contrast-50",
             className
             // {
             //   "oui-rotate-0": value > 1,
@@ -7831,7 +7831,7 @@ var SortablePanel = (props) => {
           {
             ...attributes,
             ...listeners,
-            className: "oui-absolute oui-right-0 oui-top-4 oui-cursor-move oui-py-1",
+            className: "oui-absolute oui-end-0 oui-top-4 oui-cursor-move oui-py-1",
             style: { touchAction: "none" },
             ref: setActivatorNodeRef,
             children: /* @__PURE__ */ jsx(
@@ -7900,7 +7900,7 @@ var RwaOutsideMarketHoursNotify = () => {
     /* @__PURE__ */ jsx(
       "button",
       {
-        className: "oui-w-6 oui-h-6 oui-right-0 oui-top-0 oui-absolute oui-bg-base-8 oui-rounded-tr-[10px] oui-rounded-bl-[10px] oui-inline-flex oui-justify-center oui-items-center oui-gap-2.5 oui-cursor-pointer",
+        className: "oui-w-6 oui-h-6 oui-end-0 oui-top-0 oui-absolute oui-bg-base-8 oui-rounded-tr-[10px] oui-rounded-bl-[10px] oui-inline-flex oui-justify-center oui-items-center oui-gap-2.5 oui-cursor-pointer",
         onClick: closeNotify,
         children: /* @__PURE__ */ jsx(CloseIcon, { opacity: 1, className: "oui-text-base-contrast", size: 16 })
       }
@@ -9279,7 +9279,7 @@ var MobileLayout4 = (props) => {
         ]
       }
     );
-  }, [isRwa, open, closeTimeInterval]);
+  }, [closeTimeInterval, isRwa, open, t]);
   const symbolInfoBar = /* @__PURE__ */ jsx(
     SymbolInfoBarWidget,
     {