fix: update ws chart

packages/oraidex-common-ui/package.json

@@ -14,12 +14,14 @@
   },
   "license": "MIT",
   "dependencies": {
+    "@sentry/react": "^7.99.0",
     "axios": "^0.26.1",
     "axios-extensions": "^3.1.3",
     "date-fns": "^3.2.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-use": "^17.4.0"
+    "react-use": "^17.4.0",
+    "react-use-websocket": "^4.5.0"
   },
   "devDependencies": {
     "@storybook/addon-essentials": "7.5.3",

packages/oraidex-common-ui/src/components/TVChartContainer/helpers/constants.ts

@@ -9,7 +9,7 @@ export const SUPPORTED_RESOLUTIONS = {
   360: "6h",
   480: "8h",
   1440: "1d"
-}
+};
 
 export const FAVORITES_INTERVAL = ["5", "15", "60", "240", "1440"];
 
@@ -29,3 +29,5 @@ export const CHART_PERIODS = {
 export const LAST_BAR_REFRESH_INTERVAL = 15000; // 15 seconds
 export const TV_CHART_RELOAD_INTERVAL = 15 * 60 * 1000; // 15 minutes
 export const DEFAULT_LIBRARY_URL = "https://chart.oraidex.io/charting_library.standalone.js";
+
+export const EVENT_CHART_SOCKET = "ohlcv";

packages/oraidex-common-ui/src/components/TVChartContainer/helpers/useChartSocket.ts

@@ -1,28 +1,50 @@
+import { WEBSOCKET_RECONNECT_ATTEMPTS, WEBSOCKET_RECONNECT_INTERVAL } from "@oraichain/oraidex-common";
 import { handleTradeEvent } from "./streaming";
 import { useEffect, useState } from "react";
 import { WS_URL } from "./requests";
+import * as Sentry from "@sentry/react";
+import useWebSocket from "react-use-websocket";
+import { EVENT_CHART_SOCKET } from "./constants";
+
+export type LastJsonMessageType = {
+  data: any;
+  event: string;
+};
 
 export const useChartSocket = (currentPair, socketUrl) => {
   const [data, setData] = useState([]);
 
+  const { lastJsonMessage } = useWebSocket<LastJsonMessageType>(socketUrl || WS_URL, {
+    onOpen: () => {},
+    onClose: () => {
+      console.info("useChartSocket: WebSocket connection closed.");
+    },
+    onReconnectStop(numAttempts) {
+      if (numAttempts === WEBSOCKET_RECONNECT_ATTEMPTS)
+        console.info("useChartSocket: Reconnection reaches above limit. Unsubscribe to all!");
+    },
+    shouldReconnect: () => true,
+    onError: (error) => {
+      console.error("useChartSocket: Have something went wrong with connection.");
+      Sentry.captureException(`useChartSocket error with msg - ${error}`);
+    },
+    reconnectAttempts: WEBSOCKET_RECONNECT_ATTEMPTS,
+    reconnectInterval: WEBSOCKET_RECONNECT_INTERVAL
+  });
+
   useEffect(() => {
-    const ws = new WebSocket(socketUrl || WS_URL);
-    ws.onmessage = (message) => {
-      const payload = JSON.parse(message.data);
-      console.info("[socket] Message:", payload);
-      if (payload.event === "spot") {
-        setData(payload.data);
+    if (lastJsonMessage && lastJsonMessage.data) {
+      const { data = [], event } = lastJsonMessage || {};
 
-        for (const ohlcv of payload.data) {
+      if (event === EVENT_CHART_SOCKET) {
+        setData(data);
+
+        for (const ohlcv of data) {
           handleTradeEvent(ohlcv);
         }
       }
-    };
-
-    return () => {
-      ws.close();
-    };
-  }, [currentPair, socketUrl]);
+    }
+  }, [lastJsonMessage]);
 
   return { currentPair, data };
 };