678 lines
25 KiB
JavaScript
678 lines
25 KiB
JavaScript
import { Box, Container, Grid, Image,GridItem, Heading, HStack, Icon, Link, Select, Text, useColorMode, useToast, VStack, Button, Tooltip } 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 { 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";
|
|
import Search from '../assets/images/search.png'
|
|
import { formatUTCToDDMMYYHHMMSS } from "../Constants/Constants";
|
|
import FullScreenLoaader from "../components/FullScreenLoaader/FullScreenLoaader";
|
|
import rbtLogoDark from "../assets/images/RBTLogo.svg";
|
|
|
|
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 [ isLoadingURL, setIsLoading ] = useState(false)
|
|
|
|
const toast = useToast()
|
|
useEffect(() => {
|
|
window.scrollTo({ top: 0, behavior: "smooth" }); // Scroll to top smoothly when params change
|
|
}, []);
|
|
|
|
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"} />
|
|
),
|
|
});
|
|
setIsLoading(false)
|
|
})
|
|
.catch((err) => {
|
|
console.error("Failed to copy text: ", err);
|
|
});
|
|
}
|
|
|
|
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]);
|
|
|
|
|
|
const updateRelativeTime = () => {
|
|
const now = new Date();
|
|
const timeDiff = Math.floor((now - lastRefreshedTime) / 60000); // Difference in minutes
|
|
|
|
if (timeDiff < 1) {
|
|
setRelativeRefreshTime("Just now");
|
|
} else if (timeDiff === 1) {
|
|
setRelativeRefreshTime("1 minute ago");
|
|
} else {
|
|
setRelativeRefreshTime(`${timeDiff} minutes ago`);
|
|
}
|
|
};
|
|
|
|
const handleGenrateShortURL = async () => {
|
|
|
|
setIsLoading(true)
|
|
const fullUrl = window.location.href;
|
|
try {
|
|
const response = await fetch(`${import.meta.env.VITE_BASE_URL}ShortUrl/create`, {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
},
|
|
body: JSON.stringify(fullUrl), // Sending searchTerm as a JSON string
|
|
});
|
|
|
|
if (!response.ok) {
|
|
throw new Error('Failed to generate short URL');
|
|
}
|
|
|
|
const result = await response.json();
|
|
copyToClipboard(result?.shortUrl)
|
|
// You can handle the result here, e.g., by updating a state with the short URL
|
|
} catch (error) {
|
|
console.error("Error generating short URL:", error);
|
|
}
|
|
};
|
|
|
|
|
|
return (
|
|
<Box bg={colorMode === "light" ? "#f5f5f7" : "none"} minH={"100vh"} p={"6rem 0 4rem 0"} backgroundImage={colorMode !== "light" ? `url(${bannerImage})` : "none"} position={"relative"} backgroundSize="contain" backgroundRepeat="no-repeat">
|
|
<Container
|
|
maxW="6xl"
|
|
color="white"
|
|
display={{base :"block",md : "flex"}}
|
|
justifyContent={"space-between"}
|
|
mb={5}
|
|
>
|
|
<Text fontSize={"md"} fontWeight={400} color={colorMode === "light" ? "#000" : "#fff"} mb={{base :"10px" ,md : "0px"}}>
|
|
Subnet ID - {params?.id}
|
|
</Text>
|
|
<HStack to="" style={{ fontSize: "14px" }} color={colorMode === "light" ? "#000" : "#fff"} display={"flex"} gap={"3"}>
|
|
{/* <Text as={"span"}>Total Value Locked (TVL)</Text> <Text as={"span"}>{Number(data?.data?.tvl).toFixed(3)} RBT</Text> */}
|
|
<Text as={"span"}>Total Value Locked (TVL)</Text> <Text as={"span"}>{data?.data?.tvl} $ Mn</Text>
|
|
</HStack>
|
|
{/* <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> */}
|
|
</Container>
|
|
<Container maxW="6xl" display={"flex"} justifyContent={"end"} mb={6}>
|
|
<Button fontWeight={400} color={"#fff"} border={"none"} bg={colorMode === "light" ? "#230A79" : "#312F35"} _hover={{bg: colorMode === "light" ? "#4023A6" : "#312F35"}} _focus={{outline:"none"}}
|
|
display={'flex'} gap={2} alignItems={'center'} rounded={'sm'} size={"sm"} isLoading={isLoadingURL} onClick={handleGenrateShortURL}>
|
|
<MdContentCopy/> Copy short url
|
|
</Button>
|
|
</Container>
|
|
{isLoading ? <FullScreenLoaader half={true}/>:<Box>
|
|
{data?.data?.items?.length===0 || isLoading?<HStack h={'35vh'} justifyContent={"center"} mt={10}>
|
|
<Image w={"40px"} src={Search}/>
|
|
<Text as={"span"} color={"#787878"}>{"No records found"}</Text>
|
|
</HStack>:<Container maxW="6xl">
|
|
<Grid position={'relative'}
|
|
templateColumns={{ base: "100% 0%", md: "10% 90%" }}
|
|
gap={0}
|
|
bg={colorMode === "light" ? "#230A79" : "#232127"}
|
|
// bg={"#232127"}
|
|
borderTopRightRadius={4}
|
|
borderTopLeftRadius={4}
|
|
>
|
|
<GridItem display={{ base: "none", md: "grid" }} p={2}>
|
|
<Text color={"#fff"}>Sr. no</Text>
|
|
</GridItem>
|
|
<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;"}>
|
|
{data?.data?.items?.map(
|
|
(
|
|
{
|
|
transactionId,
|
|
smartContract,
|
|
sender,
|
|
receiver,
|
|
contract,
|
|
timestamp,
|
|
amount,
|
|
transactionType,
|
|
subNetworkId,
|
|
|
|
|
|
|
|
executor,
|
|
deployer,
|
|
creator,
|
|
pledgeAmount,
|
|
scTokenHash
|
|
},
|
|
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>
|
|
|
|
{sender&&<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>}
|
|
{receiver&&<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" }}
|
|
isTruncated
|
|
>
|
|
<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>}
|
|
|
|
|
|
|
|
{creator&&<HStack
|
|
fontSize={{ base: "xs", md: "sm" }}
|
|
cursor={"pointer"}
|
|
gap={{ base: 2, md: 4 }}
|
|
mb={3}
|
|
>
|
|
<Text color={colorMode === "light" ? "#0F0F0F" : "#E8E8E8"}>
|
|
Creator:
|
|
</Text>
|
|
<HStack
|
|
color={colorMode === "light" ? "#230A79" : "#B09AFF"}
|
|
textDecoration={"underline"}
|
|
fontSize={{ base: "xs", md: "sm" }}
|
|
isTruncated
|
|
>
|
|
<Text
|
|
cursor={"pointer"}
|
|
maxW={{ base: "55%", md: "100%" }}
|
|
whiteSpace={"nowrap"} // Prevent the text from wrapping
|
|
textOverflow={"ellipsis"}
|
|
isTruncated
|
|
onClick={() => navigate(`/did-info/${creator}`)}
|
|
>
|
|
{creator}
|
|
</Text>
|
|
<Text
|
|
_hover={{ bg: "gray.50" }}
|
|
transition={"0.5s"}
|
|
rounded={"sm"}
|
|
p={1}
|
|
as={"span"}
|
|
ml={1}
|
|
cursor={"pointer"}
|
|
>
|
|
<MdContentCopy
|
|
onClick={() => copyToClipboard(creator)}
|
|
/>
|
|
</Text>
|
|
</HStack>
|
|
</HStack>}
|
|
|
|
{executor&&<HStack
|
|
fontSize={{ base: "xs", md: "sm" }}
|
|
cursor={"pointer"}
|
|
gap={{ base: 2, md: 4 }}
|
|
mb={3}
|
|
>
|
|
<Text color={colorMode === "light" ? "#0F0F0F" : "#E8E8E8"}>
|
|
Executor:
|
|
</Text>
|
|
<HStack
|
|
color={colorMode === "light" ? "#230A79" : "#B09AFF"}
|
|
textDecoration={"underline"}
|
|
fontSize={{ base: "xs", md: "sm" }}
|
|
isTruncated
|
|
>
|
|
<Text
|
|
cursor={"pointer"}
|
|
maxW={{ base: "55%", md: "100%" }}
|
|
whiteSpace={"nowrap"} // Prevent the text from wrapping
|
|
textOverflow={"ellipsis"}
|
|
isTruncated
|
|
onClick={() => navigate(`/did-info/${executor}`)}
|
|
>
|
|
{executor}
|
|
</Text>
|
|
<Text
|
|
_hover={{ bg: "gray.50" }}
|
|
transition={"0.5s"}
|
|
rounded={"sm"}
|
|
p={1}
|
|
as={"span"}
|
|
ml={1}
|
|
cursor={"pointer"}
|
|
>
|
|
<MdContentCopy
|
|
onClick={() => copyToClipboard(executor)}
|
|
/>
|
|
</Text>
|
|
</HStack>
|
|
</HStack>}
|
|
|
|
|
|
{deployer&&<HStack
|
|
fontSize={{ base: "xs", md: "sm" }}
|
|
cursor={"pointer"}
|
|
gap={{ base: 2, md: 4 }}
|
|
mb={3}
|
|
>
|
|
<Text color={colorMode === "light" ? "#0F0F0F" : "#E8E8E8"}>
|
|
Deployer:
|
|
</Text>
|
|
<HStack
|
|
color={colorMode === "light" ? "#230A79" : "#B09AFF"}
|
|
textDecoration={"underline"}
|
|
fontSize={{ base: "xs", md: "sm" }}
|
|
isTruncated
|
|
>
|
|
<Text
|
|
cursor={"pointer"}
|
|
maxW={{ base: "55%", md: "100%" }}
|
|
whiteSpace={"nowrap"} // Prevent the text from wrapping
|
|
textOverflow={"ellipsis"}
|
|
isTruncated
|
|
onClick={() => navigate(`/did-info/${deployer}`)}
|
|
>
|
|
{deployer}
|
|
</Text>
|
|
<Text
|
|
_hover={{ bg: "gray.50" }}
|
|
transition={"0.5s"}
|
|
rounded={"sm"}
|
|
p={1}
|
|
as={"span"}
|
|
ml={1}
|
|
cursor={"pointer"}
|
|
>
|
|
<MdContentCopy
|
|
onClick={() => copyToClipboard(deployer)}
|
|
/>
|
|
</Text>
|
|
</HStack>
|
|
</HStack>}
|
|
|
|
|
|
|
|
|
|
<HStack
|
|
flexDirection={{ base: "column", md: "row" }}
|
|
justifyContent={{ base: "", md: scTokenHash?"space-between" :"flex-start" }}
|
|
gap={{base:4,md:scTokenHash ? 4:44}}
|
|
alignItems={{ base: "flex-start", md: "" }}
|
|
// flexWrap={'wrap'}
|
|
|
|
// w={"80%"}
|
|
w={{ base: "100%", md:scTokenHash?"90%": "80%" }}
|
|
fontSize={{ base: "xs", md: "sm" }}
|
|
mb={3}
|
|
>
|
|
{scTokenHash && (
|
|
<Box>
|
|
<Text
|
|
mb={2}
|
|
// fontSize={{base:"xs", md:"sm" }}
|
|
color={colorMode === "light" ? "#7B7B7B" : "#E8E8E8"}
|
|
>
|
|
Smart Contract ID :
|
|
</Text>
|
|
<Text
|
|
width={{ base: "300px", md: "auto" }}
|
|
color={colorMode === "light" ? "#230A79" : "#B09AFF"}
|
|
>
|
|
<Link to="/smart-contract">{scTokenHash}</Link>
|
|
</Text>
|
|
</Box>
|
|
)}
|
|
|
|
<Box>
|
|
<Text
|
|
mb={2}
|
|
color={colorMode === "light" ? "#7B7B7B" : "#E8E8E8"}
|
|
>
|
|
Date and Time Stamp :
|
|
</Text>
|
|
<Text color={colorMode === "light" ? "#230A79" : "#B09AFF"}>
|
|
{formatUTCToDDMMYYHHMMSS(timestamp)}
|
|
</Text>
|
|
</Box>
|
|
|
|
|
|
|
|
{amount&&<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={colorMode === "light" ? rbtLogoDark :rbtLogoOutline}/>
|
|
{amount}
|
|
</Text>
|
|
</Box>}
|
|
|
|
|
|
{pledgeAmount&&<Box>
|
|
<Text
|
|
mb={2}
|
|
color={colorMode === "light" ? "#7B7B7B" : "#E8E8E8"}
|
|
>
|
|
Pledge Amount:
|
|
</Text>
|
|
<Text
|
|
display={"flex"}
|
|
gap={2}
|
|
alignItems={"center"}
|
|
color={colorMode === "light" ? "#230A79" : "#B09AFF"}
|
|
>
|
|
<Image w={4} src={colorMode === "light" ? rbtLogoDark :rbtLogoOutline}/>
|
|
{pledgeAmount}
|
|
</Text>
|
|
</Box>}
|
|
|
|
|
|
</HStack>
|
|
|
|
<HStack
|
|
fontSize={"sm"}
|
|
alignItems={"flex-start"}
|
|
position={"relative"}
|
|
>
|
|
<Tooltip
|
|
p={2}
|
|
fontWeight={400}
|
|
lineHeight={"18px"}
|
|
boxShadow={"rgba(99, 99, 99, 0.2) 0px 2px 8px 0px"}
|
|
color={colorMode === "light" ? "#230A79" : "#230A79"}
|
|
fontStyle={"xs"}
|
|
rounded={"5px"}
|
|
bg={colorMode === "light" ? "#fff" : "#fff"}
|
|
label={transactionType === "RBT" ? "Native RBT transactions which is peer-to-peer." : "SC or Smart Contract are codes that executes the actions multiple parties or entities agree to."}
|
|
placement='top-start'>
|
|
<Text p={0} display={{ base: "none", md: "block" }} position={"absolute"} top={"2px"} left={"-24px"}>
|
|
<Icon
|
|
cursor={"pointer"}
|
|
as={MdOutlineErrorOutline}
|
|
fontSize={"18px"}
|
|
color="#7B7B7B"
|
|
/>
|
|
</Text>
|
|
</Tooltip>
|
|
{/* <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 w={"100%"} justifyContent={"flex-start"}>
|
|
<Text
|
|
color={colorMode === "light" ? "#7B7B7B" : "#E8E8E8"}
|
|
>
|
|
{subNetworkId === "MainNet" ? "Main net" : "Subnet ID"}:
|
|
</Text>
|
|
<Text
|
|
color={colorMode === "light" ? "#230A79" : "#B09AFF"}
|
|
>
|
|
{subNetworkId === "MainNet" ?<Text>{subNetworkId}</Text>:<Link
|
|
to={`/subnet-id-overview/${subNetworkId}`}
|
|
style={{ fontWeight: "inherit" }}
|
|
>
|
|
{subNetworkId}
|
|
</Link>}
|
|
</Text>
|
|
</HStack>
|
|
</VStack>
|
|
</HStack>
|
|
{/* </Box> */}
|
|
</GridItem>
|
|
</Grid>
|
|
)
|
|
)}
|
|
</Box>
|
|
<Pagination
|
|
pageSize={pageSize}
|
|
setPageSize={setPageSize}
|
|
totalItems={totalItems}
|
|
isLoading={isLoading}
|
|
setCurrentPage={setCurrentPage}
|
|
currentPage={currentPage}
|
|
/>
|
|
</Container>}
|
|
</Box>}
|
|
</Box>
|
|
);
|
|
};
|
|
|
|
export default SubnetInner;
|