app/components/pinning-network-banner.tsx

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

app/data/pinning.ts

@@ -1,52 +1,45 @@
-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: 'processing' | 'completed';
+    status: 'inprogress' | 'completed' | 'stale';
 }
 
 // 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: 'processing'};
+        const pinningStatus: PinningStatus = { id, progress: 0, status: 'inprogress' };
         PinningProcess.instances.set(id, pinningStatus);
 
-        await s5.pin(id);
-
+        // Simulate async progress
         (async () => {
-            const ret = await s5.pinStatus(id);
-            pinningStatus.progress = ret.progress;
-            if (ret.status === 'completed') {
+            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) {
                     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" };
         }
 
-        await PinningProcess.sdk?.protocols().get<S5Client>(PROTOCOL_S5)!.getSdk().unpin(id);
-
-        return {success: true, message: "Pinning process removed"}
+        PinningProcess.instances.delete(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');
 
@@ -58,8 +51,18 @@ export class PinningProcess {
 
         yield allStatuses ?? []; // Yield the final statuses
     }
-
-    public static setupSdk(sdk: Sdk) {
-        PinningProcess.sdk = sdk;
-    }
 }
+
+// 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();
+//         }
+//     }
+// })();

app/root.tsx

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