feat: list flies (#3)

* refactor: remove temp directory use and use a random hash * refactor: revert directory naming to the merkle root, it just makes sense * feat: implement merkle proof generation * fix: merkle tree algorithm to correctly create trees when odd leafs are found * feat: add page to list files and fetch files and generate the proof for each file
kieranroneill · Feb 25, 2024 · 0946c33 · 0946c33
1 parent b68ec35
commit 0946c33
Show file tree

Hide file tree

Showing 46 changed files with 824 additions and 312 deletions.
diff --git a/README.md b/README.md
@@ -5,15 +5,15 @@
 </p>
 
 <h1 align="center">
-   Aether
+   aether
 </h1>
 
 <p align="center">
-  Journey into the Aether where storage defies conventional bounds.
+  Journey into the aether where storage defies conventional bounds.
 </p>
 
 <p align="center">
-  Aether is a modern file storage platform that implements a state-of-the-art Merkle tree structure to store multiple files.
+  aether is a modern file storage platform that implements a state-of-the-art Merkle tree structure to store multiple files.
 </p>
 
 <p align="center">
@@ -86,7 +86,7 @@ make setup
 make
 ```
 
-> ⚠️ **NOTE:** The `make` command will run/re-run `make install`, but will not overwrite any `.env.*` that may have been edited in section [1.2.](#22-setting-up-environment-variables-optional)
+> ⚠️ **NOTE:** The `make` command will run/re-run `make setup`, but will not overwrite any `.env.*` that may have been edited in section [1.2.](#22-setting-up-environment-variables-optional)
 
 2. Navigate to [http://localhost:8080](http://localhost:8080) to access the web portal.
 
@@ -105,8 +105,8 @@ make
 | `make dev-web`    | Runs the web app using `next dev`. Intended for development purposes only.                                                               |
 | `make clean`      | Deletes the build directory.                                                                                                             |
 | `make install`    | Installs the yarn and golang dependencies.                                                                                               |
-| `make run`        | Checks if the apps are correctly configured and runs Docker Compose.                                                                     |
-| `make setup`      | Creates the `.env.*` files to the `.config/` directory.                                                                                  |
+| `make run`        | Checks if the apps are correctly configured and runs Docker Compose.  Intended for development purposes only.                            |
+| `make setup`      | Creates `.env.*` files in the `.config/` directory.                                                                                      |
 
 <sup>[Back to top ^][table-of-contents]</sup>
 

diff --git a/app/@types/environment.d.ts b/app/@types/environment.d.ts
@@ -6,6 +6,7 @@ declare namespace NodeJS {
     readonly PORT: string;
 
     // public
+    readonly NEXT_PUBLIC_CORE_URL: string;
     readonly NEXT_PUBLIC_DESCRIPTION: string;
     readonly NEXT_PUBLIC_LOG_LEVEL: string;
     readonly NEXT_PUBLIC_TAGLINE: string;

diff --git a/app/components/Header/Header.tsx b/app/components/Header/Header.tsx
@@ -36,7 +36,7 @@ const Header: FC<IProps> = ({ onNavigationClick }) => {
       w="full"
     >
       {/*open navigation menu button*/}
-      <Tooltip label={`Open navigation menu`}>
+      <Tooltip label={`Open Navigation Menu`}>
         <IconButton
           _hover={{ bg: buttonHoverBackgroundColor }}
           aria-label="Open navigation drawer"
@@ -56,7 +56,7 @@ const Header: FC<IProps> = ({ onNavigationClick }) => {
       >
         <IconButton
           _hover={{ bg: buttonHoverBackgroundColor }}
-          aria-label="Change color mode"
+          aria-label="Change Color Mode"
           color={defaultTextColor}
           icon={colorMode === 'dark' ? <IoSunnyOutline /> : <IoMoonOutline />}
           onClick={handlerColorChangeClick}

diff --git a/app/components/Navigation/Navigation.tsx b/app/components/Navigation/Navigation.tsx
@@ -18,6 +18,7 @@ import {
   IoCheckmarkCircleOutline,
   IoChevronBackOutline,
   IoCloudUploadOutline,
+  IoListOutline,
 } from 'react-icons/io5';
 
 // components
@@ -27,6 +28,7 @@ import NavigationLinkItem from './NavigationLinkItem';
 // constants
 import {
   DEFAULT_GAP,
+  FILES_ROUTE,
   INDEX_ROUTE,
   UPLOAD_ROUTE,
   VERIFY_ROUTE,
@@ -53,6 +55,11 @@ const Navigation: FC<IProps> = ({ isOpen, onClose }) => {
       label: 'Upload',
       route: UPLOAD_ROUTE,
     },
+    {
+      icon: IoListOutline,
+      label: 'Files',
+      route: FILES_ROUTE,
+    },
     {
       icon: IoCheckmarkCircleOutline,
       label: 'Verify',
@@ -82,7 +89,7 @@ const Navigation: FC<IProps> = ({ isOpen, onClose }) => {
             {/*icon*/}
             <IconButton
               _hover={{ bg: 'transparent' }}
-              aria-label="Go to hom epage"
+              aria-label="Go To Home"
               color={primaryColor}
               icon={<AetherIcon h={12} w={12} />}
               onClick={handleHomeClick}
@@ -93,7 +100,7 @@ const Navigation: FC<IProps> = ({ isOpen, onClose }) => {
             <Spacer />
 
             {/*close navigation menu button*/}
-            <Tooltip label={`Close navigation menu`}>
+            <Tooltip label={`Close Menu`}>
               <IconButton
                 _hover={{ bg: buttonHoverBackgroundColor }}
                 aria-label="Close navigation drawer"

diff --git a/app/components/UploadCompleteModal/UploadCompleteModal.tsx b/app/components/UploadCompleteModal/UploadCompleteModal.tsx
@@ -34,7 +34,7 @@ import type { IProps } from './types';
 // utils
 import downloadJSONFile from '@app/utils/downloadJSONFile';
 
-const UploadCompleteModal: FC<IProps> = ({ merkleTreeRootHash, onClose }) => {
+const UploadCompleteModal: FC<IProps> = ({ onClose, uploadResponse }) => {
   // hooks
   const defaultTextColor: string = useDefaultTextColor();
   const logger: ILogger = useLogger();
@@ -44,24 +44,22 @@ const UploadCompleteModal: FC<IProps> = ({ merkleTreeRootHash, onClose }) => {
   const handleDownloadMerkleRoot = () => {
     const _functionName: string = 'handleDownloadMerkleRoot';
 
-    if (!merkleTreeRootHash) {
+    if (!uploadResponse) {
       logger.debug(
         `${UploadCompleteModal.displayName}#${_functionName}: no merkle tree root hash found, ignoring`
       );
 
       return;
     }
 
