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

upDATE

Browse Source
This commit is contained in:
Siddhesh More
2024-10-21 19:56:43 +05:30
parent a757dee246
commit 01480ea130
5 changed files with 342 additions and 268 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: [
"getTransCount",
"getTransAll"
"getTransAll",
"getTransById",
"getMainNet"
],
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}`,
query: ({ pageNumber = 1, pageSize = 10 }) => `api/Analytics/Transactions/GetAll?pageNumber=${pageNumber}&pageSize=${pageSize}`,
providesTags: ["getTransAll"],
}),
getTransById: builder.query({
query: (id) =>
`/api/Transaction/GetById/${id}`,
providesTags: ["getTransAll"],
query: (id) => `/api/Transaction/GetById/${id}`,
providesTags: ["getTransById"],
}),
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,
useGetTransAllQuery,
useGetTransByIdQuery,
useGetMainNetQuery,
} = rubix;

41
src/components/ChartsTabs.jsx
View File

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

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

@@ -144,7 +144,7 @@ const LatestTransactions = () => {
// bg={"#232127"}
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>
</GridItem>
<GridItem p={2}>
@@ -181,7 +181,7 @@ rounded={"full"}
<Box
roundedBottom={"lg"}
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(
(

2
src/pages/Home.jsx
View File

@@ -142,6 +142,8 @@ const Home = () => {
>
Latest Transactions
</Heading>
<Link
to="/view-all-transaction"
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 React, { useContext } from "react";
import { Box, Container, Grid, GridItem, Heading, HStack, Icon, Image, Select, Text, useColorMode, useToast, VStack } from "@chakra-ui/react";
import React, { useContext, useEffect, useState } from "react";
import bannerImage from "../assets/images/bannerImg.png";
import GlobalStateContext from "../Contexts/GlobalStateContext";
import Pagination from "../components/Pagination";
import { MdContentCopy, MdOutlineErrorOutline } from "react-icons/md";
import ToastBox from "../components/ToastBox";
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 { overview } = useContext(GlobalStateContext);
const { colorMode} = useColorMode();
const navigate = useNavigate()
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) {
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"} />
@@ -44,14 +68,14 @@ const MainNet = () => {
<Heading fontSize={"md"} fontWeight={400} color={colorMode === "light" ? "#000" : "#fff"} mb={{base :"10px" ,md : "0px"}}>
Main Net - Overview
</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
<Select width={"70px"} rounded="md" size="xs">
<option value='option1'>10</option>
<option value='option2'>20</option>
<option value='option3'>30</option>
</Select>
</Text>
</Text> */}
</Container>
<Box>
<Container maxW="6xl">
@@ -71,236 +95,280 @@ const MainNet = () => {
</GridItem>
</Grid>
<Box boxShadow={"rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;"}>
{overview.map((transaction, index) => (
<Grid
bg={
index % 2 === 0
? colorMode === "light"
? "#F2EFFF"
: "#312F35"
: colorMode === "light"
? "#fff"
: "#232127"
}
key={transaction.id}
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/${transaction?.description}`)
}
>
{transaction.description}
</Text>
<Text
_hover={{ bg: "gray.50" }}
transition={"0.5s"}
rounded={"sm"}
p={1}
as={"span"}
ml={1}
cursor={"pointer"}
>
<MdContentCopy
onClick={() => copyToClipboard(transaction.description)}
/>
</Text>
</Text>
<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/${transaction.sender}`)
}
>
{transaction.sender}
</Text>
<Text
_hover={{ bg: "gray.50" }}
transition={"0.5s"}
rounded={"sm"}
p={1}
as={"span"}
ml={1}
cursor={"pointer"}
>
<MdContentCopy
onClick={() => copyToClipboard(transaction.sender)}
/>
</Text>
</HStack>
</HStack>
<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" }}
overflow={"hidden"}
>
<Text
cursor={"pointer"}
maxW={{base:"55%",md:"100%"}}
whiteSpace={"nowrap"} // Prevent the text from wrapping
textOverflow={"ellipsis"}
isTruncated
onClick={() =>
navigate(`/did-info/${transaction.receiver}`)
}
>
{transaction.receiver}
</Text>
<Text
_hover={{ bg: "gray.50" }}
transition={"0.5s"}
rounded={"sm"}
p={1}
as={"span"}
ml={1}
cursor={"pointer"}
>
<MdContentCopy
onClick={() => copyToClipboard(transaction.receiver)}
/>
</Text>
</HStack>
</HStack>
<HStack
flexDirection={{ base: "column", md: "row" }}
justifyContent={{ base: "", md: "space-between" }}
alignItems={{ base: "flex-start", md: "" }}
// flexWrap={'wrap'}
// w={"80%"}
w={{ base: "100%", md: "80%" }}
fontSize={{ base: "xs", md: "sm" }}
mb={3}
>
<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">{transaction.contract}</Link>
</Text>
</Box>
<Box>
<Text
mb={2}
color={colorMode === "light" ? "#7B7B7B" : "#E8E8E8"}
>
Date and Time Stamp :
</Text>
<Text color={colorMode === "light" ? "#230A79" : "#B09AFF"}>
{transaction.date}
</Text>
</Box>
<Box>
<Text
mb={2}
color={colorMode === "light" ? "#7B7B7B" : "#E8E8E8"}
>
Amount:
</Text>
<Text color={colorMode === "light" ? "#230A79" : "#B09AFF"}>
{transaction.amount}
</Text>
</Box>
</HStack>
<HStack
fontSize={"sm"}
alignItems={"flex-start"}
position={"relative"}
>
<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>{transaction.transactionType}</Text>
</Text>
</HStack>
<HStack w={'100%'} justifyContent={'flex-start'}>
<Text color={colorMode === "light" ? "#7B7B7B" : "#E8E8E8"}>Main net :</Text>
<Text cursor={'pointer'} onClick={()=>navigate(`/mainnet-id-overview/${transaction.subnetID}`)} color={colorMode === "light" ? "#230A79" : "#B09AFF"}>
{transaction.subnetID}
</Text>
</HStack>
</VStack>
</HStack>
{/* </Box> */}
</GridItem>
</Grid>
))}
{mainNetData?.data?.items?.map(
(
{
transactionId,
smartContract,
sender,
receiver,
contract,
timestamp,
amount,
transactionType,
subNetworkId,
},
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>
<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>
<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>
<HStack
flexDirection={{ base: "column", md: "row" }}
justifyContent={{ base: "", md: "flex-start" }}
gap={44}
alignItems={{ base: "flex-start", md: "" }}
// flexWrap={'wrap'}
// w={"80%"}
w={{ base: "100%", md: "80%" }}
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>
)}
<Box>
<Text
mb={2}
color={colorMode === "light" ? "#7B7B7B" : "#E8E8E8"}
>
Date and Time Stamp :
</Text>
<Text color={colorMode === "light" ? "#230A79" : "#B09AFF"}>
{formatRelativeDate(timestamp)}
</Text>
</Box>
<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>
</HStack>
<HStack
fontSize={"sm"}
alignItems={"flex-start"}
position={"relative"}
>
<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>
<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>
<Pagination />
<Pagination
pageSize={pageSize}
setPageSize={setPageSize}
totalItems={totalItems}
isLoading={isMainNetDataLoading}
setCurrentPage={setCurrentPage}
currentPage={currentPage}
/>
</Container>
</Box>
</Box>