Transaction api
This commit is contained in:
YasinShaikh123
@@ -4,6 +4,7 @@ import {
|
||||
Divider,
|
||||
Heading,
|
||||
HStack,
|
||||
Image,
|
||||
Text,
|
||||
useColorMode,
|
||||
useToast,
|
||||
@@ -17,6 +18,8 @@ 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();
|
||||
@@ -32,7 +35,7 @@ const TransactionDetails = () => {
|
||||
errors,
|
||||
} = useGetTransByIdQuery(params?.id);
|
||||
|
||||
console.log(data?.data?.netWorkType);
|
||||
console.log(data?.data);
|
||||
|
||||
|
||||
// Scroll to top when component mounts or params change
|
||||
@@ -93,10 +96,7 @@ const TransactionDetails = () => {
|
||||
</Text>
|
||||
<HStack fontSize={"sm"}>
|
||||
<HStack
|
||||
whiteSpace={"nowrap"} // Prevent the text from wrapping
|
||||
textOverflow={"ellipsis"}
|
||||
isTruncated
|
||||
cursor={"pointer"}
|
||||
color={colorMode === "light" ? "gray.400" : "gray.100"}>
|
||||
<Text
|
||||
whiteSpace={"nowrap"} // Prevent the text from wrapping
|
||||
@@ -105,7 +105,7 @@ const TransactionDetails = () => {
|
||||
overflow={"hidden"}
|
||||
cursor={"pointer"}
|
||||
>
|
||||
{filteredData?.description}
|
||||
{data?.data?.transactionId}
|
||||
</Text>
|
||||
<Text
|
||||
_hover={{ bg: "gray.50" }}
|
||||
@@ -130,6 +130,7 @@ const TransactionDetails = () => {
|
||||
>
|
||||
Token Information
|
||||
</Text>
|
||||
{data?.data?.tokenList &&
|
||||
<Box
|
||||
fontSize={"sm"}
|
||||
gap={4}
|
||||
@@ -149,7 +150,7 @@ const TransactionDetails = () => {
|
||||
isTruncated
|
||||
cursor={"pointer"}
|
||||
>
|
||||
{filteredData?.sender}
|
||||
{data?.data?.tokenList}
|
||||
</Text>
|
||||
<Text
|
||||
_hover={{ bg: "gray.50" }}
|
||||
@@ -161,12 +162,12 @@ const TransactionDetails = () => {
|
||||
cursor={"pointer"}
|
||||
>
|
||||
<MdContentCopy
|
||||
onClick={() => copyToClipboard(filteredData.sender)}
|
||||
onClick={() => copyToClipboard(data?.data?.tokenList)}
|
||||
/>
|
||||
</Text>
|
||||
</HStack>
|
||||
</Box>
|
||||
<Box
|
||||
</Box>}
|
||||
{data?.data?.blockHash && <Box
|
||||
fontSize={"sm"}
|
||||
gap={4}
|
||||
mb={2}
|
||||
@@ -184,7 +185,7 @@ const TransactionDetails = () => {
|
||||
<Text
|
||||
whiteSpace={"nowrap"} // Prevent the text from wrapping
|
||||
textOverflow={"ellipsis"}
|
||||
isTruncated>{filteredData?.receiver}</Text>
|
||||
isTruncated>{data?.data?.blockHash}</Text>
|
||||
<Text
|
||||
_hover={{ bg: "gray.50" }}
|
||||
transition={"0.5s"}
|
||||
@@ -195,11 +196,11 @@ const TransactionDetails = () => {
|
||||
cursor={"pointer"}
|
||||
>
|
||||
<MdContentCopy
|
||||
onClick={() => copyToClipboard(filteredData.receiver)}
|
||||
onClick={() => copyToClipboard(data?.data?.blockHash)}
|
||||
/>
|
||||
</Text>
|
||||
</Text>
|
||||
</Box>
|
||||
</Box>}
|
||||
</Box>
|
||||
<Box
|
||||
boxShadow={colorMode === "light" && "md"}
|
||||
@@ -208,75 +209,80 @@ const TransactionDetails = () => {
|
||||
mb={5}
|
||||
rounded={6}
|
||||
>
|
||||
<Text
|
||||
color={colorMode === "light" ? "#000" : "#fff"}
|
||||
fontSize={"sm"}
|
||||
>
|
||||
Main net / Subnet Id
|
||||
</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?.netWorkType}
|
||||
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
|
||||
_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(filteredData.sender)}
|
||||
/>
|
||||
Sender
|
||||
</Text>
|
||||
</HStack>
|
||||
<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"}
|
||||
<HStack
|
||||
fontSize={"sm"}
|
||||
pb={3}
|
||||
color={colorMode === "light" ? "#230A79" : "#B09AFF"}
|
||||
>
|
||||
{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(filteredData.sender)}
|
||||
/>
|
||||
</Text>
|
||||
</HStack>
|
||||
<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"}
|
||||
@@ -308,10 +314,11 @@ const TransactionDetails = () => {
|
||||
cursor={"pointer"}
|
||||
>
|
||||
<MdContentCopy
|
||||
onClick={() => copyToClipboard(filteredData.receiver)}
|
||||
onClick={() => copyToClipboard(data?.data?.receiver)}
|
||||
/>
|
||||
</Text>
|
||||
</HStack>
|
||||
</>}
|
||||
</Box>
|
||||
<Box
|
||||
boxShadow={colorMode === "light" && "md"}
|
||||
@@ -321,14 +328,22 @@ const TransactionDetails = () => {
|
||||
rounded={6}
|
||||
>
|
||||
<HStack fontSize={"sm"} gap={"8rem"} mb={2}>
|
||||
<Box>
|
||||
{data?.data?.amount && <Box>
|
||||
<Text>Amount</Text>
|
||||
<Text color={"#A1A1A1"}>$ 100</Text>
|
||||
</Box>
|
||||
<Box>
|
||||
<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"}>18 hours ago, 29/07/2024</Text>
|
||||
</Box>
|
||||
<Text color={"#A1A1A1"}>{data?.data?.timestamp}</Text>
|
||||
</Box>}
|
||||
</HStack>
|
||||
</Box>
|
||||
<TransactionTable />
|
||||
|
||||
Reference in New Issue
Block a user