This commit is contained in:
2024-10-15 10:57:09 +05:30
parent 00ed617cf7
commit 4154f622a3
5 changed files with 219 additions and 10 deletions

View File

@@ -117,11 +117,12 @@ const LatestTransactions = () => {
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>{transaction.transactionType}</Text>
</Text>
</HStack>

View File

@@ -145,10 +145,10 @@ const MainNet = () => {
</Text>
</HStack>
<HStack>
<HStack w={'100%'} justifyContent={'flex-start'}>
<Text color={colorMode === "light" ? "#7B7B7B" : "#E8E8E8"}>Main net :</Text>
<Text color={colorMode === "light" ? "#230A79" : "#B09AFF"}>
<Link to={`/subnet-id-overview/${transaction.subnetID}`} style={{fontWeight:"inherit"}}>{transaction.subnetID}</Link>
<Text cursor={'pointer'} onClick={()=>navigate(`/mainnet-id-overview/${transaction.subnetID}`)} color={colorMode === "light" ? "#230A79" : "#B09AFF"}>
{transaction.subnetID}
</Text>
</HStack>

View File

@@ -0,0 +1,201 @@
import { Box, Container, Grid, GridItem, Heading, HStack, Link, Select, Text, useColorMode, useToast } 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 p={"6rem 0 4rem 0"} backgroundImage={colorMode !== "light" ? `url(${bannerImage})` : "none"} position={"relative"} backgroundSize="contain" backgroundRepeat="no-repeat">
<Container
maxW="6xl"
color="white"
display={"flex"}
justifyContent={"space-between"}
mb={10}
>
<Heading fontSize={"md"} fontWeight={400} color={colorMode === "light" ? "#000" : "#fff"}>
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="10% 90%"
gap={0}
bg={colorMode === "light" ? "#230A79" : "#232127"}
// bg={"#232127"}
borderTopRightRadius={4}
borderTopLeftRadius={4}
>
<GridItem p={2}>
<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="10% 90%"
gap={0}
>
<GridItem p={4} color={colorMode === "light" ? "#000" : "#fff"}>
{index + 1}.
</GridItem>
<GridItem p={4}>
<Box>
<Text
fontSize={"sm"}
mb={2}
color={colorMode === "light" ? "#230A79" : "#B09AFF"}
>
{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}
>
<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" }}
/>
<Box>
<HStack>
<Text
color={colorMode === "light" ? "#7B7B7B" : "#E8E8E8"}
>
Transaction type :
</Text>
<Text
color={colorMode === "light" ? "#230A79" : "#B09AFF"}
>
{transaction.transactionType}
</Text>
</HStack>
</Box>
</HStack>
</Box>
</GridItem>
</Grid>
))}
</Box>
<Pagination />
</Container>
</Box>
</Box>
);
};
export default MainNetOveriew;

View File

@@ -138,6 +138,7 @@ const Subnet = () => {
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>
@@ -145,13 +146,14 @@ const Subnet = () => {
<Link style={{fontWeight:"inherit"}}>{transaction.transactionType}</Link>
</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>
<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>

View File

@@ -7,6 +7,7 @@ import Transaction from "../pages/Transaction";
import SmartContract from "../pages/SmartContract";
import DidInfo from "../pages/DidInfo";
import TransactionDetails from "../pages/Transaction/TransactionDetails";
import MainNetOveriew from "../pages/MainNetIdOverview";
export const route = [
{
@@ -25,6 +26,10 @@ export const route = [
path: "/subnet-id-overview/:id",
element: <SubnetInner />,
},
{
path: "/mainnet-id-overview/:id",
element: <MainNetOveriew />,
},
{
path: "/transaction",
element: <Transaction />,