rubix-explore/src/pages/SubnetIdOverview.jsx

import { Box, Container, Grid, Image,GridItem, Heading, HStack, Icon, Link, Select, Text, useColorMode, useToast, VStack, Button, Tooltip } from "@chakra-ui/react";
import React, { useContext, useEffect, useState } 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 { useNavigate, useParams } from "react-router-dom";
import { useGetSubnetByIdQuery } from "../Services/api.service";
import rbtLogoOutline from "../assets/images/rubix-filled.svg";
import { HiOutlineRefresh } from "react-icons/hi";
import { rotate } from "../components/LatestTransactions/LatestTransactions";
import Search from '../assets/images/search.png'
import { formatUTCToDDMMYYHHMMSS } from "../Constants/Constants";
import FullScreenLoaader from "../components/FullScreenLoaader/FullScreenLoaader";

const SubnetInner = () => {

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

  const [isRotating, setIsRotating] = useState(false);
  const [currentPage, setCurrentPage] = useState(1); // Tracks the current page
  const [pageSize, setPageSize] = useState(10); // Number of items per page
  const [totalItems, setTotalItems] = useState(null); // Total items in the dataset
  const [lastRefreshedTime, setLastRefreshedTime] = useState(new Date()); // Store the last refresh time
  const [relativeRefreshTime, setRelativeRefreshTime] = useState("Just now");
  const [ isLoadingURL, setIsLoading ] = useState(false)

  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"} />
          ),
        });
        setIsLoading(false)
      })
      .catch((err) => {
        console.error("Failed to copy text: ", err); 
      });
  }

  const {
    data,
    isLoading,
    refetch
  } = useGetSubnetByIdQuery({
    id:params?.id,
    pageNumber: currentPage,
    pageSize: pageSize,
  })

  useEffect(() => {
    setTotalItems(data?.data?.totalCount);
  }, [data]);

  const handleRefreshClick = () => {
    setIsRotating(true); // Start rotation
    refetch();
    setTimeout(() => {
      setIsRotating(false); // Stop rotation after 500ms
    }, 500);
    setLastRefreshedTime(new Date()); // Set the new refresh time
    setRelativeRefreshTime("Just now"); // Reset relative time to "Just now"
  };

  useEffect(() => {
    // Update relative time every minute
    const intervalId = setInterval(() => {
      updateRelativeTime();
    }, 60000); // 60 seconds = 60000ms

    return () => clearInterval(intervalId); // Cleanup the interval on unmount
  }, [lastRefreshedTime]);


  const updateRelativeTime = () => {
    const now = new Date();
    const timeDiff = Math.floor((now - lastRefreshedTime) / 60000); // Difference in minutes

    if (timeDiff < 1) {
      setRelativeRefreshTime("Just now");
    } else if (timeDiff === 1) {
      setRelativeRefreshTime("1 minute ago");
    } else {
      setRelativeRefreshTime(`${timeDiff} minutes ago`);
    }
  };

  const handleGenrateShortURL = async () => {

    setIsLoading(true)
    const fullUrl = window.location.href;
    try {
      const response = await fetch(`${import.meta.env.VITE_BASE_URL}ShortUrl/create`, {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify(fullUrl), // Sending searchTerm as a JSON string
      });
  
      if (!response.ok) {
        throw new Error('Failed to generate short URL');
      }
  
      const result = await response.json();
      copyToClipboard(result?.shortUrl)
      // You can handle the result here, e.g., by updating a state with the short URL
    } catch (error) {
      console.error("Error generating short URL:", error);
    }
  };


  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={5}
      >
        <Heading fontSize={"md"} fontWeight={400} color={colorMode === "light" ? "#000" : "#fff"} mb={{base :"10px" ,md : "0px"}}>
        Subnet ID  - {params?.id}
        </Heading>
        <HStack to="" style={{ fontSize: "14px" }} color={colorMode === "light" ? "#000" : "#fff"} display={"flex"} gap={"3"}>
          <Text as={"span"}>Total Value Locked (TVL)</Text> <Text as={"span"}>{Number(data?.data?.tvl).toFixed(3)} RBT</Text>
        </HStack>
        {/* <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>
      <Container maxW="6xl" display={"flex"} justifyContent={"end"} mb={6}>
        <Button fontWeight={400} color={"#fff"} border={"none"} bg={colorMode === "light" ? "#230A79" : "#312F35"} _hover={{bg: colorMode === "light" ? "#4023A6" : "#312F35"}} _focus={{outline:"none"}}
          display={'flex'} gap={2} alignItems={'center'} rounded={'sm'} size={"sm"} isLoading={isLoadingURL} onClick={handleGenrateShortURL}>
          <MdContentCopy/> Copy short url
        </Button>
      </Container>
      {isLoading ? <FullScreenLoaader half={true}/>:<Box>
        {data?.data?.items?.length===0 || isLoading?<HStack h={'35vh'} justifyContent={"center"} mt={10}>
            <Image w={"40px"} src={Search}/>
            <Text as={"span"} color={"#787878"}>{"No records found"}</Text>
          </HStack>:<Container maxW="6xl">
          <Grid position={'relative'}
            templateColumns={{ base: "100% 0%", md: "10% 90%" }}
            gap={0}
            bg={colorMode === "light" ? "#230A79" : "#232127"}
            // bg={"#232127"}
            borderTopRightRadius={4}
            borderTopLeftRadius={4}
          >
            <GridItem  display={{ base: "none", md: "grid" }} p={2}>
              <Text color={"#fff"}>Sr. no</Text>
            </GridItem>
            <GridItem p={2}>
              <Text color={"#fff"}>Transactions</Text>
            </GridItem>

        <Box
          as="span"
          cursor={"pointer"}
          position={"absolute"}
          right={0}
          m={1.5}
          display={"flex"}
          alignItems={"center"}
          gap={2}
          onClick={handleRefreshClick} // Trigger the rotation when clicked
        >
          <Text
            as={"span"}
            fontSize={"xs"}
            color={colorMode === "light" ? "#fff" : "#ccc"}
          >
            Last refresh {relativeRefreshTime}{" "}
          </Text>
          <Icon
            bg={colorMode === "light" ? "#fff" : "#434147"}
            p={1.5}
            boxSize={7}
            rounded={"full"}
            as={HiOutlineRefresh}
            animation={
              isRotating || isLoading
                ? `${rotate} 1s linear infinite`
                : "none"
            }
          />
        </Box>
          </Grid>
          <Box boxShadow={"rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;"}>
          {data?.data?.items?.map(
          (
            {
              transactionId,
              smartContract,
              sender,
              receiver,
              contract,
              timestamp,
              amount,
              transactionType,
              subNetworkId,



              executor,
              deployer,
              creator,
              pledgeAmount,
              scTokenHash
            },
            index
          ) => (
            <Grid
              bg={
                index % 2 === 0
                  ? colorMode === "light"
                    ? "#F2EFFF"
                    : "#312F35"
                  : colorMode === "light"
                  ? "#fff"
                  : "#232127"
              }
              key={transactionId}
              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/${transactionId}`)}
                  >
                    {transactionId}
                  </Text>

                  <Text
                    _hover={{ bg: "gray.50" }}
                    transition={"0.5s"}
                    rounded={"sm"}
                    p={1}
                    as={"span"}
                    ml={1}
                    cursor={"pointer"}
                  >
                    <MdContentCopy
                      onClick={() => copyToClipboard(transactionId)}
                    />
                  </Text>
                </Text>

                {sender&&<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/${sender}`)}
                    >
                      {sender}
                    </Text>
                    <Text
                      _hover={{ bg: "gray.50" }}
                      transition={"0.5s"}
                      rounded={"sm"}
                      p={1}
                      as={"span"}
                      ml={1}
                      cursor={"pointer"}
                    >
                      <MdContentCopy onClick={() => copyToClipboard(sender)} />
                    </Text>
                  </HStack>
                </HStack>}
                {receiver&&<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" }}
                  >
                    <Text
                      cursor={"pointer"}
                      maxW={{ base: "55%", md: "100%" }}
                      whiteSpace={"nowrap"} // Prevent the text from wrapping
                      textOverflow={"ellipsis"}
                      isTruncated
                      onClick={() => navigate(`/did-info/${receiver}`)}
                    >
                      {receiver}
                    </Text>
                    <Text
                      _hover={{ bg: "gray.50" }}
                      transition={"0.5s"}
                      rounded={"sm"}
                      p={1}
                      as={"span"}
                      ml={1}
                      cursor={"pointer"}
                    >
                      <MdContentCopy
                        onClick={() => copyToClipboard(receiver)}
                      />
                    </Text>
                  </HStack>
                </HStack>}



                {creator&&<HStack
                  fontSize={{ base: "xs", md: "sm" }}
                  cursor={"pointer"}
                  gap={{ base: 2, md: 4 }}
                  mb={3}
                >
                  <Text color={colorMode === "light" ? "#0F0F0F" : "#E8E8E8"}>
                    Creator:
                  </Text>
                  <HStack
                    color={colorMode === "light" ? "#230A79" : "#B09AFF"}
                    textDecoration={"underline"}
                    fontSize={{ base: "xs", md: "sm" }}
                  >
                    <Text
                      cursor={"pointer"}
                      maxW={{ base: "55%", md: "100%" }}
                      whiteSpace={"nowrap"} // Prevent the text from wrapping
                      textOverflow={"ellipsis"}
                      isTruncated
                      onClick={() => navigate(`/did-info/${creator}`)}
                    >
                      {creator}
                    </Text>
                    <Text
                      _hover={{ bg: "gray.50" }}
                      transition={"0.5s"}
                      rounded={"sm"}
                      p={1}
                      as={"span"}
                      ml={1}
                      cursor={"pointer"}
                    >
                      <MdContentCopy
                        onClick={() => copyToClipboard(creator)}
                      />
                    </Text>
                  </HStack>
                </HStack>}

                {executor&&<HStack
                  fontSize={{ base: "xs", md: "sm" }}
                  cursor={"pointer"}
                  gap={{ base: 2, md: 4 }}
                  mb={3}
                >
                  <Text color={colorMode === "light" ? "#0F0F0F" : "#E8E8E8"}>
                    Executor:
                  </Text>
                  <HStack
                    color={colorMode === "light" ? "#230A79" : "#B09AFF"}
                    textDecoration={"underline"}
                    fontSize={{ base: "xs", md: "sm" }}
                  >
                    <Text
                      cursor={"pointer"}
                      maxW={{ base: "55%", md: "100%" }}
                      whiteSpace={"nowrap"} // Prevent the text from wrapping
                      textOverflow={"ellipsis"}
                      isTruncated
                      onClick={() => navigate(`/did-info/${executor}`)}
                    >
                      {executor}
                    </Text>
                    <Text
                      _hover={{ bg: "gray.50" }}
                      transition={"0.5s"}
                      rounded={"sm"}
                      p={1}
                      as={"span"}
                      ml={1}
                      cursor={"pointer"}
                    >
                      <MdContentCopy
                        onClick={() => copyToClipboard(executor)}
                      />
                    </Text>
                  </HStack>
                </HStack>}


                {deployer&&<HStack
                  fontSize={{ base: "xs", md: "sm" }}
                  cursor={"pointer"}
                  gap={{ base: 2, md: 4 }}
                  mb={3}
                >
                  <Text color={colorMode === "light" ? "#0F0F0F" : "#E8E8E8"}>
                    Deployer:
                  </Text>
                  <HStack
                    color={colorMode === "light" ? "#230A79" : "#B09AFF"}
                    textDecoration={"underline"}
                    fontSize={{ base: "xs", md: "sm" }}
                  >
                    <Text
                      cursor={"pointer"}
                      maxW={{ base: "55%", md: "100%" }}
                      whiteSpace={"nowrap"} // Prevent the text from wrapping
                      textOverflow={"ellipsis"}
                      isTruncated
                      onClick={() => navigate(`/did-info/${deployer}`)}
                    >
                      {deployer}
                    </Text>
                    <Text
                      _hover={{ bg: "gray.50" }}
                      transition={"0.5s"}
                      rounded={"sm"}
                      p={1}
                      as={"span"}
                      ml={1}
                      cursor={"pointer"}
                    >
                      <MdContentCopy
                        onClick={() => copyToClipboard(deployer)}
                      />
                    </Text>
                  </HStack>
                </HStack>}




                <HStack
                  flexDirection={{ base: "column", md: "row" }}
                  justifyContent={{ base: "", md: scTokenHash?"space-between" :"flex-start" }}
                  gap={{base:4,md:scTokenHash ? 4:44}}
                  alignItems={{ base: "flex-start", md: "" }}
                  // flexWrap={'wrap'}

                  // w={"80%"}
                  w={{ base: "100%", md:scTokenHash?"90%": "80%" }}
                  fontSize={{ base: "xs", md: "sm" }}
                  mb={3}
                >
                  {scTokenHash && (
                    <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">{scTokenHash}</Link>
                      </Text>
                    </Box>
                  )}

                  <Box>
                    <Text
                      mb={2}
                      color={colorMode === "light" ? "#7B7B7B" : "#E8E8E8"}
                    >
                      Date and Time Stamp :
                    </Text>
                    <Text color={colorMode === "light" ? "#230A79" : "#B09AFF"}>
                      {formatUTCToDDMMYYHHMMSS(timestamp)}
                    </Text>
                  </Box>



                  {amount&&<Box>
                    <Text
                      mb={2}
                      color={colorMode === "light" ? "#7B7B7B" : "#E8E8E8"}
                    >
                      Amount:
                    </Text>
                    <Text
                      display={"flex"}
                      gap={2}
                      alignItems={"center"}
                      color={colorMode === "light" ? "#230A79" : "#B09AFF"}
                    >
                      <Image w={4} src={rbtLogoOutline} />
                      {amount}
                    </Text>
                  </Box>}

                  
                  {pledgeAmount&&<Box>
                    <Text
                      mb={2}
                      color={colorMode === "light" ? "#7B7B7B" : "#E8E8E8"}
                    >
                      Pledge Amount:
                    </Text>
                    <Text
                      display={"flex"}
                      gap={2}
                      alignItems={"center"}
                      color={colorMode === "light" ? "#230A79" : "#B09AFF"}
                    >
                      <Image w={4} src={rbtLogoOutline} />
                      {pledgeAmount}
                    </Text>
                  </Box>}


                </HStack>

                <HStack
                  fontSize={"sm"}
                  alignItems={"flex-start"}
                  position={"relative"}
                >
                  <Tooltip 
                  p={2}
                   fontWeight={400}
                   lineHeight={"18px"}
                   boxShadow={"rgba(99, 99, 99, 0.2) 0px 2px 8px 0px"}
                  color={colorMode === "light" ? "#230A79" : "#230A79"}
                    fontStyle={"xs"}
                    rounded={"5px"}
                    bg={colorMode === "light" ? "#fff" : "#fff"}
                    label={transactionType === "RBT" ? "Native RBT transactions which is peer-to-peer." : "SC or Smart Contract are codes that executes the actions multiple parties or entities agree to."}
                    placement='top-start'>
                    <Text p={0} display={{ base: "none", md: "block" }} position={"absolute"} top={"2px"} left={"-24px"}>
                      <Icon
                        cursor={"pointer"}
                        as={MdOutlineErrorOutline}
                        fontSize={"18px"}
                        color="#7B7B7B"
                      />
                    </Text>
                  </Tooltip>
                  {/* <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>{transactionType}</Text>
                      </Text>
                    </HStack>

                    <HStack w={"100%"} justifyContent={"flex-start"}>
                      <Text
                        color={colorMode === "light" ? "#7B7B7B" : "#E8E8E8"}
                      >
                        {subNetworkId === "MainNet" ? "Main net" : "Subnet ID"}:
                      </Text>
                      <Text
                        color={colorMode === "light" ? "#230A79" : "#B09AFF"}
                      >
                        {subNetworkId === "MainNet" ?<Text>{subNetworkId}</Text>:<Link
                          to={`/subnet-id-overview/${subNetworkId}`}
                          style={{ fontWeight: "inherit" }}
                        >
                          {subNetworkId}
                        </Link>}
                      </Text>
                    </HStack>
                  </VStack>
                </HStack>
                {/* </Box> */}
              </GridItem>
            </Grid>
          )
        )}
          </Box>
      <Pagination
        pageSize={pageSize}
        setPageSize={setPageSize}
        totalItems={totalItems}
        isLoading={isLoading}
        setCurrentPage={setCurrentPage}
        currentPage={currentPage}
      />
        </Container>}
      </Box>}
    </Box>
  );
};

export default SubnetInner;