Merge pull request #75 from peersky/main

Minor changes, nprogress bar, color picker, linter fixes

frontend/pages/_app.js

@@ -6,12 +6,19 @@ import "highlight.js/styles/github.css";
 import "focus-visible/dist/focus-visible";
 import dynamic from "next/dynamic";
 import { QueryClient, QueryClientProvider } from "react-query";
-import HeadLinks from "../src/components/HeadLinks";
+
-import HeadSEO from "../src/components/HeadSEO";
+const HeadSEO = dynamic(() => import("../src/components/HeadSEO"), {
+  ssr: false,
+});
+const HeadLinks = dynamic(() => import("../src/components/HeadLinks"), {
+  ssr: false,
+});
 const AppContext = dynamic(() => import("../src/AppContext"), {
   ssr: false,
 });
-import DefaultLayout from "../src/layouts";
+const DefaultLayout = dynamic(() => import("../src/layouts"), {
+  ssr: false,
+});
 import { useRouter } from "next/router";
 import NProgress from "nprogress";
 
@@ -21,7 +28,7 @@ export default function CachingApp({ Component, pageProps }) {
   const router = useRouter();
 
   useEffect(() => {
-    const handleStart = (url) => {
+    const handleStart = () => {
       NProgress.start();
     };
     const handleStop = () => {

frontend/pages/index.js

@@ -1,42 +1,84 @@
 import React, {
-  useLayoutEffect,
-  useEffect,
-  Suspense,
-  useContext,
   useState,
+  useContext,
+  Suspense,
+  useEffect,
+  useLayoutEffect,
 } from "react";
 import {
+  Fade,
   Flex,
   Heading,
   Box,
   Image as ChakraImage,
   Button,
   Center,
-  Fade,
   chakra,
   Stack,
   Link,
   SimpleGrid,
   useMediaQuery,
+  Grid,
+  GridItem,
 } from "@chakra-ui/react";
-import { Grid, GridItem } from "@chakra-ui/react";
+import dynamic from "next/dynamic";
-import { useUser, useAnalytics, useModals, useRouter } from "../src/core/hooks";
+import useUser from "../src/core/hooks/useUser";
-import { getLayout } from "../src/layouts";
+import useAnalytics from "../src/core/hooks/useAnalytics";
-import SplitWithImage from "../src/components/SplitWithImage";
+import useModals from "../src/core/hooks/useModals";
-import ConnectedButtons from "../src/components/ConnectedButtons";
+import useRouter from "../src/core/hooks/useRouter";
-import UIContext from "../src/core/providers/UIProvider/context";
+const SplitWithImage = dynamic(
+  () => import("../src/components/SplitWithImage"),
+  {
+    ssr: false,
+  }
+);
+const ConnectedButtons = dynamic(
+  () => import("../src/components/ConnectedButtons"),
+  {
+    ssr: false,
+  }
+);
+const UIContext = dynamic(
+  () => import("../src/core/providers/UIProvider/context"),
+  {
+    ssr: false,
+  }
+);
+
 import { MIXPANEL_PROPS } from "../src/core/providers/AnalyticsProvider/constants";
-import { FaFileContract } from "react-icons/fa";
+const RiDashboardFill = dynamic(() =>
-import { RiDashboardFill } from "react-icons/ri";
+  import("react-icons/ri").then((mod) => mod.RiDashboardFill)
-import {
+);
-  GiMeshBall,
+const FaFileContract = dynamic(() =>
-  GiLogicGateXor,
+  import("react-icons/fa").then((mod) => mod.FaFileContract)
-  GiSuspicious,
+);
-  GiHook,
+const GiMeshBall = dynamic(() =>
-} from "react-icons/gi";
+  import("react-icons/gi").then((mod) => mod.GiMeshBall)
-import { AiFillApi } from "react-icons/ai";
+);
-import { BiTransfer } from "react-icons/bi";
+
-import { IoTelescopeSharp } from "react-icons/io5";
+const GiLogicGateXor = dynamic(() =>
+  import("react-icons/gi").then((mod) => mod.GiLogicGateXor)
+);
+
+const GiSuspicious = dynamic(() =>
+  import("react-icons/gi").then((mod) => mod.GiSuspicious)
+);
+
+const GiHook = dynamic(() =>
+  import("react-icons/gi").then((mod) => mod.GiHook)
+);
+
+const AiFillApi = dynamic(() =>
+  import("react-icons/ai").then((mod) => mod.AiFillApi)
+);
+
+const BiTransfer = dynamic(() =>
+  import("react-icons/bi").then((mod) => mod.BiTransfer)
+);
+
+const IoTelescopeSharp = dynamic(() =>
+  import("react-icons/io5").then((mod) => mod.IoTelescopeSharp)
+);
 
 const HEADING_PROPS = {
   fontWeight: "700",
@@ -119,10 +161,10 @@ const Homepage = () => {
     ) {
       console.warn("redirect attempt..");
       if (typeof window !== "undefined") {
-        console.warn("window present");
+        console.warn("window present:", window.location.pathname);
-        // router.replace(router.nextRouter.asPath, router.nextRouter.asPath, {
+        router.replace(router.nextRouter.asPath, router.nextRouter.asPath, {
-        //   shallow: false,
+          shallow: false,
-        // });
+        });
       }
     }
   }, [isInit, router]);
@@ -208,7 +250,7 @@ const Homepage = () => {
                       maxW="1620px"
                       px="7%"
                       h="100%"
-                      pt={["10vh", null, "30vh"]}
+                      pt={["10vh", null, "20vh"]}
                     >
                       <Heading size="2xl" fontWeight="semibold" color="white">
                         All the crypto data you care about in a single stream
@@ -218,7 +260,6 @@ const Homepage = () => {
                         fontSize={["lg", null, "xl"]}
                         display="inline-block"
                         color="primary.200"
-                        textDecor="underline"
                       >
                         Get all the crypto data you need in a single stream.
                         From pending transactions in the Ethereum transaction
@@ -228,7 +269,6 @@ const Homepage = () => {
                         fontSize={["lg", null, "xl"]}
                         display="inline-block"
                         color="primary.300"
-                        textDecor="underline"
                       >
                         Access this data through the Moonstream dashboard or API
                       </chakra.span>
@@ -535,7 +575,4 @@ export async function getStaticProps() {
   };
 }
 
-Homepage.layout = "default";
-Homepage.getLayout = getLayout;
-
 export default Homepage;

frontend/pages/stream/[entryId].js

@@ -1,19 +1,26 @@
-import React, {useContext} from "react";
+import React, { useContext } from "react";
-import { Flex, HStack, Skeleton, Box, Heading, Center, Spinner } from "@chakra-ui/react";
+import {
-import { useTxInfo, useTxCashe, useRouter } from "../../src/core/hooks";
+  Flex,
+  HStack,
+  Skeleton,
+  Box,
+  Heading,
+  Center,
+  Spinner,
+} from "@chakra-ui/react";
+import { useTxInfo, useRouter } from "../../src/core/hooks";
 import FourOFour from "../../src/components/FourOFour";
 import FourOThree from "../../src/components/FourOThree";
 import Tags from "../../src/components/Tags";
 import { getLayout } from "../../src/layouts/EntriesLayout";
 import Scrollable from "../../src/components/Scrollable";
-import TxInfo from "../../src/components/TxInfo"
+import TxInfo from "../../src/components/TxInfo";
 import UIContext from "../../src/core/providers/UIProvider/context";
 
 const Entry = () => {
   const ui = useContext(UIContext);
   const router = useRouter();
   const { entryId } = router.params;
-  const txCache = useTxCashe;
 
   const callReroute = () => {
     ui.setEntriesViewMode("list");
@@ -35,22 +42,20 @@ const Entry = () => {
         </Center>
       </Box>
     );
-    return (
+    return <LoadingSpinner />;
-      <LoadingSpinner/>
+  };
-    )
-  } 
 
-  const transaction = txCache.getCurrentTransaction()
-  
   const {
     data: entry,
     isFetchedAfterMount,
     isLoading,
     isError,
     error,
-  } = useTxInfo({tx:transaction})
+  } = useTxInfo({ tx: ui.currentTransaction });
-  
+
-  if (isError) {return callReroute()}
+  if (isError) {
+    return callReroute();
+  }
   if (isError && error.response.status === 404) return <FourOFour />;
   if (isError && error.response.status === 403) return <FourOThree />;
   // if (!entry || isLoading) return "";
@@ -106,7 +111,7 @@ const Entry = () => {
         isLoaded={isFetchedAfterMount || entry}
       >
         <Scrollable>
-        {!isLoading && (<TxInfo transaction = {entry}></TxInfo> )}
+          {!isLoading && <TxInfo transaction={entry}></TxInfo>}
         </Scrollable>
       </Skeleton>
     </Flex>

frontend/src/components/AccountIconButton.js

@@ -30,7 +30,6 @@ const AccountIconButton = (props) => {
         zIndex="dropdown"
         width={["100vw", "100vw", "18rem", "20rem", "22rem", "24rem"]}
         borderRadius={0}
-        m={0}
       >
         <MenuGroup>
           <RouterLink href="/account/security" passHref>

frontend/src/components/AppNavbar.js

@@ -4,7 +4,6 @@ import {
   Flex,
   Button,
   Image,
-  ButtonGroup,
   Text,
   IconButton,
   Link,
@@ -128,34 +127,6 @@ const AppNavbar = () => {
             </Fade>
             <Spacer />
             <Flex placeSelf="flex-end">
-              <ButtonGroup
-                alignSelf="center"
-                // position="relative"
-                left={
-                  isSearchBarActive
-                    ? "100%"
-                    : ["64px", "30%", "50%", "55%", null, "60%"]
-                }
-                // hidden={ui.searchBarActive}
-                display={isSearchBarActive ? "hidden" : "block"}
-                variant="link"
-                colorScheme="secondary"
-                spacing={4}
-                px={2}
-                zIndex={ui.searchBarActive ? -10 : 0}
-                size={["xs", "xs", "xs", "lg", null, "lg"]}
-              >
-                <RouterLink href="/pricing" passHref>
-                  <Button color="white" fontWeight="400">
-                    Pricing
-                  </Button>
-                </RouterLink>
-                <RouterLink href="/product" passHref>
-                  <Button color="white" fontWeight="400">
-                    Product
-                  </Button>
-                </RouterLink>
-              </ButtonGroup>
               <SupportPopover />
               <AccountIconButton
                 colorScheme="primary"
@@ -256,7 +227,6 @@ const AppNavbar = () => {
             {!isSearchBarActive && (
               <AccountIconButton
                 variant="link"
-                mx={0}
                 justifyContent="space-evenly"
                 alignContent="center"
                 h="32px"

frontend/src/components/ColorSelector.js

@@ -0,0 +1,102 @@
+import { React, useEffect, useState } from "react";
+import {
+  Box,
+  Popover,
+  PopoverTrigger,
+  PopoverContent,
+  PopoverHeader,
+  PopoverBody,
+  PopoverFooter,
+  PopoverArrow,
+  PopoverCloseButton,
+  Portal,
+  Stack,
+  IconButton,
+  Text,
+  Input,
+  useDisclosure,
+  Button,
+} from "@chakra-ui/react";
+import { makeColor } from "../core/utils/makeColor";
+import { BiRefresh } from "react-icons/bi";
+import { GithubPicker } from "react-color";
+
+const ColorSelector = (props) => {
+  const { onOpen, onClose, isOpen } = useDisclosure();
+  const [color, setColor] = useState(props.initialColor ?? makeColor());
+  const [triggerColor, setTriggerColor] = useState(color);
+
+  useEffect(() => {
+    setTriggerColor(props.initialColor);
+  }, [props.initialColor]);
+
+  const handleChangeColorComplete = (color) => {
+    setColor(color.hex);
+  };
+
+  const handleChangeColor = (event) => setColor(event.target.value);
+
+  return (
+    <Popover isOpen={isOpen} onOpen={onOpen} onClose={onClose}>
+      <PopoverTrigger>
+        <Box
+          placeSelf="center"
+          boxSize="24px"
+          borderRadius="sm"
+          bgColor={triggerColor}
+        ></Box>
+      </PopoverTrigger>
+      <Portal>
+        <PopoverContent bg={"white.100"}>
+          <PopoverArrow />
+          <PopoverHeader>Change color</PopoverHeader>
+          <PopoverCloseButton />
+          <PopoverBody>
+            <Stack direction="row" pb={2}>
+              <Text fontWeight="600" alignSelf="center">
+                Label color
+              </Text>{" "}
+              <IconButton
+                size="md"
+                // colorScheme="primary"
+                color={"white.100"}
+                _hover={{ bgColor: { color } }}
+                bgColor={color}
+                variant="outline"
+                onClick={() => setColor(makeColor())}
+                icon={<BiRefresh />}
+              />
+              <Input
+                type="input"
+                placeholder="color"
+                name="color"
+                value={color}
+                onChange={handleChangeColor}
+                w="200px"
+                onSubmit={handleChangeColorComplete}
+              ></Input>
+            </Stack>
+            <GithubPicker
+              // color={this.state.background}
+              onChangeComplete={handleChangeColorComplete}
+            />
+          </PopoverBody>
+          <PopoverFooter>
+            <Button
+              onClick={() => {
+                props.callback(color);
+                onClose();
+              }}
+              colorScheme="suggested"
+              variant="outline"
+            >
+              Apply
+            </Button>
+          </PopoverFooter>
+        </PopoverContent>
+      </Portal>
+    </Popover>
+  );
+};
+
+export default ColorSelector;

frontend/src/components/NewSubscription.js

@@ -14,13 +14,17 @@ import {
   Button,
   ModalFooter,
   Spinner,
+  IconButton,
 } from "@chakra-ui/react";
 import RadioCard from "./RadioCard";
 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 [color, setColor] = useState(makeColor());
   const { typesCache, createSubscription } = useSubscriptions();
-  const { handleSubmit, errors, register } = useForm();
+  const { handleSubmit, errors, register } = useForm({});
   const [radioState, setRadioState] = useState("ethereum_blockchain");
   let { getRootProps, getRadioProps } = useRadioGroup({
     name: "type",
@@ -41,10 +45,15 @@ const NewSubscription = ({ isFreeOption, onClose }) => {
   const createSubscriptionWrap = (props) => {
     createSubscription.mutate({
       ...props,
+      color: color,
       type: isFreeOption ? "free" : radioState,
     });
   };
 
+  const handleChangeColorComplete = (color) => {
+    setColor(color.hex);
+  };
+
   return (
     <form onSubmit={handleSubmit(createSubscriptionWrap)}>
       <ModalHeader>Subscribe to a new address</ModalHeader>
@@ -83,7 +92,7 @@ const NewSubscription = ({ isFreeOption, onClose }) => {
               : `On which source?`}
           </Text>
 
-          <FormControl isInvalid={errors.type}>
+          <FormControl isInvalid={errors.subscription_type}>
             <HStack {...group} alignItems="stretch">
               {typesCache.data.subscriptions.map((type) => {
                 const radio = getRadioProps({
@@ -100,9 +109,54 @@ const NewSubscription = ({ isFreeOption, onClose }) => {
                 );
               })}
             </HStack>
+            <Input
+              type="hidden"
+              placeholder="subscription_type"
+              name="subscription_type"
+              ref={register({ required: "select type" })}
+              value={radioState}
+              onChange={() => null}
+            ></Input>
+            <FormErrorMessage color="unsafe.400" pl="1">
+              {errors.subscription_type_ && errors.subscription_type_.message}
+            </FormErrorMessage>
           </FormControl>
         </Stack>
-        <Input placeholder="color" name="color" ref={register()}></Input>
+        <FormControl isInvalid={errors.color}>
+          <Stack direction="row" pb={2}>
+            <Text fontWeight="600" alignSelf="center">
+              Label color
+            </Text>{" "}
+            <IconButton
+              size="md"
+              // colorScheme="primary"
+              color={"white.100"}
+              _hover={{ bgColor: { color } }}
+              bgColor={color}
+              variant="outline"
+              onClick={() => setColor(makeColor())}
+              icon={<BiRefresh />}
+            />
+            <Input
+              type="input"
+              placeholder="color"
+              name="color"
+              ref={register({ required: "color is required!" })}
+              value={color}
+              onChange={() => null}
+              w="200px"
+            ></Input>
+          </Stack>
+
+          <GithubPicker
+            // color={this.state.background}
+            onChangeComplete={handleChangeColorComplete}
+          />
+
+          <FormErrorMessage color="unsafe.400" pl="1">
+            {errors.color && errors.color.message}
+          </FormErrorMessage>
+        </FormControl>
       </ModalBody>
       <ModalFooter>
         <Button
@@ -112,7 +166,9 @@ const NewSubscription = ({ isFreeOption, onClose }) => {
         >
           Confirm
         </Button>
-        <Button colorScheme="gray">Cancel</Button>
+        <Button colorScheme="gray" onClick={onClose}>
+          Cancel
+        </Button>
       </ModalFooter>
     </form>
   );

frontend/src/components/StreamEntry.js

@@ -14,9 +14,9 @@ import moment from "moment";
 import { ArrowRightIcon } from "@chakra-ui/icons";
 import { useRouter } from "../core/hooks";
 import UIContext from "../core/providers/UIProvider/context";
-import { useToast, useTxCashe } from "../core/hooks";
+import { useToast } from "../core/hooks";
 
-const StreamEntry = ({ entry, filterCallback, filterConstants }) => {
+const StreamEntry = ({ entry }) => {
   const ui = useContext(UIContext);
   const router = useRouter();
   const [copyString, setCopyString] = useState(false);
@@ -34,7 +34,7 @@ const StreamEntry = ({ entry, filterCallback, filterConstants }) => {
   const handleViewClicked = (entryId) => {
     ui.setEntryId(entryId);
     ui.setEntriesViewMode("entry");
-    useTxCashe.setCurrentTransaction(entry);
+    ui.setCurrentTransaction(entry);
     router.push({
       pathname: `/stream/${entry.hash}`,
       query: router.query,

frontend/src/components/SubscriptionsList.js

@@ -17,13 +17,17 @@ import moment from "moment";
 import CopyButton from "./CopyButton";
 import { useSubscriptions } from "../core/hooks";
 import ConfirmationRequest from "./ConfirmationRequest";
+import ColorSelector from "./ColorSelector";
 
 const SubscriptionsList = () => {
-  const { subscriptionsCache, changeNote, deleteSubscription } =
+  const { subscriptionsCache, updateSubscription, deleteSubscription } =
     useSubscriptions();
 
-  const updateCallback = ({ id, note }) => {
+  const updateCallback = ({ id, label, color }) => {
-    changeNote.mutate({ id, note });
+    const data = { id: id };
+    label && (data.label = label);
+    color && (data.color = color);
+    updateSubscription.mutate(data);
   };
 
   if (subscriptionsCache.data) {
@@ -45,6 +49,7 @@ const SubscriptionsList = () => {
             <Th>Token</Th>
             <Th>Label</Th>
             <Th>Address</Th>
+            <Th>Color</Th>
             <Th>Date Created</Th>
             <Th>Actions</Th>
           </Tr>
@@ -99,6 +104,15 @@ const SubscriptionsList = () => {
                 <Td mr={4} p={0}>
                   <CopyButton>{subscription.address}</CopyButton>
                 </Td>
+                <Td>
+                  <ColorSelector
+                    // subscriptionId={subscription.id}
+                    initialColor={subscription.color}
+                    callback={(color) =>
+                      updateCallback({ id: subscription.id, color: color })
+                    }
+                  />
+                </Td>
                 <Td py={0}>{moment(subscription.created_at).format("L")}</Td>
 
                 <Td py={0}>

frontend/src/core/hooks/index.js

@@ -20,5 +20,4 @@ export { default as useStripe } from "./useStripe";
 export { default as useSubscriptions } from "./useSubscriptions";
 export { default as useToast } from "./useToast";
 export { default as useTxInfo } from "./useTxInfo";
-export { default as useTxCashe } from "./useTxCache";
 export { default as useUser } from "./useUser";

frontend/src/core/hooks/useSubscriptions.js

@@ -50,12 +50,15 @@ const useSubscriptions = () => {
     }
   );
 
-  const changeNote = useMutation(SubscriptionsService.modifySubscription(), {
+  const updateSubscription = useMutation(
-    onError: (error) => toast(error, "error"),
+    SubscriptionsService.modifySubscription(),
-    onSuccess: () => {
+    {
-      subscriptionsCache.refetch();
+      onError: (error) => toast(error, "error"),
-    },
+      onSuccess: () => {
-  });
+        subscriptionsCache.refetch();
+      },
+    }
+  );
 
   const deleteSubscription = useMutation(
     SubscriptionsService.deleteSubscription(),
@@ -71,7 +74,7 @@ const useSubscriptions = () => {
     createSubscription,
     subscriptionsCache,
     typesCache,
-    changeNote,
+    updateSubscription,
     deleteSubscription,
   };
 };

frontend/src/core/hooks/useTxCache.js

@@ -1,11 +0,0 @@
-class TxCashe {
-  currentTransaction = undefined;
-  getCurrentTransaction() {
-    return this.currentTransaction;
-  }
-  setCurrentTransaction(transaction) {
-    this.currentTransaction = transaction;
-  }
-}
-const useTxCashe = new TxCashe();
-export default useTxCashe;

frontend/src/core/hooks/useTxInfo.js

@@ -4,15 +4,6 @@ import { queryCacheProps } from "./hookCommon";
 import { useToast } from ".";
 
 const useTxInfo = (transaction) => {
-  if (!transaction.tx)
-    return {
-      data: "undefined",
-      isLoading: false,
-      isFetchedAfterMount: true,
-      refetch: false,
-      isError: true,
-      error: "undefined",
-    };
   const toast = useToast();
   const getTxInfo = async () => {
     const response = await TxInfoService.getTxInfo(transaction);
@@ -21,6 +12,7 @@ const useTxInfo = (transaction) => {
   const { data, isLoading, isFetchedAfterMount, refetch, isError, error } =
     useQuery(["txinfo", transaction.tx.hash], getTxInfo, {
       ...queryCacheProps,
+      enabled: !!transaction.tx,
       onError: (error) => toast(error, "error"),
     });
 

frontend/src/core/providers/AnalyticsProvider/index.js

@@ -28,7 +28,7 @@ const AnalyticsProvider = ({ children }) => {
           },
           { transport: "sendBeacon" }
         );
-      }, 1000);
+      }, 30000);
 
     return () => clearInterval(intervalId);
     // eslint-disable-next-line

frontend/src/core/providers/UIProvider/index.js

@@ -149,6 +149,10 @@ const UIProvider = ({ children }) => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [router.params?.id]);
 
+  // *********** TX stream state **********************
+
+  const [currentTransaction, setCurrentTransaction] = useState(undefined);
+
   // ********************************************************
 
   return (
@@ -177,6 +181,8 @@ const UIProvider = ({ children }) => {
         entryId,
         setEntryId,
         sessionId,
+        currentTransaction,
+        setCurrentTransaction,
       }}
     >
       {children}

frontend/src/core/services/subscriptions.service.js

@@ -62,9 +62,10 @@ export const createSubscription =
 
 export const modifySubscription =
   () =>
-  ({ id, note }) => {
+  ({ id, label, color }) => {
     const data = new FormData();
-    data.append("note", note);
+    color && data.append("color", color);
+    label && data.append("label", label);
     data.append("id", id);
     return http({
       method: "POST",

frontend/src/core/utils/makeColor.js

@@ -0,0 +1,9 @@
+export const makeColor = () => {
+  var result = "#";
+  var characters = "0123456789ABCDEF";
+  var charactersLength = characters.length;
+  for (var i = 0; i < 6; i++) {
+    result += characters.charAt(Math.floor(Math.random() * charactersLength));
+  }
+  return result;
+};

frontend/styles/nprogress.css

@@ -32,7 +32,7 @@
 
 /* Remove these to get rid of the spinner */
 #nprogress .spinner {
-  display: block;
+  display: none;
   position: fixed;
   z-index: 1031;
   top: 15px;