app/components/data-table.tsx

@@ -18,21 +18,16 @@ import { Skeleton } from "./ui/skeleton";
 import { DataTablePagination } from "./table-pagination"
 
 interface DataTableProps<TData extends BaseRecord = BaseRecord, TValue = unknown> {
-  columns: ColumnDef<TData, TValue>[],
+  columns: ColumnDef<TData, TValue>[]
-  resource: string;
-  dataProviderName?: string;
 }
 
 export function DataTable<TData extends BaseRecord, TValue>({
   columns,
-  resource,
-  dataProviderName
 }: DataTableProps<TData, TValue>) {
   const table = useTable({
     columns,
     refineCoreProps: {
-      resource,
+      resource: "file"
-      dataProviderName: dataProviderName || "default"
     }
   })
 

app/components/general-layout.tsx

@@ -35,8 +35,6 @@ import {
 import { Avatar } from "@radix-ui/react-avatar";
 import { cn } from "~/utils";
 import { useGetIdentity, useLogout } from "@refinedev/core";
-import { PinningNetworkBanner } from "./pinning-network-banner";
-import { PinningProvider } from "~/providers/PinningProvider";
 import type { Identity } from "~/data/auth-provider";
 import {
   Tooltip,
@@ -50,7 +48,6 @@ export const GeneralLayout = ({ children }: React.PropsWithChildren) => {
   const { data: identity } = useGetIdentity<Identity>();
   const { mutate: logout } = useLogout();
   return (
-    <PinningProvider>
     <div className="h-full flex flex-row">
       <header className="p-10 pr-0 flex flex-col w-[240px] h-full scroll-m-0 overflow-hidden">
         <img src={logoPng} alt="Lume logo" className="h-10 w-32" />
@@ -103,6 +100,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 +149,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>
@@ -164,8 +158,6 @@ export const GeneralLayout = ({ children }: React.PropsWithChildren) => {
         </footer>
       </div>
     </div>
-      <PinningNetworkBanner />
-    </PinningProvider>
   );
 };
 

app/components/pinning-network-banner.tsx

@@ -1,107 +0,0 @@
-import { useContext, useMemo } from "react";
-import {
-  Accordion,
-  AccordionContent,
-  AccordionItem,
-  AccordionTrigger,
-} from "./ui/accordion";
-import { Progress } from "./ui/progress";
-import { usePinning } from "~/hooks/usePinning";
-import { Tabs, TabsTrigger, TabsList, TabsContent } from "./ui/tabs";
-import { Button } from "./ui/button";
-import { Cross2Icon } from "@radix-ui/react-icons";
-import type { PinningStatus } from "~/data/pinning";
-import { PinningContext } from "~/providers/PinningProvider";
-
-export const PinningNetworkBanner = () => {
-  // const context = useContext(PinningContext);
-  const { data } = usePinning();
-
-  // TODO: Adapt to real API
-  const itemsLeft = useMemo(
-    () =>
-      data?.items.filter((item: PinningStatus) =>
-        item.status.includes("inprogress"),
-      ) || [],
-    [data],
-  );
-
-  const completedItems = useMemo(
-    () =>
-      data?.items.filter((item: PinningStatus) =>
-        item.status.includes("completed"),
-      ) || [],
-    [data],
-  );
-
-  return (
-    <div
-      className={`bg-background border border-border rounded-lg absolute w-1/3 bottom-4 right-4 ${
-        !data?.items.length ? "hidden" : "block"
-      }`}>
-      <Accordion type="single" defaultValue="item-1" collapsible>
-        <AccordionItem value="item-1">
-          <AccordionTrigger className="font-bold bg-primary px-4 rounded-tr-lg rounded-tl-lg">
-            {`${completedItems.length}/${data?.items.length} items completed`}
-          </AccordionTrigger>
-          <AccordionContent>
-            <Tabs className="w-full" defaultValue="inProgress">
-              <TabsList className="rounded-none">
-                <TabsTrigger value="inProgress">In Progress</TabsTrigger>
-                <TabsTrigger value="completed">Completed</TabsTrigger>
-              </TabsList>
-              <TabsContent value="inProgress">
-                {itemsLeft.length ? (
-                  itemsLeft.map((item: PinningStatus) => (
-                    <PinCidItem key={item.id} item={item} />
-                  ))
-                ) : (
-                  <div className="text-primary-2 text-sm flex justify-center items-center h-10">
-                    Nothing yet.
-                  </div>
-                )}
-              </TabsContent>
-              <TabsContent value="completed">
-                {completedItems.length ? (
-                  completedItems.map((item: PinningStatus) => (
-                    <PinCidItem key={item.id} item={item} />
-                  ))
-                ) : (
-                  <div className="text-muted text-sm flex justify-center items-center h-10">
-                    Nothing yet.
-                  </div>
-                )}
-              </TabsContent>
-            </Tabs>
-          </AccordionContent>
-        </AccordionItem>
-      </Accordion>
-    </div>
-  );
-};
-
-const PinCidItem = ({ item }: { item: PinningStatus }) => {
-  const { unpin } = usePinning();
-
-  return (
-    <div className="px-4 mb-4">
-      <div className="relative flex flex-col items-center rounded-lg py-2 px-4 hover:bg-primary/50 group">
-        <div className="flex justify-between items-center w-full">
-          <span className="font-semibold">{item.id}</span>
-          <span className="group-hover:hidden">{item.progress}%</span>
-          <Button
-            variant="ghost"
-            className="absolute top-2 right-2 hidden group-hover:flex rounded-full h-3"
-            onClick={() =>
-              unpin({
-                cid: item.id,
-              })
-            }>
-            <Cross2Icon />
-          </Button>
-        </div>
-        <Progress value={item.progress} className="h-2" />
-      </div>
-    </div>
-  );
-};

app/components/ui/accordion.tsx

@@ -1,58 +0,0 @@
-import * as React from "react";
-import * as AccordionPrimitive from "@radix-ui/react-accordion";
-import { ChevronDownIcon } from "@radix-ui/react-icons";
-
-import { cn } from "~/utils";
-
-const Accordion = AccordionPrimitive.Root;
-
-const AccordionItem = React.forwardRef<
-  React.ElementRef<typeof AccordionPrimitive.Item>,
-  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>
->(({ className, ...props }, ref) => (
-  <AccordionPrimitive.Item
-    ref={ref}
-    className={cn("border-b", className)}
-    {...props}
-  />
-));
-AccordionItem.displayName = "AccordionItem";
-
-const AccordionTrigger = React.forwardRef<
-  React.ElementRef<typeof AccordionPrimitive.Trigger>,
-  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>
->(({ className, children, ...props }, ref) => (
-  <AccordionPrimitive.Header className="flex">
-    <AccordionPrimitive.Trigger
-      ref={ref}
-      className={cn(
-        "flex flex-1 items-center justify-between py-4 text-sm font-medium transition-all [&[data-state=open]>svg]:rotate-180",
-        className,
-      )}
-      {...props}>
-      {children}
-      <ChevronDownIcon className="h-4 w-4  text-muted-foreground transition-transform duration-200" />
-    </AccordionPrimitive.Trigger>
-  </AccordionPrimitive.Header>
-));
-AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName;
-
-const AccordionContent = React.forwardRef<
-  React.ElementRef<typeof AccordionPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>
->(({ className, children, ...props }, ref) => (
-  <AccordionPrimitive.Content
-    ref={ref}
-    className="overflow-hidden text-sm data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down"
-    {...props}>
-    <div className={cn("pb-4 pt-0", className)}>{children}</div>
-  </AccordionPrimitive.Content>
-));
-AccordionContent.displayName = AccordionPrimitive.Content.displayName;
-
-export {
-  Accordion,
-  AccordionItem,
-  AccordionTrigger,
-  AccordionContent,
-};

app/components/ui/tabs.tsx

@@ -1,53 +0,0 @@
-import * as React from "react";
-import * as TabsPrimitive from "@radix-ui/react-tabs";
-
-import { cn } from "~/utils";
-
-const Tabs = TabsPrimitive.Root;
-
-const TabsList = React.forwardRef<
-  React.ElementRef<typeof TabsPrimitive.List>,
-  React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>
->(({ className, ...props }, ref) => (
-  <TabsPrimitive.List
-    ref={ref}
-    className={cn(
-      "inline-flex h-9 items-center justify-center rounded-lg bg-primary-dark p-1 text-muted-foreground",
-      className,
-    )}
-    {...props}
-  />
-));
-TabsList.displayName = TabsPrimitive.List.displayName;
-
-const TabsTrigger = React.forwardRef<
-  React.ElementRef<typeof TabsPrimitive.Trigger>,
-  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>
->(({ className, ...props }, ref) => (
-  <TabsPrimitive.Trigger
-    ref={ref}
-    className={cn(
-      "inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-primary-1 data-[state=active]:shadow",
-      className,
-    )}
-    {...props}
-  />
-));
-TabsTrigger.displayName = TabsPrimitive.Trigger.displayName;
-
-const TabsContent = React.forwardRef<
-  React.ElementRef<typeof TabsPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>
->(({ className, ...props }, ref) => (
-  <TabsPrimitive.Content
-    ref={ref}
-    className={cn(
-      "mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
-      className,
-    )}
-    {...props}
-  />
-));
-TabsContent.displayName = TabsPrimitive.Content.displayName;
-
-export { Tabs, TabsList, TabsTrigger, TabsContent };

app/data/file-provider.ts

@@ -1,11 +1,12 @@
-import type {SdkProvider} from "~/data/sdk-provider.js";
+import {SdkProvider} from "~/data/sdk-provider.js";
-import type {S5Client} from "@lumeweb/s5-js";
+import {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 {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();

app/data/pinning.ts

@@ -1,11 +1,11 @@
-export interface PinningStatus {
+interface PinningStatus {
     id: string;
     progress: number;
     status: 'inprogress' | 'completed' | 'stale';
 }
 
 // biome-ignore lint/complexity/noStaticOnlyClass: <explanation>
-export class PinningProcess {
+class PinningProcess {
     private static instances: Map<string, PinningStatus> = new Map();
 
     static async pin(id: string): Promise<{ success: boolean; message: string }> {
@@ -30,26 +30,13 @@ export class PinningProcess {
         return { success: true, message: "Pinning process started" };
     }
 
-    static async unpin(id: string): Promise<{ success: boolean; message: string }> {
+    static *pollProgress(id: string): Generator<PinningStatus | null, void, unknown> {
-        if (!PinningProcess.instances.has(id)) {
+        let status = PinningProcess.instances.get(id);
-            return { success: false, message: "ID not found or not being processed" };
+        while (status && status.status !== 'completed') {
+            yield status;
+            status = PinningProcess.instances.get(id);
         }
-
+        yield status ?? null; // Yield the final status, could be null if ID doesn't exist
-        PinningProcess.instances.delete(id);
-        return { success: true, message: "Pinning process removed" }
-    }
-
-    static *pollAllProgress(): Generator<PinningStatus[], void, unknown> {
-        let allStatuses = Array.from(PinningProcess.instances.values());
-        let inProgress = allStatuses.some(status => status.status !== 'completed');
-
-        while (inProgress) {
-            yield allStatuses;
-            allStatuses = Array.from(PinningProcess.instances.values());
-            inProgress = allStatuses.some(status => status.status !== 'completed');
-        }
-
-        yield allStatuses ?? []; // Yield the final statuses
     }
 }
 

app/data/providers.ts

@@ -1,4 +1,4 @@
-import type {AuthProvider} from "@refinedev/core";
+import type {AuthProvider, DataProvider} from "@refinedev/core";
 import {fileProvider} from "~/data/file-provider.js";
 import {Sdk} from "@lumeweb/portal-sdk";
 import {accountProvider} from "~/data/account-provider.js";
@@ -8,6 +8,7 @@ import {createPortalAuthProvider} from "~/data/auth-provider.js";
 interface DataProviders {
     default: SdkProvider;
     auth: AuthProvider;
+
     [key: string]: SdkProvider | AuthProvider;
 }
 

app/hooks/usePinning.ts

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

app/providers/PinningProvider.tsx

@@ -1,63 +0,0 @@
-import {
-  type QueryClient,
-  type UseQueryResult,
-  useQuery,
-  useQueryClient,
-} from "@tanstack/react-query";
-import { createContext, useContext } from "react";
-import { PinningProcess, type PinningStatus } from "~/data/pinning";
-
-export interface IPinningData {
-  cid: string;
-  progress: number;
-}
-
-export interface IPinningContextType {
-  query: UseQueryResult<
-    {
-      items: PinningStatus[];
-      lastUpdated: number;
-    },
-    Error
-  >;
-  queryClient: QueryClient;
-}
-
-export const PinningContext = createContext<IPinningContextType>(
-  {} as IPinningContextType,
-);
-
-export const usePinningContext = () => useContext(PinningContext);
-
-const usePinProgressQuery = () =>
-  useQuery({
-    queryKey: ["pin-progress"],
-    refetchInterval: (query) => {
-      if (!query.state.data || !query.state.data.items.length) {
-        return false;
-      }
-
-      return 1000;
-    },
-    refetchIntervalInBackground: true,
-    queryFn: () => {
-      const response = PinningProcess.pollAllProgress();
-      const result = response.next();
-
-      return {
-        items: result.value || [],
-        lastUpdated: Date.now(),
-      };
-    },
-  });
-
-export const PinningProvider = ({ children }: React.PropsWithChildren) => {
-  const queryClient = useQueryClient();
-  const queryResult = usePinProgressQuery();
-
-  return (
-    <PinningContext.Provider value={{ query: queryResult, queryClient }}>
-      {children}
-    </PinningContext.Provider>
-  );
-};

app/root.tsx

@@ -1,16 +1,10 @@
-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";
@@ -19,15 +13,12 @@ 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},
 ];
 
-const queryClient = new QueryClient();
-
 export function Layout({children}: { children: React.ReactNode }) {
     return (
         <html lang="en">
@@ -51,25 +42,21 @@ function App() {
     const sdk = useSdk();
     const providers = useMemo(() => getProviders(sdk as Sdk), [sdk]);
     return (
-    <QueryClientProvider client={queryClient}>
         <Refine
             authProvider={providers.auth}
             routerProvider={routerProvider}
             notificationProvider={notificationProvider}
-        dataProvider={{
+            dataProvider={providers}
-          default: providers.default,
-          files: providers.files,
-        }}
             resources={resources}
-        options={{ disableTelemetry: true }}>
+            options={{disableTelemetry: true}}
+        >
             <Outlet/>
         </Refine>
-    </QueryClientProvider>
     );
 }
 
 export default function Root() {
-  const sdk = Sdk.create(import.meta.env.VITE_PORTAL_URL);
+    const sdk = Sdk.create(import.meta.env.VITE_PORTAL_URL)
     return (
         <SdkContextProvider sdk={sdk}>
             <App/>

app/routes/_index.tsx

@@ -3,7 +3,7 @@ import {Navigate} from "@remix-run/react";
 
 export default function Index() {
     return (
-        <Authenticated key={"index"} loading={
+        <Authenticated v3LegacyAuthProviderCompatible key={"index"} loading={
             <>Checking Login Status</>
         }>
             <Navigate to="/dashboard" replace/>

app/routes/account.tsx

@@ -85,13 +85,9 @@ export default function MyAccount() {
           <ManagementCard>
             <ManagementCardAvatar
               button={
-                  <DialogTrigger
+                <DialogTrigger asChild 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 />
@@ -109,9 +105,7 @@ export default function MyAccount() {
               <DialogTrigger asChild>
                 <Button
                   className="h-12 gap-x-2"
-                    onClick={() =>
+                  onClick={() => setModal({ ...openModal, changeEmail: true })}>
-                      setModal({ ...openModal, changeEmail: true })
-                    }>
                   <AddIcon />
                   Change Email Address
                 </Button>
@@ -153,9 +147,7 @@ export default function MyAccount() {
             </ManagementCardFooter>
           </ManagementCard>
           <ManagementCard>
-              <ManagementCardTitle>
+            <ManagementCardTitle>Two-Factor Authentication</ManagementCardTitle>
-                Two-Factor Authentication
-              </ManagementCardTitle>
             <ManagementCardContent>
               Improve security by enabling 2FA.
             </ManagementCardContent>
@@ -321,8 +313,7 @@ const ChangePasswordSchema = z
   });
 
 const ChangePasswordForm = () => {
-  const { mutate: updatePassword } =
+  const { mutate: updatePassword } = useUpdatePassword<UpdatePasswordFormRequest>();
-    useUpdatePassword<UpdatePasswordFormRequest>();
   const [form, fields] = useForm({
     id: "login",
     constraint: getZodConstraint(ChangePasswordSchema),

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, RowData } from "@tanstack/react-table";
 import { FileIcon, MoreIcon } from "~/components/icons";
 import { Checkbox } from "~/components/ui/checkbox";
 import {
@@ -7,20 +7,17 @@ import {
   DropdownMenuContent,
   DropdownMenuGroup,
   DropdownMenuItem,
+  DropdownMenuSeparator,
   DropdownMenuTrigger,
 } from "~/components/ui/dropdown-menu";
-
 import { cn } from "~/utils";
 import type { FileItem } from "~/data/file-provider";
 
-// This type is used to define the shape of our data.
+declare module "@tanstack/table-core" {
-// You can use a Zod schema here if you want.
+  interface TableMeta<TData extends RowData> {
-export type File = {
+    hoveredRowId: string;
-  name: string;
+  }
-  cid: string;
+}
-  size: string;
-  createdOn: string;
-};
 
 export const columns: ColumnDef<FileItem>[] = [
   {

app/routes/file-manager/index.tsx

@@ -14,14 +14,10 @@ import {
   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="file-manager">
+    <Authenticated key="dashboard" v3LegacyAuthProviderCompatible>
       <GeneralLayout>
         <Dialog>
           <h1 className="font-bold mb-4 text-lg">File Manager</h1>
@@ -70,62 +66,27 @@ export default function FileManager() {
               </Button>
             </DialogTrigger>
           </div>
-          <DataTable
+          <DataTable columns={columns} />
-            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 }) {
-      e.preventDefault();
-      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">
+            <form action="" className="w-full flex flex-col gap-y-4">
               <Field
                 inputProps={{
-            name: fields.cids.name,
+                  name: "cids",
                   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>
-    </>
+          </DialogContent>
+        </Dialog>
+      </GeneralLayout>
+    </Authenticated>
   );
-};
+}

package.json

@@ -16,7 +16,6 @@
     "@conform-to/react": "^1.0.2",
     "@conform-to/zod": "^1.0.2",
     "@fontsource-variable/manrope": "^5.0.19",
-    "@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",
@@ -28,7 +27,6 @@
     "@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",
@@ -39,7 +37,6 @@
     "@refinedev/remix-router": "https://gitpkg.now.sh/LumeWeb/refine/packages/remix?remix",
     "@remix-run/node": "^2.8.0",
     "@remix-run/react": "^2.8.0",
-    "@tanstack/react-query": "^5.28.6",
     "@tanstack/react-table": "^8.13.2",
     "@uppy/core": "^3.9.3",
     "@uppy/tus": "^3.5.3",