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

navbar 👷‍♂️

Browse Source
This commit is contained in:
YasinShaikh123
2024-10-15 19:07:44 +05:30
parent d35b5a13c4
commit a5f9d69419
6 changed files with 567 additions and 259 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -98,13 +98,12 @@ const LatestTransactions = () => {
// overflow={'hidden'} // Ensure overflow is hidden
whiteSpace={"nowrap"} // Prevent the text from wrapping
textOverflow={"ellipsis"}
isTruncated
isTruncated
cursor={"pointer"}
onClick={() =>
navigate(`/transaction/${transaction?.description}`)
}
>
{" "}
{transaction.description}
</Text>

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

@@ -2,6 +2,7 @@ import {
Box,
Container,
Image,
Text,
useColorMode,
} from "@chakra-ui/react";
import { Link, NavLink } from "react-router-dom";
@@ -58,22 +59,22 @@ const NavBar = () => {
<Link to="/">
<Image
src={colorMode === "light" ? logoLight : logo}
width={"120px"}
// width={"120px"}
width={{base:"95px",md : "120px"}}
/>
</Link>
<Box display={"flex"} alignItems={"center"} gap={7}>
<NavLink
to="/main-net"
style={({ isActive }) => ({
fontSize: "14px",
fontWeight: "400",
borderBottom: isActive
? "1px solid #DE858E"
: "0px solid #fff", // Active style for MAIN NET
})}
>
MAIN NET
<Box display={"flex"} alignItems={"center"} gap={{base:5,md : 7}}>
<NavLink to="/main-net">
{({ isActive }) => (
<Text
fontSize={{ base: "12px", md: "14px" }}
fontWeight="400"
borderBottom={isActive ? "1px solid #DE858E" : "0px solid #fff"}
>
MAIN NET
</Text>
)}
</NavLink>
<NavLink
to="/subnet"

159
src/pages/DidInfo.jsx
View File

@@ -1,30 +1,30 @@
import {
Box,
Container,
Divider,
Heading,
HStack,
Text,
useColorMode,
useToast,
} from "@chakra-ui/react";
import React, { useEffect } 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";
Box,
Container,
Divider,
Heading,
HStack,
Text,
useColorMode,
useToast,
} from "@chakra-ui/react";
import React, { useEffect } 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";
const DidInfo = () => {
useEffect(() => {
window.scrollTo({ top: 0, behavior: "smooth" }); // Scroll to top smoothly when params change
}, []);
const { colorMode } = useColorMode();
const params = useParams()
const navigate = useNavigate()
const toast = useToast()
const DidInfo = () => {
useEffect(() => {
window.scrollTo({ top: 0, behavior: "smooth" }); // Scroll to top smoothly when params change
}, []);
const { colorMode } = useColorMode();
const params = useParams();
const navigate = useNavigate();
const toast = useToast();
function copyToClipboard(text) {
navigator.clipboard
.writeText(text)
@@ -41,40 +41,81 @@ import ToastBox from "../components/ToastBox";
console.error("Failed to copy text: ", err);
});
}
return (
<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={"6rem"}>
<Heading mb={5} fontSize={"sm"} fontWeight={400} color={colorMode === "light" ? "#000" : "#fff"}>
DID Info
</Heading>
<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" }}> {params?.id}</Link>
<Text as={"span"} ml={5} cursor={"pointer"}>
<MdContentCopy onClick={() => copyToClipboard(transaction.sender)}/>
</Text>
</HStack>
</HStack>
<Divider mt={4} mb={5} />
<Text color={colorMode === "light" ? "#000" : "#fff"} fontSize={"sm"}>Balance</Text>
<HStack fontSize={"sm"} pb={3} color={colorMode === "light" ? "#230A79" : "#B09AFF"}>
<Link style={{ fontWeight: "inherit" }}>$ 10000.12345</Link>
<Text as={"span"} ml={5} cursor={"pointer"}>
<MdContentCopy onClick={() => copyToClipboard(transaction.sender)}/>
</Text>
</HStack>
</Box>
</Container>
return (
<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={"6rem"}>
<Heading
mb={5}
fontSize={"sm"}
fontWeight={400}
color={colorMode === "light" ? "#000" : "#fff"}
>
DID Info
</Heading>
<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
fontWeight={"inherit"}
whiteSpace={"nowrap"} // Prevent the text from wrapping
textOverflow={"ellipsis"}
isTruncated
cursor={"pointer"}
color={colorMode === "light" ? "#230A79" : "#B09AFF"}
>
<Link style={{ fontWeight: "inherit" }}>{params?.id}</Link>
<Text as={"span"} ml={5} cursor={"pointer"}>
<MdContentCopy
onClick={() => copyToClipboard(transaction.sender)}
/>
</Text>
</HStack>
</HStack>
<Divider mt={4} mb={5} />
<Text
color={colorMode === "light" ? "#000" : "#fff"}
fontSize={"sm"}
>
Balance
</Text>
<HStack
fontSize={"sm"}
pb={3}
color={colorMode === "light" ? "#230A79" : "#B09AFF"}
>
<Link style={{ fontWeight: "inherit" }}>$ 10000.12345</Link>
<Text as={"span"} ml={5} cursor={"pointer"}>
<MdContentCopy
onClick={() => copyToClipboard(transaction.sender)}
/>
</Text>
</HStack>
</Box>
<RelatedTransactions />
</Container>
</Box>
);
};
export default DidInfo;
<RelatedTransactions />
</Box>
);
};
export default DidInfo;

