diff --git a/.env b/.env index 2f2b4e5..a25486d 100644 --- a/.env +++ b/.env @@ -1,2 +1,2 @@ -VITE_BASE_URL="https://rexplorerapi.azurewebsites.net/" +VITE_BASE_URL="https://rexplorerapi.azurewebsites.net/api/" VITE_IMAGE_URL="https://regroup.betadelivery.com/" diff --git a/dev-dist/sw.js b/dev-dist/sw.js index 15aeba9..995eac8 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.0iof9eg3rjg" + "revision": "0.6ket85o3c1" }], {}); workbox.cleanupOutdatedCaches(); workbox.registerRoute(new workbox.NavigationRoute(workbox.createHandlerBoundToURL("index.html"), { diff --git a/src/Constants/Constants.js b/src/Constants/Constants.js index 19e2dae..8fe7725 100644 --- a/src/Constants/Constants.js +++ b/src/Constants/Constants.js @@ -24,3 +24,7 @@ export function formatRelativeDate(dateString) { return `${timeAgo}, ${formattedDate}`; } + +export const timeZone = Intl.DateTimeFormat().resolvedOptions().timeZone; +console.log(timeZone); // e.g., "America/New_York" + diff --git a/src/Layout/animations.jsx b/src/Layout/animations.jsx new file mode 100644 index 0000000..2d825ae --- /dev/null +++ b/src/Layout/animations.jsx @@ -0,0 +1,23 @@ +import { motion } from "framer-motion"; + +export const OPACITY_ON_LOAD = { + as: motion.div, + initial: { opacity: 0 }, + animate: { opacity: 1 } +} + +export const SLIDE_IN_BOTTOM = { + as: motion.div, + initial: { opacity: 0, y: 50 }, + animate: { opacity: 1, y: 0 }, + transition: { duration: 1, ease: "easeInOut" } + }; + + + export const FADE_IN_SCALE_UP = { + as: motion.div, + initial: { opacity: 0, scale: 0.9 }, + animate: { opacity: 1, scale: 1 }, + transition: { duration: 0.5, ease: "easeInOut" } + }; + \ No newline at end of file diff --git a/src/Services/api.service.js b/src/Services/api.service.js index 250f1ea..6538697 100644 --- a/src/Services/api.service.js +++ b/src/Services/api.service.js @@ -12,35 +12,68 @@ export const rubix = createApi({ "getTransCount", "getTransAll", "getTransById", - "getMainNet" + "getMainNet", + "getAllMainNetCount" ], endpoints: (builder) => ({ getTransCount: builder.query({ - query: () => `api/Analytics/Transactions/GetCount`, + query: () => `Analytics/Transactions/GetCount`, providesTags: ["getTransCount"], }), getTransAll: builder.query({ - query: ({ pageNumber = 1, pageSize = 10 }) => `api/Analytics/Transactions/GetAll?pageNumber=${pageNumber}&pageSize=${pageSize}`, + query: ({ pageNumber = 1, pageSize = 10 }) => `Analytics/Transactions/GetAll?pageNumber=${pageNumber}&pageSize=${pageSize}`, providesTags: ["getTransAll"], }), getTransById: builder.query({ - query: (id) => `/api/Transaction/GetById/${id}`, + query: (id) => `Transaction/GetById/${id}`, providesTags: ["getTransById"], }), + + getMainNetCount: builder.query({ + query: () => `MainNet/Transactions/GetCount`, + providesTags: ["getAllMainNetCount"], + }), + getMainNet: builder.query({ - query: ({ pageNumber = 1, pageSize = 10 }) => `api/MainNet/Transactions/GetAll?pageNumber=${pageNumber}&pageSize=${pageSize}`, + query: ({ pageNumber = 1, pageSize = 10 }) => `MainNet/Transactions/GetAll?pageNumber=${pageNumber}&pageSize=${pageSize}`, providesTags: ["getMainNet"], }), + getDidById: builder.query({ + query: (id) => `DIDInfo/GetById/${id}`, + providesTags: ["getTransById"], + }), + + getMonthlyData: builder.query({ + query: (timeZoneId) => `/Analytics/monthly-summary?timeZoneId=${timeZoneId}`, + providesTags: ["getMonthlyData"], + }), + + getDailyData: builder.query({ + query: (timeZoneId) => `/Analytics/daily-summary?clientTimeZoneId=${timeZoneId}`, + providesTags: ["getDailyData"], + }), + + getDateWiseData: builder.query({ + query: (timeZoneId) => `/Analytics/datewise-summary?clientTimeZoneId=${timeZoneId}`, + providesTags: ["getDateWiseData"], + }), + + }), }); export const { useGetTransCountQuery, useGetTransAllQuery, useGetTransByIdQuery, + useGetMainNetCountQuery, useGetMainNetQuery, + useGetDidByIdQuery, + useGetMonthlyDataQuery, + useGetDailyDataQuery, + useGetDateWiseDataQuery } = rubix; diff --git a/src/components/Doughnut/LineChart.jsx b/src/components/Doughnut/LineChart.jsx index c57a9fe..bdb98be 100644 --- a/src/components/Doughnut/LineChart.jsx +++ b/src/components/Doughnut/LineChart.jsx @@ -13,6 +13,8 @@ import { import { Box, Heading, useColorMode } from "@chakra-ui/react"; import ChartsTabs from "../ChartsTabs"; import dayjs from "dayjs"; // Import for date handling +import { useGetDailyDataQuery, useGetDateWiseDataQuery, useGetMonthlyDataQuery } from "../../Services/api.service"; +import { timeZone } from "../../Constants/Constants"; // Register the components of Chart.js you need ChartJS.register( @@ -25,56 +27,77 @@ ChartJS.register( Legend ); + + +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); + + return sortedData?.map(item => { + return { + dayName: item.dayName, + year: item.year, + transactionCount: item.transactionCount, + totalPrice: item.totalPrice, + totalGasFee: item.totalGasFee, + }; + }); +} + + const LineChart = () => { const { colorMode } = useColorMode(); const [selectedValue, setSelectedValue] = useState("24 Hrs"); const [labels, setLabels] = useState([]); const [dataset, setDataset] = useState([]); + const { + data: monthlyData, + isLoading: monthlyDataLoading, + refetch + } = useGetMonthlyDataQuery(timeZone) + const dataSetMonthly = monthlyData?.map((data)=>data?.transactionCount) + const dataLableMonthly = monthlyData?.map((data) => data?.monthName) + + const { + data: dailyData, + isLoading: dailyDataLoading, + } = useGetDailyDataQuery(timeZone) + const dataSetDaily = dailyData?.map((data)=>data?.transactionCount) + const dataLableDaily = dailyData?.map((data) => data?.hour) + + const { + data: dateData, + isLoading: dateDataLoading, + } = useGetDateWiseDataQuery(timeZone) + + console.log(formatAndSortDataByDayName(dateData?.data)); + // console.log(formatAndSortDataByDayName(dateData?.data)); + + const dataSetDate = dateData?.data?.map((data)=>data?.transactionCount) + const dataLableDate = dateData?.data?.map((data) => data?.dayName) + // const dataSetDate = [...(dateData?.data || [])].reverse().map((data) => data?.transactionCount); + // const dataLableDate = [...(dateData?.data || [])].reverse().map((data) => data?.dayName); + + + useEffect(() => { if (selectedValue === "24 Hrs") { // Create hourly labels for 24 hours - const hours = Array.from({ length: 24 }, (_, index) => `${index}:00`); - setLabels(hours); - // Generate random data for each hour - const dailyData = Array.from({ length: 24 }, () => - Math.floor(Math.random() * 5000 + 1000) - ); - setDataset(dailyData); + setLabels(dataLableDaily); + // Generate random data for each day + setDataset(dataSetDaily); } else if (selectedValue === `${dayjs().daysInMonth()} Days`) { // Create labels for the current month (days) - const daysInMonth = dayjs().daysInMonth(); - const days = Array.from( - { length: daysInMonth }, - (_, index) => `Day ${index + 1}` - ); - setLabels(days); + setLabels(dataLableDate); // Generate random data for each day - const monthlyData = Array.from({ length: daysInMonth }, () => - Math.floor(Math.random() * 5000 + 1000) - ); - setDataset(monthlyData); + setDataset(dataSetDate); } else if (selectedValue === "12 Months") { // Labels for months (already set up) - setLabels([ - "Jan", - "Feb", - "Mar", - "Apr", - "May", - "Jun", - "Jul", - "Aug", - "Sep", - "Oct", - "Nov", - "Dec", - ]); - // Generate random data for each month - const yearlyData = Array.from({ length: 12 }, () => - Math.floor(Math.random() * 5000 + 1000) - ); - setDataset(yearlyData); + setLabels(dataLableMonthly); + setDataset(dataSetMonthly); } }, [selectedValue]); @@ -146,6 +169,8 @@ const LineChart = () => { }, }; + console.log(data); + return ( <> { + const { colorMode } = useColorMode(); + return ( + + + + ); +}; + +export default FullScreenLoaader; diff --git a/src/components/LatestTransactions/LatestTransactions.jsx b/src/components/LatestTransactions/LatestTransactions.jsx index 8f19d9f..552feb0 100644 --- a/src/components/LatestTransactions/LatestTransactions.jsx +++ b/src/components/LatestTransactions/LatestTransactions.jsx @@ -27,7 +27,7 @@ import rbtLogoOutline from "../../assets/images/rubix-filled.svg"; import { HiOutlineRefresh } from "react-icons/hi"; // Define the keyframes -const rotate = keyframes` +export const rotate = keyframes` from { transform: rotate(0deg); } @@ -369,7 +369,7 @@ rounded={"full"} Date and Time Stamp : - {formatRelativeDate(timestamp)} + {timestamp} @@ -423,11 +423,13 @@ rounded={"full"} - + + + - {subNetworkId === "MainNet" ? "Main net" : "Subnet ID"}{" "} + {subNetworkId === "MainNet" ? "Main net" : "Subnet ID"} : { useEffect(() => { @@ -42,8 +48,19 @@ const DidInfo = () => { }); } + const { + data, + isLoading, + } = useGetDidByIdQuery(params?.id) + console.log(data?.message); + + + return ( + isLoading? + : { > DID Info + + + {data?.data ? { > {params?.id} + >{data?.data?.userDID} copyToClipboard(transaction.sender)} + onClick={() => copyToClipboard(data?.data?.userDID)} /> Balance @@ -105,14 +125,24 @@ const DidInfo = () => { pb={3} color={colorMode === "light" ? "#230A79" : "#B09AFF"} > - $ 10000.12345 + {data?.data?.balance} - copyToClipboard(transaction.sender)} - /> + /> */} - + : + + + {data?.message} + } + + + diff --git a/src/pages/Home.jsx b/src/pages/Home.jsx index 38844b4..44c915b 100644 --- a/src/pages/Home.jsx +++ b/src/pages/Home.jsx @@ -23,6 +23,8 @@ import bannerImage from "../assets/images/bannerImg.png"; import bannerImageMobile from "../assets/images/bannerImgmobile.png"; import { BiSearchAlt } from "react-icons/bi"; + + const Home = () => { const [isSwitchOn, setIsSwitchOn] = useState(true); const { colorMode, toggleColorMode } = useColorMode(); diff --git a/src/pages/MainNet.jsx b/src/pages/MainNet.jsx index 7f7ac04..e5b50db 100644 --- a/src/pages/MainNet.jsx +++ b/src/pages/MainNet.jsx @@ -1,4 +1,18 @@ -import { Box, Container, Grid, GridItem, Heading, HStack, Icon, Image, Select, Text, useColorMode, useToast, VStack } from "@chakra-ui/react"; +import { + Box, + Container, + Grid, + GridItem, + Heading, + HStack, + Icon, + Image, + Select, + Text, + useColorMode, + useToast, + VStack, +} from "@chakra-ui/react"; import React, { useContext, useEffect, useState } from "react"; import bannerImage from "../assets/images/bannerImg.png"; import GlobalStateContext from "../Contexts/GlobalStateContext"; @@ -6,40 +20,52 @@ import Pagination from "../components/Pagination"; import { MdContentCopy, MdOutlineErrorOutline } from "react-icons/md"; import ToastBox from "../components/ToastBox"; import { Link, useNavigate } from "react-router-dom"; -import { useGetMainNetQuery } from "../Services/api.service"; +import { + useGetMainNetCountQuery, + useGetMainNetQuery, +} from "../Services/api.service"; import { formatRelativeDate } from "../Constants/Constants"; import rbtLogoOutline from "../assets/images/rubix-filled.svg"; +import FullScreenLoaader from "../components/FullScreenLoaader/FullScreenLoaader"; +import { OPACITY_ON_LOAD } from "../Layout/animations"; +import { HiOutlineRefresh } from "react-icons/hi"; +import { rotate } from "../components/LatestTransactions/LatestTransactions"; const MainNet = () => { const { overview } = useContext(GlobalStateContext); - const { colorMode} = useColorMode(); - const navigate = useNavigate() - const toast = useToast() - + const { colorMode } = useColorMode(); + const navigate = useNavigate(); + const toast = useToast(); const [isRotating, setIsRotating] = useState(false); const [currentPage, setCurrentPage] = useState(1); // Tracks the current page const [pageSize, setPageSize] = useState(10); // Number of items per page const [totalItems, setTotalItems] = useState(null); // Total items in the dataset const [lastRefreshedTime, setLastRefreshedTime] = useState(new Date()); // Store the last refresh time - const [relativeRefreshTime, setRelativeRefreshTime] = useState("Just now"); + const [relativeRefreshTime, setRelativeRefreshTime] = useState("Just now"); + + const { + data: transGetMainNetCount, + isLoading: isTransGetMainNetCountLoading, + refetch: transGetMainNetCountRefetch, + } = useGetMainNetCountQuery(); + + console.log(transGetMainNetCount?.data); const { data: mainNetData, isLoading: isMainNetDataLoading, - refetch: mainNetRefetch + refetch: mainNetRefetch, } = useGetMainNetQuery({ pageNumber: currentPage, pageSize: pageSize, - }) + }); console.log(mainNetData); - useEffect(() => { - setTotalItems(mainNetData?.data?.totalCount); - }, [mainNetData]); - + setTotalItems(transGetMainNetCount?.data?.transactionCount); + }, [transGetMainNetCount]); function copyToClipboard(text) { navigator.clipboard @@ -56,17 +82,53 @@ const MainNet = () => { }); } - return ( - + + + useEffect(() => { + // Update relative time every minute + const intervalId = setInterval(() => { + updateRelativeTime(); + }, 60000); // 60 seconds = 60000ms + + return () => clearInterval(intervalId); // Cleanup the interval on unmount + }, [lastRefreshedTime]); + + + const handleRefreshClick = () => { + setIsRotating(true); // Start rotation + mainNetRefetch(); + setTimeout(() => { + setIsRotating(false); // Stop rotation after 500ms + }, 500); + setLastRefreshedTime(new Date()); // Set the new refresh time + setRelativeRefreshTime("Just now"); // Reset relative time to "Just now" + }; + + return isTransGetMainNetCountLoading || isMainNetDataLoading ? ( + + ) : ( + - - Main Net - Overview + + Main Net - Overview {/* View total number of records @@ -80,6 +142,7 @@ const MainNet = () => { { borderTopRightRadius={4} borderTopLeftRadius={4} > - + Sr. no Transactions + + + Last refresh {relativeRefreshTime} + + - {mainNetData?.data?.items?.map( - ( - { - transactionId, - smartContract, - sender, - receiver, - contract, - timestamp, - amount, - transactionType, - subNetworkId, - }, - index - ) => ( - - - {index + 1}. - - - {/* */} - ( + - - - - copyToClipboard(transactionId)} - /> - - - - - - Sender: - - - - - - copyToClipboard(sender)} /> - - - - - - Receiver: - - - navigate(`/did-info/${receiver}`)} - > - {receiver} - - - copyToClipboard(receiver)} - /> - - - - - {smartContract && ( - - - Smart contract ID : - - - {smartContract} - - - )} - - - Date and Time Stamp : - - - {formatRelativeDate(timestamp)} - - - - - Amount: - - + + {/* */} + - - {amount} + + + + copyToClipboard(transactionId)} + /> + - - - - - - - + - Transaction type : + Sender: - - {transactionType} - - - - - - {subNetworkId === "MainNet" ? "Main net" : "Subnet ID"}{" "} - : - - - navigate(`/did-info/${sender}`)} > - {subNetworkId} - - + {sender} + + + copyToClipboard(sender)} + /> + + - - - {/* */} - - - ) - )} + + + Receiver: + + + navigate(`/did-info/${receiver}`)} + > + {receiver} + + + copyToClipboard(receiver)} + /> + + + + + {smartContract && ( + + + Smart contract ID : + + + {smartContract} + + + )} + + + Date and Time Stamp : + + + {formatRelativeDate(timestamp)} + + + + + Amount: + + + + {amount} + + + + + + + + + + + Transaction type : + + + {transactionType} + + + + + + {subNetworkId === "MainNet" + ? "Main net" + : "Subnet ID"}{" "} + : + + + + {subNetworkId} + + + + + + {/* */} + + + ) + )} - + diff --git a/src/pages/Transaction/TransactionDetails.jsx b/src/pages/Transaction/TransactionDetails.jsx index 8a677e1..5d7e24e 100644 --- a/src/pages/Transaction/TransactionDetails.jsx +++ b/src/pages/Transaction/TransactionDetails.jsx @@ -123,13 +123,13 @@ const TransactionDetails = () => { - Token Information - + } {data?.data?.tokenList && { } + + + + { color={colorMode === "light" ? "#000" : "#fff"} fontSize={"sm"} > - Main net / Subnet Id + {data?.data?.netWorkType} { isTruncated cursor={"pointer"} > - {data?.data?.netWorkType} + {data?.data?.subNetworkId} { color={colorMode === "light" ? "#230A79" : "#B09AFF"} > navigate(`/did-info/${filteredData.sender}`)} + onClick={() => navigate(`/did-info/${data?.data?.sender}`)} fontWeight={"inherit"} whiteSpace={"nowrap"} // Prevent the text from wrapping textOverflow={"ellipsis"} @@ -277,7 +281,7 @@ const TransactionDetails = () => { cursor={"pointer"} > copyToClipboard(data?.data?.sender)} + onClick={() => copyToClipboard(data?.data?.receiver)} /> @@ -295,7 +299,7 @@ const TransactionDetails = () => { color={colorMode === "light" ? "#230A79" : "#B09AFF"} > navigate(`/did-info/${filteredData.receiver}`)} + onClick={() => navigate(`/did-info/${data?.data?.receiver}`)} fontWeight={"inherit"} whiteSpace={"nowrap"} // Prevent the text from wrapping textOverflow={"ellipsis"}