-    // create a data uri from the json and download ir
-    downloadJSONFile('root', {
-      root: merkleTreeRootHash,
-    });
+    // create a data uri from the json and download it - use the merkle root as the file name
+    downloadJSONFile(uploadResponse.root, uploadResponse);
   };
 
   return (
     <Modal
       closeOnOverlayClick={false}
-      isOpen={!!merkleTreeRootHash}
+      isOpen={!!uploadResponse}
       onClose={onClose}
     >
       <ModalOverlay />
@@ -82,19 +80,19 @@ const UploadCompleteModal: FC<IProps> = ({ merkleTreeRootHash, onClose }) => {
 
             {/*merkle tree root hash*/}
             <HStack alignItems="center" spacing={1} w="full">
-              {!merkleTreeRootHash ? (
+              {!uploadResponse ? (
                 <Skeleton height="20px" w="full" />
               ) : (
                 <>
                   {/*merkle tree root hash*/}
                   <Code borderRadius="md" flexGrow={1} wordBreak="break-word">
-                    {merkleTreeRootHash}
+                    {uploadResponse.root}
                   </Code>
 
                   {/*copy button*/}
                   <CopyIconButton
                     ariaLabel={`Copy hash`}
-                    value={merkleTreeRootHash}
+                    value={uploadResponse.root}
                   />
                 </>
               )}

diff --git a/app/components/UploadCompleteModal/types/IProps.ts b/app/components/UploadCompleteModal/types/IProps.ts
@@ -1,6 +1,9 @@
+// types
+import type { IUploadResponse } from '@app/types';
+
 interface IProps {
-  merkleTreeRootHash: string | null;
   onClose: () => void;
+  uploadResponse: IUploadResponse | null;
 }
 
 export default IProps;
diff --git a/app/constants/Paths.ts b/app/constants/Paths.ts
@@ -0,0 +1,3 @@
+export const FILES_PATH: string = 'files';
+export const UPLOAD_PATH: string = 'upload';
+export const VERSIONS_PATH: string = 'versions';
diff --git a/app/constants/Routes.ts b/app/constants/Routes.ts
@@ -1,3 +1,4 @@
+export const FILES_ROUTE: string = '/files';
 export const INDEX_ROUTE: string = '/';
 export const UPLOAD_ROUTE: string = '/upload';
 export const VERIFY_ROUTE: string = '/verify';
diff --git a/app/constants/index.ts b/app/constants/index.ts
@@ -1,4 +1,5 @@
 export * from './Dimensions';
 export * from './Links';
+export * from './Paths';
 export * from './Routes';
 export * from './Styles';
diff --git a/app/enums/LeafPositionEnum.ts b/app/enums/LeafPositionEnum.ts
@@ -0,0 +1,6 @@
+enum LeafPositionEnum {
+  Left = 0,
+  Right = 1,
+}
+
+export default LeafPositionEnum;
diff --git a/app/enums/index.ts b/app/enums/index.ts
@@ -0,0 +1 @@
+export { default as LeafPositionEnum } from './LeafPositionEnum';
diff --git a/app/files/page.tsx b/app/files/page.tsx
@@ -0,0 +1,179 @@
+'use client';
+import {
+  Accordion,
+  AccordionButton,
+  AccordionIcon,
+  AccordionItem,
+  AccordionPanel,
+  Code,
+  Heading,
+  HStack,
+  IconButton,
+  Skeleton,
+  Spacer,
+  Stack,
+  Text,
+  Tooltip,
+  VStack,
+} from '@chakra-ui/react';
+import { NextPage } from 'next';
+import React from 'react';
+import { IoDownloadOutline } from 'react-icons/io5';
+
+// components
+import CopyIconButton from '@app/components/CopyIconButton';
+
+// constants
+import { DEFAULT_GAP } from '@app/constants';
+
+// hooks
+import useButtonHoverBackgroundColor from '@app/hooks/useButtonHoverBackgroundColor';
+import useDefaultTextColor from '@app/hooks/useDefaultTextColor';
+import useFiles from '@app/hooks/useFiles';
+import useSubTextColor from '@app/hooks/useSubTextColor';
+
+// types
+import type { IFileResponse } from '@app/types';
+
+// utils
+import downloadJSONFile from '@app/utils/downloadJSONFile';
+
+const FilesPage: NextPage = () => {
+  // hooks
+  const buttonHoverBackgroundColor: string = useButtonHoverBackgroundColor();
+  const defaultTextColor: string = useDefaultTextColor();
+  const subTextColor: string = useSubTextColor();
+  const { files, loading } = useFiles();
+  // handlers
+  const handleDownloadProofClick = (file: IFileResponse) => () =>
+    downloadJSONFile(file.hash, file.proof);
+  // renders
+  const renderContent = () => {
+    let fileKeys: string[];
+
+    if (loading) {
+      return Array.from({ length: 3 }, (_, index) => (
+        <Skeleton h="20px" key={`files-page-skeleton-item-${index}`} w="full" />
+      ));
+    }
+
+    if (files) {
+      fileKeys = Object.keys(files);
+
+      if (fileKeys.length > 0) {
+        return (
+          <Accordion allowMultiple={true} allowToggle={true} w="full">
+            {fileKeys.map((key, fileKeyIndex) => (
+              <AccordionItem key={`files-page-${key}-${fileKeyIndex}`}>
+                {/*accordian button*/}
+                <AccordionButton p={DEFAULT_GAP / 2}>
+                  <Code
+                    color={defaultTextColor}
+                    fontSize="md"
+                    maxW={650}
+                    noOfLines={1}
+                    textAlign="left"
+                  >
+                    {key}
+                  </Code>
+
+                  <Spacer />
+
+                  <AccordionIcon />
+                </AccordionButton>
+
+                {/*list of files*/}
+                <AccordionPanel p={0}>
+                  {files[key].map((file, index) => (
+                    <HStack
+                      alignItems="center"
+                      justifyContent="space-between"
+                      key={`files-page-${key}-item-${index}`}
+                      p={DEFAULT_GAP / 2}
+                      spacing={DEFAULT_GAP / 3}
+                      w="full"
+                    >
+                      {/*name*/}
+                      <Text
+                        color={subTextColor}
+                        fontSize="sm"
+                        maxW={500}
+                        noOfLines={1}
+                        textAlign="left"
+                      >
+                        {file.name}
+                      </Text>
+
+                      <Spacer />
+
+                      {/*copy hash button*/}
+                      <CopyIconButton
+                        ariaLabel={`Copy Hash`}
+                        size="md"
+                        value={file.hash}
+                      />
+
+                      {/*download proof button*/}
+                      <Tooltip label={`Download Proof`}>
+                        <IconButton
+                          _hover={{ bg: buttonHoverBackgroundColor }}
+                          aria-label="Download file proof"
+                          color={defaultTextColor}
+                          icon={<IoDownloadOutline />}
+                          onClick={handleDownloadProofClick(file)}
+                          size="md"
+                          variant="ghost"
+                        />
+                      </Tooltip>
+                    </HStack>
+                  ))}
+                </AccordionPanel>
+              </AccordionItem>
+            ))}
+          </Accordion>
+        );
+      }
+    }
+
+    // when there are no files returned
+    return (
+      <Stack alignItems="center" flexGrow={1} justify="center" w="full">
+        <Text color={defaultTextColor} textAlign="center">
+          {`No files found!`}
+        </Text>
+      </Stack>
+    );
+  };
+
+  return (
+    <VStack
+      alignItems="center"
+      justifyContent="flex-start"
+      flexGrow={1}
+      spacing={DEFAULT_GAP}
+      w="full"
+    >
+      {/*heading*/}
+      <Heading color={defaultTextColor} size="lg" textAlign="center" w="full">
+        {`Files`}
+      </Heading>
+
+      {/*description*/}
+      <Text color={defaultTextColor} size="md" textAlign="center" w="full">
+        {`Below is a list of files, grouped by their merkle tree roots. You can download a file's proof and use the root you received to verify the file's integrity.`}
+      </Text>
+
+      <VStack
+        alignItems="center"
+        flexGrow={1}
+        justify="flex-start"
+        spacing={DEFAULT_GAP - 2}
+        w="full"
+      >
+        {renderContent()}
+      </VStack>
+    </VStack>
+  );
+};
+
+export default FilesPage;
diff --git a/app/hooks/useFiles/index.ts b/app/hooks/useFiles/index.ts
@@ -0,0 +1,2 @@
+export { default } from './useFiles';
+export * from './types';
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		export { default as LeafPositionEnum } from './LeafPositionEnum';
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		export { default } from './useFiles';
		export * from './types';