From 894d122aa3a178f46332c534f34fca72569d2feb Mon Sep 17 00:00:00 2001 From: Tim Pechersky Date: Fri, 20 Aug 2021 21:40:33 +0200 Subject: [PATCH] split stream card to ethereum card and wrapper --- frontend/src/components/StreamEntry.js | 330 +----------------- .../stream-cards/EthereumMempool.js | 313 +++++++++++++++++ 2 files changed, 329 insertions(+), 314 deletions(-) create mode 100644 frontend/src/components/stream-cards/EthereumMempool.js diff --git a/frontend/src/components/StreamEntry.js b/frontend/src/components/StreamEntry.js index 52c01a33..3a65020e 100644 --- a/frontend/src/components/StreamEntry.js +++ b/frontend/src/components/StreamEntry.js @@ -1,52 +1,11 @@ -import React, { useContext, useEffect, useState } from "react"; -import { - Flex, - Text, - IconButton, - Stack, - Tooltip, - useClipboard, - Heading, - Image, - useMediaQuery, - Spacer, - Spinner, - chakra, -} from "@chakra-ui/react"; -import moment from "moment"; +import React, { useContext } from "react"; +import { Flex, IconButton, Stack, Tooltip, chakra } from "@chakra-ui/react"; import { ArrowRightIcon } from "@chakra-ui/icons"; import UIContext from "../core/providers/UIProvider/context"; -import { useToast } from "../core/hooks"; -import { useSubscriptions } from "../core/hooks"; +import EthereumMempoolCard from "./stream-cards/EthereumMempool"; -const StreamEntry = ({ entry, showOnboardingTooltips, className }) => { - const { subscriptionsCache } = useSubscriptions(); +const StreamEntry_ = ({ entry, showOnboardingTooltips, className }) => { const ui = useContext(UIContext); - 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 [showFullView] = useMediaQuery(["(min-width: 420px)"]); - if (subscriptionsCache.isLoading) return ; - - const from_color = - subscriptionsCache.data.subscriptions.find((obj) => { - return obj.address === entry.from_address; - })?.color ?? "gray.500"; - - const to_color = - subscriptionsCache.data.subscriptions.find((obj) => { - return obj.address === entry.to_address; - })?.color ?? "gray.500"; return ( { h="100%" spacing={0} > - {true && ( - - - - - - Hash - - - setCopyString(entry.hash)} - pr={12} - > - {entry.hash} - - - - - - - - From: - - - - setCopyString(entry.from_address)} - > - {entry.from_label ?? entry.from_address} - - - - - - - To: - - - setCopyString(entry.to_address)} - > - {entry.to_label ?? entry.to_address} - - - - - - - - Gas Price: - - - setCopyString(entry.gasPrice)} - > - {entry.gasPrice} - - - - - - Gas: - - - setCopyString(entry.gas)} - > - {entry.gas} - - - - - - Value: - - - setCopyString(entry.value)} - > - {entry.value} - - - - - - - Nonce: - - - setCopyString(entry.value)} - > - {entry.nonce} - - - - {entry.timestamp && ( - - - {moment(entry.timestamp * 1000).format( - "DD MMM, YYYY, HH:mm:ss" - )}{" "} - - - )} - - + {entry.subscription_type_id === "0" && ( + )} + + {/* ToDo: Add another types of cards in here + + {entryType === "" && ( + + )} + + */} { m={0} onClick={() => ui.setCurrentTransaction(entry)} h="full" - // minH="24px" borderLeftRadius={0} variant="solid" px={0} @@ -370,6 +72,6 @@ const StreamEntry = ({ entry, showOnboardingTooltips, className }) => { ); }; -const StreamChakraEntry = chakra(StreamEntry); +const StreamEntry = chakra(StreamEntry_); -export default StreamChakraEntry; +export default StreamEntry; diff --git a/frontend/src/components/stream-cards/EthereumMempool.js b/frontend/src/components/stream-cards/EthereumMempool.js new file mode 100644 index 00000000..d30598b1 --- /dev/null +++ b/frontend/src/components/stream-cards/EthereumMempool.js @@ -0,0 +1,313 @@ +import React, { useContext, useEffect, useState } from "react"; +import { + Flex, + Text, + Stack, + Tooltip, + useClipboard, + Heading, + Image, + useMediaQuery, + Spacer, + Spinner, + chakra, +} from "@chakra-ui/react"; +import moment from "moment"; +import UIContext from "../../core/providers/UIProvider/context"; +import { useToast } from "../../core/hooks"; +import { useSubscriptions } from "../../core/hooks"; + +const EthereumMempoolCard_ = ({ entry, showOnboardingTooltips, className }) => { + const { subscriptionsCache } = useSubscriptions(); + const ui = useContext(UIContext); + 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 [showFullView] = useMediaQuery(["(min-width: 420px)"]); + if (subscriptionsCache.isLoading) return ; + + const from_color = + subscriptionsCache.data.subscriptions.find((obj) => { + return obj.address === entry.from_address; + })?.color ?? "gray.500"; + + const to_color = + subscriptionsCache.data.subscriptions.find((obj) => { + return obj.address === entry.to_address; + })?.color ?? "gray.500"; + + return ( + + + + + + Hash + + + setCopyString(entry.hash)} pr={12}> + {entry.hash} + + + + + + + + From: + + + + setCopyString(entry.from_address)} + > + {entry.from_label ?? entry.from_address} + + + + + + + To: + + + setCopyString(entry.to_address)} + > + {entry.to_label ?? entry.to_address} + + + + + + + + Gas Price: + + + setCopyString(entry.gasPrice)} + > + {entry.gasPrice} + + + + + + Gas: + + + setCopyString(entry.gas)} + > + {entry.gas} + + + + + + Value: + + + setCopyString(entry.value)} + > + {entry.value} + + + + + + + Nonce: + + + setCopyString(entry.value)} + > + {entry.nonce} + + + + {entry.timestamp && ( + + + {moment(entry.timestamp * 1000).format("DD MMM, YYYY, HH:mm:ss")}{" "} + + + )} + + + ); +}; + +const EthereumMempoolCard = chakra(EthereumMempoolCard_, { + baseStyle: { + my: 0, + direction: "column", + flexBasis: "10px", + flexGrow: 1, + borderWidth: "2px", + borderLeftRadius: "md", + borderColor: "gray.600", + spacing: 0, + h: "auto", + overflowX: "hidden", + overflowY: "visible", + }, +}); + +export default EthereumMempoolCard;