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-22 13:34:05 +05:30
parent 73232d0558 5a8c1c9a1b
commit 1e622f0955
8 changed files with 411 additions and 224 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.6ket85o3c1"
"revision": "0.5tjbmcd5mug"
}], {});
workbox.cleanupOutdatedCaches();
workbox.registerRoute(new workbox.NavigationRoute(workbox.createHandlerBoundToURL("index.html"), {

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

@@ -22,32 +22,34 @@ export const rubix = createApi({
providesTags: ["getTransCount"],
}),
getTransAll: builder.query({
query: ({ pageNumber = 1, pageSize = 10 }) => `Analytics/Transactions/GetAll?pageNumber=${pageNumber}&pageSize=${pageSize}`,
providesTags: ["getTransAll"],
}),
getTransById: builder.query({
query: (id) => `Transaction/GetById/${id}`,
providesTags: ["getTransById"],
}),
getMainNetCount: builder.query({
query: () => `MainNet/Transactions/GetCount`,
providesTags: ["getAllMainNetCount"],
}),
getMainNet: builder.query({
query: ({ pageNumber = 1, pageSize = 10 }) => `MainNet/Transactions/GetAll?pageNumber=${pageNumber}&pageSize=${pageSize}`,
providesTags: ["getMainNet"],
}),
getDidById: builder.query({
query: (id) => `DIDInfo/GetById/${id}`,
providesTags: ["getTransById"],
}),
getMonthlyData: builder.query({
query: (timeZoneId) => `/Analytics/monthly-summary?timeZoneId=${timeZoneId}`,
providesTags: ["getMonthlyData"],
@@ -63,7 +65,22 @@ export const rubix = createApi({
providesTags: ["getDateWiseData"],
}),
getSubnetCount: builder.query({
query: () => `/SubNet/Transactions/GetCount`,
providesTags: ["getSubnetCount"],
}),
getSubnetAll: builder.query({
query: ({ pageNumber = 1, pageSize = 10 }) => `Analytics/Transactions/GetAll?pageNumber=${pageNumber}&pageSize=${pageSize}`,
providesTags: ["getTransAll"],
}),
getSubnetById: builder.query({
query: ({id,pageNumber = 1, pageSize = 10 }) => `SubNet/Transactions/GetAll/${id}?pageNumber=${pageNumber}&pageSize=${pageSize}`,
providesTags: ["getTransById"],
}),
}),
});
export const {
@@ -75,5 +92,7 @@ export const {
useGetDidByIdQuery,
useGetMonthlyDataQuery,
useGetDailyDataQuery,
useGetDateWiseDataQuery
useGetDateWiseDataQuery,
useGetSubnetCountQuery,
useGetSubnetByIdQuery
} = rubix;

12
src/Theme/Theme.js
View File

@@ -42,18 +42,6 @@ const customTheme = extendTheme({
800: "#10041C",
900: "#0A0212",
},
lightWhite: {
50: "#ffffff", // Pure white
100: "#f2f2f2", // Very light gray
200: "#e6e6e6", // Lighter gray
300: "#cccccc", // Light gray
400: "#b3b3b3", // Medium gray
500: "#999999", // Darker gray
600: "#808080", // Even darker gray
700: "#666666", // Dark gray
800: "#4d4d4d", // Very dark gray
900: "#333333", // Almost black
},
whiteScheme: {
50: "#ffffff",
100: "#ffffff",

10
src/components/DataTable/NormalTable.jsx
View File

@@ -77,9 +77,9 @@ const NormalTable = ({
return (
<TableContainer rounded={5} overflowX={"auto"} className="h-auto w-100 table-scroll" bg={colorMode === "light" ? "#F2EFFF" : "#312F35"}>
<Table size="sm" variant="striped" colorScheme={colorMode === "light" ? "lightWhite" : "darkPurple"}>
<Table size="sm" variant="striped" colorScheme={colorMode === "light" ? "whiteScheme" : "darkPurple"}>
<Thead bg="forestGreen.100">
<Tr bg={colorMode === "light"? "#230A79" : "#232127"}>
<Tr bg={colorMode === "light"? "#230A79" : "#312F35"}>
{showRadioButton &&(
<Th
textAlign={"center"}
@@ -92,7 +92,7 @@ const NormalTable = ({
{radio? "Select":<Checkbox
isChecked={selectedRadio?.length === data?.length}
onChange={handleCheckAllChange}
colorScheme="forestGreen"
/>}
</Th>
@@ -153,13 +153,13 @@ const NormalTable = ({
<Td textAlign={"center"} >
{radio ? <Radio
bg={"#fff"}
colorScheme="forestGreen"
value={item.id}
isChecked={selectedRadio.includes(item.id)}
onChange={() => radioChange(item.id, item)}
/>:<Checkbox
bg={"#fff"}
colorScheme="forestGreen"
value={item.id}
isChecked={selectedRadio.includes(item.id)}
onChange={() => handleCheckboxChange(item.id)}

2
src/components/Doughnut/LineChart.jsx
View File

@@ -99,7 +99,7 @@ const LineChart = () => {
setLabels(dataLableMonthly);
setDataset(dataSetMonthly);
}
}, [selectedValue]);
}, [selectedValue, dailyData]);
const data = {
labels: labels,

3
src/pages/Subnet.jsx
View File

@@ -15,6 +15,8 @@ const Subnet = () => {
const navigate = useNavigate()
const toast = useToast()
function copyToClipboard(text) {
navigator.clipboard
@@ -33,6 +35,7 @@ const Subnet = () => {
});
}
return (
<Box p={"6rem 0 4rem 0"} backgroundImage={colorMode !== "light" ? `url(${bannerImage})` : "none"} position={"relative"} backgroundSize="contain" backgroundRepeat="no-repeat">
<Container

60
src/pages/SubnetId.jsx
View File

@@ -20,20 +20,39 @@ import NormalTable from "../components/DataTable/NormalTable";
import bannerImage from "../assets/images/bannerImg.png";
import { useNavigate, useParams } from "react-router-dom";
import Pagination from "../components/Pagination";
import { useGetSubnetCountQuery } from "../Services/api.service";
import { BiSearch, BiSearchAlt } from "react-icons/bi";
const SubnetId = () => {
const { subnetId } = useContext(GlobalStateContext);
const [isLoading, setIsLoading] = useState(false);
// const [isLoading, setIsLoading] = useState(false);
const { colorMode } = useColorMode();
const navigate = useNavigate();
useEffect(() => {
setIsLoading(true);
const timer = setTimeout(() => {
setIsLoading(false);
}, 500);
return () => clearTimeout(timer);
}, []);
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: subNetCount,
isLoading: isSubnetTransLoading
} = useGetSubnetCountQuery()
useEffect(() => {
setTotalItems(subNetCount?.data?.transactionCount);
}, [subNetCount]);
// ===============================[ Table Header ]
const tableHeadRow = [
@@ -80,7 +99,7 @@ const SubnetId = () => {
>
Subnet Overview {useParams?.id}
</Heading>
<Text
{/* <Text
to=""
style={{ fontSize: "14px" }}
color={colorMode === "light" ? "#000" : "#fff"}
@@ -93,7 +112,7 @@ const SubnetId = () => {
<option value="option2">20</option>
<option value="option3">30</option>
</Select>
</Text>
</Text> */}
</Container>
<VStack
pt={{ base: colorMode === "light" ? 10 : 10, md: 10 }}
@@ -112,7 +131,7 @@ const SubnetId = () => {
roundedLeft={8}
w={"76%"}
borderColor={colorMode === "light" ? "#CED4DA" : "#565252"}
h={"42px"}
// h={"42px"}
type="search"
placeholder="Search by Subnet ID"
onChange={(e) => setSearchTerm(e.target.value)}
@@ -123,10 +142,11 @@ const SubnetId = () => {
_focusVisible={{
borderColor: colorMode === "light" ? "#230A79" : "#7f8c8d",
}}
size={'sm'}
/>
<Button
zIndex={99}
h={"42px"}
// h={"42px"}
w={{ base: "205px", md: "24%" }}
fontWeight={400}
roundedBottomRight={8}
@@ -150,7 +170,12 @@ const SubnetId = () => {
bg: colorMode === "light" ? "#4023A6" : "#565252",
}}
color={"#fff"}
gap={3}
display={'flex'}
alignItems={'center'}
size={'sm'}
>
<BiSearchAlt fontSize={"20px"} />
Search
</Button>
</InputGroup>
@@ -162,9 +187,16 @@ const SubnetId = () => {
emptyMessage={`We don't have any Sponers `}
tableHeadRow={tableHeadRow}
data={extractedArray}
isLoading={isLoading}
isLoading={isSubnetTransLoading}
/>
<Pagination />
<Pagination
pageSize={pageSize}
setPageSize={setPageSize}
totalItems={totalItems}
isLoading={isSubnetTransLoading}
setCurrentPage={setCurrentPage}
currentPage={currentPage}
/>
</Container>
</Box>
);

515
src/pages/SubnetIdOverview.jsx
View File

@@ -1,18 +1,32 @@
import { Box, Container, Grid, GridItem, Heading, HStack, Icon, Link, Select, Text, useColorMode, useToast, VStack } from "@chakra-ui/react";
import React, { useContext, useEffect } from "react";
import { Box, Container, Grid, Image,GridItem, Heading, HStack, Icon, Link, Select, Text, useColorMode, useToast, VStack } from "@chakra-ui/react";
import React, { useContext, useEffect, useState } from "react";
import GlobalStateContext from "../Contexts/GlobalStateContext";
import Pagination from "../components/Pagination";
import { MdContentCopy, MdOutlineErrorOutline } from "react-icons/md";
import ToastBox from "../components/ToastBox";
import bannerImage from "../assets/images/bannerImg.png";
import { useParams } from "react-router-dom";
import { useNavigate, useParams } from "react-router-dom";
import { useGetSubnetByIdQuery } from "../Services/api.service";
import rbtLogoOutline from "../assets/images/rubix-filled.svg";
import { HiOutlineRefresh } from "react-icons/hi";
import { rotate } from "../components/LatestTransactions/LatestTransactions";
const SubnetInner = () => {
const { overview } = useContext(GlobalStateContext);
const { colorMode} = useColorMode();
const navigate = useNavigate()
const params = useParams()
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 toast = useToast()
useEffect(() => {
window.scrollTo({ top: 0, behavior: "smooth" }); // Scroll to top smoothly when params change
@@ -35,6 +49,47 @@ const SubnetInner = () => {
});
}
const {
data,
isLoading,
refetch
} = useGetSubnetByIdQuery({
id:params?.id,
pageNumber: currentPage,
pageSize: pageSize,
})
useEffect(() => {
setTotalItems(data?.data?.totalCount);
}, [data]);
const handleRefreshClick = () => {
setIsRotating(true); // Start rotation
refetch();
setTimeout(() => {
setIsRotating(false); // Stop rotation after 500ms
}, 500);
setLastRefreshedTime(new Date()); // Set the new refresh time
setRelativeRefreshTime("Just now"); // Reset relative time to "Just now"
};
useEffect(() => {
// Update relative time every minute
const intervalId = setInterval(() => {
updateRelativeTime();
}, 60000); // 60 seconds = 60000ms
return () => clearInterval(intervalId); // Cleanup the interval on unmount
}, [lastRefreshedTime]);
return (
<Box p={"6rem 0 4rem 0"} backgroundImage={colorMode !== "light" ? `url(${bannerImage})` : "none"} position={"relative"} backgroundSize="contain" backgroundRepeat="no-repeat">
<Container
@@ -47,18 +102,18 @@ const SubnetInner = () => {
<Heading fontSize={"md"} fontWeight={400} color={colorMode === "light" ? "#000" : "#fff"} mb={{base :"10px" ,md : "0px"}}>
Subnet ID - {params?.id}
</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">
<Grid
<Grid position={'relative'}
templateColumns={{ base: "100% 0%", md: "10% 90%" }}
gap={0}
bg={colorMode === "light" ? "#230A79" : "#232127"}
@@ -72,52 +127,177 @@ const SubnetInner = () => {
<GridItem p={2}>
<Text color={"#fff"}>Transactions</Text>
</GridItem>
<Box
as="span"
cursor={"pointer"}
position={"absolute"}
right={0}
m={1.5}
display={"flex"}
alignItems={"center"}
gap={2}
onClick={handleRefreshClick} // Trigger the rotation when clicked
>
<Text
as={"span"}
fontSize={"xs"}
color={colorMode === "light" ? "#fff" : "#ccc"}
>
Last refresh {relativeRefreshTime}{" "}
</Text>
<Icon
bg={colorMode === "light" ? "#fff" : "#434147"}
p={1.5}
boxSize={7}
rounded={"full"}
as={HiOutlineRefresh}
animation={
isRotating || isLoading
? `${rotate} 1s linear infinite`
: "none"
}
/>
</Box>
</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}
{data?.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"}
>
<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"}
>
{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}
<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
maxW={{base:"100%",md:"100%"}} // Set a max-width to control when the truncation happens
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
cursor={"pointer"}
onClick={() =>
navigate(`/transaction/${transaction?.description}`)
}
isTruncated
onClick={() => navigate(`/did-info/${sender}`)}
>
{transaction.description}
{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"}
@@ -128,99 +308,24 @@ const SubnetInner = () => {
cursor={"pointer"}
>
<MdContentCopy
onClick={() => copyToClipboard(transaction.description)}
onClick={() => copyToClipboard(receiver)}
/>
</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%'}
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}
>
</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}
@@ -229,73 +334,113 @@ const SubnetInner = () => {
>
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>
)}
<Box>
<Text
mb={2}
color={colorMode === "light" ? "#7B7B7B" : "#E8E8E8"}
>
Date and Time Stamp :
</Text>
<Text color={colorMode === "light" ? "#230A79" : "#B09AFF"}>
{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
mb={2}
color={colorMode === "light" ? "#7B7B7B" : "#E8E8E8"}
>
Date and Time Stamp :
Transaction type :
</Text>
<Text color={colorMode === "light" ? "#230A79" : "#B09AFF"}>
{transaction.date}
</Text>
</Box>
<Box>
<Text
mb={2}
color={colorMode === "light" ? "#230A79" : "#B09AFF"}
>
<Text>{transactionType}</Text>
</Text>
</HStack>
<HStack w={"100%"} justifyContent={'flex-start'}>
<Text
color={colorMode === "light" ? "#7B7B7B" : "#E8E8E8"}
>
Amount:
{subNetworkId === "MainNet" ? "Main net" : "Subnet ID"}
:
</Text>
<Text color={colorMode === "light" ? "#230A79" : "#B09AFF"}>
{transaction.amount}
<Text
color={colorMode === "light" ? "#230A79" : "#B09AFF"}
>
<Link
to={`/subnet-id-overview/${subNetworkId}`}
style={{ fontWeight: "inherit" }}
>
{subNetworkId}
</Link>
</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>
</VStack>
</HStack>
{/* </Box> */}
</GridItem>
</Grid>
))}
</HStack>
</VStack>
</HStack>
{/* </Box> */}
</GridItem>
</Grid>
)
)}
</Box>
<Pagination />
<Pagination
pageSize={pageSize}
setPageSize={setPageSize}
totalItems={totalItems}
isLoading={isLoading}
setCurrentPage={setCurrentPage}
currentPage={currentPage}
/>
</Container>
</Box>
</Box>