Engine overview diagram for landing page.

2022-06-07 09:06:13 -04:00 · 2022-06-07 09:06:13 -04:00 · 839e81888f
commit 839e81888f
--- a/frontend/src/components/EngineOverviewDiagram.js
+++ b/frontend/src/components/EngineOverviewDiagram.js
@ -0,0 +1,320 @@
+import { React, useRef } from "react";
+import {
+  chakra,
+  Grid,
+  GridItem,
+  Flex,
+  Center,
+  VStack,
+  Text,
+  Icon,
+  Popover,
+  PopoverTrigger,
+  PopoverBody,
+  PopoverContent,
+  useBreakpointValue,
+} from "@chakra-ui/react";
+import CloudSVG from "./SVGGraphics/Cloud";
+import RectangleSVG from "./SVGGraphics/Rectangle";
+import RoundedRectSVG from "./SVGGraphics/RoundedRect";
+// import { AiFillFile } from "react-icons/ai";
+import { BsFillPersonFill } from "react-icons/bs";
+import { BsFillFileEarmarkCodeFill } from "react-icons/bs";
+// import { MODAL_TYPES } from "../core/providers/OverlayProvider/constants";
+import Xarrow from "react-xarrows";
+import ExampleCode from "./ExampleCode";
+
+const _EngineOverviewDiagram = () => {
+  // const scaleWidth = (width) => {
+  //   return [width * 0.65, width, width, width, width, width * 1.2].map(
+  //     (val) => {
+  //       return val + "px";
+  //     }
+  //   );
+  // };
+
+  const smartContract = useRef(null);
+  const gameClient = useRef(null);
+  const adminDashboard = useRef(null);
+  const gameServer = useRef(null);
+  const user = useRef(null);
+
+  // const { toggleModal } = useModals();
+
+  const xarrowStyle = {
+    color: "#212990",
+    showHead: true,
+    headSize: 6,
+  };
+
+  const smallDiagram = useBreakpointValue({
+    base: true,
+    sm: true,
+    md: false,
+    lg: false,
+    xl: false,
+    "2xl": false,
+  });
+
+  // const collapseLayout = useBreakpointValue({
+  //   base: true,
+  //   sm: true,
+  //   md: false,
+  //   lg: false,
+  //   xl: false,
+  //   "2xl": false,
+  // });
+
+  return (
+    <>
+      {/* <Grid
+        templateRows="repeat(2, 1fr)"
+        templateColumns="repeat(3, 1fr)"
+        gap={4}
+      >
+        <GridItem w="100px" h="100px" bgColor="red.200"></GridItem>
+        <GridItem w="100px" h="100px" bgColor="red.200"></GridItem>
+        <GridItem w="100px" h="100px" bgColor="red.200"></GridItem>
+        <GridItem w="100px" h="100px" bgColor="red.200"></GridItem>
+        <GridItem w="100px" h="100px" bgColor="red.200"></GridItem>
+        <GridItem w="100px" h="100px" bgColor="red.200"></GridItem>
+      </Grid> */}
+      <Grid
+        templateRows={["repeat(7)", "repeat(7)", "repeat(2)"]}
+        templateColumns={["repeat(1, 1fr)", "repeat(1, 1fr)", "repeat(3, 1fr)"]}
+        // gap={4}
+        rowGap={[10, 10, 20]}
+        columnGap={4}
+      >
+        <GridItem h={["80px", "80px", "auto"]} order={[2, 2, 0]}>
+          <Flex
+            ref={smartContract}
+            w={["260px", "260px", "400px"]}
+            h={["73", "73", "114px"]}
+            position="relative"
+            marginLeft="20px"
+          >
+            <RoundedRectSVG scale={1} />
+            <Center
+              position="absolute"
+              left="0"
+              top="0"
+              w={["260px", "260px", "400px"]}
+              h={["73", "73", "114px"]}
+            >
+              <VStack justifyContent="center" py="10px">
+                <Text fontSize={["md", "md", "xl"]}>
+                  Moonstream Smart Contracts
+                </Text>
+                {!smallDiagram && (
+                  <Text pl={[0, 0, "30px"]} fontSize="md">
+                    Your backend for lootboxes, crafting recipes, items,
+                    minigames
+                  </Text>
+                )}
+              </VStack>
+            </Center>
+          </Flex>
+        </GridItem>
+        <GridItem h={0} order={[6, 6, 1]}></GridItem>
+        <GridItem h={["160px", "160px", "auto"]} order={[4, 4, 2]}>
+          <Flex
+            ref={gameClient}
+            w={["155px", "155px", "189px"]}
+            h={["160px", "160px", "205px"]}
+            marginLeft={["80px", "80px", 0]}
+            position="relative"
+          >
+            <RectangleSVG></RectangleSVG>
+            <Center
+              position="absolute"
+              left="0"
+              top="0"
+              w={["155px", "155px", "189px"]}
+              h={["160px", "160px", "205px"]}
+            >
+              <Text fontSize={["md", "md", "xl"]}>Game Client</Text>
+            </Center>
+          </Flex>
+        </GridItem>
+        <GridItem h={["160px", "160px", "auto"]} order={[1, 1, 3]}>
+          <Flex
+            ref={adminDashboard}
+            w={["155px", "155px", "189px"]}
+            h={["160px", "160px", "205px"]}
+            marginLeft={["80px", "80px", 0]}
+            position="relative"
+          >
+            <RectangleSVG scale={0.8}></RectangleSVG>
+            <Center
+              position="absolute"
+              w={["155px", "155px", "189px"]}
+              h={["160px", "160px", "205px"]}
+            >
+              <VStack
+                w={["155px", "155px", "189px"]}
+                h={["160px", "160px", "205px"]}
+                justifyContent="center"
+              >
+                <Text fontSize={["md", "md", "lg"]}>Admin Dashboard</Text>
+                {!smallDiagram && (
+                  <Text pt="10px" pl={[0, 0, "8px"]} fontSize="md">
+                    Choose mechanics at engine.moonstream.to
+                  </Text>
+                )}
+              </VStack>
+            </Center>
+          </Flex>
+        </GridItem>
+        <GridItem h={["160px", "160px", "auto"]} order={[3, 3, 4]}>
+          <Center>
+            <Flex
+              w={["155px", "155px", "189px"]}
+              h={["160px", "160px", "205px"]}
+              justifyContent="center"
+              position="relative"
+            >
+              {/* <Icon
+              as={BsFillFileEarmarkCodeFill}
+              w={100}
+              h={100}
+              onClick={() => toggleModal({ type: MODAL_TYPES.EXAMPLE_CODE })}
+            ></Icon> */}
+              <Popover>
+                <PopoverTrigger placement="top">
+                  <Flex>
+                    <Icon as={BsFillFileEarmarkCodeFill} w={100} h={100}></Icon>
+                  </Flex>
+                </PopoverTrigger>
+                <PopoverContent w={["300px", "300px", "850px"]}>
+                  <PopoverBody>
+                    <ExampleCode />
+                  </PopoverBody>
+                </PopoverContent>
+              </Popover>
+            </Flex>
+          </Center>
+        </GridItem>
+        <GridItem h={["120px", "120px", "auto"]} order={[5, 5, 5]}>
+          <Flex
+            ref={gameServer}
+            w={["200px", "200px", "305px"]}
+            h={["120px", "120px", "188px"]}
+            marginLeft={["60px", "60px", "20px"]}
+            position="relative"
+          >
+            <CloudSVG scale={0.5}></CloudSVG>
+            <Center
+              position="absolute"
+              paddingTop="30px"
+              w={["200px", "200px", "305px"]}
+              h={["120px", "120px", "188px"]}
+            >
+              <Text fontSize={["md", "md", "lg"]}>Game Server</Text>
+            </Center>
+          </Flex>
+        </GridItem>
+        <GridItem order={[0, 0, 6]}>
+          <Center
+            ref={user}
+            w={[160, 200, 200]}
+            h={[160, 200, 200]}
+            flexDir="column"
+            position="relative"
+            marginLeft={["50px", "50px", 0]}
+          >
+            <Icon
+              as={BsFillPersonFill}
+              w={[120, 120, 160]}
+              h={[120, 120, 160]}
+            ></Icon>
+            <Text fontSize={["md", "md", "lg"]}>Game Designer</Text>
+          </Center>
+        </GridItem>
+      </Grid>
+      {!smallDiagram && (
+        <>
+          <Xarrow
+            start={smartContract}
+            end={gameClient}
+            startAnchor="right"
+            endAnchor={{ position: "left", offset: { y: 30 } }}
+            path="grid"
+            gridBreak="50%"
+            dashness={true}
+            {...xarrowStyle}
+          />
+          <Xarrow
+            start={smartContract}
+            end={adminDashboard}
+            startAnchor={{ position: "bottom", offset: { x: -125 } }}
+            endAnchor="top"
+            path="straight"
+            {...xarrowStyle}
+          />
+          <Xarrow
+            start={smartContract}
+            end={gameServer}
+            startAnchor={{ position: "bottom", offset: { x: 100 } }}
+            endAnchor={{ position: "left", offset: { y: 40 } }}
+            path="grid"
+            gridBreak="100%"
+            {...xarrowStyle}
+          />
+          <Xarrow
+            start={adminDashboard}
+            end={user}
+            startAnchor={{ position: "bottom", offset: { x: 5 } }}
+            endAnchor="top"
+            path="straight"
+            {...xarrowStyle}
+          />
+        </>
+      )}
+      {smallDiagram && (
+        <>
+          <Xarrow
+            start={smartContract}
+            end={gameClient}
+            startAnchor={{ position: "right", offset: { y: 10 } }}
+            endAnchor="right"
+            path="grid"
+            gridBreak="0%"
+            dashness={true}
+            {...xarrowStyle}
+          />
+          <Xarrow
+            start={smartContract}
+            end={gameServer}
+            startAnchor="left"
+            endAnchor={{ position: "left", offset: { y: 10 } }}
+            path="grid"
+            gridBreak="0%"
+            {...xarrowStyle}
+          />
+          <Xarrow
+            start={smartContract}
+            end={adminDashboard}
+            startAnchor={{ position: "right", offset: { y: -10 } }}
+            endAnchor="right"
+            path="grid"
+            gridBreak="0%"
+            {...xarrowStyle}
+          />
+          <Xarrow
+            start={adminDashboard}
+            end={user}
+            startAnchor={{ position: "top", offset: { x: -7 } }}
+            endAnchor="bottom"
+            path="straight"
+            {...xarrowStyle}
+          />
+        </>
+      )}
+    </>
+  );
+};
+
+const EngineOverviewDiagram = chakra(_EngineOverviewDiagram);
+
+export default EngineOverviewDiagram;
--- a/frontend/src/components/ExampleCode.js
+++ b/frontend/src/components/ExampleCode.js
@ -0,0 +1,153 @@
+import React from "react";
+// import { MODAL_TYPES } from "../core/providers/OverlayProvider/constants";
+import { Flex, Heading } from "@chakra-ui/react";
+import showdown from "showdown";
+import showdownHighlight from "showdown-highlight";
+
+const ExampleCode = (props) => {
+  const converter = new showdown.Converter({
+    ghCompatibleHeaderId: true,
+    parseImgDimensions: true,
+    simplifiedAutoLink: true,
+    literalMidWordUnderscores: true,
+    strikethrough: true,
+    tables: true,
+    tasklists: true,
+    openLinksInNewWindow: true,
+    emoji: true,
+    smartIndentationFix: true,
+    extensions: [showdownHighlight({ pre: true })],
+    disableForced4SpacesIndentedSublists: true,
+    ghCodeBlocks: true,
+  });
+  const code = `
+    \`\`\`js
+    async function startRandomLootboxOpening(lootboxId) {
+    let userAddress = window.ethereum.selectedAddress;
+        \tlet activeOpening = await checkUsersActiveLootboxOpeningStatus(userAddress);
+        if (activeOpening != null) {
+            console.log("User already has active opening");
+            return;
+        }
+
+        const count = 1; // you can open only 1 random lootbox at a time
+        await openOrdinaryLootbox(lootboxId, count);
+    }
+    \`\`\`
+  `;
+  let formattedCode = converter.makeHtml(code);
+  console.log(formattedCode);
+
+  const HtmlCode = () => {
+    return (
+      <>
+        <pre className="js language-js">
+          <code className="hljs js language-js">
+            <span className="hljs-keyword">{"async"}</span>{" "}
+            <span className="hljs-function">
+              <span className="hljs-keyword">function</span>{" "}
+              <span className="hljs-title">startRandomLootboxOpening</span>
+              {"("}
+              <span className="hljs-params">lootboxId</span>
+              {")"}{" "}
+            </span>
+            {"{"}
+            <br />
+            &nbsp; &nbsp;
+            <span className="hljs-keyword">{"let"}</span> {"userAddress ="}{" "}
+            <span className="hljs-built_in">{"window"}</span>
+            {".ethereum.selectedAddress;"}
+            <br />
+            &nbsp; &nbsp;
+            <span className="hljs-keyword">{"let"}</span> activeOpening ={" "}
+            <span className="hljs-keyword">{"await"}</span>{" "}
+            {"checkUsersActiveLootboxOpeningStatus(userAddress);"}
+            <br />
+            &nbsp; &nbsp;
+            <span className="hljs-keyword">{"if"}</span> (activeOpening !={" "}
+            <span className="hljs-literal">null</span>
+            {") {"}
+            <br />
+            &nbsp; &nbsp; &nbsp; &nbsp;
+            <span className="hljs-built_in">{"console"}</span>
+            {".log"}(
+            <span className="hljs-string">
+              &quot;User already has active opening&quot;
+            </span>
+            {");"}
+            <br />
+            &nbsp; &nbsp; &nbsp; &nbsp;
+            <span className="hljs-keyword">{"return"}</span>; <br />
+            &nbsp; &nbsp;
+            {"}"}
+            <br />
+            &nbsp; &nbsp;
+            <span className="hljs-keyword">const</span> count ={" "}
+            <span className="hljs-number">1</span>;{" "}
+            <span className="hljs-comment">
+              {"// you can open only 1 random lootbox at a time"}
+            </span>
+            <br />
+            &nbsp; &nbsp;
+            <span className="hljs-keyword">await</span>{" "}
+            openOrdinaryLootbox(lootboxId, count);
+            <br />
+            {"}"}
+          </code>
+        </pre>
+      </>
+    );
+  };
+
+  return (
+    <Flex
+      // h={["auto", "auto", "320px"]}
+      flexDirection="column"
+      textColor="white"
+      bgColor="#686464"
+      p="20px"
+      rounded="lg"
+    >
+      <Heading as="h3" fontSize="lg" pb="20px">
+        We make sure our code is easy to use. Here’s an example:
+      </Heading>
+      {/* <Flex dangerouslySetInnerHTML={formattedCode}></Flex> */}
+      {/* <Flex>{formattedCode}</Flex> */}
+      <Flex position={"relative"}>
+        <HtmlCode />
+      </Flex>
+      {/* <Text fontSize="md">
+        {"async function startRandomLootboxOpening( lootboxId ) {"}
+      </Text>
+      <Text fontSize="md">
+        {" "}
+        &nbsp; &nbsp;
+        {"let userAddress = window.ethereum.selectedAddress;"}
+      </Text>
+      <Text fontSize="md">
+        {" "}
+        &nbsp; &nbsp;
+        {
+          "let activeOpening = await checkUsersActiveLootboxOpeningStatus( userAddress );"
+        }
+      </Text>
+      <Text fontSize="md">&nbsp; &nbsp;{"if ( activeOpening != null ) {"}</Text>
+      <Text fontSize="md">
+        &nbsp; &nbsp; &nbsp; &nbsp;
+        {"console.log('User already has active opening');"}
+      </Text>
+      <Text fontSize="md">&nbsp; &nbsp; &nbsp; &nbsp;{"return;"}</Text>
+      <Text fontSize="md">&nbsp; &nbsp;{"}"}</Text>
+      <Text fontSize="md">
+        &nbsp; &nbsp;
+        {"const count = 1; // you can open only 1 random lootbox at a time"}
+      </Text>
+      <Text fontSize="md">
+        &nbsp; &nbsp;{"await openOrdinaryLootbox( lootboxId, count );"}
+      </Text>
+      <Text fontSize="md">{"}"}</Text> */}
+    </Flex>
+  );
+};
+
+export default ExampleCode;
--- a/frontend/src/components/FAQCard.js
+++ b/frontend/src/components/FAQCard.js
@ -0,0 +1,47 @@
+import { React } from "react";
+import {
+  chakra,
+  AccordionButton,
+  AccordionPanel,
+  Heading,
+  Box,
+  AccordionItem,
+} from "@chakra-ui/react";
+import { AddIcon, MinusIcon } from "@chakra-ui/icons";
+
+const _FAQCard = ({ heading, headingProps, panelContent }) => {
+  return (
+    <AccordionItem>
+      {({ isExpanded }) => (
+        <>
+          <AccordionButton>
+            <Box flex="1" textAlign="left" pr="10px">
+              <Heading
+                {...headingProps}
+                as="h3"
+                fontSize={["lg", "2xl", "3xl"]}
+              >
+                {heading}
+              </Heading>
+            </Box>
+            {isExpanded ? (
+              <MinusIcon fontSize="12px" />
+            ) : (
+              <AddIcon fontSize="12px" />
+            )}
+          </AccordionButton>
+          <AccordionPanel
+            pb={4}
+            fontSize={["md", "lg", "xl", "2xl", "3xl", "3xl"]}
+          >
+            {panelContent}
+          </AccordionPanel>
+        </>
+      )}
+    </AccordionItem>
+  );
+};
+
+const FAQCard = chakra(_FAQCard);
+
+export default FAQCard;
--- a/frontend/src/components/SVGGraphics/Cloud.js
+++ b/frontend/src/components/SVGGraphics/Cloud.js
@ -0,0 +1,39 @@
+import { React } from "react";
+import { chakra } from "@chakra-ui/react";
+
+const _CloudSVG = (scale) => {
+  scale = scale || 1.0;
+  return (
+    <svg
+      height={250 * scale}
+      viewBox="0 0 407 250"
+      fill="white"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M67.6021 247H314.166C447.987 247 425.603 40.5319 291.381 86.3142C291.381 -28.3364 89.9964 -28.3364 89.9964 109.274C-21.9547 86.3142 -21.9547 246.989 67.6021 246.989V247Z"
+        stroke="url(#paint0_linear_293_70)"
+        strokeWidth="5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <defs>
+        <linearGradient
+          id="paint0_linear_293_70"
+          x1="203.5"
+          y1="3"
+          x2="203.5"
+          y2="247"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stopColor="#212698" />
+          <stop offset="0.932309" stopColor="#FF9473" />
+        </linearGradient>
+      </defs>
+    </svg>
+  );
+};
+
+const CloudSVG = chakra(_CloudSVG);
+
+export default CloudSVG;
--- a/frontend/src/components/SVGGraphics/Rectangle.js
+++ b/frontend/src/components/SVGGraphics/Rectangle.js
@ -0,0 +1,38 @@
+import { React } from "react";
+import { chakra } from "@chakra-ui/react";
+
+const _RectangleSVG = (scale) => {
+  scale = scale || 1.0;
+  return (
+    <svg
+      height={265 * scale}
+      viewBox="0 0 245 265"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M242 3V262H3V3H242Z"
+        fill="white"
+        stroke="url(#paint0_linear_293_56)"
+        strokeWidth="5"
+      />
+      <defs>
+        <linearGradient
+          id="paint0_linear_293_56"
+          x1="242"
+          y1="129.066"
+          x2="3"
+          y2="129.066"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stopColor="#212698" />
+          <stop offset="1" stopColor="#FF8B73" />
+        </linearGradient>
+      </defs>
+    </svg>
+  );
+};
+
+const RectangleSVG = chakra(_RectangleSVG);
+
+export default RectangleSVG;
--- a/frontend/src/components/SVGGraphics/RoundedRect.js
+++ b/frontend/src/components/SVGGraphics/RoundedRect.js
@ -0,0 +1,39 @@
+import { React } from "react";
+import { chakra } from "@chakra-ui/react";
+
+const _RoundedRectSVG = (scale) => {
+  scale = scale || 1.0;
+  console.log(scale);
+  return (
+    <svg
+      height={134 * scale}
+      viewBox="0 0 472 134"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M3 33C3 16.4315 16.4315 3 33 3H439C455.569 3 469 16.4315 469 33V101C469 117.569 455.569 131 439 131H33C16.4314 131 3 117.569 3 101V33Z"
+        fill="white"
+        stroke="url(#paint0_linear_291_337)"
+        strokeWidth="5"
+      />
+      <defs>
+        <linearGradient
+          id="paint0_linear_291_337"
+          x1="229.821"
+          y1="3"
+          x2="229.821"
+          y2="131"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stopColor="#212698" />
+          <stop offset="1" stopColor="#FF8B73" />
+        </linearGradient>
+      </defs>
+    </svg>
+  );
+};
+
+const RoundedRectSVG = chakra(_RoundedRectSVG);
+
+export default RoundedRectSVG;
--- a/frontend/src/core/providers/OverlayProvider/constants.js
+++ b/frontend/src/core/providers/OverlayProvider/constants.js
@ -10,6 +10,7 @@ export const MODAL_TYPES = {
  UPLOAD_ABI: 8,
  NEW_DASHBOARD_FLOW: 9,
  MOBILE_INPUT_FIELD: 10,
+  EXAMPLE_CODE: 11,
 };

 export const DRAWER_TYPES = {
--- a/frontend/src/core/providers/OverlayProvider/index.js
+++ b/frontend/src/core/providers/OverlayProvider/index.js
@ -56,6 +56,8 @@ const NewSubscription = React.lazy(() =>

 const UploadABI = React.lazy(() => import("../../../components/UploadABI"));

+// const ExampleCode = React.lazy(() => import("../../../components/ExampleCode"));
+
 const OverlayProvider = ({ children }) => {
  const { params } = useRouter();
  const { dashboardId } = params;
@ -322,6 +324,9 @@ const OverlayProvider = ({ children }) => {
              {modal.type === MODAL_TYPES.MOBILE_INPUT_FIELD && (
                <UpdateSubscriptionLabelInput {...modal.props} />
              )}
+              {/* {modal.type === MODAL_TYPES.EXAMPLE_CODE && (
+                <ExampleCode {...modal.props} />
+              )} */}
            </Suspense>
          </ModalBody>
        </ModalContent>