mirror
/
moonstream
kopia lustrzana https://github.com/bugout-dev/moonstream
1
0
Forkuj 0
Kod Zgłoszenia Projekty Wydania Wiki Aktywność

Merge pull request #75 from peersky/main 

Minor changes, nprogress bar, color picker, linter fixes
pull/87/head
Neeraj Kashyap 2021-08-05 09:44:26 -07:00 zatwierdzone przez GitHub
rodzic 38d1eeee6b 9b1a61f8ad
commit 1de764b34f
Nie znaleziono w bazie danych klucza dla tego podpisu
ID klucza GPG: 4AEE18F83AFDEB23
18 zmienionych plików z 314 dodań i 125 usunięć
Pokaż statystyki Ściągnij plik aktualizacji Ściągnij plik porównania Expand all files Collapse all files

15
frontend/pages/_app.js
Wyświetl plik

@ -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 = () => {

101
frontend/pages/index.js
Wyświetl plik

@ -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 { useUser, useAnalytics, useModals, useRouter } from "../src/core/hooks";
import { getLayout } from "../src/layouts";
import SplitWithImage from "../src/components/SplitWithImage";
import ConnectedButtons from "../src/components/ConnectedButtons";
import UIContext from "../src/core/providers/UIProvider/context";
import dynamic from "next/dynamic";
import useUser from "../src/core/hooks/useUser";
import useAnalytics from "../src/core/hooks/useAnalytics";
import useModals from "../src/core/hooks/useModals";
import useRouter from "../src/core/hooks/useRouter";
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";
import { RiDashboardFill } from "react-icons/ri";
import {
GiMeshBall,
GiLogicGateXor,
GiSuspicious,
GiHook,
} from "react-icons/gi";
import { AiFillApi } from "react-icons/ai";
import { BiTransfer } from "react-icons/bi";
import { IoTelescopeSharp } from "react-icons/io5";
const RiDashboardFill = dynamic(() =>
import("react-icons/ri").then((mod) => mod.RiDashboardFill)
);
const FaFileContract = dynamic(() =>
import("react-icons/fa").then((mod) => mod.FaFileContract)
);
const GiMeshBall = dynamic(() =>
import("react-icons/gi").then((mod) => mod.GiMeshBall)
);
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");
// router.replace(router.nextRouter.asPath, router.nextRouter.asPath, {
// shallow: false,
// });
console.warn("window present:", window.location.pathname);
router.replace(router.nextRouter.asPath, router.nextRouter.asPath, {
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;

35
frontend/pages/stream/[entryId].js
Wyświetl plik

@ -1,19 +1,26 @@
import React, {useContext} from "react";
import { Flex, HStack, Skeleton, Box, Heading, Center, Spinner } from "@chakra-ui/react";
import { useTxInfo, useTxCashe, useRouter } from "../../src/core/hooks";
import React, { useContext } from "react";
import {
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 (
<LoadingSpinner/>
)
}
return <LoadingSpinner />;
};
const transaction = txCache.getCurrentTransaction()
const {
data: entry,
isFetchedAfterMount,
isLoading,
isError,
error,
} = useTxInfo({tx:transaction})
if (isError) {return callReroute()}
} = useTxInfo({ tx: ui.currentTransaction });
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>

1
frontend/src/components/AccountIconButton.js
Wyświetl plik

@ -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>

30
frontend/src/components/AppNavbar.js
Wyświetl plik

@ -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"

102
frontend/src/components/ColorSelector.js 100644
Wyświetl plik

@ -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;

66
frontend/src/components/NewSubscription.js
Wyświetl plik

@ -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>
);

6
frontend/src/components/StreamEntry.js
Wyświetl plik

@ -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,

20
frontend/src/components/SubscriptionsList.js
Wyświetl plik

@ -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 }) => {
changeNote.mutate({ id, note });
const updateCallback = ({ id, label, color }) => {
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}>

1
frontend/src/core/hooks/index.js
Wyświetl plik

@ -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";

17
frontend/src/core/hooks/useSubscriptions.js
Wyświetl plik

@ -50,12 +50,15 @@ const useSubscriptions = () => {
}
);
const changeNote = useMutation(SubscriptionsService.modifySubscription(), {
onError: (error) => toast(error, "error"),
onSuccess: () => {
subscriptionsCache.refetch();
},
});
const updateSubscription = useMutation(
SubscriptionsService.modifySubscription(),
{
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,
};
};

11
frontend/src/core/hooks/useTxCache.js
Wyświetl plik

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

10
frontend/src/core/hooks/useTxInfo.js
Wyświetl plik

@ -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"),
});

2
frontend/src/core/providers/AnalyticsProvider/index.js
Wyświetl plik

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

6
frontend/src/core/providers/UIProvider/index.js
Wyświetl plik

@ -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}

5
frontend/src/core/services/subscriptions.service.js
Wyświetl plik

@ -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",

9
frontend/src/core/utils/makeColor.js 100644
Wyświetl plik

@ -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;
};

2
frontend/styles/nprogress.css
Wyświetl plik

@ -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;