Merge pull request #148 from waku-org/danisharora/switch-ethpm-relay

refactor: change eth-pm using lightnode, filter to now use relay
waku-org · Nov 10, 2022 · 985f738 · 985f738
2 parents 9f27ef9 + 2c3a8af
commit 985f738
Show file tree

Hide file tree

Showing 8 changed files with 194 additions and 48 deletions.
diff --git a/eth-pm/craco.config.js b/eth-pm/craco.config.js
@@ -0,0 +1,27 @@
+const { getLoaders, loaderByName } = require("@craco/craco");
+
+module.exports = {
+  webpack: {
+    configure: (webpackConfig) => {
+      const { hasFoundAny, matches } = getLoaders(
+        webpackConfig,
+        loaderByName("babel-loader")
+      );
+
+      if (hasFoundAny) {
+        matches.forEach((c) => {
+          // Modify test to include cjs for @chainsafe/libp2p-gossipsub rpc module
+          if (c.loader.test.toString().includes("mjs")) {
+            if (c.loader.test.toString().includes("jsx")) {
+              c.loader.test = /\.(js|cjs|mjs|jsx|ts|tsx)$/;
+            } else {
+              c.loader.test = /\.(js|cjs|mjs|ts)$/;
+            }
+          }
+        });
+      }
+
+      return webpackConfig;
+    },
+  },
+};
diff --git a/eth-pm/package.json b/eth-pm/package.json
@@ -17,9 +17,8 @@
     "uint8arrays": "^3.1.0"
   },
   "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build",
-    "eject": "react-scripts eject",
+    "start": "GENERATE_SOURCEMAP=false PORT=3001 craco start",
+    "build": "GENERATE_SOURCEMAP=false craco build",
     "fix": "run-s fix:*",
     "test": "run-s build test:*",
     "test:lint": "eslint src --ext .ts --ext .tsx",
@@ -49,6 +48,7 @@
     ]
   },
   "devDependencies": {
+    "@craco/craco": "^6.4.5",
     "@ethersproject/shims": "^5.5.0",
     "@types/jest": "^27.4.0",
     "@types/node": "^17.0.19",

diff --git a/eth-pm/pnpm-lock.yaml b/eth-pm/pnpm-lock.yaml
diff --git a/eth-pm/src/App.tsx b/eth-pm/src/App.tsx
@@ -2,7 +2,7 @@ import "@ethersproject/shims";
 
 import React, { useEffect, useState } from "react";
 import "./App.css";
-import type { WakuLight } from "js-waku/lib/interfaces";
+import type { WakuPrivacy } from "js-waku/lib/interfaces";
 import { AsymDecoder, SymDecoder } from "js-waku/lib/waku_message/version_1";
 import { KeyPair, PublicKeyMessageEncryptionKey } from "./crypto";
 import { Message } from "./messaging/Messages";
@@ -67,7 +67,7 @@ const useStyles = makeStyles({
 });
 
 function App() {
-  const [waku, setWaku] = useState<WakuLight>();
+  const [waku, setWaku] = useState<WakuPrivacy>();
   const [provider, setProvider] = useState<Web3Provider>();
   const [encryptionKeyPair, setEncryptionKeyPair] = useState<
     KeyPair | undefined
@@ -80,11 +80,9 @@ function App() {
   const [messages, setMessages] = useState<Message[]>([]);
   const [address, setAddress] = useState<string>();
   const [peerStats, setPeerStats] = useState<{
-    filterPeers: number;
-    lightPushPeers: number;
+    relayPeers: number;
   }>({
-    filterPeers: 0,
-    lightPushPeers: 0,
+    relayPeers: 0,
   });
 
   const classes = useStyles();
@@ -118,17 +116,7 @@ function App() {
 
     let unsubscribe: undefined | (() => Promise<void>);
 
-    waku.filter
-      .subscribe([publicKeyMessageDecoder], observerPublicKeyMessage)
-      .then(
-        (_unsubscribe) => {
-          console.log("subscribed to ", PublicKeyContentTopic);
-          unsubscribe = _unsubscribe;
-        },
-        (e) => {
-          console.error("Failed to subscribe", e);
-        }
-      );
+    waku.relay.addObserver(publicKeyMessageDecoder, observerPublicKeyMessage);
 
     return function cleanUp() {
       if (typeof unsubscribe === "undefined") return;
@@ -163,14 +151,7 @@ function App() {
 
     let unsubscribe: undefined | (() => Promise<void>);
 
-    waku.filter.subscribe([privateMessageDecoder], observerPrivateMessage).then(
-      (_unsubscribe) => {
-        unsubscribe = _unsubscribe;
-      },
-      (e) => {
-        console.error("Failed to subscribe", e);
-      }
-    );
+    waku.relay.addObserver(privateMessageDecoder, observerPrivateMessage);
 
     return function cleanUp() {
       if (typeof unsubscribe === "undefined") return;
@@ -182,12 +163,10 @@ function App() {
     if (!waku) return;
 
     const interval = setInterval(async () => {
-      const lightPushPeers = await waku.store.peers();
-      const filterPeers = await waku.filter.peers();
+      const peers = waku.relay.getPeers();
 
       setPeerStats({
-        filterPeers: filterPeers.length,
-        lightPushPeers: lightPushPeers.length,
+        relayPeers: peers.length,
       });
     }, 1000);
     return () => clearInterval(interval);
@@ -215,8 +194,7 @@ function App() {
               />
             </IconButton>
             <Typography className={classes.peers} aria-label="connected-peers">
-              Peers: {peerStats.filterPeers} filter, {peerStats.lightPushPeers}{" "}
-              light push
+              (Relay) Peers: {peerStats.relayPeers}
             </Typography>
             <Typography variant="h6" className={classes.title}>
               Ethereum Private Message