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

Update cards✅

Browse Source
This commit is contained in:
YasinShaikh123
2024-10-25 19:56:02 +05:30
parent 5f3be49ed0
commit 7f054b95f7
7 changed files with 351 additions and 350 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.g2sg6ddrvtg"
"revision": "0.clcjjkrum98"
}], {});
workbox.cleanupOutdatedCaches();
workbox.registerRoute(new workbox.NavigationRoute(workbox.createHandlerBoundToURL("index.html"), {

190
src/components/AmountCard/AmountCard.jsx
View File

@@ -50,6 +50,12 @@ const AmountCard = () => {
value: kpDetails?.data?.didCount,
icon: <FaFileAlt color="white" fontSize={"20px"} />,
},
{
label: "Total Supply",
value: kpDetails?.data?.totalSupply,
icon: <FaGlobe color="white" fontSize={"20px"} />,
display: { base: "block", md: "none" }, // Hidden on small, shown on medium and up
},
];
const statsDataFour = [
@@ -57,6 +63,7 @@ const AmountCard = () => {
label: "Total Supply",
value: kpDetails?.data?.totalSupply,
icon: <FaGlobe color="white" fontSize={"20px"} />,
display: { base: "none", md: "block" }, // Hidden on small, shown on medium and up
},
{
label: "Circulating Supply",
@@ -75,129 +82,122 @@ const AmountCard = () => {
},
];
return (
<VStack>
<Container maxW="4xl">
<Grid
mb={{base:"16px",md:"16px" }}
mb={{base:"10px",md:"16px" }}
// templateColumns="repeat(3, 2fr)"
templateColumns={{base :"repeat(1, 1fr)",md : "repeat(3, 2fr)" }}
gap={6}
templateColumns={{base :"repeat(2, 2fr)",md : "repeat(3, 2fr)" }}
gap={{base:4,md:6}}
bg={colorMode === "light" ? "light.100" : "black.900"}
justifyContent="center"
alignItems="center"
>
{statsData.map((item, index) => (
<GridItem
key={index}
bg={
colorMode === "light"
? "#230A7926"
: "linear-gradient(126.97deg, rgba(6, 11, 38, 0.74) 28.26%, rgba(26, 31, 55, 1.5) 91.2%)"
}
display={"flex"}
justifyContent={"space-between"}
alignItems={"center"}
p={3}
rounded={"lg"}
boxShadow={'md'}
>
<Box>
<Text
fontSize={"xs"}
color={colorMode === "light" ? "#230A79" : "#A0AEC0"}
>
{item.label}
</Text>
<Text
fontWeight={600}
fontSize={"sm"}
color={colorMode === "light" ? "#230A79" : "#fff"}
>
{item.value}
</Text>
</Box>
<Box
backgroundColor={"#4023A6"}
w={30}
h={30}
<Box display={item.display || "block"}>
<GridItem
key={index}
bg={
colorMode === "light"
? "#230A7926"
: "linear-gradient(126.97deg, rgba(6, 11, 38, 0.74) 28.26%, rgba(26, 31, 55, 1.5) 91.2%)"
}
display={"flex"}
justifyContent={"space-between"}
alignItems={"center"}
justifyContent={"center"}
rounded={10}
p={2}
p={3}
rounded={"lg"}
boxShadow={'md'}
>
{item.icon}
</Box>
</GridItem>
<Box>
<Text
fontSize={"xs"}
color={colorMode === "light" ? "#230A79" : "#A0AEC0"}
>
{item.label}
</Text>
<Text
fontWeight={600}
fontSize={"sm"}
color={colorMode === "light" ? "#230A79" : "#fff"}
>
{item.value}
</Text>
</Box>
<Box
backgroundColor={"#4023A6"}
w={30}
h={30}
display={"flex"}
alignItems={"center"}
justifyContent={"center"}
rounded={10}
p={2}
>
{item.icon}
</Box>
</GridItem>
</Box>
))}
</Grid>
</Container>
<Container maxW="6xl">
<Grid
// templateColumns="repeat(4, 2fr)"
templateColumns={{base:"repeat(1, 2fr)",md :"repeat(4, 2fr)"}}
gap={6}
templateColumns={{base:"repeat(2, 2fr)",md :"repeat(4, 2fr)"}}
gap={{base:4,md:6}}
bg={colorMode === "light" ? "light.100" : "black.900"}
justifyContent="center"
alignItems="center"
>
{statsDataFour.map((item, index) => (
<GridItem
key={index}
bg={
colorMode === "light"
? "#230A7926"
: "linear-gradient(126.97deg, rgba(6, 11, 38, 0.74) 28.26%, rgba(26, 31, 55, 1.5) 91.2%)"
}
display={"flex"}
justifyContent={"space-between"}
alignItems={"center"}
p={3}
rounded={"lg"}
boxShadow={'md'}
>
<Box>
<Text
fontSize={"xs"}
color={colorMode === "light" ? "#230A79" : "#A0AEC0"}
>
{item.label}
</Text>
<Text
fontSize={"sm"}
fontWeight={600}
color={colorMode === "light" ? "#230A79" : "#fff"}
>
{item.value}
</Text>
</Box>
<Box
backgroundColor={"#4023A6"}
w={30}
h={30}
<Box display={item.display || "block"}>
<GridItem
key={index}
bg={
colorMode === "light"
? "#230A7926"
: "linear-gradient(126.97deg, rgba(6, 11, 38, 0.74) 28.26%, rgba(26, 31, 55, 1.5) 91.2%)"
}
display={"flex"}
justifyContent={"space-between"}
alignItems={"center"}
justifyContent={"center"}
rounded={10}
p={2}
p={3}
rounded={"lg"}
boxShadow={'md'}
>
{item.icon}
</Box>
</GridItem>
<Box>
<Text
fontSize={"xs"}
color={colorMode === "light" ? "#230A79" : "#A0AEC0"}
>
{item.label}
</Text>
<Text
fontSize={"sm"}
fontWeight={600}
color={colorMode === "light" ? "#230A79" : "#fff"}
>
{item.value}
</Text>
</Box>
<Box
backgroundColor={"#4023A6"}
w={30}
h={30}
display={"flex"}
alignItems={"center"}
justifyContent={"center"}
rounded={10}
p={2}
>
{item.icon}
</Box>
</GridItem>
</Box>
))}
</Grid>
</Container>

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

@@ -244,7 +244,7 @@ const LineChart = () => {
mt={{ base: 2, md: 0 }}
fontSize={{ base: "sm", md: "md" }}
fontWeight={500}
mb={{ base: "0px", md: "0px" }}
mb={{ base: "5px", md: "0px" }}
px={{ base: "8px", md: "0px" }}
>
Transaction History

20
src/pages/MainNet.jsx
View File

@@ -144,14 +144,9 @@ const MainNet = () => {
>
Main Net - Overview
</Heading>
{/* <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> */}
<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"}>{mainNetData?.data?.tvl} RBT</Text>
</HStack>
</Container>
<Box>
<Container maxW="6xl">
@@ -184,11 +179,10 @@ const MainNet = () => {
>
<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"}
bg={colorMode==="light"?'#fff':"#434147"}
p={1.5}
boxSize={7}
rounded={"full"}
as={HiOutlineRefresh}
animation={
isRotating || isMainNetDataLoading

6
src/pages/SubnetId.jsx
View File

@@ -10,6 +10,7 @@ import {
Input,
InputGroup,
Select,
Stack,
Text,
useColorMode,
VStack,
@@ -22,6 +23,7 @@ import { useNavigate, useParams } from "react-router-dom";
import Pagination from "../components/Pagination";
import { useGetSubnetAllQuery, useGetSubnetCountQuery } from "../Services/api.service";
import { BiSearch, BiSearchAlt } from "react-icons/bi";
import { MdArrowRight } from "react-icons/md";
const SubnetId = () => {
const { subnetId } = useContext(GlobalStateContext);
@@ -83,6 +85,10 @@ const SubnetId = () => {
<Box color={colorMode === "light"? "#230A79" : "#B09AFF"} onClick={() =>
navigate(`/subnet-id-overview/${item?.networkId}`)}>
{item?.networkId}
<HStack fontSize={"xs"} mt={1} w={"280px"} justifyContent={"space-between"}>
<Text display={"flex"} alignItems={"center"}>Tvl<MdArrowRight /> {item?.tvl} (RBT)</Text>
<Text display={"flex"} alignItems={"center"}>Count<MdArrowRight />{item?.transctionsCount}</Text>
</HStack>
</Box>
),
"Network Name": item?.networkName,

14
src/pages/SubnetIdOverview.jsx
View File

@@ -19,8 +19,6 @@ const SubnetInner = () => {
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
@@ -50,7 +48,6 @@ const SubnetInner = () => {
});
}
const {
data,
isLoading,
@@ -61,13 +58,10 @@ const SubnetInner = () => {
pageSize: pageSize,
})
useEffect(() => {
setTotalItems(data?.data?.totalCount);
}, [data]);
const handleRefreshClick = () => {
setIsRotating(true); // Start rotation
refetch();
@@ -78,8 +72,6 @@ const SubnetInner = () => {
setRelativeRefreshTime("Just now"); // Reset relative time to "Just now"
};
useEffect(() => {
// Update relative time every minute
const intervalId = setInterval(() => {
@@ -104,7 +96,6 @@ const SubnetInner = () => {
};
return (
<Box minH={"100vh"} p={"6rem 0 4rem 0"} backgroundImage={colorMode !== "light" ? `url(${bannerImage})` : "none"} position={"relative"} backgroundSize="contain" backgroundRepeat="no-repeat">
<Container
@@ -117,6 +108,9 @@ const SubnetInner = () => {
<Heading fontSize={"md"} fontWeight={400} color={colorMode === "light" ? "#000" : "#fff"} mb={{base :"10px" ,md : "0px"}}>
Subnet ID - {params?.id}
</Heading>
<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"}>{data?.data?.tvl} RBT</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">
@@ -146,8 +140,6 @@ const SubnetInner = () => {
<Text color={"#fff"}>Transactions</Text>
</GridItem>
<Box
as="span"
cursor={"pointer"}

467
src/pages/Transaction/TransactionDetails.jsx
View File

@@ -27,12 +27,7 @@ const TransactionDetails = () => {
const navigate = useNavigate();
const params = useParams();
const { colorMode } = useColorMode();
const {
data,
isLoading,
refetch,
errors,
} = useGetTransByIdQuery(params?.id);
const { data, isLoading, refetch, errors } = useGetTransByIdQuery(params?.id);
// Scroll to top when component mounts or params change
useEffect(() => {
window.scrollTo({ top: 0, behavior: "smooth" }); // Scroll to top smoothly when params change
@@ -58,14 +53,13 @@ const TransactionDetails = () => {
console.error("Failed to copy text: ", err);
});
}
console.log(data?.data?.quorumList);
console.log("Bug", data);
// ===============================[ Table Header ]
const tableHeadRow = [
// "Sr. no",
"Quorum List"];
// "Sr. no",
"Quorum List",
];
// const extractedArray = reportsHistory.map((item)=>({ }))
const extractedArray = data?.data?.quorumList?.map((item, index) => ({
@@ -112,15 +106,16 @@ const TransactionDetails = () => {
Transaction ID
</Text>
<HStack fontSize={"sm"}>
<HStack
isTruncated
color={colorMode === "light" ? "gray.400" : "gray.100"}>
<HStack
isTruncated
color={colorMode === "light" ? "gray.400" : "gray.100"}
>
<Text
whiteSpace={"nowrap"} // Prevent the text from wrapping
textOverflow={"ellipsis"}
isTruncated
overflow={"hidden"}
cursor={"pointer"}
whiteSpace={"nowrap"} // Prevent the text from wrapping
textOverflow={"ellipsis"}
isTruncated
overflow={"hidden"}
cursor={"pointer"}
>
{data?.data?.transactionId}
</Text>
@@ -140,206 +135,221 @@ const TransactionDetails = () => {
</HStack>
</HStack>
<Divider mt={4} mb={5} />
{data?.data?.tokenList || data?.data?.blockHash&&<Text
fontSize={"md"}
mb={2}
color={colorMode === "light" ? "#230A79" : "#fff"}
>
Token Information
</Text>}
{data?.data?.tokenList &&
<Box
fontSize={"sm"}
gap={4}
mb={2}
display={{ base: "block", md: "flex" }}
>
<Text color={colorMode === "light" ? "#0F0F0F" : "#E8E8E8"}>
Token ID :
</Text>
<HStack
color={colorMode === "light" ? "#230A79" : "#B09AFF"}
textDecoration={"underline"}
>
<Text
whiteSpace={"nowrap"} // Prevent the text from wrapping
textOverflow={"ellipsis"}
isTruncated
cursor={"pointer"}
>
{data?.data?.tokenList}
</Text>
<Text
_hover={{ bg: "gray.50" }}
transition={"0.5s"}
rounded={"sm"}
p={1}
as={"span"}
ml={1}
cursor={"pointer"}
>
<MdContentCopy
onClick={() => copyToClipboard(data?.data?.tokenList)}
/>
</Text>
</HStack>
</Box>}
{data?.data?.blockHash && <Box
fontSize={"sm"}
gap={4}
mb={2}
display={{ base: "block", md: "flex" }}
>
<Text color={colorMode === "light" ? "#0F0F0F" : "#E8E8E8"}>
Block ID :
</Text>
{data?.data["tokenList"] && data?.data?.blockHash && (
<Text
display={"flex"}
alignItems={"center"}
color={colorMode === "light" ? "#230A79" : "#B09AFF"}
textDecoration={"underline"}
fontSize={"md"}
mb={2}
color={colorMode === "light" ? "#230A79" : "#fff"}
>
<Text
whiteSpace={"nowrap"} // Prevent the text from wrapping
textOverflow={"ellipsis"}
isTruncated>{data?.data?.blockHash}</Text>
<Text
_hover={{ bg: "gray.50" }}
transition={"0.5s"}
rounded={"sm"}
p={1}
as={"span"}
ml={1}
cursor={"pointer"}
>
<MdContentCopy
onClick={() => copyToClipboard(data?.data?.blockHash)}
/>
</Text>
Token Information
</Text>
</Box>}
)}
{data?.data?.tokenList && (
<Box
fontSize={"sm"}
gap={4}
mb={2}
display={{ base: "block", md: "flex" }}
>
<Text color={colorMode === "light" ? "#0F0F0F" : "#E8E8E8"}>
Token ID :
</Text>
<HStack
color={colorMode === "light" ? "#230A79" : "#B09AFF"}
textDecoration={"underline"}
>
<Text
whiteSpace={"nowrap"} // Prevent the text from wrapping
textOverflow={"ellipsis"}
isTruncated
cursor={"pointer"}
>
{data?.data?.tokenList["0"].tokenId}
</Text>
<Text
_hover={{ bg: "gray.50" }}
transition={"0.5s"}
rounded={"sm"}
p={1}
as={"span"}
ml={1}
cursor={"pointer"}
>
<MdContentCopy
onClick={() =>
copyToClipboard(data?.data?.tokenList["0"].tokenId)
}
/>
</Text>
</HStack>
</Box>
)}
{data?.data?.blockHash && (
<Box
fontSize={"sm"}
gap={4}
mb={2}
display={{ base: "block", md: "flex" }}
>
<Text color={colorMode === "light" ? "#0F0F0F" : "#E8E8E8"}>
Block ID :
</Text>
<Text
display={"flex"}
alignItems={"center"}
color={colorMode === "light" ? "#230A79" : "#B09AFF"}
textDecoration={"underline"}
>
<Text
whiteSpace={"nowrap"} // Prevent the text from wrapping
textOverflow={"ellipsis"}
isTruncated
>
{data?.data?.blockHash}
</Text>
<Text
_hover={{ bg: "gray.50" }}
transition={"0.5s"}
rounded={"sm"}
p={1}
as={"span"}
ml={1}
cursor={"pointer"}
>
<MdContentCopy
onClick={() => copyToClipboard(data?.data?.blockHash)}
/>
</Text>
</Text>
</Box>
)}
</Box>
<Box
boxShadow={colorMode === "light" && "md"}
bg={colorMode === "light" ? "#F3F3F3" : "#1D1D1D"}
p={4}
mb={extractedArray&&5}
mb={extractedArray && 5}
rounded={6}
>
{data?.data?.netWorkType && <>
<Text
color={colorMode === "light" ? "#000" : "#fff"}
fontSize={"sm"}
>
{data?.data?.netWorkType}
</Text>
<HStack
fontSize={"sm"}
pb={3}
color={colorMode === "light" ? "#230A79" : "#B09AFF"}
>
{data?.data?.netWorkType && (
<>
<Text
fontWeight={"inherit"}
whiteSpace={"nowrap"} // Prevent the text from wrapping
textOverflow={"ellipsis"}
isTruncated
cursor={"pointer"}
color={colorMode === "light" ? "#000" : "#fff"}
fontSize={"sm"}
>
{data?.data?.subNetworkId}
{data?.data?.netWorkType}
</Text>
<HStack
fontSize={"sm"}
pb={3}
color={colorMode === "light" ? "#230A79" : "#B09AFF"}
>
<Text
fontWeight={"inherit"}
whiteSpace={"nowrap"} // Prevent the text from wrapping
textOverflow={"ellipsis"}
isTruncated
cursor={"pointer"}
>
{data?.data?.subNetworkId}
</Text>
<Text
_hover={{ bg: "gray.50" }}
transition={"0.5s"}
rounded={"sm"}
p={1}
as={"span"}
ml={1}
cursor={"pointer"}
>
<MdContentCopy
onClick={() => copyToClipboard(data?.data?.netWorkType)}
/>
</Text>
</HStack>
</>
)}
{data?.data?.sender && (
<>
<Text
_hover={{ bg: "gray.50" }}
transition={"0.5s"}
rounded={"sm"}
p={1}
as={"span"}
ml={1}
cursor={"pointer"}
color={colorMode === "light" ? "#000" : "#fff"}
fontSize={"sm"}
>
<MdContentCopy
onClick={() => copyToClipboard(data?.data?.netWorkType)}
/>
Sender
</Text>
</HStack>
</>}
{data?.data?.sender && <>
<Text
color={colorMode === "light" ? "#000" : "#fff"}
fontSize={"sm"}
>
Sender
</Text>
<HStack
fontSize={"sm"}
pb={3}
color={colorMode === "light" ? "#230A79" : "#B09AFF"}
>
<HStack
fontSize={"sm"}
pb={3}
color={colorMode === "light" ? "#230A79" : "#B09AFF"}
>
<Text
onClick={() => navigate(`/did-info/${data?.data?.sender}`)}
fontWeight={"inherit"}
whiteSpace={"nowrap"} // Prevent the text from wrapping
textOverflow={"ellipsis"}
isTruncated
cursor={"pointer"}
>
{data?.data?.sender}
</Text>
<Text
_hover={{ bg: "gray.50" }}
transition={"0.5s"}
rounded={"sm"}
p={1}
as={"span"}
ml={1}
cursor={"pointer"}
>
<MdContentCopy
onClick={() => copyToClipboard(data?.data?.receiver)}
/>
</Text>
</HStack>
</>
)}
{data?.data?.receiver && (
<>
<Text
onClick={() => navigate(`/did-info/${data?.data?.sender}`)}
fontWeight={"inherit"}
whiteSpace={"nowrap"} // Prevent the text from wrapping
textOverflow={"ellipsis"}
isTruncated
cursor={"pointer"}
color={colorMode === "light" ? "#000" : "#fff"}
fontSize={"sm"}
>
{data?.data?.sender}
Receiver
</Text>
<Text
_hover={{ bg: "gray.50" }}
transition={"0.5s"}
rounded={"sm"}
p={1}
as={"span"}
ml={1}
cursor={"pointer"}
<HStack
fontSize={"sm"}
pb={3}
color={colorMode === "light" ? "#230A79" : "#B09AFF"}
>
<MdContentCopy
onClick={() => copyToClipboard(data?.data?.receiver)}
/>
</Text>
</HStack>
</>}
{data?.data?.receiver && <>
<Text
color={colorMode === "light" ? "#000" : "#fff"}
fontSize={"sm"}
>
Receiver
</Text>
<HStack
fontSize={"sm"}
pb={3}
color={colorMode === "light" ? "#230A79" : "#B09AFF"}
>
<Text
onClick={() => navigate(`/did-info/${data?.data?.receiver}`)}
fontWeight={"inherit"}
whiteSpace={"nowrap"} // Prevent the text from wrapping
textOverflow={"ellipsis"}
isTruncated
cursor={"pointer"}
>
{data?.data?.receiver}
</Text>
<Text
_hover={{ bg: "gray.50" }}
transition={"0.5s"}
rounded={"sm"}
p={1}
as={"span"}
ml={1}
cursor={"pointer"}
>
<MdContentCopy
onClick={() => copyToClipboard(data?.data?.receiver)}
/>
</Text>
</HStack>
</>}
<Text
onClick={() =>
navigate(`/did-info/${data?.data?.receiver}`)
}
fontWeight={"inherit"}
whiteSpace={"nowrap"} // Prevent the text from wrapping
textOverflow={"ellipsis"}
isTruncated
cursor={"pointer"}
>
{data?.data?.receiver}
</Text>
<Text
_hover={{ bg: "gray.50" }}
transition={"0.5s"}
rounded={"sm"}
p={1}
as={"span"}
ml={1}
cursor={"pointer"}
>
<MdContentCopy
onClick={() => copyToClipboard(data?.data?.receiver)}
/>
</Text>
</HStack>
</>
)}
</Box>
<Box
boxShadow={colorMode === "light" && "md"}
@@ -347,41 +357,40 @@ const TransactionDetails = () => {
p={4}
mb={5}
rounded={6}
>
<HStack fontSize={"sm"} gap={{base:"4rem",md:"8rem"}} mb={2}>
{data?.data?.amount && <Box>
<Text>Amount</Text>
<Text
display={"flex"}
gap={2}
alignItems={"center"}
color={colorMode === "light" ? "#230A79" : "#B09AFF"}
>
<Image w={4} src={rbtLogoOutline} />
{data?.data?.amount}
</Text>
</Box>}
{data?.data?.timestamp && <Box>
<Text>Timestamp</Text>
<Text color={"#A1A1A1"}>{formatUTCToDDMMYYHHMMSS(data?.data?.timestamp)}</Text>
</Box>}
<HStack fontSize={"sm"} gap={{ base: "4rem", md: "8rem" }} mb={2}>
{data?.data?.amount && (
<Box>
<Text>Amount</Text>
<Text
display={"flex"}
gap={2}
alignItems={"center"}
color={colorMode === "light" ? "#230A79" : "#B09AFF"}
>
<Image w={4} src={rbtLogoOutline} />
{data?.data?.amount}
</Text>
</Box>
)}
{data?.data?.timestamp && (
<Box>
<Text>Timestamp</Text>
<Text color={"#A1A1A1"}>
{formatUTCToDDMMYYHHMMSS(data?.data?.timestamp)}
</Text>
</Box>
)}
</HStack>
</Box>
{extractedArray&&<NormalTable
tableHeadRow={tableHeadRow}
data={extractedArray}
isLoading={isLoading}
/>}
{extractedArray && (
<NormalTable
tableHeadRow={tableHeadRow}
data={extractedArray}
isLoading={isLoading}
/>
)}
<TransactionTable />
</Container>