@orderly.network/markets 2.11.1 → 2.11.2-alpha.0

package/dist/index.mjs

@@ -1531,155 +1531,235 @@ var init_rwaDotTooltip = __esm({
     };
   }
 });
-var useSideMarketsColumns;
-var init_column = __esm({
-  "src/components/sideMarkets/column.tsx"() {
-    init_icons();
-    init_favoritesDropdownMenu();
-    init_rwaDotTooltip();
-    init_symbolDisplay();
-    useSideMarketsColumns = (favorite, isFavoriteList = false) => {
-      const { t } = useTranslation();
-      return [
-        {
-          title: `${t("markets.column.market")} / ${t("common.volume")}`,
-          dataIndex: "24h_amount",
-          multiSort: {
-            fields: [
-              {
-                sortKey: "symbol",
-                label: t("markets.column.market")
-              },
-              {
-                sortKey: "24h_amount",
-                label: t("common.volume")
-              }
-            ]
-          },
-          className: "oui-h-[36px]",
-          render: (value, record) => {
-            let favoritesIcon;
-            if (!isFavoriteList) {
-              favoritesIcon = /* @__PURE__ */ jsx(FavoritesDropdownMenuWidget, { row: record, favorite, children: /* @__PURE__ */ jsx(
-                Flex,
-                {
-                  width: 12,
-                  height: 12,
-                  justify: "center",
-                  itemAlign: "center",
-                  className: "oui-mr-1 oui-cursor-pointer",
-                  children: record.isFavorite ? /* @__PURE__ */ jsx(FavoritesIcon2, { className: "oui-size-3" }) : /* @__PURE__ */ jsx(UnFavoritesIcon2, { className: "oui-size-3" })
-                }
-              ) });
-            }
-            return /* @__PURE__ */ jsxs(Flex, { children: [
-              favoritesIcon,
-              /* @__PURE__ */ jsxs(Flex, { direction: "column", itemAlign: "start", gapY: 1, children: [
-                /* @__PURE__ */ jsxs(Flex, { gapX: 1, children: [
-                  /* @__PURE__ */ jsx(TokenIcon, { symbol: record.symbol, className: "oui-size-[18px]" }),
-                  /* @__PURE__ */ jsx(SymbolDisplay, { formatString: "base", size: "2xs", children: record.symbol }),
-                  /* @__PURE__ */ jsx(RwaDotTooltip, { record }),
-                  /* @__PURE__ */ jsxs(Badge, { size: "xs", color: "primary", children: [
-                    record.leverage,
-                    "x"
-                  ] })
-                ] }),
-                /* @__PURE__ */ jsx(
-                  Text.numeral,
-                  {
-                    intensity: 54,
-                    size: "2xs",
-                    rule: "human",
-                    dp: 2,
-                    rm: Decimal.ROUND_DOWN,
-                    children: value
-                  }
-                )
+function getSymbolColumn(favorite, isFavoriteList = false, options) {
+  return {
+    title: i18n.t("common.symbol"),
+    dataIndex: "symbol",
+    width: 150,
+    onSort: true,
+    render: (value, record) => {
+      let favoritesIcon;
+      if (!isFavoriteList) {
+        favoritesIcon = /* @__PURE__ */ jsx(FavoritesDropdownMenuWidget, { row: record, favorite, children: /* @__PURE__ */ jsx(
+          Flex,
+          {
+            width: 12,
+            height: 12,
+            justify: "center",
+            itemAlign: "center",
+            className: "oui-mr-1 oui-cursor-pointer",
+            children: record.isFavorite ? /* @__PURE__ */ jsx(FavoritesIcon2, { className: "oui-size-3" }) : /* @__PURE__ */ jsx(UnFavoritesIcon2, { className: "oui-size-3" })
+          }
+        ) });
+      }
+      const stackLeverageInSecondRow = options?.stackLeverageInSecondRow;
+      return /* @__PURE__ */ jsxs(Flex, { gapX: 1, itemAlign: "center", children: [
+        favoritesIcon,
+        /* @__PURE__ */ jsxs(
+          Flex,
+          {
+            direction: stackLeverageInSecondRow ? "column" : "row",
+            itemAlign: stackLeverageInSecondRow ? "start" : "center",
+            gapY: stackLeverageInSecondRow ? 1 : void 0,
+            gapX: stackLeverageInSecondRow ? void 0 : 1,
+            children: [
+              /* @__PURE__ */ jsxs(Flex, { gapX: 1, itemAlign: "center", children: [
+                /* @__PURE__ */ jsx(TokenIcon, { symbol: value, className: "oui-size-[18px]" }),
+                /* @__PURE__ */ jsx(SymbolDisplay, { formatString: "base", size: "2xs", children: value }),
+                /* @__PURE__ */ jsx(RwaDotTooltip, { record })
+              ] }),
+              typeof record.leverage === "number" && /* @__PURE__ */ jsxs(Badge, { size: "xs", color: "primary", children: [
+                record.leverage,
+                "x"
               ] })
-            ] });
+            ]
           }
+        )
+      ] });
+    }
+  };
+}
+function getLastColumn() {
+  return {
+    title: i18n.t("markets.column.last"),
+    dataIndex: "24h_close",
+    align: "right",
+    onSort: true,
+    width: 100,
+    render: (value, record) => {
+      return /* @__PURE__ */ jsx(Text.numeral, { dp: record.quote_dp || 2, size: "2xs", children: value });
+    }
+  };
+}
+function get24hPercentageColumn() {
+  return {
+    title: i18n.t("markets.column.24hPercentage"),
+    dataIndex: "change",
+    align: "right",
+    onSort: true,
+    width: 80,
+    render: (value) => {
+      return /* @__PURE__ */ jsx(
+        Text.numeral,
+        {
+          rule: "percentages",
+          coloring: true,
+          rm: Decimal.ROUND_DOWN,
+          showIdentifier: true,
+          size: "2xs",
+          children: value
+        }
+      );
+    }
+  };
+}
+function get24hVolOIColumn() {
+  return {
+    title: i18n.t("markets.column.24hVolOI"),
+    dataIndex: "24h_amount",
+    align: "right",
+    className: "oui-h-[36px]",
+    width: 100,
+    multiSort: {
+      fields: [
+        {
+          sortKey: "24h_amount",
+          label: i18n.t("markets.column.24hVol")
         },
         {
-          title: t("markets.column.price&Change"),
-          dataIndex: "change",
-          align: "right",
-          onSort: true,
-          className: "oui-h-[36px]",
-          render: (value, record) => {
-            const onDelSymbol = (e) => {
-              favorite.updateSymbolFavoriteState(
-                record,
-                favorite.selectedFavoriteTab,
-                true
-              );
-              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-0 oui-top-[6.5px]",
-                  "oui-hidden group-hover:oui-block"
-                ),
-                children: /* @__PURE__ */ jsxs(
-                  Flex,
+          sortKey: "openInterest",
+          label: i18n.t("markets.column.OI")
+        }
+      ]
+    },
+    render: (value, record) => /* @__PURE__ */ jsxs(Flex, { direction: "column", itemAlign: "end", gapY: 1, children: [
+      /* @__PURE__ */ jsx(Text.numeral, { rule: "human", dp: 2, rm: Decimal.ROUND_DOWN, children: value }),
+      /* @__PURE__ */ jsx(
+        Text.numeral,
+        {
+          rule: "human",
+          dp: 2,
+          rm: Decimal.ROUND_DOWN,
+          size: "2xs",
+          intensity: 54,
+          children: record.openInterest
+        }
+      )
+    ] })
+  };
+}
+function getLastAnd24hPercentageColumn(favorite, isFavoriteList = false) {
+  return {
+    title: i18n.t("markets.column.last&24hPercentage"),
+    dataIndex: "change",
+    align: "right",
+    onSort: true,
+    className: "oui-h-[36px]",
+    width: 100,
+    render: (value, record) => {
+      const onDelSymbol = (e) => {
+        favorite.updateSymbolFavoriteState(
+          record,
+          favorite.selectedFavoriteTab,
+          true
+        );
+        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-0 oui-top-[6.5px]",
+            "oui-hidden group-hover:oui-block"
+          ),
+          children: /* @__PURE__ */ jsxs(
+            Flex,
+            {
+              className: cn(
+                "oui-inline-flex",
+                "oui-bg-primary-darken oui-py-[6px]"
+              ),
+              r: "base",
+              width: 52,
+              justify: "center",
+              itemAlign: "end",
+              gapX: 2,
+              children: [
+                /* @__PURE__ */ jsx(
+                  TopIcon,
                   {
-                    className: cn(
-                      "oui-inline-flex",
-                      "oui-bg-primary-darken oui-py-[6px]"
-                    ),
-                    r: "base",
-                    width: 52,
-                    justify: "center",
-                    itemAlign: "end",
-                    gapX: 2,
-                    children: [
-                      /* @__PURE__ */ jsx(
-                        TopIcon,
-                        {
-                          className: iconCls,
-                          onClick: (e) => {
-                            e.stopPropagation();
-                            favorite.pinToTop(record);
-                          }
-                        }
-                      ),
-                      /* @__PURE__ */ jsx(DeleteIcon, { className: iconCls, onClick: onDelSymbol })
-                    ]
+                    className: iconCls,
+                    onClick: (e) => {
+                      e.stopPropagation();
+                      favorite.pinToTop(record);
+                    }
                   }
-                )
-              }
-            );
-            return /* @__PURE__ */ jsxs("div", { className: "oui-relative", children: [
-              isFavoriteList && actions,
-              /* @__PURE__ */ jsxs(
-                Flex,
+                ),
+                /* @__PURE__ */ jsx(DeleteIcon, { className: iconCls, onClick: onDelSymbol })
+              ]
+            }
+          )
+        }
+      );
+      return /* @__PURE__ */ jsxs("div", { className: "oui-relative", children: [
+        isFavoriteList && actions,
+        /* @__PURE__ */ jsxs(
+          Flex,
+          {
+            direction: "column",
+            justify: "end",
+            itemAlign: "end",
+            gapY: 1,
+            className: cn(isFavoriteList && "group-hover:oui-invisible"),
+            children: [
+              /* @__PURE__ */ jsx(Text.numeral, { dp: record.quote_dp || 2, size: "2xs", children: record["24h_close"] }),
+              /* @__PURE__ */ jsx(
+                Text.numeral,
                 {
-                  direction: "column",
-                  justify: "end",
-                  itemAlign: "end",
-                  gapY: 1,
-                  className: cn(isFavoriteList && "group-hover:oui-invisible"),
-                  children: [
-                    /* @__PURE__ */ jsx(Text.numeral, { dp: record.quote_dp || 2, size: "2xs", children: record["24h_close"] }),
-                    /* @__PURE__ */ jsx(
-                      Text.numeral,
-                      {
-                        rule: "percentages",
-                        coloring: true,
-                        rm: Decimal.ROUND_DOWN,
-                        showIdentifier: true,
-                        size: "2xs",
-                        children: value
-                      }
-                    )
-                  ]
+                  rule: "percentages",
+                  coloring: true,
+                  rm: Decimal.ROUND_DOWN,
+                  showIdentifier: true,
+                  size: "2xs",
+                  children: value
                 }
               )
-            ] });
+            ]
           }
-        }
+        )
+      ] });
+    }
+  };
+}
+var init_column = __esm({
+  "src/components/shared/column.tsx"() {
+    init_icons();
+    init_icons();
+    init_favoritesDropdownMenu();
+    init_rwaDotTooltip();
+    init_symbolDisplay();
+  }
+});
+
+// src/components/sideMarkets/column.tsx
+var useSideMarketsColumns;
+var init_column2 = __esm({
+  "src/components/sideMarkets/column.tsx"() {
+    init_column();
+    useSideMarketsColumns = (favorite, isFavoriteList = false) => {
+      const symbolCol = getSymbolColumn(favorite, isFavoriteList, {
+        stackLeverageInSecondRow: true
+      });
+      const volOiCol = get24hVolOIColumn();
+      const lastPctCol = getLastAnd24hPercentageColumn(favorite, isFavoriteList);
+      return [
+        {
+          ...symbolCol,
+          width: 115
+        },
+        volOiCol,
+        lastPctCol
       ];
     };
   }
@@ -1689,7 +1769,7 @@ var init_marketsList_ui = __esm({
   "src/components/marketsList/marketsList.ui.tsx"() {
     init_collapseMarkets();
     init_marketsProvider();
-    init_column();
+    init_column2();
     MarketsList = (props) => {
       const {
         loading,
@@ -1953,231 +2033,6 @@ var init_searchInput = __esm({
     };
   }
 });
-function getSymbolColumn(favorite, isFavoriteList = false) {
-  return {
-    title: i18n.t("common.symbol"),
-    dataIndex: "symbol",
-    width: 150,
-    onSort: true,
-    render: (value, record) => {
-      let favoritesIcon;
-      if (!isFavoriteList) {
-        favoritesIcon = /* @__PURE__ */ jsx(FavoritesDropdownMenuWidget, { row: record, favorite, children: /* @__PURE__ */ jsx(
-          Flex,
-          {
-            width: 12,
-            height: 12,
-            justify: "center",
-            itemAlign: "center",
-            className: "oui-mr-1 oui-cursor-pointer",
-            children: record.isFavorite ? /* @__PURE__ */ jsx(FavoritesIcon2, { className: "oui-size-3" }) : /* @__PURE__ */ jsx(UnFavoritesIcon2, { className: "oui-size-3" })
-          }
-        ) });
-      }
-      return /* @__PURE__ */ jsxs(Flex, { gapX: 1, children: [
-        favoritesIcon,
-        /* @__PURE__ */ jsxs(Flex, { direction: "column", itemAlign: "start", gapY: 1, children: [
-          /* @__PURE__ */ jsxs(Flex, { gapX: 1, itemAlign: "center", children: [
-            /* @__PURE__ */ jsx(TokenIcon, { symbol: value, className: "oui-size-[18px]" }),
-            /* @__PURE__ */ jsx(SymbolDisplay, { formatString: "base", size: "2xs", children: value }),
-            /* @__PURE__ */ jsx(RwaDotTooltip, { record })
-          ] }),
-          /* @__PURE__ */ jsxs(Badge, { size: "xs", color: "primary", children: [
-            record.leverage,
-            "x"
-          ] })
-        ] })
-      ] });
-    }
-  };
-}
-function getLastColumn() {
-  return {
-    title: i18n.t("markets.column.last"),
-    dataIndex: "24h_close",
-    align: "right",
-    onSort: true,
-    width: 100,
-    render: (value, record) => {
-      return /* @__PURE__ */ jsx(Text.numeral, { dp: record.quote_dp || 2, size: "2xs", children: value });
-    }
-  };
-}
-function get24hPercentageColumn() {
-  return {
-    title: i18n.t("markets.column.24hPercentage"),
-    dataIndex: "change",
-    align: "right",
-    onSort: true,
-    width: 80,
-    render: (value) => {
-      return /* @__PURE__ */ jsx(
-        Text.numeral,
-        {
-          rule: "percentages",
-          coloring: true,
-          rm: Decimal.ROUND_DOWN,
-          showIdentifier: true,
-          size: "2xs",
-          children: value
-        }
-      );
-    }
-  };
-}
-function get24hVolOIColumn() {
-  return {
-    title: i18n.t("markets.column.24hVolOI"),
-    dataIndex: "24h_amount",
-    align: "right",
-    className: "oui-h-[36px]",
-    width: 100,
-    multiSort: {
-      fields: [
-        {
-          sortKey: "24h_amount",
-          label: i18n.t("markets.column.24hVol")
-        },
-        {
-          sortKey: "openInterest",
-          label: i18n.t("markets.column.OI")
-        }
-      ]
-    },
-    render: (value, record) => /* @__PURE__ */ jsxs(Flex, { direction: "column", itemAlign: "end", gapY: 1, children: [
-      /* @__PURE__ */ jsx(Text.numeral, { rule: "human", dp: 2, rm: Decimal.ROUND_DOWN, children: value }),
-      /* @__PURE__ */ jsx(
-        Text.numeral,
-        {
-          rule: "human",
-          dp: 2,
-          rm: Decimal.ROUND_DOWN,
-          size: "2xs",
-          intensity: 54,
-          children: record.openInterest
-        }
-      )
-    ] })
-  };
-}
-function getLastAnd24hPercentageColumn(favorite, isFavoriteList = false) {
-  return {
-    title: i18n.t("markets.column.last&24hPercentage"),
-    dataIndex: "change",
-    align: "right",
-    onSort: true,
-    className: "oui-h-[36px]",
-    width: 100,
-    render: (value, record) => {
-      const onDelSymbol = (e) => {
-        favorite.updateSymbolFavoriteState(
-          record,
-          favorite.selectedFavoriteTab,
-          true
-        );
-        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-0 oui-top-[6.5px]",
-            "oui-hidden group-hover:oui-block"
-          ),
-          children: /* @__PURE__ */ jsxs(
-            Flex,
-            {
-              className: cn(
-                "oui-inline-flex",
-                "oui-bg-primary-darken oui-py-[6px]"
-              ),
-              r: "base",
-              width: 52,
-              justify: "center",
-              itemAlign: "end",
-              gapX: 2,
-              children: [
-                /* @__PURE__ */ jsx(
-                  TopIcon,
-                  {
-                    className: iconCls,
-                    onClick: (e) => {
-                      e.stopPropagation();
-                      favorite.pinToTop(record);
-                    }
-                  }
-                ),
-                /* @__PURE__ */ jsx(DeleteIcon, { className: iconCls, onClick: onDelSymbol })
-              ]
-            }
-          )
-        }
-      );
-      return /* @__PURE__ */ jsxs("div", { className: "oui-relative", children: [
-        isFavoriteList && actions,
-        /* @__PURE__ */ jsxs(
-          Flex,
-          {
-            direction: "column",
-            justify: "end",
-            itemAlign: "end",
-            gapY: 1,
-            className: cn(isFavoriteList && "group-hover:oui-invisible"),
-            children: [
-              /* @__PURE__ */ jsx(Text.numeral, { dp: record.quote_dp || 2, size: "2xs", children: record["24h_close"] }),
-              /* @__PURE__ */ jsx(
-                Text.numeral,
-                {
-                  rule: "percentages",
-                  coloring: true,
-                  rm: Decimal.ROUND_DOWN,
-                  showIdentifier: true,
-                  size: "2xs",
-                  children: value
-                }
-              )
-            ]
-          }
-        )
-      ] });
-    }
-  };
-}
-function getMarkIndexColumn() {
-  return {
-    title: i18n.t("markets.column.mark&Index"),
-    dataIndex: "mark_price",
-    align: "right",
-    className: "oui-h-[36px]",
-    width: 100,
-    multiSort: {
-      fields: [
-        {
-          sortKey: "mark_price",
-          label: i18n.t("markets.column.mark")
-        },
-        {
-          sortKey: "index_price",
-          label: i18n.t("markets.column.index")
-        }
-      ]
-    },
-    render: (value, record) => /* @__PURE__ */ jsxs(Flex, { direction: "column", itemAlign: "end", gapY: 1, children: [
-      /* @__PURE__ */ jsx(Text.numeral, { dp: record.quote_dp || 2, size: "2xs", children: value }),
-      /* @__PURE__ */ jsx(Text.numeral, { dp: record.quote_dp || 2, size: "2xs", intensity: 54, children: record.index_price })
-    ] })
-  };
-}
-var init_column2 = __esm({
-  "src/components/shared/column.tsx"() {
-    init_icons();
-    init_icons();
-    init_favoritesDropdownMenu();
-    init_rwaDotTooltip();
-    init_symbolDisplay();
-  }
-});
 var FavoritesEmpty;
 var init_favoritesEmpty = __esm({
   "src/components/favoritesEmpty/index.tsx"() {
@@ -2635,7 +2490,7 @@ var init_marketsDataList_mobile_ui = __esm({
     init_marketsList();
     init_rwaTab();
     init_searchInput();
-    init_column2();
+    init_column();
     init_useFavoritesExtraProps();
     init_icons();
     init_type();
@@ -2645,10 +2500,11 @@ var init_marketsDataList_mobile_ui = __esm({
       const getColumns = useCallback(
         (favorite, isFavoriteList = false) => {
           return [
-            getSymbolColumn(favorite, isFavoriteList),
+            getSymbolColumn(favorite, isFavoriteList, {
+              stackLeverageInSecondRow: true
+            }),
             get24hVolOIColumn(),
-            getLastAnd24hPercentageColumn(favorite, isFavoriteList),
-            getMarkIndexColumn()
+            getLastAnd24hPercentageColumn(favorite, isFavoriteList)
           ];
         },
         []
@@ -2837,26 +2693,6 @@ var init_column3 = __esm({
               return /* @__PURE__ */ jsx(Text.numeral, { dp: record.quote_dp || 2, currency: "$", children: value });
             }
           },
-          {
-            title: t("markets.column.mark"),
-            dataIndex: "mark_price",
-            width: 100,
-            align: "right",
-            onSort: true,
-            render: (value, record) => {
-              return /* @__PURE__ */ jsx(Text.numeral, { dp: record.quote_dp || 2, currency: "$", children: value });
-            }
-          },
-          {
-            title: t("markets.column.index"),
-            dataIndex: "index_price",
-            width: 100,
-            align: "right",
-            onSort: true,
-            render: (value, record) => {
-              return /* @__PURE__ */ jsx(Text.numeral, { dp: record.quote_dp || 2, currency: "$", children: value });
-            }
-          },
           {
             title: t("markets.column.24hChange"),
             dataIndex: "change",
@@ -4371,7 +4207,7 @@ var useDropDownMarketsColumns;
 var init_column4 = __esm({
   "src/components/dropDownMarkets/column.tsx"() {
     init_icons();
-    init_column2();
+    init_column();
     useDropDownMarketsColumns = () => {
       const { t } = useTranslation();
       return useCallback(
@@ -5648,10 +5484,12 @@ init_searchInput();
 init_useFavoritesExtraProps();
 
 // src/components/marketsSheet/column.tsx
-init_column2();
+init_column();
 var getMarketsSheetColumns = (favorite, isFavoriteList = false) => {
   return [
-    getSymbolColumn(favorite, isFavoriteList),
+    getSymbolColumn(favorite, isFavoriteList, {
+      stackLeverageInSecondRow: true
+    }),
     get24hVolOIColumn(),
     getLastAnd24hPercentageColumn(favorite, isFavoriteList)
   ];
@@ -6790,7 +6628,7 @@ init_marketItem_ui();
 // src/deprecated/newListingList/newListingList.ui.tsx
 init_collapseMarkets();
 init_marketsProvider();
-init_column();
+init_column2();
 var NewListingList = (props) => {
   const { dataSource, favorite, onSort, loading, getColumns, collapsed } = props;
   const { symbol, onSymbolChange } = useMarketsContext();
@@ -6859,7 +6697,7 @@ var NewListingListWidget = (props) => {
 init_collapseMarkets();
 init_favoritesTabs();
 init_marketsProvider();
-init_column();
+init_column2();
 var FavoritesList = (props) => {
   const { dataSource, favorite, onSort, loading, getColumns, collapsed } = props;
   const { symbol, onSymbolChange } = useMarketsContext();
@@ -6940,7 +6778,7 @@ var FavoritesListWidget = (props) => {
 // src/deprecated/recentList/recentList.ui.tsx
 init_collapseMarkets();
 init_marketsProvider();
-init_column();
+init_column2();
 var RecentList = (props) => {
   const { dataSource, favorite, onSort, loading, getColumns, collapsed } = props;
   const { symbol, onSymbolChange } = useMarketsContext();