binbot-charts 0.6.2 → 0.6.8

package/public/charting_library/charting_library.standalone.js

@@ -0,0 +1 @@
+var TradingView=function(e){"use strict";function t(e,i){const n={...e};for(const o in i)"object"!=typeof e[o]||null===e[o]||Array.isArray(e[o])?void 0!==i[o]&&(n[o]=i[o]):n[o]=t(e[o],i[o]);return n}const i={mobile:{disabled_features:["left_toolbar","header_widget","timeframes_toolbar","edit_buttons_in_legend","context_menus","control_bar","border_around_the_chart"],enabled_features:[]}},n={width:800,height:500,interval:"1D",timezone:"Etc/UTC",container:"",library_path:"",locale:"en",widgetbar:{details:!1,watchlist:!1,watchlist_settings:{default_symbols:[]}},overrides:{"mainSeriesProperties.showCountdown":!1},studies_overrides:{},trading_customization:{position:{},order:{}},brokerConfig:{configFlags:{}},fullscreen:!1,autosize:!1,disabled_features:[],enabled_features:[],debug:!1,logo:{},time_frames:[{text:"5y",resolution:"1W"},{text:"1y",resolution:"1W"},{text:"6m",resolution:"120"},{text:"3m",resolution:"60"},{text:"1m",resolution:"30"},{text:"5d",resolution:"5"},{text:"1d",resolution:"1"}],client_id:"0",user_id:"0",charts_storage_api_version:"1.0",favorites:{intervals:[],chartTypes:[]}};let o=!1;function s(){return"CL v21.064 (internal id f0bc1e45 @ 2022-03-17T12:19:26.809Z)"}const r=class{constructor(e){if(this._id=`tradingview_${(1048576*(1+Math.random())|0).toString(16).substring(1)}`,this._ready=!1,this._readyHandlers=[],this._onWindowResize=this._autoResizeChart.bind(this),!e.datafeed)throw new Error("Datafeed is not defined");if(this._options=t(n,e),e.preset){const t=i[e.preset];t?(void 0!==this._options.disabled_features?this._options.disabled_features=this._options.disabled_features.concat(t.disabled_features):this._options.disabled_features=t.disabled_features,void 0!==this._options.enabled_features?this._options.enabled_features=this._options.enabled_features.concat(t.enabled_features):this._options.enabled_features=t.enabled_features):console.warn("Unknown preset: `"+e.preset+"`")}"Dark"===this._options.theme&&void 0===this._options.loading_screen&&(this._options.loading_screen={backgroundColor:"#131722"}),this._options.debug&&(o||(o=!0,console.log("Using CL v21.064 (internal id f0bc1e45 @ 2022-03-17T12:19:26.809Z)"))),this._create()}onChartReady(e){this._ready?e.call(this):this._readyHandlers.push(e)}headerReady(){return this._innerWindowLoaded.then((()=>this._innerWindow().headerReady()))}onGrayedObjectClicked(e){this._doWhenInnerApiLoaded((t=>{t.onGrayedObjectClicked(e)}))}onShortcut(e,t){this._doWhenInnerWindowLoaded((i=>{i.createShortcutAction(e,t)}))}subscribe(e,t){this._doWhenInnerApiLoaded((i=>{i.subscribe(e,t)}))}unsubscribe(e,t){this._doWhenInnerApiLoaded((i=>{i.unsubscribe(e,t)}))}chart(e){return this._innerAPI().chart(e)}getLanguage(){return this._options.locale}setSymbol(e,t,i){this._innerAPI().changeSymbol(e,t,i)}remove(){window.removeEventListener("resize",this._onWindowResize),this._readyHandlers.splice(0,this._readyHandlers.length),delete window[this._id],this._iFrame.parentNode&&this._iFrame.parentNode.removeChild(this._iFrame)}closePopupsAndDialogs(){this._doWhenInnerApiLoaded((e=>{e.closePopupsAndDialogs()}))}selectLineTool(e){this._innerAPI().selectLineTool(e)}selectedLineTool(){return this._innerAPI().selectedLineTool()}save(e){this._innerAPI().saveChart(e)}load(e,t){this._innerAPI().loadChart({json:e,extendedData:t})}getSavedCharts(e){this._innerAPI().getSavedCharts(e)}loadChartFromServer(e){this._innerAPI().loadChartFromServer(e)}saveChartToServer(e,t,i){this._innerAPI().saveChartToServer(e,t,i)}removeChartFromServer(e,t){this._innerAPI().removeChartFromServer(e,t)}onContextMenu(e){this._doWhenInnerApiLoaded((t=>{t.onContextMenu(e)}))}createButton(e){return this._innerWindow().createButton(e)}createDropdown(e){return this._innerWindow().createDropdown(e)}showNoticeDialog(e){this._doWhenInnerApiLoaded((t=>{t.showNoticeDialog(e)}))}showConfirmDialog(e){this._doWhenInnerApiLoaded((t=>{t.showConfirmDialog(e)}))}showLoadChartDialog(){this._innerAPI().showLoadChartDialog()}showSaveAsChartDialog(){this._innerAPI().showSaveAsChartDialog()}symbolInterval(){return this._innerAPI().getSymbolInterval()}mainSeriesPriceFormatter(){return this._innerAPI().mainSeriesPriceFormatter()}getIntervals(){return this._innerAPI().getIntervals()}getStudiesList(){return this._innerAPI().getStudiesList()}getStudyInputs(e){return this._innerAPI().getStudyInputs(e)}addCustomCSSFile(e){this._innerWindow().addCustomCSSFile(e)}applyOverrides(e){this._options=t(this._options,{overrides:e}),this._doWhenInnerWindowLoaded((t=>{t.applyOverrides(e)}))}applyStudiesOverrides(e){this._doWhenInnerWindowLoaded((t=>{t.applyStudiesOverrides(e)}))}watchList(){return this._innerAPI().watchlist()}news(){return this._innerAPI().news()}activeChart(){return this._innerAPI().activeChart()}chartsCount(){return this._innerAPI().chartsCount()}layout(){return this._innerAPI().layout()}setLayout(e){this._innerAPI().setLayout(e)}layoutName(){return this._innerAPI().layoutName()}changeTheme(e,t){return this._innerWindow().changeTheme(e,t)}getTheme(){return this._innerWindow().getTheme()}takeScreenshot(){this._doWhenInnerApiLoaded((e=>{e.takeScreenshot()}))}lockAllDrawingTools(){return this._innerAPI().lockAllDrawingTools()}hideAllDrawingTools(){return this._innerAPI().hideAllDrawingTools()}drawOnAllCharts(e){this._innerAPI().drawOnAllCharts(e)}magnetEnabled(){return this._innerAPI().magnetEnabled()}magnetMode(){return this._innerAPI().magnetMode()}undoRedoState(){return this._innerAPI().undoRedoState()}setIntervalLinkingEnabled(e){this._innerAPI().setIntervalLinkingEnabled(e)}setTimeFrame(e){this._innerAPI().setTimeFrame(e)}symbolSync(){return this._innerAPI().symbolSync()}intervalSync(){return this._innerAPI().intervalSync()}crosshairSync(){return this._innerAPI().crosshairSync()}timeSync(){return this._innerAPI().timeSync()}getAllFeatures(){return this._innerWindow().getAllFeatures()}clearUndoHistory(){return this._innerAPI().clearUndoHistory()}undo(){return this._innerAPI().undo()}redo(){return this._innerAPI().redo()}startFullscreen(){this._innerAPI().startFullscreen()}exitFullscreen(){this._innerAPI().exitFullscreen()}takeClientScreenshot(e){return this._innerAPI().takeClientScreenshot(e)}navigationButtonsVisibility(){return this._innerWindow().getNavigationButtonsVisibility()}paneButtonsVisibility(){return this._innerWindow().getPaneButtonsVisibility()}dateFormat(){return this._innerWindow().getDateFormat()}_innerAPI(){return this._innerWindow().tradingViewApi}_innerWindow(){return this._iFrame.contentWindow}_doWhenInnerWindowLoaded(e){this._ready?e(this._innerWindow()):this._innerWindowLoaded.then((()=>{e(this._innerWindow())}))}_doWhenInnerApiLoaded(e){this._doWhenInnerWindowLoaded((t=>{t.doWhenApiIsReady((()=>e(this._innerAPI())))}))}_autoResizeChart(){this._options.fullscreen&&(this._iFrame.style.height=window.innerHeight+"px")}_create(){const e=this._render();this._options.container_id&&console.warn("`container_id` is now deprecated. Please use `container` instead to either still pass a string or an `HTMLElement`.");const t=this._options.container_id||this._options.container,i="string"==typeof t?document.getElementById(t):t;if(null===i)throw new Error(`There is no such element - #${this._options.container}`);i.innerHTML=e,this._iFrame=i.querySelector(`#${this._id}`);const n=this._iFrame;(this._options.autosize||this._options.fullscreen)&&(n.style.width="100%",this._options.fullscreen||(n.style.height="100%")),window.addEventListener("resize",this._onWindowResize),this._onWindowResize(),this._innerWindowLoaded=new Promise((e=>{const t=()=>{n.removeEventListener("load",t,!1),e()};n.addEventListener("load",t,!1)})),this._innerWindowLoaded.then((()=>{this._innerWindow().widgetReady((()=>{this._ready=!0;for(const e of this._readyHandlers)try{e.call(this)}catch(e){console.error(e)}this._innerWindow().initializationFinished()}))}))}_render(){const e=window;if(e[this._id]={datafeed:this._options.datafeed,customFormatters:this._options.custom_formatters||this._options.customFormatters,brokerFactory:this._options.broker_factory||this._options.brokerFactory,overrides:this._options.overrides,studiesOverrides:this._options.studies_overrides,tradingCustomization:this._options.trading_customization,disabledFeatures:this._options.disabled_features,enabledFeatures:this._options.enabled_features,brokerConfig:this._options.broker_config||this._options.brokerConfig,restConfig:this._options.restConfig,favorites:this._options.favorites,logo:this._options.logo,numeric_formatting:this._options.numeric_formatting,rss_news_feed:this._options.rss_news_feed,newsProvider:this._options.news_provider,loadLastChart:this._options.load_last_chart,saveLoadAdapter:this._options.save_load_adapter,loading_screen:this._options.loading_screen,settingsAdapter:this._options.settings_adapter,getCustomIndicators:this._options.custom_indicators_getter,additionalSymbolInfoFields:this._options.additional_symbol_info_fields,headerWidgetButtonsMode:this._options.header_widget_buttons_mode,symbolSearchComplete:this._options.symbol_search_complete},this._options.saved_data)e[this._id].chartContent={json:this._options.saved_data},this._options.saved_data_meta_info&&(e[this._id].chartContentExtendedData=this._options.saved_data_meta_info);else if(!this._options.load_last_chart&&!this._options.symbol)throw new Error("Symbol is not defined: either 'symbol' or 'load_last_chart' option must be set");const t=(this._options.library_path||"")+`${encodeURIComponent(this._options.locale)}-tv-chart.f0bc1e45.html#symbol=`+encodeURIComponent(this._options.symbol||"")+"&interval="+encodeURIComponent(this._options.interval)+(this._options.timeframe?"&timeframe="+encodeURIComponent(this._options.timeframe):"")+(this._options.toolbar_bg?"&toolbarbg="+encodeURIComponent(this._options.toolbar_bg.replace("#","")):"")+(this._options.studies_access?"&studiesAccess="+encodeURIComponent(JSON.stringify(this._options.studies_access)):"")+"&widgetbar="+encodeURIComponent(JSON.stringify(this._options.widgetbar))+(this._options.drawings_access?"&drawingsAccess="+encodeURIComponent(JSON.stringify(this._options.drawings_access)):"")+"&timeFrames="+encodeURIComponent(JSON.stringify(this._options.time_frames))+"&locale="+encodeURIComponent(this._options.locale)+"&uid="+encodeURIComponent(this._id)+"&clientId="+encodeURIComponent(String(this._options.client_id))+"&userId="+encodeURIComponent(String(this._options.user_id))+(this._options.charts_storage_url?"&chartsStorageUrl="+encodeURIComponent(this._options.charts_storage_url):"")+(this._options.charts_storage_api_version?"&chartsStorageVer="+encodeURIComponent(this._options.charts_storage_api_version):"")+(this._options.custom_css_url?"&customCSS="+encodeURIComponent(this._options.custom_css_url):"")+(this._options.auto_save_delay?"&autoSaveDelay="+encodeURIComponent(String(this._options.auto_save_delay)):"")+"&debug="+encodeURIComponent(String(this._options.debug))+(this._options.snapshot_url?"&snapshotUrl="+encodeURIComponent(this._options.snapshot_url):"")+(this._options.timezone?"&timezone="+encodeURIComponent(this._options.timezone):"")+(this._options.study_count_limit?"&studyCountLimit="+encodeURIComponent(String(this._options.study_count_limit)):"")+(this._options.symbol_search_request_delay?"&ssreqdelay="+encodeURIComponent(String(this._options.symbol_search_request_delay)):"")+(this._options.compare_symbols?"&compareSymbols="+encodeURIComponent(JSON.stringify(this._options.compare_symbols)):"")+(this._options.theme?"&theme="+encodeURIComponent(String(this._options.theme)):"")+(this._options.header_widget_buttons_mode?"&header_widget_buttons_mode="+encodeURIComponent(String(this._options.header_widget_buttons_mode)):"")+(this._options.time_scale?"&time_scale="+encodeURIComponent(JSON.stringify(this._options.time_scale)):"");return'<iframe id="'+this._id+'" name="'+this._id+'"  src="'+t+'"'+(this._options.autosize||this._options.fullscreen?"":' width="'+this._options.width+'" height="'+this._options.height+'"')+' title="Financial Chart" frameborder="0" allowTransparency="true" scrolling="no" allowfullscreen style="display:block;"></iframe>'}};return window.TradingView=window.TradingView||{},window.TradingView.version=s,e.version=s,e.widget=r,e}({});

