From 5a8c1c9a1b936b55d0eccd88086b6e0a63b55db4 Mon Sep 17 00:00:00 2001 From: "Siddhesh.More" Date: Tue, 22 Oct 2024 13:32:27 +0530 Subject: [PATCH] updatdd --- dev-dist/sw.js | 2 +- src/Services/api.service.js | 31 +- src/Theme/Theme.js | 24 +- src/components/DataTable/NormalTable.jsx | 10 +- src/components/Doughnut/LineChart.jsx | 2 +- .../LatestTransactions/LatestTransactions.jsx | 37 +- src/pages/Subnet.jsx | 3 + src/pages/SubnetId.jsx | 60 +- src/pages/SubnetIdOverview.jsx | 515 +++++++++++------- 9 files changed, 444 insertions(+), 240 deletions(-) diff --git a/dev-dist/sw.js b/dev-dist/sw.js index 995eac8..4976af6 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.6ket85o3c1" + "revision": "0.5tjbmcd5mug" }], {}); workbox.cleanupOutdatedCaches(); workbox.registerRoute(new workbox.NavigationRoute(workbox.createHandlerBoundToURL("index.html"), { diff --git a/src/Services/api.service.js b/src/Services/api.service.js index 6538697..04cdaa6 100644 --- a/src/Services/api.service.js +++ b/src/Services/api.service.js @@ -22,32 +22,34 @@ export const rubix = createApi({ providesTags: ["getTransCount"], }), + getTransAll: builder.query({ query: ({ pageNumber = 1, pageSize = 10 }) => `Analytics/Transactions/GetAll?pageNumber=${pageNumber}&pageSize=${pageSize}`, providesTags: ["getTransAll"], }), + getTransById: builder.query({ query: (id) => `Transaction/GetById/${id}`, providesTags: ["getTransById"], }), - - + + getMainNetCount: builder.query({ query: () => `MainNet/Transactions/GetCount`, providesTags: ["getAllMainNetCount"], }), - + getMainNet: builder.query({ 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"], @@ -63,7 +65,22 @@ export const rubix = createApi({ providesTags: ["getDateWiseData"], }), + getSubnetCount: builder.query({ + query: () => `/SubNet/Transactions/GetCount`, + providesTags: ["getSubnetCount"], + }), + + getSubnetAll: builder.query({ + query: ({ pageNumber = 1, pageSize = 10 }) => `Analytics/Transactions/GetAll?pageNumber=${pageNumber}&pageSize=${pageSize}`, + providesTags: ["getTransAll"], + }), + + getSubnetById: builder.query({ + query: ({id,pageNumber = 1, pageSize = 10 }) => `SubNet/Transactions/GetAll/${id}?pageNumber=${pageNumber}&pageSize=${pageSize}`, + providesTags: ["getTransById"], + }), + }), }); export const { @@ -75,5 +92,7 @@ export const { useGetDidByIdQuery, useGetMonthlyDataQuery, useGetDailyDataQuery, - useGetDateWiseDataQuery + useGetDateWiseDataQuery, + useGetSubnetCountQuery, + useGetSubnetByIdQuery } = rubix; diff --git a/src/Theme/Theme.js b/src/Theme/Theme.js index 153f3d8..d9cc4bd 100644 --- a/src/Theme/Theme.js +++ b/src/Theme/Theme.js @@ -42,18 +42,18 @@ const customTheme = extendTheme({ 800: "#10041C", 900: "#0A0212", }, - lightWhite: { - 50: "#ffffff", // Pure white - 100: "#f2f2f2", // Very light gray - 200: "#e6e6e6", // Lighter gray - 300: "#cccccc", // Light gray - 400: "#b3b3b3", // Medium gray - 500: "#999999", // Darker gray - 600: "#808080", // Even darker gray - 700: "#666666", // Dark gray - 800: "#4d4d4d", // Very dark gray - 900: "#333333", // Almost black - } + whiteScheme: { + 50: "#ffffff", + 100: "#ffffff", + 200: "#ffffff", + 300: "#ffffff", + 400: "#ffffff", + 500: "#ffffff", + 600: "#ffffff", + 700: "#ffffff", + 800: "#ffffff", + 900: "#ffffff", + }, }, components: { diff --git a/src/components/DataTable/NormalTable.jsx b/src/components/DataTable/NormalTable.jsx index 1f7b678..6ba4b67 100644 --- a/src/components/DataTable/NormalTable.jsx +++ b/src/components/DataTable/NormalTable.jsx @@ -77,9 +77,9 @@ const NormalTable = ({ return ( - +
- + {showRadioButton &&( @@ -153,13 +153,13 @@ const NormalTable = ({
} {radio ? radioChange(item.id, item)} />: handleCheckboxChange(item.id)} diff --git a/src/components/Doughnut/LineChart.jsx b/src/components/Doughnut/LineChart.jsx index bdb98be..3f36628 100644 --- a/src/components/Doughnut/LineChart.jsx +++ b/src/components/Doughnut/LineChart.jsx @@ -99,7 +99,7 @@ const LineChart = () => { setLabels(dataLableMonthly); setDataset(dataSetMonthly); } - }, [selectedValue]); + }, [selectedValue, dailyData]); const data = { labels: labels, diff --git a/src/components/LatestTransactions/LatestTransactions.jsx b/src/components/LatestTransactions/LatestTransactions.jsx index 552feb0..89042d0 100644 --- a/src/components/LatestTransactions/LatestTransactions.jsx +++ b/src/components/LatestTransactions/LatestTransactions.jsx @@ -50,8 +50,7 @@ const LatestTransactions = () => { 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: transCount, @@ -157,18 +156,23 @@ const LatestTransactions = () => { position={"absolute"} right={0} m={1.5} - display={'flex'} - alignItems={'center'} + display={"flex"} + alignItems={"center"} gap={2} onClick={handleRefreshClick} // Trigger the rotation when clicked > - Last refresh {relativeRefreshTime} + + Last refresh {relativeRefreshTime}{" "} + {transAll?.data?.items?.map( ( @@ -423,14 +431,11 @@ rounded={"full"} - - - + - {subNetworkId === "MainNet" ? "Main net" : "Subnet ID"} - : + {subNetworkId === "MainNet" ? "Main net" : "Subnet ID"}: { const navigate = useNavigate() const toast = useToast() + + function copyToClipboard(text) { navigator.clipboard @@ -33,6 +35,7 @@ const Subnet = () => { }); } + return ( { const { subnetId } = useContext(GlobalStateContext); - const [isLoading, setIsLoading] = useState(false); + // const [isLoading, setIsLoading] = useState(false); const { colorMode } = useColorMode(); const navigate = useNavigate(); - useEffect(() => { - setIsLoading(true); - const timer = setTimeout(() => { - setIsLoading(false); - }, 500); - return () => clearTimeout(timer); - }, []); + + 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{ + data: subNetCount, + isLoading: isSubnetTransLoading + } = useGetSubnetCountQuery() + + + + + + + useEffect(() => { + setTotalItems(subNetCount?.data?.transactionCount); + }, [subNetCount]); + // ===============================[ Table Header ] const tableHeadRow = [ @@ -80,7 +99,7 @@ const SubnetId = () => { > Subnet Overview {useParams?.id} - { - + */} { roundedLeft={8} w={"76%"} borderColor={colorMode === "light" ? "#CED4DA" : "#565252"} - h={"42px"} + // h={"42px"} type="search" placeholder="Search by Subnet ID" onChange={(e) => setSearchTerm(e.target.value)} @@ -123,10 +142,11 @@ const SubnetId = () => { _focusVisible={{ borderColor: colorMode === "light" ? "#230A79" : "#7f8c8d", }} + size={'sm'} /> @@ -162,9 +187,16 @@ const SubnetId = () => { emptyMessage={`We don't have any Sponers `} tableHeadRow={tableHeadRow} data={extractedArray} - isLoading={isLoading} + isLoading={isSubnetTransLoading} /> - + ); diff --git a/src/pages/SubnetIdOverview.jsx b/src/pages/SubnetIdOverview.jsx index f127d87..9604f4f 100644 --- a/src/pages/SubnetIdOverview.jsx +++ b/src/pages/SubnetIdOverview.jsx @@ -1,18 +1,32 @@ -import { Box, Container, Grid, GridItem, Heading, HStack, Icon, Link, Select, Text, useColorMode, useToast, VStack } from "@chakra-ui/react"; -import React, { useContext, useEffect } from "react"; +import { Box, Container, Grid, Image,GridItem, Heading, HStack, Icon, Link, Select, Text, useColorMode, useToast, VStack } from "@chakra-ui/react"; +import React, { useContext, useEffect, useState } from "react"; import GlobalStateContext from "../Contexts/GlobalStateContext"; import Pagination from "../components/Pagination"; import { MdContentCopy, MdOutlineErrorOutline } from "react-icons/md"; import ToastBox from "../components/ToastBox"; import bannerImage from "../assets/images/bannerImg.png"; -import { useParams } from "react-router-dom"; +import { useNavigate, useParams } from "react-router-dom"; +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"; const SubnetInner = () => { const { overview } = useContext(GlobalStateContext); const { colorMode} = useColorMode(); + const navigate = useNavigate() const params = useParams() + + + 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 toast = useToast() useEffect(() => { window.scrollTo({ top: 0, behavior: "smooth" }); // Scroll to top smoothly when params change @@ -35,6 +49,47 @@ const SubnetInner = () => { }); } + + const { + data, + isLoading, + refetch + } = useGetSubnetByIdQuery({ + id:params?.id, + pageNumber: currentPage, + pageSize: pageSize, + }) + + + useEffect(() => { + setTotalItems(data?.data?.totalCount); + }, [data]); + + + + const handleRefreshClick = () => { + setIsRotating(true); // Start rotation + refetch(); + 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" + }; + + + + useEffect(() => { + // Update relative time every minute + const intervalId = setInterval(() => { + updateRelativeTime(); + }, 60000); // 60 seconds = 60000ms + + return () => clearInterval(intervalId); // Cleanup the interval on unmount + }, [lastRefreshedTime]); + + + return ( { Subnet ID - {params?.id} - + {/* View total number of records - + */} - { Transactions + + + + + + Last refresh {relativeRefreshTime}{" "} + + + - {overview.map((transaction, index) => ( - ( + + - + + {/* */} + - {index + 1}. - - - {/* */} - + + + copyToClipboard(transactionId)} + /> + + + + + + Sender: + + + + + copyToClipboard(sender)} /> + + + + + + Receiver: + + + navigate(`/did-info/${receiver}`)} + > + {receiver} - { cursor={"pointer"} > copyToClipboard(transaction.description)} + onClick={() => copyToClipboard(receiver)} /> - - - - - Sender: - - - - - - - copyToClipboard(transaction.sender)} - /> - - - - - Receiver: - - - - navigate(`/did-info/${transaction.receiver}`) - } - > - {transaction.receiver} - - - copyToClipboard(transaction.receiver)} - /> - - - - + + + {smartContract && ( { > Smart contract ID : - - {transaction.contract} + + {smartContract} - + )} + + + Date and Time Stamp : + + + {timestamp} + + + + + Amount: + + + + {amount} + + + + + + + + + - Date and Time Stamp : + Transaction type : - - {transaction.date} - - - + {transactionType} + + + + + + + - Amount: + {subNetworkId === "MainNet" ? "Main net" : "Subnet ID"} + : - - {transaction.amount} + + + {subNetworkId} + - - - - - - - - - - Transaction type : - - - {transaction.transactionType} - - - - - {/* */} - - - ))} + + + + {/* */} + + + + + ) + )} - +