Lbudginas/#493 hive price chart

#493 (closed)

• Add HIVE price history chart to main page using https://developers.hive.io/apidefinitions/#market_history_api.get_market_history API
• Average daily price of HIVE was calculated by taking hive and non_hive volume into equation instead of close price, because it should give more accurate average price.
• Price is shown for last 30 days with interval of 1 day or 86400 seconds from current time.
• Min and Max values are calculated in a period of 30 days.

components/home/HeadBlockCard.tsx

@@ -17,6 +17,7 @@ import { getBlockDifference } from "./SyncInfo";
 import { Toggle } from "../ui/toggle";
 import { Card, CardContent, CardHeader } from "../ui/card";
 import CurrentBlockCard from "./CurrentBlockCard";
+import HeadBlockHiveChartCard from "./HeadBlockHiveChartCard";
 
 interface HeadBlockCardProps {
   headBlockCardData?: Explorer.HeadBlockCardData | any;
@@ -61,6 +62,7 @@ const HeadBlockCard: React.FC<HeadBlockCardProps> = ({
     timeCard: true,
     supplyCard: true,
     hiveParamsCard: true,
+    hiveChart: false,
   });
   const { settings, setSettings } = useUserSettingsContext();
 
@@ -84,6 +86,13 @@ const HeadBlockCard: React.FC<HeadBlockCardProps> = ({
     });
   };
 
+  const handleHideHiveChart = () => {
+    setHiddenPropertiesByCard({
+      ...hiddenPropertiesByCard,
+      hiveChart: !hiddenPropertiesByCard.hiveChart,
+    });
+  };
+
   const {
     explorerBlockNumber,
     hiveBlockNumber,
@@ -256,6 +265,14 @@ const HeadBlockCard: React.FC<HeadBlockCardProps> = ({
       </CardHeader>
 
       <CardContent className="p-4 space-y-4">
+        {/* Last Block Information */}
+        <CurrentBlockCard
+          blockDetails={blockDetails}
+          transactionCount={transactionCount}
+          opcount={opcount}
+          timeDifferenceInSeconds={timeDifferenceInSeconds}
+          liveBlockNumber={liveBlockNumber}
+        />
         {/* Other Information*/}
         <div className="data-box">
           <div>
@@ -265,16 +282,14 @@ const HeadBlockCard: React.FC<HeadBlockCardProps> = ({
             <span>Vests To Hive Ratio:</span> {liveVestsToHiveRatio} VESTS
           </div>
         </div>
-        {/* Last Block Information */}
-        <CurrentBlockCard
-          blockDetails={blockDetails}
-          transactionCount={transactionCount}
-          opcount={opcount}
-          timeDifferenceInSeconds={timeDifferenceInSeconds}
-          liveBlockNumber={liveBlockNumber}
-        />
 
         <div>
+          <HeadBlockHiveChartCard
+            header="Hive Price Chart"
+            isParamsHidden={hiddenPropertiesByCard.hiveChart}
+            handleHideParams={handleHideHiveChart}
+            isLoading={isBlockCardLoading}
+          />
           <HeadBlockPropertyCard
             parameters={fundAndSupplyParameters}
             header="Fund and Supply"