update
This commit is contained in:
@@ -1,3 +1,4 @@
|
||||
|
||||
// GlobalStateContext.js
|
||||
import { createContext } from 'react';
|
||||
|
||||
|
||||
@@ -554,53 +554,13 @@ const GlobalStateProvider = ({ children }) => {
|
||||
const [subnetId, setSubnetId] = useState([
|
||||
{
|
||||
id: 1,
|
||||
subnetId: "A1B2C3D4E5F6G",
|
||||
transactionCount: "10",
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
subnetId: "A1B2C3D4E5F6G",
|
||||
transactionCount: "10",
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
subnetId: "A1B2C3D4E5F6G",
|
||||
transactionCount: "10",
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
subnetId: "A1B2C3D4E5F6G",
|
||||
transactionCount: "10",
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
subnetId: "A1B2C3D4E5F6G",
|
||||
transactionCount: "10",
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
subnetId: "A1B2C3D4E5F6G",
|
||||
transactionCount: "10",
|
||||
},
|
||||
{
|
||||
id: 7,
|
||||
subnetId: "A1B2C3D4E5F6G",
|
||||
transactionCount: "10",
|
||||
},
|
||||
{
|
||||
id: 8,
|
||||
subnetId: "A1B2C3D4E5F6G",
|
||||
transactionCount: "10",
|
||||
},
|
||||
{
|
||||
id: 9,
|
||||
subnetId: "A1B2C3D4E5F6G",
|
||||
transactionCount: "10",
|
||||
},
|
||||
{
|
||||
id: 10,
|
||||
subnetId: "A1B2C3D4E5F6G",
|
||||
transactionCount: "10",
|
||||
subnetId: "96717e750ab7944355fa6c8d9289609477c03ef84e7237eca632af62af89d001",
|
||||
transactionCount: [
|
||||
"96717e750ab7944355fa6c8d9289609477c03ef84e7237eca632af62af89d001",
|
||||
"96717e750ab7944355fa6c8d9289609477c03ef84e7237eca632af62af89d001",
|
||||
"96717e750ab7944355fa6c8d9289609477c03ef84e7237eca632af62af89d001",
|
||||
"96717e750ab7944355fa6c8d9289609477c03ef84e7237eca632af62af89d001"
|
||||
],
|
||||
},
|
||||
]);
|
||||
|
||||
|
||||
@@ -76,9 +76,9 @@ const NormalTable = ({
|
||||
};
|
||||
|
||||
return (
|
||||
<TableContainer rounded={5} overflowX={"auto"} className="h-auto w-100 table-scroll" bg={colorMode === "light" ? "#F2EFFF" : "#312F35"}>
|
||||
<TableContainer boxShadow={'md'} rounded={5} overflowX={"auto"} className="h-auto w-100 table-scroll" bg={colorMode === "light" ? "#F2EFFF" : "#312F35"}>
|
||||
<Table size="sm" variant="striped" colorScheme={colorMode === "light" ? "whiteScheme" : "darkPurple"}>
|
||||
<Thead bg="forestGreen.100">
|
||||
<Thead >
|
||||
<Tr bg={colorMode === "light"? "#230A79" : "#312F35"}>
|
||||
{showRadioButton &&(
|
||||
<Th
|
||||
@@ -103,11 +103,12 @@ const NormalTable = ({
|
||||
fontWeight={500}
|
||||
textAlign={
|
||||
tableHeadRow.length - 1 === index || centered
|
||||
? "center"
|
||||
? "left"
|
||||
: "left"
|
||||
}
|
||||
key={index}
|
||||
p={4}
|
||||
|
||||
whiteSpace="normal"
|
||||
wordBreak="normal"
|
||||
overflowWrap="normal"
|
||||
@@ -171,7 +172,7 @@ const NormalTable = ({
|
||||
color={colorMode === "light"? "#000000" : "#FFFFFF"}
|
||||
textAlign={
|
||||
tableHeadRow?.length - 1 === i || centered
|
||||
? "center"
|
||||
? "left"
|
||||
: "left"
|
||||
}
|
||||
key={i}
|
||||
|
||||
@@ -98,7 +98,7 @@ const LineChart = () => {
|
||||
setLabels(dataLableMonthly);
|
||||
setDataset(dataSetMonthly);
|
||||
}
|
||||
}, [selectedValue, dailyData]);
|
||||
}, [selectedValue, dailyData, dateData, monthlyData]);
|
||||
|
||||
const data = {
|
||||
labels: labels,
|
||||
|
||||
@@ -45,9 +45,10 @@ const NavBar = () => {
|
||||
top={0}
|
||||
left={0}
|
||||
id="navbar"
|
||||
color={colorMode === "light" ? "light" : "black.900"}
|
||||
// color={colorMode === "light" ? "light" : "light"}
|
||||
padding={"16px 0px"}
|
||||
borderBottom={colorMode === "light" ? "1px solid #ccc" : "none"}
|
||||
borderBottom={colorMode === "light" ? "1px solid #4023A6" : "none"}
|
||||
bg={colorMode === "light"? "#4023A6":""}
|
||||
>
|
||||
<Container maxW="6xl">
|
||||
<Box
|
||||
@@ -58,7 +59,8 @@ const NavBar = () => {
|
||||
>
|
||||
<Link to="/">
|
||||
<Image
|
||||
src={colorMode === "light" ? logoLight : logo}
|
||||
// src={colorMode === "light" ? logoLight : logo}
|
||||
src={logo}
|
||||
// width={"120px"}
|
||||
width={{base:"95px",md : "120px"}}
|
||||
/>
|
||||
@@ -71,6 +73,7 @@ const NavBar = () => {
|
||||
fontSize={{ base: "12px", md: "14px" }}
|
||||
fontWeight="400"
|
||||
borderBottom={isActive ? "1px solid #DE858E" : "0px solid #fff"}
|
||||
color={'#fff'}
|
||||
>
|
||||
MAIN NET
|
||||
</Text>
|
||||
@@ -82,6 +85,7 @@ const NavBar = () => {
|
||||
fontSize={{ base: "12px", md: "14px" }}
|
||||
fontWeight="400"
|
||||
borderBottom={isActive ? "1px solid #DE858E" : "0px solid #fff"}
|
||||
color={'#fff'}
|
||||
>
|
||||
SUBNETS
|
||||
</Text>
|
||||
|
||||
@@ -20,36 +20,28 @@ import TransactionTable from "./TransactionTable";
|
||||
import { useGetTransByIdQuery } from "../../Services/api.service";
|
||||
// import rbtLogoOutline from "../../src/assets/images/rubix-filled.svg";
|
||||
import rbtLogoOutline from "../../assets/images/rubix-filled.svg";
|
||||
import { formatUTCToDDMMYYHHMMSS } from "../../Constants/Constants";
|
||||
import NormalTable from "../../components/DataTable/NormalTable";
|
||||
|
||||
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);
|
||||
|
||||
|
||||
// Scroll to top when component mounts or params change
|
||||
useEffect(() => {
|
||||
window.scrollTo({ top: 0, behavior: "smooth" }); // Scroll to top smoothly when params change
|
||||
}, [params]);
|
||||
|
||||
const { transactions } = useContext(GlobalStateContext);
|
||||
const filteredData = transactions?.find(
|
||||
(item) => item?.description === params?.id
|
||||
);
|
||||
console.log(filteredData);
|
||||
const toast = useToast();
|
||||
|
||||
function copyToClipboard(text) {
|
||||
navigator.clipboard
|
||||
.writeText(text)
|
||||
@@ -67,6 +59,31 @@ const TransactionDetails = () => {
|
||||
});
|
||||
}
|
||||
|
||||
console.log(data?.data?.quorumList);
|
||||
|
||||
// ===============================[ Table Header ]
|
||||
const tableHeadRow = [
|
||||
// "Sr. no",
|
||||
"Quorum List"];
|
||||
|
||||
|
||||
// const extractedArray = reportsHistory.map((item)=>({ }))
|
||||
const extractedArray = data?.data?.quorumList?.map((item, index) => ({
|
||||
"Sr. no": (
|
||||
<Text w={18} as={"span"} display={"flex"} gap={2} alignItems={"center"}>
|
||||
{index + 1}
|
||||
</Text>
|
||||
),
|
||||
"Quorum List": (
|
||||
<Box
|
||||
color={colorMode === "light" ? "#230A79" : "#B09AFF"}
|
||||
onClick={() => navigate(`/subnet-id-overview/${row["Subnet Id"]}`)}
|
||||
>
|
||||
{item}
|
||||
</Box>
|
||||
),
|
||||
}));
|
||||
|
||||
return (
|
||||
<>
|
||||
<Box
|
||||
@@ -210,7 +227,7 @@ const TransactionDetails = () => {
|
||||
boxShadow={colorMode === "light" && "md"}
|
||||
bg={colorMode === "light" ? "#F3F3F3" : "#1D1D1D"}
|
||||
p={4}
|
||||
mb={5}
|
||||
mb={extractedArray&&5}
|
||||
rounded={6}
|
||||
>
|
||||
{data?.data?.netWorkType && <>
|
||||
@@ -328,8 +345,9 @@ const TransactionDetails = () => {
|
||||
boxShadow={colorMode === "light" && "md"}
|
||||
bg={colorMode === "light" ? "#F3F3F3" : "#1D1D1D"}
|
||||
p={4}
|
||||
mb={0}
|
||||
mb={5}
|
||||
rounded={6}
|
||||
|
||||
>
|
||||
<HStack fontSize={"sm"} gap={{base:"4rem",md:"8rem"}} mb={2}>
|
||||
{data?.data?.amount && <Box>
|
||||
@@ -346,10 +364,25 @@ const TransactionDetails = () => {
|
||||
</Box>}
|
||||
{data?.data?.timestamp && <Box>
|
||||
<Text>Timestamp</Text>
|
||||
<Text color={"#A1A1A1"}>{data?.data?.timestamp}</Text>
|
||||
<Text color={"#A1A1A1"}>{formatUTCToDDMMYYHHMMSS(data?.data?.timestamp)}</Text>
|
||||
</Box>}
|
||||
</HStack>
|
||||
</Box>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{extractedArray&&<NormalTable
|
||||
tableHeadRow={tableHeadRow}
|
||||
data={extractedArray}
|
||||
isLoading={isLoading}
|
||||
/>}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<TransactionTable />
|
||||
</Container>
|
||||
</Box>
|
||||
|
||||
@@ -19,12 +19,15 @@ const TransactionTable = () => {
|
||||
}, []);
|
||||
|
||||
// ===============================[ Table Header ]
|
||||
const tableHeadRow = ["Sr. no", "Quorum DID", "Pledge Token(s)"];
|
||||
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"}>
|
||||
<Text w={57} as={"span"} display={"flex"} gap={2} alignItems={"center"}>
|
||||
{index + 1}
|
||||
</Text>
|
||||
),
|
||||
@@ -36,7 +39,11 @@ const TransactionTable = () => {
|
||||
{item?.subnetId}
|
||||
</Box>
|
||||
),
|
||||
"Pledge Token(s)": item?.transactionCount,
|
||||
"Pledge Token(s)": item?.transactionCount?.map((trans, index) => (
|
||||
<Box mb={1} key={index} color={colorMode === "light" ? "#230A79" : "#B09AFF"}>
|
||||
{trans}
|
||||
</Box>
|
||||
)),
|
||||
}));
|
||||
return (
|
||||
<Box pt={5}>
|
||||
|
||||
Reference in New Issue
Block a user