CHANGELOG.md

@@ -1,5 +1,3 @@
-# [0.1.0-develop.12](https://git.lumeweb.com/LumeWeb/sdk/compare/v0.1.0-develop.11...v0.1.0-develop.12) (2023-10-11)
-
 # [0.1.0-develop.11](https://git.lumeweb.com/LumeWeb/sdk/compare/v0.1.0-develop.10...v0.1.0-develop.11) (2023-10-10)
 
 

npm-shrinkwrap.json

@@ -1,12 +1,12 @@
 {
     "name": "@lumeweb/sdk",
-    "version": "0.1.0-develop.12",
+    "version": "0.1.0-develop.11",
     "lockfileVersion": 3,
     "requires": true,
     "packages": {
         "": {
             "name": "@lumeweb/sdk",
-            "version": "0.1.0-develop.12",
+            "version": "0.1.0-develop.11",
             "dependencies": {
                 "@lumeweb/kernel-network-registry-client": "0.1.0-develop.10",
                 "@lumeweb/libkernel": "0.1.0-develop.65",

package.json

@@ -1,6 +1,6 @@
 {
     "name": "@lumeweb/sdk",
-    "version": "0.1.0-develop.12",
+    "version": "0.1.0-develop.11",
     "type": "module",
     "main": "lib/index.js",
     "types": "lib/index.d.ts",

src/components/lume/LumeProvider.tsx

@@ -6,9 +6,9 @@ import {
   useRef,
   useState,
 } from "react";
+import type { ReactNode } from "react";
 import { createClient as createNetworkRegistryClient } from "@lumeweb/kernel-network-registry-client";
 import { createNetworkClient } from "@lumeweb/libkernel/module";
-import { kernelLoaded, loginComplete } from "@lumeweb/libkernel/kernel";
 
 type SyncState = "done" | "syncing" | "error";
 
@@ -31,98 +31,102 @@ type LumeObject = {
 };
 
 type LumeContextType = {
-  isLoggedIn: boolean;
-  setIsLoggedIn: (value: boolean) => void;
+  isLoggedIn: boolean,
+  setIsLoggedIn: (value: boolean) => void,
   lume: LumeObject;
-  ready: boolean;
 };
 
 const networkRegistry = createNetworkRegistryClient();
 
 const LumeContext = createContext<LumeContextType | undefined>(undefined);
 
-const LumeProvider = ({ children }) => {
-  const [isLoggedIn, setIsLoggedIn] = useState(false);
-  const [ready, setReady] = useState(false);
+const LumeProvider = ({ children }: { children: ReactNode }) => {
   const [lume, setLume] = useState<LumeObject>({ networks: [] });
+
+  // Map to store unsubscribe functions for client.status subscriptions
   const statusUnsubs = useRef(new Map());
 
-  const handleStatusUpdate = useCallback((id, newNetwork) => {
-    setLume((prevLume) => {
-      const updatedNetworks = prevLume.networks.map((network) =>
-        network.id === id ? { ...network, ...newNetwork } : network,
-      );
-      return { ...prevLume, networks: updatedNetworks };
-    });
-  }, []);
+  const handleStatusUpdate = useCallback(
+    (id: string, newNetwork: NetworkStatus & { syncState: SyncState }) => {
+      setLume((prevLume) => {
+        const updatedNetworks = prevLume.networks.map((network) =>
+          network.id === id ? { ...network, ...newNetwork } : network,
+        );
+        return { ...prevLume, networks: updatedNetworks };
+      });
+    },
+    [],
+  );
 
-  const fetchAndUpdateNetworks = async () => {
-    try {
-      const types = await networkRegistry.getTypes();
-      const newNetworksMap = new Map();
-      const newStatusUnsubs = new Map();
+  const update = async () => {
+    const types = await networkRegistry.getTypes();
+    const newNetworksMap = new Map(); // Use a Map to prevent duplicates based on chainId
+    const newStatusUnsubs = new Map();
 
-      for (const type of types) {
-        const list = await networkRegistry.getNetworksByType(type);
+    for (const type of types) {
+      const list = await networkRegistry.getNetworksByType(type);
 
-        for (const module of list) {
-          const client = createNetworkClient(module);
-          const name = await client.name();
+      for (const module of list) {
+        const client = createNetworkClient(module);
+        const name = await client.name();
 
-          const initialNetworkStatus = {
-            peers: 0,
-            ready: false,
-            sync: 0,
-            type,
-            name,
-            id: module,
-            syncState: "syncing",
-          };
+        const network: Network = {
+          peers: 0,
+          ready: false,
+          sync: 0,
+          type,
+          name,
+          id: module,
+          syncState: "syncing",
+        };
 
-          const statusUnsub = client.status((newStatus) => {
-            const syncState = newStatus.ready
-              ? "done"
-              : newStatus.error
-              ? "error"
-              : "syncing";
-            handleStatusUpdate(module, { ...newStatus, syncState });
+        // Subscribe to status updates
+        const statusUnsub = client.status((newStatus: NetworkStatus) => {
+          let syncState: SyncState = "syncing";
+
+          if (newStatus.ready) {
+            syncState = "done";
+          } else if (newStatus.error) {
+            syncState = "error";
+          }
+
+          handleStatusUpdate(module, {
+            ...newStatus,
+            syncState,
           });
+        });
+        newStatusUnsubs.set(module, statusUnsub);
 
-          newStatusUnsubs.set(module, statusUnsub);
-          newNetworksMap.set(module, initialNetworkStatus);
-        }
+        newNetworksMap.set(module, network); // Store network in map to prevent duplicates
       }
-
-      statusUnsubs.current.forEach((unsub) => unsub());
-      statusUnsubs.current = newStatusUnsubs;
-
-      setLume((prevLume) => ({
-        ...prevLume,
-        networks: Array.from(newNetworksMap.values()),
-      }));
-    } catch (error) {
-      console.error("Error fetching and updating networks:", error);
     }
+
+    // Unsubscribe from previous status updates
+    statusUnsubs.current.forEach((unsub) => unsub());
+    // Store new unsubscribe functions
+    statusUnsubs.current = newStatusUnsubs;
+
+    setLume((prevLume) => ({
+      ...prevLume,
+      networks: Array.from(newNetworksMap.values()),
+    })); // Convert Map values to array
   };
 
+  const subDone = networkRegistry.subscribeToUpdates(update);
+
   useEffect(() => {
-    fetchAndUpdateNetworks();
-
-    loginComplete().then(() => setIsLoggedIn(true));
-    kernelLoaded().then(() => setReady(true));
-
-    const subDone = networkRegistry.subscribeToUpdates(fetchAndUpdateNetworks);
+    update(); // Initial update on component mount
 
     return () => {
-      subDone();
+      subDone(); // Unsubscribe from network registry updates on component unmount
+      // Unsubscribe from all client.status updates
       statusUnsubs.current.forEach((unsub) => unsub());
     };
-  }, [fetchAndUpdateNetworks]);
+  }, []);
+  const [isLoggedIn, setIsLoggedIn] = useState(false);
 
   return (
-    <LumeContext.Provider value={{ lume, ready, isLoggedIn, setIsLoggedIn }}>
-      {children}
-    </LumeContext.Provider>
+    <LumeContext.Provider value={{ lume, isLoggedIn, setIsLoggedIn }}>{children}</LumeContext.Provider>
   );
 };