feat!: remove usePeers, upgrade waku (#9)

* upgrade waku version, remove usePeers (from prev discussions)

* fix formatting

* bumb to 0.0.2

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@waku/react",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "description": "React hooks and components to use js-waku",
   "type": "module",
   "main": "dist/index.cjs.js",
@@ -59,8 +59,8 @@
     "node": ">=18"
   },
   "dependencies": {
-    "@waku/core": "^0.0.10",
+    "@waku/sdk": "^0.0.16",
-    "@waku/create": "^0.0.6"
+    "@waku/relay": "^0.0.3"
   },
   "devDependencies": {
     "@rollup/plugin-commonjs": "^24.0.1",
@@ -70,7 +70,7 @@
     "@types/react": "^18.0.28",
     "@types/testing-library__jest-dom": "^5.14.5",
     "@typescript-eslint/eslint-plugin": "^5.52.0",
-    "@waku/interfaces": "^0.0.7",
+    "@waku/interfaces": "^0.0.15",
     "bundlewatch": "^0.3.3",
     "eslint": "^8.34.0",
     "eslint-config-prettier": "^8.6.0",

src/index.ts

@@ -4,6 +4,5 @@ export { useCreateContentPair } from "./useCreatContentPair";
 export { useCreateLightNode, useCreateRelayNode } from "./useCreateWaku";
 export { useFilterMessages } from "./useFilterMessages";
 export { useLightPush } from "./useLightPush";
-export { usePeers } from "./usePeers";
 export { useStoreMessages } from "./useStoreMessages";
 export { LightNodeProvider, RelayNodeProvider, useWaku } from "./WakuProvider";

src/types.ts

@@ -1,7 +1,6 @@
-import { RelayCreateOptions, WakuOptions } from "@waku/core";
+import type { ProtocolCreateOptions, Protocols, Waku } from "@waku/interfaces";
-import type { Decoder, Encoder } from "@waku/core/dist/lib/message/version_0";
+import type { RelayCreateOptions } from "@waku/relay";
-import type { CreateOptions } from "@waku/create";
+import type { waku } from "@waku/sdk";
-import type { Protocols, Waku } from "@waku/interfaces";
 
 export type HookState = {
   isLoading: boolean;
@@ -17,14 +16,14 @@ export type BootstrapNodeOptions<T = {}> = {
   protocols?: Protocols[];
 };
 
-export type LightNodeOptions = CreateOptions & WakuOptions;
+export type LightNodeOptions = ProtocolCreateOptions & waku.WakuOptions;
-export type RelayNodeOptions = CreateOptions &
+export type RelayNodeOptions = ProtocolCreateOptions &
-  WakuOptions &
+  waku.WakuOptions &
   Partial<RelayCreateOptions>;
 
 export type ContentPair = {
-  encoder: Encoder;
+  encoder: waku.Encoder;
-  decoder: Decoder;
+  decoder: waku.Decoder;
 };
 
 export type ReactChildrenProps = {

src/useCreatContentPair.ts

@@ -1,6 +1,5 @@
 import React from "react";
-import { createDecoder, createEncoder } from "@waku/core";
+import { createDecoder, createEncoder, waku } from "@waku/sdk";
-import type { Decoder, Encoder } from "@waku/core/dist/lib/message/version_0";
 
 import type { ContentPair } from "./types";
 
@@ -14,15 +13,15 @@ export const useCreateContentPair = (
   contentTopic: string,
   ephemeral = false,
 ): ContentPair => {
-  const [encoder, setEncoder] = React.useState<Encoder>(
+  const [encoder, setEncoder] = React.useState<waku.Encoder>(
-    createEncoder(contentTopic, ephemeral),
+    createEncoder({ contentTopic, ephemeral }),
   );
-  const [decoder, setDecoder] = React.useState<Decoder>(
+  const [decoder, setDecoder] = React.useState<waku.Decoder>(
     createDecoder(contentTopic),
   );
 
   React.useEffect(() => {
-    setEncoder(createEncoder(contentTopic, ephemeral));
+    setEncoder(createEncoder({ contentTopic, ephemeral }));
     setDecoder(createDecoder(contentTopic));
   }, [contentTopic, ephemeral]);
 

src/useCreateWaku.ts

@@ -1,7 +1,6 @@
 import React from "react";
-import { waitForRemotePeer } from "@waku/core";
-import { createLightNode, createRelayNode } from "@waku/create";
 import type { LightNode, RelayNode, Waku } from "@waku/interfaces";
+import { createLightNode, createRelayNode, waitForRemotePeer } from "@waku/sdk";
 
 import type {
   BootstrapNodeOptions,

src/useFilterMessages.ts

@@ -3,6 +3,7 @@ import type {
   IDecodedMessage,
   IDecoder,
   IFilter,
+  Unsubscribe,
   Waku,
 } from "@waku/interfaces";
 
@@ -54,11 +55,10 @@ export const useFilterMessages = (
       return;
     }
 
-    let unsubscribe: null | (() => Promise<void>) = null;
+    let unsubscribe: null | Unsubscribe = null;
     setLoading(true);
 
-    node.filter
+    (node.filter.subscribe([decoder], pushMessage) as Promise<Unsubscribe>)
-      .subscribe([decoder], pushMessage)
       .then((unsubscribeFn) => {
         setLoading(false);
         unsubscribe = unsubscribeFn;

src/useLightPush.ts

@@ -39,7 +39,7 @@ export const useLightPush = (
 
   const push = React.useCallback<PushFn>(
     (message, opts = undefined) => {
-      return node!.lightPush.push(encoder as IEncoder, message, opts);
+      return node!.lightPush.send(encoder as IEncoder, message, opts);
     },
     [node, encoder],
   );

src/usePeers.ts

@@ -1,71 +0,0 @@
-import React from "react";
-import type {
-  Peer,
-  PeerProtocolsChangeData,
-} from "@libp2p/interface-peer-store";
-import type { Waku } from "@waku/interfaces";
-
-type UsePeersParams = {
-  node: undefined | Waku;
-};
-
-type UsePeersResults = {
-  storePeers?: undefined | Peer[];
-  filterPeers?: undefined | Peer[];
-  lightPushPeers?: undefined | Peer[];
-  peerExchangePeers?: undefined | Peer[];
-};
-
-/**
- * Hook returns map of peers for different protocols.
- * If protocol is not implemented on the node peers are undefined.
- * @example
- * const { storePeers } = usePeers({ node });
- * @param {Waku} params.node - Waku node, if not set then no peers will be returned
- * @returns {Object} map of peers, if some of the protocols is not implemented then undefined
- */
-export const usePeers = (params: UsePeersParams): UsePeersResults => {
-  const { node } = params;
-  const [peers, setPeers] = React.useState<UsePeersResults>({});
-
-  React.useEffect(() => {
-    if (!node) {
-      return;
-    }
-
-    const listener = async (_event: CustomEvent<PeerProtocolsChangeData>) => {
-      const peers = await Promise.all([
-        handleCatch(node?.store?.peers()),
-        handleCatch(node?.filter?.peers()),
-        handleCatch(node?.lightPush?.peers()),
-        handleCatch(node?.peerExchange?.peers()),
-      ]);
-
-      setPeers({
-        storePeers: peers[0],
-        filterPeers: peers[1],
-        lightPushPeers: peers[2],
-        peerExchangePeers: peers[3],
-      });
-    };
-
-    node.libp2p.peerStore.addEventListener("change:protocols", listener);
-
-    return () => {
-      node.libp2p.peerStore.removeEventListener("change:protocols", listener);
-    };
-  }, [node, setPeers]);
-
-  return peers;
-};
-
-// TODO: handle error in case fetching of peers failed
-function handleCatch(promise?: Promise<Peer[]>): Promise<Peer[] | undefined> {
-  if (!promise) {
-    return Promise.resolve(undefined);
-  }
-
-  return promise.catch((_) => {
-    return undefined;
-  });
-}