463 lines
16 KiB
JavaScript
463 lines
16 KiB
JavaScript
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 { 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";
|
|
import Search from '../assets/images/search.png'
|
|
import { formatUTCToDDMMYYHHMMSS } from "../Constants/Constants";
|
|
|
|
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
|
|
}, []);
|
|
|
|
function copyToClipboard(text) {
|
|
navigator.clipboard
|
|
.writeText(text)
|
|
.then(() => {
|
|
// console.log('Text copied to clipboard');
|
|
// alert('Text copied to clipboard');
|
|
toast({
|
|
render: () => (
|
|
<ToastBox status={"warn"} message={"Text copied to clipboard"} />
|
|
),
|
|
});
|
|
})
|
|
.catch((err) => {
|
|
console.error("Failed to copy text: ", err);
|
|
});
|
|
}
|
|
|
|
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]);
|
|
|
|
|
|
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 (
|
|
<Box minH={"100vh"} p={"6rem 0 4rem 0"} backgroundImage={colorMode !== "light" ? `url(${bannerImage})` : "none"} position={"relative"} backgroundSize="contain" backgroundRepeat="no-repeat">
|
|
<Container
|
|
maxW="6xl"
|
|
color="white"
|
|
display={{base :"block",md : "flex"}}
|
|
justifyContent={"space-between"}
|
|
mb={10}
|
|
>
|
|
<Heading fontSize={"md"} fontWeight={400} color={colorMode === "light" ? "#000" : "#fff"} mb={{base :"10px" ,md : "0px"}}>
|
|
Subnet ID - {params?.id}
|
|
</Heading>
|
|
<HStack to="" style={{ fontSize: "14px" }} color={colorMode === "light" ? "#000" : "#fff"} display={"flex"} gap={"3"}>
|
|
<Text as={"span"}>Total Value Locked (TVL)</Text> <Text as={"span"}>{data?.data?.tvl} RBT</Text>
|
|
</HStack>
|
|
{/* <Text to="" style={{ fontSize: "14px" }} color={colorMode === "light" ? "#000" : "#fff"} display={"flex"} gap={"3"}>
|
|
View total number of records
|
|
<Select width={"70px"} rounded="md" size="xs">
|
|
<option value='option1'>10</option>
|
|
<option value='option2'>20</option>
|
|
<option value='option3'>30</option>
|
|
</Select>
|
|
</Text> */}
|
|
</Container>
|
|
<Box>
|
|
{data?.data?.items?.length===0 || isLoading?<HStack h={'35vh'} justifyContent={"center"} mt={10}>
|
|
<Image w={"40px"} src={Search}/>
|
|
<Text as={"span"} color={"#787878"}>{"No records found"}</Text>
|
|
</HStack>:<Container maxW="6xl">
|
|
<Grid position={'relative'}
|
|
templateColumns={{ base: "100% 0%", md: "10% 90%" }}
|
|
gap={0}
|
|
bg={colorMode === "light" ? "#230A79" : "#232127"}
|
|
// bg={"#232127"}
|
|
borderTopRightRadius={4}
|
|
borderTopLeftRadius={4}
|
|
>
|
|
<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
|
|
as="span"
|
|
cursor={"pointer"}
|
|
position={"absolute"}
|
|
right={0}
|
|
m={1.5}
|
|
display={"flex"}
|
|
alignItems={"center"}
|
|
gap={2}
|
|
onClick={handleRefreshClick} // Trigger the rotation when clicked
|
|
>
|
|
<Text
|
|
as={"span"}
|
|
fontSize={"xs"}
|
|
color={colorMode === "light" ? "#fff" : "#ccc"}
|
|
>
|
|
Last refresh {relativeRefreshTime}{" "}
|
|
</Text>
|
|
<Icon
|
|
bg={colorMode === "light" ? "#fff" : "#434147"}
|
|
p={1.5}
|
|
boxSize={7}
|
|
rounded={"full"}
|
|
as={HiOutlineRefresh}
|
|
animation={
|
|
isRotating || isLoading
|
|
? `${rotate} 1s linear infinite`
|
|
: "none"
|
|
}
|
|
/>
|
|
</Box>
|
|
</Grid>
|
|
<Box boxShadow={"rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;"}>
|
|
{data?.data?.items?.map(
|
|
(
|
|
{
|
|
transactionId,
|
|
smartContract,
|
|
sender,
|
|
receiver,
|
|
contract,
|
|
timestamp,
|
|
amount,
|
|
transactionType,
|
|
subNetworkId,
|
|
},
|
|
index
|
|
) => (
|
|
<Grid
|
|
bg={
|
|
index % 2 === 0
|
|
? colorMode === "light"
|
|
? "#F2EFFF"
|
|
: "#312F35"
|
|
: colorMode === "light"
|
|
? "#fff"
|
|
: "#232127"
|
|
}
|
|
key={transactionId}
|
|
templateColumns={{ base: "100% 0%", md: "10% 90%" }}
|
|
gap={0}
|
|
>
|
|
<GridItem
|
|
display={{ base: "none", md: "grid" }}
|
|
p={4}
|
|
color={colorMode === "light" ? "#000" : "#fff"}
|
|
>
|
|
{index + 1}.
|
|
</GridItem>
|
|
<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" }}
|
|
mb={2}
|
|
color={colorMode === "light" ? "#230A79" : "#B09AFF"}
|
|
>
|
|
<Text
|
|
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
|
|
cursor={"pointer"}
|
|
onClick={() => navigate(`/transaction/${transactionId}`)}
|
|
>
|
|
{transactionId}
|
|
</Text>
|
|
|
|
<Text
|
|
_hover={{ bg: "gray.50" }}
|
|
transition={"0.5s"}
|
|
rounded={"sm"}
|
|
p={1}
|
|
as={"span"}
|
|
ml={1}
|
|
cursor={"pointer"}
|
|
>
|
|
<MdContentCopy
|
|
onClick={() => copyToClipboard(transactionId)}
|
|
/>
|
|
</Text>
|
|
</Text>
|
|
|
|
<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%"}
|
|
// justifyContent={'space-between'}
|
|
fontSize={{ base: "xs", md: "sm" }}
|
|
>
|
|
<Text
|
|
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}`)}
|
|
>
|
|
{sender}
|
|
</Text>
|
|
<Text
|
|
_hover={{ bg: "gray.50" }}
|
|
transition={"0.5s"}
|
|
rounded={"sm"}
|
|
p={1}
|
|
as={"span"}
|
|
ml={1}
|
|
cursor={"pointer"}
|
|
>
|
|
<MdContentCopy onClick={() => copyToClipboard(sender)} />
|
|
</Text>
|
|
</HStack>
|
|
</HStack>
|
|
<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" }}
|
|
isTruncated
|
|
>
|
|
<Text
|
|
cursor={"pointer"}
|
|
maxW={{ base: "55%", md: "100%" }}
|
|
whiteSpace={"nowrap"} // Prevent the text from wrapping
|
|
textOverflow={"ellipsis"}
|
|
isTruncated
|
|
onClick={() => navigate(`/did-info/${receiver}`)}
|
|
>
|
|
{receiver}
|
|
</Text>
|
|
<Text
|
|
_hover={{ bg: "gray.50" }}
|
|
transition={"0.5s"}
|
|
rounded={"sm"}
|
|
p={1}
|
|
as={"span"}
|
|
ml={1}
|
|
cursor={"pointer"}
|
|
>
|
|
<MdContentCopy
|
|
onClick={() => copyToClipboard(receiver)}
|
|
/>
|
|
</Text>
|
|
</HStack>
|
|
</HStack>
|
|
<HStack
|
|
flexDirection={{ base: "column", md: "row" }}
|
|
justifyContent={{ base: "", md: "flex-start" }}
|
|
gap={{base:4,md:44}}
|
|
alignItems={{ base: "flex-start", md: "" }}
|
|
// flexWrap={'wrap'}
|
|
|
|
// w={"80%"}
|
|
w={{ base: "100%", md: "80%" }}
|
|
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>
|
|
)}
|
|
<Box>
|
|
<Text
|
|
mb={2}
|
|
color={colorMode === "light" ? "#7B7B7B" : "#E8E8E8"}
|
|
>
|
|
Date and Time Stamp :
|
|
</Text>
|
|
<Text color={colorMode === "light" ? "#230A79" : "#B09AFF"}>
|
|
{formatUTCToDDMMYYHHMMSS(timestamp)}
|
|
</Text>
|
|
</Box>
|
|
<Box>
|
|
<Text
|
|
mb={2}
|
|
color={colorMode === "light" ? "#7B7B7B" : "#E8E8E8"}
|
|
>
|
|
Amount:
|
|
</Text>
|
|
<Text
|
|
display={"flex"}
|
|
gap={2}
|
|
alignItems={"center"}
|
|
color={colorMode === "light" ? "#230A79" : "#B09AFF"}
|
|
>
|
|
<Image w={4} src={rbtLogoOutline} />
|
|
{amount}
|
|
</Text>
|
|
</Box>
|
|
</HStack>
|
|
|
|
<HStack
|
|
fontSize={"sm"}
|
|
alignItems={"flex-start"}
|
|
position={"relative"}
|
|
>
|
|
<Icon
|
|
as={MdOutlineErrorOutline}
|
|
fontSize={"18px"}
|
|
display={{ base: "none", md: "block" }}
|
|
style={{
|
|
marginTop: "1px",
|
|
position: "absolute",
|
|
top: "2px",
|
|
left: "-24px",
|
|
}}
|
|
color="#7B7B7B"
|
|
/>
|
|
|
|
<VStack fontSize={{ base: "xs", md: "sm" }}>
|
|
<HStack w={"100%"} justifyContent={"flex-start"}>
|
|
<Text
|
|
color={colorMode === "light" ? "#7B7B7B" : "#E8E8E8"}
|
|
>
|
|
Transaction type :
|
|
</Text>
|
|
<Text
|
|
color={colorMode === "light" ? "#230A79" : "#B09AFF"}
|
|
>
|
|
<Text>{transactionType}</Text>
|
|
</Text>
|
|
</HStack>
|
|
|
|
|
|
|
|
<HStack w={"100%"} justifyContent={'flex-start'}>
|
|
<Text
|
|
color={colorMode === "light" ? "#7B7B7B" : "#E8E8E8"}
|
|
>
|
|
{subNetworkId === "MainNet" ? "Main net" : "Subnet ID"}
|
|
:
|
|
</Text>
|
|
<Text
|
|
color={colorMode === "light" ? "#230A79" : "#B09AFF"}
|
|
>
|
|
<Link
|
|
to={`/subnet-id-overview/${subNetworkId}`}
|
|
style={{ fontWeight: "inherit" }}
|
|
>
|
|
{subNetworkId}
|
|
</Link>
|
|
</Text>
|
|
</HStack>
|
|
</VStack>
|
|
</HStack>
|
|
{/* </Box> */}
|
|
</GridItem>
|
|
|
|
|
|
</Grid>
|
|
)
|
|
)}
|
|
</Box>
|
|
<Pagination
|
|
pageSize={pageSize}
|
|
setPageSize={setPageSize}
|
|
totalItems={totalItems}
|
|
isLoading={isLoading}
|
|
setCurrentPage={setCurrentPage}
|
|
currentPage={currentPage}
|
|
/>
|
|
</Container>}
|
|
</Box>
|
|
</Box>
|
|
);
|
|
};
|
|
|
|
export default SubnetInner;
|