feat: add info modal with about and acknowledgements

labeleven-dev · Aug 14, 2022 · a999d90 · a999d90
1 parent cfd0422
commit a999d90
Show file tree

Hide file tree

Showing 9 changed files with 334 additions and 7 deletions.
diff --git a/public/labeleven.png b/public/labeleven.png
diff --git a/src/App.tsx b/src/App.tsx
@@ -14,6 +14,7 @@ import { Web3Provider } from "./components/common/Web3Provider";
 import { Footer } from "./components/Footer";
 import { Header } from "./components/header/Header";
 import { ImportModal } from "./components/ImportModal";
+import { InfoModal } from "./components/info/InfoModal";
 import { Options } from "./components/options/Options";
 import { Palette } from "./components/palette/Palette";
 import { ShareModal } from "./components/ShareModal";
@@ -73,6 +74,7 @@ export const App: React.FC = () => {
         <Options />
         <ImportModal />
         <ShareModal />
+        <InfoModal />
       </Web3Provider>
     </ChakraProvider>
   );

diff --git a/src/components/header/Header.tsx b/src/components/header/Header.tsx
@@ -1,4 +1,4 @@
-import { HamburgerIcon, QuestionIcon } from "@chakra-ui/icons";
+import { HamburgerIcon, InfoIcon } from "@chakra-ui/icons";
 import {
   DarkMode,
   Flex,
@@ -100,15 +100,18 @@ export const Header: React.FC = () => {
           />
         </Tooltip>
 
-        {/* TODO implement */}
-        <Tooltip label="Help">
+        <Tooltip label="Info">
           <IconButton
-            mr="0.5"
-            aria-label="Help"
-            icon={<QuestionIcon />}
+            mr="1"
+            aria-label="Info"
+            icon={<InfoIcon />}
             variant="ghost"
             color="white"
-            isDisabled
+            onClick={() => {
+              set((state) => {
+                state.uiState.infoOpen = true;
+              });
+            }}
           />
         </Tooltip>
       </DarkMode>

diff --git a/src/components/info/About.tsx b/src/components/info/About.tsx
@@ -0,0 +1,152 @@
+import {
+  Box,
+  Center,
+  HStack,
+  Icon,
+  Image,
+  Link,
+  Text,
+  useColorMode,
+  VStack,
+  Wrap,
+  WrapItem,
+} from "@chakra-ui/react";
+import GitHubButton from "react-github-btn";
+import { FaGithub, FaTwitter, FaYoutube } from "react-icons/fa";
+
+const GITHUB_URL = "https://github.com/labeleven-dev/bettercallsol";
+
+export const About: React.FC = () => {
+  const { colorMode } = useColorMode();
+
+  return (
+    <VStack mt="5">
+      <Image w="80px" h="80px" src="/logo128.png" alt="Logo" />
+      <Text
+        p="2"
+        fontFamily="'Dancing Script', cursive;"
+        fontWeight="extrabold"
+        fontSize="4xl"
+        bgGradient="linear(to-r, #ff6f61ff, #fece2f)"
+        bgClip="text"
+      >
+        Better Call Sol
+      </Text>
+
+      <Box h="5" />
+
+      <Box p="5" boxShadow="dark-lg" rounded="lg">
+        <Center mb="3">
+          <Link href={GITHUB_URL} isExternal as="kbd" fontSize="md">
+            <Icon as={FaGithub} mr="1" />
+            labeleven-dev/bettercallsol
+          </Link>
+        </Center>
+
+        <Wrap spacingX="1" spacingY="-1" justify="center" align="center">
+          <WrapItem>
+            <GitHubButton
+              href="https://github.com/labeleven-dev/bettercallsol"
+              data-icon="octicon-star"
+              data-color-scheme={colorMode}
+              data-show-count="true"
+              aria-label="Star labeleven-dev/bettercallsol on GitHub"
+            >
+              Star
+            </GitHubButton>
+          </WrapItem>
+
+          <WrapItem>
+            <GitHubButton
+              href="https://github.com/labeleven-dev/bettercallsol/subscription"
+              data-icon="octicon-eye"
+              data-color-scheme={colorMode}
+              data-show-count="true"
+              aria-label="Watch labeleven-dev/bettercallsol on GitHub"
+            >
+              Watch
+            </GitHubButton>
+          </WrapItem>
+
+          <WrapItem>
+            <GitHubButton
+              href="https://github.com/orgs/labeleven-dev/projects/1"
+              data-color-scheme={colorMode}
+              aria-label="Discuss labeleven-dev/bettercallsol on GitHub"
+            >
+              Roadmap
+            </GitHubButton>
+          </WrapItem>
+
+          <WrapItem>
+            <GitHubButton
+              href="https://github.com/labeleven-dev/bettercallsol/discussions"
+              data-icon="octicon-comment-discussion"
+              data-color-scheme={colorMode}
+              aria-label="Discuss labeleven-dev/bettercallsol on GitHub"
+            >
+              Discuss
+            </GitHubButton>
+          </WrapItem>
+
+          <WrapItem>
+            <GitHubButton
+              href="https://github.com/labeleven-dev/bettercallsol/issues/new?template=bug.yml&labels=bug"
+              data-icon="octicon-issue-opened"
+              data-color-scheme={colorMode}
+              aria-label="Issue labeleven-dev/bettercallsol on GitHub"
+            >
+              Bug Report
+            </GitHubButton>
+          </WrapItem>
+
+          <WrapItem>
+            <GitHubButton
+              href="https://github.com/labeleven-dev/bettercallsol/issues/new?template=feature_request.md&labels=enhancement"
+              data-icon="octicon-issue-opened"
+              data-color-scheme={colorMode}
+              aria-label="Issue labeleven-dev/bettercallsol on GitHub"
+            >
+              Feature Request
+            </GitHubButton>
+          </WrapItem>
+
+          <WrapItem>
+            <GitHubButton
+              href="https://github.com/labeleven-dev/bettercallsol/security/policy"
+              data-icon="octicon-issue-opened"
+              data-color-scheme={colorMode}
+              aria-label="Issue labeleven-dev/bettercallsol on GitHub"
+            >
+              Security Policy
+            </GitHubButton>
+          </WrapItem>
+        </Wrap>
+      </Box>
+
+      <Box h="5" />
+
+      <Link href="https://labeleven.dev" isExternal>
+        <Image w="100px" src="/labeleven.png" alt="Lab Eleven" />
+      </Link>
+      <HStack>
+        <Link href="https://twitter.com/labeleven_dev" isExternal>
+          <Icon mr="1" as={FaTwitter} />
+        </Link>
+        <Link href="https://github.com/labeleven-dev" isExternal>
+          <Icon mr="1" as={FaGithub} />
+        </Link>
+        <Link
+          href="https://www.youtube.com/channel/UCunAE5fS1UsgRTmLxjk9i4g"
+          isExternal
+        >
+          <Icon as={FaYoutube} />
+        </Link>
+      </HStack>
+
+      <Text fontSize="sm" pt="5">
+        Made with ❤ in Australia
+      </Text>
+    </VStack>
+  );
+};
diff --git a/src/components/info/Acknowledgements.tsx b/src/components/info/Acknowledgements.tsx
@@ -0,0 +1,97 @@
+import { Box, Text, VStack } from "@chakra-ui/react";
+
+export const Acknowledgements: React.FC = () => (
+  <VStack spacing="5">
+    <Text>
+      We'd like to acknowledge and thank the open-source libraries that have
+      made this app possible.
+    </Text>
+
+    <Box
+      p="3"
+      as="kbd"
+      fontSize="sm"
+      maxH="400px"
+      overflow="scroll"
+      whiteSpace="nowrap"
+      maxW="100%"
+      boxShadow="inner"
+    >
+      <Text>
+        @chakra-ui/icons (2.0.4), licenced MIT
+        <br />
+        @chakra-ui/react (2.2.4), licenced MIT
+        <br />
+        @dnd-kit/core (6.0.5), licenced MIT
+        <br />
+        @dnd-kit/modifiers (6.0.0), licenced MIT
+        <br />
+        @dnd-kit/sortable (7.0.1), licenced MIT
+        <br />
+        @emotion/react (11.9.3), licenced MIT
+        <br />
+        @emotion/styled (11.9.3), licenced MIT
+        <br />
+        @project-serum/anchor (0.25.0), licenced (MIT OR Apache-2.0)
+        <br />
+        @semantic-release/exec (6.0.3), licenced MIT
+        <br />
+        @sentry/react (7.10.0), licenced BSD-3-Clause
+        <br />
+        @solana/buffer-layout (4.0.0), licenced MIT
+        <br />
+        @solana/wallet-adapter-base (0.9.10), licenced Apache-2.0
+        <br />
+        @solana/wallet-adapter-react (0.15.9), licenced Apache-2.0
+        <br />
+        @solana/wallet-adapter-react-ui (0.9.12), licenced Apache-2.0
+        <br />
+        @solana/wallet-adapter-wallets (0.17.2), licenced Apache-2.0
+        <br />
+        @solana/web3.js (1.51.0), licenced MIT
+        <br />
+        ajv (8.11.0), licenced MIT
+        <br />
+        axios (0.27.2), licenced MIT
+        <br />
+        bignumber.js (9.0.2), licenced MIT
+        <br />
+        crypto-browserify (3.12.0), licenced MIT
+        <br />
+        framer-motion (6.3.15), licenced MIT
+        <br />
+        immer (9.0.15), licenced MIT
+        <br />
+        js-sha256 (0.9.0), licenced MIT
+        <br />
+        pako (2.0.4), licenced (MIT AND Zlib)
+        <br />
+        react (18.2.0), licenced MIT
+        <br />
+        react-dom (18.2.0), licenced MIT
+        <br />
+        react-github-btn (1.3.0), licenced BSD-2-Clause
+        <br />
+        react-icons (3.11.0), licenced MIT
+        <br />
+        react-router-dom (6.3.0), licenced MIT
+        <br />
+        snake-case (3.0.4), licenced MIT
+        <br />
+        stream-browserify (3.0.0), licenced MIT
+        <br />
+        typescript (4.7.4), licenced Apache-2.0
+        <br />
+        uuid (8.3.2), licenced MIT
+        <br />
+        web-vitals (0.2.4), licenced Apache-2.0
+        <br />
+        zustand (4.0.0), licenced MIT
+        <br />
+        Phone icons created by Freepik - Flaticon
+      </Text>
+    </Box>
+
+    <Text fontSize="sm">We ❤ Open Source Software</Text>
+  </VStack>
+);
diff --git a/src/components/info/Help.tsx b/src/components/info/Help.tsx
@@ -0,0 +1,7 @@
+import { Text } from "@chakra-ui/react";
+
+export const Help: React.FC = () => (
+  <Text pt="10" pb="10" textAlign="center">
+    Docs are coming soon!
+  </Text>
+);
diff --git a/src/components/info/InfoModal.tsx b/src/components/info/InfoModal.tsx
@@ -0,0 +1,64 @@
+import {
+  Modal,
+  ModalBody,
+  ModalCloseButton,
+  ModalContent,
+  ModalHeader,
+  ModalOverlay,
+  Tab,
+  TabList,
+  TabPanel,
+  TabPanels,
+  Tabs,
+} from "@chakra-ui/react";
+import { useSessionStoreWithoutUndo } from "../../hooks/useSessionStore";
+import { About } from "./About";
+import { Acknowledgements } from "./Acknowledgements";
+import { Help } from "./Help";
+
+export const InfoModal: React.FC = () => {
+  const [isOpen, set] = useSessionStoreWithoutUndo((state) => [
+    state.uiState.infoOpen,
+    state.set,
+  ]);
+  return (
+    <Modal
+      isOpen={isOpen}
+      onClose={() => {
+        set((state) => {
+          state.uiState.infoOpen = false;
+        });
+      }}
+    >
+      <ModalOverlay />
+      <ModalContent>
+        <ModalHeader>Info</ModalHeader>
+
+        <ModalCloseButton />
+
+        <ModalBody>
+          <Tabs isFitted>
+            <TabList>
+              <Tab>Help</Tab>
+              <Tab>About</Tab>
+              <Tab>Acknowledgements</Tab>
+            </TabList>
+
+            <TabPanels>
+              <TabPanel>
+                <Help />
+              </TabPanel>
+              <TabPanel>
+                <About />
+              </TabPanel>
+
+              <TabPanel>
+                <Acknowledgements />
+              </TabPanel>
+            </TabPanels>
+          </Tabs>
+        </ModalBody>
+      </ModalContent>
+    </Modal>
+  );
+};
diff --git a/src/types/state.ts b/src/types/state.ts
@@ -32,6 +32,7 @@ export interface UIState {
   readonly paletteOpen: boolean;
   readonly optionsOpen: boolean;
   readonly shareOpen: boolean;
+  readonly infoOpen: boolean;
 }
 
 export interface ImportState {

diff --git a/src/utils/state.ts b/src/utils/state.ts
@@ -113,6 +113,7 @@ export const DEFAULT_SESSION_STATE_WITHOUT_UNDO: SessionStateWithoutUndo = {
     paletteOpen: false,
     optionsOpen: false,
     shareOpen: false,
+    infoOpen: false,
   },
   import: DEFAULT_IMPORT,
   set: () => {}, // set by the hook