Merge branch 'main' of http://git.wdipl.com/Siddhesh.More/rubix-explore

src/components/AmountCard/AmountCard.jsx

@@ -9,9 +9,12 @@ import {
   VStack,
 } from "@chakra-ui/react";
 import React from "react";
-import { FaFileAlt, FaShoppingCart } from "react-icons/fa";
+import { FaFileAlt, FaFileContract, FaMoneyCheckAlt, FaShoppingCart } from "react-icons/fa";
 import { FaClipboard, FaGlobe, FaWallet } from "react-icons/fa6";
-import { PiWalletFill } from "react-icons/pi";
+import { PiCircuitryFill, PiWalletFill } from "react-icons/pi";
+import { LiaFileContractSolid } from "react-icons/lia";
+import { TbTransactionDollar } from "react-icons/tb";
+import { BsRCircleFill } from "react-icons/bs";
 
 
 const AmountCard = () => {
@@ -40,7 +43,7 @@ const AmountCard = () => {
     {
       label: "Transaction",
       value: kpDetails?.data?.transactionCount,
-      icon: <FaGlobe color="white" fontSize={"20px"} />,
+      icon: <FaMoneyCheckAlt color="white" fontSize={"29px"} />,
     },
     {
       label: "DID count",
@@ -53,22 +56,22 @@ const AmountCard = () => {
     {
       label: "Total Supply",
       value: kpDetails?.data?.totalSupply,
-      icon: <FaShoppingCart color="white" fontSize={"20px"} />,
+      icon: <FaGlobe color="white" fontSize={"20px"} />,
     },
     {
       label: "Circulating Supply",
       value: kpDetails?.data?.circulatingSupply,
-      icon: <FaShoppingCart color="white" fontSize={"20px"} />,
+      icon: <PiCircuitryFill color="white" fontSize={"20px"} />,
     },
     {
       label: "Pledged RBT",
       value: kpDetails?.data?.pledgedRBT,
-      icon: <FaShoppingCart color="white" fontSize={"20px"} />,
+      icon: <BsRCircleFill color="white" fontSize={"20px"} />,
     },
     {
       label: "Number of smart contracts",
       value: kpDetails?.data?.numberContracts,
-      icon: <FaShoppingCart color="white" fontSize={"20px"} />,
+      icon: <FaFileContract color="white" fontSize={"20px"} />,
     },
   ];
 

src/components/ChartsTabs.jsx

@@ -50,11 +50,11 @@ function ChartsTabs({ selectedValue, setSelectedValue, days }) {
   }
 
   // Setting defaultValue to '24 DayusHrs'
-  const options = ["24 Hrs", `${days} Days`, "12 Months"];
+  const options = ["24 Hrs", `30 Days`, "12 Months"];
 
   const { getRootProps, getRadioProps } = useRadioGroup({
     name: "framework",
-    defaultValue: "24 Hrs", // Default tab is set to '24 Hrs'
+    defaultValue: "12 Months", // Default tab is set to '24 Hrs'
     onChange: (value) => setSelectedValue(value),
   });
 

src/components/Doughnut/LineChart.jsx

@@ -30,7 +30,6 @@ ChartJS.register(
 
 
 function formatAndSortDataByDayName(data=[]) {
-  console.log("======", data);
 
   // Create a shallow copy of the data array before sorting
   const sortedData = [...data]?.sort((a, b) => a.dayId - b.dayId);
@@ -49,7 +48,7 @@ function formatAndSortDataByDayName(data=[]) {
 
 const LineChart = () => {
   const { colorMode } = useColorMode();
-  const [selectedValue, setSelectedValue] = useState("24 Hrs");
+  const [selectedValue, setSelectedValue] = useState("12 Months");
   const [labels, setLabels] = useState([]);
   const [dataset, setDataset] = useState([]);
 
@@ -89,7 +88,7 @@ const LineChart = () => {
       setLabels(dataLableDaily);
       // Generate random data for each day
       setDataset(dataSetDaily);
-    } else if (selectedValue === `${dayjs().daysInMonth()} Days`) {
+    } else if (selectedValue === `30 Days`) {
       // Create labels for the current month (days)
       setLabels(dataLableDate);
       // Generate random data for each day
@@ -141,14 +140,57 @@ const LineChart = () => {
       },
       tooltip: {
         callbacks: {
+          // Tooltip title: show the day or month name (depending on data)
+          title: function(tooltipItems) {
+            const index = tooltipItems[0]?.dataIndex;
+            let data;
+            if (selectedValue === "24 Hrs") {
+              data = dailyData[index];
+            } else if (selectedValue === "30 Days") {
+              data = dateData?.data[index];
+            } else if (selectedValue === "12 Months") {
+              data = monthlyData[index];
+            }
+            return data?.dayName || data?.monthName || '';
+          },
+          // Show transaction count in the tooltip
           beforeLabel: function (tooltipItem) {
-            return `Transactions: $${tooltipItem.raw}`;
+            const index = tooltipItem.dataIndex;
+            let data;
+            if (selectedValue === "24 Hrs") {
+              data = dailyData[index];
+            } else if (selectedValue === "30 Days") {
+              data = dateData?.data[index];
+            } else if (selectedValue === "12 Months") {
+              data = monthlyData[index];
+            }
+            return `Transactions: ${data?.transactionCount}`;
           },
+          // Show total price in the tooltip
           label: function (tooltipItem) {
-            return `Price: $${tooltipItem.raw}`;
+            const index = tooltipItem.dataIndex;
+            let data;
+            if (selectedValue === "24 Hrs") {
+              data = dailyData[index];
+            } else if (selectedValue === "30 Days") {
+              data = dateData?.data[index];
+            } else if (selectedValue === "12 Months") {
+              data = monthlyData[index];
+            }
+            return `Price: $${data?.totalPrice}`;
           },
+          // Show gas fee in the tooltip
           afterLabel: function (tooltipItem) {
-            return `Gas Fee: $${Math.round(tooltipItem.raw * 0.05)}`;
+            const index = tooltipItem.dataIndex;
+            let data;
+            if (selectedValue === "24 Hrs") {
+              data = dailyData[index];
+            } else if (selectedValue === "30 Days") {
+              data = dateData?.data[index];
+            } else if (selectedValue === "12 Months") {
+              data = monthlyData[index];
+            }
+            return `Gas Fee: ${data?.totalGasFee}`;
           },
         },
         backgroundColor: "#fff",

src/components/LatestTransactions/LatestTransactions.jsx

@@ -18,7 +18,7 @@ import Pagination from "../Pagination";
 import GlobalStateContext from "../../Contexts/GlobalStateContext";
 import { Link, useLocation, useNavigate } from "react-router-dom";
 import ToastBox from "../ToastBox";
-import { formatRelativeDate } from "../../Constants/Constants";
+import { formatRelativeDate, formatUTCToDDMMYYHHMMSS } from "../../Constants/Constants";
 import {
   useGetTransAllQuery,
   useGetTransCountQuery,
@@ -377,7 +377,7 @@ const LatestTransactions = () => {
                       Date and Time Stamp :
                     </Text>
                     <Text color={colorMode === "light" ? "#230A79" : "#B09AFF"}>
-                      {timestamp}
+                      {formatUTCToDDMMYYHHMMSS(timestamp)}
                     </Text>
                   </Box>
                   <Box>