Siddhesh.More/rubix-explore
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

update

Browse Source
This commit is contained in:
Siddhesh More
2024-10-21 16:29:15 +05:30
parent 104076f589
commit 39b4865e47
6 changed files with 215 additions and 91 deletions
Download Patch File Download Diff File Expand all files Collapse all files

267
src/components/LatestTransactions/LatestTransactions.jsx
View File

@@ -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 (
<Box>
<Container maxW="6xl">
<Grid
templateColumns={{ base: "100% 0%", md: "10% 90%" }}
gap={0}
bg={colorMode === "light" ? "#230A79" : "#232127"}
// bg={"#232127"}
roundedTop={"lg"}
>
<GridItem display={{ base: "none", md: "grid" }} p={2}>
<Text color={"#fff"}>Sr. no</Text>
</GridItem>
<GridItem p={2}>
<Text color={"#fff"}>Transactions</Text>
</GridItem>
</Grid>
<Container
mt={location?.pathname === "/view-all-transaction" ? 24 : 0}
mb={location?.pathname === "/view-all-transaction" ? 15 : 0}
maxW="6xl"
>
<Grid
position={"relative"}
templateColumns={{ base: "100% 0%", md: "10% 90%" }}
gap={0}
bg={colorMode === "light" ? "#230A79" : "#232127"}
// bg={"#232127"}
roundedTop={"lg"}
>
<GridItem display={{ base: "none", md: "grid" }} p={2}>
<Text color={"#fff"}>Sr. no</Text>
</GridItem>
<GridItem p={2}>
<Text color={"#fff"}>Transactions</Text>
</GridItem>
<Box
roundedBottom={"lg"}
overflow={"hidden"}
boxShadow={"rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;"}
as="span"
cursor={"pointer"}
bg={"#434147"}
position={"absolute"}
right={0}
rounded={"md"}
m={1.5}
p={1.5}
onClick={handleRefreshClick} // Trigger the rotation when clicked
>
{transactionsApi?.data?.items?.map(({transactionId, smartContract, sender, receiver, contract, timestamp, amount, transactionType, subNetworkId, }, index) => (
<HiOutlineRefresh
style={{
animation: true
? `${rotate} 1s linear infinite` // Apply the rotation animation
: "none",
}}
/>
</Box>
</Grid>
<Box
roundedBottom={"lg"}
overflow={"hidden"}
boxShadow={"rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;"}
>
{transAll?.data?.items?.map(
(
{
transactionId,
smartContract,
sender,
receiver,
contract,
timestamp,
amount,
transactionType,
subNetworkId,
},
index
) => (
<Grid
bg={
index % 2 === 0
@@ -93,24 +186,22 @@ const LatestTransactions = () => {
>
{index + 1}.
</GridItem>
<GridItem p={4}>
<GridItem p={4}>
{/* <Box> */}
<Text // This ensures the text is truncated with ellipsis when it overflows ss__298
display={"flex"}
fontSize={{base:"xs", md:"sm" }}
fontSize={{ base: "xs", md: "sm" }}
mb={2}
color={colorMode === "light" ? "#230A79" : "#B09AFF"}
>
<Text
maxW={{base:"100%",md:"100%"}} // Set a max-width to control when the truncation happens
maxW={{ base: "100%", md: "100%" }} // Set a max-width to control when the truncation happens
// overflow={'hidden'} // Ensure overflow is hidden
whiteSpace={"nowrap"} // Prevent the text from wrapping
textOverflow={"ellipsis"}
isTruncated
isTruncated
cursor={"pointer"}
onClick={() =>
navigate(`/transaction/${transactionId}`)
}
onClick={() => navigate(`/transaction/${transactionId}`)}
>
{transactionId}
</Text>
@@ -130,29 +221,30 @@ const LatestTransactions = () => {
</Text>
</Text>
<HStack fontSize={{base:"xs", md:"sm" }} gap={{base:2,md:4}} mb={2}>
<Text color={colorMode === "light" ? "#0F0F0F" : "#E8E8E8"}>
<HStack
fontSize={{ base: "xs", md: "sm" }}
gap={{ base: 2, md: 4 }}
mb={2}
>
<Text color={colorMode === "light" ? "#0F0F0F" : "#E8E8E8"}>
Sender:
</Text>
<HStack
color={colorMode === "light" ? "#230A79" : "#B09AFF"}
textDecoration={"underline"}
w={'84%'}
w={"84%"}
// justifyContent={'space-between'}
fontSize={{base:"xs", md:"sm" }}
fontSize={{ base: "xs", md: "sm" }}
>
<Text
cursor={"pointer"}
maxW={{base:"90%",md:"100%"}} // Set a max-width to control when the truncation happens
cursor={"pointer"}
maxW={{ base: "90%", md: "100%" }} // Set a max-width to control when the truncation happens
// overflow={'hidden'} // Ensure overflow is hidden
whiteSpace={"nowrap"} // Prevent the text from wrapping
textOverflow={"ellipsis"}
isTruncated
onClick={() =>
navigate(`/did-info/${sender}`)
}
onClick={() => navigate(`/did-info/${sender}`)}
>
{sender}
</Text>
@@ -165,30 +257,31 @@ const LatestTransactions = () => {
ml={1}
cursor={"pointer"}
>
<MdContentCopy
onClick={() => copyToClipboard(sender)}
/>
<MdContentCopy onClick={() => copyToClipboard(sender)} />
</Text>
</HStack>
</HStack>
</HStack>
<HStack fontSize={{base:"xs", md:"sm" }} cursor={"pointer"} gap={{base:2,md:4}} mb={3}>
<Text color={colorMode === "light" ? "#0F0F0F" : "#E8E8E8"}>
<HStack
fontSize={{ base: "xs", md: "sm" }}
cursor={"pointer"}
gap={{ base: 2, md: 4 }}
mb={3}
>
<Text color={colorMode === "light" ? "#0F0F0F" : "#E8E8E8"}>
Receiver:
</Text>
<HStack
color={colorMode === "light" ? "#230A79" : "#B09AFF"}
textDecoration={"underline"}
fontSize={{base:"xs", md:"sm" }}
fontSize={{ base: "xs", md: "sm" }}
>
<Text
cursor={"pointer"}
maxW={{base:"55%",md:"100%"}}
cursor={"pointer"}
maxW={{ base: "55%", md: "100%" }}
whiteSpace={"nowrap"} // Prevent the text from wrapping
textOverflow={"ellipsis"}
isTruncated
onClick={() =>
navigate(`/did-info/${receiver}`)
}
onClick={() => navigate(`/did-info/${receiver}`)}
>
{receiver}
</Text>
@@ -219,18 +312,22 @@ const LatestTransactions = () => {
fontSize={{ base: "xs", md: "sm" }}
mb={3}
>
{smartContract&&<Box>
<Text
mb={2}
// fontSize={{base:"xs", md:"sm" }}
color={colorMode === "light" ? "#7B7B7B" : "#E8E8E8"}
>
Smart contract ID :
</Text>
<Text color={colorMode === "light" ? "#230A79" : "#B09AFF"}>
<Link to="/smart-contract">{smartContract}</Link>
</Text>
</Box>}
{smartContract && (
<Box>
<Text
mb={2}
// fontSize={{base:"xs", md:"sm" }}
color={colorMode === "light" ? "#7B7B7B" : "#E8E8E8"}
>
Smart contract ID :
</Text>
<Text
color={colorMode === "light" ? "#230A79" : "#B09AFF"}
>
<Link to="/smart-contract">{smartContract}</Link>
</Text>
</Box>
)}
<Box>
<Text
mb={2}
@@ -249,7 +346,13 @@ const LatestTransactions = () => {
>
Amount:
</Text>
<Text color={colorMode === "light" ? "#230A79" : "#B09AFF"}>
<Text
display={"flex"}
gap={2}
alignItems={"center"}
color={colorMode === "light" ? "#230A79" : "#B09AFF"}
>
<Image src={rbtLogoOutline} />
{amount}
</Text>
</Box>
@@ -273,8 +376,8 @@ const LatestTransactions = () => {
color="#7B7B7B"
/>
<VStack fontSize={{base:"xs", md:"sm" }}>
<HStack w={"100%"} justifyContent={"flex-start"}>
<VStack fontSize={{ base: "xs", md: "sm" }}>
<HStack w={"100%"} justifyContent={"flex-start"}>
<Text
color={colorMode === "light" ? "#7B7B7B" : "#E8E8E8"}
>
@@ -291,7 +394,8 @@ const LatestTransactions = () => {
<Text
color={colorMode === "light" ? "#7B7B7B" : "#E8E8E8"}
>
Subnet ID/Main net :
{subNetworkId === "MainNet" ? "Main net" : "Subnet ID"}{" "}
:
</Text>
<Text
color={colorMode === "light" ? "#230A79" : "#B09AFF"}
@@ -309,17 +413,18 @@ const LatestTransactions = () => {
{/* </Box> */}
</GridItem>
</Grid>
))}
</Box>
<Pagination
)
)}
</Box>
<Pagination
pageSize={pageSize}
setPageSize={setPageSize}
totalItems={totalItems}
isLoading={isLoading}
isLoading={isTransCountLoading}
setCurrentPage={setCurrentPage}
currentPage={currentPage} />
</Container>
</Box>
currentPage={currentPage}
/>
</Container>
);
};