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

package/dist/index.d.mts

@@ -430,10 +430,12 @@ declare const useFundingRateModalScript: (options: FundingRateOptions) => {
     capFunding: string;
     floorFunding: string;
     lastFundingRate: string | undefined;
-    estFundingRate: string | undefined;
     estFundingFee: string;
     lastFundingRateAnnualized: string | undefined;
-    estFundingRateAnnualized: string | undefined;
+    estFundingRateByTimeframe: {
+        timeframe: "1H" | "4H" | "1D" | "7D" | "30D" | "1Y";
+        value: string;
+    }[];
 };
 type FundingRateModalState = ReturnType<typeof useFundingRateModalScript>;
 

package/dist/index.d.ts

@@ -430,10 +430,12 @@ declare const useFundingRateModalScript: (options: FundingRateOptions) => {
     capFunding: string;
     floorFunding: string;
     lastFundingRate: string | undefined;
-    estFundingRate: string | undefined;
     estFundingFee: string;
     lastFundingRateAnnualized: string | undefined;
-    estFundingRateAnnualized: string | undefined;
+    estFundingRateByTimeframe: {
+        timeframe: "1H" | "4H" | "1D" | "7D" | "30D" | "1Y";
+        value: string;
+    }[];
 };
 type FundingRateModalState = ReturnType<typeof useFundingRateModalScript>;
 

package/dist/index.js

@@ -2505,40 +2505,6 @@ var init_header_desktop = __esm({
     };
   }
 });
