app/components/general-layout.tsx

@@ -30,17 +30,13 @@ 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 "./pinnning-network-banner";
-import { PinningProvider } from "~/providers/PinningProvider";
 
 
 export const GeneralLayout = ({ children }: React.PropsWithChildren<{}>) => {
   const location = useLocation();
   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" />
@@ -151,8 +147,6 @@ export const GeneralLayout = ({ children }: React.PropsWithChildren<{}>) => {
         </footer>
       </div>
     </div>
-      <PinningNetworkBanner />
-    </PinningProvider>
   );
 };
 

app/components/pinnning-network-banner.tsx

@@ -1,107 +0,0 @@
-import { useEffect, useMemo } from "react";
-import {
-  Accordion,
-  AccordionContent,
-  AccordionItem,
-  AccordionTrigger,
-} from "./ui/accordion";
-import { Progress } from "./ui/progress";
-import { usePinning } from "~/hooks/usePinnning";
-import { IPinningData } from "~/providers/PinningProvider";
-import { Tabs, TabsTrigger, TabsList, TabsContent } from "./ui/tabs";
-import { Button } from "./ui/button";
-import { Cross2Icon } from "@radix-ui/react-icons";
-
-export const PinningNetworkBanner = () => {
-  const { cidList } = usePinning();
-
-  const itemsLeft = useMemo(
-    () => cidList.filter((item) => item.progress < 100),
-    [cidList],
-  );
-
-  const completedItems = useMemo(
-    () => cidList.filter((item) => item.progress === 100),
-    [cidList],
-  );
-
-  return (
-    <div
-      className={`border border-border rounded-lg absolute w-1/3 bottom-4 right-4 ${
-        !cidList.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">
-            {itemsLeft.length > 0 ? `${itemsLeft.length} left` : "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((cid) => (
-                    <PinCidItem key={cid.cid} item={cid} />
-                  ))
-                ) : (
-                  <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((cid) => (
-                    <PinCidItem key={cid.cid} item={cid} />
-                  ))
-                ) : (
-                  <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: IPinningData }) => {
-  const { getProgress, onRemoveCidFromList } = usePinning();
-
-  useEffect(() => {
-    if (item.progress < 100) {
-      const intervalId = setInterval(() => {
-        getProgress(item.cid);
-      }, 1000); // Adjust the interval time (1000ms = 1 second) as needed
-
-      return () => clearInterval(intervalId); // Clear interval on component unmount
-    }
-  }, [getProgress, item]); // Add dependencies to ensure the effect runs correctly
-
-  return (
-    <div className="px-4 mb-4">
-      <div className="flex justify-between items-center rounded-lg h-10 py-2 px-4 hover:bg-primary/50 group">
-        <span className="font-semibold">{item.cid}</span>
-        <span className="group-hover:hidden">{item.progress}%</span>
-        <div className="gap-x-2 hidden group-hover:flex">
-          <Button
-            variant="ghost"
-            className="p-2 rounded-full h-6"
-            onClick={() => onRemoveCidFromList(item.cid)}>
-            <Cross2Icon />
-          </Button>
-        </div>
-      </div>
-      <Progress
-        value={item.progress}
-        className="h-2 w-[calc(100%-1rem)] ml-2"
-      />
-    </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

@@ -4,23 +4,10 @@ import { SdkProvider } from "~/data/sdk-provider.js";
 export const fileProvider = {
   getList: () => {
     console.log("Not implemented");
-    return {
+    return Promise.resolve({
-      data: [
+      data: [],
-        {
+      total: 0,
-          name: "whirly-final-draft.psd",
+    });
-          cid: "0xB45165ED3CD437B",
-          size: "1.89 MB",
-          createdOn: " 03/02/2024 at 13:29 PM",
-        },
-        {
-          name: "whirly-final-draft.psd",
-          cid: "0xB45165ED3CD437B",
-          size: "1.89 MB",
-          createdOn: " 03/02/2024 at 13:29 PM",
-        },
-      ],
-      total: 2
-    }
   },
   getOne: () => {
     console.log("Not implemented");

app/data/pinning-provider.ts

@@ -1,66 +0,0 @@
-import { SdkProvider } from "~/data/sdk-provider.js";
-import { PinningProcess } from "./pinning";
-
-export const pinningProvider = {
-  getList: () => {
-    console.log("Not implemented");
-    return {
-      data: [],
-      total: 0,
-    };
-  },
-  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: () => "",
-  custom: () => {
-
-    const pinCid = async (cid: string) => {
-      return await PinningProcess.pin(cid);
-    }
-
-    const unpinCid = async (cid: string) => {
-      console.log("Not Implemented");
-    }
-
-    const checkCid = async (cid: string) => {
-      console.log("Not Implemented");
-    }
-
-    const checkCidProgress = (cid: string) => {
-      const progressGenerator = PinningProcess.pollProgress(cid);
-
-      return progressGenerator.next();
-    }
-
-    return {
-      pinCid,
-      unpinCid,
-      checkCid,
-      checkCidProgress
-    }
-  },
-} satisfies SdkProvider;

app/data/pinning.ts

@@ -5,7 +5,7 @@ interface PinningStatus {
 }
 
 // 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 }> {

app/data/providers.ts

@@ -1,14 +1,14 @@
-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";
 import type {SdkProvider} from "~/data/sdk-provider.js";
 import {createPortalAuthProvider} from "~/data/auth-provider.js";
-import { pinningProvider } from "./pinning-provider";
 
 interface DataProviders {
     default: SdkProvider;
     auth: AuthProvider;
+
     [key: string]: SdkProvider | AuthProvider;
 }
 
@@ -25,7 +25,6 @@ export function getProviders(sdk: Sdk) {
         default: accountProvider,
         auth: createPortalAuthProvider(sdk),
         files: fileProvider,
-        pinning: pinningProvider
     };
 
     return providers;

app/hooks/usePinnning.ts

@@ -1,62 +0,0 @@
-import { useCustom, useNotification } from "@refinedev/core";
-import { usePinningContext } from "~/providers/PinningProvider";
-
-export const usePinning = () => {
-  const { open } = useNotification();
-  const { data: cidList, setData } = usePinningContext();
-
-  const { data } = useCustom({
-    // useCustom requires URL and METHOD params
-    url: "",
-    method: "get",
-    dataProviderName: "pinning",
-  });
-
-  const onPin = async (cid: string) => {
-    if (!data?.pinCid) return;
-
-    const response = await data?.pinCid(cid);
-
-    if (response.success) {
-      setData((prev) => [...prev, { cid, progress: 0 }]);
-    } else {
-      open?.({
-        type: "destrunctive",
-        message: "Erorr pinning " + cid,
-        description: response.message,
-      });
-    }
-  };
-
-  const getProgress = (cid: string) => {
-    if (!data?.checkCidProgress) return;
-
-    const response = data?.checkCidProgress(cid);
-
-    if (!response.done) {
-      setData((prev) =>
-        prev.map((cidInfo) => {
-          const newData = cidInfo;
-
-          if (cidInfo.cid === cid) {
-            newData.progress = response.value.progress;
-
-            return newData;
-          }
-          return cidInfo;
-        }),
-      );
-    }
-  };
-
-  const onRemoveCidFromList = (cid: string) => {
-    setData((prev) => prev.filter((item) => item.cid !== cid));
-  };
-
-  return {
-    cidList,
-    onPin,
-    getProgress,
-    onRemoveCidFromList,
-  };
-};

app/providers/PinningProvider.tsx

@@ -1,25 +0,0 @@
-import { Dispatch, SetStateAction, createContext, useContext, useState } from "react";
-
-export interface IPinningData {
-    cid: string;
-    progress: number
-}
-
-export interface IPinningContextType {
-    data: IPinningData[],
-    setData: Dispatch<SetStateAction<IPinningData[]>>
-}
-
-export const PinningContext = createContext<IPinningContextType>({} as IPinningContextType);
-
-export const usePinningContext = () => useContext(PinningContext);
-
-export const PinningProvider = ({ children }: React.PropsWithChildren) => {
-    const [data, setData] = useState<IPinningData[]>([]);
-
-    return (
-        <PinningContext.Provider value={{ data, setData }}>
-            {children}
-        </PinningContext.Provider>
-    )
-}

app/root.tsx

@@ -38,7 +38,6 @@ export function Layout({children}: { children: React.ReactNode }) {
 }
 
 export default function App() {
-    console.log(import.meta.env.VITE_PORTAL_URL);
     const sdk = Sdk.create(import.meta.env.VITE_PORTAL_URL)
     const providers = getProviders(sdk);
     return (
@@ -46,10 +45,7 @@ export default function App() {
             authProvider={providers.auth}
             routerProvider={routerProvider}
             notificationProvider={notificationProvider}
-            dataProvider={{
+            dataProvider={providers.default}
-                default: providers.default,
-                pinning: providers.pinning
-            }}
             resources={resources}
             options={{disableTelemetry: true}}
         >

app/routes/file-manager/columns.tsx

@@ -1,17 +1,8 @@
 import { DrawingPinIcon, TrashIcon } from "@radix-ui/react-icons";
-import type { ColumnDef, Row } 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 {
+import { DropdownMenu, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger } from "~/components/ui/dropdown-menu";
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuGroup,
-  DropdownMenuItem,
-  DropdownMenuSeparator,
-  DropdownMenuTrigger,
-} from "~/components/ui/dropdown-menu";
-
-import { usePinning } from "~/hooks/usePinnning";
 import { cn } from "~/utils";
 
 // This type is used to define the shape of our data.
@@ -23,42 +14,11 @@ export type File = {
     createdOn: string;
 };
 
-const CreatedOnCell = ({ row }: { row: Row<File> }) => {
+declare module '@tanstack/table-core' {
-  // const { open } = useNotification();
+  interface TableMeta<TData extends RowData> {
-  const { onPin } = usePinning();
+      hoveredRowId: string,
-
+  }
-  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...`);
-                onPin(row.getValue("cid"));
-              }}>
-              <DrawingPinIcon className="mr-2" />
-              Ping CID
-            </DropdownMenuItem>
-            <DropdownMenuSeparator />
-            <DropdownMenuItem variant="destructive">
-              <TrashIcon className="mr-2" />
-              Delete
-            </DropdownMenuItem>
-          </DropdownMenuGroup>
-        </DropdownMenuContent>
-      </DropdownMenu>
-    </div>
-  );
-};
 
 export const columns: ColumnDef<File>[] = [
     {
@@ -66,6 +26,7 @@ export const columns: ColumnDef<File>[] = [
       size: 20,
       header: ({ table }) => (
         <Checkbox
+          
           checked={
             table.getIsAllPageRowsSelected() ||
             (table.getIsSomePageRowsSelected() && "indeterminate")
@@ -92,7 +53,7 @@ export const columns: ColumnDef<File>[] = [
             <FileIcon />
             {row.getValue("name")}
           </div>
-    ),
+        )
     },
     {
         accessorKey: "cid",
@@ -106,6 +67,30 @@ export const columns: ColumnDef<File>[] = [
         accessorKey: "createdOn",
         size: 200,
         header: "Created On",
-    cell: ({ row }) => <CreatedOnCell row={row} />,
+        cell: ({ row }) => (
-  },
+          <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>
+                    <DrawingPinIcon className="mr-2" />
+                    Ping CID
+                  </DropdownMenuItem>
+                  <DropdownMenuSeparator />
+                  <DropdownMenuItem variant="destructive">
+                    <TrashIcon className="mr-2" />
+                    Delete
+                  </DropdownMenuItem>
+                </DropdownMenuGroup>
+              </DropdownMenuContent>
+            </DropdownMenu>
+          </div>
+        )
+    }
 ];

package.json

@@ -17,7 +17,6 @@
     "@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",
     "@radix-ui/react-avatar": "^1.0.4",
     "@radix-ui/react-checkbox": "^1.0.4",
     "@radix-ui/react-dialog": "^1.0.5",
@@ -27,7 +26,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",
     "@refinedev/cli": "^2.16.1",
     "@refinedev/core": "https://gitpkg.now.sh/LumeWeb/refine/packages/core?remix",