This commit is contained in:
YasinShaikh123
2024-11-04 15:50:41 +05:30

View File

@@ -9,6 +9,7 @@ import {
Text,
useColorMode,
useToast,
VStack,
} from "@chakra-ui/react";
import React, { useContext, useEffect, useState } from "react";
import { MdContentCopy } from "react-icons/md";
@@ -49,28 +50,25 @@ const TransactionDetails = () => {
<ToastBox status={"warn"} message={"Text copied to clipboard"} />
),
});
setIsLoading(false)
})
.catch((err) => {
console.error("Failed to copy text: ", err);
});
}
const [ dataArray, setDataArray ] = useState(null)
const [dataArray, setDataArray] = useState(null);
useEffect(() => {
if (data?.data?.pledgeInfo?.pledgeDetails) {
const dataArrayOfObject = Object?.entries(data?.data?.pledgeInfo?.pledgeDetails)?.map(([id, linkedIds]) => ({ id, linkedIds }));
setDataArray(dataArrayOfObject)
const dataArrayOfObject = Object?.entries(
data?.data?.pledgeInfo?.pledgeDetails
)?.map(([id, linkedIds]) => ({ id, linkedIds }));
setDataArray(dataArrayOfObject);
}
}, [data])
}, [data]);
console.log(dataArray);
// ===============================[ Table Header ]
const tableHeadRow = [
@@ -95,11 +93,49 @@ const TransactionDetails = () => {
),
}));
console.log(data?.data?.blockNumber);
const [ isLoadingURL, setIsLoading ] = useState(false)
const handleGenrateShortURL = async () => {
setIsLoading(true)
const fullUrl = window.location.href;
try {
const response = await fetch('https://rexplorerapi.azurewebsites.net/api/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);
}
};
console.log(data?.data?.blockNumber );
const fullUrl = window.location.href;
console.log(fullUrl);
return (
<>
@@ -110,17 +146,19 @@ console.log(fullUrl);
pb={"5rem"}
>
<Container maxW="6xl" pt={"6rem"}>
<HStack justifyContent={'space-between'} alignItems={'center'} mb={3}>
<Heading
mb={5}
fontSize={"sm"}
fontWeight={400}
as={'span'}
color={colorMode === "light" ? "#000" : "#fff"}
>
{data?.data?.transactionType === "SC" ? "Smart Contract Info":"Transaction Info"}
</Heading>
<Button size={'sm'}>Generate short url</Button>
<HStack justifyContent={"space-between"} alignItems={"center"} mb={3}>
<Heading
mb={5}
fontSize={"sm"}
fontWeight={400}
as={"span"}
color={colorMode === "light" ? "#000" : "#fff"}
>
{data?.data?.transactionType === "SC"
? "Smart Contract Info"
: "Transaction Info"}
</Heading>
<Button display={'flex'} gap={2} alignItems={'center'} rounded={'sm'} size={"sm"} isLoading={isLoadingURL} onClick={handleGenrateShortURL}><MdContentCopy/> Copy short url</Button>
</HStack>
<Box
boxShadow={colorMode === "light" && "md"}
@@ -132,7 +170,7 @@ console.log(fullUrl);
<Text color={"#969696"} fontSize={"sm"}>
Transaction ID
</Text>
<HStack fontSize={"sm"}>
<HStack fontSize={"sm"}>
<HStack
isTruncated
color={colorMode === "light" ? "gray.400" : "gray.100"}
@@ -162,17 +200,16 @@ console.log(fullUrl);
</HStack>
</HStack>
<Divider mt={4} mb={5} />
<Text
fontSize={"md"}
mb={2}
color={colorMode === "light" ? "#230A79" : "#fff"}
>
Token Information
</Text>
<Text
fontSize={"md"}
mb={2}
color={colorMode === "light" ? "#230A79" : "#fff"}
>
Token Information
</Text>
{data?.data?.scTokenHash && (
<Box
fontSize={"sm"}
@@ -205,9 +242,7 @@ console.log(fullUrl);
cursor={"pointer"}
>
<MdContentCopy
onClick={() =>
copyToClipboard(data?.data?.scTokenHash)
}
onClick={() => copyToClipboard(data?.data?.scTokenHash)}
/>
</Text>
</HStack>
@@ -253,46 +288,44 @@ console.log(fullUrl);
</Box>
)}
{data?.data?.transactionType === "SC" &&(
{data?.data?.transactionType === "SC" && (
<Box
fontSize={"sm"}
gap={4}
mb={2}
display={{ base: "block", md: "flex" }}
>
<Text color={colorMode === "light" ? "#0F0F0F" : "#E8E8E8"}>
Block number:
</Text>
<HStack
color={colorMode === "light" ? "#230A79" : "#B09AFF"}
textDecoration={"underline"}
fontSize={"sm"}
gap={4}
mb={2}
display={{ base: "block", md: "flex" }}
>
<Text
whiteSpace={"nowrap"} // Prevent the text from wrapping
textOverflow={"ellipsis"}
isTruncated
cursor={"pointer"}
>
{data?.data?.blockNumber}
{/* hello */}
<Text color={colorMode === "light" ? "#0F0F0F" : "#E8E8E8"}>
Block number:
</Text>
<Text
_hover={{ bg: "gray.50" }}
transition={"0.5s"}
rounded={"sm"}
p={1}
as={"span"}
ml={1}
cursor={"pointer"}
<HStack
color={colorMode === "light" ? "#230A79" : "#B09AFF"}
textDecoration={"underline"}
>
<MdContentCopy
onClick={() =>
copyToClipboard(data?.data?.blockNumber)
}
/>
</Text>
</HStack>
</Box>
<Text
whiteSpace={"nowrap"} // Prevent the text from wrapping
textOverflow={"ellipsis"}
isTruncated
cursor={"pointer"}
>
{data?.data?.blockNumber}
{/* hello */}
</Text>
<Text
_hover={{ bg: "gray.50" }}
transition={"0.5s"}
rounded={"sm"}
p={1}
as={"span"}
ml={1}
cursor={"pointer"}
>
<MdContentCopy
onClick={() => copyToClipboard(data?.data?.blockNumber)}
/>
</Text>
</HStack>
</Box>
)}
</Box>
@@ -422,150 +455,137 @@ console.log(fullUrl);
</>
)}
{data?.data?.creator&&<Box
{data?.data?.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" }}
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" }}
<Text
cursor={"pointer"}
maxW={{ base: "55%", md: "100%" }}
whiteSpace={"nowrap"} // Prevent the text from wrapping
textOverflow={"ellipsis"}
isTruncated
onClick={() => navigate(`/did-info/${data?.data?.creator}`)}
>
<Text
cursor={"pointer"}
maxW={{ base: "55%", md: "100%" }}
whiteSpace={"nowrap"} // Prevent the text from wrapping
textOverflow={"ellipsis"}
isTruncated
onClick={() => navigate(`/did-info/${data?.data?.creator}`)}
>
{data?.data?.creator}
</Text>
<Text
_hover={{ bg: "gray.50" }}
transition={"0.5s"}
rounded={"sm"}
p={1}
as={"span"}
ml={1}
cursor={"pointer"}
>
<MdContentCopy
onClick={() => copyToClipboard(data?.data?.creator)}
/>
</Text>
</HStack>
</Box>}
{data?.data?.creator}
</Text>
<Text
_hover={{ bg: "gray.50" }}
transition={"0.5s"}
rounded={"sm"}
p={1}
as={"span"}
ml={1}
cursor={"pointer"}
>
<MdContentCopy
onClick={() => copyToClipboard(data?.data?.creator)}
/>
</Text>
</HStack>
</HStack>
)}
{data?.data?.executor&&<Box
{data?.data?.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" }}
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" }}
<Text
cursor={"pointer"}
maxW={{ base: "55%", md: "100%" }}
whiteSpace={"nowrap"} // Prevent the text from wrapping
textOverflow={"ellipsis"}
isTruncated
onClick={() =>
navigate(`/did-info/${data?.data?.executor}`)
}
>
<Text
cursor={"pointer"}
maxW={{ base: "55%", md: "100%" }}
whiteSpace={"nowrap"} // Prevent the text from wrapping
textOverflow={"ellipsis"}
isTruncated
onClick={() => navigate(`/did-info/${data?.data?.executor}`)}
>
{data?.data?.executor}
</Text>
<Text
_hover={{ bg: "gray.50" }}
transition={"0.5s"}
rounded={"sm"}
p={1}
as={"span"}
ml={1}
cursor={"pointer"}
>
<MdContentCopy
onClick={() => copyToClipboard(data?.data?.executor)}
/>
</Text>
</HStack>
</Box>}
{data?.data?.executor}
</Text>
<Text
_hover={{ bg: "gray.50" }}
transition={"0.5s"}
rounded={"sm"}
p={1}
as={"span"}
ml={1}
cursor={"pointer"}
>
<MdContentCopy
onClick={() => copyToClipboard(data?.data?.executor)}
/>
</Text>
</HStack>
</HStack>
)}
{data?.data?.deployer&&<Box
{data?.data?.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" }}
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" }}
<Text
cursor={"pointer"}
maxW={{ base: "55%", md: "100%" }}
whiteSpace={"nowrap"} // Prevent the text from wrapping
textOverflow={"ellipsis"}
isTruncated
onClick={() =>
navigate(`/did-info/${data?.data?.deployer}`)
}
>
<Text
cursor={"pointer"}
maxW={{ base: "55%", md: "100%" }}
whiteSpace={"nowrap"} // Prevent the text from wrapping
textOverflow={"ellipsis"}
isTruncated
onClick={() => navigate(`/did-info/${data?.data?.deployer}`)}
>
{data?.data?.deployer}
</Text>
<Text
_hover={{ bg: "gray.50" }}
transition={"0.5s"}
rounded={"sm"}
p={1}
as={"span"}
ml={1}
cursor={"pointer"}
>
<MdContentCopy
onClick={() => copyToClipboard(data?.data?.deployer)}
/>
</Text>
</HStack>
</Box>}
{data?.data?.deployer}
</Text>
<Text
_hover={{ bg: "gray.50" }}
transition={"0.5s"}
rounded={"sm"}
p={1}
as={"span"}
ml={1}
cursor={"pointer"}
>
<MdContentCopy
onClick={() => copyToClipboard(data?.data?.deployer)}
/>
</Text>
</HStack>
</HStack>
)}
</Box>
<Box
boxShadow={colorMode === "light" && "md"}
bg={colorMode === "light" ? "#F3F3F3" : "#1D1D1D"}
@@ -589,23 +609,25 @@ console.log(fullUrl);
</Box>
)}
{data?.data?.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={rbtLogoOutline} />
{data?.data?.pledgeAmount}
</Text>
</Box>}
{data?.data?.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={rbtLogoOutline} />
{data?.data?.pledgeAmount}
</Text>
</Box>
)}
{data?.data?.timestamp && (
<Box>
<Text>Timestamp</Text>
@@ -615,6 +637,54 @@ console.log(fullUrl);
</Box>
)}
</HStack>
<VStack w={'100%'} alignItems={'flex-start'}>
<Box>
<Text
mb={2}
color={colorMode === "light" ? "#7B7B7B" : "#E8E8E8"}
>
Token Link:
</Text>
{data?.data?.tokenList?.map(({value,tokenId })=>
<Text
display={"flex"}
alignItems={"center"}
color={colorMode === "light" ? "#230A79" : "#B09AFF"}
textDecoration={"underline"}
>
<Text
whiteSpace={"nowrap"} // Prevent the text from wrapping
textOverflow={"ellipsis"}
isTruncated
fontSize={'sm'}
>
{tokenId}
</Text>
<Text
_hover={{ bg: "gray.50" }}
transition={"0.5s"}
rounded={"sm"}
p={1}
as={"span"}
ml={1}
cursor={"pointer"}
>
<MdContentCopy
onClick={() => copyToClipboard(tokenId)}
/>
</Text>
</Text>
)}
</Box>
</VStack>
</Box>
{extractedArray && (
@@ -625,7 +695,7 @@ console.log(fullUrl);
/>
)}
{dataArray&& <TransactionTable data={dataArray} />}
{dataArray && <TransactionTable data={dataArray} />}
</Container>
</Box>
<RelatedTransactions />