diff --git a/frontend/pages/_app.js b/frontend/pages/_app.js index de75eb56..ef69d06c 100644 --- a/frontend/pages/_app.js +++ b/frontend/pages/_app.js @@ -8,6 +8,7 @@ import "slick-carousel/slick/slick.css"; import "slick-carousel/slick/slick-theme.css"; import dynamic from "next/dynamic"; import { QueryClient, QueryClientProvider } from "react-query"; +import { ReactQueryDevtools } from "react-query/devtools"; import HeadLinks from "../src/components/HeadLinks"; import HeadSEO from "../src/components/HeadSEO"; const AppContext = dynamic(() => import("../src/AppContext"), { diff --git a/frontend/src/components/ConnectedButtons.js b/frontend/src/components/ConnectedButtons.js index 590416b2..a2125c71 100644 --- a/frontend/src/components/ConnectedButtons.js +++ b/frontend/src/components/ConnectedButtons.js @@ -19,8 +19,6 @@ const ArrowCTA = (props) => { 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(); useEffect(() => { @@ -54,8 +52,6 @@ const ArrowCTA = (props) => { null, ]; - const speedConst = -0.05; - return ( { const updateXarrow = useXarrow(); - const handleDrag = (e) => { - console.log(e); + const [position, setPosition] = useState({ + x: props.defaultPosition.x * props.gridStep, + y: props.defaultPosition.y * props.gridStep, + }); + const [cellSize, setCellSize] = useState(props.gridStep); + + useEffect(() => { + setPosition({ + x: (position.x * props.gridStep) / cellSize, + y: (position.y * props.gridStep) / cellSize, + }); + setCellSize(props.gridStep); + //eslint-disable-next-line + }, [props.gridStep]); + + const handleDrag = (e, eData) => { setTimeout(() => { updateXarrow(); }, 50); + setPosition({ x: position.x + eData.deltaX, y: position.y + eData.deltaY }); }; return ( @@ -16,12 +31,10 @@ const DragOnGrid = React.forwardRef((props, ref) => { nodeRef={ref} axis="both" handle=".handle" - {...props} - position={null} - grid={[60, 60]} + position={{ ...position }} + grid={[props.gridStep, props.gridStep]} scale={1} onDrag={handleDrag} - onStop={updateXarrow} > {props.children} diff --git a/frontend/src/components/Footer.js b/frontend/src/components/Footer.js index e24814b1..43beba08 100644 --- a/frontend/src/components/Footer.js +++ b/frontend/src/components/Footer.js @@ -1,133 +1,189 @@ import React from "react"; -import { Flex, Text, Link, Heading } from "@chakra-ui/react"; -import CustomIcon from "../components/CustomIcon"; +import { + Text, + Link, + Box, + Container, + SimpleGrid, + Stack, + Image as ChakraImage, + useColorModeValue, + VisuallyHidden, + chakra, +} from "@chakra-ui/react"; import RouterLink from "next/link"; - -const ICONS = [ - { - social: "discord", - link: "https://discord.gg/K56VNUQGvA", - }, - - { social: "twit", link: "https://twitter.com/moonstreamto" }, -]; - -const SITEMAP_FLEX_PROPS = { - px: 2, - alignItems: "flex-start", - flexGrow: 1, - pb: 4, - color: "white.300", - fontWeight: "600", - direction: "column", - mr: 12, -}; +import { + WHITE_LOGO_W_TEXT_URL, + ALL_NAV_PATHES, + FOOTER_COLUMNS, +} from "../core/constants"; +import { FaGithub, FaTwitter, FaDiscord } from "react-icons/fa"; +import { v4 } from "uuid"; const LINKS_SIZES = { fontWeight: "300", fontSize: "lg", }; -const Footer = () => ( - - - - - About - {" "} - - Team - - - Product - - +const ListHeader = ({ children }) => { + return ( + + {children} + + ); +}; - - - News - - - Blog - - {/* - Privacy policy - */} - - {/* - - Product - - - Pricing - - - Case studies - - */} - - { + return ( + - {label} + {children} + + ); +}; + +const Footer = () => ( + + + - All the crypto data you care about{` `} - - 💙 - - - - {ICONS.map((icon, index) => ( - - - - ))} - - - All rights reserved.2021 - - - + + + + + + + © 2021 Moonstream.to All rights reserved + + + + + + + + + + + + + {Object.values(FOOTER_COLUMNS).map((columnEnum) => { + console.log("colenum", columnEnum); + return ( + + {ALL_NAV_PATHES.filter( + (navPath) => navPath.footerCategory === columnEnum + ).length > 0 && ( + <> + {columnEnum} + {ALL_NAV_PATHES.filter( + (navPath) => navPath.footerCategory === columnEnum + ).map((linkItem) => { + return ( + + {linkItem.title} + + ); + })} + + )} + + ); + })} + {/* + {ALL_NAV_PATHES.filter( + (navPath) => navPath.footerCategory === FOOTER_COLUMNS.COMPANY + ).length > 0 && ( + <> + Company + {ALL_NAV_PATHES.filter( + (navPath) => navPath.footerCategory === FOOTER_COLUMNS.COMPANY + ).map((linkItem) => { + return ( + + {linkItem.title} + + ); + })} + + )} + */} + {/* + {ALL_NAV_PATHES.filter( + (navPath) => navPath.footerCategory === FOOTER_COLUMNS.NEWS + ).length > 0 && ( + <> + Company + {ALL_NAV_PATHES.filter( + (navPath) => navPath.footerCategory === FOOTER_COLUMNS.NEWS + ).map((linkItem) => { + return ( + + {linkItem.title} + + ); + })} + + )} + */} + + {/* + {ALL_NAV_PATHES.filter( + (navPath) => navPath.footerCategory === FOOTER_COLUMNS.PRODUCT + ).length > 0 && ( + <> + Company + {ALL_NAV_PATHES.filter( + (navPath) => navPath.footerCategory === FOOTER_COLUMNS.PRODUCT + ).map((linkItem) => { + return ( + + {linkItem.title} + + ); + })} + + )} + */} + + + ); export default Footer; diff --git a/frontend/src/components/SchematicPlayground.js b/frontend/src/components/SchematicPlayground.js new file mode 100644 index 00000000..8ba82a90 --- /dev/null +++ b/frontend/src/components/SchematicPlayground.js @@ -0,0 +1,323 @@ +import React, { useRef } from "react"; +import { Box, Button, useBreakpointValue } from "@chakra-ui/react"; +import DragOnGrid from "./DragOnGrid"; +import Xarrow from "react-xarrows"; + +const SchematicPlayground = () => { + const gridCellSize = useBreakpointValue({ + base: 24, + sm: 32, + md: 64, + lg: 64, + xl: 64, + "2xl": 64, + }); + const ref1 = useRef(null); + const ref2 = useRef(null); + const ref3 = useRef(null); + const ref4 = useRef(null); + const ref5 = useRef(null); + const ref6 = useRef(null); + const ref7 = useRef(null); + const ref8 = useRef(null); + if (!gridCellSize) return ""; + return ( + <> + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ); +}; + +export default SchematicPlayground; diff --git a/frontend/src/components/Sidebar.js b/frontend/src/components/Sidebar.js index 908c64e4..d9a696e2 100644 --- a/frontend/src/components/Sidebar.js +++ b/frontend/src/components/Sidebar.js @@ -20,7 +20,8 @@ import { import { MdTimeline, MdSettings } from "react-icons/md"; import { ImStatsBars } from "react-icons/im"; import { HiAcademicCap } from "react-icons/hi"; -import { WHITE_LOGO_W_TEXT_URL } from "../core/constants"; +import { WHITE_LOGO_W_TEXT_URL, ALL_NAV_PATHES } from "../core/constants"; +import { v4 } from "uuid"; const Sidebar = () => { const ui = useContext(UIContext); @@ -93,6 +94,16 @@ const Sidebar = () => { Learn how to use Moonstream + {ALL_NAV_PATHES.map((pathToLink) => { + return ( + + {" "} + + {pathToLink.title} + + + ); + })} )} @@ -118,14 +129,16 @@ const Sidebar = () => { > Login - - {" "} - Product - - - {" "} - Team - + {ALL_NAV_PATHES.map((pathToLink) => { + return ( + + {" "} + + {pathToLink.title} + + + ); + })} )} diff --git a/frontend/src/core/constants.js b/frontend/src/core/constants.js index 4be5fb51..2b1568d8 100644 --- a/frontend/src/core/constants.js +++ b/frontend/src/core/constants.js @@ -15,14 +15,37 @@ export const DEFAULT_METATAGS = { image: `https://s3.amazonaws.com/static.simiotics.com/moonstream/assets/crypto+traders.png`, }; +export const FOOTER_COLUMNS = { + NEWS: "News", + COMPANY: "Company", + PRODUCT: "Product", +}; + export const ALL_NAV_PATHES = [ { title: "Product", path: "/product", + footerCategory: FOOTER_COLUMNS.PRODUCT, }, { title: "Team", path: "/team", + footerCategory: FOOTER_COLUMNS.COMPANY, + }, + { + title: "API", + path: "https://api.moonstream.to/docs", + footerCategory: FOOTER_COLUMNS.PRODUCT, + }, + { + title: "Whitepapers", + path: "https://github.com/bugout-dev/papers", + footerCategory: FOOTER_COLUMNS.PRODUCT, + }, + { + title: "Blog", + path: "https://blog.moonstream.to", + footerCategory: FOOTER_COLUMNS.NEWS, }, ]; diff --git a/frontend/styles/styles.css b/frontend/styles/styles.css index 55d38240..1515160a 100644 --- a/frontend/styles/styles.css +++ b/frontend/styles/styles.css @@ -242,6 +242,8 @@ code { .prev { left: 0%; top: 50%; +} + .bgGrid { background-color: white; background-size: 10px 10px, 60px 60px;