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

Merge branch 'main' of http://git.wdipl.com/Siddhesh.More/rubix-explore

Browse Source
This commit is contained in:
YasinShaikh123
2024-10-21 20:03:06 +05:30
parent 894d8d9d63 01480ea130
commit 68aaa56d15
5 changed files with 343 additions and 269 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -10,31 +10,31 @@ export const rubix = createApi({
}), }),
tagTypes: [ tagTypes: [
"getTransCount", "getTransCount",
"getTransAll" "getTransAll",
"getTransById",
"getMainNet"
], ],
endpoints: (builder) => ({ endpoints: (builder) => ({
getTransCount: builder.query({ getTransCount: builder.query({
query: () => `api/Analytics/Transactions/GetCount`, query: () => `api/Analytics/Transactions/GetCount`,
providesTags: ["getTransCount"], providesTags: ["getTransCount"],
}), }),
getTransAll: builder.query({ getTransAll: builder.query({
query: ({ pageNumber = 1, pageSize = 10 }) => query: ({ pageNumber = 1, pageSize = 10 }) => `api/Analytics/Transactions/GetAll?pageNumber=${pageNumber}&pageSize=${pageSize}`,
`api/Analytics/Transactions/GetAll?pageNumber=${pageNumber}&pageSize=${pageSize}`,
providesTags: ["getTransAll"], providesTags: ["getTransAll"],
}), }),
getTransById: builder.query({ getTransById: builder.query({
query: (id) => query: (id) => `/api/Transaction/GetById/${id}`,
`/api/Transaction/GetById/${id}`, providesTags: ["getTransById"],
providesTags: ["getTransAll"],
}), }),
getMainNet: builder.query({
query: ({ pageNumber = 1, pageSize = 10 }) => `api/MainNet/Transactions/GetAll?pageNumber=${pageNumber}&pageSize=${pageSize}`,
providesTags: ["getMainNet"],
}),
}), }),
}); });
@@ -42,4 +42,5 @@ export const {
useGetTransCountQuery, useGetTransCountQuery,
useGetTransAllQuery, useGetTransAllQuery,
useGetTransByIdQuery, useGetTransByIdQuery,
useGetMainNetQuery,
} = rubix; } = rubix;

41
src/components/ChartsTabs.jsx
View File

