54 lines
2.2 KiB
JavaScript
54 lines
2.2 KiB
JavaScript
import {
|
|
Box,
|
|
Container,
|
|
Divider,
|
|
Heading,
|
|
HStack,
|
|
Text,
|
|
useColorMode,
|
|
} from "@chakra-ui/react";
|
|
import React from "react";
|
|
import { MdContentCopy} from "react-icons/md";
|
|
import { Link } from "react-router-dom";
|
|
import RelatedTransactions from "../components/RelatedTransactions/RelatedTransactions";
|
|
import bannerImage from "../assets/images/bannerImg.png";
|
|
|
|
const DidInfo = () => {
|
|
const { colorMode } = useColorMode();
|
|
|
|
return (
|
|
<>
|
|
<Box backgroundImage={colorMode !== "light" ? `url(${bannerImage})` : "none"} backgroundSize="cover"
|
|
backgroundRepeat="no-repeat" pb={"8rem"}>
|
|
<Container maxW="6xl" pt={"8rem"}>
|
|
<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}>
|
|
<Text color={"#969696"} fontSize={"sm"}>DID</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>
|
|
</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 />
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default DidInfo;
|
|
|