rubix-explore/src/components/LatestTransactions/LatestTransactions.jsx

import { Box, Container, Grid, GridItem, HStack, Text, VStack, useColorMode, useToast } from "@chakra-ui/react";
import React, { useContext } from "react";
import { MdContentCopy, MdOutlineErrorOutline } from "react-icons/md";
import Pagination from "../Pagination";
import GlobalStateContext from "../../Contexts/GlobalStateContext";
import { Link, useNavigate } from "react-router-dom";
import ToastBox from "../ToastBox";



const LatestTransactions = () => {
  const toast = useToast()
  const navigate = useNavigate()

  const { colorMode} = useColorMode();
   const { transactions } = useContext(GlobalStateContext);
   
  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>
      <Container maxW="6xl">
        <Grid
          templateColumns="10% 90%"
          gap={0}
          bg={colorMode === "light" ? "#230A79" : "#232127"}
          // bg={"#232127"}
          roundedTop={'lg'}
        >
          <GridItem p={2}>
            <Text color={"#fff"}>Sr. no</Text>
          </GridItem>
          <GridItem p={2}>
            <Text color={"#fff"}>Transactions</Text>
          </GridItem>
        </Grid>
        <Box  roundedBottom={'lg'} overflow={'hidden'} boxShadow={"rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;"}>
          {transactions.map((transaction, index) => (
            <Grid
              bg={index % 2 === 0 ? (colorMode === "light" ? "#F2EFFF" : "#312F35") : (colorMode === "light" ? "#fff" : "#232127")}
              key={transaction.id}
              templateColumns="10% 90%"
              gap={0}
            >
              <GridItem p={4} color={colorMode === "light" ? "#000" : "#fff"}>{index + 1}.</GridItem>
              <GridItem p={4}>
                <Box>
                  <Text display={'flex'} fontSize={"sm"} mb={2} color={colorMode === "light" ? "#230A79" : "#B09AFF"}>
                    <Link to={`/transaction/${transaction?.description}`}> {transaction.description}</Link>
                    
                  <Text _hover={{bg:"gray.50"}} transition={'0.5s'}  rounded={'sm'} p={1} as={"span"} ml={1} cursor={"pointer"}>
                          <MdContentCopy onClick={() => copyToClipboard(transaction.description)}/>
                      </Text>
                  </Text>

                  <HStack fontSize={"sm"} gap={4} mb={2}>
                    <Text color={colorMode === "light" ? "#0F0F0F" : "#E8E8E8"}>Sender :</Text>
                    <HStack color={colorMode === "light" ? "#230A79" : "#B09AFF"} textDecoration={"underline"}>
                      <Text cursor={"pointer"} onClick={()=> navigate(`/did-info/${transaction.sender}`)}  >{transaction.sender}</Text>
                      <Text _hover={{bg:"gray.50"}} transition={'0.5s'}  rounded={'sm'} p={1} as={"span"} ml={1} cursor={"pointer"}>
                          <MdContentCopy onClick={() => copyToClipboard(transaction.sender)}/>
                      </Text>
                    </HStack>
                  </HStack>
                  <HStack cursor={'pointer'} fontSize={"sm"} gap={4} mb={3}>
                    <Text color={colorMode === "light" ? "#0F0F0F" : "#E8E8E8"}>Receiver :</Text>
                    <HStack  color={colorMode === "light" ? "#230A79" : "#B09AFF"} textDecoration={"underline"}>
                      <Text onClick={()=> navigate(`/did-info/${transaction.receiver}`)} >{transaction.receiver}</Text>
                      <Text _hover={{bg:"gray.50"}} transition={'0.5s'}  rounded={'sm'} p={1} as={"span"} ml={1} cursor={"pointer"}><MdContentCopy onClick={()=> copyToClipboard(transaction.receiver)} /></Text>
                    </HStack>
                  </HStack>
                  <HStack
                    display={"flex"}
                    justifyContent={"space-between"}
                    w={"80%"}
                    fontSize={"sm"}
                    mb={3}
                  >
                    <Box>
                      <Text mb={2}  color={colorMode === "light" ? "#7B7B7B" : "#E8E8E8"}>
                        Smart contract ID :
                      </Text>
                      <Text color={colorMode === "light" ? "#230A79" : "#B09AFF"}><Link to="/smart-contract">{transaction.contract}</Link></Text>
                    </Box>
                    <Box>
                      <Text mb={2} color={colorMode === "light" ? "#7B7B7B" : "#E8E8E8"}>
                        Date and Time Stamp :
                      </Text>
                      <Text color={colorMode === "light" ? "#230A79" : "#B09AFF"}>{transaction.date}</Text>
                    </Box>
                    <Box>
                      <Text mb={2} color={colorMode === "light" ? "#7B7B7B" : "#E8E8E8"}>
                        Amount:
                      </Text>
                      <Text color={colorMode === "light" ? "#230A79" : "#B09AFF"}>{transaction.amount}</Text>
                    </Box>
                  </HStack>
                  <HStack fontSize={"sm"} alignItems={"flex-start"} position={"relative"}>
                    <MdOutlineErrorOutline
                      fontSize={"18px"}
                      style={{ marginTop: "1px",position:"absolute",top:"2px",left:"-24px" }}
                      color="#7B7B7B"
                    />

                    <VStack>
                      <HStack w={'100%'} justifyContent={'flex-start'}>
                        <Text color={colorMode === "light" ? "#7B7B7B" : "#E8E8E8"}>Transaction type :</Text>
                        <Text color={colorMode === "light" ? "#230A79" : "#B09AFF"}>
                        <Text>{transaction.transactionType}</Text>
                        </Text>
                      </HStack>

                      <HStack>
                        <Text color={colorMode === "light" ? "#7B7B7B" : "#E8E8E8"}>Subnet ID/Main net :</Text>
                        <Text color={colorMode === "light" ? "#230A79" : "#B09AFF"}>
                         <Link to={`/subnet-id-overview/${transaction.subnetID}`} style={{fontWeight:"inherit"}}>{transaction.subnetID}</Link>
                        </Text>
                      </HStack>
                      
                    </VStack>
                  </HStack>
                </Box>
              </GridItem>
            </Grid>
          ))}
        </Box>
        <Pagination />
      </Container>
    </Box>
  );
};

export default LatestTransactions;