feat: connecting the pinning thingy

app/components/data-table.tsx

@@ -18,16 +18,21 @@ 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: "file"
+      resource,
+      dataProviderName: dataProviderName || "default"
     }
   })
 

app/components/general-layout.tsx

@@ -35,6 +35,8 @@ 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,
@@ -48,6 +50,7 @@ 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" />
@@ -100,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">
@@ -149,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>
@@ -158,6 +164,8 @@ export const GeneralLayout = ({ children }: React.PropsWithChildren) => {
           </footer>
         </div>
       </div>
+      <PinningNetworkBanner />
+    </PinningProvider>
   );
 };
 

app/components/pinning-network-banner.tsx

@@ -0,0 +1,107 @@
+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

@@ -0,0 +1,58 @@
+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

@@ -0,0 +1,53 @@
+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,12 +1,11 @@
-import {SdkProvider} from "~/data/sdk-provider.js";
+import type {SdkProvider} from "~/data/sdk-provider.js";
-import {S5Client} from "@lumeweb/s5-js";
+import type {S5Client} from "@lumeweb/s5-js";
 import {PROTOCOL_S5} from "@lumeweb/portal-sdk";
 import {Multihash} from "@lumeweb/libs5/lib/multihash.js";
-import {AxiosProgressEvent} from "axios";
+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();

app/data/pinning.ts

@@ -1,11 +1,11 @@
-interface PinningStatus {
+export interface PinningStatus {
     id: string;
     progress: number;
     status: 'inprogress' | 'completed' | 'stale';
 }
 
 // biome-ignore lint/complexity/noStaticOnlyClass: <explanation>
-class PinningProcess {
+export class PinningProcess {
     private static instances: Map<string, PinningStatus> = new Map();
 
     static async pin(id: string): Promise<{ success: boolean; message: string }> {
@@ -30,13 +30,26 @@ class PinningProcess {
         return { success: true, message: "Pinning process started" };
     }
 
-    static *pollProgress(id: string): Generator<PinningStatus | null, void, unknown> {
+    static async unpin(id: string): Promise<{ success: boolean; message: string }> {
-        let status = PinningProcess.instances.get(id);
+        if (!PinningProcess.instances.has(id)) {
-        while (status && status.status !== 'completed') {
+            return { success: false, message: "ID not found or not being processed" };
-            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, DataProvider} from "@refinedev/core";
+import type {AuthProvider} from "@refinedev/core";
 import {fileProvider} from "~/data/file-provider.js";
 import {Sdk} from "@lumeweb/portal-sdk";
 import {accountProvider} from "~/data/account-provider.js";
@@ -8,7 +8,6 @@ import {createPortalAuthProvider} from "~/data/auth-provider.js";
 interface DataProviders {
     default: SdkProvider;
     auth: AuthProvider;
-
     [key: string]: SdkProvider | AuthProvider;
 }
 

app/hooks/usePinning.ts

@@ -0,0 +1,62 @@
+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

@@ -0,0 +1,63 @@
+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,10 +1,16 @@
-import {Links, Meta, Outlet, Scripts, ScrollRestoration,} from "@remix-run/react";
+import {
+  Links,
+  Meta,
+  Outlet,
+  Scripts,
+  ScrollRestoration,
+} from "@remix-run/react";
 
 import stylesheet from "./tailwind.css?url";
 import type { LinksFunction } from "@remix-run/node";
 
 // 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";
@@ -13,12 +19,15 @@ 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">
@@ -42,21 +51,25 @@ 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={providers}
+        dataProvider={{
+          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 v3LegacyAuthProviderCompatible key={"index"} loading={
+        <Authenticated key={"index"} loading={
             <>Checking Login Status</>
         }>
             <Navigate to="/dashboard" replace/>

app/routes/account.tsx

@@ -85,9 +85,13 @@ export default function MyAccount() {
             <ManagementCard>
               <ManagementCardAvatar
                 button={
-                <DialogTrigger asChild className="absolute bottom-0 right-0 z-50">
+                  <DialogTrigger
+                    asChild
+                    className="absolute bottom-0 right-0 z-50">
                     <Button
-                    onClick={() => setModal({ ...openModal, changeAvatar: true })}
+                      onClick={() =>
+                        setModal({ ...openModal, changeAvatar: true })
+                      }
                       variant="outline"
                       className=" flex items-center w-10 h-10 p-0 border-white rounded-full justiyf-center hover:bg-secondary-2">
                       <EditIcon />
@@ -105,7 +109,9 @@ export default function MyAccount() {
                 <DialogTrigger asChild>
                   <Button
                     className="h-12 gap-x-2"
-                  onClick={() => setModal({ ...openModal, changeEmail: true })}>
+                    onClick={() =>
+                      setModal({ ...openModal, changeEmail: true })
+                    }>
                     <AddIcon />
                     Change Email Address
                   </Button>
@@ -147,7 +153,9 @@ export default function MyAccount() {
               </ManagementCardFooter>
             </ManagementCard>
             <ManagementCard>
-            <ManagementCardTitle>Two-Factor Authentication</ManagementCardTitle>
+              <ManagementCardTitle>
+                Two-Factor Authentication
+              </ManagementCardTitle>
               <ManagementCardContent>
                 Improve security by enabling 2FA.
               </ManagementCardContent>
@@ -313,7 +321,8 @@ const ChangePasswordSchema = z
   });
 
 const ChangePasswordForm = () => {
-  const { mutate: updatePassword } = useUpdatePassword<UpdatePasswordFormRequest>();
+  const { mutate: updatePassword } =
+    useUpdatePassword<UpdatePasswordFormRequest>();
   const [form, fields] = useForm({
     id: "login",
     constraint: getZodConstraint(ChangePasswordSchema),

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

app/routes/file-manager/index.tsx

@@ -14,10 +14,14 @@ 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="dashboard" v3LegacyAuthProviderCompatible>
+    <Authenticated key="file-manager">
       <GeneralLayout>
         <Dialog>
           <h1 className="font-bold mb-4 text-lg">File Manager</h1>
@@ -66,27 +70,62 @@ export default function FileManager() {
               </Button>
             </DialogTrigger>
           </div>
-          <DataTable columns={columns} />
+          <DataTable
-          <DialogContent>
+            columns={columns}
-            <DialogHeader>
+            resource="file"
-              <DialogTitle>Pin Content</DialogTitle>
+            dataProviderName="files"
-            </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" }}
           />
-
+          <DialogContent>
-              <Button type="submit" className="w-full">
+            <PinFilesForm />
-                Pin Content
-              </Button>
-            </form>
           </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">
+        <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>
+    </>
+  );
+};

package.json

@@ -16,6 +16,7 @@
     "@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",
@@ -27,6 +28,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",
@@ -37,6 +39,7 @@
     "@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",