@orderly.network/ui-tradingview 3.1.2-alpha.1 → 3.1.3-alpha.0

package/dist/index.mjs

@@ -1,5 +1,5 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import React3, { forwardRef, useRef, useState, useMemo, useEffect, useCallback } from 'react';
+import React3, { forwardRef, useRef, useState, useEffect, useCallback, useMemo } from 'react';
 import { useTranslation, Trans, useLocaleCode, i18n } from '@orderly.network/i18n';
 import { injectable, useScreen, cn, Flex, Divider, useDocumentDirection, useOrderlyTheme, Text, Switch, Box, useThemeAttribute, toast, modal, DropdownMenuRoot, DropdownMenuTrigger, DropdownMenuPortal, DropdownMenuContent } from '@orderly.network/ui';
 import { useConfig, useAccount, useSymbolsInfo, useLocalStorage, useOrderEntry_deprecated, useMarginModeBySymbol, useWS, usePositionStream, useOrderStream, useEventEmitter } from '@orderly.network/hooks';
@@ -1165,11 +1165,13 @@ function getErrorMessage(error) {
 var HISTORY_PATH = "tv/history";
 var KLINE_HISTORY_PATH = "v1/tv/kline_history";
 var _HistoryProvider = class _HistoryProvider {
-  constructor(datafeedUrl, requester, limitedServerResponse) {
+  constructor(datafeedUrl, requester, limitedServerResponse, getSymbolCreatedTime) {
     this._klinePreference = /* @__PURE__ */ new Map();
+    this._createTimeBoundaryCutoff = /* @__PURE__ */ new Map();
     this._datafeedUrl = datafeedUrl;
     this._requester = requester;
     this._limitedServerResponse = limitedServerResponse;
+    this._getSymbolCreatedTime = getSymbolCreatedTime;
   }
   /**
    * Build request parameters for history API calls
@@ -1211,18 +1213,32 @@ var _HistoryProvider = class _HistoryProvider {
         try {
           let result;
           let usedHistoryResult = false;
+          if (this._shouldSkipRequestAtCreateTimeBoundary(
+            symbolInfo,
+            resolution,
+            requestParams
+          )) {
+            resolve(this._createNoDataResult());
+            return;
+          }
           if (prefersKline) {
-            result = await this._requestKlineHistory(
-              this._buildKlineParams(requestParams, countBack)
+            const klineParams = this._buildBoundedKlineParams(
+              symbolInfo,
+              resolution,
+              requestParams,
+              countBack
             );
+            result = klineParams === null ? this._createNoDataResult() : await this._requestKlineHistory(klineParams.params);
           } else {
             const initialResponse = await this._requestHistory(requestParams);
             result = this._processHistoryResponse(initialResponse);
             usedHistoryResult = true;
-            const needsFallback = this._shouldFallbackToKline(
-              initialResponse,
-              countBack
+            const reachedCreateTimeBoundary = this._markCreateTimeBoundaryIfReached(
+              symbolInfo,
+              resolution,
+              result.bars
             );
+            const needsFallback = !reachedCreateTimeBoundary && this._shouldFallbackToKline(initialResponse, countBack);
             if (needsFallback) {
               const earliestTime = this._getEarliestTime(result.bars);
               if (earliestTime !== null) {
@@ -1230,29 +1246,33 @@ var _HistoryProvider = class _HistoryProvider {
                   0,
                   countBack - result.bars.length
                 );
-                const mergedResult = await this._tryKlineFallbackWithMerge(
+                const fallbackOutcome = await this._tryKlineFallbackWithMerge(
+                  symbolInfo,
+                  resolution,
                   requestParams,
                   remainingCountBack,
                   earliestTime,
                   result
                 );
-                if (mergedResult !== null) {
-                  result = mergedResult;
+                if (fallbackOutcome.status === "success") {
+                  result = fallbackOutcome.result;
                   usedHistoryResult = false;
                   this._klinePreference.set(preferenceKey, true);
-                } else {
+                } else if (fallbackOutcome.status === "failed") {
                   this._klinePreference.set(preferenceKey, false);
                 }
               } else {
-                const klineResult = await this._tryKlineFallback(
+                const fallbackOutcome = await this._tryKlineFallback(
+                  symbolInfo,
+                  resolution,
                   requestParams,
                   countBack
                 );
-                if (klineResult !== null) {
-                  result = klineResult;
+                if (fallbackOutcome.status === "success") {
+                  result = fallbackOutcome.result;
                   usedHistoryResult = false;
                   this._klinePreference.set(preferenceKey, true);
-                } else {
+                } else if (fallbackOutcome.status === "failed") {
                   this._klinePreference.set(preferenceKey, false);
                 }
               }
@@ -1260,6 +1280,11 @@ var _HistoryProvider = class _HistoryProvider {
               this._klinePreference.set(preferenceKey, false);
             }
           }
+          this._markCreateTimeBoundaryIfReached(
+            symbolInfo,
+            resolution,
+            result.bars
+          );
           if (usedHistoryResult && this._limitedServerResponse) {
             await this._processTruncatedResponse(result, { ...requestParams });
           }
@@ -1469,6 +1494,13 @@ var _HistoryProvider = class _HistoryProvider {
     }
     return params;
   }
+  _buildBoundedKlineParams(symbolInfo, resolution, requestParams, countBack) {
+    return this._applyCreateTimeBoundaryToKlineParams(
+      symbolInfo,
+      resolution,
+      this._buildKlineParams(requestParams, countBack)
+    );
+  }
   /**
    * Get the earliest time from bars array
    * @param bars - Array of bars
@@ -1490,22 +1522,38 @@ var _HistoryProvider = class _HistoryProvider {
    * @param historyResult - History result to merge with
    * @returns Merged result or null if kline request fails
    */
-  async _tryKlineFallbackWithMerge(requestParams, countBack, earliestTime, historyResult) {
+  async _tryKlineFallbackWithMerge(symbolInfo, resolution, requestParams, countBack, earliestTime, historyResult) {
     try {
+      if (this._hasReachedCreateTimeBoundary(symbolInfo, resolution, earliestTime)) {
+        this._markCreateTimeBoundary(symbolInfo, resolution, earliestTime);
+        return { status: "boundary" };
+      }
       const klineParams = {
         ...requestParams,
         from: requestParams.from,
         to: earliestTime
       };
+      const boundedKlineParams = this._buildBoundedKlineParams(
+        symbolInfo,
+        resolution,
+        klineParams,
+        countBack
+      );
+      if (boundedKlineParams === null) {
+        return { status: "boundary" };
+      }
       const klineResult = await this._requestKlineHistory(
-        this._buildKlineParams(klineParams, countBack)
+        boundedKlineParams.params
       );
       if (klineResult.bars.length === 0) {
-        return null;
+        return { status: "failed" };
       }
-      return this._mergeBars(historyResult, klineResult);
+      return {
+        status: "success",
+        result: this._mergeBars(historyResult, klineResult)
+      };
     } catch {
-      return null;
+      return { status: "failed" };
     }
   }
   /**
@@ -1569,14 +1617,27 @@ var _HistoryProvider = class _HistoryProvider {
       meta
     };
   }
-  async _tryKlineFallback(requestParams, countBack) {
+  async _tryKlineFallback(symbolInfo, resolution, requestParams, countBack) {
     try {
-      const result = await this._requestKlineHistory(
-        this._buildKlineParams(requestParams, countBack)
+      const klineParams = this._buildBoundedKlineParams(
+        symbolInfo,
+        resolution,
+        requestParams,
+        countBack
       );
-      return result.bars.length > 0 ? result : null;
+      if (klineParams === null) {
+        return { status: "boundary" };
+      }
+      const result = await this._requestKlineHistory(klineParams.params);
+      if (result.bars.length === 0) {
+        return { status: "failed" };
+      }
+      return {
+        status: "success",
+        result
+      };
     } catch {
-      return null;
+      return { status: "failed" };
     }
   }
   _shouldFallbackToKline(response, expectedCount) {
@@ -1592,6 +1653,119 @@ var _HistoryProvider = class _HistoryProvider {
     }
     return false;
   }
+  _applyCreateTimeBoundaryToKlineParams(symbolInfo, resolution, params) {
+    const createdTimeSeconds = this._getSymbolCreatedTimeSeconds(symbolInfo);
+    if (createdTimeSeconds === null) {
+      return {
+        params,
+        clampedToCreateTime: false
+      };
+    }
+    const to = this._getNumericParam(params, "to");
+    if (to !== null && to <= createdTimeSeconds) {
+      this._markCreateTimeBoundary(symbolInfo, resolution, createdTimeSeconds);
+      return null;
+    }
+    const from = this._getNumericParam(params, "from");
+    if (from !== null && from < createdTimeSeconds) {
+      return {
+        params: {
+          ...params,
+          from: createdTimeSeconds
+        },
+        clampedToCreateTime: true
+      };
+    }
+    return {
+      params,
+      clampedToCreateTime: false
+    };
+  }
+  _shouldSkipRequestAtCreateTimeBoundary(symbolInfo, resolution, params) {
+    const createdTimeSeconds = this._getSymbolCreatedTimeSeconds(symbolInfo);
+    if (createdTimeSeconds === null) {
+      return false;
+    }
+    const to = this._getNumericParam(params, "to");
+    if (to === null) {
+      return false;
+    }
+    if (to <= createdTimeSeconds) {
+      return true;
+    }
+    const cutoff = this._createTimeBoundaryCutoff.get(
+      this._getPreferenceKey(symbolInfo, resolution)
+    );
+    return cutoff !== void 0 && to <= cutoff;
+  }
+  _markCreateTimeBoundaryIfReached(symbolInfo, resolution, bars) {
+    const earliestTime = this._getEarliestTime(bars);
+    if (earliestTime !== null && this._hasReachedCreateTimeBoundary(symbolInfo, resolution, earliestTime)) {
+      this._markCreateTimeBoundary(symbolInfo, resolution, earliestTime);
+      return true;
+    }
+    return false;
+  }
+  _markCreateTimeBoundary(symbolInfo, resolution, cutoffSeconds) {
+    const key = this._getPreferenceKey(symbolInfo, resolution);
+    const currentCutoff = this._createTimeBoundaryCutoff.get(key);
+    if (currentCutoff === void 0 || cutoffSeconds > currentCutoff) {
+      this._createTimeBoundaryCutoff.set(key, cutoffSeconds);
+    }
+  }
+  _hasReachedCreateTimeBoundary(symbolInfo, resolution, earliestTimeSeconds) {
+    const createdTimeSeconds = this._getSymbolCreatedTimeSeconds(symbolInfo);
+    if (createdTimeSeconds === null) {
+      return false;
+    }
+    return earliestTimeSeconds <= createdTimeSeconds + this._resolutionToSeconds(resolution);
+  }
+  _getSymbolCreatedTimeSeconds(symbolInfo) {
+    const symbolInfoWithCreateTime = symbolInfo;
+    const createdTime = symbolInfoWithCreateTime.created_time ?? this._getSymbolCreatedTime?.(symbolInfo);
+    if (typeof createdTime !== "number" || !Number.isFinite(createdTime)) {
+      return null;
+    }
+    return Math.floor(createdTime / 1e3);
+  }
+  _getNumericParam(params, key) {
+    const value = params[key];
+    if (Array.isArray(value)) {
+      return null;
+    }
+    const numberValue = Number(value);
+    return Number.isFinite(numberValue) ? numberValue : null;
+  }
+  _resolutionToSeconds(resolution) {
+    const match = resolution.match(/^(\d*)([DWMY])?$/);
+    if (!match) {
+      return 60;
+    }
+    const amount = match[1] ? parseInt(match[1], 10) : 1;
+    if (!Number.isFinite(amount) || amount <= 0) {
+      return 60;
+    }
+    switch (match[2]) {
+      case "D":
+        return amount * 86400;
+      case "W":
+        return amount * 7 * 86400;
+      case "M":
+        return amount * 30 * 86400;
+      case "Y":
+        return amount * 365 * 86400;
+      default:
+        return amount * 60;
+    }
+  }
+  _createNoDataResult() {
+    return {
+      bars: [],
+      meta: {
+        noData: true
+      }
+    };
+  }
 };
 /**
  * Static mapping table for resolution conversion
@@ -1890,13 +2064,18 @@ function definedValueOrDefault(value, defaultValue) {
 
 // src/tradingviewAdapter/datafeed/abstract-datafeed.ts
 var AbstractDatafeed = class {
-  constructor(datafeedURL) {
+  constructor(datafeedURL, options) {
     this._configuration = defaultConfiguration();
     this._symbolsStorage = null;
     this._historyCursor = null;
     this._datafeedURL = datafeedURL;
     this._requester = new Requester();
-    this._historyProvider = new HistoryProvider(datafeedURL, this._requester);
+    this._historyProvider = new HistoryProvider(
+      datafeedURL,
+      this._requester,
+      void 0,
+      options?.getSymbolCreatedTime
+    );
     this._configurationReadyPromise = this._requestConfiguration().then(
       (configuration) => {
         if (configuration === null) {
@@ -2270,9 +2449,9 @@ var getAutoIncrementId = /* @__PURE__ */ (() => {
   return () => id++;
 })();
 var Datafeed = class extends AbstractDatafeed {
-  constructor(apiUrl, ws) {
+  constructor(apiUrl, ws, options) {
     const datafeedURL = `${apiUrl}`;
-    super(datafeedURL);
+    super(datafeedURL, options);
     this.bbosMap = /* @__PURE__ */ new Map();
     this.tickersMap = /* @__PURE__ */ new Map();
     this.eventBus = new MultiBroadcastEventBus();
@@ -4442,14 +4621,40 @@ function useTradingviewScript(props) {
   const theme = props.theme ?? currentTheme?.mode ?? "dark";
   const cssVariables = useCssVariables(theme);
   const chart = useRef(null);
+  const [readyWidget, setReadyWidget] = useState(
+    null
+  );
   const apiBaseUrl = useConfig("apiBaseUrl");
   const { state: accountState } = useAccount();
   const [side, setSide] = useState(OrderSide.SELL);
   const symbolsInfo = useSymbolsInfo();
+  const symbolsInfoRef = useRef(symbolsInfo);
   const [fullscreen, setFullscreen] = useLocalStorage(
     TradingviewFullscreenKey,
     false
   );
+  useEffect(() => {
+    symbolsInfoRef.current = symbolsInfo;
+  }, [symbolsInfo]);
+  const getSymbolCreatedTime = useCallback(
+    (symbolInfo) => {
+      const candidates = [
+        symbolInfo.ticker,
+        symbolInfo.name,
+        ...symbolInfo.base_name ?? []
+      ].filter(
+        (symbolName) => typeof symbolName === "string" && symbolName.length > 0
+      ).map((symbolName) => withoutExchangePrefix(symbolName));
+      for (const candidate of candidates) {
+        const createdTime = symbolsInfoRef.current[candidate]?.("created_time");
+        if (typeof createdTime === "number") {
+          return createdTime;
+        }
+      }
+      return void 0;
+    },
+    []
+  );
   const { onSubmit, submitting } = useOrderEntry_deprecated(
     {
       symbol: symbol ?? "",
@@ -4518,7 +4723,8 @@ function useTradingviewScript(props) {
       symbol,
       order_type: OrderType.MARKET,
       side: side2,
-      reduce_only: true
+      reduce_only: true,
+      margin_mode: data.marginMode ?? data.margin_mode ?? marginMode ?? MarginMode.CROSS
     };
     setSide(side2);
     modal.show("MarketCloseConfirmID", {
@@ -4680,7 +4886,7 @@ function useTradingviewScript(props) {
         toolbarBg,
         overrides,
         studiesOverrides,
-        datafeed: new Datafeed(apiBaseUrl, ws),
+        datafeed: new Datafeed(apiBaseUrl, ws, { getSymbolCreatedTime }),
         contextMenu: {
           items_processor: async (defaultItems) => {
             return defaultItems;
@@ -4706,6 +4912,7 @@ function useTradingviewScript(props) {
     }
     return () => {
       chart.current?.remove();
+      setReadyWidget(null);
     };
   }, [
     isMobile,
@@ -4723,7 +4930,8 @@ function useTradingviewScript(props) {
     loadingScreen,
     toolbarBg,
     customIndicatorsGetter,
-    direction
+    direction,
+    getSymbolCreatedTime
   ]);
   useEffect(() => {
     ws.on(
@@ -4744,6 +4952,7 @@ function useTradingviewScript(props) {
   useEffect(() => {
     if (chart.current && chart.current?.instance) {
       chart.current?.instance?.onChartReady(() => {
+        setReadyWidget(chart.current?.instance ?? null);
         if (isLoggedIn && chart.current?.instance) {
           createRenderer(
             chart.current.instance,
@@ -4784,7 +4993,8 @@ function useTradingviewScript(props) {
     onFullScreenChange,
     classNames,
     direction,
-    fullscreen
+    fullscreen,
+    readyWidget
   };
 }
 
@@ -4858,6 +5068,10 @@ var InjectableTradingviewDesktop = injectable(
   TradingviewChart,
   "TradingView.Desktop"
 );
+var InjectableChartOverlay = injectable(
+  () => null,
+  "Trading.Chart.Overlay"
+);
 var LazyLineType = React3.lazy(() => Promise.resolve().then(() => (init_lineType(), lineType_exports)));
 var LazyTimeInterval = React3.lazy(
   () => Promise.resolve().then(() => (init_timeInterval(), timeInterval_exports)).then((mod) => ({ default: mod.TimeInterval }))
@@ -5060,7 +5274,16 @@ var TradingviewUI = forwardRef((props, ref) => {
                 onFullScreenChange
               }
             ) }),
-            /* @__PURE__ */ jsx(InjectableTradingviewDesktop, { ...props })
+            /* @__PURE__ */ jsxs("div", { className: "oui-relative oui-min-h-0 oui-flex-1", children: [
+              /* @__PURE__ */ jsx(InjectableTradingviewDesktop, { ...props }),
+              props.readyWidget && props.symbol && /* @__PURE__ */ jsx("div", { className: "oui-pointer-events-none oui-absolute oui-inset-0 oui-z-[2]", children: /* @__PURE__ */ jsx(
+                InjectableChartOverlay,
+                {
+                  widget: props.readyWidget,
+                  symbol: props.symbol
+                }
+              ) })
+            ] })
           ]
         }
       )
@@ -5075,6 +5298,6 @@ var TradingviewWidget = forwardRef((props, ref) => {
 // src/index.ts
 init_displayControl();
 
-export { DesktopDisplayControl, DesktopDisplayControlMenuListTarget, InjectableTradingviewDesktop, MobileDisplayControl, TradingviewUI, TradingviewWidget, useTradingviewScript };
+export { DesktopDisplayControl, DesktopDisplayControlMenuListTarget, InjectableChartOverlay, InjectableTradingviewDesktop, MobileDisplayControl, TradingviewUI, TradingviewWidget, useTradingviewScript };
 //# sourceMappingURL=index.mjs.map
 //# sourceMappingURL=index.mjs.map