rubix-explore/src/pages/MainNetIdOverview.jsx

import { Box, Container, Grid, GridItem, Heading, HStack, Icon, Link, Select, Text, useColorMode, useToast, VStack } from "@chakra-ui/react";
import React, { useContext, useEffect } from "react";
import GlobalStateContext from "../Contexts/GlobalStateContext";
import Pagination from "../components/Pagination";
import { MdContentCopy, MdOutlineErrorOutline } from "react-icons/md";
import ToastBox from "../components/ToastBox";
import bannerImage from "../assets/images/bannerImg.png";
import { useParams } from "react-router-dom";

const MainNetOveriew = () => {

  const { overview } = useContext(GlobalStateContext);
  const { colorMode} = useColorMode();
  const params = useParams()

  const toast = useToast()
  useEffect(() => {
    window.scrollTo({ top: 0, behavior: "smooth" }); // Scroll to top smoothly when params change
  }, []);
 
  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 minH={"100vh"} p={"6rem 0 4rem 0"} backgroundImage={colorMode !== "light" ? `url(${bannerImage})` : "none"} position={"relative"} backgroundSize="contain" backgroundRepeat="no-repeat">
      <Container
        maxW="6xl"
        color="white"
        display={{base :"block",md : "flex"}}
        justifyContent={"space-between"}
        mb={10}
      >
        <Heading fontSize={"md"} fontWeight={400} color={colorMode === "light" ? "#000" : "#fff"}  mb={{base :"10px" ,md : "0px"}}>
        Main net ID  - {params?.id}
        </Heading>
        {/* <Text to="" style={{ fontSize: "14px" }} color={colorMode === "light" ? "#000" : "#fff"} display={"flex"} gap={"3"}>
          View total number of records
          <Select width={"70px"} rounded="md" size="xs">
            <option value='option1'>10</option>
            <option value='option2'>20</option>
            <option value='option3'>30</option>
          </Select>
        </Text> */}
      </Container>
      <Box>
        <Container maxW="6xl">
          <Grid
            templateColumns={{ base: "100% 0%", md: "10% 90%" }}
            gap={0}
            bg={colorMode === "light" ? "#230A79" : "#232127"}
            // bg={"#232127"}
            borderTopRightRadius={4}
            borderTopLeftRadius={4}
          >
            <GridItem p={2} display={{ base: "none", md: "grid" }}>
              <Text color={"#fff"}>Sr. no</Text>
            </GridItem>
            <GridItem p={2} >
              <Text color={"#fff"}>Transactions</Text>
            </GridItem>
          </Grid>
          <Box boxShadow={"rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;"}>
            {overview.map((transaction, index) => (
                <Grid
                bg={
                  index % 2 === 0
                    ? colorMode === "light"
                      ? "#F2EFFF"
                      : "#312F35"
                    : colorMode === "light"
                    ? "#fff"
                    : "#232127"
                }
                key={transaction.id}
                templateColumns={{ base: "100% 0%", md: "10% 90%" }}
                gap={0}
              >
                <GridItem
                  display={{ base: "none", md: "grid" }}
                  p={4}
                  color={colorMode === "light" ? "#000" : "#fff"}
                >
                  {index + 1}.
                </GridItem>
                <GridItem  p={4}>
                  {/* <Box> */}
                  <Text // This ensures the text is truncated with ellipsis when it overflows ss__298
                    display={"flex"}
                    fontSize={{base:"xs", md:"sm" }}
                    mb={2}
                    color={colorMode === "light" ? "#230A79" : "#B09AFF"}
                  >
                    <Text
                      maxW={{base:"100%",md:"100%"}} // Set a max-width to control when the truncation happens
                      // overflow={'hidden'} // Ensure overflow is hidden
                      whiteSpace={"nowrap"} // Prevent the text from wrapping
                      textOverflow={"ellipsis"}
                      isTruncated 
                      cursor={"pointer"}
                      onClick={() =>
                        navigate(`/transaction/${transaction?.description}`)
                      }
                    >
                      {transaction.description}
                    </Text>
  
                    <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={{base:"xs", md:"sm" }} gap={{base:2,md:4}} mb={2}>
                    <Text  color={colorMode === "light" ? "#0F0F0F" : "#E8E8E8"}>
                      Sender:
                    </Text>
  
  
                    <HStack
                      color={colorMode === "light" ? "#230A79" : "#B09AFF"}
                      textDecoration={"underline"}
                      w={'84%'}
                      justifyContent={'space-between'}
                      fontSize={{base:"xs", md:"sm" }}
                    >
                      <Text
                        cursor={"pointer"} 
                        maxW={{base:"90%",md:"100%"}} // Set a max-width to control when the truncation happens
                        // overflow={'hidden'} // Ensure overflow is hidden
                        whiteSpace={"nowrap"} // Prevent the text from wrapping
                        textOverflow={"ellipsis"}
                        isTruncated
                        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 fontSize={{base:"xs", md:"sm" }} cursor={"pointer"}  gap={{base:2,md:4}} mb={3}>
                    <Text  color={colorMode === "light" ? "#0F0F0F" : "#E8E8E8"}>
                      Receiver:
                    </Text>
                    <HStack
                      color={colorMode === "light" ? "#230A79" : "#B09AFF"}
                      textDecoration={"underline"}
                      fontSize={{base:"xs", md:"sm" }}
                      isTruncated
                    >
                      <Text
                        cursor={"pointer"} 
                        maxW={{base:"55%",md:"100%"}}
                        whiteSpace={"nowrap"} // Prevent the text from wrapping
                        textOverflow={"ellipsis"}
                        isTruncated
                        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
                    flexDirection={{ base: "column", md: "row" }}
                    justifyContent={{ base: "", md: "space-between" }}
                    alignItems={{ base: "flex-start", md: "" }}
                    // flexWrap={'wrap'}
  
                    // w={"80%"}
                    w={{ base: "100%", md: "80%" }}
                    fontSize={{ base: "xs", md: "sm" }}
                    mb={3}
                  >
                    <Box>
                      <Text
                        mb={2}
                        // fontSize={{base:"xs", md:"sm" }}
                        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"}
                  >
                    <Icon
                      as={MdOutlineErrorOutline}
                      fontSize={"18px"}
                      display={{ base: "none", md: "block" }}
                      style={{
                        marginTop: "1px",
                        position: "absolute",
                        top: "2px",
                        left: "-24px",
                      }}
                      color="#7B7B7B"
                    />
  
                    <VStack fontSize={{base:"xs", md:"sm" }}>
                      <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>
                      
                    </VStack>
                  </HStack>
                  {/* </Box> */}
                </GridItem>
              </Grid>
            ))}
          </Box>
          <Pagination />
        </Container>
      </Box>
    </Box>
  );
};

export default MainNetOveriew;