Merge pull request #174 from bugout-dev/style-whale-watch-card

Whale watch card improvement

frontend/src/components/NewModalSubscripton.js

@@ -21,11 +21,18 @@ import { useForm } from "react-hook-form";
 import { GithubPicker } from "react-color";
 import { BiRefresh } from "react-icons/bi";
 import { makeColor } from "../core/utils/makeColor";
-const NewSubscription = ({ isFreeOption, onClose }) => {
+const NewSubscription = ({
+  isFreeOption,
+  onClose,
+  initialAddress,
+  initialType,
+}) => {
   const [color, setColor] = useState(makeColor());
   const { typesCache, createSubscription } = useSubscriptions();
   const { handleSubmit, errors, register } = useForm({});
-  const [radioState, setRadioState] = useState("ethereum_blockchain");
+  const [radioState, setRadioState] = useState(
+    initialType ?? "ethereum_blockchain"
+  );
   let { getRootProps, getRadioProps } = useRadioGroup({
     name: "type",
     defaultValue: radioState,
@@ -78,6 +85,8 @@ const NewSubscription = ({ isFreeOption, onClose }) => {
             autoComplete="off"
             my={2}
             placeholder="Enter address"
+            defaultValue={initialAddress ?? undefined}
+            isReadOnly={!!initialAddress}
             name="address"
             ref={register({ required: "address is required!" })}
           ></Input>
@@ -98,6 +107,7 @@ const NewSubscription = ({ isFreeOption, onClose }) => {
                 const radio = getRadioProps({
                   value: type.id,
                   isDisabled:
+                    (initialAddress && initialType) ||
                     !type.active ||
                     (isFreeOption && type.id !== "ethereum_blockchain"),
                 });

frontend/src/components/NewSubscription.js

@@ -21,12 +21,20 @@ import { CirclePicker } from "react-color";
 import { BiRefresh } from "react-icons/bi";
 import { makeColor } from "../core/utils/makeColor";
 import { useForm } from "react-hook-form";
-const _NewSubscription = ({ isFreeOption, onClose, setIsLoading }) => {
+const _NewSubscription = ({
+  isFreeOption,
+  onClose,
+  setIsLoading,
+  initialAddress,
+  initialType,
+}) => {
   const [color, setColor] = useState(makeColor());
   const { handleSubmit, errors, register } = useForm({});
   const { typesCache, createSubscription } = useSubscriptions();
   // const { handleSubmit, errors, register } = useForm({});
-  const [radioState, setRadioState] = useState("ethereum_blockchain");
+  const [radioState, setRadioState] = useState(
+    initialType ?? "ethereum_blockchain"
+  );
   let { getRootProps, getRadioProps } = useRadioGroup({
     name: "type",
     defaultValue: radioState,
@@ -52,7 +60,7 @@ const _NewSubscription = ({ isFreeOption, onClose, setIsLoading }) => {
       createSubscription.mutate({
         ...props,
         color: color,
-        type: isFreeOption ? 0 : radioState,
+        type: isFreeOption ? "ethereum_blockchain" : radioState,
       });
     },
     [createSubscription, isFreeOption, color, radioState]
@@ -107,6 +115,7 @@ const _NewSubscription = ({ isFreeOption, onClose, setIsLoading }) => {
               const radio = getRadioProps({
                 value: type.id,
                 isDisabled:
+                  (initialAddress && initialType) ||
                   !type.active ||
                   (isFreeOption && type.id !== "ethereum_blockchain"),
               });

frontend/src/components/StreamEntry.js

@@ -67,6 +67,9 @@ const StreamEntry_ = ({ entry, showOnboardingTooltips, className }) => {
             maxW="150px"
           >
             <IconButton
+              isDisabled={
+                entry.event_type === "ethereum_whalewatch" ? true : false
+              }
               m={0}
               onClick={() => ui.setCurrentTransaction(entry)}
               h="full"

frontend/src/components/stream-cards/EthereumWhalewatch.js

@@ -1,4 +1,4 @@
-import React, { useContext, useEffect, useState } from "react";
+import React, { useEffect, useState } from "react";
 import {
   Text,
   Stack,
@@ -6,22 +6,31 @@ import {
   useClipboard,
   Heading,
   Image,
-  useMediaQuery,
   Spacer,
   Spinner,
   chakra,
+  SimpleGrid,
+  Box,
+  Modal,
+  ModalContent,
+  ModalOverlay,
+  IconButton,
+  useDisclosure,
 } from "@chakra-ui/react";
-import UIContext from "../../core/providers/UIProvider/context";
 import { useToast } from "../../core/hooks";
 import { useSubscriptions } from "../../core/hooks";
+import moment from "moment";
+import { AiOutlineMonitor } from "react-icons/ai";
+import NewSubscription from "../NewModalSubscripton";
 
 const EthereumWhalewatchCard_ = ({
   entry,
   showOnboardingTooltips,
   className,
 }) => {
+  const [newSubscriptionWhaleType, setNewSubscriptionWhaleType] = useState();
+  const { isOpen, onOpen, onClose } = useDisclosure();
   const { subscriptionsCache, subscriptionTypeIcons } = useSubscriptions();
-  const ui = useContext(UIContext);
   const [copyString, setCopyString] = useState(false);
   const [icon, setIcon] = useState(null);
   const { onCopy, hasCopied } = useClipboard(copyString, 1);
@@ -41,8 +50,6 @@ const EthereumWhalewatchCard_ = ({
       setIcon(subscriptionTypeIcons.ethereum_whalewatch);
     }
   }, [subscriptionTypeIcons, setIcon]);
-
-  const [showFullView] = useMediaQuery(["(min-width: 420px)"]);
   if (subscriptionsCache.isLoading) return <Spinner />;
 
   const whales = {
@@ -64,14 +71,35 @@ const EthereumWhalewatchCard_ = ({
   });
 
   const rowLabels = {
-    transactionsOut: "Number of transactions sent",
+    transactionsOut: "transactions sent",
-    transactionsIn: "Number of transactions received",
+    transactionsIn: "transactions received",
     valueOut: "WEI sent",
     valueIn: "WEI received",
   };
 
+  const subscribeClicked = (whaleType) => {
+    setNewSubscriptionWhaleType(whaleType);
+    onOpen();
+  };
   return (
     <Stack className={className}>
+      <Modal
+        isOpen={isOpen}
+        onClose={onClose}
+        size="2xl"
+        scrollBehavior="outside"
+      >
+        <ModalOverlay />
+
+        <ModalContent>
+          <NewSubscription
+            isFreeOption={false}
+            onClose={onClose}
+            initialAddress={whales[newSubscriptionWhaleType]?.address}
+            initialType="ethereum_blockchain"
+          />
+        </ModalContent>
+      </Modal>
       <Tooltip
         hasArrow
         isOpen={showOnboardingTooltips}
@@ -91,90 +119,129 @@ const EthereumWhalewatchCard_ = ({
           bgColor="gray.300"
         >
           {icon ? <Image boxSize="16px" src={icon} /> : ""}
-          <Heading px={1} size="xs">
+          <Heading px={1} size="xs" isTruncated>
             Ethereum whale watch
           </Heading>
           <Spacer />
           <Text isTruncated pr={12}>
-            {`${entry.event_data.date_range.start_time} to ${entry.event_data.date_range.end_time}`}
+            {`${moment(entry.event_data.date_range.start_time).format(
+              "ll [from] LT"
+            )} to ${moment(entry.event_data.date_range.end_time).format(
+              moment(entry.event_data.date_range.start_time).format("l") ===
+                moment(entry.event_data.date_range.end_time).format("l")
+                ? "LT"
+                : "lll"
+            )}`}
           </Text>
         </Stack>
       </Tooltip>
-      {Object.keys(whales).map((whaleType) => {
+      <SimpleGrid columns={9} w="100%" minWidth="min-content">
-        return (
+        <Text
-          <Stack
+          gridColumn="1 / 3"
-            className={whaleType}
+          h="100%"
-            direction={showFullView ? "row" : "column"}
+          w="100%"
-            w="100%"
+          fontSize="sm"
-            h={showFullView ? "1.6rem" : "3.2rem"}
+          py="2px"
-            minH="1.6rem"
+          px={2}
-            spacing={0}
+          fontWeight="600"
-            alignItems="center"
+          // w={showFullView ? null : "120px"}
-            key={`${whaleType}-${entry.event_data.date_range.start_time}-${entry.event_data.date_range.end_time}`}
+          justifyContent="flex-start"
-          >
+        >
-            <Stack
+          Whale
-              overflow="hidden"
+        </Text>
-              textOverflow="ellipsis"
+        <Text
-              whiteSpace="nowrap"
+          gridColumn="3 / 8"
-              direction="row"
+          h="100%"
-              fontSize="sm"
+          w="100%"
-              fontWeight="600"
+          fontSize="sm"
-              w={showFullView ? "calc(30%)" : "calc(100%)"}
+          py="2px"
-              h="100%"
+          px={2}
-              borderColor="gray.1200"
+          fontWeight="600"
-              borderRightWidth={showFullView ? "1px" : "0px"}
+          // w={showFullView ? null : "120px"}
-              placeContent="center"
+          justifyContent="flex-start"
-              spacing={0}
+        >
-            >
+          Address
-              <Tooltip
+        </Text>
-                hasArrow
+        <Text
-                isOpen={showOnboardingTooltips && !ui.isMobileView}
+          gridColumn="8 / 10"
-                label={`This row represents the following statistic: ${rowLabels[whaleType]}`}
+          h="100%"
-                aria-label={`This row represents the following statistic: ${rowLabels[whaleType]}`}
+          w="100%"
-                variant="onboarding"
+          fontSize="sm"
-                placement={ui.isMobileView ? "bottom" : "left"}
+          py="2px"
-                maxW="150px"
+          px={2}
-              >
+          fontWeight="600"
+          // w={showFullView ? null : "120px"}
+          justifyContent="flex-start"
+        >
+          Value
+        </Text>
+        {Object.keys(whales).map((whaleType) => {
+          return (
+            <>
+              <Box gridColumn="1 / 3">
                 <Text
                   h="100%"
+                  w="100%"
                   fontSize="sm"
                   py="2px"
                   px={2}
-                  w={showFullView ? null : "120px"}
+                  justifyContent="flex-start"
+                  isTruncated
                 >
                   {rowLabels[whaleType]}
                 </Text>
-              </Tooltip>
+              </Box>
-            </Stack>
+              <Stack
-            <Stack
+                gridColumn="3 / 8"
-              overflow="hidden"
-              textOverflow="ellipsis"
-              whiteSpace="nowrap"
-              direction="row"
-              fontSize="sm"
-              fontWeight="600"
-              minw="min-content"
-              w={showFullView ? "calc(70%)" : "calc(100%)"}
-              h="100%"
-              spacing={0}
-              textAlign="left"
-            >
-              <Text
                 mx={0}
                 py="2px"
                 fontSize="sm"
                 bgColor={whales[whaleType].color}
+                h="100%"
+                direction="row"
+              >
+                <Box
+                  onClick={() => setCopyString(whales[whaleType].address)}
+                  isTruncated
+                >
+                  {whales[whaleType].label}
+                </Box>
+                <Spacer />
+                {whales[whaleType].label === whales[whaleType].address && (
+                  <Tooltip
+                    label="subscribe to this address"
+                    variant="onboarding"
+                  >
+                    <Box boxSize="min-content">
+                      <IconButton
+                        onClick={() => subscribeClicked(whaleType)}
+                        colorScheme="secondary"
+                        variant="outline"
+                        m={0}
+                        boxSize="24px"
+                        icon={<AiOutlineMonitor />}
+                      />
+                    </Box>
+                  </Tooltip>
+                )}
+              </Stack>
+              <Box
+                gridColumn="8 / 10"
+                mx={0}
+                py="2px"
+                fontSize="sm"
                 isTruncated
                 w="calc(100%)"
                 h="100%"
-                onClick={() => setCopyString(whales[whaleType].address)}
+                textAlign="left"
+                pl={2}
               >
-                {whales[whaleType].label} -- {whales[whaleType].statistic}
+                {whales[whaleType].statistic}
-              </Text>
+              </Box>
-            </Stack>
+            </>
-          </Stack>
+          );
-        );
+        })}
-      })}
+      </SimpleGrid>
     </Stack>
   );
 };