308 lines
12 KiB
JavaScript
308 lines
12 KiB
JavaScript
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 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";
|
|
|
|
const MainNetOveriew = () => {
|
|
|
|
const { overview } = useContext(GlobalStateContext);
|
|
const { colorMode} = useColorMode();
|
|
const params = useParams()
|
|
|
|
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);
|
|
});
|
|
}
|
|
|
|
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"}}>
|
|
Main net ID - {params?.id}
|
|
</Heading>
|
|
{/* <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>
|
|
<Container maxW="6xl">
|
|
<Grid
|
|
templateColumns={{ base: "100% 0%", md: "10% 90%" }}
|
|
gap={0}
|
|
bg={colorMode === "light" ? "#230A79" : "#232127"}
|
|
// bg={"#232127"}
|
|
borderTopRightRadius={4}
|
|
borderTopLeftRadius={4}
|
|
>
|
|
<GridItem p={2} display={{ base: "none", md: "grid" }}>
|
|
<Text color={"#fff"}>Sr. no</Text>
|
|
</GridItem>
|
|
<GridItem p={2} >
|
|
<Text color={"#fff"}>Transactions</Text>
|
|
</GridItem>
|
|
</Grid>
|
|
<Box boxShadow={"rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;"}>
|
|
{overview.map((transaction, index) => (
|
|
<Grid
|
|
bg={
|
|
index % 2 === 0
|
|
? colorMode === "light"
|
|
? "#F2EFFF"
|
|
: "#312F35"
|
|
: colorMode === "light"
|
|
? "#fff"
|
|
: "#232127"
|
|
}
|
|
key={transaction.id}
|
|
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/${transaction?.description}`)
|
|
}
|
|
>
|
|
{transaction.description}
|
|
</Text>
|
|
|
|
<Text
|
|
_hover={{ bg: "gray.50" }}
|
|
transition={"0.5s"}
|
|
rounded={"sm"}
|
|
p={1}
|
|
as={"span"}
|
|
ml={1}
|
|
cursor={"pointer"}
|
|
>
|
|
<MdContentCopy
|
|
onClick={() => copyToClipboard(transaction.description)}
|
|
/>
|
|
</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/${transaction.sender}`)
|
|
}
|
|
>
|
|
{transaction.sender}
|
|
</Text>
|
|
<Text
|
|
_hover={{ bg: "gray.50" }}
|
|
transition={"0.5s"}
|
|
rounded={"sm"}
|
|
p={1}
|
|
as={"span"}
|
|
ml={1}
|
|
cursor={"pointer"}
|
|
>
|
|
<MdContentCopy
|
|
onClick={() => copyToClipboard(transaction.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/${transaction.receiver}`)
|
|
}
|
|
>
|
|
{transaction.receiver}
|
|
</Text>
|
|
<Text
|
|
_hover={{ bg: "gray.50" }}
|
|
transition={"0.5s"}
|
|
rounded={"sm"}
|
|
p={1}
|
|
as={"span"}
|
|
ml={1}
|
|
cursor={"pointer"}
|
|
>
|
|
<MdContentCopy
|
|
onClick={() => copyToClipboard(transaction.receiver)}
|
|
/>
|
|
</Text>
|
|
</HStack>
|
|
</HStack>
|
|
<HStack
|
|
flexDirection={{ base: "column", md: "row" }}
|
|
justifyContent={{ base: "", md: "space-between" }}
|
|
alignItems={{ base: "flex-start", md: "" }}
|
|
// flexWrap={'wrap'}
|
|
|
|
// w={"80%"}
|
|
w={{ base: "100%", md: "80%" }}
|
|
fontSize={{ base: "xs", md: "sm" }}
|
|
mb={3}
|
|
>
|
|
<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">{transaction.contract}</Link>
|
|
</Text>
|
|
</Box>
|
|
<Box>
|
|
<Text
|
|
mb={2}
|
|
color={colorMode === "light" ? "#7B7B7B" : "#E8E8E8"}
|
|
>
|
|
Date and Time Stamp :
|
|
</Text>
|
|
<Text color={colorMode === "light" ? "#230A79" : "#B09AFF"}>
|
|
{transaction.date}
|
|
</Text>
|
|
</Box>
|
|
<Box>
|
|
<Text
|
|
mb={2}
|
|
color={colorMode === "light" ? "#7B7B7B" : "#E8E8E8"}
|
|
>
|
|
Amount:
|
|
</Text>
|
|
<Text color={colorMode === "light" ? "#230A79" : "#B09AFF"}>
|
|
{transaction.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>{transaction.transactionType}</Text>
|
|
</Text>
|
|
</HStack>
|
|
|
|
</VStack>
|
|
</HStack>
|
|
{/* </Box> */}
|
|
</GridItem>
|
|
</Grid>
|
|
))}
|
|
</Box>
|
|
<Pagination />
|
|
</Container>
|
|
</Box>
|
|
</Box>
|
|
);
|
|
};
|
|
|
|
export default MainNetOveriew;
|