kopia lustrzana https://github.com/bugout-dev/moonstream
297 wiersze
10 KiB
JavaScript
297 wiersze
10 KiB
JavaScript
import React, { useEffect, useState, useLayoutEffect } from "react";
|
||
import {
|
||
Text,
|
||
Flex,
|
||
Link,
|
||
Stack,
|
||
useMediaQuery,
|
||
useBreakpointValue,
|
||
Center,
|
||
} from "@chakra-ui/react";
|
||
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 = () => {
|
||
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 [
|
||
isLargerThan720px,
|
||
isLargerThan1920px,
|
||
isLargerThan2880px,
|
||
isLargerThan3840px,
|
||
] = useMediaQuery([
|
||
"(min-width: 720px)",
|
||
"(min-width: 1920px)",
|
||
"(min-width: 2880px)",
|
||
"(min-width: 3840px)",
|
||
]);
|
||
|
||
useEffect(() => {
|
||
assets[
|
||
"background720"
|
||
] = `${AWS_ASSETS_PATH}/product-background-720x405.png`;
|
||
assets[
|
||
"background1920"
|
||
] = `${AWS_ASSETS_PATH}/product-background-1920x1080.png`;
|
||
assets[
|
||
"background2880"
|
||
] = `${AWS_ASSETS_PATH}/product-background-2880x1620.png`;
|
||
assets[
|
||
"background3840"
|
||
] = `${AWS_ASSETS_PATH}/product-background-3840x2160.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,
|
||
]);
|
||
|
||
useLayoutEffect(() => {
|
||
const imageLoader720 = new Image();
|
||
imageLoader720.src = `${AWS_ASSETS_PATH}/product-background-720x405.png`;
|
||
imageLoader720.onload = () => {
|
||
setBackgroundLoaded720(true);
|
||
};
|
||
}, []);
|
||
|
||
useLayoutEffect(() => {
|
||
const imageLoader1920 = new Image();
|
||
imageLoader1920.src = `${AWS_ASSETS_PATH}/product-background-1920x1080.png`;
|
||
imageLoader1920.onload = () => {
|
||
setBackgroundLoaded1920(true);
|
||
};
|
||
}, []);
|
||
|
||
useLayoutEffect(() => {
|
||
const imageLoader2880 = new Image();
|
||
imageLoader2880.src = `${AWS_ASSETS_PATH}/product-background-2880x1620.png`;
|
||
imageLoader2880.onload = () => {
|
||
setBackgroundLoaded2880(true);
|
||
};
|
||
}, []);
|
||
|
||
useLayoutEffect(() => {
|
||
const imageLoader3840 = new Image();
|
||
imageLoader3840.src = `${AWS_ASSETS_PATH}/product-background-3840x2160.png`;
|
||
imageLoader3840.onload = () => {
|
||
setBackgroundLoaded3840(true);
|
||
};
|
||
}, []);
|
||
|
||
const margin = useBreakpointValue({
|
||
base: "1%",
|
||
sm: "2%",
|
||
md: "3%",
|
||
lg: "15%",
|
||
xl: "20%",
|
||
"2xl": "25%",
|
||
});
|
||
|
||
return (
|
||
<Flex
|
||
bgPos="bottom"
|
||
bgColor="transparent"
|
||
backgroundImage={`url(${assets[`${background}`]})`}
|
||
bgSize="cover"
|
||
// boxSize="full"
|
||
minH="100vh"
|
||
direction="column"
|
||
alignItems="center"
|
||
pb={24}
|
||
>
|
||
<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"
|
||
// badge={`State of art`}
|
||
body={`web3 stands for decentralized automation through smart contracts.
|
||
Smart contract developers are building the future of the decentralized web.
|
||
`}
|
||
// 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["environment"]}
|
||
imgBoxShadow="lg"
|
||
/>
|
||
<SplitWithImage
|
||
mirror
|
||
py={["12px", "24px", "48px"]}
|
||
elementName={"element1"}
|
||
colorScheme="blue"
|
||
// badge={`development tool`}
|
||
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.`}
|
||
// 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["developers"]}
|
||
imgBoxShadow="lg"
|
||
/>
|
||
<SplitWithImage
|
||
elementName={"element1"}
|
||
colorScheme="blue"
|
||
py={["12px", "24px", "48px"]}
|
||
// badge={`Complex functionality`}
|
||
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"
|
||
// badge={`Simple to use`}
|
||
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"]}
|
||
// badge={`Here to help you`}
|
||
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;
|