kopia lustrzana https://github.com/bugout-dev/moonstream
Sergei Sumarokov
GitHub
commit
c683f85f46
|
|
@ -1,26 +1,19 @@
|
|||
import React, {
|
||||
useState,
|
||||
useContext,
|
||||
Suspense,
|
||||
useEffect,
|
||||
useLayoutEffect,
|
||||
} from "react";
|
||||
import React, { useState, Suspense, useEffect, useLayoutEffect } from "react";
|
||||
import {
|
||||
Fade,
|
||||
Flex,
|
||||
Heading,
|
||||
Box,
|
||||
Image as ChakraImage,
|
||||
Button,
|
||||
Center,
|
||||
chakra,
|
||||
Stack,
|
||||
Link,
|
||||
SimpleGrid,
|
||||
useMediaQuery,
|
||||
Grid,
|
||||
Text,
|
||||
GridItem,
|
||||
SimpleGrid,
|
||||
Image as ChakraImage,
|
||||
} from "@chakra-ui/react";
|
||||
import dynamic from "next/dynamic";
|
||||
import useUser from "../src/core/hooks/useUser";
|
||||
|
|
@ -30,56 +23,15 @@ import {
|
|||
MIXPANEL_PROPS,
|
||||
MIXPANEL_EVENTS,
|
||||
} from "../src/core/providers/AnalyticsProvider/constants";
|
||||
import UIContext from "../src/core/providers/UIProvider/context";
|
||||
import { AWS_ASSETS_PATH } from "../src/core/constants";
|
||||
import mixpanel from "mixpanel-browser";
|
||||
const SplitWithImage = dynamic(
|
||||
() => import("../src/components/SplitWithImage"),
|
||||
{
|
||||
ssr: false,
|
||||
}
|
||||
);
|
||||
|
||||
const ConnectedButtons = dynamic(
|
||||
() => import("../src/components/ConnectedButtons"),
|
||||
{
|
||||
ssr: false,
|
||||
}
|
||||
);
|
||||
|
||||
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",
|
||||
fontSize: ["4xl", "5xl", "4xl", "5xl", "6xl", "7xl"],
|
||||
|
|
@ -94,12 +46,11 @@ const assets = {
|
|||
pendingTransactions: `${AWS_ASSETS_PATH}/Ethereum+pending+transactions.png`,
|
||||
priceInformation: `${AWS_ASSETS_PATH}/Price+information.png`,
|
||||
socialMediaPosts: `${AWS_ASSETS_PATH}/Social+media+posts.png`,
|
||||
algorithmicFunds: `${AWS_ASSETS_PATH}/algorithmic+funds.png`,
|
||||
cryptoTraders: `${AWS_ASSETS_PATH}/crypto+traders.png`,
|
||||
comicWhite: `${AWS_ASSETS_PATH}/moonstream-comic-white.png`,
|
||||
smartDevelopers: `${AWS_ASSETS_PATH}/smart+contract+developers.png`,
|
||||
};
|
||||
const Homepage = () => {
|
||||
const ui = useContext(UIContext);
|
||||
const [background, setBackground] = useState("background720");
|
||||
const [backgroundLoaded720, setBackgroundLoaded720] = useState(false);
|
||||
const [backgroundLoaded1920, setBackgroundLoaded1920] = useState(false);
|
||||
|
|
@ -254,7 +205,7 @@ const Homepage = () => {
|
|||
fontWeight="semibold"
|
||||
color="white"
|
||||
>
|
||||
All the crypto data you care about in a single stream
|
||||
Open source blockchain analytics
|
||||
</Heading>
|
||||
<chakra.span
|
||||
my={12}
|
||||
|
|
@ -262,17 +213,9 @@ const Homepage = () => {
|
|||
display="inline-block"
|
||||
color="blue.200"
|
||||
>
|
||||
Get all the crypto data you need in a single stream.
|
||||
From pending transactions in the Ethereum transaction
|
||||
pool to Elon Musk’s latest tweets.
|
||||
</chakra.span>
|
||||
<chakra.span
|
||||
fontSize={["md", "2xl", "3xl", "3xl", "3xl", "4xl"]}
|
||||
display="inline-block"
|
||||
color="blue.300"
|
||||
>
|
||||
Access this data through the Moonstream dashboard or
|
||||
API
|
||||
Product analytics for Web3. Moonstream helps you
|
||||
understand exactly how people are using your smart
|
||||
contracts.
|
||||
</chakra.span>
|
||||
</Stack>
|
||||
</Flex>
|
||||
|
|
@ -280,16 +223,8 @@ const Homepage = () => {
|
|||
</chakra.header>
|
||||
</GridItem>
|
||||
|
||||
<GridItem
|
||||
px="7%"
|
||||
colSpan="12"
|
||||
// pt={["20px", "20px", "100px", null, "120px"]}
|
||||
pt={0}
|
||||
pb={["20px", "56px", null, "184px"]}
|
||||
minH="100vh"
|
||||
>
|
||||
<GridItem px="7%" colSpan="12" pt={0} minH="100vh">
|
||||
<chakra.span
|
||||
// {...HEADING_PROPS}
|
||||
textAlign="center"
|
||||
fontWeight="600"
|
||||
fontSize="lg"
|
||||
|
|
@ -298,13 +233,17 @@ const Homepage = () => {
|
|||
>
|
||||
<Text
|
||||
mb={18}
|
||||
// mb={[12, 12, 12, null, 48]}
|
||||
fontSize={["md", "2xl", "3xl", "3xl", "3xl", "4xl"]}
|
||||
>
|
||||
{` We believe in financial inclusion. Proprietary technologies
|
||||
are not financially inclusive. That's why all our software
|
||||
is `}
|
||||
<chakra.span display="inline-block" textColor="orange.900">
|
||||
We believe that the blockchain is for everyone. This
|
||||
requires complete <b>transparency</b>. That’s why all our
|
||||
software is{" "}
|
||||
<chakra.span
|
||||
display="inline-block"
|
||||
textColor="orange.900"
|
||||
as={Link}
|
||||
href="https://github.com/bugout-dev/moonstream"
|
||||
>
|
||||
<i>open source</i>
|
||||
</chakra.span>
|
||||
</Text>
|
||||
|
|
@ -313,10 +252,10 @@ const Homepage = () => {
|
|||
<Heading
|
||||
{...HEADING_PROPS}
|
||||
textAlign="center"
|
||||
mt={16}
|
||||
pb={[12, 12, 12, null, 48]}
|
||||
mt={48}
|
||||
pb={[12, 12, 12, null, 24]}
|
||||
>
|
||||
Data you can add to your stream:
|
||||
See how your smart contracts are being used from:
|
||||
</Heading>
|
||||
<SimpleGrid columns={[1, 2, 2, 4, null, 4]}>
|
||||
<Stack spacing={1} px={1} alignItems="center">
|
||||
|
|
@ -369,193 +308,53 @@ const Homepage = () => {
|
|||
w="100%"
|
||||
direction={["column", "row", "column", null, "column"]}
|
||||
flexWrap={["nowrap", "nowrap", "nowrap", null, "nowrap"]}
|
||||
pb="66px"
|
||||
pb="32px"
|
||||
>
|
||||
<ConnectedButtons
|
||||
title={"You are..."}
|
||||
button1={{
|
||||
label: "Crypto trader",
|
||||
link: "/#cryptoTrader",
|
||||
title={"You need a fusion of..."}
|
||||
button4={{
|
||||
label: "Blockchain analytics",
|
||||
link: "/#analytics",
|
||||
onClick: () => {
|
||||
mixpanel.get_distinct_id() &&
|
||||
mixpanel.track(`${MIXPANEL_EVENTS.BUTTON_CLICKED}`, {
|
||||
[`${MIXPANEL_PROPS.BUTTON_NAME}`]: `scroll to CryptoTrader`,
|
||||
[`${MIXPANEL_PROPS.BUTTON_NAME}`]: `Connected buttons: scroll to analytics`,
|
||||
});
|
||||
},
|
||||
}}
|
||||
button1={{
|
||||
label: "TX pool real time data",
|
||||
link: "/#txpool",
|
||||
onClick: () => {
|
||||
mixpanel.get_distinct_id() &&
|
||||
mixpanel.track(`${MIXPANEL_EVENTS.BUTTON_CLICKED}`, {
|
||||
[`${MIXPANEL_PROPS.BUTTON_NAME}`]: `Connected buttons: scroll to txpool`,
|
||||
});
|
||||
},
|
||||
}}
|
||||
button2={{
|
||||
label: "Algorithmic Fund",
|
||||
link: "/#algoFund",
|
||||
label: "Exchange price stream",
|
||||
link: "/#exchanges",
|
||||
onClick: () => {
|
||||
mixpanel.get_distinct_id() &&
|
||||
mixpanel.track(`${MIXPANEL_EVENTS.BUTTON_CLICKED}`, {
|
||||
[`${MIXPANEL_PROPS.BUTTON_NAME}`]: `scroll to AlgoFund`,
|
||||
[`${MIXPANEL_PROPS.BUTTON_NAME}`]: `Connected buttons: scroll to exchanges`,
|
||||
});
|
||||
},
|
||||
}}
|
||||
button3={{
|
||||
label: "Developer",
|
||||
label: "Social media posts",
|
||||
link: "/#smartDeveloper",
|
||||
onClick: () => {
|
||||
mixpanel.get_distinct_id() &&
|
||||
mixpanel.track(`${MIXPANEL_EVENTS.BUTTON_CLICKED}`, {
|
||||
[`${MIXPANEL_PROPS.BUTTON_NAME}`]: `scroll to Developer`,
|
||||
[`${MIXPANEL_PROPS.BUTTON_NAME}`]: `Connected buttons: scroll to developer`,
|
||||
});
|
||||
},
|
||||
}}
|
||||
/>
|
||||
</Flex>
|
||||
</GridItem>
|
||||
<GridItem
|
||||
px="7%"
|
||||
colSpan="12"
|
||||
pt={["1rem", "1rem", "5.125rem", null, "5.125rem"]}
|
||||
pb={["0", "66px", null, "66px"]}
|
||||
id="cryptoTrader"
|
||||
minH={ui.isMobileView ? "100vh" : null}
|
||||
>
|
||||
<SplitWithImage
|
||||
cta={{
|
||||
label: "I want early access!",
|
||||
onClick: () => {
|
||||
mixpanel.get_distinct_id() &&
|
||||
mixpanel.track(`${MIXPANEL_EVENTS.BUTTON_CLICKED}`, {
|
||||
[`${MIXPANEL_PROPS.BUTTON_NAME}`]: `Early access CTA: Crypto trader`,
|
||||
});
|
||||
toggleModal("hubspot-trader");
|
||||
},
|
||||
}}
|
||||
elementName={"element1"}
|
||||
colorScheme="green"
|
||||
badge={`For crypto traders`}
|
||||
title={``}
|
||||
body={``}
|
||||
bullets={[
|
||||
{
|
||||
text: `Subscribe to the defi contracts you care about`,
|
||||
icon: FaFileContract,
|
||||
color: "green.50",
|
||||
bgColor: "green.900",
|
||||
},
|
||||
{
|
||||
text: `Make sense of how others are calling these contracts using Moonstream dashboards.
|
||||
`,
|
||||
icon: RiDashboardFill,
|
||||
color: "green.50",
|
||||
bgColor: "green.900",
|
||||
},
|
||||
{
|
||||
text: `Get data directly from the transaction pool through our global network of Ethereum nodes`,
|
||||
icon: GiMeshBall,
|
||||
color: "green.50",
|
||||
bgColor: "green.900",
|
||||
},
|
||||
]}
|
||||
imgURL={assets["cryptoTraders"]}
|
||||
/>
|
||||
</GridItem>
|
||||
<GridItem
|
||||
px="7%"
|
||||
colSpan="12"
|
||||
pt={["1rem", "1rem", "5.125rem", null, "5.125rem"]}
|
||||
pb={["0", "66px", null, "66px"]}
|
||||
id="algoFund"
|
||||
minH={ui.isMobileView ? "100vh" : null}
|
||||
>
|
||||
<SplitWithImage
|
||||
cta={{
|
||||
label: "I want early access!",
|
||||
onClick: () => {
|
||||
mixpanel.get_distinct_id() &&
|
||||
mixpanel.track(`${MIXPANEL_EVENTS.BUTTON_CLICKED}`, {
|
||||
[`${MIXPANEL_PROPS.BUTTON_NAME}`]: `Early access CTA: Algo fund`,
|
||||
});
|
||||
toggleModal("hubspot-fund");
|
||||
},
|
||||
}}
|
||||
elementName={"element2"}
|
||||
mirror={true}
|
||||
colorScheme="orange"
|
||||
badge={`For algorithmic funds`}
|
||||
bullets={[
|
||||
{
|
||||
text: `Get API access to your stream`,
|
||||
icon: AiFillApi,
|
||||
color: "orange.50",
|
||||
bgColor: "orange.900",
|
||||
},
|
||||
{
|
||||
text: `Set conditions that trigger predefined actions`,
|
||||
icon: GiLogicGateXor,
|
||||
color: "orange.50",
|
||||
bgColor: "orange.900",
|
||||
},
|
||||
{
|
||||
text: `Execute transactions directly on Moonstream nodes`,
|
||||
icon: BiTransfer,
|
||||
color: "orange.50",
|
||||
bgColor: "orange.900",
|
||||
},
|
||||
]}
|
||||
imgURL={assets["algorithmicFunds"]}
|
||||
/>
|
||||
</GridItem>
|
||||
<GridItem
|
||||
px="7%"
|
||||
colSpan="12"
|
||||
pt={["1rem", "1rem", "5.125rem", null, "5.125rem"]}
|
||||
pb={["0", "66px", null, "66px"]}
|
||||
id="smartDeveloper"
|
||||
minH={ui.isMobileView ? "100vh" : null}
|
||||
>
|
||||
<SplitWithImage
|
||||
cta={{
|
||||
label: "I want early access!",
|
||||
onClick: () => {
|
||||
mixpanel.get_distinct_id() &&
|
||||
mixpanel.track(`${MIXPANEL_EVENTS.BUTTON_CLICKED}`, {
|
||||
[`${MIXPANEL_PROPS.BUTTON_NAME}`]: `Early access CTA: developer`,
|
||||
});
|
||||
toggleModal("hubspot-developer");
|
||||
},
|
||||
}}
|
||||
socialButton={{
|
||||
url: "https://github.com/bugout-dev/moonstream/",
|
||||
network: "github",
|
||||
label: "See our github",
|
||||
onClick: () => {
|
||||
mixpanel.get_distinct_id() &&
|
||||
mixpanel.track(`${MIXPANEL_EVENTS.BUTTON_CLICKED}`, {
|
||||
[`${MIXPANEL_PROPS.BUTTON_NAME}`]: `Github link in landing page`,
|
||||
});
|
||||
},
|
||||
}}
|
||||
elementName={"element3"}
|
||||
colorScheme="blue"
|
||||
badge={`For smart contract developers`}
|
||||
bullets={[
|
||||
{
|
||||
text: `See how people use your smart contracts`,
|
||||
icon: IoTelescopeSharp,
|
||||
color: "blue.50",
|
||||
bgColor: "blue.900",
|
||||
},
|
||||
{
|
||||
text: `Set up alerts on suspicious activity`,
|
||||
icon: GiSuspicious,
|
||||
color: "blue.50",
|
||||
bgColor: "blue.900",
|
||||
},
|
||||
{
|
||||
text: `Register webhooks to connect your off-chain infrastructure`,
|
||||
icon: GiHook,
|
||||
color: "blue.50",
|
||||
bgColor: "blue.900",
|
||||
},
|
||||
]}
|
||||
imgURL={assets["smartDevelopers"]}
|
||||
/>
|
||||
</GridItem>
|
||||
<GridItem
|
||||
placeItems="center"
|
||||
w="100%"
|
||||
|
|
@ -564,24 +363,43 @@ const Homepage = () => {
|
|||
pb="120px"
|
||||
>
|
||||
<Center>
|
||||
<Button
|
||||
as={Link}
|
||||
isExternal
|
||||
href={"https://discord.gg/K56VNUQGvA"}
|
||||
size="lg"
|
||||
variant="solid"
|
||||
colorScheme="green"
|
||||
id="test"
|
||||
onClick={() => {
|
||||
mixpanel.get_distinct_id() &&
|
||||
mixpanel.track(`${MIXPANEL_EVENTS.BUTTON_CLICKED}`, {
|
||||
[`${MIXPANEL_PROPS.BUTTON_NAME}`]: `Join our discord`,
|
||||
});
|
||||
toggleModal("hubspot");
|
||||
}}
|
||||
>
|
||||
Join our discord
|
||||
</Button>
|
||||
<Stack placeContent="center">
|
||||
<Text fontWeight="500" fontSize="24px">
|
||||
Want to find out more? Reach out to us on{" "}
|
||||
<Link
|
||||
color="orange.900"
|
||||
onClick={() => {
|
||||
mixpanel.get_distinct_id() &&
|
||||
mixpanel.track(
|
||||
`${MIXPANEL_EVENTS.BUTTON_CLICKED}`,
|
||||
{
|
||||
[`${MIXPANEL_PROPS.BUTTON_NAME}`]: `Join our discord`,
|
||||
}
|
||||
);
|
||||
}}
|
||||
isExternal
|
||||
href={"https://discord.gg/K56VNUQGvA"}
|
||||
>
|
||||
Discord
|
||||
</Link>{" "}
|
||||
or{" "}
|
||||
<Link
|
||||
color="orange.900"
|
||||
onClick={() => {
|
||||
mixpanel.get_distinct_id() &&
|
||||
mixpanel.track(
|
||||
`${MIXPANEL_EVENTS.BUTTON_CLICKED}`,
|
||||
{
|
||||
[`${MIXPANEL_PROPS.BUTTON_NAME}`]: `Early access CTA: developer want to find more button`,
|
||||
}
|
||||
);
|
||||
toggleModal("hubspot-developer");
|
||||
}}
|
||||
>
|
||||
request early access
|
||||
</Link>
|
||||
</Text>
|
||||
</Stack>
|
||||
</Center>
|
||||
</GridItem>
|
||||
</Grid>
|
||||
|
|
|
|||
|
|
@ -1,26 +1,30 @@
|
|||
import React, { useEffect, useState, useLayoutEffect } from "react";
|
||||
import {
|
||||
Heading,
|
||||
Text,
|
||||
Flex,
|
||||
Link,
|
||||
Stack,
|
||||
chakra,
|
||||
useMediaQuery,
|
||||
useBreakpointValue,
|
||||
Center,
|
||||
} from "@chakra-ui/react";
|
||||
import { DEFAULT_METATAGS, AWS_ASSETS_PATH } from "../../src/core/constants";
|
||||
export async function getStaticProps() {
|
||||
return {
|
||||
props: { metaTags: { ...DEFAULT_METATAGS } },
|
||||
};
|
||||
}
|
||||
|
||||
import { AWS_ASSETS_PATH } from "../../src/core/constants";
|
||||
import SplitWithImage from "../../src/components/SplitWithImage";
|
||||
import mixpanel from "mixpanel-browser";
|
||||
import {
|
||||
MIXPANEL_PROPS,
|
||||
MIXPANEL_EVENTS,
|
||||
} from "../../src/core/providers/AnalyticsProvider/constants";
|
||||
const assets = {
|
||||
background720: `${AWS_ASSETS_PATH}/product-background-720x405.png`,
|
||||
background1920: `${AWS_ASSETS_PATH}/product-background-720x405.png`,
|
||||
background2880: `${AWS_ASSETS_PATH}/product-background-720x405.png`,
|
||||
background3840: `${AWS_ASSETS_PATH}/product-background-720x405.png`,
|
||||
environment: `${AWS_ASSETS_PATH}/product_comic/environment.png`,
|
||||
developers: `${AWS_ASSETS_PATH}/product_comic/developers.png`,
|
||||
meanwhile: `${AWS_ASSETS_PATH}/product_comic/meanwhile.png`,
|
||||
struggle: `${AWS_ASSETS_PATH}/product_comic/struggle.png`,
|
||||
solution: `${AWS_ASSETS_PATH}/product_comic/solution.png`,
|
||||
};
|
||||
|
||||
const Product = () => {
|
||||
|
|
@ -131,72 +135,115 @@ const Product = () => {
|
|||
alignItems="center"
|
||||
pb={24}
|
||||
>
|
||||
<Stack mx={margin} my={12} maxW="1700px" textAlign="justify">
|
||||
<Heading
|
||||
as="h2"
|
||||
size="md"
|
||||
placeSelf="center"
|
||||
px={12}
|
||||
py={2}
|
||||
borderTopRadius="xl"
|
||||
>
|
||||
{`Why you'll love Moonstream`}
|
||||
</Heading>
|
||||
<chakra.span pl={2} px={12} py={2}>
|
||||
<Text mb={3}>
|
||||
We strive for financial inclusion. With cryptocurrencies becoming
|
||||
mainstream, now is the time for anyone with a computer and access to
|
||||
the Internet to utilize this opportunity to make passive income.
|
||||
We’re here to make it easier.
|
||||
</Text>
|
||||
<Text mb={3}>
|
||||
Right now our source of data is Ethereum blockchain. Our goal is to
|
||||
provide a live view of the transactions taking place on every public
|
||||
blockchain - from the activity of specific accounts or smart
|
||||
contracts to updates about general market movements.
|
||||
</Text>
|
||||
<Text mb={3}>
|
||||
This information comes from the blockchains themselves, from their
|
||||
mempools/transaction pools, and from centralized exchanges, social
|
||||
media, and the news. This forms a stream of information tailored to
|
||||
your specific needs.
|
||||
</Text>
|
||||
<Text mb={3}>
|
||||
We’re giving you a macro view of the crypto market with direct
|
||||
access from Moonstream dashboards to execute transactions. You can
|
||||
also set up programs which execute (on- or off-chain) when your
|
||||
stream meets certain conditions.
|
||||
</Text>
|
||||
<Text mb={3}>
|
||||
Moonstream is accessible through dashboard, API and webhooks.
|
||||
</Text>
|
||||
<Text mb={3}>
|
||||
Moonstream’s financial inclusion goes beyond providing access to
|
||||
data. All of our work is open source as we do not believe that
|
||||
proprietary technologies are financially inclusive.
|
||||
</Text>
|
||||
<Text mb={3}>
|
||||
You can read{" "}
|
||||
<Link
|
||||
textColor="orange.900"
|
||||
isExternal
|
||||
href="https://github.com/bugout-dev/moonstream"
|
||||
>
|
||||
our code on GitHub.
|
||||
</Link>{" "}
|
||||
and keep track of our progress using{" "}
|
||||
<Link
|
||||
textColor="orange.900"
|
||||
isExternal
|
||||
href="https://github.com/bugout-dev/moonstream/milestones"
|
||||
>
|
||||
the Moonstream milestones
|
||||
</Link>
|
||||
.
|
||||
</Text>
|
||||
</chakra.span>
|
||||
<Stack mx={margin} my={[4, 6, 12]} maxW="1700px" textAlign="justify">
|
||||
<SplitWithImage
|
||||
py={["12px", "24px", "48px"]}
|
||||
title={`Smart contracts are starting to dominate blockchain activity`}
|
||||
elementName={"element1"}
|
||||
colorScheme="blue"
|
||||
body={`web3 stands for decentralized automation through smart contracts.
|
||||
Smart contract developers are building the future of the decentralized web.
|
||||
`}
|
||||
imgURL={assets["environment"]}
|
||||
imgBoxShadow="lg"
|
||||
/>
|
||||
<SplitWithImage
|
||||
mirror
|
||||
py={["12px", "24px", "48px"]}
|
||||
elementName={"element1"}
|
||||
colorScheme="blue"
|
||||
title={`But smart contract activity can be opaque`}
|
||||
body={`Even smart contract developers have a difficult time finding out who is using their smart contracts and how.
|
||||
This makes it difficult for them to improve their users’ experience and to secure their decentralized applications.`}
|
||||
imgURL={assets["developers"]}
|
||||
imgBoxShadow="lg"
|
||||
/>
|
||||
<SplitWithImage
|
||||
elementName={"element1"}
|
||||
colorScheme="blue"
|
||||
py={["12px", "24px", "48px"]}
|
||||
title={`Blockchain explorers are not enough`}
|
||||
body={`Today, analyzing smart contract activity involves viewing data in or crawling data from blockchain explorers.
|
||||
The process is tedious and unreliable, and the data is difficult to interpret.
|
||||
`}
|
||||
imgURL={assets["struggle"]}
|
||||
imgBoxShadow="lg"
|
||||
/>
|
||||
<SplitWithImage
|
||||
mirror
|
||||
elementName={"element1"}
|
||||
py={["12px", "24px", "48px"]}
|
||||
colorScheme="blue"
|
||||
title={`Meanwhile, on Web 2.0`}
|
||||
body={`Developers on the centralized web have access to tools like Google Analytics and Mixpanel.
|
||||
They can instantly build dashboards to understand their user journeys and identify any issues that their users may be experiencing.
|
||||
Nothing like this exists for the decentralized web… until now.
|
||||
`}
|
||||
imgURL={assets["meanwhile"]}
|
||||
imgBoxShadow="lg"
|
||||
/>
|
||||
<SplitWithImage
|
||||
elementName={"element1"}
|
||||
colorScheme="blue"
|
||||
py={["12px", "24px", "48px"]}
|
||||
title={`Meet Moonstream!`}
|
||||
body={`Moonstream brings product analytics to web3.
|
||||
Instantly get analytics for any smart contract you write.
|
||||
We don’t care which EIPs you implement and which ones you don’t, or how custom your code is. Moonstream will immediately start giving you insights into what your users are doing with your contracts.
|
||||
`}
|
||||
imgURL={assets["solution"]}
|
||||
imgBoxShadow="lg"
|
||||
/>
|
||||
<Center>
|
||||
<Stack placeContent="center">
|
||||
<Text fontWeight="500" fontSize="24px">
|
||||
To find out more, join us on{" "}
|
||||
<Link
|
||||
color="orange.900"
|
||||
onClick={() => {
|
||||
mixpanel.get_distinct_id() &&
|
||||
mixpanel.track(`${MIXPANEL_EVENTS.BUTTON_CLICKED}`, {
|
||||
[`${MIXPANEL_PROPS.BUTTON_NAME}`]: `Join our discord`,
|
||||
});
|
||||
}}
|
||||
isExternal
|
||||
href={"https://discord.gg/K56VNUQGvA"}
|
||||
>
|
||||
Discord
|
||||
</Link>{" "}
|
||||
</Text>
|
||||
</Stack>
|
||||
</Center>
|
||||
</Stack>
|
||||
</Flex>
|
||||
);
|
||||
};
|
||||
|
||||
export async function getStaticProps() {
|
||||
const metaTags = {
|
||||
title: "Moonstream.to: web3 analytics",
|
||||
description:
|
||||
"Moonstream brings product analytics to web3. Instantly get analytics for any smart contract you write.",
|
||||
keywords:
|
||||
"blockchain, crypto, data, trading, smart contracts, ethereum, solana, transactions, defi, finance, decentralized, analytics, product",
|
||||
url: "https://www.moonstream.to/product",
|
||||
image: `${AWS_ASSETS_PATH}/product_comic/solution.png`,
|
||||
};
|
||||
|
||||
const assetPreload = Object.keys(assets).map((key) => {
|
||||
return {
|
||||
rel: "preload",
|
||||
href: assets[key],
|
||||
as: "image",
|
||||
};
|
||||
});
|
||||
const preconnects = [{ rel: "preconnect", href: "https://s3.amazonaws.com" }];
|
||||
|
||||
const preloads = assetPreload.concat(preconnects);
|
||||
|
||||
return {
|
||||
props: { metaTags, preloads },
|
||||
};
|
||||
}
|
||||
|
||||
export default Product;
|
||||
|
|
|
|||
|
|
@ -8,8 +8,6 @@ import {
|
|||
Stack,
|
||||
ButtonGroup,
|
||||
Spacer,
|
||||
Radio,
|
||||
RadioGroup,
|
||||
UnorderedList,
|
||||
ListItem,
|
||||
Fade,
|
||||
|
|
@ -28,7 +26,6 @@ import {
|
|||
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";
|
||||
|
|
@ -39,8 +36,6 @@ import { FaFilter } from "react-icons/fa";
|
|||
const 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(() => {
|
||||
|
|
@ -53,14 +48,6 @@ const Welcome = () => {
|
|||
ui.setOnboardingStep(index);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (profile && isLoaded) {
|
||||
mixpanel.people.set({
|
||||
[`${MIXPANEL_PROPS.USER_SPECIALITY}`]: profile,
|
||||
});
|
||||
}
|
||||
}, [profile, MIXPANEL_PROPS, isLoaded, mixpanel]);
|
||||
|
||||
const SubscriptonCreatedCallback = () => {
|
||||
setShowSubscriptionForm.off();
|
||||
};
|
||||
|
|
@ -250,48 +237,6 @@ const Welcome = () => {
|
|||
</AccordionItem>
|
||||
</Accordion>
|
||||
</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 create the best possible experience, we would love
|
||||
to find out some more 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
|
||||
position="relative"
|
||||
onChange={setProfile}
|
||||
value={profile}
|
||||
// fontWeight="bold"
|
||||
colorScheme="orange"
|
||||
// py={0}
|
||||
// my={0}
|
||||
>
|
||||
<Stack
|
||||
direction={["column", "row", null]}
|
||||
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>
|
||||
)}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,13 @@
|
|||
import React, { useEffect, useRef, useContext } from "react";
|
||||
import { Flex, Heading, Button, Link, SimpleGrid } from "@chakra-ui/react";
|
||||
import {
|
||||
Flex,
|
||||
Heading,
|
||||
Button,
|
||||
Link,
|
||||
SimpleGrid,
|
||||
useBreakpointValue,
|
||||
useMediaQuery,
|
||||
} from "@chakra-ui/react";
|
||||
import Xarrow, { useXarrow } from "react-xarrows";
|
||||
import UIContext from "../core/providers/UIProvider/context";
|
||||
|
||||
|
|
@ -9,6 +17,9 @@ const ArrowCTA = (props) => {
|
|||
const box1Ref = useRef(null);
|
||||
const box2Ref = useRef(null);
|
||||
const box3Ref = useRef(null);
|
||||
const box4Ref = useRef(null);
|
||||
|
||||
// const gridRow = props.button4 ? [5, 4, 2, null, 2] : [4, 3, 2, null, 2];
|
||||
|
||||
const updateXarrow = useXarrow();
|
||||
|
||||
|
|
@ -17,24 +28,65 @@ const ArrowCTA = (props) => {
|
|||
// eslint-disable-next-line
|
||||
}, [ui.isMobileView]);
|
||||
|
||||
const xarrowEntrySide = useBreakpointValue({
|
||||
base: "top",
|
||||
sm: "left",
|
||||
md: "top",
|
||||
lg: "top",
|
||||
xl: "top",
|
||||
"2xl": "top",
|
||||
});
|
||||
|
||||
const [isLargerThan580px] = useMediaQuery(["(min-width: 580px)"]);
|
||||
|
||||
const buttonWidth = [
|
||||
"190px",
|
||||
isLargerThan580px ? "200px" : "140px",
|
||||
"230px",
|
||||
null,
|
||||
"280px",
|
||||
];
|
||||
|
||||
const fontSize = [
|
||||
undefined,
|
||||
isLargerThan580px ? undefined : "12px",
|
||||
undefined,
|
||||
null,
|
||||
];
|
||||
|
||||
const speedConst = -0.05;
|
||||
|
||||
return (
|
||||
<SimpleGrid
|
||||
columns={[1, 2, 3, null, 3]}
|
||||
columns={props.button4 ? [1, 2, 4, null, 4] : [1, 2, 3, null, 3]}
|
||||
spacing={[10, 0, 10, null, 10]}
|
||||
placeItems="center"
|
||||
w="100%"
|
||||
_after={{}}
|
||||
>
|
||||
<Flex
|
||||
gridColumn={[1, 1, 2, null, 2]}
|
||||
gridRow={[1, 2, 1, null, 1]}
|
||||
gridColumn={
|
||||
props.button4
|
||||
? [1, 1, `2 / span 2`, null, "2 / span 2"]
|
||||
: [1, 1, 2, null, 2]
|
||||
}
|
||||
// gridColumnStart={props.button4 ? [1, 2] : [0, 1]}
|
||||
// gridColumnEnd={props.button4 ? [1, 4] : [0, 3]}
|
||||
gridRow={
|
||||
props.button4 ? [1, `2 / span 2`, 1, null, 1] : [1, 2, 1, null, 1]
|
||||
}
|
||||
// mb={14}
|
||||
w={["180px", "180px", "250px", null, "250px"]}
|
||||
// w={["180px", "180px", "250px", null, "250px"]}
|
||||
w="100%"
|
||||
// ml="16px"
|
||||
placeSelf="center"
|
||||
placeContent="center"
|
||||
>
|
||||
<Heading m={0} ref={box0Ref} fontSize={["lg", "lg", "lg", null, "lg"]}>
|
||||
<Heading
|
||||
m={0}
|
||||
ref={box0Ref}
|
||||
fontSize={["lg", isLargerThan580px ? "lg" : "sm", "lg", null, "lg"]}
|
||||
>
|
||||
{props.title}
|
||||
</Heading>
|
||||
</Flex>
|
||||
|
|
@ -50,8 +102,9 @@ const ArrowCTA = (props) => {
|
|||
variant="solid"
|
||||
colorScheme="green"
|
||||
className="MoonStockSpeciality element1"
|
||||
w={["180px", "180px", "250px", null, "250px"]}
|
||||
w={buttonWidth}
|
||||
onClick={props.button1.onClick}
|
||||
fontSize={fontSize}
|
||||
>
|
||||
{props.button1.label}
|
||||
</Button>
|
||||
|
|
@ -67,7 +120,8 @@ const ArrowCTA = (props) => {
|
|||
variant="solid"
|
||||
colorScheme="orange"
|
||||
className="MoonStockSpeciality element2"
|
||||
w={["180px", "180px", "250px", null, "250px"]}
|
||||
w={buttonWidth}
|
||||
fontSize={fontSize}
|
||||
onClick={props.button2.onClick}
|
||||
>
|
||||
{props.button2.label}
|
||||
|
|
@ -83,46 +137,82 @@ const ArrowCTA = (props) => {
|
|||
boxShadow="md"
|
||||
variant="solid"
|
||||
colorScheme="blue"
|
||||
w={["180px", "180px", "250px", null, "250px"]}
|
||||
w={buttonWidth}
|
||||
fontSize={fontSize}
|
||||
onClick={props.button3.onClick}
|
||||
>
|
||||
{props.button3.label}
|
||||
</Button>
|
||||
{props.button4 && (
|
||||
<Button
|
||||
as={props.button4.link && Link}
|
||||
href={props.button4.link ?? null}
|
||||
gridColumn={[1, 2, 4, null, 4]}
|
||||
gridRow={[5, 4, 2, null, 2]}
|
||||
zIndex={10}
|
||||
ref={box4Ref}
|
||||
boxShadow="md"
|
||||
variant="solid"
|
||||
colorScheme="red"
|
||||
w={buttonWidth}
|
||||
fontSize={fontSize}
|
||||
onClick={props.button4.onClick}
|
||||
>
|
||||
{props.button4.label}
|
||||
</Button>
|
||||
)}
|
||||
<Xarrow
|
||||
// showXarrow={!!box0Ref.current && !!box1Ref.current}
|
||||
dashness={{
|
||||
strokeLen: 10,
|
||||
nonStrokeLen: 15,
|
||||
animation: -2,
|
||||
animation: speedConst,
|
||||
}}
|
||||
// animateDrawing={true}
|
||||
color="#92D050"
|
||||
startAnchor={xarrowEntrySide ?? "top"}
|
||||
showHead={false}
|
||||
start={box0Ref} //can be react ref
|
||||
end={box1Ref} //or an id
|
||||
start={box1Ref} //can be react ref
|
||||
end={box0Ref} //or an id
|
||||
/>
|
||||
<Xarrow
|
||||
dashness={{
|
||||
strokeLen: 10,
|
||||
nonStrokeLen: 15,
|
||||
animation: -1,
|
||||
animation: speedConst * 9,
|
||||
}}
|
||||
color="#FD5602"
|
||||
startAnchor={xarrowEntrySide ?? "top"}
|
||||
showHead={false}
|
||||
start={box0Ref} //can be react ref
|
||||
end={box2Ref} //or an id
|
||||
start={box2Ref} //can be react ref
|
||||
end={box0Ref} //or an id
|
||||
/>
|
||||
<Xarrow
|
||||
dashness={{
|
||||
strokeLen: 10,
|
||||
nonStrokeLen: 15,
|
||||
animation: -4,
|
||||
animation: speedConst * 6,
|
||||
}}
|
||||
color="#212990"
|
||||
startAnchor={xarrowEntrySide ?? "top"}
|
||||
showHead={false}
|
||||
start={box0Ref} //can be react ref
|
||||
end={box3Ref} //or an id
|
||||
start={box3Ref} //can be react ref
|
||||
end={box0Ref} //or an id
|
||||
/>
|
||||
{props.button4 && (
|
||||
<Xarrow
|
||||
dashness={{
|
||||
strokeLen: 10,
|
||||
nonStrokeLen: 15,
|
||||
animation: speedConst * 3,
|
||||
}}
|
||||
color="#C53030"
|
||||
startAnchor={xarrowEntrySide ?? "top"}
|
||||
showHead={false}
|
||||
start={box4Ref} //can be react ref
|
||||
end={box0Ref} //or an id
|
||||
/>
|
||||
)}
|
||||
</SimpleGrid>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -118,6 +118,14 @@ const Sidebar = () => {
|
|||
>
|
||||
Login
|
||||
</MenuItem>
|
||||
<MenuItem>
|
||||
{" "}
|
||||
<RouterLink href="/product">Product </RouterLink>
|
||||
</MenuItem>
|
||||
<MenuItem>
|
||||
{" "}
|
||||
<RouterLink href="/team">Team </RouterLink>
|
||||
</MenuItem>
|
||||
</Menu>
|
||||
</SidebarContent>
|
||||
)}
|
||||
|
|
|
|||
|
|
@ -68,6 +68,8 @@ const SplitWithImage = ({
|
|||
elementName,
|
||||
cta,
|
||||
socialButton,
|
||||
imgBoxShadow,
|
||||
py,
|
||||
}) => {
|
||||
var buttonSize = useBreakpointValue({
|
||||
base: { single: "sm", double: "xs" },
|
||||
|
|
@ -94,10 +96,20 @@ const SplitWithImage = ({
|
|||
return () => observer.unobserve(current);
|
||||
}, []);
|
||||
|
||||
const themeColor = useColorModeValue(
|
||||
`${colorScheme}.50`,
|
||||
`${colorScheme}.900`
|
||||
);
|
||||
|
||||
const bgThemeColor = useColorModeValue(
|
||||
`${colorScheme}.900`,
|
||||
`${colorScheme}.50`
|
||||
);
|
||||
|
||||
return (
|
||||
<Container
|
||||
maxW={"7xl"}
|
||||
py={0}
|
||||
maxW={"100%"}
|
||||
py={py}
|
||||
className={`fade-in-section ${isVisible ? "is-visible" : ""}`}
|
||||
ref={domRef}
|
||||
>
|
||||
|
|
@ -109,31 +121,34 @@ const SplitWithImage = ({
|
|||
alt={"feature image"}
|
||||
src={imgURL}
|
||||
objectFit={"contain"}
|
||||
boxShadow={imgBoxShadow ?? "inherit"}
|
||||
/>
|
||||
</Flex>
|
||||
)}
|
||||
<Stack spacing={4} justifyContent="center">
|
||||
<Stack direction="row">
|
||||
<Text
|
||||
id={`MoonBadge ${elementName}`}
|
||||
// id={`MoonBadge${elementName}`}
|
||||
textTransform={"uppercase"}
|
||||
color={useColorModeValue(
|
||||
`${colorScheme}.50`,
|
||||
`${colorScheme}.900`
|
||||
)}
|
||||
fontWeight={600}
|
||||
fontSize={"sm"}
|
||||
bg={useColorModeValue(`${colorScheme}.900`, `${colorScheme}.50`)}
|
||||
p={2}
|
||||
alignSelf={mirror && !ui.isMobileView ? "flex-end" : "flex-start"}
|
||||
rounded={"md"}
|
||||
<Stack spacing={[2, 4]} justifyContent="center">
|
||||
{badge && (
|
||||
<Stack
|
||||
direction="row"
|
||||
placeContent={
|
||||
mirror && !ui.isMobileView ? "flex-end" : "flex-start"
|
||||
}
|
||||
>
|
||||
{badge}
|
||||
</Text>
|
||||
</Stack>
|
||||
<Heading>{title}</Heading>
|
||||
<Text color={`blue.500`} fontSize={"lg"}>
|
||||
<Text
|
||||
id={`MoonBadge ${elementName}`}
|
||||
textTransform={"uppercase"}
|
||||
color={themeColor}
|
||||
fontWeight={600}
|
||||
fontSize={["xs", "sm"]}
|
||||
bg={bgThemeColor}
|
||||
p={[1, 2]}
|
||||
rounded={"md"}
|
||||
>
|
||||
{badge}
|
||||
</Text>
|
||||
</Stack>
|
||||
)}
|
||||
<Heading size="md">{title}</Heading>
|
||||
<Text color={`blue.500`} fontSize={["sm", "md", "lg"]}>
|
||||
{body}
|
||||
</Text>
|
||||
<Stack
|
||||
|
|
@ -163,17 +178,19 @@ const SplitWithImage = ({
|
|||
flexWrap="nowrap"
|
||||
display={["column", "column", null, "row"]}
|
||||
>
|
||||
<Button
|
||||
colorScheme={colorScheme}
|
||||
w={["100%", "100%", "fit-content", null]}
|
||||
maxW={["250px", null, "fit-content"]}
|
||||
variant="outline"
|
||||
mt={[0, 0, null, 16]}
|
||||
size={socialButton ? buttonSize.double : buttonSize.single}
|
||||
onClick={cta.onClick}
|
||||
>
|
||||
{cta.label}
|
||||
</Button>
|
||||
{cta && (
|
||||
<Button
|
||||
colorScheme={colorScheme}
|
||||
w={["100%", "100%", "fit-content", null]}
|
||||
maxW={["250px", null, "fit-content"]}
|
||||
variant="outline"
|
||||
mt={[0, 0, null, 16]}
|
||||
size={socialButton ? buttonSize.double : buttonSize.single}
|
||||
onClick={cta.onClick}
|
||||
>
|
||||
{cta.label}
|
||||
</Button>
|
||||
)}
|
||||
|
||||
{socialButton && (
|
||||
<RouteButton
|
||||
|
|
@ -184,7 +201,7 @@ const SplitWithImage = ({
|
|||
mt={[0, 0, null, 16]}
|
||||
size={socialButton ? buttonSize.double : buttonSize.single}
|
||||
variant="outline"
|
||||
colorScheme="blue"
|
||||
colorScheme={colorScheme}
|
||||
leftIcon={<FaGithubSquare />}
|
||||
>
|
||||
git clone moonstream
|
||||
|
|
@ -194,12 +211,14 @@ const SplitWithImage = ({
|
|||
</Stack>
|
||||
</Stack>
|
||||
{(!mirror || ui.isMobileView) && (
|
||||
<Flex justifyContent="center">
|
||||
<Flex justifyContent="center" alignItems="center">
|
||||
<Image
|
||||
rounded={"md"}
|
||||
alt={"feature image"}
|
||||
src={imgURL}
|
||||
objectFit={"contain"}
|
||||
h="fit-content"
|
||||
boxShadow={imgBoxShadow ?? "inherit"}
|
||||
/>
|
||||
</Flex>
|
||||
)}
|
||||
|
|
|
|||
|
|
@ -11,3 +11,4 @@ export const queryCacheProps = {
|
|||
return status === 404 || status === 403 ? false : true;
|
||||
},
|
||||
};
|
||||
export default queryCacheProps;
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@ const Navbar = React.lazy(() => import("../components/Navbar"));
|
|||
|
||||
const RootLayout = (props) => {
|
||||
const ui = useContext(UIContext);
|
||||
const [showBanner, setShowBanner] = useState(true);
|
||||
const [showBanner, setShowBanner] = useState(false);
|
||||
|
||||
return (
|
||||
<Flex
|
||||
|
|
|
|||
Ładowanie…
Reference in New Issue