kopia lustrzana https://github.com/bugout-dev/moonstream
265 wiersze
8.8 KiB
JavaScript
265 wiersze
8.8 KiB
JavaScript
import React, { useEffect, useState, useLayoutEffect } from "react";
|
||
import {
|
||
Heading,
|
||
Text,
|
||
Flex,
|
||
Link,
|
||
Stack,
|
||
chakra,
|
||
useMediaQuery,
|
||
UnorderedList,
|
||
ListItem,
|
||
} from "@chakra-ui/react";
|
||
import { DEFAULT_METATAGS } from "../../src/components/constants";
|
||
|
||
export async function getStaticProps() {
|
||
return {
|
||
props: { metaTags: { ...DEFAULT_METATAGS } },
|
||
};
|
||
}
|
||
|
||
const AWS_PATH =
|
||
"https://s3.amazonaws.com/static.simiotics.com/moonstream/assets";
|
||
|
||
const assets = {
|
||
background720: `${AWS_PATH}/blog-background-720x405.png`,
|
||
background1920: `${AWS_PATH}/blog-background-720x405.png`,
|
||
background2880: `${AWS_PATH}/blog-background-720x405.png`,
|
||
background3840: `${AWS_PATH}/blog-background-720x405.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_PATH}/blog-background-720x405.png`;
|
||
assets["background1920"] = `${AWS_PATH}/blog-background-1920x1080.png`;
|
||
assets["background2880"] = `${AWS_PATH}/blog-background-2880x1620.png`;
|
||
assets["background3840"] = `${AWS_PATH}/blog-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_PATH}/blog-background-720x405.png`;
|
||
imageLoader720.onload = () => {
|
||
setBackgroundLoaded720(true);
|
||
};
|
||
}, []);
|
||
|
||
useLayoutEffect(() => {
|
||
const imageLoader1920 = new Image();
|
||
imageLoader1920.src = `${AWS_PATH}/blog-background-1920x1080.png`;
|
||
imageLoader1920.onload = () => {
|
||
setBackgroundLoaded1920(true);
|
||
};
|
||
}, []);
|
||
|
||
useLayoutEffect(() => {
|
||
const imageLoader2880 = new Image();
|
||
imageLoader2880.src = `${AWS_PATH}/blog-background-2880x1620.png`;
|
||
imageLoader2880.onload = () => {
|
||
setBackgroundLoaded2880(true);
|
||
};
|
||
}, []);
|
||
|
||
useLayoutEffect(() => {
|
||
const imageLoader3840 = new Image();
|
||
imageLoader3840.src = `${AWS_PATH}/blog-background-3840x2160.png`;
|
||
imageLoader3840.onload = () => {
|
||
setBackgroundLoaded3840(true);
|
||
};
|
||
}, []);
|
||
|
||
return (
|
||
<Flex
|
||
bgPos="bottom"
|
||
bgColor="transparent"
|
||
backgroundImage={`url(${assets[`${background}`]})`}
|
||
bgSize="cover"
|
||
// boxSize="full"
|
||
minH="100vh"
|
||
direction="column"
|
||
alignItems="center"
|
||
>
|
||
<Stack
|
||
// bgColor="gray.50"
|
||
// borderRadius="xl"
|
||
// boxShadow="xl"
|
||
mx="22%"
|
||
my={12}
|
||
maxW="1700px"
|
||
|
||
>
|
||
<Heading
|
||
as="h2"
|
||
size="md"
|
||
w="100%"
|
||
// bgColor="gray.200"
|
||
px={12}
|
||
py={2}
|
||
borderTopRadius="xl"
|
||
>
|
||
Vision
|
||
</Heading>
|
||
<chakra.span pl={2} px={12} py={2} >
|
||
<Text mb={2}>
|
||
Our goal is to provide a live view of the transactions taking place
|
||
on <b>every</b> public blockchain.
|
||
</Text>
|
||
<Text mb={2}>
|
||
We aim to go far beyond raw transaction information, enriching our
|
||
view with context from centralized exchanges, the news, social
|
||
media, and smart contract analysis.
|
||
</Text>
|
||
<Text mb={2}>
|
||
Data is only as good as the decisions it informs. We are building
|
||
Moonstream to be much more than a database. We are building
|
||
Moonstream to be an execution engine, where anyone can set up
|
||
triggers based on Moonstream events. Triggers can submit
|
||
transactions to any blockchain or they can call external APIs via
|
||
webhooks.
|
||
</Text>
|
||
<Text mb={2}>
|
||
Moonstream will be accessible to humans through our dashboard and
|
||
notification system.
|
||
</Text>
|
||
<Text mb={2}>
|
||
Moonstream will be accessible to software through our API and
|
||
webhooks.
|
||
</Text>
|
||
</chakra.span>
|
||
</Stack>
|
||
<Stack
|
||
// bgColor="gray.50"
|
||
// borderRadius="xl"
|
||
// boxShadow="xl"
|
||
mx="22%"
|
||
mb={12}
|
||
maxW="1700px"
|
||
bgTra
|
||
>
|
||
<Heading
|
||
as="h2"
|
||
size="md"
|
||
w="100%"
|
||
// bgColor="gray.200"
|
||
px={12}
|
||
py={2}
|
||
borderTopRadius="xl"
|
||
>
|
||
Product
|
||
</Heading>
|
||
<chakra.span pl={2} px={12} py={2}>
|
||
<Text mb={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 mb={2}>
|
||
We aim to go far beyond raw transaction information, enriching our
|
||
view with context from centralized exchanges, the news, social
|
||
media, and smart contract analysis.
|
||
</Text>
|
||
<Text mb={2}>
|
||
Moonstream users can subscribe to events from any blockchain - from
|
||
the activity of specific accounts or smart contracts to updates
|
||
about general market movements. 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 their specific needs.
|
||
</Text>
|
||
<Text mb={2}>
|
||
They can use this information to execute transactions directly from
|
||
the Moonstream frontend or they can set up programs which execute
|
||
(on- or off-chain) when their stream meets certain conditions.
|
||
</Text>
|
||
<Text mb={2}>
|
||
Moonstream will be accessible to software through our API and
|
||
webhooks.
|
||
</Text>
|
||
<chakra.span>
|
||
<Text>Moonstream customers are:</Text>
|
||
<UnorderedList w="75%" pl={4}>
|
||
<ListItem>
|
||
<b>Development teams deploying decentralized applications -</b>
|
||
They use Moonstream to analyze how users are calling their
|
||
dapps, and set up alerts for suspicious activity.{" "}
|
||
</ListItem>
|
||
<ListItem>
|
||
<b>Algorithmic funds - </b> They use Moonstream to execute
|
||
transactions directly on-chain under prespecified conditions.
|
||
</ListItem>
|
||
<ListItem>
|
||
<b>Crypto traders -</b> They use Moonstream to evaluate trading
|
||
strategies based on data from centralized exchanges, the
|
||
blockchain, and the transaction pool.
|
||
</ListItem>
|
||
</UnorderedList>
|
||
</chakra.span>
|
||
<Text my={2}>
|
||
Moonstream’s financial inclusion goes beyond providing access to
|
||
data. We also help validators and stakers on proof of stake chains
|
||
earn rewards in excess of the validation rewards. We pay validators
|
||
to send mempool/transaction pool data back to Moonstream, and they
|
||
divide these payments between themselves and their stakers. This
|
||
helps validators attract more stake on proof of stake blockchains
|
||
like Algorand, Solana, and post-merge Ethereum. It also ensures that
|
||
Moonstream users have access to the freshest and most geographically
|
||
diverse transaction pool data on the market.
|
||
</Text>
|
||
<Text mb={2}>
|
||
All of our work is open source as we do not believe that proprietary
|
||
technologies are financially inclusive.{" "}
|
||
<Link
|
||
textColor="primary.500"
|
||
isExternal
|
||
href="https://github.com/bugout-dev/moonstream"
|
||
>
|
||
You can read our code on GitHub.
|
||
</Link>
|
||
</Text>
|
||
</chakra.span>
|
||
</Stack>
|
||
</Flex>
|
||
);
|
||
};
|
||
export default Product;
|