kopia lustrzana https://github.com/bugout-dev/moonstream
fix StreamEntry
yhtiyar
rodzic
f4b07715ef
commit
ae8f789ca3
|
|
@ -9,94 +9,330 @@ import { useQuery } from "react-query";
|
||||||
const StreamEntry = ({ entry, filterCallback, filterConstants }) => {
|
const StreamEntry = ({ entry, filterCallback, filterConstants }) => {
|
||||||
const ui = useContext(UIContext);
|
const ui = useContext(UIContext);
|
||||||
const router = useRouter();
|
const router = useRouter();
|
||||||
useQuery(["currentTransaction", entry.hash], ()=> entry)
|
const [copyString, setCopyString] = useState(false);
|
||||||
|
const { onCopy, hasCopied } = useClipboard(copyString, 1);
|
||||||
|
const toast = useToast();
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (hasCopied && copyString) {
|
||||||
|
toast("Copied to clipboard", "success");
|
||||||
|
setCopyString(false);
|
||||||
|
} else if (copyString) {
|
||||||
|
onCopy();
|
||||||
|
}
|
||||||
|
}, [copyString, onCopy, hasCopied, toast]);
|
||||||
const handleViewClicked = (entryId) => {
|
const handleViewClicked = (entryId) => {
|
||||||
ui.setEntryId(entryId);
|
ui.setEntryId(entryId);
|
||||||
ui.setEntriesViewMode("entry");
|
ui.setEntriesViewMode("entry");
|
||||||
|
|
||||||
router.push({
|
router.push({
|
||||||
pathname: `/stream/${entry.hash}`,
|
pathname: `/stream/${entry.hash}`,
|
||||||
query: router.query,
|
query: router.query,
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
const [showFullView] = useMediaQuery(["(min-width: 420px)"]);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Flex
|
<Flex
|
||||||
px={6}
|
p={0}
|
||||||
m={1}
|
m={1}
|
||||||
mr={2}
|
mr={2}
|
||||||
maxH="3rem"
|
|
||||||
borderRadius="md"
|
borderRadius="md"
|
||||||
borderTop="1px"
|
borderTop="1px"
|
||||||
bgColor="gray.100"
|
bgColor="gray.100"
|
||||||
borderColor="white.300"
|
borderColor="white.300"
|
||||||
boxSizing="border-box"
|
|
||||||
transition="0.1s"
|
transition="0.1s"
|
||||||
_hover={{ bg: "secondary.200" }}
|
_hover={{ bg: "secondary.200" }}
|
||||||
flexBasis="100px"
|
flexBasis="50px"
|
||||||
flexGrow={1}
|
flexGrow={1}
|
||||||
h="3rem"
|
|
||||||
direction="row"
|
direction="row"
|
||||||
justifySelf="center"
|
justifySelf="center"
|
||||||
justifyContent="normal"
|
justifyContent="normal"
|
||||||
alignItems="baseline"
|
alignItems="baseline"
|
||||||
boxShadow="lg"
|
boxShadow="lg"
|
||||||
|
minH="fit-content"
|
||||||
>
|
>
|
||||||
<Flex flexGrow={1} placeSelf="center">
|
<Stack
|
||||||
<Tag
|
direction="row"
|
||||||
alignSelf="center"
|
flexBasis="100px"
|
||||||
colorScheme="secondary"
|
flexGrow={1}
|
||||||
variant="subtle"
|
minW="100px"
|
||||||
onClick={() =>
|
h="100%"
|
||||||
filterCallback({
|
spacing={0}
|
||||||
direction: filterConstants.DIRECTIONS.SOURCE,
|
>
|
||||||
type: filterConstants.FILTER_TYPES.ADDRESS,
|
{true && (
|
||||||
value: entry.from_address,
|
<Stack
|
||||||
conditon: filterConstants.CONDITION.EQUAL,
|
my={0}
|
||||||
})
|
direction="column"
|
||||||
}
|
flexBasis="10px"
|
||||||
>
|
flexGrow={1}
|
||||||
{"From:"}
|
borderWidth="2px"
|
||||||
{`${entry.from_label} - ${entry.from_address}`}
|
borderLeftRadius="md"
|
||||||
</Tag>{" "}
|
borderColor="gray.600"
|
||||||
<Tag
|
spacing={0}
|
||||||
alignSelf="center"
|
h="fit-content"
|
||||||
colorScheme="secondary"
|
minH="fit-content"
|
||||||
variant="subtle"
|
overflowX="hidden"
|
||||||
onClick={() =>
|
>
|
||||||
filterCallback({
|
<Stack
|
||||||
direction: filterConstants.DIRECTIONS.DESTINATION,
|
className="title"
|
||||||
type: filterConstants.FILTER_TYPES.ADDRESS,
|
direction="row"
|
||||||
value: entry.to_address,
|
w="100%"
|
||||||
conditon: filterConstants.CONDITION.EQUAL,
|
h="1.6rem"
|
||||||
})
|
minH="1.6rem"
|
||||||
}
|
textAlign="center"
|
||||||
>
|
spacing={0}
|
||||||
{"To:"}
|
alignItems="center"
|
||||||
{`${entry.to_label} - ${entry.to_address}`}
|
bgColor="brand.300"
|
||||||
</Tag>{" "}
|
>
|
||||||
<Tag alignSelf="center" colorScheme="secondary" variant="subtle">
|
<Image
|
||||||
Gas Price: {entry.gasPrice}
|
boxSize="16px"
|
||||||
</Tag>
|
src={
|
||||||
<Tag colorScheme="secondary" variant="subtle">
|
"https://upload.wikimedia.org/wikipedia/commons/0/05/Ethereum_logo_2014.svg"
|
||||||
Gas: {entry.gas}
|
}
|
||||||
</Tag>
|
/>
|
||||||
<Tag colorScheme="secondary" variant="subtle">
|
<Heading size="xs">Ethereum blockhain</Heading>
|
||||||
Value: {entry.value}
|
</Stack>
|
||||||
</Tag>
|
<Stack
|
||||||
</Flex>
|
className="CardAddressesRow"
|
||||||
|
direction={showFullView ? "row" : "column"}
|
||||||
<Text opacity="0.5" fontSize="xs" alignSelf="baseline">
|
w="100%"
|
||||||
{moment(entry.created_at).format("DD MMM, YYYY, h:mm:ss")}{" "}
|
h={showFullView ? "1.6rem" : "3.2rem"}
|
||||||
</Text>
|
minH="1.6rem"
|
||||||
<IconButton
|
textAlign="center"
|
||||||
p={0}
|
spacing={0}
|
||||||
variant="ghost"
|
alignItems="center"
|
||||||
boxSize="32px"
|
>
|
||||||
colorScheme="primary"
|
<Stack
|
||||||
icon={<ViewIcon />}
|
overflow="hidden"
|
||||||
onClick={() => { handleViewClicked(entry)}}
|
textOverflow="ellipsis"
|
||||||
/>
|
whiteSpace="nowrap"
|
||||||
|
direction="row"
|
||||||
|
fontSize="sm"
|
||||||
|
fontWeight="600"
|
||||||
|
minw="min-content"
|
||||||
|
w={showFullView ? "calc(50%)" : "calc(100%)"}
|
||||||
|
h="100%"
|
||||||
|
borderColor="gray.1200"
|
||||||
|
borderRightWidth={showFullView ? "1px" : "0px"}
|
||||||
|
placeContent="center"
|
||||||
|
spacing={0}
|
||||||
|
>
|
||||||
|
<Text
|
||||||
|
bgColor="secondary.500"
|
||||||
|
h="100%"
|
||||||
|
fontSize="sm"
|
||||||
|
py="2px"
|
||||||
|
px={2}
|
||||||
|
w={showFullView ? null : "120px"}
|
||||||
|
>
|
||||||
|
From:
|
||||||
|
</Text>
|
||||||
|
<Tooltip label={entry.from_address} aria-label="From:">
|
||||||
|
<Text
|
||||||
|
mx={0}
|
||||||
|
py="2px"
|
||||||
|
fontSize="sm"
|
||||||
|
bgColor="secondary.200"
|
||||||
|
isTruncated
|
||||||
|
w="calc(100%)"
|
||||||
|
h="100%"
|
||||||
|
onClick={() => setCopyString(entry.from_address)}
|
||||||
|
>
|
||||||
|
{entry.from_label ?? entry.from_address}
|
||||||
|
</Text>
|
||||||
|
</Tooltip>
|
||||||
|
</Stack>
|
||||||
|
<Stack
|
||||||
|
overflow="hidden"
|
||||||
|
textOverflow="ellipsis"
|
||||||
|
whiteSpace="nowrap"
|
||||||
|
direction="row"
|
||||||
|
fontSize="sm"
|
||||||
|
fontWeight="600"
|
||||||
|
minw="min-content"
|
||||||
|
w={showFullView ? "calc(50%)" : "calc(100%)"}
|
||||||
|
h="100%"
|
||||||
|
spacing={0}
|
||||||
|
>
|
||||||
|
<Text
|
||||||
|
bgColor="primary.500"
|
||||||
|
h="100%"
|
||||||
|
color="white"
|
||||||
|
py={1}
|
||||||
|
px={2}
|
||||||
|
w={showFullView ? null : "120px"}
|
||||||
|
>
|
||||||
|
To:
|
||||||
|
</Text>
|
||||||
|
<Tooltip label={entry.to_address} aria-label="From:">
|
||||||
|
<Text
|
||||||
|
bgColor="primary.200"
|
||||||
|
isTruncated
|
||||||
|
w="calc(100%)"
|
||||||
|
h="100%"
|
||||||
|
onClick={() => setCopyString(entry.to_address)}
|
||||||
|
>
|
||||||
|
{entry.to_label ?? entry.to_address}
|
||||||
|
</Text>
|
||||||
|
</Tooltip>
|
||||||
|
</Stack>
|
||||||
|
</Stack>
|
||||||
|
<Stack
|
||||||
|
className="ValuesRow"
|
||||||
|
direction={showFullView ? "row" : "column"}
|
||||||
|
alignItems={showFullView ? "center" : "flex-start"}
|
||||||
|
placeContent="space-evenly"
|
||||||
|
// h="1rem"
|
||||||
|
w="100%"
|
||||||
|
// h="1.6rem"
|
||||||
|
minH="2rem"
|
||||||
|
textAlign="center"
|
||||||
|
spacing={0}
|
||||||
|
bgColor="primimary.50"
|
||||||
|
>
|
||||||
|
<Stack
|
||||||
|
direction="row"
|
||||||
|
fontSize="sm"
|
||||||
|
fontWeight="600"
|
||||||
|
borderColor="gray.1200"
|
||||||
|
borderRightWidth={showFullView ? "1px" : "0px"}
|
||||||
|
placeContent="center"
|
||||||
|
spacing={0}
|
||||||
|
flexBasis="10px"
|
||||||
|
flexGrow={1}
|
||||||
|
w="100%"
|
||||||
|
>
|
||||||
|
<Text
|
||||||
|
h="100%"
|
||||||
|
fontSize="sm"
|
||||||
|
py="2px"
|
||||||
|
px={2}
|
||||||
|
whiteSpace="nowrap"
|
||||||
|
w={showFullView ? null : "120px"}
|
||||||
|
textAlign="justify"
|
||||||
|
>
|
||||||
|
Gas Price:
|
||||||
|
</Text>
|
||||||
|
<Tooltip label={entry.gasPrice} aria-label="Gas Price:">
|
||||||
|
<Text
|
||||||
|
mx={0}
|
||||||
|
py="2px"
|
||||||
|
fontSize="sm"
|
||||||
|
w="calc(100%)"
|
||||||
|
h="100%"
|
||||||
|
onClick={() => setCopyString(entry.gasPrice)}
|
||||||
|
>
|
||||||
|
{entry.gasPrice}
|
||||||
|
</Text>
|
||||||
|
</Tooltip>
|
||||||
|
</Stack>
|
||||||
|
<Stack
|
||||||
|
direction="row"
|
||||||
|
fontSize="sm"
|
||||||
|
fontWeight="600"
|
||||||
|
borderColor="gray.1200"
|
||||||
|
borderRightWidth={showFullView ? "1px" : "0px"}
|
||||||
|
placeContent="center"
|
||||||
|
spacing={0}
|
||||||
|
flexBasis="10px"
|
||||||
|
flexGrow={1}
|
||||||
|
w="100%"
|
||||||
|
>
|
||||||
|
<Text
|
||||||
|
w={showFullView ? null : "120px"}
|
||||||
|
h="100%"
|
||||||
|
fontSize="sm"
|
||||||
|
py="2px"
|
||||||
|
px={2}
|
||||||
|
textAlign="justify"
|
||||||
|
>
|
||||||
|
Gas:
|
||||||
|
</Text>
|
||||||
|
<Tooltip label={entry.gas} aria-label="Gas:">
|
||||||
|
<Text
|
||||||
|
mx={0}
|
||||||
|
py="2px"
|
||||||
|
fontSize="sm"
|
||||||
|
w="calc(100%)"
|
||||||
|
h="100%"
|
||||||
|
onClick={() => setCopyString(entry.gas)}
|
||||||
|
>
|
||||||
|
{entry.gas}
|
||||||
|
</Text>
|
||||||
|
</Tooltip>
|
||||||
|
</Stack>
|
||||||
|
<Stack
|
||||||
|
direction="row"
|
||||||
|
fontSize="sm"
|
||||||
|
fontWeight="600"
|
||||||
|
borderColor="gray.1200"
|
||||||
|
borderRightWidth={
|
||||||
|
entry.timestamp ? (showFullView ? "1px" : "0px") : "0px"
|
||||||
|
}
|
||||||
|
placeContent="center"
|
||||||
|
spacing={0}
|
||||||
|
flexBasis="10px"
|
||||||
|
flexGrow={1}
|
||||||
|
w="100%"
|
||||||
|
>
|
||||||
|
<Text
|
||||||
|
w={showFullView ? null : "120px"}
|
||||||
|
h="100%"
|
||||||
|
fontSize="sm"
|
||||||
|
py="2px"
|
||||||
|
px={2}
|
||||||
|
textAlign="justify"
|
||||||
|
>
|
||||||
|
Value:
|
||||||
|
</Text>
|
||||||
|
<Tooltip label={entry.value} aria-label="Value:">
|
||||||
|
<Text
|
||||||
|
mx={0}
|
||||||
|
py="2px"
|
||||||
|
fontSize="sm"
|
||||||
|
w="calc(100%)"
|
||||||
|
h="100%"
|
||||||
|
onClick={() => setCopyString(entry.value)}
|
||||||
|
>
|
||||||
|
{entry.value}
|
||||||
|
</Text>
|
||||||
|
</Tooltip>
|
||||||
|
</Stack>
|
||||||
|
{entry.timestamp && (
|
||||||
|
<Stack
|
||||||
|
direction="row"
|
||||||
|
fontSize="sm"
|
||||||
|
fontWeight="600"
|
||||||
|
placeContent="center"
|
||||||
|
spacing={0}
|
||||||
|
flexBasis="10px"
|
||||||
|
flexGrow={1}
|
||||||
|
>
|
||||||
|
<Text mx={0} py="2px" fontSize="sm" w="calc(100%)" h="100%">
|
||||||
|
{moment(entry.timestamp)
|
||||||
|
// .format("DD MMM, YYYY, h:mm:ss")
|
||||||
|
.fromNow()}{" "}
|
||||||
|
</Text>
|
||||||
|
</Stack>
|
||||||
|
)}
|
||||||
|
</Stack>
|
||||||
|
</Stack>
|
||||||
|
)}
|
||||||
|
<Flex>
|
||||||
|
<IconButton
|
||||||
|
m={0}
|
||||||
|
onClick={() => handleViewClicked(entry)}
|
||||||
|
h="full"
|
||||||
|
// minH="24px"
|
||||||
|
borderLeftRadius={0}
|
||||||
|
variant="solid"
|
||||||
|
px={0}
|
||||||
|
minW="24px"
|
||||||
|
colorScheme="suggested"
|
||||||
|
icon={<ArrowRightIcon w="24px" />}
|
||||||
|
/>
|
||||||
|
</Flex>
|
||||||
|
</Stack>
|
||||||
</Flex>
|
</Flex>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
|
||||||
Ładowanie…
Reference in New Issue