Siddhesh.More/rubix-explore
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

working TransDetails

Browse Source
This commit is contained in:
YasinShaikh123
2024-10-21 17:23:35 +05:30
parent be792580b7
commit f602f73a3c
7 changed files with 100 additions and 188 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
dev-dist/sw.js
View File

@@ -82,7 +82,7 @@ define(['./workbox-b5f7729d'], (function (workbox) { 'use strict';
"revision": "3ca0b8505b4bec776b69afdba2768812"
}, {
"url": "index.html",
"revision": "0.4ngos72cbag"
"revision": "0.0iof9eg3rjg"
}], {});
workbox.cleanupOutdatedCaches();
workbox.registerRoute(new workbox.NavigationRoute(workbox.createHandlerBoundToURL("index.html"), {

9
src/Services/api.service.js
View File

@@ -28,7 +28,11 @@ export const rubix = createApi({
providesTags: ["getTransAll"],
}),
getTransById: builder.query({
query: (id) =>
`/api/Transaction/GetById/${id}`,
providesTags: ["getTransAll"],
}),
@@ -36,5 +40,6 @@ export const rubix = createApi({
});
export const {
useGetTransCountQuery,
useGetTransAllQuery
useGetTransAllQuery,
useGetTransByIdQuery,
} = rubix;

22
src/components/Pagination.jsx
View File

@@ -50,10 +50,11 @@ const Pagination = ({
};
return (
<HStack mt={14} display={"flex"} justifyContent={"end"}>
<HStack mt={{base:5,md : 14}} display={"flex"} justifyContent={{base:"space-around",md:"end"}}>
<Box className="pagination-controls" display={"flex"} fontSize={"sm"} alignItems={"center"}>
<Text>Rows per page :</Text>
<Text display={{base:"none",md :"block"}}>Rows per page :</Text>
<Select
display={{base:"none",md :"block"}}
mx={4}
width={"60px"}
rounded="md"
@@ -67,7 +68,7 @@ const Pagination = ({
</Select>
{/* Display the current page range and total items */}
<Text mx={5}>
<Text mx={5} display={{base:"none",md :"block"}}>
{displayRange.start}-{displayRange.end} of {totalItems}
</Text>
@@ -97,6 +98,21 @@ const Pagination = ({
<FiChevronLeft />
</Button>
<Select
display={{base:"block",md :"none"}}
border={"none"}
mx={4}
width={"60px"}
rounded="md"
size="xs"
value={pageSize}
onChange={handlePageSizeChange} // Handle page size change
>
<option value={10}>10</option>
<option value={20}>20</option>
<option value={30}>30</option>
</Select>
<Button
bg={"none"}
p={0}

7
src/pages/MainNetIdOverview.jsx
View File

@@ -59,17 +59,17 @@ const MainNetOveriew = () => {
<Box>
<Container maxW="6xl">
<Grid
templateColumns="10% 90%"
templateColumns={{ base: "100% 0%", md: "10% 90%" }}
gap={0}
bg={colorMode === "light" ? "#230A79" : "#232127"}
// bg={"#232127"}
borderTopRightRadius={4}
borderTopLeftRadius={4}
>
<GridItem p={2}>
<GridItem p={2} display={{ base: "none", md: "grid" }}>
<Text color={"#fff"}>Sr. no</Text>
</GridItem>
<GridItem p={2}>
<GridItem p={2} >
<Text color={"#fff"}>Transactions</Text>
</GridItem>
</Grid>
@@ -182,6 +182,7 @@ const MainNetOveriew = () => {
color={colorMode === "light" ? "#230A79" : "#B09AFF"}
textDecoration={"underline"}
fontSize={{base:"xs", md:"sm" }}
isTruncated
>
<Text
cursor={"pointer"}

34
src/pages/SmartContract.jsx
View File

@@ -14,6 +14,7 @@ import {
import RelatedTransactions from "../components/RelatedTransactions/RelatedTransactions";
import bannerImage from "../assets/images/bannerImg.png";
import ToastBox from "../components/ToastBox";
import TransactionTable from "./Transaction/TransactionTable";
const Transaction = () => {
const { colorMode } = useColorMode();
@@ -176,7 +177,7 @@ import ToastBox from "../components/ToastBox";
</Text>
</HStack>
</Box>
<Box bg={colorMode === "light" ? "#F3F3F3" : "#1D1D1D"} p={4} mb={5} rounded={6}>
<Box bg={colorMode === "light" ? "#F3F3F3" : "#1D1D1D"} p={4} mb={0} rounded={6}>
<HStack fontSize={"sm"} gap={"8rem"} mb={5}>
<Box>
<Text>Pledge amount</Text>
@@ -187,37 +188,8 @@ import ToastBox from "../components/ToastBox";
<Text color={"#A1A1A1"}>18 hours ago, 29/07/2024</Text>
</Box>
</HStack>
<Text color={colorMode === "light" ? "#000" : "#fff"} fontSize={"sm"}>Quorum list</Text>
<HStack whiteSpace={"nowrap"} // Prevent the text from wrapping
textOverflow={"ellipsis"}
isTruncated
cursor={"pointer"} fontSize={"sm"} pb={3} color={colorMode === "light" ? "#230A79" : "#B09AFF"}>
<Text
whiteSpace={"nowrap"} // Prevent the text from wrapping
textOverflow={"ellipsis"}
isTruncated>
<Link style={{ fontWeight: "inherit" }}>bafybmibqle4w7k6acjbznk6ksapiyfwff6vwbwyaqx25wmzagt3awzbeky</Link>
</Text>
<Text as={"span"} ml={5} cursor={"pointer"}>
<MdContentCopy onClick={() => copyToClipboard(transaction.sender)}/>
</Text>
</HStack>
</Box>
<Box bg={colorMode === "light" ? "#F3F3F3" : "#1D1D1D"} p={4} rounded={6}>
<Text color={colorMode === "light" ? "#000" : "#fff"} fontSize={"sm"}>Pledge Token</Text>
<HStack
cursor={"pointer"} fontSize={"sm"} pb={3} color={colorMode === "light" ? "#230A79" : "#B09AFF"}>
<Text
whiteSpace={"nowrap"} // Prevent the text from wrapping
textOverflow={"ellipsis"}
isTruncated>
<Link style={{ fontWeight: "inherit" }}>bafybmibqle4w7k6acjbznk6ksapiyfwff6vwbwyaqx25wmzagt3awzbeky</Link>
</Text>
<Text as={"span"} ml={5} cursor={"pointer"}>
<MdContentCopy onClick={() => copyToClipboard(transaction.sender)}/>
</Text>
</HStack>
</Box>
<TransactionTable />
</Container>
</Box>
<RelatedTransactions />

98
src/pages/Transaction/TransactionDetails.jsx
View File

@@ -16,12 +16,25 @@ import bannerImage from "../../assets/images/bannerImg.png";
import ToastBox from "../../components/ToastBox";
import GlobalStateContext from "../../Contexts/GlobalStateContext";
import TransactionTable from "./TransactionTable";
import { useGetTransByIdQuery } from "../../Services/api.service";
const TransactionDetails = () => {
const navigate = useNavigate();
const params = useParams();
const { colorMode } = useColorMode();
console.log(params?.id);
const {
data,
isLoading,
refetch,
errors,
} = useGetTransByIdQuery(params?.id);
console.log(data?.data?.netWorkType);
// Scroll to top when component mounts or params change
useEffect(() => {
window.scrollTo({ top: 0, behavior: "smooth" }); // Scroll to top smoothly when params change
@@ -213,7 +226,7 @@ const TransactionDetails = () => {
isTruncated
cursor={"pointer"}
>
{filteredData?.sender}
{data?.data?.netWorkType}
</Text>
<Text
_hover={{ bg: "gray.50" }}
@@ -248,7 +261,7 @@ const TransactionDetails = () => {
isTruncated
cursor={"pointer"}
>
{filteredData?.sender}
{data?.data?.sender}
</Text>
<Text
_hover={{ bg: "gray.50" }}
@@ -283,7 +296,7 @@ const TransactionDetails = () => {
isTruncated
cursor={"pointer"}
>
{filteredData?.receiver}
{data?.data?.receiver}
</Text>
<Text
_hover={{ bg: "gray.50" }}
@@ -304,10 +317,10 @@ const TransactionDetails = () => {
boxShadow={colorMode === "light" && "md"}
bg={colorMode === "light" ? "#F3F3F3" : "#1D1D1D"}
p={4}
mb={5}
mb={0}
rounded={6}
>
<HStack fontSize={"sm"} gap={"8rem"} mb={5}>
<HStack fontSize={"sm"} gap={"8rem"} mb={2}>
<Box>
<Text>Amount</Text>
<Text color={"#A1A1A1"}>$ 100</Text>
@@ -317,81 +330,6 @@ const TransactionDetails = () => {
<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"}
>
<Text
fontWeight={"inherit"}
whiteSpace={"nowrap"} // Prevent the text from wrapping
textOverflow={"ellipsis"}
isTruncated
cursor={"pointer"}
>
{filteredData?.receiver}
</Text>
<Text
_hover={{ bg: "gray.50" }}
transition={"0.5s"}
rounded={"sm"}
p={1}
as={"span"}
ml={1}
cursor={"pointer"}
>
<MdContentCopy
onClick={() => copyToClipboard(filteredData.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"}
>
<Text
fontWeight={"inherit"}
whiteSpace={"nowrap"} // Prevent the text from wrapping
textOverflow={"ellipsis"}
isTruncated
cursor={"pointer"}
>
{filteredData?.receiver}
</Text>
<Text
_hover={{ bg: "gray.50" }}
transition={"0.5s"}
rounded={"sm"}
p={1}
as={"span"}
ml={1}
cursor={"pointer"}
>
<MdContentCopy
onClick={() => copyToClipboard(filteredData.sender)}
/>
</Text>
</HStack>
</Box>
<TransactionTable />
</Container>

116
src/pages/Transaction/TransactionTable.jsx
View File

@@ -1,73 +1,53 @@
import {
Badge,
Box,
Button,
Container,
Heading,
HStack,
Icon,
Image,
Input,
InputGroup,
Select,
Text,
useColorMode,
VStack,
} from "@chakra-ui/react";
import React, { useContext, useEffect, useState } from "react";
import { useNavigate, useParams } from "react-router-dom";
import { Box, Text, useColorMode } from "@chakra-ui/react";
import React, { useContext, useEffect, useState } from "react";
import { useNavigate } from "react-router-dom";
import GlobalStateContext from "../../Contexts/GlobalStateContext";
import NormalTable from "../../components/DataTable/NormalTable";
const TransactionTable = () => {
const { subnetId } = useContext(GlobalStateContext);
const [isLoading, setIsLoading] = useState(false);
const { colorMode } = useColorMode();
const navigate = useNavigate();
useEffect(() => {
setIsLoading(true);
const timer = setTimeout(() => {
setIsLoading(false);
}, 500);
return () => clearTimeout(timer);
}, []);
// ===============================[ Table Header ]
const tableHeadRow = [
"Sr. no",
"Subnet ID",
"Transaction count",
];
// const extractedArray = reportsHistory.map((item)=>({ }))
const extractedArray = subnetId.map((item, index) => ({
"Sr. no": (
<Text as={"span"} display={"flex"} gap={2} alignItems={"center"}>
{index + 1}
</Text>
),
"Subnet ID": (
<Box color={colorMode === "light"? "#230A79" : "#B09AFF"} onClick={() =>
navigate(`/subnet-id-overview/${row["Subnet Id"]}`)}>
{item?.subnetId}
</Box>
),
"Transaction count": item?.transactionCount,
}));
return (
const TransactionTable = () => {
const { subnetId } = useContext(GlobalStateContext);
const [isLoading, setIsLoading] = useState(false);
const { colorMode } = useColorMode();
const navigate = useNavigate();
useEffect(() => {
setIsLoading(true);
const timer = setTimeout(() => {
setIsLoading(false);
}, 500);
return () => clearTimeout(timer);
}, []);
// ===============================[ Table Header ]
const tableHeadRow = ["Sr. no", "Quorum DID", "Pledge Token(s)"];
// const extractedArray = reportsHistory.map((item)=>({ }))
const extractedArray = subnetId.map((item, index) => ({
"Sr. no": (
<Text as={"span"} display={"flex"} gap={2} alignItems={"center"}>
{index + 1}
</Text>
),
"Quorum DID": (
<Box
pt={"2rem"}
color={colorMode === "light" ? "#230A79" : "#B09AFF"}
onClick={() => navigate(`/subnet-id-overview/${row["Subnet Id"]}`)}
>
<NormalTable
emptyMessage={`We don't have any Sponers `}
tableHeadRow={tableHeadRow}
data={extractedArray}
isLoading={isLoading}
/>
{item?.subnetId}
</Box>
);
};
export default TransactionTable;
),
"Pledge Token(s)": item?.transactionCount,
}));
return (
<Box pt={5}>
<NormalTable
emptyMessage={`We don't have any Sponers `}
tableHeadRow={tableHeadRow}
data={extractedArray}
isLoading={isLoading}
/>
</Box>
);
};
export default TransactionTable;