rubix-explore/src/pages/Transaction.jsx

import {
  Box,
  Container,
  Divider,
  Heading,
  HStack,
  Text,
  useColorMode,
  useToast,
} 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";
import ToastBox from "../components/ToastBox";

const Transaction = () => {
  const { colorMode } = useColorMode();

  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={"8rem"}>
            <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" ? "#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 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 Id/Subnet Id</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 boxShadow={colorMode === 'light'&&"md"}  bg={colorMode === "light" ? "#F3F3F3" : "#1D1D1D"} p={4} mb={5} rounded={6}>
                <HStack fontSize={"sm"} gap={{base:"3rem",md:"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 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>
                    <Text as={"span"} ml={5} cursor={"pointer"}>
                        <MdContentCopy onClick={() => copyToClipboard(transaction.sender)}/>
                    </Text>
                </HStack>
            </Box>
          </Container>
        </Box>
        <RelatedTransactions />
    </>
  );
};

export default Transaction;