updated
This commit is contained in:
@@ -1,4 +1,15 @@
|
||||
import { Box, Container, Grid, GridItem, HStack, Text, VStack, useColorMode, useToast } from "@chakra-ui/react";
|
||||
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";
|
||||
@@ -6,15 +17,13 @@ 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 toast = useToast();
|
||||
const navigate = useNavigate();
|
||||
|
||||
const { colorMode } = useColorMode();
|
||||
const { transactions } = useContext(GlobalStateContext);
|
||||
|
||||
const { colorMode} = useColorMode();
|
||||
const { transactions } = useContext(GlobalStateContext);
|
||||
|
||||
function copyToClipboard(text) {
|
||||
navigator.clipboard
|
||||
.writeText(text)
|
||||
@@ -31,111 +40,260 @@ const LatestTransactions = () => {
|
||||
console.error("Failed to copy text: ", err);
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
return (
|
||||
<Box>
|
||||
<Container maxW="6xl">
|
||||
<Grid
|
||||
templateColumns="10% 90%"
|
||||
templateColumns={{ basee: "10% 90%", md: "100% 0%" }}
|
||||
gap={0}
|
||||
bg={colorMode === "light" ? "#230A79" : "#232127"}
|
||||
// bg={"#232127"}
|
||||
roundedTop={'lg'}
|
||||
roundedTop={"lg"}
|
||||
>
|
||||
<GridItem p={2}>
|
||||
<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;"}>
|
||||
<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")}
|
||||
bg={
|
||||
index % 2 === 0
|
||||
? colorMode === "light"
|
||||
? "#F2EFFF"
|
||||
: "#312F35"
|
||||
: colorMode === "light"
|
||||
? "#fff"
|
||||
: "#232127"
|
||||
}
|
||||
key={transaction.id}
|
||||
templateColumns="10% 90%"
|
||||
templateColumns={{ basee: "10% 90%", md: "100% 0%" }}
|
||||
gap={0}
|
||||
>
|
||||
<GridItem p={4} color={colorMode === "light" ? "#000" : "#fff"}>{index + 1}.</GridItem>
|
||||
<GridItem p={4}>
|
||||
<Box>
|
||||
<Text display={'flex'} fontSize={"sm"} mb={2} color={colorMode === "light" ? "#230A79" : "#B09AFF"}>
|
||||
<Link to={`/transaction/${transaction?.description}`}> {transaction.description}</Link>
|
||||
|
||||
<Text _hover={{bg:"gray.50"}} transition={'0.5s'} rounded={'sm'} p={1} as={"span"} ml={1} cursor={"pointer"}>
|
||||
<MdContentCopy onClick={() => copyToClipboard(transaction.description)}/>
|
||||
</Text>
|
||||
<GridItem
|
||||
display={{ base: "none", md: "grid" }}
|
||||
p={4}
|
||||
color={colorMode === "light" ? "#000" : "#fff"}
|
||||
>
|
||||
{index + 1}.
|
||||
</GridItem>
|
||||
<GridItem overflow={"hidden"} p={4}>
|
||||
{/* <Box> */}
|
||||
<Text // This ensures the text is truncated with ellipsis when it overflows
|
||||
display={"flex"}
|
||||
fontSize={"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>
|
||||
|
||||
<HStack fontSize={"sm"} gap={4} mb={2}>
|
||||
<Text color={colorMode === "light" ? "#0F0F0F" : "#E8E8E8"}>Sender :</Text>
|
||||
<HStack color={colorMode === "light" ? "#230A79" : "#B09AFF"} textDecoration={"underline"}>
|
||||
<Text cursor={"pointer"} 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 cursor={'pointer'} fontSize={"sm"} gap={4} mb={3}>
|
||||
<Text color={colorMode === "light" ? "#0F0F0F" : "#E8E8E8"}>Receiver :</Text>
|
||||
<HStack color={colorMode === "light" ? "#230A79" : "#B09AFF"} textDecoration={"underline"}>
|
||||
<Text 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
|
||||
display={"flex"}
|
||||
justifyContent={"space-between"}
|
||||
w={"80%"}
|
||||
fontSize={"sm"}
|
||||
mb={3}
|
||||
<Text
|
||||
_hover={{ bg: "gray.50" }}
|
||||
transition={"0.5s"}
|
||||
rounded={"sm"}
|
||||
p={1}
|
||||
as={"span"}
|
||||
ml={1}
|
||||
cursor={"pointer"}
|
||||
>
|
||||
<Box>
|
||||
<Text mb={2} 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"}>
|
||||
<MdOutlineErrorOutline
|
||||
fontSize={"18px"}
|
||||
style={{ marginTop: "1px",position:"absolute",top:"2px",left:"-24px" }}
|
||||
color="#7B7B7B"
|
||||
<MdContentCopy
|
||||
onClick={() => copyToClipboard(transaction.description)}
|
||||
/>
|
||||
</Text>
|
||||
</Text>
|
||||
|
||||
<VStack>
|
||||
<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 fontSize={"sm"} gap={4} mb={2}>
|
||||
<Text color={colorMode === "light" ? "#0F0F0F" : "#E8E8E8"}>
|
||||
Sender:
|
||||
</Text>
|
||||
<HStack
|
||||
color={colorMode === "light" ? "#230A79" : "#B09AFF"}
|
||||
textDecoration={"underline"}
|
||||
>
|
||||
<Text
|
||||
cursor={"pointer"}
|
||||
maxW={{base:"70%",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>
|
||||
</Box>
|
||||
</HStack>
|
||||
<HStack cursor={"pointer"} fontSize={"sm"} gap={4} mb={3}>
|
||||
<Text color={colorMode === "light" ? "#0F0F0F" : "#E8E8E8"}>
|
||||
Receiver:
|
||||
</Text>
|
||||
<HStack
|
||||
color={colorMode === "light" ? "#230A79" : "#B09AFF"}
|
||||
textDecoration={"underline"}
|
||||
>
|
||||
<Text
|
||||
cursor={"pointer"}
|
||||
maxW={{base:"65%",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.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}
|
||||
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>
|
||||
<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>
|
||||
))}
|
||||
|
||||
@@ -35,7 +35,7 @@ const Home = () => {
|
||||
backgroundSize="contain"
|
||||
backgroundRepeat="no-repeat">
|
||||
<Box>
|
||||
<VStack pt={28} mb={14}>
|
||||
<VStack pt={{base:20,md:28}} mb={14}>
|
||||
<Container maxW="3xl" position={"relative"}>
|
||||
<Box w={'100%'} display={"flex"} alignItems={"center"} >
|
||||
<InputGroup
|
||||
|
||||
Reference in New Issue
Block a user