Added spot & future testnets

[dreygur]

This PR includes:

Futures testnets support
API: https://api.binance.com/api/v3/klines?
WEBSOCKET: wss://stream.binance.com:9443/ws

Spot testnet support
API: https://testnet.binance.vision/api/v3/klines?
WEBSOCKET: wss://testnet.binance.vision/ws

Two additional(optional) props included:
{Boolean} useFuturesTestnet
{Boolean} useSpotTestnet

Changes:

diff --git a/README.md b/README.md
index 3128758..6a11737 100644
--- a/README.md
+++ b/README.md
@@ -70,7 +70,7 @@ import TradeViewChart from 'react-crypto-chart';
     <td class="tg-0pky">No</td>
     <td class="tg-0pky">Object<br><a href="https://github.com/justinkx/react-crypto-chart/blob/readme/TYPES.md#candlestick-config-type" target="_blank" rel="noopener noreferrer">Candlestick Config type</a></td>
     <td class="tg-0pky">
-    <pre>
+    <pre> 
     {
         upColor: "#00c176",
         downColor: "#cf304a",
@@ -153,22 +153,6 @@ import TradeViewChart from 'react-crypto-chart';
     }
   </pre></td>
   </tr>
-  <tr>
-    <td class="tg-0pky">useFuturesTestnet</td>
-    <td class="tg-0pky">No</td>
-    <td class="tg-0pky">Boolean</td>
-    <td class="tg-0pky">
-    <pre>false</pre>
-    </td>
-  </tr>
-   <tr>
-    <td class="tg-0pky">useSpotTestnet</td>
-    <td class="tg-0pky">No</td>
-    <td class="tg-0pky">Boolean</td>
-    <td class="tg-0pky">
-    <pre>false</pre>
-    </td>
-  </tr>
 </tbody>
 </table>
 
diff --git a/package.json b/package.json
index 2020a5f..9d8eda2 100644
--- a/package.json
+++ b/package.json
@@ -6,13 +6,6 @@
   "module": "./lib/esm/index.js",
   "types": "./lib/esm/index.d.ts",
   "author": "Justin K Xavier",
-  "contributors": [
-    {
-      "name": "Rakibul Yeasin",
-      "email": "ryeasin03@gmail.com",
-      "url": "https://dreygur.js.org/"
-    }
-  ],
   "repository": {
     "url": "https://github.com/justinkx/react-crypto-chart.git"
   },
@@ -26,15 +19,17 @@
     "/lib"
   ],
   "devDependencies": {
-    "@types/react": "^18.0.28",
-    "@types/react-dom": "^18.0.11",
+    "@types/react": "^17.0.11",
+    "@types/react-dom": "^17.0.7",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
     "typescript": "^4.3.2"
   },
+  "peerDependencies": {
+    "react": "^16.8.0",
+    "react-dom": "^16.8.0"
+  },
   "dependencies": {
     "lightweight-charts": "^3.8.0"
-  },
-  "peerDependencies": {
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0"
   }
 }
