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: [
"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;

39
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}>
<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={500}
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 (

6
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}>
@@ -162,7 +162,7 @@ const LatestTransactions = () => {
gap={2}
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
bg={colorMode==="light"?'#fff':"#434147"}
@@ -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={{

160
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,7 +95,21 @@ const MainNet = () => {
</GridItem>
</Grid>
<Box boxShadow={"rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;"}>
{overview.map((transaction, index) => (
{mainNetData?.data?.items?.map(
(
{
transactionId,
smartContract,
sender,
receiver,
contract,
timestamp,
amount,
transactionType,
subNetworkId,
},
index
) => (
<Grid
bg={
index % 2 === 0
@@ -82,7 +120,7 @@ const MainNet = () => {
? "#fff"
: "#232127"
}
key={transaction.id}
key={transactionId}
templateColumns={{ base: "100% 0%", md: "10% 90%" }}
gap={0}
>
@@ -108,11 +146,9 @@ const MainNet = () => {
textOverflow={"ellipsis"}
isTruncated
cursor={"pointer"}
onClick={() =>
navigate(`/transaction/${transaction?.description}`)
}
onClick={() => navigate(`/transaction/${transactionId}`)}
>
{transaction.description}
{transactionId}
</Text>
<Text
@@ -125,22 +161,25 @@ const MainNet = () => {
cursor={"pointer"}
>
<MdContentCopy
onClick={() => copyToClipboard(transaction.description)}
onClick={() => copyToClipboard(transactionId)}
/>
</Text>
</Text>
<HStack fontSize={{base:"xs", md:"sm" }} gap={{base:2,md:4}} mb={2}>
<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'}
w={"84%"}
// justifyContent={'space-between'}
fontSize={{ base: "xs", md: "sm" }}
>
<Text
@@ -150,11 +189,9 @@ const MainNet = () => {
whiteSpace={"nowrap"} // Prevent the text from wrapping
textOverflow={"ellipsis"}
isTruncated
onClick={() =>
navigate(`/did-info/${transaction.sender}`)
}
onClick={() => navigate(`/did-info/${sender}`)}
>
{transaction.sender}
{sender}
</Text>
<Text
_hover={{ bg: "gray.50" }}
@@ -165,13 +202,16 @@ const MainNet = () => {
ml={1}
cursor={"pointer"}
>
<MdContentCopy
onClick={() => copyToClipboard(transaction.sender)}
/>
<MdContentCopy onClick={() => copyToClipboard(sender)} />
</Text>
</HStack>
</HStack>
<HStack fontSize={{base:"xs", md:"sm" }} cursor={"pointer"} gap={{base:2,md:4}} mb={3}>
<HStack
fontSize={{ base: "xs", md: "sm" }}
cursor={"pointer"}
gap={{ base: 2, md: 4 }}
mb={3}
>
<Text color={colorMode === "light" ? "#0F0F0F" : "#E8E8E8"}>
Receiver:
</Text>
@@ -179,7 +219,6 @@ const MainNet = () => {
color={colorMode === "light" ? "#230A79" : "#B09AFF"}
textDecoration={"underline"}
fontSize={{ base: "xs", md: "sm" }}
overflow={"hidden"}
>
<Text
cursor={"pointer"}
@@ -187,11 +226,9 @@ const MainNet = () => {
whiteSpace={"nowrap"} // Prevent the text from wrapping
textOverflow={"ellipsis"}
isTruncated
onClick={() =>
navigate(`/did-info/${transaction.receiver}`)
}
onClick={() => navigate(`/did-info/${receiver}`)}
>
{transaction.receiver}
{receiver}
</Text>
<Text
_hover={{ bg: "gray.50" }}
@@ -203,14 +240,15 @@ const MainNet = () => {
cursor={"pointer"}
>
<MdContentCopy
onClick={() => copyToClipboard(transaction.receiver)}
onClick={() => copyToClipboard(receiver)}
/>
</Text>
</HStack>
</HStack>
<HStack
flexDirection={{ base: "column", md: "row" }}
justifyContent={{ base: "", md: "space-between" }}
justifyContent={{ base: "", md: "flex-start" }}
gap={44}
alignItems={{ base: "flex-start", md: "" }}
// flexWrap={'wrap'}
@@ -219,6 +257,7 @@ const MainNet = () => {
fontSize={{ base: "xs", md: "sm" }}
mb={3}
>
{smartContract && (
<Box>
<Text
mb={2}
@@ -227,10 +266,13 @@ const MainNet = () => {
>
Smart contract ID :
</Text>
<Text color={colorMode === "light" ? "#230A79" : "#B09AFF"}>
<Link to="/smart-contract">{transaction.contract}</Link>
<Text
color={colorMode === "light" ? "#230A79" : "#B09AFF"}
>
<Link to="/smart-contract">{smartContract}</Link>
</Text>
</Box>
)}
<Box>
<Text
mb={2}
@@ -239,7 +281,7 @@ const MainNet = () => {
Date and Time Stamp :
</Text>
<Text color={colorMode === "light" ? "#230A79" : "#B09AFF"}>
{transaction.date}
{formatRelativeDate(timestamp)}
</Text>
</Box>
<Box>
@@ -249,8 +291,14 @@ const MainNet = () => {
>
Amount:
</Text>
<Text color={colorMode === "light" ? "#230A79" : "#B09AFF"}>
{transaction.amount}
<Text
display={"flex"}
gap={2}
alignItems={"center"}
color={colorMode === "light" ? "#230A79" : "#B09AFF"}
>
<Image w={4} src={rbtLogoOutline} />
{amount}
</Text>
</Box>
</HStack>
@@ -283,14 +331,26 @@ const MainNet = () => {
<Text
color={colorMode === "light" ? "#230A79" : "#B09AFF"}
>
<Text>{transaction.transactionType}</Text>
<Text>{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}
<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>
@@ -298,9 +358,17 @@ const MainNet = () => {
{/* </Box> */}
</GridItem>
</Grid>
))}
)
)}
</Box>
<Pagination />
<Pagination
pageSize={pageSize}
setPageSize={setPageSize}
totalItems={totalItems}
isLoading={isMainNetDataLoading}
setCurrentPage={setCurrentPage}
currentPage={currentPage}
/>
</Container>
</Box>
</Box>