79 lines
3.0 KiB
JavaScript
79 lines
3.0 KiB
JavaScript
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, 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
|
|
}, [params]);
|
|
const { colorMode } = useColorMode();
|
|
const params = useParams()
|
|
|
|
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 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>
|
|
</Box>
|
|
<RelatedTransactions />
|
|
</Box>
|
|
);
|
|
};
|
|
|
|
export default DidInfo;
|
|
|