Siddhesh.More/rubix-explore
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

update

Browse Source
This commit is contained in:
Siddhesh More
2024-10-14 17:56:46 +05:30
parent 8843cde46d
commit f2c0112f0c
13 changed files with 247 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/Contexts/GlobalStateProvider.jsx
View File

@@ -10,7 +10,7 @@ const GlobalStateProvider = ({ children }) => {
{
id: 1,
description:
'abc5def6ghi7jkl8mno9pqrs2tuv5wxyzbc5def6ghi7jkl8mno9pqrs2tuv5wxys2tuv5wxy',
'abc5def6ghi7jkl8mno9pqrs2tuv5wxyzbc5def6ghi7jkl8mnojhdj9pqrs2tuv5wxys2tuv5wxy',
sender: 'abcdefghiklmnopqrstuvwxyzABCDEGHIJKLMNOPQRSTUVWXYZ',
receiver:
'abcdefghiklmnopqrstuvwxyzABCDEGHIJKLMNOPQRSTUVWXYZ',
@@ -23,7 +23,7 @@ const GlobalStateProvider = ({ children }) => {
{
id: 2,
description:
'abc5def6ghi7jkl8mno9pqrs2tuv5wxyzbc5def6ghi7jkl8mno9pqrs2tuv5wxys2tuv5wxy',
'abc5def6ghi7jkl8mno9pqrs2tuv5wxyzbc5de7euuf6ghi7jkl8mno9pqrs2tuv5wxys2tuv5wxy',
sender: "abcdefghiklmnopqrstuvwxyzABCDEGHIJKLMNOPQRSTUVWXYZ",
receiver: "abcdefghiklmnopqrstuvwxyzABCDEGHIJKLMNOPQRSTUVWXYZ",
contract:"A1B2C3D4E5F6G",
@@ -35,7 +35,7 @@ const GlobalStateProvider = ({ children }) => {
{
id: 3,
description:
'abc5def6ghi7jkl8mno9pqrs2tuv5wxyzbc5def6ghi7jkl8mno9pqrs2tuv5wxys2tuv5wxy',
'abc5def6ghi7jkl8mno9pqrs2tuv5wxyzbjfu8c5def6ghi7jkl8mno9pqrs2tuv5wxys2tuv5wxy',
sender: "abcdefghiklmnopqrstuvwxyzABCDEGHIJKLMNOPQRSTUVWXYZ",
receiver: "abcdefghiklmnopqrstuvwxyzABCDEGHIJKLMNOPQRSTUVWXYZ",
contract:"A1B2C3D4E5F6G",
@@ -47,7 +47,7 @@ const GlobalStateProvider = ({ children }) => {
{
id: 4,
description:
'abc5def6ghi7jkl8mno9pqrs2tuv5wxyzbc5def6ghi7jkl8mno9pqrs2tuv5wxys2tuv5wxy',
'abc5def6ghi7jkl8mno9pqrs2tuv5wxyzbjfhfi9c5def6ghi7jkl8mno9pqrs2tuv5wxys2tuv5wxy',
sender: "abcdefghiklmnopqrstuvwxyzABCDEGHIJKLMNOPQRSTUVWXYZ",
receiver: "abcdefghiklmnopqrstuvwxyzABCDEGHIJKLMNOPQRSTUVWXYZ",
contract:"A1B2C3D4E5F6G",

2
src/components/AmountCard/AmountCard.jsx
View File

@@ -108,6 +108,7 @@ const AmountCard = () => {
alignItems={"center"}
justifyContent={"center"}
rounded={10}
p={2}
>
{item.icon}
</Box>
@@ -162,6 +163,7 @@ const AmountCard = () => {
alignItems={"center"}
justifyContent={"center"}
rounded={10}
p={2}
>
{item.icon}
</Box>

33
src/components/LatestTransactions/LatestTransactions.jsx
View File

@@ -3,13 +3,14 @@ import React, { useContext } from "react";
import { MdContentCopy, MdOutlineErrorOutline } from "react-icons/md";
import Pagination from "../Pagination";
import GlobalStateContext from "../../Contexts/GlobalStateContext";
import { Link } from "react-router-dom";
import { Link, useNavigate } from "react-router-dom";
import ToastBox from "../ToastBox";
const LatestTransactions = () => {
const toast = useToast()
const navigate = useNavigate()
const { colorMode} = useColorMode();
const { transactions } = useContext(GlobalStateContext);
@@ -40,8 +41,7 @@ const LatestTransactions = () => {
gap={0}
bg={colorMode === "light" ? "#230A79" : "#232127"}
// bg={"#232127"}
borderTopRightRadius={4}
borderTopLeftRadius={4}
roundedTop={'lg'}
>
<GridItem p={2}>
<Text color={"#fff"}>Sr. no</Text>
@@ -50,7 +50,7 @@ const LatestTransactions = () => {
<Text color={"#fff"}>Transactions</Text>
</GridItem>
</Grid>
<Box boxShadow={"rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;"}>
<Box roundedBottom={'lg'} overflow={'hidden'} boxShadow={"rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;"}>
{transactions.map((transaction, index) => (
<Grid
bg={index % 2 === 0 ? (colorMode === "light" ? "#F2EFFF" : "#312F35") : (colorMode === "light" ? "#fff" : "#232127")}
@@ -61,21 +61,28 @@ const LatestTransactions = () => {
<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"}>
<Link to="/did-info"> {transaction.description}</Link>
<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"}>
<Link to="/transaction" style={{fontWeight:"inherit"}}>{transaction.sender}</Link>
<Text as={"span"} ml={5} cursor={"pointer"}><MdContentCopy onClick={()=> copyToClipboard(transaction.sender)} /></Text>
<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 fontSize={"sm"} gap={4} mb={3}>
<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"}>
<Link to="/transaction" style={{fontWeight:"inherit"}}>{transaction.receiver}</Link>
<Text as={"span"} ml={5} cursor={"pointer"}><MdContentCopy onClick={()=> copyToClipboard(transaction.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
@@ -121,7 +128,7 @@ const LatestTransactions = () => {
<HStack>
<Text color={colorMode === "light" ? "#7B7B7B" : "#E8E8E8"}>Subnet ID/Main net :</Text>
<Text color={colorMode === "light" ? "#230A79" : "#B09AFF"}>
<Link to="/subnet-inner" style={{fontWeight:"inherit"}}>{transaction.subnetID}</Link>
<Link to={`/subnet-id-overview/${transaction.subnetID}`} style={{fontWeight:"inherit"}}>{transaction.subnetID}</Link>
</Text>
</HStack>

29
src/components/NavBar/NavBar.jsx
View File

@@ -1,32 +1,27 @@
/* eslint-disable no-unused-vars */
import {
Box,
Button,
Container,
Icon,
Image,
Stack,
Switch,
useColorMode,
VStack,
} from "@chakra-ui/react";
import { Outlet, Link, useLocation, NavLink } from "react-router-dom";
import { Link, NavLink } from "react-router-dom";
import logo from "../../assets/images/rubix.png";
import logoLight from "../../assets/images/rubixlogo.svg";
import { useEffect, useState } from "react";
import SwitchBtn from "../SwitchBtn/SwitchBtn";
const NavBar = () => {
// const [isHoveredCommunity, setIsHoveredCommunity] = useState(false);
const [windowWidth, setWindowWidth] = useState(window.innerWidth);
const { colorMode, toggleColorMode } = useColorMode();
const [isScrolled, setIsScrolled] = useState(false); // Declare isScrolled state
const { colorMode } = useColorMode();
const [isSwitchOn, setIsSwitchOn] = useState(true);
useEffect(() => {
const handleScroll = () => {
const scrollPosition = window.scrollY;
setIsScrolled(scrollPosition > 0);
setIsScrolled(scrollPosition > 0); // Update isScrolled based on scroll position
};
const handleResize = () => {
setWindowWidth(window.innerWidth);
};
@@ -40,8 +35,6 @@ const NavBar = () => {
};
}, []);
const theme = localStorage?.getItem("light");
return (
<>
<Box
@@ -51,12 +44,9 @@ const NavBar = () => {
top={0}
left={0}
id="navbar"
// bg={colorMode === "light" ? "light" : "black.900"}
color={colorMode === "light" ? "light" : "black.900"}
padding={"16px 0px"}
// borderBottom={"1px solid #ccc"}
borderBottom={colorMode === "light" ? "1px solid #ccc" : "none"}
// boxShadow={'md'}
>
<Container maxW="6xl">
<Box
@@ -78,7 +68,9 @@ const NavBar = () => {
style={({ isActive }) => ({
fontSize: "14px",
fontWeight: "400",
borderBottom: isActive ? "1px solid #DE858E" : "0px solid #fff", // Active style for MAIN NET
borderBottom: isActive
? "1px solid #DE858E"
: "0px solid #fff", // Active style for MAIN NET
})}
>
MAIN NET
@@ -88,7 +80,9 @@ const NavBar = () => {
style={({ isActive }) => ({
fontSize: "14px",
fontWeight: "400",
borderBottom: isActive ? "1px solid #DE858E" : "0px solid #fff", // Active style for SUBNETS
borderBottom: isActive
? "1px solid #DE858E"
: "0px solid #fff", // Active style for SUBNETS
})}
>
SUBNETS
@@ -101,7 +95,6 @@ const NavBar = () => {
</Box>
</Container>
</Box>
{/* <Box h={"74px"}></Box> */}
</>
);
};

5
src/index.css
View File

@@ -76,3 +76,8 @@ a:hover {
background-color: #f9f9f9;
}
}
.link{
background-color: '#ccc' !important;
}

15
src/pages/DidInfo.jsx
View File

@@ -10,13 +10,14 @@ import {
} from "@chakra-ui/react";
import React from "react";
import { MdContentCopy} from "react-icons/md";
import { Link } from "react-router-dom";
import { Link, useParams } from "react-router-dom";
import RelatedTransactions from "../components/RelatedTransactions/RelatedTransactions";
import bannerImage from "../assets/images/bannerImg.png";
import ToastBox from "../components/ToastBox";
const DidInfo = () => {
const { colorMode } = useColorMode();
const params = useParams()
const toast = useToast()
@@ -38,18 +39,18 @@ import ToastBox from "../components/ToastBox";
}
return (
<>
<Box backgroundImage={colorMode !== "light" ? `url(${bannerImage})` : "none"} backgroundSize="cover"
<Box h={"100vh"}display={'flex'} justifyContent={'space-between'} flexDirection={'column'}>
<Box backgroundImage={colorMode !== "light" ? `url(${bannerImage})` : "none"} backgroundSize="cover"
backgroundRepeat="no-repeat" pb={"8rem"}>
<Container maxW="6xl" pt={"8rem"}>
<Container maxW="6xl" pt={"6rem"}>
<Heading mb={5} fontSize={"sm"} fontWeight={400} color={colorMode === "light" ? "#000" : "#fff"}>
DID Info
</Heading>
<Box bg={colorMode === "light" ? "#F3F3F3" : "#1D1D1D"} p={4} mb={5} rounded={6}>
<Box boxShadow={colorMode === 'light'&&"md"} bg={colorMode === "light" ? "#F3F3F3" : "#1D1D1D"} p={4} mb={5} rounded={6}>
<Text color={"#969696"} fontSize={"sm"}>DID</Text>
<HStack fontSize={"sm"}>
<HStack color={colorMode === "light" ? "#230A79" : "#B09AFF"}>
<Link style={{ fontWeight: "inherit" }}> abc5def6ghi7jkl8mno9pqrs2tuv5wxyzabcdefghijklmnopqrs5674577tuvwxyz !"§ $%& </Link>
<Link style={{ fontWeight: "inherit" }}> {params?.id}</Link>
<Text as={"span"} ml={5} cursor={"pointer"}>
<MdContentCopy onClick={() => copyToClipboard(transaction.sender)}/>
</Text>
@@ -67,7 +68,7 @@ import ToastBox from "../components/ToastBox";
</Container>
</Box>
<RelatedTransactions />
</>
</Box>
);
};

4
src/pages/MainNet.jsx
View File

@@ -32,7 +32,7 @@ const MainNet = () => {
}
return (
<Box p={"10rem 0 4rem 0"} backgroundImage={colorMode !== "light" ? `url(${bannerImage})` : "none"} position={"relative"} backgroundSize="contain" backgroundRepeat="no-repeat">
<Box p={"6rem 0 4rem 0"} backgroundImage={colorMode !== "light" ? `url(${bannerImage})` : "none"} position={"relative"} backgroundSize="contain" backgroundRepeat="no-repeat">
<Container
maxW="6xl"
color="white"
@@ -190,7 +190,7 @@ const MainNet = () => {
<Text
color={colorMode === "light" ? "#230A79" : "#B09AFF"}
>
<Link to="/subnet-inner">{transaction.subnetID}</Link>
<Link to="/subnet-id-overview">{transaction.subnetID}</Link>
</Text>
</HStack>
</Box>

5
src/pages/SmartContract.jsx
View File

@@ -8,7 +8,7 @@ import {
useColorMode,
useToast,
} from "@chakra-ui/react";
import React from "react";
import React, { useEffect } from "react";
import { MdContentCopy} from "react-icons/md";
import { Link } from "react-router-dom";
import RelatedTransactions from "../components/RelatedTransactions/RelatedTransactions";
@@ -17,6 +17,9 @@ import ToastBox from "../components/ToastBox";
const Transaction = () => {
const { colorMode } = useColorMode();
useEffect(() => {
window.scrollTo({ top: 0, behavior: "smooth" }); // Scroll to top smoothly when params change
}, []);
const toast = useToast()

6
src/pages/Subnet.jsx
View File

@@ -33,7 +33,7 @@ const Subnet = () => {
}
return (
<Box p={"10rem 0 4rem 0"} backgroundImage={colorMode !== "light" ? `url(${bannerImage})` : "none"} position={"relative"} backgroundSize="contain" backgroundRepeat="no-repeat">
<Box p={"6rem 0 4rem 0"} backgroundImage={colorMode !== "light" ? `url(${bannerImage})` : "none"} position={"relative"} backgroundSize="contain" backgroundRepeat="no-repeat">
<Container
maxW="6xl"
color="white"
@@ -42,7 +42,7 @@ const Subnet = () => {
mb={10}
>
<Heading fontSize={"md"} fontWeight={400} color={colorMode === "light" ? "#000" : "#fff"}>
Main Net - Overview
Subnet ID - Overview
</Heading>
<Text to="" style={{ fontSize: "14px" }} color={colorMode === "light" ? "#000" : "#fff"} display={"flex"} gap={"3"}>
View total number of records
@@ -191,7 +191,7 @@ const Subnet = () => {
<Text
color={colorMode === "light" ? "#230A79" : "#B09AFF"}
>
<Link to="/subnet-inner">{transaction.subnetID}</Link>
<Link to="/subnet-id-overview">{transaction.subnetID}</Link>
</Text>
</HStack>
</Box>

11
src/pages/SubnetInner.jsx → src/pages/SubnetIdOverview.jsx
View File

@@ -1,17 +1,22 @@
import { Box, Container, Grid, GridItem, Heading, HStack, Link, Select, Text, useColorMode, useToast } from "@chakra-ui/react";
import React, { useContext } from "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 SubnetInner = () => {
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
@@ -31,7 +36,7 @@ const SubnetInner = () => {
}
return (
<Box p={"10rem 0 4rem 0"} backgroundImage={colorMode !== "light" ? `url(${bannerImage})` : "none"} position={"relative"} backgroundSize="contain" backgroundRepeat="no-repeat">
<Box p={"6rem 0 4rem 0"} backgroundImage={colorMode !== "light" ? `url(${bannerImage})` : "none"} position={"relative"} backgroundSize="contain" backgroundRepeat="no-repeat">
<Container
maxW="6xl"
color="white"
@@ -40,7 +45,7 @@ const SubnetInner = () => {
mb={10}
>
<Heading fontSize={"md"} fontWeight={400} color={colorMode === "light" ? "#000" : "#fff"}>
Main Net - A1B2C3D4E5
Subnet ID - {params?.id}
</Heading>
<Text to="" style={{ fontSize: "14px" }} color={colorMode === "light" ? "#000" : "#fff"} display={"flex"} gap={"3"}>
View total number of records

8
src/pages/Transaction.jsx
View File

@@ -45,7 +45,7 @@ const Transaction = () => {
<Heading mb={5} fontSize={"sm"} fontWeight={400} color={colorMode === "light" ? "#000" : "#fff"}>
Transaction Info
</Heading>
<Box bg={colorMode === "light" ? "#F3F3F3" : "#1D1D1D"} p={4} mb={5} rounded={6}>
<Box boxShadow={colorMode === 'light'&&"md"} bg={colorMode === "light" ? "#F3F3F3" : "#1D1D1D"} p={4} mb={5} rounded={6}>
<Text color={"#969696"} fontSize={"sm"}>Transaction ID</Text>
<HStack fontSize={"sm"}>
<HStack color={colorMode === "light" ? "#230A79" : "#B09AFF"}>
@@ -92,7 +92,7 @@ const Transaction = () => {
</Text>
</HStack>
</Box>
<Box bg={colorMode === "light" ? "#F3F3F3" : "#1D1D1D"} p={4} mb={5} rounded={6}>
<Box boxShadow={colorMode === 'light'&&"md"} bg={colorMode === "light" ? "#F3F3F3" : "#1D1D1D"} p={4} mb={5} rounded={6}>
<Text color={colorMode === "light" ? "#000" : "#fff"} fontSize={"sm"}>Network</Text>
<HStack fontSize={"sm"} pb={3} color={colorMode === "light" ? "#230A79" : "#B09AFF"}>
<Link style={{ fontWeight: "inherit" }}> abc5def6ghi7jkl8mno9pqrs2tuv5wxyzabcdefghijklmnopqrs5674577tuvwxyz !"§ $%& </Link>
@@ -115,7 +115,7 @@ const Transaction = () => {
</Text>
</HStack>
</Box>
<Box bg={colorMode === "light" ? "#F3F3F3" : "#1D1D1D"} p={4} mb={5} rounded={6}>
<Box boxShadow={colorMode === 'light'&&"md"} bg={colorMode === "light" ? "#F3F3F3" : "#1D1D1D"} p={4} mb={5} rounded={6}>
<HStack fontSize={"sm"} gap={"8rem"} mb={5}>
<Box>
<Text>Amount</Text>
@@ -134,7 +134,7 @@ const Transaction = () => {
</Text>
</HStack>
</Box>
<Box bg={colorMode === "light" ? "#F3F3F3" : "#1D1D1D"} p={4} rounded={6}>
<Box boxShadow={colorMode === 'light'&&"md"} bg={colorMode === "light" ? "#F3F3F3" : "#1D1D1D"} p={4} rounded={6}>
<Text color={colorMode === "light" ? "#000" : "#fff"} fontSize={"sm"}>Pledge Token</Text>
<HStack fontSize={"sm"} pb={3} color={colorMode === "light" ? "#230A79" : "#B09AFF"}>
<Link style={{ fontWeight: "inherit" }}>bafybmibqle4w7k6acjbznk6ksapiyfwff6vwbwyaqx25wmzagt3awzbeky</Link>

167
src/pages/Transaction/TransactionDetails.jsx Normal file
View File

@@ -0,0 +1,167 @@
import {
Box,
Container,
Divider,
Heading,
HStack,
Text,
useColorMode,
useToast,
} from "@chakra-ui/react";
import React, { useContext, useEffect, useState } from "react";
import { MdContentCopy} from "react-icons/md";
import { Link, useNavigate, useParams } from "react-router-dom";
import RelatedTransactions from "../../components/RelatedTransactions/RelatedTransactions";
import bannerImage from "../../assets/images/bannerImg.png";
import ToastBox from "../../components/ToastBox";
import GlobalStateContext from "../../Contexts/GlobalStateContext";
const TransactionDetails = () => {
const navigate = useNavigate()
const params = useParams()
const { colorMode } = useColorMode();
console.log(params?.id);
// Scroll to top when component mounts or params change
useEffect(() => {
window.scrollTo({ top: 0, behavior: "smooth" }); // Scroll to top smoothly when params change
}, [params]);
const { transactions } = useContext(GlobalStateContext);
const filteredData = transactions?.find((item)=> item?.description === params?.id)
console.log(filteredData);
const toast = useToast()
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 backgroundImage={colorMode !== "light" ? `url(${bannerImage})` : "none"} backgroundSize="cover"
backgroundRepeat="no-repeat" pb={"5rem"}>
<Container maxW="6xl" pt={"6rem"}>
<Heading mb={5} fontSize={"sm"} fontWeight={400} color={colorMode === "light" ? "#000" : "#fff"}>
Transaction Info
</Heading>
<Box boxShadow={colorMode === 'light'&&"md"} bg={colorMode === "light" ? "#F3F3F3" : "#1D1D1D"} p={4} mb={5} rounded={6}>
<Text color={"#969696"} fontSize={"sm"}>Transaction ID</Text>
<HStack fontSize={"sm"}>
<HStack color={colorMode === "light" ? "gray.400" : "gray.100"}>
<Text> {filteredData?.description} </Text>
<Text _hover={{bg:"gray.50"}} transition={'0.5s'} rounded={'sm'} p={1} as={"span"} ml={1} cursor={"pointer"}>
<MdContentCopy onClick={() => copyToClipboard(filteredData.sender)}/>
</Text>
</HStack>
</HStack>
<Divider mt={4} mb={5} />
<Text fontSize={"md"} mb={2} color={colorMode === "light" ? "#230A79" : "#fff"}>
Super Title
</Text>
<HStack fontSize={"sm"} gap={4} mb={2}>
<Text color={colorMode === "light" ? "#0F0F0F" : "#E8E8E8"}>Token ID :</Text>
<HStack
color={colorMode === "light" ? "#230A79" : "#B09AFF"}
textDecoration={"underline"}
>
<Text>
{filteredData?.sender}</Text>
<Text _hover={{bg:"gray.50"}} transition={'0.5s'} rounded={'sm'} p={1} as={"span"} ml={1} cursor={"pointer"}>
<MdContentCopy onClick={() => copyToClipboard(filteredData.sender)}/>
</Text>
</HStack>
</HStack>
<HStack fontSize={"sm"} gap={4} mb={3}>
<Text color={colorMode === "light" ? "#0F0F0F" : "#E8E8E8"}>
Block ID :
</Text>
<Text
display={"flex"}
alignItems={"center"}
color={colorMode === "light" ? "#230A79" : "#B09AFF"}
textDecoration={"underline"}
>
<Text>
{filteredData?.receiver}
</Text>
<Text _hover={{bg:"gray.50"}} transition={'0.5s'} rounded={'sm'} p={1} as={"span"} ml={1} cursor={"pointer"}>
<MdContentCopy onClick={() => copyToClipboard(filteredData.receiver)}/>
</Text>
</Text>
</HStack>
</Box>
<Box boxShadow={colorMode === 'light'&&"md"} bg={colorMode === "light" ? "#F3F3F3" : "#1D1D1D"} p={4} mb={5} rounded={6}>
<Text color={colorMode === "light" ? "#000" : "#fff"} fontSize={"sm"}>Network</Text>
<HStack fontSize={"sm"} pb={3} color={colorMode === "light" ? "#230A79" : "#B09AFF"}>
<Text style={{ fontWeight: "inherit" }}> {filteredData?.sender} </Text>
<Text _hover={{bg:"gray.50"}} transition={'0.5s'} rounded={'sm'} p={1} as={"span"} ml={1} cursor={"pointer"}>
<MdContentCopy onClick={() => copyToClipboard(filteredData.sender)}/>
</Text>
</HStack>
<Text color={colorMode === "light" ? "#000" : "#fff"} fontSize={"sm"}>Sender</Text>
<HStack fontSize={"sm"} pb={3} color={colorMode === "light" ? "#230A79" : "#B09AFF"}>
<Text onClick={()=> navigate(`/did-info/${filteredData.sender}`)} style={{ fontWeight: "inherit" }}> {filteredData?.sender} </Text>
<Text _hover={{bg:"gray.50"}} transition={'0.5s'} rounded={'sm'} p={1} as={"span"} ml={1} cursor={"pointer"}>
<MdContentCopy onClick={() => copyToClipboard(filteredData.sender)}/>
</Text>
</HStack>
<Text color={colorMode === "light" ? "#000" : "#fff"} fontSize={"sm"}>Receiver</Text>
<HStack fontSize={"sm"} pb={3} color={colorMode === "light" ? "#230A79" : "#B09AFF"}>
<Text onClick={()=> navigate(`/did-info/${filteredData.receiver}`)} style={{ fontWeight: "inherit" }}> {filteredData?.receiver}</Text>
<Text _hover={{bg:"gray.50"}} transition={'0.5s'} rounded={'sm'} p={1} as={"span"} ml={1} cursor={"pointer"}>
<MdContentCopy onClick={() => copyToClipboard(filteredData.receiver)}/>
</Text>
</HStack>
</Box>
<Box boxShadow={colorMode === 'light'&&"md"} bg={colorMode === "light" ? "#F3F3F3" : "#1D1D1D"} p={4} mb={5} rounded={6}>
<HStack fontSize={"sm"} gap={"8rem"} mb={5}>
<Box>
<Text>Amount</Text>
<Text color={"#A1A1A1"}>$ 100</Text>
</Box>
<Box>
<Text>$ 100</Text>
<Text color={"#A1A1A1"}>18 hours ago, 29/07/2024</Text>
</Box>
</HStack>
<Text color={colorMode === "light" ? "#000" : "#fff"} fontSize={"sm"}>Quorum list</Text>
<HStack fontSize={"sm"} pb={3} color={colorMode === "light" ? "#230A79" : "#B09AFF"}>
<Text style={{ fontWeight: "inherit" }}>{filteredData?.receiver}</Text>
<Text _hover={{bg:"gray.50"}} transition={'0.5s'} rounded={'sm'} p={1} as={"span"} ml={1} cursor={"pointer"}>
<MdContentCopy onClick={() => copyToClipboard(filteredData.sender)}/>
</Text>
</HStack>
</Box>
<Box boxShadow={colorMode === 'light'&&"md"} bg={colorMode === "light" ? "#F3F3F3" : "#1D1D1D"} p={4} rounded={6}>
<Text color={colorMode === "light" ? "#000" : "#fff"} fontSize={"sm"}>Pledge Token</Text>
<HStack fontSize={"sm"} pb={3} color={colorMode === "light" ? "#230A79" : "#B09AFF"}>
<Text style={{ fontWeight: "inherit" }}>{filteredData?.receiver}</Text>
<Text _hover={{bg:"gray.50"}} transition={'0.5s'} rounded={'sm'} p={1} as={"span"} ml={1} cursor={"pointer"}>
<MdContentCopy onClick={() => copyToClipboard(filteredData.sender)}/>
</Text>
</HStack>
</Box>
</Container>
</Box>
<RelatedTransactions />
</>
);
};
export default TransactionDetails;

12
src/routes/_routes.jsx
View File

@@ -2,10 +2,11 @@
import Home from "../pages/Home";
import MainNet from "../pages/MainNet";
import Subnet from "../pages/Subnet";
import SubnetInner from "../pages/SubnetInner";
import SubnetInner from "../pages/SubnetIdOverview";
import Transaction from "../pages/Transaction";
import SmartContract from "../pages/SmartContract";
import DidInfo from "../pages/DidInfo";
import TransactionDetails from "../pages/Transaction/TransactionDetails";
export const route = [
{
@@ -21,19 +22,24 @@ export const route = [
element: <Subnet />,
},
{
path: "/subnet-inner",
path: "/subnet-id-overview/:id",
element: <SubnetInner />,
},
{
path: "/transaction",
element: <Transaction />,
},
{
path: "/transaction/:id",
element: <TransactionDetails />,
},
{
path: "/smart-contract",
element: <SmartContract />,
},
{
path: "/did-info",
path: "/did-info/:id",
element: <DidInfo />,
},
];