package/public/index.html

@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta charset="utf-8">
+		<title>Binbot charts demo</title>
+	</head>
+	<body>
+		<noscript>
+			You need to enable JavaScript to run this app.
+		</noscript>
+		<div id="root"></div>
+		<!--
+			This HTML file is a template.
+			If you open it directly in the browser, you will see an empty page.
+
+			You can add webfonts, meta tags, or analytics to this file.
+			The build step will place the bundled scripts into the <body> tag.
+
+			To begin the development, run `npm start`.
+			To create a production bundle, use `npm run build`.
+		-->
+	</body>
+</html>

package/src/App.css

@@ -0,0 +1,26 @@
+.App {
+	text-align: center;
+}
+
+.App-header {
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	padding: 10px 0;
+	background-color: #222;
+	color: #fff;
+}
+
+.App-tv-logo {
+	height: 45px;
+}
+
+.App-react-logo {
+	display: block;
+	height: 62px;
+}
+
+.App-title {
+	display: block;
+	font-size: 1.5em;
+}

package/src/App.tsx

@@ -0,0 +1,100 @@
+import { type FC, useEffect, useState } from "react";
+import { useImmer } from "use-immer";
+import { Immutable } from "immer";
+import "./App.css";
+import TVChartContainer, { OrderLine } from "./main";
+import { ResolutionString } from "./charting_library/charting_library";
+import { ITimescaleMarks } from "./charting-library-interfaces";
+
+type TimeMarks = Immutable<ITimescaleMarks>
+
+function roundTime(ts: number): number {
+  /**
+   * @param ts a JavaScript new Date().getTime() timestamp
+   */
+  let time = new Date(ts);
+  time.setMinutes(0);
+  time.setSeconds(0)
+  time.setMilliseconds(0);
+  const roundFloor = time.getTime();
+  return roundFloor / 1000
+}
+
+export const App: FC<{}> = (): JSX.Element => {
+  const [currentPrice, setCurrentPrice] = useState(null);
+  const [orderLines , setOrderLines] = useImmer<OrderLine[]>([]);
+  const [symbolState, setSymbolState] = useState("BTCUSDT")
+  const [testTimeMarks, setTestTimeMarks] = useState<Array<TimeMarks>>([])
+
+  useEffect(() => {
+    if (currentPrice) {
+      updateOrderLines()
+    }
+
+  }, [currentPrice]);
+
+  const updateOrderLines = () => {
+    if (currentPrice) {
+      setOrderLines((draft) => {
+        draft.push({
+          id: "base_order",
+          text: "Base",
+          tooltip: ["Inactive"],
+          quantity: `XX USDT`,
+          price: currentPrice,
+          color: "#1f77d0",
+        });
+        return draft
+      });
+      setOrderLines((draft) => {
+        draft.push({
+          id: "take_profit",
+          text: "Take profit",
+          tooltip: ["Inactive"],
+          quantity: `XX USDT`,
+          price: parseFloat((currentPrice * 1.03).toFixed(6)),
+          color: "#1f77d0",
+        });
+        return draft
+      });
+    }
+    
+  }
+
+  const handleTick = (ohlc) => {
+    setCurrentPrice(ohlc.close);
+  };
+  const getLatestBar = (bar) => {
+    const purchaseTs = new Date(2023, 0, 14, 13, 0).getTime()
+    setCurrentPrice(bar[3]);
+      setTestTimeMarks([{
+      id: "tsm4",
+      time: roundTime(purchaseTs),
+      color: "blue",
+      label: "B",
+      tooltip: ["Safety Order 4"],
+    }])
+  };
+  const handleChange = (e) => {
+    if (e.target.name === "symbol") {
+      setSymbolState(e.target.value);
+    }
+  }
+  return (
+    <>
+      <h1 style={{ textAlign: "center" }}>Test chart</h1>
+      <label htmlFor="symbol">Type symbol</label>
+      <input name="symbol" type="text" onChange={handleChange} />
+      <TVChartContainer
+        symbol={symbolState}
+        interval={"1h" as ResolutionString}
+        timescaleMarks={testTimeMarks}
+        orderLines={orderLines}
+        onTick={handleTick}
+        getLatestBar={getLatestBar}
+      />
+    </>
+  );
+}
+
+export default App;

