diff --git a/src/Theme/Theme.js b/src/Theme/Theme.js index 2120fbd..153f3d8 100644 --- a/src/Theme/Theme.js +++ b/src/Theme/Theme.js @@ -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: { diff --git a/src/components/LatestTransactions/LatestTransactions.jsx b/src/components/LatestTransactions/LatestTransactions.jsx index a24b4a4..aa7127c 100644 --- a/src/components/LatestTransactions/LatestTransactions.jsx +++ b/src/components/LatestTransactions/LatestTransactions.jsx @@ -42,7 +42,7 @@ const LatestTransactions = () => { { color={colorMode === "light" ? "#230A79" : "#B09AFF"} textDecoration={"underline"} w={'84%'} - justifyContent={'space-between'} + // justifyContent={'space-between'} fontSize={{base:"xs", md:"sm" }} > { )} - + {({ isActive }) => ( + {/* Tanami v0.1 */} - - + */} {/* */ - } - 1 2 3 4.... + */} + {/* 1 2 3 4.... + */} + {/* */} + + Rows per page: + + 1-10 of 1024778 + + + + + + + - + ); }; diff --git a/src/pages/MainNet.jsx b/src/pages/MainNet.jsx index b7d1425..38f0418 100644 --- a/src/pages/MainNet.jsx +++ b/src/pages/MainNet.jsx @@ -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 = () => { - + Main Net - Overview @@ -56,14 +56,14 @@ const MainNet = () => { - + Sr. no @@ -72,91 +72,232 @@ const MainNet = () => { {overview.map((transaction, index) => ( - - {index + 1}. - - - - {transaction.description} - - - copyToClipboard(transaction.description)}/> - - - - - Sender : - - navigate(`/did-info/${transaction.sender}`)} >{transaction.sender} - - copyToClipboard(transaction.sender)}/> - - - - - Receiver : - - navigate(`/did-info/${transaction.receiver}`)} >{transaction.receiver} - copyToClipboard(transaction.receiver)} /> - - - - - - Smart contract ID dd : - - {transaction.contract} - - - - Date and Time Stamp : - - {transaction.date} - - - - Amount: - - {transaction.amount} - - - - - - - Transaction type : - - {transaction.transactionType} - - - - + + + {index + 1}. + + + {/* */} + + + + + copyToClipboard(transaction.description)} + /> + + + + + + Sender: + + + + + + + copyToClipboard(transaction.sender)} + /> + + + + + + Receiver: + + + + navigate(`/did-info/${transaction.receiver}`) + } + > + {transaction.receiver} + + + copyToClipboard(transaction.receiver)} + /> + + + + + + + Smart contract ID : + + + {transaction.contract} + + + + + Date and Time Stamp : + + + {transaction.date} + + + + + Amount: + + + {transaction.amount} + + + + + + + + + + + Transaction type : + + + {transaction.transactionType} + + + + Main net : navigate(`/mainnet-id-overview/${transaction.subnetID}`)} color={colorMode === "light" ? "#230A79" : "#B09AFF"}> {transaction.subnetID} - - - - - - + + + {/* */} + + ))} diff --git a/src/pages/MainNetIdOverview.jsx b/src/pages/MainNetIdOverview.jsx index f6b0209..ccf99e7 100644 --- a/src/pages/MainNetIdOverview.jsx +++ b/src/pages/MainNetIdOverview.jsx @@ -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 = () => { - + Main net ID - {params?.id} @@ -77,118 +77,223 @@ const MainNetOveriew = () => { {overview.map((transaction, index) => ( + - - {index + 1}. + {index + 1}. - - + + {/* */} + - - - Sender : - - - {transaction.sender} - copyToClipboard(transaction.sender)} /> - - - - - Receiver : - - - {transaction.receiver} - copyToClipboard(transaction.receiver)} /> - - - - - - Smart contract ID dd : - - - {transaction.contract} - - - - - Date and Time Stamp : - - - {transaction.date} - - - - - Amount: - - - {transaction.amount} - - - - - copyToClipboard(transaction.description)} + /> + + + + + + Sender: + + + + + + + copyToClipboard(transaction.sender)} /> - - - - Transaction type : - - - {transaction.transactionType} - - - + + + + + + Receiver: + + + + navigate(`/did-info/${transaction.receiver}`) + } + > + {transaction.receiver} + + + copyToClipboard(transaction.receiver)} + /> + + + + + + Smart contract ID : + + + {transaction.contract} + + + + Date and Time Stamp : + + + {transaction.date} + + + + + Amount: + + + {transaction.amount} + + + + + + + + + + + Transaction type : + + + {transaction.transactionType} + + + + + + {/* */} - + ))} diff --git a/src/pages/Subnet.jsx b/src/pages/Subnet.jsx index 13edc0a..c43a457 100644 --- a/src/pages/Subnet.jsx +++ b/src/pages/Subnet.jsx @@ -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 = () => { - + Subnet ID - Overview @@ -73,93 +73,231 @@ const Subnet = () => { {overview.map((transaction, index) => ( - - {index + 1}. - - - - {transaction.description} - - - copyToClipboard(transaction.description)}/> - - - - - Sender : - - navigate(`/did-info/${transaction.sender}`)} >{transaction.sender} - - copyToClipboard(transaction.sender)}/> - - - - - Receiver : - - navigate(`/did-info/${transaction.receiver}`)} >{transaction.receiver} - copyToClipboard(transaction.receiver)} /> - - - - - - Smart contract ID dd : - - {transaction.contract} - - - - Date and Time Stamp : - - {transaction.date} - - - - Amount: - - {transaction.amount} - - - - + + + {index + 1}. + + + {/* */} + + - - - Transaction type : - - {transaction.transactionType} - - - - - + + copyToClipboard(transaction.description)} + /> + + + + + + Sender: + + + + + + + copyToClipboard(transaction.sender)} + /> + + + + + + Receiver: + + + + navigate(`/did-info/${transaction.receiver}`) + } + > + {transaction.receiver} + + + copyToClipboard(transaction.receiver)} + /> + + + + + + + Smart contract ID : + + + {transaction.contract} + + + + + Date and Time Stamp : + + + {transaction.date} + + + + + Amount: + + + {transaction.amount} + + + + + + + + + + + Transaction type : + + + {transaction.transactionType} + + + Subnet net : navigate(`/subnet-id-overview/${transaction.subnetID}`)} color={colorMode === "light" ? "#230A79" : "#B09AFF"}> {transaction.subnetID} - - - - - - + + + {/* */} + + ))} diff --git a/src/pages/SubnetId.jsx b/src/pages/SubnetId.jsx new file mode 100644 index 0000000..444f565 --- /dev/null +++ b/src/pages/SubnetId.jsx @@ -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 ( + + + + Subnet Overview {params?.id} + + + View total number of records + + + + + + + + setSearchTerm(e.target.value)} + _hover={{ + borderColor: "#7f8c8d", + }} + _placeholder={{ color: "#737C82" }} + _focusVisible={{ + borderColor: colorMode === "light" ? "#230A79" : "#7f8c8d", + }} + /> + + + + + + + + + + + + + + + + + + {tableData.map((row, index) => ( + + + + + + ))} + +
Sr. noSubnet IdTransaction count
{index + 1}. + navigate(`/subnet-id-overview/${row["Subnet Id"]}`) + }>{row["Subnet Id"]} + {row["Transaction count"]}
+ + + + + + ); +}; + +export default SubnetId; diff --git a/src/pages/SubnetIdOverview.jsx b/src/pages/SubnetIdOverview.jsx index 48afa3d..f127d87 100644 --- a/src/pages/SubnetIdOverview.jsx +++ b/src/pages/SubnetIdOverview.jsx @@ -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 = () => { - + Sr. no @@ -77,118 +77,222 @@ const SubnetInner = () => { {overview.map((transaction, index) => ( + - - {index + 1}. + {index + 1}. - - + + {/* */} + - - - Sender : - - - {transaction.sender} - copyToClipboard(transaction.sender)} /> - - - - - Receiver : - - - {transaction.receiver} - copyToClipboard(transaction.receiver)} /> - - - - - - Smart contract ID dd : - - - {transaction.contract} - - - - - Date and Time Stamp : - - - {transaction.date} - - - - - Amount: - - - {transaction.amount} - - - - - copyToClipboard(transaction.description)} + /> + + + + + + Sender: + + + + + + + copyToClipboard(transaction.sender)} /> - - - - Transaction type : - - - {transaction.transactionType} - - - + + + + + + Receiver: + + + + navigate(`/did-info/${transaction.receiver}`) + } + > + {transaction.receiver} + + + copyToClipboard(transaction.receiver)} + /> + + + + + + Smart contract ID : + + + {transaction.contract} + + + + Date and Time Stamp : + + + {transaction.date} + + + + + Amount: + + + {transaction.amount} + + + + + + + + + + + Transaction type : + + + {transaction.transactionType} + + + + + {/* */} - + ))} diff --git a/src/routes/_routes.jsx b/src/routes/_routes.jsx index a0db214..3cfe93f 100644 --- a/src/routes/_routes.jsx +++ b/src/routes/_routes.jsx @@ -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: , }, + { + path: "/subnet-id", + element: , + }, { path: "/subnet", element: ,