From 4154f622a32ae858a7e2409de74913b380a44aa6 Mon Sep 17 00:00:00 2001
From: "Siddhesh.More" <siddhesh.more@wdimails.com>
Date: Tue, 15 Oct 2024 10:57:09 +0530
Subject: [PATCH] updaate

---
 .../LatestTransactions/LatestTransactions.jsx |   3 +-
 src/pages/MainNet.jsx                         |   6 +-
 src/pages/MainNetIdOverview.jsx               | 201 ++++++++++++++++++
 src/pages/Subnet.jsx                          |  14 +-
 src/routes/_routes.jsx                        |   5 +
 5 files changed, 219 insertions(+), 10 deletions(-)
 create mode 100644 src/pages/MainNetIdOverview.jsx

diff --git a/src/components/LatestTransactions/LatestTransactions.jsx b/src/components/LatestTransactions/LatestTransactions.jsx
index fbf16f3..dff0f32 100644
--- a/src/components/LatestTransactions/LatestTransactions.jsx
+++ b/src/components/LatestTransactions/LatestTransactions.jsx
@@ -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>
 
diff --git a/src/pages/MainNet.jsx b/src/pages/MainNet.jsx
index 404dea6..b7d1425 100644
--- a/src/pages/MainNet.jsx
+++ b/src/pages/MainNet.jsx
@@ -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>
                       
diff --git a/src/pages/MainNetIdOverview.jsx b/src/pages/MainNetIdOverview.jsx
new file mode 100644
index 0000000..f6b0209
--- /dev/null
+++ b/src/pages/MainNetIdOverview.jsx
@@ -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;
diff --git a/src/pages/Subnet.jsx b/src/pages/Subnet.jsx
index 87fb788..13edc0a 100644
--- a/src/pages/Subnet.jsx
+++ b/src/pages/Subnet.jsx
@@ -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>
diff --git a/src/routes/_routes.jsx b/src/routes/_routes.jsx
index 6f3f2a0..a0db214 100644
--- a/src/routes/_routes.jsx
+++ b/src/routes/_routes.jsx
@@ -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 />,