update

2024-10-21 16:29:15 +05:30
parent 104076f589
commit 39b4865e47
6 changed files with 215 additions and 91 deletions
--- a/src/Services/api.service.js
+++ b/src/Services/api.service.js
@@ -10,15 +10,31 @@ export const rubix = createApi({
  }),
  tagTypes: [
    "getTransCount",
+    "getTransAll"
  ],
  endpoints: (builder) => ({
+
+
    getTransCount: builder.query({
      query: () => `api/Analytics/Transactions/GetCount`,
      providesTags: ["getTransCount"],
    }),

+
+
+    getTransAll: builder.query({
+      query: ({ pageNumber = 1, pageSize = 10 }) => 
+        `api/Analytics/Transactions/GetAll?pageNumber=${pageNumber}&pageSize=${pageSize}`,
+      providesTags: ["getTransAll"],
+    }),
+    
+
+
+
+
  }),
 });
 export const {
-  useGetTransCountQuery
+  useGetTransCountQuery,
+  useGetTransAllQuery
 } = rubix;
--- a/src/assets/images/rubix-filled.svg
+++ b/src/assets/images/rubix-filled.svg
@@ -0,0 +1,3 @@
+<svg width="20" height="10" viewBox="0 0 20 10" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M15.3512 1.48007C13.5269 3.06437 11.747 4.27344 10.8793 4.4819C10.3676 4.60698 10.3454 4.56528 10.4121 3.79398C10.4566 3.27283 10.3454 2.66829 10.1007 2.18883C8.89926 -0.20846 5.58428 0.250153 2.42505 3.23114C0.800933 4.77374 0 6.12874 0 7.3795C0 8.27588 0.0889926 8.48434 0.867678 9.19311C1.89109 10.152 2.71427 10.2563 3.58195 9.5058C6.38522 7.06681 8.72127 5.41997 9.41096 5.41997C9.49996 5.41997 9.5667 5.83689 9.5667 6.35804C9.5667 7.98403 10.5901 9.2348 12.1697 9.5058C13.2599 9.69341 15.8852 8.44265 17.4648 6.96258C19.8231 4.77374 20.5573 2.79337 19.5784 1.3133C19.1334 0.604535 18.11 8.46424e-08 17.4203 8.46424e-08C17.1978 0.0208461 16.2634 0.68792 15.3512 1.48007Z" fill="#B09AFF"/>
+</svg>
--- a/src/assets/images/rubix-outline.svg
+++ b/src/assets/images/rubix-outline.svg
@@ -0,0 +1,3 @@
+<svg width="22" height="12" viewBox="0 0 22 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M11.9004 4.95502C11.9033 4.91893 11.9066 4.87973 11.9103 4.83709L11.9103 4.83652C11.9625 4.22588 11.8348 3.52826 11.5468 2.96317C11.1999 2.27167 10.6885 1.76669 10.0507 1.46825C9.41704 1.1718 8.69064 1.09377 7.92939 1.19773C6.41684 1.40429 4.70641 2.33462 3.0819 3.86747L3.08071 3.8686C1.4321 5.43447 0.5 6.91458 0.5 8.3795C0.5 8.82717 0.517518 9.20621 0.689864 9.57049C0.856696 9.92312 1.14552 10.2118 1.52848 10.5605C2.07126 11.0685 2.62836 11.4167 3.22469 11.487C3.84753 11.5604 4.40505 11.3199 4.90904 10.884L4.91015 10.883L4.91014 10.883C6.30357 9.67066 7.57433 8.66099 8.57635 7.95748C9.07827 7.60509 9.50426 7.33552 9.8393 7.15626C9.91897 7.11364 9.99164 7.07713 10.0574 7.04634C10.0633 7.13988 10.0667 7.24492 10.0667 7.35804C10.0667 9.21785 11.2561 10.6847 13.0849 10.9986L11.9004 4.95502ZM11.9004 4.95502C12.2518 4.83484 12.7943 4.54223 13.4772 4.08222C14.2384 3.56954 15.1232 2.88431 16.0234 2.10255C16.4895 1.69773 16.9636 1.32289 17.3536 1.04404C17.5479 0.905136 17.7277 0.785499 17.879 0.697025C17.9543 0.653008 18.0296 0.612567 18.1005 0.580786C18.1597 0.554281 18.2606 0.512776 18.3736 0.50218L18.3969 0.5H18.4203C18.8907 0.5 19.4098 0.697768 19.8492 0.962649C20.2931 1.2302 20.7238 1.6071 20.9986 2.04228C21.5887 2.93796 21.6421 3.97376 21.2415 5.047C20.8475 6.10254 20.0134 7.20732 18.8057 8.32833C17.9724 9.10885 16.877 9.8184 15.8497 10.3105C15.3346 10.5572 14.8256 10.7547 14.3647 10.8786C13.9159 10.9992 13.4641 11.0637 13.0852 10.9986L11.9004 4.95502Z" stroke="#B09AFF"/>
+</svg>
--- a/src/components/LatestTransactions/LatestTransactions.jsx
+++ b/src/components/LatestTransactions/LatestTransactions.jsx
@@ -5,35 +5,80 @@ import {
  GridItem,
  HStack,
  Icon,
+  Image,
  Text,
  VStack,
+  keyframes,
  useColorMode,
  useToast,
 } from "@chakra-ui/react";