92
src/pages/SmartContract.jsx
View File

@@ -52,17 +52,25 @@ import ToastBox from "../components/ToastBox";
<Box bg={colorMode === "light" ? "#F3F3F3" : "#1D1D1D"} p={4} mb={5} rounded={6}>
<Text color={"#969696"} fontSize={"sm"}>Smart Contract Token</Text>
<HStack fontSize={"sm"}>
<HStack color={colorMode === "light" ? "#230A79" : "#B09AFF"}>
<Link style={{ fontWeight: "inherit" }}>abc5def6ghi7jkl8mno9pqrs2tuv5wxyzabcdefghijklmnopqrs5674577tuvwxyz !"§ $%&</Link>
{/* <Text as={"span"} ml={5} cursor={"pointer"}>
<MdContentCopy onClick={() => copyToClipboard(transaction.sender)}/>
</Text> */}
<HStack whiteSpace={"nowrap"} // Prevent the text from wrapping
textOverflow={"ellipsis"}
isTruncated
cursor={"pointer"}
color={colorMode === "light" ? "#230A79" : "#B09AFF"}>
<Link style={{ fontWeight: "inherit" }}>abc5def6ghi7jkl8mno9pqrs2tuv5wxyzabcdefghijklmnopqrs5674577tuvwxyz</Link>
{/* <Text as={"span"} ml={5} cursor={"pointer"}>
<MdContentCopy onClick={() => copyToClipboard(transaction.sender)}/>
</Text> */}
</HStack>
</HStack>
<Divider mt={4} mb={5} />
<Text color={colorMode === "light" ? "#000" : "#fff"} fontSize={"sm"}>Transaction ID</Text>
<HStack fontSize={"sm"} pb={3} color={colorMode === "light" ? "#230A79" : "#B09AFF"}>
<Link style={{ fontWeight: "inherit" }}> abc5def6ghi7jkl8mno9pqrs2tuv5wxyzabcdefghijklmnopqrs5674577tuvwxyz !"§ $%& </Link>
<HStack whiteSpace={"nowrap"} // Prevent the text from wrapping
textOverflow={"ellipsis"}
isTruncated
cursor={"pointer"}
fontSize={"sm"} pb={3} color={colorMode === "light" ? "#230A79" : "#B09AFF"}>
<Link style={{ fontWeight: "inherit" }}> abc5def6ghi7jkl8mno9pqrs2tuv5wxyzabcdefghijklmnopqrs5674577tuvwxyz</Link>
<Text as={"span"} ml={5} cursor={"pointer"}>
<MdContentCopy onClick={() => copyToClipboard(transaction.sender)}/>
</Text>
@@ -70,24 +78,27 @@ import ToastBox from "../components/ToastBox";
<Text fontSize={"md"} mb={2} color={colorMode === "light" ? "#230A79" : "#fff"}>
Block
</Text>
<HStack fontSize={"sm"} gap={4} mb={2}>
<Box fontSize={"sm"} gap={4} mb={2} display={{ base: "block", md: "flex" }}>
<Text color={colorMode === "light" ? "#0F0F0F" : "#E8E8E8"}>
Block ID:
</Text>
<HStack
whiteSpace={"nowrap"} // Prevent the text from wrapping
textOverflow={"ellipsis"}
isTruncated
cursor={"pointer"}
color={colorMode === "light" ? "#230A79" : "#B09AFF"}
textDecoration={"underline"}
>
<Link style={{ fontWeight: "inherit" }}>
abc5def6ghi7jkl8mno9pqrs2tuv5wxyzabcdefghijklmnopqrs5674577tuvwxyz
!"§ $%&
</Link>
<Text as={"span"} ml={5} cursor={"pointer"}>
<MdContentCopy onClick={() => copyToClipboard(transaction.sender)}/>
</Text>
</HStack>
</HStack>
<HStack fontSize={"sm"} gap={4} mb={3}>
</Box>
<Box fontSize={"sm"} gap={4} mb={3} display={{ base: "block", md: "flex" }}>
<Text color={colorMode === "light" ? "#0F0F0F" : "#E8E8E8"}>
Block Hash:
</Text>
@@ -96,42 +107,65 @@ import ToastBox from "../components/ToastBox";
alignItems={"center"}
color={colorMode === "light" ? "#230A79" : "#B09AFF"}
textDecoration={"underline"}
whiteSpace={"nowrap"} // Prevent the text from wrapping
textOverflow={"ellipsis"}
isTruncated
cursor={"pointer"}
>
<Link style={{ fontWeight: "inherit" }}>
abc5def6ghi7jkl8mno9pqrs2tuv5wxyzabcdefghijklmnopqrs5674577tuvwxyz!"§ $%&
abc5def6ghi7jkl8mno9pqrs2tuv5wxyzabcdefghijklmnopqrs5674577tuvwxyz!
</Link>
<Text as={"span"} ml={5} cursor={"pointer"}>
<MdContentCopy onClick={() => copyToClipboard(transaction.receiver)}/>
</Text>
</Text>
</HStack>
</Box>
<Text color={colorMode === "light" ? "#000" : "#fff"} fontSize={"sm"}>Network</Text>
<HStack fontSize={"sm"} pb={3} color={colorMode === "light" ? "#230A79" : "#B09AFF"}>
<Link style={{ fontWeight: "inherit" }} onClick={()=> navigate(`/did-info/abc5def6ghi7jkl8mno9pqrs2tuv5wxyzabcdefghijklmnopqrs5674577tuvwxyz`)}> abc5def6ghi7jkl8mno9pqrs2tuv5wxyzabcdefghijklmnopqrs5674577tuvwxyz !"§ $%& </Link>
<Text as={"span"} ml={5} cursor={"pointer"}>
<MdContentCopy onClick={() => copyToClipboard(transaction.sender)}/>
</Text>
<HStack
whiteSpace={"nowrap"} // Prevent the text from wrapping
textOverflow={"ellipsis"}
isTruncated
cursor={"pointer"}
fontSize={"sm"} pb={3} color={colorMode === "light" ? "#230A79" : "#B09AFF"}>
<Link style={{ fontWeight: "inherit" }} onClick={()=> navigate(`/did-info/abc5def6ghi7jkl8mno9pqrs2tuv5wxyzabcdefghijklmnopqrs5674577tuvwxyz`)}> abc5def6ghi7jkl8mno9pqrs2tuv5wxyzabcdefghijklmnopqrs5674577tuvwxyz</Link>
<Text whiteSpace={"nowrap"} // Prevent the text from wrapping
textOverflow={"ellipsis"}
isTruncated as={"span"} ml={5} cursor={"pointer"} >
<MdContentCopy onClick={() => copyToClipboard(transaction.sender)}/>
</Text>
</HStack>
</Box>
<Box bg={colorMode === "light" ? "#F3F3F3" : "#1D1D1D"} p={4} mb={5} rounded={6}>
<Text color={colorMode === "light" ? "#000" : "#fff"} fontSize={"sm"}>Executor</Text>
<HStack fontSize={"sm"} pb={3} color={colorMode === "light" ? "#230A79" : "#B09AFF"}>
<HStack
whiteSpace={"nowrap"} // Prevent the text from wrapping
textOverflow={"ellipsis"}
isTruncated
fontSize={"sm"} pb={3} color={colorMode === "light" ? "#230A79" : "#B09AFF"}>
<Link style={{ fontWeight: "inherit" }} onClick={()=> navigate(`/did-info/abc5def6ghi7jkl8mno9pqrs2tuv5wxyzabcdefghijklmnopqrs5674577tuvwxyz`)}> abc5def6ghi7jkl8mno9pqrs2tuv5wxyzabcdefghijklmnopqrs5674577tuvwxyz !"§ $%& </Link>
<Text as={"span"} ml={5} cursor={"pointer"}>
<MdContentCopy onClick={() => copyToClipboard(transaction.sender)}/>
</Text>
</HStack>
<Text color={colorMode === "light" ? "#000" : "#fff"} fontSize={"sm"}>Deployer</Text>
<HStack fontSize={"sm"} pb={3} color={colorMode === "light" ? "#230A79" : "#B09AFF"}>
<Link style={{ fontWeight: "inherit" }} onClick={()=> navigate(`/did-info/abc5def6ghi7jkl8mno9pqrs2tuv5wxyzabcdefghijklmnopqrs5674577tuvwxyz`)}> abc5def6ghi7jkl8mno9pqrs2tuv5wxyzabcdefghijklmnopqrs5674577tuvwxyz !"§ $%& </Link>
<HStack
whiteSpace={"nowrap"} // Prevent the text from wrapping
textOverflow={"ellipsis"}
isTruncated
cursor={"pointer"}
fontSize={"sm"} pb={3} color={colorMode === "light" ? "#230A79" : "#B09AFF"}>
<Link style={{ fontWeight: "inherit" }} onClick={()=> navigate(`/did-info/abc5def6ghi7jkl8mno9pqrs2tuv5wxyzabcdefghijklmnopqrs5674577tuvwxyz`)}> abc5def6ghi7jkl8mno9pqrs2tuv5wxyzabcdefghijklmnopqrs5674577tuvwxyz</Link>
<Text as={"span"} ml={5} cursor={"pointer"}>
<MdContentCopy onClick={() => copyToClipboard(transaction.sender)}/>
</Text>
</HStack>
<Text color={colorMode === "light" ? "#000" : "#fff"} fontSize={"sm"}>Creator</Text>
<HStack fontSize={"sm"} pb={3} color={colorMode === "light" ? "#230A79" : "#B09AFF"}>
<HStack whiteSpace={"nowrap"} // Prevent the text from wrapping
textOverflow={"ellipsis"}
isTruncated
cursor={"pointer"} fontSize={"sm"} pb={3} color={colorMode === "light" ? "#230A79" : "#B09AFF"}>
<Link style={{ fontWeight: "inherit" }} onClick={()=> navigate(`/did-info/abc5def6ghi7jkl8mno9pqrs2tuv5wxyzabcdefghijklmnopqrs5674577tuvwxyz`)}> abc5def6ghi7jkl8mno9pqrs2tuv5wxyzabcdefghijklmnopqrs5674577tuvwxyz !"§ $%& </Link>
<Text as={"span"} ml={5} cursor={"pointer"}>
<Text as={"span"} ml={5} cursor={"pointer"}>
<MdContentCopy onClick={() => copyToClipboard(transaction.sender)}/>
</Text>
</HStack>
@@ -148,7 +182,10 @@ import ToastBox from "../components/ToastBox";
</Box>
</HStack>
<Text color={colorMode === "light" ? "#000" : "#fff"} fontSize={"sm"}>Quorum list</Text>
<HStack fontSize={"sm"} pb={3} color={colorMode === "light" ? "#230A79" : "#B09AFF"}>
<HStack whiteSpace={"nowrap"} // Prevent the text from wrapping
textOverflow={"ellipsis"}
isTruncated
cursor={"pointer"} fontSize={"sm"} pb={3} color={colorMode === "light" ? "#230A79" : "#B09AFF"}>
<Link style={{ fontWeight: "inherit" }}>bafybmibqle4w7k6acjbznk6ksapiyfwff6vwbwyaqx25wmzagt3awzbeky</Link>
<Text as={"span"} ml={5} cursor={"pointer"}>
<MdContentCopy onClick={() => copyToClipboard(transaction.sender)}/>
@@ -157,9 +194,12 @@ import ToastBox from "../components/ToastBox";
</Box>
<Box 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"}>
<HStack whiteSpace={"nowrap"} // Prevent the text from wrapping
textOverflow={"ellipsis"}
isTruncated
cursor={"pointer"} fontSize={"sm"} pb={3} color={colorMode === "light" ? "#230A79" : "#B09AFF"}>
<Link style={{ fontWeight: "inherit" }}>bafybmibqle4w7k6acjbznk6ksapiyfwff6vwbwyaqx25wmzagt3awzbeky</Link>
<Text as={"span"} ml={5} cursor={"pointer"}>
<Text as={"span"} ml={5} cursor={"pointer"}>
<MdContentCopy onClick={() => copyToClipboard(transaction.sender)}/>
</Text>
</HStack>