-var MiddlePriceView;
-var init_midPriceView = __esm({
-  "src/components/base/orderBook/midPriceView.tsx"() {
-    MiddlePriceView = (props) => {
-      const {
-        markPrice = 0,
-        lastPrice,
-        quote_dp,
-        className,
-        iconSize = 18
-      } = props;
-      const [prevLastPrice, middlePrice] = lastPrice;
-      const down = middlePrice < prevLastPrice;
-      const up = middlePrice > prevLastPrice;
-      return /* @__PURE__ */ jsxRuntime.jsxs(
-        ui.Flex,
-        {
-          gap: 1,
-          className: ui.cn(
-            up ? "oui-text-trade-profit" : down ? "oui-text-trade-loss" : "",
-            className
-          ),
-          children: [
-            /* @__PURE__ */ jsxRuntime.jsx(ui.Text.numeral, { dp: quote_dp, intensity: 98, children: middlePrice }),
-            /* @__PURE__ */ jsxRuntime.jsxs(ui.Box, { width: 19, children: [
-              down && /* @__PURE__ */ jsxRuntime.jsx(ui.ArrowDownShortIcon, { size: iconSize, color: "danger", opacity: 1 }),
-              up && /* @__PURE__ */ jsxRuntime.jsx(ui.ArrowUpShortIcon, { size: iconSize, color: "success", opacity: 1 })
-            ] })
-          ]
-        }
-      );
-    };
-  }
-});
 var MarkPriceView, DesktopLayout2, MobileLayout2, FlagIcon;
 var init_markPrice = __esm({
   "src/components/base/orderBook/markPrice.tsx"() {
@@ -2644,12 +2610,114 @@ var init_markPrice = __esm({
     };
   }
 });
+var UNDERLINE_CLASS, MiddlePriceView, DesktopLayout3, MobileLayout3;
+var init_midPriceView = __esm({
+  "src/components/base/orderBook/midPriceView.tsx"() {
+    UNDERLINE_CLASS = "oui-cursor-pointer oui-underline oui-decoration-dashed oui-decoration-1 oui-underline-offset-4 oui-decoration-base-contrast oui-inline-flex";
+    MiddlePriceView = (props) => {
+      const { isMobile } = ui.useScreen();
+      return isMobile ? /* @__PURE__ */ jsxRuntime.jsx(MobileLayout3, { ...props }) : /* @__PURE__ */ jsxRuntime.jsx(DesktopLayout3, { ...props });
+    };
+    DesktopLayout3 = (props) => {
+      const { lastPrice, quote_dp, className, iconSize = 18 } = props;
+      const { t } = i18n.useTranslation();
+      const [prevLastPrice, middlePrice] = lastPrice;
+      const down = middlePrice < prevLastPrice;
+      const up = middlePrice > prevLastPrice;
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        ui.Tooltip,
+        {
+          content: t("trading.orderBook.middlePrice.tooltip"),
+          className: "oui-max-w-[240px]",
+          children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: UNDERLINE_CLASS, children: /* @__PURE__ */ jsxRuntime.jsxs(
+            ui.Flex,
+            {
+              gap: 1,
+              className: ui.cn(
+                up ? "oui-text-trade-profit" : down ? "oui-text-trade-loss" : "",
+                className
+              ),
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx(ui.Text.numeral, { dp: quote_dp, intensity: 98, children: middlePrice }),
+                /* @__PURE__ */ jsxRuntime.jsxs(ui.Box, { width: 19, children: [
+                  down && /* @__PURE__ */ jsxRuntime.jsx(ui.ArrowDownShortIcon, { size: iconSize, color: "danger", opacity: 1 }),
+                  up && /* @__PURE__ */ jsxRuntime.jsx(ui.ArrowUpShortIcon, { size: iconSize, color: "success", opacity: 1 })
+                ] })
+              ]
+            }
+          ) })
+        }
+      );
+    };
+    MobileLayout3 = (props) => {
+      const { lastPrice, quote_dp, className, iconSize = 18 } = props;
+      const [open, setOpen] = React12.useState(false);
+      const { t } = i18n.useTranslation();
+      const [prevLastPrice, middlePrice] = lastPrice;
+      const down = middlePrice < prevLastPrice;
+      const up = middlePrice > prevLastPrice;
+      const handleTriggerClick = () => setOpen(true);
+      const handleKeyDown = (e) => {
+        if (e.key === "Enter" || e.key === " ") {
+          e.preventDefault();
+          setOpen(true);
+        }
+      };
+      return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "span",
+          {
+            role: "button",
+            tabIndex: 0,
+            className: UNDERLINE_CLASS,
+            onClick: handleTriggerClick,
+            onKeyDown: handleKeyDown,
+            "aria-label": t("trading.orderBook.middlePrice.tooltip"),
+            children: /* @__PURE__ */ jsxRuntime.jsxs(
+              ui.Flex,
+              {
+                gap: 1,
+                className: ui.cn(
+                  up ? "oui-text-trade-profit" : down ? "oui-text-trade-loss" : "",
+                  className
+                ),
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(ui.Text.numeral, { dp: quote_dp, intensity: 98, children: middlePrice }),
+                  /* @__PURE__ */ jsxRuntime.jsxs(ui.Box, { width: 19, children: [
+                    down && /* @__PURE__ */ jsxRuntime.jsx(ui.ArrowDownShortIcon, { size: iconSize, color: "danger", opacity: 1 }),
+                    up && /* @__PURE__ */ jsxRuntime.jsx(ui.ArrowUpShortIcon, { size: iconSize, color: "success", opacity: 1 })
+                  ] })
+                ]
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          ui.SimpleDialog,
+          {
+            size: "xs",
+            open,
+            onOpenChange: setOpen,
+            title: t("common.tips"),
+            actions: {
+              primary: {
+                label: t("common.ok"),
+                onClick: () => setOpen(false)
+              }
+            },
+            children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { children: t("trading.orderBook.middlePrice.tooltip") })
+          }
+        )
+      ] });
+    };
+  }
+});
 var DesktopMarkPrice, Spread;
 var init_markPrice_desktop = __esm({
   "src/components/desktop/orderBook/markPrice.desktop.tsx"() {
-    init_orderContext();
-    init_midPriceView();
     init_markPrice();
+    init_midPriceView();
+    init_orderContext();
     DesktopMarkPrice = (props) => {
       const { markPrice = 0, lastPrice, asks, bids, symbolInfo } = props;
       const { showTotal } = useOrderBookContext();
@@ -2872,12 +2940,25 @@ var init_fundingRate_ui = __esm({
     };
   }
 });
-exports.useFundingRateModalScript = void 0;
+var TIMEFRAME_CONFIG; exports.useFundingRateModalScript = void 0;
 var init_fundingRateModal_script = __esm({
   "src/components/mobile/fundingRateModal/fundingRateModal.script.tsx"() {
+    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 }
+    ];
     exports.useFundingRateModalScript = (options) => {
       const { data, isLoading } = hooks.useFundingDetails(options.symbol);
-      const { last_funding_rate, est_funding_rate } = hooks.useFundingRateBySymbol(options.symbol) ?? {};
+      const {
+        last_funding_rate,
+        est_funding_rate,
+        next_funding_time,
+        last_funding_rate_timestamp
+      } = hooks.useFundingRateBySymbol(options.symbol) ?? {};
       const [{ aggregated, rows }] = hooks.usePositionStream(options.symbol);
       const { notional } = aggregated ?? {};
       const fundingPeriod = React12.useMemo(() => {
@@ -2904,12 +2985,6 @@ var init_fundingRateModal_script = __esm({
         }
         return `${new utils.Decimal(last_funding_rate).mul(100).toNumber()}%`;
       }, [last_funding_rate]);
-      const estFundingRate = React12.useMemo(() => {
-        if (!est_funding_rate) {
-          return void 0;
-        }
-        return `${new utils.Decimal(est_funding_rate).mul(100).toNumber()}%`;
-      }, [est_funding_rate]);
       const estFundingFee = React12.useMemo(() => {
         if (!est_funding_rate || !notional || rows.length === 0) {
           return "--";
@@ -2929,23 +3004,30 @@ var init_fundingRateModal_script = __esm({
         const annualized = calculateAnnualizedRate(rate, data.funding_period);
         return annualized ? `${annualized}%` : void 0;
       }, [last_funding_rate, data?.funding_period]);
-      const estFundingRateAnnualized = React12.useMemo(() => {
-        if (!est_funding_rate || !data?.funding_period) {
-          return void 0;
+      const settlementIntervalHours = React12.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 = React12.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, data.funding_period);
-        return annualized ? `${annualized}%` : void 0;
-      }, [est_funding_rate, data?.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 {
         fundingPeriod,
         capFunding,
         floorFunding,
         lastFundingRate,
-        estFundingRate,
         estFundingFee,
         lastFundingRateAnnualized,
-        estFundingRateAnnualized
+        estFundingRateByTimeframe
       };
     };
   }
@@ -2960,10 +3042,9 @@ var init_fundingRateModal_ui = __esm({
         capFunding,
         floorFunding,
         lastFundingRate,
-        estFundingRate,
         estFundingFee,
         lastFundingRateAnnualized,
-        estFundingRateAnnualized
+        estFundingRateByTimeframe
       } = props;
       const renderRow = (label, value, annualizedValue) => {
         if (!value) {
@@ -3000,10 +3081,13 @@ var init_fundingRateModal_ui = __esm({
           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, { my: 4, className: "oui-w-full", intensity: 8 }),
@@ -7787,7 +7871,7 @@ var LazyOrderBookAndTradesWidget = React12__default.default.lazy(
     };
   })
 );
-var DesktopLayout3 = (props) => {
+var DesktopLayout4 = (props) => {
   const {
     resizeable,
     panelSize,
@@ -8617,7 +8701,7 @@ var MaybeEqual = () => {
     }
   );
 };
-var MobileLayout3 = (props) => {
+var MobileLayout4 = (props) => {
   const { t } = i18n.useTranslation();
   const { isRwa, open, closeTimeInterval } = hooks.useGetRwaSymbolInfo(props.symbol);
   React12.useEffect(() => {
@@ -8722,7 +8806,7 @@ var MobileLayout3 = (props) => {
         onOpenChange: props.onOpenMarketsSheetChange,
         classNames: {
           body: "oui-h-full oui-pb-0",
-          content: "oui-w-[280px] !oui-p-0"
+          content: "!oui-w-[372px] !oui-max-w-[372px] !oui-p-0"
         },
         contentProps: { side: "left", closeable: false },
         children: /* @__PURE__ */ jsxRuntime.jsx(
@@ -8756,10 +8840,10 @@ var MobileLayout3 = (props) => {
 var Trading = (props) => {
   const { isMobile } = ui.useScreen();
   if (isMobile) {
-    return /* @__PURE__ */ jsxRuntime.jsx(MobileLayout3, { ...props });
+    return /* @__PURE__ */ jsxRuntime.jsx(MobileLayout4, { ...props });
   }
   return /* @__PURE__ */ jsxRuntime.jsx(
-    DesktopLayout3,
+    DesktopLayout4,
     {
       className: "oui-h-[calc(100vh_-_48px_-_29px)] oui-bg-base-10",
       ...props