From fe1e82b9577fa92d551dd50faafabc2e7e9ae7cb Mon Sep 17 00:00:00 2001 From: Tim Pechersky Date: Fri, 8 Oct 2021 17:48:17 +0200 Subject: [PATCH 01/10] comic v0.1 --- frontend/pages/index.js | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/frontend/pages/index.js b/frontend/pages/index.js index 913dfd5e..46a117f4 100644 --- a/frontend/pages/index.js +++ b/frontend/pages/index.js @@ -65,6 +65,7 @@ const assets = { 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`, }; const Homepage = () => { const ui = useContext(UIContext); @@ -577,6 +578,17 @@ const Homepage = () => { + +
+ +
+ From 1de9b6b6f960040f9651b16c38ba4bb3ad2d6ce3 Mon Sep 17 00:00:00 2001 From: Tim Pechersky Date: Wed, 13 Oct 2021 17:22:01 +0200 Subject: [PATCH 02/10] flow buttons support 3 and 4 button option --- frontend/src/components/ConnectedButtons.js | 126 +++++++++++++++++--- 1 file changed, 108 insertions(+), 18 deletions(-) diff --git a/frontend/src/components/ConnectedButtons.js b/frontend/src/components/ConnectedButtons.js index 990f1cc1..f04897d5 100644 --- a/frontend/src/components/ConnectedButtons.js +++ b/frontend/src/components/ConnectedButtons.js @@ -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 ( - + {props.title} @@ -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} @@ -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} + {props.button4 && ( + + )} + {props.button4 && ( + + )} ); }; From 8e608773c9f145940408da390cb8ea99e7455d86 Mon Sep 17 00:00:00 2001 From: Tim Pechersky Date: Wed, 13 Oct 2021 17:22:21 +0200 Subject: [PATCH 03/10] product and team link for sidebar on mobileview --- frontend/src/components/Sidebar.js | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/frontend/src/components/Sidebar.js b/frontend/src/components/Sidebar.js index 5cc6f818..fc63394e 100644 --- a/frontend/src/components/Sidebar.js +++ b/frontend/src/components/Sidebar.js @@ -118,6 +118,14 @@ const Sidebar = () => { > Login + + {" "} + Product + + + {" "} + Team + )} From 22b3c3e027cb7837487b352b8de730c2b371d974 Mon Sep 17 00:00:00 2001 From: Tim Pechersky Date: Wed, 13 Oct 2021 17:22:58 +0200 Subject: [PATCH 04/10] feature component more customization options --- frontend/src/components/SplitWithImage.js | 93 ++++++++++++++--------- 1 file changed, 57 insertions(+), 36 deletions(-) diff --git a/frontend/src/components/SplitWithImage.js b/frontend/src/components/SplitWithImage.js index 5220d052..9fec3a1b 100644 --- a/frontend/src/components/SplitWithImage.js +++ b/frontend/src/components/SplitWithImage.js @@ -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 ( @@ -109,31 +121,36 @@ const SplitWithImage = ({ alt={"feature image"} src={imgURL} objectFit={"contain"} + boxShadow={imgBoxShadow ?? "inherit"} /> )} - - - + {badge && ( + - {badge} - - - {title} - + + {badge} + + + )} + {title} + {body} - + {cta && ( + + )} {socialButton && ( } > git clone moonstream @@ -194,12 +213,14 @@ const SplitWithImage = ({ {(!mirror || ui.isMobileView) && ( - + {"feature )} From 65df03af420ed00ed2688d5f657ba32112ca8574 Mon Sep 17 00:00:00 2001 From: Tim Pechersky Date: Wed, 13 Oct 2021 17:23:09 +0200 Subject: [PATCH 05/10] hide 1000 user banner --- frontend/src/layouts/RootLayout.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/src/layouts/RootLayout.js b/frontend/src/layouts/RootLayout.js index cd66abe9..d7afd5c9 100644 --- a/frontend/src/layouts/RootLayout.js +++ b/frontend/src/layouts/RootLayout.js @@ -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 ( Date: Wed, 13 Oct 2021 17:23:28 +0200 Subject: [PATCH 06/10] simplify landing page for now --- frontend/pages/product/index.js | 239 ++++++++++++++++++++++---------- 1 file changed, 167 insertions(+), 72 deletions(-) diff --git a/frontend/pages/product/index.js b/frontend/pages/product/index.js index fa03ba4a..dbf6f77b 100644 --- a/frontend/pages/product/index.js +++ b/frontend/pages/product/index.js @@ -1,26 +1,31 @@ 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, + MIXPANEL_EVENTS, + MIXPANEL_PROPS, +} from "../../src/core/constants"; +import SplitWithImage from "../../src/components/SplitWithImage"; +import mixpanel from "mixpanel-browser"; 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 +136,162 @@ const Product = () => { alignItems="center" pb={24} > - - - {`Why you'll love Moonstream`} - - - - 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. - - - 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. - - - 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. - - - 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. - - - Moonstream is accessible through dashboard, API and webhooks. - - - 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. - - - You can read{" "} - - our code on GitHub. - {" "} - and keep track of our progress using{" "} - - the Moonstream milestones - - . - - + + + + + + +
+ + + To find out more, join us on{" "} + { + mixpanel.get_distinct_id() && + mixpanel.track(`${MIXPANEL_EVENTS.BUTTON_CLICKED}`, { + [`${MIXPANEL_PROPS.BUTTON_NAME}`]: `Join our discord`, + }); + }} + isExternal + href={"https://discord.gg/K56VNUQGvA"} + > + Discord + {" "} + + +
); }; + +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; From 89cfb15ffa1ba5ed8d086fe26115898ac3503a20 Mon Sep 17 00:00:00 2001 From: Tim Pechersky Date: Wed, 13 Oct 2021 17:23:49 +0200 Subject: [PATCH 07/10] product page improvements --- frontend/pages/index.js | 271 ++++++++++++++++++++++++++++++---------- 1 file changed, 203 insertions(+), 68 deletions(-) diff --git a/frontend/pages/index.js b/frontend/pages/index.js index 46a117f4..eebddf96 100644 --- a/frontend/pages/index.js +++ b/frontend/pages/index.js @@ -1,6 +1,6 @@ import React, { useState, - useContext, + // useContext, Suspense, useEffect, useLayoutEffect, @@ -10,16 +10,16 @@ import { Flex, Heading, Box, - Image as ChakraImage, 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"; @@ -29,27 +29,55 @@ 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"), +// import UIContext from "../src/core/providers/UIProvider/context"; +// const SplitWithImage = dynamic( +// () => import("../src/components/SplitWithImage"), +// { +// ssr: false, +// } +// ); +// const GiSuspicious = dynamic(() => +// import("react-icons/gi").then((mod) => mod.GiSuspicious) +// ); + +// const GiHook = dynamic(() => +// import("react-icons/gi").then((mod) => mod.GiHook) +// ); + +// const IoTelescopeSharp = dynamic(() => +// import("react-icons/io5").then((mod) => mod.IoTelescopeSharp) +// ); + +// const AiFillApi = dynamic(() => +// import("react-icons/ai").then((mod) => mod.AiFillApi) +// ); + +// const BiTransfer = dynamic(() => +// import("react-icons/bi").then((mod) => mod.BiTransfer) +// ); + +// 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 ConnectedButtons = dynamic( + () => import("../src/components/ConnectedButtons"), { ssr: false, } ); -const GiSuspicious = dynamic(() => - import("react-icons/gi").then((mod) => mod.GiSuspicious) -); - -const GiHook = dynamic(() => - import("react-icons/gi").then((mod) => mod.GiHook) -); - -const IoTelescopeSharp = dynamic(() => - import("react-icons/io5").then((mod) => mod.IoTelescopeSharp) -); - const HEADING_PROPS = { fontWeight: "700", fontSize: ["4xl", "5xl", "4xl", "5xl", "6xl", "7xl"], @@ -66,9 +94,10 @@ const assets = { 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 ui = useContext(UIContext); + // const ui = useContext(UIContext); const [background, setBackground] = useState("background720"); const [backgroundLoaded720, setBackgroundLoaded720] = useState(false); const [backgroundLoaded1920, setBackgroundLoaded1920] = useState(false); @@ -334,7 +363,7 @@ const Homepage = () => { Social media posts - {/*
+
Moonstream is meant for you if @@ -343,49 +372,59 @@ const Homepage = () => { w="100%" direction={["column", "row", "column", null, "column"]} flexWrap={["nowrap", "nowrap", "nowrap", null, "nowrap"]} - pb="66px" + pb="32px" > { 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`, }); }, }} /> - */} + {/* { onClick: () => { mixpanel.get_distinct_id() && mixpanel.track(`${MIXPANEL_EVENTS.BUTTON_CLICKED}`, { - [`${MIXPANEL_PROPS.BUTTON_NAME}`]: `Early access CTA: Crypto trader`, + [`${MIXPANEL_PROPS.BUTTON_NAME}`]: `Early access CTA: developer txpool button`, }); - toggleModal("hubspot-trader"); + toggleModal("hubspot-developer"); }, }} elementName={"element1"} colorScheme="green" - badge={`For crypto traders`} - title={``} - body={``} + badge={`Transaction pool data`} + title={`Get real-time access to transaction pool`} + body={`In blockchains, transaction pool is place where future blocks are being forged. + Having insight in to this dynamic, always changing data means to be in the present moment + `} bullets={[ { text: `Subscribe to the defi contracts you care about`, @@ -412,28 +453,28 @@ const Homepage = () => { bgColor: "green.900", }, { - text: `Make sense of how others are calling these contracts using Moonstream dashboards. + text: `Get data directly from the transaction pool through our global network of Ethereum nodes `, icon: RiDashboardFill, color: "green.50", bgColor: "green.900", }, { - text: `Get data directly from the transaction pool through our global network of Ethereum nodes`, + text: `Setup notifications to be first to know when and how your contract is being interacted`, icon: GiMeshBall, color: "green.50", bgColor: "green.900", }, ]} - imgURL={assets["cryptoTraders"]} + imgURL={assets["pendingTransactions"]} /> - */} - {/* + { onClick: () => { mixpanel.get_distinct_id() && mixpanel.track(`${MIXPANEL_EVENTS.BUTTON_CLICKED}`, { - [`${MIXPANEL_PROPS.BUTTON_NAME}`]: `Early access CTA: Algo fund`, + [`${MIXPANEL_PROPS.BUTTON_NAME}`]: `Early access CTA: developer exchanges button`, }); - toggleModal("hubspot-fund"); + toggleModal("hubspot-developer"); }, }} elementName={"element2"} mirror={true} colorScheme="orange" - badge={`For algorithmic funds`} + badge={`Centralized exchange prices`} bullets={[ { text: `Get API access to your stream`, @@ -471,9 +512,9 @@ const Homepage = () => { bgColor: "orange.900", }, ]} - imgURL={assets["algorithmicFunds"]} + imgURL={assets["priceInformation"]} /> - */} + { onClick: () => { mixpanel.get_distinct_id() && mixpanel.track(`${MIXPANEL_EVENTS.BUTTON_CLICKED}`, { - [`${MIXPANEL_PROPS.BUTTON_NAME}`]: `Early access CTA: developer`, + [`${MIXPANEL_PROPS.BUTTON_NAME}`]: `Early access CTA: developer smartDeveloper button`, }); toggleModal("hubspot-developer"); }, @@ -506,30 +547,87 @@ const Homepage = () => { }} elementName={"element3"} colorScheme="blue" - badge={`For smart contract developers`} + badge={`Know your people`} bullets={[ { - text: `Monitor blockchain data in real time`, + text: `Subscribe to social media tags and people`, icon: IoTelescopeSharp, color: "blue.50", bgColor: "blue.900", }, { - text: `Set up alerts on suspicious activity`, + text: `Automatically process content with our semantics AI analysis`, icon: GiSuspicious, color: "blue.50", bgColor: "blue.900", }, { - text: `Register webhooks to connect your off-chain infrastructure`, + text: `Register webhooks to connect your infrastructure`, icon: GiHook, color: "blue.50", bgColor: "blue.900", }, ]} - imgURL={assets["cryptoTraders"]} + imgURL={assets["socialMediaPosts"]} /> + + { + mixpanel.get_distinct_id() && + mixpanel.track(`${MIXPANEL_EVENTS.BUTTON_CLICKED}`, { + [`${MIXPANEL_PROPS.BUTTON_NAME}`]: `Early access CTA: developer analytics button`, + }); + 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="red" + badge={`Analyse blockchain activity`} + bullets={[ + { + text: `Monitor blockchain data in real time`, + icon: IoTelescopeSharp, + color: "red.50", + bgColor: "red.900", + }, + { + text: `Set up alerts on suspicious activity`, + icon: GiSuspicious, + color: "red.50", + bgColor: "red.900", + }, + { + text: `Register webhooks to connect your off-chain infrastructure`, + icon: GiHook, + color: "red.50", + bgColor: "red.900", + }, + ]} + imgURL={assets["smartDevelopers"]} + /> + */} { [`${MIXPANEL_PROPS.BUTTON_NAME}`]: `Join our discord`, } ); - toggleModal("hubspot"); }} isExternal href={"https://discord.gg/K56VNUQGvA"} @@ -566,7 +663,7 @@ const Homepage = () => { mixpanel.track( `${MIXPANEL_EVENTS.BUTTON_CLICKED}`, { - [`${MIXPANEL_PROPS.BUTTON_NAME}`]: `Early access CTA: developer`, + [`${MIXPANEL_PROPS.BUTTON_NAME}`]: `Early access CTA: developer want to find more button`, } ); toggleModal("hubspot-developer"); @@ -578,17 +675,6 @@ const Homepage = () => {
- -
- -
- @@ -625,3 +711,52 @@ export async function getStaticProps() { } export default Homepage; + +// +// +// +// 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. +// +// +// 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. +// +// +// 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. +// +// +// Moonstream is accessible through dashboard, API and webhooks. +// +// +// 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. +// +// +// You can read{" "} +// +// our code on GitHub. +// {" "} +// and keep track of our progress using{" "} +// +// the Moonstream milestones +// +// . +// +// From 8177e23bf56ec3d69ab81bfa66ef1c16dcca1608 Mon Sep 17 00:00:00 2001 From: Tim Pechersky Date: Wed, 13 Oct 2021 17:29:38 +0200 Subject: [PATCH 08/10] fix compile warnings --- frontend/pages/product/index.js | 11 +++++------ frontend/src/core/hooks/hookCommon.js | 1 + 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/frontend/pages/product/index.js b/frontend/pages/product/index.js index dbf6f77b..10131e1c 100644 --- a/frontend/pages/product/index.js +++ b/frontend/pages/product/index.js @@ -8,14 +8,13 @@ import { useBreakpointValue, Center, } from "@chakra-ui/react"; -import { - AWS_ASSETS_PATH, - MIXPANEL_EVENTS, - MIXPANEL_PROPS, -} from "../../src/core/constants"; +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`, diff --git a/frontend/src/core/hooks/hookCommon.js b/frontend/src/core/hooks/hookCommon.js index a3aeef16..72f85a30 100644 --- a/frontend/src/core/hooks/hookCommon.js +++ b/frontend/src/core/hooks/hookCommon.js @@ -11,3 +11,4 @@ export const queryCacheProps = { return status === 404 || status === 403 ? false : true; }, }; +export default queryCacheProps; From 0fb254b72e80565d0b11f1bc2af4e3dc4b9700cc Mon Sep 17 00:00:00 2001 From: Tim Pechersky Date: Wed, 13 Oct 2021 18:56:14 +0200 Subject: [PATCH 09/10] alpha structure proposal --- frontend/pages/index.js | 158 ++++++++++++---------------------------- 1 file changed, 48 insertions(+), 110 deletions(-) diff --git a/frontend/pages/index.js b/frontend/pages/index.js index eebddf96..32d714eb 100644 --- a/frontend/pages/index.js +++ b/frontend/pages/index.js @@ -1,6 +1,6 @@ import React, { useState, - // useContext, + useContext, Suspense, useEffect, useLayoutEffect, @@ -31,46 +31,46 @@ import { } from "../src/core/providers/AnalyticsProvider/constants"; import { AWS_ASSETS_PATH } from "../src/core/constants"; import mixpanel from "mixpanel-browser"; -// import UIContext from "../src/core/providers/UIProvider/context"; -// const SplitWithImage = dynamic( -// () => import("../src/components/SplitWithImage"), -// { -// ssr: false, -// } -// ); -// const GiSuspicious = dynamic(() => -// import("react-icons/gi").then((mod) => mod.GiSuspicious) -// ); +import UIContext from "../src/core/providers/UIProvider/context"; +const SplitWithImage = dynamic( + () => import("../src/components/SplitWithImage"), + { + ssr: false, + } +); +const GiSuspicious = dynamic(() => + import("react-icons/gi").then((mod) => mod.GiSuspicious) +); -// const GiHook = dynamic(() => -// import("react-icons/gi").then((mod) => mod.GiHook) -// ); +const GiHook = dynamic(() => + import("react-icons/gi").then((mod) => mod.GiHook) +); -// const IoTelescopeSharp = dynamic(() => -// import("react-icons/io5").then((mod) => mod.IoTelescopeSharp) -// ); +const IoTelescopeSharp = dynamic(() => + import("react-icons/io5").then((mod) => mod.IoTelescopeSharp) +); -// const AiFillApi = dynamic(() => -// import("react-icons/ai").then((mod) => mod.AiFillApi) -// ); +const AiFillApi = dynamic(() => + import("react-icons/ai").then((mod) => mod.AiFillApi) +); -// const BiTransfer = dynamic(() => -// import("react-icons/bi").then((mod) => mod.BiTransfer) -// ); +const BiTransfer = dynamic(() => + import("react-icons/bi").then((mod) => mod.BiTransfer) +); -// 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 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 GiLogicGateXor = dynamic(() => + import("react-icons/gi").then((mod) => mod.GiLogicGateXor) +); const ConnectedButtons = dynamic( () => import("../src/components/ConnectedButtons"), @@ -97,7 +97,7 @@ const assets = { smartDevelopers: `${AWS_ASSETS_PATH}/smart+contract+developers.png`, }; const Homepage = () => { - // const ui = useContext(UIContext); + const ui = useContext(UIContext); const [background, setBackground] = useState("background720"); const [backgroundLoaded720, setBackgroundLoaded720] = useState(false); const [backgroundLoaded1920, setBackgroundLoaded1920] = useState(false); @@ -264,30 +264,14 @@ const Homepage = () => { understand exactly how people are using your smart contracts. - {/* - Access this data through the Moonstream dashboard or - API - */} - + { > We believe that the blockchain is for everyone. This @@ -419,7 +402,7 @@ const Homepage = () => { /> - {/* { mirror={true} colorScheme="orange" badge={`Centralized exchange prices`} + title={`Market data - just in time! `} + body={`Moonstream is your tool of choice to built algorithms and tools which need to source data from exchange services. Whether it is on-chian automatic market maker, or centralized exchange - get numbers in one dashboard`} bullets={[ { text: `Get API access to your stream`, @@ -547,22 +532,24 @@ const Homepage = () => { }} elementName={"element3"} colorScheme="blue" - badge={`Know your people`} + title={`What really matters - is people`} + badge={`stay social`} + body={`It's all about the community. Stay informed about what happens in social networks, news portals and rss feeds`} bullets={[ { - text: `Subscribe to social media tags and people`, - icon: IoTelescopeSharp, + text: `Use our AI to get semantics and find patterns`, + icon: GiMeshBall, color: "blue.50", bgColor: "blue.900", }, { - text: `Automatically process content with our semantics AI analysis`, + text: `Secure your community wellbeing by automatically detecting social scam`, icon: GiSuspicious, color: "blue.50", bgColor: "blue.900", }, { - text: `Register webhooks to connect your infrastructure`, + text: `Register on-chain webhooks to take action`, icon: GiHook, color: "blue.50", bgColor: "blue.900", @@ -627,7 +614,7 @@ const Homepage = () => { ]} imgURL={assets["smartDevelopers"]} /> - */} + -// -// -// 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. -// -// -// 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. -// -// -// 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. -// -// -// Moonstream is accessible through dashboard, API and webhooks. -// -// -// 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. -// -// -// You can read{" "} -// -// our code on GitHub. -// {" "} -// and keep track of our progress using{" "} -// -// the Moonstream milestones -// -// . -// -// From eea2e65560dc8d34894a7113789e573842618d85 Mon Sep 17 00:00:00 2001 From: Tim Pechersky Date: Wed, 13 Oct 2021 18:59:00 +0200 Subject: [PATCH 10/10] remove comments --- frontend/pages/product/index.js | 47 --------------------------------- 1 file changed, 47 deletions(-) diff --git a/frontend/pages/product/index.js b/frontend/pages/product/index.js index 10131e1c..4df1e1ac 100644 --- a/frontend/pages/product/index.js +++ b/frontend/pages/product/index.js @@ -129,7 +129,6 @@ const Product = () => { bgColor="transparent" backgroundImage={`url(${assets[`${background}`]})`} bgSize="cover" - // boxSize="full" minH="100vh" direction="column" alignItems="center" @@ -141,31 +140,9 @@ const Product = () => { 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" /> @@ -174,31 +151,9 @@ const Product = () => { 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" /> @@ -206,7 +161,6 @@ const Product = () => { 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. @@ -219,7 +173,6 @@ const Product = () => { 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.