@orderly.network/markets 2.9.1 → 2.10.0-alpha.1

package/dist/index.js

@@ -4142,6 +4142,23 @@ var init_column4 = __esm({
                   )
                 ] });
               }
+            },
+            {
+              title: t("markets.openInterest"),
+              dataIndex: "openInterest",
+              align: "right",
+              onSort: true,
+              width: 80,
+              render: (value) => /* @__PURE__ */ jsxRuntime.jsx(
+                ui.Text.numeral,
+                {
+                  rule: "human",
+                  dp: 2,
+                  rm: utils.Decimal.ROUND_DOWN,
+                  size: "2xs",
+                  children: value
+                }
+              )
             }
           ];
         },
@@ -5222,25 +5239,17 @@ init_useFavoritesExtraProps();
 // src/components/marketsSheet/column.tsx
 init_icons();
 init_favoritesDropdownMenu();
+init_rwaDotTooltip();
 init_symbolDisplay();
 var getMarketsSheetColumns = (favorite, isFavoriteList = false) => {
   return [
     {
-      title: `${i18n.i18n.t("markets.column.market")} / ${i18n.i18n.t("common.volume")}`,
-      dataIndex: "24h_amount",
-      multiSort: {
-        fields: [
-          {
-            sortKey: "symbol",
-            label: i18n.i18n.t("markets.column.market")
-          },
-          {
-            sortKey: "24h_amount",
-            label: i18n.i18n.t("common.volume")
-          }
-        ]
-      },
+      title: i18n.i18n.t("common.symbol"),
+      dataIndex: "symbol",
+      align: "left",
+      onSort: true,
       className: "oui-h-[36px]",
+      width: 124,
       render: (value, record) => {
         let favoritesIcon;
         if (!isFavoriteList) {
@@ -5262,31 +5271,56 @@ var getMarketsSheetColumns = (favorite, isFavoriteList = false) => {
             /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { gapX: 1, children: [
               /* @__PURE__ */ jsxRuntime.jsx(ui.TokenIcon, { symbol: record.symbol, className: "oui-size-[18px]" }),
               /* @__PURE__ */ jsxRuntime.jsx(exports.SymbolDisplay, { formatString: "base", size: "2xs", children: record.symbol }),
-              /* @__PURE__ */ jsxRuntime.jsxs(ui.Badge, { size: "xs", color: "primary", children: [
-                record.leverage,
-                "x"
-              ] })
+              /* @__PURE__ */ jsxRuntime.jsx(RwaDotTooltip, { record })
             ] }),
-            /* @__PURE__ */ jsxRuntime.jsx(
-              ui.Text.numeral,
-              {
-                intensity: 54,
-                rule: "human",
-                dp: 2,
-                rm: utils.Decimal.ROUND_DOWN,
-                children: value
-              }
-            )
+            /* @__PURE__ */ jsxRuntime.jsxs(ui.Badge, { size: "xs", color: "primary", children: [
+              record.leverage,
+              "x"
+            ] })
           ] })
         ] });
       }
     },
     {
-      title: i18n.i18n.t("markets.column.price&Change"),
+      title: i18n.i18n.t("markets.column.24hVolOI"),
+      dataIndex: "24h_amount",
+      align: "right",
+      className: "oui-h-[36px]",
+      width: 100,
+      multiSort: {
+        fields: [
+          {
+            sortKey: "24h_amount",
+            label: i18n.i18n.t("markets.column.24hVol")
+          },
+          {
+            sortKey: "openInterest",
+            label: i18n.i18n.t("markets.column.OI")
+          }
+        ]
+      },
+      render: (value, record) => /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { direction: "column", itemAlign: "end", gapY: 1, children: [
+        /* @__PURE__ */ jsxRuntime.jsx(ui.Text.numeral, { rule: "human", dp: 2, rm: utils.Decimal.ROUND_DOWN, children: value }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          ui.Text.numeral,
+          {
+            rule: "human",
+            dp: 2,
+            rm: utils.Decimal.ROUND_DOWN,
+            size: "2xs",
+            intensity: 54,
+            children: record.openInterest
+          }
+        )
+      ] })
+    },
+    {
+      title: i18n.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(
@@ -5708,10 +5742,9 @@ var FundingRateHint = (props) => {
     capFunding,
     floorFunding,
     lastFundingRate,
-    estFundingRate,
     estFundingFee,
     lastFundingRateAnnualized,
-    estFundingRateAnnualized
+    estFundingRateByTimeframe
   } = props;
   const renderRow = (label, value, annualizedValue) => {
     if (!value) {
@@ -5740,19 +5773,35 @@ var FundingRateHint = (props) => {
       lastFundingRate,
       lastFundingRateAnnualized
     ),
-    renderRow(
-      t("trading.fundingRate.estimatedFundingRate"),
-      estFundingRate,
-      estFundingRateAnnualized
+    estFundingRateByTimeframe.map(
+      ({ timeframe, value }) => renderRow(
+        t("trading.fundingRate.estFundingRateWithTimeframe", {
+          timeframe
+        }),
+        value
+      )
     ),
     renderRow(t("trading.fundingRate.estimatedFundingFee"), estFundingFee),
     /* @__PURE__ */ jsxRuntime.jsx(ui.Divider, { className: "oui-w-full", intensity: 8 }),
     t("markets.symbolInfoBar.predFundingRate.tooltip")
   ] });
 };
+var TIMEFRAME_CONFIG = [
+  { key: "1H", hours: 1 },
+  { key: "4H", hours: 4 },
+  { key: "1D", hours: 24 },
+  { key: "7D", hours: 168 },
+  { key: "30D", hours: 720 },
+  { key: "1Y", hours: 8760 }
+];
 var useFundingRateHintScript = (symbol) => {
   const { data: fundingDetails, isLoading: isFundingLoading } = hooks.useFundingDetails(symbol);
-  const { last_funding_rate, est_funding_rate } = hooks.useFundingRateBySymbol(symbol) ?? {};
+  const {
+    last_funding_rate,
+    est_funding_rate,
+    next_funding_time,
+    last_funding_rate_timestamp
+  } = hooks.useFundingRateBySymbol(symbol) ?? {};
   const [{ aggregated, rows }] = hooks.usePositionStream(symbol);
   const { notional } = aggregated ?? {};
   const fundingPeriod = React6.useMemo(() => {
@@ -5779,12 +5828,6 @@ var useFundingRateHintScript = (symbol) => {
     }
     return `${new utils.Decimal(last_funding_rate).mul(100).toNumber()}%`;
   }, [last_funding_rate]);
-  const estFundingRate = React6.useMemo(() => {
-    if (!est_funding_rate) {
-      return void 0;
-    }
-    return `${new utils.Decimal(est_funding_rate).mul(100).toNumber()}%`;
-  }, [est_funding_rate]);
   const estFundingFee = React6.useMemo(() => {
     if (!est_funding_rate || !notional || rows.length === 0) {
       return "--";
@@ -5807,37 +5850,40 @@ var useFundingRateHintScript = (symbol) => {
     );
     return annualized ? `${annualized}%` : void 0;
   }, [last_funding_rate, fundingDetails?.funding_period]);
-  const estFundingRateAnnualized = React6.useMemo(() => {
-    if (!est_funding_rate || !fundingDetails?.funding_period) {
-      return void 0;
+  const settlementIntervalHours = React6.useMemo(() => {
+    if (!next_funding_time || !last_funding_rate_timestamp) return 8;
+    const diff = next_funding_time - last_funding_rate_timestamp;
+    return diff / 36e5;
+  }, [next_funding_time, last_funding_rate_timestamp]);
+  const estFundingRateByTimeframe = React6.useMemo(() => {
+    if (est_funding_rate === void 0 || est_funding_rate === null || settlementIntervalHours <= 0) {
+      return [];
     }
-    const rate = new utils.Decimal(est_funding_rate).mul(100).toNumber();
-    const annualized = calculateAnnualizedRate(
-      rate,
-      fundingDetails.funding_period
-    );
-    return annualized ? `${annualized}%` : void 0;
-  }, [est_funding_rate, fundingDetails?.funding_period]);
+    return TIMEFRAME_CONFIG.map(({ key, hours }) => {
+      const rate = new utils.Decimal(est_funding_rate).mul(hours).div(settlementIntervalHours).mul(100);
+      const str = rate.toFixed(5);
+      const trimmed = str.replace(/\.?0+$/, "") || "0";
+      return { timeframe: key, value: `${trimmed}%` };
+    });
+  }, [est_funding_rate, settlementIntervalHours]);
   return React6.useMemo(() => {
     return {
       fundingPeriod,
       capFunding,
       floorFunding,
       lastFundingRate,
-      estFundingRate,
       estFundingFee,
       lastFundingRateAnnualized,
-      estFundingRateAnnualized
+      estFundingRateByTimeframe
     };
   }, [
     fundingPeriod,
     capFunding,
     floorFunding,
     lastFundingRate,
-    estFundingRate,
     estFundingFee,
     lastFundingRateAnnualized,
-    estFundingRateAnnualized,
+    estFundingRateByTimeframe,
     symbol
   ]);
 };
@@ -5909,7 +5955,7 @@ var SymbolInfoBarFull = (props) => {
         /* @__PURE__ */ jsxRuntime.jsx(
           LazyDropDownMarketsWidget,
           {
-            contentClassName: "oui-w-[429px] oui-h-[496px]",
+            contentClassName: "oui-w-[580px] oui-h-[496px]",
             symbol: props.symbol,
             onSymbolChange: props.onSymbolChange,
             children: /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { gapX: 1, className: "oui-cursor-pointer", children: [
@@ -5992,7 +6038,14 @@ var SymbolInfoBarFull = (props) => {
                 intensity: 8
               }
             ),
-            price,
+            /* @__PURE__ */ jsxRuntime.jsx(
+              ui.Tooltip,
+              {
+                content: t("markets.symbolInfoBar.lastPrice.tooltip"),
+                className: "oui-max-w-[240px]",
+                children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "oui-cursor-pointer oui-border-b oui-border-dashed oui-border-line-12 oui-inline-block", children: price })
+              }
+            ),
             /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "oui-relative oui-h-full oui-overflow-hidden", children: [
               /* @__PURE__ */ jsxRuntime.jsx(
                 "div",