kopia lustrzana https://github.com/bugout-dev/moonstream
initial product page ready
Tim Pechersky
rodzic
0a709b97d9
commit
1b2e1de1c5
|
|
@ -0,0 +1,262 @@
|
||||||
|
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="7%"
|
||||||
|
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="7%"
|
||||||
|
mb={12}
|
||||||
|
maxW="1700px"
|
||||||
|
>
|
||||||
|
<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;
|
||||||
|
|
@ -8,13 +8,13 @@ export const PRESIGNED_URL_TYPE = {
|
||||||
};
|
};
|
||||||
|
|
||||||
export const DEFAULT_METATAGS = {
|
export const DEFAULT_METATAGS = {
|
||||||
title: "Bugout: Measure the success of your dev tool",
|
title: "Moonstream.to: All your crypto data in one stream",
|
||||||
description:
|
description:
|
||||||
"Get usage metrics and crash reports. Improve your users' experience",
|
"From the Ethereum transaction pool to Elon Musk’s latest tweets get all the crypto data you care about in one stream.",
|
||||||
keywords:
|
keywords:
|
||||||
"bugout, bugout-dev, bugout.dev, usage-metrics, analytics, dev-tool ,knowledge, docs, journal, entry, find-anything",
|
"blockchain, crypto, data, trading, smart contracts, ethereum, solana, transactions, defi, finance, decentralized",
|
||||||
url: "https://bugout.dev",
|
url: "https://www.moonstream.to",
|
||||||
image: "https://s3.amazonaws.com/static.simiotics.com/landing/aviator-2.svg",
|
image: `https://s3.amazonaws.com/static.simiotics.com/moonstream/assets/crypto+traders.png`,
|
||||||
};
|
};
|
||||||
|
|
||||||
export const PRESERVE_QUERY_ACROSS_JOURNALS = false;
|
export const PRESERVE_QUERY_ACROSS_JOURNALS = false;
|
||||||
|
|
|
||||||
Ładowanie…
Reference in New Issue