feat: initial wiring of the pinning system

app/components/pinning-network-banner.tsx

@@ -21,7 +21,7 @@ export const PinningNetworkBanner = () => {
   const itemsLeft = useMemo(
     () =>
       data?.items.filter((item: PinningStatus) =>
-        item.status.includes("inprogress"),
+        item.status.includes("processing"),
       ) || [],
     [data],
   );

app/data/pinning.ts

@@ -1,45 +1,52 @@
+import {PROTOCOL_S5, Sdk} from "@lumeweb/portal-sdk";
+import {useSdk} from "~/components/lib/sdk-context.js";
+import {S5Client} from "@lumeweb/s5-js";
+
 export interface PinningStatus {
     id: string;
     progress: number;
-    status: 'inprogress' | 'completed' | 'stale';
+    status: 'processing' | 'completed';
 }
 
 // biome-ignore lint/complexity/noStaticOnlyClass: <explanation>
 export class PinningProcess {
     private static instances: Map<string, PinningStatus> = new Map();
 
+    private static sdk?: Sdk;
+
     static async pin(id: string): Promise<{ success: boolean; message: string }> {
+        const s5 = PinningProcess.sdk?.protocols().get<S5Client>(PROTOCOL_S5)!.getSdk()!;
         if (PinningProcess.instances.has(id)) {
-            return { success: false, message: "ID is already being processed" };
+            return {success: false, message: "ID is already being processed"};
         }
 
-        const pinningStatus: PinningStatus = { id, progress: 0, status: 'inprogress' };
+        const pinningStatus: PinningStatus = {id, progress: 0, status: 'processing'};
         PinningProcess.instances.set(id, pinningStatus);
 
-        // Simulate async progress
+        await s5.pin(id);
+
         (async () => {
-            for (let progress = 1; progress <= 100; progress++) {
-                await new Promise(resolve => setTimeout(resolve, Math.floor(Math.random() * (500 - 100 + 1)) + 100)); // Simulate time passing with random duration between 100 and 500
-                pinningStatus.progress = progress;
-                if (progress === 100) {
+            const ret = await s5.pinStatus(id);
+            pinningStatus.progress = ret.progress;
+            if (ret.status === 'completed') {
                 pinningStatus.status = 'completed';
             }
-            }
         })();
 
-        return { success: true, message: "Pinning process started" };
+        return {success: true, message: "Pinning process started"};
     }
 
     static async unpin(id: string): Promise<{ success: boolean; message: string }> {
         if (!PinningProcess.instances.has(id)) {
-            return { success: false, message: "ID not found or not being processed" };
+            return {success: false, message: "ID not found or not being processed"};
         }
 
-        PinningProcess.instances.delete(id);
-        return { success: true, message: "Pinning process removed" }
+        await PinningProcess.sdk?.protocols().get<S5Client>(PROTOCOL_S5)!.getSdk().unpin(id);
+
+        return {success: true, message: "Pinning process removed"}
     }
 
-    static *pollAllProgress(): Generator<PinningStatus[], void, unknown> {
+    static* pollAllProgress(): Generator<PinningStatus[], void, unknown> {
         let allStatuses = Array.from(PinningProcess.instances.values());
         let inProgress = allStatuses.some(status => status.status !== 'completed');
 
@@ -51,18 +58,8 @@ export class PinningProcess {
 
         yield allStatuses ?? []; // Yield the final statuses
     }
-}
 
-// Example usage:
-// (async () => {
-//     const { success, message } = await PinningProcess.pin("123");
-//     console.log(message);
-//     if (success) {
-//         const progressGenerator = PinningProcess.pollProgress("123");
-//         let result = progressGenerator.next();
-//         while (!result.done) {
-//             console.log(result.value); // Log the progress
-//             result = progressGenerator.next();
-//         }
-//     }
-// })();
+    public static setupSdk(sdk: Sdk) {
+        PinningProcess.sdk = sdk;
+    }
+}

app/root.tsx

@@ -21,6 +21,7 @@ import { Sdk } from "@lumeweb/portal-sdk";
 import resources from "~/data/resources.js";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { useMemo } from "react";
+import {PinningProcess} from "~/data/pinning.js";
 
 export const links: LinksFunction = () => [
   { rel: "stylesheet", href: stylesheet },
@@ -50,6 +51,7 @@ export function Layout({ children }: { children: React.ReactNode }) {
 function App() {
   const sdk = useSdk();
   const providers = useMemo(() => getProviders(sdk as Sdk), [sdk]);
+    useMemo(() => PinningProcess.setupSdk(sdk as Sdk), [sdk]);
   return (
     <QueryClientProvider client={queryClient}>
       <Refine