app/components/data-table.tsx

@@ -1,8 +1,8 @@
 import { useMemo} from "react";
-import type { BaseRecord } from "@refinedev/core";
+import { BaseRecord } from "@refinedev/core";
 import { useTable } from "@refinedev/react-table";
 import {
-  type ColumnDef,
+  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, index) => {
+              {headerGroup.headers.map((header) => {
                 return (
-                  <TableHead key={`FileDataTableHeader_${index}`} style={{ width: header.getSize() }}>
+                  <TableHead key={header.id} 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, index) => (
+            rows.map((row) => (
               <TableRow
-                key={`FileDataTableRow_${index}`}
+                key={row.id}
                 data-state={row.getIsSelected() && "selected"}
                 className="group"
               >
-                {row.getVisibleCells().map((cell, index) => (
+                {row.getVisibleCells().map((cell) => (
-                  <TableCell key={`FileDataTableCell_${index}`}>
+                  <TableCell key={cell.id}>
                     {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 { type FieldName, useInputControl } from "@conform-to/react"
+import { 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,30 +25,20 @@ import {
   PageIcon,
   ThemeIcon,
 } from "./icons";
-import {
+import { DropdownMenu, DropdownMenuTrigger,  DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem } from "./ui/dropdown-menu";
-  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">
@@ -103,6 +93,7 @@ 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">
@@ -151,11 +142,7 @@ export const GeneralLayout = ({ children }: React.PropsWithChildren) => {
                   <Button
                     variant={"link"}
                     className="flex flex-row gap-x-2 text-input-placeholder">
-                    <img
+                    <img className="h-5" src={lumeColorLogoPng} alt="Lume Logo" />
-                      className="h-5"
-                      src={lumeColorLogoPng}
-                      alt="Lume Logo"
-                    />
                     Connect with us
                   </Button>
                 </Link>
@@ -265,7 +252,6 @@ 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">
@@ -277,23 +263,12 @@ 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-[20ch]">
+            <span className="truncate text-ellipsis max-w-[30ch]">
               {file.name}
             </span>{" "}
-                  <span>({sizeInMb}MB)</span>
+            <span>({bytestoMegabytes(file.size).toFixed(2)} MB)</span>
           </p>
-              </TooltipTrigger>
-              <TooltipContent>
-                <p>
-                  {file.name} ({sizeInMb}MB)
-                </p>
-              </TooltipContent>
-            </Tooltip>
-          </TooltipProvider>
         </div>
         <Button
           size={"icon"}

app/components/lib/uppy.ts

@@ -1,21 +1,14 @@
-import Uppy, { debugLogger, type State, type UppyFile } from "@uppy/core";
+import Uppy, {debugLogger, type State, UppyFile} from "@uppy/core"
 
-import Tus from "@uppy/tus";
+import Tus from "@uppy/tus"
-import toArray from "@uppy/utils/lib/toArray";
+import toArray from "@uppy/utils/lib/toArray"
 
-import {
+import {type ChangeEvent, useCallback, useEffect, useMemo, useRef, useState} from "react"
-  type ChangeEvent,
+import DropTarget, {type DropTargetOptions} from "./uppy-dropzone"
-  useCallback,
+import {useSdk} from "~/components/lib/sdk-context.js";
-  useEffect,
+import UppyFileUpload from "~/components/lib/uppy-file-upload.js";
-  useMemo,
+import {PROTOCOL_S5, Sdk} from "@lumeweb/portal-sdk";
-  useRef,
+import {S5Client, HashProgressEvent} from "@lumeweb/s5-js";
-  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",
@@ -23,13 +16,13 @@ const LISTENING_EVENTS = [
   "upload-error",
   "file-added",
   "file-removed",
-  "files-added",
+  "files-added"
-] as const;
+] 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() {
@@ -37,32 +30,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 inputRef = useRef<HTMLInputElement>(null)
-  const [targetRef, _setTargetRef] = useState<HTMLElement | null>(null);
+  const [targetRef, _setTargetRef] = useState<HTMLElement | null>(null)
-  const uppyInstance = useRef<Uppy>();
+  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;
+        ref: typeof inputRef
-        type: "file";
+        type: "file"
-        onChange: (event: ChangeEvent<HTMLInputElement>) => void;
+        onChange: (event: ChangeEvent<HTMLInputElement>) => void
       }
     | object
-  >({});
+  >({})
   const getRootProps = useMemo(
     () => () => {
       return {
@@ -70,35 +63,35 @@ export function useUppy() {
         onClick: () => {
           if (inputRef.current) {
             //@ts-expect-error -- dumb html
-            inputRef.current.value = null;
+            inputRef.current.value = null
-            inputRef.current.click();
+            inputRef.current.click()
-            console.log("clicked", { input: inputRef.current });
+            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;
+            const file = uppyInstance.current?.getFile(fileID) as UppyFile
             // @ts-ignore
             if (file.uploader === "tus") {
                 const hashProgressCb = (event: HashProgressEvent) => {
@@ -108,28 +101,21 @@ export function useUppy() {
                         preprocess: {
                             mode: "determinate",
                             message: "Hashing file...",
-                value: Math.round((event.total / event.total) * 100),
+                            value: Math.round((event.total / event.total) * 100)
-              },
+                        }
-            });
+                    })
-          };
+                }
-          const options = await sdk.protocols!()
+                const options = await sdk.protocols!().get<S5Client>(PROTOCOL_S5).getSdk().getTusOptions(file.data as File,  {}, {onHashProgress: hashProgressCb})
-            .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,
@@ -142,25 +128,25 @@ export function useUppy() {
             return true;
         },
     }).use(DropTarget, {
-      target: targetRef,
+      target: targetRef
-    } as DropTargetOptions);
+    } 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?.log("[DragDrop] Files selected through input")
-          uppyInstance.current?.addFiles(files);
+          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;
 
@@ -168,11 +154,11 @@ export function useUppy() {
               if (file.size > uploadLimit) {
                   useTus = true;
               }
-        });
+          })
 
           if (useTus) {
-          uppy.use(Tus, { limit: 6, parallelUploads: 10 });
+              uppy.use(Tus, { limit: 6, parallelUploads: 10 })
-          uppy.addPreProcessor(tusPreprocessor);
+              uppy.addPreProcessor(tusPreprocessor)
           }
 
         // We clear the input after a file is selected, because otherwise
@@ -183,52 +169,54 @@ 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 üòÄ");
+        console.log("Upload successful üòÄ")
-        setState("completed");
+        setState("completed")
       } else {
-        console.warn("Upload failed üòû");
+        console.warn("Upload failed üòû")
-        setState("error");
+        setState("error")
       }
-      console.log("successful files:", result.successful);
+      console.log("successful files:", result.successful)
-      console.log("failed files:", result.failed);
+      console.log("failed files:", result.failed)
-    });
+    })
 
     const setStateCb = (event: (typeof LISTENING_EVENTS)[number]) => {
       switch (event) {
         case "upload":
-          setState("uploading");
+          setState("uploading")
-          break;
+          break
         case "upload-error":
-          setState("error");
+          setState("error")
-          break;
+          break
         default:
-          break;
+          break
+      }
+      setUppyState(uppy.getState())
     }
-      setUppyState(uppy.getState());
-    };
 
     for (const event of LISTENING_EVENTS) {
       uppy.on(event, function cb() {
-        setStateCb(event);
+        setStateCb(event)
-      });
+      })
     }
-    setState("idle");
+    setState("idle")
-  }, [targetRef, uploadLimit]);
+  }, [targetRef, uploadLimit])
 
   useEffect(() => {
     return () => {
-      uppyInstance.current?.cancelAll({ reason: "unmount" });
+      uppyInstance.current?.cancelAll({ reason: "unmount" })
-      uppyInstance.current?.logout();
+      uppyInstance.current?.logout()
-      uppyInstance.current?.close();
+      uppyInstance.current?.close()
-      uppyInstance.current = undefined;
+      uppyInstance.current = undefined
-    };
+    }
-  }, []);
+  }, [])
   return {
     getFiles: () => uppyInstance.current?.getFiles() ?? [],
     error: uppyInstance.current?.getState,
@@ -239,6 +227,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-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",
+      "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",
       className
     )}
     {...props}

