358 lines
11 KiB
JavaScript
358 lines
11 KiB
JavaScript
import {
|
|
Box,
|
|
Container,
|
|
Divider,
|
|
Heading,
|
|
HStack,
|
|
Image,
|
|
Text,
|
|
useColorMode,
|
|
useToast,
|
|
} from "@chakra-ui/react";
|
|
import React, { useContext, useEffect, useState } from "react";
|
|
import { MdContentCopy } from "react-icons/md";
|
|
import { Link, useNavigate, useParams } from "react-router-dom";
|
|
import RelatedTransactions from "../../components/RelatedTransactions/RelatedTransactions";
|
|
import bannerImage from "../../assets/images/bannerImg.png";
|
|
import ToastBox from "../../components/ToastBox";
|
|
import GlobalStateContext from "../../Contexts/GlobalStateContext";
|
|
import TransactionTable from "./TransactionTable";
|
|
import { useGetTransByIdQuery } from "../../Services/api.service";
|
|
// import rbtLogoOutline from "../../src/assets/images/rubix-filled.svg";
|
|
import rbtLogoOutline from "../../assets/images/rubix-filled.svg";
|
|
|
|
const TransactionDetails = () => {
|
|
const navigate = useNavigate();
|
|
const params = useParams();
|
|
const { colorMode } = useColorMode();
|
|
console.log(params?.id);
|
|
|
|
|
|
const {
|
|
data,
|
|
isLoading,
|
|
refetch,
|
|
errors,
|
|
} = useGetTransByIdQuery(params?.id);
|
|
|
|
console.log(data?.data);
|
|
|
|
|
|
// Scroll to top when component mounts or params change
|
|
useEffect(() => {
|
|
window.scrollTo({ top: 0, behavior: "smooth" }); // Scroll to top smoothly when params change
|
|
}, [params]);
|
|
|
|
const { transactions } = useContext(GlobalStateContext);
|
|
const filteredData = transactions?.find(
|
|
(item) => item?.description === params?.id
|
|
);
|
|
console.log(filteredData);
|
|
const toast = useToast();
|
|
|
|
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"} />
|
|
),
|
|
});
|
|
})
|
|
.catch((err) => {
|
|
console.error("Failed to copy text: ", err);
|
|
});
|
|
}
|
|
|
|
return (
|
|
<>
|
|
<Box
|
|
backgroundImage={colorMode !== "light" ? `url(${bannerImage})` : "none"}
|
|
backgroundSize="cover"
|
|
backgroundRepeat="no-repeat"
|
|
pb={"5rem"}
|
|
>
|
|
<Container maxW="6xl" pt={"6rem"}>
|
|
<Heading
|
|
mb={5}
|
|
fontSize={"sm"}
|
|
fontWeight={400}
|
|
color={colorMode === "light" ? "#000" : "#fff"}
|
|
>
|
|
Transaction Info
|
|
</Heading>
|
|
<Box
|
|
boxShadow={colorMode === "light" && "md"}
|
|
bg={colorMode === "light" ? "#F3F3F3" : "#1D1D1D"}
|
|
p={4}
|
|
mb={5}
|
|
rounded={6}
|
|
>
|
|
<Text color={"#969696"} fontSize={"sm"}>
|
|
Transaction ID
|
|
</Text>
|
|
<HStack fontSize={"sm"}>
|
|
<HStack
|
|
isTruncated
|
|
color={colorMode === "light" ? "gray.400" : "gray.100"}>
|
|
<Text
|
|
whiteSpace={"nowrap"} // Prevent the text from wrapping
|
|
textOverflow={"ellipsis"}
|
|
isTruncated
|
|
overflow={"hidden"}
|
|
cursor={"pointer"}
|
|
>
|
|
{data?.data?.transactionId}
|
|
</Text>
|
|
<Text
|
|
_hover={{ bg: "gray.50" }}
|
|
transition={"0.5s"}
|
|
rounded={"sm"}
|
|
p={1}
|
|
as={"span"}
|
|
ml={1}
|
|
cursor={"pointer"}
|
|
>
|
|
<MdContentCopy
|
|
onClick={() => copyToClipboard(filteredData.sender)}
|
|
/>
|
|
</Text>
|
|
</HStack>
|
|
</HStack>
|
|
<Divider mt={4} mb={5} />
|
|
<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>
|
|
<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={5}
|
|
rounded={6}
|
|
>
|
|
{data?.data?.netWorkType && <>
|
|
<Text
|
|
color={colorMode === "light" ? "#000" : "#fff"}
|
|
fontSize={"sm"}
|
|
>
|
|
Main net / Subnet Id
|
|
</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?.netWorkType}
|
|
</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
|
|
color={colorMode === "light" ? "#000" : "#fff"}
|
|
fontSize={"sm"}
|
|
>
|
|
Sender
|
|
</Text>
|
|
<HStack
|
|
fontSize={"sm"}
|
|
pb={3}
|
|
color={colorMode === "light" ? "#230A79" : "#B09AFF"}
|
|
>
|
|
<Text
|
|
onClick={() => navigate(`/did-info/${filteredData.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?.sender)}
|
|
/>
|
|
</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/${filteredData.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"}
|
|
bg={colorMode === "light" ? "#F3F3F3" : "#1D1D1D"}
|
|
p={4}
|
|
mb={0}
|
|
rounded={6}
|
|
>
|
|
<HStack fontSize={"sm"} gap={"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"}>{data?.data?.timestamp}</Text>
|
|
</Box>}
|
|
</HStack>
|
|
</Box>
|
|
<TransactionTable />
|
|
</Container>
|
|
</Box>
|
|
<RelatedTransactions />
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default TransactionDetails;
|