From 364497c7189151d413cf937ce38b609b9fcabf58 Mon Sep 17 00:00:00 2001 From: Tim Pechersky Date: Mon, 23 Aug 2021 18:08:02 +0200 Subject: [PATCH] change content, add accordions, fix radio size --- frontend/pages/welcome.js | 226 ++++++++++++++++++++++++-------------- 1 file changed, 141 insertions(+), 85 deletions(-) diff --git a/frontend/pages/welcome.js b/frontend/pages/welcome.js index 84884d83..a75f3fab 100644 --- a/frontend/pages/welcome.js +++ b/frontend/pages/welcome.js @@ -18,6 +18,11 @@ import { Flex, IconButton, Tooltip, + Accordion, + AccordionItem, + AccordionButton, + AccordionPanel, + AccordionIcon, } from "@chakra-ui/react"; import StepProgress from "../src/components/StepProgress"; import { ArrowLeftIcon, ArrowRightIcon } from "@chakra-ui/icons"; @@ -31,7 +36,6 @@ import router from "next/router"; import { FaFilter } from "react-icons/fa"; const Welcome = () => { - console.count("render welcome!"); const { subscriptionsCache } = useSubscriptions(); const ui = useContext(UIContext); const { mixpanel, isLoaded, MIXPANEL_PROPS } = useContext(AnalyticsContext); @@ -122,38 +126,54 @@ const Welcome = () => { boxShadow="xl" py={4} > - - How does Moonstream work? - - - - We run nodes - {" "} - - Get precise and accurate data by querying our database. - You’re getting the same data miners have access to and you - don’t have to maintain your own node. - - - - We crawl data - {" "} - We analyze millions of transactions, data, and smart contract - code to link them together. - + + +

+ + + How does Moonstream work? + + + +

+ + + + + We run nodes + {" "} + - Get precise and accurate data by querying our + database. You’re getting the same data miners have + access to and you don’t have to maintain your own + node. + + + + We crawl data + {" "} + - We analyze millions of transactions, data, and smart + contract code to link them together. + - - - We provide data - - You can fetch data through our front end or through API. - + + + We provide data + + - You can fetch data through our front end or through + API. + - - - We analyze data - - We find the most interesting information and highlight it - + + + We analyze data + + - We find the most interesting information and + highlight it + + + + + { boxShadow="xl" py={4} > - - UI 101 - - - Use the sidebar on the left for navigation: - - - - Subscriptions - - Set up addresses you would like to monitor.{" "} - - NB: Without any subscriptions, Moonstream will feel quite - empty! - {" "} - No worries, we will help you set up your subscriptions. - - NB: Without setting up subscriptions moonstream will have - quite empty feel!{" "} - {" "} - No worries, we will help you to set up your subscriptions in - the next steps! - - - - Stream - {" "} - This view is similar to a bank statement. You can define a - date range and see what happened with your subscriptions - during that time. You can also apply filters to it. - + + +

+ + + UI navigation basics + + + +

+ + + + Use the sidebar on the left for navigation: + + + + Subscriptions + + Set up addresses you would like to monitor.{" "} + + NB: Without any subscriptions, Moonstream will feel + quite empty! + {" "} + No worries, we will help you set up your + subscriptions. + + NB: Without setting up subscriptions moonstream will + have quite empty feel!{" "} + {" "} + No worries, we will help you to set up your + subscriptions in the next steps! + + + + Stream + {" "} + This view is similar to a bank statement. You can + define a date range and see what happened with your + subscriptions during that time. You can also apply + filters to it. + - - - Stream Entry - {" "} - - See a detailed view of stream cards with specific and - essential data, like methods called in smart contracts etc - + + + Stream Entry + {" "} + - See a detailed view of stream cards with specific + and essential data, like methods called in smart + contracts etc + - - - Analytics - {" "} - - This section is under construction. Soon you will be able to - create dashboards there. Right now you can fill out a form to - tell us what analytical tools you’d want to see. We’d really - appreciate that :) - + + + Analytics + {" "} + - This section is under construction. Soon you will be + able to create dashboards there. Right now you can + fill out a form to tell us what analytical tools you’d + want to see. We’d really appreciate that :) + + + + + { - + I am trading crypto currency I represent investment fund I am developer @@ -398,6 +441,7 @@ const Welcome = () => { { scrollRef?.current?.scrollIntoView(); }} > - Previous + Go back