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,30 +1,36 @@
+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"};
         }
 
-        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++) {
+            const ret = await s5.pinStatus(id);
-                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 = ret.progress;
-                pinningStatus.progress = progress;
+            if (ret.status === 'completed') {
-                if (progress === 100) {
                 pinningStatus.status = 'completed';
             }
-            }
         })();
 
         return {success: true, message: "Pinning process started"};
@@ -35,7 +41,8 @@ export class PinningProcess {
             return {success: false, message: "ID not found or not being processed"};
         }
 
-        PinningProcess.instances.delete(id);
+        await PinningProcess.sdk?.protocols().get<S5Client>(PROTOCOL_S5)!.getSdk().unpin(id);
+
         return {success: true, message: "Pinning process removed"}
     }
 
@@ -51,18 +58,8 @@ export class PinningProcess {
 
         yield allStatuses ?? []; // Yield the final statuses
     }
-}
 
-// Example usage:
+    public static setupSdk(sdk: Sdk) {
-// (async () => {
+        PinningProcess.sdk = sdk;
-//     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();
-//         }
-//     }
-// })();

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

package.json

@@ -17,7 +17,7 @@
     "@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",
+    "@lumeweb/portal-sdk": "0.0.0-20240322221532",
     "@radix-ui/react-avatar": "^1.0.4",
     "@radix-ui/react-checkbox": "^1.0.4",
     "@radix-ui/react-dialog": "^1.0.5",