diff --git a/src/TradeView.tsx b/src/TradeView.tsx
index fbe7bd2..8eb2de0 100644
--- a/src/TradeView.tsx
+++ b/src/TradeView.tsx
@@ -23,7 +23,8 @@ const TradeView: React.FC<TradeViewProps> = ({
   const volumeSeries = useRef<ChartSeries | any>();
 
   const setInitialData = useCallback(() => {
-    candleSeries.current = chart?.current?.addCandlestickSeries(candleStickConfig);
+    candleSeries.current =
+      chart?.current?.addCandlestickSeries(candleStickConfig);
     candleSeries?.current.setData(initialChartData);
     volumeSeries.current = chart.current.addHistogramSeries(histogramConfig);
     volumeSeries?.current?.setData(initialChartData);
@@ -71,7 +72,6 @@ const TradeView: React.FC<TradeViewProps> = ({
 
     return () => resizeObserver.current.disconnect();
   }, []);
-
   return (
     <div
       ref={chartContainerRef}
diff --git a/src/index.tsx b/src/index.tsx
index 2e4012e..5c5d52c 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -1,38 +1,43 @@
-import React, { memo, useEffect, useState } from 'react';
+import React, { memo, useEffect, useCallback, useState } from 'react';
 
 import { fetchCandleStickData } from './utils/fetchService';
 import TradeView from './TradeView';
-import { getWebsocketUrl } from './utils/urls';
+import { WS_URL } from './utils/constants';
 import { candleSocketAdaptor } from './utils/adaptor';
 import {
   condleStickDefaultConfig,
   histogramDefaultConfig,
   defaultChartLayout,
 } from './utils/constants';
-import { Props, CandleStickSocketData, CandleStickAdaptorResult } from './utils/types';
+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,
   containerStyle,
 }) => {
-  const [candleStickData, setCandleData] = useState<CandleStickAdaptorResult[] | null>(null);
-  const [updatedata, setUpdateData] = useState<CandleStickSocketData | null>(null);
+  const [candleStickData, setCandleData] = useState<[] | null>(null);
+  const [updatedata, setUpdateData] = useState<CandleStickSocketData | null>(
+    null
+  );
+
+  const fetchCandleData = useCallback(async () => {
+    const candleData = await fetchCandleStickData(pair);
+    setCandleData(candleData);
+  }, [pair]);
 
   useEffect(() => {
-    fetchCandleStickData(pair, interval, useFuturesTestnet, useSpotTestnet)
-      .then(res => setCandleData(res))
-      .catch(err => console.log(err));
+    fetchCandleData();
+  }, [fetchCandleData]);
 
+  useEffect(() => {
     const ws = new WebSocket(
-      `${getWebsocketUrl({ useFuturesTestnet, useSpotTestnet })}/${pair.toLocaleLowerCase()}@kline_${interval}`
+      `${WS_URL}/${pair.toLocaleLowerCase()}@kline_${interval}`
     );
-
+    // ws.onopen = () => console.log("open");
     ws.onmessage = (e) => {
       const message = JSON.parse(e.data);
       const parsedMessage = candleSocketAdaptor(message);
@@ -41,12 +46,11 @@ const TradeViewChart: React.FC<Props> = ({
     return () => {
       ws.close();
     };
-  }, [pair, interval, useFuturesTestnet, useSpotTestnet]);
+  }, [pair, interval]);
 
   if (!candleStickData) {
     return <div className="loader" />;
   }
-
   return (
     <TradeView
       updatedata={updatedata}
diff --git a/src/utils/adaptor.ts b/src/utils/adaptor.js
similarity index 61%
rename from src/utils/adaptor.ts
rename to src/utils/adaptor.js
index f7c41cc..c8d9502 100644
--- a/src/utils/adaptor.ts
+++ b/src/utils/adaptor.js
@@ -1,13 +1,17 @@
-import { CandleStickAdaptorResult } from "./types";
-
-export const candleStickAdaptor = (data: any): CandleStickAdaptorResult => {
+export const candleStickAdaptor = (data) => {
   const [
     openTime,
     open,
     high,
     low,
     close,
-    volume
+    volume,
+    closeTime,
+    quoteAssetVolume,
+    numberOfTrades,
+    takerBuyBaseAssetVolume,
+    takerBuyQuotessetVolume,
+    ignore,
   ] = data;
   return {
     time: openTime / 1000,
@@ -17,10 +21,17 @@ export const candleStickAdaptor = (data: any): CandleStickAdaptorResult => {
     close: parseFloat(close),
     value: parseFloat(volume),
     color: open < close ? "#005a40" : "#82112b",
+
+    // closeTime,
+    // quoteAssetVolume,
+    // numberOfTrades,
+    // takerBuyBaseAssetVolume,
+    // takerBuyQuotessetVolume,
+    // ignore,
   };
 };
 
-export const candleSocketAdaptor = (data: any) => {
+export const candleSocketAdaptor = (data) => {
   const {
     k: { T, o, c, h, l, v, V },
   } = data;
diff --git a/src/utils/candleStickService.ts b/src/utils/candleStickService.js
similarity index 61%
rename from src/utils/candleStickService.ts
rename to src/utils/candleStickService.js
index 08e8bfe..ae6a976 100644
--- a/src/utils/candleStickService.ts
+++ b/src/utils/candleStickService.js
@@ -1,8 +1,7 @@
 import { candleStickAdaptor } from "./adaptor";
-import { CandleStickAdaptorResult } from "./types";
 
 export const parseCandleStickData = (candleArray = []) => {
-  const transformedData = candleArray.reduce((accu: CandleStickAdaptorResult[], curr) => {
+  const transformedData = candleArray.reduce((accu, curr) => {
     const candle = candleStickAdaptor(curr);
     accu.push(candle);
     return accu;
diff --git a/src/utils/constants.ts b/src/utils/constants.js
similarity index 100%
rename from src/utils/constants.ts
rename to src/utils/constants.js
diff --git a/src/utils/fetchService.ts b/src/utils/fetchService.js
similarity index 53%
rename from src/utils/fetchService.ts
rename to src/utils/fetchService.js
index a035bd2..2ae791a 100644
--- a/src/utils/fetchService.ts
+++ b/src/utils/fetchService.js
@@ -1,13 +1,11 @@
-import { getBaseUrl } from "./urls";
+import { BASE_URL } from "./constants";
 import { parseCandleStickData } from "./candleStickService";
 
 export const fetchCandleStickData = async (
   symbol = "BTCBUSD",
-  interval = "1m",
-  useFuturesTestnet = false,
-  useSpotTestnet = false,
+  interval = "1m"
 ) => {
-  const url = `${getBaseUrl({ useFuturesTestnet, useSpotTestnet })}symbol=${symbol}&interval=${interval}`;
+  const url = `${BASE_URL}symbol=${symbol}&interval=${interval}`;
   const result = await fetch(url);
   const data = await result.json();
   return parseCandleStickData(data);
diff --git a/src/utils/types.ts b/src/utils/types.ts
index 7a58ace..18a6860 100644
--- a/src/utils/types.ts
+++ b/src/utils/types.ts
@@ -1,15 +1,5 @@
 import { CrosshairMode, LineStyle } from 'lightweight-charts';
 
-export interface CandleStickAdaptorResult {
-  time: number;
-  open: number;
-  high: number;
-  low: number;
-  close: number;
-  value: number;
-  color: string;
-}
-
 export interface CandleStickSocketData {
   open: number;
   high: number;
@@ -20,7 +10,7 @@ export interface CandleStickSocketData {
   color: string;
 }
 export interface TradeViewProps {
-  initialChartData: CandleStickAdaptorResult[];
+  initialChartData: [];
   updatedata: CandleStickSocketData | null;
   candleStickConfig: CandleStickConfig;
   histogramConfig: HistogramConfig;
@@ -62,12 +52,10 @@ export interface TradeViewChart {
 }
 export interface Props {
   pair: string;
-  interval?: string;
-  candleStickConfig?: CandleStickConfig;
-  histogramConfig?: HistogramConfig;
-  chartLayout?: DeffaultChartLayout;
-  useFuturesTestnet?: boolean;
-  useSpotTestnet?: boolean;
+  interval: string;
+  candleStickConfig: CandleStickConfig;
+  histogramConfig: HistogramConfig;
+  chartLayout: DeffaultChartLayout;
   containerStyle?: {
     [x: string]: any;
   };
diff --git a/src/utils/urls.ts b/src/utils/urls.ts
deleted file mode 100644
index e13b135..0000000
--- a/src/utils/urls.ts
+++ /dev/null
@@ -1,34 +0,0 @@
-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, useSpotTestnet }: { 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, useSpotTestnet }: { useFuturesTestnet?: boolean, useSpotTestnet?: boolean }): string {
-  if (useFuturesTestnet && !useSpotTestnet) {
-    return url.future.ws;
-  }
-  if (!useFuturesTestnet && useSpotTestnet) {
-    return url.spot.ws;
-  }
-  return url.main.ws;
-}
\ No newline at end of file
diff --git a/tsconfig.json b/tsconfig.json
index c04e3cb..7d2ffa6 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,33 +1,33 @@
 {
-  "compilerOptions": {
-    "outDir": "lib/esm",
-    "module": "esnext",
-    "target": "es5",
-    "lib": [
-      "dom",
-      "dom.iterable",
-      "esnext"
+    "compilerOptions": {
+        "outDir": "lib/esm",
+        "module": "esnext",
+        "target": "es5",
+        "lib": [
+            "es6",
+            "dom",
+            "es2016",
+            "es2017"
+        ],
+        "jsx": "react",
+        "declaration": true,
+        "moduleResolution": "node",
+        "noUnusedLocals": true,
+        "noUnusedParameters": true,
+        "esModuleInterop": true,
+        "noImplicitReturns": true,
+        "noImplicitThis": true,
+        "noImplicitAny": true,
+        "strictNullChecks": true,
+        "suppressImplicitAnyIndexErrors": true,
+        "allowSyntheticDefaultImports": true,
+        "allowJs": true
+    },
+    "include": [
+        "src"
     ],
-    "jsx": "react-jsx",
-    "declaration": true,
-    "moduleResolution": "node",
-    "noUnusedLocals": true,
-    "noUnusedParameters": true,
-    "esModuleInterop": true,
-    "noImplicitReturns": true,
-    "noImplicitThis": true,
-    "noImplicitAny": true,
-    "strictNullChecks": true,
-    "suppressImplicitAnyIndexErrors": true,
-    "allowSyntheticDefaultImports": true,
-    "allowJs": true,
-    "strict": true
-  },
-  "include": [
-    "src"
-  ],
-  "exclude": [
-    "node_modules",
-    "lib"
-  ]
-}
+    "exclude": [
+        "node_modules",
+        "lib"
+    ]
+}
\ No newline at end of file