@@ -22,15 +22,15 @@ function ChartsTabs({ selectedValue, setSelectedValue, days }) {
const checkbox = getRadioProps(); const checkbox = getRadioProps();
return ( return (
<Box as="label" px={{ base: "6px", md: "px" }}> <Box as="label" >
<input {...input} /> <input {...input} />
<Box <Box
{...checkbox} {...checkbox}
cursor="pointer" cursor="pointer"
// borderWidth="1px" // borderWidth="1px"
borderRadius="xl" borderRadius="md"
// boxShadow="md" // boxShadow="md"
fontSize={{ base: "xs", md: "sm" }} fontSize={{ base: "xs", md: "xs" }}
_checked={{ _checked={{
bg: colorMode === "light" ? "#DEDBEB" : "#fff", bg: colorMode === "light" ? "#DEDBEB" : "#fff",
color: "#000", color: "#000",
@@ -40,8 +40,8 @@ function ChartsTabs({ selectedValue, setSelectedValue, days }) {
boxShadow: "outline", boxShadow: "outline",
}} }}
fontWeight={500} fontWeight={500}
py={2} py={1}
px={3} px={2}
> >
{props.children} {props.children}
</Box> </Box>
@@ -61,13 +61,26 @@ function ChartsTabs({ selectedValue, setSelectedValue, days }) {
const group = getRootProps(); const group = getRootProps();
return ( return (
<HStack alignItems={"center"} m={3} gap={1}> <HStack alignItems={"center"} gap={1}>
<Text
fontWeight={500}
<HStack
bg={colorMode === 'light'?'#fff':"#F8F8FF26"}
p={1.5}
rounded={"12px"}
justifyContent={{ base: "flex-end" }}
gap={{ base: 0, md: 1 }}
{...group}
ps={3}
>
<Text
fontWeight={600}
display={"flex"} display={"flex"}
alignItems={"center"} alignItems={"center"}
fontSize={{ base: "xs", md: "sm" }} fontSize={{ base: "xs", md: "xs" }}
color={colorMode === 'light'?'gray.400':"#fff"} color={colorMode === 'light'?'gray.400':"#fff"}
> >
Last Last
{/* <Icon {/* <Icon
@@ -76,16 +89,6 @@ function ChartsTabs({ selectedValue, setSelectedValue, days }) {
color={colorMode === "light" ? "gray.400" : "#fff"} color={colorMode === "light" ? "gray.400" : "#fff"}
/> */} /> */}
</Text> </Text>
<HStack
bg={colorMode === 'light'?'#fff':"#F8F8FF26"}
p={2}
rounded={"18px"}
justifyContent={{ base: "flex-end" }}
gap={{ base: 0, md: 1 }}
{...group}
>
{options.map((value) => { {options.map((value) => {
const radio = getRadioProps({ value }); const radio = getRadioProps({ value });
return ( return (

6
src/components/LatestTransactions/LatestTransactions.jsx
View File

@@ -144,7 +144,7 @@ const LatestTransactions = () => {
// bg={"#232127"} // bg={"#232127"}
roundedTop={"lg"} roundedTop={"lg"}
> >
<GridItem display={{ base: "none", md: "grid" }} p={2}> <GridItem display={{ base: "none", md: "grid" }} p={2} ps={3}>
<Text color={"#fff"}>Sr. no</Text> <Text color={"#fff"}>Sr. no</Text>
</GridItem> </GridItem>
<GridItem p={2}> <GridItem p={2}>
@@ -162,7 +162,7 @@ const LatestTransactions = () => {
gap={2} gap={2}
onClick={handleRefreshClick} // Trigger the rotation when clicked onClick={handleRefreshClick} // Trigger the rotation when clicked
> >
<Text as={'span'} fontSize={'xs'} color={colorMode==="light"?'#fff':"#7B7B7B"}>Last refresh {relativeRefreshTime} </Text> <Text as={'span'} fontSize={'xs'} color={colorMode==="light"?'#fff':"#ccc"}>Last refresh {relativeRefreshTime} </Text>
<Icon <Icon
bg={colorMode==="light"?'#fff':"#434147"} bg={colorMode==="light"?'#fff':"#434147"}
@@ -181,7 +181,7 @@ rounded={"full"}
<Box <Box
roundedBottom={"lg"} roundedBottom={"lg"}
overflow={"hidden"} overflow={"hidden"}
boxShadow={"rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;"} boxShadow={colorMode === "light" ? "rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;" :"none"}
> >
{transAll?.data?.items?.map( {transAll?.data?.items?.map(
( (

2
src/pages/Home.jsx
View File

@@ -142,6 +142,8 @@ const Home = () => {
> >
Latest Transactions Latest Transactions
</Heading> </Heading>
<Link <Link
to="/view-all-transaction" to="/view-all-transaction"
style={{ style={{

542
src/pages/MainNet.jsx
View File

@@ -1,26 +1,50 @@
import { Box, Container, Grid, GridItem, Heading, HStack, Icon, Select, Text, useColorMode, useToast, VStack } from "@chakra-ui/react"; import { Box, Container, Grid, GridItem, Heading, HStack, Icon, Image, Select, Text, useColorMode, useToast, VStack } from "@chakra-ui/react";
import React, { useContext } from "react"; import React, { useContext, useEffect, useState } from "react";
import bannerImage from "../assets/images/bannerImg.png"; import bannerImage from "../assets/images/bannerImg.png";
import GlobalStateContext from "../Contexts/GlobalStateContext"; import GlobalStateContext from "../Contexts/GlobalStateContext";
import Pagination from "../components/Pagination"; import Pagination from "../components/Pagination";
import { MdContentCopy, MdOutlineErrorOutline } from "react-icons/md"; import { MdContentCopy, MdOutlineErrorOutline } from "react-icons/md";
import ToastBox from "../components/ToastBox"; import ToastBox from "../components/ToastBox";
import { Link, useNavigate } from "react-router-dom"; import { Link, useNavigate } from "react-router-dom";
import { useGetMainNetQuery } from "../Services/api.service";
import { formatRelativeDate } from "../Constants/Constants";
import rbtLogoOutline from "../assets/images/rubix-filled.svg";
const MainNet = () => { const MainNet = () => {
const { overview } = useContext(GlobalStateContext); const { overview } = useContext(GlobalStateContext);
const { colorMode} = useColorMode(); const { colorMode} = useColorMode();
const navigate = useNavigate() const navigate = useNavigate()
const toast = useToast() const toast = useToast()
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 {
data: mainNetData,
isLoading: isMainNetDataLoading,
refetch: mainNetRefetch
} = useGetMainNetQuery({
pageNumber: currentPage,
pageSize: pageSize,
})
console.log(mainNetData);
useEffect(() => {
setTotalItems(mainNetData?.data?.totalCount);
}, [mainNetData]);
function copyToClipboard(text) { function copyToClipboard(text) {
navigator.clipboard navigator.clipboard
.writeText(text) .writeText(text)
.then(() => { .then(() => {
// console.log('Text copied to clipboard');
// alert('Text copied to clipboard');
toast({ toast({
render: () => ( render: () => (
<ToastBox status={"warn"} message={"Text copied to clipboard"} /> <ToastBox status={"warn"} message={"Text copied to clipboard"} />
@@ -44,14 +68,14 @@ const MainNet = () => {
<Heading fontSize={"md"} fontWeight={400} color={colorMode === "light" ? "#000" : "#fff"} mb={{base :"10px" ,md : "0px"}}> <Heading fontSize={"md"} fontWeight={400} color={colorMode === "light" ? "#000" : "#fff"} mb={{base :"10px" ,md : "0px"}}>
Main Net - Overview Main Net - Overview
</Heading> </Heading>
<Text to="" style={{ fontSize: "14px" }} color={colorMode === "light" ? "#000" : "#fff"} display={"flex"} gap={"3"}> {/* <Text to="" style={{ fontSize: "14px" }} color={colorMode === "light" ? "#000" : "#fff"} display={"flex"} gap={"3"}>
View total number of records View total number of records
<Select width={"70px"} rounded="md" size="xs"> <Select width={"70px"} rounded="md" size="xs">
<option value='option1'>10</option> <option value='option1'>10</option>
<option value='option2'>20</option> <option value='option2'>20</option>
<option value='option3'>30</option> <option value='option3'>30</option>
</Select> </Select>
</Text> </Text> */}
</Container> </Container>
<Box> <Box>
<Container maxW="6xl"> <Container maxW="6xl">
@@ -71,236 +95,280 @@ const MainNet = () => {
</GridItem> </GridItem>
</Grid> </Grid>
<Box boxShadow={"rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;"}> <Box boxShadow={"rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;"}>
{overview.map((transaction, index) => ( {mainNetData?.data?.items?.map(
<Grid (
bg={ {
index % 2 === 0 transactionId,
? colorMode === "light" smartContract,
? "#F2EFFF" sender,
: "#312F35" receiver,
: colorMode === "light" contract,
? "#fff" timestamp,
: "#232127" amount,
} transactionType,
key={transaction.id} subNetworkId,
templateColumns={{ base: "100% 0%", md: "10% 90%" }} },
gap={0} index
> ) => (
<GridItem <Grid
display={{ base: "none", md: "grid" }} bg={
p={4} index % 2 === 0
color={colorMode === "light" ? "#000" : "#fff"} ? colorMode === "light"
> ? "#F2EFFF"
{index + 1}. : "#312F35"
</GridItem> : colorMode === "light"
<GridItem p={4}> ? "#fff"
{/* <Box> */} : "#232127"
<Text // This ensures the text is truncated with ellipsis when it overflows ss__298 }
display={"flex"} key={transactionId}
fontSize={{base:"xs", md:"sm" }} templateColumns={{ base: "100% 0%", md: "10% 90%" }}
mb={2} gap={0}
color={colorMode === "light" ? "#230A79" : "#B09AFF"} >
> <GridItem
<Text display={{ base: "none", md: "grid" }}
maxW={{base:"100%",md:"100%"}} // Set a max-width to control when the truncation happens p={4}
// overflow={'hidden'} // Ensure overflow is hidden color={colorMode === "light" ? "#000" : "#fff"}
whiteSpace={"nowrap"} // Prevent the text from wrapping >
textOverflow={"ellipsis"} {index + 1}.
isTruncated </GridItem>
cursor={"pointer"} <GridItem p={4}>
onClick={() => {/* <Box> */}
navigate(`/transaction/${transaction?.description}`) <Text // This ensures the text is truncated with ellipsis when it overflows ss__298
} display={"flex"}
> fontSize={{ base: "xs", md: "sm" }}
{transaction.description} mb={2}
</Text> color={colorMode === "light" ? "#230A79" : "#B09AFF"}
>
<Text <Text
_hover={{ bg: "gray.50" }} maxW={{ base: "100%", md: "100%" }} // Set a max-width to control when the truncation happens
transition={"0.5s"} // overflow={'hidden'} // Ensure overflow is hidden
rounded={"sm"} whiteSpace={"nowrap"} // Prevent the text from wrapping
p={1} textOverflow={"ellipsis"}
as={"span"} isTruncated
ml={1} cursor={"pointer"}
cursor={"pointer"} onClick={() => navigate(`/transaction/${transactionId}`)}
> >
<MdContentCopy {transactionId}
onClick={() => copyToClipboard(transaction.description)} </Text>
/>
</Text> <Text
</Text> _hover={{ bg: "gray.50" }}
transition={"0.5s"}
<HStack fontSize={{base:"xs", md:"sm" }} gap={{base:2,md:4}} mb={2}> rounded={"sm"}
<Text color={colorMode === "light" ? "#0F0F0F" : "#E8E8E8"}> p={1}
Sender: as={"span"}
</Text> ml={1}
cursor={"pointer"}
>
<HStack <MdContentCopy
color={colorMode === "light" ? "#230A79" : "#B09AFF"} onClick={() => copyToClipboard(transactionId)}
textDecoration={"underline"} />
w={'84%'} </Text>
justifyContent={'space-between'} </Text>
fontSize={{base:"xs", md:"sm" }}
> <HStack
<Text fontSize={{ base: "xs", md: "sm" }}
cursor={"pointer"} gap={{ base: 2, md: 4 }}
maxW={{base:"90%",md:"100%"}} // Set a max-width to control when the truncation happens mb={2}
// overflow={'hidden'} // Ensure overflow is hidden >
whiteSpace={"nowrap"} // Prevent the text from wrapping <Text color={colorMode === "light" ? "#0F0F0F" : "#E8E8E8"}>
textOverflow={"ellipsis"} Sender:
isTruncated </Text>
onClick={() =>
navigate(`/did-info/${transaction.sender}`) <HStack
} color={colorMode === "light" ? "#230A79" : "#B09AFF"}
> textDecoration={"underline"}
{transaction.sender} w={"84%"}
</Text> // justifyContent={'space-between'}
<Text fontSize={{ base: "xs", md: "sm" }}
_hover={{ bg: "gray.50" }} >
transition={"0.5s"} <Text
rounded={"sm"} cursor={"pointer"}
p={1} maxW={{ base: "90%", md: "100%" }} // Set a max-width to control when the truncation happens
as={"span"} // overflow={'hidden'} // Ensure overflow is hidden
ml={1} whiteSpace={"nowrap"} // Prevent the text from wrapping
cursor={"pointer"} textOverflow={"ellipsis"}
> isTruncated
<MdContentCopy onClick={() => navigate(`/did-info/${sender}`)}
onClick={() => copyToClipboard(transaction.sender)} >
/> {sender}
</Text> </Text>
</HStack> <Text
</HStack> _hover={{ bg: "gray.50" }}
<HStack fontSize={{base:"xs", md:"sm" }} cursor={"pointer"} gap={{base:2,md:4}} mb={3}> transition={"0.5s"}
<Text color={colorMode === "light" ? "#0F0F0F" : "#E8E8E8"}> rounded={"sm"}
Receiver: p={1}
</Text> as={"span"}
<HStack ml={1}
color={colorMode === "light" ? "#230A79" : "#B09AFF"} cursor={"pointer"}
textDecoration={"underline"} >
fontSize={{base:"xs", md:"sm" }} <MdContentCopy onClick={() => copyToClipboard(sender)} />
overflow={"hidden"} </Text>
> </HStack>
<Text </HStack>
cursor={"pointer"} <HStack
maxW={{base:"55%",md:"100%"}} fontSize={{ base: "xs", md: "sm" }}
whiteSpace={"nowrap"} // Prevent the text from wrapping cursor={"pointer"}
textOverflow={"ellipsis"} gap={{ base: 2, md: 4 }}
isTruncated mb={3}
onClick={() => >
navigate(`/did-info/${transaction.receiver}`) <Text color={colorMode === "light" ? "#0F0F0F" : "#E8E8E8"}>
} Receiver:
> </Text>
{transaction.receiver} <HStack
</Text> color={colorMode === "light" ? "#230A79" : "#B09AFF"}
<Text textDecoration={"underline"}
_hover={{ bg: "gray.50" }} fontSize={{ base: "xs", md: "sm" }}
transition={"0.5s"} >
rounded={"sm"} <Text
p={1} cursor={"pointer"}
as={"span"} maxW={{ base: "55%", md: "100%" }}
ml={1} whiteSpace={"nowrap"} // Prevent the text from wrapping
cursor={"pointer"} textOverflow={"ellipsis"}
> isTruncated
<MdContentCopy onClick={() => navigate(`/did-info/${receiver}`)}
onClick={() => copyToClipboard(transaction.receiver)} >
/> {receiver}
</Text> </Text>
</HStack> <Text
</HStack> _hover={{ bg: "gray.50" }}
<HStack transition={"0.5s"}
flexDirection={{ base: "column", md: "row" }} rounded={"sm"}
justifyContent={{ base: "", md: "space-between" }} p={1}
alignItems={{ base: "flex-start", md: "" }} as={"span"}
// flexWrap={'wrap'} ml={1}
cursor={"pointer"}
// w={"80%"} >
w={{ base: "100%", md: "80%" }} <MdContentCopy
fontSize={{ base: "xs", md: "sm" }} onClick={() => copyToClipboard(receiver)}
mb={3} />
> </Text>
<Box> </HStack>
<Text </HStack>
mb={2} <HStack
// fontSize={{base:"xs", md:"sm" }} flexDirection={{ base: "column", md: "row" }}
color={colorMode === "light" ? "#7B7B7B" : "#E8E8E8"} justifyContent={{ base: "", md: "flex-start" }}
> gap={44}
Smart contract ID : alignItems={{ base: "flex-start", md: "" }}
</Text> // flexWrap={'wrap'}
<Text color={colorMode === "light" ? "#230A79" : "#B09AFF"}>
<Link to="/smart-contract">{transaction.contract}</Link> // w={"80%"}
</Text> w={{ base: "100%", md: "80%" }}
</Box> fontSize={{ base: "xs", md: "sm" }}
<Box> mb={3}
<Text >
mb={2} {smartContract && (
color={colorMode === "light" ? "#7B7B7B" : "#E8E8E8"} <Box>
> <Text
Date and Time Stamp : mb={2}
</Text> // fontSize={{base:"xs", md:"sm" }}
<Text color={colorMode === "light" ? "#230A79" : "#B09AFF"}> color={colorMode === "light" ? "#7B7B7B" : "#E8E8E8"}
{transaction.date} >
</Text> Smart contract ID :
</Box> </Text>
<Box> <Text
<Text color={colorMode === "light" ? "#230A79" : "#B09AFF"}
mb={2} >
color={colorMode === "light" ? "#7B7B7B" : "#E8E8E8"} <Link to="/smart-contract">{smartContract}</Link>
> </Text>
Amount: </Box>
</Text> )}
<Text color={colorMode === "light" ? "#230A79" : "#B09AFF"}> <Box>
{transaction.amount} <Text
</Text> mb={2}
</Box> color={colorMode === "light" ? "#7B7B7B" : "#E8E8E8"}
</HStack> >
Date and Time Stamp :
<HStack </Text>
fontSize={"sm"} <Text color={colorMode === "light" ? "#230A79" : "#B09AFF"}>
alignItems={"flex-start"} {formatRelativeDate(timestamp)}
position={"relative"} </Text>
> </Box>
<Icon <Box>
as={MdOutlineErrorOutline} <Text
fontSize={"18px"} mb={2}
display={{ base: "none", md: "block" }} color={colorMode === "light" ? "#7B7B7B" : "#E8E8E8"}
style={{ >
marginTop: "1px", Amount:
position: "absolute", </Text>
top: "2px", <Text
left: "-24px", display={"flex"}
}} gap={2}
color="#7B7B7B" alignItems={"center"}
/> color={colorMode === "light" ? "#230A79" : "#B09AFF"}
>
<VStack fontSize={{base:"xs", md:"sm" }}> <Image w={4} src={rbtLogoOutline} />
<HStack w={"100%"} justifyContent={"flex-start"}> {amount}
<Text </Text>
color={colorMode === "light" ? "#7B7B7B" : "#E8E8E8"} </Box>
> </HStack>
Transaction type :
</Text> <HStack
<Text fontSize={"sm"}
color={colorMode === "light" ? "#230A79" : "#B09AFF"} alignItems={"flex-start"}
> position={"relative"}
<Text>{transaction.transactionType}</Text> >
</Text> <Icon
</HStack> as={MdOutlineErrorOutline}
fontSize={"18px"}
<HStack w={'100%'} justifyContent={'flex-start'}> display={{ base: "none", md: "block" }}
<Text color={colorMode === "light" ? "#7B7B7B" : "#E8E8E8"}>Main net :</Text> style={{
<Text cursor={'pointer'} onClick={()=>navigate(`/mainnet-id-overview/${transaction.subnetID}`)} color={colorMode === "light" ? "#230A79" : "#B09AFF"}> marginTop: "1px",
{transaction.subnetID} position: "absolute",
</Text> top: "2px",
</HStack> left: "-24px",
</VStack> }}
</HStack> color="#7B7B7B"
{/* </Box> */} />
</GridItem>
</Grid> <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>
<Text
color={colorMode === "light" ? "#7B7B7B" : "#E8E8E8"}
>
{subNetworkId === "MainNet" ? "Main net" : "Subnet ID"}{" "}
:
</Text>
<Text
color={colorMode === "light" ? "#230A79" : "#B09AFF"}
>
<Link
to={`/subnet-id-overview/${subNetworkId}`}
style={{ fontWeight: "inherit" }}
>
{subNetworkId}
</Link>
</Text>
</HStack>
</VStack>
</HStack>
{/* </Box> */}
</GridItem>
</Grid>
)
)}
</Box> </Box>
<Pagination /> <Pagination
pageSize={pageSize}
setPageSize={setPageSize}
totalItems={totalItems}
isLoading={isMainNetDataLoading}
setCurrentPage={setCurrentPage}
currentPage={currentPage}
/>
</Container> </Container>
</Box> </Box>
</Box> </Box>