package/src/charting-library-interfaces.d.ts

@@ -0,0 +1,36 @@
+import Datafeed from "./datafeed";
+
+export interface IWidgetOptions {
+  symbol: string;
+  // BEWARE: no trailing slash is expected in feed URL
+  datafeed: Datafeed;
+  interval: string;
+  container: HTMLInputElement;
+  library_path: string; // node_modules path of charting_library
+  locale?: string;
+  disabled_features?: Array<string>;
+  enabled_features?: Array<string>;
+  charts_storage_url?: string;
+  charts_storage_api_version?: string;
+  client_id?: string;
+  user_id?: string;
+  fullscreen?: boolean;
+  autosize?: boolean;
+  studies_overrides?: object;
+}
+
+export interface IOrderLine {
+  text: string;
+  tooltip?: Array<string>;
+  quantity?: string;
+  price: Number;
+  color?: string;
+}
+
+export interface ITimescaleMarks {
+  id: string;
+  time: Number;
+  color?: string;
+  label: string;
+  tooltip?: Array<string>;
+}

package/src/datafeed.ts

@@ -0,0 +1,283 @@
+import { getAllSymbols, makeApiRequest } from "./helpers";
+import { subscribeOnStream, unsubscribeFromStream } from "./streaming";
+
+enum BinanceResolutions {
+  one_second = "1s",
+  one_minute = "1m",
+  three_minute = "3m",
+  five_minute = "5m",
+  fifteen_minute = "15m",
+  thirty_minute = "30m",
+  one_hour = "1h",
+  two_hour = "2h",
+  four_hour = "4h",
+  six_hour = "6h",
+  eight_hour = "8h",
+  twelve_hour = "12h",
+  one_day = "1d",
+  three_day = "3d",
+  one_week = "1w",
+  one_month = "1M",
+}
+
+interface ConfigurationData {
+  supports_marks: boolean;
+  supports_timescale_marks: boolean;
+  supports_time: boolean;
+  supported_resolutions: string[];
+  exchanges: { value: string; name: string; desc: string }[];
+  symbols_types: { name: string; value: string }[];
+}
+
+const getConfigurationData = async (): Promise<ConfigurationData> => {
+  return {
+    supports_marks: true,
+    supports_timescale_marks: true,
+    supports_time: true,
+    supported_resolutions: [
+      "1S",
+      "1",
+      "3",
+      "5",
+      "15",
+      "30",
+      "60",
+      "120",
+      "240",
+      "360",
+      "480",
+      "720",
+      "1D",
+      "3D",
+      "1W",
+      "12M",
+    ],
+    exchanges: [
+      {
+        value: "Binance",
+        name: "Binance",
+        desc: "Binance",
+      },
+    ],
+    symbols_types: [
+      {
+        name: "crypto",
+        value: "crypto",
+      },
+    ],
+  };
+};
+
+interface TimescaleMark {
+  id: string;
+  time: number;
+  color: string;
+  label: string;
+  tooltip: string;
+}
+
+interface SymbolInfo {
+  name: string;
+  ticker: string;
+  description: string;
+  type: string;
+  session: string;
+  timezone: string;
+  exchange: string;
+  minmov: number;
+  pricescale: number;
+  has_daily: boolean;
+  has_intraday: boolean;
+  has_no_volume: boolean;
+  has_seconds: boolean;
+  seconds_multipliers: number[];
+  volume: string;
+  volume_precision: number;
+  data_status: string;
+  resolution: string;
+}
+
+interface PeriodParams {
+  from: number;
+  to: number;
+  firstDataRequest: boolean;
+}
+
+interface Bar {
+  time: number;
+  low: number;
+  high: number;
+  open: number;
+  close: number;
+  volume: number;
+}
+
+export default class Datafeed {
+  private streaming: any;
+  private timescaleMarks: TimescaleMark[];
+  private interval: string;
+  private configurationData: ConfigurationData | null = null;
+
+  constructor(timescaleMarks: TimescaleMark[] = [], interval: string = "1h") {
+    this.streaming = null;
+    this.timescaleMarks = timescaleMarks;
+    this.interval = interval;
+  }
+
+  onReady = async (callback: (data: ConfigurationData) => void): Promise<void> => {
+    this.configurationData = await getConfigurationData();
+    callback(this.configurationData);
+  };
+
+  searchSymbols = async (
+    userInput: string,
+    exchange: string,
+    symbolType: string,
+    onResultReadyCallback: (symbols: any[]) => void
+  ): Promise<void> => {
+    const symbols = await getAllSymbols(userInput);
+    onResultReadyCallback(symbols);
+  };
+
+  resolveSymbol = async (
+    symbolName: string,
+    onSymbolResolvedCallback: (symbolInfo: SymbolInfo) => void,
+    onResolveErrorCallback: (error: string) => void
+  ): Promise<void> => {
+    if (!symbolName) {
+      await onResolveErrorCallback("cannot resolve symbol");
+      return;
+    }
+
+    const symbolInfo = (): SymbolInfo => {
+      return {
+        name: symbolName,
+        ticker: symbolName,
+        description: symbolName,
+        type: "crypto",
+        session: "24x7",
+        timezone: "Etc/UTC",
+        exchange: "Binance",
+        minmov: 100,
+        pricescale: 100000,
+        has_daily: true,
+        has_intraday: true,
+        has_no_volume: false,
+        has_seconds: true,
+        seconds_multipliers: [1],
+        volume: "hundreds",
+        volume_precision: 9,
+        data_status: "streaming",
+        resolution: "1h",
+      };
+    };
+    const symbol = await symbolInfo();
+    onSymbolResolvedCallback(symbol);
+  };
+
+  getBars = async (
+    symbolInfo: SymbolInfo,
+    resolution: string,
+    periodParams: PeriodParams,
+    onHistoryCallback: (bars: Bar[], meta: { noData: boolean }) => void,
+    onErrorCallback: (error: any) => void
+  ): Promise<void> => {
+    const { from, to, firstDataRequest } = periodParams;
+    let interval = "60"; // 1 hour
+    // Calculate interval using resolution data
+    if (!/[a-zA-Z]$/.test(resolution)) {
+      if (parseInt(resolution) >= 60) {
+        interval = parseInt(resolution) / 60 + "h";
+      } else {
+        interval = resolution + "m";
+      }
+    } else {
+      interval = resolution.toLowerCase().replace(/[a-z]\b/g, (c) => c.toLowerCase());
+    }
+
+    let urlParameters = {
+      symbol: symbolInfo.name,
+      interval: interval,
+      startTime: Math.abs(from * 1000),
+      endTime: Math.abs(to * 1000),
+      limit: 600,
+    };
+
+    const query = Object.keys(urlParameters)
+      .map((name) => `${name}=${encodeURIComponent(urlParameters[name])}`)
+      .join("&");
+
+    try {
+      const data = await makeApiRequest(`api/v3/uiKlines?${query}`);
+      if ((data.Response && data.Response === "Error") || data.length === 0) {
+        // "noData" should be set if there is no data in the requested period.
+        onHistoryCallback([], {
+          noData: true,
+        });
+        return;
+      }
+      let bars: Bar[] = [];
+      data.forEach((bar: any) => {
+        if (bar[0] >= from * 1000 && bar[0] < to * 1000) {
+          bars = [
+            ...bars,
+            {
+              time: bar[0],
+              low: bar[3],
+              high: bar[2],
+              open: bar[1],
+              close: bar[4],
+              volume: bar[5],
+            },
+          ];
+        }
+      });
+      onHistoryCallback(bars, {
+        noData: false,
+      });
+    } catch (error) {
+      console.log("[getBars]: Get error", error);
+      onErrorCallback(error);
+    }
+  };
+
+  getTimescaleMarks(
+    symbolInfo: SymbolInfo,
+    from: number,
+    to: number,
+    onDataCallback: (marks: TimescaleMark[]) => void,
+    resolution: string
+  ): void {
+    if (this.timescaleMarks.length > 0) {
+      let timescaleMarks = Object.assign([], this.timescaleMarks);
+      onDataCallback(timescaleMarks);
+    }
+  }
+
+  async getServerTime(onServertimeCallback: (time: number) => void): Promise<void> {
+    const data = await makeApiRequest(`api/v3/time`);
+    const serverTime = data.serverTime / 1000;
+    onServertimeCallback(serverTime);
+  }
+
+  subscribeBars = (
+    symbolInfo: SymbolInfo,
+    resolution: string,
+    onRealtimeCallback: (bar: Bar) => void,
+    subscribeUID: string,
+    onResetCacheNeededCallback: () => void
+  ): void => {
+    subscribeOnStream(
+      symbolInfo,
+      resolution,
+      onRealtimeCallback,
+      subscribeUID,
+      onResetCacheNeededCallback,
+      this.interval
+    );
+  };
+
+  unsubscribeBars = (subscriberUID: string): void => {
+    unsubscribeFromStream(subscriberUID);
+  };
+}

