133 lines
6.8 KiB
JavaScript
133 lines
6.8 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 Transaction = () => {
|
|
const { colorMode } = useColorMode();
|
|
|
|
return (
|
|
<>
|
|
<Box backgroundImage={colorMode !== "light" ? `url(${bannerImage})` : "none"} backgroundSize="cover"
|
|
backgroundRepeat="no-repeat" pb={"5rem"}>
|
|
<Container maxW="6xl" pt={"8rem"}>
|
|
<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}>
|
|
<Text color={"#969696"} fontSize={"sm"}>Transaction ID</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 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"}
|
|
>
|
|
<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}>
|
|
<Text color={colorMode === "light" ? "#0F0F0F" : "#E8E8E8"}>
|
|
Block ID :
|
|
</Text>
|
|
<Text
|
|
display={"flex"}
|
|
alignItems={"center"}
|
|
color={colorMode === "light" ? "#230A79" : "#B09AFF"}
|
|
textDecoration={"underline"}
|
|
>
|
|
<Link style={{ fontWeight: "inherit" }}>
|
|
abc5def6ghi7jkl8mno9pqrs2tuv5wxyzabcdefghijklmnopqrs5674577tuvwxyz!"§ $%&
|
|
</Link>
|
|
<Text as={"span"} ml={5} cursor={"pointer"}>
|
|
<MdContentCopy onClick={() => copyToClipboard(transaction.receiver)}/>
|
|
</Text>
|
|
</Text>
|
|
</HStack>
|
|
</Box>
|
|
<Box 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>
|
|
<Text as={"span"} ml={5} cursor={"pointer"}>
|
|
<MdContentCopy onClick={() => copyToClipboard(transaction.sender)}/>
|
|
</Text>
|
|
</HStack>
|
|
<Text color={colorMode === "light" ? "#000" : "#fff"} fontSize={"sm"}>Sender</Text>
|
|
<HStack 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>
|
|
</HStack>
|
|
<Text color={colorMode === "light" ? "#000" : "#fff"} fontSize={"sm"}>Receiver</Text>
|
|
<HStack 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>
|
|
</HStack>
|
|
</Box>
|
|
<Box 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"}>
|
|
<Link style={{ fontWeight: "inherit" }}>bafybmibqle4w7k6acjbznk6ksapiyfwff6vwbwyaqx25wmzagt3awzbeky</Link>
|
|
<Text as={"span"} ml={5} cursor={"pointer"}>
|
|
<MdContentCopy onClick={() => copyToClipboard(transaction.sender)}/>
|
|
</Text>
|
|
</HStack>
|
|
</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"}>
|
|
<Link style={{ fontWeight: "inherit" }}>bafybmibqle4w7k6acjbznk6ksapiyfwff6vwbwyaqx25wmzagt3awzbeky</Link>
|
|
<Text as={"span"} ml={5} cursor={"pointer"}>
|
|
<MdContentCopy onClick={() => copyToClipboard(transaction.sender)}/>
|
|
</Text>
|
|
</HStack>
|
|
</Box>
|
|
</Container>
|
|
</Box>
|
|
<RelatedTransactions />
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default Transaction;
|