components/home/MarketHistoryChart.tsx

+import {
+  LineChart,
+  Line,
+  XAxis,
+  YAxis,
+  Tooltip,
+  ResponsiveContainer,
+  Legend,
+} from "recharts";
+import Hive from "@/types/Hive";
+import moment from "moment";
+import { useHiveChainContext } from "@/contexts/HiveChainContext";
+import { Card, CardContent, CardHeader } from "../ui/card";
+import { Loader2 } from "lucide-react";
+import { colorMap } from "../balanceHistory/BalanceHistoryChart";
+
+const CustomTooltip = ({
+  active,
+  payload,
+}: {
+  active?: boolean;
+  payload?: any[];
+}) => {
+  if (active && payload && payload.length) {
+    return (
+      <div className="bg-buttonHover text-text p-2 rounded-xl">
+        {payload.map(({ payload: { date, avgPrice, volume } }) => {
+          return (
+            <div key={date}>
+              <p>{`Date: ${date}`}</p>
+              <p>{`Average Price: $${avgPrice}`}</p>
+              <p>{`Volume: ${volume.toLocaleString("en-US")} HIVE`}</p>
+            </div>
+          );
+        })}
+      </div>
+    );
+  }
+
+  return null;
+};
+
+// Using volume to calculate the average daily price of HIVE
+const calculateAvgHivePrice = (
+  hive: Hive.MarketData,
+  nonHive: Hive.MarketData
+) => {
+  const hiveVolume = hive.volume;
+  const nonHiveVolume = nonHive.volume;
+
+  return (nonHiveVolume / hiveVolume).toFixed(4);
+};
+
+interface MarketChartProps {
+  data: Hive.MarketHistory | undefined;
+  isLoading: boolean;
+  strokeColor: string;
+}
+interface ChartData {
+  date: string;
+  avgPrice: string;
+  volume: number;
+}
+
+const MarketHistoryChart: React.FC<MarketChartProps> = ({
+  data,
+  isLoading,
+  strokeColor,
+}) => {
+  const { hiveChain } = useHiveChainContext();
+
+  if (!data || !hiveChain) return;
+
+  if (isLoading) {
+    return (
+      <div className="flex justify-center items-center">
+        <Loader2 className="animate-spin mt-1 h-16 w-10 ml-10 dark:text-white" />
+      </div>
+    );
+  }
+
+  const chartData = data.buckets.map((bucket) => {
+    const { hive, non_hive } = bucket;
+    const hiveAveragePrice = calculateAvgHivePrice(hive, non_hive);
+
+    return {
+      date: moment(bucket.open).format("MMM D"),
+      avgPrice: hiveAveragePrice,
+      volume: bucket.hive.volume,
+    };
+  });
+
+  const lastHivePrice = chartData[chartData.length - 1].avgPrice;
+
+  const minValue = Math.min(
+    ...chartData.map((d: ChartData) => parseFloat(d.avgPrice))
+  );
+  const maxValue = Math.max(
+    ...chartData.map((d: ChartData) => parseFloat(d.avgPrice))
+  );
+
+  return (
+    <Card className="mb-3">
+      <CardHeader className="flex justify-between items-center  px-1 py-3">
+        <h2 className="text-lg font-semibold">Hive Price Chart</h2>
+      </CardHeader>
+      <CardContent>
+        <ResponsiveContainer
+          width="100%"
+          height={300}
+        >
+          <LineChart data={chartData}>
+            <XAxis
+              dataKey="date"
+              stroke={strokeColor}
+            />
+            <YAxis
+              dataKey="avgPrice"
+              domain={[minValue, maxValue]}
+              stroke={strokeColor}
+            />
+            <Tooltip content={<CustomTooltip />} />
+            <Legend
+              verticalAlign="top"
+              height={36}
+            />
+            <Line
+              name={`Hive Price: $${lastHivePrice}`}
+              type="monotone"
+              dataKey="avgPrice"
+              stroke={colorMap.HIVE}
+              dot={false}
+              strokeWidth={2}
+            />
+          </LineChart>
+        </ResponsiveContainer>
+      </CardContent>
+    </Card>
+  );
+};
+
+export default MarketHistoryChart;

hooks/common/useMarketHistory.tsx

+import { useQuery, UseQueryResult } from "@tanstack/react-query";
+import fetchingService from "@/services/FetchingService";
+import Hive from "@/types/Hive";
+
+const useMarketHistory = (
+  bucketSeconds: number,
+  start: string,
+  end: string
+) => {
+  const {
+    data: marketHistory,
+    isLoading: isMarketHistoryLoading,
+    isError: isMarketHistoryError,
+  }: UseQueryResult<Hive.MarketHistory> = useQuery({
+    queryKey: ["account_details", bucketSeconds, start, end],
+    queryFn: () => fetchingService.getMarketHistory(bucketSeconds, start, end),
+    refetchOnWindowFocus: false,
+  });
+
+  return {
+    marketHistory,
+    isMarketHistoryLoading,
+    isMarketHistoryError,
+  };
+};
+
+export default useMarketHistory;

services/FetchingService.ts

@@ -39,6 +39,12 @@ type ExplorerNodeApi = {
       Hive.HivePosts
     >;
   };
+  market_history_api: {
+    get_market_history: TWaxApiRequest<
+      { bucket_seconds: number; start: string; end: string },
+      Hive.MarketHistory[]
+    >;
+  };
 };
 
 class FetchingService {
@@ -446,25 +452,39 @@ class FetchingService {
     });
   }
 
-
   async geAccountAggregatedtBalanceHistory(
     accountName: string,
     coinType: string,
-    granularity : "daily"|"monthly"|"yearly",
+    granularity: "daily" | "monthly" | "yearly",
     direction: "asc" | "desc",
     fromBlock?: Date | number | undefined,
     toBlock?: Date | number | undefined
   ): Promise<Hive.AccountAggregatedBalanceHistoryResponse> {
-    return await this.extendedHiveChain!.restApi["balance-api"].aggregatedHistory({
+    return await this.extendedHiveChain!.restApi[
+      "balance-api"
+    ].aggregatedHistory({
       accountName,
       "coin-type": coinType,
-      "granularity":granularity,
+      granularity: granularity,
       direction: direction,
       "from-block": fromBlock,
       "to-block": toBlock,
     });
   }
 
+  async getMarketHistory(
+    bucketSeconds: number,
+    start: string,
+    end: string
+  ): Promise<Hive.MarketHistory[]> {
+    return await this.extendedHiveChain!.api.market_history_api.get_market_history(
+      {
+        bucket_seconds: bucketSeconds,
+        start,
+        end,
+      }
+    );
+  }
 }
 
 const fetchingService = new FetchingService();

types/Hive.ts

@@ -789,7 +789,7 @@ namespace Hive {
     prev_balance!: number;
     min_balance!: number;
     max_balance!: number;
-    date!:Date;
+    date!: Date;
   }
 
   export class Delegation {
@@ -811,6 +811,32 @@ namespace Hive {
     total_pages!: number;
     operations_result!: TwoDirectionDelegations[];
   }
+
+  export class MarketHistory {
+    buckets!: MarketBucket[];
+  }
+
+  export class MarketBucket {
+    id!: number;
+    open!: string;
+    seconds!: number;
+    hive!: MarketData;
+    symbol!: MarketSymbol;
+    non_hive!: MarketData;
+  }
+
+  export class MarketData {
+    high!: number;
+    low!: number;
+    open!: number;
+    close!: number;
+    volume!: number;
+  }
+
+  export class MarketSymbol {
+    nai!: string;
+    precision!: number;
+  }
 }
 
 export default Hive;