package/src/helpers.ts

@@ -0,0 +1,41 @@
+import { useEffect, useRef } from "react";
+
+
+export async function makeApiRequest(path) {
+  try {
+    const response = await fetch(`https://api.binance.com/${path}`);
+    return response.json();
+  } catch (error) {
+    throw new Error(`Binance request error: ${error.status}`);
+  }
+}
+
+export async function getAllSymbols(symbol) {
+  let newSymbols = [];
+  try {
+    const data = await makeApiRequest(`api/v3/exchangeInfo?symbol=${symbol.toUpperCase()}`);
+    data.symbols.forEach(item => {
+      if (item.status === "TRADING") {
+        newSymbols.push({
+          symbol: item.symbol,
+          full_name: `${item.baseAsset}/${item.quoteAsset}`,
+          description: `Precision: ${item.quoteAssetPrecision}`,
+          exchange: "Binance",
+          ticker: item.symbol,
+          type: "crypto",
+        });
+      }
+    });
+  } catch (e) {
+    return newSymbols
+  }
+  return newSymbols;
+}
+
+export function usePrevious(value) {
+  const ref = useRef();
+  useEffect(() => {
+    ref.current = value;
+  });
+  return ref.current;
+}

package/src/index.css

@@ -0,0 +1,5 @@
+body {
+	margin: 0;
+	padding: 0;
+	font-family: sans-serif;
+}

package/src/index.tsx

@@ -0,0 +1,10 @@
+import { createRoot } from "react-dom/client";
+import App from "./App"; // Ensure App is a default export from "./App"
+import "./index.css";
+
+const rootElement = document.getElementById("root");
+
+if (rootElement) {
+  const root = createRoot(rootElement);
+  root.render(<App />);
+}