kopia lustrzana https://github.com/bugout-dev/moonstream
469 wiersze
17 KiB
JavaScript
469 wiersze
17 KiB
JavaScript
import React, { useContext, useEffect, useRef } from "react";
|
|
import { getLayout } from "../src/layouts/AppLayout";
|
|
import UIContext from "../src/core/providers/UIProvider/context";
|
|
import {
|
|
Heading,
|
|
Text,
|
|
Button,
|
|
Stack,
|
|
ButtonGroup,
|
|
Spacer,
|
|
Radio,
|
|
RadioGroup,
|
|
UnorderedList,
|
|
ListItem,
|
|
Fade,
|
|
chakra,
|
|
useBoolean,
|
|
Flex,
|
|
IconButton,
|
|
Tooltip,
|
|
} from "@chakra-ui/react";
|
|
import StepProgress from "../src/components/StepProgress";
|
|
import { ArrowLeftIcon, ArrowRightIcon } from "@chakra-ui/icons";
|
|
import Scrollable from "../src/components/Scrollable";
|
|
import AnalyticsContext from "../src/core/providers/AnalyticsProvider/context";
|
|
import NewSubscription from "../src/components/NewSubscription";
|
|
import StreamEntry from "../src/components/StreamEntry";
|
|
import SubscriptionsList from "../src/components/SubscriptionsList";
|
|
import { useSubscriptions } from "../src/core/hooks";
|
|
import router from "next/router";
|
|
import { FaFilter } from "react-icons/fa";
|
|
|
|
const Welcome = () => {
|
|
console.count("render welcome!");
|
|
const { subscriptionsCache } = useSubscriptions();
|
|
const ui = useContext(UIContext);
|
|
const { mixpanel, isLoaded, MIXPANEL_PROPS } = useContext(AnalyticsContext);
|
|
const [profile, setProfile] = React.useState();
|
|
const [showSubscriptionForm, setShowSubscriptionForm] = useBoolean(true);
|
|
|
|
useEffect(() => {
|
|
if (typeof window !== "undefined") {
|
|
document.title = `Welcome to moonstream.to!`;
|
|
}
|
|
}, []);
|
|
|
|
const progressButtonCallback = (index) => {
|
|
ui.setOnboardingStep(index);
|
|
};
|
|
|
|
useEffect(() => {
|
|
if (profile && isLoaded) {
|
|
mixpanel.people.set({
|
|
[`${MIXPANEL_PROPS.USER_SPECIALITY}`]: profile,
|
|
});
|
|
}
|
|
}, [profile, MIXPANEL_PROPS, isLoaded, mixpanel]);
|
|
|
|
const SubscriptonCreatedCallback = () => {
|
|
setShowSubscriptionForm.off();
|
|
};
|
|
|
|
const scrollRef = useRef();
|
|
const handleNextClick = () => {
|
|
if (ui.onboardingStep < ui.onboardingSteps.length - 1) {
|
|
ui.setOnboardingStep(ui.onboardingStep + 1);
|
|
scrollRef?.current?.scrollIntoView();
|
|
} else {
|
|
ui.setisOnboardingComplete(true);
|
|
router.push("/stream");
|
|
}
|
|
};
|
|
|
|
return (
|
|
<Scrollable>
|
|
<Stack px="7%" pt={4} w="100%" spacing={4} ref={scrollRef}>
|
|
<StepProgress
|
|
numSteps={ui.onboardingSteps.length}
|
|
currentStep={ui.onboardingStep}
|
|
colorScheme="primary"
|
|
buttonCallback={progressButtonCallback}
|
|
buttonTitles={[
|
|
"Moonstream basics",
|
|
"Setup subscriptions",
|
|
"How to read stream",
|
|
]}
|
|
style="arrows"
|
|
/>
|
|
|
|
{ui.onboardingStep === 0 && (
|
|
<Fade in>
|
|
<Stack spacing={4}>
|
|
<Stack
|
|
px={12}
|
|
// mt={24}
|
|
bgColor="gray.50"
|
|
borderRadius="xl"
|
|
boxShadow="xl"
|
|
py={4}
|
|
>
|
|
<Heading as="h4" size="md">
|
|
Greetings traveller!
|
|
</Heading>
|
|
<Text fontWeight="semibold" pl={2}>
|
|
{" "}
|
|
We are very excited to see you onboard!
|
|
</Text>
|
|
|
|
<Text fontWeight="semibold" pl={2}>
|
|
Moonstream is a product which helps anyone participate in
|
|
decentralized finance. From the most sophisticated flash
|
|
arbitrageurs to people looking for yield from currency that
|
|
would otherwise lie dormant in their exchange accounts.
|
|
</Text>
|
|
<Text fontWeight="semibold" pl={2}>
|
|
Moonstream is ment to give you critical insights needed to
|
|
succeed in your crypto quest!
|
|
</Text>
|
|
</Stack>
|
|
<Stack
|
|
px={12}
|
|
// mt={24}
|
|
bgColor="gray.50"
|
|
borderRadius="xl"
|
|
boxShadow="xl"
|
|
py={4}
|
|
>
|
|
<Heading as="h4" size="md">
|
|
How does Moonstream work?
|
|
</Heading>
|
|
<chakra.span fontWeight="semibold" pl={2}>
|
|
<Text fontWeight="bold" display="inline">
|
|
We run nodes
|
|
</Text>{" "}
|
|
- Now get most precise and accurate data you can just query
|
|
our database. You {`don't`} need to maintain your node, and
|
|
still have data that miners have access to!
|
|
</chakra.span>
|
|
<chakra.span fontWeight="semibold" pl={2}>
|
|
<Text fontWeight="bold" display="inline">
|
|
We crawl data
|
|
</Text>{" "}
|
|
We analyze millions of transactions, data, smart contract code
|
|
to link all them together
|
|
</chakra.span>
|
|
|
|
<chakra.span fontWeight="semibold" pl={2}>
|
|
<Text fontWeight="bold" display="inline">
|
|
We provide data
|
|
</Text>{" "}
|
|
We allow you to fetch data trough the website or trough API
|
|
</chakra.span>
|
|
|
|
<chakra.span fontWeight="semibold" pl={2}>
|
|
<Text fontWeight="bold" display="inline">
|
|
We analyze data
|
|
</Text>{" "}
|
|
We find most interesting stuff and show it to you!
|
|
</chakra.span>
|
|
</Stack>
|
|
<Stack
|
|
px={12}
|
|
// mt={24}
|
|
bgColor="gray.50"
|
|
borderRadius="xl"
|
|
boxShadow="xl"
|
|
py={4}
|
|
>
|
|
<Heading as="h4" size="md">
|
|
UI 101?
|
|
</Heading>
|
|
<Text fontWeight="semibold" pl={2}>
|
|
On the left side corner there is sidebar that you can use to
|
|
navigate across the website. There are following views you can
|
|
navigate to:
|
|
</Text>
|
|
<chakra.span fontWeight="semibold" pl={2}>
|
|
<Text fontWeight="bold" display="inline">
|
|
Subscriptions
|
|
</Text>{" "}
|
|
- Use this screen to set up addresses you would like to
|
|
monitor to.{" "}
|
|
<i>
|
|
NB: Without setting up subscriptions moonstream will have
|
|
quite empty feel!{" "}
|
|
</i>{" "}
|
|
No worries, we will help you to set up your subscriptions in
|
|
the next steps!
|
|
</chakra.span>
|
|
<chakra.span fontWeight="semibold" pl={2}>
|
|
<Text fontWeight="bold" display="inline">
|
|
Stream
|
|
</Text>{" "}
|
|
This view is somewhat similar to a bank statement where you
|
|
can define time range and see what happened in that time over
|
|
your subscriptions. In next steps we will show how you can
|
|
apply filters to it!
|
|
</chakra.span>
|
|
|
|
<chakra.span fontWeight="semibold" pl={2}>
|
|
<Text fontWeight="bold" display="inline">
|
|
Stream Entry
|
|
</Text>{" "}
|
|
You can see detailed view of stream cards with very specific
|
|
and essential data, like methods called in smart contracts
|
|
etc!!
|
|
</chakra.span>
|
|
|
|
<chakra.span fontWeight="semibold" pl={2}>
|
|
<Text fontWeight="bold" display="inline">
|
|
Analytics
|
|
</Text>{" "}
|
|
This section is under construction yet. Soon you will be able
|
|
to create your dashboard with data of your interest. We will
|
|
really appretiate if you visit that section, and fill up form
|
|
describing what analytical tools you would love to see there!
|
|
</chakra.span>
|
|
</Stack>
|
|
|
|
<Stack
|
|
px={12}
|
|
// mt={24}
|
|
bgColor="gray.50"
|
|
borderRadius="xl"
|
|
boxShadow="xl"
|
|
py={4}
|
|
>
|
|
<Heading as="h4" size="md">
|
|
Tell us more about your needs?
|
|
</Heading>
|
|
<Text fontWeight="semibold" pl={2}>
|
|
In order to fetch best possible experience, we would like to
|
|
know some details about you
|
|
</Text>
|
|
<Text fontWeight="semibold" pl={2}>
|
|
Please tell us what profile describes you best?{" "}
|
|
<i>
|
|
This is purely analytical data, you can change it anytime
|
|
later
|
|
</i>
|
|
</Text>
|
|
<RadioGroup
|
|
onChange={setProfile}
|
|
value={profile}
|
|
fontWeight="bold"
|
|
>
|
|
<Stack direction="row" justifyContent="space-evenly">
|
|
<Radio value="trader">I am trading crypto currency</Radio>
|
|
<Radio value="fund">I represent investment fund</Radio>
|
|
<Radio value="developer">I am developer</Radio>
|
|
</Stack>
|
|
</RadioGroup>
|
|
</Stack>
|
|
</Stack>
|
|
</Fade>
|
|
)}
|
|
{ui.onboardingStep === 1 && (
|
|
<Fade in>
|
|
<Stack px="7%">
|
|
<Stack
|
|
px={12}
|
|
// mt={24}
|
|
bgColor="gray.50"
|
|
borderRadius="xl"
|
|
boxShadow="xl"
|
|
py={4}
|
|
my={2}
|
|
>
|
|
<Heading as="h4" size="md">
|
|
Subscriptions
|
|
</Heading>
|
|
<chakra.span fontWeight="semibold" pl={2}>
|
|
Subscriptions is essential tool of Moonstream. We gather data
|
|
for you based on addresses you have subscribed for.
|
|
<br />
|
|
Subscribe to any addres which you are interested in and they
|
|
will become part of your stream!
|
|
<UnorderedList>
|
|
<ListItem>
|
|
Color - you can define color to easily identify this
|
|
subscription in your stream
|
|
</ListItem>
|
|
<ListItem>Address - thing you subscribe to</ListItem>
|
|
<ListItem>
|
|
Label - Its good idea to use human readible name that
|
|
represents address
|
|
</ListItem>
|
|
<ListItem>
|
|
Source - In Alpha we support only Ethereum blockchain,
|
|
more sources are coming soon!
|
|
</ListItem>
|
|
</UnorderedList>
|
|
</chakra.span>
|
|
</Stack>
|
|
{subscriptionsCache.data.subscriptions.length > 0 &&
|
|
!subscriptionsCache.isLoading && (
|
|
<>
|
|
<Heading>
|
|
{" "}
|
|
You already have some subscriptions set up
|
|
</Heading>
|
|
</>
|
|
)}
|
|
<SubscriptionsList />
|
|
{showSubscriptionForm && (
|
|
<>
|
|
<Heading pt={12}>{`Let's add new subscription!`}</Heading>
|
|
|
|
<NewSubscription
|
|
isFreeOption={true}
|
|
onClose={SubscriptonCreatedCallback}
|
|
/>
|
|
</>
|
|
)}
|
|
{!showSubscriptionForm && (
|
|
<Button
|
|
colorScheme="suggested"
|
|
variant="solid"
|
|
onClick={() => setShowSubscriptionForm.on()}
|
|
>
|
|
Add another subscription
|
|
</Button>
|
|
)}
|
|
</Stack>
|
|
</Fade>
|
|
)}
|
|
{ui.onboardingStep === 2 && (
|
|
<Fade in>
|
|
<Stack>
|
|
<Stack
|
|
px={12}
|
|
// mt={24}
|
|
bgColor="gray.50"
|
|
borderRadius="xl"
|
|
boxShadow="xl"
|
|
py={4}
|
|
my={2}
|
|
>
|
|
<Heading as="h4" size="md">
|
|
Stream
|
|
</Heading>
|
|
<chakra.span fontWeight="semibold" pl={2}>
|
|
We are almost done!
|
|
<br />
|
|
{`Stream is where you can read data you've subscribed for. Here
|
|
you have different cards for different subscription types.`}
|
|
<br />
|
|
If card has some extra details - there will be orange button
|
|
on right hand side inviting you to see more!
|
|
<br />
|
|
Below is typical card for ethereum blockchain event. Useful
|
|
information right on the card:
|
|
<UnorderedList py={2}>
|
|
<ListItem>Hash - unique ID of the event </ListItem>
|
|
<ListItem>
|
|
From - sender address. If it is one of your subscription
|
|
addresses - will appear in color and with label{" "}
|
|
</ListItem>
|
|
<ListItem>
|
|
To - receiver address. If it is one of your subscription
|
|
addresses - will appear in color and with label{" "}
|
|
</ListItem>
|
|
<ListItem>
|
|
Nonce - Counter how many transactions address has sent. It
|
|
also determines sequence of transaction!{" "}
|
|
</ListItem>
|
|
<ListItem>
|
|
Gas Price - this is how much ether is being paid per gas
|
|
unit
|
|
</ListItem>
|
|
<ListItem>
|
|
Gas - Ammount of gas this event consumes
|
|
</ListItem>
|
|
</UnorderedList>
|
|
</chakra.span>
|
|
</Stack>
|
|
<Stack
|
|
pb={ui.isMobileView ? 24 : 8}
|
|
w={ui.isMobileView ? "100%" : "calc(100% - 300px)"}
|
|
alignSelf="center"
|
|
>
|
|
<Flex h="3rem" w="100%" bgColor="gray.100" alignItems="center">
|
|
<Flex maxW="90%"></Flex>
|
|
<Spacer />
|
|
<Tooltip
|
|
variant="onboarding"
|
|
placement={ui.isMobileView ? "bottom" : "right"}
|
|
label="Filtering menu"
|
|
isOpen={true}
|
|
maxW="150px"
|
|
hasArrow
|
|
>
|
|
<IconButton
|
|
mr={4}
|
|
// onClick={onOpen}
|
|
colorScheme="primary"
|
|
variant="ghost"
|
|
icon={<FaFilter />}
|
|
/>
|
|
</Tooltip>
|
|
</Flex>
|
|
<StreamEntry
|
|
mt={20}
|
|
entry={{
|
|
from_address: "this is address from",
|
|
to_address: "this is to address",
|
|
hash: "this is hash",
|
|
}}
|
|
showOnboardingTooltips={true}
|
|
/>
|
|
</Stack>
|
|
<Stack
|
|
px={12}
|
|
// mt={24}
|
|
bgColor="gray.50"
|
|
borderRadius="xl"
|
|
boxShadow="xl"
|
|
py={4}
|
|
my={2}
|
|
>
|
|
<Heading as="h4" size="md">
|
|
Applying filters
|
|
</Heading>
|
|
<chakra.span fontWeight="semibold" pl={2}>
|
|
You can apply various filters by clicking filter menu button
|
|
<br />
|
|
{`Right now you can use it to select address from and to, we are adding more complex queries soon, stay tuna! `}
|
|
<br />
|
|
</chakra.span>
|
|
</Stack>
|
|
</Stack>
|
|
</Fade>
|
|
)}
|
|
|
|
<ButtonGroup>
|
|
<Button
|
|
colorScheme="secondary"
|
|
leftIcon={<ArrowLeftIcon />}
|
|
variant="outline"
|
|
hidden={ui.onboardingStep === 0}
|
|
disabled={ui.onboardingStep === 0}
|
|
onClick={() => {
|
|
ui.setOnboardingStep(ui.onboardingStep - 1);
|
|
scrollRef?.current?.scrollIntoView();
|
|
}}
|
|
>
|
|
Previous
|
|
</Button>
|
|
<Spacer />
|
|
<Button
|
|
colorScheme="secondary"
|
|
variant="solid"
|
|
rightIcon={<ArrowRightIcon />}
|
|
// hidden={!(ui.onboardingStep < ui.onboardingSteps.length - 1)}
|
|
// disabled={!(ui.onboardingStep < ui.onboardingSteps.length - 1)}
|
|
onClick={() => handleNextClick()}
|
|
>
|
|
{ui.onboardingStep < ui.onboardingSteps.length - 1
|
|
? `Next`
|
|
: `Finish `}
|
|
</Button>
|
|
</ButtonGroup>
|
|
</Stack>
|
|
</Scrollable>
|
|
);
|
|
};
|
|
Welcome.getLayout = getLayout;
|
|
export default Welcome;
|