app/components/ui/toaster.tsx

@@ -14,7 +14,7 @@ export function Toaster() {
 
   return (
     <ToastProvider>
-      {toasts.map(({ id, title, description, action, cancelMutation, ...props }) => {
+      {toasts.map(function ({ 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

@@ -1,28 +0,0 @@
-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="translate(50 0)"
+            tickTransform="translateX(50%)"
             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 satisfies HttpError)
+                    return Promise.reject(ret)
                 }
             } else {
                 return Promise.reject();

app/data/auth-provider.ts

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

app/data/file-provider.ts

@@ -1,108 +1,28 @@
-import type {SdkProvider} from "~/data/sdk-provider.js";
+import type { DataProvider } from "@refinedev/core";
-import type {S5Client} from "@lumeweb/s5-js";
+import { SdkProvider } from "~/data/sdk-provider.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";
-
-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();
-                }
-            },
-            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);
-        }
 
+export const fileProvider = {
+  getList: () => {
+    console.log("Not implemented");
     return {
-            data: items,
+      data: [
-            total: items.length,
+        {
-        };
+          name: "whirly-final-draft.psd",
+          cid: "0xB45165ED3CD437B",
+          size: "1.89 MB",
+          createdOn: " 03/02/2024 at 13:29 PM",
         },
-    getOne() {
+        {
+          name: "whirly-final-draft.psd",
+          cid: "0xB45165ED3CD437B",
+          size: "1.89 MB",
+          createdOn: " 03/02/2024 at 13:29 PM",
+        },
+      ],
+      total: 2
+    }
+  },
+  getOne: () => {
     console.log("Not implemented");
     return Promise.resolve({
       data: {
@@ -110,25 +30,23 @@ export const fileProvider: SdkProvider = {
       },
     });
   },
-    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,62 +1,51 @@
-import { useNotification } from "@refinedev/core";
+import { useMutation } from "@tanstack/react-query";
-import { useMutation, useQueryClient } from "@tanstack/react-query";
+import { useContext } from "react";
-import { useCallback, useContext } from "react";
 import { PinningProcess } from "~/data/pinning";
 import { PinningContext } from "~/providers/PinningProvider";
 
-export const usePinning = () => {
+// TODO: Adapt to real API
-  const queryClient = useQueryClient();
-  const context = useContext(PinningContext);
-  const { open } = useNotification();
 
-  const { mutate: pinMutation } = useMutation({
+export const usePinning = () => {
-    mutationKey: ["pin-mutation"],
+  const context = useContext(PinningContext);
-    mutationFn: async (variables: { cid: string }) => {
+
-      const { cid } = variables;
+  const { mutate } = useMutation({
+    mutationKey: ["pin-progress"],
+    mutationFn: async (variables: { cid: string, type: "pin" | "unpin" }) => {
+      const { cid, type } = variables;
+      switch (type) {
+        case "pin": {
           const response = await PinningProcess.pin(cid);
 
           if (!response.success) {
             open?.({
-          type: "error",
+              type: "destructive",
-          message: `Error pinning ${cid}`,
+              message: "Erorr pinning " + cid,
               description: response.message,
             });
           }
-
+          break;
-      queryClient.invalidateQueries({ queryKey: ["pin-progress"] });
+        }
-    },
+        case "unpin": {
-  });
-
-  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: "error",
+              type: "destructive",
-          message: `Error removing ${cid}`,
+              message: "Erorr removing " + cid,
               description: response.message,
             });
           }
-      queryClient.invalidateQueries({ queryKey: ["pin-progress"] });
-    },
-  });
           
-  const bulkPin = useCallback(
+          break;
-    (cids: string[]) => {
-      for (const cid of cids) {
-        pinMutation({ cid });
         }
-    },
+      }
-    [pinMutation],
+
-  );
+      context.queryClient.invalidateQueries({ queryKey: ["pin-progress"] })
+    }
+  });
 
   return {
     ...context.query,
-    pin: pinMutation,
+    mutate
-    unpin: unpinMutation,
-    bulkPin,
   };
 };

app/providers/PinningProvider.tsx

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

app/root.tsx

@@ -1,26 +1,19 @@
-import {
+import {Links, Meta, Outlet, Scripts, ScrollRestoration,} from "@remix-run/react";
-  Links,
-  Meta,
-  Outlet,
-  Scripts,
-  ScrollRestoration,
-} from "@remix-run/react";
 
 import stylesheet from "./tailwind.css?url";
 import type {LinksFunction} from "@remix-run/node";
 
 // Supports weights 200-800
-import "@fontsource-variable/manrope";
+import '@fontsource-variable/manrope';
 import {Refine} from "@refinedev/core";
 import routerProvider from "@refinedev/remix-router";
 import { notificationProvider } from "~/data/notification-provider";
-import { SdkContextProvider, useSdk } from "~/components/lib/sdk-context";
+import {SdkContextProvider} from "~/components/lib/sdk-context";
 import { Toaster } from "~/components/ui/toaster";
 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 },