-import React, { useContext, useState } from "react";
+import React, { useContext, useEffect, useState } 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 { Link, useLocation, useNavigate } from "react-router-dom";
 import ToastBox from "../ToastBox";
 import { formatRelativeDate } from "../../Constants/Constants";
+import {
+  useGetTransAllQuery,
+  useGetTransCountQuery,
+} from "../../Services/api.service";
+import rbtLogoOutline from "../../assets/images/rubix-filled.svg";
+import { HiOutlineRefresh } from "react-icons/hi";
+
+export const rotate = keyframes`
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+`;

 const LatestTransactions = () => {
  const toast = useToast();
  const navigate = useNavigate();
+  const location = useLocation();
+  useEffect(() => {
+    window.scrollTo({ top: 0, behavior: "smooth" }); // Scroll to top smoothly when params change
+  }, [location]);

  const { colorMode } = useColorMode();
-  const { transactions, transactionsApi } = useContext(GlobalStateContext);
+  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 [currentPage, setCurrentPage] = useState(1);  // Tracks the current page
-  const [pageSize, setPageSize] = useState(10);  // Number of items per page
-  const [totalItems, setTotalItems] = useState(25998);  // Total items in the dataset
-  const [isLoading, setIsLoading] = useState(true);  // Loading state
-  
+  const {
+    data: transCount,
+    isLoading: isTransCountLoading,
+    refetch: transCountRefetch,
+    errors: transCountErrors,
+  } = useGetTransCountQuery();

+  // Fetch transactions based on the current page and page size
+  const {
+    data: transAll,
+    isLoading: isTransAllLoading,
+    refetch: transAllRefetch,
+  } = useGetTransAllQuery({
+    pageNumber: currentPage,
+    pageSize: pageSize,
+  });

+  // Set interval to refetch data every 30 seconds
+  // useEffect(() => {
+  //   const intervalId = setInterval(() => {
+  //     transCountRefetch();  // Refetch transaction count
+  //     transAllRefetch();    // Refetch transactions
+  //   }, 30000);  // 30000 ms = 30 seconds

-  console.log(transactionsApi?.data?.items);
+  //   return () => clearInterval(intervalId);  // Clear interval on component unmount
+  // }, [transCountRefetch, transAllRefetch]);
+
+  useEffect(() => {
+    setTotalItems(transCount?.data?.transactionCount);
+  }, [transCount]);

  function copyToClipboard(text) {
    navigator.clipboard
@@ -49,29 +94,77 @@ const LatestTransactions = () => {
        console.error("Failed to copy text: ", err);
      });
  }
