First Sprint 🎊

.gitignore

@@ -0,0 +1,48 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+# vercel
+.vercel
+
+# Local Netlify folder
+.netlify
+
+Ideas.txt
+notes.txt
+
+# Pwa generated files
+**/public/workbox-*.js
+**/public/sw.js
+**/public/worker-*.js
+
+private
+/pages/test/

.prettierignore

@@ -0,0 +1,2 @@
+.next
+node_modules

.prettierrc.js

@@ -0,0 +1,6 @@
+module.exports = {
+    arrowParens: 'always',
+    singleQuote: 'false',
+    tabWidth: 4,
+    trailingComma: 'none'
+}

README.md

@@ -0,0 +1,4 @@
+# The Convo Space
+The Decentralized Conversation Layer of Internet.
+
+👉 [theconvo.space](https://theconvo.space)

components/Card.js

@@ -0,0 +1,65 @@
+import { useColorModeValue, Box, Flex, Text, Button, Divider } from "@chakra-ui/react";
+import { ArrowForwardIcon } from "@chakra-ui/icons";
+
+const Card = (props) => {
+
+  return (
+    <Flex
+      mx="10px"
+      py={8}
+      px={8}
+      color={useColorModeValue("black", "white")}
+      shadow="lg"
+      flexFlow="column"
+      maxWidth="370px"
+      backgroundColor={useColorModeValue("white", "#121212")}
+      borderWidth="1px"
+      borderColor={useColorModeValue("blue.200", "#121212")}
+      align="center"
+      _hover={{
+        borderWidth:"1px",
+        borderColor:useColorModeValue("gray.200", "#3e3e3e")
+      }}
+    >
+      <Box
+        align="center"
+        p={4}
+        borderRadius="6px"
+        backgroundColor={useColorModeValue("#81b0ff33", "#1c375c")}
+        mr={4}
+      >
+        {props.icon}
+      </Box>
+
+      <Text
+        as="h2"
+        fontSize="3xl"
+        fontWeight="700"
+        color={useColorModeValue("black", "white")}
+        align="center"
+        lineHeight="35px"
+        pt={4}
+        mt={{ base: 2, md: 0 }}
+      >
+        {props.title}
+      </Text>
+
+      <Divider my={4} borderWidth="1px" borderColor={useColorModeValue("gray.200", "#3e3e3e")}/>
+
+      {props.children}
+
+      <Text
+        size="lg"
+        my={3}
+        as="a" href={`https://docs.theconvo.space/${props.internalLink}`}
+        aria-label="View Docs"
+        className="glow"
+      >
+        View Docs <ArrowForwardIcon ml={2}/>
+      </Text>
+
+    </Flex>
+  );
+};
+
+export default Card;

components/CodeBlock.js

@@ -0,0 +1,57 @@
+import React from "react"
+import { Button, Box, useClipboard  } from "@chakra-ui/react"
+import { Prism as SyntaxHighlighter } from "react-syntax-highlighter"
+import { coldarkDark } from "react-syntax-highlighter/dist/cjs/styles/prism"
+import { CheckIcon, CopyIcon } from '@chakra-ui/icons';
+
+const CodeBlock = (props) => {
+  const { language } = props;
+  const { hasCopied, onCopy } = useClipboard(props?.code)
+
+  return (
+    <Box>
+      <Button
+        aria-label="CopyCode"
+        variant="ghost"
+        w={6}
+        h={7}
+        fontSize="small"
+        letterSpacing="1px"
+        fontWeight="500"
+        color="black"
+        align="right"
+        backgroundColor="teal.200"
+        _hover={{
+          backgroundColor:"teal.400"
+        }}
+        _active={{
+          backgroundColor:"teal.400"
+        }}
+        zIndex="1"
+        position="fixed"
+        position="absolute"
+        mt="20px"
+        right={{ base: "5vw", md:"12vw", lg:"21vw"}}
+        onClick={onCopy}
+      >
+        {hasCopied ? (
+          <CheckIcon/>
+        ) : (
+          <CopyIcon/>
+        )}
+      </Button>
+      <SyntaxHighlighter
+        language={language}
+        style={coldarkDark}
+        wrapLines={true}
+        showLineNumbers={true}
+        mt={5}
+      >
+        {props?.code}
+      </SyntaxHighlighter>
+
+    </Box>
+  )
+}
+
+export default CodeBlock

components/CustomButtons.js

@@ -0,0 +1,24 @@
+import React from "react";
+import { Button, useColorModeValue, Flex, Link   } from "@chakra-ui/react";
+import { motion } from 'framer-motion';
+
+export const CustomButton = (props) => {
+  return (
+    <motion.div
+      whileHover={{ scale: 1.05 }}
+      whileTap={{ scale: 0.95 }}
+    >
+      <Button
+        backgroundColor={useColorModeValue("gray.300","#323e46")}
+        rounded="md"
+        fontWeight="medium"
+        _hover={{
+          textShadow: "0 0 20px #fff",
+        }}
+        {...props}
+      >
+        {props.children}
+      </Button>
+    </motion.div>
+  );
+};

components/Dashboard/AccountSection.js

@@ -0,0 +1,35 @@
+import { Flex, Button } from "@chakra-ui/react";
+import { DownloadIcon } from "@chakra-ui/icons"
+
+const AccountSection = (props) => {
+
+    async function downloadAllData(){
+        let backup = JSON.stringify([{}]);
+        var blob1 = new Blob([backup], { type: "application/json;charset=utf-8" });
+        var url = window.URL || window.webkitURL;
+        let link = url.createObjectURL(blob1);
+        var a = document.createElement("a");
+        a.download = `Backup-${signerAddress}.json`;
+        a.href = link;
+        document.body.appendChild(a);
+        a.click();
+        document.body.removeChild(a);
+    }
+
+    async function nukeAllData(){
+        console.log("TODO: nukeAllData");
+    }
+
+    return (
+        <Flex direction="row">
+            <Button size="md" onClick={downloadAllData}>
+                <DownloadIcon w={4} h={4} mr={2}/> Download my Data
+            </Button>
+            <Button mx={2} size="md" colorScheme="red" onClick={nukeAllData}>
+                💣 Nuke my Data
+            </Button>
+        </Flex>
+    )
+}
+
+export default AccountSection;

components/Dashboard/DeveloperSection.js

@@ -0,0 +1,21 @@
+import { Button, Code, Flex, Text } from "@chakra-ui/react";
+import { ExternalLinkIcon } from '@chakra-ui/icons';
+
+const DeveloperSection = (props) => {
+    return (
+        <Flex mt={4} direction="column">
+            <Text as="h4" size="md">
+                Your Early-Access API Key : <Code fontSize={18}>CONVO</Code>
+            </Text>
+            <br/>
+            <Button leftIcon={<ExternalLinkIcon />} colorScheme="teal" variant="solid" w="fit-content"
+                as="a" href="https://docs.theconvo.space" target="_blank"
+            >
+                View Docs
+            </Button>
+
+        </Flex>
+    )
+}
+
+export default DeveloperSection;