@@ -37,7 +30,7 @@ export function Layout({ children }: { children: React.ReactNode }) {
             <Meta/>
             <Links/>
         </head>
-      <body className="overflow-hidden">
+        <body>
         {children}
         <Toaster />
         <ScrollRestoration/>
@@ -47,9 +40,10 @@ export function Layout({ children }: { children: React.ReactNode }) {
     );
 }
 
-function App() {
+export default function App() {
-  const sdk = useSdk();
+    console.log(import.meta.env.VITE_PORTAL_URL);
-  const providers = useMemo(() => getProviders(sdk as Sdk), [sdk]);
+    const sdk = Sdk.create(import.meta.env.VITE_PORTAL_URL)
+    const providers = getProviders(sdk);
     return (
         <QueryClientProvider client={queryClient}>
             <Refine
@@ -58,25 +52,19 @@ function App() {
                 notificationProvider={notificationProvider}
                 dataProvider={{
                     default: providers.default,
-          files: providers.files,
+                    files: providers.files
                 }}
                 resources={resources}
-        options={{ disableTelemetry: true }}>
+                options={{disableTelemetry: true}}
+            >
+                <SdkContextProvider sdk={sdk}>
                     <Outlet/>
+                </SdkContextProvider>
             </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,12 +1,19 @@
-import {Authenticated} from "@refinedev/core";
+import { useGo, useIsAuthenticated } from "@refinedev/core";
-import {Navigate} from "@remix-run/react";
 
 export default function Index() {
-    return (
+  const { isLoading, data } = useIsAuthenticated();
-        <Authenticated v3LegacyAuthProviderCompatible key={"index"} loading={
+
-            <>Checking Login Status</>
+  const go = useGo();
-        }>
+
-            <Navigate to="/dashboard" replace/>
+  if (isLoading) {
-        </Authenticated>
+    return <>Checking Login Status</>;
-    )
+  }
+
+  if (data?.authenticated) {
+    go({ to: "/dashboard", type: "replace" });
+  } else {
+    go({ to: "/login", type: "replace" });
+  }
+
+  return <>Redirecting</>;
 }

app/routes/account.tsx

@@ -4,7 +4,7 @@ import { DialogClose } from "@radix-ui/react-dialog";
 import { Cross2Icon } from "@radix-ui/react-icons";
 import {
     Authenticated,
-  type BaseKey,
+    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 type { UpdatePasswordFormRequest } from "~/data/auth-provider";
+import {UpdatePasswordFormRequest} from "~/data/auth-provider.js";
 
 export default function MyAccount() {
   const { data: identity } = useGetIdentity<{ email: string }>();
@@ -85,13 +85,9 @@ export default function MyAccount() {
           <ManagementCard>
             <ManagementCardAvatar
               button={
-                  <DialogTrigger
+                <DialogTrigger className="absolute bottom-0 right-0 z-50">
-                    asChild
-                    className="absolute bottom-0 right-0 z-50">
                   <Button
-                      onClick={() =>
+                    onClick={() => setModal({ ...openModal, changeAvatar: true })}
-                        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 />
@@ -106,12 +102,10 @@ export default function MyAccount() {
               {identity?.email}
             </ManagementCardContent>
             <ManagementCardFooter>
-                <DialogTrigger asChild>
+              <DialogTrigger>
                 <Button
                   className="h-12 gap-x-2"
-                    onClick={() =>
+                  onClick={() => setModal({ ...openModal, changeEmail: true })}>
-                      setModal({ ...openModal, changeEmail: true })
-                    }>
                   <AddIcon />
                   Change Email Address
                 </Button>
@@ -140,7 +134,7 @@ export default function MyAccount() {
               <PasswordDots className="mt-6" />
             </ManagementCardContent>
             <ManagementCardFooter>
-                <DialogTrigger asChild>
+              <DialogTrigger>
                 <Button
                   className="h-12 gap-x-2"
                   onClick={() =>
@@ -153,14 +147,12 @@ export default function MyAccount() {
             </ManagementCardFooter>
           </ManagementCard>
           <ManagementCard>
-              <ManagementCardTitle>
+            <ManagementCardTitle>Two-Factor Authentication</ManagementCardTitle>
-                Two-Factor Authentication
-              </ManagementCardTitle>
             <ManagementCardContent>
               Improve security by enabling 2FA.
             </ManagementCardContent>
             <ManagementCardFooter>
-                <DialogTrigger asChild>
+              <DialogTrigger>
                 <Button
                   className="h-12 gap-x-2"
                   onClick={() =>
@@ -321,8 +313,7 @@ const ChangePasswordSchema = z
   });
 
 const ChangePasswordForm = () => {
-  const { mutate: updatePassword } =
+  const { mutate: updatePassword } = useUpdatePassword<{ password: string }>();
-    useUpdatePassword<UpdatePasswordFormRequest>();
   const [form, fields] = useForm({
     id: "login",
     constraint: getZodConstraint(ChangePasswordSchema),
@@ -336,7 +327,6 @@ const ChangePasswordForm = () => {
       const data = Object.fromEntries(new FormData(e.currentTarget).entries());
 
       updatePassword({
-        currentPassword: data.currentPassword.toString(),
           password: data.newPassword.toString(),
       });
     },
@@ -479,7 +469,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 { TrashIcon } from "@radix-ui/react-icons";
+import { DrawingPinIcon, TrashIcon } from "@radix-ui/react-icons";
-import type { ColumnDef } from "@tanstack/react-table";
+import type { ColumnDef, Row } from "@tanstack/react-table";
 import { FileIcon, MoreIcon } from "~/components/icons";
 import { Checkbox } from "~/components/ui/checkbox";
 import {
@@ -7,11 +7,12 @@ 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.
@@ -22,7 +23,47 @@ export type File = {
   createdOn: string;
 };
 
-export const columns: ColumnDef<FileItem>[] = [
+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>[] = [
   {
     id: "select",
     size: 20,
@@ -65,34 +106,9 @@ export const columns: ColumnDef<FileItem>[] = [
     header: "Size",
   },
   {
-    accessorKey: "pinned",
+    accessorKey: "createdOn",
-    header: "Pinned On",
+    size: 200,
-    cell: ({ row }) => new Date(row.getValue("pinned")).toLocaleString(),
+    header: "Created On",
-  },
+    cell: ({ row }) => <CreatedOnCell row={row} />,
-  {
-    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,25 +5,10 @@ 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
@@ -63,68 +48,16 @@ export default function FileManager() {
           <AddIcon />
           Select All
         </Button>
-            <DialogTrigger asChild>
         <Button className="h-12 gap-x-2">
           <AddIcon />
-                Pin Content
+          New Folder
         </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

@@ -1,69 +0,0 @@
-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 } from "@remix-run/react";
+import { Link, useLocation } from "@remix-run/react";
 import { z } from "zod";
 import { Button } from "~/components/ui/button";
 import logoPng from "~/images/lume-logo.png?url";
@@ -11,6 +11,7 @@ import { getFormProps, useForm } from "@conform-to/react";
 import { getZodConstraint, parseWithZod } from "@conform-to/zod";
 import {
   useGo,
+  useIsAuthenticated,
   useLogin,
   useParsed,
 } from "@refinedev/core";
@@ -24,11 +25,30 @@ export const meta: MetaFunction = () => {
   ];
 };
 
-export type LoginParams = {
+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>
@@ -42,7 +62,8 @@ export default function Login() {
         />
       </div>
 
-      <LoginForm />
+      {hash === "" && <LoginForm />}
+      {hash === "#otp" && <OtpForm />}
 
       <footer className="my-5">
         <ul className="flex flex-row">
@@ -75,12 +96,11 @@ export default function Login() {
 const LoginSchema = z.object({
   email: z.string().email(),
   password: z.string(),
-  rememberMe: z.boolean().optional(),
+  rememberMe: z.boolean(),
 });
 
 const LoginForm = () => {
   const login = useLogin<AuthFormRequest>();
-  const go = useGo();
   const parsed = useParsed<LoginParams>();
   const [form, fields] = useForm({
     id: "login",
@@ -89,27 +109,19 @@ const LoginForm = () => {
       return parseWithZod(formData, { schema: LoginSchema });
     },
     shouldValidate: "onSubmit",
-    onSubmit(e, { submission }) {
+    onSubmit(e) {
       e.preventDefault();
 
-      if (submission?.status === "success") {
+      const data = Object.fromEntries(new FormData(e.currentTarget).entries());
-        const data = submission.value;
       login.mutate({
-          email: data.email,
+        email: data.email.toString(),
-          password: data.password,
+        password: data.password.toString(),
-          rememberMe: data.rememberMe ?? false,
+        rememberMe: data.rememberMe.toString() === "on",
         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"
@@ -147,3 +159,56 @@ 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

@@ -61,6 +61,20 @@ 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: 0 0% 3.9%;
+    --background: 240, 33%, 3%;
-    --foreground: 0 0% 98%;
+    --foreground: 0, 0%, 88%;
 
     --card: 0 0% 0%;
     --card-foreground: 0 0% 3.9%;

package.json

@@ -16,21 +16,19 @@
     "@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",
@@ -47,7 +45,6 @@
     "@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",