Feat: Added spot & future testnet

src/index.tsx

@@ -2,7 +2,7 @@ import React, { memo, useEffect, useCallback, useState } from 'react';
 
 import { fetchCandleStickData } from './utils/fetchService';
 import TradeView from './TradeView';
-import { WS_URL } from './utils/constants';
+import { getWebsocketUrl } from './utils/urls';
 import { candleSocketAdaptor } from './utils/adaptor';
 import {
   condleStickDefaultConfig,
@@ -14,6 +14,8 @@ import { Props, CandleStickSocketData } from './utils/types';
 const TradeViewChart: React.FC<Props> = ({
   pair = 'BTCBUSD',
   interval = '1m',
+  useFuturesTestnet = false,
+  useSpotTestnet = false,
   candleStickConfig = condleStickDefaultConfig,
   histogramConfig = histogramDefaultConfig,
   chartLayout = defaultChartLayout,
@@ -25,17 +27,17 @@ const TradeViewChart: React.FC<Props> = ({
   );
 
   const fetchCandleData = useCallback(async () => {
-    const candleData = await fetchCandleStickData(pair);
+    const candleData = await fetchCandleStickData(pair, interval, useFuturesTestnet, useSpotTestnet);
     setCandleData(candleData);
-  }, [pair]);
+  }, [pair, useFuturesTestnet, useSpotTestnet]);
 
   useEffect(() => {
     fetchCandleData();
   }, [fetchCandleData]);
 
   useEffect(() => {
     const ws = new WebSocket(
-      `${WS_URL}/${pair.toLocaleLowerCase()}@kline_${interval}`
+      `${getWebsocketUrl(useFuturesTestnet, useSpotTestnet)}/${pair.toLocaleLowerCase()}@kline_${interval}`
     );
     // ws.onopen = () => console.log("open");
     ws.onmessage = (e) => {

src/utils/fetchService.js

@@ -1,11 +1,13 @@
-import { BASE_URL } from "./constants";
+import { getBaseUrl } from "./urls";
 import { parseCandleStickData } from "./candleStickService";
 
 export const fetchCandleStickData = async (
   symbol = "BTCBUSD",
-  interval = "1m"
+  interval = "1m",
+  useFuturesTestnet,
+  useSpotTestnet,
 ) => {
-  const url = `${BASE_URL}symbol=${symbol}&interval=${interval}`;
+  const url = `${getBaseUrl(useFuturesTestnet, useSpotTestnet)}symbol=${symbol}&interval=${interval}`;
   const result = await fetch(url);
   const data = await result.json();
   return parseCandleStickData(data);

src/utils/types.ts

@@ -56,6 +56,8 @@ export interface Props {
   candleStickConfig: CandleStickConfig;
   histogramConfig: HistogramConfig;
   chartLayout: DeffaultChartLayout;
+  useFuturesTestnet?: boolean;
+  useSpotTestnet?: boolean;
   containerStyle?: {
     [x: string]: any;
   };

src/utils/urls.ts

@@ -0,0 +1,34 @@
+const url: {[key:string]:{[key:string]:string} }   = {
+    main: {
+        base: "https://api.binance.com/api/v3/klines?",
+        ws: "wss://stream.binance.com:9443/ws"
+    },
+    future: {
+        base: "https://testnet.binancefuture.com/fapi/v1/klines?",
+        ws: "wss://stream.binancefuture.com/ws"
+    },
+    spot: {
+        base: "https://testnet.binance.vision/api/v3/klines?",
+        ws: "wss://testnet.binance.vision/ws"
+    }
+};
+
+export function getBaseUrl(useFuturesTestnet: boolean, useSpotTestnet: boolean): string {
+    if (useFuturesTestnet && !useSpotTestnet) {
+        return url.future.base;
+    }
+    if (!useFuturesTestnet && useSpotTestnet) {
+        return url.spot.base;
+    }
+    return url.main.base;
+}
+
+export function getWebsocketUrl(useFuturesTestnet: boolean, useSpotTestnet: boolean): string {
+    if (useFuturesTestnet && !useSpotTestnet) {
+        return url.future.ws;
+    }
+    if (!useFuturesTestnet && useSpotTestnet) {
+        return url.spot.ws;
+    }
+    return url.main.ws;
+}