Feat/btc socket (#256)

* fix: pair btc * fix: parse pair
oraidex · May 2, 2024 · 38557aa · 38557aa
1 parent fc62d99
commit 38557aa
Show file tree

Hide file tree

Showing 7 changed files with 260 additions and 84 deletions.
diff --git a/packages/oraidex-common-ui/package.json b/packages/oraidex-common-ui/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@oraichain/oraidex-common-ui",
-  "version": "1.0.16",
+  "version": "1.0.17",
   "files": [
     "dist/"
   ],

diff --git a/packages/oraidex-common-ui/src/components/TVChartContainer/OdtChart.stories.tsx b/packages/oraidex-common-ui/src/components/TVChartContainer/OdtChart.stories.tsx
@@ -0,0 +1,217 @@
+import React from "react";
+import { Meta, StoryObj } from "@storybook/react";
+import TVChartContainer, { TVChartContainerProsp } from "./TVChartContainer";
+import { BASE_API_URL, BASE_SOCKET_URL } from "./helpers/requests";
+import axios from "axios";
+import { Bar } from "./helpers/types";
+
+import { USDT_CONTRACT, XOCH_CONTRACT, BTC_CONTRACT } from "@oraichain/oraidex-common";
+
+const DATA_PAIRS_ODT = [
+  {
+    id: 1,
+    symbol: "ORAI/USDT",
+    slippage: "0.0000000000000000", // TODO: remove
+    from: "orai",
+    to: USDT_CONTRACT,
+    price_decimal: 6,
+    info: "orai - " + USDT_CONTRACT,
+    route: "/ORAI_USDT"
+  },
+  {
+    id: 2,
+    symbol: "xOCH/USDT",
+    slippage: "0.0000000000000000", // TODO: remove
+    from: XOCH_CONTRACT,
+    to: USDT_CONTRACT,
+    price_decimal: 6,
+    info: `${XOCH_CONTRACT} - ${USDT_CONTRACT}`,
+    route: "/xOCH_USDT"
+  },
+  {
+    id: 4,
+    symbol: "BTC/USDT",
+    slippage: "0.0000000000000000", // TODO: remove
+    from: BTC_CONTRACT,
+    to: USDT_CONTRACT,
+    price_decimal: 6,
+    info: `${BTC_CONTRACT} - ${USDT_CONTRACT}`,
+    route: "/BTC_USDT"
+  }
+];
+
+const meta: Meta<typeof TVChartContainer> = {
+  component: TVChartContainer,
+  title: "ODT Tradingview",
+  argTypes: {}
+};
+export default meta;
+
+type Story = StoryObj<typeof TVChartContainer>;
+
+export const OraiUsdtODTChart: Story = (args: TVChartContainerProsp) => (
+  <div style={{ height: "80vh" }}>
+    <TVChartContainer {...args} />;
+  </div>
+);
+OraiUsdtODTChart.args = {
+  theme: "dark",
+  currentPair: {
+    symbol: "ORAI/USDT",
+    info: "orai - orai12hzjxfh77wl572gdzct2fxv2arxcwh6gykc7qh"
+  },
+  pairsChart: [
+    {
+      symbol: "ORAI/USDT",
+      info: "orai-orai12hzjxfh77wl572gdzct2fxv2arxcwh6gykc7qh"
+    }
+  ],
+  setChartTimeFrame: (resolution) => {
+    console.log({ resolutionUpdate: resolution });
+  },
+
+  baseUrl: BASE_API_URL.ORDERBOOK_STAGING,
+
+  fetchDataChart: async (prams: { pair: string; startTime: number; endTime: number; tf: number }): Promise<Bar[]> => {
+    const { pair, startTime, endTime, tf } = prams;
+    console.log("params", prams);
+
+    try {
+      const res = await axios.get(BASE_API_URL.ORDERBOOK_STAGING + "/v1/candles/", {
+        params: {
+          pair: pair.split("-").join(" - "),
+          startTime: Math.round(startTime / 60),
+          endTime: Math.round(endTime / 60),
+          tf: tf / 10
+        }
+      });
+
+      return [...res.data].map((i) => {
+        if (i.high > 200) {
+          i.high = i.close + 1;
+          i.open = i.close + 0.5;
+        }
+
+        return i;
+      });
+    } catch (e) {
+      console.error("GetTokenChartPrice", e);
+      return [];
+    }
+  },
+  socketConfig: {
+    wsUrl: BASE_SOCKET_URL.ORDERBOOK_STAGING
+  }
+};
+
+export const BtcUsdtODTChart: Story = (args: TVChartContainerProsp) => (
+  <div style={{ height: "80vh" }}>
+    <TVChartContainer {...args} />;
+  </div>
+);
+BtcUsdtODTChart.args = {
+  theme: "dark",
+  currentPair: {
+    symbol: "BTC/USDT",
+    info: "orai10g6frpysmdgw5tdqke47als6f97aqmr8s3cljsvjce4n5enjftcqtamzsd - orai12hzjxfh77wl572gdzct2fxv2arxcwh6gykc7qh"
+  },
+  pairsChart: [
+    {
+      symbol: "BTC/USDT",
+      info: "orai10g6frpysmdgw5tdqke47als6f97aqmr8s3cljsvjce4n5enjftcqtamzsd-orai12hzjxfh77wl572gdzct2fxv2arxcwh6gykc7qh"
+    }
+  ],
+  setChartTimeFrame: (resolution) => {
+    console.log({ resolutionUpdate: resolution });
+  },
+
+  baseUrl: BASE_API_URL.ORDERBOOK_STAGING,
+
+  fetchDataChart: async (prams: { pair: string; startTime: number; endTime: number; tf: number }): Promise<Bar[]> => {
+    const { pair, startTime, endTime, tf } = prams;
+    console.log("params", prams);
+
+    try {
+      const res = await axios.get(BASE_API_URL.ORDERBOOK_STAGING + "/v1/candles/", {
+        params: {
+          pair: pair.split("-").join(" - "),
+          startTime: Math.round(startTime / 60),
+          endTime: Math.round(endTime / 60),
+          tf: tf / 10
+        }
+      });
+
+      return [...res.data].map((i) => {
+        if (i.high > 200) {
+          i.high = i.close + 1;
+          i.open = i.close + 0.5;
+        }
+
+        return i;
+      });
+    } catch (e) {
+      console.error("GetTokenChartPrice", e);
+      return [];
+    }
+  },
+  socketConfig: {
+    wsUrl: BASE_SOCKET_URL.ORDERBOOK_STAGING,
+    pairMapping: DATA_PAIRS_ODT
+  }
+};
+
+export const XOCHUsdtODTChart: Story = (args: TVChartContainerProsp) => (
+  <div style={{ height: "80vh" }}>
+    <TVChartContainer {...args} />;
+  </div>
+);
+XOCHUsdtODTChart.args = {
+  theme: "dark",
+  currentPair: {
+    symbol: "xOCH/USDT",
+    info: "orai1lplapmgqnelqn253stz6kmvm3ulgdaytn89a8mz9y85xq8wd684s6xl3lt - orai12hzjxfh77wl572gdzct2fxv2arxcwh6gykc7qh"
+  },
+  pairsChart: [
+    {
+      symbol: "xOCH/USDT",
+      info: "orai1lplapmgqnelqn253stz6kmvm3ulgdaytn89a8mz9y85xq8wd684s6xl3lt-orai12hzjxfh77wl572gdzct2fxv2arxcwh6gykc7qh"
+    }
+  ],
+  setChartTimeFrame: (resolution) => {
+    console.log({ resolutionUpdate: resolution });
+  },
+
+  baseUrl: BASE_API_URL.ORDERBOOK_STAGING,
+
+  fetchDataChart: async (prams: { pair: string; startTime: number; endTime: number; tf: number }): Promise<Bar[]> => {
+    const { pair, startTime, endTime, tf } = prams;
+    console.log("params", prams);
+
+    try {
+      const res = await axios.get(BASE_API_URL.ORDERBOOK_STAGING + "/v1/candles/", {
+        params: {
+          pair: pair.split("-").join(" - "),
+          startTime: Math.round(startTime / 60),
+          endTime: Math.round(endTime / 60),
+          tf: tf / 10
+        }
+      });
+
+      return [...res.data].map((i) => {
+        if (i.high > 200) {
+          i.high = i.close + 1;
+          i.open = i.close + 0.5;
+        }
+
+        return i;
+      });
+    } catch (e) {
+      console.error("GetTokenChartPrice", e);
+      return [];
+    }
+  },
+  socketConfig: {
+    wsUrl: BASE_SOCKET_URL.ORDERBOOK_STAGING,
+    pairMapping: DATA_PAIRS_ODT
+  }
+};
diff --git a/packages/oraidex-common-ui/src/components/TVChartContainer/TVChartContainer.stories.tsx b/packages/oraidex-common-ui/src/components/TVChartContainer/TVChartContainer.stories.tsx
@@ -101,58 +101,3 @@ OraiUsdcChart.args = {
   baseUrl: BASE_API_URL.FUTURE
   // wsUrl: BASE_SOCKET_URL.FUTURE
 };
-
-export const OraiUsdtODTChart: Story = (args: TVChartContainerProsp) => (
-  <div style={{ height: "80vh" }}>
-    <TVChartContainer {...args} />;
-  </div>
-);
-OraiUsdtODTChart.args = {
-  theme: "dark",
-  currentPair: {
-    symbol: "ORAI/USDT",
-    info: "orai - orai12hzjxfh77wl572gdzct2fxv2arxcwh6gykc7qh"
-  },
-  pairsChart: [
-    {
-      symbol: "ORAI/USDT",
-      info: "orai-orai12hzjxfh77wl572gdzct2fxv2arxcwh6gykc7qh"
-    }
-  ],
-  setChartTimeFrame: (resolution) => {
-    console.log({ resolutionUpdate: resolution });
-  },
-
-  baseUrl: BASE_API_URL.ORDERBOOK_STAGING,
-
-  fetchDataChart: async (prams: { pair: string; startTime: number; endTime: number; tf: number }): Promise<Bar[]> => {
-    const { pair, startTime, endTime, tf } = prams;
-    console.log("paams", prams);
-
-    try {
-      const res = await axios.get(BASE_API_URL.ORDERBOOK_STAGING + "/v1/candles/", {
-        params: {
-          pair: pair.split("-").join(" - "),
-          startTime: Math.round(startTime / 60),
-          endTime: Math.round(endTime / 60),
-          tf: tf / 10
-        }
-      });
-
-      return [...res.data].map((i) => {
-        if (i.high > 200) {
-          i.high = i.close + 1;
-          i.open = i.close + 0.5;
-        }
-
-        return i;
-      });
-    } catch (e) {
-      console.error("GetTokenChartPrice", e);
-      return [];
-    }
-  },
-  socketConfig: {
-    wsUrl: BASE_SOCKET_URL.ORDERBOOK_STAGING
-  }
-};
diff --git a/packages/oraidex-common-ui/src/components/TVChartContainer/TVChartContainer.tsx b/packages/oraidex-common-ui/src/components/TVChartContainer/TVChartContainer.tsx
@@ -40,6 +40,7 @@ export type TVChartContainerProsp = {
   customCssUrl?: string;
   socketConfig?: {
     wsUrl: string;
+    pairMapping?: any[];
     reconnectAttempts?: number;
     reconnectInterval?: number;
     retryOnError?: boolean;

diff --git a/packages/oraidex-common-ui/src/components/TVChartContainer/helpers/streaming.ts b/packages/oraidex-common-ui/src/components/TVChartContainer/helpers/streaming.ts
@@ -1,15 +1,17 @@
 import { parseChannelFromPair, parseFullSymbol, roundTime } from "./utils";
 
 const channelToSubscription = new Map();
-const handleTradeEvent = (data) => {
+const handleTradeEvent = (data, pairMap) => {
   const { open, close, low, high, volume, time, pair } = data;
 
   // DEBT: update this func later to get pair denom, no need to parse
-  const channelString = parseChannelFromPair(pair);
+  const channelString = parseChannelFromPair(pair, pairMap);
   // const channelString = pair;
 
   const subscriptionItem = channelToSubscription.get(channelString);
 
+  console.log("channelString", channelString);
+
   if (subscriptionItem === undefined) {
     return;
   }

diff --git a/packages/oraidex-common-ui/src/components/TVChartContainer/helpers/useChartSocket.ts b/packages/oraidex-common-ui/src/components/TVChartContainer/helpers/useChartSocket.ts
@@ -1,4 +1,4 @@
-import { WEBSOCKET_RECONNECT_ATTEMPTS, WEBSOCKET_RECONNECT_INTERVAL } from "@oraichain/oraidex-common";
+import { PAIRS, WEBSOCKET_RECONNECT_ATTEMPTS, WEBSOCKET_RECONNECT_INTERVAL } from "@oraichain/oraidex-common";
 import { handleTradeEvent } from "./streaming";
 import { useEffect, useState } from "react";
 import { WS_URL } from "./requests";
@@ -15,7 +15,13 @@ export const useChartSocket = ({ currentPair, period, socketConfig }) => {
   const [currentData, setData] = useState(null);
   const [currentPeriod, setPeriod] = useState(period);
   const [pairActive, setPairActive] = useState(currentPair);
-  const { retryOnError = true, reconnectAttempts, reconnectInterval, wsUrl: socketUrl } = socketConfig || {};
+  const {
+    retryOnError = true,
+    reconnectAttempts,
+    reconnectInterval,
+    wsUrl: socketUrl,
+    pairMapping = PAIRS
+  } = socketConfig || {};
 
   const { lastJsonMessage, sendJsonMessage } = useWebSocket<LastJsonMessageType>(socketUrl || WS_URL, {
     onOpen: () => {
@@ -76,8 +82,9 @@ export const useChartSocket = ({ currentPair, period, socketConfig }) => {
       if (stream === `${currentPair.info}@${period}`) {
         // if (stream !== `Pong`) {
         // console.info("Data stream: ", data);
+
         setData(data);
-        handleTradeEvent(data);
+        handleTradeEvent(data, pairMapping);
       }
     }
   }, [lastJsonMessage]);