diff --git a/src/Services/api.service.js b/src/Services/api.service.js index 903a8a4..f5a6eb3 100644 --- a/src/Services/api.service.js +++ b/src/Services/api.service.js @@ -10,15 +10,31 @@ export const rubix = createApi({ }), tagTypes: [ "getTransCount", + "getTransAll" ], endpoints: (builder) => ({ + + getTransCount: builder.query({ query: () => `api/Analytics/Transactions/GetCount`, providesTags: ["getTransCount"], }), + + + getTransAll: builder.query({ + query: ({ pageNumber = 1, pageSize = 10 }) => + `api/Analytics/Transactions/GetAll?pageNumber=${pageNumber}&pageSize=${pageSize}`, + providesTags: ["getTransAll"], + }), + + + + + }), }); export const { - useGetTransCountQuery + useGetTransCountQuery, + useGetTransAllQuery } = rubix; diff --git a/src/assets/images/rubix-filled.svg b/src/assets/images/rubix-filled.svg new file mode 100644 index 0000000..1236516 --- /dev/null +++ b/src/assets/images/rubix-filled.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/images/rubix-outline.svg b/src/assets/images/rubix-outline.svg new file mode 100644 index 0000000..ee75056 --- /dev/null +++ b/src/assets/images/rubix-outline.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/components/LatestTransactions/LatestTransactions.jsx b/src/components/LatestTransactions/LatestTransactions.jsx index 0cad4e7..ff56d3c 100644 --- a/src/components/LatestTransactions/LatestTransactions.jsx +++ b/src/components/LatestTransactions/LatestTransactions.jsx @@ -5,35 +5,80 @@ import { GridItem, HStack, Icon, + Image, Text, VStack, + keyframes, useColorMode, useToast, } from "@chakra-ui/react"; -import React, { useContext, useState } from "react"; +import React, { useContext, useEffect, useState } from "react"; import { MdContentCopy, MdOutlineErrorOutline } from "react-icons/md"; import Pagination from "../Pagination"; import GlobalStateContext from "../../Contexts/GlobalStateContext"; -import { Link, useNavigate } from "react-router-dom"; +import { Link, useLocation, useNavigate } from "react-router-dom"; import ToastBox from "../ToastBox"; import { formatRelativeDate } from "../../Constants/Constants"; +import { + useGetTransAllQuery, + useGetTransCountQuery, +} from "../../Services/api.service"; +import rbtLogoOutline from "../../assets/images/rubix-filled.svg"; +import { HiOutlineRefresh } from "react-icons/hi"; + +export const rotate = keyframes` + from { + transform: rotate(0deg); + } + to { + transform: rotate(360deg); + } +`; const LatestTransactions = () => { const toast = useToast(); const navigate = useNavigate(); + const location = useLocation(); + useEffect(() => { + window.scrollTo({ top: 0, behavior: "smooth" }); // Scroll to top smoothly when params change + }, [location]); const { colorMode } = useColorMode(); - const { transactions, transactionsApi } = useContext(GlobalStateContext); + 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 [currentPage, setCurrentPage] = useState(1); // Tracks the current page - const [pageSize, setPageSize] = useState(10); // Number of items per page - const [totalItems, setTotalItems] = useState(25998); // Total items in the dataset - const [isLoading, setIsLoading] = useState(true); // Loading state - + const { + data: transCount, + isLoading: isTransCountLoading, + refetch: transCountRefetch, + errors: transCountErrors, + } = useGetTransCountQuery(); + // Fetch transactions based on the current page and page size + const { + data: transAll, + isLoading: isTransAllLoading, + refetch: transAllRefetch, + } = useGetTransAllQuery({ + pageNumber: currentPage, + pageSize: pageSize, + }); + // Set interval to refetch data every 30 seconds + // useEffect(() => { + // const intervalId = setInterval(() => { + // transCountRefetch(); // Refetch transaction count + // transAllRefetch(); // Refetch transactions + // }, 30000); // 30000 ms = 30 seconds - console.log(transactionsApi?.data?.items); + // return () => clearInterval(intervalId); // Clear interval on component unmount + // }, [transCountRefetch, transAllRefetch]); + + useEffect(() => { + setTotalItems(transCount?.data?.transactionCount); + }, [transCount]); function copyToClipboard(text) { navigator.clipboard @@ -49,29 +94,77 @@ const LatestTransactions = () => { console.error("Failed to copy text: ", err); }); } + + + const handleRefreshClick = () => { + setIsRotating(true); // Start rotation + // Simulate any refresh logic here + setTimeout(() => { + setIsRotating(false); // Stop rotation after 3 seconds + }, 3000); // 3 seconds = 3000ms + }; return ( - - - - - Sr. no - - - Transactions - - + + + + Sr. no + + + Transactions + + - {transactionsApi?.data?.items?.map(({transactionId, smartContract, sender, receiver, contract, timestamp, amount, transactionType, subNetworkId, }, index) => ( + + + + + {transAll?.data?.items?.map( + ( + { + transactionId, + smartContract, + sender, + receiver, + contract, + timestamp, + amount, + transactionType, + subNetworkId, + }, + index + ) => ( { > {index + 1}. - + {/* */} @@ -130,29 +221,30 @@ const LatestTransactions = () => { - - + + Sender: - @@ -165,30 +257,31 @@ const LatestTransactions = () => { ml={1} cursor={"pointer"} > - copyToClipboard(sender)} - /> + copyToClipboard(sender)} /> - + - - + + Receiver: - navigate(`/did-info/${receiver}`) - } + onClick={() => navigate(`/did-info/${receiver}`)} > {receiver} @@ -219,18 +312,22 @@ const LatestTransactions = () => { fontSize={{ base: "xs", md: "sm" }} mb={3} > - {smartContract&& - - Smart contract ID : - - - {smartContract} - - } + {smartContract && ( + + + Smart contract ID : + + + {smartContract} + + + )} { > Amount: - + + {amount} @@ -273,8 +376,8 @@ const LatestTransactions = () => { color="#7B7B7B" /> - - + + @@ -291,7 +394,8 @@ const LatestTransactions = () => { - Subnet ID/Main net : + {subNetworkId === "MainNet" ? "Main net" : "Subnet ID"}{" "} + : { {/* */} - ))} - - + - - + currentPage={currentPage} + /> + ); }; diff --git a/src/pages/Home.jsx b/src/pages/Home.jsx index 79086ba..7a28217 100644 --- a/src/pages/Home.jsx +++ b/src/pages/Home.jsx @@ -22,7 +22,6 @@ import Pagination from "../components/Pagination"; import bannerImage from "../assets/images/bannerImg.png"; import bannerImageMobile from "../assets/images/bannerImgmobile.png"; import { BiSearchAlt } from "react-icons/bi"; -import { useGetTransCountQuery } from "../Services/api.service"; const Home = () => { const [isSwitchOn, setIsSwitchOn] = useState(true); @@ -30,13 +29,6 @@ const Home = () => { const [ searchTerm, setSearchTerm] = useState("") const navigate = useNavigate() - const { - data, - isLoading, - refetch, - errors - } = useGetTransCountQuery() - console.log(data?.data); return ( { Latest Transactions , }, + { + path: "/view-all-transaction", + element: , + }, { path: "/transaction/:id",