Merge branch 'develop' into riobuenoDevelops/pinning-network

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) => (
+                {row.getVisibleCells().map((cell, index) => (
-                  <TableCell key={cell.id}>
+                  <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"
@@ -58,7 +58,7 @@ export const FieldCheckbox = ({
   const input = useInputControl({
     key,
     name: inputProps.name,
-    formId: inputProps.form,
+    formId: inputProps.form,  
     initialValue: defaultChecked ? checkedValue : undefined
   })
   const fallbackId = useId()

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>
-          <p className="w-full flex justify-between items-center">
+          <TooltipProvider>
-            <span className="truncate text-ellipsis max-w-[30ch]">
+            <Tooltip delayDuration={500}>
-              {file.name}
+              <TooltipTrigger>
-            </span>{" "}
+                <p className="w-full flex justify-between items-center">
-            <span>({bytestoMegabytes(file.size).toFixed(2)} MB)</span>
+                  <span className="truncate text-ellipsis max-w-[20ch]">
-          </p>
+                    {file.name}
+                  </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 Tus from "@uppy/tus";
-import toArray from "@uppy/utils/lib/toArray"
+import toArray from "@uppy/utils/lib/toArray";
 
-import {type ChangeEvent, useCallback, useEffect, useMemo, useRef, useState} from "react"
+import {
-import DropTarget, {type DropTargetOptions} from "./uppy-dropzone"
+  type ChangeEvent,
-import {useSdk} from "~/components/lib/sdk-context.js";
+  useCallback,
-import UppyFileUpload from "~/components/lib/uppy-file-upload.js";
+  useEffect,
-import {PROTOCOL_S5, Sdk} from "@lumeweb/portal-sdk";
+  useMemo,
-import {S5Client, HashProgressEvent} from "@lumeweb/s5-js";
+  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,46 +23,46 @@ 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(() => {
+  useEffect(() => {
-        async function getUploadLimit() {
+    async function getUploadLimit() {
-            try {
+      try {
-                const limit = await sdk.account!().uploadLimit();
+        const limit = await sdk.account!().uploadLimit();
-                setUploadLimit(limit);
+        setUploadLimit(limit);
-            } catch (err) {
+      } catch (err) {
-                console.log('Error occured while fetching upload limit', err);
+        console.log("Error occured while fetching upload limit", err);
-            }
+      }
-        }
+    }
-        getUploadLimit();
+    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 {
@@ -63,103 +70,110 @@ 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[]) => {
+    const tusPreprocessor = async (fileIDs: string[]) => {
-        for(const fileID of fileIDs) {
+      for (const fileID of fileIDs) {
-            const file = uppyInstance.current?.getFile(fileID) as UppyFile
+        const file = uppyInstance.current?.getFile(fileID) as UppyFile;
-            // @ts-ignore
+        // @ts-ignore
-            if (file.uploader === "tus") {
+        if (file.uploader === "tus") {
-                const hashProgressCb = (event: HashProgressEvent) => {
+          const hashProgressCb = (event: HashProgressEvent) => {
-                    uppyInstance.current?.emit("preprocess-progress", file, {
+            uppyInstance.current?.emit("preprocess-progress", file, {
-                        uploadStarted: false,
+              uploadStarted: false,
-                        bytesUploaded: 0,
+              bytesUploaded: 0,
-                        preprocess: {
+              preprocess: {
-                            mode: "determinate",
+                mode: "determinate",
-                            message: "Hashing file...",
+                message: "Hashing file...",
-                            value: Math.round((event.total / event.total) * 100)
+                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})
+          const options = await sdk.protocols!()
-                uppyInstance.current?.setFileState(fileID, {
+            .get<S5Client>(PROTOCOL_S5)
-                    tus: options,
+            .getSdk()
-                    meta: {
+            .getTusOptions(
-                        ...options.metadata,
+              file.data as File,
-                        ...file.meta,
+              {},
-                    }
+              { onHashProgress: hashProgressCb },
-                })
+            );
-            }
+          uppyInstance.current?.setFileState(fileID, {
+            tus: options,
+            meta: {
+              ...options.metadata,
+              ...file.meta,
+            },
+          });
         }
       }
+    };
 
     const uppy = new Uppy({
-        logger: debugLogger,
+      logger: debugLogger,
-        onBeforeUpload: (files) => {
+      onBeforeUpload: (files) => {
-            for (const file of Object.entries(files)) {
+        for (const file of Object.entries(files)) {
-                // @ts-ignore
+          // @ts-ignore
-                file[1].uploader = file[1].size > uploadLimit ? "tus" : "file";
+          file[1].uploader = file[1].size > uploadLimit ? "tus" : "file";
-            }
+        }
 
-            return true;
+        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.removePlugin(plugin);
         });
 
-          uppy.use(UppyFileUpload, { sdk: sdk as Sdk })
+        uppy.use(UppyFileUpload, { sdk: sdk as Sdk });
 
-          let useTus = false;
+        let useTus = false;
 
-          uppyInstance.current?.getFiles().forEach((file) => {
+        uppyInstance.current?.getFiles().forEach((file) => {
-              if (file.size > uploadLimit) {
+          if (file.size > uploadLimit) {
-                  useTus = true;
+            useTus = true;
-              }
-          })
-
-          if (useTus) {
-              uppy.use(Tus, { limit: 6, parallelUploads: 10 })
-              uppy.addPreProcessor(tusPreprocessor)
           }
+        });
+
+        if (useTus) {
+          uppy.use(Tus, { limit: 6, parallelUploads: 10 });
+          uppy.addPreProcessor(tusPreprocessor);
+        }
 
         // We clear the input after a file is selected, because otherwise
         // change event is not fired in Chrome and Safari when a file
@@ -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 üòÄ")
+        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,
@@ -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;
+            return handleResponse({
+                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 {success: ret, redirectTo: "/login"};
+            return handleResponse({ret, redirectToSuccess: "/login"});
         },
 
         async check(params?: any): Promise<CheckResponse> {
             const ret = await sdk.account().ping();
 
-            if (ret) {
+            return handleCheckResponse({ret, redirectToError: "/login", successCb: maybeSetupAuth});
-                maybeSetupAuth();
-            }
-
-            return {authenticated: ret, redirectTo: ret ? undefined : "/login"};
         },
 
         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) {
+            return handleResponse({
-                if (ret instanceof Error) {
+                ret, successNotification: {
-                    return {
+                    message: "Password Updated",
-                        success: false,
+                    description: "Your password has been updated successfully.",
-                        error: ret
-                    }
                 }
-
+            });
-                return {
-                    success: true
-                }
-            } else {
-                return {
-                    success: false
-                }
-            }
         },
 
         async getPermissions(params?: Record<string, any>): Promise<AuthActionResponse> {

app/data/file-provider.ts

@@ -1,52 +1,134 @@
-import type { DataProvider } from "@refinedev/core";
+import type {SdkProvider} from "~/data/sdk-provider.js";
-import { 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 = {
+async function getIsManifest(s5: S5Client, hash: string): Promise<boolean | number> {
-  getList: () => {
+    let type: number | null;
-    console.log("Not implemented");
+    try {
-    return {
+        const abort = new AbortController();
-      data: [
+        const resp = s5.downloadData(hash, {
-        {
+            onDownloadProgress: (progressEvent: AxiosProgressEvent) => {
-          name: "whirly-final-draft.psd",
+                if (progressEvent.loaded >= 10) {
-          cid: "0xB45165ED3CD437B",
+                    abort.abort();
-          size: "1.89 MB",
+                }
-          createdOn: " 03/02/2024 at 13:29 PM",
+            },
-        },
+            httpConfig: {
-        {
+                signal: abort.signal,
-          name: "whirly-final-draft.psd",
+            },
-          cid: "0xB45165ED3CD437B",
+        });
-          size: "1.89 MB",
+
-          createdOn: " 03/02/2024 at 13:29 PM",
+        const data = await resp;
-        },
+        const unpacker = Unpacker.fromPacked(Buffer.from(data));
-      ],
+        try {
-      total: 2
+            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;
     }
-  },
+
-  getOne: () => {
+    switch (type) {
-    console.log("Not implemented");
+        case METADATA_TYPES.DIRECTORY:
-    return Promise.resolve({
+            return CID_TYPES.DIRECTORY;
-      data: {
+        case METADATA_TYPES.WEBAPP:
-        id: 1
+            return CID_TYPES.METADATA_WEBAPP;
-      },
+        case METADATA_TYPES.MEDIA:
-    });
+            return CID_TYPES.METADATA_MEDIA;
-  },
+        case METADATA_TYPES.USER_IDENTITY:
-  update: () => {
+            return CID_TYPES.USER_IDENTITY;
-    console.log("Not implemented");
+    }
-    return Promise.resolve({
+
-      data: {},
+    return 0;
-    });
+}
-  },
+
-  create: () => {
+export interface FileItem {
-    console.log("Not implemented");
+    cid: string;
-    return Promise.resolve({
+    type: string;
-      data: {},
+    size: number;
-    });
+    mimeType: string;
-  },
+    pinned: string;
-  deleteOne: () => {
+}
-    console.log("Not implemented");
+
-    return Promise.resolve({
+export const fileProvider: SdkProvider = {
-      data: {},
+    sdk: undefined,
-    });
+    async getList() {
-  },
+        const items: FileItem[] = [];
-  getApiUrl: () => "",
+        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: {
+                id: 1
+            },
+        });
+    },
+    update() {
+        console.log("Not implemented");
+        return Promise.resolve({
+            data: {},
+        });
+    },
+    create() {
+        console.log("Not implemented");
+        return Promise.resolve({
+            data: {},
+        });
+    },
+    deleteOne() {
+        console.log("Not implemented");
+        return Promise.resolve({
+            data: {},
+        });
+    },
+    getApiUrl() {
+        return "";
+    },
 } satisfies SdkProvider;

app/root.tsx

@@ -7,16 +7,17 @@ import type {LinksFunction} from "@remix-run/node";
 import '@fontsource-variable/manrope';
 import {Refine} from "@refinedev/core";
 import routerProvider from "@refinedev/remix-router";
-import { notificationProvider } from "~/data/notification-provider";
+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 {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 },
+    {rel: "stylesheet", href: stylesheet},
 ];
 
 const queryClient = new QueryClient();
@@ -30,9 +31,9 @@ export function Layout({children}: { children: React.ReactNode }) {
             <Meta/>
             <Links/>
         </head>
-        <body>
+        <body className="overflow-hidden">
         {children}
-        <Toaster />
+        <Toaster/>
         <ScrollRestoration/>
         <Scripts/>
         </body>
@@ -40,10 +41,9 @@ export function Layout({children}: { children: React.ReactNode }) {
     );
 }
 
-export default function App() {
+function App() {
-    console.log(import.meta.env.VITE_PORTAL_URL);
+    const sdk = useSdk();
-    const sdk = Sdk.create(import.meta.env.VITE_PORTAL_URL)
+    const providers = useMemo(() => getProviders(sdk as Sdk), [sdk]);
-    const providers = getProviders(sdk);
     return (
         <QueryClientProvider client={queryClient}>
             <Refine
@@ -65,6 +65,15 @@ export default function App() {
     );
 }
 
+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();
+    return (
-
+        <Authenticated v3LegacyAuthProviderCompatible key={"index"} loading={
-  const go = useGo();
+            <>Checking Login Status</>
-
+        }>
-  if (isLoading) {
+            <Navigate to="/dashboard" replace/>
-    return <>Checking Login Status</>;
+        </Authenticated>
-  }
+    )
-
-  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,
-    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,7 +85,7 @@ 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 })}
                     variant="outline"
@@ -102,7 +102,7 @@ export default function MyAccount() {
               {identity?.email}
             </ManagementCardContent>
             <ManagementCardFooter>
-              <DialogTrigger>
+              <DialogTrigger asChild>
                 <Button
                   className="h-12 gap-x-2"
                   onClick={() => setModal({ ...openModal, changeEmail: true })}>
@@ -134,7 +134,7 @@ export default function MyAccount() {
               <PasswordDots className="mt-6" />
             </ManagementCardContent>
             <ManagementCardFooter>
-              <DialogTrigger>
+              <DialogTrigger asChild>
                 <Button
                   className="h-12 gap-x-2"
                   onClick={() =>
@@ -152,7 +152,7 @@ export default function MyAccount() {
               Improve security by enabling 2FA.
             </ManagementCardContent>
             <ManagementCardFooter>
-              <DialogTrigger>
+              <DialogTrigger asChild>
                 <Button
                   className="h-12 gap-x-2"
                   onClick={() =>
@@ -313,7 +313,7 @@ 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 +327,7 @@ const ChangePasswordForm = () => {
       const data = Object.fromEntries(new FormData(e.currentTarget).entries());
 
       updatePassword({
+          currentPassword: data.currentPassword.toString(),
           password: data.newPassword.toString(),
       });
     },
@@ -469,7 +470,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 { TrashIcon } from "@radix-ui/react-icons";
-import type { ColumnDef, Row } from "@tanstack/react-table";
+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> }) => {
+export const columns: ColumnDef<FileItem>[] = [
-  // 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,
@@ -106,9 +65,34 @@ export const columns: ColumnDef<File>[] = [
     header: "Size",
   },
   {
-    accessorKey: "createdOn",
+    accessorKey: "pinned",
-    size: 200,
+    header: "Pinned On",
-    header: "Created On",
+    cell: ({ row }) => new Date(row.getValue("pinned")).toLocaleString(),
-    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,59 +5,92 @@ 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";
 
 export default function FileManager() {
   return (
-    <GeneralLayout>
+    <Authenticated key="dashboard" v3LegacyAuthProviderCompatible>
-      <h1 className="font-bold mb-4 text-lg">File Manager</h1>
+      <GeneralLayout>
-      <FileCardList>
+        <Dialog>
-        <FileCard
+          <h1 className="font-bold mb-4 text-lg">File Manager</h1>
-          fileName="Backups"
+          <FileCardList>
-          size="33 files"
+            <FileCard
-          type={FileTypes.Folder}
+              fileName="Backups"
-          createdAt="2 days ago"
+              size="33 files"
-        />
+              type={FileTypes.Folder}
-        <FileCard
+              createdAt="2 days ago"
-          fileName="Backups"
+            />
-          size="33 files"
+            <FileCard
-          type={FileTypes.Folder}
+              fileName="Backups"
-          createdAt="2 days ago"
+              size="33 files"
-        />
+              type={FileTypes.Folder}
-        <FileCard
+              createdAt="2 days ago"
-          fileName="Backups"
+            />
-          size="33 files"
+            <FileCard
-          type={FileTypes.Folder}
+              fileName="Backups"
-          createdAt="2 days ago"
+              size="33 files"
-        />
+              type={FileTypes.Folder}
-        <FileCard
+              createdAt="2 days ago"
-          fileName="Backups"
+            />
-          size="33 files"
+            <FileCard
-          type={FileTypes.Folder}
+              fileName="Backups"
-          createdAt="2 days ago"
+              size="33 files"
-        />
+              type={FileTypes.Folder}
-      </FileCardList>
+              createdAt="2 days ago"
-      <h2 className="font-bold text-l mt-8">Files</h2>
+            />
-      <div className="flex items-center space-x-4 my-6 w-full">
+          </FileCardList>
-        <Input
+          <h2 className="font-bold text-l mt-8">Files</h2>
-          fullWidth
+          <div className="flex items-center space-x-4 my-6 w-full">
-          leftIcon={<AddIcon />}
+            <Input
-          placeholder="Search files by name or CID"
+              fullWidth
-          className="border-ring font-medium w-full grow h-12 flex-1 bg-primary-2/10"
+              leftIcon={<AddIcon />}
-        />
+              placeholder="Search files by name or CID"
-        <Button className="h-12 gap-x-2">
+              className="border-ring font-medium w-full grow h-12 flex-1 bg-primary-2/10"
-          <AddIcon />
+            />
-          Select All
+            <Button className="h-12 gap-x-2">
-        </Button>
+              <AddIcon />
-        <Button className="h-12 gap-x-2">
+              Select All
-          <AddIcon />
+            </Button>
-          New Folder
+            <DialogTrigger asChild>
-        </Button>
+              <Button className="h-12 gap-x-2">
-      </div>
+                <AddIcon />
-      <DataTable
+                Pin Content
-        columns={columns}
+              </Button>
-        resource="file"
+            </DialogTrigger>
-        dataProviderName="files"
+          </div>
-      />
+          <DataTable
-    </GeneralLayout>
+            columns={columns}
+            resource="file"
+            dataProviderName="files"
+          />
+          <DialogContent>
+            <DialogHeader>
+              <DialogTitle>Pin Content</DialogTitle>
+            </DialogHeader>
+            <form action="" className="w-full flex flex-col gap-y-4">
+              <Field
+                inputProps={{
+                  name: "cids",
+                  placeholder: "Comma separated CIDs",
+                }}
+                labelProps={{ htmlFor: "cids", children: "Content to Pin" }}
+              />
+
+              <Button type="submit" className="w-full">
+                Pin Content
+              </Button>
+            </form>
+          </DialogContent>
+        </Dialog>
+      </GeneralLayout>
+    </Authenticated>
   );
 }

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 />}
+      <LoginForm />
-      {hash === "#otp" && <OtpForm />}
 
       <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") {
-      login.mutate({
+        const data = submission.value;
-        email: data.email.toString(),
+        login.mutate({
-        password: data.password.toString(),
+          email: data.email,
-        rememberMe: data.rememberMe.toString() === "on",
+          password: data.password,
-        redirectTo: parsed.params?.to,
+          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

@@ -47,11 +47,11 @@ export default function Register() {
   const login = useLogin<AuthFormRequest>();
   const { open } = useNotification();
   const [form, fields] = useForm({
-    id: "register",
+      id: "register",
-    constraint: getZodConstraint(RegisterSchema),
+      constraint: getZodConstraint(RegisterSchema),
-    onValidate({ formData }) {
+      onValidate({formData}) {
-      return parseWithZod(formData, { schema: RegisterSchema });
+          return parseWithZod(formData, {schema: RegisterSchema});
-    },
+      },
       onSubmit(e) {
           e.preventDefault();
 
@@ -61,23 +61,9 @@ 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,
-                    })
-                }
-            })
-          }
-    });
 
   return (
     <div className="p-10 h-screen relative">

app/tailwind.css

@@ -4,8 +4,8 @@
  
 @layer base {
   :root {
-    --background: 240, 33%, 3%;
+    --background: 0 0% 3.9%;
-    --foreground: 0, 0%, 88%;
+    --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",