309 lines
11 KiB
JavaScript
309 lines
11 KiB
JavaScript
import {
|
|
Box,
|
|
Container,
|
|
Grid,
|
|
GridItem,
|
|
HStack,
|
|
Icon,
|
|
Text,
|
|
VStack,
|
|
useColorMode,
|
|
useToast,
|
|
} from "@chakra-ui/react";
|
|
import React, { useContext } 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 ToastBox from "../ToastBox";
|
|
|
|
const LatestTransactions = () => {
|
|
const toast = useToast();
|
|
const navigate = useNavigate();
|
|
|
|
const { colorMode } = useColorMode();
|
|
const { transactions } = useContext(GlobalStateContext);
|
|
|
|
function copyToClipboard(text) {
|
|
navigator.clipboard
|
|
.writeText(text)
|
|
.then(() => {
|
|
toast({
|
|
render: () => (
|
|
<ToastBox status={"warn"} message={"Text copied to clipboard"} />
|
|
),
|
|
});
|
|
})
|
|
.catch((err) => {
|
|
console.error("Failed to copy text: ", err);
|
|
});
|
|
}
|
|
return (
|
|
<Box>
|
|
<Container maxW="6xl">
|
|
<Grid
|
|
templateColumns={{ base: "100% 0%", md: "90% 10%" }}
|
|
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>
|
|
<Box
|
|
roundedBottom={"lg"}
|
|
overflow={"hidden"}
|
|
boxShadow={"rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;"}
|
|
>
|
|
{transactions.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" }}
|
|
>
|
|
<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>
|
|
|
|
<HStack>
|
|
<Text
|
|
color={colorMode === "light" ? "#7B7B7B" : "#E8E8E8"}
|
|
>
|
|
Subnet ID/Main net :
|
|
</Text>
|
|
<Text
|
|
color={colorMode === "light" ? "#230A79" : "#B09AFF"}
|
|
>
|
|
<Link
|
|
to={`/subnet-id-overview/${transaction.subnetID}`}
|
|
style={{ fontWeight: "inherit" }}
|
|
>
|
|
{transaction.subnetID}
|
|
</Link>
|
|
</Text>
|
|
</HStack>
|
|
</VStack>
|
|
</HStack>
|
|
{/* </Box> */}
|
|
</GridItem>
|
|
</Grid>
|
|
))}
|
|
</Box>
|
|
<Pagination />
|
|
</Container>
|
|
</Box>
|
|
);
|
|
};
|
|
|
|
export default LatestTransactions;
|