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

dev-dist/sw.js

@@ -82,7 +82,7 @@ define(['./workbox-b5f7729d'], (function (workbox) { 'use strict';
     "revision": "3ca0b8505b4bec776b69afdba2768812"
   }, {
     "url": "index.html",
-    "revision": "0.qglf3eg0kc8"
+    "revision": "0.g2sg6ddrvtg"
   }], {});
   workbox.cleanupOutdatedCaches();
   workbox.registerRoute(new workbox.NavigationRoute(workbox.createHandlerBoundToURL("index.html"), {

src/Constants/Constants.js

@@ -28,3 +28,19 @@ export function formatRelativeDate(dateString) {
 export const timeZone = Intl.DateTimeFormat().resolvedOptions().timeZone;
 console.log(timeZone); // e.g., "America/New_York"
 
+
+
+export function formatUTCToDDMMYYHHMMSS(utcDateString) {
+  const date = new Date(utcDateString);
+
+  // Extract individual date and time components
+  const day = String(date.getUTCDate()).padStart(2, '0');
+  const month = String(date.getUTCMonth() + 1).padStart(2, '0'); // Months are 0-based
+  const year = String(date.getUTCFullYear()).slice(-2); // Get last two digits of the year
+  const hours = String(date.getUTCHours()).padStart(2, '0');
+  const minutes = String(date.getUTCMinutes()).padStart(2, '0');
+  const seconds = String(date.getUTCSeconds()).padStart(2, '0');
+
+  // Combine the formatted parts
+  return `${day}-${month}-${year} ${hours}:${minutes}:${seconds}`;
+}

src/Services/api.service.js

@@ -80,6 +80,12 @@ export const rubix = createApi({
       query: ({id,pageNumber = 1, pageSize = 10  }) => `SubNet/Transactions/GetAll/${id}?pageNumber=${pageNumber}&pageSize=${pageSize}`,
       providesTags: ["getTransById"],
     }),
+
+
+    getSubnetAll: builder.query({
+      query: ({ pageNumber = 1, pageSize = 10 }) => `SubNet/GetAllSubnetworks?pageNumber=${pageNumber}&pageSize=${pageSize}`,
+      providesTags: ["getTransAll"],
+    }),
     
   }),
 });
@@ -94,5 +100,6 @@ export const {
   useGetDailyDataQuery,
   useGetDateWiseDataQuery,
   useGetSubnetCountQuery,
-  useGetSubnetByIdQuery
+  useGetSubnetByIdQuery,
+  useGetSubnetAllQuery
 } = rubix;

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>

src/pages/MainNet.jsx

@@ -94,6 +94,19 @@ const MainNet = () => {
   }, [lastRefreshedTime]);
 
 
+  const updateRelativeTime = () => {
+    const now = new Date();
+    const timeDiff = Math.floor((now - lastRefreshedTime) / 60000); // Difference in minutes
+
+    if (timeDiff < 1) {
+      setRelativeRefreshTime("Just now");
+    } else if (timeDiff === 1) {
+      setRelativeRefreshTime("1 minute ago");
+    } else {
+      setRelativeRefreshTime(`${timeDiff} minutes ago`);
+    }
+  };
+
   const handleRefreshClick = () => {
     setIsRotating(true); // Start rotation
     mainNetRefetch();

src/pages/SplashScreen.jsx

@@ -0,0 +1,20 @@
+import React from "react";
+import { OPACITY_ON_LOAD } from "../Layout/animations";
+import { Box, Image, useColorMode } from "@chakra-ui/react";
+import logo from "../assets/images/rubix.png";
+import logoLight from "../assets/images/rubixlogo.svg";
+
+const SplashScreen = () => {
+    const { colorMode } = useColorMode();
+
+  return <Box zIndex={1000} bg={'#000'} h={'100vh'} display={'flex'} justifyContent={'center'} alignItems={'center'}  {...OPACITY_ON_LOAD}>
+
+<Image
+                src={colorMode === "light" ? logoLight : logo}
+                // width={"120px"}
+                width={{base:"95px",md : "120px"}}
+              />
+  </Box>;
+};
+
+export default SplashScreen;

src/pages/SubnetId.jsx

@@ -20,7 +20,7 @@ import NormalTable from "../components/DataTable/NormalTable";
 import bannerImage from "../assets/images/bannerImg.png";
 import { useNavigate, useParams } from "react-router-dom";
 import Pagination from "../components/Pagination";
-import { useGetSubnetCountQuery } from "../Services/api.service";
+import { useGetSubnetAllQuery, useGetSubnetCountQuery } from "../Services/api.service";
 import { BiSearch, BiSearchAlt } from "react-icons/bi";
 
 const SubnetId = () => {
@@ -45,24 +45,35 @@ const SubnetId = () => {
   } = useGetSubnetCountQuery()
 
 
+  const {
+    data,
+    isLoading
+  } = useGetSubnetAllQuery({
+    pageNumber: currentPage,
+    pageSize: pageSize,
+  })
+
+  console.log(data?.data?.items);
+
+
 
   
 
 
     useEffect(() => {
-    setTotalItems(subNetCount?.data?.transactionCount);
-  }, [subNetCount]);
+    setTotalItems(data?.data?.totalCount);
+  }, [data]);
   
 
   // ===============================[ Table Header ]
   const tableHeadRow = [
     "Sr. no",
     "Subnet ID",
-    "Transaction count",
+    "Network Name",
   ];
 
   // const extractedArray = reportsHistory.map((item)=>({ }))
