Merge dev branch

README.md

@@ -1,38 +1,43 @@
-
 # Fairdrive
 
+<img src="./src/media/branding/logotype-dark.svg">
 At the intersection of innovation, interoperability, and decentralization, Fairdrive emerges for the cause of fair data. This initiative, driven by the community, is dedicated to promoting freedom. By facilitating decentralized storage, it allows developers to construct interoperable, decentralized, and open-source dApps. This, in turn, enables users to regain their privacy, assume ownership of their data, and control their digital identity.
 
 [Login here](https://app.fairdrive.fairdatasociety.org)
 
 ### What is Fairdrive
 
-Fairdrive is a decentralized application (dApp) that facilitates distributed storage on the Swarm network. It features a "Drive" interface for managing pods, files and folders. Internally, Fairdrive uses Fair Data Protocol, which is built on top of Ethereum Swarm. 
+Fairdrive is a decentralized application (dApp) that facilitates distributed storage on the Swarm network. It features a "Drive" interface for managing pods, files and folders. Internally, Fairdrive uses Fair Data Protocol, which is built on top of Ethereum Swarm.
 
 ### Why Fairdrive
+
 #### Pros
+
 - **Data Encryption**: Fairdrive encrypts all data by default, providing an additional layer of security for your files.
 - **Data Ownership**: Unlike traditional cloud storage services, where your data is technically owned by the service provider, with Fairdrive, you are the sole owner of your data.
 - **Decentralized Storage**: Fairdrive stores data on the Swarm decentralized network. This means your data isn't stored in a single location, but is distributed across multiple nodes, enhancing data security and reliability.
 - **User Control**: Only you have access to your data. You control who can access your data and how it's used.
 
 #### Cons
+
 - **Speed**: Due to its decentralized nature, Fairdrive can be slower than traditional cloud storage services. This is because data isn't stored in a single location, but is distributed across multiple nodes in the Swarm network. As a result, it can take longer to retrieve data.
 - **Learning Curve**: As a decentralized application (dApp), Fairdrive might have a steeper learning curve for users who are not familiar with blockchain technology and decentralized networks.
 - **Dependence on Swarm Network**: The performance and reliability of Fairdrive are dependent on the Swarm network. If there are issues with the network, it could affect the availability and performance of Fairdrive.
 - **Data Recovery**: In case of loss of access keys, data recovery might be challenging or impossible due to the decentralized and encrypted nature of the storage.
 
 ## Getting Help
 
-If you need help using Fairdrive as user, check out [User Guide](docs/USER-GUIDE.md) and [FAQ](docs/FAQ.md). See [Getting Started](docs/GETTING-STARTED.md). 
-Technical overview of [Design](docs/DESIGN.md), [Functionality](docs/FUNCTIONALITY.md) and [Architecture](docs/ARCHITECTURE.md). 
+If you need help using Fairdrive as user, check out [User Guide](docs/USER-GUIDE.md) and [FAQ](docs/FAQ.md). See [Getting Started](docs/GETTING-STARTED.md).
+Technical overview of [Design](docs/DESIGN.md), [Functionality](docs/FUNCTIONALITY.md) and [Architecture](docs/ARCHITECTURE.md).
 
 If you can't find the answer to your question, feel free to [contact us](docs/CONTACT.md).
 
 ## Development
+
 See [**Development instructions**](docs/DEVELOPMENT.md) for information how to install and develop on local machines.
 
 ## Join Us in Building Fairdrive
+
 Fairdrive is a community-driven initiative, and we welcome contributions from anyone who shares our vision for a decentralized, user-controlled digital world. Whether you're a developer, a designer, a writer, or just someone who's interested in what we're doing, there are many ways you can contribute to Fairdrive.
 
 If you're a developer, you can help us improve the Fairdrive application by fixing bugs, adding new features, or improving our documentation. Check out our [open issues](https://github.com/fairDataSociety/fairdrive-theapp/issues) to see what we're currently working on.
@@ -47,8 +52,8 @@ We believe that everyone has something valuable to contribute, and we're committ
 
 Together, we can make Fairdrive the best it can be!
 
-
 ## Development Stage Notice for Fairdrive
+
 Please be aware that Fairdrive is currently in its development stage. This means that the application is still undergoing substantial updates, modifications, and improvements. As a result, certain functionalities may change, be added, or removed without prior notice.
 
 During this development stage, there's also a risk of data loss. While we strive to ensure the integrity and security of all data stored on Fairdrive, the decentralized nature of the application and the ongoing development work mean that we cannot guarantee complete data preservation.
@@ -64,4 +69,4 @@ We strongly recommend that you keep backups of any critical data you store on Fa
 - **Testnet**: https://app.fairdrive.fairdatasociety.org
 - **Development**: https://app.fairdrive.dev.fairdatasociety.org
 
-Current testnet deployment is on: Sepolia. 
+Current testnet deployment is on: Sepolia.

docs/USER-GUIDE.md

@@ -19,38 +19,45 @@ Welcome to the Fairdrive User Guide! This guide will walk you through all the fe
 To use Fairdrive, you'll need to create an account using any of below options. Here's how:
 
 #### 1. Using Metamask
+
 1. Click Connect
-2. Select Metamask 
-3. Type passphrase 
-4. Connect Metamask to site with your preffered account
+2. Select Metamask
+3. Type passphrase
+4. Connect Metamask to site with your preferred account
 5. Sign Message
 
 #### 2. Using FDP Portable account
+
 1. Go to the Fairdrive website.
 2. Click on the "Register New Account" button.
 3. Fill out the registration form with your details.
 4. When you finish procedure your FDP account will be ready
-4. Login into Fairdrive using your username/password
+5. Login into Fairdrive using your username/password
 
 #### 3. Using Bloosom extension
+
 1. Make sure you are logged in inside Blossom extension
 2. Click Connect
 3. Select Blossom
 4. Allow Fairdrive full access of your personal storage
 
 ## Logging In
+
 **Metamask** account:
+
 1. Click Connect
 2. Enter passphrase
-3. Sign message 
+3. Sign message
 
 **FDP Portable account** to log in to Fairdrive:
+
 1. Go to the Fairdrive website.
 2. Click on the "Log In" button.
 3. Enter your username and password.
 4. Click "Submit" to log in.
 
 ## Account Migration
+
 You have the option to transition your Metamask-created Lite account to an FDP Portable account. This transition enables you to utilize a username/password combination to access your data from mobile devices or other devices where Metamask isn't installed. Your Lite account will be connected with your new Portable account.
 During this transition process, you'll be given a new mnemonic. It's crucial to note this down and keep it in a secure location, as it will serve as your mnemonic for your Portable account recovery.
 
@@ -59,6 +66,7 @@ During this transition process, you'll be given a new mnemonic. It's crucial to
 ## Manage Your Profile
 
 You can view your profile information at any time:
+
 1. Click on Blockie in the top right corner of the screen.
 2. Dropdown menu will display available options.
 
@@ -99,15 +107,13 @@ To search your pods, files, and directories:
 
 To change the theme of Fairdrive:
 
-1. Click on Blockie  in the top right corner of the screen.
+1. Click on Blockie in the top right corner of the screen.
 2. Click Theme Toggle.
 
 ## Getting Help
 
-## Getting Help
-
-If you need help using Fairdrive, check out our [User Guide](USER-GUIDE.md) and [FAQ](FAQ.md). 
-Start [here](GETTING-STARTED.md) or see [Design](DESIGN.md), [Functionality](FUNCTIONALITY.md) or [Architecture](ARCHITECTURE.md). 
+If you need help using Fairdrive, check out our [User Guide](USER-GUIDE.md) and [FAQ](FAQ.md).
+Start [here](GETTING-STARTED.md) or see [Design](DESIGN.md), [Functionality](FUNCTIONALITY.md) or [Architecture](ARCHITECTURE.md).
 Developers can check [Development Instructions](DEVELOPMENT.md).
 
 If you can't find the answer to your question, feel free to [contact us](CONTACT.md).

package.json

@@ -25,7 +25,7 @@
     "@emotion/react": "^11.4.1",
     "@emotion/styled": "^11.3.0",
     "@fairdatasociety/blossom": "^0.5.0",
-    "@fairdatasociety/fdp-storage": "^0.11.0",
+    "@fairdatasociety/fdp-storage": "^0.13.0",
     "@headlessui/react": "^1.7.14",
     "@metamask/sdk": "^0.5.6",
     "@types/react-blockies": "^1.4.1",

src/@types/fdp-storage.d.ts

@@ -0,0 +1,13 @@
+import type {
+  DirectoryItem as FdpDirectoryItem,
+  FileItem as FdpFileItem,
+} from '@fairdatasociety/fdp-storage';
+
+declare module '@fairdatasociety/fdp-storage' {
+  interface DirectoryItem extends FdpDirectoryItem {
+    path?: string;
+  }
+  interface FileItem extends FdpFileItem {
+    path?: string;
+  }
+}

src/api/directory.ts

@@ -13,7 +13,10 @@ export async function createDirectory(
     directory = '';
   }
 
-  await fdp.directory.create(podName, combine(directory, directoryName));
+  await fdp.directory.create(
+    podName,
+    combine(...directory.split('/'), directoryName)
+  );
   const time = getUnixTimestamp();
   return {
     name: directoryName,

src/api/files.ts

@@ -1,4 +1,8 @@
-import { FdpStorage, FileItem } from '@fairdatasociety/fdp-storage';
+import {
+  FdpStorage,
+  FileItem,
+  UploadProgressInfo,
+} from '@fairdatasociety/fdp-storage';
 import { formatUrl } from '@utils/url';
 
 interface DownloadFileData {
@@ -78,7 +82,8 @@ export async function shareFile(
 
 export async function uploadFile(
   fdp: FdpStorage,
-  data: UploadFileData
+  data: UploadFileData,
+  progressCallback?: (info: UploadProgressInfo) => void
 ): Promise<FileItem> {
   const writePath =
     data.directory === 'root' ? '' : '/' + formatUrl(data.directory);
@@ -87,7 +92,8 @@ export async function uploadFile(
   const fileMetadata = await fdp.file.uploadData(
     data.podName,
     `${writePath}/${data.file.name}`,
-    fileBytes
+    fileBytes,
+    progressCallback && { progressCallback }
   );
 
   // todo remove this when fdp-storage implements this https://github.com/fairDataSociety/fdp-storage/issues/229

src/api/pod.ts

@@ -29,6 +29,10 @@ export function getFdpPathByDirectory(directory: string): string {
     return '/';
   }
 
+  if (directory.startsWith('/')) {
+    return directory;
+  }
+
   return '/' + directory;
 }
 

src/components/Buttons/MainSideBarItem/MainSideBarItem.tsx

@@ -18,13 +18,19 @@ interface MainSideBarItemProps {
   label: string;
   link: string;
   driveSideBarToggle: any;
+  onClick?: () => void;
+  className?: string;
 }
 
+const DRIVE_PATH = '/drive';
+
 const MainSideBarItem: FC<MainSideBarItemProps> = ({
   icons,
   label,
   link,
   driveSideBarToggle,
+  onClick,
+  className,
 }) => {
   const { theme } = useContext(ThemeContext);
 
@@ -39,27 +45,28 @@ const MainSideBarItem: FC<MainSideBarItemProps> = ({
   }, [link]);
 
   useEffect(() => {
-    if (router.pathname === '/drive') {
+    if (router.pathname === DRIVE_PATH) {
       driveSideBarToggle();
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
   return (
-    <div
-      className={`${
-        isActive
-          ? 'border-r-0 border-b-4 sm:border-r-4 sm:border-b-0 border-color-accents-purple-heavy'
-          : ''
-      }  w-24 sm:w-full py-1 md:py-4 flex-shrink-0 shadow cursor-pointer hover:bg-color-shade-dark-4-day dark:hover:bg-color-shade-dark-2-night`}
-      onClick={() => {
-        if (router.pathname === '/drive') {
-          setTimeout(() => driveSideBarToggle(), 100);
-        }
-      }}
-    >
-      <Link href={link}>
-        <a className="flex flex-col justify-center items-center">
+    <Link href={link}>
+      <div
+        className={`${
+          isActive
+            ? 'border-r-0 border-b-4 sm:border-r-4 sm:border-b-0 border-color-accents-purple-heavy'
+            : ''
+        }  w-24 md:w-full py-1 md:py-4 flex-shrink-0 shadow cursor-pointer hover:bg-color-shade-dark-4-day dark:hover:bg-color-shade-dark-2-night ${className}`}
+        onClick={() => {
+          if (router.pathname === DRIVE_PATH && link === DRIVE_PATH) {
+            setTimeout(() => driveSideBarToggle(), 100);
+          }
+          onClick && onClick();
+        }}
+      >
+        <a className="flex flex-col justify-center items-center m-auto">
           {theme === 'light'
             ? isActive
               ? icons.light.active
@@ -69,7 +76,7 @@ const MainSideBarItem: FC<MainSideBarItemProps> = ({
             : icons.dark.inactive}
 
           <span
-            className={`inline-block mt-2 ${
+            className={`inline-block mt-2 select-none ${
               isActive
                 ? 'text-color-accents-purple-heavy dark:text-color-accents-grey-lavendar'
                 : 'text-color-accents-plum-black dark:text-color-shade-light-2-night'
@@ -78,8 +85,8 @@ const MainSideBarItem: FC<MainSideBarItemProps> = ({
             {label}
           </span>
         </a>
-      </Link>
-    </div>
+      </div>
+    </Link>
   );
 };