kopia lustrzana https://github.com/bugout-dev/moonstream
446 wiersze
16 KiB
JavaScript
446 wiersze
16 KiB
JavaScript
import React, { useState, Suspense, useEffect, useLayoutEffect } from "react";
|
||
import {
|
||
Fade,
|
||
Flex,
|
||
Heading,
|
||
Box,
|
||
Center,
|
||
chakra,
|
||
Stack,
|
||
Link,
|
||
useMediaQuery,
|
||
Grid,
|
||
Text,
|
||
GridItem,
|
||
SimpleGrid,
|
||
Image as ChakraImage,
|
||
} from "@chakra-ui/react";
|
||
import dynamic from "next/dynamic";
|
||
import useUser from "../src/core/hooks/useUser";
|
||
import useModals from "../src/core/hooks/useModals";
|
||
import useRouter from "../src/core/hooks/useRouter";
|
||
import {
|
||
MIXPANEL_PROPS,
|
||
MIXPANEL_EVENTS,
|
||
} from "../src/core/providers/AnalyticsProvider/constants";
|
||
import { AWS_ASSETS_PATH } from "../src/core/constants";
|
||
import mixpanel from "mixpanel-browser";
|
||
|
||
const ConnectedButtons = dynamic(
|
||
() => import("../src/components/ConnectedButtons"),
|
||
{
|
||
ssr: false,
|
||
}
|
||
);
|
||
const HEADING_PROPS = {
|
||
fontWeight: "700",
|
||
fontSize: ["4xl", "5xl", "4xl", "5xl", "6xl", "7xl"],
|
||
};
|
||
|
||
const assets = {
|
||
background720: `${AWS_ASSETS_PATH}/background720.png`,
|
||
background1920: `${AWS_ASSETS_PATH}/background720.png`,
|
||
background2880: `${AWS_ASSETS_PATH}/background720.png`,
|
||
background3840: `${AWS_ASSETS_PATH}/background720.png`,
|
||
minedTransactions: `${AWS_ASSETS_PATH}/Ethereum+mined+transactions.png`,
|
||
pendingTransactions: `${AWS_ASSETS_PATH}/Ethereum+pending+transactions.png`,
|
||
priceInformation: `${AWS_ASSETS_PATH}/Price+information.png`,
|
||
socialMediaPosts: `${AWS_ASSETS_PATH}/Social+media+posts.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 [background, setBackground] = useState("background720");
|
||
const [backgroundLoaded720, setBackgroundLoaded720] = useState(false);
|
||
const [backgroundLoaded1920, setBackgroundLoaded1920] = useState(false);
|
||
const [backgroundLoaded2880, setBackgroundLoaded2880] = useState(false);
|
||
const [backgroundLoaded3840, setBackgroundLoaded3840] = useState(false);
|
||
|
||
const router = useRouter();
|
||
const { isInit } = useUser();
|
||
const { toggleModal } = useModals();
|
||
const [
|
||
isLargerThan720px,
|
||
isLargerThan1920px,
|
||
isLargerThan2880px,
|
||
isLargerThan3840px,
|
||
] = useMediaQuery([
|
||
"(min-width: 720px)",
|
||
"(min-width: 1920px)",
|
||
"(min-width: 2880px)",
|
||
"(min-width: 3840px)",
|
||
]);
|
||
|
||
useEffect(() => {
|
||
assets["background720"] = `${AWS_ASSETS_PATH}/background720.png`;
|
||
assets["background1920"] = `${AWS_ASSETS_PATH}/background1920.png`;
|
||
assets["background2880"] = `${AWS_ASSETS_PATH}/background2880.png`;
|
||
assets["background3840"] = `${AWS_ASSETS_PATH}/background3840.png`;
|
||
}, []);
|
||
|
||
useLayoutEffect(() => {
|
||
if (backgroundLoaded3840) {
|
||
setBackground("background3840");
|
||
} else if (backgroundLoaded2880) {
|
||
setBackground("background2880");
|
||
} else if (backgroundLoaded1920) {
|
||
setBackground("background1920");
|
||
} else {
|
||
setBackground("background720");
|
||
}
|
||
}, [
|
||
isLargerThan720px,
|
||
isLargerThan1920px,
|
||
isLargerThan2880px,
|
||
isLargerThan3840px,
|
||
backgroundLoaded720,
|
||
backgroundLoaded1920,
|
||
backgroundLoaded2880,
|
||
backgroundLoaded3840,
|
||
]);
|
||
|
||
useEffect(() => {
|
||
if (
|
||
router.nextRouter.asPath !== "/" &&
|
||
router.nextRouter.asPath.slice(0, 2) !== "/?" &&
|
||
router.nextRouter.asPath.slice(0, 2) !== "/#" &&
|
||
router.nextRouter.asPath.slice(0, 11) !== "/index.html"
|
||
) {
|
||
console.warn("redirect attempt..");
|
||
if (typeof window !== "undefined") {
|
||
console.warn("window present:", window.location.pathname);
|
||
router.replace(router.nextRouter.asPath, router.nextRouter.asPath, {
|
||
shallow: false,
|
||
});
|
||
}
|
||
}
|
||
}, [isInit, router]);
|
||
|
||
useLayoutEffect(() => {
|
||
const imageLoader720 = new Image();
|
||
imageLoader720.src = `${AWS_ASSETS_PATH}/background720.png`;
|
||
imageLoader720.onload = () => {
|
||
setBackgroundLoaded720(true);
|
||
};
|
||
}, []);
|
||
|
||
useLayoutEffect(() => {
|
||
const imageLoader1920 = new Image();
|
||
imageLoader1920.src = `${AWS_ASSETS_PATH}/background1920.png`;
|
||
imageLoader1920.onload = () => {
|
||
setBackgroundLoaded1920(true);
|
||
};
|
||
}, []);
|
||
|
||
useLayoutEffect(() => {
|
||
const imageLoader2880 = new Image();
|
||
imageLoader2880.src = `${AWS_ASSETS_PATH}/background2880.png`;
|
||
imageLoader2880.onload = () => {
|
||
setBackgroundLoaded2880(true);
|
||
};
|
||
}, []);
|
||
|
||
useLayoutEffect(() => {
|
||
const imageLoader3840 = new Image();
|
||
imageLoader3840.src = `${AWS_ASSETS_PATH}/background3840.png`;
|
||
imageLoader3840.onload = () => {
|
||
setBackgroundLoaded3840(true);
|
||
};
|
||
}, []);
|
||
|
||
return (
|
||
<Suspense fallback="">
|
||
<Fade in>
|
||
<Box
|
||
width="100%"
|
||
flexDirection="column"
|
||
sx={{ scrollBehavior: "smooth" }}
|
||
bgSize="cover"
|
||
>
|
||
<Flex
|
||
direction="column"
|
||
h="auto"
|
||
position="relative"
|
||
w="100%"
|
||
overflow="initial"
|
||
pt={0}
|
||
>
|
||
<Suspense fallback={""}></Suspense>
|
||
|
||
<Grid
|
||
templateColumns="repeat(12,1fr)"
|
||
mt={0}
|
||
border="none"
|
||
boxSizing="content-box"
|
||
>
|
||
<GridItem
|
||
mt={0}
|
||
px="0"
|
||
colSpan="12"
|
||
pb={[1, 2, null, 8]}
|
||
minH="100vh"
|
||
>
|
||
<chakra.header boxSize="full" minH="100vh">
|
||
<Box
|
||
bgPos="bottom"
|
||
bgColor="transparent"
|
||
backgroundImage={`url(${assets[`${background}`]})`}
|
||
bgSize="cover"
|
||
boxSize="full"
|
||
minH="100vh"
|
||
>
|
||
<Flex align="center" justify="center" boxSize="full">
|
||
<Stack
|
||
textAlign="center"
|
||
alignItems="center"
|
||
spacing={6}
|
||
maxW={["1620px", null, null, null, "1620px", "2222px"]}
|
||
px="7%"
|
||
h="100%"
|
||
pt={["10vh", null, "20vh"]}
|
||
>
|
||
<Heading
|
||
fontSize={["lg", "4xl", "5xl", "5xl", "5xl", "6xl"]}
|
||
fontWeight="semibold"
|
||
color="white"
|
||
>
|
||
Open source blockchain analytics
|
||
</Heading>
|
||
<chakra.span
|
||
my={12}
|
||
fontSize={["md", "2xl", "3xl", "3xl", "3xl", "4xl"]}
|
||
display="inline-block"
|
||
color="blue.200"
|
||
>
|
||
Product analytics for Web3. Moonstream helps you
|
||
understand exactly how people are using your smart
|
||
contracts.
|
||
</chakra.span>
|
||
</Stack>
|
||
</Flex>
|
||
</Box>
|
||
</chakra.header>
|
||
</GridItem>
|
||
|
||
<GridItem px="7%" colSpan="12" pt={0} minH="100vh">
|
||
<chakra.span
|
||
textAlign="center"
|
||
fontWeight="600"
|
||
fontSize="lg"
|
||
w="100%"
|
||
h="fit-content"
|
||
>
|
||
<Text
|
||
mb={18}
|
||
fontSize={["md", "2xl", "3xl", "3xl", "3xl", "4xl"]}
|
||
>
|
||
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>
|
||
</chakra.span>
|
||
|
||
<Heading
|
||
{...HEADING_PROPS}
|
||
textAlign="center"
|
||
mt={48}
|
||
pb={[12, 12, 12, null, 24]}
|
||
>
|
||
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">
|
||
<ChakraImage
|
||
boxSize={["220px", "220px", "xs", null, "xs"]}
|
||
objectFit="contain"
|
||
src={assets["minedTransactions"]}
|
||
alt="mined transactions"
|
||
/>
|
||
<Heading textAlign="center ">
|
||
Ethereum mined transactions
|
||
</Heading>
|
||
</Stack>
|
||
<Stack spacing={1} px={1} alignItems="center">
|
||
<ChakraImage
|
||
boxSize={["220px", "220px", "xs", null, "xs"]}
|
||
objectFit="contain"
|
||
src={assets["pendingTransactions"]}
|
||
alt="mined transactions"
|
||
/>
|
||
<Heading textAlign="center ">
|
||
Ethereum pending transactions
|
||
</Heading>
|
||
</Stack>
|
||
<Stack spacing={1} px={1} alignItems="center">
|
||
<ChakraImage
|
||
boxSize={["220px", "220px", "xs", null, "xs"]}
|
||
objectFit="contain"
|
||
src={assets["priceInformation"]}
|
||
alt="mined transactions"
|
||
/>
|
||
<Heading textAlign="center ">Centralized exchanges</Heading>
|
||
</Stack>
|
||
<Stack spacing={1} px={1} alignItems="center">
|
||
<ChakraImage
|
||
boxSize={["220px", "220px", "xs", null, "xs"]}
|
||
objectFit="contain"
|
||
src={assets["socialMediaPosts"]}
|
||
alt="mined transactions"
|
||
/>
|
||
<Heading textAlign="center ">Social media posts</Heading>
|
||
</Stack>
|
||
</SimpleGrid>
|
||
<Center>
|
||
<Heading pt="160px" pb="60px">
|
||
Moonstream is meant for you if
|
||
</Heading>
|
||
</Center>
|
||
<Flex
|
||
w="100%"
|
||
direction={["column", "row", "column", null, "column"]}
|
||
flexWrap={["nowrap", "nowrap", "nowrap", null, "nowrap"]}
|
||
pb="32px"
|
||
>
|
||
<ConnectedButtons
|
||
speedBase={0.3}
|
||
title={"You need a fusion of..."}
|
||
button4={{
|
||
label: "Blockchain analytics",
|
||
speed: 1,
|
||
// link: "/#analytics",
|
||
onClick: () => {
|
||
mixpanel.get_distinct_id() &&
|
||
mixpanel.track(`${MIXPANEL_EVENTS.BUTTON_CLICKED}`, {
|
||
[`${MIXPANEL_PROPS.BUTTON_NAME}`]: `Connected buttons: scroll to analytics`,
|
||
});
|
||
},
|
||
}}
|
||
button1={{
|
||
label: "TX pool real time data",
|
||
speed: 9,
|
||
// link: "/#txpool",
|
||
onClick: () => {
|
||
mixpanel.get_distinct_id() &&
|
||
mixpanel.track(`${MIXPANEL_EVENTS.BUTTON_CLICKED}`, {
|
||
[`${MIXPANEL_PROPS.BUTTON_NAME}`]: `Connected buttons: scroll to txpool`,
|
||
});
|
||
},
|
||
}}
|
||
button2={{
|
||
label: "Exchange price stream",
|
||
speed: 6,
|
||
// link: "/#exchanges",
|
||
onClick: () => {
|
||
mixpanel.get_distinct_id() &&
|
||
mixpanel.track(`${MIXPANEL_EVENTS.BUTTON_CLICKED}`, {
|
||
[`${MIXPANEL_PROPS.BUTTON_NAME}`]: `Connected buttons: scroll to exchanges`,
|
||
});
|
||
},
|
||
}}
|
||
button3={{
|
||
label: "Social media posts",
|
||
speed: 3,
|
||
// link: "/#smartDeveloper",
|
||
onClick: () => {
|
||
mixpanel.get_distinct_id() &&
|
||
mixpanel.track(`${MIXPANEL_EVENTS.BUTTON_CLICKED}`, {
|
||
[`${MIXPANEL_PROPS.BUTTON_NAME}`]: `Connected buttons: scroll to developer`,
|
||
});
|
||
},
|
||
}}
|
||
/>
|
||
</Flex>
|
||
</GridItem>
|
||
<GridItem
|
||
placeItems="center"
|
||
w="100%"
|
||
colSpan="12"
|
||
pt={["0", "0", "5.125rem", null, "5.125rem"]}
|
||
pb="120px"
|
||
>
|
||
<Center>
|
||
<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>
|
||
</Flex>
|
||
</Box>
|
||
</Fade>
|
||
</Suspense>
|
||
);
|
||
};
|
||
|
||
export async function getStaticProps() {
|
||
const metaTags = {
|
||
title: "Moonstream.to: All your crypto data in one stream",
|
||
description:
|
||
"From the Ethereum transaction pool to Elon Musk’s latest tweets get all the crypto data you care about in one stream.",
|
||
keywords:
|
||
"blockchain, crypto, data, trading, smart contracts, ethereum, solana, transactions, defi, finance, decentralized",
|
||
url: "https://www.moonstream.to",
|
||
image: `${AWS_ASSETS_PATH}/crypto+traders.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 Homepage;
|