2
src/pages/Transaction.jsx
View File

@@ -87,7 +87,7 @@ const Transaction = () => {
abc5def6ghi7jkl8mno9pqrs2tuv5wxyzabcdefghijklmnopqrs5674577tuvwxyz!"§ $%&
</Link>
<Text as={"span"} ml={5} cursor={"pointer"}>
<MdContentCopy onClick={() => copyToClipboard(transaction.receiver)}/>
<MdContentCopy onClick={() => copyToClipboard(transaction.receiver)}/>
</Text>
</Text>
</HStack>

543
src/pages/Transaction/TransactionDetails.jsx
View File

@@ -1,167 +1,394 @@
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";
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();
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(() => {
// 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);
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"} />
),
});
}
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"}>
Token Information
</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"}>Main net / Subnet Id</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>Timestamp</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>
})
.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"}
whiteSpace={"nowrap"} // Prevent the text from wrapping
textOverflow={"ellipsis"}
isTruncated
cursor={"pointer"}
>
<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"}
>
Token Information
</Text>
<Box
fontSize={"sm"}
gap={4}
mb={2}
display={{ base: "block", md: "flex" }}
>
<Text color={colorMode === "light" ? "#0F0F0F" : "#E8E8E8"}>
Token ID :
</Text>
<HStack
color={colorMode === "light" ? "#230A79" : "#B09AFF"}
textDecoration={"underline"}
>
<Text
whiteSpace={"nowrap"} // Prevent the text from wrapping
textOverflow={"ellipsis"}
isTruncated
cursor={"pointer"}
>
{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>
</Box>
<Box
fontSize={"sm"}
gap={4}
mb={2}
display={{ base: "block", md: "flex" }}
>
<Text color={colorMode === "light" ? "#0F0F0F" : "#E8E8E8"}>
Block ID :
</Text>
<Text
display={"flex"}
alignItems={"center"}
color={colorMode === "light" ? "#230A79" : "#B09AFF"}
textDecoration={"underline"}
whiteSpace={"nowrap"}
textOverflow={"ellipsis"}
isTruncated
cursor={"pointer"}
>
<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>
</Box>
</Box>
<RelatedTransactions />
</>
);
};
export default TransactionDetails;
<Box
boxShadow={colorMode === "light" && "md"}
bg={colorMode === "light" ? "#F3F3F3" : "#1D1D1D"}
p={4}
mb={5}
rounded={6}
>
<Text
color={colorMode === "light" ? "#000" : "#fff"}
fontSize={"sm"}
>
Main net / Subnet Id
</Text>
<HStack
fontSize={"sm"}
pb={3}
color={colorMode === "light" ? "#230A79" : "#B09AFF"}
>
<Text fontWeight={"inherit"}
whiteSpace={"nowrap"} // Prevent the text from wrapping
textOverflow={"ellipsis"}
isTruncated
cursor={"pointer"}>
{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}`)}
fontWeight={"inherit"}
whiteSpace={"nowrap"} // Prevent the text from wrapping
textOverflow={"ellipsis"}
isTruncated
cursor={"pointer"}
>
{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}`)}
fontWeight={"inherit"}
whiteSpace={"nowrap"} // Prevent the text from wrapping
textOverflow={"ellipsis"}
isTruncated
cursor={"pointer"}
>
{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>Timestamp</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
fontWeight={"inherit"}
whiteSpace={"nowrap"} // Prevent the text from wrapping
textOverflow={"ellipsis"}
isTruncated
cursor={"pointer"}
>
{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
fontWeight={"inherit"}
whiteSpace={"nowrap"} // Prevent the text from wrapping
textOverflow={"ellipsis"}
isTruncated
cursor={"pointer"}
>
{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;