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;