Moved trading view chart data to queries

package.json

@@ -35,7 +35,7 @@
     "diff-match-patch": "^1.0.5",
     "emoji-mart": "^5.5.2",
     "framer-motion": "^11.3.24",
-    "highcharts": "^11.4.5",
+    "highcharts": "^12.1.2",
     "highcharts-react-official": "^3.2.1",
     "hive-uri": "^0.2.5",
     "hivesigner": "^3.3.4",

src/api/hive.ts

@@ -64,9 +64,6 @@ export const getTradeHistory = (limit: number = 1000): Promise<OrdersDataItem[]>
     limit
   ]);
 
-export const getMarketBucketSizes = (): Promise<number[]> =>
-  client.call("condenser_api", "get_market_history_buckets", []);
-
 export const getMarketHistory = (
   seconds: number,
   startDate: Date,

src/app/market/advanced/_components/api/index.ts

@@ -1 +1,2 @@
-export * from "./trading-view-api";
+export * from "./trading-view-query";
+export * from "./market-bucket-size-query";

src/app/market/advanced/_components/api/market-bucket-size-query.ts

@@ -0,0 +1,11 @@
+import { useQuery } from "@tanstack/react-query";
+import { QueryIdentifiers } from "@/core/react-query";
+import { client } from "@/api/hive";
+
+export function useMarketBucketSizeQuery() {
+  return useQuery({
+    queryKey: [QueryIdentifiers.MARKET_BUCKET_SIZE],
+    queryFn: () =>
+      client.call("condenser_api", "get_market_history_buckets", []) as Promise<number[]>
+  });
+}

src/app/market/advanced/_components/api/trading-view-query.ts

@@ -0,0 +1,46 @@
+import moment from "moment/moment";
+import { MarketCandlestickDataItem } from "@/entities";
+import { useInfiniteQuery } from "@tanstack/react-query";
+import { QueryIdentifiers } from "@/core/react-query";
+import { getMarketHistory } from "@/api/hive";
+import { Time } from "lightweight-charts";
+
+export interface TradingViewQueryDataItem {
+  close: number;
+  open: number;
+  low: number;
+  high: number;
+  volume: number;
+  time: Time;
+}
+
+export function useTradingViewQuery(bucketSeconds: number) {
+  return useInfiniteQuery({
+    queryKey: [QueryIdentifiers.MARKET_TRADING_VIEW, bucketSeconds],
+    queryFn: async ({ pageParam: [startDate, endDate] }) => {
+      const apiData: MarketCandlestickDataItem[] = await getMarketHistory(
+        bucketSeconds,
+        startDate.toDate(),
+        endDate.toDate()
+      );
+
+      return apiData.map(({ hive, non_hive, open }) => ({
+        close: non_hive.close / hive.close,
+        open: non_hive.open / hive.open,
+        low: non_hive.low / hive.low,
+        high: non_hive.high / hive.high,
+        volume: hive.volume,
+        time: Math.floor(moment(open).toDate().getTime() / 1000) as Time
+      }));
+    },
+    initialPageParam: [
+      // Fetch at least 8 hours or given interval
+      moment().subtract(Math.max(100 * bucketSeconds, 28_800), "seconds"),
+      moment()
+    ],
+    getNextPageParam: (_, __, [prevStartDate]) => [
+      prevStartDate.clone().subtract(Math.max(100 * bucketSeconds, 28_800), "seconds"),
+      prevStartDate.subtract(bucketSeconds, "seconds")
+    ]
+  });
+}

src/app/market/advanced/_components/market-advanced-mode-widget-header.tsx

@@ -57,7 +57,7 @@ export const MarketAdvancedModeWidgetHeader = ({
         </div>
       </div>
       {settings ? (
-        <AccordionCollapse eventKey="0">
+        <AccordionCollapse overflowHidden={false} eventKey="0">
           <div className="p-0 market-advanced-mode-widget-settings">{settings}</div>
         </AccordionCollapse>
       ) : (