table update
This commit is contained in:
YasinShaikh123
@@ -18,6 +18,18 @@ const customTheme = extendTheme({
|
||||
800: "#000000", // Black
|
||||
900: "#000000", // Black (darkest)
|
||||
},
|
||||
darkPurple: {
|
||||
50: "#E0DEE2", // Lightest shade
|
||||
100: "#B8B4BB", // Light grayish-purple
|
||||
200: "#8F8B93", // Lighter grayish-purple
|
||||
300: "#66626C", // Light-medium grayish-purple
|
||||
400: "#3D3A44", // Medium grayish-purple (darker)
|
||||
500: "#312F35", // Base color (dark purple)
|
||||
600: "#29262D", // Slightly darker
|
||||
700: "#201E23", // Darker shade
|
||||
800: "#171419", // Very dark
|
||||
900: "#0F0C0F", // Almost black (darkest shade)
|
||||
},
|
||||
deepPurple: {
|
||||
50: "#F1EAF4",
|
||||
100: "#DBC7E4",
|
||||
@@ -30,6 +42,19 @@ const customTheme = extendTheme({
|
||||
800: "#10041C",
|
||||
900: "#0A0212",
|
||||
},
|
||||
lightWhite: {
|
||||
50: "#ffffff", // Pure white
|
||||
100: "#f2f2f2", // Very light gray
|
||||
200: "#e6e6e6", // Lighter gray
|
||||
300: "#cccccc", // Light gray
|
||||
400: "#b3b3b3", // Medium gray
|
||||
500: "#999999", // Darker gray
|
||||
600: "#808080", // Even darker gray
|
||||
700: "#666666", // Dark gray
|
||||
800: "#4d4d4d", // Very dark gray
|
||||
900: "#333333", // Almost black
|
||||
}
|
||||
|
||||
},
|
||||
components: {
|
||||
// Switch: {
|
||||
|
||||
@@ -42,7 +42,7 @@ const LatestTransactions = () => {
|
||||
<Box>
|
||||
<Container maxW="6xl">
|
||||
<Grid
|
||||
templateColumns={{ base: "100% 0%", md: "90% 10%" }}
|
||||
templateColumns={{ base: "100% 0%", md: "10% 90%" }}
|
||||
gap={0}
|
||||
bg={colorMode === "light" ? "#230A79" : "#232127"}
|
||||
// bg={"#232127"}
|
||||
@@ -129,7 +129,7 @@ const LatestTransactions = () => {
|
||||
color={colorMode === "light" ? "#230A79" : "#B09AFF"}
|
||||
textDecoration={"underline"}
|
||||
w={'84%'}
|
||||
justifyContent={'space-between'}
|
||||
// justifyContent={'space-between'}
|
||||
fontSize={{base:"xs", md:"sm" }}
|
||||
>
|
||||
<Text
|
||||
|
||||
@@ -76,7 +76,7 @@ const NavBar = () => {
|
||||
</Text>
|
||||
)}
|
||||
</NavLink>
|
||||
<NavLink to="/subnet">
|
||||
<NavLink to="/subnet-id">
|
||||
{({ isActive }) => (
|
||||
<Text
|
||||
fontSize={{ base: "12px", md: "14px" }}
|
||||
|
||||
@@ -47,11 +47,11 @@ const Pagination = ({
|
||||
};
|
||||
|
||||
return (
|
||||
<HStack mt={16}>
|
||||
<HStack mt={14} display={"flex"} justifyContent={"end"}>
|
||||
{/* <Text className='web-text-small'>Tanami v0.1</Text> */}
|
||||
|
||||
<HStack justifyContent={"space-between"} w={"100%"}>
|
||||
<Button
|
||||
{/* <HStack justifyContent={"space-between"} w={"100%"}> */}
|
||||
{/* <Button
|
||||
mt={1}
|
||||
size={"sm"}
|
||||
rounded="md"
|
||||
@@ -70,7 +70,7 @@ const Pagination = ({
|
||||
}}
|
||||
>
|
||||
Previous
|
||||
</Button>
|
||||
</Button> */}
|
||||
{/* <Text
|
||||
w={"100px"}
|
||||
display={"flex"}
|
||||
@@ -81,9 +81,8 @@ const Pagination = ({
|
||||
{isLoading ? "0" : displayRange?.start} - {" "}
|
||||
{isLoading ? "00" : displayRange?.end} of {" "}
|
||||
{isLoading ? "00" : totalItems}
|
||||
</Text> */
|
||||
}
|
||||
<Text><Text as={"span"} me={3}>1</Text> <Text as={"span"} me={3}>2</Text> <Text as={"span"} me={3}>3</Text> <Text as={"span"} me={3}>4</Text><Text as={"span"} >....</Text></Text>
|
||||
</Text> */}
|
||||
{/* <Text><Text as={"span"} me={3}>1</Text> <Text as={"span"} me={3}>2</Text> <Text as={"span"} me={3}>3</Text> <Text as={"span"} me={3}>4</Text><Text as={"span"} >....</Text></Text>
|
||||
<Button
|
||||
mt={1}
|
||||
size={"sm"}
|
||||
@@ -103,9 +102,77 @@ const Pagination = ({
|
||||
}}
|
||||
>
|
||||
Next
|
||||
</Button>
|
||||
</Button> */}
|
||||
{/* </HStack> */}
|
||||
<Box className="ttttt" display={"flex"} fontSize={"sm"} alignItems={"center"} >
|
||||
<Text>Rows per page:</Text>
|
||||
<Select mx={4} width={"60px"} rounded="md" size="xs">
|
||||
<option value="option1">10</option>
|
||||
<option value="option2">20</option>
|
||||
<option value="option3">30</option>
|
||||
</Select>
|
||||
<Text mx={5}>1-10 of 1024778</Text>
|
||||
<Box display={"flex"} alignItems={"center"}>
|
||||
<Button bg={"none"} p={0}
|
||||
_hover={{backgroundColor:"none",border:"none"}}>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
aria-hidden="true"
|
||||
role="presentation"
|
||||
style={{ color: colorMode === "light" ? "#000" : "#fff" }}
|
||||
>
|
||||
<path d="M18.41 16.59L13.82 12l4.59-4.59L17 6l-6 6 6 6zM6 6h2v12H6z"></path>
|
||||
<path fill="none" d="M24 24H0V0h24v24z"></path>
|
||||
</svg>
|
||||
</Button>
|
||||
<Button bg={"none"} p={0} _hover={{backgroundColor:"none",border:"none"}}>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
aria-hidden="true"
|
||||
role="presentation"
|
||||
style={{ color: colorMode === "light" ? "#000" : "#fff" }}
|
||||
>
|
||||
<path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"></path>
|
||||
<path d="M0 0h24v24H0z" fill="none"></path>
|
||||
</svg>
|
||||
</Button>
|
||||
<Button bg={"none"} p={0} _hover={{backgroundColor:"none",border:"none"}}>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
aria-hidden="true"
|
||||
role="presentation"
|
||||
style={{ color: colorMode === "light" ? "#000" : "#fff" }}
|
||||
>
|
||||
<path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"></path>
|
||||
<path d="M0 0h24v24H0z" fill="none"></path>
|
||||
</svg>
|
||||
</Button>
|
||||
<Button bg={"none"} p={0} _hover={{backgroundColor:"none",border:"none"}}>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
aria-hidden="true"
|
||||
role="presentation"
|
||||
>
|
||||
<path d="M5.59 7.41L10.18 12l-4.59 4.59L7 18l6-6-6-6zM16 6h2v12h-2z"></path>
|
||||
<path fill="none" d="M0 0h24v24H0V0z"></path>
|
||||
</svg>
|
||||
</Button>
|
||||
</Box>
|
||||
</Box>
|
||||
</HStack>
|
||||
</HStack>
|
||||
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { Box, Container, Grid, GridItem, Heading, HStack, Select, Text, useColorMode, useToast, VStack } from "@chakra-ui/react";
|
||||
import { Box, Container, Grid, GridItem, Heading, HStack, Icon, Select, Text, useColorMode, useToast, VStack } from "@chakra-ui/react";
|
||||
import React, { useContext } from "react";
|
||||
import bannerImage from "../assets/images/bannerImg.png";
|
||||
import GlobalStateContext from "../Contexts/GlobalStateContext";
|
||||
@@ -37,11 +37,11 @@ const MainNet = () => {
|
||||
<Container
|
||||
maxW="6xl"
|
||||
color="white"
|
||||
display={"flex"}
|
||||
display={{base :"block",md : "flex"}}
|
||||
justifyContent={"space-between"}
|
||||
mb={10}
|
||||
>
|
||||
<Heading fontSize={"md"} fontWeight={400} color={colorMode === "light" ? "#000" : "#fff"}>
|
||||
<Heading fontSize={"md"} fontWeight={400} color={colorMode === "light" ? "#000" : "#fff"} mb={{base :"10px" ,md : "0px"}}>
|
||||
Main Net - Overview
|
||||
</Heading>
|
||||
<Text to="" style={{ fontSize: "14px" }} color={colorMode === "light" ? "#000" : "#fff"} display={"flex"} gap={"3"}>
|
||||
@@ -56,14 +56,14 @@ const MainNet = () => {
|
||||
<Box>
|
||||
<Container maxW="6xl">
|
||||
<Grid
|
||||
templateColumns="10% 90%"
|
||||
templateColumns={{ base: "100% 0%", md: "10% 90%" }}
|
||||
gap={0}
|
||||
bg={colorMode === "light" ? "#230A79" : "#232127"}
|
||||
// bg={"#232127"}
|
||||
borderTopRightRadius={4}
|
||||
borderTopLeftRadius={4}
|
||||
>
|
||||
<GridItem p={2}>
|
||||
<GridItem p={2} display={{ base: "none", md: "grid" }}>
|
||||
<Text color={"#fff"}>Sr. no</Text>
|
||||
</GridItem>
|
||||
<GridItem p={2}>
|
||||
@@ -72,91 +72,232 @@ const MainNet = () => {
|
||||
</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="10% 90%"
|
||||
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>
|
||||
</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}
|
||||
>
|
||||
<Box>
|
||||
<Text mb={2} color={colorMode === "light" ? "#7B7B7B" : "#E8E8E8"}>
|
||||
Smart contract ID dd :
|
||||
</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"
|
||||
/>
|
||||
<VStack>
|
||||
<HStack w={'100%'} justifyContent={'flex-start'}>
|
||||
<Text color={colorMode === "light" ? "#7B7B7B" : "#E8E8E8"}>Transaction type :</Text>
|
||||
<Text color={colorMode === "light" ? "#230A79" : "#B09AFF"}>
|
||||
<Link style={{fontWeight:"inherit"}}>{transaction.transactionType}</Link>
|
||||
</Text>
|
||||
</HStack>
|
||||
|
||||
<HStack w={'100%'} justifyContent={'flex-start'}>
|
||||
<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" }}
|
||||
overflow={"hidden"}
|
||||
>
|
||||
<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 w={'100%'} justifyContent={'flex-start'}>
|
||||
<Text color={colorMode === "light" ? "#7B7B7B" : "#E8E8E8"}>Main net :</Text>
|
||||
<Text cursor={'pointer'} onClick={()=>navigate(`/mainnet-id-overview/${transaction.subnetID}`)} color={colorMode === "light" ? "#230A79" : "#B09AFF"}>
|
||||
{transaction.subnetID}
|
||||
</Text>
|
||||
</HStack>
|
||||
|
||||
</VStack>
|
||||
</HStack>
|
||||
</Box>
|
||||
</GridItem>
|
||||
</Grid>
|
||||
</VStack>
|
||||
</HStack>
|
||||
{/* </Box> */}
|
||||
</GridItem>
|
||||
</Grid>
|
||||
))}
|
||||
</Box>
|
||||
<Pagination />
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { Box, Container, Grid, GridItem, Heading, HStack, Link, Select, Text, useColorMode, useToast } from "@chakra-ui/react";
|
||||
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";
|
||||
@@ -40,11 +40,11 @@ const MainNetOveriew = () => {
|
||||
<Container
|
||||
maxW="6xl"
|
||||
color="white"
|
||||
display={"flex"}
|
||||
display={{base :"block",md : "flex"}}
|
||||
justifyContent={"space-between"}
|
||||
mb={10}
|
||||
>
|
||||
<Heading fontSize={"md"} fontWeight={400} color={colorMode === "light" ? "#000" : "#fff"}>
|
||||
<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"}>
|
||||
@@ -77,118 +77,223 @@ const MainNetOveriew = () => {
|
||||
{overview.map((transaction, index) => (
|
||||
<Grid
|
||||
bg={
|
||||
index % 2 === 0
|
||||
index % 2 === 0
|
||||
? colorMode === "light"
|
||||
? "#F2EFFF"
|
||||
: "#312F35"
|
||||
? "#F2EFFF"
|
||||
: "#312F35"
|
||||
: colorMode === "light"
|
||||
? "#fff"
|
||||
: "#232127"
|
||||
}
|
||||
key={transaction.id}
|
||||
templateColumns="10% 90%"
|
||||
templateColumns={{ base: "100% 0%", md: "10% 90%" }}
|
||||
gap={0}
|
||||
>
|
||||
<GridItem
|
||||
display={{ base: "none", md: "grid" }}
|
||||
p={4}
|
||||
color={colorMode === "light" ? "#000" : "#fff"}
|
||||
>
|
||||
<GridItem p={4} color={colorMode === "light" ? "#000" : "#fff"}>
|
||||
{index + 1}.
|
||||
{index + 1}.
|
||||
</GridItem>
|
||||
<GridItem p={4}>
|
||||
<Box>
|
||||
<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
|
||||
fontSize={"sm"}
|
||||
mb={2}
|
||||
color={colorMode === "light" ? "#230A79" : "#B09AFF"}
|
||||
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}
|
||||
{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"}>
|
||||
<Link style={{fontWeight:"inherit"}}>{transaction.sender}</Link>
|
||||
<Text as={"span"} ml={5} cursor={"pointer"}><MdContentCopy onClick={()=> copyToClipboard(transaction.sender)} /></Text>
|
||||
</HStack>
|
||||
</HStack>
|
||||
<HStack fontSize={"sm"} gap={4} mb={3}>
|
||||
<Text color={colorMode === "light" ? "#0F0F0F" : "#E8E8E8"}>
|
||||
Receiver :
|
||||
</Text>
|
||||
<HStack color={colorMode === "light" ? "#230A79" : "#B09AFF"} textDecoration={"underline"}>
|
||||
<Link style={{fontWeight:"inherit"}}>{transaction.receiver}</Link>
|
||||
<Text as={"span"} ml={5} 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 dd :
|
||||
</Text>
|
||||
<Text
|
||||
color={colorMode === "light" ? "#230A79" : "#B09AFF"}
|
||||
>
|
||||
{transaction.contract}
|
||||
</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={"19px"}
|
||||
style={{ marginTop: "1px",position:"absolute",top:"1px",left:"-24px" }}
|
||||
<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)}
|
||||
/>
|
||||
<Box>
|
||||
<HStack>
|
||||
<Text
|
||||
color={colorMode === "light" ? "#7B7B7B" : "#E8E8E8"}
|
||||
>
|
||||
Transaction type :
|
||||
</Text>
|
||||
<Text
|
||||
color={colorMode === "light" ? "#230A79" : "#B09AFF"}
|
||||
>
|
||||
{transaction.transactionType}
|
||||
</Text>
|
||||
</HStack>
|
||||
</Box>
|
||||
</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>
|
||||
|
||||
</VStack>
|
||||
</HStack>
|
||||
{/* </Box> */}
|
||||
</GridItem>
|
||||
</Grid>
|
||||
</Grid>
|
||||
))}
|
||||
</Box>
|
||||
<Pagination />
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { Box, Container, Grid, GridItem, Heading, HStack, Select, Text, useColorMode, useToast, VStack } from "@chakra-ui/react";
|
||||
import { Box, Container, Grid, GridItem, Heading, HStack, Icon, Select, Text, useColorMode, useToast, VStack } from "@chakra-ui/react";
|
||||
import React, { useContext } from "react";
|
||||
import { Link, useNavigate } from "react-router-dom";
|
||||
import LatestTransactions from "../components/LatestTransactions/LatestTransactions";
|
||||
@@ -38,11 +38,11 @@ const Subnet = () => {
|
||||
<Container
|
||||
maxW="6xl"
|
||||
color="white"
|
||||
display={"flex"}
|
||||
display={{base :"block",md : "flex"}}
|
||||
justifyContent={"space-between"}
|
||||
mb={10}
|
||||
>
|
||||
<Heading fontSize={"md"} fontWeight={400} color={colorMode === "light" ? "#000" : "#fff"}>
|
||||
<Heading fontSize={"md"} fontWeight={400} color={colorMode === "light" ? "#000" : "#fff"} mb={{base :"10px" ,md : "0px"}}>
|
||||
Subnet ID - Overview
|
||||
</Heading>
|
||||
<Text to="" style={{ fontSize: "14px" }} color={colorMode === "light" ? "#000" : "#fff"} display={"flex"} gap={"3"}>
|
||||
@@ -73,93 +73,231 @@ const Subnet = () => {
|
||||
</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="10% 90%"
|
||||
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>
|
||||
</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}
|
||||
>
|
||||
<Box>
|
||||
<Text mb={2} color={colorMode === "light" ? "#7B7B7B" : "#E8E8E8"}>
|
||||
Smart contract ID dd :
|
||||
</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"
|
||||
/>
|
||||
<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>
|
||||
|
||||
<VStack>
|
||||
<HStack w={'100%'} justifyContent={'flex-start'}>
|
||||
<Text color={colorMode === "light" ? "#7B7B7B" : "#E8E8E8"}>Transaction type :</Text>
|
||||
<Text color={colorMode === "light" ? "#230A79" : "#B09AFF"}>
|
||||
<Link style={{fontWeight:"inherit"}}>{transaction.transactionType}</Link>
|
||||
</Text>
|
||||
</HStack>
|
||||
|
||||
|
||||
<HStack w={'100%'} justifyContent={'flex-start'}>
|
||||
<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
|
||||
overflow={"hidden"}
|
||||
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 w={'100%'} justifyContent={'flex-start'}>
|
||||
<Text color={colorMode === "light" ? "#7B7B7B" : "#E8E8E8"}>Subnet net :</Text>
|
||||
<Text cursor={'pointer'} onClick={()=>navigate(`/subnet-id-overview/${transaction.subnetID}`)} color={colorMode === "light" ? "#230A79" : "#B09AFF"}>
|
||||
{transaction.subnetID}
|
||||
</Text>
|
||||
</HStack>
|
||||
|
||||
</VStack>
|
||||
</HStack>
|
||||
</Box>
|
||||
</GridItem>
|
||||
</Grid>
|
||||
</VStack>
|
||||
</HStack>
|
||||
{/* </Box> */}
|
||||
</GridItem>
|
||||
</Grid>
|
||||
))}
|
||||
</Box>
|
||||
<Pagination />
|
||||
|
||||
225
src/pages/SubnetId.jsx
Normal file
225
src/pages/SubnetId.jsx
Normal file
@@ -0,0 +1,225 @@
|
||||
import {
|
||||
Box,
|
||||
Button,
|
||||
Container,
|
||||
Grid,
|
||||
GridItem,
|
||||
Heading,
|
||||
HStack,
|
||||
Icon,
|
||||
Input,
|
||||
InputGroup,
|
||||
Link,
|
||||
Select,
|
||||
Table,
|
||||
TableCaption,
|
||||
TableContainer,
|
||||
Tbody,
|
||||
Td,
|
||||
Text,
|
||||
Th,
|
||||
Thead,
|
||||
Tr,
|
||||
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 { useNavigate, useParams } from "react-router-dom";
|
||||
|
||||
const SubnetId = () => {
|
||||
const { colorMode } = useColorMode();
|
||||
const params = useParams();
|
||||
const navigate = useNavigate();
|
||||
|
||||
const toast = useToast();
|
||||
useEffect(() => {
|
||||
window.scrollTo({ top: 0, behavior: "smooth" }); // Scroll to top smoothly when params change
|
||||
}, []);
|
||||
|
||||
const tableData = [
|
||||
{
|
||||
"Subnet Id": "A1B2C3D4E5F6G",
|
||||
"Transaction count": 10,
|
||||
},
|
||||
{
|
||||
"Subnet Id": "A1B2C3D4E5F6G",
|
||||
"Transaction count": 10,
|
||||
},
|
||||
{
|
||||
"Subnet Id": "A1B2C3D4E5F6G",
|
||||
"Transaction count": 10,
|
||||
},
|
||||
{
|
||||
"Subnet Id": "A1B2C3D4E5F6G",
|
||||
"Transaction count": 10,
|
||||
},
|
||||
{
|
||||
"Subnet Id": "A1B2C3D4E5F6G",
|
||||
"Transaction count": 10,
|
||||
},
|
||||
{
|
||||
"Subnet Id": "A1B2C3D4E5F6G",
|
||||
"Transaction count": 10,
|
||||
},
|
||||
{
|
||||
"Subnet Id": "A1B2C3D4E5F6G",
|
||||
"Transaction count": 10,
|
||||
},
|
||||
{
|
||||
"Subnet Id": "A1B2C3D4E5F6G",
|
||||
"Transaction count": 10,
|
||||
},
|
||||
{
|
||||
"Subnet Id": "A1B2C3D4E5F6G",
|
||||
"Transaction count": 10,
|
||||
},
|
||||
{
|
||||
"Subnet Id": "A1B2C3D4E5F6G",
|
||||
"Transaction count": 10,
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<Box
|
||||
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 Overview {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>
|
||||
<VStack
|
||||
pt={{ base: colorMode === "light" ? 10 : 10, md: 10 }}
|
||||
mb={{ base: 8, md: 14 }}
|
||||
>
|
||||
<Container maxW="2xl" position={"relative"}>
|
||||
<Box w={"100%"} display={"flex"} alignItems={"center"}>
|
||||
<InputGroup
|
||||
width={"100%"}
|
||||
boxShadow={"sm"}
|
||||
size="sm"
|
||||
bg={colorMode === "light" ? "light.100" : "#393939"}
|
||||
// border={"none"}
|
||||
rounded={"lg"}
|
||||
>
|
||||
<Input
|
||||
roundedLeft={8}
|
||||
w={"76%"}
|
||||
// border={`1px solid ${
|
||||
// colorMode === "light" ? "#230A79" : "#393939"
|
||||
// }`}
|
||||
borderColor={colorMode === "light" ? "#CED4DA" : "#565252"}
|
||||
h={"42px"}
|
||||
type="search"
|
||||
placeholder="Search by Subnet ID"
|
||||
onChange={(e) => setSearchTerm(e.target.value)}
|
||||
_hover={{
|
||||
borderColor: "#7f8c8d",
|
||||
}}
|
||||
_placeholder={{ color: "#737C82" }}
|
||||
_focusVisible={{
|
||||
borderColor: colorMode === "light" ? "#230A79" : "#7f8c8d",
|
||||
}}
|
||||
/>
|
||||
<Button
|
||||
zIndex={99}
|
||||
h={"42px"}
|
||||
w={{ base: "205px", md: "24%" }}
|
||||
fontWeight={400}
|
||||
roundedBottomRight={8}
|
||||
roundedTopRight={8}
|
||||
fontSize={"sm"}
|
||||
rounded={0}
|
||||
border="none"
|
||||
bg={colorMode === "light" ? "#4023A6" : "#565252"}
|
||||
_hover={{
|
||||
opacity: 0.9,
|
||||
bg: colorMode !== "light" && "#333248",
|
||||
}}
|
||||
_focus={{
|
||||
opacity: 1,
|
||||
outline: "none",
|
||||
bg: colorMode === "light" ? "#4023A6" : "#565252",
|
||||
}}
|
||||
_active={{
|
||||
opacity: 0.9,
|
||||
outline: "none",
|
||||
bg: colorMode === "light" ? "#4023A6" : "#565252",
|
||||
}}
|
||||
color={"#fff"}
|
||||
>
|
||||
Search
|
||||
</Button>
|
||||
</InputGroup>
|
||||
</Box>
|
||||
</Container>
|
||||
</VStack>
|
||||
<Box>
|
||||
<Container maxW="6xl">
|
||||
<TableContainer roundedTop={5}
|
||||
bg={colorMode === "light" ? "#F2EFFF" : "#312F35"}>
|
||||
<Table variant="striped" colorScheme="darkPurple">
|
||||
<Thead>
|
||||
<Tr bg={colorMode === "light" ? "#230A79" : "#312f35"}>
|
||||
<Th fontWeight={500} color={"#fff"} textTransform={"inherit"}>Sr. no</Th>
|
||||
<Th fontWeight={500} color={"#fff"} textTransform={"inherit"}>Subnet Id</Th>
|
||||
<Th fontWeight={500} color={"#fff"} textTransform={"inherit"}>Transaction count</Th>
|
||||
</Tr>
|
||||
</Thead>
|
||||
<Tbody>
|
||||
{tableData.map((row, index) => (
|
||||
<Tr key={index}>
|
||||
<Td w={50} fontSize={"xs"} py={3}>{index + 1}.</Td>
|
||||
<Td fontWeight={500} cursor={"pointer"} w={200} color={colorMode === "light" ? "#230A79" : "#B09AFF"} fontSize={"xs"} py={3} onClick={() =>
|
||||
navigate(`/subnet-id-overview/${row["Subnet Id"]}`)
|
||||
}>{row["Subnet Id"]}
|
||||
</Td>
|
||||
<Td w={100} fontSize={"xs"} py={3}>{row["Transaction count"]}</Td>
|
||||
</Tr>
|
||||
))}
|
||||
</Tbody>
|
||||
</Table>
|
||||
</TableContainer>
|
||||
<Pagination />
|
||||
</Container>
|
||||
</Box>
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
export default SubnetId;
|
||||
@@ -1,4 +1,4 @@
|
||||
import { Box, Container, Grid, GridItem, Heading, HStack, Link, Select, Text, useColorMode, useToast } from "@chakra-ui/react";
|
||||
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";
|
||||
@@ -59,14 +59,14 @@ const SubnetInner = () => {
|
||||
<Box>
|
||||
<Container maxW="6xl">
|
||||
<Grid
|
||||
templateColumns={{ base: "100% 0%", md: "90% 10%" }}
|
||||
templateColumns={{ base: "100% 0%", md: "10% 90%" }}
|
||||
gap={0}
|
||||
bg={colorMode === "light" ? "#230A79" : "#232127"}
|
||||
// bg={"#232127"}
|
||||
borderTopRightRadius={4}
|
||||
borderTopLeftRadius={4}
|
||||
>
|
||||
<GridItem p={2}>
|
||||
<GridItem display={{ base: "none", md: "grid" }} p={2}>
|
||||
<Text color={"#fff"}>Sr. no</Text>
|
||||
</GridItem>
|
||||
<GridItem p={2}>
|
||||
@@ -77,118 +77,222 @@ const SubnetInner = () => {
|
||||
{overview.map((transaction, index) => (
|
||||
<Grid
|
||||
bg={
|
||||
index % 2 === 0
|
||||
index % 2 === 0
|
||||
? colorMode === "light"
|
||||
? "#F2EFFF"
|
||||
: "#312F35"
|
||||
? "#F2EFFF"
|
||||
: "#312F35"
|
||||
: colorMode === "light"
|
||||
? "#fff"
|
||||
: "#232127"
|
||||
}
|
||||
key={transaction.id}
|
||||
templateColumns="10% 90%"
|
||||
templateColumns={{ base: "100% 0%", md: "10% 90%" }}
|
||||
gap={0}
|
||||
>
|
||||
<GridItem
|
||||
display={{ base: "none", md: "grid" }}
|
||||
p={4}
|
||||
color={colorMode === "light" ? "#000" : "#fff"}
|
||||
>
|
||||
<GridItem display={{ base: "none", md: "grid" }} p={4} color={colorMode === "light" ? "#000" : "#fff"}>
|
||||
{index + 1}.
|
||||
{index + 1}.
|
||||
</GridItem>
|
||||
<GridItem p={4}>
|
||||
<Box>
|
||||
<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
|
||||
fontSize={{base:"xs", md:"sm" }}
|
||||
mb={2}
|
||||
color={colorMode === "light" ? "#230A79" : "#B09AFF"}
|
||||
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}
|
||||
{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"}>
|
||||
<Link style={{fontWeight:"inherit"}}>{transaction.sender}</Link>
|
||||
<Text as={"span"} ml={5} cursor={"pointer"}><MdContentCopy onClick={()=> copyToClipboard(transaction.sender)} /></Text>
|
||||
</HStack>
|
||||
</HStack>
|
||||
<HStack fontSize={"sm"} gap={4} mb={3}>
|
||||
<Text color={colorMode === "light" ? "#0F0F0F" : "#E8E8E8"}>
|
||||
Receiver :
|
||||
</Text>
|
||||
<HStack color={colorMode === "light" ? "#230A79" : "#B09AFF"} textDecoration={"underline"}>
|
||||
<Link style={{fontWeight:"inherit"}}>{transaction.receiver}</Link>
|
||||
<Text as={"span"} ml={5} 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 dd :
|
||||
</Text>
|
||||
<Text
|
||||
color={colorMode === "light" ? "#230A79" : "#B09AFF"}
|
||||
>
|
||||
{transaction.contract}
|
||||
</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={"19px"}
|
||||
style={{ marginTop: "1px",position:"absolute",top:"1px",left:"-24px" }}
|
||||
<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%'}
|
||||
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)}
|
||||
/>
|
||||
<Box>
|
||||
<HStack>
|
||||
<Text
|
||||
color={colorMode === "light" ? "#7B7B7B" : "#E8E8E8"}
|
||||
>
|
||||
Transaction type :
|
||||
</Text>
|
||||
<Text
|
||||
color={colorMode === "light" ? "#230A79" : "#B09AFF"}
|
||||
>
|
||||
{transaction.transactionType}
|
||||
</Text>
|
||||
</HStack>
|
||||
</Box>
|
||||
</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" }}
|
||||
overflow={"hidden"}
|
||||
>
|
||||
<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>
|
||||
</Grid>
|
||||
))}
|
||||
</Box>
|
||||
<Pagination />
|
||||
|
||||
@@ -8,6 +8,7 @@ import SmartContract from "../pages/SmartContract";
|
||||
import DidInfo from "../pages/DidInfo";
|
||||
import TransactionDetails from "../pages/Transaction/TransactionDetails";
|
||||
import MainNetOveriew from "../pages/MainNetIdOverview";
|
||||
import SubnetId from "../pages/SubnetId";
|
||||
|
||||
export const route = [
|
||||
{
|
||||
@@ -18,6 +19,10 @@ export const route = [
|
||||
path: "/main-net",
|
||||
element: <MainNet />,
|
||||
},
|
||||
{
|
||||
path: "/subnet-id",
|
||||
element: <SubnetId />,
|
||||
},
|
||||
{
|
||||
path: "/subnet",
|
||||
element: <Subnet />,
|
||||
|
||||
Reference in New Issue
Block a user