-  const extractedArray = subnetId.map((item, index) => ({
+  const extractedArray = data?.data?.items.map((item, index) => ({
     "Sr. no": (
       <Text as={"span"} display={"flex"} gap={2} alignItems={"center"}>
         {index + 1}
@@ -70,11 +81,11 @@ const SubnetId = () => {
     ),
     "Subnet ID": (
         <Box color={colorMode === "light"? "#230A79" : "#B09AFF"}  onClick={() =>
-            navigate(`/subnet-id-overview/${row["Subnet Id"]}`)}>
-          {item?.subnetId}
+            navigate(`/subnet-id-overview/${item?.networkId}`)}>
+          {item?.networkId}
          </Box>
      ),
-    "Transaction count": item?.transactionCount,
+    "Network Name": item?.networkName,
   }));
   return (
     <Box
@@ -90,6 +101,7 @@ const SubnetId = () => {
         display={{ base: "block", md: "flex" }}
         justifyContent={"space-between"}
         mb={10}
+        
       >
         <Heading
           fontSize={"md"}
@@ -182,6 +194,8 @@ const SubnetId = () => {
           </Box>
         </Container>
       </VStack>
+
+      
       <Container maxW="6xl">
         <NormalTable
             emptyMessage={`We don't have any Sponers `}

src/pages/SubnetIdOverview.jsx

@@ -10,6 +10,7 @@ import { useGetSubnetByIdQuery } from "../Services/api.service";
 import rbtLogoOutline from "../assets/images/rubix-filled.svg";
 import { HiOutlineRefresh } from "react-icons/hi";
 import { rotate } from "../components/LatestTransactions/LatestTransactions";
+import Search from '../assets/images/search.png'
 
 const SubnetInner = () => {
 
@@ -89,6 +90,20 @@ const SubnetInner = () => {
   }, [lastRefreshedTime]);
 
 
+  const updateRelativeTime = () => {
+    const now = new Date();
+    const timeDiff = Math.floor((now - lastRefreshedTime) / 60000); // Difference in minutes
+
+    if (timeDiff < 1) {
+      setRelativeRefreshTime("Just now");
+    } else if (timeDiff === 1) {
+      setRelativeRefreshTime("1 minute ago");
+    } else {
+      setRelativeRefreshTime(`${timeDiff} minutes ago`);
+    }
+  };
+
+
 
   return (
     <Box p={"6rem 0 4rem 0"} backgroundImage={colorMode !== "light" ? `url(${bannerImage})` : "none"} position={"relative"} backgroundSize="contain" backgroundRepeat="no-repeat">
@@ -112,7 +127,10 @@ const SubnetInner = () => {
         </Text> */}
       </Container>
       <Box>
-        <Container maxW="6xl">
+        {data?.data?.items?.length===0 || isLoading?<HStack h={'35vh'} justifyContent={"center"} mt={10}>
+            <Image w={"40px"} src={Search}/>
+            <Text as={"span"} color={"#787878"}>{"No records found"}</Text>
+          </HStack>:<Container maxW="6xl">
           <Grid position={'relative'}
             templateColumns={{ base: "100% 0%", md: "10% 90%" }}
             gap={0}
@@ -442,7 +460,7 @@ const SubnetInner = () => {
         setCurrentPage={setCurrentPage}
         currentPage={currentPage}
       />
-        </Container>
+        </Container>}
       </Box>
     </Box>
   );