fix: small fixes

This reverts commit 9a8a7ee978.

app/components/data-table.tsx

@@ -1,8 +1,8 @@
 import { useMemo} from "react";
-import { BaseRecord } from "@refinedev/core";
+import type { BaseRecord } from "@refinedev/core";
 import { useTable } from "@refinedev/react-table";
 import {
-  ColumnDef,
+  type ColumnDef,
   flexRender,
 } from "@tanstack/react-table";
 
@@ -56,9 +56,9 @@ export function DataTable<TData extends BaseRecord, TValue>({
         <TableHeader>
           {table.getHeaderGroups().map((headerGroup) => (
             <TableRow key={headerGroup.id}>
-              {headerGroup.headers.map((header) => {
+              {headerGroup.headers.map((header, index) => {
                 return (
-                  <TableHead key={header.id} style={{ width: header.getSize() }}>
+                  <TableHead key={`FileDataTableHeader_${index}`} style={{ width: header.getSize() }}>
                     {header.isPlaceholder
                       ? null
                       : flexRender(
@@ -73,14 +73,14 @@ export function DataTable<TData extends BaseRecord, TValue>({
         </TableHeader>
         <TableBody>
           {rows.length ? (
-            rows.map((row) => (
+            rows.map((row, index) => (
               <TableRow
-                key={row.id}
+                key={`FileDataTableRow_${index}`}
                 data-state={row.getIsSelected() && "selected"}
                 className="group"
               >
-                {row.getVisibleCells().map((cell) => (
-                  <TableCell key={cell.id}>
+                {row.getVisibleCells().map((cell, index) => (
+                  <TableCell key={`FileDataTableCell_${index}`}>
                     {flexRender(cell.column.columnDef.cell, cell.getContext())}
                   </TableCell>
                 ))}

app/components/forms.tsx

@@ -1,6 +1,6 @@
 import { Label } from "@radix-ui/react-label"
 import { Input } from "./ui/input"
-import { FieldName, useInputControl } from "@conform-to/react"
+import { type FieldName, useInputControl } from "@conform-to/react"
 import { useId } from "react"
 import { cn } from "~/utils"
 import { Checkbox } from "~/components/ui/checkbox"

app/components/general-layout.tsx

@@ -25,20 +25,30 @@ import {
   PageIcon,
   ThemeIcon,
 } from "./icons";
-import { DropdownMenu, DropdownMenuTrigger,  DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem } from "./ui/dropdown-menu";
+import {
+  DropdownMenu,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+} from "./ui/dropdown-menu";
 import { Avatar } from "@radix-ui/react-avatar";
 import { cn } from "~/utils";
 import { useGetIdentity, useLogout } from "@refinedev/core";
-import { Identity } from "~/data/auth-provider";
 import { PinningNetworkBanner } from "./pinning-network-banner";
 import { PinningProvider } from "~/providers/PinningProvider";
+import type { Identity } from "~/data/auth-provider";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+  TooltipProvider,
+} from "./ui/tooltip";
 
-
-export const GeneralLayout = ({ children }: React.PropsWithChildren<{}>) => {
+export const GeneralLayout = ({ children }: React.PropsWithChildren) => {
   const location = useLocation();
   const { data: identity } = useGetIdentity<Identity>();
-  const{ mutate: logout } = useLogout()
-
+  const { mutate: logout } = useLogout();
   return (
     <PinningProvider>
       <div className="h-full flex flex-row">
@@ -93,7 +103,6 @@ export const GeneralLayout = ({ children }: React.PropsWithChildren<{}>) => {
             </DialogContent>
           </Dialog>
         </header>
-
         <div className="flex-1 overflow-y-auto p-10">
           <div className="flex items-center gap-x-4 justify-end">
             <Button variant="ghost" className="rounded-full w-fit">
@@ -142,7 +151,11 @@ export const GeneralLayout = ({ children }: React.PropsWithChildren<{}>) => {
                   <Button
                     variant={"link"}
                     className="flex flex-row gap-x-2 text-input-placeholder">
-                    <img className="h-5" src={lumeColorLogoPng} alt="Lume Logo" />
+                    <img
+                      className="h-5"
+                      src={lumeColorLogoPng}
+                      alt="Lume Logo"
+                    />
                     Connect with us
                   </Button>
                 </Link>
@@ -252,6 +265,7 @@ const UploadFileItem = ({
   file: UppyFile;
   onRemove: (id: string) => void;
 }) => {
+  const sizeInMb = bytestoMegabytes(file.size).toFixed(2);
   return (
     <div className="flex flex-col w-full py-4 px-2 bg-primary-dark">
       <div className="flex text-primary-1 items-center justify-between">
@@ -263,12 +277,23 @@ const UploadFileItem = ({
               <PageIcon className="w-4 h-4" />
             )}
           </div>
+          <TooltipProvider>
+            <Tooltip delayDuration={500}>
+              <TooltipTrigger>
                 <p className="w-full flex justify-between items-center">
-            <span className="truncate text-ellipsis max-w-[30ch]">
+                  <span className="truncate text-ellipsis max-w-[20ch]">
                     {file.name}
                   </span>{" "}
-            <span>({bytestoMegabytes(file.size).toFixed(2)} MB)</span>
+                  <span>({sizeInMb}MB)</span>
                 </p>
+              </TooltipTrigger>
+              <TooltipContent>
+                <p>
+                  {file.name} ({sizeInMb}MB)
+                </p>
+              </TooltipContent>
+            </Tooltip>
+          </TooltipProvider>
         </div>
         <Button
           size={"icon"}

app/components/lib/uppy.ts

@@ -1,14 +1,21 @@
-import Uppy, {debugLogger, type State, UppyFile} from "@uppy/core"
+import Uppy, { debugLogger, type State, type UppyFile } from "@uppy/core";
 
-import Tus from "@uppy/tus"
-import toArray from "@uppy/utils/lib/toArray"
+import Tus from "@uppy/tus";
+import toArray from "@uppy/utils/lib/toArray";
 
-import {type ChangeEvent, useCallback, useEffect, useMemo, useRef, useState} from "react"
-import DropTarget, {type DropTargetOptions} from "./uppy-dropzone"
-import {useSdk} from "~/components/lib/sdk-context.js";
-import UppyFileUpload from "~/components/lib/uppy-file-upload.js";
-import {PROTOCOL_S5, Sdk} from "@lumeweb/portal-sdk";
-import {S5Client, HashProgressEvent} from "@lumeweb/s5-js";
+import {
+  type ChangeEvent,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
+import DropTarget, { type DropTargetOptions } from "./uppy-dropzone";
+import { useSdk } from "~/components/lib/sdk-context";
+import UppyFileUpload from "~/components/lib/uppy-file-upload";
+import { PROTOCOL_S5, type Sdk } from "@lumeweb/portal-sdk";
+import type { S5Client, HashProgressEvent } from "@lumeweb/s5-js";
 
 const LISTENING_EVENTS = [
   "upload",
@@ -16,13 +23,13 @@ const LISTENING_EVENTS = [
   "upload-error",
   "file-added",
   "file-removed",
-  "files-added"
-] as const
+  "files-added",
+] as const;
 
 export function useUppy() {
-    const sdk = useSdk()
+  const sdk = useSdk();
 
-    const [uploadLimit, setUploadLimit] = useState<number>(0)
+  const [uploadLimit, setUploadLimit] = useState<number>(0);
 
   useEffect(() => {
     async function getUploadLimit() {
@@ -30,32 +37,32 @@ export function useUppy() {
         const limit = await sdk.account!().uploadLimit();
         setUploadLimit(limit);
       } catch (err) {
-                console.log('Error occured while fetching upload limit', err);
+        console.log("Error occured while fetching upload limit", err);
       }
     }
     getUploadLimit();
-    }, []);
+  }, [sdk.account]);
 
-  const inputRef = useRef<HTMLInputElement>(null)
-  const [targetRef, _setTargetRef] = useState<HTMLElement | null>(null)
-  const uppyInstance = useRef<Uppy>()
+  const inputRef = useRef<HTMLInputElement>(null);
+  const [targetRef, _setTargetRef] = useState<HTMLElement | null>(null);
+  const uppyInstance = useRef<Uppy>();
   const setRef = useCallback(
     (element: HTMLElement | null) => _setTargetRef(element),
-    []
-  )
-  const [, setUppyState] = useState<State>()
+    [],
+  );
+  const [, setUppyState] = useState<State>();
   const [state, setState] = useState<
     "completed" | "idle" | "initializing" | "error" | "uploading"
-  >("initializing")
+  >("initializing");
 
   const [inputProps, setInputProps] = useState<
     | {
-        ref: typeof inputRef
-        type: "file"
-        onChange: (event: ChangeEvent<HTMLInputElement>) => void
+        ref: typeof inputRef;
+        type: "file";
+        onChange: (event: ChangeEvent<HTMLInputElement>) => void;
       }
     | object
-  >({})
+  >({});
   const getRootProps = useMemo(
     () => () => {
       return {
@@ -63,35 +70,35 @@ export function useUppy() {
         onClick: () => {
           if (inputRef.current) {
             //@ts-expect-error -- dumb html
-            inputRef.current.value = null
-            inputRef.current.click()
-            console.log("clicked", { input: inputRef.current })
+            inputRef.current.value = null;
+            inputRef.current.click();
+            console.log("clicked", { input: inputRef.current });
           }
         },
-        role: "presentation"
-      }
+        role: "presentation",
+      };
     },
-    [setRef]
-  )
+    [setRef],
+  );
   const removeFile = useCallback(
     (id: string) => {
-      uppyInstance.current?.removeFile(id)
+      uppyInstance.current?.removeFile(id);
     },
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    [targetRef, uppyInstance]
-  )
+    [targetRef, uppyInstance],
+  );
   const cancelAll = useCallback(
     () => uppyInstance.current?.cancelAll({ reason: "user" }),
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    [targetRef, uppyInstance]
-  )
+    [targetRef, uppyInstance],
+  );
 
   useEffect(() => {
-    if (!targetRef) return
+    if (!targetRef) return;
 
     const tusPreprocessor = async (fileIDs: string[]) => {
-        for(const fileID of fileIDs) {
-            const file = uppyInstance.current?.getFile(fileID) as UppyFile
+      for (const fileID of fileIDs) {
+        const file = uppyInstance.current?.getFile(fileID) as UppyFile;
         // @ts-ignore
         if (file.uploader === "tus") {
           const hashProgressCb = (event: HashProgressEvent) => {
@@ -101,21 +108,28 @@ export function useUppy() {
               preprocess: {
                 mode: "determinate",
                 message: "Hashing file...",
-                            value: Math.round((event.total / event.total) * 100)
-                        }
-                    })
-                }
-                const options = await sdk.protocols!().get<S5Client>(PROTOCOL_S5).getSdk().getTusOptions(file.data as File,  {}, {onHashProgress: hashProgressCb})
+                value: Math.round((event.total / event.total) * 100),
+              },
+            });
+          };
+          const options = await sdk.protocols!()
+            .get<S5Client>(PROTOCOL_S5)
+            .getSdk()
+            .getTusOptions(
+              file.data as File,
+              {},
+              { onHashProgress: hashProgressCb },
+            );
           uppyInstance.current?.setFileState(fileID, {
             tus: options,
             meta: {
               ...options.metadata,
               ...file.meta,
-                    }
-                })
-            }
+            },
+          });
         }
       }
+    };
 
     const uppy = new Uppy({
       logger: debugLogger,
@@ -128,25 +142,25 @@ export function useUppy() {
         return true;
       },
     }).use(DropTarget, {
-      target: targetRef
-    } as DropTargetOptions)
+      target: targetRef,
+    } as DropTargetOptions);
 
-    uppyInstance.current = uppy
+    uppyInstance.current = uppy;
     setInputProps({
       ref: inputRef,
       type: "file",
       onChange: (event) => {
-        const files = toArray(event.target.files)
+        const files = toArray(event.target.files);
         if (files.length > 0) {
-          uppyInstance.current?.log("[DragDrop] Files selected through input")
-          uppyInstance.current?.addFiles(files)
+          uppyInstance.current?.log("[DragDrop] Files selected through input");
+          uppyInstance.current?.addFiles(files);
         }
 
         uppy.iteratePlugins((plugin) => {
           uppy.removePlugin(plugin);
         });
 
-          uppy.use(UppyFileUpload, { sdk: sdk as Sdk })
+        uppy.use(UppyFileUpload, { sdk: sdk as Sdk });
 
         let useTus = false;
 
@@ -154,11 +168,11 @@ export function useUppy() {
           if (file.size > uploadLimit) {
             useTus = true;
           }
-          })
+        });
 
         if (useTus) {
-              uppy.use(Tus, { limit: 6, parallelUploads: 10 })
-              uppy.addPreProcessor(tusPreprocessor)
+          uppy.use(Tus, { limit: 6, parallelUploads: 10 });
+          uppy.addPreProcessor(tusPreprocessor);
         }
 
         // We clear the input after a file is selected, because otherwise
@@ -169,54 +183,52 @@ export function useUppy() {
         //    Chrome will not trigger change if we drop the same file twice (Issue #768).
         // @ts-expect-error TS freaks out, but this is fine
         // eslint-disable-next-line no-param-reassign
-        event.target.value = null
-      }
-    })
-
-
+        event.target.value = null;
+      },
+    });
 
     uppy.on("complete", (result) => {
       if (result.failed.length === 0) {
-        console.log("Upload successful üòÄ")
-        setState("completed")
+        console.log("Upload successful üòÄ");
+        setState("completed");
       } else {
-        console.warn("Upload failed üòû")
-        setState("error")
+        console.warn("Upload failed üòû");
+        setState("error");
       }
-      console.log("successful files:", result.successful)
-      console.log("failed files:", result.failed)
-    })
+      console.log("successful files:", result.successful);
+      console.log("failed files:", result.failed);
+    });
 
     const setStateCb = (event: (typeof LISTENING_EVENTS)[number]) => {
       switch (event) {
         case "upload":
-          setState("uploading")
-          break
+          setState("uploading");
+          break;
         case "upload-error":
-          setState("error")
-          break
+          setState("error");
+          break;
         default:
-          break
-      }
-      setUppyState(uppy.getState())
+          break;
       }
+      setUppyState(uppy.getState());
+    };
 
     for (const event of LISTENING_EVENTS) {
       uppy.on(event, function cb() {
-        setStateCb(event)
-      })
+        setStateCb(event);
+      });
     }
-    setState("idle")
-  }, [targetRef, uploadLimit])
+    setState("idle");
+  }, [targetRef, uploadLimit]);
 
   useEffect(() => {
     return () => {
-      uppyInstance.current?.cancelAll({ reason: "unmount" })
-      uppyInstance.current?.logout()
-      uppyInstance.current?.close()
-      uppyInstance.current = undefined
-    }
-  }, [])
+      uppyInstance.current?.cancelAll({ reason: "unmount" });
+      uppyInstance.current?.logout();
+      uppyInstance.current?.close();
+      uppyInstance.current = undefined;
+    };
+  }, []);
   return {
     getFiles: () => uppyInstance.current?.getFiles() ?? [],
     error: uppyInstance.current?.getState,
@@ -227,6 +239,6 @@ export function useUppy() {
     getInputProps: () => inputProps,
     getRootProps,
     removeFile,
-    cancelAll
-  }
+    cancelAll,
+  };
 }

app/components/ui/toast.tsx

@@ -60,7 +60,7 @@ const ToastAction = React.forwardRef<
   <ToastPrimitives.Action
     ref={ref}
     className={cn(
-      "inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 text-sm font-medium transition-colors hover:bg-secondary focus:outline-none focus:ring-1 focus:ring-ring disabled:pointer-events-none disabled:opacity-50 group-[.destructive]:border-muted/40 group-[.destructive]:hover:border-destructive/30 group-[.destructive]:hover:bg-destructive group-[.destructive]:hover:text-destructive-foreground group-[.destructive]:focus:ring-destructive",
+      "inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-background px-3 text-sm font-medium transition-colors hover:bg-secondary focus:outline-none focus:ring-1 focus:ring-ring disabled:pointer-events-none disabled:opacity-50 group-[.destructive]:border-muted/40 group-[.destructive]:hover:border-destructive/30 group-[.destructive]:hover:bg-destructive group-[.destructive]:hover:text-destructive-foreground group-[.destructive]:focus:ring-destructive",
       className
     )}
     {...props}

app/components/ui/toaster.tsx

@@ -14,7 +14,7 @@ export function Toaster() {
 
   return (
     <ToastProvider>
-      {toasts.map(function ({ id, title, description, action, cancelMutation, ...props }) {
+      {toasts.map(({ id, title, description, action, cancelMutation, ...props }) => {
         const undoButton = cancelMutation ? <ToastAction altText="Undo" onClick={cancelMutation}>Undo</ToastAction> : undefined
         return (
           <Toast key={id} {...props}>

app/components/ui/tooltip.tsx

@@ -0,0 +1,28 @@
+import * as React from "react"
+import * as TooltipPrimitive from "@radix-ui/react-tooltip"
+
+import { cn } from "~/utils"
+
+const TooltipProvider = TooltipPrimitive.Provider
+
+const Tooltip = TooltipPrimitive.Root
+
+const TooltipTrigger = TooltipPrimitive.Trigger
+
+const TooltipContent = React.forwardRef<
+  React.ElementRef<typeof TooltipPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
+>(({ className, sideOffset = 4, ...props }, ref) => (
+  <TooltipPrimitive.Content
+    ref={ref}
+    sideOffset={sideOffset}
+    className={cn(
+      "z-50 overflow-hidden rounded-md bg-primary px-3 py-1.5 text-xs text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+      className
+    )}
+    {...props}
+  />
+))
+TooltipContent.displayName = TooltipPrimitive.Content.displayName
+
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }

app/components/usage-chart.tsx

@@ -50,7 +50,7 @@ export const UsageChart = ({ label, dataset }: UsageChartProps) => {
           <AnimatedAxis
             orientation="bottom"
             hideTicks
-            tickTransform="translateX(50%)"
+            tickTransform="translate(50 0)"
             tickLabelProps={{ className: "text-sm" }}
           />
           <AnimatedAxis

app/data/account-provider.ts

@@ -30,7 +30,7 @@ export const accountProvider: SdkProvider = {
 
             if (ret) {
                 if (ret instanceof Error) {
-                    return Promise.reject(ret)
+                    return Promise.reject(ret satisfies HttpError)
                 }
             } else {
                 return Promise.reject();

app/data/auth-provider.ts

@@ -1,15 +1,17 @@
-import type {AuthProvider, UpdatePasswordFormTypes} from "@refinedev/core"
+import type {AuthProvider, HttpError, UpdatePasswordFormTypes} from "@refinedev/core"
 
 import type {
     AuthActionResponse,
     CheckResponse,
     IdentityResponse,
-    OnErrorResponse
+    OnErrorResponse,
+    SuccessNotificationResponse
     // @ts-ignore
 } from "@refinedev/core/dist/interfaces/bindings/auth"
-import {Sdk} from "@lumeweb/portal-sdk";
+import {Sdk, AccountError} from "@lumeweb/portal-sdk";
 import type {AccountInfoResponse} from "@lumeweb/portal-sdk";
 
+
 export type AuthFormRequest = {
     email: string;
     password: string;
@@ -31,7 +33,7 @@ export type Identity = {
     email: string;
 }
 
-export interface UpdatePasswordFormRequest extends UpdatePasswordFormTypes{
+export interface UpdatePasswordFormRequest extends UpdatePasswordFormTypes {
     currentPassword: string;
 }
 
@@ -43,6 +45,54 @@ export const createPortalAuthProvider = (sdk: Sdk): AuthProvider => {
         }
     };
 
+    type ResponseResult = {
+        ret: boolean | Error;
+        successNotification?: SuccessNotificationResponse;
+        redirectToSuccess?: string;
+        redirectToError?: string;
+        successCb?: () => void;
+    }
+
+    interface CheckResponseResult extends ResponseResult {
+        authenticated?: boolean;
+    }
+
+    const handleResponse = (result: ResponseResult): AuthActionResponse => {
+        if (result.ret) {
+            if (result.ret instanceof AccountError) {
+                return {
+                    success: false,
+                    error: result.ret satisfies HttpError,
+                    redirectTo: result.redirectToError
+                }
+            }
+
+            result.successCb?.();
+
+            return {
+                success: true,
+                successNotification: result.successNotification,
+                redirectTo: result.redirectToSuccess,
+            }
+        }
+
+        return {
+            success: false,
+            redirectTo: result.redirectToError
+        }
+    }
+
+    const handleCheckResponse = (result: CheckResponseResult): CheckResponse => {
+        const response = handleResponse(result);
+        const success = response.success;
+        delete response.success;
+
+        return {
+            ...response,
+            authenticated: success
+        }
+    }
+
     return {
         async login(params: AuthFormRequest): Promise<AuthActionResponse> {
             const ret = await sdk.account().login({
@@ -50,39 +100,30 @@ export const createPortalAuthProvider = (sdk: Sdk): AuthProvider => {
                 password: params.password,
             });
 
-            let redirectTo: string | undefined;
-
-            if (ret) {
-                redirectTo = params.redirectTo;
-                if (!redirectTo) {
-                    redirectTo = ret ? "/dashboard" : "/login";
-                }
+            return handleResponse({
+                ret, redirectToSuccess: "/dashboard", redirectToError: "/login", successCb: () => {
                     sdk.setAuthToken(sdk.account().jwtToken);
-            }
+                }, successNotification: {
+                    message: "Login Successful",
+                    description: "You have successfully logged in."
 
-            return {
-                success: ret,
-                redirectTo,
-            };
+                }
+            });
         },
 
         async logout(params: any): Promise<AuthActionResponse> {
             let ret = await sdk.account().logout();
-            return {success: ret, redirectTo: "/login"};
+            return handleResponse({ret, redirectToSuccess: "/login"});
         },
 
         async check(params?: any): Promise<CheckResponse> {
             const ret = await sdk.account().ping();
 
-            if (ret) {
-                maybeSetupAuth();
-            }
-
-            return {authenticated: ret, redirectTo: ret ? undefined : "/login"};
+            return handleCheckResponse({ret, redirectToError: "/login", successCb: maybeSetupAuth});
         },
 
         async onError(error: any): Promise<OnErrorResponse> {
-            return {logout: true};
+            return {};
         },
 
         async register(params: RegisterFormRequest): Promise<AuthActionResponse> {
@@ -92,7 +133,12 @@ export const createPortalAuthProvider = (sdk: Sdk): AuthProvider => {
                 first_name: params.firstName,
                 last_name: params.lastName,
             });
-            return {success: ret, redirectTo: ret ? "/dashboard" : undefined};
+            return handleResponse({
+                ret, redirectToSuccess: "/login", successNotification: {
+                    message: "Registration Successful",
+                    description: "You have successfully registered. Please check your email to verify your account.",
+                }
+            });
         },
 
         async forgotPassword(params: any): Promise<AuthActionResponse> {
@@ -103,22 +149,12 @@ export const createPortalAuthProvider = (sdk: Sdk): AuthProvider => {
             maybeSetupAuth();
             const ret = await sdk.account().updatePassword(params.currentPassword, params.password as string);
 
-            if (ret) {
-                if (ret instanceof Error) {
-                    return {
-                        success: false,
-                        error: ret
-                    }
-                }
-
-                return {
-                    success: true
-                }
-            } else {
-                return {
-                    success: false
-                }
+            return handleResponse({
+                ret, successNotification: {
+                    message: "Password Updated",
+                    description: "Your password has been updated successfully.",
                 }
+            });
         },
 
         async getPermissions(params?: Record<string, any>): Promise<AuthActionResponse> {

app/data/file-provider.ts

@@ -1,28 +1,108 @@
-import type { DataProvider } from "@refinedev/core";
-import { SdkProvider } from "~/data/sdk-provider.js";
+import type {SdkProvider} from "~/data/sdk-provider.js";
+import type {S5Client} from "@lumeweb/s5-js";
+import {PROTOCOL_S5} from "@lumeweb/portal-sdk";
+import {Multihash} from "@lumeweb/libs5/lib/multihash.js";
+import type {AxiosProgressEvent} from "axios";
+import {CID, CID_TYPES, METADATA_TYPES, metadataMagicByte, Unpacker} from "@lumeweb/libs5";
 
-export const fileProvider = {
-  getList: () => {
-    console.log("Not implemented");
-    return {
-      data: [
-        {
-          name: "whirly-final-draft.psd",
-          cid: "0xB45165ED3CD437B",
-          size: "1.89 MB",
-          createdOn: " 03/02/2024 at 13:29 PM",
-        },
-        {
-          name: "whirly-final-draft.psd",
-          cid: "0xB45165ED3CD437B",
-          size: "1.89 MB",
-          createdOn: " 03/02/2024 at 13:29 PM",
-        },
-      ],
-      total: 2
+async function getIsManifest(s5: S5Client, hash: string): Promise<boolean | number> {
+    let type: number | null;
+    try {
+        const abort = new AbortController();
+        const resp = s5.downloadData(hash, {
+            onDownloadProgress: (progressEvent: AxiosProgressEvent) => {
+                if (progressEvent.loaded >= 10) {
+                    abort.abort();
                 }
             },
-  getOne: () => {
+            httpConfig: {
+                signal: abort.signal,
+            },
+        });
+
+        const data = await resp;
+        const unpacker = Unpacker.fromPacked(Buffer.from(data));
+        try {
+            const magic = unpacker.unpackInt();
+
+            if (magic !== metadataMagicByte) {
+                return false;
+            }
+
+            type = unpacker.unpackInt();
+
+            if (!type || !Object.values(METADATA_TYPES).includes(type)) {
+                return false;
+            }
+        } catch (e) {
+            return false;
+        }
+
+    } catch (e) {
+        return false;
+    }
+
+    switch (type) {
+        case METADATA_TYPES.DIRECTORY:
+            return CID_TYPES.DIRECTORY;
+        case METADATA_TYPES.WEBAPP:
+            return CID_TYPES.METADATA_WEBAPP;
+        case METADATA_TYPES.MEDIA:
+            return CID_TYPES.METADATA_MEDIA;
+        case METADATA_TYPES.USER_IDENTITY:
+            return CID_TYPES.USER_IDENTITY;
+    }
+
+    return 0;
+}
+
+export interface FileItem {
+    cid: string;
+    type: string;
+    size: number;
+    mimeType: string;
+    pinned: string;
+}
+
+export const fileProvider: SdkProvider = {
+    sdk: undefined,
+    async getList() {
+        const items: FileItem[] = [];
+        try {
+            const s5 = fileProvider.sdk?.protocols().get<S5Client>(PROTOCOL_S5)!.getSdk()!;
+            const pinList = await s5.accountPins();
+            for (const pin of pinList!.pins) {
+                const manifest = await getIsManifest(s5, pin.hash) as number;
+
+                if (manifest) {
+                    const mHash = Multihash.fromBase64Url(pin.hash);
+                    items.push({
+                        cid: new CID(manifest, mHash, pin.size).toString(),
+                        type: "manifest",
+                        mimeType: "application/octet-stream",
+                        size: pin.size,
+                        pinned: pin.pinned_at,
+                    });
+                } else {
+                    items.push({
+                        cid: new CID(CID_TYPES.RAW, Multihash.fromBase64Url(pin.hash), pin.size).toString(),
+                        type: "raw",
+                        mimeType: pin.mime_type,
+                        size: pin.size,
+                        pinned: pin.pinned_at,
+                    });
+                }
+            }
+        } catch (e) {
+            return Promise.reject(e);
+        }
+
+        return {
+            data: items,
+            total: items.length,
+        };
+    },
+    getOne() {
         console.log("Not implemented");
         return Promise.resolve({
             data: {
@@ -30,23 +110,25 @@ export const fileProvider = {
             },
         });
     },
-  update: () => {
+    update() {
         console.log("Not implemented");
         return Promise.resolve({
             data: {},
         });
     },
-  create: () => {
+    create() {
         console.log("Not implemented");
         return Promise.resolve({
             data: {},
         });
     },
-  deleteOne: () => {
+    deleteOne() {
         console.log("Not implemented");
         return Promise.resolve({
             data: {},
         });
     },
-  getApiUrl: () => "",
+    getApiUrl() {
+        return "";
+    },
 } satisfies SdkProvider;

app/hooks/usePinning.ts

@@ -1,51 +1,62 @@
-import { useMutation } from "@tanstack/react-query";
-import { useContext } from "react";
+import { useNotification } from "@refinedev/core";
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import { useCallback, useContext } from "react";
 import { PinningProcess } from "~/data/pinning";
 import { PinningContext } from "~/providers/PinningProvider";
 
-// TODO: Adapt to real API
-
 export const usePinning = () => {
+  const queryClient = useQueryClient();
   const context = useContext(PinningContext);
+  const { open } = useNotification();
 
-  const { mutate } = useMutation({
-    mutationKey: ["pin-progress"],
-    mutationFn: async (variables: { cid: string, type: "pin" | "unpin" }) => {
-      const { cid, type } = variables;
-      switch (type) {
-        case "pin": {
+  const { mutate: pinMutation } = useMutation({
+    mutationKey: ["pin-mutation"],
+    mutationFn: async (variables: { cid: string }) => {
+      const { cid } = variables;
       const response = await PinningProcess.pin(cid);
 
       if (!response.success) {
         open?.({
-              type: "destructive",
-              message: "Erorr pinning " + cid,
+          type: "error",
+          message: `Error pinning ${cid}`,
           description: response.message,
         });
       }
-          break;
-        }
-        case "unpin": {
+
+      queryClient.invalidateQueries({ queryKey: ["pin-progress"] });
+    },
+  });
+
+  const { mutate: unpinMutation } = useMutation({
+    mutationKey: ["unpin-mutation"],
+    mutationFn: async (variables: { cid: string }) => {
+      const { cid } = variables;
       const response = await PinningProcess.unpin(cid);
 
       if (!response.success) {
         open?.({
-              type: "destructive",
-              message: "Erorr removing " + cid,
+          type: "error",
+          message: `Error removing ${cid}`,
           description: response.message,
         });
       }
-          
-          break;
-        }
-      }
-
-      context.queryClient.invalidateQueries({ queryKey: ["pin-progress"] })
-    }
+      queryClient.invalidateQueries({ queryKey: ["pin-progress"] });
+    },
   });
 
+  const bulkPin = useCallback(
+    (cids: string[]) => {
+      for (const cid of cids) {
+        pinMutation({ cid });
+      }
+    },
+    [pinMutation],
+  );
+
   return {
     ...context.query,
-    mutate
+    pin: pinMutation,
+    unpin: unpinMutation,
+    bulkPin,
   };
 };

app/providers/PinningProvider.tsx

@@ -1,11 +1,11 @@
 import {
-  QueryClient,
-  UseQueryResult,
+  type QueryClient,
+  type UseQueryResult,
   useQuery,
   useQueryClient,
 } from "@tanstack/react-query";
 import { createContext, useContext } from "react";
-import { PinningProcess, PinningStatus } from "~/data/pinning";
+import { PinningProcess, type PinningStatus } from "~/data/pinning";
 
 export interface IPinningData {
   cid: string;

app/root.tsx

@@ -1,19 +1,26 @@
-import {Links, Meta, Outlet, Scripts, ScrollRestoration,} from "@remix-run/react";
+import {
+  Links,
+  Meta,
+  Outlet,
+  Scripts,
+  ScrollRestoration,
+} from "@remix-run/react";
 
 import stylesheet from "./tailwind.css?url";
-import type {LinksFunction} from "@remix-run/node";
+import type { LinksFunction } from "@remix-run/node";
 
 // Supports weights 200-800
-import '@fontsource-variable/manrope';
-import {Refine} from "@refinedev/core";
+import "@fontsource-variable/manrope";
+import { Refine } from "@refinedev/core";
 import routerProvider from "@refinedev/remix-router";
 import { notificationProvider } from "~/data/notification-provider";
-import {SdkContextProvider} from "~/components/lib/sdk-context";
+import { SdkContextProvider, useSdk } from "~/components/lib/sdk-context";
 import { Toaster } from "~/components/ui/toaster";
-import {getProviders} from "~/data/providers.js";
-import {Sdk} from "@lumeweb/portal-sdk";
+import { getProviders } from "~/data/providers.js";
+import { Sdk } from "@lumeweb/portal-sdk";
 import resources from "~/data/resources.js";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { useMemo } from "react";
 
 export const links: LinksFunction = () => [
   { rel: "stylesheet", href: stylesheet },
@@ -21,29 +28,28 @@ export const links: LinksFunction = () => [
 
 const queryClient = new QueryClient();
 
-export function Layout({children}: { children: React.ReactNode }) {
+export function Layout({ children }: { children: React.ReactNode }) {
   return (
     <html lang="en">
       <head>
-            <meta charSet="utf-8"/>
-            <meta name="viewport" content="width=device-width, initial-scale=1"/>
-            <Meta/>
-            <Links/>
+        <meta charSet="utf-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <Meta />
+        <Links />
       </head>
-        <body>
+      <body className="overflow-hidden">
         {children}
         <Toaster />
-        <ScrollRestoration/>
-        <Scripts/>
+        <ScrollRestoration />
+        <Scripts />
       </body>
     </html>
   );
 }
 
-export default function App() {
-    console.log(import.meta.env.VITE_PORTAL_URL);
-    const sdk = Sdk.create(import.meta.env.VITE_PORTAL_URL)
-    const providers = getProviders(sdk);
+function App() {
+  const sdk = useSdk();
+  const providers = useMemo(() => getProviders(sdk as Sdk), [sdk]);
   return (
     <QueryClientProvider client={queryClient}>
       <Refine
@@ -52,19 +58,25 @@ export default function App() {
         notificationProvider={notificationProvider}
         dataProvider={{
           default: providers.default,
-                    files: providers.files
+          files: providers.files,
         }}
         resources={resources}
-                options={{disableTelemetry: true}}
-            >
-                <SdkContextProvider sdk={sdk}>
-                    <Outlet/>
-                </SdkContextProvider>
+        options={{ disableTelemetry: true }}>
+        <Outlet />
       </Refine>
     </QueryClientProvider>
   );
 }
 
+export default function Root() {
+  const sdk = Sdk.create(import.meta.env.VITE_PORTAL_URL);
+  return (
+    <SdkContextProvider sdk={sdk}>
+      <App />
+    </SdkContextProvider>
+  );
+}
+
 export function HydrateFallback() {
   return <p>Loading...</p>;
 }

app/routes/_index.tsx

@@ -1,19 +1,12 @@
-import { useGo, useIsAuthenticated } from "@refinedev/core";
+import {Authenticated} from "@refinedev/core";
+import {Navigate} from "@remix-run/react";
 
 export default function Index() {
-  const { isLoading, data } = useIsAuthenticated();
-
-  const go = useGo();
-
-  if (isLoading) {
-    return <>Checking Login Status</>;
-  }
-
-  if (data?.authenticated) {
-    go({ to: "/dashboard", type: "replace" });
-  } else {
-    go({ to: "/login", type: "replace" });
-  }
-
-  return <>Redirecting</>;
+    return (
+        <Authenticated v3LegacyAuthProviderCompatible key={"index"} loading={
+            <>Checking Login Status</>
+        }>
+            <Navigate to="/dashboard" replace/>
+        </Authenticated>
+    )
 }

app/routes/account.tsx

@@ -4,7 +4,7 @@ import { DialogClose } from "@radix-ui/react-dialog";
 import { Cross2Icon } from "@radix-ui/react-icons";
 import {
   Authenticated,
-    BaseKey,
+  type BaseKey,
   useGetIdentity,
   useUpdate,
   useUpdatePassword,
@@ -41,7 +41,7 @@ import { Input } from "~/components/ui/input";
 import { UsageCard } from "~/components/usage-card";
 
 import QRImg from "~/images/QR.png";
-import {UpdatePasswordFormRequest} from "~/data/auth-provider.js";
+import type { UpdatePasswordFormRequest } from "~/data/auth-provider";
 
 export default function MyAccount() {
   const { data: identity } = useGetIdentity<{ email: string }>();
@@ -85,9 +85,13 @@ export default function MyAccount() {
             <ManagementCard>
               <ManagementCardAvatar
                 button={
-                <DialogTrigger className="absolute bottom-0 right-0 z-50">
+                  <DialogTrigger
+                    asChild
+                    className="absolute bottom-0 right-0 z-50">
                     <Button
-                    onClick={() => setModal({ ...openModal, changeAvatar: true })}
+                      onClick={() =>
+                        setModal({ ...openModal, changeAvatar: true })
+                      }
                       variant="outline"
                       className=" flex items-center w-10 h-10 p-0 border-white rounded-full justiyf-center hover:bg-secondary-2">
                       <EditIcon />
@@ -102,10 +106,12 @@ export default function MyAccount() {
                 {identity?.email}
               </ManagementCardContent>
               <ManagementCardFooter>
-              <DialogTrigger>
+                <DialogTrigger asChild>
                   <Button
                     className="h-12 gap-x-2"
-                  onClick={() => setModal({ ...openModal, changeEmail: true })}>
+                    onClick={() =>
+                      setModal({ ...openModal, changeEmail: true })
+                    }>
                     <AddIcon />
                     Change Email Address
                   </Button>
@@ -134,7 +140,7 @@ export default function MyAccount() {
                 <PasswordDots className="mt-6" />
               </ManagementCardContent>
               <ManagementCardFooter>
-              <DialogTrigger>
+                <DialogTrigger asChild>
                   <Button
                     className="h-12 gap-x-2"
                     onClick={() =>
@@ -147,12 +153,14 @@ export default function MyAccount() {
               </ManagementCardFooter>
             </ManagementCard>
             <ManagementCard>
-            <ManagementCardTitle>Two-Factor Authentication</ManagementCardTitle>
+              <ManagementCardTitle>
+                Two-Factor Authentication
+              </ManagementCardTitle>
               <ManagementCardContent>
                 Improve security by enabling 2FA.
               </ManagementCardContent>
               <ManagementCardFooter>
-              <DialogTrigger>
+                <DialogTrigger asChild>
                   <Button
                     className="h-12 gap-x-2"
                     onClick={() =>
@@ -313,7 +321,8 @@ const ChangePasswordSchema = z
   });
 
 const ChangePasswordForm = () => {
-  const { mutate: updatePassword } = useUpdatePassword<{ password: string }>();
+  const { mutate: updatePassword } =
+    useUpdatePassword<UpdatePasswordFormRequest>();
   const [form, fields] = useForm({
     id: "login",
     constraint: getZodConstraint(ChangePasswordSchema),
@@ -327,6 +336,7 @@ const ChangePasswordForm = () => {
       const data = Object.fromEntries(new FormData(e.currentTarget).entries());
 
       updatePassword({
+        currentPassword: data.currentPassword.toString(),
         password: data.newPassword.toString(),
       });
     },
@@ -469,7 +479,7 @@ const ChangeAvatarForm = () => {
       {hasStarted ? (
         <div className="flex flex-col items-center gap-y-2 w-full text-primary-1">
           <CloudCheckIcon className="w-32 h-32" />
-          {isCompleted ? "Upload completed" : `0% completed`}
+          {isCompleted ? "Upload completed" : "0% completed"}
         </div>
       ) : null}
 

app/routes/file-manager/columns.tsx

@@ -1,5 +1,5 @@
-import { DrawingPinIcon, TrashIcon } from "@radix-ui/react-icons";
-import type { ColumnDef, Row } from "@tanstack/react-table";
+import { TrashIcon } from "@radix-ui/react-icons";
+import type { ColumnDef } from "@tanstack/react-table";
 import { FileIcon, MoreIcon } from "~/components/icons";
 import { Checkbox } from "~/components/ui/checkbox";
 import {
@@ -7,12 +7,11 @@ import {
   DropdownMenuContent,
   DropdownMenuGroup,
   DropdownMenuItem,
-  DropdownMenuSeparator,
   DropdownMenuTrigger,
 } from "~/components/ui/dropdown-menu";
 
-import { usePinning } from "~/hooks/usePinning";
 import { cn } from "~/utils";
+import type { FileItem } from "~/data/file-provider";
 
 // This type is used to define the shape of our data.
 // You can use a Zod schema here if you want.
@@ -23,47 +22,7 @@ export type File = {
   createdOn: string;
 };
 
-const CreatedOnCell = ({ row }: { row: Row<File> }) => {
-  // const { open } = useNotification();
-  const { mutate } = usePinning();
-
-  return (
-    <div className="flex items-center justify-between">
-      {row.getValue("createdOn")}
-      <DropdownMenu>
-        <DropdownMenuTrigger
-          className={cn(
-            "hidden group-hover:block data-[state=open]:block",
-            row.getIsSelected() && "block",
-          )}>
-          <MoreIcon />
-        </DropdownMenuTrigger>
-        <DropdownMenuContent align="end">
-          <DropdownMenuGroup>
-            <DropdownMenuItem
-              onClick={() => {
-                console.log(`Adding ${row.getValue("cid")} for pinning...`);
-                mutate({
-                  cid: row.getValue("cid"),
-                  type: "pin"
-                });
-              }}>
-              <DrawingPinIcon className="mr-2" />
-              Pin CID
-            </DropdownMenuItem>
-            <DropdownMenuSeparator />
-            <DropdownMenuItem variant="destructive">
-              <TrashIcon className="mr-2" />
-              Delete
-            </DropdownMenuItem>
-          </DropdownMenuGroup>
-        </DropdownMenuContent>
-      </DropdownMenu>
-    </div>
-  );
-};
-
-export const columns: ColumnDef<File>[] = [
+export const columns: ColumnDef<FileItem>[] = [
   {
     id: "select",
     size: 20,
@@ -106,9 +65,34 @@ export const columns: ColumnDef<File>[] = [
     header: "Size",
   },
   {
-    accessorKey: "createdOn",
-    size: 200,
-    header: "Created On",
-    cell: ({ row }) => <CreatedOnCell row={row} />,
+    accessorKey: "pinned",
+    header: "Pinned On",
+    cell: ({ row }) => new Date(row.getValue("pinned")).toLocaleString(),
+  },
+  {
+    accessorKey: "actions",
+    header: () => null,
+    size: 20,
+    cell: ({ row }) => (
+      <div className="flex w-5 items-center justify-between">
+        <DropdownMenu>
+          <DropdownMenuTrigger
+            className={cn(
+              "hidden group-hover:block data-[state=open]:block",
+              row.getIsSelected() && "block",
+            )}>
+            <MoreIcon />
+          </DropdownMenuTrigger>
+          <DropdownMenuContent align="end">
+            <DropdownMenuGroup>
+              <DropdownMenuItem variant="destructive">
+                <TrashIcon className="mr-2" />
+                Delete
+              </DropdownMenuItem>
+            </DropdownMenuGroup>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </div>
+    ),
   },
 ];

app/routes/file-manager/index.tsx

@@ -5,10 +5,25 @@ import { columns } from "./columns";
 import { Input } from "~/components/ui/input";
 import { Button } from "~/components/ui/button";
 import { AddIcon } from "~/components/icons";
+import { Authenticated } from "@refinedev/core";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "~/components/ui/dialog";
+import { Field } from "~/components/forms";
+import { z } from "zod";
+import { getFormProps, useForm } from "@conform-to/react";
+import { getZodConstraint, parseWithZod } from "@conform-to/zod";
+import { usePinning } from "~/hooks/usePinning";
 
 export default function FileManager() {
   return (
+    <Authenticated key="dashboard" v3LegacyAuthProviderCompatible>
       <GeneralLayout>
+        <Dialog>
           <h1 className="font-bold mb-4 text-lg">File Manager</h1>
           <FileCardList>
             <FileCard
@@ -48,16 +63,68 @@ export default function FileManager() {
               <AddIcon />
               Select All
             </Button>
+            <DialogTrigger asChild>
               <Button className="h-12 gap-x-2">
                 <AddIcon />
-          New Folder
+                Pin Content
               </Button>
+            </DialogTrigger>
           </div>
           <DataTable
             columns={columns}
             resource="file"
             dataProviderName="files"
           />
+          <DialogContent>
+            <PinFilesForm />
+          </DialogContent>
+        </Dialog>
       </GeneralLayout>
+    </Authenticated>
   );
 }
+
+const PinFilesSchema = z.object({
+  cids: z.string().transform((value) => value.split(",")),
+});
+
+const PinFilesForm = () => {
+  const { bulkPin } = usePinning();
+  const [form, fields] = useForm({
+    id: "pin-files",
+    constraint: getZodConstraint(PinFilesSchema),
+    onValidate({ formData }) {
+      return parseWithZod(formData, { schema: PinFilesSchema });
+    },
+    shouldValidate: "onSubmit",
+    onSubmit(e, { submission }) {
+      if (submission?.status === "success") {
+        const value = submission.value;
+
+        bulkPin(value.cids);
+      }
+    },
+  });
+
+  return (
+    <>
+      <DialogHeader>
+        <DialogTitle>Pin Content</DialogTitle>
+      </DialogHeader>
+      <form {...getFormProps(form)} className="w-full flex flex-col gap-y-4">
+        <Field
+          inputProps={{
+            name: fields.cids.name,
+            placeholder: "Comma separated CIDs",
+          }}
+          labelProps={{ htmlFor: "cids", children: "Content to Pin" }}
+          errors={fields.cids.errors}
+        />
+
+        <Button type="submit" className="w-full">
+          Pin Content
+        </Button>
+      </form>
+    </>
+  );
+};

app/routes/login.otp.tsx

@@ -0,0 +1,69 @@
+import { getFormProps, useForm } from "@conform-to/react";
+import { getZodConstraint, parseWithZod } from "@conform-to/zod";
+import { useGo, useIsAuthenticated, useParsed } from "@refinedev/core";
+import { Link } from "@remix-run/react";
+import { useEffect } from "react";
+import { z } from "zod";
+import { Field } from "~/components/forms";
+import { Button } from "~/components/ui/button";
+import type { LoginParams } from "./login";
+
+const OtpSchema = z.object({
+  otp: z.string().length(6, { message: "OTP must be 6 characters" }),
+});
+
+export default function OtpForm() {
+  const { isLoading: isAuthLoading, data: authData } = useIsAuthenticated();
+  const go = useGo();
+  const parsed = useParsed<LoginParams>();
+  // TODO: Add support for resending the OTP
+  const [form, fields] = useForm({
+    id: "otp",
+    constraint: getZodConstraint(OtpSchema),
+    onValidate({ formData }) {
+      return parseWithZod(formData, { schema: OtpSchema });
+    },
+    shouldValidate: "onSubmit",
+  });
+  const valid = true;
+  const to = parsed.params?.to ?? "/dashboard";
+
+  useEffect(() => {
+    if (!isAuthLoading) {
+      if (authData?.authenticated && valid) {
+        go({ to, type: "push" });
+      }
+    }
+  }, [isAuthLoading, authData, to, go]);
+
+  return (
+    <form
+      className="w-full p-2 max-w-md mt-12 bg-background"
+      {...getFormProps(form)}>
+      <span className="block !mb-8 space-y-2">
+        <h2 className="text-3xl font-bold">Check your inbox</h2>
+        <p className="text-input-placeholder">
+          We will need the six digit confirmation code you received in your
+          email in order to verify your account and get started. Didn’t receive
+          a code?{" "}
+          <Button type="button" variant={"link"} className="text-md h-0">
+            Resend now →
+          </Button>
+        </p>
+      </span>
+      <Field
+        inputProps={{ name: fields.otp.name }}
+        labelProps={{ children: "Confirmation Code" }}
+        errors={fields.otp.errors}
+      />
+      <Button className="w-full h-14">Verify</Button>
+      <p className="text-input-placeholder w-full text-left">
+        <Link
+          to="/login"
+          className="text-primary-1 text-md hover:underline hover:underline-offset-4">
+          ← Back to Login
+        </Link>
+      </p>
+    </form>
+  );
+}

app/routes/login.tsx

@@ -1,5 +1,5 @@
 import type { MetaFunction } from "@remix-run/node";
-import { Link, useLocation } from "@remix-run/react";
+import { Link } from "@remix-run/react";
 import { z } from "zod";
 import { Button } from "~/components/ui/button";
 import logoPng from "~/images/lume-logo.png?url";
@@ -11,7 +11,6 @@ import { getFormProps, useForm } from "@conform-to/react";
 import { getZodConstraint, parseWithZod } from "@conform-to/zod";
 import {
   useGo,
-  useIsAuthenticated,
   useLogin,
   useParsed,
 } from "@refinedev/core";
@@ -25,30 +24,11 @@ export const meta: MetaFunction = () => {
   ];
 };
 
-type LoginParams = {
+export type LoginParams = {
   to: string;
 };
 
 export default function Login() {
-  const location = useLocation();
-  const { isLoading: isAuthLoading, data: authData } = useIsAuthenticated();
-  const hash = location.hash;
-  const go = useGo();
-  const parsed = useParsed<LoginParams>();
-
-  useEffect(() => {
-    if (!isAuthLoading) {
-      if (authData?.authenticated) {
-        let to = "/dashboard";
-        if (parsed.params?.to) {
-          to = parsed.params.to;
-        }
-
-        go({ to, type: "push" });
-      }
-    }
-  }, [isAuthLoading, authData]);
-
   return (
     <div className="p-10 h-screen relative">
       <header>
@@ -62,8 +42,7 @@ export default function Login() {
         />
       </div>
 
-      {hash === "" && <LoginForm />}
-      {hash === "#otp" && <OtpForm />}
+      <LoginForm />
 
       <footer className="my-5">
         <ul className="flex flex-row">
@@ -96,11 +75,12 @@ export default function Login() {
 const LoginSchema = z.object({
   email: z.string().email(),
   password: z.string(),
-  rememberMe: z.boolean(),
+  rememberMe: z.boolean().optional(),
 });
 
 const LoginForm = () => {
   const login = useLogin<AuthFormRequest>();
+  const go = useGo();
   const parsed = useParsed<LoginParams>();
   const [form, fields] = useForm({
     id: "login",
@@ -109,19 +89,27 @@ const LoginForm = () => {
       return parseWithZod(formData, { schema: LoginSchema });
     },
     shouldValidate: "onSubmit",
-    onSubmit(e) {
+    onSubmit(e, { submission }) {
       e.preventDefault();
 
-      const data = Object.fromEntries(new FormData(e.currentTarget).entries());
+      if (submission?.status === "success") {
+        const data = submission.value;
         login.mutate({
-        email: data.email.toString(),
-        password: data.password.toString(),
-        rememberMe: data.rememberMe.toString() === "on",
+          email: data.email,
+          password: data.password,
+          rememberMe: data.rememberMe ?? false,
           redirectTo: parsed.params?.to,
         });
+      }
     },
   });
 
+  useEffect(() => {
+    if (form.status === "success") {
+      go({ to: "/login/otp", type: "push" });
+    }
+  }, [form.status, go]);
+
   return (
     <form
       className="w-full p-2 max-w-md space-y-3 mt-12 bg-background"
@@ -159,56 +147,3 @@ const LoginForm = () => {
     </form>
   );
 };
-
-const OtpSchema = z.object({
-  otp: z.string().length(6, { message: "OTP must be 6 characters" }),
-});
-
-const OtpForm = () => {
-  // TODO: Add support for resending the OTP
-  const [form, fields] = useForm({
-    id: "otp",
-    constraint: getZodConstraint(OtpSchema),
-    onValidate({ formData }) {
-      return parseWithZod(formData, { schema: OtpSchema });
-    },
-    shouldValidate: "onSubmit",
-  });
-  const valid = false; // TODO: some sort of logic to verify user is on OTP state validly
-
-  if (!valid) {
-    location.hash = "";
-    return null;
-  }
-
-  return (
-    <form
-      className="w-full p-2 max-w-md mt-12 bg-background"
-      {...getFormProps(form)}>
-      <span className="block !mb-8 space-y-2">
-        <h2 className="text-3xl font-bold">Check your inbox</h2>
-        <p className="text-input-placeholder">
-          We will need the six digit confirmation code you received in your
-          email in order to verify your account and get started. Didn’t receive
-          a code?{" "}
-          <Button type="button" variant={"link"} className="text-md h-0">
-            Resend now →
-          </Button>
-        </p>
-      </span>
-      <Field
-        inputProps={{ name: fields.otp.name }}
-        labelProps={{ children: "Confirmation Code" }}
-        errors={fields.otp.errors}
-      />
-      <Button className="w-full h-14">Verify</Button>
-      <p className="text-input-placeholder w-full text-left">
-        <Link
-          to="/login"
-          className="text-primary-1 text-md hover:underline hover:underline-offset-4">
-          ← Back to Login
-        </Link>
-      </p>
-    </form>
-  );
-};

app/routes/register.tsx

@@ -49,8 +49,8 @@ export default function Register() {
   const [form, fields] = useForm({
       id: "register",
       constraint: getZodConstraint(RegisterSchema),
-    onValidate({ formData }) {
-      return parseWithZod(formData, { schema: RegisterSchema });
+      onValidate({formData}) {
+          return parseWithZod(formData, {schema: RegisterSchema});
       },
       onSubmit(e) {
           e.preventDefault();
@@ -61,20 +61,6 @@ export default function Register() {
               password: data.password.toString(),
               firstName: data.firstName.toString(),
               lastName: data.lastName.toString(),
-          }, {
-                onSuccess: () => {
-                  open?.({
-                    type: "success",
-                    message: "Verify your Email",
-                    description: "An Email was sent to your email address. Please verify your email address to activate your account.",
-                    key: "register-success"
-                  })
-                    login.mutate({
-                        email: data.email.toString(),
-                        password: data.password.toString(),
-                        rememberMe: false,
-                    })
-                }
           })
       }
   });

app/tailwind.css

@@ -4,8 +4,8 @@
  
 @layer base {
   :root {
-    --background: 240, 33%, 3%;
-    --foreground: 0, 0%, 88%;
+    --background: 0 0% 3.9%;
+    --foreground: 0 0% 98%;
 
     --card: 0 0% 0%;
     --card-foreground: 0 0% 3.9%;

package.json

@@ -16,19 +16,21 @@
     "@conform-to/react": "^1.0.2",
     "@conform-to/zod": "^1.0.2",
     "@fontsource-variable/manrope": "^5.0.19",
-    "@lumeweb/portal-sdk": "0.0.0-20240319140708",
     "@radix-ui/react-accordion": "^1.1.2",
+    "@lumeweb/portal-sdk": "0.0.0-20240321203634",
     "@radix-ui/react-avatar": "^1.0.4",
     "@radix-ui/react-checkbox": "^1.0.4",
     "@radix-ui/react-dialog": "^1.0.5",
     "@radix-ui/react-dropdown-menu": "^2.0.6",
     "@radix-ui/react-icons": "^1.3.0",
     "@radix-ui/react-label": "^2.0.2",
+    "@radix-ui/react-popover": "^1.0.7",
     "@radix-ui/react-progress": "^1.0.3",
     "@radix-ui/react-select": "^2.0.0",
     "@radix-ui/react-slot": "^1.0.2",
     "@radix-ui/react-tabs": "^1.0.4",
     "@radix-ui/react-toast": "^1.1.5",
+    "@radix-ui/react-tooltip": "^1.0.7",
     "@refinedev/cli": "^2.16.1",
     "@refinedev/core": "https://gitpkg.now.sh/LumeWeb/refine/packages/core?remix",
     "@refinedev/devtools-internal": "https://gitpkg.now.sh/LumeWeb/refine/packages/devtools-internal?remix",
@@ -45,6 +47,7 @@
     "@visx/visx": "^3.10.2",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.0",
+    "date-fns": "^3.6.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "tailwind-merge": "^2.2.1",