diff --git a/dev-dist/sw.js b/dev-dist/sw.js index 9f7920e..be66ecc 100644 --- a/dev-dist/sw.js +++ b/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"), { diff --git a/src/Constants/Constants.js b/src/Constants/Constants.js index 8fe7725..fe225b9 100644 --- a/src/Constants/Constants.js +++ b/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}`; +} \ No newline at end of file diff --git a/src/Services/api.service.js b/src/Services/api.service.js index 04cdaa6..b499e78 100644 --- a/src/Services/api.service.js +++ b/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; diff --git a/src/components/AmountCard/AmountCard.jsx b/src/components/AmountCard/AmountCard.jsx index e051f56..db3e511 100644 --- a/src/components/AmountCard/AmountCard.jsx +++ b/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: , + icon: , }, { label: "DID count", @@ -53,22 +56,22 @@ const AmountCard = () => { { label: "Total Supply", value: kpDetails?.data?.totalSupply, - icon: , + icon: , }, { label: "Circulating Supply", value: kpDetails?.data?.circulatingSupply, - icon: , + icon: , }, { label: "Pledged RBT", value: kpDetails?.data?.pledgedRBT, - icon: , + icon: , }, { label: "Number of smart contracts", value: kpDetails?.data?.numberContracts, - icon: , + icon: , }, ]; diff --git a/src/components/ChartsTabs.jsx b/src/components/ChartsTabs.jsx index 4fe6edf..96a46ec 100644 --- a/src/components/ChartsTabs.jsx +++ b/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), }); diff --git a/src/components/Doughnut/LineChart.jsx b/src/components/Doughnut/LineChart.jsx index 14d3d9a..495bca7 100644 --- a/src/components/Doughnut/LineChart.jsx +++ b/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", diff --git a/src/components/LatestTransactions/LatestTransactions.jsx b/src/components/LatestTransactions/LatestTransactions.jsx index 4fcabca..6c0ca24 100644 --- a/src/components/LatestTransactions/LatestTransactions.jsx +++ b/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 : - {timestamp} + {formatUTCToDDMMYYHHMMSS(timestamp)} diff --git a/src/pages/MainNet.jsx b/src/pages/MainNet.jsx index 70eaea2..f2a74cc 100644 --- a/src/pages/MainNet.jsx +++ b/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(); diff --git a/src/pages/SplashScreen.jsx b/src/pages/SplashScreen.jsx new file mode 100644 index 0000000..2fb910d --- /dev/null +++ b/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 + + + ; +}; + +export default SplashScreen; diff --git a/src/pages/SubnetId.jsx b/src/pages/SubnetId.jsx index a030c05..e9539d3 100644 --- a/src/pages/SubnetId.jsx +++ b/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": ( {index + 1} @@ -70,11 +81,11 @@ const SubnetId = () => { ), "Subnet ID": ( - navigate(`/subnet-id-overview/${row["Subnet Id"]}`)}> - {item?.subnetId} + navigate(`/subnet-id-overview/${item?.networkId}`)}> + {item?.networkId} ), - "Transaction count": item?.transactionCount, + "Network Name": item?.networkName, })); return ( { display={{ base: "block", md: "flex" }} justifyContent={"space-between"} mb={10} + > { + + { @@ -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 ( @@ -112,7 +127,10 @@ const SubnetInner = () => { */} - + {data?.data?.items?.length===0 || isLoading? + + {"No records found"} + : { setCurrentPage={setCurrentPage} currentPage={currentPage} /> - + } );