+
+
+  const handleRefreshClick = () => {
+    setIsRotating(true); // Start rotation
+    // Simulate any refresh logic here
+    setTimeout(() => {
+      setIsRotating(false); // Stop rotation after 3 seconds
+    }, 3000); // 3 seconds = 3000ms
+  };
  return (
-    <Box>
-      <Container maxW="6xl">
-        <Grid
-          templateColumns={{ base: "100% 0%", md: "10% 90%" }}
-          gap={0}
-          bg={colorMode === "light" ? "#230A79" : "#232127"}
-          // bg={"#232127"}
-          roundedTop={"lg"}
-        >
-          <GridItem display={{ base: "none", md: "grid" }} p={2}>
-            <Text color={"#fff"}>Sr. no</Text>
-          </GridItem>
-          <GridItem p={2}>
-            <Text color={"#fff"}>Transactions</Text>
-          </GridItem>
-        </Grid>
+    <Container
+      mt={location?.pathname === "/view-all-transaction" ? 24 : 0}
+      mb={location?.pathname === "/view-all-transaction" ? 15 : 0}
+      maxW="6xl"
+    >
+      <Grid
+        position={"relative"}
+        templateColumns={{ base: "100% 0%", md: "10% 90%" }}
+        gap={0}
+        bg={colorMode === "light" ? "#230A79" : "#232127"}
+        // bg={"#232127"}
+        roundedTop={"lg"}
+      >
+        <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
-          roundedBottom={"lg"}
-          overflow={"hidden"}
-          boxShadow={"rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;"}
+          as="span"
+          cursor={"pointer"}
+          bg={"#434147"}
+          position={"absolute"}
+          right={0}
+          rounded={"md"}
+          m={1.5}
+          p={1.5}
+
+        onClick={handleRefreshClick} // Trigger the rotation when clicked
        >
-          {transactionsApi?.data?.items?.map(({transactionId, smartContract, sender, receiver, contract, timestamp, amount, transactionType, subNetworkId,   }, index) => (
+          <HiOutlineRefresh
+          style={{
+            animation: true
+              ? `${rotate} 1s linear infinite` // Apply the rotation animation
+              : "none",
+          }}
+          />
+        </Box>
+      </Grid>
+      <Box
+        roundedBottom={"lg"}
+        overflow={"hidden"}
+        boxShadow={"rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;"}
+      >
+        {transAll?.data?.items?.map(
+          (
+            {
+              transactionId,
+              smartContract,
+              sender,
+              receiver,
+              contract,
+              timestamp,
+              amount,
+              transactionType,
+              subNetworkId,
+            },
+            index
+          ) => (
            <Grid
              bg={
                index % 2 === 0
@@ -93,24 +186,22 @@ const LatestTransactions = () => {
              >
                {index + 1}.
              </GridItem>
-              <GridItem  p={4}>
+              <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" }}
+                  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
+                    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 
+                    isTruncated
                    cursor={"pointer"}
-                    onClick={() =>
-                      navigate(`/transaction/${transactionId}`)
-                    }
+                    onClick={() => navigate(`/transaction/${transactionId}`)}
                  >
                    {transactionId}
                  </Text>
@@ -130,29 +221,30 @@ const LatestTransactions = () => {
                  </Text>
                </Text>

-                <HStack fontSize={{base:"xs", md:"sm" }} gap={{base:2,md:4}} mb={2}>
-                  <Text  color={colorMode === "light" ? "#0F0F0F" : "#E8E8E8"}>
+                <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%'}
+                    w={"84%"}
                    // justifyContent={'space-between'}
-                    fontSize={{base:"xs", md:"sm" }}
+                    fontSize={{ base: "xs", md: "sm" }}
                  >
                    <Text
-                      cursor={"pointer"} 
-                      maxW={{base:"90%",md:"100%"}} // Set a max-width to control when the truncation happens
+                      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}`)
-                      }
+                      onClick={() => navigate(`/did-info/${sender}`)}
                    >
                      {sender}
                    </Text>
@@ -165,30 +257,31 @@ const LatestTransactions = () => {
                      ml={1}
                      cursor={"pointer"}
                    >
-                      <MdContentCopy
-                        onClick={() => copyToClipboard(sender)}
-                      />
+                      <MdContentCopy onClick={() => copyToClipboard(sender)} />
                    </Text>
-                  </HStack> 
+                  </HStack>
                </HStack>
-                <HStack fontSize={{base:"xs", md:"sm" }} cursor={"pointer"}  gap={{base:2,md:4}} mb={3}>
-                  <Text  color={colorMode === "light" ? "#0F0F0F" : "#E8E8E8"}>
+                <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" }}
+                    fontSize={{ base: "xs", md: "sm" }}
                  >
                    <Text
-                      cursor={"pointer"} 
-                      maxW={{base:"55%",md:"100%"}}
+                      cursor={"pointer"}
+                      maxW={{ base: "55%", md: "100%" }}
                      whiteSpace={"nowrap"} // Prevent the text from wrapping
                      textOverflow={"ellipsis"}
                      isTruncated
-                      onClick={() =>
-                        navigate(`/did-info/${receiver}`)
-                      }
+                      onClick={() => navigate(`/did-info/${receiver}`)}
                    >
                      {receiver}
                    </Text>
@@ -219,18 +312,22 @@ const LatestTransactions = () => {
                  fontSize={{ base: "xs", md: "sm" }}
                  mb={3}
                >
-                  {smartContract&&<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">{smartContract}</Link>
-                    </Text>
-                  </Box>}
+                  {smartContract && (
+                    <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">{smartContract}</Link>
+                      </Text>
+                    </Box>
+                  )}
                  <Box>
                    <Text
                      mb={2}
@@ -249,7 +346,13 @@ const LatestTransactions = () => {
                    >
                      Amount:
                    </Text>
-                    <Text color={colorMode === "light" ? "#230A79" : "#B09AFF"}>
+                    <Text
+                      display={"flex"}
+                      gap={2}
+                      alignItems={"center"}
+                      color={colorMode === "light" ? "#230A79" : "#B09AFF"}
+                    >
+                      <Image src={rbtLogoOutline} />
                      {amount}
                    </Text>
                  </Box>
@@ -273,8 +376,8 @@ const LatestTransactions = () => {
                    color="#7B7B7B"
                  />

-                  <VStack fontSize={{base:"xs", md:"sm" }}>
-                    <HStack  w={"100%"} justifyContent={"flex-start"}>
+                  <VStack fontSize={{ base: "xs", md: "sm" }}>
+                    <HStack w={"100%"} justifyContent={"flex-start"}>
                      <Text
                        color={colorMode === "light" ? "#7B7B7B" : "#E8E8E8"}
                      >
@@ -291,7 +394,8 @@ const LatestTransactions = () => {
                      <Text
                        color={colorMode === "light" ? "#7B7B7B" : "#E8E8E8"}
                      >
-                        Subnet ID/Main net :
+                        {subNetworkId === "MainNet" ? "Main net" : "Subnet ID"}{" "}
+                        :
                      </Text>
                      <Text
                        color={colorMode === "light" ? "#230A79" : "#B09AFF"}
@@ -309,17 +413,18 @@ const LatestTransactions = () => {
                {/* </Box> */}
              </GridItem>
            </Grid>
-          ))}
-        </Box>
-        <Pagination 
+          )
+        )}
+      </Box>
+      <Pagination
        pageSize={pageSize}
        setPageSize={setPageSize}
        totalItems={totalItems}
-        isLoading={isLoading}
+        isLoading={isTransCountLoading}
        setCurrentPage={setCurrentPage}
-        currentPage={currentPage} />
-      </Container>
-    </Box>
+        currentPage={currentPage}
+      />
+    </Container>
  );
 };

--- a/src/pages/Home.jsx
+++ b/src/pages/Home.jsx
@@ -22,7 +22,6 @@ import Pagination from "../components/Pagination";
 import bannerImage from "../assets/images/bannerImg.png";
 import bannerImageMobile from "../assets/images/bannerImgmobile.png";
 import { BiSearchAlt } from "react-icons/bi";
-import { useGetTransCountQuery } from "../Services/api.service";

 const Home = () => {
  const [isSwitchOn, setIsSwitchOn] = useState(true);
@@ -30,13 +29,6 @@ const Home = () => {
  const [ searchTerm, setSearchTerm] = useState("")
  const navigate = useNavigate()

-  const {
-    data,
-    isLoading,
-    refetch,
-    errors
-  } = useGetTransCountQuery()
-  console.log(data?.data);

  return (
    <Box 
@@ -151,7 +143,7 @@ const Home = () => {
            Latest Transactions
          </Heading>
          <Link
-            to=""
+            to="/view-all-transaction"
            style={{
              fontSize: "14px",
              color: colorMode === "light" ? "#000" : "#fff",
--- a/src/routes/_routes.jsx
+++ b/src/routes/_routes.jsx
@@ -9,6 +9,7 @@ import DidInfo from "../pages/DidInfo";
 import TransactionDetails from "../pages/Transaction/TransactionDetails";
 import MainNetOveriew from "../pages/MainNetIdOverview";
 import SubnetId from "../pages/SubnetId";
+import LatestTransactions from "../components/LatestTransactions/LatestTransactions";

 export const route = [
  {
@@ -39,6 +40,10 @@ export const route = [
    path: "/transaction",
    element: <Transaction />,
  },
+  {
+    path: "/view-all-transaction",
+    element: <LatestTransactions />,
+  },

  {
    path: "/transaction/:id",