Feat/hidden functionalities

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.13.0",
+    "@fairdatasociety/fdp-storage": "^0.16.0",
     "@headlessui/react": "^1.7.14",
     "@metamask/sdk": "^0.5.6",
     "@types/react-blockies": "^1.4.1",

src/components/Connect/Metamask/MetamaskConnect.tsx

@@ -74,7 +74,7 @@ const MetamaskConnect = ({ onConnect }: MetamaskConnectProps) => {
       setAddress(wallet.address);
       setMnemonic(mnemonic);
 
-      router.push('/overview');
+      router.push('/drive');
     } catch (error) {
       console.error(error);
       setErrorMessage(String(error.message || error));

src/components/Footers/MainFooter/MainFooter.tsx

@@ -27,7 +27,7 @@ const MainFooter: FC = () => {
   const { intl } = useLocales();
 
   return (
-    <div className="hidden md:flex justify-between items-center w-full h-32 px-8 bg-white shadow-top">
+    <div className="hidden md:flex justify-between items-center w-full py-2 px-8 bg-white shadow-top">
       <div className="flex items-center flex-wrap mr-4">
         <a
           href="https://fairdatasociety.org/"

src/components/Forms/LoginForm/LoginForm.tsx

@@ -19,6 +19,7 @@ import { setDefaultNetwork } from '@utils/localStorage';
 import { useLocales } from '@context/LocalesContext';
 import CustomCheckbox from '@components/Inputs/CustomCheckbox/CustomCheckbox';
 import { useMatomoContext } from '@context/Matomo';
+import MetamaskConnect from '@components/Connect/Metamask/MetamaskConnect';
 
 const ALLOW_TRACKING_KEY = 'allow-matomo';
 
@@ -51,6 +52,7 @@ const LoginForm: FC = () => {
   } = useFdpStorage();
   const router = useRouter();
   const { intl } = useLocales();
+  const fdsLoginEnabled = router?.query['fdsLogin'] === 'true';
 
   const onSubmit = async (data: { user_name: string; password: string }) => {
     try {
@@ -131,78 +133,87 @@ const LoginForm: FC = () => {
           <FeedbackMessage type="error" message={errorMessage} />
         </div>
 
-        <form onSubmit={handleSubmit(onSubmit)} className="w-full">
-          <label className="font-normal text-base text-color-accents-plum-black dark:text-color-accents-grey-pastel">
-            {intl.get('CHOOSE_NETWORK')}:
-          </label>
-          <NetworkDropdown
-            className="mb-3"
-            value={network}
-            onChange={onNetworkChange}
-          />
-
-          <AuthenticationInput
-            label={intl.get('USERNAME')}
-            id="user_name"
-            type="text"
-            name="user_name"
-            placeholder={intl.get('TYPE_HERE')}
-            useFormRegister={register}
-            validationRules={{
-              required: intl.get('USERNAME_IS_REQUIRED'),
-              minLength: {
-                value: 4,
-                message: intl.get('USERNAME_MIN_LENGTH_ERROR'),
-              },
-            }}
-            // @ts-ignore
-            error={errors.user_name}
-          />
-
-          <AuthenticationInput
-            label={intl.get('PASSWORD')}
-            id="password"
-            type="password"
-            name="password"
-            placeholder={intl.get('TYPE_HERE')}
-            useFormRegister={register}
-            validationRules={{
-              required: intl.get('PASSWORD_IS_REQUIRED'),
-            }}
-            // @ts-ignore
-            error={errors.password}
-          />
-
-          <CustomCheckbox
-            className="mb-3 sm:mb-0"
-            name="confirm"
-            onChange={onAllowTrackingClick}
-            checked={allowTracking}
-          >
-            {intl.get('ALLOW_TRACKING')}
-          </CustomCheckbox>
-
-          <div className="mt-8 text-center">
-            <Button
-              loading={loading}
-              disabled={!isValid}
-              type="submit"
-              variant="secondary"
-              label={intl.get('LOGIN')}
+        {fdsLoginEnabled ? (
+          <form onSubmit={handleSubmit(onSubmit)} className="w-full">
+            <label className="font-normal text-base text-color-accents-plum-black dark:text-color-accents-grey-pastel">
+              {intl.get('CHOOSE_NETWORK')}:
+            </label>
+            <NetworkDropdown
+              className="mb-3"
+              value={network}
+              onChange={onNetworkChange}
+            />
+
+            <AuthenticationInput
+              label={intl.get('USERNAME')}
+              id="user_name"
+              type="text"
+              name="user_name"
+              placeholder={intl.get('TYPE_HERE')}
+              useFormRegister={register}
+              validationRules={{
+                required: intl.get('USERNAME_IS_REQUIRED'),
+                minLength: {
+                  value: 4,
+                  message: intl.get('USERNAME_MIN_LENGTH_ERROR'),
+                },
+              }}
+              // @ts-ignore
+              error={errors.user_name}
+            />
+
+            <AuthenticationInput
+              label={intl.get('PASSWORD')}
+              id="password"
+              type="password"
+              name="password"
+              placeholder={intl.get('TYPE_HERE')}
+              useFormRegister={register}
+              validationRules={{
+                required: intl.get('PASSWORD_IS_REQUIRED'),
+              }}
+              // @ts-ignore
+              error={errors.password}
             />
-          </div>
 
-          <div className="my-6 text-center">
-            <a
-              href={CREATE_USER_URL}
-              target={'_blank'}
-              rel="noopener noreferrer"
-              className="font-normal text-xs text-color-accents-purple-black dark:text-color-accents-grey-lavendar"
+            <CustomCheckbox
+              className="mb-3 sm:mb-0"
+              name="confirm"
+              onChange={onAllowTrackingClick}
+              checked={allowTracking}
             >
-              {intl.get('REGISTER_NEW_ACCOUNT')}
-            </a>
+              {intl.get('ALLOW_TRACKING')}
+            </CustomCheckbox>
+
+            <div className="mt-8 text-center">
+              <Button
+                loading={loading}
+                disabled={!isValid}
+                type="submit"
+                variant="secondary"
+                label={intl.get('LOGIN')}
+              />
+            </div>
+
+            <div className="my-6 text-center">
+              <a
+                href={CREATE_USER_URL}
+                target={'_blank'}
+                rel="noopener noreferrer"
+                className="font-normal text-xs text-color-accents-purple-black dark:text-color-accents-grey-lavendar"
+              >
+                {intl.get('REGISTER_NEW_ACCOUNT')}
+              </a>
+            </div>
+          </form>
+        ) : (
+          <div className="w-full flex">
+            <span className="m-auto">
+              {/* eslint-disable-next-line @typescript-eslint/no-empty-function */}
+              <MetamaskConnect onConnect={() => {}} onError={() => {}} />
+            </span>
           </div>
-        </form>
+        )}
       </div>
     </div>
   );

src/components/Layouts/MainLayout/MainLayout.tsx

@@ -49,7 +49,8 @@ const MainLayout: FC<MainLayoutProps> = ({
       </div>
 
       <div className="flex flex-col sm:flex-row justify-items-stretch items-stretch w-full h-full overflow-hidden">
-        <div className="sm:w-28 dark:bg-color-shade-dark-3-night">
+        {/* sm:w-28 */}
+        <div className="dark:bg-color-shade-dark-3-night">
           <MainSideBar
             driveSideBarToggle={driveSideBarToggle}
             updateDrive={updateDrive}
@@ -87,7 +88,7 @@ const MainLayout: FC<MainLayoutProps> = ({
         </div>
       </div>
 
-      <div className="hidden md:block w-full h-36 dark:bg-color-shade-dark-3-night">
+      <div className="hidden md:block w-full dark:bg-color-shade-dark-3-night">
         <MainFooter />
       </div>
     </div>

src/components/Modals/UploadFileModal/UploadFileModal.tsx

@@ -120,9 +120,9 @@ const UploadFileModal: FC<CreatorModalProps> = ({
               podName: activePod,
             },
             (event: UploadProgressInfo) => {
-              const { uploadPercentage } = event.data || {};
+              const { percentage } = event.data || {};
 
-              if (uploadPercentage) {
+              if (percentage) {
                 setUploadPercentage(
                   calculateUploadPercentage(
                     uploadedItemsRef.current.length + failedUplods.length,

src/components/NavigationBars/AuthenticationNavbar/AuthenticationNavbar.tsx

@@ -9,9 +9,12 @@ import ConnectDropdown from '@components/Dropdowns/ConnectDropdown/ConnectDropdo
 import classes from './AuthenticationNavbar.module.scss';
 import { useLocales } from '@context/LocalesContext';
 import LanguageDropdown from '@components/Dropdowns/LanguageDropdown/LanguageDropdown';
+import { useRouter } from 'next/router';
 
 const AuthenticationNavbar: FC = () => {
   const { intl } = useLocales();
+  const router = useRouter();
+  const fdsLoginEnabled = router?.query['fdsLogin'] === 'true';
 
   return (
     <div
@@ -20,9 +23,11 @@ const AuthenticationNavbar: FC = () => {
       <Logo />
 
       <div className="flex justify-between items-center">
-        <a className={`${classes.button} mr-4`}>
-          <ConnectDropdown />
-        </a>
+        {fdsLoginEnabled && (
+          <a className={`${classes.button} mr-4`}>
+            <ConnectDropdown />
+          </a>
+        )}
 
         <ThemeToggle />
 

src/components/NavigationBars/MainNavigationBar/MainNavigationBar.tsx

@@ -31,7 +31,7 @@ const MainNavigationBar: FC<Record<string, never>> = () => {
     <nav>
       <div className="flex justify-between items-center w-full h-16 px-6 shadow-lg">
         <div className="flex items-center">
-          <Button
+          {/* <Button
             onClick={() => setMobileNavigationOpen(true)}
             variant="tertiary"
             className="cursor-pointer block md:hidden"
@@ -42,7 +42,7 @@ const MainNavigationBar: FC<Record<string, never>> = () => {
                 <NavigationMenuDark className="inline-block" />
               )
             }
-          />
+          /> */}
           <Logo />
         </div>
 
@@ -64,7 +64,8 @@ const MainNavigationBar: FC<Record<string, never>> = () => {
             <UserDropdownToggle
               address={wallet?.address || 'Blossom'}
               onClickHandler={() => setShowUserDropdown(true)}
-              showNotification={metamaskMigrationNotification === 'closed'}
+              showNotification={false}
+              // showNotification={metamaskMigrationNotification === 'closed'}
             />
             <LanguageDropdown />
           </div>

src/components/NavigationBars/MainNavigationBar/UserDropdown/UserDropdown.tsx

@@ -80,15 +80,15 @@ const UserDropdown: FC<UserDropdownProps> = ({
             </div>
 
             <div>
-              {metamaskMigrationNotification === 'closed' && (
+              {/* {metamaskMigrationNotification === 'closed' && (
                 <div
                   className="mb-4 text-color-shade-dark-3-night dark:text-color-shade-dark-4-day  cursor-pointer"
                   onClick={onMigrateClick}
                 >
                   {intl.get('MIGRATE_ACCOUNT')}
                   <Indicator className="inline-block ml-2" />
                 </div>
-              )}
+              )} */}
               <div
                 className="mb-4 text-color-status-negative-day cursor-pointer"
                 onClick={disconnect}

src/components/NavigationBars/MainSideBar/MainSideBar.tsx

@@ -24,16 +24,24 @@ const MainSideBar: FC<MainSideBarProps> = ({
     setRenderDriveMenu(Boolean(router.pathname === '/drive' && updateDrive));
   }, [updateDrive]);
 
+  // Moved from NavigationItems, should be removed when the NavigationItems is enabled
+  useEffect(() => {
+    if (router.pathname === '/drive') {
+      driveSideBarToggle();
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
   return (
     <div
       className={`${classes.sideBar} flex flex-row overflow-x-auto sm:overflow-x-visible sm:flex-col sm:justify-start sm:items-center w-full sm:h-full
       bg-color-shade-dark-3-day dark:bg-color-shade-dark-3-night`}
     >
-      <NavigationItems
+      {/* <NavigationItems
         className="hidden md:block"
         driveSideBarToggle={driveSideBarToggle}
         onOptionClick={onOptionClick}
-      />
+      /> */}
 
       {renderDriveMenu && (
         <DriveActionBarMobile