updated

src/Services/api.service.js

@@ -17,6 +17,14 @@ export const rubix = createApi({
   ],
   endpoints: (builder) => ({
 
+
+
+
+    getKPIDetails: builder.query({
+      query: () => `Analytics/GetKPIDetails`,
+      providesTags: ["getKPIDetails"],
+    }),
+
     getTransCount: builder.query({
       query: () => `Analytics/Transactions/GetCount`,
       providesTags: ["getTransCount"],
@@ -90,6 +98,7 @@ export const rubix = createApi({
   }),
 });
 export const {
+  useGetKPIDetailsQuery,
   useGetTransCountQuery,
   useGetTransAllQuery,
   useGetTransByIdQuery,

src/components/AmountCard/AmountCard.jsx

@@ -4,80 +4,85 @@ import {
   Grid,
   GridItem,
   HStack,
+  Skeleton,
+  Spinner,
   Text,
   useColorMode,
   VStack,
 } from "@chakra-ui/react";
-import React from "react";
+import React, { useEffect, useState } from "react";
 import { FaFileAlt, FaFileContract, FaMoneyCheckAlt, FaShoppingCart } from "react-icons/fa";
 import { FaClipboard, FaGlobe, FaWallet } from "react-icons/fa6";
 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";
+import { useGetKPIDetailsQuery } from "../../Services/api.service";
 
 
 const AmountCard = () => {
   const { colorMode} = useColorMode();
+  const [ kpDetails, setKpDetails ] = useState(null)
+
+
+
+  const {
+    data,
+    isLoading,
+  } = useGetKPIDetailsQuery()
+
+  useEffect(() => {
+    setKpDetails(data?.data)
+  }, [data])
+  
 
-  const kpDetails = {
-    "status": true,
-    "data": {
-      "transactionCount": "25998",
-      "didCount": "309927",
-      "totalSupply": "51,400,000",
-      "circulatingSupply": "91848",
-      "rbtPrice": "223.17",
-      "pledgedRBT": "0",
-      "numberContracts": "0"
-    },
-    "message": null
-  }
 
   const statsData = [
     {
       label: "RBT Price",
-      value: kpDetails?.data?.rbtPrice,
+      value: kpDetails?.rbtPrice,
       icon: <FaWallet color="white" fontSize={"20px"} />,
     },
     {
       label: "Transaction",
-      value: kpDetails?.data?.transactionCount,
+      value: kpDetails?.transactionCount,
       icon: <FaMoneyCheckAlt color="white" fontSize={"29px"} />,
     },
     {
       label: "DID count",
-      value: kpDetails?.data?.didCount,
+      value: kpDetails?.didCount,
       icon: <FaFileAlt color="white" fontSize={"20px"} />,
     },
     {
       label: "Total Supply",
-      value: kpDetails?.data?.totalSupply,
+      value: kpDetails?.totalSupply,
       icon: <FaGlobe color="white" fontSize={"20px"} />,
       display: { base: "block", md: "none" }, // Hidden on small, shown on medium and up
     },
   ];
+  console.log(Number(kpDetails?.tvL_RBT).toFixed(3)); // Using Number()
+
 
   const statsDataFour = [
     {
       label: "Total Supply",
-      value: kpDetails?.data?.totalSupply,
+      value: kpDetails?.totalSupply,
       icon: <FaGlobe color="white" fontSize={"20px"} />,
       display: { base: "none", md: "block" }, // Hidden on small, shown on medium and up
     },
     {
       label: "Circulating Supply",
-      value: kpDetails?.data?.circulatingSupply,
+      value: kpDetails?.circulatingSupply,
       icon: <PiCircuitryFill color="white" fontSize={"20px"} />,
     },
     {
-      label: "Pledged RBT",
-      value: kpDetails?.data?.pledgedRBT,
+      label: "Total Value Locked (TVL)",
+      value: Number(kpDetails?.tvL_RBT).toFixed(3),
       icon: <BsRCircleFill color="white" fontSize={"20px"} />,
     },
     {
       label: "Number of smart contracts",
-      value: kpDetails?.data?.numberContracts,
+      value: kpDetails?.numberContracts,
       icon: <FaFileContract color="white" fontSize={"20px"} />,
     },
   ];
@@ -123,7 +128,7 @@ const AmountCard = () => {
                     fontSize={"sm"}
                     color={colorMode === "light" ? "#230A79" : "#fff"}
                   >
-                    {item.value}
+                    {isLoading ? <Spinner size='xs' />:item.value}
                   </Text>
                 </Box>
                 <Box
@@ -181,7 +186,7 @@ const AmountCard = () => {
                     fontWeight={600}
                     color={colorMode === "light" ? "#230A79" : "#fff"}
                   >
-                    {item.value}
+                  {isLoading ? <Spinner size='xs' />:item.value}
                   </Text>
                 </Box>
                 <Box

src/components/Doughnut/LineChart.jsx

@@ -230,6 +230,8 @@ const LineChart = () => {
     },
   };
 
+  console.log(data);
+
 
   return (
     <>

src/pages/MainNet.jsx

@@ -24,7 +24,7 @@ import {
   useGetMainNetCountQuery,
   useGetMainNetQuery,
 } from "../Services/api.service";
-import { formatRelativeDate } from "../Constants/Constants";
+import { formatRelativeDate, formatUTCToDDMMYYHHMMSS } from "../Constants/Constants";
 import rbtLogoOutline from "../assets/images/rubix-filled.svg";
 import FullScreenLoaader from "../components/FullScreenLoaader/FullScreenLoaader";
 import { OPACITY_ON_LOAD } from "../Layout/animations";
@@ -145,7 +145,7 @@ const MainNet = () => {
           Main Net - Overview
         </Heading>
         <HStack to="" style={{ fontSize: "14px" }} color={colorMode === "light" ? "#000" : "#fff"} display={"flex"} gap={"3"}>
-          <Text as={"span"}>Total Value Locked (TVL)</Text> <Text as={"span"}>{mainNetData?.data?.tvl} RBT</Text>
+          <Text as={"span"}>Total Value Locked (TVL)</Text> <Text as={"span"}>{Number(mainNetData?.data?.tvl).toFixed(3)} RBT</Text>
         </HStack>
       </Container>
       <Box>
@@ -394,7 +394,7 @@ const MainNet = () => {
                         <Text
                           color={colorMode === "light" ? "#230A79" : "#B09AFF"}
                         >
-                          {formatRelativeDate(timestamp)}
+                          {formatUTCToDDMMYYHHMMSS(timestamp)}
                         </Text>
                       </Box>
                       <Box>
@@ -468,12 +468,12 @@ const MainNet = () => {
                               colorMode === "light" ? "#230A79" : "#B09AFF"
                             }
                           >
-                            <Link
-                              to={`/subnet-id-overview/${subNetworkId}`}
-                              style={{ fontWeight: "inherit" }}
-                            >
-                              {subNetworkId}
-                            </Link>
+                          {subNetworkId === "MainNet" ?<Text>{subNetworkId}</Text>:<Link
+                            to={`/subnet-id-overview/${subNetworkId}`}
+                            style={{ fontWeight: "inherit" }}
+                          >
+                            {subNetworkId}
+                          </Link>}
                           </Text>
                         </HStack>
                       </VStack>

src/pages/SubnetId.jsx

@@ -88,7 +88,7 @@ const SubnetId = () => {
         {item?.networkId}
         </Box>
         <HStack fontSize={"xs"} mt={1} w={"280px"} justifyContent={"space-between"}>
-          <Text display={"flex"} alignItems={"center"}>Tvl<MdArrowRight /> {item?.tvl} (RBT)</Text> 
+          <Text display={"flex"} alignItems={"center"}>Tvl<MdArrowRight /> {Number(item?.tvl).toFixed(3)} (RBT)</Text> 
           <Text  display={"flex"} alignItems={"center"}>Count<MdArrowRight />{item?.transctionsCount}</Text>
         </HStack>
       </>