updaate
This commit is contained in:
@@ -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>
|
||||
|
||||
|
||||
@@ -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>
|
||||
|
||||
|
||||
201
src/pages/MainNetIdOverview.jsx
Normal file
201
src/pages/MainNetIdOverview.jsx
Normal 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;
|
||||
@@ -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>
|
||||
|
||||
@@ -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 />,
|
||||
|
||||
Reference in New Issue
Block a user